feat: setup complete

client/src/components/onboarding/InfoBox.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+const props = defineProps({
+  icon: {
+    type: String,
+    default: "it-icon-info",
+  },
+  color: {
+    type: String,
+    default: "text-inherit",
+  },
+});
+</script>
+
+<template>
+  <div class="mb-8 flex items-center space-x-4 border px-8 py-4">
+    <component
+      :is="props.icon"
+      :class="['block aspect-square h-16 w-auto', props.color]"
+    />
+    <slot name="content"></slot>
+  </div>
+</template>

client/src/components/onboarding/WizardPage.vue

@@ -12,7 +12,11 @@ const props = defineProps<{
       <ItNavigationProgress :steps="3" :current-step="props.step" />
       <slot name="content"></slot>
     </div>
-    <div class="flex justify-end border border-t px-6 py-4">
+
+    <div
+      class="flex justify-end space-x-2 px-6 py-4"
+      :class="{ 'border border-t': $slots.footer }"
+    >
       <slot name="footer"></slot>
     </div>
   </div>

client/src/pages/onboarding/uk/AccountConfirm.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import WizardPage from "@/components/onboarding/WizardPage.vue";
 import { useUserStore } from "@/stores/user";
+import InfoBox from "@/components/onboarding/InfoBox.vue";
 
 const userStore = useUserStore();
 </script>
@@ -9,15 +10,15 @@ const userStore = useUserStore();
   <WizardPage :step="0.5">
     <template #content>
       <h2 class="my-10">Konto erstellen</h2>
-
-      <div class="mb-8 flex items-center space-x-4 border px-8 py-4">
-        <it-icon-check class="h-24 w-24 text-green-500" />
-        <p class="text-lg font-bold">
-          Du hast erfolgreich ein Konto für
-          <br />
-          {{ userStore.email }} erstellt.
-        </p>
-      </div>
+      <InfoBox color="text-green-500" icon="it-icon-check">
+        <template #content>
+          <p class="text-lg font-bold">
+            Du hast erfolgreich ein Konto für
+            <br />
+            {{ userStore.email }} erstellt.
+          </p>
+        </template>
+      </InfoBox>
       <p class="text-lg font-bold">Mach nun weiter mit dem nächsten Schritt.</p>
     </template>
 

client/src/pages/onboarding/uk/AccountProfile.vue

@@ -69,10 +69,10 @@ watch(selectedCompany, (company) => {
     </template>
 
     <template #footer>
-      <button class="btn-blue flex items-center">
+      <router-link :to="{ name: 'setupComplete' }" class="btn-blue flex items-center">
         Weiter
         <it-icon-arrow-right class="it-icon ml-2 h-6 w-6" />
-      </button>
+      </router-link>
     </template>
   </WizardPage>
 </template>

client/src/pages/onboarding/uk/SetupComplete.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import WizardPage from "@/components/onboarding/WizardPage.vue";
+import InfoBox from "@/components/onboarding/InfoBox.vue";
+import { ref } from "vue";
+
+const courseSessionName = ref("");
+</script>
+
+<template>
+  <WizardPage :step="2">
+    <template #content>
+      <h2 class="my-10">An Durchführung teilnehmen</h2>
+      <template v-if="courseSessionName">
+        <InfoBox color="text-green-500" icon="it-icon-check">
+          <template #content>
+            <p class="text-lg">
+              Super, nun ist alles bereit. Du bist der Durchführung «{{
+                courseSessionName
+              }}» zugewiesen und kannst mit dem Lehrgang starten.
+            </p>
+          </template>
+        </InfoBox>
+      </template>
+      <template v-else>
+        <InfoBox>
+          <template #content>
+            <p class="text-lg">
+              Aktuell bist du leider keiner Durchführung zugewiesen.
+            </p>
+          </template>
+        </InfoBox>
+        <p>
+          Damit du mit diesem Lehrgang starten kannst, musst du einer Durchführung
+          zugewiesen werden. Nimm dafür deinem üK-Verantwortlichen oder unserem
+          <a class="underline" href="mailto:help@vbv.ch">Support</a>
+          Kontakt auf.
+        </p>
+      </template>
+    </template>
+    <template v-if="courseSessionName" #footer>
+      <router-link
+        :to="{ name: 'accountProfile' }"
+        class="btn-secondary flex items-center"
+      >
+        <it-icon-arrow-left class="it-icon mr-2 h-6 w-6" />
+        Zurück
+      </router-link>
+      <router-link to="/" class="btn-blue flex items-center">
+        Jetzt mit dem Lehrgang starten
+        <it-icon-arrow-right class="it-icon ml-2 h-6 w-6" />
+      </router-link>
+    </template>
+  </WizardPage>
+</template>

client/src/router/index.ts

@@ -258,6 +258,12 @@ const router = createRouter({
           component: () => import("@/pages/onboarding/uk/AccountProfile.vue"),
           name: "accountProfile",
         },
+        {
+          path: "account/complete",
+          props: true,
+          component: () => import("@/pages/onboarding/uk/SetupComplete.vue"),
+          name: "setupComplete",
+        },
       ],
     },
     {