Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 1990 | Rev 1992 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1972 steven 1 
import React,  { useState, useMemo } from 'react';
1968 steven 2 
import Spinner from '../../../shared/loading-spinner/Spinner';
1969 steven 3 
import styled from 'styled-components';
1989 steven 4 
import axios from '../../../utils/axios';
1966 steven 5 
 
1968 steven 6 
const StyledSpinnerContainer = styled.div`
7 
  position: absolute;
8 
  left: 0;
9 
  top: 0;
10 
  width: 100%;
11 
  height: 100%;
12 
  background: rgba(255, 255, 255, 0.4);
13 
  display: flex;
14 
  justify-content: center;
15 
  align-items: center;
16 
  z-index: 300;
17 
`;
1966 steven 18 
function CloseAccount() {
19 
    const [showInputCode, setShowInputCode] = useState(false);
1968 steven 20 
    const [loading, setLoading] = useState(false);
1991 steven 21 
    const handleGetCode  = async () => {
1966 steven 22 
        try {
1991 steven 23 
            setShowInputCode(true)
1990 steven 24 
            setLoading(true)
25 
            const res = await axios.get('/account-settings/delete-account');
1989 steven 26 
            console.log('>>: res > ', res)
1966 steven 27 
            console.log('>>: get code')
28 
        } catch (error) {
29 
            console.log('>>: error > ', error)
1990 steven 30 
        }finally{
31 
            setLoading(false)
1966 steven 32 
        }
33 
    }
1990 steven 34 
 
1991 steven 35 
    const resendCode = async () => {
36 
        try {
37 
            setLoading(true)
38 
            const res = await axios.get('/account-settings/delete-account');
39 
            console.log('>>: resend code > ', res)
40 
        } catch (error) {
41 
            console.log('>>: error > ', error)
42 
        }finally{
43 
            setLoading(false)
44 
        }
45 
    }
46 
 
1990 steven 47 
    const handleSubmit = async (e) => {
1968 steven 48 
        try {
1990 steven 49 
            e.preventDefault()
1968 steven 50 
            setLoading(true)
1990 steven 51 
            const res = await axios.post('/account-settings/delete-account');
52 
            console.log('>>: res > ', res)
1968 steven 53 
        } catch (error) {
54 
            console.log('>>: error > ', error)
55 
        }finally{
56 
            setLoading(false)
57 
        }
58 
    }
1971 steven 59 
 
1977 steven 60 
    const CloseAccountContent = () => {
1975 steven 61 
        if(showInputCode){
62 
            return <form onSubmit={handleSubmit}>
63 
                <div className="form-group">
64 
                    <label htmlFor="exampleInputEmail1">Ingrese el codigo</label>
65 
                    <input type="email" className="form-control" id="exampleInputEmail1" />
66 
                    <small id="emailHelp" className="form-text text-muted">Este codigo fue enviado a tu correo electrónico.</small>
1991 steven 67 
                    <button className="btn btn-secondary btn-sm" onClick={() => resendCode()}>
1990 steven 68 
                        ¿No ha recibido su correo?, solicitue un codigo nuevo
69 
                    </button>
1975 steven 70 
                </div>
71 
                <button type="submit" className="btn btn-primary">Enviar</button>
72 
            </form>
73 
        }else{
74 
            return <>
1983 steven 75 
                <h1 className="text-center">¿Esta seguro de eliminar su cuenta?</h1>
1975 steven 76 
                <div className="row">
1983 steven 77 
                    <div className='col-md col-sm-12 text-right'>
1991 steven 78 
                        <button className="btn btn-primary" onClick={() => handleGetCode()} disabled={showInputCode}>Si, estoy seguro</button>
1975 steven 79 
                    </div>
1983 steven 80 
                    <div className='col-md col-sm-12 text-left'>
81 
                        <button className="btn btn-primary" disabled={showInputCode}>No estoy seguro</button>
1975 steven 82 
                    </div>
83 
                </div>
84 
            </>
85 
        }
1977 steven 86 
    }
1971 steven 87 
    return (
1978 steven 88 
        <div className="acc-setting h-100 d-flex justify-content-center align-items-center" style={{ position: "relative" }}>
1971 steven 89 
            <div className="container">
1978 steven 90 
                <div className="">
1974 steven 91 
                    {CloseAccountContent()}
1971 steven 92 
                </div>
1966 steven 93 
            </div>
1968 steven 94 
            {loading && (
95 
                <StyledSpinnerContainer>
96 
                    <Spinner />
97 
                </StyledSpinnerContainer>
98 
            )}
1966 steven 99 
        </div>
100 
    )
101 
}
102 
 
103 
export default CloseAccount