reset endpoint + frontend reset and login pages add

frontend/src/features/auth/components/ResetComponent.tsx

@@ -1,14 +1,37 @@
 import styles from "./ResetComponent.module.css";
-import { useState, type ReactElement } from "react";
+import { useState, type ReactElement, type SubmitEvent } from "react";
 import { Link } from "react-router-dom";
+import { requestPasswordReset } from "../../../api/ResetAPI/Reset";
 
 export function Reset():ReactElement {
     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);
+            window.location.href = "http://localhost:8000/docs";
+        } catch (err) {
+            console.error(err);
+            setErrors({ email: "Ошибка, попробуйте позже" });
+        }
+    };
 
     return (
         <>
             <div className={styles.wrapper_1}>
-                <form>
+                <form noValidate onSubmit={handleSubmit}>
                 <h1 className={styles.Title}> Восстановление пароля </h1>
                 <p className={styles.Description}>Введите Email, и мы отправим на него новый пароль</p>
                     <label className={styles.Fields} htmlFor="email">Email</label>
@@ -20,13 +43,16 @@ export function Reset():ReactElement {
                             autoComplete="email"
                             value={email}
                             onChange={(e) => setEmail(e.target.value)}
+                            onBlur={() => setErrors((p) => ({ ...p, email: validateEmail(email) }))}
                             placeholder="Email"
-                            required
+                            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">