feat: first glance at the front and back end

back/Dockerfile

@@ -0,0 +1,3 @@
+FROM openjdk:21-jdk
+COPY myinpulse/build/libs/myinpulse-0.0.1-SNAPSHOT.jar myinpulse.jar
+ENTRYPOINT ["java","-jar","/myinpulse.jar"]

back/myinpulse/build.gradle

@@ -0,0 +1,29 @@
+plugins {
+	id 'java'
+	id 'org.springframework.boot' version '3.4.2'
+	id 'io.spring.dependency-management' version '1.1.7'
+}
+
+group = 'enseirb'
+version = '0.0.1-SNAPSHOT'
+
+java {
+	toolchain {
+		languageVersion = JavaLanguageVersion.of(21)
+	}
+}
+
+repositories {
+	mavenCentral()
+}
+
+dependencies {
+	implementation 'org.springframework.boot:spring-boot-starter-oauth2-resource-server'
+	implementation 'org.springframework.boot:spring-boot-starter-web'
+	testImplementation 'org.springframework.boot:spring-boot-starter-test'
+	testRuntimeOnly 'org.junit.platform:junit-platform-launcher'
+}
+
+tasks.named('test') {
+	useJUnitPlatform()
+}

back/myinpulse/gradlew

@@ -0,0 +1,252 @@
+#!/bin/sh
+
+#
+# Copyright © 2015-2021 the original authors.
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#      https://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+#
+# SPDX-License-Identifier: Apache-2.0
+#
+
+##############################################################################
+#
+#   Gradle start up script for POSIX generated by Gradle.
+#
+#   Important for running:
+#
+#   (1) You need a POSIX-compliant shell to run this script. If your /bin/sh is
+#       noncompliant, but you have some other compliant shell such as ksh or
+#       bash, then to run this script, type that shell name before the whole
+#       command line, like:
+#
+#           ksh Gradle
+#
+#       Busybox and similar reduced shells will NOT work, because this script
+#       requires all of these POSIX shell features:
+#         * functions;
+#         * expansions «$var», «${var}», «${var:-default}», «${var+SET}»,
+#           «${var#prefix}», «${var%suffix}», and «$( cmd )»;
+#         * compound commands having a testable exit status, especially «case»;
+#         * various built-in commands including «command», «set», and «ulimit».
+#
+#   Important for patching:
+#
+#   (2) This script targets any POSIX shell, so it avoids extensions provided
+#       by Bash, Ksh, etc; in particular arrays are avoided.
+#
+#       The "traditional" practice of packing multiple parameters into a
+#       space-separated string is a well documented source of bugs and security
+#       problems, so this is (mostly) avoided, by progressively accumulating
+#       options in "$@", and eventually passing that to Java.
+#
+#       Where the inherited environment variables (DEFAULT_JVM_OPTS, JAVA_OPTS,
+#       and GRADLE_OPTS) rely on word-splitting, this is performed explicitly;
+#       see the in-line comments for details.
+#
+#       There are tweaks for specific operating systems such as AIX, CygWin,
+#       Darwin, MinGW, and NonStop.
+#
+#   (3) This script is generated from the Groovy template
+#       https://github.com/gradle/gradle/blob/HEAD/platforms/jvm/plugins-application/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt
+#       within the Gradle project.
+#
+#       You can find Gradle at https://github.com/gradle/gradle/.
+#
+##############################################################################
+
+# Attempt to set APP_HOME
+
+# Resolve links: $0 may be a link
+app_path=$0
+
+# Need this for daisy-chained symlinks.
+while
+    APP_HOME=${app_path%"${app_path##*/}"}  # leaves a trailing /; empty if no leading path
+    [ -h "$app_path" ]
+do
+    ls=$( ls -ld "$app_path" )
+    link=${ls#*' -> '}
+    case $link in             #(
+      /*)   app_path=$link ;; #(
+      *)    app_path=$APP_HOME$link ;;
+    esac
+done
+
+# This is normally unused
+# shellcheck disable=SC2034
+APP_BASE_NAME=${0##*/}
+# Discard cd standard output in case $CDPATH is set (https://github.com/gradle/gradle/issues/25036)
+APP_HOME=$( cd -P "${APP_HOME:-./}" > /dev/null && printf '%s
+' "$PWD" ) || exit
+
+# Use the maximum available, or set MAX_FD != -1 to use that value.
+MAX_FD=maximum
+
+warn () {
+    echo "$*"
+} >&2
+
+die () {
+    echo
+    echo "$*"
+    echo
+    exit 1
+} >&2
+
+# OS specific support (must be 'true' or 'false').
+cygwin=false
+msys=false
+darwin=false
+nonstop=false
+case "$( uname )" in                #(
+  CYGWIN* )         cygwin=true  ;; #(
+  Darwin* )         darwin=true  ;; #(
+  MSYS* | MINGW* )  msys=true    ;; #(
+  NONSTOP* )        nonstop=true ;;
+esac
+
+CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
+
+
+# Determine the Java command to use to start the JVM.
+if [ -n "$JAVA_HOME" ] ; then
+    if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
+        # IBM's JDK on AIX uses strange locations for the executables
+        JAVACMD=$JAVA_HOME/jre/sh/java
+    else
+        JAVACMD=$JAVA_HOME/bin/java
+    fi
+    if [ ! -x "$JAVACMD" ] ; then
+        die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+    fi
+else
+    JAVACMD=java
+    if ! command -v java >/dev/null 2>&1
+    then
+        die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+    fi
+fi
+
+# Increase the maximum file descriptors if we can.
+if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then
+    case $MAX_FD in #(
+      max*)
+        # In POSIX sh, ulimit -H is undefined. That's why the result is checked to see if it worked.
+        # shellcheck disable=SC2039,SC3045
+        MAX_FD=$( ulimit -H -n ) ||
+            warn "Could not query maximum file descriptor limit"
+    esac
+    case $MAX_FD in  #(
+      '' | soft) :;; #(
+      *)
+        # In POSIX sh, ulimit -n is undefined. That's why the result is checked to see if it worked.
+        # shellcheck disable=SC2039,SC3045
+        ulimit -n "$MAX_FD" ||
+            warn "Could not set maximum file descriptor limit to $MAX_FD"
+    esac
+fi
+
+# Collect all arguments for the java command, stacking in reverse order:
+#   * args from the command line
+#   * the main class name
+#   * -classpath
+#   * -D...appname settings
+#   * --module-path (only if needed)
+#   * DEFAULT_JVM_OPTS, JAVA_OPTS, and GRADLE_OPTS environment variables.
+
+# For Cygwin or MSYS, switch paths to Windows format before running java
+if "$cygwin" || "$msys" ; then
+    APP_HOME=$( cygpath --path --mixed "$APP_HOME" )
+    CLASSPATH=$( cygpath --path --mixed "$CLASSPATH" )
+
+    JAVACMD=$( cygpath --unix "$JAVACMD" )
+
+    # Now convert the arguments - kludge to limit ourselves to /bin/sh
+    for arg do
+        if
+            case $arg in                                #(
+              -*)   false ;;                            # don't mess with options #(
+              /?*)  t=${arg#/} t=/${t%%/*}              # looks like a POSIX filepath
+                    [ -e "$t" ] ;;                      #(
+              *)    false ;;
+            esac
+        then
+            arg=$( cygpath --path --ignore --mixed "$arg" )
+        fi
+        # Roll the args list around exactly as many times as the number of
+        # args, so each arg winds up back in the position where it started, but
+        # possibly modified.
+        #
+        # NB: a `for` loop captures its iteration list before it begins, so
+        # changing the positional parameters here affects neither the number of
+        # iterations, nor the values presented in `arg`.
+        shift                   # remove old arg
+        set -- "$@" "$arg"      # push replacement arg
+    done
+fi
+
+
+# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
+
+# Collect all arguments for the java command:
+#   * DEFAULT_JVM_OPTS, JAVA_OPTS, JAVA_OPTS, and optsEnvironmentVar are not allowed to contain shell fragments,
+#     and any embedded shellness will be escaped.
+#   * For example: A user cannot expect ${Hostname} to be expanded, as it is an environment variable and will be
+#     treated as '${Hostname}' itself on the command line.
+
+set -- \
+        "-Dorg.gradle.appname=$APP_BASE_NAME" \
+        -classpath "$CLASSPATH" \
+        org.gradle.wrapper.GradleWrapperMain \
+        "$@"
+
+# Stop when "xargs" is not available.
+if ! command -v xargs >/dev/null 2>&1
+then
+    die "xargs is not available"
+fi
+
+# Use "xargs" to parse quoted args.
+#
+# With -n1 it outputs one arg per line, with the quotes and backslashes removed.
+#
+# In Bash we could simply go:
+#
+#   readarray ARGS < <( xargs -n1 <<<"$var" ) &&
+#   set -- "${ARGS[@]}" "$@"
+#
+# but POSIX shell has neither arrays nor command substitution, so instead we
+# post-process each arg (as a line of input to sed) to backslash-escape any
+# character that might be a shell metacharacter, then use eval to reverse
+# that process (while maintaining the separation between arguments), and wrap
+# the whole thing up as a single "set" statement.
+#
+# This will of course break if any of these variables contains a newline or
+# an unmatched quote.
+#
+
+eval "set -- $(
+        printf '%s\n' "$DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS" |
+        xargs -n1 |
+        sed ' s~[^-[:alnum:]+,./:=@_]~\\&~g; ' |
+        tr '\n' ' '
+    )" '"$@"'
+
+exec "$JAVACMD" "$@"

back/myinpulse/settings.gradle

@@ -0,0 +1 @@
+rootProject.name = 'myinpulse'

back/myinpulse/src/main/java/enseirb/myinpulse/MyinpulseApplication.java

@@ -0,0 +1,58 @@
+package enseirb.myinpulse;
+
+import org.springframework.boot.SpringApplication;
+import org.springframework.boot.autoconfigure.SpringBootApplication;
+import org.springframework.context.annotation.Bean;
+import org.springframework.security.config.Customizer;
+import org.springframework.security.config.annotation.web.builders.HttpSecurity;
+import org.springframework.security.config.annotation.web.builders.WebSecurity;
+import org.springframework.security.config.annotation.web.configurers.LogoutConfigurer;
+import org.springframework.security.web.SecurityFilterChain;
+import org.springframework.web.cors.CorsConfiguration;
+import org.springframework.web.cors.CorsConfigurationSource;
+import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
+import org.springframework.web.servlet.config.annotation.CorsRegistry;
+import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
+
+import java.util.Arrays;
+
+import static org.springframework.security.oauth2.core.authorization.OAuth2AuthorizationManagers.hasScope;
+
+@SpringBootApplication
+public class MyinpulseApplication {
+
+	public static void main(String[] args) {
+		SpringApplication.run(MyinpulseApplication.class, args);
+	}
+
+	// CORS configuration
+	// TODO: make sure to only accept our own domains
+	@Bean
+	public CorsConfigurationSource corsConfigurationSource() {
+		CorsConfiguration configuration = new CorsConfiguration();
+		configuration.setAllowedOrigins(Arrays.asList("*"));
+		configuration.setAllowedMethods(Arrays.asList("GET", "OPTIONS"));
+		configuration.setAllowedHeaders(Arrays.asList("authorization", "content-type",
+				"x-auth-token")); // Do not remove, this fixes the CORS errors when unauthenticated
+		//configuration.setExposedHeaders(Arrays.asList("x-auth-token"));
+		UrlBasedCorsConfigurationSource source = new
+				UrlBasedCorsConfigurationSource();
+		source.registerCorsConfiguration("/**", configuration);
+
+		return source;
+	}
+
+	// TODO: add unauthenticated endpoint with server status
+	@Bean
+	public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
+		http
+				.authorizeHttpRequests(authorize -> authorize
+						.requestMatchers("/random2").access(hasScope("contacts"))
+						.requestMatchers("/getUserInfo").access(hasScope("messages"))
+						.anyRequest().authenticated()
+				)
+				.oauth2ResourceServer((oauth2) -> oauth2.jwt(Customizer.withDefaults()));
+		return http.build();
+	}
+
+}

back/myinpulse/src/main/java/enseirb/myinpulse/api/GetUserInfo.java

@@ -0,0 +1,43 @@
+package enseirb.myinpulse.api;
+
+import org.springframework.boot.autoconfigure.SpringBootApplication;
+import org.springframework.security.core.context.SecurityContextHolder;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RequestMethod;
+import org.springframework.web.bind.annotation.RestController;
+import org.springframework.web.bind.annotation.CrossOrigin;
+
+import java.security.Principal;
+
+@SpringBootApplication
+@RestController
+public class GetUserInfo {
+    // TODO: understand how to get data
+    @GetMapping("/getUserInfo")
+    public Object user(Principal principal) {
+        System.out.println("GetUserInfo + " + principal);
+        System.out.println(SecurityContextHolder.getContext().getAuthentication());
+        return SecurityContextHolder.getContext().getAuthentication().getPrincipal();
+    }
+
+    @CrossOrigin(methods = {RequestMethod.GET, RequestMethod.OPTIONS})
+    @GetMapping("/random")
+    public boolean rand(){
+        System.err.println("HELLO");
+        return Math.random() > 0.5;
+    }
+
+    @CrossOrigin(methods = {RequestMethod.GET, RequestMethod.OPTIONS})
+    @GetMapping("/random2")
+    public boolean rand2(){
+        System.err.println("HELLO2");
+        return Math.random() > 0.5;
+    }
+
+    @CrossOrigin(methods = {RequestMethod.GET, RequestMethod.OPTIONS})
+    @GetMapping("/random3")
+    public boolean rand3(){
+        System.err.println("HELLO");
+        return Math.random() > 0.5;
+    }
+}

back/myinpulse/src/main/resources/application.properties

@@ -0,0 +1,3 @@
+spring.application.name=myinpulse
+spring.security.oauth2.resourceserver.jwt.jwk-set-uri=http://localhost:7080/realms/test/protocol/openid-connect/certs
+spring.security.oauth2.resourceserver.jwt.issuer-uri=http://localhost:7080/realms/test

back/myinpulse/src/test/java/enseirb/myinpulse/MyinpulseApplicationTests.java

@@ -0,0 +1,13 @@
+package enseirb.myinpulse;
+
+import org.junit.jupiter.api.Test;
+import org.springframework.boot.test.context.SpringBootTest;
+
+@SpringBootTest
+class MyinpulseApplicationTests {
+
+	@Test
+	void contextLoads() {
+	}
+
+}

docker-compose.yaml

@@ -12,22 +12,23 @@ services:
       POSTGRES_PASSWORD: ${POSTGRES_PASSWORD}
 
   keycloak:
-    image: quay.io/keycloak/keycloak:26.1.0
+    
     container_name: MyINPulse-keycloak
-    volumes:
-      - ./keycloak:/opt/keycloak/conf
+    build:
+      context: ./keycloak
+      dockerfile: Dockerfile
+      args:
+        KC_DB: postgres
+        KC_DB_URL: jdbc:postgresql://postgres/${POSTGRES_DB}
+        KC_DB_USERNAME: ${POSTGRES_USER}
+        KC_DB_PASSWORD: ${POSTGRES_PASSWORD}
     environment:
-      KC_HOSTNAME: localhost
       KC_HOSTNAME_PORT: 7080
       KC_HOSTNAME_STRICT_BACKCHANNEL: "true"
       KC_BOOTSTRAP_ADMIN_USERNAME: ${KEYCLOAK_ADMIN}
       KC_BOOTSTRAP_ADMIN_PASSWORD: ${KEYCLOAK_ADMIN_PASSWORD}
       KC_LOG_LEVEL: info
-      KC_DB: postgres
-      KC_DB_URL: jdbc:postgresql://postgres/${POSTGRES_DB}
-      KC_DB_USERNAME: ${POSTGRES_USER}
-      KC_DB_PASSWORD: ${POSTGRES_PASSWORD}
-    command: ["start-dev", "--http-port", "7080", "--https-port", "7443"]
+    command: ["start-dev", "--http-port", "7080", "--https-port", "7443", "--hostname", "http://localhost.ipb.fr:7080"]
     ports:
       - "7080:7080"
       - "7443:7443"

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

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
+```

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>

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"
+  }
+}

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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}

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'
+    }
+}  );
+*/
+
+

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;

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

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;

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;

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 = {};
+        }
+    }
+});

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>

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>

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>

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>

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>

front/my-vue-app/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    },
+    {
+      "path": "./tsconfig.app.json"
+    }
+  ]
+}

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"]	
+  }
+})

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;
+ }
+}

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;
+}

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

keycloak/Dockerfile

@@ -0,0 +1,30 @@
+FROM quay.io/keycloak/keycloak:latest AS builder
+
+ARG KC_DB
+ENV KC_DB=$KC_DB
+
+# Install custom providers
+
+ADD --chown=keycloak:keycloak --chmod=644 ./CAS/target/*.jar /opt/keycloak/providers/cas-provider.jar
+
+# build optimized image
+RUN /opt/keycloak/bin/kc.sh build 
+
+FROM quay.io/keycloak/keycloak:latest
+
+ARG KC_DB
+ENV KC_DB=$KC_DB
+
+ARG KC_DB_URL
+ENV KC_DB_URL=$KC_DB_URL
+
+ARG KC_DB_USERNAME
+ENV KC_DB_USERNAME=$KC_DB_USERNAME
+
+ARG KC_DB_PASSWORD
+ENV KC_DB_PASSWORD=$KC_DB_PASSWORD
+
+COPY --from=builder /opt/keycloak/ /opt/keycloak/
+WORKDIR /opt/keycloak
+
+ENTRYPOINT ["/opt/keycloak/bin/kc.sh"]