From 031e0810a6a32adb47dcedb338cf073120591318 Mon Sep 17 00:00:00 2001
From: Giancarlo Buomprisco <giancarlopsk@gmail.com>
Date: Wed, 19 Feb 2025 15:38:05 +0700
Subject: [PATCH] Enhance password update error handling and localization
 (#175)

* Enhance password update error handling and localization
---
 apps/web/public/locales/en/auth.json          |  3 ++-
 .../src/components/update-password-form.tsx   | 22 ++++++++++++++-----
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/apps/web/public/locales/en/auth.json b/apps/web/public/locales/en/auth.json
index d10947ee8..6ac3bf8a9 100644
--- a/apps/web/public/locales/en/auth.json
+++ b/apps/web/public/locales/en/auth.json
@@ -82,6 +82,7 @@
     "minPasswordSpecialChars": "Password must contain at least one special character",
     "uppercasePassword": "Password must contain at least one uppercase letter",
     "insufficient_aal": "Please sign-in with your current multi-factor authentication to perform this action",
-    "otp_expired": "The email link has expired. Please try again."
+    "otp_expired": "The email link has expired. Please try again.",
+    "same_password": "The password cannot be the same as the current password"
   }
 }
diff --git a/packages/features/auth/src/components/update-password-form.tsx b/packages/features/auth/src/components/update-password-form.tsx
index de8355d1e..759c1be51 100644
--- a/packages/features/auth/src/components/update-password-form.tsx
+++ b/packages/features/auth/src/components/update-password-form.tsx
@@ -6,6 +6,7 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { CheckIcon, ExclamationTriangleIcon } from '@radix-ui/react-icons';
 import { ArrowRightIcon } from 'lucide-react';
 import { useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
 import type { z } from 'zod';
 
 import { useUpdateUser } from '@kit/supabase/hooks/use-update-user-mutation';
@@ -37,7 +38,9 @@ export function UpdatePasswordForm(params: { redirectTo: string }) {
   });
 
   if (updateUser.error) {
-    return <ErrorState onRetry={() => updateUser.reset()} />;
+    const error = updateUser.error as unknown as { code: string };
+
+    return <ErrorState error={error} onRetry={() => updateUser.reset()} />;
   }
 
   if (updateUser.data && !updateUser.isPending) {
@@ -139,7 +142,18 @@ function SuccessState(props: { redirectTo: string }) {
   );
 }
 
-function ErrorState(props: { onRetry: () => void }) {
+function ErrorState(props: {
+  onRetry: () => void;
+  error: {
+    code: string;
+  };
+}) {
+  const { t } = useTranslation('auth');
+
+  const errorMessage = t(`errors.${props.error.code}`, {
+    defaultValue: t('errors.resetPasswordError'),
+  });
+
   return (
     <div className={'flex flex-col space-y-4'}>
       <Alert variant={'destructive'}>
@@ -149,9 +163,7 @@ function ErrorState(props: { onRetry: () => void }) {
           <Trans i18nKey={'common:genericError'} />
         </AlertTitle>
 
-        <AlertDescription>
-          <Trans i18nKey={'auth:resetPasswordError'} />
-        </AlertDescription>
+        <AlertDescription>{errorMessage}</AlertDescription>
       </Alert>
 
       <Button onClick={props.onRetry} variant={'outline'}>