aronmal/leaky-ships
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Use enum

Browse source
This commit is contained in:
aronmal 2023-04-08 19:48:36 +02:00
parent eb09017dab
commit bda0483b3d
Signed by: aronmal
GPG key ID: 816B7707426FC612
1 changed files with 35 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

62
leaky-ships/pages/dev/login.tsx
View file

@ -9,22 +9,42 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { FormEvent, useState } from "react"
import classNames from "classnames"
enum ProcessStates {
"waiting",
"loading",
"success",
"wrong",
"error",
}
const messages: { [key in ProcessStates]: string } = {
[ProcessStates.waiting]: "Enter Login Details",
[ProcessStates.loading]: "Logging in...",
[ProcessStates.success]: "Done!",
[ProcessStates.wrong]: "Wrong username or password",
[ProcessStates.error]: "An error occurred!",
}
const icons = {
[ProcessStates.loading]: faSpinnerThird,
[ProcessStates.success]: faCheck,
[ProcessStates.wrong]: faXmark,
[ProcessStates.error]: faWifiExclamation,
}
const iconClasses = {
[ProcessStates.loading]: "animate-spin",
[ProcessStates.success]: "text-green-500",
[ProcessStates.wrong]: "text-red-500",
[ProcessStates.error]: "animate-pulse text-amber-500 !text-8xl",
}
function Login() {
const [username, setUsername] = useState("")
const [password, setPassword] = useState("")
type ProcessStates = "waiting" | "loading" | "success" | "wrong" | "error"
const [state, setState] = useState<ProcessStates>("waiting")
const [state, setState] = useState<ProcessStates>(ProcessStates.waiting)
const [error, setError] = useState("")
const messages: { [key in ProcessStates]: string } = {
waiting: "Enter Login Details",
loading: "Logging in...",
success: "Done!",
wrong: "Wrong username or password",
error: "An error occured!",
}
const elem = () => {
if (state === "waiting")
if (state === ProcessStates.waiting)
return (
<form onSubmit={login}>
<div className="mb-4 text-lg">
@ -59,18 +79,6 @@ function Login() {
</form>
)
const icons = {
loading: faSpinnerThird,
success: faCheck,
wrong: faXmark,
error: faWifiExclamation,
}
const iconClasses = {
loading: "animate-spin",
success: "text-green-500",
wrong: "text-red-500",
error: "animate-pulse text-amber-500 !text-8xl",
}
return (
<>
<div className="flex flex-col items-center rounded-3xl bg-slate-800/50 py-8 px-16 shadow-lg drop-shadow-md">
@ -84,7 +92,7 @@ function Login() {
type="button"
className="rounded-3xl bg-blue-400 bg-opacity-50 px-10 py-2 text-white shadow-xl backdrop-blur-md transition-colors duration-300 hover:bg-blue-600"
onClick={() => {
setState("waiting")
setState(ProcessStates.waiting)
setError("")
}}
>
@ -98,17 +106,17 @@ function Login() {
async function login(e: FormEvent<HTMLFormElement>) {
e.preventDefault()
setState("loading")
setState(ProcessStates.loading)
await fetch("/api/login", {
method: "POST",
body: JSON.stringify({ username, password }),
})
.then((res) => {
if (res.status === 200) setState("success")
if (res.status === 401) setState("wrong")
if (res.status === 200) setState(ProcessStates.success)
if (res.status === 401) setState(ProcessStates.wrong)
})
.catch((err: Error) => {
setState("error")
setState(ProcessStates.error)
setError(err.message)
})
}