kompetenzinventar/ki-frontend
7
5
Fork 6
Code Issues Pull Requests 12 Packages Projects Releases 1 Wiki Activity

refactor: allow for tenants #163

Open
Ryuno-Ki wants to merge 4 commits from Ryuno-Ki/ki-frontend:refactor-tenant into main
pull from: Ryuno-Ki/ki-frontend:refactor-tenant
merge into: kompetenzinventar:main
Conversation 4 Commits 4 Files Changed 14 +110 -23
12 changed files with 110 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit e283ee1d2d - Show all commits

1
.gitignore vendored
View File

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

7
README.md
View File

@ -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

6
env.example Normal file
View File

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

1
src/App.vue
View File

@ -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'

5
src/assets/global.scss
View File

@ -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;

41
src/components/Footer.vue
View File

@ -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>

16
src/components/Navbar.vue
View File

@ -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;

2
src/components/profile/Header.vue
View File

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

24
src/views/Index.vue
View File

@ -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>

10
src/views/Search.vue
View File

@ -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;

2
src/views/profile/Edit.vue
View File

@ -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>

18
vue.config.js Normal file
View File

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