Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

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