Skip to content

Commit 0e49822

Browse files
0xdevcollins0xdevcollins
committed
2 parents 4cfdc6b + 7c0d54b commit 0e49822

15 files changed

Lines changed: 3308 additions & 4600 deletions

File tree

‎app/auth/reset-password/page.tsx‎

Lines changed: 125 additions & 121 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,9 @@
11
'use client';
22

3-
import { useState, useEffect } from 'react';
4-
import { useRouter, useSearchParams } from 'next/navigation';
5-
import Link from 'next/link';
6-
import { Input } from '@/components/ui/input';
7-
import { Card, CardContent } from '@/components/ui/card';
3+
import AuthLoadingState from '@/components/auth/AuthLoadingState';
4+
import { BoundlessButton } from '@/components/buttons';
85
import { Alert, AlertDescription } from '@/components/ui/alert';
9-
import { Lock, Eye, EyeOff } from 'lucide-react';
6+
import { Card, CardContent } from '@/components/ui/card';
107
import {
118
Form,
129
FormControl,
@@ -15,10 +12,14 @@ import {
1512
FormLabel,
1613
FormMessage,
1714
} from '@/components/ui/form';
18-
import { useForm } from 'react-hook-form';
15+
import { Input } from '@/components/ui/input';
1916
import { zodResolver } from '@hookform/resolvers/zod';
17+
import { Eye, EyeOff, Lock } from 'lucide-react';
18+
import Link from 'next/link';
19+
import { useRouter, useSearchParams } from 'next/navigation';
20+
import { useEffect, useState } from 'react';
21+
import { useForm } from 'react-hook-form';
2022
import { z } from 'zod';
21-
import { BoundlessButton } from '@/components/buttons';
2223

2324
const resetPasswordSchema = z
2425
.object({
@@ -128,121 +129,124 @@ export default function ResetPasswordPage() {
128129
}
129130

130131
return (
131-
<div className='min-h-screen flex items-center justify-center bg-background py-12 px-4 sm:px-6 lg:px-8'>
132-
<div className='max-w-md w-full space-y-8'>
133-
<div className='text-center'>
134-
<h2 className='mt-6 text-[40px] font-medium text-white'>
135-
Reset your password
136-
</h2>
137-
<p className='mt-2 text-[#D9D9D9]'>Enter your new password below</p>
138-
</div>
139-
140-
{successMessage && (
141-
<div className='text-sm text-green-500'>{successMessage}</div>
142-
)}
143-
144-
{errorMessage && (
145-
<div className='text-sm text-red-500'>{errorMessage}</div>
146-
)}
147-
148-
<Form {...form}>
149-
<form
150-
onSubmit={form.handleSubmit(handleSubmit)}
151-
className='space-y-4'
152-
>
153-
<FormField
154-
control={form.control}
155-
name='password'
156-
render={({ field }) => (
157-
<FormItem>
158-
<FormLabel className='text-white text-xs font-medium'>
159-
New Password
160-
</FormLabel>
161-
<FormControl>
162-
<div className='relative'>
163-
<Lock className='absolute left-3 top-3 h-4 w-4 text-gray-400' />
164-
<Input
165-
{...field}
166-
type={showPassword ? 'text' : 'password'}
167-
placeholder='Enter new password'
168-
className='pl-10 pr-10 text-white placeholder:text-[#B5B5B5] border-[#2B2B2B] bg-[#1C1C1C] focus-visible:ring-0 focus-visible:ring-offset-0 caret-white w-full'
169-
/>
170-
<button
171-
type='button'
172-
onClick={() => setShowPassword(!showPassword)}
173-
className='absolute right-3 top-3 text-gray-400 hover:text-gray-600'
174-
>
175-
{showPassword ? (
176-
<EyeOff className='h-4 w-4' />
177-
) : (
178-
<Eye className='h-4 w-4' />
179-
)}
180-
</button>
181-
</div>
182-
</FormControl>
183-
<FormMessage />
184-
</FormItem>
185-
)}
186-
/>
187-
188-
<FormField
189-
control={form.control}
190-
name='confirmPassword'
191-
render={({ field }) => (
192-
<FormItem>
193-
<FormLabel className='text-white text-xs font-medium'>
194-
Confirm New Password
195-
</FormLabel>
196-
<FormControl>
197-
<div className='relative'>
198-
<Lock className='absolute left-3 top-3 h-4 w-4 text-gray-400' />
199-
<Input
200-
{...field}
201-
type={showConfirmPassword ? 'text' : 'password'}
202-
placeholder='Confirm new password'
203-
className='pl-10 pr-10 text-white placeholder:text-[#B5B5B5] border-[#2B2B2B] bg-[#1C1C1C] focus-visible:ring-0 focus-visible:ring-offset-0 caret-white w-full'
204-
/>
205-
<button
206-
type='button'
207-
onClick={() =>
208-
setShowConfirmPassword(!showConfirmPassword)
209-
}
210-
className='absolute right-3 top-3 text-gray-400 hover:text-gray-600'
211-
>
212-
{showConfirmPassword ? (
213-
<EyeOff className='h-4 w-4' />
214-
) : (
215-
<Eye className='h-4 w-4' />
216-
)}
217-
</button>
218-
</div>
219-
</FormControl>
220-
<FormMessage />
221-
</FormItem>
222-
)}
223-
/>
224-
225-
<BoundlessButton
226-
type='submit'
227-
className='w-full'
228-
disabled={isLoading}
229-
fullWidth
230-
loading={isLoading}
132+
<>
133+
{isLoading && <AuthLoadingState message='Signing in...' />}
134+
<div className='min-h-screen flex items-center justify-center bg-background py-12 px-4 sm:px-6 lg:px-8'>
135+
<div className='max-w-md w-full space-y-8'>
136+
<div className='text-center'>
137+
<h2 className='mt-6 text-[40px] font-medium text-white'>
138+
Reset your password
139+
</h2>
140+
<p className='mt-2 text-[#D9D9D9]'>Enter your new password below</p>
141+
</div>
142+
143+
{successMessage && (
144+
<div className='text-sm text-green-500'>{successMessage}</div>
145+
)}
146+
147+
{errorMessage && (
148+
<div className='text-sm text-red-500'>{errorMessage}</div>
149+
)}
150+
151+
<Form {...form}>
152+
<form
153+
onSubmit={form.handleSubmit(handleSubmit)}
154+
className='space-y-4'
155+
>
156+
<FormField
157+
control={form.control}
158+
name='password'
159+
render={({ field }) => (
160+
<FormItem>
161+
<FormLabel className='text-white text-xs font-medium'>
162+
New Password
163+
</FormLabel>
164+
<FormControl>
165+
<div className='relative'>
166+
<Lock className='absolute left-3 top-3 h-4 w-4 text-gray-400' />
167+
<Input
168+
{...field}
169+
type={showPassword ? 'text' : 'password'}
170+
placeholder='Enter new password'
171+
className='pl-10 pr-10 text-white placeholder:text-[#B5B5B5] border-[#2B2B2B] bg-[#1C1C1C] focus-visible:ring-0 focus-visible:ring-offset-0 caret-white w-full'
172+
/>
173+
<button
174+
type='button'
175+
onClick={() => setShowPassword(!showPassword)}
176+
className='absolute right-3 top-3 text-gray-400 hover:text-gray-600'
177+
>
178+
{showPassword ? (
179+
<EyeOff className='h-4 w-4' />
180+
) : (
181+
<Eye className='h-4 w-4' />
182+
)}
183+
</button>
184+
</div>
185+
</FormControl>
186+
<FormMessage />
187+
</FormItem>
188+
)}
189+
/>
190+
191+
<FormField
192+
control={form.control}
193+
name='confirmPassword'
194+
render={({ field }) => (
195+
<FormItem>
196+
<FormLabel className='text-white text-xs font-medium'>
197+
Confirm New Password
198+
</FormLabel>
199+
<FormControl>
200+
<div className='relative'>
201+
<Lock className='absolute left-3 top-3 h-4 w-4 text-gray-400' />
202+
<Input
203+
{...field}
204+
type={showConfirmPassword ? 'text' : 'password'}
205+
placeholder='Confirm new password'
206+
className='pl-10 pr-10 text-white placeholder:text-[#B5B5B5] border-[#2B2B2B] bg-[#1C1C1C] focus-visible:ring-0 focus-visible:ring-offset-0 caret-white w-full'
207+
/>
208+
<button
209+
type='button'
210+
onClick={() =>
211+
setShowConfirmPassword(!showConfirmPassword)
212+
}
213+
className='absolute right-3 top-3 text-gray-400 hover:text-gray-600'
214+
>
215+
{showConfirmPassword ? (
216+
<EyeOff className='h-4 w-4' />
217+
) : (
218+
<Eye className='h-4 w-4' />
219+
)}
220+
</button>
221+
</div>
222+
</FormControl>
223+
<FormMessage />
224+
</FormItem>
225+
)}
226+
/>
227+
228+
<BoundlessButton
229+
type='submit'
230+
className='w-full'
231+
disabled={isLoading}
232+
fullWidth
233+
loading={isLoading}
234+
>
235+
Reset Password
236+
</BoundlessButton>
237+
</form>
238+
</Form>
239+
240+
<div className='text-center'>
241+
<Link
242+
href='/auth/signin'
243+
className='text-sm text-primary hover:text-primary/80'
231244
>
232-
Reset Password
233-
</BoundlessButton>
234-
</form>
235-
</Form>
236-
237-
<div className='text-center'>
238-
<Link
239-
href='/auth/signin'
240-
className='text-sm text-primary hover:text-primary/80'
241-
>
242-
Back to sign in
243-
</Link>
245+
Back to sign in
246+
</Link>
247+
</div>
244248
</div>
245249
</div>
246-
</div>
250+
</>
247251
);
248252
}

‎app/auth/signin/page.tsx‎

Lines changed: 18 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
'use client';
22
import AuthLayout from '@/components/auth/AuthLayout';
3+
import AuthLoadingState from '@/components/auth/AuthLoadingState';
34
import LoginForm from '@/components/auth/LoginForm';
4-
import { useState } from 'react';
5-
import { useRouter, useSearchParams } from 'next/navigation';
5+
import { zodResolver } from '@hookform/resolvers/zod';
6+
import Cookies from 'js-cookie';
67
import { getSession, signIn } from 'next-auth/react';
8+
import { useRouter, useSearchParams } from 'next/navigation';
9+
import { useState } from 'react';
10+
import { useForm } from 'react-hook-form';
711
import { toast } from 'sonner';
8-
import Cookies from 'js-cookie';
912
import z from 'zod';
10-
import { useForm } from 'react-hook-form';
11-
import { zodResolver } from '@hookform/resolvers/zod';
12-
import Loading from '@/components/loading/Loading';
1313

1414
const formSchema = z.object({
1515
email: z.string().email({
@@ -99,19 +99,18 @@ export default function SignInPage() {
9999
}
100100
};
101101

102-
if (isLoading) {
103-
return <Loading />;
104-
}
105-
106102
return (
107-
<AuthLayout>
108-
<LoginForm
109-
form={form}
110-
onSubmit={onSubmit}
111-
showPassword={showPassword}
112-
setShowPassword={setShowPassword}
113-
isLoading={isLoading}
114-
/>
115-
</AuthLayout>
103+
<>
104+
{isLoading && <AuthLoadingState message='Signing in...' />}
105+
<AuthLayout>
106+
<LoginForm
107+
form={form}
108+
onSubmit={onSubmit}
109+
showPassword={showPassword}
110+
setShowPassword={setShowPassword}
111+
isLoading={isLoading}
112+
/>
113+
</AuthLayout>
114+
</>
116115
);
117116
}

‎app/auth/signup/page.tsx‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,20 @@
11
'use client';
22
import AuthLayout from '@/components/auth/AuthLayout';
3+
import AuthLoadingState from '@/components/auth/AuthLoadingState';
34
import SignupForm from '@/components/auth/SignupForm';
4-
import React from 'react';
5+
import { useState } from 'react';
6+
7+
const SignupPage = () => {
8+
const [isLoading, setIsLoading] = useState(false);
59

6-
const page = () => {
710
return (
8-
<AuthLayout>
9-
<SignupForm />
10-
</AuthLayout>
11+
<>
12+
{isLoading && <AuthLoadingState message='Creating account...' />}
13+
<AuthLayout>
14+
<SignupForm onLoadingChange={setIsLoading} />
15+
</AuthLayout>
16+
</>
1117
);
1218
};
1319

14-
export default page;
20+
export default SignupPage;

0 commit comments

Comments
 (0)