.gitignore

@@ -6,6 +6,7 @@ node_modules
 /public/config.js
 
 # local env files
+.env
 .env.local
 .env.*.local
 

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

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"

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'

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 {
+.bg-tenant {
-  background-image: url(../assets/img/wtf-header-bg.jpg);
+  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;

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="source_code_url">Quellcode</a></li>
-            <li><a href="https://git.wtf-eg.de/kompetenzinventar/ki-doku/issues/new/choose">Problem melden</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="imprint_url">Impressum</a></li>
-            <li><a href="https://wtf-eg.de/datenschutz/">Datenschutzerklärung</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>

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>
-
+.tenant-logo--navbar {
-.wtf-logo--navbar {
   height: 40px;
   margin-bottom: -5px;
   margin-top: -5px;

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" />

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>

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;

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>

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,
+      }
+    }
+  }
+})