admin/hermione-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix on all auth

Browse Source
This commit is contained in:
andrea.terzani
2025-04-17 15:47:57 +02:00
parent c2973ddb5e
commit f3d3f95cdc
2 changed files with 91 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/views/pages/auth/Callback.vue
View File

@@ -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>

102
src/views/pages/auth/Login.vue
View File

@@ -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>
</div>
<div class="text-center mb-8">
<h1>Welcome to</h1>
<h1>WizardAI - WORKFLOW</h1>
</svg>
</div>
<div>
<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" />
<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 class="text-center mb-12">
<h1 class="text-3xl font-semibold">Welcome to</h1>
<h1 class="text-4xl font-bold text-primary">WizardAI - WORKFLOW</h1>
</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);