DataScope26/WEB

1import { useMemo, useState } from "react";2import { useNavigate, useSearchParams } from "react-router-dom";3import { useAccountRecovery } from "../hooks/useAccountRecovery.js";4import ButtonPrimary from "../components/ButtonPrimary.jsx";5import "./AccountRecovery.css";6 7export default function VerifyRecoveryCodePage() {8  const navigate = useNavigate();9  const [searchParams] = useSearchParams();10  const email = useMemo(() => searchParams.get("email") || "", [searchParams]);11  const { verifyRecoveryCode, isLoading, error, success } = useAccountRecovery();12  const [code, setCode] = useState("");13 14  const handleSubmit = async (event) => {15    event.preventDefault();16    const ok = await verifyRecoveryCode(email, code);17 18    if (ok) {19      setCode("");20    }21  };22 23  return (24    <div className="account-recovery-page">25      <div className="account-recovery-card">26        <div className="account-recovery-header">27          <span className="account-recovery-badge">Verificación</span>28          <h1>Ingresá el código</h1>29          <p>30            Te enviamos un código de 6 dígitos a <strong>{email || "tu email"}</strong>.31          </p>32        </div>33 34        <form className="account-recovery-form" onSubmit={handleSubmit}>35          <div className="account-recovery-field">36            <label htmlFor="recovery-code">Código de recuperación</label>37            <input38              id="recovery-code"39              type="text"40              inputMode="numeric"41              pattern="[0-9]*"42              maxLength={6}43              value={code}44              onChange={(event) => setCode(event.target.value.replace(/\D/g, "").slice(0, 6))}45              placeholder="123456"46              className="account-recovery-code"47              autoComplete="one-time-code"48              required49            />50          </div>51 52          {error && (53            <div className="account-recovery-message account-recovery-message--error">{error}</div>54          )}55 56          {success && (57            <div className="account-recovery-message account-recovery-message--success">{success}</div>58          )}59 60          <div className="account-recovery-actions">61            <ButtonPrimary type="submit" disabled={isLoading || !email}>62              {isLoading ? "Verificando..." : "Confirmar código"}63            </ButtonPrimary>64 65            <button66              type="button"67              className="account-recovery-link"68              onClick={() => navigate(`/forgot-password?email=${encodeURIComponent(email)}`)}69            >70              Solicitar otro código71            </button>72 73            <button74              type="button"75              className="account-recovery-link"76              onClick={() => navigate("/")}77            >78              Volver al inicio79            </button>80          </div>81        </form>82 83        <div className="account-recovery-meta">84          El código expira en 5 minutos por seguridad.85        </div>86      </div>87    </div>88  );89}90