Merge pull request #111 from tarunkumar2005/login-signup-enhanced

Enhanced the ui design of the login and signup pages.

Author: Aarzookhunger

app/auth/signin/page.tsx

@@ -8,25 +8,21 @@ import { z } from "zod";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import Pageloader from "@/components/ui/Pageloader";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-
 import {
   Form,
   FormControl,
-  FormDescription,
   FormField,
   FormItem,
   FormLabel,
   FormMessage,
+  FormDescription,
 } from "@/components/ui/form";
 import { useToast } from "@/components/ui/use-toast";
 import Link from "next/link";
 import { useState } from "react";
-import loader, { AtSign, Eye, EyeOff } from "lucide-react";
+import Image from "next/image";
+import { useTheme } from 'next-themes';
+import { AtSign, Eye, EyeOff } from "lucide-react";
 
 const signInSchema = z.object({
   email: z.string().email("Invalid email address"),
@@ -36,9 +32,9 @@ const signInSchema = z.object({
 type SignInFormData = z.infer<typeof signInSchema>;
 
 export default function SignInPage() {
+  const { theme } = useTheme();
   const { toast } = useToast();
-  const [Loading, setLoading] = useState<boolean>(false);
-
+  const [loading, setLoading] = useState<boolean>(false);
   const [showPassword, setShowPassword] = useState<boolean>(false);
 
   const form = useForm<SignInFormData>({
@@ -69,7 +65,6 @@ export default function SignInPage() {
       toast({
         description: "Login successful",
       });
-
       setTimeout(() => {
         router.refresh();
       }, 100);
@@ -78,11 +73,13 @@ export default function SignInPage() {
   };
 
   return (
-    <div className="flex flex-col items-center justify-center min-h-screen">
-      <div className="w-full max-w-md p-6 bg-white dark:bg-[#141414] border rounded-lg">
-        <h2 className="text-xl font-bold text-[#5469a2] text- mb-4">
-          Login into git-trace
-        </h2>
+    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-50">
+      <div className="w-full max-w-md p-8 bg-white rounded-lg shadow-md">
+        <div className="flex flex-col items-center mb-6">
+          <Image src={theme === 'dark' ? '/git4.png' : '/git3.png'} alt="Logo" width={60} height={60} />
+          <h1 className="text-2xl font-bold text-gray-900">Welcome to git-trace</h1>
+          <p className="text-sm text-gray-600">Track all your github repositories here.</p>
+        </div>
         <div className="border-b border-gray-300 pb-4 mb-4">
           <Form {...form}>
             <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
@@ -91,24 +88,15 @@ export default function SignInPage() {
                 name="email"
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel className="dark:text-white text-black">
-                      Email
-                    </FormLabel>
+                    <FormLabel>Email</FormLabel>
                     <FormControl>
                       <div className="flex items-center">
-                        <Input
-                          placeholder="Email"
-                          {...field}
-                          className="w-full dark:text-black"
-                        />
+                        <Input placeholder="Enter your email" {...field} className="w-full dark:text-black" />
                         <div className="ml-2 text-gray-500 focus:outline-none">
                           <AtSign />
                         </div>
                       </div>
                     </FormControl>
-                    <FormDescription>
-                      This is the email address you will use to sign in.
-                    </FormDescription>
                     <FormMessage />
                   </FormItem>
                 )}
@@ -118,17 +106,12 @@ export default function SignInPage() {
                 name="password"
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel className="flex justify-between">
-                      <p className="dark:text-white text-black">Password</p>
-                      <Link href="/auth/forgot-password/email">
-                        Forgot Password?
-                      </Link>
-                    </FormLabel>
+                    <FormLabel>Password</FormLabel>
                     <FormControl>
                       <div className="flex items-center">
                         <Input
                           type={showPassword ? "text" : "password"}
-                          placeholder="Password"
+                          placeholder="Enter your password"
                           {...field}
                           className="w-full dark:text-black"
                         />
@@ -141,31 +124,41 @@ export default function SignInPage() {
                         </button>
                       </div>
                     </FormControl>
-                    <FormDescription>
-                      Enter your password to log in.
-                    </FormDescription>
                     <FormMessage />
                   </FormItem>
                 )}
               />
-              <Button
-                type="submit"
-                className="w-full bg-[#425893] text-white hover:text-black"
-              >
-                {Loading ? <Pageloader /> : "Login"}
+              <Button type="submit" className="w-full bg-primary text-white hover:bg-blue-700">
+                {loading ? <Pageloader /> : "Log in"}
               </Button>
             </form>
           </Form>
         </div>
-        <div className="flex justify-end border-gray-300">
-          <Link
-            href="/auth/signup"
-            className="text-sm text-[#425893] hover:text-gray-600 underline"
-          >
-            Register
+        <div className="mt-4 text-center">
+          <p className="text-sm text-gray-600">Or continue with</p>
+          <Button variant="outline" className="w-full mt-2">
+            <svg className="h-5 w-5 mr-2" viewBox="0 0 24 24">
+              <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4" />
+              <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853" />
+              <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05" />
+              <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335" />
+              <path d="M1 1h22v22H1z" fill="none" />
+            </svg>
+            Sign in with Google
+          </Button>
+        </div>
+        <div className="mt-6 flex justify-between text-sm">
+          <Link href="/auth/forgot-password" className="text-primary hover:underline">
+            Forgot your password?
+          </Link>
+          <Link href="/auth/signup" className="text-primary hover:underline">
+            Sign up for an account
           </Link>
         </div>
+        <p className="mt-8 text-xs text-center text-gray-500">
+          © 2024 git-trace Inc. All rights reserved.
+        </p>
       </div>
     </div>
   );
-}
+}