blah blah

2025-07-03 17:00:32 -05:00
parent 6ef77c481d
commit edd0a9ccba
12 changed files with 236 additions and 7 deletions
--- a/src/components/default/auth/cards/client/forgot-password.tsx
+++ b/src/components/default/auth/cards/client/forgot-password.tsx
@@ -0,0 +1,177 @@
+'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/queries';
+import { useAuth } from '@/lib/hooks/context';
+import { useEffect, useState, type ComponentProps } from 'react';
+import { useRouter } from 'next/navigation';
+import { useSupabaseClient } from '@/utils/supabase';
+import { StatusMessage, SubmitButton } from '@/components/default/forms';
+import { cn } from '@/lib/utils';
+
+const forgotPasswordFormSchema = z.object({
+  email: z.string().email({
+    message: 'Please enter a valid email address.'
+  }),
+});
+
+type ForgotPasswordCardProps = {
+  cardClassName?: ComponentProps<typeof Card>['className'];
+  cardProps?: Omit<ComponentProps<typeof Card>, 'className'>;
+  cardTitleClassName?: ComponentProps<typeof CardTitle>['className'];
+  cardTitleProps?: Omit<ComponentProps<typeof CardTitle>, 'className'>;
+  cardDescriptionClassName?: ComponentProps<typeof CardDescription>['className'];
+  cardDescriptionProps?: Omit<ComponentProps<typeof CardDescription>, 'className'>;
+  signUpLinkClassName?: ComponentProps<typeof Link>['className'];
+  signUpLinkProps?: Omit<ComponentProps<typeof Link>, 'className' | 'href'>;
+  formClassName?: ComponentProps<'form'>['className'];
+  formProps?: Omit<ComponentProps<'form'>, 'className' | 'onSubmit'>;
+  formLabelClassName?: ComponentProps<typeof FormLabel>['className'];
+  formLabelProps?: Omit<ComponentProps<typeof FormLabel>, 'className'>;
+  buttonProps?: ComponentProps<typeof SubmitButton>;
+};
+
+export const ForgotPasswordCard = ({
+  cardClassName,
+  cardProps,
+  cardTitleClassName,
+  cardTitleProps,
+  cardDescriptionClassName,
+  cardDescriptionProps,
+  signUpLinkClassName,
+  signUpLinkProps,
+  formClassName,
+  formProps,
+  formLabelClassName,
+  formLabelProps,
+  buttonProps = {
+    pendingText: 'Sending Reset Link...',
+  },
+}: ForgotPasswordCardProps) => {
+  const router = useRouter();
+  const { isAuthenticated, loading, refreshUser } = useAuth();
+  const [statusMessage, setStatusMessage] = useState('');
+  const supabase = useSupabaseClient();
+
+  const form = useForm<z.infer<typeof forgotPasswordFormSchema>>({
+    resolver: zodResolver(forgotPasswordFormSchema),
+    defaultValues: {
+      email: '',
+    },
+  });
+
+  useEffect(() => {
+    if (isAuthenticated) router.push('/')
+  }, [isAuthenticated, router]);
+
+  const handleForgotPassword = async (values: z.infer<typeof forgotPasswordFormSchema>) => {
+    try {
+      setStatusMessage('');
+      const formData = new FormData();
+      formData.append('email', values.email);
+      if (!supabase) throw new Error('Supabase client not found');
+      const result = await forgotPassword(supabase, formData);
+      if (result.error) throw new Error(result.error.message);
+      await refreshUser();
+      setStatusMessage('Check your email for a link to reset your password.');
+      form.reset();
+      router.push('');
+    } catch (error) {
+      setStatusMessage(
+        `Error: ${error instanceof Error ? error.message : 'Could not sign in!'}`,
+      );
+    }
+  };
+
+  return (
+    <Card
+      className={cn('min-w-xs sm:min-w-sm bg-card/50', cardClassName)}
+      {...cardProps}
+    >
+      <CardHeader>
+        <CardTitle
+          className={cn('text-2xl font-medium', cardTitleClassName)}
+          {...cardTitleProps}
+        >
+          Forgot Password
+        </CardTitle>
+        <CardDescription
+          className={cn('text-sm text-foreground', cardDescriptionClassName)}
+          {...cardDescriptionProps}
+        >
+          Don&apos;t have an account?{' '}
+          <Link
+            className={cn('font-medium underline', signUpLinkClassName)}
+            href='/sign-up'
+            {...signUpLinkProps}
+          >
+            Sign up!
+          </Link>
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Form {...form}>
+          <form
+            onSubmit={form.handleSubmit(handleForgotPassword)}
+            className={cn('flex flex-col min-w-64 space-y-6', formClassName)}
+            {...formProps}
+          >
+            <FormField
+              control={form.control}
+              name='email'
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel
+                    className={cn('text-xl', formLabelClassName)}
+                    {...formLabelProps}
+                  >
+                    Email
+                  </FormLabel>
+                  <FormControl>
+                    <Input
+                      type='email'
+                      placeholder='you@example.com'
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <SubmitButton
+              disabled={loading}
+              {...buttonProps}
+            >
+              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>
+  );
+};