Merged in feature/VBV-370-dev-live-loginpage (pull request #114)

Feature/VBV-370 Separate local and SSO login page

* Implement local and SSO login pages

* Add translations

* Fix typechecks

* Fix env detection


Approved-by: Christian Cueni

client/src/locales/de.json

@@ -1,5 +1,9 @@
 {
+  "Benutzername": "Benutzername",
+  "Klicke auf den Button, um dich über SSO anzumelden oder zu registrieren.": "Klicke auf den Button, um dich über SSO anzumelden oder zu registrieren.",
   "Nächste Termine": "Nächste Termine",
+  "Passwort": "Passwort",
+  "SSO Login/Registration": "SSO Login/Registration",
   "Zur Zeit sind keine Termine vorhanden": "Zur Zeit sind keine Termine vorhanden",
   "assignment": {
     "acceptConditionsDisclaimer": "Bedingungen akzeptieren und Ergebnisse abgeben",

client/src/locales/fr.json

@@ -1,4 +1,10 @@
 {
+  "Benutzername": "Nom d'utilisateur",
+  "Klicke auf den Button, um dich über SSO anzumelden oder zu registrieren.": "Clique sur le bouton pour te connecter ou t'inscrire via SSO.",
+  "Nächste Termine": "Prochains rendez-vous",
+  "Passwort": "Mot de passe",
+  "SSO Login/Registration": "Connexion/enregistrement SSO",
+  "Zur Zeit sind keine Termine vorhanden": "Il n'y a pas de rendez-vous pour le moment",
   "circlePage": {
     "circleContentBoxTitle": "C'est ce que tu apprends dans ce Cercle.",
     "contactExpertButton": "Contacter l'expert",

client/src/pages/LoginPage.vue

@@ -1,11 +1,16 @@
 <script setup lang="ts">
 import { useUserStore } from "@/stores/user";
+import type { LoginMethod } from "@/types";
 import * as log from "loglevel";
 import { reactive } from "vue";
 import { useRoute } from "vue-router";
 
 const route = useRoute();
 
+defineProps<{
+  loginMethod: LoginMethod;
+}>();
+
 log.debug("LoginView.vue created");
 log.debug(route.query);
 
@@ -23,6 +28,7 @@ const userStore = useUserStore();
       <h1 class="mb-8">Login</h1>
 
       <form
+        v-if="loginMethod === 'local'"
         class="bg-white p-4 lg:p-8"
         @submit.prevent="
           userStore.handleLogin(
@@ -33,22 +39,24 @@ const userStore = useUserStore();
         "
       >
         <div class="mb-4">
-          <label class="mb-1 block" for="email">Username</label>
+          <label class="mb-1 block" for="email">{{ $t("Benutzername") }}</label>
           <input
             id="username"
             v-model="state.username"
             type="text"
             name="username"
+            autocomplete="username"
             class="mt-1 block w-96 max-w-full border px-3 py-2"
           />
         </div>
         <div class="mb-4">
-          <label class="mb-1 block" for="password">Password</label>
+          <label class="mb-1 block" for="password">{{ $t("Passwort") }}</label>
           <input
             id="password"
             v-model="state.password"
             type="password"
             name="password"
+            autocomplete="current-password"
             class="mt-1 block w-96 max-w-full border px-3 py-2"
           />
         </div>
@@ -62,9 +70,21 @@ const userStore = useUserStore();
           />
         </div>
       </form>
-      <p class="pt-8">
-        <a :href="`/sso/login/?lang=${userStore.language}`">Login mit SSO</a>
-      </p>
+
+      <div v-if="loginMethod === 'sso'" class="bg-white p-4 lg:p-8">
+        <p>
+          {{
+            $t(
+              "Klicke auf den Button, um dich über SSO anzumelden oder zu registrieren."
+            )
+          }}
+        </p>
+        <p class="btn-primary mt-8">
+          <a :href="`/sso/login/?lang=${userStore.language}`">
+            {{ $t("SSO Login/Registration") }}
+          </a>
+        </p>
+      </div>
     </div>
   </main>
 </template>

client/src/router/guards.ts

@@ -15,7 +15,9 @@ export const updateLoggedIn: NavigationGuard = async () => {
 export const redirectToLoginIfRequired: NavigationGuard = (to) => {
   const userStore = useUserStore();
   if (loginRequired(to) && !userStore.loggedIn) {
-    return `/login?next=${to.fullPath}`;
+    const sentryEnv = import.meta.env.VITE_SENTRY_ENV;
+    const ssoLogin = sentryEnv === "production" || sentryEnv === "staging";
+    return ssoLogin ? `/login?next=${to.fullPath}` : `/login-local?next=${to.fullPath}`;
   }
 };
 

client/src/router/index.ts

@@ -20,6 +20,16 @@ const router = createRouter({
     {
       path: "/login",
       component: LoginPage,
+      props: { loginMethod: "sso" },
+      meta: {
+        // no login required -> so `public === true`
+        public: true,
+      },
+    },
+    {
+      path: "/login-local",
+      component: LoginPage,
+      props: { loginMethod: "local" },
       meta: {
         // no login required -> so `public === true`
         public: true,

client/src/types.ts

@@ -1,6 +1,8 @@
 import type { Circle } from "@/services/circle";
 import type { Component } from "vue";
 
+export type LoginMethod = "local" | "sso";
+
 export type CourseCompletionStatus = "unknown" | "fail" | "success";
 
 export interface BaseCourseWagtailPage {