refactor(web): admin settings (#6177)

* refactor admin settings

* use slots to render buttons in simplified template settings

* remove more boilerplate by looping over components

* fix: onboarding

* fix: reset/reset to default

* remove lodash since it is unecessary

* chore: standardize padding and margins

---------

Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>

web/src/lib/components/admin-page/settings/oauth/oauth-settings.svelte

@@ -1,59 +1,29 @@
 <script lang="ts">
-  import {
-    notificationController,
-    NotificationType,
-  } from '$lib/components/shared-components/notification/notification';
-  import { handleError } from '$lib/utils/handle-error';
-  import { api, SystemConfigOAuthDto } from '@api';
+  import type { SystemConfigDto } from '@api';
   import { isEqual } from 'lodash-es';
   import { fade } from 'svelte/transition';
   import ConfirmDisableLogin from '../confirm-disable-login.svelte';
   import SettingButtonsRow from '../setting-buttons-row.svelte';
   import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte';
   import SettingSwitch from '../setting-switch.svelte';
-  import type { ResetOptions } from '$lib/utils/dipatch';
+  import { createEventDispatcher } from 'svelte';
+  import type { SettingsEventType } from '../admin-settings';
 
-  export let oauthConfig: SystemConfigOAuthDto;
+  export let savedConfig: SystemConfigDto;
+  export let defaultConfig: SystemConfigDto;
+  export let config: SystemConfigDto; // this is the config that is being edited
   export let disabled = false;
 
-  let savedConfig: SystemConfigOAuthDto;
-  let defaultConfig: SystemConfigOAuthDto;
-
-  const handleReset = (detail: ResetOptions) => {
-    if (detail.default) {
-      resetToDefault();
-    } else {
-      reset();
-    }
-  };
+  const dispatch = createEventDispatcher<SettingsEventType>();
 
   const handleToggleOverride = () => {
     // click runs before bind
-    const previouslyEnabled = oauthConfig.mobileOverrideEnabled;
-    if (!previouslyEnabled && !oauthConfig.mobileRedirectUri) {
-      oauthConfig.mobileRedirectUri = window.location.origin + '/api/oauth/mobile-redirect';
+    const previouslyEnabled = config.oauth.mobileOverrideEnabled;
+    if (!previouslyEnabled && !config.oauth.mobileRedirectUri) {
+      config.oauth.mobileRedirectUri = window.location.origin + '/api/oauth/mobile-redirect';
     }
   };
 
-  async function getConfigs() {
-    [savedConfig, defaultConfig] = await Promise.all([
-      api.systemConfigApi.getConfig().then((res) => res.data.oauth),
-      api.systemConfigApi.getConfigDefaults().then((res) => res.data.oauth),
-    ]);
-  }
-
-  async function reset() {
-    const { data: resetConfig } = await api.systemConfigApi.getConfig();
-
-    oauthConfig = { ...resetConfig.oauth };
-    savedConfig = { ...resetConfig.oauth };
-
-    notificationController.show({
-      message: 'Reset OAuth settings to the last saved settings',
-      type: NotificationType.Info,
-    });
-  }
-
   let isConfirmOpen = false;
   let handleConfirm: (value: boolean) => void;
 
@@ -67,47 +37,20 @@
     });
   };
 
-  async function saveSetting() {
-    try {
-      const { data: current } = await api.systemConfigApi.getConfig();
-
-      if (!current.passwordLogin.enabled && current.oauth.enabled && !oauthConfig.enabled) {
-        const confirmed = await openConfirmModal();
-        if (!confirmed) {
-          return;
-        }
+  const handleSave = async () => {
+    if (!savedConfig.passwordLogin.enabled && savedConfig.oauth.enabled && !config.oauth.enabled) {
+      const confirmed = await openConfirmModal();
+      if (!confirmed) {
+        return;
       }
-
-      if (!oauthConfig.mobileOverrideEnabled) {
-        oauthConfig.mobileRedirectUri = '';
-      }
-
-      const { data: updated } = await api.systemConfigApi.updateConfig({
-        systemConfigDto: {
-          ...current,
-          oauth: oauthConfig,
-        },
-      });
-
-      oauthConfig = { ...updated.oauth };
-      savedConfig = { ...updated.oauth };
-
-      notificationController.show({ message: 'OAuth settings saved', type: NotificationType.Info });
-    } catch (error) {
-      handleError(error, 'Unable to save OAuth settings');
     }
-  }
 
-  async function resetToDefault() {
-    const { data: defaultConfig } = await api.systemConfigApi.getConfigDefaults();
+    if (!config.oauth.mobileOverrideEnabled) {
+      config.oauth.mobileRedirectUri = '';
+    }
 
-    oauthConfig = { ...defaultConfig.oauth };
-
-    notificationController.show({
-      message: 'Reset OAuth settings to default',
-      type: NotificationType.Info,
-    });
-  }
+    dispatch('save', { oauth: config.oauth });
+  };
 </script>
 
 {#if isConfirmOpen}
@@ -115,115 +58,113 @@
 {/if}
 
 <div class="mt-2">
-  {#await getConfigs() then}
-    <div in:fade={{ duration: 500 }}>
-      <form autocomplete="off" on:submit|preventDefault class="mx-4 flex flex-col gap-4 py-4">
-        <p class="text-sm dark:text-immich-dark-fg">
-          For more details about this feature, refer to the <a
-            href="https://immich.app/docs/administration/oauth#mobile-redirect-uri"
-            class="underline"
-            target="_blank"
-            rel="noreferrer">docs</a
-          >.
-        </p>
+  <div in:fade={{ duration: 500 }}>
+    <form autocomplete="off" on:submit|preventDefault class="mx-4 flex flex-col gap-4 py-4">
+      <p class="text-sm dark:text-immich-dark-fg">
+        For more details about this feature, refer to the <a
+          href="https://immich.app/docs/administration/oauth#mobile-redirect-uri"
+          class="underline"
+          target="_blank"
+          rel="noreferrer">docs</a
+        >.
+      </p>
 
-        <SettingSwitch {disabled} title="ENABLE" bind:checked={oauthConfig.enabled} />
-        <hr />
+      <SettingSwitch {disabled} title="ENABLE" bind:checked={config.oauth.enabled} />
+      <hr />
+      <SettingInputField
+        inputType={SettingInputFieldType.TEXT}
+        label="ISSUER URL"
+        bind:value={config.oauth.issuerUrl}
+        required={true}
+        disabled={disabled || !config.oauth.enabled}
+        isEdited={!(config.oauth.issuerUrl == savedConfig.oauth.issuerUrl)}
+      />
+
+      <SettingInputField
+        inputType={SettingInputFieldType.TEXT}
+        label="CLIENT ID"
+        bind:value={config.oauth.clientId}
+        required={true}
+        disabled={disabled || !config.oauth.enabled}
+        isEdited={!(config.oauth.clientId == savedConfig.oauth.clientId)}
+      />
+
+      <SettingInputField
+        inputType={SettingInputFieldType.TEXT}
+        label="CLIENT SECRET"
+        bind:value={config.oauth.clientSecret}
+        required={true}
+        disabled={disabled || !config.oauth.enabled}
+        isEdited={!(config.oauth.clientSecret == savedConfig.oauth.clientSecret)}
+      />
+
+      <SettingInputField
+        inputType={SettingInputFieldType.TEXT}
+        label="SCOPE"
+        bind:value={config.oauth.scope}
+        required={true}
+        disabled={disabled || !config.oauth.enabled}
+        isEdited={!(config.oauth.scope == savedConfig.oauth.scope)}
+      />
+
+      <SettingInputField
+        inputType={SettingInputFieldType.TEXT}
+        label="STORAGE LABEL CLAIM"
+        desc="Automatically set the user's storage label to the value of this claim."
+        bind:value={config.oauth.storageLabelClaim}
+        required={true}
+        disabled={disabled || !config.oauth.storageLabelClaim}
+        isEdited={!(config.oauth.storageLabelClaim == savedConfig.oauth.storageLabelClaim)}
+      />
+
+      <SettingInputField
+        inputType={SettingInputFieldType.TEXT}
+        label="BUTTON TEXT"
+        bind:value={config.oauth.buttonText}
+        required={false}
+        disabled={disabled || !config.oauth.enabled}
+        isEdited={!(config.oauth.buttonText == savedConfig.oauth.buttonText)}
+      />
+
+      <SettingSwitch
+        title="AUTO REGISTER"
+        subtitle="Automatically register new users after signing in with OAuth"
+        bind:checked={config.oauth.autoRegister}
+        disabled={disabled || !config.oauth.enabled}
+      />
+
+      <SettingSwitch
+        title="AUTO LAUNCH"
+        subtitle="Start the OAuth login flow automatically upon navigating to the login page"
+        disabled={disabled || !config.oauth.enabled}
+        bind:checked={config.oauth.autoLaunch}
+      />
+
+      <SettingSwitch
+        title="MOBILE REDIRECT URI OVERRIDE"
+        subtitle="Enable when `app.immich:/` is an invalid redirect URI."
+        disabled={disabled || !config.oauth.enabled}
+        on:click={() => handleToggleOverride()}
+        bind:checked={config.oauth.mobileOverrideEnabled}
+      />
+
+      {#if config.oauth.mobileOverrideEnabled}
         <SettingInputField
           inputType={SettingInputFieldType.TEXT}
-          label="ISSUER URL"
-          bind:value={oauthConfig.issuerUrl}
+          label="MOBILE REDIRECT URI"
+          bind:value={config.oauth.mobileRedirectUri}
           required={true}
-          disabled={disabled || !oauthConfig.enabled}
-          isEdited={!(oauthConfig.issuerUrl == savedConfig.issuerUrl)}
+          disabled={disabled || !config.oauth.enabled}
+          isEdited={!(config.oauth.mobileRedirectUri == savedConfig.oauth.mobileRedirectUri)}
         />
+      {/if}
 
-        <SettingInputField
-          inputType={SettingInputFieldType.TEXT}
-          label="CLIENT ID"
-          bind:value={oauthConfig.clientId}
-          required={true}
-          disabled={disabled || !oauthConfig.enabled}
-          isEdited={!(oauthConfig.clientId == savedConfig.clientId)}
-        />
-
-        <SettingInputField
-          inputType={SettingInputFieldType.TEXT}
-          label="CLIENT SECRET"
-          bind:value={oauthConfig.clientSecret}
-          required={true}
-          disabled={disabled || !oauthConfig.enabled}
-          isEdited={!(oauthConfig.clientSecret == savedConfig.clientSecret)}
-        />
-
-        <SettingInputField
-          inputType={SettingInputFieldType.TEXT}
-          label="SCOPE"
-          bind:value={oauthConfig.scope}
-          required={true}
-          disabled={disabled || !oauthConfig.enabled}
-          isEdited={!(oauthConfig.scope == savedConfig.scope)}
-        />
-
-        <SettingInputField
-          inputType={SettingInputFieldType.TEXT}
-          label="STORAGE LABEL CLAIM"
-          desc="Automatically set the user's storage label to the value of this claim."
-          bind:value={oauthConfig.storageLabelClaim}
-          required={true}
-          disabled={disabled || !oauthConfig.storageLabelClaim}
-          isEdited={!(oauthConfig.storageLabelClaim == savedConfig.storageLabelClaim)}
-        />
-
-        <SettingInputField
-          inputType={SettingInputFieldType.TEXT}
-          label="BUTTON TEXT"
-          bind:value={oauthConfig.buttonText}
-          required={false}
-          disabled={disabled || !oauthConfig.enabled}
-          isEdited={!(oauthConfig.buttonText == savedConfig.buttonText)}
-        />
-
-        <SettingSwitch
-          title="AUTO REGISTER"
-          subtitle="Automatically register new users after signing in with OAuth"
-          bind:checked={oauthConfig.autoRegister}
-          disabled={disabled || !oauthConfig.enabled}
-        />
-
-        <SettingSwitch
-          title="AUTO LAUNCH"
-          subtitle="Start the OAuth login flow automatically upon navigating to the login page"
-          disabled={disabled || !oauthConfig.enabled}
-          bind:checked={oauthConfig.autoLaunch}
-        />
-
-        <SettingSwitch
-          title="MOBILE REDIRECT URI OVERRIDE"
-          subtitle="Enable when `app.immich:/` is an invalid redirect URI."
-          disabled={disabled || !oauthConfig.enabled}
-          on:click={() => handleToggleOverride()}
-          bind:checked={oauthConfig.mobileOverrideEnabled}
-        />
-
-        {#if oauthConfig.mobileOverrideEnabled}
-          <SettingInputField
-            inputType={SettingInputFieldType.TEXT}
-            label="MOBILE REDIRECT URI"
-            bind:value={oauthConfig.mobileRedirectUri}
-            required={true}
-            disabled={disabled || !oauthConfig.enabled}
-            isEdited={!(oauthConfig.mobileRedirectUri == savedConfig.mobileRedirectUri)}
-          />
-        {/if}
-
-        <SettingButtonsRow
-          on:reset={({ detail }) => handleReset(detail)}
-          on:save={saveSetting}
-          showResetToDefault={!isEqual(savedConfig, defaultConfig)}
-          {disabled}
-        />
-      </form>
-    </div>
-  {/await}
+      <SettingButtonsRow
+        on:reset={({ detail }) => dispatch('reset', { ...detail, configKeys: ['oauth'] })}
+        on:save={() => handleSave()}
+        showResetToDefault={!isEqual(savedConfig.oauth, defaultConfig.oauth)}
+        {disabled}
+      />
+    </form>
+  </div>
 </div>