@futo-org/backups-orchestrator-ui 0.38.0 → 0.40.0

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

@@ -1,26 +1,21 @@
 <script lang="ts">
-  import Suspense from "../../util/Suspense.svelte";
+  import DeviceFlowAction from "../../util/DeviceFlowAction.svelte";
+  import DeviceFlowCode from "../../util/DeviceFlowCode.svelte";
   import type { SocketEvent } from "../../../events";
   import { type BackendDto } from "../../../fetch-client";
-  import {
-    useBackendEventHandler,
-    useDeviceFlow,
-  } from "../../../services/backend.service";
+  import { useBackendEventHandler } from "../../../services/backend.service";
+  import { createDeviceFlow } from "../../../services/deviceFlow.service.svelte";
+  import { useCreateSession } from "../../../services/session.service";
   import {
     Button,
-    Code,
     HStack,
-    IconButton,
     LoadingSpinner,
     Modal,
     ModalBody,
     ModalFooter,
-    Stack,
     Text,
-    toastManager,
-    VStack,
   } from "@immich/ui";
-  import { mdiContentCopy } from "@mdi/js";
+  import { onDestroy } from "svelte";
   import OnEvents from "../../util/OnEvents.svelte";
 
   type Props = {
@@ -30,67 +25,47 @@
 
   let { onCreate, onClose }: Props = $props();
 
-  const uid = $props.id();
-  const query = useDeviceFlow(uid);
-
   const { onBackendCreate: onBackendCreateHandler } = useBackendEventHandler();
 
-  function onBackendCreate(event: SocketEvent<{ backend: BackendDto }>) {
-    onBackendCreateHandler(event);
-    onCreate?.(event.data.backend.id);
-    onClose();
-  }
+  const session = useCreateSession();
 
-  function onDeviceFlowFailure() {
-    toastManager.danger("Failed to log into FUTO Backups");
-    onClose();
-  }
+  const flow = createDeviceFlow("oidc", {
+    createSession: (token) => session.mutateAsync(token),
+    onComplete: (event) => {
+      if (event.backendId) {
+        onCreate?.(event.backendId);
+      }
 
-  function onRetry() {
-    query.refetch();
-  }
+      onClose();
+    },
+  });
+
+  flow.start();
+  onDestroy(flow.stop);
 
-  function onCopy() {
-    navigator.clipboard.writeText(query.data!.userCode);
+  function onBackendCreate(event: SocketEvent<{ backend: BackendDto }>) {
+    onBackendCreateHandler(event);
   }
 </script>
 
-<OnEvents {onBackendCreate} {onDeviceFlowFailure} />
+<OnEvents {onBackendCreate} />
 
 <Modal title="Logging into FUTO Backups" icon={false} {onClose}>
   <ModalBody>
-    <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>
-    </Suspense>
+    {#if flow.state.userCode}
+      <DeviceFlowCode {flow} />
+    {:else if flow.state.error}
+      <Text color="danger">{flow.state.error}</Text>
+    {:else}
+      <LoadingSpinner />
+    {/if}
   </ModalBody>
   <ModalFooter>
     <HStack fullWidth>
       <Button shape="round" color="secondary" fullWidth onclick={onClose}>
         Cancel
       </Button>
-      <Button
-        shape="round"
-        fullWidth
-        onclick={onRetry}
-        disabled={query.isFetching}>Try again</Button
-      >
+      <DeviceFlowAction {flow} />
     </HStack>
   </ModalFooter>
 </Modal>

package/dist/components/backups/BackupItem.svelte

@@ -9,9 +9,10 @@
 
   type Props = {
     repository: LocalRepositoryDto;
+    local?: boolean
   };
 
-  const { repository }: Props = $props();
+  const { repository, local }: Props = $props();
 
   const BackendNames = {
     yucca: "FUTO Backups",
@@ -21,14 +22,29 @@
 
   const outcome = $derived(getBackupOutcome(repository.metrics));
 
-  const { BackupNow, Snapshots, History, Configure, Import, MetricsHistory } =
-    $derived(getRepositoryActions(repository));
+  const {
+    BackupNow,
+    Snapshots,
+    History,
+    Configure,
+    Import,
+    MetricsHistory,
+    Delete,
+  } = $derived(getRepositoryActions(repository, local));
 </script>
 
 <StackListItem
   title={repository.name}
   color={outcome === "failed" ? "danger" : "primary"}
-  actions={[BackupNow, Snapshots, History, Configure, Import, MetricsHistory]}
+  actions={[
+    BackupNow,
+    Snapshots,
+    History,
+    Configure,
+    Import,
+    MetricsHistory,
+    Delete,
+  ]}
 >
   {#snippet icon()}
     <Icon icon={mdiArchiveOutline} />

package/dist/components/backups/BackupItem.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { LocalRepositoryDto } from "../../fetch-client";
 type Props = {
     repository: LocalRepositoryDto;
+    local?: boolean;
 };
 declare const BackupItem: import("svelte").Component<Props, {}, "">;
 type BackupItem = ReturnType<typeof BackupItem>;

package/dist/components/backups/BackupsList.svelte

@@ -46,7 +46,7 @@
 
         <Suspense {query}>
           {#each localRepositories as repository (repository.id)}
-            <BackupItem {repository} />
+            <BackupItem {repository} {local} />
           {/each}
 
           {#if localRepositories.length === 0}

package/dist/components/backups/dialogs/ConfigureRepositoryModal.svelte

@@ -4,15 +4,12 @@
   import { type LocalRepositoryDto } from "../../../fetch-client";
   import { options } from "../../../options";
   import {
-    useRemoveRepository,
     useUpdateRepository,
   } from "../../../services/repository.service";
   import {
-    Button,
     Field,
     FormModal,
     Input,
-    modalManager,
     Stack,
   } from "@immich/ui";
   import { SvelteSet } from "svelte/reactivity";
@@ -32,7 +29,6 @@
   const local = $derived(typeof repository.configuration === "object");
 
   const updateMutation = useUpdateRepository();
-  const removeMutation = useRemoveRepository();
 
   const onSubmit = () =>
     updateMutation.mutate(
@@ -40,30 +36,12 @@
       { onSuccess: () => onClose() },
     );
 
-  const onRemove = async () => {
-    const confirm = await modalManager.showDialog({
-      confirmText: local ? "Remove" : "Delete",
-      title: local ? "Remove Repository" : "Delete Repository",
-      prompt: local
-        ? "Repository will be removed locally."
-        : "This repository will be removed.",
-    });
-
-    if (!confirm) return;
-
-    removeMutation.mutate(
-      { id: repository.id, local },
-      { onSuccess: () => onClose() },
-    );
-  };
-
   const { advanced } = options;
 </script>
 
 <FormModal
   disabled={name.length === 0 ||
-    updateMutation.isPending ||
-    removeMutation.isPending}
+    updateMutation.isPending}
   title={`Configure ${name}`}
   size="large"
   {onSubmit}
@@ -89,10 +67,6 @@
       </PathListField>
     {/if}
 
-    <Button color="danger" loading={removeMutation.isPending} onclick={onRemove}
-      >Remove Repository from This Device</Button
-    >
-
     {#if advanced}
       <BackendsList {repository} />
     {/if}

package/dist/components/backups/dialogs/SelectRepositoryModal.svelte

@@ -57,6 +57,7 @@
         <Suspense {query}>
           {#each sortedRepositories ?? [] as repository (repository.id)}
             {@const accessible = repository.snapshots !== undefined}
+            {@const snapshots = repository.snapshots ?? []}
 
             <StackListOption
               title={repository.name}
@@ -65,10 +66,8 @@
             >
               {#if !accessible}
                 Can't access, is your recovery key correct?
-              {:else if repository.snapshots.length}
-                Last backup: {new Date(
-                  repository.snapshots[0].time,
-                ).toLocaleDateString()}
+              {:else if snapshots.length}
+                Last backup: {new Date(snapshots[0].time).toLocaleDateString()}
               {:else}
                 No backups yet
               {/if}

package/dist/components/integrations/immich/settings/ImmichSettingsStorage.svelte

@@ -9,6 +9,7 @@
     useIntegrations,
   } from "../../../../services/integrations.service";
   import {
+  handleDisableWormRepository,
     useRepositories,
     useRepositoryEventHandler,
   } from "../../../../services/repository.service";
@@ -85,7 +86,6 @@
     }
 
     name = repository.name;
-    worm = repository.worm;
 
     const policy = repository.configuration?.retentionPolicy ?? null;
     retentionKey =
@@ -153,17 +153,13 @@
       <BackendsList {repository} />
 
       {#if repository?.worm}
-        <Field
-          label="Write-only"
-          description="Once written, backups can't be removed. This can't be turned off again."
-          readOnly // @immich/ui forces enabled={false} when disabled={true}
-        >
-          <Switch checked class="cursor-not-allowed opacity-38" />
-        </Field>
+        <Button onclick={() => handleDisableWormRepository(repository.id, true)}>
+          Disable write-only
+        </Button>
       {:else}
         <Field
           label="Write-only"
-          description="Once written, backups can't be removed. This can't be turned off again."
+          description="Once written, backups can't be removed."
         >
           <Switch bind:checked={worm} />
         </Field>

package/dist/components/onboarding/OnboardingGate.svelte

@@ -4,6 +4,7 @@
   import { LoadingSpinner } from "@immich/ui";
   import { onMount, type Snippet } from "svelte";
   import OnboardingBootstrapError from "./OnboardingBootstrapError.svelte";
+  import OnboardingLogin from "./OnboardingLogin.svelte";
   import SampleOnboarding from "./SampleOnboarding.svelte";
 
   type Props = {
@@ -23,6 +24,8 @@
   function onSkip() {
     onboarding = {
       status: "ready",
+      requiresAuthentication: false,
+      isAuthenticated: true,
       hasTelemetry: "full",
       hasBackend: true,
       hasOnboardedKey: true,
@@ -37,6 +40,10 @@
   <LoadingSpinner />
 {:else if onboarding.status === "error"}
   <OnboardingBootstrapError error={onboarding.error} onQuit={onExit} />
+{:else if onboarding.requiresAuthentication && !onboarding.isAuthenticated}
+  <OnboardingLogin
+    onAuthenticated={() => (onboarding!.isAuthenticated = true)}
+  />
 {:else if onboarding.hasTelemetry === "none" || !(onboarding.hasBackend && onboarding.hasOnboardedKey)}
   <SampleOnboarding
     status={onboarding}

package/dist/components/onboarding/OnboardingLogin.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+  import DeviceFlowAction from "../util/DeviceFlowAction.svelte";
+  import DeviceFlowCode from "../util/DeviceFlowCode.svelte";
+  import { createDeviceFlow } from "../../services/deviceFlow.service.svelte";
+  import { useCreateSession } from "../../services/session.service";
+  import {
+    Button,
+    HStack,
+    Modal,
+    ModalBody,
+    ModalFooter,
+    Stack,
+    Text,
+  } from "@immich/ui";
+  import { onDestroy } from "svelte";
+
+  type Props = {
+    onAuthenticated: () => void;
+  };
+
+  const { onAuthenticated }: Props = $props();
+
+  const session = useCreateSession();
+
+  const flow = createDeviceFlow("session", {
+    createSession: (token) => session.mutateAsync(token),
+    onComplete: () => onAuthenticated(),
+  });
+
+  onDestroy(flow.stop);
+</script>
+
+<Modal title="Log in to FUTO Backups" icon={false} onClose={() => {}}>
+  <ModalBody>
+    {#if flow.state.userCode}
+      <DeviceFlowCode {flow} />
+    {:else}
+      <Stack gap={4}>
+        <Text>
+          This instance is connected to a FUTO Backups account. Log in with that
+          account to manage it.
+        </Text>
+
+        {#if flow.state.error}
+          <Text color="danger">{flow.state.error}</Text>
+        {/if}
+      </Stack>
+    {/if}
+  </ModalBody>
+  <ModalFooter>
+    <HStack fullWidth>
+      {#if flow.state.userCode}
+        <DeviceFlowAction {flow} />
+      {:else}
+        <Button
+          shape="round"
+          fullWidth
+          loading={flow.state.pending}
+          onclick={flow.start}>Log in with FUTO</Button
+        >
+      {/if}
+    </HStack>
+  </ModalFooter>
+</Modal>

package/dist/components/onboarding/OnboardingLogin.svelte.d.ts

@@ -0,0 +1,6 @@
+type Props = {
+    onAuthenticated: () => void;
+};
+declare const OnboardingLogin: import("svelte").Component<Props, {}, "">;
+type OnboardingLogin = ReturnType<typeof OnboardingLogin>;
+export default OnboardingLogin;

package/dist/components/onboarding/restore-point-flow/RestorePointFlow2SelectSnapshot.svelte

@@ -28,6 +28,8 @@
   const { onBack, onFinish, repository }: Props = $props();
 
   let selectedSnapshot: SnapshotDto | undefined = $state();
+
+  const snapshots = $derived(repository.snapshots ?? []);
 </script>
 
 {#if selectedSnapshot}
@@ -45,7 +47,7 @@
   >
     <ModalBody>
       <StackList>
-        {#each repository.snapshots.toSorted((a, b) => new Date(b.time).getTime() - new Date(a.time).getTime()) as snapshot (snapshot.id)}
+        {#each snapshots.toSorted((a, b) => new Date(b.time).getTime() - new Date(a.time).getTime()) as snapshot (snapshot.id)}
           <HStack gap={2} class="px-4 py-3">
             <Stack gap={0} class="grow min-w-0">
               <HStack
@@ -67,7 +69,7 @@
             </Button>
           </HStack>
         {/each}
-        {#if repository.snapshots.length === 0}
+        {#if snapshots.length === 0}
           <Text class="text-center py-6" color="muted">
             No snapshots in this repository.
           </Text>

package/dist/components/util/DeviceFlowAction.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import type { DeviceFlow } from "../../services/deviceFlow.service.svelte";
+  import { Button } from "@immich/ui";
+
+  type Props = {
+    flow: DeviceFlow;
+  };
+
+  const { flow }: Props = $props();
+</script>
+
+{#if flow.state.opened}
+  <Button shape="round" fullWidth onclick={flow.start}>Try again</Button>
+{:else}
+  <Button
+    shape="round"
+    fullWidth
+    disabled={!flow.state.verificationUri}
+    onclick={flow.open}>Continue to login</Button
+  >
+{/if}

package/dist/components/util/DeviceFlowAction.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { DeviceFlow } from "../../services/deviceFlow.service.svelte";
+type Props = {
+    flow: DeviceFlow;
+};
+declare const DeviceFlowAction: import("svelte").Component<Props, {}, "">;
+type DeviceFlowAction = ReturnType<typeof DeviceFlowAction>;
+export default DeviceFlowAction;

package/dist/components/util/DeviceFlowCode.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import type { DeviceFlow } from "../../services/deviceFlow.service.svelte";
+  import { Code, HStack, IconButton, LoadingSpinner, Stack, Text } from "@immich/ui";
+  import { mdiContentCopy } from "@mdi/js";
+
+  type Props = {
+    flow: DeviceFlow;
+  };
+
+  const { flow }: Props = $props();
+
+  function onCopy() {
+    navigator.clipboard.writeText(flow.state.userCode!);
+  }
+</script>
+
+<Stack gap={4}>
+  <Text>You may be asked or shown the following code:</Text>
+  <Stack direction="row" align="center">
+    <Code class="text-3xl select-all">{flow.state.userCode}</Code>
+    <IconButton
+      color="secondary"
+      variant="outline"
+      icon={mdiContentCopy}
+      onclick={onCopy}
+      aria-label="Copy code"
+    />
+  </Stack>
+
+  {#if flow.state.opened}
+    <HStack>
+      <LoadingSpinner />
+      <Text>Waiting for you to confirm login...</Text>
+    </HStack>
+  {/if}
+</Stack>

package/dist/components/util/DeviceFlowCode.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { DeviceFlow } from "../../services/deviceFlow.service.svelte";
+type Props = {
+    flow: DeviceFlow;
+};
+declare const DeviceFlowCode: import("svelte").Component<Props, {}, "">;
+type DeviceFlowCode = ReturnType<typeof DeviceFlowCode>;
+export default DeviceFlowCode;

package/dist/fetch-client.d.ts

@@ -9,9 +9,28 @@ export declare const defaults: Oazapfts.Defaults<Oazapfts.CustomHeaders>;
 export declare const servers: {
     server1: string;
 };
-export type DeviceFlowResponseDto = {
-    userCode: string;
-    verificationUri: string;
+export type DeviceFlowEventType = "START" | "SUCCESS" | "FAILURE";
+export type DeviceFlowFailureReason = "NOT_CONNECTED" | "DEVICE_FLOW_FAILED" | "WRONG_ACCOUNT" | "UNKNOWN";
+export type DeviceFlowEventDto = {
+    "type": DeviceFlowEventType;
+    userCode?: string;
+    verificationUri?: string;
+    token?: string;
+    backendId?: string;
+    reason?: DeviceFlowFailureReason;
+};
+export type CreateSessionRequestDto = {
+    token: string;
+};
+export type TicketAction = "repository.delete" | "repository.disable-worm";
+export type TicketCreateRequestDto = {
+    action: TicketAction;
+    /** Repository the ticket is bound to */
+    repositoryId: string;
+};
+export type TicketCreateResponseDto = {
+    /** Identity provider URL the browser must be sent to */
+    redirectTo: string;
 };
 export type BackendType = "yucca" | "local" | "s3";
 export type BackendDto = {
@@ -94,6 +113,8 @@ export type OnboardingStatusResponseDto = {
     status: BootstrapStatus;
     error?: string;
     hasTelemetry: TelemetryLevel;
+    requiresAuthentication: boolean;
+    isAuthenticated: boolean;
     hasOnboardedKey: boolean;
     hasBackend: boolean;
     hasBackup: boolean;
@@ -115,7 +136,7 @@ export type RepositoryCreateRequestDto = {
 };
 export type TaskStatus = "incomplete" | "complete" | "warn" | "failed";
 export type RepositoryMetricsDto = {
-    lastBackup?: string;
+    lastBackup?: string | null;
     lastBackupStatus?: TaskStatus;
     lastBackupDuration?: number;
     sizeBytes: number;
@@ -123,7 +144,7 @@ export type RepositoryMetricsDto = {
 export type RepositoryMeterDto = {
     sizeBytes: number;
     objectCount: number;
-    lastUpdated?: string;
+    lastUpdated?: string | null;
 };
 export type RepositoryBackendDto = {
     id: string;
@@ -180,7 +201,7 @@ export type InspectedLocalRepositoryDto = {
     meter?: RepositoryMeterDto;
     backends?: RepositoryBackendsDto;
     configuration?: RepositoryConfigurationDto;
-    snapshots: SnapshotDto[];
+    snapshots?: SnapshotDto[];
 };
 export type RepositoryInspectResponseDto = {
     repositories: InspectedLocalRepositoryDto[];
@@ -209,7 +230,7 @@ export type RunDto = {
     id: string;
     repositoryId: string;
     start: string;
-    end: string;
+    end?: string;
     logFilePath: string;
     status: RunStatus;
     "type": RunType;
@@ -274,7 +295,10 @@ export type ScheduleUpdateRequestDto = {
 export type ScheduleUpdateResponseDto = {
     schedule: ScheduleDto;
 };
-export declare function oidcDeviceFlow(opts?: Oazapfts.RequestOpts): Promise<DeviceFlowResponseDto>;
+export declare function connectDeviceFlow(opts?: Oazapfts.RequestOpts): Promise<DeviceFlowEventDto>;
+export declare function sessionDeviceFlow(opts?: Oazapfts.RequestOpts): Promise<DeviceFlowEventDto>;
+export declare function createSession(createSessionRequestDto: CreateSessionRequestDto, opts?: Oazapfts.RequestOpts): Promise<never>;
+export declare function createTicket(ticketCreateRequestDto: TicketCreateRequestDto, opts?: Oazapfts.RequestOpts): Promise<TicketCreateResponseDto>;
 export declare function getBackends(opts?: Oazapfts.RequestOpts): Promise<BackendsResponseDto>;
 export declare function createLocalBackend(createLocalBackendRequestDto: CreateLocalBackendRequestDto, opts?: Oazapfts.RequestOpts): Promise<BackendResponseDto>;
 export declare function resetOrchestrator(opts?: Oazapfts.RequestOpts): Promise<never>;

package/dist/fetch-client.js

@@ -14,11 +14,30 @@ const oazapfts = Oazapfts.runtime(defaults);
 export const servers = {
     server1: "http://localhost:22676"
 };
-export function oidcDeviceFlow(opts) {
+export function connectDeviceFlow(opts) {
     return oazapfts.ok(oazapfts.fetchJson("/api/yucca/auth/oidc/device", {
         ...opts
     }));
 }
+export function sessionDeviceFlow(opts) {
+    return oazapfts.ok(oazapfts.fetchJson("/api/yucca/auth/session/device", {
+        ...opts
+    }));
+}
+export function createSession(createSessionRequestDto, opts) {
+    return oazapfts.ok(oazapfts.fetchText("/api/yucca/auth/session", oazapfts.json({
+        ...opts,
+        method: "POST",
+        body: createSessionRequestDto
+    })));
+}
+export function createTicket(ticketCreateRequestDto, opts) {
+    return oazapfts.ok(oazapfts.fetchJson("/api/yucca/auth/ticket", oazapfts.json({
+        ...opts,
+        method: "POST",
+        body: ticketCreateRequestDto
+    })));
+}
 export function getBackends(opts) {
     return oazapfts.ok(oazapfts.fetchJson("/api/yucca/backend", {
         ...opts

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+export { default as Suspense } from './components/util/Suspense.svelte';
 export { default as BackendsList } from './components/backends/BackendsList.svelte';
 export { default as BackupsList } from './components/backups/BackupsList.svelte';
 export { default as ViewStatusModal } from './components/backups/dialogs/ViewStatusModal.svelte';

package/dist/index.js

@@ -1,3 +1,4 @@
+export { default as Suspense } from './components/util/Suspense.svelte';
 export { default as BackendsList } from './components/backends/BackendsList.svelte';
 export { default as BackupsList } from './components/backups/BackupsList.svelte';
 export { default as ViewStatusModal } from './components/backups/dialogs/ViewStatusModal.svelte';

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

@@ -3,10 +3,8 @@ 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;

package/dist/services/backend.service.js

@@ -2,7 +2,7 @@ import CreateLocalBackend from '../components/backends/dialogs/CreateLocalBacken
 import OAuthDeviceFlow from '../components/backends/dialogs/OAuthDeviceFlowModal.svelte';
 import ReconfigureRepositoryBackendModal from '../components/backups/dialogs/ReconfigureRepositoryBackendModal.svelte';
 import { SocketEvent } from '../events';
-import { createLocalBackend, getBackends, oidcDeviceFlow, } from '../fetch-client';
+import { createLocalBackend, getBackends, } from '../fetch-client';
 import { queryClient } from '../query-client';
 import { handleError } from '../utils/handle-error';
 import { modalManager } from '@immich/ui';
@@ -10,25 +10,11 @@ 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;
-    },
-    gcTime: Infinity,
-    retry: 0,
-    refetchOnReconnect: false,
-    refetchOnWindowFocus: false,
-    refetchOnMount: true,
-}), () => queryClient);
 export const useBackendEventHandler = () => {
     return {
         onBackendCreate(event) {

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

@@ -0,0 +1,19 @@
+import type { DeviceFlowEventDto } from '../fetch-client';
+import { type DeviceFlowKind } from './session.service';
+export declare function createDeviceFlow(kind: DeviceFlowKind, handlers: {
+    createSession: (token: string) => Promise<unknown>;
+    onComplete: (event: DeviceFlowEventDto) => void;
+    onFailure?: (message: string) => void;
+}): {
+    state: {
+        userCode: string | undefined;
+        verificationUri: string | undefined;
+        error: string | undefined;
+        pending: boolean;
+        opened: boolean;
+    };
+    start: () => void;
+    stop: () => void;
+    open: () => void;
+};
+export type DeviceFlow = ReturnType<typeof createDeviceFlow>;

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

@@ -0,0 +1,70 @@
+import { startDeviceFlow, } from './session.service';
+const failures = {
+    NOT_CONNECTED: 'This instance is not connected to a FUTO Backups account yet.',
+    DEVICE_FLOW_FAILED: 'Login was cancelled or timed out.',
+    WRONG_ACCOUNT: 'That account does not own this instance. Log in with the account it was connected with.',
+    UNKNOWN: 'Could not reach FUTO Backups. Check your connection.',
+};
+export function createDeviceFlow(kind, handlers) {
+    const state = $state({
+        userCode: undefined,
+        verificationUri: undefined,
+        error: undefined,
+        pending: false,
+        opened: false,
+    });
+    let close;
+    const stop = () => {
+        close?.();
+        close = undefined;
+    };
+    const complete = async (event) => {
+        if (event.token) {
+            await handlers.createSession(event.token);
+        }
+        state.pending = false;
+        handlers.onComplete(event);
+    };
+    const start = () => {
+        stop();
+        state.userCode = undefined;
+        state.error = undefined;
+        state.pending = true;
+        state.opened = false;
+        close = startDeviceFlow(kind, (event) => {
+            switch (event.type) {
+                case 'START': {
+                    state.userCode = event.userCode;
+                    state.verificationUri = event.verificationUri;
+                    break;
+                }
+                case 'SUCCESS': {
+                    stop();
+                    void complete(event);
+                    break;
+                }
+                case 'FAILURE': {
+                    stop();
+                    state.pending = false;
+                    state.userCode = undefined;
+                    state.error = failures[event.reason ?? 'UNKNOWN'];
+                    handlers.onFailure?.(state.error);
+                    break;
+                }
+            }
+        });
+    };
+    const open = () => {
+        if (!state.verificationUri) {
+            return;
+        }
+        state.opened = true;
+        window.open(state.verificationUri, 'futo-backups-device');
+    };
+    return {
+        state,
+        start,
+        stop,
+        open,
+    };
+}

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

@@ -36,17 +36,16 @@ export declare const useReconfigureRepositoryPrimaryBackend: () => import("@tans
     id: string;
     backendId: string;
 }, unknown>;
-export declare const useRemoveRepository: () => import("@tanstack/svelte-query").CreateMutationResult<never, Error, {
-    id: string;
-    local?: boolean;
-}, unknown>;
 export declare const handleCreateBackup: (id: string) => Promise<sdk.LogResponseDto>;
 export declare const handlePruneRepository: (id: string) => Promise<sdk.LogResponseDto>;
-export declare const getRepositoryActions: (repository: LocalRepositoryDto) => {
+export declare const handleDeleteRepository: (repositoryId: string, local?: boolean) => Promise<void>;
+export declare const handleDisableWormRepository: (repositoryId: string, local?: boolean) => Promise<void>;
+export declare const getRepositoryActions: (repository: LocalRepositoryDto, local?: boolean) => {
     BackupNow: ActionItem;
     Snapshots: ActionItem;
     History: ActionItem;
     Configure: ActionItem;
     Import: ActionItem;
     MetricsHistory: ActionItem;
+    Delete: ActionItem;
 };

package/dist/services/repository.service.js

@@ -6,12 +6,13 @@ import MetricsHistoryModal from '../components/backups/metrics-history/MetricsHi
 import RunHistoryModal from '../components/backups/run-history/RunHistoryModal.svelte';
 import SnapshotsListModal from '../components/backups/snapshots-list/SnapshotsListModal.svelte';
 import { SocketEvent } from '../events';
-import { deleteRepository, inspectRepositories, reconfigureRepositoryPrimaryBackend, updateRepository, } from '../fetch-client';
+import { inspectRepositories, reconfigureRepositoryPrimaryBackend, updateRepository, } from '../fetch-client';
 import { getProvider } from '../providers';
 import { queryClient } from '../query-client';
 import { handleError } from '../utils/handle-error';
+import { createTicket } from '@futo-org/backups-api-client';
 import { modalManager, toastManager } from '@immich/ui';
-import { mdiCog, mdiFormatListBulletedType, mdiHistory, mdiImport, mdiListStatus, mdiPlay, } from '@mdi/js';
+import { mdiCog, mdiFormatListBulletedType, mdiHistory, mdiImport, mdiListStatus, mdiPlay, mdiTrashCan, } from '@mdi/js';
 import { createMutation, createQuery } from '@tanstack/svelte-query';
 export const repositoryKeys = {
     all: ['repositories'],
@@ -76,10 +77,6 @@ export const useReconfigureRepositoryPrimaryBackend = () => createMutation(() =>
     mutationFn: ({ id, backendId }) => reconfigureRepositoryPrimaryBackend(id, { backendId }),
     onError: (error) => handleError(error, 'Failed to reconfigure backend'),
 }), () => queryClient);
-export const useRemoveRepository = () => createMutation(() => ({
-    mutationFn: ({ id, local = false }) => local ? sdk.deleteRepository(id) : deleteRepository(id),
-    onError: (error) => handleError(error, 'Failed to delete repository'),
-}), () => queryClient);
 export const handleCreateBackup = async (id) => {
     try {
         toastManager.info('Started backup');
@@ -110,7 +107,35 @@ export const handlePruneRepository = async (id) => {
         throw error;
     }
 };
-export const getRepositoryActions = (repository) => {
+export const handleDeleteRepository = async (repositoryId, local) => {
+    try {
+        const action = local ? sdk.createTicket : createTicket;
+        const { redirectTo } = await action({
+            action: 'repository.delete',
+            repositoryId,
+        });
+        window.open(redirectTo, '_blank');
+    }
+    catch (error) {
+        handleError(error, 'Failed to start deletion');
+        throw error;
+    }
+};
+export const handleDisableWormRepository = async (repositoryId, local) => {
+    try {
+        const action = local ? sdk.createTicket : createTicket;
+        const { redirectTo } = await action({
+            action: 'repository.disable-worm',
+            repositoryId,
+        });
+        window.open(redirectTo, '_blank');
+    }
+    catch (error) {
+        handleError(error, 'Failed to start disable write-only process');
+        throw error;
+    }
+};
+export const getRepositoryActions = (repository, local) => {
     const online = Boolean(repository.configuration && repository.backends?.primary.online);
     const configured = Boolean(repository.configuration);
     const BackupNow = {
@@ -151,5 +176,19 @@ export const getRepositoryActions = (repository) => {
         onAction: () => void modalManager.open(MetricsHistoryModal, { repository }),
         $if: () => !repository.backends,
     };
-    return { BackupNow, Snapshots, History, Configure, Import, MetricsHistory };
+    const Delete = {
+        title: 'Delete repository',
+        icon: mdiTrashCan,
+        onAction: () => void handleDeleteRepository(repository.id, local),
+        $if: () => !repository.backends || repository.backends.primary.type === 'yucca',
+    };
+    return {
+        BackupNow,
+        Snapshots,
+        History,
+        Configure,
+        Import,
+        MetricsHistory,
+        Delete,
+    };
 };

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

@@ -0,0 +1,4 @@
+import { type DeviceFlowEventDto } from '../fetch-client';
+export type DeviceFlowKind = 'oidc' | 'session';
+export declare const startDeviceFlow: (kind: DeviceFlowKind, onEvent: (event: DeviceFlowEventDto) => void) => () => void;
+export declare const useCreateSession: () => import("@tanstack/svelte-query").CreateMutationResult<never, Error, string, unknown>;

package/dist/services/session.service.js

@@ -0,0 +1,19 @@
+import { createSession, defaults, } from '../fetch-client';
+import { queryClient } from '../query-client';
+import { handleError } from '../utils/handle-error';
+import { createMutation } from '@tanstack/svelte-query';
+export const startDeviceFlow = (kind, onEvent) => {
+    const source = new EventSource(`${defaults.baseUrl.replace(/\/$/, '')}/api/yucca/auth/${kind}/device`, { withCredentials: true });
+    source.addEventListener('message', (event) => {
+        onEvent(JSON.parse(event.data));
+    });
+    source.addEventListener('error', () => {
+        onEvent({ type: 'FAILURE', reason: 'UNKNOWN' });
+        source.close();
+    });
+    return () => source.close();
+};
+export const useCreateSession = () => createMutation(() => ({
+    mutationFn: (token) => createSession({ token }),
+    onError: (error) => handleError(error, 'Failed to log in'),
+}), () => queryClient);

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