CubeBit/fst-frontend
1
0
Fork 0
Code Issues 1 Pull Requests Projects 1 Releases Wiki Activity

* refactoring and fixes by login

Browse Source 
feature: #4
This commit is contained in:
Denys Seredenko
2023-01-04 00:25:46 +01:00
parent 46dd4ef361
commit 1eab4c586f
15 changed files with 262 additions and 255 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
package-lock.json generated
View File

@@ -21,7 +21,8 @@
"vue": "^3.2.45", "vue": "^3.2.45",
"vue-i18n": "^9.2.2", "vue-i18n": "^9.2.2",
"vue-router": "^4.1.6", "vue-router": "^4.1.6",
"vuex": "^4.0.2" "vuex": "^4.0.2",
"vuex-persistedstate": "^4.1.0"
}, },
"devDependencies": { "devDependencies": {
"@rushstack/eslint-patch": "^1.1.4", "@rushstack/eslint-patch": "^1.1.4",
@@ -3108,7 +3109,6 @@
"version": "4.2.2", "version": "4.2.2",
"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz", "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
"integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==", "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==",
"dev": true,
"engines": { "engines": {
"node": ">=0.10.0" "node": ">=0.10.0"
} }
@@ -6913,6 +6913,12 @@
"node": ">=8" "node": ">=8"
} }
}, },
"node_modules/shvl": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/shvl/-/shvl-2.0.3.tgz",
"integrity": "sha512-V7C6S9Hlol6SzOJPnQ7qzOVEWUQImt3BNmmzh40wObhla3XOYMe4gGiYzLrJd5TFa+cI2f9LKIRJTTKZSTbWgw==",
"deprecated": "older versions vulnerable to prototype pollution"
},
"node_modules/signal-exit": { "node_modules/signal-exit": {
"version": "3.0.7", "version": "3.0.7",
"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz", "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
@@ -7434,6 +7440,19 @@
"vue": "^3.0.2" "vue": "^3.0.2"
} }
}, },
"node_modules/vuex-persistedstate": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/vuex-persistedstate/-/vuex-persistedstate-4.1.0.tgz",
"integrity": "sha512-3SkEj4NqwM69ikJdFVw6gObeB0NHyspRYMYkR/EbhR0hbvAKyR5gksVhtAfY1UYuWUOCCA0QNGwv9pOwdj+XUQ==",
"deprecated": "Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.",
"dependencies": {
"deepmerge": "^4.2.2",
"shvl": "^2.0.3"
},
"peerDependencies": {
"vuex": "^3.0 || ^4.0.0-rc"
}
},
"node_modules/walker": { "node_modules/walker": {
"version": "1.0.8", "version": "1.0.8",
"resolved": "https://registry.npmjs.org/walker/-/walker-1.0.8.tgz", "resolved": "https://registry.npmjs.org/walker/-/walker-1.0.8.tgz",

3
package.json
View File

@@ -22,7 +22,8 @@
"vue": "^3.2.45", "vue": "^3.2.45",
"vue-i18n": "^9.2.2", "vue-i18n": "^9.2.2",
"vue-router": "^4.1.6", "vue-router": "^4.1.6",
"vuex": "^4.0.2" "vuex": "^4.0.2",
"vuex-persistedstate": "^4.1.0"
}, },
"devDependencies": { "devDependencies": {
"@rushstack/eslint-patch": "^1.1.4", "@rushstack/eslint-patch": "^1.1.4",

2
src/App.vue
View File

@@ -4,4 +4,4 @@ import { RouterView } from 'vue-router'
<template> <template>
<RouterView /> <RouterView />
</template> </template>

21
src/authentication/AuthHelper.js
View File

@@ -3,13 +3,13 @@ import store from '../store'
let keycloak = null let keycloak = null
export function keycloakSetup() { export async function keycloakSetup() {
keycloak = new Keycloak({ keycloak = new Keycloak({
url: 'https://auth.denysoft.eu/', url: 'https://auth.denysoft.eu/',
realm: 'FST', realm: 'FST',
clientId: 'frontend' clientId: 'frontend'
}) })
return keycloak await keycloak
.init({ .init({
onLoad: 'login-required', onLoad: 'login-required',
checkLoginIframe: false checkLoginIframe: false
@@ -32,23 +32,10 @@ export function keycloakSetup() {
.catch(function () { .catch(function () {
alert('failed to initialize') alert('failed to initialize')
}) })
} store.commit('initKeycloak', keycloak)
export function login() { store.commit('isAnonym', false)
keycloak.login()
} }
export function getKeycloak() { export function getKeycloak() {
return keycloak return keycloak
} }
export function isVerwaltung() {
return keycloak.hasRealmRole('verwaltung')
}
export function isEmployee() {
return keycloak.hasRealmRole('employee')
}
export function isAdmin() {
return keycloak.hasRealmRole('admin')
}

233
src/components/Navbar.vue
View File

@@ -1,114 +1,119 @@
<template> <template>
<div class="flex justify-between bg-gray-900 text-white pt-2 pb-3 pl-8"> <div class="flex justify-between bg-gray-900 text-white pt-2 pb-3 pl-8">
<div class="basis-1/3 logo"> <div class="basis-1/3 logo">
<p class="font-mono text-lg py-2"> <p class="font-mono text-lg py-2">
<RouterLink to="/">Filmstudiostube</RouterLink> <RouterLink to="/">Filmstudiostube</RouterLink>
</p> </p>
</div> </div>
<div class="flex justify-around basis-1/3 max-md:hidden"> <div class="flex justify-around basis-1/3 max-md:hidden">
<div v-if="!isAnonym"> <div v-if="!isAnonym">
<p class="py-2">Aufträge</p> <RouterLink to="/contracts">
</div> <p class="py-2">Aufträge</p>
<div v-if="!isAnonym" class="nav-item"> </RouterLink>
<p class="py-2">Support</p> </div>
</div> <div v-if="!isAnonym" class="nav-item">
<div v-if="isVerwaltung" class="nav-item"> <RouterLink to="/support">
<p class="py-2">Administration</p> <p class="py-2">Support</p>
</div> </RouterLink>
<div v-if="isAnonym" class="nav-item"> </div>
<p class="py-2">Arbeiten</p> <div v-if="isVerwaltung" class="nav-item">
</div> <RouterLink to="/administration">
<div v-if="isAnonym" class="nav-item"> <p class="py-2">Administration</p>
<p class="py-2">Kontakt</p> </RouterLink>
</div> </div>
<div v-if="isAnonym" class="nav-item"> <div v-if="isAnonym" class="nav-item">
<RouterLink to="/about"> <RouterLink to="/arbeiten">
<p class="py-2">Über uns</p> <p class="py-2">Arbeiten</p>
</RouterLink> </RouterLink>
</div> </div>
</div> <div v-if="isAnonym" class="nav-item">
<div v-if="isAnonym" class="nav-item basis-1/6 max-md:justify-end max-md:pr-5 max-md:flex max-md:basis-3/6"> <RouterLink to="/contact">
<button class="bg-blue-600 hover:bg-blue-500 duration-300 text-white px-3 py-1 my-2 rounded" @click="login"> <p class="py-2">Kontakt</p>
Login </RouterLink>
</button> </div>
</div> <div v-if="isAnonym" class="nav-item">
<div class="pt-2 md:hidden" @click="openNavbar"> <RouterLink to="/about">
<div class="space-y-1.5 pt-2 pb-2 mr-2 pr-2 pl-2 bg-slate-100 rounded"> <p class="py-2">Über uns</p>
<span class="block w-6 h-0.5 bg-gray-500"></span> </RouterLink>
<span class="block w-6 h-0.5 bg-gray-500"></span> </div>
<span class="block w-6 h-0.5 bg-gray-500"></span> </div>
</div> <div
</div> v-if="isAnonym"
</div> class="nav-item basis-1/6 max-md:justify-end max-md:pr-5 max-md:flex max-md:basis-3/6">
<div v-if="!isNavbarClosed"> <button
<ul class="bg-gray-900"> class="bg-blue-600 hover:bg-blue-500 duration-300 text-white px-3 py-1 my-2 rounded"
<li v-if="!isAnonym" class="block text-md py-4 text-white text-center"> @click="login">
<RouterLink to="/contracts">Aufträge</RouterLink> Login
</li> </button>
<li v-if="!isAnonym" class="block text-md py-4 text-white text-center"> </div>
<RouterLink to="/support">Support</RouterLink> <div class="pt-2 md:hidden" @click="openNavbar">
</li> <div class="space-y-1.5 pt-2 pb-2 mr-2 pr-2 pl-2 bg-slate-100 rounded">
<li v-if="isVerwaltung" class="block text-md py-4 text-white text-center"> <span class="block w-6 h-0.5 bg-gray-500"></span>
<RouterLink to="/administration">Administration</RouterLink> <span class="block w-6 h-0.5 bg-gray-500"></span>
</li> <span class="block w-6 h-0.5 bg-gray-500"></span>
<li v-if="isAnonym" class="block text-md py-4 text-white text-center"> </div>
<RouterLink to="/arbeiten">Arbeiten</RouterLink> </div>
</li> </div>
<li v-if="isAnonym" class="block text-md py-4 text-white text-center"> <div v-if="!isNavbarClosed">
<RouterLink to="/contact">Kontakt</RouterLink> <ul class="bg-gray-900">
</li> <li v-if="!isAnonym" class="block text-md py-4 text-white text-center">
<li v-if="isAnonym" class="block text-md py-4 text-white text-center"> <RouterLink to="/contracts">Aufträge</RouterLink>
<RouterLink to="/about">Über uns</RouterLink> </li>
</li> <li v-if="!isAnonym" class="block text-md py-4 text-white text-center">
<li v-if="isAnonym" class="block py-2 flex justify-center"> <RouterLink to="/support">Support</RouterLink>
<button class="bg-blue-600 hover:bg-blue-500 duration-300 text-white px-3 py-1 my-2 rounded" @click="login"> </li>
Login <li v-if="isVerwaltung" class="block text-md py-4 text-white text-center">
</button> <RouterLink to="/administration">Administration</RouterLink>
</li> </li>
</ul> <li v-if="isAnonym" class="block text-md py-4 text-white text-center">
</div> <RouterLink to="/arbeiten">Arbeiten</RouterLink>
</template> </li>
<script> <li v-if="isAnonym" class="block text-md py-4 text-white text-center">
import {keycloakSetup} from "../authentication/AuthHelper"; <RouterLink to="/contact">Kontakt</RouterLink>
</li>
export default { <li v-if="isAnonym" class="block text-md py-4 text-white text-center">
data() { <RouterLink to="/about">Über uns</RouterLink>
return { </li>
keycloak: this.$store.state.keycloak.keycloak, <li v-if="isAnonym" class="block py-2 flex justify-center">
isAnonym: false, <button
isNavbarClosed: true class="bg-blue-600 hover:bg-blue-500 duration-300 text-white px-3 py-1 my-2 rounded"
} @click="login">
}, Login
computed: { </button>
isVerwaltung() { </li>
if (this.$store.state.keycloak.keycloak === null){ </ul>
this.isAnonym = true; </div>
return false </template>
} <script>
return this.$store.state.keycloak.keycloak.realmAccess.roles.includes('verwaltung') import { getKeycloak, keycloakSetup } from '../authentication/AuthHelper'
},
isAdmin() { export default {
if (this.$store.state.keycloak.keycloak === null){ data() {
this.isAnonym = true; return {
return false keycloak: this.$store.state.keycloak.keycloak,
} isNavbarClosed: true
return this.$store.state.keycloak.keycloak.realmAccess.roles.includes('admin') }
}, },
isEmployee() { computed: {
if (this.$store.state.keycloak.keycloak === null){ isVerwaltung() {
this.isAnonym = true; if (getKeycloak() === null) {
return false return false
} }
return this.$store.state.keycloak.keycloak.realmAccess.roles.includes('employeee') return this.$store.state.keycloak.keycloak.realmAccess.roles.includes('verwaltung')
} },
}, isAnonym() {
methods: { return this.$store.state.keycloak.isAnonym
login() { }
keycloakSetup() },
}, methods: {
openNavbar(){ async login() {
this.isNavbarClosed = !this.isNavbarClosed if (this.$store.state.keycloak.keycloak === null) {
} await keycloakSetup()
} }
} },
</script> openNavbar() {
this.isNavbarClosed = !this.isNavbarClosed
}
}
}
</script>

11
src/router/index.js
View File

@@ -33,8 +33,8 @@ const router = createRouter({
} }
}, },
{ {
path: '/support', path: '/administration',
name: 'support', name: 'administration',
// this page is lazy-loaded when the route is visited. // this page is lazy-loaded when the route is visited.
component: () => import('../views/AdministrationView.vue'), component: () => import('../views/AdministrationView.vue'),
meta: { meta: {
@@ -87,12 +87,17 @@ const router = createRouter({
} }
] ]
}) })
router.beforeEach(async (to, from, next) => { router.beforeEach(async (to, from, next) => {
//if user was logged in but reloaded page. So we have all data, need only restore it
if (store.state.keycloak.keycloak !== null && getKeycloak() === null) {
await keycloakSetup()
}
if (to.meta.requiresAuth === true) { if (to.meta.requiresAuth === true) {
if (getKeycloak() === null) { if (getKeycloak() === null) {
await keycloakSetup() await keycloakSetup()
store.commit('initKeycloak', getKeycloak()) store.commit('initKeycloak', getKeycloak())
store.commit('isAnonym', false)
} }
if (!getKeycloak().authenticated) { if (!getKeycloak().authenticated) {
next('/forbidden') next('/forbidden')

4
src/store/index.js
View File

@@ -2,11 +2,13 @@ import { createStore } from 'vuex'
import moduleA from './moduleA.module' import moduleA from './moduleA.module'
import moduleB from './moduleB.module' import moduleB from './moduleB.module'
import keycloak from './keycloak.module' import keycloak from './keycloak.module'
import createPersistedState from 'vuex-persistedstate'
export default createStore({ export default createStore({
modules: { modules: {
keycloak: keycloak, keycloak: keycloak,
a: moduleA, a: moduleA,
b: moduleB b: moduleB
} },
plugins: [createPersistedState()]
}) })

18
src/store/keycloak.module.js
View File

@@ -1,20 +1,22 @@
export default { export default {
state: () => ({ state: () => ({
keycloak: null keycloak: null,
isAnonym: true
}), }),
mutations: { mutations: {
initKeycloak(state, data) { initKeycloak(state, data) {
state.keycloak = data state.keycloak = data
},
isAnonym(state, data) {
state.isAnonym = data
} }
}, },
actions: { actions: {
initKeycloak({ commit }) { initKeycloak({ commit }, data) {
commit('initKeycloak') commit('initKeycloak', data)
} },
}, isAnonym({ commit }, data) {
getters: { commit('isAnonym', data)
getKeycloak(state) {
return state.keycloak
} }
} }
} }

32
src/views/AboutView.vue
View File

@@ -1,17 +1,15 @@
<script setup> <script setup>
import Navbar from "../components/Navbar.vue"; import Navbar from '../components/Navbar.vue'
</script> </script>
<script> <script>
export default { export default {
mounted() { mounted() {}
} }
} </script>
</script> <template>
<template> <Navbar /><!-- Causes rendering each time todo: possible use in App.vue-->
<Navbar/><!-- Causes rerendering each time todo: possible use in App.vue--> <div class="about">
<div class="about"> <h1>This is a About page</h1>
<h1>This is a About page</h1> </div>
</div> </template>
</template> <style></style>
<style>
</style>

32
src/views/AdministrationView.vue
View File

@@ -1,17 +1,15 @@
<script setup> <script setup>
import Navbar from "../components/Navbar.vue"; import Navbar from '../components/Navbar.vue'
</script> </script>
<script> <script>
export default { export default {
mounted() { mounted() {}
} }
} </script>
</script> <template>
<template> <Navbar /><!-- Causes rerendering each time todo: possible use in App.vue-->
<Navbar/><!-- Causes rerendering each time todo: possible use in App.vue--> <div class="about">
<div class="about"> <h1>This is an Administration page</h1>
<h1>This is an Administration page</h1> </div>
</div> </template>
</template> <style></style>
<style>
</style>

32
src/views/ArbeitenView.vue
View File

@@ -1,17 +1,15 @@
<script setup> <script setup>
import Navbar from "../components/Navbar.vue"; import Navbar from '../components/Navbar.vue'
</script> </script>
<script> <script>
export default { export default {
mounted() { mounted() {}
} }
} </script>
</script> <template>
<template> <Navbar /><!-- Causes rerendering each time todo: possible use in App.vue-->
<Navbar/><!-- Causes rerendering each time todo: possible use in App.vue--> <div class="about">
<div class="about"> <h1>This is an Arbeiten page</h1>
<h1>This is an Arbeiten page</h1> </div>
</div> </template>
</template> <style></style>
<style>
</style>

32
src/views/ContactView.vue
View File

@@ -1,17 +1,15 @@
<script setup> <script setup>
import Navbar from "../components/Navbar.vue"; import Navbar from '../components/Navbar.vue'
</script> </script>
<script> <script>
export default { export default {
mounted() { mounted() {}
} }
} </script>
</script> <template>
<template> <Navbar /><!-- Causes rerendering each time todo: possible use in App.vue-->
<Navbar/><!-- Causes rerendering each time todo: possible use in App.vue--> <div class="about">
<div class="about"> <h1>This is an Contact page</h1>
<h1>This is an Contact page</h1> </div>
</div> </template>
</template> <style></style>
<style>
</style>

10
src/views/ContractsView.vue
View File

@@ -1,17 +1,15 @@
<script setup> <script setup>
import Navbar from "../components/Navbar.vue"; import Navbar from '../components/Navbar.vue'
</script> </script>
<script> <script>
export default { export default {
mounted() { mounted() {}
}
} }
</script> </script>
<template> <template>
<Navbar/><!-- Causes rerendering each time todo: possible use in App.vue--> <Navbar /><!-- Causes rerendering each time todo: possible use in App.vue-->
<div class="about"> <div class="about">
<h1>This is an Contracts page</h1> <h1>This is an Contracts page</h1>
</div> </div>
</template> </template>
<style> <style></style>
</style>

32
src/views/HomeView.vue
View File

@@ -1,17 +1,15 @@
<script setup> <script setup>
import Navbar from "../components/Navbar.vue"; import Navbar from '../components/Navbar.vue'
</script> </script>
<script> <script>
export default { export default {
mounted() { mounted() {}
} }
} </script>
</script> <template>
<template> <Navbar /><!-- Causes rerendering each time todo: possible use in App.vue-->
<Navbar/><!-- Causes rerendering each time todo: possible use in App.vue--> <div class="about">
<div class="about"> <h1>This is a Home page</h1>
<h1>This is a Home page</h1> </div>
</div> </template>
</template> <style></style>
<style>
</style>

32
src/views/SupportView.vue
View File

@@ -1,17 +1,15 @@
<script setup> <script setup>
import Navbar from "../components/Navbar.vue"; import Navbar from '../components/Navbar.vue'
</script> </script>
<script> <script>
export default { export default {
mounted() { mounted() {}
} }
} </script>
</script> <template>
<template> <Navbar /><!-- Causes rerendering each time todo: possible use in App.vue-->
<Navbar/><!-- Causes rerendering each time todo: possible use in App.vue--> <div class="about">
<div class="about"> <h1>This is an Support page</h1>
<h1>This is an Support page</h1> </div>
</div> </template>
</template> <style></style>
<style>
</style>