@futo-org/backups-orchestrator-ui 0.1.71

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

@@ -0,0 +1,75 @@
+<script lang="ts">
+  import OnboardingStageBackupServices from "../../onboarding/stages/OnboardingStageBackupServices.svelte";
+  import OnboardingStageKeyImport from "../../onboarding/stages/OnboardingStageKeyImport.svelte";
+  import RestorePointFlow from "../../onboarding/restore-point-flow/RestorePointFlow.svelte";
+  import type { OnboardingStatusResponseDto } from "../../../fetch-client";
+  import {
+    handleConfirmRecoveryKey,
+    handleOnboardingStatus,
+  } from "../../../services/onboarding.service";
+  import { LoadingSpinner } from "@immich/ui";
+  import { onMount } from "svelte";
+
+  type Props = {
+    onExit: () => void;
+    onFinish: () => void;
+  };
+
+  const { onExit, onFinish }: Props = $props();
+
+  let status: OnboardingStatusResponseDto | undefined = $state();
+  let stage:
+    | "key-import"
+    | "backup-service"
+    | "restore-point"
+    | "key-reimport" = $state("key-import");
+
+  onMount(() => {
+    handleOnboardingStatus().then((data) => {
+      status = data;
+
+      if (data.hasOnboardedKey) {
+        if (data.hasBackend) {
+          stage = "restore-point";
+        } else {
+          stage = "backup-service";
+        }
+      }
+    });
+  });
+
+  const onKeyImported = async () => {
+    await handleConfirmRecoveryKey();
+
+    if (status?.hasBackend) {
+      stage = "restore-point";
+    } else {
+      stage = "backup-service";
+    }
+  };
+</script>
+
+{#if typeof status === "object"}
+  {#if stage === "key-import"}
+    <OnboardingStageKeyImport onImported={onKeyImported} onCancel={onExit} />
+  {:else if stage === "backup-service"}
+    <OnboardingStageBackupServices
+      onNext={() => (stage = "restore-point")}
+      onCancel={onExit}
+      restore
+    />
+  {:else if stage === "key-reimport"}
+    <OnboardingStageKeyImport
+      onImported={() => (stage = "restore-point")}
+      onCancel={() => (stage = "restore-point")}
+    />
+  {:else if stage === "restore-point"}
+    <RestorePointFlow
+      onImportKey={() => (stage = "key-reimport")}
+      onCancel={onExit}
+      {onFinish}
+    />
+  {/if}
+{:else}
+  <LoadingSpinner />
+{/if}

package/dist/components/integrations/immich/ImmichOnboardingRestoreFlow.svelte.d.ts

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

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

@@ -0,0 +1,113 @@
+<script lang="ts">
+  import OnboardingStageBackupServices from "../../onboarding/stages/OnboardingStageBackupServices.svelte";
+  import OnboardingStageKeyConfirm from "../../onboarding/stages/OnboardingStageKeyConfirm.svelte";
+  import OnboardingStageKeyImport from "../../onboarding/stages/OnboardingStageKeyImport.svelte";
+  import OnboardingStageKeyIntro from "../../onboarding/stages/OnboardingStageKeyIntro.svelte";
+  import OnboardingStageSaveKey from "../../onboarding/stages/OnboardingStageKeySave.svelte";
+  import OnboardingStageWelcome from "../../onboarding/stages/OnboardingStageWelcome.svelte";
+  import type { OnboardingStatusResponseDto } from "../../../fetch-client";
+  import {
+    handleConfirmRecoveryKey,
+    handleCurrentRecoveryKey,
+    handleOnboardingStatus,
+  } from "../../../services/onboarding.service";
+  import { LoadingSpinner } from "@immich/ui";
+  import { onMount, type Snippet } from "svelte";
+  import ImmichConfigureBackup from "./ImmichConfigureBackup.svelte";
+  import ImmichConfirmDefaultBackup from "./ImmichConfirmDefaultBackup.svelte";
+
+  type Props = {
+    onExit: () => void;
+    children: Snippet;
+  };
+
+  const { onExit, children }: Props = $props();
+
+  let code = $state("");
+  let backendId = $state("");
+  let status: OnboardingStatusResponseDto | undefined = $state();
+  let stage:
+    | `welcome`
+    | `key-${"intro" | "save" | "confirm" | "import"}`
+    | `backup-${"service" | "confirm" | "create"}`
+    | `finished` = $state("welcome");
+
+  onMount(() => {
+    handleOnboardingStatus().then(async (data) => {
+      status = data;
+
+      if (data.hasOnboardedKey) {
+        if (data.hasBackup) {
+          stage = "finished";
+        } else {
+          stage = "backup-service";
+        }
+      } else {
+        const { recoveryKey } = await handleCurrentRecoveryKey();
+        code = recoveryKey;
+      }
+    });
+  });
+
+  const onConfirmKey = async () => {
+    await handleConfirmRecoveryKey();
+    stage = "backup-service";
+  };
+
+  const onSelectBackend = (id: string) => {
+    backendId = id;
+    stage = "backup-confirm";
+  };
+</script>
+
+{#if typeof status === "object"}
+  {#if stage === "finished"}
+    {@render children()}
+  {:else if stage === "welcome"}
+    <OnboardingStageWelcome
+      onNext={() => (stage = "key-intro")}
+      onImportKey={() => (stage = "key-import")}
+      onCancel={onExit}
+    />
+  {:else if stage === "key-import"}
+    <OnboardingStageKeyImport
+      onStart={() => (stage = "welcome")}
+      onImported={() => (stage = "key-confirm")}
+      onCancel={onExit}
+    />
+  {:else if stage === "key-intro"}
+    <OnboardingStageKeyIntro
+      onNext={() => (stage = "key-save")}
+      onCancel={onExit}
+    />
+  {:else if stage === "key-save"}
+    <OnboardingStageSaveKey
+      {code}
+      onNext={() => (stage = "key-confirm")}
+      onCancel={onExit}
+    />
+  {:else if stage === "key-confirm"}
+    <OnboardingStageKeyConfirm
+      {code}
+      onBack={() => (stage = "key-save")}
+      onCancel={onExit}
+      {onConfirmKey}
+    />
+  {:else if stage === "backup-service"}
+    <OnboardingStageBackupServices onNext={onSelectBackend} onCancel={onExit} />
+  {:else if stage === "backup-confirm"}
+    <ImmichConfirmDefaultBackup
+      onCustomize={() => (stage = "backup-create")}
+      onConfirm={() => (stage = "finished")}
+      onCancel={onExit}
+    />
+  {:else if stage === "backup-create"}
+    <ImmichConfigureBackup
+      onFinish={() => (stage = "finished")}
+      onCancel={onExit}
+      {backendId}
+    />
+  {/if}
+{:else}
+  <LoadingSpinner />
+{/if}

package/dist/components/integrations/immich/ImmichOnboardingSetupFlow.svelte.d.ts

@@ -0,0 +1,8 @@
+import { type Snippet } from "svelte";
+type Props = {
+    onExit: () => void;
+    children: Snippet;
+};
+declare const ImmichOnboardingSetupFlow: import("svelte").Component<Props, {}, "">;
+type ImmichOnboardingSetupFlow = ReturnType<typeof ImmichOnboardingSetupFlow>;
+export default ImmichOnboardingSetupFlow;

package/dist/components/onboarding/OnboardingGate.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import { LoadingSpinner } from "@immich/ui";
+  import { onMount, type Snippet } from "svelte";
+  import SampleOnboarding from "./SampleOnboarding.svelte";
+  import type { OnboardingStatusResponseDto } from "../../fetch-client";
+  import { handleOnboardingStatus } from "../../services/onboarding.service";
+
+  type Props = {
+    onExit: () => void;
+    onFinish?: () => void;
+    children: Snippet;
+  };
+
+  const { onExit, onFinish, children }: Props = $props();
+
+  let status: OnboardingStatusResponseDto | undefined = $state();
+
+  onMount(() => {
+    handleOnboardingStatus().then((data) => (status = data));
+  });
+
+  function onSkip() {
+    status = {
+      hasBackend: true,
+      hasOnboardedKey: true,
+      hasBackup: true,
+      hasSchedule: true,
+      hasSkippedExtraConfig: true,
+    };
+  }
+</script>
+
+{#if typeof status === "object"}
+  {#if !(status.hasBackend && status.hasOnboardedKey && (status.hasSkippedExtraConfig || (status.hasBackup && status.hasSchedule)))}
+    <SampleOnboarding
+      {status}
+      onFinish={() => (onFinish ? onFinish() : onSkip())}
+      onCancel={() => {
+        onSkip();
+        onExit();
+      }}
+    />
+  {:else}
+    {@render children()}
+  {/if}
+{:else}
+  <LoadingSpinner />
+{/if}

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

@@ -0,0 +1,9 @@
+import { type Snippet } from "svelte";
+type Props = {
+    onExit: () => void;
+    onFinish?: () => void;
+    children: Snippet;
+};
+declare const OnboardingGate: import("svelte").Component<Props, {}, "">;
+type OnboardingGate = ReturnType<typeof OnboardingGate>;
+export default OnboardingGate;

package/dist/components/onboarding/RecoveryKeyDisplay.svelte

@@ -0,0 +1,103 @@
+<script lang="ts">
+  import {
+    Button,
+    Card,
+    CardBody,
+    HStack,
+    VStack,
+  } from "@immich/ui";
+  import { mdiAsterisk, mdiContentCopy, mdiFile, mdiPrinter } from "@mdi/js";
+
+  type Props = {
+    code: string;
+  };
+
+  const { code: actualCode }: Props = $props();
+
+  const code = $derived(
+    actualCode
+      .toUpperCase()
+      .match(/.{1,16}/g)!
+      .map((line) => line.match(/.{1,4}/g)!.join(" "))
+      .join("\n"),
+  );
+
+  const print = () => window.print();
+
+  const saveFile = async () => {
+    const saveWithFilePicker = (
+      window as never as { showSaveFilePicker: Function }
+    ).showSaveFilePicker;
+    if (saveWithFilePicker) {
+      const handle = await saveWithFilePicker({
+        suggestedName: "backups-recovery-code.txt",
+        types: [{ accept: { "text/plain": [".txt"] } }],
+      });
+      const writable = await handle.createWritable();
+      await writable.write(code);
+      await writable.close();
+    } else {
+      const blob = new Blob([code], { type: "text/plain" });
+      const url = URL.createObjectURL(blob);
+
+      const anchor = document.createElement("a");
+      anchor.href = url;
+      anchor.download = "backups-recovery-code.txt";
+      anchor.click();
+
+      URL.revokeObjectURL(url);
+    }
+  };
+
+  const copyToClipboard = () => navigator.clipboard.writeText(code);
+
+  const PasswordCredential =
+    typeof window !== "undefined"
+      ? (window as never as { PasswordCredential: any }).PasswordCredential
+      : undefined;
+
+  const storeCredentials = async () => {
+    if (PasswordCredential) {
+      const cred = new PasswordCredential({
+        id: "Backups Recovery Code",
+        password: code,
+        name: "Backups Recovery Code",
+      });
+
+      await navigator.credentials.store(cred);
+    }
+  };
+</script>
+
+<Card class="bg-primary-50 shadow-none">
+  <CardBody class="flex justify-center">
+    <pre><code>{code}</code></pre>
+  </CardBody>
+</Card>
+
+<VStack>
+  <HStack>
+    <Button leadingIcon={mdiPrinter} variant="outline" onclick={print}>
+      Print
+    </Button>
+    <Button leadingIcon={mdiFile} variant="outline" onclick={saveFile}>
+      Save as file
+    </Button>
+  </HStack>
+  <Button
+    leadingIcon={mdiContentCopy}
+    variant="outline"
+    onclick={copyToClipboard}
+  >
+    Copy to clipboard
+  </Button>
+  {#if PasswordCredential}
+    <Button
+      leadingIcon={mdiAsterisk}
+      variant="outline"
+      onclick={storeCredentials}
+    >
+      Save to password manager
+    </Button>
+  {/if}
+</VStack>

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

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

package/dist/components/onboarding/SampleOnboarding.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+  import type { OnboardingStatusResponseDto } from "../../fetch-client";
+  import {
+    handleConfirmRecoveryKey,
+    handleCurrentRecoveryKey,
+    handleSkipOnboardingExtraConfig,
+  } from "../../services/onboarding.service";
+  import { onMount } from "svelte";
+  import CreateFirstBackup from "./stages/SampleCreateFirstBackup.svelte";
+  import CreateFirstSchedule from "./stages/SampleCreateFirstSchedule.svelte";
+  import BackupOptions from "./stages/OnboardingStageBackupServices.svelte";
+  import ConfirmKey from "./stages/OnboardingStageKeyConfirm.svelte";
+  import ImportKey from "./stages/OnboardingStageKeyImport.svelte";
+  import KeyIntro from "./stages/OnboardingStageKeyIntro.svelte";
+  import SaveKey from "./stages/OnboardingStageKeySave.svelte";
+  import Welcome from "./stages/OnboardingStageWelcome.svelte";
+
+  type Props = {
+    status: OnboardingStatusResponseDto;
+    onFinish: () => void;
+    onCancel: () => void;
+  };
+
+  const { status, onFinish, onCancel }: Props = $props();
+
+  let code = $state("");
+
+  // svelte-ignore state_referenced_locally
+  let stage:
+    | "welcome"
+    | `key-${"intro" | "save" | "confirm" | "import"}`
+    | "backup-service"
+    | "backup-create"
+    | "schedule-create" = $state(
+    !status.hasOnboardedKey
+      ? "welcome"
+      : !status.hasBackend
+        ? "backup-service"
+        : !status.hasBackup
+          ? "backup-create"
+          : "schedule-create",
+  );
+
+  onMount(() => {
+    if (!status.hasOnboardedKey) {
+      handleCurrentRecoveryKey().then((dto) => (code = dto.recoveryKey));
+    }
+  });
+
+  const onSkip = () => {
+    void handleSkipOnboardingExtraConfig();
+    onFinish();
+  };
+
+  const onConfirmKey = async () => {
+    await handleConfirmRecoveryKey();
+
+    if (status.hasBackend) {
+      onFinish();
+    } else {
+      stage = "backup-service";
+    }
+  };
+</script>
+
+{#if stage === "welcome"}
+  <Welcome
+    onNext={() => (stage = "key-intro")}
+    onImportKey={() => (stage = "key-import")}
+    {onCancel}
+  />
+{:else if stage === "key-intro"}
+  <KeyIntro onNext={() => (stage = "key-save")} {onCancel} />
+{:else if stage === "key-save"}
+  <SaveKey {code} onNext={() => (stage = "key-confirm")} {onCancel} />
+{:else if stage === "key-confirm"}
+  <ConfirmKey
+    {code}
+    {onConfirmKey}
+    onBack={() => (stage = "key-save")}
+    {onCancel}
+  />
+{:else if stage === "key-import"}
+  <ImportKey
+    onStart={() => (stage = "welcome")}
+    onImported={(key) => {
+      code = key;
+      stage = "key-save";
+    }}
+    {onCancel}
+  />
+{:else if stage === "backup-service"}
+  <BackupOptions onNext={() => (stage = "backup-create")} {onCancel} />
+{:else if stage === "backup-create"}
+  <CreateFirstBackup onNext={() => (stage = "schedule-create")} {onSkip} />
+{:else if stage === "schedule-create"}
+  <CreateFirstSchedule {onFinish} {onSkip} />
+{/if}

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

@@ -0,0 +1,9 @@
+import type { OnboardingStatusResponseDto } from "../../fetch-client";
+type Props = {
+    status: OnboardingStatusResponseDto;
+    onFinish: () => void;
+    onCancel: () => void;
+};
+declare const SampleOnboarding: import("svelte").Component<Props, {}, "">;
+type SampleOnboarding = ReturnType<typeof SampleOnboarding>;
+export default SampleOnboarding;

package/dist/components/onboarding/dialogs/BackupsRecoveryKeyModal.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import Suspense from "../../util/Suspense.svelte";
+  import { useRecoveryKey } from "../../../services/onboarding.service";
+  import {
+    Button,
+    HStack,
+    Modal,
+    ModalBody,
+    ModalFooter,
+    Stack,
+    Text,
+  } from "@immich/ui";
+  import RecoveryKeyDisplay from "../RecoveryKeyDisplay.svelte";
+
+  type Props = {
+    onClose: () => void;
+  };
+
+  const { onClose }: Props = $props();
+
+  const query = useRecoveryKey();
+</script>
+
+<Modal size="small" title="Recovery key" {onClose} icon={false}>
+  <ModalBody>
+    <Stack gap={4}>
+      <Text size="small" class="text-muted text-left">
+        Keep this key somewhere safe. It is required to restore your backups.
+      </Text>
+
+      <Suspense {query}>
+        {#snippet children({ recoveryKey })}
+          <RecoveryKeyDisplay code={recoveryKey} />
+        {/snippet}
+      </Suspense>
+    </Stack>
+  </ModalBody>
+  <ModalFooter>
+    <HStack>
+      <Button onclick={onClose}>Close</Button>
+    </HStack>
+  </ModalFooter>
+</Modal>

package/dist/components/onboarding/dialogs/BackupsRecoveryKeyModal.svelte.d.ts

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

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

@@ -0,0 +1,96 @@
+<script lang="ts">
+  import StackList from "../../ui/StackList.svelte";
+  import { useInspectRepositories } from "../../../services/repository.service";
+  import {
+    Button,
+    HStack,
+    Modal,
+    ModalBody,
+    ModalFooter,
+    Stack,
+    Text,
+  } from "@immich/ui";
+  import RestorePointFlow2SelectSnapshot from "./RestorePointFlow2SelectSnapshot.svelte";
+
+  type Props = {
+    onCancel: () => void;
+    onImportKey: () => void;
+    onFinish: () => void;
+  };
+
+  const { onCancel, onImportKey, onFinish }: Props = $props();
+
+  const query = useInspectRepositories();
+
+  const sortedRepositories = $derived(
+    query.data?.toSorted((a, b) => {
+      const validA = a.snapshots !== undefined;
+      const validB = b.snapshots !== undefined;
+      return validA !== validB
+        ? Number(validB) - Number(validA)
+        : Number(b.name.includes("Immich")) - Number(a.name.includes("Immich"));
+    }),
+  );
+
+  let selectedRepository: string | undefined = $state();
+
+  const repository = $derived(
+    query.data?.find((repository) => {
+      return repository.id === selectedRepository;
+    }),
+  );
+</script>
+
+{#if repository}
+  <RestorePointFlow2SelectSnapshot
+    onBack={() => (selectedRepository = undefined)}
+    {repository}
+    {onFinish}
+  />
+{:else}
+  <Modal title="Select Backup" size="small" onClose={onCancel}>
+    <ModalBody>
+      <StackList {query}>
+        {#snippet children()}
+          {#each sortedRepositories ?? [] as repo (repo.id)}
+            {@const accessible = repo.snapshots !== undefined}
+            <HStack gap={2} class="px-4 py-3">
+              <Stack gap={0} class="grow min-w-0">
+                <Text>{repo.name}</Text>
+                <Text size="small" color={accessible ? "secondary" : "danger"}>
+                  {#if !accessible}
+                    Unable to access repository
+                  {:else if repo.snapshots.length}
+                    Last backup: {new Date(
+                      repo.snapshots[0].time,
+                    ).toLocaleDateString()}
+                  {:else}
+                    No backups yet
+                  {/if}
+                </Text>
+              </Stack>
+              {#if accessible}
+                <Button onclick={() => (selectedRepository = repo.id)}>
+                  Select
+                </Button>
+              {/if}
+            </HStack>
+          {/each}
+          {#if (sortedRepositories ?? []).length === 0}
+            <Text class="text-center py-6" color="muted">
+              No repositories found.
+            </Text>
+          {/if}
+        {/snippet}
+      </StackList>
+    </ModalBody>
+    <ModalFooter>
+      <HStack>
+        <Button variant="ghost" onclick={onCancel}>Cancel</Button>
+        <Button variant="ghost" onclick={onImportKey}
+          >Import a different key</Button
+        >
+      </HStack>
+    </ModalFooter>
+  </Modal>
+{/if}

package/dist/components/onboarding/restore-point-flow/RestorePointFlow.svelte.d.ts

@@ -0,0 +1,8 @@
+type Props = {
+    onCancel: () => void;
+    onImportKey: () => void;
+    onFinish: () => void;
+};
+declare const RestorePointFlow: import("svelte").Component<Props, {}, "">;
+type RestorePointFlow = ReturnType<typeof RestorePointFlow>;
+export default RestorePointFlow;