From 484f2f3a62cded8e3748cb9ef985b18d3b9bdb95 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 2 Mar 2026 13:06:16 +0000
Subject: [PATCH] Add Confirm Password field to My Profile password change form

Co-authored-by: lstein <111189+lstein@users.noreply.github.com>
---
 invokeai/frontend/web/public/locales/en.json  |   3 +
 .../auth/components/UserManagement.tsx        | 151 +++++++-----
 .../features/auth/components/UserProfile.tsx  | 229 ++++++++++++------
 3 files changed, 259 insertions(+), 124 deletions(-)

diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json
index d520c6416cc..3dc9ebe98e5 100644
--- a/invokeai/frontend/web/public/locales/en.json
+++ b/invokeai/frontend/web/public/locales/en.json
@@ -64,6 +64,9 @@
             "currentPasswordPlaceholder": "Current password",
             "newPassword": "New Password",
             "newPasswordPlaceholder": "New password",
+            "confirmPassword": "Confirm New Password",
+            "confirmPasswordPlaceholder": "Confirm new password",
+            "passwordsDoNotMatch": "Passwords do not match",
             "saveSuccess": "Profile updated successfully",
             "saveFailed": "Failed to save profile. Please try again."
         },
diff --git a/invokeai/frontend/web/src/features/auth/components/UserManagement.tsx b/invokeai/frontend/web/src/features/auth/components/UserManagement.tsx
index 48dbf211105..4dd88ca1e5a 100644
--- a/invokeai/frontend/web/src/features/auth/components/UserManagement.tsx
+++ b/invokeai/frontend/web/src/features/auth/components/UserManagement.tsx
@@ -8,6 +8,8 @@ import {
   FormControl,
   FormErrorMessage,
   FormLabel,
+  Grid,
+  GridItem,
   Heading,
   IconButton,
   Input,
@@ -38,7 +40,15 @@ import { selectCurrentUser } from 'features/auth/store/authSlice';
 import type { ChangeEvent, FormEvent } from 'react';
 import { memo, useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { PiArrowLeftBold, PiEyeBold, PiEyeSlashBold, PiPencilBold, PiPlusBold, PiTrashBold } from 'react-icons/pi';
+import {
+  PiArrowLeftBold,
+  PiEyeBold,
+  PiEyeSlashBold,
+  PiLightningFill,
+  PiPencilBold,
+  PiPlusBold,
+  PiTrashBold,
+} from 'react-icons/pi';
 import { useNavigate } from 'react-router-dom';
 import type { UserDTO } from 'services/api/endpoints/auth';
 import {
@@ -68,6 +78,8 @@ const validatePasswordStrength = (
   return { isValid: true, message: '' };
 };
 
+const FORM_GRID_COLUMNS = '120px 1fr';
+
 // ---------------------------------------------------------------------------
 // Create / Edit user modal
 // ---------------------------------------------------------------------------
@@ -206,71 +218,100 @@ const UserFormModal = memo(({ isOpen, onClose, editUser }: UserFormModalProps) =
             <VStack spacing={4}>
               {!isEdit && (
                 <FormControl isRequired>
-                  <FormLabel>{t('auth.userManagement.email')}</FormLabel>
-                  <Input
-                    type="email"
-                    value={email}
-                    onChange={handleEmailChange}
-                    placeholder={t('auth.userManagement.emailPlaceholder')}
-                    autoComplete="off"
-                  />
+                  <Grid templateColumns={FORM_GRID_COLUMNS} gap={4} alignItems="start">
+                    <GridItem>
+                      <FormLabel textAlign="right" mb={0} pt={2}>
+                        {t('auth.userManagement.email')}
+                      </FormLabel>
+                    </GridItem>
+                    <GridItem>
+                      <Input
+                        type="email"
+                        value={email}
+                        onChange={handleEmailChange}
+                        placeholder={t('auth.userManagement.emailPlaceholder')}
+                        autoComplete="off"
+                      />
+                    </GridItem>
+                  </Grid>
                 </FormControl>
               )}
 
               <FormControl>
-                <FormLabel>{t('auth.userManagement.displayName')}</FormLabel>
-                <Input
-                  type="text"
-                  value={displayName}
-                  onChange={handleDisplayNameChange}
-                  placeholder={t('auth.userManagement.displayNamePlaceholder')}
-                />
+                <Grid templateColumns={FORM_GRID_COLUMNS} gap={4} alignItems="start">
+                  <GridItem>
+                    <FormLabel textAlign="right" mb={0} pt={2}>
+                      {t('auth.userManagement.displayName')}
+                    </FormLabel>
+                  </GridItem>
+                  <GridItem>
+                    <Input
+                      type="text"
+                      value={displayName}
+                      onChange={handleDisplayNameChange}
+                      placeholder={t('auth.userManagement.displayNamePlaceholder')}
+                    />
+                  </GridItem>
+                </Grid>
               </FormControl>
 
               <FormControl isInvalid={password.length > 0 && !passwordValidation.isValid} isRequired={!isEdit}>
-                <FormLabel>
-                  {isEdit ? t('auth.userManagement.newPassword') : t('auth.userManagement.password')}
-                </FormLabel>
-                <InputGroup>
-                  <Input
-                    type={showPassword ? 'text' : 'password'}
-                    value={password}
-                    onChange={handlePasswordChange}
-                    placeholder={
-                      isEdit
-                        ? t('auth.userManagement.newPasswordPlaceholder')
-                        : t('auth.userManagement.passwordPlaceholder')
-                    }
-                    autoComplete="new-password"
-                    pr="4.5rem"
-                  />
-                  <InputRightElement w="4.5rem">
-                    <Tooltip
-                      label={
-                        showPassword ? t('auth.userManagement.hidePassword') : t('auth.userManagement.showPassword')
-                      }
-                    >
-                      <IconButton
-                        aria-label={
-                          showPassword ? t('auth.userManagement.hidePassword') : t('auth.userManagement.showPassword')
+                <Grid templateColumns={FORM_GRID_COLUMNS} gap={4} alignItems="start">
+                  <GridItem>
+                    <FormLabel textAlign="right" mb={0} pt={2}>
+                      {isEdit ? t('auth.userManagement.newPassword') : t('auth.userManagement.password')}
+                    </FormLabel>
+                  </GridItem>
+                  <GridItem>
+                    <InputGroup>
+                      <Input
+                        type={showPassword ? 'text' : 'password'}
+                        value={password}
+                        onChange={handlePasswordChange}
+                        placeholder={
+                          isEdit
+                            ? t('auth.userManagement.newPasswordPlaceholder')
+                            : t('auth.userManagement.passwordPlaceholder')
                         }
-                        icon={showPassword ? <PiEyeSlashBold /> : <PiEyeBold />}
-                        variant="ghost"
-                        size="sm"
-                        onClick={toggleShowPassword}
-                        tabIndex={-1}
+                        autoComplete="new-password"
+                        pr="4.5rem"
                       />
-                    </Tooltip>
-                  </InputRightElement>
-                </InputGroup>
-                {password.length > 0 && !passwordValidation.isValid && (
-                  <FormErrorMessage>{passwordValidation.message}</FormErrorMessage>
-                )}
+                      <InputRightElement w="4.5rem">
+                        <Tooltip
+                          label={
+                            showPassword ? t('auth.userManagement.hidePassword') : t('auth.userManagement.showPassword')
+                          }
+                        >
+                          <IconButton
+                            aria-label={
+                              showPassword
+                                ? t('auth.userManagement.hidePassword')
+                                : t('auth.userManagement.showPassword')
+                            }
+                            icon={showPassword ? <PiEyeSlashBold /> : <PiEyeBold />}
+                            variant="ghost"
+                            size="sm"
+                            onClick={toggleShowPassword}
+                            tabIndex={-1}
+                          />
+                        </Tooltip>
+                      </InputRightElement>
+                    </InputGroup>
+                    {password.length > 0 && !passwordValidation.isValid && (
+                      <FormErrorMessage>{passwordValidation.message}</FormErrorMessage>
+                    )}
+                  </GridItem>
+                </Grid>
               </FormControl>
 
-              <Button size="sm" variant="ghost" onClick={handleGeneratePassword} alignSelf="flex-start">
-                {t('auth.userManagement.generatePassword')}
-              </Button>
+              <Grid templateColumns={FORM_GRID_COLUMNS} gap={4} w="full">
+                <GridItem />
+                <GridItem>
+                  <Button size="sm" variant="ghost" onClick={handleGeneratePassword} leftIcon={<PiLightningFill />}>
+                    {t('auth.userManagement.generatePassword')}
+                  </Button>
+                </GridItem>
+              </Grid>
 
               <FormControl display="flex" alignItems="center">
                 <FormLabel mb={0}>{t('auth.userManagement.isAdmin')}</FormLabel>
diff --git a/invokeai/frontend/web/src/features/auth/components/UserProfile.tsx b/invokeai/frontend/web/src/features/auth/components/UserProfile.tsx
index 32271924227..4504698f0ea 100644
--- a/invokeai/frontend/web/src/features/auth/components/UserProfile.tsx
+++ b/invokeai/frontend/web/src/features/auth/components/UserProfile.tsx
@@ -7,6 +7,8 @@ import {
   FormErrorMessage,
   FormHelperText,
   FormLabel,
+  Grid,
+  GridItem,
   Heading,
   IconButton,
   Input,
@@ -22,7 +24,7 @@ import { selectAuthToken, selectCurrentUser, setCredentials } from 'features/aut
 import type { ChangeEvent, FormEvent } from 'react';
 import { memo, useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { PiEyeBold, PiEyeSlashBold } from 'react-icons/pi';
+import { PiEyeBold, PiEyeSlashBold, PiLightningFill } from 'react-icons/pi';
 import { useNavigate } from 'react-router-dom';
 import { useLazyGeneratePasswordQuery, useUpdateCurrentUserMutation } from 'services/api/endpoints/auth';
 
@@ -45,6 +47,8 @@ const validatePasswordStrength = (
   return { isValid: true, message: '' };
 };
 
+const PASSWORD_GRID_COLUMNS = '180px 1fr';
+
 export const UserProfile = memo(() => {
   const { t } = useTranslation();
   const currentUser = useAppSelector(selectCurrentUser);
@@ -55,8 +59,10 @@ export const UserProfile = memo(() => {
   const [displayName, setDisplayName] = useState(currentUser?.display_name ?? '');
   const [currentPassword, setCurrentPassword] = useState('');
   const [newPassword, setNewPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
   const [showCurrentPassword, setShowCurrentPassword] = useState(false);
   const [showNewPassword, setShowNewPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
 
   const [updateCurrentUser, { isLoading }] = useUpdateCurrentUserMutation();
@@ -65,8 +71,9 @@ export const UserProfile = memo(() => {
   const newPasswordValidation = validatePasswordStrength(newPassword, t);
 
   const isPasswordChangeAttempted = newPassword.length > 0 || currentPassword.length > 0;
+  const passwordsMatch = newPassword.length > 0 && newPassword === confirmPassword;
   const isPasswordChangeValid =
-    !isPasswordChangeAttempted || (currentPassword.length > 0 && newPasswordValidation.isValid);
+    !isPasswordChangeAttempted || (currentPassword.length > 0 && newPasswordValidation.isValid && passwordsMatch);
 
   const handleCancel = useCallback(() => {
     navigate(-1);
@@ -76,7 +83,9 @@ export const UserProfile = memo(() => {
     try {
       const result = await triggerGeneratePassword().unwrap();
       setNewPassword(result.password);
+      setConfirmPassword(result.password);
       setShowNewPassword(true);
+      setShowConfirmPassword(true);
     } catch {
       // ignore
     }
@@ -90,6 +99,10 @@ export const UserProfile = memo(() => {
     setShowNewPassword((v) => !v);
   }, []);
 
+  const toggleShowConfirmPassword = useCallback(() => {
+    setShowConfirmPassword((v) => !v);
+  }, []);
+
   const handleDisplayNameChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
     setDisplayName(e.target.value);
   }, []);
@@ -102,6 +115,10 @@ export const UserProfile = memo(() => {
     setNewPassword(e.target.value);
   }, []);
 
+  const handleConfirmPasswordChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
+    setConfirmPassword(e.target.value);
+  }, []);
+
   const handleSubmit = useCallback(
     async (e: FormEvent) => {
       e.preventDefault();
@@ -201,80 +218,154 @@ export const UserProfile = memo(() => {
 
             {/* Current password */}
             <FormControl mb={4} isRequired={newPassword.length > 0}>
-              <FormLabel>{t('auth.profile.currentPassword')}</FormLabel>
-              <InputGroup>
-                <Input
-                  type={showCurrentPassword ? 'text' : 'password'}
-                  value={currentPassword}
-                  onChange={handleCurrentPasswordChange}
-                  placeholder={t('auth.profile.currentPasswordPlaceholder')}
-                  autoComplete="current-password"
-                  pr="3rem"
-                />
-                <InputRightElement>
-                  <Tooltip
-                    label={
-                      showCurrentPassword
-                        ? t('auth.userManagement.hidePassword')
-                        : t('auth.userManagement.showPassword')
-                    }
-                  >
-                    <IconButton
-                      aria-label={
-                        showCurrentPassword
-                          ? t('auth.userManagement.hidePassword')
-                          : t('auth.userManagement.showPassword')
-                      }
-                      icon={showCurrentPassword ? <PiEyeSlashBold /> : <PiEyeBold />}
-                      variant="ghost"
-                      size="sm"
-                      onClick={toggleShowCurrentPassword}
-                      tabIndex={-1}
+              <Grid templateColumns={PASSWORD_GRID_COLUMNS} gap={4} alignItems="start">
+                <GridItem>
+                  <FormLabel textAlign="right" mb={0} pt={2}>
+                    {t('auth.profile.currentPassword')}
+                  </FormLabel>
+                </GridItem>
+                <GridItem>
+                  <InputGroup>
+                    <Input
+                      type={showCurrentPassword ? 'text' : 'password'}
+                      value={currentPassword}
+                      onChange={handleCurrentPasswordChange}
+                      placeholder={t('auth.profile.currentPasswordPlaceholder')}
+                      autoComplete="current-password"
+                      pr="3rem"
                     />
-                  </Tooltip>
-                </InputRightElement>
-              </InputGroup>
+                    <InputRightElement>
+                      <Tooltip
+                        label={
+                          showCurrentPassword
+                            ? t('auth.userManagement.hidePassword')
+                            : t('auth.userManagement.showPassword')
+                        }
+                      >
+                        <IconButton
+                          aria-label={
+                            showCurrentPassword
+                              ? t('auth.userManagement.hidePassword')
+                              : t('auth.userManagement.showPassword')
+                          }
+                          icon={showCurrentPassword ? <PiEyeSlashBold /> : <PiEyeBold />}
+                          variant="ghost"
+                          size="sm"
+                          onClick={toggleShowCurrentPassword}
+                          tabIndex={-1}
+                        />
+                      </Tooltip>
+                    </InputRightElement>
+                  </InputGroup>
+                </GridItem>
+              </Grid>
             </FormControl>
 
             {/* New password */}
-            <FormControl isInvalid={newPassword.length > 0 && !newPasswordValidation.isValid} mb={2}>
-              <FormLabel>{t('auth.profile.newPassword')}</FormLabel>
-              <InputGroup>
-                <Input
-                  type={showNewPassword ? 'text' : 'password'}
-                  value={newPassword}
-                  onChange={handleNewPasswordChange}
-                  placeholder={t('auth.profile.newPasswordPlaceholder')}
-                  autoComplete="new-password"
-                  pr="3rem"
-                />
-                <InputRightElement>
-                  <Tooltip
-                    label={
-                      showNewPassword ? t('auth.userManagement.hidePassword') : t('auth.userManagement.showPassword')
-                    }
-                  >
-                    <IconButton
-                      aria-label={
-                        showNewPassword ? t('auth.userManagement.hidePassword') : t('auth.userManagement.showPassword')
-                      }
-                      icon={showNewPassword ? <PiEyeSlashBold /> : <PiEyeBold />}
-                      variant="ghost"
-                      size="sm"
-                      onClick={toggleShowNewPassword}
-                      tabIndex={-1}
+            <FormControl isInvalid={newPassword.length > 0 && !newPasswordValidation.isValid} mb={4}>
+              <Grid templateColumns={PASSWORD_GRID_COLUMNS} gap={4} alignItems="start">
+                <GridItem>
+                  <FormLabel textAlign="right" mb={0} pt={2}>
+                    {t('auth.profile.newPassword')}
+                  </FormLabel>
+                </GridItem>
+                <GridItem>
+                  <InputGroup>
+                    <Input
+                      type={showNewPassword ? 'text' : 'password'}
+                      value={newPassword}
+                      onChange={handleNewPasswordChange}
+                      placeholder={t('auth.profile.newPasswordPlaceholder')}
+                      autoComplete="new-password"
+                      pr="3rem"
                     />
-                  </Tooltip>
-                </InputRightElement>
-              </InputGroup>
-              {newPassword.length > 0 && !newPasswordValidation.isValid && (
-                <FormErrorMessage>{newPasswordValidation.message}</FormErrorMessage>
-              )}
+                    <InputRightElement>
+                      <Tooltip
+                        label={
+                          showNewPassword
+                            ? t('auth.userManagement.hidePassword')
+                            : t('auth.userManagement.showPassword')
+                        }
+                      >
+                        <IconButton
+                          aria-label={
+                            showNewPassword
+                              ? t('auth.userManagement.hidePassword')
+                              : t('auth.userManagement.showPassword')
+                          }
+                          icon={showNewPassword ? <PiEyeSlashBold /> : <PiEyeBold />}
+                          variant="ghost"
+                          size="sm"
+                          onClick={toggleShowNewPassword}
+                          tabIndex={-1}
+                        />
+                      </Tooltip>
+                    </InputRightElement>
+                  </InputGroup>
+                  {newPassword.length > 0 && !newPasswordValidation.isValid && (
+                    <FormErrorMessage>{newPasswordValidation.message}</FormErrorMessage>
+                  )}
+                </GridItem>
+              </Grid>
             </FormControl>
 
-            <Button size="sm" variant="ghost" onClick={handleGeneratePassword} mb={2}>
-              {t('auth.userManagement.generatePassword')}
-            </Button>
+            {/* Confirm new password */}
+            <FormControl isInvalid={confirmPassword.length > 0 && !passwordsMatch} mb={4}>
+              <Grid templateColumns={PASSWORD_GRID_COLUMNS} gap={4} alignItems="start">
+                <GridItem>
+                  <FormLabel textAlign="right" mb={0} pt={2}>
+                    {t('auth.profile.confirmPassword')}
+                  </FormLabel>
+                </GridItem>
+                <GridItem>
+                  <InputGroup>
+                    <Input
+                      type={showConfirmPassword ? 'text' : 'password'}
+                      value={confirmPassword}
+                      onChange={handleConfirmPasswordChange}
+                      placeholder={t('auth.profile.confirmPasswordPlaceholder')}
+                      autoComplete="new-password"
+                      pr="3rem"
+                    />
+                    <InputRightElement>
+                      <Tooltip
+                        label={
+                          showConfirmPassword
+                            ? t('auth.userManagement.hidePassword')
+                            : t('auth.userManagement.showPassword')
+                        }
+                      >
+                        <IconButton
+                          aria-label={
+                            showConfirmPassword
+                              ? t('auth.userManagement.hidePassword')
+                              : t('auth.userManagement.showPassword')
+                          }
+                          icon={showConfirmPassword ? <PiEyeSlashBold /> : <PiEyeBold />}
+                          variant="ghost"
+                          size="sm"
+                          onClick={toggleShowConfirmPassword}
+                          tabIndex={-1}
+                        />
+                      </Tooltip>
+                    </InputRightElement>
+                  </InputGroup>
+                  {confirmPassword.length > 0 && !passwordsMatch && (
+                    <FormErrorMessage>{t('auth.profile.passwordsDoNotMatch')}</FormErrorMessage>
+                  )}
+                </GridItem>
+              </Grid>
+            </FormControl>
+
+            {/* Generate password button – aligned with the input column */}
+            <Grid templateColumns={PASSWORD_GRID_COLUMNS} gap={4}>
+              <GridItem />
+              <GridItem>
+                <Button size="sm" variant="ghost" onClick={handleGeneratePassword} leftIcon={<PiLightningFill />}>
+                  {t('auth.userManagement.generatePassword')}
+                </Button>
+              </GridItem>
+            </Grid>
           </Box>
 
           {errorMessage && (