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

Cleanup. Stuff from yesterday idk

Browse Source
This commit is contained in:
Gabriel Brown
2025-06-06 08:43:18 -05:00
parent a776c5a30a
commit 35e019558f
29 changed files with 866 additions and 694 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/app/(auth-pages)/auth/callback/route.ts
View File

@@ -36,10 +36,11 @@ export const GET = async (request: NextRequest) => {
return redirect('/');
if (type === 'recovery' || type === 'email_change')
return redirect('/profile');
if (type === 'invite')
return redirect('/sign-up');
if (type === 'invite') return redirect('/sign-up');
}
return redirect(`/?error=${encodeURIComponent(error?.message || 'Unknown error')}`);
return redirect(
`/?error=${encodeURIComponent(error?.message || 'Unknown error')}`,
);
}
return redirect('/');

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

@@ -27,7 +27,7 @@ const formSchema = z.object({
email: z.string().email({
message: 'Please enter a valid email address.',
}),
})
});
const ForgotPassword = () => {
const router = useRouter();
@@ -48,76 +48,82 @@ const ForgotPassword = () => {
}
}, [isAuthenticated, router]);
const handleForgotPassword = async (values: z.infer<typeof formSchema>) => {
try {
setStatusMessage('');
const formData = new FormData();
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.')
setStatusMessage(
result?.data ?? 'Check your email for a link to reset your password.',
);
form.reset();
router.push('');
} else {
setStatusMessage(`Error: ${result.error}`)
setStatusMessage(`Error: ${result.error}`);
}
} catch (error) {
setStatusMessage(
`Error: ${error instanceof Error ? error.message : 'Could not sign in!'}`
`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'>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>
</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 }} />
<Card className='min-w-xs md:min-w-sm'>
<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>
</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>
)}
</form>
</Form>
</CardContent>
</Card>
/>
<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;

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

@@ -2,7 +2,12 @@
import { useAuth } from '@/components/context/auth';
import { useRouter } from 'next/navigation';
import { useEffect } from 'react';
import { AvatarUpload, ProfileForm, ResetPasswordForm, SignOut } from '@/components/default/profile';
import {
AvatarUpload,
ProfileForm,
ResetPasswordForm,
SignOut,
} from '@/components/default/profile';
import {
Card,
CardHeader,
@@ -16,14 +21,20 @@ import { toast } from 'sonner';
import { type Result } from '@/lib/actions';
const ProfilePage = () => {
const { profile, isLoading, isAuthenticated, updateProfile, refreshUserData } = useAuth();
const {
profile,
isLoading,
isAuthenticated,
updateProfile,
refreshUserData,
} = useAuth();
const router = useRouter();
useEffect(() => {
if (!isLoading && !isAuthenticated) {
router.push('/sign-in');
}
}, [isLoading, isAuthenticated, router])
}, [isLoading, isAuthenticated, router]);
const handleAvatarUploaded = async (path: string) => {
await updateProfile({ avatar_url: path });
@@ -50,17 +61,17 @@ const ProfilePage = () => {
try {
const result = await resetPassword(formData);
if (!result.success) {
toast.error(`Error resetting password: ${result.error}`)
return {success: false, error: result.error};
toast.error(`Error resetting password: ${result.error}`);
return { success: false, error: result.error };
}
return {success: true, data: null};
return { success: true, data: null };
} catch (error) {
toast.error(
`Error resetting password!: ${error as string ?? 'Unknown error'}`
`Error resetting password!: ${(error as string) ?? 'Unknown error'}`,
);
return {success: false, error: 'Unknown error'};
return { success: false, error: 'Unknown error' };
}
}
};
// Show loading state while checking authentication
if (isLoading) {
@@ -89,21 +100,21 @@ const ProfilePage = () => {
Manage your personal information and how it appears to others
</CardDescription>
</CardHeader>
{isLoading && !profile ? (
<div className='flex justify-center py-8'>
<Loader2 className='h-8 w-8 animate-spin text-gray-500' />
</div>
) : (
<div className='space-y-8'>
<AvatarUpload onAvatarUploaded={handleAvatarUploaded} />
<Separator />
<ProfileForm onSubmit={handleProfileSubmit} />
<Separator />
<ResetPasswordForm onSubmit={handleResetPasswordSubmit} />
<Separator />
<SignOut />
</div>
)}
{isLoading && !profile ? (
<div className='flex justify-center py-8'>
<Loader2 className='h-8 w-8 animate-spin text-gray-500' />
</div>
) : (
<div className='space-y-8'>
<AvatarUpload onAvatarUploaded={handleAvatarUploaded} />
<Separator />
<ProfileForm onSubmit={handleProfileSubmit} />
<Separator />
<ResetPasswordForm onSubmit={handleResetPasswordSubmit} />
<Separator />
<SignOut />
</div>
)}
</Card>
</div>
);

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

@@ -34,7 +34,7 @@ const formSchema = z.object({
password: z.string().min(8, {
message: 'Password must be at least 8 characters.',
}),
})
});
const Login = () => {
const router = useRouter();
@@ -59,7 +59,7 @@ const Login = () => {
const handleSignIn = async (values: z.infer<typeof formSchema>) => {
try {
setStatusMessage('');
const formData = new FormData();
const formData = new FormData();
formData.append('email', values.email);
formData.append('password', values.password);
const result = await signIn(formData);
@@ -68,11 +68,11 @@ const Login = () => {
form.reset();
router.push('');
} else {
setStatusMessage(`Error: ${result.error}`)
setStatusMessage(`Error: ${result.error}`);
}
} catch (error) {
setStatusMessage(
`Error: ${error instanceof Error ? error.message : 'Could not sign in!'}`
`Error: ${error instanceof Error ? error.message : 'Could not sign in!'}`,
);
}
};
@@ -80,9 +80,7 @@ const Login = () => {
return (
<Card className='min-w-xs md:min-w-sm'>
<CardHeader>
<CardTitle className='text-3xl font-medium'>
Sign In
</CardTitle>
<CardTitle className='text-3xl font-medium'>Sign In</CardTitle>
<CardDescription className='text-foreground'>
Don&apos;t have an account?{' '}
<Link className='font-medium underline' href='/sign-up'>
@@ -103,11 +101,15 @@ const Login = () => {
<FormItem>
<FormLabel className='text-lg'>Email</FormLabel>
<FormControl>
<Input type='email' placeholder='you@example.com' {...field} />
<Input
type='email'
placeholder='you@example.com'
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
)}
/>
<FormField
@@ -125,20 +127,25 @@ const Login = () => {
</Link>
</div>
<FormControl>
<Input type='password' placeholder='Your password' {...field} />
<Input
type='password'
placeholder='Your password'
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
{statusMessage && (
statusMessage.includes('Error') ||
statusMessage.includes('error') ||
statusMessage.includes('failed') ||
statusMessage.includes('invalid')
? <StatusMessage message={{error: statusMessage}} />
: <StatusMessage message={{ message: statusMessage }} />
)}
{statusMessage &&
(statusMessage.includes('Error') ||
statusMessage.includes('error') ||
statusMessage.includes('failed') ||
statusMessage.includes('invalid') ? (
<StatusMessage message={{ error: statusMessage }} />
) : (
<StatusMessage message={{ message: statusMessage }} />
))}
<SubmitButton
disabled={isLoading}
pendingText='Signing In...'

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

@@ -45,7 +45,6 @@ const formSchema = z
});
const SignUp = () => {
const router = useRouter();
const { isAuthenticated, isLoading, refreshUserData } = useAuth();
const [statusMessage, setStatusMessage] = useState('');
@@ -71,7 +70,7 @@ const SignUp = () => {
const handleSignUp = async (values: z.infer<typeof formSchema>) => {
try {
setStatusMessage('');
const formData = new FormData();
const formData = new FormData();
formData.append('name', values.name);
formData.append('email', values.email);
formData.append('password', values.password);
@@ -80,16 +79,16 @@ const SignUp = () => {
await refreshUserData();
setStatusMessage(
result.data ??
'Thanks for signing up! Please check your email for a verification link.'
'Thanks for signing up! Please check your email for a verification link.',
);
form.reset();
router.push('');
} else {
setStatusMessage(`Error: ${result.error}`)
setStatusMessage(`Error: ${result.error}`);
}
} catch (error) {
setStatusMessage(
`Error: ${error instanceof Error ? error.message : 'Could not sign in!'}`
`Error: ${error instanceof Error ? error.message : 'Could not sign in!'}`,
);
}
};
@@ -97,9 +96,7 @@ const SignUp = () => {
return (
<Card className='min-w-xs md:min-w-sm'>
<CardHeader>
<CardTitle className='text-3xl font-medium'>
Sign Up
</CardTitle>
<CardTitle className='text-3xl font-medium'>Sign Up</CardTitle>
<CardDescription className='text-foreground'>
Already have an account?{' '}
<Link className='text-primary font-medium underline' href='/sign-in'>
@@ -109,7 +106,10 @@ const SignUp = () => {
</CardHeader>
<CardContent>
<Form {...form}>
<form onSubmit={form.handleSubmit(handleSignUp)} className='flex flex-col mx-auto space-y-4'>
<form
onSubmit={form.handleSubmit(handleSignUp)}
className='flex flex-col mx-auto space-y-4'
>
<FormField
control={form.control}
name='name'
@@ -129,11 +129,15 @@ const SignUp = () => {
<FormItem>
<FormLabel className='text-lg'>Email</FormLabel>
<FormControl>
<Input type='email' placeholder='you@example.com' {...field} />
<Input
type='email'
placeholder='you@example.com'
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
)}
/>
<FormField
control={form.control}
@@ -142,7 +146,11 @@ const SignUp = () => {
<FormItem>
<FormLabel className='text-lg'>Password</FormLabel>
<FormControl>
<Input type='password' placeholder='Your password' {...field} />
<Input
type='password'
placeholder='Your password'
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
@@ -155,20 +163,25 @@ const SignUp = () => {
<FormItem>
<FormLabel className='text-lg'>Confirm Password</FormLabel>
<FormControl>
<Input type='password' placeholder='Confirm password' {...field} />
<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 }} />
)}
{statusMessage &&
(statusMessage.includes('Error') ||
statusMessage.includes('error') ||
statusMessage.includes('failed') ||
statusMessage.includes('invalid') ? (
<StatusMessage message={{ error: statusMessage }} />
) : (
<StatusMessage message={{ success: statusMessage }} />
))}
<SubmitButton
className='text-[1.0rem] cursor-pointer'
disabled={isLoading}

221
src/app/layout.tsx
View File

@@ -3,7 +3,7 @@ import '@/styles/globals.css';
import { Geist } from 'next/font/google';
import { cn } from '@/lib/utils';
import { ThemeProvider } from '@/components/context/theme';
import { AuthProvider } from '@/components/context/auth'
import { AuthProvider } from '@/components/context/auth';
import Navigation from '@/components/default/navigation';
import Footer from '@/components/default/footer';
import { Toaster } from '@/components/ui';
@@ -15,8 +15,9 @@ export const metadata: Metadata = {
},
description: 'Created by Gib with T3!',
applicationName: 'T3 Template',
keywords: 'T3 Template, Next.js, Supabase, Tailwind, TypeScript, React, T3, Gib, Theo',
authors: [{name: 'Gib', url: 'https://gbrown.org'}],
keywords:
'T3 Template, Next.js, Supabase, Tailwind, TypeScript, React, T3, Gib, Theo',
authors: [{ name: 'Gib', url: 'https://gbrown.org' }],
creator: 'Gib Brown',
publisher: 'Gib Brown',
formatDetection: {
@@ -40,40 +41,120 @@ export const metadata: Metadata = {
icons: {
icon: [
{ url: '/favicon.ico', type: 'image/x-icon', sizes: 'any' },
{ url: '/favicon-16x16.png', type: 'image/png', sizes: '16x16'},
{ url: '/favicon-32x32.png', type: 'image/png', sizes: '32x32'},
{ url: '/favicon.png', type: 'image/png', sizes: '96x96'},
{ url: '/favicon.ico', type: 'image/x-icon', sizes: 'any', media: '(prefers-color-scheme: dark)' },
{ url: '/favicon-16x16.png', type: 'image/png', sizes: '16x16', media: '(prefers-color-scheme: dark)' },
{ url: '/favicon-32x32.png', type: 'image/png', sizes: '32x32', media: '(prefers-color-scheme: dark)' },
{ url: '/favicon-96x96.png', type: 'image/png', sizes: '96x96', media: '(prefers-color-scheme: dark)' },
{ url: '/favicon-16x16.png', type: 'image/png', sizes: '16x16' },
{ url: '/favicon-32x32.png', type: 'image/png', sizes: '32x32' },
{ url: '/favicon.png', type: 'image/png', sizes: '96x96' },
{
url: '/favicon.ico',
type: 'image/x-icon',
sizes: 'any',
media: '(prefers-color-scheme: dark)',
},
{
url: '/favicon-16x16.png',
type: 'image/png',
sizes: '16x16',
media: '(prefers-color-scheme: dark)',
},
{
url: '/favicon-32x32.png',
type: 'image/png',
sizes: '32x32',
media: '(prefers-color-scheme: dark)',
},
{
url: '/favicon-96x96.png',
type: 'image/png',
sizes: '96x96',
media: '(prefers-color-scheme: dark)',
},
{ url: '/appicon/icon-36x36.png', type: 'image/png', sizes: '36x36'},
{ url: '/appicon/icon-48x48.png', type: 'image/png', sizes: '48x48'},
{ url: '/appicon/icon-72x72.png', type: 'image/png', sizes: '72x72'},
{ url: '/appicon/icon-96x96.png', type: 'image/png', sizes: '96x96'},
{ url: '/appicon/icon-144x144.png', type: 'image/png', sizes: '144x144'},
{ url: '/appicon/icon.png', type: 'image/png', sizes: '192x192'},
{ url: '/appicon/icon-36x36.png', type: 'image/png', sizes: '36x36', media: '(prefers-color-scheme: dark)' },
{ url: '/appicon/icon-48x48.png', type: 'image/png', sizes: '48x48', media: '(prefers-color-scheme: dark)' },
{ url: '/appicon/icon-72x72.png', type: 'image/png', sizes: '72x72', media: '(prefers-color-scheme: dark)' },
{ url: '/appicon/icon-96x96.png', type: 'image/png', sizes: '96x96', media: '(prefers-color-scheme: dark)' },
{ url: '/appicon/icon-144x144.png', type: 'image/png', sizes: '144x144', media: '(prefers-color-scheme: dark)' },
{ url: '/appicon/icon.png', type: 'image/png', sizes: '192x192', media: '(prefers-color-scheme: dark)' },
{ url: '/appicon/icon-36x36.png', type: 'image/png', sizes: '36x36' },
{ url: '/appicon/icon-48x48.png', type: 'image/png', sizes: '48x48' },
{ url: '/appicon/icon-72x72.png', type: 'image/png', sizes: '72x72' },
{ url: '/appicon/icon-96x96.png', type: 'image/png', sizes: '96x96' },
{ url: '/appicon/icon-144x144.png', type: 'image/png', sizes: '144x144' },
{ url: '/appicon/icon.png', type: 'image/png', sizes: '192x192' },
{
url: '/appicon/icon-36x36.png',
type: 'image/png',
sizes: '36x36',
media: '(prefers-color-scheme: dark)',
},
{
url: '/appicon/icon-48x48.png',
type: 'image/png',
sizes: '48x48',
media: '(prefers-color-scheme: dark)',
},
{
url: '/appicon/icon-72x72.png',
type: 'image/png',
sizes: '72x72',
media: '(prefers-color-scheme: dark)',
},
{
url: '/appicon/icon-96x96.png',
type: 'image/png',
sizes: '96x96',
media: '(prefers-color-scheme: dark)',
},
{
url: '/appicon/icon-144x144.png',
type: 'image/png',
sizes: '144x144',
media: '(prefers-color-scheme: dark)',
},
{
url: '/appicon/icon.png',
type: 'image/png',
sizes: '192x192',
media: '(prefers-color-scheme: dark)',
},
],
shortcut: [
{ url: '/appicon/icon-36x36.png', type: 'image/png', sizes: '36x36'},
{ url: '/appicon/icon-48x48.png', type: 'image/png', sizes: '48x48'},
{ url: '/appicon/icon-72x72.png', type: 'image/png', sizes: '72x72'},
{ url: '/appicon/icon-96x96.png', type: 'image/png', sizes: '96x96'},
{ url: '/appicon/icon-144x144.png', type: 'image/png', sizes: '144x144'},
{ url: '/appicon/icon.png', type: 'image/png', sizes: '192x192'},
{ url: '/appicon/icon-36x36.png', type: 'image/png', sizes: '36x36', media: '(prefers-color-scheme: dark)' },
{ url: '/appicon/icon-48x48.png', type: 'image/png', sizes: '48x48', media: '(prefers-color-scheme: dark)' },
{ url: '/appicon/icon-72x72.png', type: 'image/png', sizes: '72x72', media: '(prefers-color-scheme: dark)' },
{ url: '/appicon/icon-96x96.png', type: 'image/png', sizes: '96x96', media: '(prefers-color-scheme: dark)' },
{ url: '/appicon/icon-144x144.png', type: 'image/png', sizes: '144x144', media: '(prefers-color-scheme: dark)' },
{ url: '/appicon/icon.png', type: 'image/png', sizes: '192x192', media: '(prefers-color-scheme: dark)' },
{ url: '/appicon/icon-36x36.png', type: 'image/png', sizes: '36x36' },
{ url: '/appicon/icon-48x48.png', type: 'image/png', sizes: '48x48' },
{ url: '/appicon/icon-72x72.png', type: 'image/png', sizes: '72x72' },
{ url: '/appicon/icon-96x96.png', type: 'image/png', sizes: '96x96' },
{ url: '/appicon/icon-144x144.png', type: 'image/png', sizes: '144x144' },
{ url: '/appicon/icon.png', type: 'image/png', sizes: '192x192' },
{
url: '/appicon/icon-36x36.png',
type: 'image/png',
sizes: '36x36',
media: '(prefers-color-scheme: dark)',
},
{
url: '/appicon/icon-48x48.png',
type: 'image/png',
sizes: '48x48',
media: '(prefers-color-scheme: dark)',
},
{
url: '/appicon/icon-72x72.png',
type: 'image/png',
sizes: '72x72',
media: '(prefers-color-scheme: dark)',
},
{
url: '/appicon/icon-96x96.png',
type: 'image/png',
sizes: '96x96',
media: '(prefers-color-scheme: dark)',
},
{
url: '/appicon/icon-144x144.png',
type: 'image/png',
sizes: '144x144',
media: '(prefers-color-scheme: dark)',
},
{
url: '/appicon/icon.png',
type: 'image/png',
sizes: '192x192',
media: '(prefers-color-scheme: dark)',
},
],
apple: [
{ url: 'appicon/icon-57x57.png', type: 'image/png', sizes: '57x57' },
@@ -86,23 +167,73 @@ export const metadata: Metadata = {
{ url: 'appicon/icon-152x152.png', type: 'image/png', sizes: '152x152' },
{ url: 'appicon/icon-180x180.png', type: 'image/png', sizes: '180x180' },
{ url: 'appicon/icon.png', type: 'image/png', sizes: '192x192' },
{ url: 'appicon/icon-57x57.png', type: 'image/png', sizes: '57x57', media: '(prefers-color-scheme: dark)' },
{ url: 'appicon/icon-60x60.png', type: 'image/png', sizes: '60x60', media: '(prefers-color-scheme: dark)' },
{ url: 'appicon/icon-72x72.png', type: 'image/png', sizes: '72x72', media: '(prefers-color-scheme: dark)' },
{ url: 'appicon/icon-76x76.png', type: 'image/png', sizes: '76x76', media: '(prefers-color-scheme: dark)' },
{ url: 'appicon/icon-114x114.png', type: 'image/png', sizes: '114x114', media: '(prefers-color-scheme: dark)' },
{ url: 'appicon/icon-120x120.png', type: 'image/png', sizes: '120x120', media: '(prefers-color-scheme: dark)' },
{ url: 'appicon/icon-144x144.png', type: 'image/png', sizes: '144x144', media: '(prefers-color-scheme: dark)' },
{ url: 'appicon/icon-152x152.png', type: 'image/png', sizes: '152x152', media: '(prefers-color-scheme: dark)' },
{ url: 'appicon/icon-180x180.png', type: 'image/png', sizes: '180x180', media: '(prefers-color-scheme: dark)' },
{ url: 'appicon/icon.png', type: 'image/png', sizes: '192x192', media: '(prefers-color-scheme: dark)' },
{
url: 'appicon/icon-57x57.png',
type: 'image/png',
sizes: '57x57',
media: '(prefers-color-scheme: dark)',
},
{
url: 'appicon/icon-60x60.png',
type: 'image/png',
sizes: '60x60',
media: '(prefers-color-scheme: dark)',
},
{
url: 'appicon/icon-72x72.png',
type: 'image/png',
sizes: '72x72',
media: '(prefers-color-scheme: dark)',
},
{
url: 'appicon/icon-76x76.png',
type: 'image/png',
sizes: '76x76',
media: '(prefers-color-scheme: dark)',
},
{
url: 'appicon/icon-114x114.png',
type: 'image/png',
sizes: '114x114',
media: '(prefers-color-scheme: dark)',
},
{
url: 'appicon/icon-120x120.png',
type: 'image/png',
sizes: '120x120',
media: '(prefers-color-scheme: dark)',
},
{
url: 'appicon/icon-144x144.png',
type: 'image/png',
sizes: '144x144',
media: '(prefers-color-scheme: dark)',
},
{
url: 'appicon/icon-152x152.png',
type: 'image/png',
sizes: '152x152',
media: '(prefers-color-scheme: dark)',
},
{
url: 'appicon/icon-180x180.png',
type: 'image/png',
sizes: '180x180',
media: '(prefers-color-scheme: dark)',
},
{
url: 'appicon/icon.png',
type: 'image/png',
sizes: '192x192',
media: '(prefers-color-scheme: dark)',
},
],
other: [
{
rel: 'apple-touch-icon-precomposed',
url: '/appicon/icon-precomposed.png',
type: 'image/png',
sizes: '180x180'
sizes: '180x180',
},
],
},

174
src/components/context/auth.tsx
View File

@@ -14,11 +14,7 @@ import {
getUser,
updateProfile as updateProfileAction,
} from '@/lib/hooks';
import {
type User,
type Profile,
createClient,
} from '@/utils/supabase';
import { type User, type Profile, createClient } from '@/utils/supabase';
import { toast } from 'sonner';
type AuthContextType = {
@@ -45,65 +41,68 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
const [isInitialized, setIsInitialized] = useState(false);
const fetchingRef = useRef(false);
const fetchUserData = useCallback(async (showLoading = true) => {
if (fetchingRef.current) return;
fetchingRef.current = true;
const fetchUserData = useCallback(
async (showLoading = true) => {
if (fetchingRef.current) return;
fetchingRef.current = true;
try {
// Only show loading for initial load or manual refresh
if (showLoading) {
setIsLoading(true);
}
try {
// Only show loading for initial load or manual refresh
if (showLoading) {
setIsLoading(true);
}
const userResponse = await getUser();
const profileResponse = await getProfile();
const userResponse = await getUser();
const profileResponse = await getProfile();
if (!userResponse.success || !profileResponse.success) {
setUser(null);
setProfile(null);
setAvatarUrl(null);
return;
}
if (!userResponse.success || !profileResponse.success) {
setUser(null);
setProfile(null);
setAvatarUrl(null);
return;
}
setUser(userResponse.data);
setProfile(profileResponse.data);
setUser(userResponse.data);
setProfile(profileResponse.data);
// Get avatar URL if available
if (profileResponse.data.avatar_url) {
const avatarResponse = await getSignedUrl({
bucket: 'avatars',
url: profileResponse.data.avatar_url,
});
if (avatarResponse.success) {
setAvatarUrl(avatarResponse.data);
// Get avatar URL if available
if (profileResponse.data.avatar_url) {
const avatarResponse = await getSignedUrl({
bucket: 'avatars',
url: profileResponse.data.avatar_url,
});
if (avatarResponse.success) {
setAvatarUrl(avatarResponse.data);
} else {
setAvatarUrl(null);
}
} else {
setAvatarUrl(null);
}
} else {
setAvatarUrl(null);
} catch (error) {
console.error(
'Auth fetch error: ',
error instanceof Error
? `${error.message}`
: 'Failed to load user data!',
);
if (!isInitialized) {
toast.error('Failed to load user data!');
}
} finally {
if (showLoading) {
setIsLoading(false);
}
setIsInitialized(true);
fetchingRef.current = false;
}
} catch (error) {
console.error(
'Auth fetch error: ',
error instanceof Error ?
`${error.message}` :
'Failed to load user data!'
);
if (!isInitialized) {
toast.error('Failed to load user data!');
}
} finally {
if (showLoading) {
setIsLoading(false);
}
setIsInitialized(true);
fetchingRef.current = false;
}
}, [isInitialized]);
},
[isInitialized],
);
useEffect(() => {
const supabase = createClient();
// Initial fetch with loading
fetchUserData(true).catch((error) => {
console.error('💥 Initial fetch error:', error);
@@ -113,7 +112,7 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
data: { subscription },
} = supabase.auth.onAuthStateChange(async (event, session) => {
console.log('Auth state change:', event); // Debug log
if (event === 'SIGNED_IN') {
// Background refresh without loading state
await fetchUserData(false);
@@ -133,37 +132,42 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
};
}, [fetchUserData]);
const updateProfile = useCallback(async (data: {
full_name?: string;
email?: string;
avatar_url?: string;
}) => {
try {
const result = await updateProfileAction(data);
if (!result.success) {
throw new Error(result.error ?? 'Failed to update profile');
}
setProfile(result.data);
// If avatar was updated, refresh the avatar URL
if (data.avatar_url && result.data.avatar_url) {
const avatarResponse = await getSignedUrl({
bucket: 'avatars',
url: result.data.avatar_url,
transform: { width: 128, height: 128 },
});
if (avatarResponse.success) {
setAvatarUrl(avatarResponse.data);
const updateProfile = useCallback(
async (data: {
full_name?: string;
email?: string;
avatar_url?: string;
}) => {
try {
const result = await updateProfileAction(data);
if (!result.success) {
throw new Error(result.error ?? 'Failed to update profile');
}
setProfile(result.data);
// If avatar was updated, refresh the avatar URL
if (data.avatar_url && result.data.avatar_url) {
const avatarResponse = await getSignedUrl({
bucket: 'avatars',
url: result.data.avatar_url,
transform: { width: 128, height: 128 },
});
if (avatarResponse.success) {
setAvatarUrl(avatarResponse.data);
}
}
toast.success('Profile updated successfully!');
return { success: true, data: result.data };
} catch (error) {
console.error('Error updating profile:', error);
toast.error(
error instanceof Error ? error.message : 'Failed to update profile',
);
return { success: false, error };
}
toast.success('Profile updated successfully!');
return { success: true, data: result.data };
} catch (error) {
console.error('Error updating profile:', error);
toast.error(error instanceof Error ? error.message : 'Failed to update profile');
return { success: false, error };
}
}, []);
},
[],
);
const refreshUserData = useCallback(async () => {
await fetchUserData(true); // Manual refresh shows loading
@@ -179,11 +183,7 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
refreshUserData,
};
return (
<AuthContext.Provider value={value}>
{children}
</AuthContext.Provider>
);
return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
};
export const useAuth = () => {

4
src/components/default/StatusMessage.tsx
View File

@@ -15,9 +15,7 @@ export const StatusMessage = ({ message }: { message: Message }) => {
</div>
)}
{'error' in message && (
<div className='text-destructive'>
{message.error}
</div>
<div className='text-destructive'>{message.error}</div>
)}
{'message' in message && (
<div className='text-foreground'>{message.message}</div>

23
src/components/default/auth/SignInWithApple.tsx
View File

@@ -17,9 +17,9 @@ export const SignInWithApple = () => {
try {
setStatusMessage('');
setIsSigningIn(true);
const result = await signInWithApple();
if (result?.success && result.data) {
// Redirect to Apple OAuth page
window.location.href = result.data;
@@ -28,7 +28,7 @@ export const SignInWithApple = () => {
}
} catch (error) {
setStatusMessage(
`Error: ${error instanceof Error ? error.message : 'Could not sign in!'}`
`Error: ${error instanceof Error ? error.message : 'Could not sign in!'}`,
);
} finally {
setIsSigningIn(false);
@@ -38,28 +38,25 @@ export const SignInWithApple = () => {
};
return (
<form
onSubmit={handleSignInWithApple}
className='my-4'
>
<form onSubmit={handleSignInWithApple} className='my-4'>
<SubmitButton
className='w-full cursor-pointer'
disabled={isLoading || isSigningIn}
pendingText='Redirecting...'
type="submit"
type='submit'
>
<div className='flex items-center gap-2'>
<Image src='/icons/apple.svg'
<Image
src='/icons/apple.svg'
alt='Apple logo'
className='invert-75 dark:invert-25'
width={22} height={22}
width={22}
height={22}
/>
<p className='text-[1.0rem]'>Sign in with Apple</p>
</div>
</SubmitButton>
{statusMessage && (
<StatusMessage message={{ error: statusMessage }} />
)}
{statusMessage && <StatusMessage message={{ error: statusMessage }} />}
</form>
);
};

24
src/components/default/auth/SignInWithMicrosoft.tsx
View File

@@ -15,9 +15,9 @@ export const SignInWithMicrosoft = () => {
try {
setStatusMessage('');
setIsSigningIn(true);
const result = await signInWithMicrosoft();
if (result?.success && result.data) {
// Redirect to Microsoft OAuth page
window.location.href = result.data;
@@ -26,30 +26,30 @@ export const SignInWithMicrosoft = () => {
}
} catch (error) {
setStatusMessage(
`Error: ${error instanceof Error ? error.message : 'Could not sign in!'}`
`Error: ${error instanceof Error ? error.message : 'Could not sign in!'}`,
);
}
};
return (
<form
onSubmit={handleSignInWithMicrosoft}
className='my-4'
>
<form onSubmit={handleSignInWithMicrosoft} className='my-4'>
<SubmitButton
className='w-full cursor-pointer'
disabled={isLoading || isSigningIn}
pendingText='Redirecting...'
type="submit"
type='submit'
>
<div className='flex items-center gap-2'>
<Image src='/icons/microsoft.svg' alt='Microsoft logo' width={20} height={20} />
<Image
src='/icons/microsoft.svg'
alt='Microsoft logo'
width={20}
height={20}
/>
<p className='text-[1.0rem]'>Sign in with Microsoft</p>
</div>
</SubmitButton>
{statusMessage && (
<StatusMessage message={{ error: statusMessage }} />
)}
{statusMessage && <StatusMessage message={{ error: statusMessage }} />}
</form>
);
};

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

@@ -1,2 +1,5 @@
export { StatusMessage, type Message } from '@/components/default/StatusMessage';
export {
StatusMessage,
type Message,
} from '@/components/default/StatusMessage';
export { SubmitButton } from '@/components/default/SubmitButton';

28
src/components/default/navigation/auth/AvatarDropdown.tsx
View File

@@ -31,7 +31,8 @@ const AvatarDropdown = () => {
const getInitials = (name: string | null | undefined): string => {
if (!name) return '';
return name.split(' ')
return name
.split(' ')
.map((n) => n[0])
.join('')
.toUpperCase();
@@ -42,12 +43,19 @@ const AvatarDropdown = () => {
<DropdownMenuTrigger>
<Avatar className='cursor-pointer'>
{avatarUrl ? (
<AvatarImage src={avatarUrl} alt={getInitials(profile?.full_name)} width={64} height={64} />
<AvatarImage
src={avatarUrl}
alt={getInitials(profile?.full_name)}
width={64}
height={64}
/>
) : (
<AvatarFallback className='text-sm'>
{profile?.full_name
? getInitials(profile.full_name)
: <User size={32} />}
{profile?.full_name ? (
getInitials(profile.full_name)
) : (
<User size={32} />
)}
</AvatarFallback>
)}
</Avatar>
@@ -56,13 +64,19 @@ const AvatarDropdown = () => {
<DropdownMenuLabel>{profile?.full_name}</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem asChild>
<Link href='/profile' className='w-full justify-center cursor-pointer'>
<Link
href='/profile'
className='w-full justify-center cursor-pointer'
>
Edit profile
</Link>
</DropdownMenuItem>
<DropdownMenuSeparator className='h-[2px]' />
<DropdownMenuItem asChild>
<button onClick={handleSignOut} className='w-full justify-center cursor-pointer'>
<button
onClick={handleSignOut}
className='w-full justify-center cursor-pointer'
>
Log out
</button>
</DropdownMenuItem>

70
src/components/default/profile/AvatarUpload.tsx
View File

@@ -1,6 +1,11 @@
import { useFileUpload } from '@/lib/hooks/useFileUpload';
import { useAuth } from '@/components/context/auth';
import { Avatar, AvatarFallback, AvatarImage, CardContent } from '@/components/ui';
import {
Avatar,
AvatarFallback,
AvatarImage,
CardContent,
} from '@/components/ui';
import { Loader2, Pencil, Upload, User } from 'lucide-react';
type AvatarUploadProps = {
@@ -28,16 +33,17 @@ export const AvatarUpload = ({ onAvatarUploaded }: AvatarUploadProps) => {
maxHeight: 500,
quality: 0.8,
},
replace: {replace: true, path: profile?.avatar_url ?? file.name},
replace: { replace: true, path: profile?.avatar_url ?? file.name },
});
if (result.success && result.path) {
await onAvatarUploaded(result.path);
if (result.success && result.data) {
await onAvatarUploaded(result.data);
}
};
const getInitials = (name: string | null | undefined): string => {
if (!name) return '';
return name.split(' ')
return name
.split(' ')
.map((n) => n[0])
.join('')
.toUpperCase();
@@ -45,23 +51,29 @@ export const AvatarUpload = ({ onAvatarUploaded }: AvatarUploadProps) => {
return (
<CardContent>
<div className='flex flex-col items-center'>
<div
className='relative group cursor-pointer mb-4'
onClick={handleAvatarClick}
>
<Avatar className='h-32 w-32'>
{avatarUrl ? (
<AvatarImage src={avatarUrl} alt={getInitials(profile?.full_name)} width={128} height={128} />
) : (
<AvatarFallback className='text-4xl'>
{profile?.full_name
? getInitials(profile.full_name)
: <User size={32} />}
</AvatarFallback>
)}
</Avatar>
<div className='flex flex-col items-center'>
<div
className='relative group cursor-pointer mb-4'
onClick={handleAvatarClick}
>
<Avatar className='h-32 w-32'>
{avatarUrl ? (
<AvatarImage
src={avatarUrl}
alt={getInitials(profile?.full_name)}
width={128}
height={128}
/>
) : (
<AvatarFallback className='text-4xl'>
{profile?.full_name ? (
getInitials(profile.full_name)
) : (
<User size={32} />
)}
</AvatarFallback>
)}
</Avatar>
<div
className='absolute inset-0 rounded-full bg-black/0 group-hover:bg-black/50
transition-all flex items-center justify-center'
@@ -88,13 +100,13 @@ export const AvatarUpload = ({ onAvatarUploaded }: AvatarUploadProps) => {
onChange={handleFileChange}
disabled={isUploading}
/>
{isUploading && (
<div className='flex items-center text-sm text-gray-500 mt-2'>
<Loader2 className='h-4 w-4 mr-2 animate-spin' />
Uploading...
</div>
)}
</div>
{isUploading && (
<div className='flex items-center text-sm text-gray-500 mt-2'>
<Loader2 className='h-4 w-4 mr-2 animate-spin' />
Uploading...
</div>
)}
</div>
</CardContent>
);
};

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

@@ -27,7 +27,7 @@ type ProfileFormProps = {
onSubmit: (values: z.infer<typeof formSchema>) => Promise<void>;
};
export const ProfileForm = ({onSubmit}: ProfileFormProps) => {
export const ProfileForm = ({ onSubmit }: ProfileFormProps) => {
const { profile, isLoading } = useAuth();
const form = useForm<z.infer<typeof formSchema>>({
@@ -89,10 +89,7 @@ export const ProfileForm = ({onSubmit}: ProfileFormProps) => {
/>
<div className='flex justify-center'>
<SubmitButton
disabled={isLoading}
pendingText='Saving...'
>
<SubmitButton disabled={isLoading} pendingText='Saving...'>
Save Changes
</SubmitButton>
</div>
@@ -100,4 +97,4 @@ export const ProfileForm = ({onSubmit}: ProfileFormProps) => {
</Form>
</CardContent>
);
}
};

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

@@ -69,7 +69,7 @@ export const ResetPasswordForm = ({
}
} catch (error) {
setStatusMessage(
error instanceof Error ? error.message : 'Password was not updated!'
error instanceof Error ? error.message : 'Password was not updated!',
);
} finally {
setIsLoading(false);
@@ -86,7 +86,7 @@ export const ResetPasswordForm = ({
</CardHeader>
<CardContent>
<Form {...form}>
<form
<form
onSubmit={form.handleSubmit(handleUpdatePassword)}
className='space-y-6'
>
@@ -123,10 +123,11 @@ export const ResetPasswordForm = ({
)}
/>
{statusMessage && (
<div
<div
className={`text-sm text-center ${
statusMessage.includes('Error') || statusMessage.includes('failed')
? 'text-destructive'
statusMessage.includes('Error') ||
statusMessage.includes('failed')
? 'text-destructive'
: 'text-green-600'
}`}
>

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

@@ -1,13 +1,14 @@
'use server';
import 'server-only';
import { encodedRedirect } from '@/utils/utils';
import { createServerClient } from '@/utils/supabase';
import { headers } from 'next/headers';
import type { User } from '@/utils/supabase';
import type { Result } from './index';
import type { Result } from '.';
export const signUp = async (formData: FormData): Promise<Result<string | null>> => {
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;
@@ -15,11 +16,7 @@ export const signUp = async (formData: FormData): Promise<Result<string | null>>
const origin = (await headers()).get('origin');
if (!email || !password) {
return encodedRedirect(
'error',
'/sign-up',
'Email & password are required',
);
return { success: false, error: 'Email and password are required' };
}
const { error } = await supabase.auth.signUp({
@@ -34,6 +31,7 @@ export const signUp = async (formData: FormData): Promise<Result<string | null>>
},
},
});
if (error) {
return { success: false, error: error.message };
} else {
@@ -44,9 +42,7 @@ export const signUp = async (formData: FormData): Promise<Result<string | null>>
}
};
export const signIn = async (
formData: FormData,
): Promise<Result<null>> => {
export const signIn = async (formData: FormData): Promise<Result<null>> => {
const email = formData.get('email') as string;
const password = formData.get('password') as string;
const supabase = await createServerClient();
@@ -68,10 +64,10 @@ export const signInWithMicrosoft = async (): Promise<Result<string>> => {
provider: 'azure',
options: {
scopes: 'openid, profile email offline_access',
}
},
});
if (error) return { success: false, error: error.message };
return { success: true, data: data.url};
return { success: true, data: data.url };
};
export const signInWithApple = async (): Promise<Result<string>> => {
@@ -80,13 +76,15 @@ export const signInWithApple = async (): Promise<Result<string>> => {
provider: 'apple',
options: {
scopes: 'openid, profile email offline_access',
}
},
});
if (error) return { success: false, error: error.message };
return { success: true, data: data.url};
return { success: true, data: data.url };
};
export const forgotPassword = async (formData: FormData): Promise<Result<string | null>> => {
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');
@@ -102,15 +100,22 @@ export const forgotPassword = async (formData: FormData): Promise<Result<string
if (error) {
return { success: false, error: 'Could not reset password' };
}
return { success: true, data: 'Check your email for a link to reset your password.' };
return {
success: true,
data: 'Check your email for a link to reset your password.',
};
};
export const resetPassword = async (formData: FormData): Promise<Result<null>> => {
export const resetPassword = async (
formData: FormData,
): Promise<Result<null>> => {
const password = formData.get('password') as string;
const confirmPassword = formData.get('confirmPassword') as string;
if (!password || !confirmPassword) {
return { success: false, error: 'Password and confirm password are required!' };
return {
success: false,
error: 'Password and confirm password are required!',
};
}
const supabase = await createServerClient();
if (password !== confirmPassword) {
@@ -120,7 +125,10 @@ export const resetPassword = async (formData: FormData): Promise<Result<null>> =
password,
});
if (error) {
return { success: false, error: `Password update failed: ${error.message}` };
return {
success: false,
error: `Password update failed: ${error.message}`,
};
}
return { success: true, data: null };
};
@@ -128,7 +136,7 @@ export const resetPassword = async (formData: FormData): Promise<Result<null>> =
export const signOut = async (): Promise<Result<null>> => {
const supabase = await createServerClient();
const { error } = await supabase.auth.signOut();
if (error) return { success: false, error: error.message }
if (error) return { success: false, error: error.message };
return { success: true, data: null };
};

2
src/lib/actions/public.ts
View File

@@ -3,7 +3,7 @@
import 'server-only';
import { createServerClient, type Profile } from '@/utils/supabase';
import { getUser } from '@/lib/actions';
import type { Result } from './index';
import type { Result } from '.';
export const getProfile = async (): Promise<Result<Profile>> => {
try {

112
src/lib/actions/storage.ts
View File

@@ -1,7 +1,7 @@
'use server';
import 'server-only';
import { createServerClient } from '@/utils/supabase';
import type { Result } from './index';
import type { Result } from '.';
export type GetStorageProps = {
bucket: string;
@@ -38,12 +38,12 @@ export type ReplaceStorageProps = {
};
export type resizeImageProps = {
file: File,
file: File;
options?: {
maxWidth?: number,
maxHeight?: number,
quality?: number,
}
maxWidth?: number;
maxHeight?: number;
quality?: number;
};
};
export const getSignedUrl = async ({
@@ -75,7 +75,7 @@ export const getSignedUrl = async ({
: 'Unknown error getting signed URL',
};
}
}
};
export const getPublicUrl = async ({
bucket,
@@ -85,12 +85,10 @@ export const getPublicUrl = async ({
}: GetStorageProps): Promise<Result<string>> => {
try {
const supabase = await createServerClient();
const { data } = supabase.storage
.from(bucket)
.getPublicUrl(url, {
download,
transform,
});
const { data } = supabase.storage.from(bucket).getPublicUrl(url, {
download,
transform,
});
if (!data?.publicUrl) throw new Error('No public URL returned');
@@ -104,7 +102,7 @@ export const getPublicUrl = async ({
: 'Unknown error getting public URL',
};
}
}
};
export const uploadFile = async ({
bucket,
@@ -129,7 +127,7 @@ export const uploadFile = async ({
error instanceof Error ? error.message : 'Unknown error uploading file',
};
}
}
};
export const replaceFile = async ({
bucket,
@@ -141,7 +139,7 @@ export const replaceFile = async ({
const supabase = await createServerClient();
const { data, error } = await supabase.storage
.from(bucket)
.update(path, file, {...options, upsert: true});
.update(path, file, { ...options, upsert: true });
if (error) throw error;
if (!data?.path) throw new Error('No path returned from upload');
return { success: true, data: data.path };
@@ -176,7 +174,7 @@ export const deleteFile = async ({
error instanceof Error ? error.message : 'Unknown error deleting file',
};
}
}
};
// Add a helper to list files in a bucket
export const listFiles = async ({
@@ -210,53 +208,49 @@ export const listFiles = async ({
error instanceof Error ? error.message : 'Unknown error listing files',
};
}
}
};
export const resizeImage = async ({
file,
options = {},
}: resizeImageProps): Promise<File> => {
const {
maxWidth = 800,
maxHeight = 800,
quality = 0.8,
} = options;
return new Promise((resolve) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = (event) => {
const img = new Image();
img.src = event.target?.result as string;
img.onload = () => {
let width = img.width;
let height = img.height;
if (width > height) {
if (width > maxWidth) {
height = Math.round((height * maxWidth / width));
width = maxWidth;
}
} else if (height > maxHeight) {
width = Math.round((width * maxHeight / height));
height = maxHeight;
const { maxWidth = 800, maxHeight = 800, quality = 0.8 } = options;
return new Promise((resolve) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = (event) => {
const img = new Image();
img.src = event.target?.result as string;
img.onload = () => {
let width = img.width;
let height = img.height;
if (width > height) {
if (width > maxWidth) {
height = Math.round((height * maxWidth) / width);
width = maxWidth;
}
const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext('2d');
ctx?.drawImage(img, 0, 0, width, height);
canvas.toBlob(
(blob) => {
if (!blob) return;
const resizedFile = new File([blob], file.name, {
type: 'imgage/jpeg',
lastModified: Date.now(),
});
resolve(resizedFile);
},
'image/jpeg',
quality
);
};
} else if (height > maxHeight) {
width = Math.round((width * maxHeight) / height);
height = maxHeight;
}
const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext('2d');
ctx?.drawImage(img, 0, 0, width, height);
canvas.toBlob(
(blob) => {
if (!blob) return;
const resizedFile = new File([blob], file.name, {
type: 'imgage/jpeg',
lastModified: Date.now(),
});
resolve(resizedFile);
},
'image/jpeg',
quality,
);
};
});
};
});
};

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

@@ -1,11 +1,11 @@
'use client'
import { encodedRedirect } from '@/utils/utils';
'use client';
import { createClient } from '@/utils/supabase';
import type { User } from '@/utils/supabase';
import type { Result } from './index';
import type { Result } from '.';
export const signUp = async (formData: FormData): Promise<Result<string | null>> => {
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;
@@ -13,11 +13,7 @@ export const signUp = async (formData: FormData): Promise<Result<string | null>>
const origin = process.env.NEXT_PUBLIC_SITE_URL!;
if (!email || !password) {
return encodedRedirect(
'error',
'/sign-up',
'Email & password are required',
);
return { success: false, error: 'Email and password are required' };
}
const { error } = await supabase.auth.signUp({
@@ -42,9 +38,7 @@ export const signUp = async (formData: FormData): Promise<Result<string | null>>
}
};
export const signIn = async (
formData: FormData,
): Promise<Result<null>> => {
export const signIn = async (formData: FormData): Promise<Result<null>> => {
const email = formData.get('email') as string;
const password = formData.get('password') as string;
const supabase = createClient();
@@ -60,17 +54,16 @@ export const signIn = async (
}
};
export const signInWithMicrosoft = async (): Promise<Result<string>> => {
const supabase = createClient();
const { data, error } = await supabase.auth.signInWithOAuth({
provider: 'azure',
options: {
scopes: 'openid, profile email offline_access',
}
},
});
if (error) return { success: false, error: error.message };
return { success: true, data: data.url};
return { success: true, data: data.url };
};
export const signInWithApple = async (): Promise<Result<string>> => {
@@ -79,13 +72,15 @@ export const signInWithApple = async (): Promise<Result<string>> => {
provider: 'apple',
options: {
scopes: 'openid, profile email offline_access',
}
},
});
if (error) return { success: false, error: error.message };
return { success: true, data: data.url};
return { success: true, data: data.url };
};
export const forgotPassword = async (formData: FormData): Promise<Result<string | null>> => {
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!;
@@ -101,15 +96,22 @@ export const forgotPassword = async (formData: FormData): Promise<Result<string
if (error) {
return { success: false, error: 'Could not reset password' };
}
return { success: true, data: 'Check your email for a link to reset your password.' };
return {
success: true,
data: 'Check your email for a link to reset your password.',
};
};
export const resetPassword = async (formData: FormData): Promise<Result<null>> => {
export const resetPassword = async (
formData: FormData,
): Promise<Result<null>> => {
const password = formData.get('password') as string;
const confirmPassword = formData.get('confirmPassword') as string;
if (!password || !confirmPassword) {
return { success: false, error: 'Password and confirm password are required!' };
return {
success: false,
error: 'Password and confirm password are required!',
};
}
const supabase = createClient();
if (password !== confirmPassword) {
@@ -119,7 +121,10 @@ export const resetPassword = async (formData: FormData): Promise<Result<null>> =
password,
});
if (error) {
return { success: false, error: `Password update failed: ${error.message}` };
return {
success: false,
error: `Password update failed: ${error.message}`,
};
}
return { success: true, data: null };
};
@@ -127,7 +132,7 @@ export const resetPassword = async (formData: FormData): Promise<Result<null>> =
export const signOut = async (): Promise<Result<null>> => {
const supabase = createClient();
const { error } = await supabase.auth.signOut();
if (error) return { success: false, error: error.message }
if (error) return { success: false, error: error.message };
return { success: true, data: null };
};

2
src/lib/hooks/public.ts
View File

@@ -2,7 +2,7 @@
import { createClient, type Profile } from '@/utils/supabase';
import { getUser } from '@/lib/hooks';
import type { Result } from './index';
import type { Result } from '.';
export const getProfile = async (): Promise<Result<Profile>> => {
try {

110
src/lib/hooks/storage.ts
View File

@@ -1,7 +1,7 @@
'use client';
import { createClient } from '@/utils/supabase';
import type { Result } from './index';
import type { Result } from '.';
export type GetStorageProps = {
bucket: string;
@@ -38,12 +38,12 @@ export type ReplaceStorageProps = {
};
export type resizeImageProps = {
file: File,
file: File;
options?: {
maxWidth?: number,
maxHeight?: number,
quality?: number,
}
maxWidth?: number;
maxHeight?: number;
quality?: number;
};
};
export const getSignedUrl = async ({
@@ -75,7 +75,7 @@ export const getSignedUrl = async ({
: 'Unknown error getting signed URL',
};
}
}
};
export const getPublicUrl = async ({
bucket,
@@ -85,12 +85,10 @@ export const getPublicUrl = async ({
}: GetStorageProps): Promise<Result<string>> => {
try {
const supabase = createClient();
const { data } = supabase.storage
.from(bucket)
.getPublicUrl(url, {
download,
transform,
});
const { data } = supabase.storage.from(bucket).getPublicUrl(url, {
download,
transform,
});
if (!data?.publicUrl) throw new Error('No public URL returned');
@@ -104,7 +102,7 @@ export const getPublicUrl = async ({
: 'Unknown error getting public URL',
};
}
}
};
export const uploadFile = async ({
bucket,
@@ -129,7 +127,7 @@ export const uploadFile = async ({
error instanceof Error ? error.message : 'Unknown error uploading file',
};
}
}
};
export const replaceFile = async ({
bucket,
@@ -179,7 +177,7 @@ export const deleteFile = async ({
error instanceof Error ? error.message : 'Unknown error deleting file',
};
}
}
};
// Add a helper to list files in a bucket
export const listFiles = async ({
@@ -213,53 +211,49 @@ export const listFiles = async ({
error instanceof Error ? error.message : 'Unknown error listing files',
};
}
}
};
export const resizeImage = async ({
file,
options = {},
}: resizeImageProps): Promise<File> => {
const {
maxWidth = 800,
maxHeight = 800,
quality = 0.8,
} = options;
return new Promise((resolve) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = (event) => {
const img = new Image();
img.src = event.target?.result as string;
img.onload = () => {
let width = img.width;
let height = img.height;
if (width > height) {
if (width > maxWidth) {
height = Math.round((height * maxWidth / width));
width = maxWidth;
}
} else if (height > maxHeight) {
width = Math.round((width * maxHeight / height));
height = maxHeight;
const { maxWidth = 800, maxHeight = 800, quality = 0.8 } = options;
return new Promise((resolve) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = (event) => {
const img = new Image();
img.src = event.target?.result as string;
img.onload = () => {
let width = img.width;
let height = img.height;
if (width > height) {
if (width > maxWidth) {
height = Math.round((height * maxWidth) / width);
width = maxWidth;
}
const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext('2d');
ctx?.drawImage(img, 0, 0, width, height);
canvas.toBlob(
(blob) => {
if (!blob) return;
const resizedFile = new File([blob], file.name, {
type: 'imgage/jpeg',
lastModified: Date.now(),
});
resolve(resizedFile);
},
'image/jpeg',
quality
);
};
} else if (height > maxHeight) {
width = Math.round((width * maxHeight) / height);
height = maxHeight;
}
const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext('2d');
ctx?.drawImage(img, 0, 0, width, height);
canvas.toBlob(
(blob) => {
if (!blob) return;
const resizedFile = new File([blob], file.name, {
type: 'imgage/jpeg',
lastModified: Date.now(),
});
resolve(resizedFile);
},
'image/jpeg',
quality,
);
};
});
};
});
};

26
src/lib/hooks/useFileUpload.ts
View File

@@ -1,14 +1,13 @@
'use client'
'use client';
import { useState, useRef } from 'react';
import { replaceFile, uploadFile } from '@/lib/hooks';
import { toast } from 'sonner';
import { useAuth } from '@/components/context/auth';
import { resizeImage } from '@/lib/hooks';
import type { Result } from '.';
export type Replace =
| { replace: true, path: string }
| false;
export type Replace = { replace: true; path: string } | false;
export type uploadToStorageProps = {
file: File;
@@ -33,7 +32,7 @@ export const useFileUpload = () => {
resize = false,
options = {},
replace = false,
}: uploadToStorageProps) => {
}: uploadToStorageProps): Promise<Result<string>> => {
try {
if (!isAuthenticated) throw new Error('User is not authenticated');
@@ -48,10 +47,9 @@ export const useFileUpload = () => {
},
});
if (!updateResult.success) {
console.error('Error updating file:', updateResult.error);
return { success: false, error: updateResult.error };
} else {
console.log('We used the new update function hopefully it worked!');
return { success: true, path: updateResult.data };
return { success: true, data: updateResult.data };
}
}
@@ -77,15 +75,21 @@ export const useFileUpload = () => {
throw new Error(uploadResult.error || `Failed to upload to ${bucket}`);
}
return { success: true, path: uploadResult.data };
return { success: true, data: uploadResult.data };
} catch (error) {
console.error(`Error uploading to ${bucket}:`, error);
toast.error(
error instanceof Error
? error.message
: `Failed to upload to ${bucket}`,
);
return { success: false, error };
return {
success: false,
error: `Error: ${
error instanceof Error
? error.message
: `Failed to upload to ${bucket}`
}`,
};
} finally {
setIsUploading(false);
// Clear the input value so the same file can be selected again

11
src/server/docker/volumes/functions/hello/index.ts
View File

@@ -2,14 +2,13 @@
// https://deno.land/manual/getting_started/setup_your_environment
// This enables autocomplete, go to definition, etc.
import { serve } from "https://deno.land/std@0.177.1/http/server.ts"
import { serve } from 'https://deno.land/std@0.177.1/http/server.ts';
serve(async () => {
return new Response(
`"Hello from Edge Functions!"`,
{ headers: { "Content-Type": "application/json" } },
)
})
return new Response(`"Hello from Edge Functions!"`, {
headers: { 'Content-Type': 'application/json' },
});
});
// To invoke:
// curl 'http://localhost:<KONG_HTTP_PORT>/functions/v1/hello' \

80
src/server/docker/volumes/functions/main/index.ts
View File

@@ -1,78 +1,78 @@
import { serve } from 'https://deno.land/std@0.131.0/http/server.ts'
import * as jose from 'https://deno.land/x/jose@v4.14.4/index.ts'
import { serve } from 'https://deno.land/std@0.131.0/http/server.ts';
import * as jose from 'https://deno.land/x/jose@v4.14.4/index.ts';
console.log('main function started')
console.log('main function started');
const JWT_SECRET = Deno.env.get('JWT_SECRET')
const VERIFY_JWT = Deno.env.get('VERIFY_JWT') === 'true'
const JWT_SECRET = Deno.env.get('JWT_SECRET');
const VERIFY_JWT = Deno.env.get('VERIFY_JWT') === 'true';
function getAuthToken(req: Request) {
const authHeader = req.headers.get('authorization')
const authHeader = req.headers.get('authorization');
if (!authHeader) {
throw new Error('Missing authorization header')
throw new Error('Missing authorization header');
}
const [bearer, token] = authHeader.split(' ')
const [bearer, token] = authHeader.split(' ');
if (bearer !== 'Bearer') {
throw new Error(`Auth header is not 'Bearer {token}'`)
throw new Error(`Auth header is not 'Bearer {token}'`);
}
return token
return token;
}
async function verifyJWT(jwt: string): Promise<boolean> {
const encoder = new TextEncoder()
const secretKey = encoder.encode(JWT_SECRET)
const encoder = new TextEncoder();
const secretKey = encoder.encode(JWT_SECRET);
try {
await jose.jwtVerify(jwt, secretKey)
await jose.jwtVerify(jwt, secretKey);
} catch (err) {
console.error(err)
return false
console.error(err);
return false;
}
return true
return true;
}
serve(async (req: Request) => {
if (req.method !== 'OPTIONS' && VERIFY_JWT) {
try {
const token = getAuthToken(req)
const isValidJWT = await verifyJWT(token)
const token = getAuthToken(req);
const isValidJWT = await verifyJWT(token);
if (!isValidJWT) {
return new Response(JSON.stringify({ msg: 'Invalid JWT' }), {
status: 401,
headers: { 'Content-Type': 'application/json' },
})
});
}
} catch (e) {
console.error(e)
console.error(e);
return new Response(JSON.stringify({ msg: e.toString() }), {
status: 401,
headers: { 'Content-Type': 'application/json' },
})
});
}
}
const url = new URL(req.url)
const { pathname } = url
const path_parts = pathname.split('/')
const service_name = path_parts[1]
const url = new URL(req.url);
const { pathname } = url;
const path_parts = pathname.split('/');
const service_name = path_parts[1];
if (!service_name || service_name === '') {
const error = { msg: 'missing function name in request' }
const error = { msg: 'missing function name in request' };
return new Response(JSON.stringify(error), {
status: 400,
headers: { 'Content-Type': 'application/json' },
})
});
}
const servicePath = `/home/deno/functions/${service_name}`
console.error(`serving the request with ${servicePath}`)
const servicePath = `/home/deno/functions/${service_name}`;
console.error(`serving the request with ${servicePath}`);
const memoryLimitMb = 150
const workerTimeoutMs = 1 * 60 * 1000
const noModuleCache = false
const importMapPath = null
const envVarsObj = Deno.env.toObject()
const envVars = Object.keys(envVarsObj).map((k) => [k, envVarsObj[k]])
const memoryLimitMb = 150;
const workerTimeoutMs = 1 * 60 * 1000;
const noModuleCache = false;
const importMapPath = null;
const envVarsObj = Deno.env.toObject();
const envVars = Object.keys(envVarsObj).map((k) => [k, envVarsObj[k]]);
try {
const worker = await EdgeRuntime.userWorkers.create({
@@ -82,13 +82,13 @@ serve(async (req: Request) => {
noModuleCache,
importMapPath,
envVars,
})
return await worker.fetch(req)
});
return await worker.fetch(req);
} catch (e) {
const error = { msg: e.toString() }
const error = { msg: e.toString() };
return new Response(JSON.stringify(error), {
status: 500,
headers: { 'Content-Type': 'application/json' },
})
});
}
})
});

13
src/utils/supabase/middleware.ts
View File

@@ -2,9 +2,9 @@ import { createServerClient } from '@supabase/ssr';
import { type NextRequest, NextResponse } from 'next/server';
import type { Database } from '@/utils/supabase/types';
export const updateSession = async (request: NextRequest) => {
// This `try/catch` block is only here for the interactive tutorial.
// Feel free to remove once you have Supabase connected.
export const updateSession = async (
request: NextRequest,
): Promise<NextResponse> => {
try {
// Create an unmodified response
let response = NextResponse.next({
@@ -45,15 +45,8 @@ export const updateSession = async (request: NextRequest) => {
return NextResponse.redirect(new URL('/sign-in', request.url));
}
//if (request.nextUrl.pathname === '/' && !user.error) {
//return NextResponse.redirect(new URL('/protected', request.url));
//}
return response;
} catch (e) {
// If you are here, a Supabase client could not be created!
// This is likely because you have not set up environment variables.
// Check out http://localhost:3000 for Next Steps.
return NextResponse.next({
request: {
headers: request.headers,

2
src/utils/supabase/server.ts
View File

@@ -1,4 +1,4 @@
'use server'
'use server';
import 'server-only';
import { createServerClient as CreateServerClient } from '@supabase/ssr';

16
src/utils/utils.ts
View File

@@ -1,16 +0,0 @@
import { redirect } from 'next/navigation';
/**
* Redirects to a specified path with an encoded message as a query parameter.
* @param {('error' | 'success')} type - The type of message, either 'error' or 'success'.
* @param {string} path - The path to redirect to.
* @param {string} message - The message to be encoded and added as a query parameter.
* @returns {never} This function doesn't return as it triggers a redirect.
*/
export function encodedRedirect(
type: 'error' | 'success',
path: string,
message: string,
) {
return redirect(`${path}?${type}=${encodeURIComponent(message)}`);
}