Beesquit/picrinth-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

nice

Browse Source
This commit is contained in:
Beesquit
2025-09-03 17:43:44 +03:00
parent a918b831a7
commit 28ffe00464
7 changed files with 126 additions and 253 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/pages/login/login.css
View File

@ -1,16 +1,34 @@
.login-div {
.login {
display: flex;
height: 100%;
justify-content: flex-end;
align-items: center;
border: 1px solid green;
width: 100vw;
height: 100vh;
max-width:100%;
justify-content: space-between;
}
.login-right-div {
.login-right {
display: flex;
height: 100%;
justify-content: flex-end;
align-items: center;
flex-direction: column;
border: 1px solid blue;
justify-content: center;
margin-left: auto;
margin-right: 5vw;
margin-left: 5vw;
}
.login-left {
overflow: hidden;
display: flex;
background-color: black;
height: 100%;
justify-content: center;
margin-right: auto;
}
.login-block {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

95
src/pages/login/login.tsx
View File

@ -41,52 +41,55 @@ const Login = () => {
};
return (
<div className="login-right-div">
<h2
style={{
display: "flex"
}}
>
Login
</h2>
<form onSubmit={handleSubmit}
style={{
flexDirection: "column",
display: "flex",
gap: "10px",
alignItems: "center",
}}
noValidate
>
<FormField
type="text"
placeholder="Username"
value={username}
onChange={(e) => setUsername(e.target.value)}
required
showError={usernameEmpty}
errorMessage="Please enter your username"
className="test1"
/>
<FormField
type="password"
placeholder="Password"
value={password}
onChange={(e) => setPassword(e.target.value)}
required
showError={passwordEmpty}
errorMessage="Please enter your password"
className="test2"
/>
<button type="submit"
style={{
display: "flex",
marginTop: "10px"
}}
>
Login
</button>
</form>
<div className="login">
<div className="login-left">
<video className='videoTag' autoPlay loop muted>
<source src={"./test.mp4"} type='video/mp4' />
</video>
</div>
<div className="login-right">
<div className="login-block">
<h2>
Login
</h2>
<form onSubmit={handleSubmit}
style={{
flexDirection: "column",
display: "flex",
gap: "10px",
alignItems: "center",
}}
noValidate
>
<FormField
type="text"
placeholder="Username"
value={username}
onChange={(e) => setUsername(e.target.value)}
required
showError={usernameEmpty}
errorMessage="Please enter your username"
/>
<FormField
type="password"
placeholder="Password"
value={password}
onChange={(e) => setPassword(e.target.value)}
required
showError={passwordEmpty}
errorMessage="Please enter your password"
/>
<button type="submit"
style={{
display: "flex",
marginTop: "10px"
}}
>
Login
</button>
</form>
</div>
</div>
</div>
);
};

66
src/pages/login/old login.css
View File

@ -1,66 +0,0 @@
div {
margin: auto;
text-align:center;
}
input {
margin: auto;
text-align: center;
}
button {
/* margin: auto; */
background-color: var(--background_dark);
color: var(--text_dark);
border: 2px solid black;
border-color: var(--buttons-main-color);
padding: 16px 32px;
text-align: center;
text-decoration: none;
font-size: 16px;
cursor: pointer;
border-radius: 12px;
transition-duration: 0.4s;
}
button:hover {
background-color: var(--buttons-main-color);
color: var(--text_dark);
}
button:active {
background-color: var(--buttons-press-color);
color: var(--text_dark);
}
button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
button span:after {
/* content: '\00bb'; */
content: '\2317';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
button:hover span {
padding-right: 25px;
}
button:hover span:after {
opacity: 1;
right: 0;
}
.bold-text {
font-weight: bold;
}

89
src/pages/login/old login.tsx
View File

@ -1,89 +0,0 @@
import React from "react"
import './login.css'
import { useLocation, useNavigate } from 'react-router-dom';
const Login = () => {
state = {
username: "",
password: "",
}
const { setAuth } = useContext(AuthContext); // используем контекст для получения значений isAuthenticated и setAuth
const navigate = useNavigate(); // используем хук useNavigate для навигации по маршрутам
const location = useLocation(); // используем хук useLocation для получения текущего маршрута
// получаем маршрут, на который нужно перенаправить пользователя после авторизации
const from = location.state?.from?.pathname || '/';
validateString = (text:string) => {
return text ? text : false
}
return (
<div>
<div>
<input
type="text"
name="username"
placeholder="Username"
onChange={(e) => this.setState({username: e.target.value})}
onBlur={(e) => this.setState({username: e.target.value})}
/>
</div>
<div>
<input
type="text"
name="password"
placeholder="Password"
onChange={(e) => this.setState({password: e.target.value})}
onBlur={(e) => this.setState({password: e.target.value})}
color="#FF0000"
/>
</div>
<div className="bold-text">
Your username is: {this.state.username}
</div>
<div>
{
(() => {
const r: string | boolean = this.validateString(this.state.username);
if (r) {
return r
}
return "invalid";
})()
}
</div>
<div className="bold-text">
Your password is: {this.state.password}
</div>
<div>
{
(() => {
const r: string | boolean = this.validateString(this.state.password);
if (r) {
return r
}
return "invalid";
})()
}
</div>
<button
onClick={() =>
this.validateString(this.state.username)
&&
this.validateString(this.state.password)
? false
: alert("Please enter not blank username and password")
}
>
<span>
Login
</span>
</button>
</div>
)
}
export default Login;