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