fix(ui): change password button being hidden and unlock button being shown incorrectly on account page (#14220)

Fixes #14208

When you click change password only the Cancel button should still show
otherwise it looks confusing as "Force Unlock" (currently shown) is
visible as if it were a submit

This ensures only cancel is visible

Author: paulpopus

packages/ui/src/views/Edit/Auth/index.tsx

@@ -237,6 +237,7 @@ export const Auth: React.FC<Props> = (props) => {
               <Button
                 buttonStyle="secondary"
                 disabled={disabled}
+                id="cancel-change-password"
                 onClick={() => handleChangePassword(false)}
                 size="medium"
               >
@@ -257,10 +258,11 @@ export const Auth: React.FC<Props> = (props) => {
                   {t('authentication:changePassword')}
                 </Button>
               )}
-            {operation === 'update' && hasPermissionToUnlock && (
+            {!changingPassword && operation === 'update' && hasPermissionToUnlock && (
               <Button
                 buttonStyle="secondary"
                 disabled={disabled || !showUnlock}
+                id="force-unlock"
                 onClick={() => void unlock()}
                 size="medium"
               >

test/auth/e2e.spec.ts

@@ -226,8 +226,14 @@ describe('Auth', () => {
       test('should allow change password', async () => {
         await page.goto(url.account)
         const emailBeforeSave = await page.locator('#field-email').inputValue()
+        await expect(page.locator('#force-unlock')).toBeVisible()
+
         await page.locator('#change-password').click()
         await page.locator('#field-password').fill('password')
+
+        await expect(page.locator('#change-password')).toBeHidden()
+
+        await expect(page.locator('#cancel-change-password')).toBeVisible()
         // should fail to save without confirm password
         await page.locator('#action-save').click()
         await expect(