front/MyINPulse-front/package-lock.json

@@ -8,9 +8,13 @@
       "name": "my-vue-app",
       "version": "0.0.0",
       "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",
@@ -50,6 +54,28 @@
         "url": "https://github.com/sponsors/antfu"
       }
     },
+    "node_modules/@auth0/auth0-spa-js": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@auth0/auth0-spa-js/-/auth0-spa-js-2.1.3.tgz",
+      "integrity": "sha512-NMTBNuuG4g3rame1aCnNS5qFYIzsTUV5qTFPRfTyYFS1feS6jsCBR+eTq9YkxCp1yuoM2UIcjunPaoPl77U9xQ=="
+    },
+    "node_modules/@auth0/auth0-vue": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/@auth0/auth0-vue/-/auth0-vue-2.4.0.tgz",
+      "integrity": "sha512-12iLvojP8Pvxqu2Abxzksp0HqlSovGiAUhWrppnOaJP02MZEBQo+c/IwM6VbM0edNk+eqqjX5u96iw5peaCPSg==",
+      "dependencies": {
+        "@auth0/auth0-spa-js": "^2.1.3",
+        "vue": "^3.2.41"
+      },
+      "peerDependencies": {
+        "vue-router": "^4.0.12"
+      },
+      "peerDependenciesMeta": {
+        "vue-router": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.26.2",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.26.2.tgz",
@@ -463,6 +489,22 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@dsb-norge/vue-keycloak-js": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@dsb-norge/vue-keycloak-js/-/vue-keycloak-js-3.0.1.tgz",
+      "integrity": "sha512-uJ4deVw4Vyp2FrG0JjYAy8NE6zIlIIl/92mQDlSGH+9kc758hBdrCdZSD3aVzv/Lwh07tpOXsx4jXzbVQkPfkA==",
+      "dependencies": {
+        "keycloak-js": "26.0.7"
+      },
+      "peerDependencies": {
+        "vue": ">=3.0.0"
+      }
+    },
+    "node_modules/@dsb-norge/vue-keycloak-js/node_modules/keycloak-js": {
+      "version": "26.0.7",
+      "resolved": "https://registry.npmjs.org/keycloak-js/-/keycloak-js-26.0.7.tgz",
+      "integrity": "sha512-vKCk1ISMiouYRLjMzi5fKp58RnYxKEBS29BoDgVfYwVW94IXchj9jLqBvIet31VD1v79l3WaWT+WMX7fH8O4wA=="
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.24.2",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.24.2.tgz",
@@ -2597,6 +2639,14 @@
         "graceful-fs": "^4.1.6"
       }
     },
+    "node_modules/jwt-decode": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-4.0.0.tgz",
+      "integrity": "sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/keycloak-js": {
       "version": "26.1.0",
       "resolved": "https://registry.npmjs.org/keycloak-js/-/keycloak-js-26.1.0.tgz",
@@ -2932,6 +2982,34 @@
       "resolved": "https://registry.npmjs.org/ohash/-/ohash-1.1.4.tgz",
       "integrity": "sha512-FlDryZAahJmEF3VR3w1KogSEdWX3WhA5GPakFx4J81kEAiHyLMpdLLElS8n8dfNadMgAne/MywcvmogzscVt4g=="
     },
+    "node_modules/oidc-client-ts": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/oidc-client-ts/-/oidc-client-ts-3.1.0.tgz",
+      "integrity": "sha512-IDopEXjiwjkmJLYZo6BTlvwOtnlSniWZkKZoXforC/oLZHC9wkIxd25Kwtmo5yKFMMVcsp3JY6bhcNJqdYk8+g==",
+      "dependencies": {
+        "jwt-decode": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/oidc-spa": {
+      "version": "6.0.7",
+      "resolved": "https://registry.npmjs.org/oidc-spa/-/oidc-spa-6.0.7.tgz",
+      "integrity": "sha512-2N/mGou2RVyFcpD2dyKWpDkCeDbSwqFg7U1o6y4WiL62EbEa7QHWgM0GlU9mWzt1r2dXJQZYrqbL07AVVv/juQ==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "*"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/open": {
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/open/-/open-10.1.0.tgz",

front/MyINPulse-front/src/App.vue

@@ -1,48 +1,11 @@
 <script setup lang="ts">
 import { RouterLink, RouterView } from 'vue-router'
 import HelloWorld from './components/HelloWorld.vue'
-import Header from './components/Header.vue';
-import ProjectComp from './components/Project-comp.vue';
 </script>
 
 <template>
   <RouterView />
-  <Header />
-  <div id="main">
-      <ProjectComp 
-        v-for="(project, index) in projects" 
-        :key="index"
-        :projectName="project.name"
-      />
-    </div>
 </template>
 
 <style scoped>
 </style>
-
-<script lang="ts">
-export default {
-  name: 'App',
-  components: {
-    Header,
-    ProjectComp,
-  },
-  data() {
-    return {
-      projects: [
-        {
-          name: 'Projet Alpha',
-          //link: './project-alpha.html',
-          //members: ['Alice', 'Bob', 'Charlie'],
-        },
-        {
-          name: 'Projet Beta',
-          //link: './project-beta.html',
-          //members: ['David', 'Eve', 'Frank'],
-        },
-      ],
-    };
-  },
-};
-
-</script>

front/MyINPulse-front/src/components/Header.vue

@@ -1,26 +0,0 @@
-<template>
-    <header>
-      <img src="./icons/logo inpulse.png" alt="INPulse" />
-    </header>
-  </template>
-  
-  <script lang="ts">
-  export default {
-    name: 'Header',
-  };
-  </script>
-  
-  <style scoped>
-  header img {
-    width: 100px;
-  }
-
-  header{
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 10px 20px;
-    background-color: #fff;
-    border-bottom: 2px solid #ddd;
-  }
-  </style>

front/MyINPulse-front/src/components/Project-comp.vue

@@ -1,18 +0,0 @@
-<template>
-    <div class="project">
-        <div class="project-header">
-            <h2>{{ projectName }}</h2>
-        </div>
-
-    </div>
-</template>
-
-
-<script lang="ts">
-export default {
-    name: 'Project',
-    props: {
-        projectName: String,
-    }
-}
-</script>

front/MyINPulse-front/src/main.ts

@@ -25,7 +25,6 @@ keycloakService.CallInit(() => {
 
 })
 
-createApp(App).mount('#app');
 
 // TODO: fix the comment
 /*