71 lines
3.5 KiB
TypeScript
71 lines
3.5 KiB
TypeScript
import { createRef, useEffect, useMemo, useState } from "react"
|
|
import { Navigate } from "react-router-dom"
|
|
import { authorizeLogin, isLoggedIn, LoginState, useClearToken } from "../authorization"
|
|
|
|
export function Login() {
|
|
var [username, setUsername] = useState("")
|
|
var [password, setPassword] = useState("")
|
|
var [loginState, setLoginState] = useState(isLoggedIn())
|
|
|
|
var usernameRef = createRef<HTMLInputElement>()
|
|
var passwordRef = createRef<HTMLInputElement>()
|
|
|
|
var login = (e: React.ChangeEvent<HTMLFormElement>) => {
|
|
e.preventDefault()
|
|
if (username.length === 0 || password.length === 0) {
|
|
setLoginState(LoginState.Invalid)
|
|
return
|
|
}
|
|
authorizeLogin(username, password, setLoginState)
|
|
}
|
|
|
|
useMemo(() => {
|
|
if (loginState === LoginState.Invalid) {
|
|
setLoginState(LoginState.No)
|
|
}
|
|
}, [username, password])
|
|
|
|
useEffect(() => {
|
|
if (loginState === LoginState.Invalid) {
|
|
usernameRef.current?.setCustomValidity("Invalid username or password")
|
|
passwordRef.current?.setCustomValidity("Invalid username or password")
|
|
} else {
|
|
usernameRef.current?.setCustomValidity("")
|
|
passwordRef.current?.setCustomValidity("")
|
|
}
|
|
}, [loginState])
|
|
|
|
return (
|
|
<div className="flex w-full h-full justify-center items-center align-middle">
|
|
<form onSubmit={login}>
|
|
<div className="flex justify-center items-center align-middle my-2">
|
|
<input type="text" ref={usernameRef} onChange={e => setUsername(e.target.value)}
|
|
className="rounded-full outline-none bg-gray-800 focus:bg-gray-700 text-gray-400 focus:text-gray-200 px-3 py-1 mx-2 shadow-glow shadow-transparent invalid:outline-red-600 invalid:shadow-red-600 focus:outline-blue-500 focus:shadow-blue-500 transition-all" />
|
|
<input type="password" ref={passwordRef} onChange={e => setPassword(e.target.value)}
|
|
className="rounded-full outline-none bg-gray-800 focus:bg-gray-700 text-gray-400 focus:text-gray-200 px-3 py-1 mx-2 shadow-glow shadow-transparent invalid:outline-red-600 invalid:shadow-red-600 focus:outline-blue-500 focus:shadow-blue-500 transition-all" />
|
|
</div>
|
|
<div className="flex justify-center items-center align-middle my-2">
|
|
<button className="rounded-full outline-none bg-gray-800 focus:bg-gray-700 hover:bg-gray-700 active:bg-gray-800 fill-gray-400 focus:fill-gray-200 px-3 py-2 shadow-glow shadow-transparent invalid:outline-red-600 invalid:shadow-red-600 focus:outline-blue-500 focus:shadow-blue-500 transition-all">
|
|
<svg viewBox="0 0 1000 1000" height="16px">
|
|
<path d="M619.5,899.5l350-350c27.3-27.3,27.3-71.7,0-99l-350-350c-27.3-27.3-71.7-27.3-99,0c-27.3,27.3-27.3,71.7,0,99L751,430H80c-38.7,0-70,31.3-70,70c0,38.7,31.3,70,70,70h671L520.5,800.5C506.8,814.2,500,832.1,500,850c0,17.9,6.8,35.8,20.5,49.5C547.8,926.8,592.2,926.8,619.5,899.5z" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
{
|
|
loginState === LoginState.Yes && <Navigate to="/" replace={true} />
|
|
}
|
|
</div >
|
|
)
|
|
}
|
|
|
|
export function Logout() {
|
|
const loggedOut = useClearToken()
|
|
return (
|
|
<>
|
|
{
|
|
loggedOut && <Navigate to="/login" replace={true} />
|
|
}
|
|
</>
|
|
)
|
|
} |