feat: auth wip

client/src/components/LoginForm.tsx

@@ -18,11 +18,11 @@ export function LoginForm() {
     try {
       const user = await login(email, password);
 
-      console.log(user);
+      console.log("Logged in User:", user);
 
-      // if (user) {
-      //   router.replace(`/${user?.username}`);
-      // }
+      if (user) {
+        router.replace(`/${user?.username}`);
+      }
     } catch (err) {
       // Err if username exists
       // Err if email exists

client/src/components/CreateAccountForm.tsx → client/src/components/RegisterForm.tsx

@@ -7,7 +7,7 @@ import { Input } from "~/components/ui/Input";
 import { useAppContext } from "~/hooks";
 import { createUser } from "~/api/users";
 
-export function CreateAccountForm() {
+export function RegisterForm() {
   const router = useRouter();
 
   const { setUserId } = useAppContext();

client/src/pages/login.tsx

@@ -0,0 +1,44 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+
+import { LoginForm } from "~/components/LoginForm";
+
+export default function LoginPage() {
+  const router = useRouter();
+
+  const [view, setView] = useState<"login" | "register">("login");
+
+  const isAuthenticated = false;
+  const slug = "hereeast";
+
+  useEffect(() => {
+    if (isAuthenticated) {
+      router.replace(`/${slug}`);
+    }
+  }, [isAuthenticated, router]);
+
+  return (
+    <div>
+      <div className="mb-6">
+        <h2 className="text-center font-semibold">👋 Hey there!</h2>
+      </div>
+
+      <div>
+        <div className="mb-6">
+          <LoginForm />
+        </div>
+
+        <div className="space-x-1 text-center">
+          <span>Don't have an account yet?</span>
+          <Link
+            href="/register"
+            className="underline underline-offset-2 hover:no-underline hover:opacity-50"
+          >
+            Create Account
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}

client/src/pages/register.tsx

@@ -0,0 +1,42 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { useEffect } from "react";
+
+import { RegisterForm } from "~/components/RegisterForm";
+
+export default function RegisterPage() {
+  const router = useRouter();
+
+  const isAuthenticated = false;
+  const slug = "hereeast";
+
+  useEffect(() => {
+    if (isAuthenticated) {
+      router.replace(`/${slug}`);
+    }
+  }, [isAuthenticated, router]);
+
+  return (
+    <div>
+      <div className="mb-6">
+        <h2 className="text-center font-semibold">Register, please 😊</h2>
+      </div>
+
+      <div>
+        <div className="mb-6">
+          <RegisterForm />
+        </div>
+
+        <div className="space-x-1 text-center">
+          <span>Been there already?</span>
+          <Link
+            href="/login"
+            className="underline underline-offset-2 hover:no-underline hover:opacity-50"
+          >
+            Login
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}