[feature] Disable button when there're validation errors

AdminPanel/client/src/hooks/useFieldValidation.js

@@ -105,10 +105,19 @@ export const useFieldValidation = () => {
     });
   }, []);
 
+  /**
+   * Checks if there are any validation errors
+   * @returns {boolean} True if there are validation errors
+   */
+  const hasValidationErrors = useCallback(() => {
+    return Object.keys(fieldErrors).length > 0;
+  }, [fieldErrors]);
+
   return {
     validateField,
     getFieldError,
     clearFieldError,
+    hasValidationErrors,
     isLoading,
     error
   };

AdminPanel/client/src/pages/EmailConfig/EmailConfig.js

@@ -22,7 +22,7 @@ function EmailConfig() {
   const dispatch = useDispatch();
   const config = useSelector(selectConfig);
   const loading = useSelector(selectConfigLoading);
-  const { validateField, getFieldError } = useFieldValidation();
+  const { validateField, getFieldError, hasValidationErrors } = useFieldValidation();
   
   const [activeTab, setActiveTab] = useState('smtp-server');
   
@@ -266,7 +266,7 @@ function EmailConfig() {
       <div className={styles.actions}>
         <SaveButton 
           onClick={handleSave}
-          disabled={!hasChanges}
+          disabled={!hasChanges || hasValidationErrors()}
         >
           Save Changes
         </SaveButton>

AdminPanel/client/src/pages/Expiration/Expiration.js

@@ -20,7 +20,7 @@ function Expiration() {
   const dispatch = useDispatch();
   const config = useSelector(selectConfig);
   const loading = useSelector(selectConfigLoading);
-  const { validateField, getFieldError } = useFieldValidation();
+  const { validateField, getFieldError, hasValidationErrors } = useFieldValidation();
   
   const [activeTab, setActiveTab] = useState('garbage-collection');
   
@@ -228,7 +228,7 @@ function Expiration() {
       <div className={styles.actions}>
         <SaveButton 
           onClick={handleSave}
-          disabled={!hasChanges}
+          disabled={!hasChanges || hasValidationErrors()}
         >
           Save Changes
         </SaveButton>

AdminPanel/client/src/pages/FileLimits/FileLimits.js

@@ -14,7 +14,7 @@ function FileLimits() {
   const dispatch = useDispatch();
   const config = useSelector(selectConfig);
   const loading = useSelector(selectConfigLoading);
-  const { validateField, getFieldError } = useFieldValidation();
+  const { validateField, getFieldError, hasValidationErrors } = useFieldValidation();
   
   // Local state for form fields
   const [localSettings, setLocalSettings] = useState({
@@ -224,7 +224,7 @@ function FileLimits() {
       <div className={styles.actions}>
         <SaveButton 
           onClick={handleSave}
-          disabled={!hasChanges}
+          disabled={!hasChanges || hasValidationErrors()}
         >
           Save Changes
         </SaveButton>

AdminPanel/client/src/pages/RequestFiltering/RequestFiltering.js

@@ -13,7 +13,7 @@ import styles from './RequestFiltering.module.scss';
 function RequestFiltering() {
   const dispatch = useDispatch();
   const { config, loading } = useSelector(state => state.config);
-  const { validateField, getFieldError } = useFieldValidation();
+  const { validateField, getFieldError, hasValidationErrors } = useFieldValidation();
 
   const [localSettings, setLocalSettings] = useState({
     allowPrivateIPAddress: false,
@@ -128,7 +128,7 @@ function RequestFiltering() {
       <div className={styles.actions}>
         <SaveButton 
           onClick={handleSave}
-          disabled={!hasChanges}
+          disabled={!hasChanges || hasValidationErrors()}
         >
           Save Changes
         </SaveButton>

AdminPanel/client/src/pages/SecuritySettings/SecuritySettings.js

@@ -19,7 +19,7 @@ function SecuritySettings() {
   const dispatch = useDispatch();
   const config = useSelector(selectConfig);
   const loading = useSelector(selectConfigLoading);
-  const { validateField, getFieldError } = useFieldValidation();
+  const { validateField, getFieldError, hasValidationErrors } = useFieldValidation();
   
   const [activeTab, setActiveTab] = useState('ip-filtering');
   const [localRules, setLocalRules] = useState([]);
@@ -123,7 +123,7 @@ function SecuritySettings() {
       <div className={styles.actions}>
         <SaveButton 
           onClick={handleSave}
-          disabled={!hasChanges}
+          disabled={!hasChanges || hasValidationErrors()}
         >
           Save Changes
         </SaveButton>

AdminPanel/client/src/pages/WOPISettings/WOPISettings.js

@@ -15,7 +15,7 @@ function WOPISettings() {
   const config = useSelector(selectConfig);
   const schema = useSelector(selectSchema);
   const loading = useSelector(selectConfigLoading);
-  const { validateField, getFieldError } = useFieldValidation();
+  const { validateField, getFieldError, hasValidationErrors } = useFieldValidation();
 
   // Local state for WOPI enable setting
   const [localWopiEnabled, setLocalWopiEnabled] = useState(false);
@@ -87,7 +87,7 @@ function WOPISettings() {
       <div className={styles.actions}>
         <SaveButton 
           onClick={handleSave}
-          disabled={!hasChanges}
+          disabled={!hasChanges || hasValidationErrors()}
         >
           Save Changes
         </SaveButton>