Skip to content

Commit 02abebd

Browse files
hanuchaudharyhanuchaudhary
committed
signup done
1 parent b8dd110 commit 02abebd

File tree

2 files changed

+160
-142
lines changed

2 files changed

+160
-142
lines changed

‎components/AuthComponent/SigninForm.tsx

+17-14
Original file line numberDiff line numberDiff line change
@@ -50,11 +50,13 @@ export default function SigninForm() {
5050
};
5151

5252
return (
53-
<main className="flex min-h-screen items-center justify-center px-4">
54-
<div className="grid md:grid-cols-2 grid-cols-1 md:dark:bg-dark-auth md:bg-light-auth md:bg-no-repeat object-cover rounded-xl md:p-10 gap-10">
55-
<Card className="w-full md:border-none md:bg-white/10 backdrop-blur-3xl max-w-sm rounded-2xl">
56-
<CardHeader>
57-
<CardTitle>Sign in</CardTitle>
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>
5860
<CardDescription>
5961
Enter your credentials to access your account
6062
</CardDescription>
@@ -72,7 +74,11 @@ export default function SigninForm() {
7274
<FormItem>
7375
<FormLabel>Email</FormLabel>
7476
<FormControl>
75-
<Input placeholder="you@example.com" {...field} />
77+
<Input
78+
placeholder="you@example.com"
79+
{...field}
80+
className="rounded-md"
81+
/>
7682
</FormControl>
7783
<FormMessage />
7884
</FormItem>
@@ -90,6 +96,7 @@ export default function SigninForm() {
9096
type={showPassword ? "text" : "password"}
9197
placeholder="••••••••"
9298
{...field}
99+
className="rounded-md pr-10"
93100
/>
94101
<Button
95102
type="button"
@@ -127,18 +134,14 @@ export default function SigninForm() {
127134
<CardFooter className="flex justify-center">
128135
<AuthBottom
129136
href="/auth/register"
130-
title="Don't have an account? "
137+
title="Don't have an account?"
131138
toTitle="Create One!"
132139
/>
133140
</CardFooter>
134141
</Card>
135-
<div className="h-96 md:flex hidden flex-col justify-center w-96">
136-
<div>
137-
<h1 className="text-7xl font-semibold">Welcome</h1>
138-
<h1 className="text-7xl font-semibold">Back</h1>
139-
</div>
140-
141-
<h2 className="text-2xl mt-4">
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">
142145
We're glad to see you again! Please sign in to continue.
143146
</h2>
144147
</div>

‎components/AuthComponent/SignupForm.tsx

+143-128
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { useRouter } from "next/navigation";
55
import { zodResolver } from "@hookform/resolvers/zod";
66
import { useForm } from "react-hook-form";
77
import * as z from "zod";
8-
import { Eye, EyeOff } from "lucide-react";
8+
import { Eye, EyeOff } from 'lucide-react';
99
import { Button } from "@/components/ui/button";
1010
import {
1111
Form,
@@ -36,6 +36,7 @@ import { useAuthStore } from "@/store/AuthStore/useAuthStore";
3636
import AuthBottom from "./AuthBottom";
3737
import LoadingButton from "../Buttons/LoadingButton";
3838
import { signupSchema } from "@/validations/validation";
39+
3940
type SignupFormValues = z.infer<typeof signupSchema>;
4041

4142
export default function SignupForm() {
@@ -50,7 +51,7 @@ export default function SignupForm() {
5051
email: "",
5152
password: "",
5253
leetcodeUsername: "",
53-
gender: undefined, // Changed from "" to undefined
54+
gender: undefined,
5455
},
5556
});
5657

@@ -59,137 +60,151 @@ export default function SignupForm() {
5960
};
6061

6162
return (
62-
<main className="flex min-h-screen items-center justify-center px-4">
63-
<Card className="w-full max-w-md rounded-2xl">
64-
<CardHeader>
65-
<CardTitle className="text-2xl font-bold">
66-
Register your Account
67-
</CardTitle>
68-
<CardDescription>
69-
Sign up to start your coding journey
70-
</CardDescription>
71-
</CardHeader>
72-
<CardContent>
73-
<Form {...form}>
74-
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
75-
<FormField
76-
control={form.control}
77-
name="fullName"
78-
render={({ field }) => (
79-
<FormItem>
80-
<FormLabel>Full Name</FormLabel>
81-
<FormControl>
82-
<Input placeholder="Your Name" {...field} />
83-
</FormControl>
84-
<FormMessage />
85-
</FormItem>
86-
)}
87-
/>
88-
<FormField
89-
control={form.control}
90-
name="email"
91-
render={({ field }) => (
92-
<FormItem>
93-
<FormLabel>Email</FormLabel>
94-
<FormControl>
95-
<Input placeholder="you@example.com" {...field} />
96-
</FormControl>
97-
<FormMessage />
98-
</FormItem>
99-
)}
100-
/>
101-
<FormField
102-
control={form.control}
103-
name="password"
104-
render={({ field }) => (
105-
<FormItem>
106-
<FormLabel>Password</FormLabel>
107-
<FormControl>
108-
<div className="relative">
63+
<main className="flex min-h-screen items-center justify-center md:p-0 p-2">
64+
<div className="w-full max-w-4xl grid md:grid-cols-2 gap-8 bg-light-auth dark:bg-dark-auth rounded-2xl shadow-lg md:overflow-hidden">
65+
<Card className="md:col-span-1 md:bg-primary-foreground/10 backdrop-blur-3xl md:border-none shadow-none">
66+
<CardHeader className="space-y-1">
67+
<CardTitle className="text-3xl font-bold ">Register</CardTitle>
68+
<CardDescription>
69+
Sign up to start your coding journey
70+
</CardDescription>
71+
</CardHeader>
72+
<CardContent>
73+
<Form {...form}>
74+
<form
75+
onSubmit={form.handleSubmit(onSubmit)}
76+
className="space-y-4"
77+
>
78+
<FormField
79+
control={form.control}
80+
name="fullName"
81+
render={({ field }) => (
82+
<FormItem>
83+
<FormLabel>Full Name</FormLabel>
84+
<FormControl>
85+
<Input placeholder="Your Name" {...field} className="rounded-md" />
86+
</FormControl>
87+
<FormMessage />
88+
</FormItem>
89+
)}
90+
/>
91+
<FormField
92+
control={form.control}
93+
name="email"
94+
render={({ field }) => (
95+
<FormItem>
96+
<FormLabel>Email</FormLabel>
97+
<FormControl>
98+
<Input placeholder="you@example.com" {...field} className="rounded-md" />
99+
</FormControl>
100+
<FormMessage />
101+
</FormItem>
102+
)}
103+
/>
104+
<FormField
105+
control={form.control}
106+
name="password"
107+
render={({ field }) => (
108+
<FormItem>
109+
<FormLabel>Password</FormLabel>
110+
<FormControl>
111+
<div className="relative">
112+
<Input
113+
type={showPassword ? "text" : "password"}
114+
placeholder="••••••"
115+
{...field}
116+
className="rounded-md pr-10"
117+
/>
118+
<Button
119+
type="button"
120+
variant="ghost"
121+
size="sm"
122+
className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
123+
onClick={() => setShowPassword(!showPassword)}
124+
>
125+
{showPassword ? (
126+
<EyeOff className="h-4 w-4" />
127+
) : (
128+
<Eye className="h-4 w-4" />
129+
)}
130+
</Button>
131+
</div>
132+
</FormControl>
133+
<FormMessage />
134+
</FormItem>
135+
)}
136+
/>
137+
<FormField
138+
control={form.control}
139+
name="leetcodeUsername"
140+
render={({ field }) => (
141+
<FormItem>
142+
<FormLabel>LeetCode Username</FormLabel>
143+
<FormControl>
109144
<Input
110-
type={showPassword ? "text" : "password"}
111-
placeholder="••••••"
145+
placeholder="Your LeetCode Username"
112146
{...field}
147+
className="rounded-md"
113148
/>
114-
<Button
115-
type="button"
116-
variant="ghost"
117-
size="sm"
118-
className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
119-
onClick={() => setShowPassword(!showPassword)}
120-
>
121-
{showPassword ? (
122-
<EyeOff className="h-4 w-4" />
123-
) : (
124-
<Eye className="h-4 w-4" />
125-
)}
126-
</Button>
127-
</div>
128-
</FormControl>
129-
<FormMessage />
130-
</FormItem>
131-
)}
132-
/>
133-
<FormField
134-
control={form.control}
135-
name="leetcodeUsername"
136-
render={({ field }) => (
137-
<FormItem>
138-
<FormLabel>LeetCode Username</FormLabel>
139-
<FormControl>
140-
<Input placeholder="Your LeetCode Username" {...field} />
141-
</FormControl>
142-
<FormMessage />
143-
</FormItem>
144-
)}
145-
/>
146-
<FormField
147-
control={form.control}
148-
name="gender"
149-
render={({ field }) => (
150-
<FormItem>
151-
<FormLabel>Gender</FormLabel>
152-
<Select
153-
onValueChange={field.onChange}
154-
defaultValue={field.value}
155-
>
156-
<FormControl>
157-
<SelectTrigger>
158-
<SelectValue placeholder="Select Gender" />
159-
</SelectTrigger>
160149
</FormControl>
161-
<SelectContent>
162-
<SelectItem value="male">Male</SelectItem>
163-
<SelectItem value="female">Female</SelectItem>
164-
<SelectItem value="other">Other</SelectItem>
165-
</SelectContent>
166-
</Select>
167-
<FormMessage />
168-
</FormItem>
150+
<FormMessage />
151+
</FormItem>
152+
)}
153+
/>
154+
<FormField
155+
control={form.control}
156+
name="gender"
157+
render={({ field }) => (
158+
<FormItem>
159+
<FormLabel>Gender</FormLabel>
160+
<Select
161+
onValueChange={field.onChange}
162+
defaultValue={field.value}
163+
>
164+
<FormControl>
165+
<SelectTrigger className="rounded-md">
166+
<SelectValue placeholder="Select Gender" />
167+
</SelectTrigger>
168+
</FormControl>
169+
<SelectContent>
170+
<SelectItem value="male">Male</SelectItem>
171+
<SelectItem value="female">Female</SelectItem>
172+
<SelectItem value="other">Other</SelectItem>
173+
</SelectContent>
174+
</Select>
175+
<FormMessage />
176+
</FormItem>
177+
)}
178+
/>
179+
{signupError && (
180+
<Alert variant="destructive">
181+
<AlertDescription>{signupError}</AlertDescription>
182+
</Alert>
169183
)}
170-
/>
171-
{signupError && (
172-
<Alert variant="destructive">
173-
<AlertDescription>{signupError}</AlertDescription>
174-
</Alert>
175-
)}
176-
<LoadingButton
177-
loading={isSigningUp}
178-
loadingTitle="Registering"
179-
title="Register"
180-
type="submit"
181-
/>
182-
</form>
183-
</Form>
184-
</CardContent>
185-
<CardFooter className="flex justify-center">
186-
<AuthBottom
187-
href="/auth/signin"
188-
title="Already have an account?"
189-
toTitle="Sign In"
190-
/>
191-
</CardFooter>
192-
</Card>
184+
<LoadingButton
185+
loading={isSigningUp}
186+
loadingTitle="Registering"
187+
title="Register"
188+
type="submit"
189+
/>
190+
</form>
191+
</Form>
192+
</CardContent>
193+
<CardFooter className="flex justify-center">
194+
<AuthBottom
195+
href="/auth/signin"
196+
title="Already have an account?"
197+
toTitle="Sign In"
198+
/>
199+
</CardFooter>
200+
</Card>
201+
<div className="hidden md:flex flex-col justify-center p-8">
202+
<h1 className="text-5xl font-bold mb-4">Join Us Today</h1>
203+
<h2 className="text-xl">
204+
Create an account to start your coding journey with us.
205+
</h2>
206+
</div>
207+
</div>
193208
</main>
194209
);
195210
}

0 commit comments

Comments
 (0)