Reworked login page

leaky-ships/pages/dev/login.tsx

@@ -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 ? (
+          {elem()}
-            <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>
-          )}
         </div>
       </div>
     </div>