Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */
import React from 'react'
import { useForm } from 'react-hook-form';
import Recaptcha from "react-recaptcha";
import { axios } from '../../../../utils';
import FormErrorFeedback from "../../../../shared/form-error-feedback/FormErrorFeedback";
import CryptoJSAesJson from '../../../../utils/crypto-js/cryptojs-aes-format';

const ResetPassword = ({ backendVars }) => {

    const { captchaKey, aes } = backendVars;
    const {
        register,
        handleSubmit,
        errors,
        setError,
        watch
    } = useForm({ mode: 'all' });

    const reCaptchaToken = React.useRef("");
    const [isVerified, setIsVerified] = React.useState(false);
    const reCaptchaInstance = React.useRef();

    const loginVerifyCallbackHandler = (response) => {
        reCaptchaToken.current = response;
        setIsVerified(true);
    };
    const loginExpiredCallbackHandler = () => {
        reCaptchaToken.current = "";
        setIsVerified(false);
    };
    const handleOnRecaptchaLoad = () => reCaptchaToken.current = ""
    const resetCaptcha = () => reCaptchaInstance.current.reset()

    React.useEffect(() => {
        resetCaptcha()
    }, []);

    const submit = (data) => {
        const formData = new FormData();
        Object.entries(data)
            .map(([key, value]) => {
                if ((key === "confirmation" || key === "password") && value)
                    return formData.append(key, CryptoJSAesJson.encrypt(value, aes));
            });
        formData.append("captcha", reCaptchaToken.current);
        axios.post(window.location.href, formData)
            .then(({ data }) => {
                if (!data.success) {
                    setError('password', {
                        type: "manual",
                        message: typeof data.data === 'string' ? data.data : data.data.confirmation[0],
                    });
                    return
                }
                window.location.href = "/"
            })
            .catch(err => console.log('>>: err > ', err))
            .finally(() => resetCaptcha())
        formData.append("captcha", reCaptchaToken.current);
    }

    return (
        <div className="sign_in_sec current">
            <div className="row">
                <div className="col-lg-12">
                    <div className="login-sec">
                        <div className="sign_in_sec current" id="tab-1">
                            <h3>Reiniciar clave</h3>
                            <form onSubmit={handleSubmit(submit)}>
                                <div className="row">
                                    <div className="col-lg-12 no-pdd">
                                        <div className="inputContainer">
                                            <div className="sn-field">
                                                <input
                                                    type="password"
                                                    name="password"
                                                    ref={register({
                                                        required: "Este campo es requerido",
                                                        pattern: {
                                                            value: /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$^x%x*-]).{6,16}$/i,
                                                            message: 'Debe contener entre 6 y 16 caracteres, incluida una letra mayúscula, un número y un carácter especial #?!@$^%*-'
                                                        }
                                                    })}
                                                    title="La clave debe contener entre 6 y 16 caracteres, incluida una letra mayúscula, un número y un carácter especial #?!@$^%*-"
                                                    placeholder="Nueva clave"
                                                />
                                                <i className="la la-lock" />
                                            </div>
                                            {errors.password && <FormErrorFeedback>{errors.password.message}</FormErrorFeedback>}
                                        </div>
                                    </div>
                                    <div className="col-lg-12 no-pdd">
                                        <div className="inputContainer">
                                            <div className="sn-field">
                                                <input
                                                    type="password"
                                                    name="confirmation"
                                                    ref={register({
                                                        required: "Este campo es requerido",
                                                        validate: (v) => v === watch('password') || 'Disculpe, las claves tienen que coincidir'
                                                    })}
                                                    title="La clave debe contener entre 6 y 16 caracteres, incluida una letra mayúscula, un número y un carácter especial #?!@$^%*-"
                                                    placeholder="Repita nueva clave"
                                                />
                                                <i className="la la-lock" />
                                            </div>
                                            {errors.confirmation && <FormErrorFeedback>{errors.confirmation.message}</FormErrorFeedback>}
                                        </div>
                                    </div>
                                    <div className="col-lg-12 no-pdd">
                                        <div className="sn-field">
                                            <Recaptcha
                                                sitekey={captchaKey}
                                                verifyCallback={loginVerifyCallbackHandler}
                                                verifyCallbackName="loginVerifyCallbackHandler"
                                                expiredCallback={loginExpiredCallbackHandler}
                                                expiredCallbackName="loginExpiredCallbackHandler"
                                                ref={reCaptchaInstance}
                                                render="explicit"
                                                onloadCallback={handleOnRecaptchaLoad}
                                                hl="es"
                                            />
                                        </div>
                                    </div>
                                    <div className="col-lg-12 no-pdd">
                                        <button type="submit" value="submit" id="btn-submit" disabled={!isVerified} >Guardar</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default ResetPassword