162 lines
6.2 KiB
HTML
162 lines
6.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Signing in...</title>
|
|
<style>
|
|
body {
|
|
font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
background: linear-gradient(135deg, #2c2c2c 0%, #1a1a1a 100%);
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0;
|
|
}
|
|
.container {
|
|
background: rgba(255, 255, 255, 0.95);
|
|
padding: 40px;
|
|
border-radius: 20px;
|
|
text-align: center;
|
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
|
}
|
|
.spinner {
|
|
width: 50px;
|
|
height: 50px;
|
|
border: 4px solid #f3f3f3;
|
|
border-top: 4px solid #FFC407;
|
|
border-radius: 50%;
|
|
animation: spin 1s linear infinite;
|
|
margin: 0 auto 20px;
|
|
}
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
h2 { color: #1f2937; margin-bottom: 10px; }
|
|
p { color: #6b7280; }
|
|
.status { color: #6b7280; margin-top: 10px; font-size: 14px; }
|
|
.error { color: #ef4444; margin-top: 20px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="spinner" id="spinner"></div>
|
|
<h2>Signing you in...</h2>
|
|
<p>Please wait while we complete the authentication.</p>
|
|
<div id="status" class="status"></div>
|
|
<div id="error" class="error" style="display: none;"></div>
|
|
</div>
|
|
|
|
<script src="https://alcdn.msauth.net/browser/2.38.0/js/msal-browser.min.js"></script>
|
|
<script>
|
|
const msalConfig = {
|
|
auth: {
|
|
clientId: "{{ client_id }}",
|
|
authority: "https://login.microsoftonline.com/{{ tenant_id }}",
|
|
redirectUri: "{{ redirect_uri }}"
|
|
},
|
|
cache: {
|
|
cacheLocation: "sessionStorage"
|
|
}
|
|
};
|
|
|
|
document.getElementById("status").textContent = "Initializing...";
|
|
|
|
const msalInstance = new msal.PublicClientApplication(msalConfig);
|
|
|
|
// Wait for MSAL to initialize
|
|
msalInstance.initialize().then(() => {
|
|
handleAuth();
|
|
}).catch(err => {
|
|
console.error("MSAL init error:", err);
|
|
showError("Failed to initialize authentication");
|
|
});
|
|
|
|
async function handleAuth() {
|
|
try {
|
|
document.getElementById("status").textContent = "Processing authentication...";
|
|
|
|
// This will handle the redirect response and complete the token exchange
|
|
const response = await msalInstance.handleRedirectPromise();
|
|
|
|
console.log("handleRedirectPromise response:", response);
|
|
|
|
if (response && response.accessToken) {
|
|
document.getElementById("status").textContent = "Token received, creating session...";
|
|
await sendTokenToServer(response.accessToken);
|
|
return;
|
|
}
|
|
|
|
// No response from redirect - check if we have accounts
|
|
const accounts = msalInstance.getAllAccounts();
|
|
console.log("Accounts:", accounts);
|
|
|
|
if (accounts.length > 0) {
|
|
document.getElementById("status").textContent = "Getting token silently...";
|
|
try {
|
|
const silentResponse = await msalInstance.acquireTokenSilent({
|
|
scopes: ["User.Read"],
|
|
account: accounts[0]
|
|
});
|
|
await sendTokenToServer(silentResponse.accessToken);
|
|
} catch (silentError) {
|
|
console.error("Silent token failed:", silentError);
|
|
showError("Could not acquire token. Please try logging in again.");
|
|
}
|
|
} else {
|
|
showError("Authentication was not completed. Please try again.");
|
|
}
|
|
} catch (error) {
|
|
console.error("Auth error:", error);
|
|
// Check for interaction_in_progress error
|
|
if (error.errorCode === "interaction_in_progress") {
|
|
document.getElementById("status").textContent = "Please wait...";
|
|
// Wait a bit and try again
|
|
setTimeout(handleAuth, 1000);
|
|
return;
|
|
}
|
|
showError(error.message || "Authentication failed");
|
|
}
|
|
}
|
|
|
|
async function sendTokenToServer(accessToken) {
|
|
try {
|
|
document.getElementById("status").textContent = "Creating session...";
|
|
|
|
const response = await fetch("{{ url_prefix }}/auth/token", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json"
|
|
},
|
|
body: JSON.stringify({ access_token: accessToken })
|
|
});
|
|
|
|
const data = await response.json();
|
|
console.log("Server response:", data);
|
|
|
|
if (data.success && data.redirect) {
|
|
document.getElementById("status").textContent = "Success! Redirecting...";
|
|
window.location.href = data.redirect;
|
|
} else {
|
|
showError(data.error || "Failed to create session");
|
|
}
|
|
} catch (error) {
|
|
console.error("Server error:", error);
|
|
showError("Failed to communicate with server: " + error.message);
|
|
}
|
|
}
|
|
|
|
function showError(message) {
|
|
document.getElementById("error").textContent = message;
|
|
document.getElementById("error").style.display = "block";
|
|
document.getElementById("spinner").style.display = "none";
|
|
document.getElementById("status").style.display = "none";
|
|
}
|
|
|
|
// Start handling authentication
|
|
handleAuth();
|
|
</script>
|
|
</body>
|
|
</html>
|