Merge pull request #656 from crystal4000/feat/Authentication/Login

src/app/(auth-routes)/login/page.test.tsx

@@ -24,31 +24,43 @@ type FieldType = {
 };
 
 vi.mock("~/components/ui/form", () => ({
-  Form: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
-  FormField: ({
+  Form: function Form({ children }: { children: React.ReactNode }) {
+    return <div>{children}</div>;
+  },
+  FormField: function FormField({
     render,
   }: {
     render: (properties: { field: FieldType }) => React.ReactNode;
-  }) =>
-    render({
+  }) {
+    return render({
       field: {
         onChange: vi.fn(),
         onBlur: vi.fn(),
         value: "",
         name: "",
         ref: () => {},
       },
-    }),
-  FormItem: ({ children }: { children: React.ReactNode }) => (
-    <div>{children}</div>
-  ),
-  FormLabel: ({ children }: { children: React.ReactNode }) => (
-    <label>{children}</label>
-  ),
-  FormControl: ({ children }: { children: React.ReactNode }) => (
-    <div>{children}</div>
-  ),
-  FormMessage: ({ children }: { children: React.ReactNode }) => children,
+    });
+  },
+  FormItem: function FormItem({ children }: { children: React.ReactNode }) {
+    return <div>{children}</div>;
+  },
+  FormLabel: function FormLabel({ children }: { children: React.ReactNode }) {
+    return <label>{children}</label>;
+  },
+  FormControl: React.forwardRef(function FormControl(
+    { children }: { children: React.ReactNode },
+    reference: React.Ref<HTMLDivElement>,
+  ) {
+    return <div ref={reference}>{children}</div>;
+  }),
+  FormMessage: function FormMessage({
+    children,
+  }: {
+    children: React.ReactNode;
+  }) {
+    return children;
+  },
 }));
 
 vi.mock("~/components/ui/input", () => ({

src/app/(auth-routes)/login/page.tsx

@@ -2,6 +2,7 @@
 
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Eye, EyeOff, ShieldCheck } from "lucide-react";
+import Image from "next/image";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
@@ -76,6 +77,29 @@ const LoginPage = () => {
           </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/goggle.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 px-4 py-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>
+        </div>
+
         <div className="flex items-center justify-center">
           <hr className="w-full border-t border-gray-300" />
           <span className="font-inter text-neutralColor-dark-1 px-3 text-xs font-normal leading-tight">