@futo-org/backups-orchestrator-ui 0.12.0 → 0.13.1

package/dist/components/backends/BackendItem.svelte

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

package/dist/components/backends/BackendsList.svelte

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

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

@@ -1,7 +1,11 @@
 <script lang="ts">
+  import Suspense from "../../util/Suspense.svelte";
   import type { SocketEvent } from "../../../events";
-  import type { BackendDto } from "../../../fetch-client";
-  import { useBackendEventHandler } from "../../../services/backend.service";
+  import { type BackendDto } from "../../../fetch-client";
+  import {
+    useBackendEventHandler,
+    useDeviceFlow,
+  } from "../../../services/backend.service";
   import {
     Button,
     Code,
@@ -20,13 +24,14 @@
   import OnEvents from "../../util/OnEvents.svelte";
 
   type Props = {
-    userCode: string;
-    verificationUri: string;
     onCreate?: (backendId: string) => void;
     onClose: () => void;
   };
 
-  let { userCode, verificationUri, onCreate, onClose }: Props = $props();
+  let { onCreate, onClose }: Props = $props();
+
+  const uid = $props.id();
+  const query = useDeviceFlow(uid);
 
   const { onBackendCreate: onBackendCreateHandler } = useBackendEventHandler();
 
@@ -41,12 +46,12 @@
     onClose();
   }
 
-  function onOpen() {
-    window.open(verificationUri, "_blank");
+  function onRetry() {
+    query.refetch();
   }
 
   function onCopy() {
-    navigator.clipboard.writeText(userCode);
+    navigator.clipboard.writeText(query.data!.userCode);
   }
 </script>
 
@@ -54,31 +59,38 @@
 
 <Modal title="Logging into FUTO Backups" icon={false} {onClose}>
   <ModalBody>
-    <VStack>
-      <Text>You may be asked or shown the following code:</Text>
-      <Stack direction="row" align="center">
-        <Code class="text-3xl select-all">{userCode}</Code>
-        <IconButton
-          color="secondary"
-          variant="outline"
-          icon={mdiContentCopy}
-          onclick={onCopy}
-          aria-label="Copy code"
-        />
-      </Stack>
+    <Suspense {query}>
+      <VStack>
+        <Text>You may be asked or shown the following code:</Text>
+        <Stack direction="row" align="center">
+          <Code class="text-3xl select-all">{query.data!.userCode}</Code>
+          <IconButton
+            color="secondary"
+            variant="outline"
+            icon={mdiContentCopy}
+            onclick={onCopy}
+            aria-label="Copy code"
+          />
+        </Stack>
 
-      <HStack class="mt-4">
-        <LoadingSpinner />
-        <Text>Waiting for you to confirm login...</Text>
-      </HStack>
-    </VStack>
+        <HStack class="mt-4">
+          <LoadingSpinner />
+          <Text>Waiting for you to confirm login...</Text>
+        </HStack>
+      </VStack>
+    </Suspense>
   </ModalBody>
   <ModalFooter>
     <HStack fullWidth>
       <Button shape="round" color="secondary" fullWidth onclick={onClose}>
         Cancel
       </Button>
-      <Button shape="round" fullWidth onclick={onOpen}>Open login again</Button>
+      <Button
+        shape="round"
+        fullWidth
+        onclick={onRetry}
+        disabled={query.isFetching}>Try again</Button
+      >
     </HStack>
   </ModalFooter>
 </Modal>

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

@@ -1,6 +1,4 @@
 type Props = {
-    userCode: string;
-    verificationUri: string;
     onCreate?: (backendId: string) => void;
     onClose: () => void;
 };

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

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

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

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

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

@@ -3,14 +3,16 @@ import { type BackendDto, type CreateLocalBackendRequestDto, type LocalRepositor
 import { type ActionItem } from '@immich/ui';
 export declare const backendKeys: {
     all: readonly ["backends"];
+    deviceFlow: (uid: string) => readonly ["deviceFlow", string];
 };
 export declare const useBackends: () => import("@tanstack/svelte-query").CreateQueryResult<BackendDto[], Error>;
+export declare const useDeviceFlow: (uid: string) => import("@tanstack/svelte-query").CreateQueryResult<import("../fetch-client").DeviceFlowResponseDto, Error>;
 export declare const useBackendEventHandler: () => {
     onBackendCreate(event: SocketEvent<{
         backend: BackendDto;
     }>): void;
 };
-export declare const useYuccaLogin: () => import("@tanstack/svelte-query").CreateMutationResult<void, Error, ((backendId: string) => void) | undefined, unknown>;
+export declare const handleStartYuccaLogin: (onCreate?: (backendId: string) => void) => void;
 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>;

package/dist/services/backend.service.js

@@ -10,11 +10,22 @@ import { mdiLogin } from '@mdi/js';
 import { createMutation, createQuery } from '@tanstack/svelte-query';
 export const backendKeys = {
     all: ['backends'],
+    deviceFlow: (uid) => ['deviceFlow', uid],
 };
 export const useBackends = () => createQuery(() => ({
     queryKey: backendKeys.all,
     queryFn: () => getBackends().then(({ backends }) => backends),
 }), () => queryClient);
+export const useDeviceFlow = (uid) => createQuery(() => ({
+    queryKey: backendKeys.deviceFlow(uid),
+    queryFn: async () => {
+        const response = await oidcDeviceFlow();
+        window.open(response.verificationUri, '_blank');
+        return response;
+    },
+    refetchOnReconnect: false,
+    refetchOnWindowFocus: false,
+}), () => queryClient);
 export const useBackendEventHandler = () => {
     return {
         onBackendCreate(event) {
@@ -29,18 +40,11 @@ export const useBackendEventHandler = () => {
         },
     };
 };
-const startYuccaLogin = async (onCreate) => {
-    const response = await oidcDeviceFlow();
+export const handleStartYuccaLogin = (onCreate) => {
     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 });
 };

package/dist/services/log.service.svelte.d.ts

@@ -37,6 +37,8 @@ type LogEvent = SummaryEvent | {
     percent_done: number;
     seconds_remaining?: number;
     current_files?: string[];
+    bytes_done?: number;
+    total_bytes?: number;
 };
 export type LogStatus = {
     progress: number;

package/dist/services/log.service.svelte.js

@@ -34,7 +34,10 @@ export function createLogObserver(logId) {
             case 'status': {
                 state.status = {
                     progress: event.percent_done,
-                    text: event.seconds_remaining && event.percent_done < 100
+                    text: event.seconds_remaining &&
+                        (event.bytes_done && event.total_bytes
+                            ? event.bytes_done < event.total_bytes
+                            : event.percent_done < 100)
                         ? `${formatDuration(event.seconds_remaining * 1000)} remaining`
                         : 'Nearly done.',
                     currentFiles: event.current_files ?? [],

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.12.0",
+  "version": "0.13.1",
   "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.12.0"
+    "@futo-org/backups-api-client": "^0.13.1"
   },
   "scripts": {
     "dev": "vite dev --port 5174",