Show error in form on incorrect current password

web/messages/en/form.json

@@ -21,6 +21,7 @@
   "form_error_max": "Maximum value of {value} exceeded",
   "form_error_min": "Minimal value of {value} required",
   "form_error_code": "Incorrect code. Please check and try again.",
+  "form_error_current_password": "Current password is incorrect.",
   "form_error_invalid_key": "Invalid key format",
   "form_error_ip_invalid": "IP is invalid",
   "form_error_ip_reserved": "IP is not available",

web/src/shared/components/modals/ChangePasswordModal/ChangePasswordModal.tsx

@@ -1,12 +1,13 @@
 import './style.scss';
 import { useStore } from '@tanstack/react-form';
 import { useMutation } from '@tanstack/react-query';
+import type { AxiosError } from 'axios';
 import clsx from 'clsx';
 import { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
 import type z from 'zod';
 import { m } from '../../../../paraglide/messages';
 import api from '../../../api/api';
-import type { User } from '../../../api/types';
+import type { ApiError, User } from '../../../api/types';
 import { Icon } from '../../../defguard-ui/components/Icon';
 import type { IconKindValue } from '../../../defguard-ui/components/Icon/icon-types';
 import { Modal } from '../../../defguard-ui/components/Modal/Modal';
@@ -88,6 +89,18 @@ const ModalContent = ({ isAdmin, user }: { isAdmin: boolean; user: User }) => {
   const { mutateAsync: mutateUser } = useMutation({
     mutationFn: api.user.changePassword,
     onSuccess,
+    onError: (e: AxiosError<ApiError>) => {
+      const respCode = e.response?.status;
+      if (isPresent(respCode) && respCode !== 200) {
+        form.setErrorMap({
+          onSubmit: {
+            fields: {
+              current: m.form_error_current_password(),
+            },
+          },
+        });
+      }
+    },
     meta: {
       invalidate: [['me'], ['user', user.username], ['session-info']],
     },