Merged PR 104: MSAL authetication

2025-04-18 11:53:21 +00:00
parent 36bc41bda4 6d3e61dbf7
commit 6411842e7e
9 changed files with 1751 additions and 646 deletions
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
        "lint": "eslint --fix . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
    },
    "dependencies": {
+        "@azure/msal-browser": "^4.9.1",
        "@heroicons/vue": "^2.2.0",
        "@matpool/vue-json-view": "^0.1.8",
        "@primevue/themes": "^4.0.0",
--- a/src/main.js
+++ b/src/main.js
@@ -18,6 +18,7 @@ axios.defaults.baseURL = import.meta.env.VITE_BACKEND_URL;//'http://localhost:80
 console.log(import.meta.env.VITE_BACKEND_URL);


+
 import { createAuth } from '@websanova/vue-auth';
 import driverAuthBearer from '@websanova/vue-auth/dist/drivers/auth/bearer.esm.js';
 import driverHttpAxios from '@websanova/vue-auth/dist/drivers/http/axios.1.x.esm.js';
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -2,67 +2,72 @@ import AppLayout from '@/layout/AppLayout.vue';
 import { createRouter, createWebHistory } from 'vue-router';

 const router = createRouter({
-  history: createWebHistory(),
-  routes: [
-    {
-      path: '/',
-      component: AppLayout,
-      meta: {
-        auth: true
-      },
-      children: [
+    history: createWebHistory(),
+    routes: [
        {
-          path: '/projects',
-          name: 'projects-list',
-          component: () => import('@/views/pages/ProjectList.vue')
+            path: '/',
+            component: AppLayout,
+            meta: {
+                auth: true
+            },
+            children: [
+                {
+                    path: '/projects',
+                    name: 'projects-list',
+                    component: () => import('@/views/pages/ProjectList.vue')
+                },
+                {
+                    path: '/',
+                    name: 'dashboard',
+                    component: () => import('@/views/pages/ksDocuments/KsDocuments.vue')
+                },
+                {
+                    path: '/ksdocuments',
+                    children: [
+                        { path: '', name: 'ks-document', component: () => import('@/views/pages/ksDocuments/KsDocuments.vue') },
+                        { path: 'new', name: 'ks-document-new', component: () => import('@/views/pages/ksDocuments/KsNewDocumentForm.vue') }
+                    ]
+                },
+                {
+                    path: '/ks_git_repos',
+                    children: [
+                        { path: '', name: 'ks-git-repos', component: () => import('@/views/pages/ksGitRepo/KsGitRepos.vue') },
+                        //{path: 'new', name: 'ks-git-repo-new', component: () => import('@/views/pages/ksGitRepo/KsNewGitRepoForm.vue')},
+                        //{path: '/clone', name: 'ks-git-clone-repo', component: () => import('@/views/pages/ksGitRepo/KsGitCloneRepoForm.vue')},
+                        { path: 'ks_code_parser', name: 'ks_code_parser', component: () => import('@/views/pages/ksGitRepo/ksCodeParser/KsGitCodeParser.vue') }
+                    ]
+                },
+                {
+                    path: '/ks_similarity_search',
+                    children: [{ path: '', name: 'ks_similarity_search', component: () => import('@/views/pages/similaritySearch/KsSimilaritySearch.vue') }]
+                },
+                {
+                    path: '/ks_vector_data',
+                    children: [{ path: '', name: 'ks_vector_data', component: () => import('@/views/pages/vectorDBSearch/KsVectorData.vue') }]
+                },
+                {
+                    path: '/kstexts',
+                    children: [{ path: '', name: 'ks-texts', component: () => import('@/views/pages/KsTexts.vue') }]
+                }
+            ]
        },
        {
-          path: '/',
-          name: 'dashboard',
-          component: () => import('@/views/pages/ksDocuments/KsDocuments.vue')
+            path: '/auth/login',
+            name: 'login',
+            meta: {
+                auth: false
+            },
+            component: () => import('@/views/pages/auth/Login.vue')
        },
        {
-          path: '/ksdocuments', 
-          children: [
-            {path: '', name: 'ks-document', component: () => import('@/views/pages/ksDocuments/KsDocuments.vue')},
-            {path: 'new', name: 'ks-document-new', component: () => import('@/views/pages/ksDocuments/KsNewDocumentForm.vue')},
-          ]
-        },
-        {
-          path: '/ks_git_repos',
-          children: [
-              {path: '', name: 'ks-git-repos', component: () => import('@/views/pages/ksGitRepo/KsGitRepos.vue')},
-              //{path: 'new', name: 'ks-git-repo-new', component: () => import('@/views/pages/ksGitRepo/KsNewGitRepoForm.vue')},        
-              //{path: '/clone', name: 'ks-git-clone-repo', component: () => import('@/views/pages/ksGitRepo/KsGitCloneRepoForm.vue')},
-              {path: 'ks_code_parser', name: 'ks_code_parser', component: () => import('@/views/pages/ksGitRepo/ksCodeParser/KsGitCodeParser.vue')}
-          ]
-        },
-        {
-          path: '/ks_similarity_search', 
-          children: [
-            {path: '', name: 'ks_similarity_search', component: () => import('@/views/pages/similaritySearch/KsSimilaritySearch.vue')},
-          ]
-        },
-        {
-          path: '/ks_vector_data', 
-          children: [
-            {path: '', name: 'ks_vector_data', component: () => import('@/views/pages/vectorDBSearch/KsVectorData.vue')},
-          ]
-        },
-        {
-          path: '/kstexts', 
-          children: [
-            {path: '', name: 'ks-texts', component: () => import('@/views/pages/KsTexts.vue')},
-          ]
-        },
-      ]
-    },
-    {
-      path: '/auth/login',
-      name: 'login',
-      component: () => import('@/views/pages/auth/Login.vue')
-    },
-  ]
+            path: '/auth/callback',
+            name: 'test',
+            meta: {
+                auth: false
+            },
+            component: () => import('@/views/pages/auth/Callback.vue')
+        }
+    ]
 });

-export default router;
+export default router;
--- a/src/views/pages/auth/Callback.vue
+++ b/src/views/pages/auth/Callback.vue
@@ -0,0 +1,66 @@
+<script setup>
+import { useAuth } from '@websanova/vue-auth/src/v3.js';
+import axios from 'axios';
+import { onMounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { msalInstance } from './MsalConfig'; // wherever you created your MSAL instance
+
+const router = useRouter()
+const auth = useAuth();
+const message = ref('')
+
+onMounted(async () => {
+  console.log("Mounted on callback")
+ 
+  await msalInstance.initialize()
+  console.log("After initialize on callback")
+
+  const response = await msalInstance.handleRedirectPromise()
+
+  console.log("Response:",response)
+
+  if (response) {
+    message.value ="Logging in to the application..."
+    localStorage.setItem('msalUser', JSON.stringify(response.account))
+    axios.post("/msauth/exchange",{}, {
+      headers: { Authorization: `Bearer ${response.accessToken}` }
+    }).then(res=>{
+      if(res.data.token){
+        auth.token(null,res.data.token,false);
+        auth.fetch().then(response=>{
+          console.log("1 user :" , response.data.data);
+               
+                if (!response.data.data.selectedProject) {
+                    router.push({ name: 'projects-list' });
+                } else {
+                    router.push({ name: 'ks-document' });
+                }
+
+        }).catch(res=>{
+            console.log("Error on token exchange:",res)
+            message.value = "Error authenticating on the application. Did you ask for authorization?"
+            visible.value = true;
+
+        });
+      }else{
+        message.value = "Error authenticating on the application. Did you ask for authorization?"
+        console.error("No token exchange with backend")
+      }
+      
+      
+    }).catch(res=>{
+      console.log(res.data)
+      message.value = "Error authenticating on the application. Did you ask for authorization?"
+    });
+
+
+   
+  }
+
+ 
+})
+</script>
+
+<template>
+  <div>{{message}}</div>
+</template>
--- a/src/views/pages/auth/Login.vue
+++ b/src/views/pages/auth/Login.vue
@@ -1,7 +1,10 @@
 <script setup>
 import { useLayout } from '@/layout/composables/layout';
 import { useAuth } from '@websanova/vue-auth/src/v3.js';
-import { computed, ref } from 'vue';
+import axios from 'axios';
+import Message from 'primevue/message';
+import { onMounted,computed, ref } from 'vue';
+import { msalInstance, msalrequest } from './MsalConfig';
 import { useRouter } from 'vue-router';
 //import logo from '@/assets/Logo_Apollo_Transparent.png';
 import logo from '@/assets/apollo.jpg';
@@ -19,7 +22,80 @@ const logoUrl = computed(() => {
  return `/layout/images/${isDarkTheme ? 'logo-white' : 'logo-dark'}.svg`;
 });

-const login = async () => {
+const msaccount = ref(null);
+onMounted(async () => {
+  await msalInstance.initialize()
+  const accounts = msalInstance.getAllAccounts()
+
+  console.log("Accounts:",accounts)
+  if (accounts.length > 0) {
+        console.log(accounts)
+        msaccount.value= accounts[0]
+
+  }
+})
+
+const loginAD = async () => {
+
+    var token = await msalInstance.acquireTokenSilent({
+        scopes: msalrequest.scopes,
+        account: msaccount.value
+    })
+    console.log("Token " ,token)
+
+    axios.post("/msauth/exchange",{}, {
+        headers: { Authorization: `Bearer ${token.accessToken}` }
+    }).then(res=>{
+     console.log("Token exhange done :",res.data.token)
+      if(res.data.token){
+        auth.token(null, res.data.token,false)
+        auth.fetch().then(response=>{
+            console.log("1 user :" , response.data.data);
+               
+                if (!response.data.data.selectedProject) {
+                    router.push({ name: 'projects-list' });
+                } else {
+                    router.push({ name: 'ks-document' });
+                }
+            console.log("response", response);
+        
+        }).catch(res=>{
+            console.log("Error on token exchange:",res)
+            error.value = "Error authenticating on the application. Did you ask for authorization?"
+            visible.value = true;
+
+        });
+      }else{
+        error.value = "Error authenticating on the application. Did you ask for authorization?"
+        visible.value = true;
+
+        console.error("No token exchange with backend")
+      }
+      
+      
+    }).catch(res=>{
+        console.log("Error on token exchange:",res)
+      error.value = "Error authenticating on the application. Did you ask for authorization?"
+      visible.value = true;
+
+    });
+
+}
+
+const loginMsal = async () => {
+  await msalInstance.initialize()
+  msalInstance.loginRedirect(msalrequest)
+}
+
+const logoutAD  = async () => {
+    const logoutRequest = {
+        account: msaccount.value,
+        mainWindowRedirectUri:window.location.href,
+    };
+  await msalInstance.logoutPopup(logoutRequest);
+} 
+
+const login_old = async () => {
    try {
        await auth.login({
                data:{
@@ -33,7 +109,7 @@ const login = async () => {
                if (!response.data.data.selectedProject) {
                    router.push({ name: 'projects-list' });
                } else {
-                    router.push({ name: 'ksdocuments' });
+                    router.push({ name: 'ks-document' });
                }
                
                console.log("response", response);
@@ -79,8 +155,8 @@ const login = async () => {
                      <h1>Welcome to</h1>
                      <h1>WizardAI - KNOWLEDGE</h1>
                  </div>
-
-                  <div>
+                  <!-- Username & Password Section -->
+                  <div class="mb-10 w-full max-w-xl">
                      <label for="email1" class="block text-surface-900 dark:text-surface-0 text-xl font-medium mb-2">Username</label>
                      <InputText id="email1" type="text" placeholder="Username" class="w-full md:w-[30rem] mb-8" style="padding: 1rem" v-model="username" />

@@ -95,15 +171,35 @@ const login = async () => {
              <a class="font-medium no-underline ml-2 text-right cursor-pointer"
                style="color: var(--primary-color)">Forgot password?</a>
            </div> -->
-            <Button label="Sign In" @click="login" class="w-full p-4 text-xl"></Button>
+            <Button  @click="login_old" label="Sign In with Username and Password" class="w-full p-4 text-xl"></Button>
+            </div>
+            <!-- Divider -->
+                    <div class="my-6 w-full max-w-xl flex items-center justify-center">
+                        <hr class="flex-grow border-t border-gray-300 dark:border-gray-700" />
+                        <span class="mx-4 text-gray-500 dark:text-gray-400">Sign in with Microsoft Azure AD</span>
+                        <hr class="flex-grow border-t border-gray-300 dark:border-gray-700" />
+                    </div>

-            <Message v-if="visible" severity="error" :life="3000" class="mt-2 error-message">{{ error }}</Message>
+                    <!-- Azure AD Section -->
+                    <div class="w-full max-w-xl">
+
+                        <Button @click="loginMsal" v-if="msaccount == null" label="Sign In with Microsoft AD"
+                            class="w-full text-l mb-4" />
+
+                        <Button @click="loginAD" v-if="msaccount" :label="'Login ' + msaccount.username"
+                            class="w-full text-l mb-4" />
+
+                        <Button @click="logoutAD" v-if="msaccount" label="Logout AD" severity="warn"
+                            class="w-full text-l mb-4" />
+                    </div>
+
+            <!-- Error Message -->
+            <Message v-if="visible" severity="error" :life="5000" class="mt-4 error-message">{{ error }}</Message>
            
          </div>
        </div>
      </div>
    </div>
-  </div>
 </template>

 <style scoped>
--- a/src/views/pages/auth/MsalConfig.js
+++ b/src/views/pages/auth/MsalConfig.js
@@ -0,0 +1,32 @@
+import { PublicClientApplication } from '@azure/msal-browser';
+
+export const msalInstance = new PublicClientApplication({
+    auth: {
+        clientId: '1ddbd871-9544-4a31-97a4-2968ce08e49a', //'d3fee0e3-49e0-4910-b0b4-805bfbd5488a',
+        authority: 'https://login.microsoftonline.com/e0793d39-0939-496d-b129-198edd916feb/', //'https://login.microsoftonline.com/9dc4721e-4d54-4c40-a681-1dd740292901/', //
+        redirectUri: 'http://localhost:5173/auth/callback', // or your deployed URL
+        navigateToLoginRequestUrl: false
+    },
+    cache: {
+        cacheLocation: 'localStorage',
+        storeAuthStateInCookie: false
+    }
+});
+
+/*
+export const  msalInstance = new PublicClientApplication({
+    auth: {
+      clientId: 'd3fee0e3-49e0-4910-b0b4-805bfbd5488a',
+      authority: "https://login.microsoftonline.com/9dc4721e-4d54-4c40-a681-1dd740292901",
+      redirectUri: "http://localhost:5173/auth/callback", // or your deployed URL
+      navigateToLoginRequestUrl: false,
+    },
+    cache: {
+      cacheLocation: "localStorage",
+      storeAuthStateInCookie: false,
+    }
+  })
+*/
+export const msalrequest = {
+    scopes: ['1ddbd871-9544-4a31-97a4-2968ce08e49a/.default'] //['api://d3fee0e3-49e0-4910-b0b4-805bfbd5488a/access_as_user']
+};
--- a/src/views/pages/ksDocuments/KsDocuments.vue
+++ b/src/views/pages/ksDocuments/KsDocuments.vue
@@ -147,7 +147,7 @@ const filters = ref();
 const userPrefStore = UserPrefStore();
 const ksDocumentStore = KsDocumentStore();
 const loadingStore = LoadingStore();
-const fe_status = ref("");
+const fe_status = ref('');

 const initFilters = () => {
 	filters.value = {
--- a/src/views/pages/ksGitRepo/ksCodeParser/KsGitCodeParser.vue
+++ b/src/views/pages/ksGitRepo/ksCodeParser/KsGitCodeParser.vue
@@ -1,39 +1,8 @@
 <template>
    <div>
-        <div class="content-section introduction big-title">
-            <div class="feature-intro">
-                <h1>Repository <span>DataTable</span></h1>
-            </div>
-        </div>
-
-        <div class="card">
-            <Toast />
-            <ConfirmPopup></ConfirmPopup>
-            <Toolbar class="mb-6">
-                <template #start>
-                    <Button label="Refresh" icon="pi pi-refresh" class="mr-2"
-                        @click="refreshPage" v-tooltip.top="'Refresh all records'" />
-                </template>
-
-                <template #end>
-                    <Button label="Expand All" icon="pi pi-plus" class="mr-3"
-                        @click="expandAll" v-tooltip.top="'Expand all records'" />
-                    <Button label="Collapse All" icon="pi pi-minus" class="mr-3"
-                        @click="collapseAll" v-tooltip.top="'Collapse all records'" />
-                    <!--Button label="Add New Git Repo" icon="pi pi-plus"  severity="secondary" rounded class="mr-3" @click="newCodeRepoForm()" v-tooltip.top="'Add New Git Repo'" class="mr-2" /-->
-                    <!--Button label="Add Git Repo" icon="pi pi-bolt"  severity="secondary" rounded  @click="cloneRepoForm()" v-tooltip.top="'Add New Git Repo'" /-->
-                    <Button label="New Git Repository" icon="pi pi-bolt"
-                        @click="showDialog = true" v-tooltip.top="'Add New Git Repository'" />
-
-                    <Dialog v-model:visible="showDialog" :style="{ width: '50rem' }" header="Repository Details"
-                        :modal="true">
-                        <div>
-                            <cloneForm @submitForm="cloneRepo" @cancel="showDialog = false" />
-                        </div>
-                    </Dialog>
-                </template>
-            </Toolbar>
-
+        <!-- <div class="card"> -->
+        <Toast />
+        <ConfirmPopup></ConfirmPopup>
            <DataTable v-model:filters="filters" v-model:expandedRows="expandedRows" @rowExpand="onRowExpand"
                @rowCollapse="onRowCollapse" :value="codeRepoInfo" :paginator="true" :rows="10"
                paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
@@ -44,18 +13,36 @@
                :globalFilterFields="['branch', 'cloneStatus', 'ingestionStatus', 'ingestionDateFormat']"
                tableStyle="min-width: 70rem" removableSort>
                <template #header>
-                    <div class="flex flex-wrap gap-2 items-center justify-between">
-                        <h4 class="m-0">Manage Repositories</h4>
+				<div class="flex items-center justify-between gap-4 p-4 ">
+					<span class="text-xl font-bold">Repository DataTable</span>
+					<div class="flex items-center gap-2 flex-grow">
                        <IconField>
                            <InputIcon>
                                <i class="pi pi-search" />
                            </InputIcon>
                            <InputText v-model="filters['global'].value" placeholder="Search..." />
                        </IconField>
+					</div>
+                        <Button icon="pi pi-refresh" rounded raised class="mr-1 p-button-sm"
+                        @click="refreshPage" v-tooltip.top="'Refresh all records'" />
+                        <Button icon="pi pi-plus" rounded raised class="mr-1 p-button-sm"
+                            @click="expandAll" v-tooltip.top="'Expand all records'" />
+                        <Button icon="pi pi-minus" rounded raised class="mr-1 p-button-sm"
+                            @click="collapseAll" v-tooltip.top="'Collapse all records'" />
+                        <!--Button label="Add New Git Repo" icon="pi pi-plus"  severity="secondary" rounded class="mr-3" @click="newCodeRepoForm()" v-tooltip.top="'Add New Git Repo'" class="mr-1" /-->
+                        <!--Button label="Add Git Repo" icon="pi pi-bolt"  severity="secondary" rounded  @click="cloneRepoForm()" v-tooltip.top="'Add New Git Repo'" /-->
+                        <Button icon="pi pi-bolt" rounded raised class="p-button-sm"
+                            @click="showDialog = true" v-tooltip.top="'Add New Git Repository'" />
+                        <Dialog v-model:visible="showDialog" :style="{ width: '50rem' }" header="Repository Details"
+                        :modal="true">
+                        <div>
+                            <cloneForm @submitForm="cloneRepo" @cancel="showDialog = false" />
+                        </div>
+                    </Dialog>
                    </div>
                </template>
                <template #groupheader="slotProps">
-                    <div class="flex items-center gap-2">
+                    <div class="flex items-center gap-2" style="background: '#f3f3f3'">
                        <img :alt="slotProps.data.repoName" :src="logoSrc" width="32" style="vertical-align: middle" />
                        <span>{{ slotProps.data.repoName }}</span>
                    </div>
@@ -176,25 +163,25 @@
                </Column>

                <!--Column header="Actions" headerStyle="width: 5rem; text-align: center" bodyStyle="text-align: center; overflow: visible"-->
-                <Column :exportable="false" style="min-width: 12rem">
-                    <template #body="slotProps">
+                <Column field="id" header="A" :style="{minWidth: '12rem', position: 'sticky', right: '0', zIndex: '1', background: '#f3f3f3'}" :showFilterMatchModes="false">
+                    <div class="flex justify-center items-center space-x-3">
+                        <template #body="slotProps" class="flex justify-center items-center space-x-3">
+                            <Button raised rounded type="button" class="mr-2" icon="pi pi-play"
+                                @click="parseGitRepo(slotProps.data)" v-tooltip.top="'Start Parsing of Repo'"
+                                :disabled="isButtonDisabled(slotProps.data)" />

-                        <Button text raised rounded severity="info" type="button" class="mr-2" icon="pi pi-play"
-                            @click="parseGitRepo(slotProps.data)" v-tooltip.top="'Start Parsing of Repo'"
-                            :disabled="isButtonDisabled(slotProps.data)" />
+                            <Button raised rounded  type="button" class="mr-2" icon="pi pi-play"
+                                @click="reverserEnginneringGitRepo(slotProps.data)" v-tooltip.top="'Start RE of Repo'"
+                                :disabled="isButtonDisabled(slotProps.data)" />

-                        <Button text raised rounded severity="warn" type="button" class="mr-2" icon="pi pi-play"
-                            @click="reverserEnginneringGitRepo(slotProps.data)" v-tooltip.top="'Start RE of Repo'"
-                            :disabled="isButtonDisabled(slotProps.data)" />
+                            <!--Button raised rounded severity="warn" type="button" class="mr-2" icon="pi pi-forward"
+                                @click="reIngestWithPullChanges(slotProps.data)"
+                                v-tooltip.top="'Ingest Latest changes From Git'" /-->

-                        <!--Button text raised rounded severity="warn" type="button" class="mr-2" icon="pi pi-forward"
-                            @click="reIngestWithPullChanges(slotProps.data)"
-                            v-tooltip.top="'Ingest Latest changes From Git'" /-->
-
-                        <Button text raised rounded severity="danger" type="button" icon="pi pi-trash"
-                            @click="deleteRecordsFromVectorStore(slotProps.data)" v-tooltip.top="'Delete Records'" />
-
-                    </template>
+                            <Button raised rounded type="button" icon="pi pi-trash"
+                                @click="deleteRecordsFromVectorStore(slotProps.data)" v-tooltip.top="'Delete Records'" />
+                        </template>
+                    </div>
                </Column>


@@ -207,13 +194,13 @@
                </template>

                <template #groupfooter="slotProps">
-                    <div class="flex justify-end font-bold w-full">
+                    <div class="flex justify-end font-bold w-full" style="background-color: #f3f3f3;">
                        Total Count: {{ calculateCustomerTotal(slotProps.data.repoName) }}
                    </div>
                </template>
            </DataTable>
-        </div>
    </div>
+    <!-- </div> -->
 </template>

 <script setup>