diff --git a/my-blog/static/js/ask-ai.js b/my-blog/static/js/ask-ai.js
index 824a3b4..abdea19 100644
--- a/my-blog/static/js/ask-ai.js
+++ b/my-blog/static/js/ask-ai.js
@@ -16,11 +16,11 @@ function toggleAskAI() {
}
}
+// Global auth status
+let isOAuthAuthenticated = false;
+
function checkAuthenticationStatus() {
- const userSections = document.querySelectorAll('.user-section');
- const isAuthenticated = userSections.length > 0;
-
- if (isAuthenticated) {
+ if (isOAuthAuthenticated) {
// User is authenticated - show Ask AI UI
document.getElementById('authCheck').style.display = 'none';
document.getElementById('chatForm').style.display = 'block';
@@ -76,27 +76,26 @@ function askQuestion() {
}
}
+// Global user data
+let currentUser = null;
+
function addUserMessage(question) {
const chatHistory = document.getElementById('chatHistory');
- const userSection = document.querySelector('.user-section');
let userAvatar = '👤';
let userDisplay = 'You';
let userHandle = 'user';
- if (userSection) {
- const avatarImg = userSection.querySelector('.user-avatar');
- const displayName = userSection.querySelector('.user-display-name');
- const handle = userSection.querySelector('.user-handle');
-
- if (avatarImg && avatarImg.src) {
- userAvatar = ``;
+ // Use currentUser data if available
+ if (currentUser) {
+ if (currentUser.avatar) {
+ userAvatar = `
`;
}
- if (displayName?.textContent) {
- userDisplay = displayName.textContent;
+ if (currentUser.displayName) {
+ userDisplay = currentUser.displayName;
}
- if (handle?.textContent) {
- userHandle = handle.textContent.replace('@', '');
+ if (currentUser.handle) {
+ userHandle = currentUser.handle;
}
}
@@ -253,6 +252,14 @@ function setupAskAIEventListeners() {
handleAIResponse(event.detail);
});
+ // Listen for OAuth authentication status updates
+ window.addEventListener('oauthAuthStatus', function(event) {
+ console.log('OAuth auth status updated:', event.detail);
+ isOAuthAuthenticated = event.detail.isAuthenticated;
+ currentUser = event.detail.user;
+ checkAuthenticationStatus();
+ });
+
// Listen for OAuth callback completion from iframe
window.addEventListener('message', function(event) {
if (event.data.type === 'oauth_success') {
diff --git a/oauth/src/App.css b/oauth/src/App.css
index e056258..d522a41 100644
--- a/oauth/src/App.css
+++ b/oauth/src/App.css
@@ -44,7 +44,7 @@ body {
.oauth-header-content {
display: flex;
- justify-content: center;
+ justify-content: space-between;
align-items: center;
max-width: 800px;
margin: 0 auto;
@@ -52,10 +52,6 @@ body {
width: 100%;
}
-.oauth-header-content:has(.oauth-user-profile) {
- justify-content: space-between;
-}
-
.oauth-app-title {
font-size: 20px;
font-weight: 800;
@@ -67,11 +63,7 @@ body {
gap: 8px;
align-items: center;
flex: 1;
-}
-
-/* When user is logged in, actions take normal space */
-.oauth-header-content:has(.oauth-user-profile) .oauth-header-actions {
- flex: 0 0 auto;
+ justify-content: flex-end;
}
/* OAuth User Profile in Header */
diff --git a/oauth/src/App.jsx b/oauth/src/App.jsx
index 11fac13..0213e00 100644
--- a/oauth/src/App.jsx
+++ b/oauth/src/App.jsx
@@ -47,6 +47,16 @@ export default function App() {
}
}
+ // Notify blog about authentication status
+ const dispatchAuthStatus = () => {
+ window.dispatchEvent(new CustomEvent('oauthAuthStatus', {
+ detail: {
+ isAuthenticated: !!user,
+ user: user
+ }
+ }))
+ }
+
// Listen for questions from blog
window.addEventListener('postAIQuestion', handleAIQuestion)
@@ -55,6 +65,9 @@ export default function App() {
dispatchAIProfileLoaded()
}
+ // Dispatch auth status whenever user changes
+ dispatchAuthStatus()
+
return () => {
window.removeEventListener('postAIQuestion', handleAIQuestion)
}
diff --git a/oauth/src/components/AuthButton.jsx b/oauth/src/components/AuthButton.jsx
index 2a51fc7..f6d5160 100644
--- a/oauth/src/components/AuthButton.jsx
+++ b/oauth/src/components/AuthButton.jsx
@@ -25,27 +25,9 @@ export default function AuthButton({ user, onLogin, onLogout, loading }) {
if (user) {
return (
-