Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 2761 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

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

            142