Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 1969 | Rev 1971 | 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';
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);
1966 steven 21
    const handleGetCode  = () => {
22
        try {
23
            setShowInputCode(true)
24
            console.log('>>: get code')
25
        } catch (error) {
26
            console.log('>>: error > ', error)
27
        }
28
    }
1968 steven 29
    const handleSubmit = (e) => {
30
        try {
31
            setLoading(true)
32
            e.preventDefault();
33
 
34
        } catch (error) {
35
            console.log('>>: error > ', error)
36
        }finally{
37
            setLoading(false)
38
        }
39
    }
1966 steven 40
    return (
1967 steven 41
        <div className="acc-setting h-100" style={{ position: "relative" }}>
1966 steven 42
            <div className="container">
43
                <h1>¿Esta seguro de eliminar su cuenta?</h1>
44
                <div className="row">
45
                    <div className='col-md col-sm-12'>
1970 steven 46
                        <button className="btn btn-primary" onClick={handleGetCode} disabled={showInputCode}>Si, estoy seguro</button>
1966 steven 47
                    </div>
48
                    <div className='col-md col-sm-12'>
1970 steven 49
                        <button className="btn btn-primary" disabled={showInputCode}>No</button>
1966 steven 50
                    </div>
51
                </div>
52
            </div>
53
            {
54
                showInputCode && (
1968 steven 55
                    <form onSubmit={handleSubmit}>
56
                        <div class="form-group">
57
                            <label for="exampleInputEmail1">Ingrese el codigo</label>
1970 steven 58
                            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" />
1968 steven 59
                            <small id="emailHelp" class="form-text text-muted">Este codigo fue enviado a tu correo electrónico.</small>
60
                        </div>
1970 steven 61
                        <button type="submit" class="btn btn-primary">Enviar</button>
1968 steven 62
                    </form>
1966 steven 63
                )
64
            }
1968 steven 65
            {loading && (
66
                <StyledSpinnerContainer>
67
                    <Spinner />
68
                </StyledSpinnerContainer>
69
            )}
1966 steven 70
        </div>
71
    )
72
}
73
 
74
export default CloseAccount