Cleanup

2024-03-24 02:23:22 +08:00
parent 648d77b430
commit bce3479368
589 changed files with 37067 additions and 9596 deletions
--- a/packages/features/auth/src/components/password-reset-form.tsx
+++ b/packages/features/auth/src/components/password-reset-form.tsx
@@ -0,0 +1,154 @@
+'use client';
+
+import Link from 'next/link';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import type { z } from 'zod';
+
+import { useUpdateUser } from '@kit/supabase/hooks/use-update-user-mutation';
+import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
+import { Button } from '@kit/ui/button';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@kit/ui/form';
+import { Heading } from '@kit/ui/heading';
+import { Input } from '@kit/ui/input';
+import { Trans } from '@kit/ui/trans';
+
+import { PasswordResetSchema } from '../schemas/password-reset.schema';
+
+function PasswordResetForm(params: { redirectTo: string }) {
+  const updateUser = useUpdateUser();
+
+  const form = useForm<z.infer<typeof PasswordResetSchema>>({
+    resolver: zodResolver(PasswordResetSchema),
+    defaultValues: {
+      password: '',
+      repeatPassword: '',
+    },
+  });
+
+  if (updateUser.error) {
+    return <ErrorState onRetry={() => updateUser.reset()} />;
+  }
+
+  if (updateUser.data && !updateUser.isPending) {
+    return <SuccessState />;
+  }
+
+  return (
+    <div className={'flex w-full flex-col space-y-6'}>
+      <div className={'flex justify-center'}>
+        <Heading level={5}>
+          <Trans i18nKey={'auth:passwordResetLabel'} />
+        </Heading>
+      </div>
+
+      <Form {...form}>
+        <form
+          className={'flex w-full flex-1 flex-col'}
+          onSubmit={form.handleSubmit(({ password }) => {
+            return updateUser.mutateAsync({
+              password,
+              redirectTo: params.redirectTo,
+            });
+          })}
+        >
+          <div className={'flex-col space-y-4'}>
+            <FormField
+              name={'password'}
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>
+                    <Trans i18nKey={'common:password'} />
+                  </FormLabel>
+
+                  <FormControl>
+                    <Input required type="password" {...field} />
+                  </FormControl>
+
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              name={'repeatPassword'}
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>
+                    <Trans i18nKey={'common:repeatPassword'} />
+                  </FormLabel>
+
+                  <FormControl>
+                    <Input required type="password" {...field} />
+                  </FormControl>
+
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <Button
+              disabled={updateUser.isPending}
+              type="submit"
+              className={'w-full'}
+            >
+              <Trans i18nKey={'auth:passwordResetLabel'} />
+            </Button>
+          </div>
+        </form>
+      </Form>
+    </div>
+  );
+}
+
+export default PasswordResetForm;
+
+function SuccessState() {
+  return (
+    <div className={'flex flex-col space-y-4'}>
+      <Alert variant={'destructive'}>
+        <AlertTitle>
+          <Trans i18nKey={'profile:updatePasswordSuccess'} />
+        </AlertTitle>
+
+        <AlertDescription>
+          <Trans i18nKey={'profile:updatePasswordSuccessMessage'} />
+        </AlertDescription>
+      </Alert>
+
+      <Link href={'/'}>
+        <Button variant={'outline'}>
+          <Trans i18nKey={'common:backToHomePage'} />
+        </Button>
+      </Link>
+    </div>
+  );
+}
+
+function ErrorState(props: { onRetry: () => void }) {
+  return (
+    <div className={'flex flex-col space-y-4'}>
+      <Alert variant={'destructive'}>
+        <AlertTitle>
+          <Trans i18nKey={'auth:resetPasswordError'} />
+        </AlertTitle>
+
+        <AlertDescription>
+          <Trans i18nKey={'common:genericError'} />
+        </AlertDescription>
+      </Alert>
+
+      <Button onClick={props.onRetry} variant={'outline'}>
+        <Trans i18nKey={'common:retry'} />
+      </Button>
+    </div>
+  );
+}