DataScope26/WEB

1import { useState } from "react";2import { useNavigate } from "react-router-dom";3import { useAccountRecovery } from "../hooks/useAccountRecovery.js";4import ButtonPrimary from "../components/ButtonPrimary.jsx";5import "./AccountRecovery.css";6 7export default function ForgotPasswordPage() {8  const navigate = useNavigate();9  const { sendRecoveryCode, isLoading, error, success } = useAccountRecovery();10  const [email, setEmail] = useState("");11 12  const handleSubmit = async (event) => {13    event.preventDefault();14    const normalizedEmail = email.trim().toLowerCase();15    const ok = await sendRecoveryCode(normalizedEmail);16 17    if (ok) {18      navigate(`/recover-account?email=${encodeURIComponent(normalizedEmail)}`);19    }20  };21 22  return (23    <div className="account-recovery-page">24      <div className="account-recovery-card">25        <div className="account-recovery-header">26          <span className="account-recovery-badge">Seguridad</span>27          <h1>Recuperar acceso</h1>28          <p>Ingresá tu email para recibir el código de recuperación.</p>29        </div>30 31        <form className="account-recovery-form" onSubmit={handleSubmit}>32          <div className="account-recovery-field">33            <label htmlFor="recovery-email">Email</label>34            <input35              id="recovery-email"36              type="email"37              value={email}38              onChange={(event) => setEmail(event.target.value)}39              placeholder="nombre@usuario.com"40              autoComplete="email"41              required42            />43          </div>44 45          {error && (46            <div className="account-recovery-message account-recovery-message--error">{error}</div>47          )}48 49          {success && (50            <div className="account-recovery-message account-recovery-message--success">{success}</div>51          )}52 53          <div className="account-recovery-actions">54            <ButtonPrimary type="submit" disabled={isLoading}>55              {isLoading ? "Enviando..." : "Enviar código"}56            </ButtonPrimary>57 58            <button59              type="button"60              className="account-recovery-link"61              onClick={() => navigate("/")}62            >63              Volver al inicio64            </button>65          </div>66        </form>67      </div>68    </div>69  );70}71