@futo-org/backups-orchestrator-ui 0.4.0 → 0.5.0

package/dist/components/backends/BackendItem.svelte

@@ -5,7 +5,10 @@
     LocalRepositoryDto,
     RepositoryBackendDto,
   } from "../../fetch-client";
-  import { getBackendActions } from "../../services/backend.service";
+  import {
+    getBackendActions,
+    useYuccaLogin,
+  } from "../../services/backend.service";
   import { Badge, Icon, Text } from "@immich/ui";
   import { mdiCloudOutline, mdiHarddisk, mdiShieldCheckOutline } from "@mdi/js";
   import StackListItem from "../ui/StackListItem.svelte";
@@ -30,8 +33,12 @@
     s3: "S3 Server",
   };
 
+  const yuccaLogin = useYuccaLogin();
+
   const { LoginAgain, Reconfigure } = $derived(
-    getBackendActions(repository, backend, repositoryBackend),
+    getBackendActions(repository, backend, repositoryBackend, () =>
+      yuccaLogin.mutate(undefined),
+    ),
   );
 </script>
 

package/dist/components/backends/BackendsList.svelte

@@ -3,9 +3,9 @@
   import { options } from "../../options";
   import {
     handleSetupLocalStorage,
-    handleYuccaLogin,
     useBackendEventHandler,
     useBackends,
+    useYuccaLogin,
   } from "../../services/backend.service";
   import { Button, HStack } from "@immich/ui";
   import StackList from "../ui/StackList.svelte";
@@ -21,6 +21,7 @@
 
   const { advanced } = options;
   const query = useBackends();
+  const yuccaLogin = useYuccaLogin();
   const { onBackendCreate } = useBackendEventHandler();
 
   const repositoryBackends = $derived(
@@ -61,8 +62,11 @@
 
   {#if $advanced}
     <HStack>
-      <Button size="small" variant="outline" onclick={() => handleYuccaLogin()}
-        >Login with FUTO Backups</Button
+      <Button
+        size="small"
+        variant="outline"
+        loading={yuccaLogin.isPending}
+        onclick={() => yuccaLogin.mutate(undefined)}>Login with FUTO Backups</Button
       >
       <Button
         size="small"

package/dist/components/backends/dialogs/OAuthDeviceFlowModal.svelte

@@ -13,6 +13,7 @@
     ModalFooter,
     Stack,
     Text,
+    toastManager,
     VStack,
   } from "@immich/ui";
   import { mdiContentCopy } from "@mdi/js";
@@ -35,6 +36,11 @@
     onClose();
   }
 
+  function onDeviceFlowFailure() {
+    toastManager.danger("Failed to log into FUTO Backups");
+    onClose();
+  }
+
   function onOpen() {
     window.open(verificationUri, "_blank");
   }
@@ -44,7 +50,7 @@
   }
 </script>
 
-<OnEvents {onBackendCreate} />
+<OnEvents {onBackendCreate} {onDeviceFlowFailure} />
 
 <Modal title="Logging into FUTO Backups" icon={false} {onClose}>
   <ModalBody>

package/dist/components/backends/dialogs/SelectBackendModal.svelte

@@ -4,13 +4,14 @@
   import Suspense from "../../util/Suspense.svelte";
   import {
     handleSetupLocalStorage,
-    handleYuccaLogin,
     useBackends,
+    useYuccaLogin,
   } from "../../../services/backend.service";
   import {
     Button,
     HStack,
     Icon,
+    LoadingSpinner,
     Modal,
     ModalBody,
     ModalFooter,
@@ -37,6 +38,7 @@
   }: Props = $props();
 
   const backends = useBackends();
+  const yuccaLogin = useYuccaLogin();
 
   const onFutoBackups = () => {
     const futoBackend = backends.data!.find(
@@ -46,7 +48,7 @@
     if (futoBackend) {
       onSelect(futoBackend.id);
     } else {
-      handleYuccaLogin(onSelect);
+      yuccaLogin.mutate(onSelect);
     }
   };
 
@@ -63,7 +65,7 @@
 
       <Suspense query={backends}>
         <StackList>
-          <StackListItem {disabled} onclick={onFutoBackups}>
+          <StackListItem disabled={disabled || yuccaLogin.isPending} onclick={onFutoBackups}>
             {#snippet icon()}
               <Icon icon={mdiShieldCheck} size="36px" />
             {/snippet}
@@ -74,10 +76,14 @@
             </Stack>
 
             {#snippet trailing()}
-              <Icon icon={mdiChevronRight} />
+              {#if yuccaLogin.isPending}
+                <LoadingSpinner />
+              {:else}
+                <Icon icon={mdiChevronRight} />
+              {/if}
             {/snippet}
           </StackListItem>
-          <StackListItem {disabled} onclick={onLocalBackups}>
+          <StackListItem disabled={disabled || yuccaLogin.isPending} onclick={onLocalBackups}>
             {#snippet icon()}
               <Icon icon={mdiHarddisk} size="36px" />
             {/snippet}
@@ -95,7 +101,7 @@
           {#each backends.data as backend}
             {#if backend.type === "local"}
               <StackListItem
-                {disabled}
+                disabled={disabled || yuccaLogin.isPending}
                 onclick={() => {
                   onSelect(backend.id);
                 }}

package/dist/components/integrations/immich/ImmichManageBackupOverview.svelte

@@ -53,9 +53,9 @@
         <Heading size="tiny">Your library</Heading>
         <Text>
           {#if repository.meter}
-            Estimated <FormatBytes bytes={repository.meter.sizeBytes} />
+            <FormatBytes bytes={repository.meter.sizeBytes} />
           {:else}
-            <FormatBytes bytes={repository.metrics.sizeBytes} />
+            Estimated <FormatBytes bytes={repository.metrics.sizeBytes} />
           {/if} &middot;
           <span class="lowercase"
             >{cronstrue.toString(schedule.cron, {

package/dist/components/onboarding/stages/OnboardingStageBackupServices.svelte

@@ -3,12 +3,13 @@
   import StackListItem from "../../ui/StackListItem.svelte";
   import {
     handleSetupLocalStorage,
-    handleYuccaLogin,
+    useYuccaLogin,
   } from "../../../services/backend.service";
   import {
     Button,
     HStack,
     Icon,
+    LoadingSpinner,
     Modal,
     ModalBody,
     ModalFooter,
@@ -25,8 +26,10 @@
 
   const { restore = false, onNext, onCancel }: Props = $props();
 
+  const yuccaLogin = useYuccaLogin();
+
   function onFutoBackups() {
-    handleYuccaLogin(onNext);
+    yuccaLogin.mutate(onNext);
   }
 
   function onLocalBackups() {
@@ -44,7 +47,7 @@
 >
   <ModalBody>
     <StackList>
-      <StackListItem onclick={onFutoBackups}>
+      <StackListItem disabled={yuccaLogin.isPending} onclick={onFutoBackups}>
         {#snippet icon()}
           <Icon icon={mdiShieldCheck} size="36px" />
         {/snippet}
@@ -55,10 +58,14 @@
         </Stack>
 
         {#snippet trailing()}
-          <Icon icon={mdiChevronRight} />
+          {#if yuccaLogin.isPending}
+            <LoadingSpinner />
+          {:else}
+            <Icon icon={mdiChevronRight} />
+          {/if}
         {/snippet}
       </StackListItem>
-      <StackListItem onclick={onLocalBackups}>
+      <StackListItem disabled={yuccaLogin.isPending} onclick={onLocalBackups}>
         {#snippet icon()}
           <Icon icon={mdiHarddisk} size="36px" />
         {/snippet}

package/dist/services/backend.service.d.ts

@@ -10,14 +10,14 @@ export declare const useBackendEventHandler: () => {
         backend: BackendDto;
     }>): void;
 };
-export declare const handleYuccaLogin: (onCreate?: (backendId: string) => void) => Promise<void>;
+export declare const useYuccaLogin: () => import("@tanstack/svelte-query").CreateMutationResult<void, Error, ((backendId: string) => void) | undefined, unknown>;
 export declare const handleSetupLocalStorage: (onCreate?: (backendId: string) => void) => void;
 export declare const useCreateLocalBackend: () => import("@tanstack/svelte-query").CreateMutationResult<import("../fetch-client").BackendResponseDto, Error, CreateLocalBackendRequestDto, unknown>;
 export declare const handleReconfigureRepositoryBackend: (repository: LocalRepositoryDto) => Promise<void>;
 export declare const handleRemoveRepositoryBackend: (_backend: BackendDto, _repositoryBackend: RepositoryBackendDto) => void;
 export declare const getBackendActions: (repository: LocalRepositoryDto | undefined, backend: BackendDto, repositoryBackend?: RepositoryBackendDto & {
     primary?: boolean;
-}) => {
+}, onLogin?: () => void) => {
     LoginAgain: ActionItem;
     Reconfigure: ActionItem;
     Remove: ActionItem;

package/dist/services/backend.service.js

@@ -29,20 +29,18 @@ export const useBackendEventHandler = () => {
         },
     };
 };
-export const handleYuccaLogin = async (onCreate) => {
-    try {
-        const response = await oidcDeviceFlow();
-        void modalManager.show(OAuthDeviceFlow, {
-            ...response,
-            onCreate,
-        });
-        window.open(response.verificationUri, '_blank');
-    }
-    catch (error) {
-        handleError(error, 'Failed to start login');
-        throw error;
-    }
+const startYuccaLogin = async (onCreate) => {
+    const response = await oidcDeviceFlow();
+    void modalManager.show(OAuthDeviceFlow, {
+        ...response,
+        onCreate,
+    });
+    window.open(response.verificationUri, '_blank');
 };
+export const useYuccaLogin = () => createMutation(() => ({
+    mutationFn: (onCreate) => startYuccaLogin(onCreate),
+    onError: (error) => handleError(error, 'Failed to start login'),
+}), () => queryClient);
 export const handleSetupLocalStorage = (onCreate) => {
     void modalManager.show(CreateLocalBackend, { onCreate });
 };
@@ -58,11 +56,11 @@ export const handleReconfigureRepositoryBackend = async (repository) => {
 export const handleRemoveRepositoryBackend = (_backend, _repositoryBackend) => {
     alert('TODO: implement me when multi-repository-backend support is added');
 };
-export const getBackendActions = (repository, backend, repositoryBackend) => {
+export const getBackendActions = (repository, backend, repositoryBackend, onLogin) => {
     const LoginAgain = {
         icon: mdiLogin,
         title: 'Login again',
-        onAction: () => void handleYuccaLogin(),
+        onAction: () => onLogin?.(),
         $if: () => backend.type === 'yucca' && !backend.isOnline,
     };
     const Reconfigure = {

package/package.json

@@ -2,7 +2,7 @@
   "name": "@futo-org/backups-orchestrator-ui",
   "repository": "https://github.com/immich-app/yucca",
   "description": "Backups orchestrator (UI library)",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "license": "Source First License 1.1",
   "files": [
     "dist",
@@ -64,7 +64,7 @@
     "lodash.debounce": "^4.0.8",
     "luxon": "^3.7.2",
     "socket.io-client": "^4.8.3",
-    "@futo-org/backups-api-client": "^0.4.0"
+    "@futo-org/backups-api-client": "^0.5.0"
   },
   "scripts": {
     "dev": "vite dev --port 5174",