fix on all auth

src/views/pages/auth/Callback.vue

@@ -1,12 +1,13 @@
 <script setup>
 import { useAuth } from '@websanova/vue-auth/src/v3.js';
 import axios from 'axios';
-import { onMounted } from 'vue';
+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")
@@ -19,7 +20,7 @@ onMounted(async () => {
   console.log("Response:",response)
 
   if (response) {
-    // Do something with the response, e.g. save the user
+    message.value ="Logging in to the application..."
     localStorage.setItem('msalUser', JSON.stringify(response.account))
     axios.post("/msauth/exchange",{}, {
       headers: { Authorization: `Bearer ${response.accessToken}` }
@@ -35,12 +36,20 @@ onMounted(async () => {
                     router.push({ name: 'scenario-list' });
                 }
 
-        })
+        }).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=>{
+      message.value = "Error authenticating on the application. Did you ask for authorization?"
     });
 
 
@@ -52,5 +61,5 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div>Redirecting...</div>
+  <div>{{message}}</div>
 </template>

src/views/pages/auth/Login.vue

@@ -35,7 +35,7 @@ const loginAD = async () => {
     console.log("Token " ,token)
 
     axios.post("/msauth/exchange",{}, {
-      headers: { Authorization: `Bearer ${token.accessToken}` }
+        headers: { Authorization: `Bearer ${token.accessToken}` }
     }).then(res=>{
      console.log("Token exhange done :",res.data.token)
       if(res.data.token){
@@ -48,11 +48,28 @@ const loginAD = async () => {
                 } else {
                     router.push({ name: 'scenario-list' });
                 }
-        })
+        
+        }).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 () => {
@@ -60,6 +77,18 @@ const loginMsal = async () => {
   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({
@@ -94,13 +123,13 @@ const login_old = async () => {
 
 
 </script>
-
 <template>
     <div class="bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-[100vw] overflow-hidden">
         <div class="flex flex-col items-center justify-center">
-            <div style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, var(--primary-color) 10%, rgba(33, 150, 243, 0) 30%)">
+            <div
+                style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, var(--primary-color) 10%, rgba(33, 150, 243, 0) 30%)">
                 <div class="w-full bg-surface-0 dark:bg-surface-900 py-20 px-8 sm:px-20" style="border-radius: 53px">
-                    <div class="logo-container">
+                    <div class="logo-container mb-8">
                         <svg width="85" height="63" viewBox="0 0 85 63" fill="none" xmlns="http://www.w3.org/2000/svg">
                             <path
                                 fill-rule="evenodd"
@@ -116,33 +145,58 @@ const login_old = async () => {
                                 fill="var(--primary-color)"
                                 mask="url(#path-2-inside-1)"
                             />
-                        </svg>
+                        </svg>                    
-                    </div>
-                    <div class="text-center mb-8">
-                        <h1>Welcome to</h1>
-                        <h1>WizardAI - WORKFLOW</h1>
                     </div>
 
-                    <div>
+                    <div class="text-center mb-12">
-                        <label for="email1" class="block text-surface-900 dark:text-surface-0 text-xl font-medium mb-2">Username</label>
+                        <h1 class="text-3xl font-semibold">Welcome to</h1>
-                        <InputText id="email1" type="text" placeholder="Username" class="w-full md:w-[30rem] mb-8" style="padding: 1rem" v-model="username" />
+                        <h1 class="text-4xl font-bold text-primary">WizardAI - WORKFLOW</h1>
-
-                        <label for="password1" class="block text-surface-900 dark:text-surface-0 font-medium text-xl mb-2">Password</label>
-                        <Password id="password1" v-model="password" placeholder="Password" :toggleMask="true" class="w-full md:w-[30rem] mb-8" inputClass="w-full" :inputStyle="{ padding: '1rem' }"></Password>
-                        
-                        <div class="flex flex-col items-center">
-                            <Button @click="login_old" label="Sign In with Username & Password" class="w-full mb-2 md:w-[30rem]  text-xl" ></Button>
-                            <Button @click="loginMsal" v-if="msaccount == null" label="Sign In with Microsoft" class="w-full mb-2 md:w-[30rem] text-xl" ></Button>
-                            <Button @click="loginAD" v-if="msaccount" :label="'Login ' + msaccount.username " class="w-full  mb-2 md:w-[30rem] text-xl"></Button>
-                            <Message v-if="visible" severity="error" :life="3000" class="mt-2 error-message">{{ error }}</Message>
-                        </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-l font-medium mb-2">Username</label>
+                        <InputText id="email1" type="text" placeholder="Username" class="w-full mb-6" style="padding: 1rem"
+                            v-model="username" />
+
+                        <label for="password1"
+                            class="block text-surface-900 dark:text-surface-0 font-medium text-l mb-2">Password</label>
+                        <Password id="password1" v-model="password" placeholder="Password" :toggleMask="true"
+                            class="w-full mb-6" inputClass="w-full" :inputStyle="{ padding: '1rem' }" />
+
+                        <Button @click="login_old" label="Sign In with Username and Password"
+                            class="w-full text-xl mb-4" />
+                    </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>
+
+                    <!-- 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>
 </template>
 
+
 <style scoped>
 .pi-eye {
     transform: scale(1.6);