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

login page frontend

Browse Source
This commit is contained in:
Alena
2026-09-22 21:55:33 +03:00
parent 608e7ce0f0
commit f5035b0aa2
12 changed files with 469 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/features/auth/components/AuthComponent.tsx
+77 -24
View File
@@ -6,33 +6,86 @@ export function Auth():ReactElement {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [rememberMe, setRememberMe] = useState(false);
const [showPassword, setShowPassword] = useState(false);
return (
<form>
<input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="Email"
required
/>
<input
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
placeholder="Password"
required
/>
<label>
<>
<div className="wrapper_1">
<form>
<h1 className="Title"> Добро Пожаловать <br /> в The DisExcel Project </h1>
<p className="Description">Войдите в систему, чтобы продолжить работу с вашими процессами</p>
<p className="Fields">Email</p>
<div className="email_field">
<input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="Email"
required
/>
<svg className="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" stroke-width="1.8"/>
<path d="m4.5 7 7.5 6 7.5-6" stroke="#72879A" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<p className="Fields">Password</p>
<div className="pass_field">
<input
type="checkbox"
checked={rememberMe}
onChange={(e) => setRememberMe(e.target.checked)}
type={showPassword ? "text" : "password"}
value={password}
onChange={(e) => setPassword(e.target.value)}
placeholder="Password"
required
/>
Запомнить меня
</label>
<Link to="/forgot-password">Забыли пароль?</Link>
<button type="submit">Войти</button>
</form>
<svg className="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" stroke-width="1.8"/>
<path d="M8 10V7a4 4 0 0 1 8 0v3" stroke="#72879A" stroke-width="1.8" stroke-linecap="round"/>
</svg>
<button
type="button"
className="toggle-password"
onClick={() => setShowPassword((v) => !v)}
aria-label={showPassword ? "Скрыть пароль" : "Показать пароль"}
>
{showPassword ? (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
<path d="M3 3l18 18" stroke="#72879A" strokeWidth="1.8" strokeLinecap="round"/>
<path d="M10.6 5.2A10.6 10.6 0 0 1 12 5c5 0 9 4 10 7-.4 1.1-1.2 2.4-2.3 3.6M6.4 6.4C4.4 7.8 2.9 9.7 2 12c1 3 5 7 10 7 1.4 0 2.7-.3 3.9-.8" stroke="#72879A" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M9.9 10a3 3 0 0 0 4.2 4.2" stroke="#72879A" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
) : (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
<path d="M2 12c1-3 5-7 10-7s9 4 10 7c-1 3-5 7-10 7s-9-4-10-7Z" stroke="#72879A" strokeWidth="1.8" strokeLinejoin="round"/>
<circle cx="12" cy="12" r="3" stroke="#72879A" strokeWidth="1.8"/>
</svg>
)}
</button>
</div>
<div className="footer">
<div className="remember-me">
<label>
<input
type="checkbox"
checked={rememberMe}
onChange={(e) => setRememberMe(e.target.checked)}
/>
Запомнить меня
</label>
</div>
<Link to="/forgot-password" className="forgot_link">Забыли пароль?</Link>
</div>
<div className="submitbtn">
<button id="submit" type="submit">
Войти
<svg className="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>
</form>
</div>
</>
);
}