fix: front end now compile

front/my-vue-app/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

front/my-vue-app/src/helpers.ts

@@ -3,15 +3,15 @@ import axios from "axios";
 const backendUrl = "http://localhost:8080/"
 
 // TODO: spawn a error modal
-function defaultApiErrorHandler(err){
+function defaultApiErrorHandler(err: String){
     console.log(err)
 }
 
-function defaultApiSuccessHandler(response){
+function defaultApiSuccessHandler(response: () => void){
     console.log(response)
 }
-
-function callApi(endpoint: string, onSuccessHandler, onErrorHandler): void {
+/*
+function callApi(endpoint: string, onSuccessHandler: () => void, onErrorHandler: (err: String) => void): void {
     console.log("callApi: "+ endpoint)
     axios.get(backendUrl + endpoint).then(
         onSuccessHandler == null ? defaultApiSuccessHandler : onSuccessHandler
@@ -23,3 +23,4 @@ function callApi(endpoint: string, onSuccessHandler, onErrorHandler): void {
 }
 
 export {callApi}
+ */

front/my-vue-app/src/plugins/authStore.ts

@@ -4,7 +4,7 @@ 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) {
+    install(app: any, option: any) {
         const store = useAuthStore(option.pinia);
         app.config.globalProperties.$store = store;
         keycloakService.CallInitStore(store);

front/my-vue-app/src/router/index.ts

@@ -1,14 +1,8 @@
 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',
@@ -17,15 +11,6 @@ const router = createRouter({
       // 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',

front/my-vue-app/src/services/keycloak.ts

@@ -8,7 +8,7 @@ const options = {
 
 
 const keycloak = new Keycloak(options);
-let authenticated;
+let authenticated: boolean | undefined;
 let store = null;
 
 async function login(){
@@ -36,7 +36,7 @@ async function signup(){
  *
  * @param onInitCallback
  */
-async function init(onInitCallback) {
+async function init(onInitCallback: () => void) {
     try {
         authenticated = await keycloak.init({
             onLoad: "check-sso",
@@ -54,7 +54,7 @@ async function init(onInitCallback) {
  * Initializes store with Keycloak user data
  *
  */
-async function initStore(storeInstance) {
+async function initStore(storeInstance: any) {
     try {
         store = storeInstance
         console.log(keycloak)
@@ -71,7 +71,7 @@ async function initStore(storeInstance) {
 /**
  * Logout user
  */
-function logout(url) {
+function logout(url: string) {
     keycloak.logout({ redirectUri: url });
 }
 

front/my-vue-app/src/stores/authStore.ts

@@ -1,14 +1,15 @@
 import { defineStore } from "pinia";
 import keycloakService from '@/services/keycloak';
+import type Keycloak from "keycloak-js";
 export const useAuthStore = defineStore("storeAuth", {
     state: () => {
         return {
             testv: true,
             authenticated: false,
             user: {
-                token: null,
-                refreshToken: null,
-                username: null,
+                token: "",
+                refreshToken: "",
+                username: "",
             },
         }
     },
@@ -16,11 +17,11 @@ export const useAuthStore = defineStore("storeAuth", {
     getters: {},
     actions: {
         // Initialize Keycloak OAuth
-        async initOauth(keycloak, clearData = true) {
+        async initOauth(keycloak: Keycloak, clearData = true) {
             if(clearData) { await this.clearUserData(); }
 
-            this.authenticated = keycloak.authenticated;
-            if (this.authenticated){
+            this.authenticated = !!keycloak.authenticated; // the !! removes undefined
+            if (this.authenticated && keycloak.token && keycloak.idTokenParsed && keycloak.refreshToken){
                 this.user.username = keycloak.idTokenParsed.given_name;
                 this.user.token = keycloak.token;
                 this.user.refreshToken = keycloak.refreshToken;
@@ -29,6 +30,7 @@ export const useAuthStore = defineStore("storeAuth", {
         async login(){
             try {
                 const keycloak = await keycloakService.callLogin();
+                if (keycloak)
                     await this.initOauth(keycloak);
             } catch (error) {
                 console.log(error)
@@ -37,6 +39,7 @@ export const useAuthStore = defineStore("storeAuth", {
         async signup() {
             try {
                 const keycloak = await keycloakService.callSignup();
+                if (keycloak)
                     await this.initOauth(keycloak);
             } catch (error) {
                 console.log(error)
@@ -55,6 +58,7 @@ export const useAuthStore = defineStore("storeAuth", {
         async refreshUserToken() {
             try {
                 const keycloak = await keycloakService.CallTokenRefresh();
+                if (keycloak)
                     await this.initOauth(keycloak, false);
             } catch (error) {
                 console.error(error);
@@ -66,7 +70,11 @@ export const useAuthStore = defineStore("storeAuth", {
         // Clear user's store data
         clearUserData() {
             this.authenticated = false;
-            this.user = {};
+            this.user = {
+                token: "",
+                    refreshToken: "",
+                    username: "",
+            };
         }
     }
 });

front/my-vue-app/src/views/HomeView.vue

@@ -1,62 +0,0 @@
-<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

@@ -1,38 +0,0 @@
-<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>