login page frontend
This commit is contained in:
@@ -0,0 +1,144 @@
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: whitesmoke;
|
||||
width: 100%;
|
||||
padding: 10%;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
}
|
||||
.Title {
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
line-height: 45px;
|
||||
letter-spacing: 1.2px;
|
||||
|
||||
}
|
||||
.Description{
|
||||
font-size: medium;
|
||||
font-size: 20px;
|
||||
line-height: 30px;
|
||||
|
||||
}
|
||||
.Fields {
|
||||
line-height: 40px;
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
|
||||
}
|
||||
.wrapper_1 {
|
||||
background-color: whitesmoke;
|
||||
width: 40%;
|
||||
}
|
||||
input {
|
||||
line-height: 40px;
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(68, 68, 68, 0.3);
|
||||
font-size: large;
|
||||
}
|
||||
|
||||
.footer{
|
||||
display: flex;
|
||||
padding-top: 10%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
|
||||
.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;
|
||||
}
|
||||
.email-icon, .pass-icon {
|
||||
height: 25px;
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
pointer-events: none;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
.email_field, .pass_field {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
.email_field input, .pass_field input {
|
||||
width: 100%;
|
||||
padding: 12px 15px 12px 45px;
|
||||
transition: padding-left 0.2s ease;
|
||||
}
|
||||
.pass_field input {
|
||||
padding-right: 45px;
|
||||
}
|
||||
.toggle-password {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.toggle-password svg {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
||||
.pass_field input:focus,
|
||||
.pass_field input:not(:placeholder-shown) {
|
||||
padding-left: 15px;
|
||||
}
|
||||
.pass_field input:focus + .pass-icon,
|
||||
.pass_field input:not(:placeholder-shown) + .pass-icon {
|
||||
opacity: 0;
|
||||
}
|
||||
.forgot_link {
|
||||
color: #087A55;
|
||||
font-weight: 600;
|
||||
|
||||
}
|
||||
|
||||
label {
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
accent-color: #087A55;
|
||||
|
||||
}
|
||||
label input[type="checkbox"] {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user