Proyectos de Subversion LeadersLinked - Antes de SPA

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';

export default (props) => {
    const {
        captchaKey,
        aes,
    } = props.backendVars;

    const {
        register,
        handleSubmit,
        errors,
        setError,
        clearErrors,
        getValues,
        setValue,
        watch
    } = useForm();

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

    // states
    const [rememberChecked, setRememberChecked] = React.useState(false);
    const [isLoading, setIsLoading] = React.useState(false);
    const [isErrorConfirmation, setIsErrorConfirmation] = React.useState(false);
    // const [password, setPassword ] = React.useState('')
    // const [confirmation, setConfirmation] = React.useState('')

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

    const validatePassword = (e) => {
        if (e.target.value !== watch('password')) {
            return setIsErrorConfirmation(true)
        }

        return setIsErrorConfirmation(false)
    }

    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="^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$^x%x*-]).{6,16}$"
                                                    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"
                                                    maxLength="16"
                                                />
                                                <i className="la la-lock"></i>
                                            </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",
                                                    })}
                                                    pattern="^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$^x%x*-]).{6,16}$"
                                                    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"
                                                    maxLength="16"
                                                    onChange={validatePassword}
                                                />
                                                <i className="la la-lock"></i>
                                            </div>
                                            {isErrorConfirmation && <FormErrorFeedback>Disculpe, las claves tienen que coincidir</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>
    )
}