refactor: allow for tenants

This way by adjusting a handful of environment variables the Frontend can be used by organisations outside of WTFeG. Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
2025-05-12 14:33:54 +02:00 · 2025-05-12 14:33:54 +02:00 · e283ee1d2d
commit e283ee1d2d
parent bdd4ac19b5
12 changed files with 110 additions and 23 deletions
--- a/.gitignore
+++ b/.gitignore
@ -6,6 +6,7 @@ node_modules
 /public/config.js

 # local env files
+.env
 .env.local
 .env.*.local

--- a/README.md
+++ b/README.md
@ -56,6 +56,13 @@ cp public/config.js.dev public/config.js
 vi public/config.js
 ```

+### Umgebungsvariablen setzen
+
+```
+cp env.example .env
+vi .env
+```
+
 ### Compiles and hot-reloads for development
 ```
 npm run serve
--- a/env.example
+++ b/env.example
@ -0,0 +1,6 @@
+VUE_APP_PASSWORD_RESET_URL="https://resetpw.wtf-eg.de/"
+VUE_APP_IMPRINT_URL="https://wtf-eg.de/impressum/"
+VUE_APP_ISSUE_URL="https://git.wtf-eg.de/kompetenzinventar/ki-doku/issues/new/choose"
+VUE_APP_PRIVACY_URL="https://wtf-eg.de/datenschutz/"
+VUE_APP_SOURCE_CODE_URL="https://git.wtf-eg.de/kompetenzinventar"
+VUE_APP_TENANT="WTF"
--- a/src/App.vue
+++ b/src/App.vue
@ -11,6 +11,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
  <router-view :key="$route.fullPath" />
  <Footer />
 </template>
+
 <script>
 import Footer from '@/components/Footer'
 import Navbar from '@/components/Navbar'
--- a/src/assets/global.scss
+++ b/src/assets/global.scss
@ -4,11 +4,12 @@
 * SPDX-License-Identifier: AGPL-3.0-or-later
 */

+@use "sass:string";
@import "variables";
@import "bootstrap/scss/bootstrap";

-.bg-wtf {
-  background-image: url(../assets/img/wtf-header-bg.jpg);
+.bg-tenant {
+  background-image: url("../assets/img/" + string.to-lower-case($VUE_APP_TENANT) + "-header-bg.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@ -12,24 +12,53 @@ SPDX-License-Identifier: AGPL-3.0-or-later
        <div class="d-inline-block">
          <div class="fw-bold text-white mb-2">Kompetenzinventar</div>
          <ul class="list-unstyled">
-            <li><a href="https://git.wtf-eg.de/kompetenzinventar">Quellcode</a></li>
-            <li><a href="https://git.wtf-eg.de/kompetenzinventar/ki-doku/issues/new/choose">Problem melden</a></li>
+            <li><a :href="source_code_url">Quellcode</a></li>
+            <li><a :href="issue_url">Problem melden</a></li>
          </ul>
        </div>
      </div>
      <div class="col-sm-6 d-sm-flex justify-content-center">
        <div class="d-inline-block">
          <ul class="list-unstyled">
-            <li><a href="https://wtf-eg.de/impressum/">Impressum</a></li>
-            <li><a href="https://wtf-eg.de/datenschutz/">Datenschutzerklärung</a></li>
+            <li><a :href="imprint_url">Impressum</a></li>
+            <li><a :href="privacy_url">Datenschutzerklärung</a></li>
          </ul>
-          <img class="wtf-logo wtf-logo--footer" src="@/assets/img/wtf_logo_white.svg">
+          <img
+            class="tenant-logo tenant-logo--footer"
+            :src="loadImage('logo')"
+            alt="">
        </div>
      </div>
    </div>
  </div>
 </footer>
 </template>
+
+<script>
+  export default {
+    data() {
+      const imprint_url = process.env.VUE_APP_IMPRINT_URL || ""
+      const issue_url = process.env.VUE_APP_ISSUE_URL || ""
+      const privacy_url = process.env.VUE_APP_PRIVACY_URL || ""
+      const source_code_url = process.env.VUE_APP_SOURCE_CODE_URL || ""
+      const tenant = process.env.VUE_APP_TENANT || "WTF"
+
+      return {
+        imprint_url,
+        issue_url,
+        privacy_url,
+        source_code_url,
+        tenant,
+      };
+    },
+    methods: {
+      loadImage(type) {
+        return require(`../assets/img/${this.tenant.toLowerCase()}_${type}.svg`)
+      },
+    },
+  }
+</script>
+
 <style scoped>
 a {
  color: #fff;
@ -41,7 +70,7 @@ a:hover {
  text-decoration: underline;
 }

-.wtf-logo--footer {
+.tenant-logo--footer {
  max-width: 200px;
 }
 </style>
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@ -11,7 +11,10 @@ SPDX-License-Identifier: AGPL-3.0-or-later
        class="navbar-brand"
        :to="{ path:'/s/search' }"
      >
-        <img class="wtf-logo wtf-logo--navbar" src="@/assets/img/wtf_logo.svg">
+        <img
+          class="tenant-logo tenant-logo--navbar"
+          :src="loadImage('logo')"
+          alt="">
        <span class="d-none d-sm-inline">Kompetenzinventar</span>
        <span class="d-sm-none">KI</span>
      </router-link>
@ -79,14 +82,20 @@ export default {
  name: 'Navbar',
  mixins: [RequestMixin],
  data() {
+    const tenant = process.env.VUE_APP_TENANT || "WTF"
+
    return {
-      showMobileNav: false
+      showMobileNav: false,
+      tenant,
    }
  },
  computed: {
    ...mapState(['currentUserId'])
  },
  methods: {
+    loadImage(type) {
+      return require(`../assets/img/${this.tenant.toLowerCase()}_${type}.svg`)
+    },
    toggleMobileNav() {
      this.showMobileNav = !this.showMobileNav
    },
@ -100,8 +109,7 @@ export default {
 </script>

 <style>
-
-.wtf-logo--navbar {
+.tenant-logo--navbar {
  height: 40px;
  margin-bottom: -5px;
  margin-top: -5px;
--- a/src/components/profile/Header.vue
+++ b/src/components/profile/Header.vue
@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 -->

 <template>
-  <div class="bg-wtf py-3">
+  <div class="bg-tenant py-3">
    <div class="container">
      <div class="d-flex align-items-center mb-3">
        <Avatar class="me-3" :name="profile.nickname" />
--- a/src/views/Index.vue
+++ b/src/views/Index.vue
@ -5,17 +5,20 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 -->

 <template>
-  <div class="bg-wtf">
+  <div class="bg-tenant">
    <div class="container pt-5">
      <div class="text-center mb-5">
-        <img class="wtf-logo wtf-logo--index" src="@/assets/img/wtf_logo.svg">
+        <img
+          class="tenant-logo tenant-logo--index"
+          :src="loadImage('logo')"
+          alt="">
        <h1 class="text-white">Kompetenzinventar</h1>
      </div>
      <form @submit.prevent="submitLogin()" class="card bg-white login-form">
        <div class="card-body">
          <div class="mb-3">
            <label for="exampleInputusername1" class="form-label" >
-              WTF-Benutzername:
+              {{tenant}}-Benutzername:
            </label>
            <input
              type="username"
@ -37,7 +40,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
            />
          </div>
          <button type="submit" class="btn btn-primary">Login</button>
-          <a class="btn btn-link" href="https://resetpw.wtf-eg.de/">Passwort vergessen?</a>
+          <a class="btn btn-link" :href="password_reset_url">Passwort vergessen?</a>
          <div
            class="alert alert-danger mt-3 mb-0"
            role="alert"
@ -58,17 +61,26 @@ export default {
  name: "Index",
  mixins: [RequestMixin],
  data() {
+    const password_reset_url = process.env.VUE_APP_PASSWORD_RESET_URL || ""
+    const tenant = process.env.VUE_APP_TENANT || "WTF"
+
    return {
      showErrorMessage: false,
      username: "",
      password: "",
+      password_reset_url,
+      tenant,
    };
  },
+  methods: {
+    loadImage(type) {
+      return require(`../assets/img/${this.tenant.toLowerCase()}_${type}.svg`)
+    }
+  }
 };
 </script>

 <style scoped>
-
 .container {
  min-height: 100vh;
 }
@ -78,7 +90,7 @@ export default {
  max-width: 500px;
 }

-.wtf-logo--index {
+.tenant-logo--index {
  max-width: 200px;
 }
 </style>
--- a/src/views/Search.vue
+++ b/src/views/Search.vue
@ -6,9 +6,9 @@ SPDX-License-Identifier: AGPL-3.0-or-later

 <template>
  <div class="content">
-    <div class="bg-wtf text-white pt-3 pb-4">
+    <div class="bg-tenant text-white pt-3 pb-4">
      <div class="container">
-        <div class="fs-3 text-center lh-1 mb-3">Finde WTF Member</div>
+        <div class="fs-3 text-center lh-1 mb-3">Finde {{tenant}} Member</div>
        <div class="card mx-auto bg-white">
          <div class="card-body">
            <form @submit.prevent="handleSubmit">
@ -93,8 +93,11 @@ export default {
    Spinner,
  },
  data() {
+    const tenant = process.env.VUE_APP_TENANT || "WTF"
+
    return {
-      textChanged: false
+      tenant,
+      textChanged: false,
    }
  },
  computed: {
@ -175,6 +178,7 @@ export default {
  }
 };
 </script>
+
 <style scoped>
 .container {
  max-width: 768px;
--- a/src/views/profile/Edit.vue
+++ b/src/views/profile/Edit.vue
@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later

 <template>
  <div>
-    <div class="bg-wtf py-3 mb-4">
+    <div class="bg-tenant py-3 mb-4">
      <div class="container">
        <h3 class="text-white text-center mb-0">Profil bearbeiten</h3>
      </div>
--- a/vue.config.js
+++ b/vue.config.js
@ -0,0 +1,18 @@
+const { defineConfig } = require('@vue/cli-service');
+
+let sav = "";
+for (let e in process.env) {
+	if (/VUE_APP_/i.test(e)) {
+		sav += `$${e}: "${process.env[e]}";`;
+	}
+}
+
+module.exports = defineConfig({
+  css: {
+    loaderOptions: {
+      sass: {
+        additionalData: sav,
+      }
+    }
+  }
+})