Add basic index, complete login route with validation

package.json

@@ -22,6 +22,7 @@
     "postcss": "^8.4.21",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-hook-form": "^7.43.2",
     "sass": "^1.58.3",
     "tailwindcss": "^3.2.7",
     "typescript": "4.9.5",

src/pages/index.tsx

@@ -0,0 +1,31 @@
+import {GetServerSidePropsContext, GetServerSidePropsResult, NextPage} from "next";
+import {z} from "zod";
+import {env} from "@/env/server.mjs";
+
+type Props = {
+    authenticated: boolean;
+}
+
+export async function getServerSideProps({query}: GetServerSidePropsContext): Promise<GetServerSidePropsResult<Props>> {
+    const parsedKey = z.string().safeParse(query?.key);
+
+    if (parsedKey.success && env.API_KEY === parsedKey.data)
+        return {
+            props: {
+                authenticated: true
+            }
+        }
+
+    return {
+        redirect: {
+            destination: '/login',
+            permanent: false
+        }
+    }
+}
+
+const IndexPage: NextPage<Props> = ({authenticated}) => {
+    return <div></div>
+}
+
+export default IndexPage;

src/pages/login.tsx

@@ -0,0 +1,55 @@
+import {NextPage} from "next";
+import {useForm} from "react-hook-form";
+import {useState} from "react";
+import {useRouter} from "next/router";
+
+
+const LoginPage: NextPage = () => {
+    type FormProps = { token: string; }
+    const {handleSubmit, register} = useForm<FormProps>();
+    const [error, setError] = useState<boolean | null>(null);
+    const router = useRouter();
+
+    async function onSubmit(data: FormProps) {
+        const response = await fetch(`/api/check?key=${data.token}`)
+        if (response.status === 200) {
+            setError(false);
+            router.push({pathname: "/", query: {"key": data.token}}).then();
+        } else
+            setError(true);
+        console.log(response);
+    }
+
+    return <div className="flex bg-zinc-900 min-h-screen h-full flex-col justify-center py-12 sm:px-6 lg:px-8">
+        <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
+            <div className="bg-black/ py-8 px-4 shadow sm:rounded-lg sm:px-10">
+                <form className="space-y-6" onSubmit={handleSubmit(onSubmit)}>
+                    <div>
+                        <label htmlFor="password" className="block text-sm font-medium text-gray-400">
+                            Token
+                        </label>
+                        <div className="mt-1">
+                            <input
+                                {...register("token", {required: true})}
+                                className="bg-zinc-800/80 text-zinc-300 block w-full appearance-none rounded-md border border-zinc-700/80 px-3 py-2 placeholder-gray-400 shadow-sm focus:border-indigo-800/50 focus:outline-none focus:ring-indigo-500 sm:text-sm"
+                            />
+                        </div>
+                        {error ? <p className="mt-2 text-sm text-red-600" id="email-error">
+                            The token given was not valid.
+                        </p> : null}
+                    </div>
+                    <div>
+                        <button
+                            type="submit"
+                            className="flex w-full justify-center rounded-md border border-transparent bg-indigo-900/80 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-indigo-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+                        >
+                            Sign in
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+}
+
+export default LoginPage;

yarn.lock

@@ -801,6 +801,11 @@ react-dom@18.2.0:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
+react-hook-form@^7.43.2:
+  version "7.43.2"
+  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.43.2.tgz#d8ff71956dc3de258dce19d4b1c7e1c6a0188e67"
+  integrity sha512-NvD3Oe2Y9hhqo2R4I4iJigDzSLpdMnzUpNMxlnzTbdiT7NT3BW0GxWCzEtwPudZMUPbZhNcSy1EcGAygyhDORg==
+
 react@18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"