refactor(web): use new open api client (#7097)

* refactor(web): use new open api client

* refactor: remove activity api

* refactor: trash, oauth, and partner apis

* refactor: job api

* refactor: face, library, system config

* refactor: user api

* refactor: album api

web/src/lib/components/forms/admin-registration-form.svelte

@@ -1,27 +1,28 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
   import { AppRoute } from '$lib/constants';
-  import { api } from '@api';
+  import { signUpAdmin } from '@immich/sdk';
+  import { handleError } from '../../utils/handle-error';
   import Button from '../elements/buttons/button.svelte';
 
-  let error: string;
+  let errorMessage: string;
   let password = '';
   let confirmPassowrd = '';
   let canRegister = false;
 
   $: {
     if (password !== confirmPassowrd && confirmPassowrd.length > 0) {
-      error = 'Password does not match';
+      errorMessage = 'Password does not match';
       canRegister = false;
     } else {
-      error = '';
+      errorMessage = '';
       canRegister = true;
     }
   }
 
   async function registerAdmin(event: SubmitEvent & { currentTarget: HTMLFormElement }) {
     if (canRegister) {
-      error = '';
+      errorMessage = '';
 
       const form = new FormData(event.currentTarget);
 
@@ -29,20 +30,19 @@
       const password = form.get('password');
       const name = form.get('name');
 
-      const { status } = await api.authenticationApi.signUpAdmin({
-        signUpDto: {
-          email: String(email),
-          password: String(password),
-          name: String(name),
-        },
-      });
+      try {
+        await signUpAdmin({
+          signUpDto: {
+            email: String(email),
+            password: String(password),
+            name: String(name),
+          },
+        });
 
-      if (status === 201) {
         await goto(AppRoute.AUTH_LOGIN);
-        return;
-      } else {
-        error = 'Error create admin account';
-        return;
+      } catch (error) {
+        handleError(error, 'Unable to create admin account');
+        errorMessage = 'Error create admin account';
       }
     }
   }
@@ -85,8 +85,8 @@
     <input class="immich-form-input" id="name" name="name" type="text" autocomplete="name" required />
   </div>
 
-  {#if error}
-    <p class="text-red-400">{error}</p>
+  {#if errorMessage}
+    <p class="text-red-400">{errorMessage}</p>
   {/if}
 
   <div class="my-5 flex w-full">

web/src/lib/components/forms/change-password-form.svelte

@@ -1,24 +1,24 @@
 <script lang="ts">
-  import { api, type UserResponseDto } from '@api';
   import { createEventDispatcher } from 'svelte';
   import Button from '../elements/buttons/button.svelte';
+  import { updateUser, type UserResponseDto } from '@immich/sdk';
 
   export let user: UserResponseDto;
-  let error: string;
+  let errorMessage: string;
   let success: string;
 
   let password = '';
-  let confirmPassowrd = '';
+  let passwordConfirm = '';
 
-  let changeChagePassword = false;
+  let valid = false;
 
   $: {
-    if (password !== confirmPassowrd && confirmPassowrd.length > 0) {
-      error = 'Password does not match';
-      changeChagePassword = false;
+    if (password !== passwordConfirm && passwordConfirm.length > 0) {
+      errorMessage = 'Password does not match';
+      valid = false;
     } else {
-      error = '';
-      changeChagePassword = true;
+      errorMessage = '';
+      valid = true;
     }
   }
 
@@ -27,10 +27,10 @@
   }>();
 
   async function changePassword() {
-    if (changeChagePassword) {
-      error = '';
+    if (valid) {
+      errorMessage = '';
 
-      const { status } = await api.userApi.updateUser({
+      await updateUser({
         updateUserDto: {
           id: user.id,
           password: String(password),
@@ -38,12 +38,7 @@
         },
       });
 
-      if (status === 200) {
-        dispatch('success');
-        return;
-      } else {
-        console.error('Error changing password');
-      }
+      dispatch('success');
     }
   }
 </script>
@@ -71,12 +66,12 @@
       type="password"
       autocomplete="current-password"
       required
-      bind:value={confirmPassowrd}
+      bind:value={passwordConfirm}
     />
   </div>
 
-  {#if error}
-    <p class="text-sm text-red-400">{error}</p>
+  {#if errorMessage}
+    <p class="text-sm text-red-400">{errorMessage}</p>
   {/if}
 
   {#if success}

web/src/lib/components/forms/create-user-form.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
-  import { api } from '@api';
-  import { createEventDispatcher } from 'svelte';
-  import ImmichLogo from '../shared-components/immich-logo.svelte';
-  import { notificationController, NotificationType } from '../shared-components/notification/notification';
-  import Button from '../elements/buttons/button.svelte';
-  import { convertToBytes } from '$lib/utils/byte-converter';
   import { serverInfo } from '$lib/stores/server-info.store';
+  import { convertToBytes } from '$lib/utils/byte-converter';
+  import { handleError } from '$lib/utils/handle-error';
+  import { createUser } from '@immich/sdk';
+  import { createEventDispatcher } from 'svelte';
+  import Button from '../elements/buttons/button.svelte';
+  import ImmichLogo from '../shared-components/immich-logo.svelte';
 
   let error: string;
   let success: string;
@@ -49,7 +49,7 @@
       const quotaSize = form.get('quotaSize');
 
       try {
-        const { status } = await api.userApi.createUser({
+        await createUser({
           createUserDto: {
             email: String(email),
             password: String(password),
@@ -58,26 +58,15 @@
           },
         });
 
-        if (status === 201) {
-          success = 'New user created';
+        success = 'New user created';
 
-          dispatch('submit');
+        dispatch('submit');
 
-          isCreatingUser = false;
-          return;
-        } else {
-          error = 'Error create user account';
-          isCreatingUser = false;
-        }
+        return;
       } catch (error) {
+        handleError(error, 'Unable to create user');
+      } finally {
         isCreatingUser = false;
-
-        console.log('[ERROR] registerUser', error);
-
-        notificationController.show({
-          message: `Error create new user, check console for more detail`,
-          type: NotificationType.Error,
-        });
       }
     }
   }

web/src/lib/components/forms/edit-album-form.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-  import { type AlbumResponseDto, api } from '@api';
-  import { createEventDispatcher } from 'svelte';
   import Icon from '$lib/components/elements/icon.svelte';
-  import Button from '../elements/buttons/button.svelte';
-  import { handleError } from '../../utils/handle-error';
+  import { updateAlbumInfo, type AlbumResponseDto } from '@immich/sdk';
   import { mdiImageAlbum } from '@mdi/js';
+  import { createEventDispatcher } from 'svelte';
+  import { handleError } from '../../utils/handle-error';
+  import Button from '../elements/buttons/button.svelte';
 
   export let album: AlbumResponseDto;
 
@@ -15,7 +15,7 @@
 
   const editUser = async () => {
     try {
-      const { status } = await api.albumApi.updateAlbumInfo({
+      await updateAlbumInfo({
         id: album.id,
         updateAlbumDto: {
           albumName: album.albumName,
@@ -23,9 +23,7 @@
         },
       });
 
-      if (status === 200) {
-        dispatch('editSuccess');
-      }
+      dispatch('editSuccess');
     } catch (error) {
       handleError(error, 'Unable to update user');
     }

web/src/lib/components/forms/edit-user-form.svelte

@@ -1,16 +1,15 @@
 <script lang="ts">
-  import { api, type UserResponseDto } from '@api';
-  import { createEventDispatcher } from 'svelte';
-  import { notificationController, NotificationType } from '../shared-components/notification/notification';
-  import Button from '../elements/buttons/button.svelte';
-  import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
   import Icon from '$lib/components/elements/icon.svelte';
-  import { mdiAccountEditOutline, mdiClose } from '@mdi/js';
+  import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
   import { AppRoute } from '$lib/constants';
-  import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
-  import { handleError } from '$lib/utils/handle-error';
-  import { convertFromBytes, convertToBytes } from '$lib/utils/byte-converter';
   import { serverInfo } from '$lib/stores/server-info.store';
+  import { convertFromBytes, convertToBytes } from '$lib/utils/byte-converter';
+  import { handleError } from '$lib/utils/handle-error';
+  import { updateUser, type UserResponseDto } from '@immich/sdk';
+  import { mdiAccountEditOutline, mdiClose } from '@mdi/js';
+  import { createEventDispatcher } from 'svelte';
+  import Button from '../elements/buttons/button.svelte';
+  import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
 
   export let user: UserResponseDto;
   export let canResetPassword = true;
@@ -36,7 +35,7 @@
   const editUser = async () => {
     try {
       const { id, email, name, storageLabel, externalPath } = user;
-      const { status } = await api.userApi.updateUser({
+      await updateUser({
         updateUserDto: {
           id,
           email,
@@ -47,9 +46,7 @@
         },
       });
 
-      if (status === 200) {
-        dispatch('editSuccess');
-      }
+      dispatch('editSuccess');
     } catch (error) {
       handleError(error, 'Unable to update user');
     }
@@ -59,7 +56,7 @@
     try {
       const defaultPassword = 'password';
 
-      const { status } = await api.userApi.updateUser({
+      await updateUser({
         updateUserDto: {
           id: user.id,
           password: defaultPassword,
@@ -67,15 +64,9 @@
         },
       });
 
-      if (status == 200) {
-        dispatch('resetPasswordSuccess');
-      }
+      dispatch('resetPasswordSuccess');
     } catch (error) {
-      console.error('Error reseting user password', error);
-      notificationController.show({
-        message: 'Error reseting user password, check console for more details',
-        type: NotificationType.Error,
-      });
+      handleError(error, 'Unable to reset password');
     } finally {
       isShowResetPasswordConfirmation = false;
     }

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

@@ -4,7 +4,8 @@
   import { AppRoute } from '$lib/constants';
   import { featureFlags, serverConfig } from '$lib/stores/server-config.store';
   import { getServerErrorMessage, handleError } from '$lib/utils/handle-error';
-  import { api, oauth } from '@api';
+  import { oauth } from '@api';
+  import { getServerConfig, login } from '@immich/sdk';
   import { createEventDispatcher, onMount } from 'svelte';
   import { fade } from 'svelte/transition';
   import Button from '../elements/buttons/button.svelte';
@@ -53,19 +54,13 @@
     oauthLoading = false;
   });
 
-  const login = async () => {
+  const handleLogin = async () => {
     try {
       errorMessage = '';
       loading = true;
 
-      const { data: user } = await api.authenticationApi.login({
-        loginCredentialDto: {
-          email,
-          password,
-        },
-      });
-
-      const { data: serverConfig } = await api.serverInfoApi.getServerConfig();
+      const user = await login({ loginCredentialDto: { email, password } });
+      const serverConfig = await getServerConfig();
 
       if (user.isAdmin && !serverConfig.isOnboarded) {
         dispatch('onboarding');
@@ -97,7 +92,7 @@
 </script>
 
 {#if !oauthLoading && $featureFlags.passwordLogin}
-  <form on:submit|preventDefault={login} class="mt-5 flex flex-col gap-5">
+  <form on:submit|preventDefault={handleLogin} class="mt-5 flex flex-col gap-5">
     {#if errorMessage}
       <p class="text-red-400" transition:fade>
         {errorMessage}