Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev Autor Línea Nro. Línea
1 www 1 
import React from 'react'
2 
import { useForm } from 'react-hook-form';
3 
import Recaptcha from "react-recaptcha";
2573 stevensc 4 
import { axios } from '../../../../utils';
1 www 5 
import FormErrorFeedback from "../../../../shared/form-error-feedback/FormErrorFeedback";
662 steven 6 
import CryptoJSAesJson from '../../../../utils/crypto-js/cryptojs-aes-format';
1 www 7 
 
8 
export default (props) => {
9 
    const {
10 
        captchaKey,
11 
        aes,
12 
    } = props.backendVars;
13 
 
14 
    const {
15 
        register,
16 
        handleSubmit,
17 
        errors,
18 
        setError,
19 
        clearErrors,
20 
        getValues,
21 
        setValue,
22 
    } = useForm();
23 
 
2573 stevensc 24 
    // Recaptcha
1 www 25 
    const reCaptchaToken = React.useRef("");
26 
    const [isVerified, setIsVerified] = React.useState(false);
27 
    const reCaptchaInstance = React.useRef();
2573 stevensc 28 
 
1 www 29 
    // states
30 
    const [rememberChecked, setRememberChecked] = React.useState(false);
31 
    const [isLoading, setIsLoading] = React.useState(false);
32 
    // const [password, setPassword ] = React.useState('')
33 
    // const [confirmation, setConfirmation] = React.useState('')
2573 stevensc 34 
 
1 www 35 
    const loginVerifyCallbackHandler = (response) => {
36 
        reCaptchaToken.current = response;
37 
        setIsVerified(true);
38 
    };
39 
    const loginExpiredCallbackHandler = () => {
40 
        reCaptchaToken.current = "";
41 
        setIsVerified(false);
42 
    };
43 
    const handleOnRecaptchaLoad = () => {
44 
        reCaptchaToken.current = "";
45 
    };
46 
 
47 
    const resetCaptcha = () => {
48 
        reCaptchaInstance.current.reset();
49 
    }
50 
    React.useEffect(() => {
51 
        resetCaptcha()
52 
    }, []);
53 
    const submit = (data, event) => {
54 
        const formData = new FormData();
55 
        Object.entries(data).map(([key, value]) => {
56 
            if (key === "confirmation" && value)
57 
                return formData.append(key, CryptoJSAesJson.encrypt(value, aes));
58 
            if (key === "password" && value)
59 
                return formData.append(key, CryptoJSAesJson.encrypt(value, aes));
60 
        });
61 
        formData.append("captcha", reCaptchaToken.current);
2573 stevensc 62 
        axios.post(window.location.href, formData)
63 
            .then(res => {
64 
                if (res.data.success) {
65 
                    window.location.href = "/"
66 
                } else {
67 
                    setError('password', {
68 
                        type: "manual",
69 
                        message: typeof res.data.data === 'string' ? res.data.data : res.data.data.confirmation[0],
70 
                    });
71 
                }
72 
            }).catch(err => {
73 
                ('>>: err > ', err)
74 
            }).finally(() => {
75 
                resetCaptcha()
76 
            })
1 www 77 
        formData.append("captcha", reCaptchaToken.current);
78 
    }
2268 steven 79 
 
1 www 80 
    return (
2715 stevensc 81 
        <div className="sign_in_sec current">
82 
            <div className="row">
83 
                <div className="col-lg-12">
84 
                    <div className="login-sec">
85 
                        <div className="sign_in_sec current" id="tab-1">
86 
                            <h3>Reiniciar clave</h3>
87 
                            <form
88 
                                onSubmit={handleSubmit(submit)}
89 
                            >
90 
                                <div className="row">
91 
                                    <div className="col-lg-12 no-pdd">
92 
                                        <div className="inputContainer">
93 
                                            <div className="sn-field">
94 
                                                <input
95 
                                                    type="password"
96 
                                                    name="password"
97 
                                                    ref={register({
98 
                                                        required: "Este campo es requerido",
99 
                                                    })}
100 
                                                    pattern="^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$^x%x*-]).{6,16}$"
101 
                                                    title="La clave debe contener entre 6 y 16 caracteres, incluida una letra mayúscula, un número y un carácter especial #?!@$^%*-"
102 
                                                    placeholder="Nueva clave"
103 
                                                    maxLength="16"
104 
                                                />
105 
                                                <i className="la la-lock"></i>
1 www 106 
                                            </div>
2715 stevensc 107 
                                            {errors.password && (
108 
                                                <FormErrorFeedback>{errors.password.message}</FormErrorFeedback>
109 
                                            )}
1 www 110 
                                        </div>
2715 stevensc 111 
                                    </div>
112 
                                    <div className="col-lg-12 no-pdd">
113 
                                        <div className="inputContainer">
1 www 114 
                                            <div className="sn-field">
2715 stevensc 115 
                                                <input
116 
                                                    type="password"
117 
                                                    name="confirmation"
118 
                                                    ref={register({
119 
                                                        required: "Este campo es requerido",
120 
                                                    })}
121 
                                                    pattern="^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$^x%x*-]).{6,16}$"
122 
                                                    title="La clave debe contener entre 6 y 16 caracteres, incluida una letra mayúscula, un número y un carácter especial #?!@$^%*-"
123 
                                                    placeholder="Repita nueva clave"
124 
                                                    maxLength="16"
1 www 125 
                                                />
2715 stevensc 126 
                                                <i className="la la-lock"></i>
1 www 127 
                                            </div>
2715 stevensc 128 
                                            {errors.confirmation && (
129 
                                                <FormErrorFeedback>{errors.confirmation.message}</FormErrorFeedback>
130 
                                            )}
1 www 131 
                                        </div>
2715 stevensc 132 
                                    </div>
133 
                                    <div className="col-lg-12 no-pdd">
134 
                                        <div className="sn-field">
135 
                                            <Recaptcha
136 
                                                sitekey={captchaKey}
137 
                                                verifyCallback={loginVerifyCallbackHandler}
138 
                                                verifyCallbackName="loginVerifyCallbackHandler"
139 
                                                expiredCallback={loginExpiredCallbackHandler}
140 
                                                expiredCallbackName="loginExpiredCallbackHandler"
141 
                                                ref={reCaptchaInstance}
142 
                                                render="explicit"
143 
                                                onloadCallback={handleOnRecaptchaLoad}
144 
                                                hl="es"
145 
                                            />
1 www 146 
                                        </div>
147 
                                    </div>
2715 stevensc 148 
                                    <div className="col-lg-12 no-pdd">
149 
                                        <button type="submit" value="submit" id="btn-submit" disabled={!isVerified} >Guardar</button>
150 
                                    </div>
151 
                                </div>
152 
                            </form>
1 www 153 
                        </div>
2573 stevensc 154 
                    </div>
1 www 155 
                </div>
156 
            </div>
157 
        </div>
158 
    )
159 
}