MH.Dmitrii/The_DisExcel_project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add password reset component

Browse Source
This commit is contained in:
MH.Dmitrii
2026-09-24 16:19:38 +03:00
parent 3e0e82f016
commit 489014667c
9 changed files with 286 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/features/auth/components/AuthComponent.css → frontend/src/features/auth/components/AuthComponent.module.css
+3 -3
View File
@@ -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
+17 -17
View File
@@ -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
+93
View File
@@ -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
+47
View File
@@ -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>
</>
);
}