Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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