Update "Password Reset" to "Update Password"

The code changes correspond to the rebranding of "Password Reset" to "Update Password". The names of components, functions, and routes have been updated to reflect this change. Also, a minor code optimization has been made in the i18n.server file for the creation of i18n server instances.
2024-04-19 17:27:11 +08:00
parent cc80b26117
commit c121a3bdad
5 changed files with 15 additions and 10 deletions
--- a/packages/features/auth/src/components/update-password-form.tsx
+++ b/packages/features/auth/src/components/update-password-form.tsx
@@ -0,0 +1,165 @@
+'use client';
+
+import Link from 'next/link';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import {
+  ArrowLeftIcon,
+  CheckIcon,
+  ExclamationTriangleIcon,
+} from '@radix-ui/react-icons';
+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';
+
+export function UpdatePasswordForm(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>
+  );
+}
+
+function SuccessState() {
+  return (
+    <div className={'flex flex-col space-y-4'}>
+      <Alert variant={'success'}>
+        <CheckIcon className={'s-6'} />
+
+        <AlertTitle>
+          <Trans i18nKey={'account:updatePasswordSuccess'} />
+        </AlertTitle>
+
+        <AlertDescription>
+          <Trans i18nKey={'account:updatePasswordSuccessMessage'} />
+        </AlertDescription>
+      </Alert>
+
+      <Link href={'/'}>
+        <Button variant={'outline'} className={'w-full'}>
+          <ArrowLeftIcon className={'mr-2 h-4'} />
+
+          <span>
+            <Trans i18nKey={'common:backToHomePage'} />
+          </span>
+        </Button>
+      </Link>
+    </div>
+  );
+}
+
+function ErrorState(props: { onRetry: () => void }) {
+  return (
+    <div className={'flex flex-col space-y-4'}>
+      <Alert variant={'destructive'}>
+        <ExclamationTriangleIcon className={'s-6'} />
+
+        <AlertTitle>
+          <Trans i18nKey={'common:genericError'} />
+        </AlertTitle>
+
+        <AlertDescription>
+          <Trans i18nKey={'auth:resetPasswordError'} />
+        </AlertDescription>
+      </Alert>
+
+      <Button onClick={props.onRetry} variant={'outline'}>
+        <Trans i18nKey={'common:retry'} />
+      </Button>
+    </div>
+  );
+}