skrift 0.1.0a1__py3-none-any.whl

skrift/templates/setup/auth.html

@@ -0,0 +1,110 @@
+{% extends "setup/base.html" %}
+
+{% block title %}Authentication Setup - Skrift{% endblock %}
+
+{% block content %}
+<h2>Authentication Providers</h2>
+<p class="description">Configure at least one OAuth provider for user authentication.</p>
+
+<form method="post" action="/setup/auth">
+    <div class="form-group">
+        <label for="redirect_base_url">OAuth Redirect Base URL</label>
+        <input type="url" id="redirect_base_url" name="redirect_base_url" value="{{ redirect_base_url }}" required>
+        <small>The base URL for OAuth callbacks (auto-detected from your current URL)</small>
+    </div>
+
+    <hr style="margin: 2rem 0;">
+
+    {% for key, provider in providers.items() %}
+    <div class="provider-card{% if key in configured_providers %} enabled{% endif %}" id="provider-{{ key }}">
+        <div class="provider-header" onclick="toggleProvider('{{ key }}')">
+            <input type="checkbox" name="{{ key }}_enabled" id="{{ key }}_enabled" {% if key in configured_providers %}checked{% endif %} onclick="event.stopPropagation(); toggleProvider('{{ key }}')">
+            <h3>{{ provider.name }}</h3>
+        </div>
+        <div class="provider-fields">
+            <div class="provider-instructions">
+                <details>
+                    <summary>Setup Instructions</summary>
+                    <pre>{{ provider.instructions }}</pre>
+                    <p><a href="{{ provider.console_url }}" target="_blank" rel="noopener">Open Developer Console</a></p>
+                </details>
+            </div>
+
+            <div class="form-group">
+                <label>Redirect URI (copy this to your OAuth app settings)</label>
+                <div class="redirect-url" id="redirect-url-{{ key }}">{{ redirect_base_url }}/auth/{{ key }}/callback</div>
+            </div>
+
+            {% for field in provider.fields %}
+            <div class="form-group">
+                <label for="{{ key }}_{{ field.key }}">{{ field.label }}{% if not field.optional %} *{% endif %}</label>
+                <input type="{{ field.type }}"
+                       id="{{ key }}_{{ field.key }}"
+                       name="{{ key }}_{{ field.key }}"
+                       value="{{ configured_providers.get(key, {}).get(field.key, '') }}"
+                       {% if field.placeholder %}placeholder="{{ field.placeholder }}"{% endif %}
+                       {% if not field.optional %}required{% endif %}>
+                <div class="form-group env-toggle">
+                    <input type="checkbox" id="{{ key }}_{{ field.key }}_env" name="{{ key }}_{{ field.key }}_env">
+                    <label for="{{ key }}_{{ field.key }}_env">Use environment variable (enter env var name above)</label>
+                </div>
+            </div>
+            {% endfor %}
+        </div>
+    </div>
+    {% endfor %}
+
+    <div class="form-actions">
+        <a href="/setup/database" class="btn-secondary" role="button">Back</a>
+        <button type="submit">Save &amp; Continue</button>
+    </div>
+</form>
+{% endblock %}
+
+{% block scripts %}
+<script>
+    function toggleProvider(key) {
+        const card = document.getElementById('provider-' + key);
+        const checkbox = document.getElementById(key + '_enabled');
+
+        // Toggle the checkbox when clicking the header (but not when clicking the checkbox itself)
+        if (event.target !== checkbox) {
+            checkbox.checked = !checkbox.checked;
+        }
+
+        card.classList.toggle('enabled', checkbox.checked);
+
+        // Toggle required attribute on fields
+        const fields = card.querySelectorAll('input[required]');
+        fields.forEach(field => {
+            if (checkbox.checked) {
+                field.setAttribute('required', '');
+            } else {
+                field.removeAttribute('required');
+            }
+        });
+    }
+
+    // Update redirect URLs when base URL changes
+    document.getElementById('redirect_base_url').addEventListener('input', function() {
+        const baseUrl = this.value;
+        {% for key in providers.keys() %}
+        document.getElementById('redirect-url-{{ key }}').textContent = baseUrl + '/auth/{{ key }}/callback';
+        {% endfor %}
+    });
+
+    // Initialize required attributes based on initial state
+    document.addEventListener('DOMContentLoaded', function() {
+        {% for key in providers.keys() %}
+        const card{{ key }} = document.getElementById('provider-{{ key }}');
+        const checkbox{{ key }} = document.getElementById('{{ key }}_enabled');
+        const fields{{ key }} = card{{ key }}.querySelectorAll('.provider-fields input[type="text"], .provider-fields input[type="password"]');
+        fields{{ key }}.forEach(field => {
+            if (!checkbox{{ key }}.checked && !field.closest('.form-group').querySelector('label').textContent.includes('optional')) {
+                field.removeAttribute('required');
+            }
+        });
+        {% endfor %}
+    });
+</script>
+{% endblock %}

skrift/templates/setup/base.html

@@ -0,0 +1,407 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{% block title %}Setup - Skrift{% endblock %}</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600&family=Lora:ital,wght@0,400;0,600;1,400;1,600&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="/static/css/style.css">
+    <style>
+        .setup-container {
+            max-width: 600px;
+            margin: 2rem auto;
+            padding: 0 1rem;
+        }
+
+        .setup-header {
+            text-align: center;
+            margin-bottom: 2rem;
+        }
+
+        .setup-header h1 {
+            font-size: 2rem;
+            margin-bottom: 0.5rem;
+        }
+
+        .setup-progress {
+            display: flex;
+            justify-content: center;
+            gap: 0.5rem;
+            margin-bottom: 2rem;
+        }
+
+        .setup-progress-step {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+
+        .setup-progress-dot {
+            width: 2rem;
+            height: 2rem;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: bold;
+            font-size: 0.875rem;
+            background: var(--color-surface);
+            color: var(--color-text-muted);
+            border: 1px solid var(--color-border);
+        }
+
+        .setup-progress-dot.active {
+            background: var(--color-primary);
+            color: var(--color-primary-text);
+            border-color: var(--color-primary);
+        }
+
+        .setup-progress-dot.completed {
+            background: var(--color-success);
+            color: white;
+            border-color: var(--color-success);
+        }
+
+        .setup-progress-line {
+            width: 2rem;
+            height: 2px;
+            background: var(--color-border);
+        }
+
+        .setup-progress-line.completed {
+            background: var(--color-success);
+        }
+
+        .setup-card {
+            background: var(--color-surface);
+            border-radius: var(--radius-md);
+            padding: 2rem;
+            border: 1px solid var(--color-border);
+        }
+
+        .setup-card h2 {
+            margin-top: 0;
+            margin-bottom: 0.5rem;
+        }
+
+        .setup-card p.description {
+            color: var(--color-text-muted);
+            margin-bottom: 1.5rem;
+        }
+
+        .form-group {
+            margin-bottom: 1.5rem;
+        }
+
+        .form-group label {
+            display: block;
+            margin-bottom: 0.5rem;
+            font-weight: 500;
+        }
+
+        .form-group small {
+            display: block;
+            margin-top: 0.25rem;
+            color: var(--color-text-muted);
+        }
+
+        .form-group.env-toggle {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            margin-top: 0.5rem;
+        }
+
+        .form-group.env-toggle label {
+            margin: 0;
+            font-weight: normal;
+            font-size: 0.875rem;
+        }
+
+        .form-group.env-toggle input[type="checkbox"] {
+            margin: 0;
+            width: 1.25rem;
+            height: 1.25rem;
+            flex-shrink: 0;
+        }
+
+        .radio-group {
+            display: flex;
+            gap: 1rem;
+            margin-bottom: 1rem;
+        }
+
+        .radio-option {
+            display: flex;
+            align-items: flex-start;
+            gap: 0.5rem;
+            padding: 1rem;
+            border: 2px solid var(--color-border);
+            border-radius: var(--radius-md);
+            cursor: pointer;
+            flex: 1;
+            background: var(--color-bg);
+        }
+
+        .radio-option:hover {
+            border-color: var(--color-primary);
+        }
+
+        .radio-option.selected {
+            border-color: var(--color-primary);
+            background: var(--color-surface);
+        }
+
+        .radio-option input[type="radio"] {
+            margin: 0;
+        }
+
+        .radio-option .radio-content {
+            flex: 1;
+        }
+
+        .radio-option .radio-content strong {
+            display: block;
+            margin-bottom: 0.25rem;
+        }
+
+        .radio-option .radio-content small {
+            color: var(--color-text-muted);
+        }
+
+        .conditional-fields {
+            display: none;
+            margin-top: 1.5rem;
+            padding-top: 1.5rem;
+            border-top: 1px solid var(--color-border);
+        }
+
+        .conditional-fields.visible {
+            display: block;
+        }
+
+        .form-actions {
+            display: flex;
+            justify-content: space-between;
+            margin-top: 2rem;
+            gap: 1rem;
+        }
+
+        .form-actions button,
+        .form-actions [role="button"] {
+            flex: 1;
+            margin-top: 0;
+        }
+
+        .alert {
+            padding: 1rem;
+            border-radius: var(--radius-md);
+            margin-bottom: 1rem;
+        }
+
+        .alert-error {
+            background: rgba(239, 68, 68, 0.1);
+            color: var(--color-error);
+            border: 1px solid var(--color-error);
+        }
+
+        .alert-success {
+            background: rgba(16, 185, 129, 0.1);
+            color: var(--color-success);
+            border: 1px solid var(--color-success);
+        }
+
+        .provider-card {
+            border: 2px solid var(--color-border);
+            border-radius: var(--radius-md);
+            margin-bottom: 1rem;
+            overflow: hidden;
+            background: var(--color-bg);
+        }
+
+        .provider-card.enabled {
+            border-color: var(--color-primary);
+        }
+
+        .provider-header {
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+            padding: 1rem;
+            cursor: pointer;
+            background: var(--color-surface);
+        }
+
+        .provider-header input[type="checkbox"] {
+            margin: 0;
+        }
+
+        .provider-header h3 {
+            margin: 0;
+            flex: 1;
+            font-size: 1rem;
+        }
+
+        .provider-fields {
+            display: none;
+            padding: 1rem;
+            border-top: 1px solid var(--color-border);
+        }
+
+        .provider-card.enabled .provider-fields {
+            display: block;
+        }
+
+        .provider-instructions {
+            margin-bottom: 1rem;
+        }
+
+        .provider-instructions details {
+            background: var(--color-surface);
+            padding: 0.5rem 1rem;
+            border-radius: var(--radius-sm);
+        }
+
+        .provider-instructions summary {
+            cursor: pointer;
+            font-weight: 500;
+        }
+
+        .provider-instructions pre {
+            white-space: pre-wrap;
+            font-size: 0.875rem;
+            margin: 0.5rem 0;
+            background: var(--color-bg);
+            padding: 0.75rem;
+            border-radius: var(--radius-sm);
+        }
+
+        .redirect-url {
+            background: var(--color-bg);
+            padding: 0.5rem;
+            border-radius: var(--radius-sm);
+            font-family: var(--font-family-mono);
+            font-size: 0.875rem;
+            word-break: break-all;
+            margin: 0.5rem 0 1rem;
+            border: 1px solid var(--color-border);
+        }
+
+        .oauth-buttons {
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
+        }
+
+        .oauth-btn {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 0.75rem;
+            padding: 1rem 1.5rem;
+            border-radius: var(--radius-pill);
+            font-size: 1rem;
+            font-weight: 600;
+            text-decoration: none;
+            transition: opacity 0.2s, transform 0.1s;
+        }
+
+        .oauth-btn:hover {
+            opacity: 0.9;
+        }
+
+        .oauth-btn:active {
+            transform: translateY(1px);
+        }
+
+        .oauth-btn::after {
+            display: none;
+        }
+
+        .oauth-btn-google {
+            background: #4285f4;
+            color: white;
+        }
+
+        .oauth-btn-github {
+            background: #24292e;
+            color: white;
+        }
+
+        .oauth-btn-microsoft {
+            background: #00a4ef;
+            color: white;
+        }
+
+        .oauth-btn-discord {
+            background: #5865f2;
+            color: white;
+        }
+
+        .oauth-btn-facebook {
+            background: #1877f2;
+            color: white;
+        }
+
+        .oauth-btn-twitter {
+            background: #000000;
+            color: white;
+        }
+
+        .complete-message {
+            text-align: center;
+            padding: 2rem;
+        }
+
+        .complete-message h2 {
+            color: var(--color-success);
+        }
+
+        .complete-icon {
+            font-size: 4rem;
+            margin-bottom: 1rem;
+            color: var(--color-success);
+        }
+    </style>
+    {% block head %}{% endblock %}
+</head>
+<body>
+    <main class="setup-container">
+        <div class="setup-header">
+            <h1>Skrift Setup</h1>
+            <p>Configure your site in a few easy steps</p>
+        </div>
+
+        {% if step is defined %}
+        <div class="setup-progress">
+            {% for i in range(1, total_steps + 1) %}
+                {% if i > 1 %}
+                <div class="setup-progress-line{% if i <= step %} completed{% endif %}"></div>
+                {% endif %}
+                <div class="setup-progress-step">
+                    <div class="setup-progress-dot{% if i < step %} completed{% elif i == step %} active{% endif %}">
+                        {% if i < step %}&#10003;{% else %}{{ i }}{% endif %}
+                    </div>
+                </div>
+            {% endfor %}
+        </div>
+        {% endif %}
+
+        {% if flash %}
+        <div class="alert alert-success">{{ flash }}</div>
+        {% endif %}
+
+        {% if error %}
+        <div class="alert alert-error">{{ error }}</div>
+        {% endif %}
+
+        <div class="setup-card">
+            {% block content %}{% endblock %}
+        </div>
+    </main>
+
+    {% block scripts %}{% endblock %}
+</body>
+</html>

skrift/templates/setup/complete.html

@@ -0,0 +1,17 @@
+{% extends "setup/base.html" %}
+
+{% block title %}Setup Complete - Skrift{% endblock %}
+
+{% block content %}
+<div class="complete-message">
+    <div class="complete-icon">&#10003;</div>
+    <h2>Setup Complete!</h2>
+    <p>Your Skrift site is now configured and ready to use.</p>
+    <p style="color: var(--muted-color, #666);">You can manage your site settings, users, and content from the admin panel.</p>
+
+    <div style="margin-top: 2rem;">
+        <a href="/" role="button" style="margin-right: 1rem;">Go to Site</a>
+        <a href="/admin" role="button" class="outline">Open Admin Panel</a>
+    </div>
+</div>
+{% endblock %}

skrift/templates/setup/database.html

@@ -0,0 +1,125 @@
+{% extends "setup/base.html" %}
+
+{% block title %}Database Setup - Skrift{% endblock %}
+
+{% block content %}
+<h2>Database Configuration</h2>
+<p class="description">Choose your database type and configure the connection.</p>
+
+<form method="post" action="/setup/database">
+    <div class="radio-group">
+        <label class="radio-option{% if db_type == 'sqlite' %} selected{% endif %}" id="sqlite-option">
+            <input type="radio" name="db_type" value="sqlite" {% if db_type == 'sqlite' %}checked{% endif %}>
+            <div class="radio-content">
+                <strong>SQLite</strong>
+                <small>Perfect for personal sites. No setup required.</small>
+            </div>
+        </label>
+        <label class="radio-option{% if db_type == 'postgresql' %} selected{% endif %}" id="postgresql-option">
+            <input type="radio" name="db_type" value="postgresql" {% if db_type == 'postgresql' %}checked{% endif %}>
+            <div class="radio-content">
+                <strong>PostgreSQL</strong>
+                <small>For production deployments.</small>
+            </div>
+        </label>
+    </div>
+
+    <div class="conditional-fields{% if db_type == 'sqlite' %} visible{% endif %}" id="sqlite-fields">
+        <div class="form-group">
+            <label for="sqlite_path">Database File Path</label>
+            <input type="text" id="sqlite_path" name="sqlite_path" value="./app.db" placeholder="./app.db">
+            <small>Path relative to the application directory</small>
+        </div>
+        <div class="form-group env-toggle">
+            <input type="checkbox" id="sqlite_path_env" name="sqlite_path_env">
+            <label for="sqlite_path_env">Use environment variable (enter env var name in field above)</label>
+        </div>
+    </div>
+
+    <div class="conditional-fields{% if db_type == 'postgresql' %} visible{% endif %}" id="postgresql-fields">
+        <div class="form-group env-toggle" style="margin-bottom: 1rem;">
+            <input type="checkbox" id="pg_url_env" name="pg_url_env">
+            <label for="pg_url_env">Use a single DATABASE_URL environment variable</label>
+        </div>
+
+        <div id="pg-env-field" style="display: none;">
+            <div class="form-group">
+                <label for="pg_url_envvar">Environment Variable Name</label>
+                <input type="text" id="pg_url_envvar" name="pg_url_envvar" value="DATABASE_URL">
+                <small>The environment variable containing the full connection URL</small>
+            </div>
+        </div>
+
+        <div id="pg-manual-fields">
+            <div class="form-group">
+                <label for="pg_host">Host</label>
+                <input type="text" id="pg_host" name="pg_host" value="localhost" placeholder="localhost">
+            </div>
+
+            <div class="form-group">
+                <label for="pg_port">Port</label>
+                <input type="number" id="pg_port" name="pg_port" value="5432" placeholder="5432">
+            </div>
+
+            <div class="form-group">
+                <label for="pg_database">Database Name</label>
+                <input type="text" id="pg_database" name="pg_database" value="skrift" placeholder="skrift">
+            </div>
+
+            <div class="form-group">
+                <label for="pg_username">Username</label>
+                <input type="text" id="pg_username" name="pg_username" value="postgres" placeholder="postgres">
+            </div>
+
+            <div class="form-group">
+                <label for="pg_password">Password</label>
+                <input type="password" id="pg_password" name="pg_password" placeholder="Enter password">
+            </div>
+        </div>
+    </div>
+
+    <div class="form-actions">
+        <button type="submit">Test Connection &amp; Continue</button>
+    </div>
+</form>
+{% endblock %}
+
+{% block scripts %}
+<script>
+    document.addEventListener('DOMContentLoaded', function() {
+        const sqliteOption = document.getElementById('sqlite-option');
+        const postgresqlOption = document.getElementById('postgresql-option');
+        const sqliteFields = document.getElementById('sqlite-fields');
+        const postgresqlFields = document.getElementById('postgresql-fields');
+        const radioInputs = document.querySelectorAll('input[name="db_type"]');
+
+        function updateVisibility() {
+            const selected = document.querySelector('input[name="db_type"]:checked').value;
+
+            sqliteOption.classList.toggle('selected', selected === 'sqlite');
+            postgresqlOption.classList.toggle('selected', selected === 'postgresql');
+
+            sqliteFields.classList.toggle('visible', selected === 'sqlite');
+            postgresqlFields.classList.toggle('visible', selected === 'postgresql');
+        }
+
+        radioInputs.forEach(input => {
+            input.addEventListener('change', updateVisibility);
+        });
+
+        // PostgreSQL env var toggle
+        const pgEnvCheckbox = document.getElementById('pg_url_env');
+        const pgEnvField = document.getElementById('pg-env-field');
+        const pgManualFields = document.getElementById('pg-manual-fields');
+
+        function updatePgFields() {
+            const useEnv = pgEnvCheckbox.checked;
+            pgEnvField.style.display = useEnv ? 'block' : 'none';
+            pgManualFields.style.display = useEnv ? 'none' : 'block';
+        }
+
+        pgEnvCheckbox.addEventListener('change', updatePgFields);
+        updatePgFields();
+    });
+</script>
+{% endblock %}

skrift/templates/setup/restart.html

@@ -0,0 +1,28 @@
+{% extends "setup/base.html" %}
+
+{% block title %}Restart Required - Skrift{% endblock %}
+
+{% block content %}
+<h2>Database Configured Successfully!</h2>
+<p class="description">The database has been set up and migrations have been run. To continue with setup, you need to restart the server.</p>
+
+<div style="background: var(--color-bg); padding: 1.5rem; border-radius: var(--radius-md); margin: 1.5rem 0; border: 1px solid var(--color-border);">
+    <h3 style="margin-top: 0;">Why restart?</h3>
+    <p style="margin-bottom: 0; color: var(--color-text-muted);">
+        The server needs to reload to enable authentication features that require the database connection you just configured.
+    </p>
+</div>
+
+<div style="background: var(--color-surface); padding: 1.5rem; border-radius: var(--radius-md); margin: 1.5rem 0; border: 1px solid var(--color-border);">
+    <h3 style="margin-top: 0;">To restart:</h3>
+    <ol style="margin-bottom: 0; padding-left: 1.5rem;">
+        <li>Stop the current server (press <code>Ctrl+C</code> in the terminal)</li>
+        <li>Start it again with the same command you used before</li>
+        <li>Return to this page - setup will continue automatically</li>
+    </ol>
+</div>
+
+<div class="form-actions">
+    <a href="/setup/restart" role="button" class="button">I've Restarted - Continue Setup</a>
+</div>
+{% endblock %}