Merged in feature/VBV-379-ui-cleanup (pull request #94)

Feature/VBV-379 ui cleanup

Approved-by: Daniel Egger

client/src/components/AppFooter.vue

@@ -8,6 +8,7 @@ import * as log from "loglevel";
 log.debug("AppFooter created");
 
 const userStore = useUserStore();
+const hideVersion = import.meta.env.VITE_SENTRY_ENV === "production";
 
 async function changeLocale(language: AvailableLanguages) {
   userStore.setUserLanguages(language);
@@ -16,12 +17,19 @@ async function changeLocale(language: AvailableLanguages) {
 
 <template>
   <footer class="flex flex-col border-t bg-gray-200 px-8 py-4 lg:flex-row">
-    <div>@ 2022 VBV</div>
+    <div>{{ $t("footer.copyright") }}</div>
-    <div class="lg:ml-8">{{ $t("footer.faq") }}</div>
+    <div class="lg:ml-8">
-    <div class="lg:ml-8">{{ $t("footer.dataProtection") }}</div>
+      <a :href="$t('footer.dataProtectionLink')">
-    <div class="lg:ml-8">{{ $t("footer.imprint") }}</div>
+        {{ $t("footer.dataProtectionText") }}
+      </a>
+    </div>
+    <div class="lg:ml-8">
+      <a :href="$t('footer.imprintLink')">
+        {{ $t("footer.imprintText") }}
+      </a>
+    </div>
     <div class="flex-grow"></div>
-    <div>VBV_VERSION_BUILD_NUMBER_VBV</div>
+    <div :class="{ hidden: hideVersion }">VBV_VERSION_BUILD_NUMBER_VBV</div>
     <Menu>
       <MenuButton class="lg:ml-8" data-cy="language-switch-button">
         <it-icon-globe class="relative top-[2px] h-4 w-4" />
@@ -43,7 +51,9 @@ async function changeLocale(language: AvailableLanguages) {
         </MenuItems>
       </div>
     </Menu>
-    <div class="lg:ml-8">{{ $t("footer.contact") }}</div>
+    <div class="lg:ml-8">
+      <a :href="$t('footer.contactLink')">{{ $t("footer.contactText") }}</a>
+    </div>
   </footer>
 </template>
 

client/src/components/header/AccountMenuContent.vue

@@ -26,9 +26,6 @@ const emit = defineEmits(["selectCourseSession", "logout"]);
         <div class="ml-6">
           <h3>{{ user.first_name }} {{ user.last_name }}</h3>
           <div class="text-sm text-gray-800">{{ user.email }}</div>
-          <div class="text-sm text-gray-800">
-            <router-link class="link" to="/profile">Profil anzeigen</router-link>
-          </div>
         </div>
       </div>
     </div>

client/src/components/notifications/NotificationPopoverContent.vue

@@ -4,7 +4,7 @@ import { PopoverButton } from "@headlessui/vue";
 </script>
 
 <template>
-  <div class="pb-2 text-lg text-black">{{ $t("general.notification") }}</div>
+  <div class="pb-2 text-lg text-black">{{ $t("general.notification", 2) }}</div>
   <div class="border-t bg-white">
     <NotificationList :num-notifications-to-show="4" />
     <router-link to="/notifications">

client/src/i18n.ts

@@ -4,7 +4,7 @@ import { nextTick } from "vue";
 import { createI18n } from "vue-i18n";
 
 // https://vue-i18n.intlify.dev/guide/advanced/lazy.html
-export const SUPPORT_LOCALES: AvailableLanguages[] = ["de", "fr"];
+export const SUPPORT_LOCALES: AvailableLanguages[] = ["de", "fr", "it"];
 let i18n: any = null;
 
 export function setupI18n(

client/src/locales/de.json

@@ -117,9 +117,13 @@
   },
   "footer": {
     "contact": "Kontakt",
-    "dataProtection": "Datenschutzbestimmungen",
+    "contactLink": "https://www.vbv.ch/de/der-vbv/organisation/kontakt",
-    "faq": "FAQ",
+    "contactText": "Kontakt",
-    "imprint": "Impressum"
+    "copyright": "© 2023 VBV",
+    "dataProtectionLink": "https://www.vbv.ch/de/datenschutzbestimmungen",
+    "dataProtectionText": "Datenschutzbestimmungen",
+    "imprintLink": "https://www.vbv.ch/de/impressum",
+    "imprintText": "Impressum"
   },
   "general": {
     "back": "zurück",
@@ -155,7 +159,8 @@
   },
   "language": {
     "de": "Deutsch",
-    "fr": "Französisch"
+    "fr": "Français",
+    "it": "Italiano"
   },
   "learningContent": {
     "markAsDone": "Als erledigt markieren"

client/src/pages/NotificationsPage.vue

@@ -16,7 +16,7 @@ async function loadAdditionalNotifications() {
   <div class="bg-gray-200">
     <div class="container-large px-8 py-8">
       <header class="mb-6">
-        <h1>{{ $t("general.notification") }}</h1>
+        <h1>{{ $t("general.notification", 2) }}</h1>
       </header>
       <main>
         <div class="bg-white px-4 py-4">

client/src/pages/ProfilePage.vue

@@ -1,51 +0,0 @@
-<script setup lang="ts">
-import * as log from "loglevel";
-
-log.debug("ProfileView created");
-
-function setActiveClasses(isActive: boolean) {
-  return isActive ? ["border-blue-900", "border-b-2"] : ["text-bg-900"];
-}
-</script>
-
-<template>
-  <div class="bg-gray-200">
-    <div class="container-large">
-      <nav class="py-4 pb-4">
-        <router-link class="btn-text inline-flex items-center pl-0" :to="'/'">
-          <it-icon-arrow-left />
-          <span>{{ $t("general.back") }}</span>
-        </router-link>
-      </nav>
-      <header class="mb-12 flex flex-row items-center">
-        <img class="mr-8 h-44 w-44 rounded-full" src="https://picsum.photos/200" />
-        <div>
-          <h1 class="mb-2">Daniel Baumgartner</h1>
-          <p class="mb-2">d.baumgartner@gmail.com</p>
-          <p class="bg-message bg-[center_left_-4px] bg-no-repeat pl-6">
-            {{ $t("messages.sendMessage") }}
-          </p>
-        </div>
-      </header>
-      <main>
-        <div class="mb-8 w-full bg-white">ich bin ein Lernpfad</div>
-        <ul class="mb-5 flex flex-row border-b-2">
-          <li class="relative top-px mr-12 pb-3" :class="setActiveClasses(true)">
-            <button>{{ $t("competences.competences") }}</button>
-          </li>
-          <li class="mr-12">
-            <button>{{ $t("general.transferTask", 2) }}</button>
-          </li>
-          <li class="mr-12">
-            <button>{{ $t("general.exam", 2) }}</button>
-          </li>
-          <li class="mr-12">
-            <button>{{ $t("general.certificate", 2) }}</button>
-          </li>
-        </ul>
-      </main>
-    </div>
-  </div>
-</template>
-
-<style scoped></style>

client/src/router/index.ts

@@ -155,10 +155,6 @@ const router = createRouter({
       path: "/messages",
       component: () => import("@/pages/MessagesPage.vue"),
     },
-    {
-      path: "/profile",
-      component: () => import("@/pages/ProfilePage.vue"),
-    },
     {
       path: "/settings",
       component: () => import("@/pages/SettingsPage.vue"),