Reworked login page
This commit is contained in:
parent
4fae4b40b6
commit
53d4ab527a
GPG key ID:
816B7707426FC612
1 changed files with 113 additions and 40 deletions
|
|
@ -1,9 +1,117 @@
|
|||
import { faSpinnerThird } from "@fortawesome/pro-solid-svg-icons"
|
||||
import {
|
||||
faArrowLeft,
|
||||
faCheck,
|
||||
faSpinnerThird,
|
||||
faXmark,
|
||||
} from "@fortawesome/pro-solid-svg-icons"
|
||||
import { faWifiExclamation } from "@fortawesome/pro-duotone-svg-icons"
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
|
||||
import { useState } from "react"
|
||||
import { FormEvent, useState } from "react"
|
||||
import classNames from "classnames"
|
||||
|
||||
function Login() {
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [username, setUsername] = useState("")
|
||||
const [password, setPassword] = useState("")
|
||||
type ProcessStates = "waiting" | "loading" | "success" | "wrong" | "error"
|
||||
const [state, setState] = useState<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")
|
||||
return (
|
||||
<form onSubmit={login}>
|
||||
<div className="mb-4 text-lg">
|
||||
<input
|
||||
className="rounded-3xl border-none bg-blue-400 bg-opacity-50 px-6 py-2 text-center text-inherit placeholder-slate-200 shadow-lg outline-none backdrop-blur-md"
|
||||
type="text"
|
||||
name="name"
|
||||
placeholder="Username or email"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mb-4 text-lg">
|
||||
<input
|
||||
className="rounded-3xl border-none bg-blue-400 bg-opacity-50 px-6 py-2 text-center text-inherit placeholder-slate-200 shadow-lg outline-none backdrop-blur-md"
|
||||
type="Password"
|
||||
name="name"
|
||||
placeholder="Password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-8 flex justify-center text-lg text-black">
|
||||
<button
|
||||
type="submit"
|
||||
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"
|
||||
>
|
||||
Login
|
||||
</button>
|
||||
</div>
|
||||
</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">
|
||||
<FontAwesomeIcon
|
||||
className={classNames("text-6xl", iconClasses[state])}
|
||||
icon={icons[state]}
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-8 flex justify-center text-lg text-black">
|
||||
<button
|
||||
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")
|
||||
setError("")
|
||||
}}
|
||||
>
|
||||
<FontAwesomeIcon className="-ml-4 mr-4" icon={faArrowLeft} />
|
||||
Return
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
async function login(e: FormEvent<HTMLFormElement>) {
|
||||
e.preventDefault()
|
||||
setState("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")
|
||||
})
|
||||
.catch((err: Error) => {
|
||||
setState("error")
|
||||
setError(err.message)
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex h-screen w-full items-center justify-center bg-gray-900 bg-[url('/images/wallpaper.jpg')] bg-cover bg-center bg-no-repeat">
|
||||
|
|
@ -18,45 +126,10 @@ function Login() {
|
|||
/>
|
||||
<h1 className="mb-2 text-2xl">Leaky Ships</h1>
|
||||
<span className="text-gray-300">
|
||||
{loading ? "Logging in..." : "Enter Login Details"}
|
||||
{error ? error : messages[state]}
|
||||
</span>
|
||||
</div>
|
||||
{loading ? (
|
||||
<FontAwesomeIcon
|
||||
className="my-16 mx-24 animate-spin text-6xl"
|
||||
icon={faSpinnerThird}
|
||||
onClick={() => setLoading(false)}
|
||||
/>
|
||||
) : (
|
||||
<form action="#">
|
||||
<div className="mb-4 text-lg">
|
||||
<input
|
||||
className="rounded-3xl border-none bg-blue-400 bg-opacity-50 px-6 py-2 text-center text-inherit placeholder-slate-200 shadow-lg outline-none backdrop-blur-md"
|
||||
type="text"
|
||||
name="name"
|
||||
placeholder="Username or email"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mb-4 text-lg">
|
||||
<input
|
||||
className="rounded-3xl border-none bg-blue-400 bg-opacity-50 px-6 py-2 text-center text-inherit placeholder-slate-200 shadow-lg outline-none backdrop-blur-md"
|
||||
type="Password"
|
||||
name="name"
|
||||
placeholder="Password"
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-8 flex justify-center text-lg text-black">
|
||||
<button
|
||||
type="submit"
|
||||
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={() => setLoading(true)}
|
||||
>
|
||||
Login
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
{elem()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue