skrift 0.1.0a12__py3-none-any.whl

skrift/templates/setup/admin.html

@@ -0,0 +1,24 @@
+{% extends "setup/base.html" %}
+
+{% block title %}Create Admin Account - Skrift{% endblock %}
+
+{% block content %}
+<h2>Create Admin Account</h2>
+<p class="description">Sign in with one of your configured providers to create the first admin account.</p>
+
+<div class="oauth-buttons">
+    {% for key, provider in providers.items() %}
+    <a href="/setup/oauth/{{ key }}/login" class="oauth-btn oauth-btn-{{ key }}">
+        Sign in with {{ provider.name }}
+    </a>
+    {% endfor %}
+</div>
+
+<p style="text-align: center; margin-top: 2rem; color: var(--muted-color, #666);">
+    <small>The first user to sign in will become the site administrator.</small>
+</p>
+
+<div class="form-actions" style="margin-top: 2rem;">
+    <a href="/setup/site" class="btn-secondary" role="button">Back</a>
+</div>
+{% endblock %}

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 %}