fix sign in error form reset

xvvvyz · Jun 1, 2024 · 824180a · 824180a
1 parent e332bd0
commit 824180a
Show file tree

Hide file tree

Showing 6 changed files with 90 additions and 27 deletions.
diff --git a/app/_components/forgot-password-form.tsx b/app/_components/forgot-password-form.tsx
@@ -6,12 +6,21 @@ import forgotPassword from '@/_mutations/forgot-password';
 import { useActionState } from 'react';
 
 const ForgotPasswordForm = () => {
-  const [state, action] = useActionState(forgotPassword, null);
+  const [state, action] = useActionState(forgotPassword, {
+    defaultValues: { email: '' },
+    error: '',
+  });
 
   return (
     <form action={action} className="flex flex-col gap-6">
-      <Input label="Email address" name="email" required type="email" />
-      {state?.error && <p className="text-center">{state.error}</p>}
+      <Input
+        defaultValue={state.defaultValues.email}
+        label="Email address"
+        name="email"
+        required
+        type="email"
+      />
+      {state.error && <p className="text-center">{state.error}</p>}
       <Button className="mt-8 w-full" loadingText="Sending link…" type="submit">
         Send reset link
       </Button>

diff --git a/app/_components/sign-in-form.tsx b/app/_components/sign-in-form.tsx
@@ -10,13 +10,23 @@ interface SignInFormProps {
 }
 
 const SignInForm = ({ next }: SignInFormProps) => {
-  const [state, action] = useActionState(signIn.bind(null, { next }), null);
+  const [state, action] = useActionState(signIn.bind(null, { next }), {
+    defaultValues: { email: '', password: '' },
+    error: '',
+  });
 
   return (
     <form action={action} className="flex flex-col gap-6">
-      <Input label="Email address" name="email" required type="email" />
+      <Input
+        defaultValue={state.defaultValues.email}
+        label="Email address"
+        name="email"
+        required
+        type="email"
+      />
       <div className="relative">
         <Input
+          defaultValue={state.defaultValues.password}
           label="Password"
           minLength={6}
           name="password"
@@ -31,7 +41,7 @@ const SignInForm = ({ next }: SignInFormProps) => {
           Forgot password?
         </Button>
       </div>
-      {state?.error && <p className="text-center">{state.error}</p>}
+      {state.error && <p className="text-center">{state.error}</p>}
       <Button className="mt-8 w-full" loadingText="Signing in…" type="submit">
         Sign in
       </Button>

diff --git a/app/_components/sign-up-form.tsx b/app/_components/sign-up-form.tsx
@@ -10,23 +10,43 @@ interface SignUpFormProps {
 }
 
 const SignUpForm = ({ next }: SignUpFormProps) => {
-  const [state, action] = useActionState(signUp.bind(null, { next }), null);
+  const [state, action] = useActionState(signUp.bind(null, { next }), {
+    defaultValues: { email: '', firstName: '', lastName: '', password: '' },
+    error: '',
+  });
 
   return (
     <form action={action} className="flex flex-col gap-6">
       <div className="flex gap-6">
-        <Input label="First name" name="firstName" required />
-        <Input label="Last name" name="lastName" required />
+        <Input
+          defaultValue={state.defaultValues.firstName}
+          label="First name"
+          name="firstName"
+          required
+        />
+        <Input
+          defaultValue={state.defaultValues.lastName}
+          label="Last name"
+          name="lastName"
+          required
+        />
       </div>
-      <Input label="Email address" name="email" required type="email" />
       <Input
+        defaultValue={state.defaultValues.email}
+        label="Email address"
+        name="email"
+        required
+        type="email"
+      />
+      <Input
+        defaultValue={state.defaultValues.password}
         label="Password"
         minLength={6}
         name="password"
         required
         type="password"
       />
-      {state?.error && <p className="text-center">{state.error}</p>}
+      {state.error && <p className="text-center">{state.error}</p>}
       <Button
         className="mt-8 w-full"
         loadingText="Creating account…"

diff --git a/app/_mutations/forgot-password.ts b/app/_mutations/forgot-password.ts
@@ -5,19 +5,19 @@ import { headers } from 'next/headers';
 import { redirect } from 'next/navigation';
 
 const forgotPassword = async (
-  _state: { error: string } | null,
+  _state: { defaultValues: { email: string }; error: string },
   data: FormData,
 ) => {
   const proto = headers().get('x-forwarded-proto');
   const host = headers().get('host');
+  const email = data.get('email') as string;
 
   const { error } =
-    await createServerSupabaseClient().auth.resetPasswordForEmail(
-      data.get('email') as string,
-      { redirectTo: `${proto}://${host}/change-password` },
-    );
+    await createServerSupabaseClient().auth.resetPasswordForEmail(email, {
+      redirectTo: `${proto}://${host}/change-password`,
+    });
 
-  if (error) return { error: error.message };
+  if (error) return { defaultValues: { email }, error: error.message };
   redirect('/forgot-password/email-sent');
 };
 

diff --git a/app/_mutations/sign-in.ts b/app/_mutations/sign-in.ts
@@ -5,15 +5,21 @@ import { redirect } from 'next/navigation';
 
 const signIn = async (
   context: { next?: string },
-  _state: { error: string } | null,
+  _state: { defaultValues: { email: string; password: string }; error: string },
   data: FormData,
 ) => {
+  const email = data.get('email') as string;
+  const password = data.get('password') as string;
+
   const { error } = await createServerSupabaseClient().auth.signInWithPassword({
-    email: data.get('email') as string,
-    password: data.get('password') as string,
+    email,
+    password,
   });
 
-  if (error) return { error: error.message };
+  if (error) {
+    return { defaultValues: { email, password }, error: error.message };
+  }
+
   redirect(context.next ?? '/subjects');
 };
 

diff --git a/app/_mutations/sign-up.ts b/app/_mutations/sign-up.ts
@@ -6,26 +6,44 @@ import { redirect } from 'next/navigation';
 
 const signUp = async (
   context: { next?: string },
-  _state: { error: string } | null,
+  _state: {
+    defaultValues: {
+      email: string;
+      firstName: string;
+      lastName: string;
+      password: string;
+    };
+    error: string;
+  },
   data: FormData,
 ) => {
   const proto = headers().get('x-forwarded-proto');
   const host = headers().get('host');
+  const email = data.get('email') as string;
+  const firstName = data.get('firstName') as string;
+  const lastName = data.get('lastName') as string;
+  const password = data.get('password') as string;
 
   const { error } = await createServerSupabaseClient().auth.signUp({
-    email: data.get('email') as string,
+    email,
     options: {
       data: {
-        first_name: data.get('firstName') as string,
+        first_name: firstName,
         is_client: context.next?.includes('/join/'),
-        last_name: data.get('lastName') as string,
+        last_name: lastName,
       },
       emailRedirectTo: `${proto}://${host}${context.next ?? '/subjects'}`,
     },
-    password: data.get('password') as string,
+    password,
   });
 
-  if (error) return { error: error.message };
+  if (error) {
+    return {
+      defaultValues: { email, firstName, lastName, password },
+      error: error.message,
+    };
+  }
+
   redirect('/confirmation-sent');
 };