90 lines
2.6 KiB
TypeScript
90 lines
2.6 KiB
TypeScript
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;
|