Skip to content

Commit a559404

Browse files
yashksaini-coderyashksaini-coder
authored
Merge pull request #78 from hanuchaudhary/enhanceSign
Enhance Sign Up & Sign In page
2 parents 55dbe0c + 02abebd commit a559404

File tree

6 files changed

+240
-202
lines changed

6 files changed

+240
-202
lines changed

‎components/AuthComponent/SigninForm.tsx‎

Lines changed: 92 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -50,84 +50,102 @@ export default function SigninForm() {
5050
};
5151

5252
return (
53-
<main className="flex min-h-screen items-center justify-center px-4">
54-
<Card className="w-full max-w-sm rounded-2xl">
55-
<CardHeader>
56-
<CardTitle>Sign in</CardTitle>
57-
<CardDescription>
58-
Enter your credentials to access your account
59-
</CardDescription>
60-
</CardHeader>
61-
<CardContent>
62-
<Form {...form}>
63-
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
64-
<FormField
65-
control={form.control}
66-
name="email"
67-
render={({ field }) => (
68-
<FormItem>
69-
<FormLabel>Email</FormLabel>
70-
<FormControl>
71-
<Input placeholder="you@example.com" {...field} />
72-
</FormControl>
73-
<FormMessage />
74-
</FormItem>
75-
)}
76-
/>
77-
<FormField
78-
control={form.control}
79-
name="password"
80-
render={({ field }) => (
81-
<FormItem>
82-
<FormLabel>Password</FormLabel>
83-
<FormControl>
84-
<div className="relative">
53+
<main className="flex min-h-screen items-center justify-center p-2 md:p-0">
54+
<div className="w-full max-w-3xl min-h-[70vh] grid md:grid-cols-2 gap-8 bg-light-auth dark:bg-dark-auth rounded-2xl shadow-lg md:overflow-hidden">
55+
<Card className="md:col-span-1 flex flex-col justify-center h-full md:border-none shadow-none md:bg-primary-foreground/10 backdrop-blur-3xl">
56+
<CardHeader className="space-y-1">
57+
<CardTitle className="text-3xl font-bold">
58+
Log In
59+
</CardTitle>
60+
<CardDescription>
61+
Enter your credentials to access your account
62+
</CardDescription>
63+
</CardHeader>
64+
<CardContent>
65+
<Form {...form}>
66+
<form
67+
onSubmit={form.handleSubmit(onSubmit)}
68+
className="space-y-4"
69+
>
70+
<FormField
71+
control={form.control}
72+
name="email"
73+
render={({ field }) => (
74+
<FormItem>
75+
<FormLabel>Email</FormLabel>
76+
<FormControl>
8577
<Input
86-
type={showPassword ? "text" : "password"}
87-
placeholder="••••••••"
78+
placeholder="you@example.com"
8879
{...field}
80+
className="rounded-md"
8981
/>
90-
<Button
91-
type="button"
92-
variant="ghost"
93-
size="sm"
94-
className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
95-
onClick={() => setShowPassword(!showPassword)}
96-
>
97-
{showPassword ? (
98-
<EyeOff className="h-4 w-4" />
99-
) : (
100-
<Eye className="h-4 w-4" />
101-
)}
102-
</Button>
103-
</div>
104-
</FormControl>
105-
<FormMessage />
106-
</FormItem>
82+
</FormControl>
83+
<FormMessage />
84+
</FormItem>
85+
)}
86+
/>
87+
<FormField
88+
control={form.control}
89+
name="password"
90+
render={({ field }) => (
91+
<FormItem>
92+
<FormLabel>Password</FormLabel>
93+
<FormControl>
94+
<div className="relative">
95+
<Input
96+
type={showPassword ? "text" : "password"}
97+
placeholder="••••••••"
98+
{...field}
99+
className="rounded-md pr-10"
100+
/>
101+
<Button
102+
type="button"
103+
variant="ghost"
104+
size="sm"
105+
className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
106+
onClick={() => setShowPassword(!showPassword)}
107+
>
108+
{showPassword ? (
109+
<EyeOff className="h-4 w-4" />
110+
) : (
111+
<Eye className="h-4 w-4" />
112+
)}
113+
</Button>
114+
</div>
115+
</FormControl>
116+
<FormMessage />
117+
</FormItem>
118+
)}
119+
/>
120+
{signinError && (
121+
<Alert variant="destructive">
122+
<AlertDescription>{signinError}</AlertDescription>
123+
</Alert>
107124
)}
108-
/>
109-
{signinError && (
110-
<Alert variant="destructive">
111-
<AlertDescription>{signinError}</AlertDescription>
112-
</Alert>
113-
)}
114-
<LoadingButton
115-
loading={isSigningIn}
116-
loadingTitle="Signing in"
117-
title="Sign in"
118-
type="submit"
119-
/>
120-
</form>
121-
</Form>
122-
</CardContent>
123-
<CardFooter className="flex justify-center">
124-
<AuthBottom
125-
href="/auth/register"
126-
title="Don't have an account? "
127-
toTitle="Create One!"
128-
/>
129-
</CardFooter>
130-
</Card>
125+
<LoadingButton
126+
loading={isSigningIn}
127+
loadingTitle="Signing in"
128+
title="Sign in"
129+
type="submit"
130+
/>
131+
</form>
132+
</Form>
133+
</CardContent>
134+
<CardFooter className="flex justify-center">
135+
<AuthBottom
136+
href="/auth/register"
137+
title="Don't have an account?"
138+
toTitle="Create One!"
139+
/>
140+
</CardFooter>
141+
</Card>
142+
<div className="hidden md:flex flex-col justify-center p-4">
143+
<h1 className="text-5xl font-bold mb-4">Welcome Back</h1>
144+
<h2 className="text-xl">
145+
We're glad to see you again! Please sign in to continue.
146+
</h2>
147+
</div>
148+
</div>
131149
</main>
132150
);
133151
}

0 commit comments

Comments
 (0)