refactor: user settings (#25166)

web/src/lib/components/user-settings-page/change-password-settings.svelte

@@ -1,10 +1,6 @@
 <script lang="ts">
-  import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
-  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
-  import { SettingInputFieldType } from '$lib/constants';
-  import { handleError } from '$lib/utils/handle-error';
-  import { changePassword } from '@immich/sdk';
-  import { Button, toastManager } from '@immich/ui';
+  import { handleChangePassword } from '$lib/services/user.service';
+  import { Button, Field, PasswordInput, Switch } from '@immich/ui';
   import { t } from 'svelte-i18n';
   import { fade } from 'svelte/transition';
 
@@ -13,67 +9,43 @@
   let confirmPassword = $state('');
   let invalidateSessions = $state(false);
 
-  const handleChangePassword = async () => {
-    try {
-      await changePassword({ changePasswordDto: { password, newPassword, invalidateSessions } });
-
-      toastManager.success($t('updated_password'));
-
+  const onsubmit = async (event: Event) => {
+    event.preventDefault();
+    const success = await handleChangePassword({ password, newPassword, invalidateSessions });
+    if (success) {
       password = '';
       newPassword = '';
       confirmPassword = '';
-    } catch (error) {
-      console.error('Error [user-profile] [changePassword]', error);
-      handleError(error, $t('errors.unable_to_change_password'));
     }
   };
-
-  const onsubmit = (event: Event) => {
-    event.preventDefault();
-  };
 </script>
 
 <section class="my-4">
   <div in:fade={{ duration: 500 }}>
     <form autocomplete="off" {onsubmit}>
       <div class="ms-4 mt-4 flex flex-col gap-4">
-        <SettingInputField
-          inputType={SettingInputFieldType.PASSWORD}
-          label={$t('password')}
-          bind:value={password}
-          required={true}
-          passwordAutocomplete="current-password"
-        />
+        <Field label={$t('password')} required>
+          <PasswordInput bind:value={password} autocomplete="current-password" />
+        </Field>
 
-        <SettingInputField
-          inputType={SettingInputFieldType.PASSWORD}
-          label={$t('new_password')}
-          bind:value={newPassword}
-          required={true}
-          passwordAutocomplete="new-password"
-        />
+        <Field label={$t('new_password')} required>
+          <PasswordInput bind:value={newPassword} autocomplete="new-password" />
+        </Field>
 
-        <SettingInputField
-          inputType={SettingInputFieldType.PASSWORD}
-          label={$t('confirm_password')}
-          bind:value={confirmPassword}
-          required={true}
-          passwordAutocomplete="new-password"
-        />
+        <Field label={$t('confirm_password')} required>
+          <PasswordInput bind:value={confirmPassword} autocomplete="new-password" />
+        </Field>
 
-        <SettingSwitch
-          title={$t('log_out_all_devices')}
-          subtitle={$t('change_password_form_log_out_description')}
-          bind:checked={invalidateSessions}
-        />
+        <Field label={$t('log_out_all_devices')} description={$t('change_password_form_log_out_description')} required>
+          <Switch bind:checked={invalidateSessions} />
+        </Field>
 
         <div class="flex justify-end">
           <Button
             shape="round"
             type="submit"
             size="small"
-            disabled={!(password && newPassword && newPassword === confirmPassword)}
-            onclick={() => handleChangePassword()}>{$t('save')}</Button
+            disabled={!(password && newPassword && newPassword === confirmPassword)}>{$t('save')}</Button
           >
         </div>
       </div>

web/src/lib/components/user-settings-page/feature-settings.svelte

@@ -1,13 +1,10 @@
 <script lang="ts">
   import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
-  import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
   import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
-  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
-  import { SettingInputFieldType } from '$lib/constants';
   import { preferences } from '$lib/stores/user.store';
   import { handleError } from '$lib/utils/handle-error';
   import { AssetOrder, updateMyPreferences } from '@immich/sdk';
-  import { Button, toastManager } from '@immich/ui';
+  import { Button, Field, NumberInput, Switch, toastManager } from '@immich/ui';
   import { t } from 'svelte-i18n';
   import { fade } from 'svelte/transition';
 
@@ -73,7 +70,7 @@
     <form autocomplete="off" {onsubmit}>
       <div class="ms-4 mt-4 flex flex-col">
         <SettingAccordion key="albums" title={$t('albums')} subtitle={$t('albums_feature_description')}>
-          <div class="ms-4 mt-6">
+          <div class="ms-4 mt-6 flex flex-col gap-4">
             <SettingSelect
               label={$t('albums_default_sort_order')}
               desc={$t('albums_default_sort_order_description')}
@@ -87,94 +84,86 @@
         </SettingAccordion>
 
         <SettingAccordion key="folders" title={$t('folders')} subtitle={$t('folders_feature_description')}>
-          <div class="ms-4 mt-6">
-            <SettingSwitch title={$t('enable')} bind:checked={foldersEnabled} />
-          </div>
+          <div class="ms-4 mt-6 flex flex-col gap-4">
+            <Field label={$t('enable')}>
+              <Switch bind:checked={foldersEnabled} />
+            </Field>
 
-          {#if foldersEnabled}
-            <div class="ms-4 mt-6">
-              <SettingSwitch
-                title={$t('sidebar')}
-                subtitle={$t('sidebar_display_description')}
-                bind:checked={foldersSidebar}
-              />
-            </div>
-          {/if}
+            {#if foldersEnabled}
+              <Field label={$t('sidebar')} description={$t('sidebar_display_description')}>
+                <Switch bind:checked={foldersSidebar} />
+              </Field>
+            {/if}
+          </div>
         </SettingAccordion>
 
         <SettingAccordion key="memories" title={$t('time_based_memories')} subtitle={$t('photos_from_previous_years')}>
-          <div class="ms-4 mt-6">
-            <SettingSwitch title={$t('enable')} bind:checked={memoriesEnabled} />
-          </div>
-          <div class="ms-4 mt-6">
-            <SettingInputField
-              inputType={SettingInputFieldType.NUMBER}
-              label={$t('duration')}
-              description={$t('time_based_memories_duration')}
-              bind:value={memoriesDuration}
-            />
+          <div class="ms-4 mt-6 flex flex-col gap-4">
+            <Field label={$t('enable')}>
+              <Switch bind:checked={memoriesEnabled} />
+            </Field>
+
+            <Field label={$t('duration')} description={$t('time_based_memories_duration')}>
+              <NumberInput bind:value={memoriesDuration} />
+            </Field>
           </div>
         </SettingAccordion>
 
         <SettingAccordion key="people" title={$t('people')} subtitle={$t('people_feature_description')}>
-          <div class="ms-4 mt-6">
-            <SettingSwitch title={$t('enable')} bind:checked={peopleEnabled} />
-          </div>
+          <div class="ms-4 mt-6 flex flex-col gap-4">
+            <Field label={$t('enable')}>
+              <Switch bind:checked={peopleEnabled} />
+            </Field>
 
-          {#if peopleEnabled}
-            <div class="ms-4 mt-6">
-              <SettingSwitch
-                title={$t('sidebar')}
-                subtitle={$t('sidebar_display_description')}
-                bind:checked={peopleSidebar}
-              />
-            </div>
-          {/if}
+            {#if peopleEnabled}
+              <Field label={$t('sidebar')} description={$t('sidebar_display_description')}>
+                <Switch bind:checked={peopleSidebar} />
+              </Field>
+            {/if}
+          </div>
         </SettingAccordion>
 
         <SettingAccordion key="rating" title={$t('rating')} subtitle={$t('rating_description')}>
-          <div class="ms-4 mt-6">
-            <SettingSwitch title={$t('enable')} bind:checked={ratingsEnabled} />
+          <div class="ms-4 mt-6 flex flex-col gap-4">
+            <Field label={$t('enable')}>
+              <Switch bind:checked={ratingsEnabled} />
+            </Field>
           </div>
         </SettingAccordion>
 
         <SettingAccordion key="shared-links" title={$t('shared_links')} subtitle={$t('shared_links_description')}>
-          <div class="ms-4 mt-6">
-            <SettingSwitch title={$t('enable')} bind:checked={sharedLinksEnabled} />
+          <div class="ms-4 mt-6 flex flex-col gap-4">
+            <Field label={$t('enable')}>
+              <Switch bind:checked={sharedLinksEnabled} />
+            </Field>
+
+            {#if sharedLinksEnabled}
+              <Field label={$t('sidebar')} description={$t('sidebar_display_description')}>
+                <Switch bind:checked={sharedLinkSidebar} />
+              </Field>
+            {/if}
           </div>
-          {#if sharedLinksEnabled}
-            <div class="ms-4 mt-6">
-              <SettingSwitch
-                title={$t('sidebar')}
-                subtitle={$t('sidebar_display_description')}
-                bind:checked={sharedLinkSidebar}
-              />
-            </div>
-          {/if}
         </SettingAccordion>
 
         <SettingAccordion key="tags" title={$t('tags')} subtitle={$t('tag_feature_description')}>
-          <div class="ms-4 mt-6">
-            <SettingSwitch title={$t('enable')} bind:checked={tagsEnabled} />
+          <div class="ms-4 mt-6 flex flex-col gap-4">
+            <Field label={$t('enable')}>
+              <Switch bind:checked={tagsEnabled} />
+            </Field>
+
+            {#if tagsEnabled}
+              <Field label={$t('sidebar')} description={$t('sidebar_display_description')}>
+                <Switch bind:checked={tagsSidebar} />
+              </Field>
+            {/if}
           </div>
-          {#if tagsEnabled}
-            <div class="ms-4 mt-6">
-              <SettingSwitch
-                title={$t('sidebar')}
-                subtitle={$t('sidebar_display_description')}
-                bind:checked={tagsSidebar}
-              />
-            </div>
-          {/if}
         </SettingAccordion>
 
         <SettingAccordion key="cast" title={$t('cast')} subtitle={$t('cast_description')}>
-          <div class="ms-4 mt-6">
-            <SettingSwitch
-              title={$t('gcast_enabled')}
-              subtitle={$t('gcast_enabled_description')}
-              bind:checked={gCastEnabled}
-            />
+          <div class="ms-4 mt-6 flex flex-col gap-4">
+            <Field label={$t('gcast_enabled')} description={$t('gcast_enabled_description')}>
+              <Switch bind:checked={gCastEnabled} />
+            </Field>
           </div>
         </SettingAccordion>
 

web/src/lib/components/user-settings-page/notifications-settings.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
-  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
   import { preferences } from '$lib/stores/user.store';
   import { handleError } from '$lib/utils/handle-error';
   import { updateMyPreferences } from '@immich/sdk';
-  import { Button, toastManager } from '@immich/ui';
+  import { Button, Field, Switch, toastManager } from '@immich/ui';
   import { t } from 'svelte-i18n';
   import { fade } from 'svelte/transition';
 
@@ -36,38 +35,29 @@
   const onsubmit = (event: Event) => {
     event.preventDefault();
   };
+
+  const disabled = $derived(!emailNotificationsEnabled);
 </script>
 
 <section class="my-4">
   <div in:fade={{ duration: 500 }}>
     <form autocomplete="off" {onsubmit}>
       <div class="ms-4 mt-4 flex flex-col gap-4">
-        <div class="ms-4">
-          <SettingSwitch
-            title={$t('notification_toggle_setting_description')}
-            bind:checked={emailNotificationsEnabled}
-          />
-        </div>
-        <div class="ms-4">
-          <SettingSwitch
-            title={$t('album_added')}
-            subtitle={$t('album_added_notification_setting_description')}
-            bind:checked={albumInviteNotificationEnabled}
-            disabled={!emailNotificationsEnabled}
-          />
-        </div>
-        <div class="ms-4">
-          <SettingSwitch
-            title={$t('album_updated')}
-            subtitle={$t('album_updated_setting_description')}
-            bind:checked={albumUpdateNotificationEnabled}
-            disabled={!emailNotificationsEnabled}
-          />
-        </div>
+        <Field label={$t('enable')} description={$t('notification_toggle_setting_description')}>
+          <Switch bind:checked={emailNotificationsEnabled} />
+        </Field>
 
-        <div class="flex justify-end">
-          <Button shape="round" type="submit" size="small" onclick={() => handleSave()}>{$t('save')}</Button>
-        </div>
+        <Field label={$t('album_added')} description={$t('album_added_notification_setting_description')} {disabled}>
+          <Switch bind:checked={albumInviteNotificationEnabled} />
+        </Field>
+
+        <Field label={$t('album_updated')} description={$t('album_updated_setting_description')} {disabled}>
+          <Switch bind:checked={albumUpdateNotificationEnabled} />
+        </Field>
+      </div>
+
+      <div class="flex justify-end mt-4">
+        <Button shape="round" type="submit" size="small" onclick={() => handleSave()}>{$t('save')}</Button>
       </div>
     </form>
   </div>

web/src/lib/components/user-settings-page/user-profile-settings.svelte

@@ -1,10 +1,8 @@
 <script lang="ts">
-  import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
-  import { SettingInputFieldType } from '$lib/constants';
   import { user } from '$lib/stores/user.store';
   import { handleError } from '$lib/utils/handle-error';
   import { updateMyUser } from '@immich/sdk';
-  import { Button, toastManager } from '@immich/ui';
+  import { Button, Field, Input, toastManager } from '@immich/ui';
   import { cloneDeep } from 'lodash-es';
   import { t } from 'svelte-i18n';
   import { createBubbler, preventDefault } from 'svelte/legacy';
@@ -36,29 +34,21 @@
   <div in:fade={{ duration: 500 }}>
     <form autocomplete="off" onsubmit={preventDefault(bubble('submit'))}>
       <div class="ms-4 mt-4 flex flex-col gap-4">
-        <SettingInputField
-          inputType={SettingInputFieldType.TEXT}
-          label={$t('user_id')}
-          bind:value={editedUser.id}
-          disabled={true}
-        />
+        <Field label={$t('user_id')} disabled>
+          <Input bind:value={editedUser.id} />
+        </Field>
 
-        <SettingInputField inputType={SettingInputFieldType.EMAIL} label={$t('email')} bind:value={editedUser.email} />
+        <Field label={$t('email')} required>
+          <Input type="email" bind:value={editedUser.email} />
+        </Field>
 
-        <SettingInputField
-          inputType={SettingInputFieldType.TEXT}
-          label={$t('name')}
-          bind:value={editedUser.name}
-          required={true}
-        />
+        <Field label={$t('name')} required>
+          <Input bind:value={editedUser.name} />
+        </Field>
 
-        <SettingInputField
-          inputType={SettingInputFieldType.TEXT}
-          label={$t('storage_label')}
-          disabled={true}
-          value={editedUser.storageLabel || ''}
-          required={false}
-        />
+        <Field label={$t('storage_label')} disabled>
+          <Input value={editedUser.storageLabel || ''} />
+        </Field>
 
         <div class="flex justify-end">
           <Button shape="round" type="submit" size="small" onclick={() => handleSaveProfile()}>{$t('save')}</Button>

web/src/lib/services/user.service.ts

@@ -1,7 +1,7 @@
 import { eventManager } from '$lib/managers/event-manager.svelte';
 import { handleError } from '$lib/utils/handle-error';
 import { getFormatter } from '$lib/utils/i18n';
-import { resetPinCode, type PinCodeResetDto } from '@immich/sdk';
+import { changePassword, resetPinCode, type ChangePasswordDto, type PinCodeResetDto } from '@immich/sdk';
 import { toastManager } from '@immich/ui';
 
 export const handleResetPinCode = async (dto: PinCodeResetDto) => {
@@ -16,3 +16,15 @@ export const handleResetPinCode = async (dto: PinCodeResetDto) => {
     handleError(error, $t('errors.failed_to_reset_pin_code'));
   }
 };
+
+export const handleChangePassword = async (dto: ChangePasswordDto) => {
+  const $t = await getFormatter();
+
+  try {
+    await changePassword({ changePasswordDto: dto });
+    toastManager.success($t('updated_password'));
+    return true;
+  } catch (error) {
+    handleError(error, $t('errors.unable_to_change_password'));
+  }
+};