Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 1978 | Rev 1989 | 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';
1966 steven 4 
 
1968 steven 5 
const StyledSpinnerContainer = styled.div`
6 
  position: absolute;
7 
  left: 0;
8 
  top: 0;
9 
  width: 100%;
10 
  height: 100%;
11 
  background: rgba(255, 255, 255, 0.4);
12 
  display: flex;
13 
  justify-content: center;
14 
  align-items: center;
15 
  z-index: 300;
16 
`;
1966 steven 17 
function CloseAccount() {
18 
    const [showInputCode, setShowInputCode] = useState(false);
1968 steven 19 
    const [loading, setLoading] = useState(false);
1966 steven 20 
    const handleGetCode  = () => {
21 
        try {
22 
            setShowInputCode(true)
23 
            console.log('>>: get code')
24 
        } catch (error) {
25 
            console.log('>>: error > ', error)
26 
        }
27 
    }
1968 steven 28 
    const handleSubmit = (e) => {
29 
        try {
30 
            setLoading(true)
31 
            e.preventDefault();
32 
 
33 
        } catch (error) {
34 
            console.log('>>: error > ', error)
35 
        }finally{
36 
            setLoading(false)
37 
        }
38 
    }
1971 steven 39 
 
1977 steven 40 
    const CloseAccountContent = () => {
1975 steven 41 
        if(showInputCode){
42 
            return <form onSubmit={handleSubmit}>
43 
                <div className="form-group">
44 
                    <label htmlFor="exampleInputEmail1">Ingrese el codigo</label>
45 
                    <input type="email" className="form-control" id="exampleInputEmail1" />
46 
                    <small id="emailHelp" className="form-text text-muted">Este codigo fue enviado a tu correo electrónico.</small>
47 
                </div>
48 
                <button type="submit" className="btn btn-primary">Enviar</button>
49 
            </form>
50 
        }else{
51 
            return <>
1983 steven 52 
                <h1 className="text-center">¿Esta seguro de eliminar su cuenta?</h1>
1975 steven 53 
                <div className="row">
1983 steven 54 
                    <div className='col-md col-sm-12 text-right'>
1975 steven 55 
                        <button className="btn btn-primary" onClick={handleGetCode} disabled={showInputCode}>Si, estoy seguro</button>
56 
                    </div>
1983 steven 57 
                    <div className='col-md col-sm-12 text-left'>
58 
                        <button className="btn btn-primary" disabled={showInputCode}>No estoy seguro</button>
1975 steven 59 
                    </div>
60 
                </div>
61 
            </>
62 
        }
1977 steven 63 
    }
1971 steven 64 
    return (
1978 steven 65 
        <div className="acc-setting h-100 d-flex justify-content-center align-items-center" style={{ position: "relative" }}>
1971 steven 66 
            <div className="container">
1978 steven 67 
                <div className="">
1974 steven 68 
                    {CloseAccountContent()}
1971 steven 69 
                </div>
1966 steven 70 
            </div>
1968 steven 71 
            {loading && (
72 
                <StyledSpinnerContainer>
73 
                    <Spinner />
74 
                </StyledSpinnerContainer>
75 
            )}
1966 steven 76 
        </div>
77 
    )
78 
}
79 
 
80 
export default CloseAccount