Merge branch 'dev' into chore/docker

frontend/src/components/MenuBar.vue

@@ -2,8 +2,10 @@
     import { ref } from "vue";
     import { useRoute } from "vue-router";
     import dwengoLogo from "../../../assets/img/dwengo-groen-zwart.svg";
+    import { useI18n } from "vue-i18n";
 
     const route = useRoute();
+    const { t, locale } = useI18n();
 
     // Instantiate variables to use in html to render right
     // Links and content dependent on the role (student or teacher)
@@ -27,6 +29,8 @@
 
     // Logic to change the language of the website to the selected language
     const changeLanguage = (langCode: string) => {
+        locale.value = langCode;
+        localStorage.setItem("user-lang", langCode);
         console.log(langCode);
     };
 </script>
@@ -46,7 +50,7 @@
                                 :src="dwengoLogo"
                             />
                             <p class="caption">
-                                {{ role }}
+                                {{ t(`${role}`) }}
                             </p>
                         </router-link>
                     </li>
@@ -55,22 +59,22 @@
                             :to="`/${role}/${userId}/assignment`"
                             class="menu_item"
                         >
-                            assignments
+                            {{ t("assignments") }}
                         </router-link>
                     </li>
                     <li>
                         <router-link
                             :to="`/${role}/${userId}/class`"
                             class="menu_item"
-                            >classes</router-link
+                            >{{ t("classes") }}</router-link
                         >
                     </li>
                     <li>
                         <router-link
                             :to="`/${role}/${userId}/discussion`"
                             class="menu_item"
-                            >discussions</router-link
-                        >
+                            >{{ t("discussions") }}
+                        </router-link>
                     </li>
                     <li>
                         <v-menu open-on-hover>
@@ -104,7 +108,7 @@
                 <li>
                     <router-link :to="`/login`">
                         <v-tooltip
-                            text="log out"
+                            :text="t('logout')"
                             location="bottom"
                         >
                             <template v-slot:activator="{ props }">

frontend/src/i18n/i18n.ts

@@ -0,0 +1,22 @@
+import { createI18n } from "vue-i18n";
+
+// Import translations
+import en from "@/i18n/locale/en.json";
+import nl from "@/i18n/locale/nl.json";
+import fr from "@/i18n/locale/fr.json";
+import de from "@/i18n/locale/de.json";
+
+const savedLocale = localStorage.getItem("user-lang") || "en";
+
+const i18n = createI18n({
+    locale: savedLocale,
+    fallbackLocale: "en",
+    messages: {
+        en: en,
+        nl: nl,
+        fr: fr,
+        de: de,
+    },
+});
+
+export default i18n;

frontend/src/i18n/locale/de.json

@@ -0,0 +1,3 @@
+{
+    "welcome": "Willkommen"
+}

frontend/src/i18n/locale/en.json

@@ -0,0 +1,9 @@
+{
+    "welcome": "Welcome",
+    "student": "student",
+    "teacher": "teacher",
+    "assignments": "assignments",
+    "classes": "classes",
+    "discussions": "discussions",
+    "logout": "log out"
+}

frontend/src/i18n/locale/fr.json

@@ -0,0 +1,3 @@
+{
+    "welcome": "Bienvenue"
+}

frontend/src/i18n/locale/nl.json

@@ -0,0 +1,9 @@
+{
+    "welcome": "Welkom",
+    "student": "leerling",
+    "teacher": "leerkracht",
+    "assignments": "opdrachten",
+    "classes": "klassen",
+    "discussions": "discussies",
+    "logout": "log uit"
+}

frontend/src/main.ts

@@ -5,6 +5,7 @@ import "vuetify/styles";
 import { createVuetify } from "vuetify";
 import * as components from "vuetify/components";
 import * as directives from "vuetify/directives";
+import i18n from "./i18n/i18n.ts";
 
 // Components
 import App from "./App.vue";
@@ -24,5 +25,5 @@ const vuetify = createVuetify({
     directives,
 });
 app.use(vuetify);
-
+app.use(i18n);
 app.mount("#app");

frontend/src/views/LoginPage.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+    import dwengoLogo from "../../../assets/img/dwengo-groen-zwart.svg";
     import auth from "@/services/auth/auth-service.ts";
 
     function loginAsStudent() {
@@ -16,11 +17,53 @@
 
 <template>
     <main>
-        <!-- TODO Placeholder implementation to test the login - replace by a more beautiful page later -->
-        <div v-if="!auth.isLoggedIn.value">
-            <p>You are currently not logged in.</p>
-            <v-btn @click="loginAsStudent">Login as student</v-btn>
-            <v-btn @click="loginAsTeacher">Login as teacher</v-btn>
+        <div
+            class="login_background"
+            v-if="!auth.isLoggedIn.value"
+        >
+            <ul>
+                <img
+                    class="dwengo_logo"
+                    :src="dwengoLogo"
+                />
+                <div class="container">
+                    <ul>
+                        <li class="title">login</li>
+                        <li>
+                            <v-btn
+                                density="comfortable"
+                                size="large"
+                                class="button"
+                                @click="loginAsTeacher"
+                            >
+                                teacher
+                                <v-icon
+                                    end
+                                    size="x-large"
+                                >
+                                    mdi-menu-right
+                                </v-icon>
+                            </v-btn>
+                        </li>
+                        <li>
+                            <v-btn
+                                density="comfortable"
+                                size="large"
+                                class="button"
+                                @click="loginAsStudent"
+                            >
+                                student
+                                <v-icon
+                                    end
+                                    size="x-large"
+                                >
+                                    mdi-menu-right
+                                </v-icon>
+                            </v-btn>
+                        </li>
+                    </ul>
+                </div>
+            </ul>
         </div>
         <div v-if="auth.isLoggedIn.value">
             <p>
@@ -31,4 +74,41 @@
     </main>
 </template>
 
-<style scoped></style>
+<style scoped>
+    .login_background {
+        background-color: #f6faf2;
+        min-height: 100vh;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    img {
+        width: 200px;
+    }
+
+    ul {
+        list-style: none;
+        text-align: center;
+    }
+
+    li {
+        padding: 10px;
+    }
+
+    .button {
+        background-color: #f6faf2;
+    }
+
+    .container {
+        background-color: white;
+        width: 300px;
+        height: 400px;
+    }
+
+    .title {
+        font-weight: bold;
+        font-size: xx-large;
+        text-transform: uppercase;
+    }
+</style>