diff --git a/public/silent-check-sso.html b/public/silent-check-sso.html deleted file mode 100644 index 974ed55..0000000 --- a/public/silent-check-sso.html +++ /dev/null @@ -1,7 +0,0 @@ - - - - - \ No newline at end of file diff --git a/src/App.vue b/src/App.vue index e864195..b3f75b6 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,85 +1,7 @@ - - + \ No newline at end of file diff --git a/src/assets/base.css b/src/assets/base.css index 71dc55a..e69de29 100644 --- a/src/assets/base.css +++ b/src/assets/base.css @@ -1,74 +0,0 @@ -/* color palette from */ -:root { - --vt-c-white: #ffffff; - --vt-c-white-soft: #f8f8f8; - --vt-c-white-mute: #f2f2f2; - - --vt-c-black: #181818; - --vt-c-black-soft: #222222; - --vt-c-black-mute: #282828; - - --vt-c-indigo: #2c3e50; - - --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); - --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); - --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); - --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); - - --vt-c-text-light-1: var(--vt-c-indigo); - --vt-c-text-light-2: rgba(60, 60, 60, 0.66); - --vt-c-text-dark-1: var(--vt-c-white); - --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); -} - -/* semantic color variables for this project */ -:root { - --color-background: var(--vt-c-white); - --color-background-soft: var(--vt-c-white-soft); - --color-background-mute: var(--vt-c-white-mute); - - --color-border: var(--vt-c-divider-light-2); - --color-border-hover: var(--vt-c-divider-light-1); - - --color-heading: var(--vt-c-text-light-1); - --color-text: var(--vt-c-text-light-1); - - --section-gap: 160px; -} - -@media (prefers-color-scheme: dark) { - :root { - --color-background: var(--vt-c-black); - --color-background-soft: var(--vt-c-black-soft); - --color-background-mute: var(--vt-c-black-mute); - - --color-border: var(--vt-c-divider-dark-2); - --color-border-hover: var(--vt-c-divider-dark-1); - - --color-heading: var(--vt-c-text-dark-1); - --color-text: var(--vt-c-text-dark-2); - } -} - -*, -*::before, -*::after { - box-sizing: border-box; - margin: 0; - position: relative; - font-weight: normal; -} - -body { - min-height: 100vh; - color: var(--color-text); - background: var(--color-background); - transition: color 0.5s, background-color 0.5s; - line-height: 1.6; - font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, - Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; - font-size: 15px; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} diff --git a/src/assets/main.css b/src/assets/main.css index fd9aa8d..3359592 100644 --- a/src/assets/main.css +++ b/src/assets/main.css @@ -2,37 +2,3 @@ @tailwind base; @tailwind components; @tailwind utilities; - -#app { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - - font-weight: normal; -} - -a, -.green { - text-decoration: none; - color: hsla(160, 100%, 37%, 1); - transition: 0.4s; -} - -@media (hover: hover) { - a:hover { - background-color: hsla(160, 100%, 37%, 0.2); - } -} - -@media (min-width: 1024px) { - body { - display: flex; - place-items: center; - } - - #app { - display: grid; - grid-template-columns: 1fr 1fr; - padding: 0 2rem; - } -} diff --git a/src/authentication/AuthHelper.js b/src/authentication/AuthHelper.js index 6824ea0..8cc8a73 100644 --- a/src/authentication/AuthHelper.js +++ b/src/authentication/AuthHelper.js @@ -1,8 +1,9 @@ import Keycloak from 'keycloak-js' +import store from '../store' let keycloak = null -function setup() { +export function keycloakSetup() { keycloak = new Keycloak({ url: 'https://auth.denysoft.eu/', realm: 'FST', @@ -20,6 +21,7 @@ function setup() { .then(refreshed => { if (refreshed) { console.info('Token refreshed ' + refreshed) + store.commit('initKeycloak', keycloak) } }) .catch(() => { @@ -31,12 +33,22 @@ function setup() { alert('failed to initialize') }) } -function login() { +export function login() { keycloak.login() } -function getKeycloak() { +export function getKeycloak() { return keycloak } -export default { setup, login, getKeycloak } +export function isVerwaltung() { + return keycloak.hasRealmRole('verwaltung') +} + +export function isEmployee() { + return keycloak.hasRealmRole('employee') +} + +export function isAdmin() { + return keycloak.hasRealmRole('admin') +} diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue deleted file mode 100644 index 0a0988b..0000000 --- a/src/components/HelloWorld.vue +++ /dev/null @@ -1,43 +0,0 @@ - - - - - diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue new file mode 100644 index 0000000..e37bbf7 --- /dev/null +++ b/src/components/Navbar.vue @@ -0,0 +1,114 @@ + + \ No newline at end of file diff --git a/src/components/TheWelcome.vue b/src/components/TheWelcome.vue deleted file mode 100644 index 5e64625..0000000 --- a/src/components/TheWelcome.vue +++ /dev/null @@ -1,86 +0,0 @@ - - - diff --git a/src/components/WelcomeItem.vue b/src/components/WelcomeItem.vue deleted file mode 100644 index a5eca70..0000000 --- a/src/components/WelcomeItem.vue +++ /dev/null @@ -1,85 +0,0 @@ - - - diff --git a/src/main.js b/src/main.js index 643ad47..080705d 100644 --- a/src/main.js +++ b/src/main.js @@ -8,7 +8,6 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' import { faUserSecret } from '@fortawesome/free-solid-svg-icons' import './assets/main.css' -import AuthHelper from './authentication/AuthHelper' /* add icons to the library */ library.add(faUserSecret) diff --git a/src/router/index.js b/src/router/index.js index ee08e3b..0090ef4 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -1,6 +1,7 @@ import { createRouter, createWebHistory } from 'vue-router' import HomeView from '../views/HomeView.vue' -import AuthHelper from '../authentication/AuthHelper' +import store from '../store/index' +import { getKeycloak, keycloakSetup } from '../authentication/AuthHelper' const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), @@ -13,13 +14,59 @@ const router = createRouter({ requiresAuth: false } }, + { + path: '/contracts', + name: 'contracts', + // this page is lazy-loaded when the route is visited. + component: () => import('../views/ContractsView.vue'), + meta: { + requiresAuth: true + } + }, + { + path: '/support', + name: 'support', + // this page is lazy-loaded when the route is visited. + component: () => import('../views/SupportView.vue'), + meta: { + requiresAuth: true + } + }, + { + path: '/support', + name: 'support', + // this page is lazy-loaded when the route is visited. + component: () => import('../views/AdministrationView.vue'), + meta: { + requiresAuth: true, + requiresAdmin: true + } + }, + { + path: '/arbeiten', + name: 'arbeiten', + // this page is lazy-loaded when the route is visited. + component: () => import('../views/ArbeitenView.vue'), + meta: { + requiresAuth: false + } + }, + { + path: '/contact', + name: 'contact', + // this page is lazy-loaded when the route is visited. + component: () => import('../views/ContactView.vue'), + meta: { + requiresAuth: false + } + }, { path: '/about', name: 'about', // this page is lazy-loaded when the route is visited. component: () => import('../views/AboutView.vue'), meta: { - requiresAuth: true + requiresAuth: false } }, { @@ -43,10 +90,11 @@ const router = createRouter({ router.beforeEach(async (to, from, next) => { if (to.meta.requiresAuth === true) { - if (AuthHelper.getKeycloak() === null) { - await AuthHelper.setup() + if (getKeycloak() === null) { + await keycloakSetup() + store.commit('initKeycloak', getKeycloak()) } - if (!AuthHelper.getKeycloak().authenticated) { + if (!getKeycloak().authenticated) { next('/forbidden') } next() diff --git a/src/views/AboutView.vue b/src/views/AboutView.vue index 6b58874..36cabee 100644 --- a/src/views/AboutView.vue +++ b/src/views/AboutView.vue @@ -1,15 +1,17 @@ - - + + + + \ No newline at end of file diff --git a/src/views/AdministrationView.vue b/src/views/AdministrationView.vue new file mode 100644 index 0000000..30aeb81 --- /dev/null +++ b/src/views/AdministrationView.vue @@ -0,0 +1,17 @@ + + + + \ No newline at end of file diff --git a/src/views/ArbeitenView.vue b/src/views/ArbeitenView.vue new file mode 100644 index 0000000..9b24506 --- /dev/null +++ b/src/views/ArbeitenView.vue @@ -0,0 +1,17 @@ + + + + \ No newline at end of file diff --git a/src/views/ContactView.vue b/src/views/ContactView.vue new file mode 100644 index 0000000..5c84ee3 --- /dev/null +++ b/src/views/ContactView.vue @@ -0,0 +1,17 @@ + + + + \ No newline at end of file diff --git a/src/views/ContractsView.vue b/src/views/ContractsView.vue new file mode 100644 index 0000000..124c4b3 --- /dev/null +++ b/src/views/ContractsView.vue @@ -0,0 +1,17 @@ + + + + \ No newline at end of file diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index 6bb706f..317e6ed 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -1,9 +1,17 @@ - - - + + + + \ No newline at end of file diff --git a/src/views/SupportView.vue b/src/views/SupportView.vue new file mode 100644 index 0000000..48df283 --- /dev/null +++ b/src/views/SupportView.vue @@ -0,0 +1,17 @@ + + + + \ No newline at end of file