98 lines
5.0 KiB
TypeScript
98 lines
5.0 KiB
TypeScript
import { useState, type ReactElement } from "react";
|
||
import { Link } from "react-router-dom";
|
||
import "./AuthComponent.css";
|
||
|
||
export function Auth():ReactElement {
|
||
const [email, setEmail] = useState("");
|
||
const [password, setPassword] = useState("");
|
||
const [rememberMe, setRememberMe] = useState(false);
|
||
const [showPassword, setShowPassword] = useState(false);
|
||
|
||
return (
|
||
<>
|
||
<div className="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">
|
||
<input
|
||
id="email"
|
||
name="email"
|
||
type="email"
|
||
autoComplete="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" 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">
|
||
|
||
<input
|
||
id="password"
|
||
name="password"
|
||
type={showPassword ? "text" : "password"}
|
||
autoComplete="current-password"
|
||
value={password}
|
||
onChange={(e) => setPassword(e.target.value)}
|
||
placeholder="Password"
|
||
required
|
||
/>
|
||
<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" 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"
|
||
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>
|
||
</>
|
||
);
|
||
}
|