rhales 0.4.0 → 0.5.3

data/demo/rhales-roda-demo/db/migrate/002_create_rodauth_password_tables.rb

@@ -0,0 +1,79 @@
+# demo/rhales-roda-demo/db/migrate/002_create_rodauth_password_tables.rb
+#
+# frozen_string_literal: true
+
+require 'rodauth/migrations'
+
+Sequel.migration do
+  up do
+    primary_key_type = ENV['RODAUTH_SPEC_UUID'] && database_type == :postgres ? :uuid : :bigint
+
+    create_table(:account_password_hashes) do
+      foreign_key :id, :accounts, primary_key: true, type: primary_key_type
+      String :password_hash, null: false
+    end
+    Rodauth.create_database_authentication_functions(self, argon2: ENV['RODAUTH_NO_ARGON2'] != '1')
+    case database_type
+    when :postgres
+      user = get(Sequel.lit('current_user')).sub(/_password\z/, '')
+      run 'REVOKE ALL ON account_password_hashes FROM public'
+      run "REVOKE ALL ON FUNCTION rodauth_get_salt(#{primary_key_type}) FROM public"
+      run "REVOKE ALL ON FUNCTION rodauth_valid_password_hash(#{primary_key_type}, text) FROM public"
+      run "GRANT INSERT, UPDATE, DELETE ON account_password_hashes TO #{user}"
+      run "GRANT SELECT(id) ON account_password_hashes TO #{user}"
+      run "GRANT EXECUTE ON FUNCTION rodauth_get_salt(#{primary_key_type}) TO #{user}"
+      run "GRANT EXECUTE ON FUNCTION rodauth_valid_password_hash(#{primary_key_type}, text) TO #{user}"
+    when :mysql
+      user    = get(Sequel.lit('current_user')).sub(/_password@/, '@')
+      db_name = get(Sequel.function(:database))
+      run "GRANT EXECUTE ON #{db_name}.* TO #{user}"
+      run "GRANT INSERT, UPDATE, DELETE ON account_password_hashes TO #{user}"
+      run "GRANT SELECT (id) ON account_password_hashes TO #{user}"
+    when :mssql
+      user = get(Sequel.function(:DB_NAME))
+      run "GRANT EXECUTE ON rodauth_get_salt TO #{user}"
+      run "GRANT EXECUTE ON rodauth_valid_password_hash TO #{user}"
+      run "GRANT INSERT, UPDATE, DELETE ON account_password_hashes TO #{user}"
+      run "GRANT SELECT ON account_password_hashes(id) TO #{user}"
+    end
+
+    # Used by the disallow_password_reuse feature
+    create_table(:account_previous_password_hashes) do
+      primary_key :id, type: :Bignum
+      foreign_key :account_id, :accounts, type: primary_key_type
+      String :password_hash, null: false
+    end
+    Rodauth.create_database_previous_password_check_functions(self, argon2: ENV['RODAUTH_NO_ARGON2'] != '1')
+
+    case database_type
+    when :postgres
+      user = get(Sequel.lit('current_user')).sub(/_password\z/, '')
+      run 'REVOKE ALL ON account_previous_password_hashes FROM public'
+      run 'REVOKE ALL ON FUNCTION rodauth_get_previous_salt(int8) FROM public'
+      run 'REVOKE ALL ON FUNCTION rodauth_previous_password_hash_match(int8, text) FROM public'
+      run "GRANT INSERT, UPDATE, DELETE ON account_previous_password_hashes TO #{user}"
+      run "GRANT SELECT(id, account_id) ON account_previous_password_hashes TO #{user}"
+      run "GRANT USAGE ON account_previous_password_hashes_id_seq TO #{user}"
+      run "GRANT EXECUTE ON FUNCTION rodauth_get_previous_salt(int8) TO #{user}"
+      run "GRANT EXECUTE ON FUNCTION rodauth_previous_password_hash_match(int8, text) TO #{user}"
+    when :mysql
+      user    = get(Sequel.lit('current_user')).sub(/_password@/, '@')
+      db_name = get(Sequel.function(:database))
+      run "GRANT EXECUTE ON #{db_name}.* TO #{user}"
+      run "GRANT INSERT, UPDATE, DELETE ON account_previous_password_hashes TO #{user}"
+      run "GRANT SELECT (id, account_id) ON account_previous_password_hashes TO #{user}"
+    when :mssql
+      user = get(Sequel.function(:DB_NAME))
+      run "GRANT EXECUTE ON rodauth_get_previous_salt TO #{user}"
+      run "GRANT EXECUTE ON rodauth_previous_password_hash_match TO #{user}"
+      run "GRANT INSERT, UPDATE, DELETE ON account_previous_password_hashes TO #{user}"
+      run "GRANT SELECT ON account_previous_password_hashes(id, account_id) TO #{user}"
+    end
+  end
+
+  down do
+    Rodauth.drop_database_previous_password_check_functions(self)
+    Rodauth.drop_database_authentication_functions(self)
+    drop_table(:account_previous_password_hashes, :account_password_hashes)
+  end
+end

data/demo/rhales-roda-demo/db/migrate/003_add_admin_account.rb

@@ -0,0 +1,68 @@
+# demo/rhales-roda-demo/db/migrate/003_add_admin_account.rb
+#
+# frozen_string_literal: true
+
+require 'bcrypt'
+
+Sequel.migration do
+  up do
+    # Ensure secrets table exists and get/create HMAC secret
+    #
+    # For the convenience of demo use only. Don't do this in production. It
+    # allows for consistent secret to be used between app restarts without
+    # having to manually generate and specify an environment variable.
+    create_table(:_demo_secrets) do
+      primary_key :id
+      String :name, unique: true, null: false
+      String :value, null: false
+      DateTime :created_at, null: false, default: Sequel::CURRENT_TIMESTAMP
+    end
+
+    # Create demo account
+    unless from(:accounts).where(email: 'demo@example.com').first
+      demo_account_id = from(:accounts).insert(
+        email: 'demo@example.com',
+        status_id: 2,  # Verified status
+      )
+
+      demo_password_hash = BCrypt::Password.create('demo123')
+      from(:account_password_hashes).insert(
+        id: demo_account_id,
+        password_hash: demo_password_hash,
+      )
+    end
+
+    # Create admin account
+    unless from(:accounts).where(email: 'admin@example.com').first
+      admin_account_id = from(:accounts).insert(
+        email: 'admin@example.com',
+        status_id: 2,  # Verified status
+      )
+
+      admin_password_hash = BCrypt::Password.create('admin123')
+      from(:account_password_hashes).insert(
+        id: admin_account_id,
+        password_hash: admin_password_hash,
+      )
+    end
+  end
+
+  down do
+    p '[demo] Removing the following secrets:'
+    p from(:_demo_secrets)
+
+    drop_table(:_demo_secrets)
+
+    # Remove admin account and password hash
+    if admin_account = from(:accounts).where(email: 'admin@example.com').first
+      from(:account_password_hashes).where(id: admin_account[:id]).delete
+      from(:accounts).where(id: admin_account[:id]).delete
+    end
+
+    # Remove demo account and password hash
+    if demo_account = from(:accounts).where(email: 'demo@example.com').first
+      from(:account_password_hashes).where(id: demo_account[:id]).delete
+      from(:accounts).where(id: demo_account[:id]).delete
+    end
+  end
+end

data/demo/rhales-roda-demo/templates/change_login.rue

@@ -0,0 +1,31 @@
+<!-- demo/rhales-roda-demo/templates/change_login.rue -->
+
+<schema lang="js-zod" version="2" envelope="SuccessEnvelope" layout="layouts/main">
+const schema = z.object({
+  page_title: z.string(),
+  submit_text: z.string(),
+  zodauth: z.any()
+});
+</schema>
+
+<template>
+<div class="auth-form">
+  <h2>{{page_title}}</h2>
+
+  <form method="post">
+    <div class="form-group">
+      <label for="login">New Login:</label>
+      <input type="text" id="login" name="login" required />
+    </div>
+
+    <div class="form-group">
+      <label for="password">Current Password:</label>
+      <input type="password" id="password" name="password" required />
+    </div>
+
+    {{{rodauth.csrf_tag}}}
+
+    <button type="submit" class="btn btn-primary">{{submit_text}}</button>
+  </form>
+</div>
+</template>

data/demo/rhales-roda-demo/templates/change_password.rue

@@ -0,0 +1,36 @@
+<!-- demo/rhales-roda-demo/templates/change_password.rue -->
+
+<schema lang="js-zod" version="2" envelope="SuccessEnvelope" layout="layouts/main">
+const schema = z.object({
+  page_title: z.string(),
+  submit_text: z.string(),
+  zodauth: z.any()
+});
+</schema>
+
+<template>
+<div class="auth-form">
+  <h2>{{page_title}}</h2>
+
+  <form method="post">
+    <div class="form-group">
+      <label for="password">Current Password:</label>
+      <input type="password" id="password" name="password" required />
+    </div>
+
+    <div class="form-group">
+      <label for="new-password">New Password:</label>
+      <input type="password" id="new-password" name="new-password" required />
+    </div>
+
+    <div class="form-group">
+      <label for="password-confirm">Confirm New Password:</label>
+      <input type="password" id="password-confirm" name="password-confirm" required />
+    </div>
+
+    {{{rodauth.csrf_tag}}}
+
+    <button type="submit" class="btn btn-primary">{{submit_text}}</button>
+  </form>
+</div>
+</template>

data/demo/rhales-roda-demo/templates/close_account.rue

@@ -0,0 +1,31 @@
+<!-- demo/rhales-roda-demo/templates/close_account.rue -->
+
+<schema lang="js-zod" version="2" envelope="SuccessEnvelope" layout="layouts/main">
+const schema = z.object({
+  page_title: z.string(),
+  submit_text: z.string(),
+  warning_message: z.string(),
+  zodauth: z.any()
+});
+</schema>
+
+<template>
+<div class="auth-form">
+  <h2>{{page_title}}</h2>
+
+  <div class="alert alert-warning">
+    {{warning_message}}
+  </div>
+
+  <form method="post">
+    <div class="form-group">
+      <label for="password">Current Password:</label>
+      <input type="password" id="password" name="password" required />
+    </div>
+
+    {{{rodauth.csrf_tag}}}
+
+    <button type="submit" class="btn btn-danger">{{submit_text}}</button>
+  </form>
+</div>
+</template>

data/demo/rhales-roda-demo/templates/create_account.rue

@@ -0,0 +1,40 @@
+<!-- demo/rhales-roda-demo/templates/create_account.rue -->
+
+<schema lang="js-zod" version="2" envelope="SuccessEnvelope" layout="layouts/main">
+const schema = z.object({
+  title: z.string(),
+  fields: z.array(z.object({
+    name: z.string(),
+    type: z.string(),
+    label: z.string(),
+    placeholder: z.string()
+  })),
+  zodauth: z.any()
+});
+</schema>
+
+<template>
+<div class="card" style="max-width: 400px; margin: 0 auto;">
+  <h2>{{title}}</h2>
+
+  <form method="post" action="/register">
+    {{{rodauth.csrf_tag}}}
+
+    {{#each fields}}
+      <div class="form-group">
+        <label for="{{name}}">{{label}}</label>
+        <input type="{{type}}" name="{{name}}" id="{{name}}" placeholder="{{placeholder}}" required>
+      </div>
+    {{/each}}
+
+    <button type="submit" class="btn">Create Account</button>
+    <a href="/login" style="margin-left: 1rem;">Already have an account?</a>
+  </form>
+</div>
+</template>
+
+<logic>
+# Registration form using field iteration
+# Demonstrates data-driven form generation
+# CSRF protection included
+</logic>

data/demo/rhales-roda-demo/templates/dashboard.rue

@@ -0,0 +1,150 @@
+<!-- demo/rhales-roda-demo/templates/dashboard.rue -->
+
+<schema lang="js-zod" version="2" envelope="SuccessEnvelope" window="userDashboard" layout="layouts/main">
+const schema = z.object({
+  welcome_message: z.string(),
+  login_time: z.string(),
+  features: z.array(z.object({
+    title: z.string(),
+    description: z.string(),
+    icon: z.string()
+  })),
+  api_endpoints: z.object({
+    user: z.string(),
+    demo_data: z.string()
+  }),
+  authenticated: z.boolean()
+});
+</schema>
+
+<template>
+<div style="max-width: 800px; margin: 0 auto; padding: 2rem;">
+  <h1 style="color: #2c3e50; margin-bottom: 2rem;">🎯 {{welcome_message}}</h1>
+
+  <div style="background: #e8f5e8; padding: 1.5rem; border-radius: 8px; margin-bottom: 2rem;">
+    <h3>✅ Authentication Successful</h3>
+    <p><strong>Login Time:</strong> {{login_time}}</p>
+    <p>You're now viewing the authenticated section of the Rhales RSFC demo!</p>
+  </div>
+
+  <div style="background: white; padding: 2rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin-bottom: 2rem;">
+    <h2>🎯 RSFC Demo Features</h2>
+    <p>This page demonstrates Ruby Single File Components with authentication boundaries:</p>
+
+    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; margin-top: 2rem;">
+      {{#each features}}
+        <div style="background: #f8f9fa; padding: 1.5rem; border-radius: 8px; text-align: center;">
+          <div style="font-size: 2rem; margin-bottom: 1rem;">{{icon}}</div>
+          <h3 style="margin-bottom: 1rem;">{{title}}</h3>
+          <p style="color: #666; font-size: 0.9rem;">{{description}}</p>
+        </div>
+      {{/each}}
+    </div>
+  </div>
+
+  <div style="background: white; padding: 2rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin-bottom: 2rem;">
+    <h2>⚡ Interactive Demo</h2>
+    <p>Click the buttons below to see RSFC hydration and API integration in action:</p>
+
+    <div style="margin: 1.5rem 0;">
+      <button id="fetch-user" style="background: #007bff; color: white; padding: 0.75rem 1.5rem; border: none; border-radius: 4px; margin-right: 1rem; cursor: pointer;">
+        Fetch User Data
+      </button>
+      <button id="fetch-demo" style="background: #28a745; color: white; padding: 0.75rem 1.5rem; border: none; border-radius: 4px; margin-right: 1rem; cursor: pointer;">
+        Fetch Demo Data
+      </button>
+      <button id="show-hydrated" style="background: #17a2b8; color: white; padding: 0.75rem 1.5rem; border: none; border-radius: 4px; cursor: pointer;">
+        Show Hydrated Data
+      </button>
+    </div>
+
+    <div id="demo-result" style="margin-top: 1.5rem;"></div>
+  </div>
+
+  <div style="background: #fff3cd; border: 1px solid #ffeaa7; padding: 1.5rem; border-radius: 8px; margin-bottom: 2rem;">
+    <h3>💡 What's Happening Here?</h3>
+    <ul style="margin: 1rem 0; padding-left: 2rem;">
+      <li>The JSON data section above is populated with Ruby variables at render time</li>
+      <li>This data is then injected into the browser as <code>window.userDashboard</code></li>
+      <li>Client-side JavaScript can access this data without additional API calls</li>
+      <li>The API endpoints demonstrate fetching fresh data when needed</li>
+      <li>CSP nonces are used for security (with additional validation planned)</li>
+      <li><em>Note: v0.1.0 - Active development with security improvements in progress</em></li>
+    </ul>
+  </div>
+
+  <div style="text-align: center;">
+    <a href="/logout" style="background: #dc3545; color: white; padding: 0.75rem 2rem; text-decoration: none; border-radius: 4px; margin-right: 1rem;">Logout</a>
+    <a href="/" style="background: #6c757d; color: white; padding: 0.75rem 2rem; text-decoration: none; border-radius: 4px;">Back to Home</a>
+  </div>
+</div>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+  // This data was hydrated from the server-side Ruby context
+  const dashboardData = window.userDashboard;
+
+  console.log('🎉 RSFC Hydration Success!', dashboardData);
+  console.log('🔐 Authenticated user viewing secure dashboard');
+
+  const resultDiv = document.getElementById('demo-result');
+
+  document.getElementById('fetch-user').addEventListener('click', async function() {
+    showLoading();
+
+    try {
+      const response = await fetch(dashboardData.api_endpoints.user);
+      const data = await response.json();
+
+      showResult('User API Data', data, '#e8f5e8');
+    } catch (error) {
+      showError('Failed to fetch user data: ' + error.message);
+    }
+  });
+
+  document.getElementById('fetch-demo').addEventListener('click', async function() {
+    showLoading();
+
+    try {
+      const response = await fetch(dashboardData.api_endpoints.demo_data);
+      const data = await response.json();
+
+      showResult('Demo API Data', data, '#e3f2fd');
+    } catch (error) {
+      showError('Failed to fetch demo data: ' + error.message);
+    }
+  });
+
+  document.getElementById('show-hydrated').addEventListener('click', function() {
+    showResult('Hydrated Dashboard Data', dashboardData, '#fff3cd');
+  });
+
+  function showLoading() {
+    resultDiv.innerHTML = '<p style="color: #666;">⏳ Loading...</p>';
+  }
+
+  function showResult(title, data, bgColor) {
+    resultDiv.innerHTML = `
+      <div style="background: ${bgColor}; padding: 1.5rem; border-radius: 8px; margin-top: 1rem;">
+        <h4>✅ ${title}:</h4>
+        <pre style="background: white; padding: 1rem; border-radius: 4px; overflow-x: auto; font-size: 0.9rem;">${JSON.stringify(data, null, 2)}</pre>
+      </div>
+    `;
+  }
+
+  function showError(message) {
+    resultDiv.innerHTML = `<p style="color: #dc3545; background: #f8d7da; padding: 1rem; border-radius: 4px;">❌ ${message}</p>`;
+  }
+});
+</script>
+</template>
+
+<logic>
+# Dashboard demonstrates:
+# - Secure authentication boundary (only shown when logged in)
+# - Server-side data interpolation in JSON data section
+# - Client-side hydration with window object
+# - Multiple API integration examples
+# - CSP nonce support for secure inline scripts
+# - Interactive demo of RSFC features
+</logic>

data/demo/rhales-roda-demo/templates/home.rue

@@ -0,0 +1,78 @@
+<!-- demo/rhales-roda-demo/templates/home.rue -->
+
+<schema lang="js-zod" version="2" envelope="SuccessEnvelope" window="data" layout="layouts/main">
+const schema = z.object({
+  page_type: z.string(),
+  features: z.array(z.object({
+    title: z.string(),
+    description: z.string(),
+    icon: z.string()
+  }))
+});
+</schema>
+
+<template>
+<div class="hero-section">
+  <h1 class="hero-title">Welcome to Rhales Demo</h1>
+  <p class="hero-subtitle">
+    Experience the power of Ruby Single File Components
+  </p>
+
+  {{#unless authenticated}}
+  <div class="demo-login">
+    <h3>Demo Login</h3>
+    <p>Use these credentials to see the authenticated experience:</p>
+
+    <div class="demo-accounts">
+      {{#each demo_accounts}}
+        <div class="demo-account">
+          <p><strong>{{role}} Account:</strong> {{email}} / {{password}}</p>
+        </div>
+      {{/each}}
+    </div>
+
+    <a href="/login" class="login-link">Login Now</a>
+  </div>
+  {{/unless}}
+
+  {{#if authenticated}}
+  <div class="auth-notice">
+    <p>✓ You're logged in! <a href="/">View Dashboard</a></p>
+  </div>
+  {{/if}}
+
+  <div class="features-section">
+    <h2>RSFC Features Demonstrated</h2>
+    <div class="features-grid">
+      {{#each features}}
+        <div class="feature-card">
+          <div class="feature-icon">{{icon}}</div>
+          <h3 class="feature-title">{{title}}</h3>
+          <p class="feature-description">{{description}}</p>
+        </div>
+      {{/each}}
+    </div>
+  </div>
+</div>
+
+<script nonce="{{app.nonce}}">
+// Demonstrate client-side access to hydrated data
+document.addEventListener('DOMContentLoaded', function() {
+  if (window.data) {
+    console.log('Rhales Demo hydrated with data:', window.data);
+
+    // Add a dynamic timestamp
+    const timestamp = document.createElement('p');
+    timestamp.className = 'timestamp';
+    timestamp.innerHTML = 'Page rendered at: ' + new Date().toLocaleString();
+    document.body.appendChild(timestamp);
+  }
+});
+</script>
+</template>
+
+<logic>
+# Homepage showcases Rhales features with authentication demo
+# Demonstrates conditional rendering based on auth state
+# Shows demo credentials for easy testing
+</logic>

data/demo/rhales-roda-demo/templates/layouts/main.rue

@@ -0,0 +1,168 @@
+<!-- demo/rhales-roda-demo/templates/layouts/main.rue -->
+
+<schema lang="js-zod" version="2" envelope="SuccessEnvelope" window="layout">
+const schema = z.object({
+  app_name: z.string(),
+  year: z.number()
+});
+</schema>
+
+<template>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>{{app_name}}</title>
+  <style nonce="{{app.nonce}}">
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      line-height: 1.6;
+      color: #333;
+      background: #f5f5f5;
+    }
+    .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
+    header {
+      background: #2c3e50;
+      color: white;
+      padding: 1rem 0;
+      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+    }
+    nav { display: flex; justify-content: space-between; align-items: center; }
+    nav a { color: white; text-decoration: none; margin-left: 1.5rem; }
+    nav a:hover { text-decoration: underline; }
+    .logo { font-size: 1.5rem; font-weight: bold; }
+    main { min-height: calc(100vh - 140px); padding: 2rem 0; }
+    footer {
+      background: #34495e;
+      color: white;
+      text-align: center;
+      padding: 1rem 0;
+    }
+    .flash {
+      padding: 1rem;
+      margin: 1rem 0;
+      border-radius: 4px;
+      background: #d4edda;
+      color: #155724;
+      border: 1px solid #c3e6cb;
+    }
+    .flash.error {
+      background: #f8d7da;
+      color: #721c24;
+      border-color: #f5c6cb;
+    }
+    .btn {
+      display: inline-block;
+      padding: 0.5rem 1rem;
+      background: #3498db;
+      color: white;
+      text-decoration: none;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+    }
+    .btn:hover { background: #2980b9; }
+    .btn-danger { background: #e74c3c; }
+    .btn-danger:hover { background: #c0392b; }
+    .card {
+      background: white;
+      padding: 2rem;
+      border-radius: 8px;
+      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+      margin-bottom: 1rem;
+    }
+    .form-group { margin-bottom: 1rem; }
+    .form-group label { display: block; margin-bottom: 0.5rem; font-weight: 500; }
+    .form-group input, .form-group textarea, .form-group select {
+      width: 100%;
+      padding: 0.5rem;
+      border: 1px solid #ddd;
+      border-radius: 4px;
+      font-size: 1rem;
+    }
+    .form-group input:focus, .form-group textarea:focus {
+      outline: none;
+      border-color: #3498db;
+    }
+    .stats {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+      gap: 1rem;
+      margin-bottom: 2rem;
+    }
+    .stat-card {
+      background: white;
+      padding: 1.5rem;
+      border-radius: 8px;
+      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+      text-align: center;
+    }
+    .stat-card h3 { color: #666; font-size: 0.9rem; margin-bottom: 0.5rem; }
+    .stat-card .value { font-size: 2rem; font-weight: bold; color: #2c3e50; }
+
+    /* Home page styles */
+    .hero-section { text-align: center; padding: 4rem 0; }
+    .hero-title { font-size: 3rem; margin-bottom: 1rem; }
+    .hero-subtitle { font-size: 1.2rem; color: #666; margin-bottom: 2rem; }
+    .demo-login { background: #f8f9fa; padding: 2rem; border-radius: 8px; margin: 2rem auto; max-width: 400px; }
+    .demo-accounts { background: white; padding: 1rem; border-radius: 4px; margin: 1rem 0; }
+    .demo-account { margin-bottom: 0.5rem; }
+    .login-link { background: #007bff; color: white; padding: 0.5rem 1rem; text-decoration: none; border-radius: 4px; }
+    .auth-notice { background: #d4edda; color: #155724; padding: 1rem; border-radius: 4px; margin: 2rem auto; max-width: 400px; }
+    .features-section { margin: 3rem 0; }
+    .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; margin-top: 2rem; }
+    .feature-card { background: white; padding: 2rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); text-align: center; }
+    .feature-icon { font-size: 3rem; margin-bottom: 1rem; }
+    .feature-title { margin-bottom: 1rem; }
+    .feature-description { color: #666; font-size: 0.9rem; }
+    .timestamp { font-size: 0.8rem; color: #999; }
+  </style>
+</head>
+<body>
+  <header>
+    <div class="container">
+      <nav>
+        <div class="logo">{{app_name}}</div>
+        <div>
+          {{#if authenticated}}
+            <a href="/">Dashboard</a>
+            <a href="/logout">Logout</a>
+          {{else}}
+            <a href="/">Home</a>
+            <a href="/login">Login</a>
+            <a href="/register">Register</a>
+          {{/if}}
+        </div>
+      </nav>
+    </div>
+  </header>
+
+  <main>
+    <div class="container">
+      {{#if flash_notice}}
+        <div class="flash">{{flash_notice}}</div>
+      {{/if}}
+      {{#if flash_error}}
+        <div class="flash error">{{flash_error}}</div>
+      {{/if}}
+
+      {{{content}}}
+    </div>
+  </main>
+
+  <footer>
+    <div class="container">
+      <p>&copy; {{year}} {{app_name}} - Powered by Rhales RSFC</p>
+    </div>
+  </footer>
+</body>
+</html>
+</template>
+
+<logic>
+# Layout provides the main HTML structure for all pages
+# Uses conditional rendering for navigation based on authentication state
+# Includes flash message support and responsive design
+</logic>