frontend tweaks for password dialog

web/src/components/menu/AccountSettings.tsx

@@ -42,19 +42,37 @@ export default function AccountSettings({ className }: AccountSettingsProps) {
   const logoutUrl = config?.proxy?.logout_url || `${baseUrl}api/logout`;
 
   const [passwordDialogOpen, setPasswordDialogOpen] = useState(false);
+  const [passwordError, setPasswordError] = useState<string | null>(null);
 
   const Container = isDesktop ? DropdownMenu : Drawer;
   const Trigger = isDesktop ? DropdownMenuTrigger : DrawerTrigger;
   const Content = isDesktop ? DropdownMenuContent : DrawerContent;
   const MenuItem = isDesktop ? DropdownMenuItem : DrawerClose;
 
-  const handlePasswordSave = async (password: string) => {
+  const verifyOldPassword = async (oldPassword: string): Promise<boolean> => {
+    if (!profile?.username || profile.username === "anonymous") return false;
+    try {
+      const response = await axios.post("login", {
+        user: profile.username,
+        password: oldPassword,
+      });
+      return response.status === 200;
+    } catch (error) {
+      return false;
+    }
+  };
+
+  const handlePasswordSave = async (password: string, oldPassword?: string) => {
     if (!profile?.username || profile.username === "anonymous") return;
     axios
-      .put(`users/${profile.username}/password`, { password })
+      .put(`users/${profile.username}/password`, {
+        password,
+        old_password: oldPassword,
+      })
       .then((response) => {
         if (response.status === 200) {
           setPasswordDialogOpen(false);
+          setPasswordError(null);
           toast.success(t("users.toast.success.updatePassword"), {
             position: "top-center",
           });
@@ -65,6 +83,9 @@ export default function AccountSettings({ className }: AccountSettingsProps) {
           error.response?.data?.message ||
           error.response?.data?.detail ||
           "Unknown error";
+
+        setPasswordDialogOpen(false);
+        setPasswordError(null);
         toast.error(
           t("users.toast.error.setPasswordFailed", {
             errorMessage,
@@ -154,7 +175,12 @@ export default function AccountSettings({ className }: AccountSettingsProps) {
       <SetPasswordDialog
         show={passwordDialogOpen}
         onSave={handlePasswordSave}
-        onCancel={() => setPasswordDialogOpen(false)}
+        onCancel={() => {
+          setPasswordDialogOpen(false);
+          setPasswordError(null);
+        }}
+        onVerifyOldPassword={verifyOldPassword}
+        initialError={passwordError}
         username={profile?.username}
       />
     </Container>

web/src/components/menu/GeneralSettings.tsx

@@ -116,13 +116,32 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
   const SubItemContent = isDesktop ? DropdownMenuSubContent : DialogContent;
   const Portal = isDesktop ? DropdownMenuPortal : DialogPortal;
 
-  const handlePasswordSave = async (password: string) => {
+  const [passwordError, setPasswordError] = useState<string | null>(null);
+
+  const verifyOldPassword = async (oldPassword: string): Promise<boolean> => {
+    if (!profile?.username || profile.username === "anonymous") return false;
+    try {
+      const response = await axios.post("login", {
+        user: profile.username,
+        password: oldPassword,
+      });
+      return response.status === 200;
+    } catch (error) {
+      return false;
+    }
+  };
+
+  const handlePasswordSave = async (password: string, oldPassword?: string) => {
     if (!profile?.username || profile.username === "anonymous") return;
     axios
-      .put(`users/${profile.username}/password`, { password })
+      .put(`users/${profile.username}/password`, {
+        password,
+        old_password: oldPassword,
+      })
       .then((response) => {
         if (response.status === 200) {
           setPasswordDialogOpen(false);
+          setPasswordError(null);
           toast.success(
             t("users.toast.success.updatePassword", {
               ns: "views/settings",
@@ -138,6 +157,9 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
           error.response?.data?.message ||
           error.response?.data?.detail ||
           "Unknown error";
+
+        setPasswordDialogOpen(false);
+        setPasswordError(null);
         toast.error(
           t("users.toast.error.setPasswordFailed", {
             ns: "views/settings",
@@ -554,7 +576,12 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
       <SetPasswordDialog
         show={passwordDialogOpen}
         onSave={handlePasswordSave}
-        onCancel={() => setPasswordDialogOpen(false)}
+        onCancel={() => {
+          setPasswordDialogOpen(false);
+          setPasswordError(null);
+        }}
+        onVerifyOldPassword={verifyOldPassword}
+        initialError={passwordError}
         username={profile?.username}
       />
     </>

web/src/views/settings/AuthenticationView.tsx

@@ -57,6 +57,7 @@ export default function AuthenticationView({
   const [showCreateRole, setShowCreateRole] = useState(false);
   const [showEditRole, setShowEditRole] = useState(false);
   const [showDeleteRole, setShowDeleteRole] = useState(false);
+  const [passwordError, setPasswordError] = useState<string | null>(null);
 
   const [selectedUser, setSelectedUser] = useState<string>();
   const [selectedUserRole, setSelectedUserRole] = useState<string>();
@@ -69,13 +70,30 @@ export default function AuthenticationView({
     document.title = t("documentTitle.authentication");
   }, [t]);
 
+  const onVerifyOldPassword = useCallback(
+    async (oldPassword: string): Promise<boolean> => {
+      if (!selectedUser) return false;
+      try {
+        const response = await axios.post("login", {
+          user: selectedUser,
+          password: oldPassword,
+        });
+        return response.status === 200;
+      } catch (error) {
+        return false;
+      }
+    },
+    [selectedUser],
+  );
+
   const onSavePassword = useCallback(
-    (user: string, password: string) => {
+    (user: string, password: string, oldPassword?: string) => {
       axios
-        .put(`users/${user}/password`, { password })
+        .put(`users/${user}/password`, { password, old_password: oldPassword })
         .then((response) => {
           if (response.status === 200) {
             setShowSetPassword(false);
+            setPasswordError(null);
             toast.success(t("users.toast.success.updatePassword"), {
               position: "top-center",
             });
@@ -86,6 +104,10 @@ export default function AuthenticationView({
             error.response?.data?.message ||
             error.response?.data?.detail ||
             "Unknown error";
+
+          // Close dialog and show toast for any errors
+          setShowSetPassword(false);
+          setPasswordError(null);
           toast.error(
             t("users.toast.error.setPasswordFailed", {
               errorMessage,
@@ -563,8 +585,15 @@ export default function AuthenticationView({
       </div>
       <SetPasswordDialog
         show={showSetPassword}
-        onCancel={() => setShowSetPassword(false)}
-        onSave={(password) => onSavePassword(selectedUser!, password)}
+        onCancel={() => {
+          setShowSetPassword(false);
+          setPasswordError(null);
+        }}
+        onVerifyOldPassword={onVerifyOldPassword}
+        initialError={passwordError}
+        onSave={(password, oldPassword) =>
+          onSavePassword(selectedUser!, password, oldPassword)
+        }
       />
       <DeleteUserDialog
         show={showDelete}