Unable to delete configuration for ldap and smtp when it is configured

web/src/i18n/en/index.ts

@@ -920,6 +920,7 @@ const en: BaseTranslation = {
           ldap_group_member_attr: 'Group Member Attribute',
           ldap_group_obj_class: 'Group Object Class',
         },
+        delete: 'Delete configuration',
       },
       test: {
         title: 'Test LDAP Connection',
@@ -1133,6 +1134,7 @@ const en: BaseTranslation = {
           submit: 'Save changes',
         },
       },
+      delete: 'Delete configuration',
       testForm: {
         title: 'Send test email',
         fields: {

web/src/i18n/i18n-types.ts

@@ -2283,6 +2283,10 @@ type RootTranslation = {
 					 */
 					ldap_group_obj_class: string
 				}
+				/**
+				 * D​e​l​e​t​e​ ​c​o​n​f​i​g​u​r​a​t​i​o​n
+				 */
+				'delete': string
 			}
 			test: {
 				/**
@@ -2724,6 +2728,10 @@ type RootTranslation = {
 					submit: string
 				}
 			}
+			/**
+			 * D​e​l​e​t​e​ ​c​o​n​f​i​g​u​r​a​t​i​o​n
+			 */
+			'delete': string
 			testForm: {
 				/**
 				 * S​e​n​d​ ​t​e​s​t​ ​e​m​a​i​l
@@ -6456,6 +6464,10 @@ export type TranslationFunctions = {
 					 */
 					ldap_group_obj_class: () => LocalizedString
 				}
+				/**
+				 * Delete configuration
+				 */
+				'delete': () => LocalizedString
 			}
 			test: {
 				/**
@@ -6894,6 +6906,10 @@ export type TranslationFunctions = {
 					submit: () => LocalizedString
 				}
 			}
+			/**
+			 * Delete configuration
+			 */
+			'delete': () => LocalizedString
 			testForm: {
 				/**
 				 * Send test email

web/src/i18n/pl/index.ts

@@ -907,6 +907,7 @@ Uwaga, podane tutaj konfiguracje nie posiadają klucza prywatnego. Musisz uzupe
           ldap_group_member_attr: 'Group Member Attribute',
           ldap_group_obj_class: 'Group Object Class',
         },
+        delete: 'Usuń konfigurację',
       },
       test: {
         title: 'Test połączenia LDAP',
@@ -1119,6 +1120,7 @@ Uwaga, podane tutaj konfiguracje nie posiadają klucza prywatnego. Musisz uzupe
           submit: 'Zapisz zmiany',
         },
       },
+      delete: 'Usuń konfigurację',
       testForm: {
         title: 'Wyślij testowy e-mail',
         fields: {

web/src/pages/settings/components/LdapSettings/components/LdapSettingsForm.tsx

@@ -1,6 +1,6 @@
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { useMemo, useRef } from 'react';
+import { useCallback, useMemo, useRef } from 'react';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { z } from 'zod';
 
@@ -39,6 +39,10 @@ export const LdapSettingsForm = () => {
       queryClient.invalidateQueries([QueryKeys.FETCH_SETTINGS]);
       toaster.success(LL.settingsPage.messages.editSuccess());
     },
+    onError: (error) => {
+      toaster.error(LL.messages.error());
+      console.error(error);
+    },
   });
 
   const schema = useMemo(
@@ -79,7 +83,24 @@ export const LdapSettingsForm = () => {
     [settings],
   );
 
-  const { handleSubmit, control } = useForm<FormFields>({
+  const emptyValues: SettingsLDAP = useMemo(
+    () => ({
+      ldap_group_search_base: '',
+      ldap_group_member_attr: '',
+      ldap_group_obj_class: '',
+      ldap_username_attr: '',
+      ldap_user_search_base: '',
+      ldap_user_obj_class: '',
+      ldap_url: '',
+      ldap_member_attr: '',
+      ldap_groupname_attr: '',
+      ldap_bind_password: '',
+      ldap_bind_username: '',
+    }),
+    [],
+  );
+
+  const { handleSubmit, reset, control } = useForm<FormFields>({
     resolver: zodResolver(schema),
     defaultValues,
     mode: 'all',
@@ -88,19 +109,36 @@ export const LdapSettingsForm = () => {
   const handleValidSubmit: SubmitHandler<FormFields> = (data) => {
     mutate(data);
   };
+
+  const handleDeleteSubmit = useCallback(() => {
+    mutate(emptyValues);
+    reset(emptyValues);
+  }, [mutate, emptyValues, reset]);
+
   return (
     <section id="ldap-settings">
       <header>
         <h2>{localLL.title()}</h2>
-        <Button
-          size={ButtonSize.SMALL}
-          styleVariant={ButtonStyleVariant.SAVE}
-          text={LL.common.controls.saveChanges()}
-          type="submit"
-          loading={isLoading}
-          icon={<IconCheckmarkWhite />}
-          onClick={() => submitRef.current?.click()}
-        />
+        <div className="controls">
+          <Button
+            size={ButtonSize.SMALL}
+            styleVariant={ButtonStyleVariant.SAVE}
+            text={LL.common.controls.saveChanges()}
+            type="submit"
+            loading={isLoading}
+            icon={<IconCheckmarkWhite />}
+            onClick={() => submitRef.current?.click()}
+          />
+          <Button
+            text={localLL.form.delete()}
+            size={ButtonSize.SMALL}
+            styleVariant={ButtonStyleVariant.CONFIRM}
+            loading={isLoading}
+            onClick={() => {
+              handleDeleteSubmit();
+            }}
+          />
+        </div>
       </header>
       <form id="ldap-settings-form" onSubmit={handleSubmit(handleValidSubmit)}>
         <FormInput

web/src/pages/settings/components/LdapSettings/style.scss

@@ -0,0 +1,14 @@
+@use '@scssutils' as *;
+
+#ldap-settings {
+  & > header {
+    & > .btn {
+      margin-left: 100px;
+    }
+
+    & > .controls {
+      display: flex;
+      gap: 10px;
+    }
+  }
+}

web/src/pages/settings/components/SmtpSettings/components/SmtpSettingsForm/SmtpSettingsForm.tsx

@@ -25,6 +25,7 @@ import useApi from '../../../../../../shared/hooks/useApi';
 import { useToaster } from '../../../../../../shared/hooks/useToaster';
 import { patternValidEmail } from '../../../../../../shared/patterns';
 import { QueryKeys } from '../../../../../../shared/queries';
+import { SettingsSMTP } from '../../../../../../shared/types';
 import { validateIpOrDomain } from '../../../../../../shared/validators';
 import { useSettingsPage } from '../../../../hooks/useSettingsPage';
 
@@ -39,6 +40,7 @@ type FormFields = {
 
 export const SmtpSettingsForm = () => {
   const { LL } = useI18nContext();
+  const localLL = LL.settingsPage.smtp;
 
   const settings = useSettingsPage((state) => state.settings);
 
@@ -133,7 +135,19 @@ export const SmtpSettingsForm = () => {
     return res;
   }, [settings, encryptionOptions]);
 
-  const { control, handleSubmit } = useForm<FormFields>({
+  const emptyValues: SettingsSMTP = useMemo(
+    () => ({
+      smtp_server: '',
+      smtp_port: 587,
+      smtp_password: '',
+      smtp_sender: '',
+      smtp_user: '',
+      smtp_encryption: encryptionOptions[1].value,
+    }),
+    [encryptionOptions],
+  );
+
+  const { control, reset, handleSubmit } = useForm<FormFields>({
     defaultValues,
     mode: 'all',
     resolver: zodResolver(zodSchema),
@@ -143,62 +157,76 @@ export const SmtpSettingsForm = () => {
     mutate(data);
   };
 
+  const handleDeleteSubmit = useCallback(() => {
+    mutate(emptyValues);
+    reset(emptyValues);
+  }, [mutate, emptyValues, reset]);
+
   if (!settings) return null;
 
   return (
     <section id="smtp-settings">
       <header>
-        <h2>{LL.settingsPage.smtp.form.title()}</h2>
-        <Helper>{parse(LL.settingsPage.smtp.helper())}</Helper>
-        <Button
-          form="smtp-form"
-          text={LL.settingsPage.smtp.form.controls.submit()}
-          icon={<IconCheckmarkWhite />}
-          size={ButtonSize.SMALL}
-          styleVariant={ButtonStyleVariant.SAVE}
-          loading={isLoading}
-          type="submit"
-        />
+        <h2>{localLL.form.title()}</h2>
+        <Helper>{parse(localLL.helper())}</Helper>
+        <div className="controls">
+          <Button
+            form="smtp-form"
+            text={localLL.form.controls.submit()}
+            icon={<IconCheckmarkWhite />}
+            size={ButtonSize.SMALL}
+            styleVariant={ButtonStyleVariant.SAVE}
+            loading={isLoading}
+            type="submit"
+          />
+          <Button
+            text={localLL.delete()}
+            size={ButtonSize.SMALL}
+            styleVariant={ButtonStyleVariant.CONFIRM}
+            loading={isLoading}
+            onClick={() => {
+              handleDeleteSubmit();
+            }}
+          />
+        </div>
       </header>
       <form id="smtp-form" onSubmit={handleSubmit(onSubmit)}>
         <FormInput
-          label={LL.settingsPage.smtp.form.fields.server.label()}
+          label={localLL.form.fields.server.label()}
           controller={{ control, name: 'smtp_server' }}
-          placeholder={LL.settingsPage.smtp.form.fields.server.placeholder()}
+          placeholder={localLL.form.fields.server.placeholder()}
           required
         />
         <FormInput
-          label={LL.settingsPage.smtp.form.fields.port.label()}
+          label={localLL.form.fields.port.label()}
           controller={{ control, name: 'smtp_port' }}
-          placeholder={LL.settingsPage.smtp.form.fields.port.placeholder()}
+          placeholder={localLL.form.fields.port.placeholder()}
           type="number"
           required
         />
         <FormInput
-          label={LL.settingsPage.smtp.form.fields.user.label()}
+          label={localLL.form.fields.user.label()}
           controller={{ control, name: 'smtp_user' }}
-          placeholder={LL.settingsPage.smtp.form.fields.user.placeholder()}
+          placeholder={localLL.form.fields.user.placeholder()}
           required
         />
         <FormInput
-          label={LL.settingsPage.smtp.form.fields.password.label()}
+          label={localLL.form.fields.password.label()}
           controller={{ control, name: 'smtp_password' }}
-          placeholder={LL.settingsPage.smtp.form.fields.password.placeholder()}
+          placeholder={localLL.form.fields.password.placeholder()}
           type="password"
           required
         />
         <FormInput
-          labelExtras={
-            <Helper>{parse(LL.settingsPage.smtp.form.fields.sender.helper())}</Helper>
-          }
-          label={LL.settingsPage.smtp.form.fields.sender.label()}
+          labelExtras={<Helper>{parse(localLL.form.fields.sender.helper())}</Helper>}
+          label={localLL.form.fields.sender.label()}
           controller={{ control, name: 'smtp_sender' }}
-          placeholder={LL.settingsPage.smtp.form.fields.sender.placeholder()}
+          placeholder={localLL.form.fields.sender.placeholder()}
           required
         />
         <FormSelect
           data-testid="smtp-encryption-select"
-          label={LL.settingsPage.smtp.form.fields.encryption.label()}
+          label={localLL.form.fields.encryption.label()}
           renderSelected={renderSelectedEncryption}
           options={encryptionOptions}
           controller={{ control, name: 'smtp_encryption' }}

web/src/pages/settings/components/SmtpSettings/components/SmtpSettingsForm/style.scss

@@ -5,6 +5,11 @@
     & > .btn {
       margin-left: auto;
     }
+
+    & > .controls {
+      display: flex;
+      gap: 10px;
+    }
   }
   form {
     width: 100%;