add password reset component

2026-09-24 16:19:38 +03:00
parent 3e0e82f016
commit 489014667c
9 changed files with 286 additions and 126 deletions
@@ -0,0 +1,47 @@
+import styles from "./ResetComponent.module.css";
+import { useState, type ReactElement } from "react";
+import { Link } from "react-router-dom";
+
+export function Reset():ReactElement {
+    const [email, setEmail] = useState("");
+
+    return (
+        <>
+            <div className={styles.wrapper_1}>
+                <form>
+                <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)}
+                            placeholder="Email"
+                            required
+                        />
+                        <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>
+                    </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>
+        </>
+    );
+}