Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

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