add password reset component

frontend/src/App.tsx

@@ -1,11 +1,13 @@
 import './App.css'
 import { Route, Routes } from "react-router-dom";
 import { LoginPage } from "./pages/LoginPage";
+import { ForgotPasswordPage } from "./pages/ForgotPasswordPage";
 
 function App() {
   return (
     <Routes>
       <Route path="/" element={<LoginPage />} />
+      <Route path="/forgot-password" element={<ForgotPasswordPage />} />
     </Routes>
   );
 }

frontend/src/features/auth/components/AuthComponent.module.css

@@ -1,4 +1,4 @@
-form {
+.wrapper_1 form {
     display: flex;
     flex-direction: column;
     background-color: whitesmoke;
@@ -31,7 +31,7 @@ form {
     background-color: whitesmoke;
     width: 40%;
 }
-input {
+.wrapper_1 input {
     line-height: 40px;
     border-radius: 16px;
     border: 1px solid rgba(68, 68, 68, 0.3);
@@ -51,7 +51,7 @@ input {
     padding-top: 10%;
     padding-bottom: 20px;
 }
-#submit {
+.submit {
     background-color: #087A55;
     height: 50px;
     width: 100%;

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

@@ -1,6 +1,6 @@
 import { useState, type ReactElement } from "react";
 import { Link } from "react-router-dom";
-import "./AuthComponent.css";
+import styles from "./AuthComponent.module.css";
 
 export function Auth():ReactElement {
     const [email, setEmail] = useState("");
@@ -10,12 +10,12 @@ export function Auth():ReactElement {
 
     return (
         <>
-        <div className="wrapper_1">
+        <div className={styles.wrapper_1}>
             <form>
-            <h1 className="Title"> Добро Пожаловать <br /> в The DisExcel Project </h1>
-            <p className="Description">Войдите в систему, чтобы продолжить работу с вашими процессами</p>
-                <label className="Fields" htmlFor="email">Email</label>
-                <div className="email_field">
+            <h1 className={styles.Title}> Добро Пожаловать <br /> в The DisExcel Project </h1>
+            <p className={styles.Description}>Войдите в систему, чтобы продолжить работу с вашими процессами</p>
+                <label className={styles.Fields} htmlFor="email">Email</label>
+                <div className={styles.email_field}>
                     <input
                         id="email"
                         name="email"
@@ -26,13 +26,13 @@ export function Auth():ReactElement {
                         placeholder="Email"
                         required
                     />
-                     <svg className="email-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+                     <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>
-                <label className="Fields" htmlFor="password">Password</label>
-                <div className="pass_field">
+                <label className={styles.Fields} htmlFor="password">Password</label>
+                <div className={styles.pass_field}>
 
                 <input
                     id="password"
@@ -44,13 +44,13 @@ export function Auth():ReactElement {
                     placeholder="Password"
                     required
                 />
-                <svg className="pass-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+                <svg className={styles["pass-icon"]} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
                 <rect x="4" y="10" width="16" height="11" rx="2.5" stroke="#72879A" strokeWidth="1.8"/>
                 <path d="M8 10V7a4 4 0 0 1 8 0v3" stroke="#72879A" strokeWidth="1.8" strokeLinecap="round"/>
                 </svg>
                 <button
                     type="button"
-                    className="toggle-password"
+                    className={styles["toggle-password"]}
                     onClick={() => setShowPassword((v) => !v)}
                     aria-label={showPassword ? "Скрыть пароль" : "Показать пароль"}
                 >
@@ -68,8 +68,8 @@ export function Auth():ReactElement {
                     )}
                 </button>
                 </div>
-                <div className="footer">
-                    <div className="remember-me">
+                <div className={styles.footer}>
+                    <div className={styles["remember-me"]}>
                         <label>
                             <input
                                 type="checkbox"
@@ -79,12 +79,12 @@ export function Auth():ReactElement {
                             Запомнить меня
                         </label>
                     </div>
-                    <Link to="/forgot-password" className="forgot_link">Забыли пароль?</Link>
+                    <Link to="/forgot-password" className={styles.forgot_link}>Забыли пароль?</Link>
                 </div>
-                <div className="submitbtn">
-                <button id="submit" type="submit">
+                <div className={styles.submitbtn}>
+                <button className={styles.submit} type="submit">
                     Войти
-                    <svg className="submit-arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+                    <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>

frontend/src/features/auth/components/ResetComponent.module.css

@@ -0,0 +1,93 @@
+.wrapper_1 form {
+    display: flex;
+    flex-direction: column;
+    background-color: whitesmoke;
+    width: 100%;
+    padding: 10%;
+    justify-content: flex-start;
+    gap: 24px;
+    height: 100%;
+}
+.wrapper_1 input {
+    line-height: 40px;
+    border-radius: 16px;
+    border: 1px solid rgba(68, 68, 68, 0.3);
+    font-size: large;
+}
+.Title {
+    font-size: 32px;
+    font-weight: bold;
+    text-align: left;
+    line-height: 45px;
+    letter-spacing: 1.2px;
+}
+.Description {
+    font-size: 20px;
+    line-height: 30px;
+}
+.Fields {
+    line-height: 40px;
+    font-weight: bold;
+    font-size: 20px;
+}
+.wrapper_1 {
+    background-color: whitesmoke;
+    width: 40%;
+}
+.email_field {
+    position: relative;
+    width: 100%;
+}
+.email_field input {
+    width: 100%;
+    padding: 12px 15px 12px 45px;
+    transition: padding-left 0.2s ease;
+}
+.email_field input:focus,
+.email_field input:not(:placeholder-shown) {
+    padding-left: 15px;
+}
+.email_field input:focus + .email-icon,
+.email_field input:not(:placeholder-shown) + .email-icon {
+    opacity: 0;
+}
+.email-icon {
+    height: 25px;
+    position: absolute;
+    left: 15px;
+    top: 50%;
+    transform: translateY(-50%);
+    pointer-events: none;
+    transition: opacity 0.2s ease;
+}
+.submitbtn {
+    display: flex;
+    justify-content: center;
+    padding-top: 10%;
+    padding-bottom: 20px;
+}
+.submit {
+    background-color: #087A55;
+    height: 50px;
+    width: 100%;
+    color: white;
+    border-radius: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    font-size: larger;
+    font-weight: 500;
+}
+.submit-arrow {
+    width: 30px;
+    height: 30px;
+}
+.footer {
+    display: flex;
+    justify-content: center;
+}
+.login_link {
+    color: #087A55;
+    font-weight: 600;
+}

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

@@ -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>
+        </>
+    );
+}

frontend/src/layouts/AuthLayout.css

@@ -49,7 +49,7 @@
 }
 .main_items {
     display: flex;
-    justify-content: space-between; 
+    justify-content: space-between;
 }
 .main_item {
     display: flex;

frontend/src/layouts/AuthLayout.tsx

@@ -0,0 +1,109 @@
+import type { ReactNode } from "react";
+import "./AuthLayout.css";
+import logo from "../assets/LOGO.png";
+import img_1 from "../assets/paper.png";
+import img_2 from "../assets/PC.png";
+import img_3 from "../assets/graphics.png";
+
+export function AuthLayout({ children }: { children: ReactNode }) {
+    return (
+        <div className="wrapper">
+            <div className="left_side">
+                <header className="header">
+                    <div className="container">
+                        <div className="header_top">
+                        <img className="img_logo" src={logo} alt="LOGO" />
+                        <div className="header_text">
+                        <div className="header_title">
+                            The DisExcel
+                        </div>
+                        <div className="header_heading">
+                            Project
+                        </div>
+                        </div>
+                        </div>
+                        <div className="header_bottom">
+                            <p>
+                                Избавляем от ручной работы. <br />
+                                Переводим процессы из бумаги в Excel, <br />
+                                а из Excel - в 1С и отчеты.
+                            </p>
+                        </div>
+                    </div>
+                </header>
+                <main className="main">
+                    <div className="contain">
+                        <div className="main_items">
+                            {/* 1 */}
+                            <div className="main_item">
+                                <img className="main_item_img" src={img_1} alt="img" />
+                                <div className="main_item_title">Бумага</div>
+                                <div className="main_item_p">
+                                    Ручная работа, ошибки, потери
+                                </div>
+                            </div>
+                            <div className="main_i"></div>
+                            {/* 2 */}
+                            <div className="main_item">
+                                <img className="main_item_img" src={img_2} alt="img" />
+                                <div className="main_item_title">Excel</div>
+                                <div className="main_item_p">
+                                    Структура, формулы, автоматизация
+                                </div>
+                            </div>
+                            <div className="main_i"></div>
+                            {/* 3 */}
+                            <div className="main_item">
+                                <img className="main_item_img" src={img_3} alt="img" />
+                                <div className="main_item_title">1С / Отчеты</div>
+                                <div className="main_item_p">
+                                    Готовые процессы, аналитика, контроль
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </main>
+                <section className="section">
+                    <div className="section_items">
+                        {/* 1 */}
+                        <div className="section_item">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none">
+                        <circle cx="24" cy="24" r="16" stroke="#087A55" strokeWidth="3"/>
+                        <path d="M24 14v11l7 4" stroke="#087A55" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/>
+                        </svg>
+                        Экономим <br /> время
+                        </div>
+                        <div className="section_line"></div>
+                        {/* 2 */}
+                        <div className="section_item">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none">
+                        <path d="M24 6 38 11v11c0 9-5.8 15.2-14 20-8.2-4.8-14-11-14-20V11z" stroke="#087A55" strokeWidth="3" strokeLinejoin="round"/>
+                        <path d="m17 24 5 5 10-11" stroke="#087A55" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/>
+                        </svg>
+                        Снижаем <br /> ошибки
+                        </div>
+                        <div className="section_line"></div>
+                        {/* 3 */}
+                        <div className="section_item">
+                        <svg width="64" height="64" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path stroke="#087A55" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.5.5 0 0 0 .12-.63l-1.92-3.32a.5.5 0 0 0-.6-.22l-2.39.96a7.03 7.03 0 0 0-1.62-.94l-.36-2.54a.5.5 0 0 0-.5-.43h-3.84a.5.5 0 0 0-.5.43l-.36 2.54c-.59.24-1.13.56-1.62.94l-2.39-.96a.5.5 0 0 0-.6.22L2.66 8.85a.5.5 0 0 0 .12.63l2.03 1.58c-.05.3-.08.63-.08.94s.02.64.07.94l-2.03 1.58a.5.5 0 0 0-.12.63l1.92 3.32a.5.5 0 0 0 .6.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54a.5.5 0 0 0 .5.43h3.84a.5.5 0 0 0 .5-.43l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96a.5.5 0 0 0 .6-.22l1.92-3.32a.5.5 0 0 0-.12-.63l-2.03-1.58Z"/>
+                        <circle cx="12" cy="12" r="3.5" stroke="#087A55" strokeWidth="1.6"/>
+                        </svg>
+                        Автоматизируем <br /> процессы
+                        </div>
+                        <div className="section_line"></div>
+                        {/* 4 */}
+                        <div className="section_item">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none">
+                        <path d="M24 6 38 11v11c0 9-5.8 15.2-14 20-8.2-4.8-14-11-14-20V11z" stroke="#087A55" strokeWidth="3" strokeLinejoin="round"/>
+                        <path d="m17 24 5 5 10-11" stroke="#087A55" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/>
+                        </svg>
+                        Делаем <br /> бизнес эффективнее
+                        </div>
+                    </div>
+                </section>
+            </div>
+            {children}
+        </div>
+    );
+}

frontend/src/pages/ForgotPasswordPage.tsx

@@ -0,0 +1,10 @@
+import { Reset } from "../features/auth/components/ResetComponent";
+import { AuthLayout } from "../layouts/AuthLayout";
+
+export function ForgotPasswordPage() {
+    return (
+        <AuthLayout>
+            <Reset />
+        </AuthLayout>
+    );
+}

frontend/src/pages/LoginPage.tsx

@@ -1,111 +1,10 @@
 import { Auth } from "../features/auth/components/AuthComponent";
-import "./LoginPage.css"
-import logo from "../assets/LOGO.png"
-import img_1 from "../assets/paper.png"
-import img_2 from "../assets/PC.png"
-import img_3 from "../assets/graphics.png"
+import { AuthLayout } from "../layouts/AuthLayout";
 
 export function LoginPage(){
     return(
-        <>
-            <div className="wrapper">
-            <div className="left_side">
-                <header className="header">
-                    <div className="container">
-                        <div className="header_top">
-                        <img className="img_logo" src={logo} alt="LOGO" />
-                        <p className="header_text">
-                        <div className="header_title">
-                            The DisExcel
-                        </div>
-                        <div className="header_heading">
-                            Project
-                        </div>
-                        </p>
-                        </div>
-                        <div className="header_bottom">
-                            <p>
-                                Избавляем от ручной работы. <br />
-                                Переводим процессы из бумаги в Excel, <br />
-                                а из Excel - в 1С и отчеты.
-                            </p>
-                        </div>
-                    </div>
-                </header>
-                <main className="main">
-                    <div className="contain">
-                        <div className="main_items">
-                            {/* 1 */}
-                            <div className="main_item">
-                                <img className="main_item_img" src={img_1} alt="img" />
-                                <div className="main_item_title">Бумага</div>
-                                <div className="main_item_p">
-                                    Ручная работа, ошибки, потери
-                                </div>
-                            </div>
-                            <div className="main_i"></div>
-                            {/* 2 */}
-                            <div className="main_item">
-                                <img className="main_item_img" src={img_2} alt="img" />
-                                <div className="main_item_title">Excel</div>
-                                <div className="main_item_p">
-                                    Структура, формулы, автоматизация
-                                </div>
-                            </div>
-                            <div className="main_i"></div>
-                            {/* 3 */}
-                            <div className="main_item">
-                                <img className="main_item_img" src={img_3} alt="img" />
-                                <div className="main_item_title">1С / Отчеты</div>
-                                <div className="main_item_p">
-                                    Готовые процессы, аналитика, контроль
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </main>
-                <section className="section">
-                    <div className="section_items">
-                        {/* 1 */}
-                        <div className="section_item"> 
-                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none">
-                        <circle cx="24" cy="24" r="16" stroke="#087A55" stroke-width="3"/>
-                        <path d="M24 14v11l7 4" stroke="#087A55" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
-                        </svg>
-                        Экономим <br /> время
-                        </div>
-                        <div className="section_line"></div>
-                        {/* 2 */}
-                        <div className="section_item"> 
-                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none">
-                        <path d="M24 6 38 11v11c0 9-5.8 15.2-14 20-8.2-4.8-14-11-14-20V11z" stroke="#087A55" stroke-width="3" stroke-linejoin="round"/>
-                        <path d="m17 24 5 5 10-11" stroke="#087A55" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
-                        </svg>
-                        Снижаем <br /> ошибки
-                        </div>
-                        <div className="section_line"></div>
-                        {/* 3 */}
-                        <div className="section_item"> 
-                        <svg width="64" height="64" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <path stroke="#087A55" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.5.5 0 0 0 .12-.63l-1.92-3.32a.5.5 0 0 0-.6-.22l-2.39.96a7.03 7.03 0 0 0-1.62-.94l-.36-2.54a.5.5 0 0 0-.5-.43h-3.84a.5.5 0 0 0-.5.43l-.36 2.54c-.59.24-1.13.56-1.62.94l-2.39-.96a.5.5 0 0 0-.6.22L2.66 8.85a.5.5 0 0 0 .12.63l2.03 1.58c-.05.3-.08.63-.08.94s.02.64.07.94l-2.03 1.58a.5.5 0 0 0-.12.63l1.92 3.32a.5.5 0 0 0 .6.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54a.5.5 0 0 0 .5.43h3.84a.5.5 0 0 0 .5-.43l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96a.5.5 0 0 0 .6-.22l1.92-3.32a.5.5 0 0 0-.12-.63l-2.03-1.58Z"/>
-                        <circle cx="12" cy="12" r="3.5" stroke="#087A55" stroke-width="1.6"/>
-                        </svg>
-                        Автоматизируем <br /> процессы
-                        </div>
-                        <div className="section_line"></div>
-                        {/* 4 */}
-                        <div className="section_item"> 
-                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none">
-                        <path d="M24 6 38 11v11c0 9-5.8 15.2-14 20-8.2-4.8-14-11-14-20V11z" stroke="#087A55" stroke-width="3" stroke-linejoin="round"/>
-                        <path d="m17 24 5 5 10-11" stroke="#087A55" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
-                        </svg>
-                        Делаем <br /> бизнес эффективнее
-                        </div>
-                    </div>
-                </section>
-            </div>
+        <AuthLayout>
             <Auth />
-            </div>
-        </>
+        </AuthLayout>
     );
-}
+}