@beforesemicolon/site-builder 0.35.0 → 0.36.0

package/scaffolds/admin/app.js

@@ -0,0 +1,244 @@
+import * as authManager from './auth-manager.js'
+import { Flashbars, showFlashbar } from './flashbar.js'
+import { Modal, showModal } from './modal.js'
+import { Preview } from './preview.js'
+import { Controls } from './controls/controls.js'
+import {
+    config,
+    currentPage,
+    currentWidget,
+    currentWidgetId,
+    hasPendingChanges,
+    loadConfig,
+    loading,
+    loadWidget,
+    panel,
+    publishChanges,
+    publishing,
+    selectPage,
+    selectWidget,
+    setLoading,
+    setPanel,
+} from './data.js'
+import { WidgetPreview } from './preview-widget.js'
+
+const { MARKUP } = window.BFS
+const { html, when, is, isNot, repeat, pick, or } = MARKUP
+
+const logout = async () => {
+    const doLogout = async () => {
+        await authManager.logout()
+    }
+
+    if (hasPendingChanges()) {
+        return showModal({
+            title: 'Unsaved Changes',
+            content:
+                'You have unsaved changes. Are you sure you want to logout?',
+            actionLabel: 'Logout',
+            action: doLogout,
+        })
+    }
+
+    doLogout()
+}
+
+const selectionOptions = () => {
+    if (!config()) return []
+
+    if (panel() === 'page') {
+        return config().pages.map((pg) => ({
+            label: pg.url.replace('.html', ''),
+            value: pg.id,
+            selected: is(currentPage, (p) => p.id === pg.id),
+        }))
+    } else {
+        return config().widgets.map((w) => ({
+            label: w.name,
+            value: w.id,
+            selected: is(currentWidgetId, (id) => id === w.id),
+        }))
+    }
+}
+
+const onOptionSelectionChange = (e) => {
+    if (panel() === 'page') {
+        selectPage(
+            config()?.pages.find((pg) => pg.id === e.target.value) ?? null
+        )
+    } else {
+        const w = config()?.widgets.find((w) => w.id === e.target.value) ?? null
+
+        if (w) {
+            loadWidget(w.id)
+        }
+    }
+}
+
+html`
+    ${when(
+        authManager.isAuthenticated,
+        () => html`
+            <div id="cms-app">
+                ${Flashbars}
+                ${when(
+                    publishing,
+                    html`
+                        <div
+                            class="publish-overlay"
+                            role="status"
+                            aria-live="polite"
+                        ></div>
+                    `
+                )}
+                <!-- Top Navigation Bar -->
+                <header class="cms-header">
+                    <div class="header-left">
+                        <img
+                            src="https://beforesemicolon.com/assets/new-logo-white-on-black@2x.png"
+                            alt="Before Semicolon logo"
+                            class="cms-logo"
+                            height="40"
+                        />
+                        <h1>Content Management System</h1>
+                    </div>
+                    <div class="header-right">
+                        <button
+                            id="publish-btn"
+                            class="btn btn-primary"
+                            disabled="${or(
+                                publishing,
+                                isNot(hasPendingChanges, true)
+                            )}"
+                            onclick="${publishChanges}"
+                        >
+                            ${when(
+                                publishing,
+                                'Publishing...',
+                                'Publish Changes'
+                            )}
+                        </button>
+                        <button
+                            id="logout-btn"
+                            class="btn btn-secondary"
+                            disabled="${publishing}"
+                            onclick="${logout}"
+                        >
+                            Logout
+                        </button>
+                        <div
+                            class="avatar"
+                            title="${pick(authManager.user, 'name')}"
+                        >
+                            <img
+                                src="${pick(authManager.user, 'picture')}"
+                                alt="${pick(authManager.user, 'name')}"
+                                width="40"
+                                height="40"
+                            />
+                        </div>
+                    </div>
+                </header>
+                <!-- Main Content Area -->
+                <main class="cms-main">
+                    <aside class="cms-sidebar">
+                        <div id="widget-editor" class="widget-editor">
+                            ${Controls({ disabled: publishing })}
+                        </div>
+                    </aside>
+                    <!-- Right Panel: Live Preview -->
+                    <section class="cms-preview">
+                        <div class="row preview-selection">
+                            <div class="tabs">
+                                <button
+                                    type="button"
+                                    class="btn ${when(
+                                        is(panel, 'page'),
+                                        'active'
+                                    )}"
+                                    onclick="${() => {
+                                        setPanel('page')
+                                        selectWidget('', null)
+                                    }}"
+                                >
+                                    Pages
+                                </button>
+                                <button
+                                    type="button"
+                                    class="btn ${when(
+                                        is(panel, 'widgets'),
+                                        'active'
+                                    )}"
+                                    onclick="${() => {
+                                        if (!currentWidget()) {
+                                            const w = config().widgets[0]
+                                            loadWidget(w.id)
+                                        }
+                                        setPanel('widgets')
+                                    }}"
+                                >
+                                    Widgets
+                                </button>
+                            </div>
+                            <select
+                                class="preview-dropdown"
+                                onchange="${onOptionSelectionChange}"
+                            >
+                                ${repeat(
+                                    selectionOptions,
+                                    (item) =>
+                                        html` <option
+                                            value="${item.value}"
+                                            selected="${item.selected}"
+                                        >
+                                            ${item.label}
+                                        </option>`
+                                )}
+                            </select>
+                        </div>
+                        <div id="preview-container" class="preview-container">
+                            ${when(is(panel, 'page'), Preview, WidgetPreview)}
+                        </div>
+                    </section>
+                </main>
+                <!-- Loading Overlay -->
+                <div
+                    id="loading-overlay"
+                    class="loading-overlay ${when(loading, 'show')}"
+                >
+                    <div class="loading-spinner">
+                        <div class="spinner"></div>
+                        <p>Loading...</p>
+                    </div>
+                </div>
+            </div>
+            ${Modal}
+        `,
+        () => authManager.LoginView
+    )}
+`
+    .onMount(() => {
+        // Initialize authentication
+        authManager
+            .initialize()
+            .then(() => loadConfig())
+            .catch((error) => {
+                console.error('Auth initialization failed:', error)
+                showFlashbar({
+                    type: 'error',
+                    title: 'Failed to auth user',
+                    message: 'Authentication failed. Please try again.',
+                })
+            })
+            .finally(() => {
+                setLoading(false)
+            })
+
+        window.addEventListener('beforeunload', (e) => {
+            if (hasPendingChanges()) {
+                e.preventDefault()
+                e.returnValue = ''
+            }
+        })
+    })
+    .replace(document.getElementById('app'))

package/scaffolds/admin/auth-manager.js

@@ -0,0 +1,275 @@
+import { showFlashbar } from './flashbar.js'
+
+const { html, state } = window.BFS.MARKUP
+
+const baseUrl = window.location.origin
+const redirectUri = baseUrl + '/admin'
+
+export const AUTH0_CONFIG = {
+    domain: 'cms-editor.us.auth0.com',
+    clientId: 'KL8nUmcNI8Y5mTLQVtftv9hXslWDwWED',
+    redirectUri: redirectUri,
+    scope: 'openid profile email',
+}
+
+// Module state
+let auth0Client = null
+let authStateCallbacks = []
+let initialized = false
+let cachedUser = null
+
+const [_isAuthenticated, setIsAuthenticated] = state(false)
+const [_user, setUser] = state(null)
+
+export const isAuthenticated = _isAuthenticated
+export const user = _user
+
+/**
+ * Notify all registered callbacks of auth state change
+ * @private
+ */
+function notifyAuthStateChange() {
+    const currentUser = user()
+    const isAuth = currentUser !== null
+
+    authStateCallbacks.forEach((callback) => {
+        callback(isAuth, currentUser)
+    })
+}
+
+/**
+ * Initialize Auth0 client
+ */
+export async function initialize() {
+    if (initialized) {
+        return
+    }
+
+    try {
+        // Get Auth0 config from configuration file
+        const domain = AUTH0_CONFIG.domain
+        const clientId = AUTH0_CONFIG.clientId
+
+        if (
+            !domain ||
+            !clientId ||
+            domain === 'YOUR_AUTH0_DOMAIN' ||
+            clientId === 'YOUR_AUTH0_CLIENT_ID'
+        ) {
+            throw new Error(
+                'Auth0 configuration missing. Please update admin/auth-config.js with your Auth0 credentials.'
+            )
+        }
+
+        // Create Auth0 client
+        auth0Client = await window.auth0.createAuth0Client({
+            domain,
+            clientId,
+            authorizationParams: {
+                redirect_uri: AUTH0_CONFIG.redirectUri,
+                audience: AUTH0_CONFIG.audience || `https://${domain}/api/v2/`,
+                scope: AUTH0_CONFIG.scope,
+            },
+            cacheLocation: 'localstorage',
+        })
+
+        // Handle redirect callback
+        if (
+            window.location.search.includes('code=') &&
+            window.location.search.includes('state=')
+        ) {
+            await auth0Client.handleRedirectCallback()
+            // Clean up URL
+            window.history.replaceState(
+                {},
+                document.title,
+                window.location.pathname
+            )
+        }
+
+        // Check if user is authenticated
+        const isAuthenticated = await auth0Client.isAuthenticated()
+
+        if (isAuthenticated) {
+            // Cache user data
+            cachedUser = await auth0Client.getUser()
+
+            // NEW: Validate email against Netlify Identity
+            try {
+                const validation = await validateUserEmail(cachedUser.email)
+
+                if (!validation.authorized) {
+                    await handleUnauthorizedAccess(validation.message)
+                    return
+                }
+
+                setIsAuthenticated(true)
+                setUser(cachedUser)
+            } catch (error) {
+                console.error('Email validation error:', error)
+                await handleUnauthorizedAccess(
+                    'Unable to validate user access. Please try again later.'
+                )
+                return
+            }
+        }
+
+        initialized = true
+
+        // Notify after user data is cached
+        notifyAuthStateChange()
+    } catch (error) {
+        console.error('Auth0 initialization failed:', error)
+        throw error
+    }
+}
+
+/**
+ * Login with Auth0
+ */
+export async function login() {
+    if (!auth0Client) {
+        console.error('Auth0 client not initialized')
+        return
+    }
+
+    try {
+        await auth0Client.loginWithRedirect({
+            authorizationParams: {
+                redirect_uri: AUTH0_CONFIG.redirectUri,
+            },
+        })
+    } catch (error) {
+        console.error('Login failed:', error)
+    }
+}
+
+/**
+ * Validate user email against Netlify Identity
+ * @param {string} email - User email from Auth0 token
+ * @returns {Promise<{authorized: boolean, message?: string}>}
+ */
+async function validateUserEmail(email) {
+    try {
+        const response = await fetch('/api/validate-user', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({ email }),
+        })
+
+        if (!response.ok) {
+            if (response.status === 403) {
+                const result = await response.json()
+                return {
+                    authorized: false,
+                    message:
+                        result.message ||
+                        'Your email is not authorized to access this admin panel',
+                }
+            }
+            throw new Error(`Validation request failed: ${response.status}`)
+        }
+
+        return await response.json()
+    } catch (error) {
+        console.error('Email validation failed:', error)
+        // On validation API failure, logout user as a safety measure
+        throw new Error(
+            'Unable to validate user access. Please try again later.'
+        )
+    }
+}
+
+/**
+ * Handle unauthorized access
+ * - Display error message
+ * - Logout from Auth0
+ * - Clear cached user data
+ * @param {string} message - Error message to display
+ */
+async function handleUnauthorizedAccess(message) {
+    try {
+        // Clear cached user data
+        cachedUser = null
+        setIsAuthenticated(false)
+        setUser(null)
+
+        // Display error message
+        showFlashbar({
+            type: 'error',
+            title: 'Access Denied',
+            message: 'You are not authorized to access this admin panel.',
+        })
+
+        // Logout from Auth0
+        if (auth0Client) {
+            await auth0Client.logout({
+                logoutParams: {
+                    returnTo: window.location.origin,
+                },
+            })
+        }
+    } catch (error) {
+        console.error('Error handling unauthorized access:', error)
+        // Force page reload as fallback
+        window.location.reload()
+    }
+}
+
+/**
+ * Logout current user
+ */
+export async function logout() {
+    if (!auth0Client) {
+        console.error('Auth0 client not initialized')
+        return
+    }
+
+    try {
+        cachedUser = null
+        await auth0Client.logout({
+            logoutParams: {
+                returnTo: window.location.origin + '/admin',
+            },
+        })
+    } catch (error) {
+        console.error('Logout failed:', error)
+    }
+}
+
+/**
+ * Login View Component
+ */
+export const LoginView = html`
+    <div id="login-screen" class="login-screen">
+        <div class="login-container">
+            <div class="login-header">
+                <img
+                    src="https://beforesemicolon.com/assets/new-logo-white-on-black@2x.png"
+                    alt="Before Semicolon logo"
+                    class="login-logo"
+                    height="60"
+                />
+                <h1>CMS Login</h1>
+                <p>Please sign in to access the admin panel</p>
+            </div>
+            <div class="login-form">
+                <button
+                    type="button"
+                    class="btn btn-primary btn-block"
+                    onclick="${login}"
+                >
+                    Sign In
+                </button>
+            </div>
+        </div>
+        <div class="login-footer">
+            <p>
+                &copy; ${new Date().getFullYear()} Before Semicolon. All rights
+                reserved.
+            </p>
+        </div>
+    </div>
+`

package/scaffolds/admin/controls/code.control.js

@@ -0,0 +1,22 @@
+const { html } = window.BFS.MARKUP
+
+export const renderCodeEditor = (input, path, disabled, label, onChange) => {
+    return html`
+        <div class="control-field-block code-editor-control">
+            <span class="label">${label}</span>
+            <div class="code-editor-wrapper">
+                <textarea
+                    class="code-editor"
+                    disabled="${disabled}"
+                    oninput="${(e) => {
+                        onChange(path, e.target.value, 'code')
+                        Prism.highlightElement(e.target)
+                    }}"
+                    rows="10"
+                >
+${input.value || ''}</textarea
+                >
+            </div>
+        </div>
+    `
+}