cleaning shit up

src/components/default/auth/buttons/client/index.tsx

@@ -0,0 +1,3 @@
+export { SignInWithApple } from './sign-in-with-apple';
+export { SignInWithMicrosoft } from './sign-in-with-microsoft';
+export { SignInButton } from './sign-in';

src/components/default/auth/buttons/client/sign-in-with-apple.tsx

@@ -1,5 +1,5 @@
 'use client';
-import { signInWithApple, getProfile, updateProfile } from '@/lib/queries';
+import { signInWithApple } from '@/lib/queries';
 import { StatusMessage, SubmitButton } from '@/components/default/forms';
 import { useAuth } from '@/lib/hooks/context';
 import { useRouter } from 'next/navigation';
@@ -85,7 +85,7 @@ export const SignInWithApple = ({
             width={imageProps.width}
             height={imageProps.height}
           />
-          <p className={textProps.className}>Sign In with Apple</p>
+          <p className={textProps.className} {...textProps}>Sign In with Apple</p>
         </div>
       </SubmitButton>
       {statusMessage && <StatusMessage message={{ error: statusMessage }} />}

src/components/default/auth/buttons/client/sign-in-with-microsoft.tsx

@@ -0,0 +1,94 @@
+'use client';
+import { signInWithMicrosoft } from '@/lib/queries';
+import { StatusMessage, SubmitButton } from '@/components/default/forms';
+import { useAuth } from '@/lib/hooks/context';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import Image from 'next/image';
+import { type buttonVariants } from '@/components/ui';
+import { type ComponentProps } from 'react';
+import { type VariantProps } from 'class-variance-authority';
+import { useSupabaseClient } from '@/utils/supabase';
+
+type ButtonProps = ComponentProps<'button'> & VariantProps<typeof buttonVariants>;
+type ImageProps = {
+  src: string;
+  alt: string;
+  className?: string;
+  width?: number;
+  height?: number;
+}
+type FormProps = ComponentProps<'form'>;
+type TextProps = ComponentProps<'p'>;
+type SignInWithMicrosoftProps = {
+  buttonProps?: ButtonProps;
+  imageProps?: ImageProps;
+  formProps?: FormProps;
+  textProps?: TextProps;
+};
+
+export const SignInWithMicrosoft = ({
+  buttonProps = {
+    className: 'w-full cursor-pointer',
+    type: 'submit',
+  },
+  imageProps = {
+    src: '/icons/auth/microsoft.svg',
+    alt: 'Apple',
+    className: '',
+    width: 24,
+    height: 24,
+  },
+  formProps = {
+    className: 'my-4',
+  },
+  textProps = {
+    className: 'text-[1.0rem]',
+  },
+} : SignInWithMicrosoftProps) => {
+  const router = useRouter();
+  const { loading, refreshUser } = useAuth();
+  const [statusMessage, setStatusMessage] = useState('');
+  const [ isLoading, setIsLoading ] = useState(false);
+  const supabase = useSupabaseClient();
+
+  const handleSignInWithMicrosoft = async (e: React.FormEvent) => {
+    e.preventDefault();
+    try {
+      if (!supabase) throw new Error('Supabase client not found');
+      setStatusMessage('');
+      setIsLoading(true);
+      const result = await signInWithMicrosoft(supabase);
+      if (result.data.url) window.location.href = result.data.url;
+      else setStatusMessage(`There was a problem signing in with Apple!`);
+    } catch (error) {
+      setStatusMessage(`Error signing in: ${error as string}`);
+    } finally {
+      setIsLoading(false);
+      await refreshUser();
+      router.push('');
+    }
+  };
+
+  return (
+    <form onSubmit={handleSignInWithMicrosoft} {...formProps}>
+      <SubmitButton
+        disabled={isLoading || loading}
+        pendingText='Signing in...'
+        {...buttonProps}
+      >
+        <div className='flex items-center gap-2'>
+          <Image
+            src={imageProps.src}
+            alt={imageProps.alt}
+            className={imageProps.className}
+            width={imageProps.width}
+            height={imageProps.height}
+          />
+          <p className={textProps.className} {...textProps}>Sign In with Apple</p>
+        </div>
+      </SubmitButton>
+      {statusMessage && <StatusMessage message={{ error: statusMessage }} />}
+    </form>
+  );
+};

src/components/default/auth/cards/client/sign-in.tsx

@@ -0,0 +1,126 @@
+'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 (
+
+  );
+
+};
+

src/components/default/forms/index.tsx

@@ -1,2 +1,2 @@
-export { StatusMessage } from './StatusMessage';
-export { SubmitButton } from './SubmitButton';
+export { StatusMessage } from './status-message';
+export { SubmitButton } from './submit-button';