@futo-org/backups-orchestrator-ui 0.26.0 → 0.28.0

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

@@ -0,0 +1,207 @@
+<script lang="ts">
+  import BackendsList from "../../../backends/BackendsList.svelte";
+  import Accordion from "../../../ui/Accordion.svelte";
+  import OnEvents from "../../../util/OnEvents.svelte";
+  import type { RetentionPolicyDto } from "../../../../fetch-client";
+  import {
+    useConfigureImmichIntegration,
+    useIntegrationEventHandler,
+    useIntegrations,
+  } from "../../../../services/integrations.service";
+  import {
+    useRepositories,
+    useRepositoryEventHandler,
+  } from "../../../../services/repository.service";
+  import {
+    useScheduleEventHandler,
+    useSchedules,
+  } from "../../../../services/schedule.service";
+  import {
+    Button,
+    Field,
+    HStack,
+    Input,
+    LoadingSpinner,
+    Select,
+    Stack,
+    Switch,
+  } from "@immich/ui";
+  import { mdiDownloadBox } from "@mdi/js";
+
+  type RetentionChoice = {
+    key: string;
+    label: string;
+    policy: RetentionPolicyDto | null;
+  };
+
+  const retentionChoices: RetentionChoice[] = [
+    { key: "15d", label: "After 15 days", policy: { keepWithin: "15d" } },
+    { key: "30d", label: "After 30 days", policy: { keepWithin: "30d" } },
+    { key: "60d", label: "After 60 days", policy: { keepWithin: "60d" } },
+    { key: "90d", label: "After 90 days", policy: { keepWithin: "90d" } },
+    { key: "2", label: "Keep latest two backups", policy: { keepLast: 2 } },
+    { key: "never", label: "Never (keep all backups)", policy: null },
+  ];
+
+  const defaultRetentionKey = "60d";
+
+  const integrations = useIntegrations();
+  const repositories = useRepositories();
+  const schedules = useSchedules();
+  const mutation = useConfigureImmichIntegration();
+
+  const { onIntegrationUpdate } = useIntegrationEventHandler();
+  const { onRepositoryCreate, onRepositoryUpdate, onRepositoryDelete } =
+    useRepositoryEventHandler();
+  const { onScheduleCreate, onScheduleUpdate, onScheduleDelete } =
+    useScheduleEventHandler();
+
+  const integration = $derived(integrations.data?.immichIntegration);
+
+  const repository = $derived(
+    integration
+      ? repositories.data?.find((entry) => entry.id === integration.id)
+      : undefined,
+  );
+
+  const schedule = $derived(
+    integration
+      ? schedules.data?.find((entry) => entry.id === integration.scheduleId)
+      : undefined,
+  );
+
+  const isLoading = $derived(
+    integrations.isLoading || repositories.isLoading || schedules.isLoading,
+  );
+
+  let name = $state("");
+  let worm = $state(false);
+  let retentionKey = $state(defaultRetentionKey);
+  let loaded = false;
+
+  const load = () => {
+    if (!repository) {
+      return;
+    }
+
+    name = repository.name;
+    worm = repository.worm;
+
+    const policy = repository.configuration?.retentionPolicy ?? null;
+    retentionKey =
+      retentionChoices.find(
+        (choice) => JSON.stringify(choice.policy) === JSON.stringify(policy),
+      )?.key ?? defaultRetentionKey;
+  };
+
+  $effect(() => {
+    if (loaded || !repository) {
+      return;
+    }
+
+    loaded = true;
+    load();
+  });
+
+  const onSave = () => {
+    if (!integration || !repository || !schedule) {
+      return;
+    }
+
+    mutation.mutate({
+      name,
+      cron: schedule.cron,
+      dataFolders: integration.configuration.dataFolders,
+      backupConfiguration: integration.configuration.backupConfiguration,
+      libraries: integration.configuration.libraries,
+      worm,
+      retentionPolicy: worm
+        ? null
+        : (retentionChoices.find((choice) => choice.key === retentionKey)
+            ?.policy ?? null),
+    });
+  };
+</script>
+
+<OnEvents
+  {onIntegrationUpdate}
+  {onRepositoryCreate}
+  {onRepositoryUpdate}
+  {onRepositoryDelete}
+  {onScheduleCreate}
+  {onScheduleUpdate}
+  {onScheduleDelete}
+/>
+
+<Accordion
+  title="Storage"
+  subtitle="Manage the backup name, where it is stored, and how long backups are kept."
+  icon={mdiDownloadBox}
+>
+  <Stack gap={4} class="pt-2">
+    {#if isLoading}
+      <LoadingSpinner />
+    {:else}
+      <Field
+        label="Backup name"
+        description="How this backup is labelled across FUTO Backups."
+        required="indicator"
+      >
+        <Input bind:value={name} />
+      </Field>
+
+      <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="grayscale brightness-90" />
+        </Field>
+      {:else}
+        <Field
+          label="Write-only"
+          description="Once written, backups can't be removed. This can't be turned off again."
+        >
+          <Switch bind:checked={worm} />
+        </Field>
+      {/if}
+
+      <Field
+        label="Delete old backups"
+        description="Older snapshots are pruned automatically."
+        disabled={worm}
+      >
+        <Select
+          options={retentionChoices.map(({ key, label }) => ({
+            value: key,
+            label,
+          }))}
+          value={worm ? "never" : retentionKey}
+          onChange={(value) => (retentionKey = value)}
+        />
+      </Field>
+
+      <HStack gap={2} class="justify-end">
+        <Button
+          shape="round"
+          color="secondary"
+          disabled={mutation.isPending}
+          onclick={load}
+        >
+          Reset
+        </Button>
+        <Button
+          shape="round"
+          disabled={name.trim().length === 0}
+          loading={mutation.isPending}
+          onclick={onSave}
+        >
+          Save
+        </Button>
+      </HStack>
+    {/if}
+  </Stack>
+</Accordion>

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

@@ -0,0 +1,3 @@
+declare const ImmichSettingsStorage: import("svelte").Component<Record<string, never>, {}, "">;
+type ImmichSettingsStorage = ReturnType<typeof ImmichSettingsStorage>;
+export default ImmichSettingsStorage;

package/dist/components/onboarding/RecoveryKeyDisplay.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
+  import { Button, Card, CardBody, HStack, Text, VStack } from "@immich/ui";
   import {
-    Button,
-    Card,
-    CardBody,
-    HStack,
-    VStack,
-  } from "@immich/ui";
-  import { mdiAsterisk, mdiContentCopy, mdiFile, mdiPrinter } from "@mdi/js";
+    mdiAsterisk,
+    mdiContentCopy,
+    mdiDownloadOutline,
+    mdiPrinterOutline,
+  } from "@mdi/js";
 
   type Props = {
     code: string;
@@ -69,29 +68,44 @@
   };
 </script>
 
-<Card class="bg-primary-50 shadow-none">
+<Card color="primary" class="shadow-none">
   <CardBody class="flex justify-center">
-    <pre><code>{code}</code></pre>
+    <Text size="large" fontWeight="semi-bold"
+      ><pre><code>{code}</code></pre></Text
+    >
   </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}
+    shape="round"
     variant="outline"
+    leadingIcon={mdiContentCopy}
     onclick={copyToClipboard}
   >
-    Copy to clipboard
+    Copy recovery key
   </Button>
-  {#if PasswordCredential}
+
+  <HStack>
+    <Button
+      leadingIcon={mdiDownloadOutline}
+      variant="ghost"
+      shape="round"
+      onclick={saveFile}
+    >
+      Download
+    </Button>
+    <Button
+      leadingIcon={mdiPrinterOutline}
+      variant="ghost"
+      shape="round"
+      onclick={print}
+    >
+      Print
+    </Button>
+  </HStack>
+
+  {#if /* intentionally hide this to not overcrowd the modal */ PasswordCredential && false}
     <Button
       leadingIcon={mdiAsterisk}
       variant="outline"

package/dist/components/onboarding/SampleOnboarding.svelte

@@ -1,20 +1,23 @@
 <script lang="ts">
   import type { OnboardingStatusResponseDto } from "../../fetch-client";
+  import {
+    handleSetupLocalStorage,
+    handleStartYuccaLogin,
+  } from "../../services/backend.service";
   import {
     handleConfirmRecoveryKey,
     handleCurrentRecoveryKey,
     handleSkipOnboardingExtraConfig,
   } from "../../services/onboarding.service";
+  import { Modal, ModalBody } from "@immich/ui";
   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 Telemetry from "./stages/OnboardingStageTelemetry.svelte";
-  import Welcome from "./stages/OnboardingStageWelcome.svelte";
+  import StepFinishSetup from "./steps/OnboardingStep1FinishSetup.svelte";
+  import StepConnectAccount from "./steps/OnboardingStep2ConnectAccount.svelte";
+  import StepSaveRecoveryKey from "./steps/OnboardingStep3SaveRecoveryKey.svelte";
 
   type Props = {
     status: OnboardingStatusResponseDto;
@@ -25,21 +28,23 @@
   const { status, onFinish, onCancel }: Props = $props();
 
   let code = $state("");
+  let confirming = $state(false);
 
   // svelte-ignore state_referenced_locally
   let stage:
-    | "welcome"
+    | "intro"
     | "telemetry"
-    | `key-${"intro" | "save" | "confirm" | "import"}`
-    | "backup-service"
+    | "key"
+    | "key-import"
+    | "connect"
     | "backup-create"
     | "schedule-create" = $state(
     !status.hasOnboardedKey
-      ? "welcome"
+      ? "intro"
       : status.hasTelemetry === "none"
         ? "telemetry"
         : !status.hasBackend
-          ? "backup-service"
+          ? "connect"
           : !status.hasBackup
             ? "backup-create"
             : "schedule-create",
@@ -57,56 +62,70 @@
   };
 
   const onConfirmKey = async () => {
-    await handleConfirmRecoveryKey();
+    confirming = true;
+
+    try {
+      await handleConfirmRecoveryKey();
 
-    if (status.hasBackend) {
-      onFinish();
-    } else {
-      stage = "backup-service";
+      if (status.hasBackend) {
+        onFinish();
+      } else {
+        stage = "connect";
+      }
+    } finally {
+      confirming = false;
     }
   };
+
+  const onBackendReady = () => (stage = "backup-create");
 </script>
 
-{#if stage === "welcome"}
-  <Welcome
-    onNext={() => (stage = status.hasTelemetry === "none" ? "telemetry" : "key-intro")}
-    onImportKey={() => (stage = "key-import")}
-    {onCancel}
-  />
+{#if stage === "intro"}
+  <Modal size="small" title="FUTO Backups" onClose={onCancel}>
+    <ModalBody>
+      <StepFinishSetup
+        onContinue={() =>
+          (stage = status.hasTelemetry === "none" ? "telemetry" : "key")}
+        onImportKey={() => (stage = "key-import")}
+      />
+    </ModalBody>
+  </Modal>
 {:else if stage === "telemetry"}
   <Telemetry
     onContinue={() =>
       (stage = !status.hasOnboardedKey
-        ? "key-intro"
+        ? "key"
         : !status.hasBackend
-          ? "backup-service"
+          ? "connect"
           : !status.hasBackup
             ? "backup-create"
             : "schedule-create")}
     {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"}
+  <Modal size="small" title="FUTO Backups" onClose={onCancel}>
+    <ModalBody>
+      <StepSaveRecoveryKey {code} onContinue={onConfirmKey} loading={confirming} />
+    </ModalBody>
+  </Modal>
 {:else if stage === "key-import"}
   <ImportKey
-    onStart={() => (stage = "welcome")}
+    onStart={() => (stage = "intro")}
     onImported={(key) => {
       code = key;
-      stage = "key-save";
+      stage = "key";
     }}
     {onCancel}
   />
-{:else if stage === "backup-service"}
-  <BackupOptions onNext={() => (stage = "backup-create")} {onCancel} />
+{:else if stage === "connect"}
+  <Modal size="small" title="FUTO Backups" onClose={onCancel}>
+    <ModalBody>
+      <StepConnectAccount
+        onConnect={() => handleStartYuccaLogin(onBackendReady)}
+        onLocalStorage={() => handleSetupLocalStorage(onBackendReady)}
+      />
+    </ModalBody>
+  </Modal>
 {:else if stage === "backup-create"}
   <CreateFirstBackup onNext={() => (stage = "schedule-create")} {onSkip} />
 {:else if stage === "schedule-create"}

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

@@ -1,6 +1,6 @@
 <script lang="ts">
   import StackList from "../../ui/StackList.svelte";
-  import StackListItem from "../../ui/StackListItem.svelte";
+  import StackListOption from "../../ui/StackListOption.svelte";
   import {
     handleSetupLocalStorage,
     handleStartYuccaLogin,
@@ -15,7 +15,7 @@
     Stack,
     Text,
   } from "@immich/ui";
-  import { mdiChevronRight, mdiHarddisk, mdiShieldCheck } from "@mdi/js";
+  import { mdiHarddisk, mdiShieldCheck } from "@mdi/js";
 
   type Props = {
     restore?: boolean;
@@ -44,34 +44,20 @@
 >
   <ModalBody>
     <StackList>
-      <StackListItem onclick={onFutoBackups}>
+      <StackListOption title="FUTO Backups" onclick={onFutoBackups}>
         {#snippet icon()}
-          <Icon icon={mdiShieldCheck} size="36px" />
+          <Icon icon={mdiShieldCheck} />
         {/snippet}
 
-        <Stack gap={0}>
-          <Text class="font-bold">FUTO Backups</Text>
-          <Text>Simple, hosted backups.</Text>
-        </Stack>
-
-        {#snippet trailing()}
-          <Icon icon={mdiChevronRight} />
-        {/snippet}
-      </StackListItem>
-      <StackListItem onclick={onLocalBackups}>
+        Simple, hosted backups.
+      </StackListOption>
+      <StackListOption title="Local Storage" onclick={onLocalBackups}>
         {#snippet icon()}
-          <Icon icon={mdiHarddisk} size="36px" />
+          <Icon icon={mdiHarddisk} />
         {/snippet}
 
-        <Stack gap={0}>
-          <Text class="font-bold">Local Storage</Text>
-          <Text>A folder on this computer.</Text>
-        </Stack>
-
-        {#snippet trailing()}
-          <Icon icon={mdiChevronRight} />
-        {/snippet}
-      </StackListItem>
+        A folder on this computer.
+      </StackListOption>
     </StackList>
   </ModalBody>
   <ModalFooter>

package/dist/components/onboarding/steps/OnboardingStep1FinishSetup.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import StepNumber from "../../ui/StepNumber.svelte";
+  import { HStack, Stack, Text } from "@immich/ui";
+  import OnboardingStepLayout, {
+    type OnboardingStepAction,
+  } from "./OnboardingStepLayout.svelte";
+
+  type Props = {
+    onContinue: () => void;
+    onImportKey?: () => void;
+  };
+
+  const { onContinue, onImportKey }: Props = $props();
+
+  const steps = [
+    "Connect FUTO account",
+    "Save your recovery key",
+    "Start your first backup",
+  ];
+
+  const actions: OnboardingStepAction[] = [
+    { label: "Continue", onClick: () => onContinue() },
+    {
+      label: "Import key",
+      onClick: () => onImportKey?.(),
+      $if: () => !!onImportKey,
+    },
+  ];
+</script>
+
+<OnboardingStepLayout
+  title="Finish setting up FUTO Backups"
+  description="Your subscription is active. Finish setup to create your recovery key and start backing up your Immich library."
+  {actions}
+>
+  <Stack gap={3}>
+    {#each steps as step, index (step)}
+      <HStack gap={3} class="items-center">
+        <StepNumber step={index + 1} size="small" />
+        <Text size="small">{step}</Text>
+      </HStack>
+    {/each}
+  </Stack>
+</OnboardingStepLayout>

package/dist/components/onboarding/steps/OnboardingStep1FinishSetup.svelte.d.ts

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

package/dist/components/onboarding/steps/OnboardingStep2ConnectAccount.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  import { HStack, Icon, Stack, Text } from "@immich/ui";
+  import { mdiCheckCircle } from "@mdi/js";
+  import OnboardingStepLayout, {
+    type OnboardingStepAction,
+  } from "./OnboardingStepLayout.svelte";
+
+  type Props = {
+    onConnect: () => void;
+    onLocalStorage?: () => void;
+  };
+
+  const { onConnect, onLocalStorage }: Props = $props();
+
+  const outcomes = [
+    "Link this server to your FUTO Backups subscription",
+    "Allow Immich to upload encrypted backups",
+    "Return you here to finish setup",
+  ];
+
+  const actions: OnboardingStepAction[] = [
+    { label: "Connect account", onClick: () => onConnect() },
+    {
+      label: "Use local storage",
+      onClick: () => onLocalStorage?.(),
+      $if: () => !!onLocalStorage,
+    },
+  ];
+</script>
+
+<OnboardingStepLayout
+  title="Connect your FUTO account"
+  description="Connect your FUTO account to this Immich server so FUTO Backups can store your encrypted backups."
+  {actions}
+>
+  <Stack gap={3}>
+    <Text fontWeight="semi-bold" size="small">This will:</Text>
+
+    {#each outcomes as outcome (outcome)}
+      <HStack gap={3} class="items-center">
+        <Icon
+          icon={mdiCheckCircle}
+          size="1.25rem"
+          class="text-primary shrink-0"
+        />
+        <Text size="small">{outcome}</Text>
+      </HStack>
+    {/each}
+  </Stack>
+</OnboardingStepLayout>

package/dist/components/onboarding/steps/OnboardingStep2ConnectAccount.svelte.d.ts

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

package/dist/components/onboarding/steps/OnboardingStep3SaveRecoveryKey.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  import RecoveryKeyDisplay from "../RecoveryKeyDisplay.svelte";
+  import { Checkbox, HStack, Stack, Text } from "@immich/ui";
+  import OnboardingStepLayout, {
+    type OnboardingStepAction,
+  } from "./OnboardingStepLayout.svelte";
+
+  type Props = {
+    code: string;
+    onContinue: () => void;
+    loading?: boolean;
+  };
+
+  const { code, onContinue, loading = false }: Props = $props();
+
+  let saved = $state(false);
+
+  const actions = $derived<OnboardingStepAction[]>([
+    {
+      label: "Continue",
+      onClick: onContinue,
+      disabled: !saved,
+      loading,
+    },
+  ]);
+</script>
+
+<OnboardingStepLayout
+  title="Save your recovery key"
+  description="You'll need this key to restore your encrypted backups. Save it somewhere safe before continuing. FUTO cannot recover this key if it is lost."
+  {actions}
+>
+  <Stack gap={4}>
+    <RecoveryKeyDisplay {code} />
+
+    <HStack gap={3} class="items-center">
+      <Checkbox bind:checked={saved} id="recovery-key-saved" />
+      <Text size="small">
+        <label for="recovery-key-saved">
+          I saved my recovery key somewhere safe.
+        </label>
+      </Text>
+    </HStack>
+  </Stack>
+</OnboardingStepLayout>

package/dist/components/onboarding/steps/OnboardingStep3SaveRecoveryKey.svelte.d.ts

@@ -0,0 +1,8 @@
+type Props = {
+    code: string;
+    onContinue: () => void;
+    loading?: boolean;
+};
+declare const OnboardingStep3SaveRecoveryKey: import("svelte").Component<Props, {}, "">;
+type OnboardingStep3SaveRecoveryKey = ReturnType<typeof OnboardingStep3SaveRecoveryKey>;
+export default OnboardingStep3SaveRecoveryKey;