From b4b111e2974a80c9b6c1a6bf310542f243bcefad Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Mon, 20 May 2024 12:05:19 +0530
Subject: [PATCH] [WEB-1319] chore: auth fixes and enhancement (#4519)

* chore: onboarding invite member button overflow fix

* chore: change password enhancement
---
 web/components/onboarding/invite-members.tsx | 2 +-
 web/pages/profile/change-password.tsx        | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/web/components/onboarding/invite-members.tsx b/web/components/onboarding/invite-members.tsx
index 366583f6f..15d17c738 100644
--- a/web/components/onboarding/invite-members.tsx
+++ b/web/components/onboarding/invite-members.tsx
@@ -415,7 +415,7 @@ export const InviteMembers: React.FC<Props> = (props) => {
                 Add another
               </button>
             </div>
-            <div className="flex flex-col mx-auto px-8 sm:px-2 items-center justify-center gap-4 w-96">
+            <div className="flex flex-col mx-auto px-8 sm:px-2 items-center justify-center gap-4 w-full max-w-96">
               <Button
                 variant="primary"
                 type="submit"
diff --git a/web/pages/profile/change-password.tsx b/web/pages/profile/change-password.tsx
index 4a493ed59..0d1575de8 100644
--- a/web/pages/profile/change-password.tsx
+++ b/web/pages/profile/change-password.tsx
@@ -68,6 +68,8 @@ const ChangePasswordPage: NextPageWithLayout = observer(() => {
   const password = watch("new_password");
   const confirmPassword = watch("confirm_password");
 
+  const isNewPasswordSameAsOldPassword = oldPassword !== "" && password !== "" && password === oldPassword;
+
   const handleShowPassword = (key: keyof typeof showPassword) =>
     setShowPassword((prev) => ({ ...prev, [key]: !prev[key] }));
 
@@ -211,6 +213,9 @@ const ChangePasswordPage: NextPageWithLayout = observer(() => {
                 )}
               </div>
               {passwordSupport}
+              {isNewPasswordSameAsOldPassword && !isPasswordInputFocused && (
+                <span className="text-xs text-red-500">New password must be different from old password</span>
+              )}
             </div>
             <div className="space-y-1">
               <h4 className="text-sm">Confirm password</h4>