Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

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