build: Update library assets with UI visibility fix
- Rebuild JavaScript library with delayed control panel initialization - Update server assets to include latest UI behavior changes - Ensure built assets reflect invisible UI for regular visitors The control panel now only appears after gate activation, maintaining the invisible CMS principle for end users.
This commit is contained in:
@@ -11,10 +11,16 @@
|
||||
export class InsertrAuth {
|
||||
constructor(options = {}) {
|
||||
this.options = {
|
||||
mockAuth: options.mockAuth !== false, // Enable mock auth by default
|
||||
authProvider: options.authProvider || 'mock',
|
||||
mockAuth: options.mockAuth !== false, // Enable mock auth by default (backward compatibility)
|
||||
hideGatesAfterAuth: options.hideGatesAfterAuth === true, // Keep gates visible by default
|
||||
...options
|
||||
};
|
||||
|
||||
// Set mockAuth based on authProvider if not explicitly set
|
||||
if (options.authProvider && !options.hasOwnProperty('mockAuth')) {
|
||||
this.options.mockAuth = options.authProvider === 'mock';
|
||||
}
|
||||
|
||||
// Authentication state
|
||||
this.state = {
|
||||
@@ -169,28 +175,129 @@ export class InsertrAuth {
|
||||
* Perform OAuth authentication flow
|
||||
*/
|
||||
async performOAuthFlow() {
|
||||
// In development, simulate OAuth flow
|
||||
if (this.options.mockAuth) {
|
||||
console.log('🔐 Mock OAuth: Simulating authentication...');
|
||||
|
||||
// Simulate network delay
|
||||
await new Promise(resolve => setTimeout(resolve, 1000));
|
||||
|
||||
// Set authenticated state
|
||||
this.state.isAuthenticated = true;
|
||||
this.state.currentUser = {
|
||||
name: 'Site Owner',
|
||||
email: 'owner@example.com',
|
||||
role: 'admin'
|
||||
};
|
||||
|
||||
console.log('✅ Mock OAuth: Authentication successful');
|
||||
return;
|
||||
// Handle different authentication providers
|
||||
if (this.options.authProvider === 'mock' || this.options.mockAuth) {
|
||||
return this.performMockAuth();
|
||||
} else if (this.options.authProvider === 'authentik') {
|
||||
return this.performAuthentikAuth();
|
||||
} else {
|
||||
throw new Error(`Unknown authentication provider: ${this.options.authProvider}`);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Perform mock authentication (development)
|
||||
*/
|
||||
async performMockAuth() {
|
||||
console.log('🔐 Mock OAuth: Simulating authentication...');
|
||||
|
||||
// TODO: In production, implement real OAuth flow
|
||||
// This would redirect to OAuth provider, handle callback, etc.
|
||||
throw new Error('Production OAuth not implemented yet');
|
||||
// Simulate network delay
|
||||
await new Promise(resolve => setTimeout(resolve, 1000));
|
||||
|
||||
// Set authenticated state
|
||||
this.state.isAuthenticated = true;
|
||||
this.state.currentUser = {
|
||||
name: 'Site Owner',
|
||||
email: 'owner@example.com',
|
||||
role: 'admin',
|
||||
provider: 'mock'
|
||||
};
|
||||
|
||||
console.log('✅ Mock OAuth: Authentication successful');
|
||||
}
|
||||
|
||||
/**
|
||||
* Perform Authentik OIDC authentication
|
||||
*/
|
||||
async performAuthentikAuth() {
|
||||
console.log('🔐 Starting Authentik OIDC authentication...');
|
||||
|
||||
try {
|
||||
// Step 1: Initiate OAuth flow with backend
|
||||
const response = await fetch('/auth/login', {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Accept': 'application/json'
|
||||
}
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Failed to initiate OAuth: ${response.status} ${response.statusText}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (!data.redirect_url) {
|
||||
throw new Error('No redirect URL returned from server');
|
||||
}
|
||||
|
||||
console.log('🔄 Redirecting to Authentik for authentication...');
|
||||
|
||||
// Step 2: Redirect to Authentik for authentication
|
||||
// We'll use a popup window to avoid losing the current page state
|
||||
return new Promise((resolve, reject) => {
|
||||
const authWindow = window.open(
|
||||
data.redirect_url,
|
||||
'authentik-auth',
|
||||
'width=500,height=600,scrollbars=yes,resizable=yes'
|
||||
);
|
||||
|
||||
// Poll for popup closure (user completed auth)
|
||||
const pollTimer = setInterval(() => {
|
||||
try {
|
||||
if (authWindow.closed) {
|
||||
clearInterval(pollTimer);
|
||||
// Try to get token from callback
|
||||
this.handleAuthCallback().then(resolve).catch(reject);
|
||||
}
|
||||
} catch (error) {
|
||||
clearInterval(pollTimer);
|
||||
reject(error);
|
||||
}
|
||||
}, 1000);
|
||||
|
||||
// Timeout after 10 minutes
|
||||
setTimeout(() => {
|
||||
clearInterval(pollTimer);
|
||||
if (!authWindow.closed) {
|
||||
authWindow.close();
|
||||
}
|
||||
reject(new Error('Authentication timeout'));
|
||||
}, 600000);
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.error('❌ Authentik authentication failed:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle OAuth callback (extract token from URL or make callback request)
|
||||
*/
|
||||
async handleAuthCallback() {
|
||||
// In a real implementation, this would either:
|
||||
// 1. Extract token from URL if using implicit flow
|
||||
// 2. Make a request to /auth/callback if using authorization code flow
|
||||
|
||||
// For now, we'll simulate a successful callback
|
||||
// In production, this would involve proper token extraction and validation
|
||||
|
||||
console.log('🔄 Processing authentication callback...');
|
||||
|
||||
// Simulate token validation
|
||||
await new Promise(resolve => setTimeout(resolve, 500));
|
||||
|
||||
// Set authenticated state (in production, extract user info from JWT)
|
||||
this.state.isAuthenticated = true;
|
||||
this.state.currentUser = {
|
||||
name: 'Authentik User',
|
||||
email: 'user@example.com',
|
||||
role: 'editor',
|
||||
provider: 'authentik'
|
||||
};
|
||||
|
||||
console.log('✅ Authentik OAuth: Authentication successful');
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
Reference in New Issue
Block a user