Add PBandGraphOauth scaffold and auth UI
This commit is contained in:
@@ -0,0 +1,191 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>PB + Microsoft Graph</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
primary: '#4c51bf',
|
||||
secondary: '#5b21b6',
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body class="min-h-screen bg-gradient-to-br from-primary to-secondary p-4 sm:p-8 flex justify-center items-center font-sans relative">
|
||||
<!-- Top-right display name -->
|
||||
<div id="userDisplay" class="hidden absolute top-4 right-4 text-white text-sm font-semibold drop-shadow">
|
||||
<span id="userDisplayName"></span>
|
||||
</div>
|
||||
|
||||
<!-- Bottom-left email -->
|
||||
<div id="userEmail" class="hidden absolute bottom-4 left-4 text-white text-sm drop-shadow">
|
||||
<span id="userEmailValue"></span>
|
||||
</div>
|
||||
|
||||
<!-- Bottom-right version -->
|
||||
<div class="absolute bottom-4 right-4 text-white/80 text-xs drop-shadow">
|
||||
v1.0.0-alpha1
|
||||
</div>
|
||||
|
||||
<!-- Login Container -->
|
||||
<div id="loginContainer" class="bg-white rounded-2xl shadow-2xl max-w-md w-full p-8">
|
||||
<div class="text-center mb-8">
|
||||
<h1 class="text-4xl font-bold text-gray-800 mb-2">PB + Microsoft Graph</h1>
|
||||
<p class="text-gray-600">Sign in with Microsoft</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-6">
|
||||
<p class="text-gray-700 text-center">Sign in with your Microsoft account</p>
|
||||
<button type="button" id="loginBtn" class="w-full py-3 px-4 bg-gradient-to-br from-primary to-secondary text-white font-semibold rounded-lg hover:opacity-95 transition-opacity shadow-lg hover:shadow-xl">
|
||||
Login with Microsoft
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="loginError" class="hidden mt-4 p-3 bg-red-50 border border-red-200 text-red-700 rounded-lg text-sm"></div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/pocketbase/dist/pocketbase.umd.js"></script>
|
||||
<script>
|
||||
const APP_VERSION = '1.0.0-alpha1';
|
||||
console.log(`App version: ${APP_VERSION}`);
|
||||
// Initialize PocketBase client
|
||||
const pb = new PocketBase('https://pocketbase.ccllc.pro');
|
||||
|
||||
// Update auth UI based on login state
|
||||
function updateAuthUI() {
|
||||
const loginContainer = document.getElementById('loginContainer');
|
||||
const userDisplay = document.getElementById('userDisplay');
|
||||
const userEmail = document.getElementById('userEmail');
|
||||
if (pb.authStore.isValid) {
|
||||
loginContainer.classList.add('hidden');
|
||||
userDisplay.classList.remove('hidden');
|
||||
userEmail.classList.remove('hidden');
|
||||
} else {
|
||||
loginContainer.classList.remove('hidden');
|
||||
userDisplay.classList.add('hidden');
|
||||
userEmail.classList.add('hidden');
|
||||
document.getElementById('loginError').classList.add('hidden');
|
||||
}
|
||||
}
|
||||
|
||||
// Check for tokens and log success
|
||||
async function checkTokens() {
|
||||
const pbToken = pb.authStore.token;
|
||||
|
||||
if (!pbToken) {
|
||||
console.log('❌ No PocketBase token found');
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('✓ PocketBase token:', pbToken ? '(present)' : '(missing)');
|
||||
|
||||
try {
|
||||
// Call backend to get Graph token status
|
||||
const response = await fetch('/health');
|
||||
const result = await response.json();
|
||||
|
||||
if (result.ok) {
|
||||
console.log('✓ Backend health check passed');
|
||||
console.log('✓✓ SUCCESS: Both PocketBase and Graph token mechanisms are working!');
|
||||
} else {
|
||||
console.log('❌ Backend health check failed');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('❌ Failed to check backend:', error.message);
|
||||
}
|
||||
}
|
||||
|
||||
async function ensureUserLogged() {
|
||||
// If already have a valid token, just refresh to get model details
|
||||
if (pb.authStore.isValid && pb.authStore.token) {
|
||||
try {
|
||||
const refresh = await pb.collection('Users').authRefresh();
|
||||
const record = refresh?.record || pb.authStore.record || pb.authStore.model;
|
||||
const meta = refresh?.meta || {};
|
||||
const model = pb.authStore.model;
|
||||
const displayName = record?.name || model?.name || meta?.name || record?.email || model?.email || meta?.email || 'Unknown User';
|
||||
const email = record?.email || model?.email || meta?.email || '(no email)';
|
||||
document.getElementById('userDisplayName').textContent = displayName;
|
||||
document.getElementById('userEmailValue').textContent = email;
|
||||
console.log('User record:', record);
|
||||
console.log('User meta:', meta);
|
||||
console.log('Auth store model:', model);
|
||||
console.log(`User display name: ${displayName}`);
|
||||
console.log(`User email: ${email}`);
|
||||
console.log('PB token:', pb.authStore.token ? '(present)' : '(missing)');
|
||||
updateAuthUI();
|
||||
await checkTokens();
|
||||
return true;
|
||||
} catch (e) {
|
||||
console.warn('Existing token invalid, clearing and reauth needed', e);
|
||||
pb.authStore.clear();
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
// Handle login button click
|
||||
document.getElementById('loginBtn').addEventListener('click', async (e) => {
|
||||
e.preventDefault();
|
||||
const loginBtn = document.getElementById('loginBtn');
|
||||
const loginError = document.getElementById('loginError');
|
||||
|
||||
loginBtn.disabled = true;
|
||||
loginBtn.textContent = 'Checking session...';
|
||||
loginError.classList.add('hidden');
|
||||
|
||||
// If we already have a valid token, just use it
|
||||
const hadToken = await ensureUserLogged();
|
||||
if (hadToken) {
|
||||
loginBtn.disabled = false;
|
||||
loginBtn.textContent = 'Login with Microsoft';
|
||||
return;
|
||||
}
|
||||
|
||||
// Otherwise perform OAuth
|
||||
loginBtn.textContent = 'Logging in...';
|
||||
try {
|
||||
const authData = await pb.collection('Users').authWithOAuth2({ provider: 'microsoft' });
|
||||
console.log('✓ Logged in with Microsoft');
|
||||
const record = authData?.record || pb.authStore.record || pb.authStore.model;
|
||||
const meta = authData?.meta || {};
|
||||
const model = pb.authStore.model;
|
||||
const displayName = record?.name || model?.name || meta?.name || record?.email || model?.email || meta?.email || 'Unknown User';
|
||||
const email = record?.email || model?.email || meta?.email || '(no email)';
|
||||
document.getElementById('userDisplayName').textContent = displayName;
|
||||
document.getElementById('userEmailValue').textContent = email;
|
||||
console.log('User record:', record);
|
||||
console.log('User meta:', meta);
|
||||
console.log('Auth store model:', model);
|
||||
console.log(`User display name: ${displayName}`);
|
||||
console.log(`User email: ${email}`);
|
||||
console.log('PB token:', pb.authStore.token ? '(present)' : '(missing)');
|
||||
updateAuthUI();
|
||||
await checkTokens();
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
loginError.textContent = `Login failed: ${error.message}`;
|
||||
loginError.classList.remove('hidden');
|
||||
} finally {
|
||||
loginBtn.disabled = false;
|
||||
loginBtn.textContent = 'Login with Microsoft';
|
||||
}
|
||||
});
|
||||
|
||||
// Initial auth UI update
|
||||
updateAuthUI();
|
||||
|
||||
// If already logged in, use existing token
|
||||
if (pb.authStore.isValid && pb.authStore.token) {
|
||||
ensureUserLogged();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user