75 lines
3.6 KiB
TypeScript
75 lines
3.6 KiB
TypeScript
import styles from "./ResetComponent.module.css";
|
|
import { useState, type ReactElement, type SubmitEvent } from "react";
|
|
import { Link, useNavigate } from "react-router-dom";
|
|
import { requestPasswordReset } from "../../../api/ResetAPI/Reset";
|
|
|
|
export function Reset():ReactElement {
|
|
const navigate = useNavigate();
|
|
const [email, setEmail] = useState("");
|
|
const [errors, setErrors] = useState<{ email?: string;}>({});
|
|
|
|
const validateEmail = (value: string) => {
|
|
if (!value) return "Введите email";
|
|
if (!/^\S+@\S+\.\S+$/.test(value)) return "Некорректный email";
|
|
return undefined;
|
|
};
|
|
const handleSubmit = async (e: SubmitEvent<HTMLFormElement>) => {
|
|
e.preventDefault();
|
|
const next = {
|
|
email: validateEmail(email),
|
|
};
|
|
setErrors(next);
|
|
if (next.email) return;
|
|
try {
|
|
await requestPasswordReset(email);
|
|
navigate("/");
|
|
} catch (err) {
|
|
console.error(err);
|
|
setErrors({ email: "Ошибка, попробуйте позже" });
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div className={styles.wrapper_1}>
|
|
<form noValidate onSubmit={handleSubmit}>
|
|
<h1 className={styles.Title}> Восстановление пароля </h1>
|
|
<p className={styles.Description}>Введите Email, и мы отправим на него новый пароль</p>
|
|
<label className={styles.Fields} htmlFor="email">Email</label>
|
|
<div className={styles.email_field}>
|
|
<input
|
|
id="email"
|
|
name="email"
|
|
type="email"
|
|
autoComplete="email"
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
onBlur={() => setErrors((p) => ({ ...p, email: validateEmail(email) }))}
|
|
placeholder="Email"
|
|
aria-invalid={!!errors.email}
|
|
className={errors.email ? styles.inputError : undefined}
|
|
/>
|
|
<svg className={styles["email-icon"]} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
|
|
<rect x="3" y="5" width="18" height="14" rx="2.5" stroke="#72879A" strokeWidth="1.8"/>
|
|
<path d="m4.5 7 7.5 6 7.5-6" stroke="#72879A" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
|
|
</svg>
|
|
{errors.email && <p className={styles.errorText}>{errors.email}</p>}
|
|
</div>
|
|
<div className={styles.submitbtn}>
|
|
<button className={styles.submit} type="submit">
|
|
Отправить новый пароль
|
|
<svg className={styles["submit-arrow"]} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
|
|
<path d="M4 12h14" stroke="white" strokeWidth="2" strokeLinecap="round"/>
|
|
<path d="m13 6 6 6-6 6" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div className={styles.footer}>
|
|
<Link to="/" className={styles.login_link}>Вернуться ко входу</Link>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|