gib/T3-Template
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Reaching a finishing point!

Browse Source
This commit is contained in:
Gabriel Brown
2025-06-04 14:33:39 -05:00
parent bfb6e9e648
commit 04dceb93bd
16 changed files with 462 additions and 240 deletions
Download Patch File Download Diff File Expand all files Collapse all files

142
src/app/(auth-pages)/forgot-password/page.tsx
View File

@ -1,35 +1,123 @@
'use client';
import { z } from 'zod';
import { zodResolver } from '@hookform/resolvers/zod';
import { useForm } from 'react-hook-form';
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
Form,
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
Input,
} from '@/components/ui';
import Link from 'next/link';
import { forgotPassword } from '@/lib/actions';
import { FormMessage, type Message, SubmitButton } from '@/components/default';
import { Input, Label } from '@/components/ui';
import { useRouter } from 'next/navigation';
import { useAuth } from '@/components/context/auth';
import { useEffect, useState } from 'react';
import { StatusMessage, SubmitButton } from '@/components/default';
const formSchema = z.object({
email: z.string().email({
message: 'Please enter a valid email address.',
}),
})
const ForgotPassword = () => {
const router = useRouter();
const { isAuthenticated, isLoading, refreshUserData } = useAuth();
const [statusMessage, setStatusMessage] = useState('');
const form = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema),
defaultValues: {
email: '',
},
});
// Redirect if already authenticated
useEffect(() => {
if (isAuthenticated) {
router.push('/');
}
}, [isAuthenticated, router]);
const handleForgotPassword = async (values: z.infer<typeof formSchema>) => {
try {
setStatusMessage('');
const formData = new FormData();
formData.append('email', values.email);
const result = await forgotPassword(formData);
if (result?.success) {
await refreshUserData();
setStatusMessage(result?.data ?? 'Check your email for a link to reset your password.')
form.reset();
router.push('');
} else {
setStatusMessage(`Error: ${result.error}`)
}
} catch (error) {
setStatusMessage(
`Error: ${error instanceof Error ? error.message : 'Could not sign in!'}`
);
}
};
const ForgotPassword = async (props: { searchParams: Promise<Message> }) => {
const searchParams = await props.searchParams;
return (
<>
<form
className='flex-1 flex flex-col w-full gap-2 text-foreground
[&>input]:mb-6 min-w-64 max-w-64 mx-auto'
>
<div>
<h1 className='text-2xl font-medium'>Reset Password</h1>
<p className='text-sm text-secondary-foreground'>
Already have an account?{' '}
<Link className='text-primary underline' href='/sign-in'>
Sign in
<Card>
<CardHeader>
<CardTitle className='text-2xl font-medium'>Reset Password</CardTitle>
<CardDescription className='text-sm text-foreground'>
Don&apos;t have an account?{' '}
<Link className='font-medium underline' href='/sign-up'>
Sign up
</Link>
</p>
</div>
<div className='flex flex-col gap-2 [&>input]:mb-3 mt-8'>
<Label htmlFor='email'>Email</Label>
<Input name='email' placeholder='you@example.com' required />
<SubmitButton formAction={forgotPassword}>
Reset Password
</SubmitButton>
<FormMessage message={searchParams} />
</div>
</form>
</>
</CardDescription>
</CardHeader>
<CardContent>
<Form {...form} >
<form
onSubmit={form.handleSubmit(handleForgotPassword)}
className='flex flex-col min-w-64 space-y-6'
>
<FormField
control={form.control}
name='email'
render={({ field }) => (
<FormItem>
<FormLabel>Email</FormLabel>
<FormControl>
<Input type='email' placeholder='you@example.com' {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<SubmitButton
disabled={isLoading}
pendingText='Resetting Password...'
>
Reset Password
</SubmitButton>
{statusMessage && (
statusMessage.includes('Error') ||
statusMessage.includes('error') ||
statusMessage.includes('failed') ||
statusMessage.includes('invalid')
? <StatusMessage message={{error: statusMessage}} />
: <StatusMessage message={{ success: statusMessage }} />
)}
</form>
</Form>
</CardContent>
</Card>
);
};
export default ForgotPassword;

4
src/app/(auth-pages)/profile/page.tsx
View File

@ -2,7 +2,7 @@
import { useAuth } from '@/components/context/auth';
import { useRouter } from 'next/navigation';
import { useEffect } from 'react';
import { AvatarUpload, ProfileForm, ResetPasswordForm } from '@/components/default/profile';
import { AvatarUpload, ProfileForm, ResetPasswordForm, SignOut } from '@/components/default/profile';
import {
Card,
CardHeader,
@ -100,6 +100,8 @@ const ProfilePage = () => {
<ProfileForm onSubmit={handleProfileSubmit} />
<Separator />
<ResetPasswordForm onSubmit={handleResetPasswordSubmit} />
<Separator />
<SignOut />
</div>
)}
</Card>

23
src/app/(auth-pages)/sign-in/page.tsx
View File

@ -4,7 +4,6 @@ import { z } from 'zod';
import { zodResolver } from '@hookform/resolvers/zod';
import { useForm } from 'react-hook-form';
import {
Button,
Card,
CardContent,
CardDescription,
@ -12,20 +11,18 @@ import {
CardTitle,
Form,
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
FormMessage,
Input,
Label,
} from '@/components/ui';
import Link from 'next/link';
import { signIn } from '@/lib/actions';
import { SubmitButton } from '@/components/default';
import { useRouter } from 'next/navigation';
import { useAuth } from '@/components/context/auth';
import { useEffect, useState } from 'react';
import { StatusMessage, SubmitButton } from '@/components/default';
const formSchema = z.object({
email: z.string().email({
@ -58,6 +55,7 @@ const Login = () => {
const handleSignIn = async (values: z.infer<typeof formSchema>) => {
try {
setStatusMessage('');
const formData = new FormData();
formData.append('email', values.email);
formData.append('password', values.password);
@ -77,7 +75,7 @@ const Login = () => {
};
return (
<Card>
<Card className='min-w-xs md:min-w-sm'>
<CardHeader>
<CardTitle className='text-2xl font-medium'>
Sign In
@ -131,15 +129,12 @@ const Login = () => {
)}
/>
{statusMessage && (
<div
className={`text-sm text-center ${
statusMessage.includes('Error') || statusMessage.includes('failed')
? 'text-destructive'
: 'text-green-800'
}`}
>
{statusMessage}
</div>
statusMessage.includes('Error') ||
statusMessage.includes('error') ||
statusMessage.includes('failed') ||
statusMessage.includes('invalid')
? <StatusMessage message={{error: statusMessage}} />
: <StatusMessage message={{ message: statusMessage }} />
)}
<SubmitButton
disabled={isLoading}

219
src/app/(auth-pages)/sign-up/page.tsx
View File

@ -1,53 +1,184 @@
'use client';
import { z } from 'zod';
import { zodResolver } from '@hookform/resolvers/zod';
import { useForm } from 'react-hook-form';
import Link from 'next/link';
import { signUp } from '@/lib/actions';
import { FormMessage, type Message, SubmitButton } from '@/components/default';
import { Input, Label } from '@/components/ui';
import { redirect } from 'next/navigation';
import { getUser } from '@/lib/actions';
import { StatusMessage, SubmitButton } from '@/components/default';
import { useRouter } from 'next/navigation';
import { useAuth } from '@/components/context/auth';
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
Form,
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
Input,
} from '@/components/ui';
import { useEffect, useState } from 'react';
const SignUp = async (props: { searchParams: Promise<Message> }) => {
const searchParams = await props.searchParams;
const user = await getUser();
if (user.success) redirect('/profile');
if ('message' in searchParams) {
return (
<div
className='w-full flex-1 flex items-center h-screen
sm:max-w-md justify-center gap-2 p-4'
>
<FormMessage message={searchParams} />
</div>
);
} else {
return (
<form className='flex flex-col min-w-64 max-w-64 mx-auto'>
<h1 className='text-2xl font-medium'>Sign up</h1>
<p className='text-sm text text-foreground'>
const formSchema = z
.object({
name: z.string().min(2, {
message: 'Name must be at least 2 characters.',
}),
email: z.string().email({
message: 'Please enter a valid email address.',
}),
password: z.string().min(8, {
message: 'Password must be at least 8 characters.',
}),
confirmPassword: z.string().min(8, {
message: 'Password must be at least 8 characters.',
}),
})
.refine((data) => data.password === data.confirmPassword, {
message: 'Passwords do not match!',
path: ['confirmPassword'],
});
const SignUp = () => {
const router = useRouter();
const { isAuthenticated, isLoading, refreshUserData } = useAuth();
const [statusMessage, setStatusMessage] = useState('');
const form = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema),
defaultValues: {
name: '',
email: '',
password: '',
confirmPassword: '',
},
mode: 'onChange',
});
// Redirect if already authenticated
useEffect(() => {
if (isAuthenticated) {
router.push('/');
}
}, [isAuthenticated, router]);
const handleSignUp = async (values: z.infer<typeof formSchema>) => {
try {
setStatusMessage('');
const formData = new FormData();
formData.append('name', values.name);
formData.append('email', values.email);
formData.append('password', values.password);
const result = await signUp(formData);
if (result?.success) {
await refreshUserData();
setStatusMessage(
result.data ??
'Thanks for signing up! Please check your email for a verification link.'
);
form.reset();
router.push('');
} else {
setStatusMessage(`Error: ${result.error}`)
}
} catch (error) {
setStatusMessage(
`Error: ${error instanceof Error ? error.message : 'Could not sign in!'}`
);
}
};
return (
<Card className='min-w-xs md:min-w-sm'>
<CardHeader>
<CardTitle className='text-2xl font-medium'>
Sign Up
</CardTitle>
<CardDescription className='text text-foreground'>
Already have an account?{' '}
<Link className='text-primary font-medium underline' href='/sign-in'>
Sign in
</Link>
</p>
<div className='flex flex-col gap-2 [&>input]:mb-3 mt-8'>
<Label htmlFor='name'>Name</Label>
<Input name='name' placeholder='Full Name' required />
<Label htmlFor='email'>Email</Label>
<Input name='email' placeholder='you@example.com' required />
<Label htmlFor='password'>Password</Label>
<Input
type='password'
name='password'
placeholder='Your password'
minLength={6}
required
/>
<SubmitButton formAction={signUp} pendingText='Signing up...'>
Sign up
</SubmitButton>
<FormMessage message={searchParams} />
</div>
</form>
);
}
</CardDescription>
</CardHeader>
<CardContent>
<Form {...form}>
<form onSubmit={form.handleSubmit(handleSignUp)} className='flex flex-col mx-auto space-y-4'>
<FormField
control={form.control}
name='name'
render={({ field }) => (
<FormItem>
<FormLabel>Name</FormLabel>
<FormControl>
<Input type='text' placeholder='Full Name' {...field} />
</FormControl>
</FormItem>
)}
/>
<FormField
control={form.control}
name='email'
render={({ field }) => (
<FormItem>
<FormLabel>Email</FormLabel>
<FormControl>
<Input type='email' placeholder='you@example.com' {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name='password'
render={({ field }) => (
<FormItem>
<FormLabel>Password</FormLabel>
<FormControl>
<Input type='password' placeholder='Your password' {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name='confirmPassword'
render={({ field }) => (
<FormItem>
<FormLabel>Confirm Password</FormLabel>
<FormControl>
<Input type='password' placeholder='Confirm password' {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
{statusMessage && (
statusMessage.includes('Error') ||
statusMessage.includes('error') ||
statusMessage.includes('failed') ||
statusMessage.includes('invalid')
? <StatusMessage message={{error: statusMessage}} />
: <StatusMessage message={{ success: statusMessage }} />
)}
<SubmitButton
disabled={isLoading}
pendingText='Signing Up...'
>
Sign up
</SubmitButton>
</form>
</Form>
</CardContent>
</Card>
);
};
export default SignUp;

5
src/app/layout.tsx
View File

@ -195,7 +195,10 @@ const RootLayout = ({ children }: Readonly<{ children: React.ReactNode }>) => {
<main className='min-h-screen flex flex-col items-center'>
<div className='flex-1 w-full flex flex-col gap-20 items-center'>
<Navigation />
<div className='flex flex-col gap-20 max-w-5xl p-5 w-full'>
<div
className='flex flex-col gap-20 max-w-5xl
p-5 w-full items-center'
>
{children}
</div>
</div>

4
src/components/default/footer/index.tsx
View File

@ -1,6 +1,6 @@
'use server';
const FooterTest = () => {
const Footer = () => {
return (
<footer className='w-full flex items-center justify-center border-t mx-auto text-center text-xs gap-8 py-16'>
<p>
@ -17,4 +17,4 @@ const FooterTest = () => {
</footer>
);
};
export default FooterTest;
export default Footer;

24
src/components/default/form-message.tsx
View File

@ -1,24 +0,0 @@
export type Message =
| { success: string }
| { error: string }
| { message: string };
export const FormMessage = ({ message }: { message: Message }) => {
return (
<div className='flex flex-col gap-2 w-full max-w-md text-sm'>
{'success' in message && (
<div className='text-foreground border-l-2 border-foreground px-4'>
{message.success}
</div>
)}
{'error' in message && (
<div className='text-destructive-foreground border-l-2 border-destructive-foreground px-4'>
{message.error}
</div>
)}
{'message' in message && (
<div className='text-foreground border-l-2 px-4'>{message.message}</div>
)}
</div>
);
};

6
src/components/default/index.tsx
View File

@ -1,4 +1,2 @@
import { FormMessage, type Message } from '@/components/default/form-message';
import { SubmitButton } from '@/components/default/submit-button';
export { FormMessage, type Message, SubmitButton };
export { StatusMessage, type Message } from '@/components/default/status-message';
export { SubmitButton } from '@/components/default/submit-button';

19
src/components/default/profile/ProfileForm.tsx
View File

@ -2,7 +2,6 @@ import { z } from 'zod';
import { zodResolver } from '@hookform/resolvers/zod';
import { useForm } from 'react-hook-form';
import {
Button,
CardContent,
Form,
FormControl,
@ -13,9 +12,9 @@ import {
FormMessage,
Input,
} from '@/components/ui';
import { Loader2 } from 'lucide-react';
import { useEffect } from 'react';
import { useAuth } from '@/components/context/auth';
import { SubmitButton } from '@/components/default';
const formSchema = z.object({
full_name: z.string().min(5, {
@ -90,16 +89,12 @@ export const ProfileForm = ({onSubmit}: ProfileFormProps) => {
/>
<div className='flex justify-center'>
<Button type='submit' disabled={isLoading}>
{isLoading ? (
<>
<Loader2 className='mr-2 h-4 w-4 animate-spin' />
Saving...
</>
) : (
'Save Changes'
)}
</Button>
<SubmitButton
disabled={isLoading}
pendingText='Saving...'
>
Save Changes
</SubmitButton>
</div>
</form>
</Form>

115
src/components/default/profile/ResetPasswordForm.tsx
View File

@ -18,7 +18,7 @@ import {
import { SubmitButton } from '@/components/default';
import { useState } from 'react';
import { type Result } from '@/lib/actions';
import { FormMessage as Pw } from '@/components/default';
import { StatusMessage } from '@/components/default';
const formSchema = z
.object({
@ -85,65 +85,64 @@ export const ResetPasswordForm = ({
</CardDescription>
</CardHeader>
<CardContent>
<Form {...form}>
<form
onSubmit={form.handleSubmit(handleUpdatePassword)}
className='space-y-6'
>
<FormField
control={form.control}
name='password'
render={({ field }) => (
<FormItem>
<FormLabel>New Password</FormLabel>
<FormControl>
<Input type='password' {...field} />
</FormControl>
<FormDescription>
Enter your new password. Must be at least 8 characters.
</FormDescription>
<FormMessage />
</FormItem>
<Form {...form}>
<form
onSubmit={form.handleSubmit(handleUpdatePassword)}
className='space-y-6'
>
<FormField
control={form.control}
name='password'
render={({ field }) => (
<FormItem>
<FormLabel>New Password</FormLabel>
<FormControl>
<Input type='password' {...field} />
</FormControl>
<FormDescription>
Enter your new password. Must be at least 8 characters.
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name='confirmPassword'
render={({ field }) => (
<FormItem>
<FormLabel>Confirm Password</FormLabel>
<FormControl>
<Input type='password' {...field} />
</FormControl>
<FormDescription>
Please re-enter your new password to confirm.
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
{statusMessage && (
<div
className={`text-sm text-center ${
statusMessage.includes('Error') || statusMessage.includes('failed')
? 'text-destructive'
: 'text-green-600'
}`}
>
{statusMessage}
</div>
)}
/>
<FormField
control={form.control}
name='confirmPassword'
render={({ field }) => (
<FormItem>
<FormLabel>Confirm Password</FormLabel>
<FormControl>
<Input type='password' {...field} />
</FormControl>
<FormDescription>
Please re-enter your new password to confirm.
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
{statusMessage && (
<div
className={`text-sm text-center ${
statusMessage.includes('Error') || statusMessage.includes('failed')
? 'text-destructive'
: 'text-green-600'
}`}
>
{statusMessage}
<div className='flex justify-center'>
<SubmitButton
disabled={isLoading}
pendingText='Updating Password...'
>
Update Password
</SubmitButton>
</div>
)}
<div className='flex justify-center'>
<SubmitButton
disabled={isLoading}
pendingText='Updating Password...'
>
Update Password
</SubmitButton>
</div>
</form>
</Form>
</form>
</Form>
</CardContent>
</div>
);

32
src/components/default/profile/SignOut.tsx Normal file
View File

@ -0,0 +1,32 @@
'use client';
import { CardContent, CardHeader, CardTitle } from '@/components/ui';
import { SubmitButton } from '@/components/default';
import { useRouter } from 'next/navigation';
import { useAuth } from '@/components/context/auth';
import { signOut } from '@/lib/actions';
export const SignOut = () => {
const { isLoading, refreshUserData } = useAuth();
const router = useRouter();
const handleSignOut = async () => {
const result = await signOut();
if (result?.success) {
await refreshUserData();
router.push('/sign-in');
}
};
return (
<div className='flex justify-center'>
<CardHeader className='md:w-5/6 w-full'>
<SubmitButton
disabled={isLoading}
onClick={handleSignOut}
>
Sign Out
</SubmitButton>
</CardHeader>
</div>
);
};

1
src/components/default/profile/index.tsx
View File

@ -1,3 +1,4 @@
export * from './AvatarUpload';
export * from './ProfileForm';
export * from './ResetPasswordForm';
export * from './SignOut';

27
src/components/default/status-message.tsx Normal file
View File

@ -0,0 +1,27 @@
export type Message =
| { success: string }
| { error: string }
| { message: string };
export const StatusMessage = ({ message }: { message: Message }) => {
return (
<div
className='flex flex-col gap-2 w-full max-w-md
text-sm bg-accent rounded-md p-2 px-4'
>
{'success' in message && (
<div className='dark:text-green-500 text-green-700'>
{message.success}
</div>
)}
{'error' in message && (
<div className='text-destructive'>
{message.error}
</div>
)}
{'message' in message && (
<div className='text-foreground'>{message.message}</div>
)}
</div>
);
};

8
src/components/default/submit-button.tsx
View File

@ -19,7 +19,13 @@ export const SubmitButton = ({
const { pending } = useFormStatus();
return (
<Button type='submit' aria-disabled={pending} disabled={disabled} {...props}>
<Button
className='cursor-pointer'
type='submit'
aria-disabled={pending}
disabled={disabled}
{...props}
>
{pending || disabled ? (
<>
<Loader2 className='mr-2 h-4 w-4 animate-spin' />

36
src/lib/actions/auth.ts
View File

@ -4,11 +4,10 @@ import 'server-only';
import { encodedRedirect } from '@/utils/utils';
import { createServerClient } from '@/utils/supabase';
import { headers } from 'next/headers';
import { redirect } from 'next/navigation';
import type { User } from '@/utils/supabase';
import type { Result } from './index';
export const signUp = async (formData: FormData) => {
export const signUp = async (formData: FormData): Promise<Result<string | null>> => {
const name = formData.get('name') as string;
const email = formData.get('email') as string;
const password = formData.get('password') as string;
@ -36,13 +35,12 @@ export const signUp = async (formData: FormData) => {
},
});
if (error) {
return encodedRedirect('error', '/sign-up', error.message);
return { success: false, error: error.message };
} else {
return encodedRedirect(
'success',
'/sign-up',
'Thanks for signing up! Please check your email for a verification link.',
);
return {
success: true,
data: 'Thanks for signing up! Please check your email for a verification link.',
};
}
};
@ -64,14 +62,13 @@ export const signIn = async (
}
};
export const forgotPassword = async (formData: FormData) => {
export const forgotPassword = async (formData: FormData): Promise<Result<string | null>> => {
const email = formData.get('email') as string;
const supabase = await createServerClient();
const origin = (await headers()).get('origin');
const callbackUrl = formData.get('callbackUrl') as string;
if (!email) {
return encodedRedirect('error', '/forgot-password', 'Email is required');
return { success: false, error: 'Email is required' };
}
const { error } = await supabase.auth.resetPasswordForEmail(email, {
@ -79,22 +76,9 @@ export const forgotPassword = async (formData: FormData) => {
});
if (error) {
return encodedRedirect(
'error',
'/forgot-password',
'Could not reset password',
);
return { success: false, error: 'Could not reset password' };
}
if (callbackUrl) {
return redirect(callbackUrl);
}
return encodedRedirect(
'success',
'/forgot-password',
'Check your email for a link to reset your password.',
);
return { success: true, data: 'Check your email for a link to reset your password.' };
};

37
src/lib/hooks/auth.ts
View File

@ -1,11 +1,11 @@
'use client'
import { encodedRedirect } from '@/utils/utils';
import { createClient } from '@/utils/supabase';
import { redirect } from 'next/navigation';
import type { User } from '@/utils/supabase';
import type { Result } from './index';
export const signUp = async (formData: FormData) => {
export const signUp = async (formData: FormData): Promise<Result<string | null>> => {
const name = formData.get('name') as string;
const email = formData.get('email') as string;
const password = formData.get('password') as string;
@ -33,13 +33,12 @@ export const signUp = async (formData: FormData) => {
},
});
if (error) {
return encodedRedirect('error', '/sign-up', error.message);
return { success: false, error: error.message };
} else {
return encodedRedirect(
'success',
'/sign-up',
'Thanks for signing up! Please check your email for a verification link.',
);
return {
success: true,
data: 'Thanks for signing up! Please check your email for a verification link.',
};
}
};
@ -61,14 +60,13 @@ export const signIn = async (
}
};
export const forgotPassword = async (formData: FormData) => {
export const forgotPassword = async (formData: FormData): Promise<Result<string | null>> => {
const email = formData.get('email') as string;
const supabase = createClient();
const origin = process.env.NEXT_PUBLIC_SITE_URL!;
const callbackUrl = formData.get('callbackUrl') as string;
if (!email) {
return encodedRedirect('error', '/forgot-password', 'Email is required');
return { success: false, error: 'Email is required' };
}
const { error } = await supabase.auth.resetPasswordForEmail(email, {
@ -76,22 +74,9 @@ export const forgotPassword = async (formData: FormData) => {
});
if (error) {
return encodedRedirect(
'error',
'/forgot-password',
'Could not reset password',
);
return { success: false, error: 'Could not reset password' };
}
if (callbackUrl) {
return redirect(callbackUrl);
}
return encodedRedirect(
'success',
'/forgot-password',
'Check your email for a link to reset your password.',
);
return { success: true, data: 'Check your email for a link to reset your password.' };
};