Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enhanced the ui design of the login and signup pages. #111

Merged
merged 2 commits into from
Oct 25, 2024
Merged

Enhanced the ui design of the login and signup pages. #111

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8313950
Enhanced the ui design of the login and signup pages.
tarunkumar2005 Oct 19, 2024
31b8aed
Resolved conflicts and extra features
tarunkumar2005 Oct 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
91 changes: 42 additions & 49 deletions app/auth/signin/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"),
Expand All @@ -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>({
Expand Down Expand Up @@ -69,7 +65,6 @@ export default function SignInPage() {
toast({
description: "Login successful",
});

setTimeout(() => {
router.refresh();
}, 100);
Expand All @@ -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">
Expand All @@ -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>
)}
Expand All @@ -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"
/>
Expand All @@ -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>
);
}
}
Loading