feat: google oauth

src/views/auth/login/index.tsx

@@ -1,20 +1,51 @@
-import { Login } from "~/components/auth";
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { Auth } from "~/components/AuthForm";
+import { api } from "~/utils/api";
 
 export default function LoginPage() {
+  const router = useRouter();
+  const [isMagicLinkSent, setIsMagicLinkSent] = useState<boolean>(false);
+  const [magicLinkRecipient, setMagicLinkRecipient] = useState<string>("");
+
+  const handleMagicLinkSent = (value: boolean, recipient: string) => {
+    setIsMagicLinkSent(value);
+    setMagicLinkRecipient(recipient);
+  };
+
+  const authCookieExists = document.cookie
+    .split("; ")
+    .some((cookie) => cookie.includes("auth-token"));
+
+  if (authCookieExists) {
+    const { error } = api.auth.getUser.useQuery();
+
+    if (!error) router.push("/boards");
+  }
+
   return (
-    <main className="flex h-screen flex-col items-center justify-center bg-dark-50">
-      <h1 className="mb-6 text-lg font-bold tracking-tight text-dark-1000">
-        kan.bn
-      </h1>
-      <p className="mb-10 text-3xl text-dark-1000">Get started</p>
-      <div className="w-full rounded-md border border-dark-600 bg-dark-300 px-10 py-10 sm:max-w-md">
-        <div className=" sm:mx-auto sm:w-full sm:max-w-sm">
-          <Login />
-        </div>
+    <main className="h-screen bg-dark-50">
+      <div className="flex h-full flex-col items-center justify-center">
+        <h1 className="mb-6 text-lg font-bold tracking-tight text-dark-1000">
+          kan.bn
+        </h1>
+        <p className="mb-10 text-3xl text-dark-1000">
+          {isMagicLinkSent ? "Check your inbox" : "Welcome back"}
+        </p>
+        {isMagicLinkSent ? (
+          <div className="sm:mx-auto sm:w-full sm:max-w-sm">
+            <p className="text-md mt-2 text-center text-dark-1000">
+              {`Click on the link we've sent to ${magicLinkRecipient} to sign in.`}
+            </p>
+          </div>
+        ) : (
+          <div className="w-full rounded-lg border border-dark-400 bg-dark-200 px-10 py-10 sm:max-w-md">
+            <div className="sm:mx-auto sm:w-full sm:max-w-sm">
+              <Auth setIsMagicLinkSent={handleMagicLinkSent} />
+            </div>
+          </div>
+        )}
       </div>
-      <p className="mt-10 text-center text-sm text-dark-1000">
-        {"Already have an account?"}
-      </p>
     </main>
   );
 }

src/views/auth/signup/index.tsx

@@ -0,0 +1,51 @@
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { Auth } from "~/components/AuthForm";
+import { api } from "~/utils/api";
+
+export default function SignupPage() {
+  const router = useRouter();
+  const [isMagicLinkSent, setIsMagicLinkSent] = useState<boolean>(false);
+  const [magicLinkRecipient, setMagicLinkRecipient] = useState<string>("");
+
+  const handleMagicLinkSent = (value: boolean, recipient: string) => {
+    setIsMagicLinkSent(value);
+    setMagicLinkRecipient(recipient);
+  };
+
+  const authCookieExists = document.cookie
+    .split("; ")
+    .some((cookie) => cookie.includes("auth-token"));
+
+  if (authCookieExists) {
+    const { error } = api.auth.getUser.useQuery();
+
+    if (!error) router.push("/boards");
+  }
+
+  return (
+    <main className="h-screen bg-dark-50">
+      <div className="flex h-full flex-col items-center justify-center">
+        <h1 className="mb-6 text-lg font-bold tracking-tight text-dark-1000">
+          kan.bn
+        </h1>
+        <p className="mb-10 text-3xl text-dark-1000">
+          {isMagicLinkSent ? "Check your inbox" : "Get started"}
+        </p>
+        {isMagicLinkSent ? (
+          <div className="sm:mx-auto sm:w-full sm:max-w-sm">
+            <p className="text-md mt-2 text-center text-dark-1000">
+              {`Click on the link we've sent to ${magicLinkRecipient} to sign in.`}
+            </p>
+          </div>
+        ) : (
+          <div className="w-full rounded-lg border border-dark-400 bg-dark-200 px-10 py-10 sm:max-w-md">
+            <div className="sm:mx-auto sm:w-full sm:max-w-sm">
+              <Auth setIsMagicLinkSent={handleMagicLinkSent} />
+            </div>
+          </div>
+        )}
+      </div>
+    </main>
+  );
+}

src/views/auth/verify/index.tsx

@@ -1,12 +0,0 @@
-export default function VerifyPage() {
-  return (
-    <main className="bg-dark-50 flex h-screen flex-col items-center justify-center">
-      <p className="text-dark-1000 mb-10 text-3xl">Check your inbox</p>
-      <div className=" sm:mx-auto sm:w-full sm:max-w-sm">
-        <p className="text-dark-1000 text-md mt-5 text-center">
-          {`Click on the link we've sent to you@example.com to sign in.`}
-        </p>
-      </div>
-    </main>
-  );
-}