feat: 3-2-1 backup onboarding card (#20374)

* feat: 3-2-1 backup onboarding card

* chore: format i18n

* fix: lint

* Update onboarding-backup.svelte

* fix: e2e onboarding test

Author: bwees

e2e/src/web/specs/auth.e2e-spec.ts

@@ -37,6 +37,7 @@ test.describe('Registration', () => {
     await page.getByRole('button', { name: 'Server Privacy' }).click();
     await page.getByRole('button', { name: 'User Privacy' }).click();
     await page.getByRole('button', { name: 'Storage Template' }).click();
+    await page.getByRole('button', { name: 'Backups' }).click();
     await page.getByRole('button', { name: 'Done' }).click();
 
     // success

i18n/en.json

@@ -44,6 +44,13 @@
     "backup_database": "Create Database Dump",
     "backup_database_enable_description": "Enable database dumps",
     "backup_keep_last_amount": "Amount of previous dumps to keep",
+    "backup_onboarding_1_description": "offsite copy in the cloud or at another physical location.",
+    "backup_onboarding_2_description": "local copies on different devices. This includes the main files and a backup of those files locally.",
+    "backup_onboarding_3_description": "total copies of your data, including the original files. This includes 1 offsite copy and 2 local copies.",
+    "backup_onboarding_description": "A <backblaze-link>3-2-1 backup strategy</backblaze-link> is recommended to protect your data. You should keep copies of your uploaded photos/videos as well as the Immich database for a comprehensive backup solution.",
+    "backup_onboarding_footer": "For more information about backing up Immich, please refer to the <link>documentation</link>.",
+    "backup_onboarding_parts_title": "A 3-2-1 backup includes:",
+    "backup_onboarding_title": "Backups",
     "backup_settings": "Database Dump Settings",
     "backup_settings_description": "Manage database dump settings.",
     "cleared_jobs": "Cleared jobs for: {job}",

web/src/lib/components/onboarding-page/onboarding-backup.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+  import Icon from '$lib/components/elements/icon.svelte';
+  import FormatBoldMessage from '$lib/components/i18n/format-bold-message.svelte';
+  import FormatMessage from '$lib/components/i18n/format-message.svelte';
+  import { Heading, HStack, Stack } from '@immich/ui';
+  import { mdiAlert } from '@mdi/js';
+</script>
+
+<div class="flex flex-col">
+  <Stack gap={2}>
+    <HStack gap={4}>
+      <Icon path={mdiAlert} size="96" class="text-warning" />
+      <p class="mb-2">
+        <FormatMessage key="admin.backup_onboarding_description">
+          {#snippet children({ message })}
+            <a
+              href="https://www.backblaze.com/blog/the-3-2-1-backup-strategy/"
+              class="underline"
+              target="_blank"
+              rel="noreferrer"
+            >
+              {message}
+            </a>
+          {/snippet}
+        </FormatMessage>
+      </p>
+    </HStack>
+
+    <p class="text-lg font-semibold">
+      <FormatBoldMessage key="admin.backup_onboarding_parts_title"></FormatBoldMessage>
+    </p>
+
+    <Stack class="bg-gray-100 dark:bg-gray-800 rounded-xl p-4" gap={4}>
+      <HStack gap={6}>
+        <Heading tag="h1" size="title" color="primary">3</Heading>
+        <FormatMessage key="admin.backup_onboarding_3_description" />
+      </HStack>
+      <HStack gap={6}>
+        <Heading tag="h1" size="title" color="primary">2</Heading>
+        <FormatMessage key="admin.backup_onboarding_2_description" />
+      </HStack>
+      <HStack gap={6} class="ml-2">
+        <Heading tag="h1" size="title" color="primary">1</Heading>
+        <FormatMessage key="admin.backup_onboarding_1_description" />
+      </HStack>
+    </Stack>
+    <p>
+      <FormatMessage key="admin.backup_onboarding_footer">
+        {#snippet children({ message })}
+          <a
+            href="https://immich.app/docs/administration/backup-and-restore/"
+            class="underline"
+            target="_blank"
+            rel="noreferrer"
+          >
+            {message}
+          </a>
+        {/snippet}
+      </FormatMessage>
+    </p>
+  </Stack>
+</div>

web/src/routes/auth/onboarding/+page.svelte

@@ -8,12 +8,13 @@
   import OnboardingStorageTemplate from '$lib/components/onboarding-page/onboarding-storage-template.svelte';
   import OnboardingTheme from '$lib/components/onboarding-page/onboarding-theme.svelte';
   import OnboardingUserPrivacy from '$lib/components/onboarding-page/onboarding-user-privacy.svelte';
+  import OnboardingBackup from '$lib/components/onboarding-page/onboarding-backup.svelte';
   import { AppRoute, QueryParameter } from '$lib/constants';
   import { OnboardingRole } from '$lib/models/onboarding-role';
   import { retrieveServerConfig, retrieveSystemConfig, serverConfig } from '$lib/stores/server-config.store';
   import { user } from '$lib/stores/user.store';
   import { setUserOnboarding, updateAdminOnboarding } from '@immich/sdk';
-  import { mdiHarddisk, mdiIncognito, mdiThemeLightDark, mdiTranslate } from '@mdi/js';
+  import { mdiCloudUpload, mdiHarddisk, mdiIncognito, mdiThemeLightDark, mdiTranslate } from '@mdi/js';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
 
@@ -68,6 +69,13 @@
       title: $t('admin.storage_template_settings'),
       icon: mdiHarddisk,
     },
+    {
+      name: 'backup',
+      component: OnboardingBackup,
+      role: OnboardingRole.SERVER,
+      title: $t('admin.backup_onboarding_title'),
+      icon: mdiCloudUpload,
+    },
   ]);
 
   let index = $state(0);