zomo/discord-retokenizer-web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

tailwindcss

Browse Source
This commit is contained in:
zomo
2022-12-17 19:22:23 -06:00
parent 8b06077359
commit 7341869d9c
10 changed files with 204 additions and 208 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
src/pages/Login.tsx
View File

@@ -1,43 +1,61 @@
import { useMemo, useState } from "react"
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 [loggedIn, setLoggedIn] = useState(isLoggedIn())
var [loginState, setLoginState] = useState(isLoggedIn())
var login = () => {
var usernameRef = createRef<HTMLInputElement>()
var passwordRef = createRef<HTMLInputElement>()
var login = (e: React.ChangeEvent<HTMLFormElement>) => {
e.preventDefault()
if (username.length === 0 || password.length === 0) {
setLoggedIn(LoginState.Invalid)
setLoginState(LoginState.Invalid)
return
}
authorizeLogin(username, password, setLoggedIn)
authorizeLogin(username, password, setLoginState)
}
useMemo(() => {
if (loggedIn === LoginState.Invalid) {
setLoggedIn(LoginState.No)
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 id="login">
<div className="form">
<input type="text" className={loggedIn === LoginState.Invalid ? "error" : ""} onChange={e => setUsername(e.target.value)} />
<input type="password" className={loggedIn === LoginState.Invalid ? "error" : ""} onChange={e => setPassword(e.target.value)} />
</div>
<div>
<button className="pad svg" onClick={login}>
<svg viewBox="0 0 1000 1000">
<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>
<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>
{
loggedIn === LoginState.Yes && <Navigate to="/" replace={true} />
loginState === LoginState.Yes && <Navigate to="/" replace={true} />
}
</div>
</div >
)
}