127 lines
3.1 KiB
TypeScript
Executable File
127 lines
3.1 KiB
TypeScript
Executable File
'use client';
|
|
|
|
import { z } from 'zod';
|
|
import { zodResolver } from '@hookform/resolvers/zod';
|
|
import { useForm } from 'react-hook-form';
|
|
import Link from 'next/link';
|
|
import { signIn, signUp } from '@/lib/queries';
|
|
import { useRouter } from 'next/navigation';
|
|
import { useEffect, useState } from 'react';
|
|
import { useAuth } from '@/lib/hooks/context';
|
|
import { useSupabaseClient } from '@/utils/supabase';
|
|
import { StatusMessage, SubmitButton } from '@/components/default/forms';
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
Form,
|
|
FormControl,
|
|
FormField,
|
|
FormItem,
|
|
FormLabel,
|
|
FormMessage,
|
|
Input,
|
|
Separator,
|
|
Tabs,
|
|
TabsContent,
|
|
TabsList,
|
|
TabsTrigger,
|
|
} from '@/components/ui';
|
|
import {
|
|
SignInWithApple,
|
|
SignInWithMicrosoft
|
|
} from '@/components/default/auth/buttons/client';
|
|
|
|
const signInFormSchema = z.object({
|
|
email: z.string().email({
|
|
message: 'Please enter a valid email address.'
|
|
}),
|
|
password: z.string().min(8, {
|
|
message: 'Password must be at least 8 characters.'
|
|
}),
|
|
});
|
|
|
|
const signUpformSchema = 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'],
|
|
});
|
|
|
|
export const SignInCard = () => {
|
|
const router = useRouter();
|
|
const { isAuthenticated, loading, refreshUser } = useAuth();
|
|
const [statusMessage, setStatusMessage] = useState('');
|
|
const supabase = useSupabaseClient();
|
|
|
|
const signInForm = useForm<z.infer<typeof signInFormSchema>>({
|
|
resolver: zodResolver(signInFormSchema),
|
|
defaultValues: {
|
|
email: '',
|
|
password: '',
|
|
},
|
|
});
|
|
|
|
const signUpForm = useForm<z.infer<typeof signUpformSchema>>({
|
|
resolver: zodResolver(signUpformSchema),
|
|
defaultValues: {
|
|
name: '',
|
|
email: '',
|
|
password: '',
|
|
confirmPassword: '',
|
|
},
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (isAuthenticated) router.push('/');
|
|
}, [isAuthenticated, router]);
|
|
|
|
const handleSignIn = async (values: z.infer<typeof signInFormSchema>) => {
|
|
try {
|
|
setStatusMessage('');
|
|
const formData = new FormData();
|
|
formData.append('email', values.email);
|
|
formData.append('password', values.password);
|
|
if (!supabase) throw new Error('Supabase client not found');
|
|
const result = await signIn(supabase, formData);
|
|
if (result.error) throw new Error(result.error.message);
|
|
else if (result.data) {
|
|
await refreshUser();
|
|
signInForm.reset();
|
|
router.push('');
|
|
}
|
|
} catch (error) {
|
|
setStatusMessage(`Error signing in: ${error as string}`);
|
|
}
|
|
};
|
|
|
|
const handleSignUp = async (values: z.infer<typeof signUpFormSchema>) => {
|
|
try {
|
|
|
|
} catch {
|
|
|
|
}
|
|
};
|
|
|
|
return (
|
|
|
|
);
|
|
|
|
};
|
|
|