refactor!

xgovernor · Mar 6, 2024 · 5d848c7 · 5d848c7
1 parent 4ec7858
commit 5d848c7
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 8 deletions.
diff --git a/src/app/auth/login/page.tsx b/src/app/auth/login/page.tsx
@@ -6,6 +6,18 @@ import LOGO from "@/assets/images/simbio-color.svg";
 import { Button } from "@/components/ui/button";
 
 const PageAuthLogin: FC = () => {
+  const handleLogin = async (
+    medium: "google" | "apple" | "microsoft" | "github",
+  ) => {
+    try {
+      const response = await fetch(`/auth/login/${medium}`);
+      console.log("Response:", response);
+      window.location.href = response.url; // Redirect to Google login
+    } catch (error) {
+      console.error("Error logging in with Google:", error);
+    }
+  };
+
   return (
     <section className="relative block h-screen w-full">
       {/* Background image */}
@@ -39,16 +51,28 @@ const PageAuthLogin: FC = () => {
 
             <div className="flex flex-col gap-7 ">
               <div className="flex flex-col gap-4">
-                <Button className="w-full bg-[#EA4335] text-white">
+                <Button
+                  onClick={() => handleLogin("google")}
+                  className="w-full bg-[#EA4335] text-white"
+                >
                   Login with Google
                 </Button>
-                <Button className="w-full bg-black text-white">
+                <Button
+                  onClick={() => handleLogin("apple")}
+                  className="w-full bg-black text-white"
+                >
                   Login with Apple
                 </Button>
-                <Button className="w-full bg-blue-500 text-white">
+                <Button
+                  onClick={() => handleLogin("microsoft")}
+                  className="w-full bg-blue-500 text-white"
+                >
                   Login with Microsoft
                 </Button>
-                <Button className="w-full bg-gray-900 text-white">
+                <Button
+                  onClick={() => handleLogin("github")}
+                  className="w-full bg-gray-900 text-white"
+                >
                   Login with GitHub
                 </Button>
               </div>

diff --git a/src/app/auth/register/page.tsx b/src/app/auth/register/page.tsx
@@ -6,6 +6,18 @@ import LOGO from "@/assets/images/simbio-color.svg";
 import { Button } from "@/components/ui/button";
 
 const PageAuthRegistered: FC = () => {
+  const handleRegister = async (
+    medium: "google" | "apple" | "microsoft" | "github",
+  ) => {
+    try {
+      const response = await fetch(`/auth/login/${medium}`);
+      console.log("Response:", response);
+      window.location.href = response.url; // Redirect to Google login
+    } catch (error) {
+      console.error("Error logging in with Google:", error);
+    }
+  };
+
   return (
     <section className="relative block h-screen w-full">
       {/* Background image */}
@@ -39,16 +51,28 @@ const PageAuthRegistered: FC = () => {
 
             <div className="flex flex-col gap-7 ">
               <div className="flex flex-col gap-3">
-                <Button className="w-full bg-red-600  text-white">
+                <Button
+                  onClick={() => handleRegister("google")}
+                  className="w-full bg-red-600  text-white"
+                >
                   Register with Google
                 </Button>
-                <Button className="w-full bg-black text-white">
+                <Button
+                  onClick={() => handleRegister("apple")}
+                  className="w-full bg-black text-white"
+                >
                   Register with Apple
                 </Button>
-                <Button className="w-full bg-blue-700 text-white">
+                <Button
+                  onClick={() => handleRegister("microsoft")}
+                  className="w-full bg-blue-700 text-white"
+                >
                   Register with Microsoft
                 </Button>
-                <Button className="w-full bg-gray-900 text-white">
+                <Button
+                  onClick={() => handleRegister("github")}
+                  className="w-full bg-gray-900 text-white"
+                >
                   Login with GitHub
                 </Button>
               </div>