refactor: authentication on public routes (#6765)

* refactor: authentication on public routes

* fix: remove public user

* pr feedback

* pr feedback

* pr feedback

* pr feedback

* remove unused method

* fix: tests

* fix: useless methods

* fix: tests

* pr feedback

* pr feedback

* chore: cleanup

---------

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

web/src/lib/components/forms/login-form.svelte

@@ -76,7 +76,6 @@
         dispatch('firstLogin');
         return;
       }
-
       dispatch('success');
       return;
     } catch (error) {

web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import Button from '$lib/components/elements/buttons/button.svelte';
   import { AppRoute } from '$lib/constants';
-  import { api, UserAvatarColor, type UserResponseDto } from '@api';
+  import { api, UserAvatarColor } from '@api';
   import { createEventDispatcher } from 'svelte';
   import Icon from '$lib/components/elements/icon.svelte';
   import { fade } from 'svelte/transition';
@@ -10,9 +10,7 @@
   import { notificationController, NotificationType } from '../notification/notification';
   import { handleError } from '$lib/utils/handle-error';
   import AvatarSelector from './avatar-selector.svelte';
-  import { setUser } from '$lib/stores/user.store';
-
-  export let user: UserResponseDto;
+  import { user } from '$lib/stores/user.store';
 
   let isShowSelectAvatar = false;
 
@@ -23,21 +21,20 @@
 
   const handleSaveProfile = async (color: UserAvatarColor) => {
     try {
-      if (user.profileImagePath !== '') {
+      if ($user.profileImagePath !== '') {
         await api.userApi.deleteProfileImage();
       }
 
       const { data } = await api.userApi.updateUser({
         updateUserDto: {
-          id: user.id,
-          email: user.email,
-          name: user.name,
+          id: $user.id,
+          email: $user.email,
+          name: $user.name,
           avatarColor: color,
         },
       });
 
-      user = data;
-      setUser(user);
+      $user = data;
       isShowSelectAvatar = false;
 
       notificationController.show({
@@ -60,8 +57,8 @@
     class="mx-4 mt-4 flex flex-col items-center justify-center gap-4 rounded-3xl bg-white p-4 dark:bg-immich-dark-primary/10"
   >
     <div class="relative">
-      {#key user}
-        <UserAvatar {user} size="xl" />
+      {#key $user}
+        <UserAvatar user={$user} size="xl" />
 
         <div
           class="absolute z-10 bottom-0 right-0 rounded-full w-6 h-6 border dark:border-immich-dark-primary bg-immich-primary"
@@ -77,9 +74,9 @@
     </div>
     <div>
       <p class="text-center text-lg font-medium text-immich-primary dark:text-immich-dark-primary">
-        {user.name}
+        {$user.name}
       </p>
-      <p class="text-sm text-gray-500 dark:text-immich-dark-fg">{user.email}</p>
+      <p class="text-sm text-gray-500 dark:text-immich-dark-fg">{$user.email}</p>
     </div>
 
     <a href={AppRoute.USER_SETTINGS} on:click={() => dispatch('close')}>
@@ -104,7 +101,7 @@
 </div>
 {#if isShowSelectAvatar}
   <AvatarSelector
-    {user}
+    user={$user}
     on:close={() => (isShowSelectAvatar = false)}
     on:choose={({ detail: color }) => handleSaveProfile(color)}
   />

web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte

@@ -146,7 +146,7 @@
           {/if}
 
           {#if shouldShowAccountInfoPanel}
-            <AccountInfoPanel user={$user} on:logout={logOut} />
+            <AccountInfoPanel on:logout={logOut} />
           {/if}
         </div>
       </section>

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

@@ -3,27 +3,28 @@
     notificationController,
     NotificationType,
   } from '$lib/components/shared-components/notification/notification';
-  import { api, type UserResponseDto } from '@api';
+  import { api } from '@api';
   import { fade } from 'svelte/transition';
   import { handleError } from '../../utils/handle-error';
   import SettingInputField, { SettingInputFieldType } from '../admin-page/settings/setting-input-field.svelte';
   import Button from '../elements/buttons/button.svelte';
-  import { setUser } from '$lib/stores/user.store';
+  import { user } from '$lib/stores/user.store';
+  import { cloneDeep } from 'lodash-es';
 
-  export let user: UserResponseDto;
+  let editedUser = cloneDeep($user);
 
   const handleSaveProfile = async () => {
     try {
       const { data } = await api.userApi.updateUser({
         updateUserDto: {
-          id: user.id,
-          email: user.email,
-          name: user.name,
+          id: editedUser.id,
+          email: editedUser.email,
+          name: editedUser.name,
         },
       });
 
-      Object.assign(user, data);
-      setUser(data);
+      Object.assign(editedUser, data);
+      $user = data;
 
       notificationController.show({
         message: 'Saved profile',
@@ -42,19 +43,24 @@
         <SettingInputField
           inputType={SettingInputFieldType.TEXT}
           label="USER ID"
-          bind:value={user.id}
+          bind:value={editedUser.id}
           disabled={true}
         />
 
-        <SettingInputField inputType={SettingInputFieldType.EMAIL} label="EMAIL" bind:value={user.email} />
+        <SettingInputField inputType={SettingInputFieldType.EMAIL} label="EMAIL" bind:value={editedUser.email} />
 
-        <SettingInputField inputType={SettingInputFieldType.TEXT} label="NAME" bind:value={user.name} required={true} />
+        <SettingInputField
+          inputType={SettingInputFieldType.TEXT}
+          label="NAME"
+          bind:value={editedUser.name}
+          required={true}
+        />
 
         <SettingInputField
           inputType={SettingInputFieldType.TEXT}
           label="STORAGE LABEL"
           disabled={true}
-          value={user.storageLabel || ''}
+          value={editedUser.storageLabel || ''}
           required={false}
         />
 
@@ -62,7 +68,7 @@
           inputType={SettingInputFieldType.TEXT}
           label="EXTERNAL PATH"
           disabled={true}
-          value={user.externalPath || ''}
+          value={editedUser.externalPath || ''}
           required={false}
         />
 

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

@@ -32,7 +32,7 @@
 </SettingAccordion>
 
 <SettingAccordion key="account" title="Account" subtitle="Manage your account">
-  <UserProfileSettings user={$user} />
+  <UserProfileSettings />
 </SettingAccordion>
 
 <SettingAccordion key="api-keys" title="API Keys" subtitle="Manage your API keys">