From 080ed0457f33228849d1eed55491a0eb69ce4844 Mon Sep 17 00:00:00 2001
From: Chibuzo Ekwue <chieezy5@gmail.com>
Date: Mon, 29 Jul 2024 16:39:26 +0100
Subject: [PATCH 1/6] add social login team anchor

---
 src/app/(auth-routes)/sign-up/page.tsx | 24 +++++++++++++-----------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/app/(auth-routes)/sign-up/page.tsx b/src/app/(auth-routes)/sign-up/page.tsx
index e0865f278..d6cc1e7a9 100644
--- a/src/app/(auth-routes)/sign-up/page.tsx
+++ b/src/app/(auth-routes)/sign-up/page.tsx
@@ -22,17 +22,19 @@ const page = () => {
             Create an account to get started with us.
           </p>
           <div className="mt-6 flex flex-col items-center gap-2 text-center sm:flex-row md:gap-[18px]">
-            <button className="flex w-full flex-row items-center justify-center gap-2.5 rounded-lg border border-border px-4 py-3 md:w-fit md:px-8 md:py-4">
-              <Image
-                src={"/signup/icons/flat-color-icons_google.svg"}
-                alt="Google Icon"
-                width={24}
-                height={24}
-              />
-              <p className="text-neutralColor-dark-2 font-medium">
-                Sign in with Google
-              </p>
-            </button>
+            <Link href={process.env.API_URL + "/api/v1/auth/google-login"}>
+              <button className="flex w-full flex-row items-center justify-center gap-2.5 rounded-lg border border-border px-4 py-3 md:w-fit md:px-8 md:py-4">
+                <Image
+                  src={"/signup/icons/flat-color-icons_google.svg"}
+                  alt="Google Icon"
+                  width={24}
+                  height={24}
+                />
+                <p className="text-neutralColor-dark-2 font-medium">
+                  Sign in with Google
+                </p>
+              </button>
+            </Link>
             <button className="flex w-full flex-row items-center justify-center gap-2.5 rounded-lg border border-border px-4 py-3 md:w-fit md:px-8 md:py-4">
               <Image
                 src={"/signup/icons/bi_facebook.svg"}

From 67acf1acc6b388458fef5bcafd76f4f1ecc8ed6e Mon Sep 17 00:00:00 2001
From: Chibuzo Ekwue <chieezy5@gmail.com>
Date: Mon, 29 Jul 2024 18:59:22 +0100
Subject: [PATCH 2/6] Fixed base url end point

---
 src/app/(auth-routes)/login/page.tsx | 24 ++++++++++++++----------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/app/(auth-routes)/login/page.tsx b/src/app/(auth-routes)/login/page.tsx
index cd79f013a..9f566a49c 100644
--- a/src/app/(auth-routes)/login/page.tsx
+++ b/src/app/(auth-routes)/login/page.tsx
@@ -100,16 +100,20 @@ const LoginPage = () => {
         </div>
 
         <div className="flex flex-col justify-center space-y-4 sm:flex-row sm:space-x-6 sm:space-y-0">
-          <Button className="flex items-center rounded-md border border-gray-300 bg-white px-4 py-4 text-gray-700 shadow-sm hover:bg-gray-50">
-            <Image
-              src={Google}
-              width={20}
-              height={20}
-              alt="Goggle"
-              className="mr-2"
-            />
-            Sign in with Google
-          </Button>
+          <Link
+            href={`${process.env.NEXT_PUBLIC_API_URL}/api/v1/auth/google-login`}
+          >
+            <Button className="flex items-center rounded-md border border-gray-300 bg-white px-4 py-4 text-gray-700 shadow-sm hover:bg-gray-50">
+              <Image
+                src={Google}
+                width={20}
+                height={20}
+                alt="Goggle"
+                className="mr-2"
+              />
+              Sign in with Google
+            </Button>
+          </Link>
           <Button className="flex items-center rounded-md border border-gray-300 bg-white px-4 py-4 text-gray-700 shadow-sm hover:bg-gray-50">
             <Image
               src={Facebook}

From 0e703af23d65d214cc52b4848d11a3bb959e7ee6 Mon Sep 17 00:00:00 2001
From: Chibuzo Ekwue <chieezy5@gmail.com>
Date: Mon, 29 Jul 2024 19:05:17 +0100
Subject: [PATCH 3/6] add social login team anchor

---
 src/app/(auth-routes)/login/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/(auth-routes)/login/page.tsx b/src/app/(auth-routes)/login/page.tsx
index 9f566a49c..8058f8ab0 100644
--- a/src/app/(auth-routes)/login/page.tsx
+++ b/src/app/(auth-routes)/login/page.tsx
@@ -101,7 +101,7 @@ const LoginPage = () => {
 
         <div className="flex flex-col justify-center space-y-4 sm:flex-row sm:space-x-6 sm:space-y-0">
           <Link
-            href={`${process.env.NEXT_PUBLIC_API_URL}/api/v1/auth/google-login`}
+            href={`${process.env.NEXT_PUBLIC_API_URL}/api/v1/auth/google`}
           >
             <Button className="flex items-center rounded-md border border-gray-300 bg-white px-4 py-4 text-gray-700 shadow-sm hover:bg-gray-50">
               <Image

From 9bd1573db8b9874b298ccd1878e9696d81581470 Mon Sep 17 00:00:00 2001
From: Chibuzo Ekwue <chieezy5@gmail.com>
Date: Mon, 29 Jul 2024 19:14:55 +0100
Subject: [PATCH 4/6] add social login team anchor

---
 src/app/(auth-routes)/login/page.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/app/(auth-routes)/login/page.tsx b/src/app/(auth-routes)/login/page.tsx
index 8058f8ab0..1599459eb 100644
--- a/src/app/(auth-routes)/login/page.tsx
+++ b/src/app/(auth-routes)/login/page.tsx
@@ -100,9 +100,7 @@ const LoginPage = () => {
         </div>
 
         <div className="flex flex-col justify-center space-y-4 sm:flex-row sm:space-x-6 sm:space-y-0">
-          <Link
-            href={`${process.env.NEXT_PUBLIC_API_URL}/api/v1/auth/google`}
-          >
+          <Link href={`${process.env.NEXT_PUBLIC_API_URL}/api/v1/auth/google`}>
             <Button className="flex items-center rounded-md border border-gray-300 bg-white px-4 py-4 text-gray-700 shadow-sm hover:bg-gray-50">
               <Image
                 src={Google}

From 9fbd709f1cd9848b702d605582a1dac57e342e81 Mon Sep 17 00:00:00 2001
From: Chibuzo Ekwue <chieezy5@gmail.com>
Date: Mon, 29 Jul 2024 20:15:01 +0100
Subject: [PATCH 5/6] add social login team anchor

---
 src/app/(auth-routes)/login/page.tsx    |   4 +-
 src/app/(auth-routes)/register/page.tsx | 137 +++++++++++++++++++-----
 src/utils/getApiUrl.ts                  |  11 ++
 3 files changed, 122 insertions(+), 30 deletions(-)
 create mode 100644 src/utils/getApiUrl.ts

diff --git a/src/app/(auth-routes)/login/page.tsx b/src/app/(auth-routes)/login/page.tsx
index 1599459eb..a4ad95282 100644
--- a/src/app/(auth-routes)/login/page.tsx
+++ b/src/app/(auth-routes)/login/page.tsx
@@ -100,7 +100,7 @@ const LoginPage = () => {
         </div>
 
         <div className="flex flex-col justify-center space-y-4 sm:flex-row sm:space-x-6 sm:space-y-0">
-          <Link href={`${process.env.NEXT_PUBLIC_API_URL}/api/v1/auth/google`}>
+          
             <Button className="flex items-center rounded-md border border-gray-300 bg-white px-4 py-4 text-gray-700 shadow-sm hover:bg-gray-50">
               <Image
                 src={Google}
@@ -111,7 +111,7 @@ const LoginPage = () => {
               />
               Sign in with Google
             </Button>
-          </Link>
+          
           <Button className="flex items-center rounded-md border border-gray-300 bg-white px-4 py-4 text-gray-700 shadow-sm hover:bg-gray-50">
             <Image
               src={Facebook}
diff --git a/src/app/(auth-routes)/register/page.tsx b/src/app/(auth-routes)/register/page.tsx
index e5845f651..f0013bcc6 100644
--- a/src/app/(auth-routes)/register/page.tsx
+++ b/src/app/(auth-routes)/register/page.tsx
@@ -2,14 +2,13 @@
 
 import { zodResolver } from "@hookform/resolvers/zod";
 import { DialogContent, DialogTitle } from "@radix-ui/react-dialog";
-import Image from "next/image";
 import Link from "next/link";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 
+import CustomButton from "~/components/common/common-button/common-button";
 import { DialogDemo } from "~/components/common/Dialog";
-import { Button } from "~/components/ui/button";
 import {
   Form,
   FormControl,
@@ -24,6 +23,8 @@ import {
   InputOTPGroup,
   InputOTPSlot,
 } from "~/components/ui/input-otp";
+import { useToast } from "~/components/ui/use-toast";
+import { getApiUrl } from "../../../utils/getApiUrl";
 
 const formSchema = z.object({
   fullname: z.string().min(2, {
@@ -40,6 +41,26 @@ const formSchema = z.object({
 type FormData = z.infer<typeof formSchema>;
 
 const SignUp = () => {
+  const [apiUrl, setApiUrl] = useState("");
+  const { toast } = useToast();
+
+  useEffect(() => {
+    const fetchApiUrl = async () => {
+      try {
+        const url = await getApiUrl();
+        setApiUrl(url);
+      } catch {
+        toast({
+          title: "Error",
+          description: "Failed to fetch API URL",
+          variant: "destructive",
+        });
+      }
+    };
+
+    fetchApiUrl();
+  }, [toast]);
+
   const form = useForm<FormData>({
     resolver: zodResolver(formSchema),
   });
@@ -53,7 +74,7 @@ const SignUp = () => {
     })();
   };
 
-  const handleSubmit = () => {
+  const handleSubmit = async () => {
     form.handleSubmit(handleFormSubmit)();
   };
 
@@ -66,26 +87,77 @@ const SignUp = () => {
         </p>
       </div>
       <div className="flex flex-col justify-center space-y-4 sm:flex-row sm:space-x-6 sm:space-y-0">
-        <Button className="flex items-center rounded-md border border-gray-300 bg-white px-4 py-4 text-gray-700 shadow-sm hover:bg-gray-50">
-          <Image
-            src="/images/google.svg"
-            width={20}
-            height={20}
-            alt="Goggle"
-            className="mr-2"
-          />
-          Sign in with Google
-        </Button>
-        <Button className="flex items-center rounded-md border border-gray-300 bg-white p-4 px-4 text-gray-700 shadow-sm hover:bg-gray-50">
-          <Image
-            src="/images/facebook.svg"
-            width={20}
-            height={20}
-            alt="Facebook"
-            className="mr-2"
-          />
-          Sign in with Google
-        </Button>
+        <CustomButton
+          isDisabled={!apiUrl}
+          variant="outline"
+          isLeftIconVisible={true}
+          href={
+            apiUrl === ""
+              ? undefined
+              : `${apiUrl}/api/v1/auth/google?provider=google`
+          }
+          icon={
+            <svg
+              width="25"
+              height="24"
+              viewBox="0 0 25 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M22.3055 10.0415H21.5V10H12.5V14H18.1515C17.327 16.3285 15.1115 18 12.5 18C9.1865 18 6.5 15.3135 6.5 12C6.5 8.6865 9.1865 6 12.5 6C14.0295 6 15.421 6.577 16.4805 7.5195L19.309 4.691C17.523 3.0265 15.134 2 12.5 2C6.9775 2 2.5 6.4775 2.5 12C2.5 17.5225 6.9775 22 12.5 22C18.0225 22 22.5 17.5225 22.5 12C22.5 11.3295 22.431 10.675 22.3055 10.0415Z"
+                fill="#FFC107"
+              />
+              <path
+                d="M3.65295 7.3455L6.93845 9.755C7.82745 7.554 9.98045 6 12.5 6C14.0295 6 15.421 6.577 16.4805 7.5195L19.309 4.691C17.523 3.0265 15.134 2 12.5 2C8.65895 2 5.32795 4.1685 3.65295 7.3455Z"
+                fill="#F97316"
+              />
+              <path
+                d="M12.5 22.0003C15.083 22.0003 17.43 21.0118 19.2045 19.4043L16.1095 16.7853C15.0718 17.5745 13.8038 18.0014 12.5 18.0003C9.89903 18.0003 7.69053 16.3418 6.85853 14.0273L3.59753 16.5398C5.25253 19.7783 8.61353 22.0003 12.5 22.0003Z"
+                fill="#4CAF50"
+              />
+              <path
+                d="M22.3055 10.0415H21.5V10H12.5V14H18.1515C17.7571 15.1082 17.0467 16.0766 16.108 16.7855L16.1095 16.7845L19.2045 19.4035C18.9855 19.6025 22.5 17 22.5 12C22.5 11.3295 22.431 10.675 22.3055 10.0415Z"
+                fill="#1976D2"
+              />
+            </svg>
+          }
+        >
+          Sign up with Google
+        </CustomButton>
+        <CustomButton
+          isDisabled={!apiUrl}
+          variant="outline"
+          href={
+            apiUrl === ""
+              ? undefined
+              : `${apiUrl}/api/v1/auth/social/facebook?provider=facebook`
+          }
+          isLeftIconVisible={true}
+          icon={
+            <svg
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <g clipPath="url(#clip0_16038_1232)">
+                <path
+                  d="M24 12.073C24 5.40405 18.6269 -0.00195312 11.9999 -0.00195312C5.36995 -0.000453125 -0.00305176 5.40405 -0.00305176 12.0745C-0.00305176 18.1 4.38595 23.095 10.1219 24.001V15.5635H7.07695V12.0745H10.1249V9.41205C10.1249 6.38655 11.9174 4.71555 14.6579 4.71555C15.9719 4.71555 17.3444 4.95105 17.3444 4.95105V7.92105H15.8309C14.3414 7.92105 13.8764 8.85255 13.8764 9.80805V12.073H17.2034L16.6724 15.562H13.8749V23.9995C19.6109 23.0935 24 18.0985 24 12.073Z"
+                  fill="#1976D2"
+                />
+              </g>
+              <defs>
+                <clipPath id="clip0_16038_1232">
+                  <rect width="24" height="24" fill="white" />
+                </clipPath>
+              </defs>
+            </svg>
+          }
+        >
+          Sign up with Facebook
+        </CustomButton>
       </div>
       <div className="mx-auto py-4 md:w-2/4">
         <Form {...form}>
@@ -157,9 +229,14 @@ const SignUp = () => {
                 </FormItem>
               )}
             />
-            <Button type="submit" className="w-full" onClick={handleSubmit}>
+            <CustomButton
+              variant="primary"
+              type="submit"
+              className="w-full"
+              onClick={handleSubmit}
+            >
               Create Account
-            </Button>
+            </CustomButton>
             <DialogDemo open={open} onOpenChanged={setOpen}>
               <DialogContent
                 aria-labelledby="dialog-title"
@@ -188,9 +265,13 @@ const SignUp = () => {
                     </InputOTPGroup>
                   ))}
                 </InputOTP>
-                <Button type="submit" className="w-full">
+                <CustomButton
+                  variant="primary"
+                  type="submit"
+                  className="w-full"
+                >
                   Continue
-                </Button>
+                </CustomButton>
                 <div className="flex flex-col items-center">
                   <p className="text-xs text-gray-500">
                     Would you rather use email and password?
diff --git a/src/utils/getApiUrl.ts b/src/utils/getApiUrl.ts
new file mode 100644
index 000000000..2579b1996
--- /dev/null
+++ b/src/utils/getApiUrl.ts
@@ -0,0 +1,11 @@
+"use server";
+
+export const getApiUrl = async (): Promise<string> => {
+  const apiUrl = process.env.API_URL;
+
+  if (!apiUrl) {
+    throw new Error("API_URL environment variable is not defined");
+  }
+
+  return apiUrl;
+};

From 9eaa0fad084f815a8ef921f42ecfe95f899a7407 Mon Sep 17 00:00:00 2001
From: Chibuzo Ekwue <chieezy5@gmail.com>
Date: Mon, 29 Jul 2024 20:46:13 +0100
Subject: [PATCH 6/6] fixed the lint errors

---
 src/app/(auth-routes)/login/page.tsx    | 25 ++++++++++++-------------
 src/app/(auth-routes)/register/page.tsx |  5 -----
 2 files changed, 12 insertions(+), 18 deletions(-)

diff --git a/src/app/(auth-routes)/login/page.tsx b/src/app/(auth-routes)/login/page.tsx
index a4ad95282..6a8bebf22 100644
--- a/src/app/(auth-routes)/login/page.tsx
+++ b/src/app/(auth-routes)/login/page.tsx
@@ -100,18 +100,17 @@ const LoginPage = () => {
         </div>
 
         <div className="flex flex-col justify-center space-y-4 sm:flex-row sm:space-x-6 sm:space-y-0">
-          
-            <Button className="flex items-center rounded-md border border-gray-300 bg-white px-4 py-4 text-gray-700 shadow-sm hover:bg-gray-50">
-              <Image
-                src={Google}
-                width={20}
-                height={20}
-                alt="Goggle"
-                className="mr-2"
-              />
-              Sign in with Google
-            </Button>
-          
+          <Button className="flex items-center rounded-md border border-gray-300 bg-white px-4 py-4 text-gray-700 shadow-sm hover:bg-gray-50">
+            <Image
+              src={Google}
+              width={20}
+              height={20}
+              alt="Goggle"
+              className="mr-2"
+            />
+            Sign in with Google
+          </Button>
+
           <Button className="flex items-center rounded-md border border-gray-300 bg-white px-4 py-4 text-gray-700 shadow-sm hover:bg-gray-50">
             <Image
               src={Facebook}
@@ -120,7 +119,7 @@ const LoginPage = () => {
               alt="Facebook"
               className="mr-2"
             />
-            Sign in with Google
+            Sign in with facebook
           </Button>
         </div>
 
diff --git a/src/app/(auth-routes)/register/page.tsx b/src/app/(auth-routes)/register/page.tsx
index f0013bcc6..8d459c7fd 100644
--- a/src/app/(auth-routes)/register/page.tsx
+++ b/src/app/(auth-routes)/register/page.tsx
@@ -128,11 +128,6 @@ const SignUp = () => {
         <CustomButton
           isDisabled={!apiUrl}
           variant="outline"
-          href={
-            apiUrl === ""
-              ? undefined
-              : `${apiUrl}/api/v1/auth/social/facebook?provider=facebook`
-          }
           isLeftIconVisible={true}
           icon={
             <svg