Skip to content

Commit 0ec2b12

Browse files
patelvivekdevpatelvivekdev
committed
Improve messages
1 parent c825565 commit 0ec2b12

File tree

11 files changed

+160
-144
lines changed

11 files changed

+160
-144
lines changed

‎src/actions/authAction.ts‎

Lines changed: 84 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,11 @@ import {
66
import { createUser, savePassword } from '@/db/query/User';
77
import { z } from 'zod';
88
import { signIn as signInUser } from '@/auth';
9+
import { redirect } from 'next/navigation';
910

1011
// =============================== signUp ===============================
1112
const signUpSchema = z.object({
12-
email: z.string().email('Please enter valid message').min(5),
13+
email: z.string().email('Please enter valid email address.').min(5),
1314
});
1415

1516
export async function signUp(prevState: any, formData: FormData) {
@@ -22,7 +23,7 @@ export async function signUp(prevState: any, formData: FormData) {
2223
return {
2324
type: 'error',
2425
errors: validatedFields.error.flatten().fieldErrors,
25-
message: 'Missing Fields. Failed to signUp.',
26+
message: 'Missing Fields!!',
2627
};
2728
}
2829

@@ -32,7 +33,9 @@ export async function signUp(prevState: any, formData: FormData) {
3233
if (!emailData.success) {
3334
return {
3435
type: 'error',
35-
errors: null,
36+
errors: {
37+
email: undefined,
38+
},
3639
message: 'Failed to signUp.',
3740
};
3841
}
@@ -46,7 +49,9 @@ export async function signUp(prevState: any, formData: FormData) {
4649
console.error('Failed to signUp', error);
4750
return {
4851
type: 'error',
49-
errors: null,
52+
errors: {
53+
email: undefined,
54+
},
5055
message: error.message || 'Failed to signUp.',
5156
};
5257
}
@@ -56,7 +61,7 @@ export async function signUp(prevState: any, formData: FormData) {
5661
const onBoardingSchema = z.object({
5762
name: z.string().min(2, { message: 'Must be 2 or more characters long' }),
5863
username: z.string().min(3, { message: 'Must be 3 or more characters long' }),
59-
email: z.string().email('Please enter valid message').min(5),
64+
email: z.string().email('Please enter valid email address.').min(5),
6065
password: z.string().min(8, { message: 'Must be 8 or more characters long' }),
6166
password2: z.string(),
6267
});
@@ -79,7 +84,7 @@ export async function onBoarding(
7984
return {
8085
type: 'error',
8186
errors: validatedFields.error.flatten().fieldErrors,
82-
message: 'Missing Fields. Failed to signUp.',
87+
message: 'Missing Fields!!',
8388
};
8489
}
8590

@@ -92,9 +97,9 @@ export async function onBoarding(
9297
username: undefined,
9398
email: undefined,
9499
password: undefined,
95-
password2: 'Passwords do not match',
100+
password2: undefined,
96101
},
97-
message: 'Passwords do not match. Failed to signUp.',
102+
message: 'Passwords do not match.',
98103
};
99104
}
100105

@@ -109,8 +114,14 @@ export async function onBoarding(
109114
if (user.length === 0) {
110115
return {
111116
type: 'error',
112-
errors: null,
113-
message: 'Failed to signUp.',
117+
errors: {
118+
name: undefined,
119+
username: undefined,
120+
email: undefined,
121+
password: undefined,
122+
password2: undefined,
123+
},
124+
message: 'Failed to signUp. Please try again.',
114125
};
115126
}
116127

@@ -123,7 +134,13 @@ export async function onBoarding(
123134
console.error('Failed to signUp', error);
124135
return {
125136
type: 'error',
126-
errors: null,
137+
errors: {
138+
name: undefined,
139+
username: undefined,
140+
email: undefined,
141+
password: undefined,
142+
password2: undefined,
143+
},
127144
message: error.message || 'Failed to signUp.',
128145
};
129146
}
@@ -146,46 +163,43 @@ export async function signIn(prevState: any, formData: FormData) {
146163
return {
147164
type: 'error',
148165
errors: validatedFields.error.flatten().fieldErrors,
149-
message: 'Missing Fields. Failed to signIn.',
166+
message: 'Missing Fields!!',
150167
};
151168
}
152169

153-
// Call the loginUser function
154-
let user = await signInUser('credentials', {
155-
username: validatedFields.data.username,
156-
password: validatedFields.data.password,
157-
redirect: true,
158-
redirectTo: '/profile',
159-
});
160-
161-
if (!user) {
162-
return {
163-
type: 'error',
164-
errors: null,
165-
message: 'Invalid username or password.',
166-
};
170+
try {
171+
await signInUser('credentials', {
172+
username: validatedFields.data.username,
173+
password: validatedFields.data.password,
174+
redirect: false,
175+
});
176+
} catch (error: any) {
177+
if (error.code === 'invalid-credentials') {
178+
return {
179+
type: 'error',
180+
errors: {
181+
username: undefined,
182+
password: undefined,
183+
},
184+
message: error.message,
185+
};
186+
} else {
187+
return {
188+
type: 'error',
189+
errors: {
190+
username: undefined,
191+
password: undefined,
192+
},
193+
message: 'Something went wrong. Please try again.',
194+
};
195+
}
167196
}
168-
169-
return {
170-
type: 'success',
171-
errors: null,
172-
message: 'Successfully signed in.',
173-
};
174-
175-
// try {
176-
// } catch (error: any) {
177-
// console.error('Failed to signIn', error);
178-
// return {
179-
// type: 'error',
180-
// errors: null,
181-
// message: error.message || 'Failed to signIn.',
182-
// };
183-
// }
197+
redirect('/profile');
184198
}
185199

186200
// =============================== forgotPassword ===============================
187201
const forgetPasswordSchema = z.object({
188-
email: z.string().email('Please enter valid message').min(5),
202+
email: z.string().email('Please enter valid email address.').min(5),
189203
});
190204

191205
export async function forgotPassword(prevState: any, formData: FormData) {
@@ -197,7 +211,7 @@ export async function forgotPassword(prevState: any, formData: FormData) {
197211
return {
198212
type: 'error',
199213
errors: validatedFields.error.flatten().fieldErrors,
200-
message: 'Missing Fields. Failed to send email.',
214+
message: 'Missing Fields!!',
201215
};
202216
}
203217

@@ -209,7 +223,9 @@ export async function forgotPassword(prevState: any, formData: FormData) {
209223
if (!emailData.success) {
210224
return {
211225
type: 'error',
212-
errors: null,
226+
errors: {
227+
email: undefined,
228+
},
213229
message: emailData.message || 'Failed to send email. Please try again.',
214230
};
215231
}
@@ -223,7 +239,9 @@ export async function forgotPassword(prevState: any, formData: FormData) {
223239
console.error('Failed to send email', error);
224240
return {
225241
type: 'error',
226-
errors: null,
242+
errors: {
243+
email: undefined,
244+
},
227245
message: error.message || 'Failed to send email.',
228246
};
229247
}
@@ -250,7 +268,7 @@ export async function resetPassword(
250268
return {
251269
type: 'error',
252270
errors: validatedFields.error.flatten().fieldErrors,
253-
message: 'Missing Fields. Failed to reset password.',
271+
message: 'Missing Fields!!',
254272
};
255273
}
256274

@@ -260,9 +278,9 @@ export async function resetPassword(
260278
type: 'error',
261279
errors: {
262280
password: undefined,
263-
password2: 'Passwords do not match',
281+
password2: undefined,
264282
},
265-
message: 'Make sure passwords match. Failed to reset password.',
283+
message: 'Passwords do not match.',
266284
};
267285
}
268286

@@ -272,7 +290,10 @@ export async function resetPassword(
272290
if (!user.success) {
273291
return {
274292
type: 'error',
275-
errors: null,
293+
errors: {
294+
password: undefined,
295+
password2: undefined,
296+
},
276297
message: user.message || 'Failed to reset password.',
277298
};
278299
}
@@ -285,7 +306,10 @@ export async function resetPassword(
285306
console.error('Failed to reset password.', error);
286307
return {
287308
type: 'error',
288-
errors: null,
309+
errors: {
310+
password: undefined,
311+
password2: undefined,
312+
},
289313
message: error.message || 'Failed to reset password.',
290314
};
291315
}
@@ -316,7 +340,7 @@ export async function changePassword(
316340
return {
317341
type: 'error',
318342
errors: validatedFields.error.flatten().fieldErrors,
319-
message: 'Missing Fields. Failed to change password.',
343+
message: 'Missing Fields!!',
320344
};
321345
}
322346

@@ -327,9 +351,9 @@ export async function changePassword(
327351
errors: {
328352
oldPassword: undefined,
329353
newPassword: undefined,
330-
password2: 'Passwords do not match',
354+
password2: undefined,
331355
},
332-
message: 'Make sure passwords match. Failed to change password.',
356+
message: 'Passwords do not match.',
333357
};
334358
}
335359

@@ -345,7 +369,7 @@ export async function changePassword(
345369
return {
346370
type: 'error',
347371
errors: {
348-
oldPassword: "Old password doesn't match.",
372+
oldPassword: undefined,
349373
newPassword: undefined,
350374
password2: undefined,
351375
},
@@ -361,7 +385,11 @@ export async function changePassword(
361385
console.error('Failed to change password.', error);
362386
return {
363387
type: 'error',
364-
errors: null,
388+
errors: {
389+
oldPassword: undefined,
390+
newPassword: undefined,
391+
password2: undefined,
392+
},
365393
message: error.message || 'Failed to change password.',
366394
};
367395
}

‎src/app/(auth)/forgot-password/page.tsx‎

Lines changed: 31 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -24,37 +24,42 @@ export default function ForgotPasswordPage() {
2424
if (state.type === 'success') {
2525
toast.success(state.message);
2626
router.push('/');
27-
} else if (state.type === 'error') {
28-
toast.error(state.message);
2927
}
3028
}, [state]);
3129
return (
32-
<div className='dark:bg-grid-white/[0.2] bg-grid-black/[0.2] relative flex h-screen w-full items-center justify-center bg-white dark:bg-black lg:grid lg:min-h-[600px] lg:grid-cols-1 xl:min-h-[800px]'>
33-
<div className='pointer-events-none absolute inset-0 flex items-center justify-center bg-white [mask-image:radial-gradient(ellipse_at_center,transparent_70%,black)] dark:bg-black sm:[mask-image:radial-gradient(ellipse_at_center,transparent_30%,black)]'></div>
34-
<div className='flex items-center justify-center py-12'>
35-
<div className='mx-auto grid w-[350px] gap-6'>
36-
<div className='grid gap-2 text-center'>
37-
<h1 className='text-3xl font-bold'>Password Reset</h1>
38-
<p className='text-muted-foreground text-balance'>
39-
Enter your email below to reset your password
40-
</p>
30+
<div className='mx-auto flex min-h-screen flex-col items-center justify-center'>
31+
<div className='m-4 mx-auto flex flex-col gap-2 rounded-lg p-8 shadow-lg shadow-black dark:shadow-white'>
32+
<div className='text-center'>
33+
<h1 className='mb-6 text-4xl font-extrabold tracking-tight lg:text-5xl'>
34+
Forgot password
35+
</h1>
36+
<p className='text-sm text-gray-500 dark:text-gray-400'>
37+
Enter your email below to reset your password
38+
</p>
39+
</div>
40+
{state.errors && (
41+
<div className='rounded-md border-2 border-red-400 px-2 py-4 text-center'>
42+
<p className='text-red-500'>{state.message}</p>
4143
</div>
42-
<form action={submitAction}>
43-
<div className='grid gap-4'>
44-
<div className='grid gap-2'>
45-
<Label htmlFor='email'>Email</Label>
46-
<Input
47-
id='email'
48-
type='email'
49-
placeholder='m@example.com'
50-
name='email'
51-
required
52-
/>
53-
</div>
54-
<SubmitButton name='Send an email' />
44+
)}
45+
<form action={submitAction}>
46+
<div className='grid gap-4'>
47+
<div className='grid gap-2'>
48+
<Label htmlFor='email'>Email</Label>
49+
<Input
50+
id='email'
51+
type='email'
52+
placeholder='m@example.com'
53+
name='email'
54+
required
55+
/>
56+
{state.errors?.email && (
57+
<p className='text-red-500'>{state.errors.email}</p>
58+
)}
5559
</div>
56-
</form>
57-
</div>
60+
<SubmitButton name='Send an email' />
61+
</div>
62+
</form>
5863
</div>
5964
</div>
6065
);

‎src/app/(auth)/onboarding/OnBoardingForm.tsx‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -31,18 +31,16 @@ export default function OnBoardingForm({ email }: { email: string }) {
3131
useEffect(() => {
3232
if (state.type === 'success') {
3333
toast.success(state.message);
34-
router.push('/');
35-
} else if (state.type === 'error') {
36-
toast.error(state.message);
34+
router.push('/sign-in');
3735
}
3836
}, [state]);
3937

4038
return (
4139
<form action={submitAction} className='space-y-4'>
4240
{state.errors && (
43-
<p className='rounded-md border-2 bg-red-400 px-2 py-4'>
44-
{state.message}
45-
</p>
41+
<div className='rounded-md border-2 border-red-400 px-2 py-4 text-center'>
42+
<p className='text-red-500'>{state.message}</p>
43+
</div>
4644
)}
4745
<div className='grid gap-2'>
4846
<Label htmlFor='name'>Name</Label>

0 commit comments

Comments
 (0)