From 447ac058597887239396f8eae778be6f715bb99e Mon Sep 17 00:00:00 2001
From: Reto Aebersold <aeby@substyle.ch>
Date: Tue, 5 Dec 2023 09:15:50 +0100
Subject: [PATCH] feat: local login URL

---
 .../components/header/MainNavigationBar.vue   |  6 ++++--
 .../components/onboarding/WizardSidePanel.vue |  4 ++--
 client/src/pages/onboarding/AccountSetup.vue  |  3 ++-
 client/src/router/guards.ts                   | 10 +++++-----
 client/src/router/utils.ts                    | 19 +++++++++++++++++++
 5 files changed, 32 insertions(+), 10 deletions(-)
 create mode 100644 client/src/router/utils.ts

diff --git a/client/src/components/header/MainNavigationBar.vue b/client/src/components/header/MainNavigationBar.vue
index 8a5c6c7e..19a12cdd 100644
--- a/client/src/components/header/MainNavigationBar.vue
+++ b/client/src/components/header/MainNavigationBar.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import log from "loglevel";
-
+import { getLoginURL } from "@/router/utils";
 import AccountMenu from "@/components/header/AccountMenu.vue";
 import MobileMenu from "@/components/header/MobileMenu.vue";
 import NotificationPopover from "@/components/notifications/NotificationPopover.vue";
@@ -275,7 +275,9 @@ onMounted(() => {
                   </Popover>
                 </div>
                 <div v-else>
-                  <a class="" :href="`/sso/login?lang=${userStore.language}`">Login</a>
+                  <a class="" :href="getLoginURL({ lang: userStore.language })">
+                    Login
+                  </a>
                 </div>
               </div>
             </div>
diff --git a/client/src/components/onboarding/WizardSidePanel.vue b/client/src/components/onboarding/WizardSidePanel.vue
index 5ddcce61..241741fd 100644
--- a/client/src/components/onboarding/WizardSidePanel.vue
+++ b/client/src/components/onboarding/WizardSidePanel.vue
@@ -18,14 +18,14 @@ async function changeLocale(language: AvailableLanguages) {
 <template>
   <div class="flex flex-col items-center justify-between space-y-8 bg-blue-900 p-8">
     <div class="flex w-full items-center justify-between">
-      <div class="flex justify-center">
+      <a href="/" class="flex justify-center">
         <div class="h-8 w-16">
           <it-icon-vbv class="-ml-3 -mt-6 mr-3 h-8 w-16" />
         </div>
         <div class="ml-1 border-l border-white pl-3 text-2xl text-white">
           {{ $t("general.title") }}
         </div>
-      </div>
+      </a>
       <Menu as="div" class="relative block text-left">
         <div class="text-white">
           <MenuButton class="text-white">
diff --git a/client/src/pages/onboarding/AccountSetup.vue b/client/src/pages/onboarding/AccountSetup.vue
index 75b58619..5dd38c20 100644
--- a/client/src/pages/onboarding/AccountSetup.vue
+++ b/client/src/pages/onboarding/AccountSetup.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import WizardPage from "@/components/onboarding/WizardPage.vue";
 import { useUserStore } from "@/stores/user";
+import { getLoginURL } from "@/router/utils";
 
 const props = defineProps({
   courseType: {
@@ -27,7 +28,7 @@ const user = useUserStore();
 
       <p class="mb-4 mt-12">{{ $t("a.Hast du schon ein Konto?") }}</p>
       <a
-        :href="`/sso/login?course=${props.courseType}&lang=${user.language}`"
+        :href="getLoginURL({ course: props.courseType, lang: user.language })"
         class="btn-secondary"
       >
         {{ $t("a.Anmelden") }}
diff --git a/client/src/router/guards.ts b/client/src/router/guards.ts
index 854cf51a..05c5e1da 100644
--- a/client/src/router/guards.ts
+++ b/client/src/router/guards.ts
@@ -1,3 +1,4 @@
+import { getLoginURLNext, shouldUseSSO } from "@/router/utils";
 import { useCourseSessionsStore } from "@/stores/courseSessions";
 import { useUserStore } from "@/stores/user";
 import type { NavigationGuard, RouteLocationNormalized } from "vue-router";
@@ -21,14 +22,13 @@ export const redirectToLoginIfRequired: NavigationGuard = (to, from, next) => {
   }
 
   if (loginRequired(to) && !user.loggedIn) {
-    const appEnv = import.meta.env.VITE_APP_ENVIRONMENT || "local";
-    const ssoLogin = appEnv.startsWith("prod") || appEnv.startsWith("stage");
-    if (ssoLogin) {
+    const loginURL = getLoginURLNext();
+    if (shouldUseSSO()) {
       // Redirect to SSO login page, handled by the server
-      window.location.href = `/sso/login/?next=${encodeURIComponent(to.fullPath)}`;
+      window.location.href = loginURL;
     } else {
       // Handle local login with Vue router
-      next(`/login-local?next=${encodeURIComponent(to.fullPath)}`);
+      next(loginURL);
     }
   } else {
     // If login is not required or user is already logged in, continue with the navigation
diff --git a/client/src/router/utils.ts b/client/src/router/utils.ts
new file mode 100644
index 00000000..62d1d920
--- /dev/null
+++ b/client/src/router/utils.ts
@@ -0,0 +1,19 @@
+export function shouldUseSSO() {
+  const appEnv = import.meta.env.VITE_APP_ENVIRONMENT || "local";
+  return appEnv.startsWith("prod") || appEnv.startsWith("stage");
+}
+
+export function getLoginURL(params = {}) {
+  let url = shouldUseSSO() ? "/sso/login/" : "/login-local";
+
+  const queryParams = new URLSearchParams(params);
+  if (queryParams.toString()) {
+    url += `?${queryParams}`;
+  }
+
+  return url;
+}
+
+export function getLoginURLNext() {
+  return getLoginURL({ next: window.location.pathname });
+}