feat: first glance at the front and back end

2025-02-03 21:38:04 +01:00
parent b401983c0f
commit ee43df370f
45 changed files with 1489 additions and 9 deletions
--- a/front/Dockerfile
+++ b/front/Dockerfile
@ -0,0 +1,39 @@
+# Use the official node image as the base image
+FROM node:20-alpine AS build-stage
+
+# Set the working directory
+WORKDIR /app
+
+# Copy the package.json and package-lock.json files to the working directory
+COPY my-vue-app/package*.json ./
+
+# Install dependencies
+RUN npm install
+
+# Copy the rest of the application code to the working directory
+COPY my-vue-app .
+
+# Build the Vue.js application for production
+RUN npm run build
+
+# Use the official nginx image as the base image for serving the application
+FROM nginx:stable-alpine AS production-stage
+
+# Copy the built files from the build-stage to the nginx html directory
+COPY --from=build-stage /app/dist /usr/share/nginx/html
+
+# Copy custom nginx configuration files
+COPY nginx/nginx.conf /etc/nginx/nginx.conf
+COPY nginx/default.conf /etc/nginx/conf.d/default.conf
+
+# Copy the entry point script
+COPY nginx/start.sh /start.sh
+
+# Make the entry point script executable
+RUN chmod +x /start.sh
+
+# Expose port 80
+EXPOSE 80
+
+# Set the entry point to the shell script
+ENTRYPOINT ["/start.sh"]
--- a/front/my-vue-app/README.md
+++ b/front/my-vue-app/README.md
@ -0,0 +1,52 @@
+# my-vue-app
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+
+## Type Support for `.vue` Imports in TS
+
+TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vite.dev/config/).
+
+## Project Setup
+
+```sh
+npm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
+```
+
+### Type-Check, Compile and Minify for Production
+
+```sh
+npm run build
+```
+
+### Run End-to-End Tests with [Playwright](https://playwright.dev)
+
+```sh
+# Install browsers for the first run
+npx playwright install
+
+# When testing on CI, must build the project first
+npm run build
+
+# Runs the end-to-end tests
+npm run test:e2e
+# Runs the tests only on Chromium
+npm run test:e2e -- --project=chromium
+# Runs the tests of a specific file
+npm run test:e2e -- tests/example.spec.ts
+# Runs the tests in debug mode
+npm run test:e2e -- --debug
+```
--- a/front/my-vue-app/index.html
+++ b/front/my-vue-app/index.html
@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
--- a/front/my-vue-app/package.json
+++ b/front/my-vue-app/package.json
@ -0,0 +1,39 @@
+{
+  "name": "my-vue-app",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "run-p type-check \"build-only {@}\" --",
+    "preview": "vite preview",
+    "test:e2e": "playwright test",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --build"
+  },
+  "dependencies": {
+    "@auth0/auth0-vue": "^2.4.0",
+    "@dsb-norge/vue-keycloak-js": "^3.0.1",
+    "axios": "^1.7.9",
+    "cors": "^2.8.5",
+    "keycloak-js": "^26.1.0",
+    "oidc-client-ts": "^3.1.0",
+    "oidc-spa": "^6.0.7",
+    "pinia": "^2.3.1",
+    "pinia-plugin-persistedstate": "^4.2.0",
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.49.1",
+    "@tsconfig/node22": "^22.0.0",
+    "@types/node": "^22.10.7",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vue/tsconfig": "^0.7.0",
+    "npm-run-all2": "^7.0.2",
+    "typescript": "~5.7.3",
+    "vite": "^6.0.11",
+    "vite-plugin-vue-devtools": "^7.7.0",
+    "vue-tsc": "^2.2.0"
+  }
+}
--- a/front/my-vue-app/public/favicon.ico
+++ b/front/my-vue-app/public/favicon.ico
--- a/front/my-vue-app/public/silent-check-sso.htm
+++ b/front/my-vue-app/public/silent-check-sso.htm
@ -0,0 +1,8 @@
+<!doctype html>
+<html>
+<body>
+<script>
+    parent.postMessage(location.href, location.origin);
+</script>
+</body>
+</html>
--- a/front/my-vue-app/src/App.vue
+++ b/front/my-vue-app/src/App.vue
@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { RouterLink, RouterView } from 'vue-router'
+import HelloWorld from './components/HelloWorld.vue'
+</script>
+
+<template>
+  <RouterView />
+</template>
+
+<style scoped>
+</style>
--- a/front/my-vue-app/src/assets/logo.svg
+++ b/front/my-vue-app/src/assets/logo.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
--- a/front/my-vue-app/src/components/HelloWorld.vue
+++ b/front/my-vue-app/src/components/HelloWorld.vue
@ -0,0 +1,41 @@
+<script setup lang="ts">
+defineProps<{
+  msg: string
+}>()
+</script>
+
+<template>
+  <div class="greetings">
+    <h1 class="green">{{ msg }}</h1>
+    <h3>
+      You’ve successfully created a project with
+      <a href="https://vite.dev/" target="_blank" rel="noopener">Vite</a> +
+      <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>. What's next?
+    </h3>
+  </div>
+</template>
+
+<style scoped>
+h1 {
+  font-weight: 500;
+  font-size: 2.6rem;
+  position: relative;
+  top: -10px;
+}
+
+h3 {
+  font-size: 1.2rem;
+}
+
+.greetings h1,
+.greetings h3 {
+  text-align: center;
+}
+
+@media (min-width: 1024px) {
+  .greetings h1,
+  .greetings h3 {
+    text-align: left;
+  }
+}
+</style>
--- a/front/my-vue-app/src/components/TheWelcome.vue
+++ b/front/my-vue-app/src/components/TheWelcome.vue
@ -0,0 +1,94 @@
+<script setup lang="ts">
+import WelcomeItem from './WelcomeItem.vue'
+import DocumentationIcon from './icons/IconDocumentation.vue'
+import ToolingIcon from './icons/IconTooling.vue'
+import EcosystemIcon from './icons/IconEcosystem.vue'
+import CommunityIcon from './icons/IconCommunity.vue'
+import SupportIcon from './icons/IconSupport.vue'
+
+const openReadmeInEditor = () => fetch('/__open-in-editor?file=README.md')
+</script>
+
+<template>
+  <WelcomeItem>
+    <template #icon>
+      <DocumentationIcon />
+    </template>
+    <template #heading>Documentation</template>
+
+    Vue’s
+    <a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
+    provides you with all information you need to get started.
+  </WelcomeItem>
+
+  <WelcomeItem>
+    <template #icon>
+      <ToolingIcon />
+    </template>
+    <template #heading>Tooling</template>
+
+    This project is served and bundled with
+    <a href="https://vite.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The
+    recommended IDE setup is
+    <a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a>
+    +
+    <a href="https://github.com/johnsoncodehk/volar" target="_blank" rel="noopener">Volar</a>. If
+    you need to test your components and web pages, check out
+    <a href="https://vitest.dev/" target="_blank" rel="noopener">Vite</a>
+    and
+    <a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a>
+    /
+    <a href="https://playwright.dev/" target="_blank" rel="noopener">Playwright</a>.
+
+    <br />
+
+    More instructions are available in
+    <a href="javascript:void(0)" @click="openReadmeInEditor"><code>README.md</code></a
+    >.
+  </WelcomeItem>
+
+  <WelcomeItem>
+    <template #icon>
+      <EcosystemIcon />
+    </template>
+    <template #heading>Ecosystem</template>
+
+    Get official tools and libraries for your project:
+    <a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>,
+    <a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>,
+    <a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and
+    <a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If
+    you need more resources, we suggest paying
+    <a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a>
+    a visit.
+  </WelcomeItem>
+
+  <WelcomeItem>
+    <template #icon>
+      <CommunityIcon />
+    </template>
+    <template #heading>Community</template>
+
+    Got stuck? Ask your question on
+    <a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>
+    (our official Discord server), or
+    <a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener"
+      >StackOverflow</a
+    >. You should also follow the official
+    <a href="https://bsky.app/profile/vuejs.org" target="_blank" rel="noopener">@vuejs.org</a>
+    Bluesky account or the
+    <a href="https://x.com/vuejs" target="_blank" rel="noopener">@vuejs</a>
+    X account for latest news in the Vue world.
+  </WelcomeItem>
+
+  <WelcomeItem>
+    <template #icon>
+      <SupportIcon />
+    </template>
+    <template #heading>Support Vue</template>
+
+    As an independent project, Vue relies on community backing for its sustainability. You can help
+    us by
+    <a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>.
+  </WelcomeItem>
+</template>
--- a/front/my-vue-app/src/components/WelcomeItem.vue
+++ b/front/my-vue-app/src/components/WelcomeItem.vue
@ -0,0 +1,87 @@
+<template>
+  <div class="item">
+    <i>
+      <slot name="icon"></slot>
+    </i>
+    <div class="details">
+      <h3>
+        <slot name="heading"></slot>
+      </h3>
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.item {
+  margin-top: 2rem;
+  display: flex;
+  position: relative;
+}
+
+.details {
+  flex: 1;
+  margin-left: 1rem;
+}
+
+i {
+  display: flex;
+  place-items: center;
+  place-content: center;
+  width: 32px;
+  height: 32px;
+
+  color: var(--color-text);
+}
+
+h3 {
+  font-size: 1.2rem;
+  font-weight: 500;
+  margin-bottom: 0.4rem;
+  color: var(--color-heading);
+}
+
+@media (min-width: 1024px) {
+  .item {
+    margin-top: 0;
+    padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
+  }
+
+  i {
+    top: calc(50% - 25px);
+    left: -26px;
+    position: absolute;
+    border: 1px solid var(--color-border);
+    background: var(--color-background);
+    border-radius: 8px;
+    width: 50px;
+    height: 50px;
+  }
+
+  .item:before {
+    content: ' ';
+    border-left: 1px solid var(--color-border);
+    position: absolute;
+    left: 0;
+    bottom: calc(50% + 25px);
+    height: calc(50% - 25px);
+  }
+
+  .item:after {
+    content: ' ';
+    border-left: 1px solid var(--color-border);
+    position: absolute;
+    left: 0;
+    top: calc(50% + 25px);
+    height: calc(50% - 25px);
+  }
+
+  .item:first-of-type:before {
+    display: none;
+  }
+
+  .item:last-of-type:after {
+    display: none;
+  }
+}
+</style>
--- a/front/my-vue-app/src/components/icons/IconCommunity.vue
+++ b/front/my-vue-app/src/components/icons/IconCommunity.vue
@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
+    <path
+      d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
+    />
+  </svg>
+</template>
--- a/front/my-vue-app/src/components/icons/IconDocumentation.vue
+++ b/front/my-vue-app/src/components/icons/IconDocumentation.vue
@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
+    <path
+      d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
+    />
+  </svg>
+</template>
--- a/front/my-vue-app/src/components/icons/IconEcosystem.vue
+++ b/front/my-vue-app/src/components/icons/IconEcosystem.vue
@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
+    <path
+      d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
+    />
+  </svg>
+</template>
--- a/front/my-vue-app/src/components/icons/IconSupport.vue
+++ b/front/my-vue-app/src/components/icons/IconSupport.vue
@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
+    <path
+      d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
+    />
+  </svg>
+</template>
--- a/front/my-vue-app/src/components/icons/IconTooling.vue
+++ b/front/my-vue-app/src/components/icons/IconTooling.vue
@ -0,0 +1,19 @@
+<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    aria-hidden="true"
+    role="img"
+    class="iconify iconify--mdi"
+    width="24"
+    height="24"
+    preserveAspectRatio="xMidYMid meet"
+    viewBox="0 0 24 24"
+  >
+    <path
+      d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
+      fill="currentColor"
+    ></path>
+  </svg>
+</template>
--- a/front/my-vue-app/src/helpers.ts
+++ b/front/my-vue-app/src/helpers.ts
@ -0,0 +1,25 @@
+import axios from "axios";
+
+const backendUrl = "http://localhost:8080/"
+
+// TODO: spawn a error modal
+function defaultApiErrorHandler(err){
+    console.log(err)
+}
+
+function defaultApiSuccessHandler(response){
+    console.log(response)
+}
+
+function callApi(endpoint: string, onSuccessHandler, onErrorHandler): void {
+    console.log("callApi: "+ endpoint)
+    axios.get(backendUrl + endpoint).then(
+        onSuccessHandler == null ? defaultApiSuccessHandler : onSuccessHandler
+    ).catch(
+        (err) => {
+            onErrorHandler == null ? defaultApiErrorHandler(err): onErrorHandler(err);
+        }
+    )
+}
+
+export {callApi}
--- a/front/my-vue-app/src/main.ts
+++ b/front/my-vue-app/src/main.ts
@ -0,0 +1,68 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+//import VueKeyCloak from '@dsb-norge/vue-keycloak-js'
+//import { useKeycloak } from '@dsb-norge/vue-keycloak-js'
+//import axios from 'axios'
+import {createPinia} from "pinia";
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
+import AuthStorePlugin from './plugins/authStore';
+import keycloakService from './services/keycloak';
+
+keycloakService.CallInit(() => {
+
+    const app = createApp(App)
+
+
+// Setup pinia store, allowing user to keep logged in status after refresh
+    const pinia = createPinia();
+    pinia.use(piniaPluginPersistedstate);
+
+    app.use(pinia);
+    app.use(AuthStorePlugin, { pinia });
+    app.use(router)
+    app.mount('#app');
+
+})
+
+
+// TODO: fix the comment
+/*
+function tokenInterceptor () {
+    axios.interceptors.request.use(config => {
+        const keycloak = useKeycloak()
+        if (keycloak.authenticated) {
+            // Note that this is a simple example.
+            // you should be careful not to leak tokens to third parties.
+            // in this example the token is added to all usage of axios.
+            config.headers.Authorization = `Bearer ${keycloak.token}`
+        }
+        return config
+    }, error => {
+        console.error("tokenInterceptor: Rejected")
+        return Promise.reject(error)
+    })
+}
+*/
+
+/*
+app.use(VueKeyCloak,{
+    onReady: (keycloak) => {
+        console.log("Ready !")
+        tokenInterceptor()
+    },
+    init: {
+        onLoad: 'login-required',
+        checkLoginIframe: false,
+
+    },
+
+    config: {
+        realm: 'test',
+        url: 'http://localhost:7080',
+        clientId: 'myinpulse'
+    }
+}  );
+*/
+
+
--- a/front/my-vue-app/src/plugins/authStore.ts
+++ b/front/my-vue-app/src/plugins/authStore.ts
@ -0,0 +1,14 @@
+// file: src/plugins/authStore.js
+
+import { useAuthStore } from "@/stores/authStore.ts";
+import keycloakService from '@/services/keycloak';
+// Setup auth store as a plugin so it can be accessed globally in our FE
+const authStorePlugin = {
+    install(app, option) {
+        const store = useAuthStore(option.pinia);
+        app.config.globalProperties.$store = store;
+        keycloakService.CallInitStore(store);
+    }
+}
+
+export default authStorePlugin;
--- a/front/my-vue-app/src/router/index.ts
+++ b/front/my-vue-app/src/router/index.ts
@ -0,0 +1,40 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import HomeView from '../views/HomeView.vue'
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      component: HomeView,
+    },
+    {
+      path: '/about',
+      name: 'about',
+      // route level code-splitting
+      // this generates a separate chunk (About.[hash].js) for this route
+      // which is lazy-loaded when the route is visited.
+      component: () => import('../views/AboutView.vue'),
+    },
+    {
+      path: '/random',
+      name: 'random',
+      // route level code-splitting
+      // this generates a separate chunk (About.[hash].js) for this route
+      // which is lazy-loaded when the route is visited.
+      component: () => import('../views/Random.vue'),
+    },
+
+    {
+      path: '/test',
+      name: 'test',
+      // route level code-splitting
+      // this generates a separate chunk (About.[hash].js) for this route
+      // which is lazy-loaded when the route is visited.
+      component: () => import('../views/Home.vue'),
+    },
+  ],
+})
+
+export default router
--- a/front/my-vue-app/src/services/api.ts
+++ b/front/my-vue-app/src/services/api.ts
@ -0,0 +1,13 @@
+// file: src/services/api.js
+
+import axios from "axios";
+
+// Creating an instance for axios to be used by the token interceptor service
+const instance = axios.create({
+    baseURL: `${import.meta.env.VITE_BE_API_URL}/api`,
+    headers: {
+        "Content-Type": "application/json",
+    },
+});
+
+export default instance;
--- a/front/my-vue-app/src/services/keycloak.ts
+++ b/front/my-vue-app/src/services/keycloak.ts
@ -0,0 +1,100 @@
+import Keycloak from 'keycloak-js';
+
+const options = {
+    url: import.meta.env.VITE_KEYCLOAK_URL,
+    clientId: import.meta.env.VITE_KEYCLOAK_CLIENT_ID,
+    realm: import.meta.env.VITE_KEYCLOAK_REALM
+}
+
+
+const keycloak = new Keycloak(options);
+let authenticated;
+let store = null;
+
+async function login(){
+    try {
+        await keycloak.login() // https://www.keycloak.org/securing-apps/javascript-adapter#:~:text=when%20initialization%20completes.-,login(options),-Redirects%20to%20login
+        return keycloak;
+    } catch (error) {
+        console.log(error)
+    }
+}
+
+async function signup(){
+    try {
+        await keycloak.login(
+            {action: "register"}
+        ) // https://www.keycloak.org/securing-apps/javascript-adapter#:~:text=when%20initialization%20completes.-,login(options),-Redirects%20to%20login
+        return keycloak;
+    } catch (error) {
+        console.log(error)
+    }
+}
+
+/**
+ * Initializes Keycloak, then run callback. This will prompt you to login.
+ *
+ * @param onInitCallback
+ */
+async function init(onInitCallback) {
+    try {
+        authenticated = await keycloak.init({
+            onLoad: "check-sso",
+            silentCheckSsoRedirectUri: `${location.origin}/silent-check-sso.htm`,
+            responseMode: "query",
+        })
+        onInitCallback()
+    } catch (error) {
+        console.error("Keycloak init failed")
+        console.error(error)
+    }
+};
+
+/**
+ * Initializes store with Keycloak user data
+ *
+ */
+async function initStore(storeInstance) {
+    try {
+        store = storeInstance
+        console.log(keycloak)
+        await store.initOauth(keycloak)
+
+        // Show alert if user is not authenticated
+        if (!authenticated) { console.warn("not authenticated") }
+    } catch (error) {
+        console.error("Keycloak init failed")
+        console.error(error)
+    }
+};
+
+/**
+ * Logout user
+ */
+function logout(url) {
+    keycloak.logout({ redirectUri: url });
+}
+
+/**
+ * Refreshes token
+ */
+async function refreshToken() {
+    try {
+        await keycloak.updateToken(480);
+        return keycloak;
+    } catch (error) {
+        console.error('Failed to refresh token');
+        console.error(error);
+    }
+}
+
+const KeycloakService = {
+    CallInit: init,
+    CallInitStore: initStore,
+    CallLogout: logout,
+    CallTokenRefresh: refreshToken,
+    callLogin: login,
+    callSignup: signup,
+};
+
+export default KeycloakService;
--- a/front/my-vue-app/src/stores/authStore.ts
+++ b/front/my-vue-app/src/stores/authStore.ts
@ -0,0 +1,72 @@
+import { defineStore } from "pinia";
+import keycloakService from '@/services/keycloak';
+export const useAuthStore = defineStore("storeAuth", {
+    state: () => {
+        return {
+            testv: true,
+            authenticated: false,
+            user: {
+                token: null,
+                refreshToken: null,
+                username: null,
+            },
+        }
+    },
+    persist: true,
+    getters: {},
+    actions: {
+        // Initialize Keycloak OAuth
+        async initOauth(keycloak, clearData = true) {
+            if(clearData) { await this.clearUserData(); }
+
+            this.authenticated = keycloak.authenticated;
+            if (this.authenticated){
+                this.user.username = keycloak.idTokenParsed.given_name;
+                this.user.token = keycloak.token;
+                this.user.refreshToken = keycloak.refreshToken;
+            }
+        },
+        async login(){
+            try {
+                const keycloak = await keycloakService.callLogin();
+                await this.initOauth(keycloak);
+            } catch (error) {
+                console.log(error)
+            }
+        },
+        async signup() {
+            try {
+                const keycloak = await keycloakService.callSignup();
+                await this.initOauth(keycloak);
+            } catch (error) {
+                console.log(error)
+            }
+        },
+        // Logout user
+        async logout() {
+            try {
+                await keycloakService.CallLogout(import.meta.env.VITE_APP_URL + "/test");
+                await this.clearUserData();
+            } catch (error) {
+                console.error(error);
+            }
+        },
+        // Refresh user's token
+        async refreshUserToken() {
+            try {
+                const keycloak = await keycloakService.CallTokenRefresh();
+                await this.initOauth(keycloak, false);
+            } catch (error) {
+                console.error(error);
+            }
+        },
+        test() {
+            this.testv = !this.testv;
+        },
+        // Clear user's store data
+        clearUserData() {
+            this.authenticated = false;
+            this.user = {};
+        }
+    }
+});
--- a/front/my-vue-app/src/views/AboutView.vue
+++ b/front/my-vue-app/src/views/AboutView.vue
@ -0,0 +1,15 @@
+<template>
+  <div class="about">
+    <h1>This is an about page</h1>
+  </div>
+</template>
+
+<style>
+@media (min-width: 1024px) {
+  .about {
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+  }
+}
+</style>
--- a/front/my-vue-app/src/views/Home.vue
+++ b/front/my-vue-app/src/views/Home.vue
@ -0,0 +1,59 @@
+<script setup lang="ts">
+import {useAuthStore} from "@/stores/authStore";
+
+const store = useAuthStore()
+
+</script>
+
+<template>
+  <h1>Test page</h1>
+  <table class="test"  style="width:100%">
+    <tbody>
+    <tr>
+      <td>Is Currently Authenticated ? </td>
+      <td>{{store.authenticated}}</td>
+      <td><button @click="store.login">Login</button></td>
+      <td><button @click="store.logout">Logout</button></td>
+      <td><button @click="store.signup">Signup</button></td>
+    </tr>
+    <tr>
+      <td>current token</td>
+      <td>{{store.user.token}}</td>
+      <td><button @click="store.refreshUserToken">Refresh</button></td>
+    </tr>
+    <tr>
+      <td>Current refresh token</td>
+      <td>{{store.user.refreshToken}}</td>
+    </tr>
+    <tr>
+      <td>Unauthenticated API call</td>
+      <td><button>call</button></td>
+      <td>res</td>
+      <td></td>
+    </tr>
+    <tr>
+      <td>Authenticated API call</td>
+      <td><button>call</button></td>
+      <td>res</td>
+      <td></td>
+    </tr>
+    </tbody>
+  </table>
+</template>
+
+<style scoped>
+table {
+    width: 100px;
+  table-layout: fixed
+  }
+  tr {
+    width: 100%;
+    height: 100%;
+  }
+  td {
+    border: solid 1px black;
+    width: 20%;
+    height: 100%;
+    overflow: hidden;
+  }
+</style>
--- a/front/my-vue-app/src/views/HomeView.vue
+++ b/front/my-vue-app/src/views/HomeView.vue
@ -0,0 +1,62 @@
+<script>
+import api from "../services/api";
+import {useAuthStore} from "@/stores/authStore";
+
+
+export default {
+  data() {
+    return {
+      store: useAuthStore(),
+      loading: false,
+      blogLink: import.meta.env.VITE_BLOG_LINK
+    };
+  },
+  created() {
+  },
+  methods: {
+  }
+}
+</script>
+
+<template>
+  <div class="card">
+    <button
+        class="mr-15"
+        type="button"
+        title="Refreshes user token"
+        @click="store.refreshUserToken"
+    >
+      Refresh Token
+    </button>
+
+    <button
+        class="mr-15"
+        type="button"
+        title="Refreshes user token"
+        @click="store.login"
+    >
+      login
+    </button>
+    <!-- Logout button -->
+    <button
+        type="button"
+        title="Logout Keycloak user"
+        @click="store.logout"
+    >
+      Logout
+    </button>
+  </div>
+
+  <div class="card py-10">
+    <h2>Keycloak User</h2>
+    <p>Auth: {{store.authenticated}}</p>
+    <p class="my-5">Username: {{ store.user.username }}</p>
+    <p class="my-5">Token:</p>
+    <p class="wrap-text font-small my-5">{{ store.user.token }}</p>
+    <p class="my-5">Refresh Token:</p>
+    <p class="wrap-text font-small my-5">{{ store.user.refToken }}</p>
+  </div>
+</template>
+
+<style scoped>
+</style>
--- a/front/my-vue-app/src/views/Random.vue
+++ b/front/my-vue-app/src/views/Random.vue
@ -0,0 +1,38 @@
+<script lang="ts">
+
+import axios from 'axios'
+import {callApi} from "@/helpers.ts";
+import ErrorModal from "@/views/errorModal.vue";
+
+export default {
+  components: {ErrorModal},
+  inject: ['callApi'],
+  data() {
+    return {
+      posts: null
+    }
+  },
+  methods: {
+    async getRandom() {
+      this.posts = await axios.get('http://localhost:8080/random')
+    },
+
+    async getUserInfo() {
+      //this.posts = await axios.get('http://localhost:8080/getUserInfo')
+
+      callApi("getUserInfo");
+    }
+  }
+}
+</script>
+
+<template>
+  <button @click="getRandom()">get a random value</button>
+  <button @click="getUserInfo()">get user info</button>
+  <p> Res: {{this.posts?.data}}</p>
+  <error-modal error="test"></error-modal>
+</template>
+
+<style scoped>
+
+</style>
--- a/front/my-vue-app/src/views/errorModal.vue
+++ b/front/my-vue-app/src/views/errorModal.vue
@ -0,0 +1,32 @@
+<script lang="ts">
+import {defineComponent} from 'vue'
+
+export default defineComponent({
+  name: "errorModal",
+  props: {
+    error: String
+  },
+  data(){
+    return {
+    }
+  }
+})
+</script>
+
+<template>
+<div class="error">
+  <p>Erreur :(</p>
+  <p>{{error}}</p>
+</div>
+</template>
+
+<style scoped>
+  .error{
+    background-color: darkred;
+    color: white;
+    padding: 1em;
+    border-radius: 0.5em;
+    text-align: center;
+    position: absolute;
+  }
+</style>
--- a/front/my-vue-app/tsconfig.json
+++ b/front/my-vue-app/tsconfig.json
@ -0,0 +1,11 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    },
+    {
+      "path": "./tsconfig.app.json"
+    }
+  ]
+}
--- a/front/my-vue-app/vite.config.ts
+++ b/front/my-vue-app/vite.config.ts
@ -0,0 +1,21 @@
+import { fileURLToPath, URL } from 'node:url'
+
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import vueDevTools from 'vite-plugin-vue-devtools'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [
+    vue(),
+    vueDevTools(),
+  ],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    },
+  },
+  server: {
+	allowedHosts: ["localhost.ipb.fr", "cas.bordeaux-inp.fr"]	
+  }
+})
--- a/front/nginx/default.conf
+++ b/front/nginx/default.conf
@ -0,0 +1,9 @@
+server {
+ listen 80;
+ server_name localhost;
+ root /usr/share/nginx/html;
+ index index.html index.htm;
+location / {
+ try_files $uri $uri/ /index.html;
+ }
+}
--- a/front/nginx/nginx.conf
+++ b/front/nginx/nginx.conf
@ -0,0 +1,31 @@
+# /etc/nginx/nginx.conf
+
+user  nginx;
+worker_processes  1;
+
+error_log  /var/log/nginx/error.log warn;
+pid        /var/run/nginx.pid;
+
+events {
+    worker_connections  1024;
+}
+
+http {
+    include       /etc/nginx/mime.types;
+    default_type  application/octet-stream;
+
+    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
+                      '$status $body_bytes_sent "$http_referer" '
+                      '"$http_user_agent" "$http_x_forwarded_for"';
+
+    access_log  /var/log/nginx/access.log  main;
+
+    sendfile        on;
+    #tcp_nopush     on;
+
+    keepalive_timeout  65;
+
+    #gzip  on;
+
+    include /etc/nginx/conf.d/*.conf;
+}
--- a/front/nginx/start.sh
+++ b/front/nginx/start.sh
@ -0,0 +1,5 @@
+#!/bin/sh
+# Exit immediately if a command exits with a non-zero status
+set -e
+# Start nginx
+nginx -g "daemon off;"
				`@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>`