feat(web): onboarding (#6066)

* feat(web): onboarding * feat: openapi * feat: modulization * feat: page advancing * Animation * Add storage templaete settings * sql * more style * Theme * information and styling * hide/show table * Styling * Update user property * fix test * fix test: * fix e2e * test * Update web/src/lib/components/onboarding-page/onboarding-hello.svelte Co-authored-by: bo0tzz <git@bo0tzz.me> * naming * use System Metadata * better return type * onboarding using server metadata * revert previous changes in user entity * sql * test web * fix test server * server/web test * more test * consolidate color theme change logic * consolidate save button to storage template * merge main * fix web --------- Co-authored-by: bo0tzz <git@bo0tzz.me>
2024-01-03 23:28:32 -06:00
parent f8d64be13c
commit 18f59f78e3
35 changed files with 698 additions and 111 deletions
@@ -0,0 +1,25 @@
+<script lang="ts">
+  import OnboardingHello from '$lib/components/onboarding-page/onboarding-hello.svelte';
+  import OnboardingTheme from '$lib/components/onboarding-page/onboarding-theme.svelte';
+  import OnboadingStorageTemplate from '$lib/components/onboarding-page/onboarding-storage-template.svelte';
+  import { api } from '@api';
+  import { goto } from '$app/navigation';
+  import { AppRoute } from '$lib/constants';
+
+  let index = 0;
+
+  let onboardingSteps = [OnboardingHello, OnboardingTheme, OnboadingStorageTemplate];
+
+  const handleDoneClicked = async () => {
+    index++;
+
+    if (index >= onboardingSteps.length) {
+      await api.serverInfoApi.setAdminOnboarding();
+      goto(AppRoute.PHOTOS);
+    }
+  };
+</script>
+
+<section id="onboarding-page" class="min-w-screen flex min-h-screen place-content-center place-items-center p-4">
+  <svelte:component this={onboardingSteps[index]} on:done={handleDoneClicked} />
+</section>