chmln-app-dev/formeleon
5
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

i18 drin
Formeleon Deployment Pipeline / Deploy to Dev Environment (push) Successful in 1m1s
Details
Formeleon Deployment Pipeline / Deploy to Production Environment (push) Skipped
Details

Browse Source 
mail drin
fehlende routen drin
prod-reife erreicht.
TODOS:

Deine aktuellen offenen TODOs
1. Rate-Limiting (Spam-Schutz VOR dem reCAPTCHA)
Das reCAPTCHA hält zwar Bots ab, aber wenn jemand böswillig ein Script schreibt, das 1.000 POST-Requests pro Sekunde an /api/v1/submissions sendet, muss dein Backend jedes Mal Google kontaktieren und die Datenbank befragen. Das frisst Server-Ressourcen.

Todo: Einbinden von Flask-Limiter und Absichern der API-Route (z.B. max. 10 Submissions pro Minute pro IP-Adresse oder Tenant).
2. Billing & Feature-Enforcement (Limits pro Tenant durchsetzen)
Die Mandanten-Architektur und das config-Feld im JSON existieren bereits. Aber wir erzwingen diese Limits aktuell nicht im Backend.

Todo: Im Dashboard (templates/admin/tenants/view.html) UI-Controls einbauen, um Feature-Flags für einen Tenant festzulegen:
max_forms (z.B. 1 für Free-User, 10 für Pro-User).
allow_instant_mail (Dürfen E-Mails an den Tenant gesendet werden?).
allow_autoresponder (Darf der Autoresponder für Endkunden genutzt werden?).
Todo: Diese Limits hart im Backend (beim Erstellen von Forms und beim Mailversand) kontrollieren. (Der Mailer prüft das zwar schon halbwegs, das UI zum Pflegen fehlt aber noch komplett).
3. E-Mail Templates aufwerten (HTML statt Plain-Text)
Bisher versendet der Service E-Mails als reinen Text (plain). Für eine professionelle SaaS-Lösung sollten diese Mails ansprechend aussehen.

Todo: Im services/mailer.py den MIMEMultipart so erweitern, dass er saubere HTML-Mails aus einem Jinja2-Template (templates/emails/...) generiert, inklusive Branding/Logo deines Services.
4. Frontend-Snippet "Graceful Degradation"
Das embed.js arbeitet aktuell sehr gut. Aber was ist, wenn das Formeleon-Backend mal für 5 Minuten down ist?

Todo: Einen sauberen Timeout im fetch einbauen und dem Endkunden auf der Webseite eine schöne, fallback HTML-Meldung anzeigen ("Entschuldigung, das Formular ist momentan nicht erreichbar"), anstatt dass sich das Script lautlos in der Console mit einem CORS/Network-Error verabschiedet.
5. CI/CD Pipeline (Deployment)
Wenn der Code fertig ist, willst du ihn sicher nicht immer händisch per git pull auf deinen Produktionsserver schieben und dort docker compose up tippen.

Todo: Eine simple Pipeline (Github Actions / Gitea Actions) anlegen, die den Code testet und automatisch auf dem Zielserver ausrollt.
This commit is contained in:
br committed 2026-09-29 05:16:01 +02:00
1 parent 7f81932fa5
commit 5fff17531d
31 files changed
+2683 -550
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

templates/admin/dashboard.html
+90 -64
View File
@@ -21,45 +21,51 @@
{# Statistics Cards #}
<div class="row mb-4">
<div class="col-md-3 col-6 mb-3">
<div class="card bg-primary text-white">
<div class="card-body">
<div class="d-flex align-items-center">
<i class="bi bi-buildings display-6"></i>
<div class="ms-3">
<h3 class="mb-0">{{ tenant_count }}</h3>
<p class="mb-0">Tenants</p>
<a href="{{ url_for('admin.list_tenants') }}" class="text-decoration-none">
<div class="card bg-primary text-white h-100 hover-shadow">
<div class="card-body">
<div class="d-flex align-items-center">
<i class="bi bi-buildings display-6"></i>
<div class="ms-3">
<h3 class="mb-0">{{ tenant_count }}</h3>
<p class="mb-0">Tenants</p>
</div>
</div>
</div>
</div>
</div>
</a>
</div>
<div class="col-md-3 col-6 mb-3">
<div class="card bg-success text-white">
<div class="card-body">
<div class="d-flex align-items-center">
<i class="bi bi-file-earmark-text display-6"></i>
<div class="ms-3">
<h3 class="mb-0">{{ form_count }}</h3>
<p class="mb-0">Forms</p>
<a href="{{ url_for('admin.list_forms') }}" class="text-decoration-none">
<div class="card bg-success text-white h-100 hover-shadow">
<div class="card-body">
<div class="d-flex align-items-center">
<i class="bi bi-file-earmark-text display-6"></i>
<div class="ms-3">
<h3 class="mb-0">{{ form_count }}</h3>
<p class="mb-0">Forms</p>
</div>
</div>
</div>
</div>
</div>
</a>
</div>
<div class="col-md-3 col-6 mb-3">
<div class="card bg-info text-white">
<div class="card-body">
<div class="d-flex align-items-center">
<i class="bi bi-inbox display-6"></i>
<div class="ms-3">
<h3 class="mb-0">{{ submission_count }}</h3>
<p class="mb-0">Submissions</p>
<a href="{{ url_for('admin.list_submissions') }}" class="text-decoration-none">
<div class="card bg-info text-white h-100 hover-shadow">
<div class="card-body">
<div class="d-flex align-items-center">
<i class="bi bi-inbox display-6"></i>
<div class="ms-3">
<h3 class="mb-0">{{ submission_count }}</h3>
<p class="mb-0">Submissions</p>
</div>
</div>
</div>
</div>
</div>
</a>
</div>
<div class="col-md-3 col-6 mb-3">
@@ -79,38 +85,46 @@
<div class="row">
{# Recent Submissions #}
<div class="col-lg-6 mb-4">
<div class="card">
<div class="col-12 mb-4">
<div class="card shadow-sm">
<div class="card-header bg-light">
<h5><i class="bi bi-inbox"></i> Recent Submissions</h5>
<h5 class="mb-0"><i class="bi bi-inbox me-2"></i> Recent Submissions</h5>
</div>
<div class="card-body p-0">
{% if recent_submissions %}
<div class="table-responsive">
<table class="table table-hover mb-0">
<thead class="table-light">
<div class="table-responsive" style="max-height: 400px; overflow-y: auto;">
<table class="table table-hover mb-0 align-middle">
<thead class="table-light sticky-top">
<tr>
<th>ID</th>
<th>Form</th>
<th>Tenant</th>
<th>Date</th>
<th>Status</th>
<th>Actions</th>
<th class="text-end">Actions</th>
</tr>
</thead>
<tbody>
{% for submission in recent_submissions %}
<tr>
<td>{{ submission.id[:12] }}...</td>
<td>{{ submission.form_config.name if submission.form_config else 'N/A' }}</td>
<td><small class="font-monospace text-muted">{{ submission.id[:12] }}...</small></td>
<td><strong>{{ submission.form_config.name if submission.form_config else 'N/A' }}</strong></td>
<td>{{ submission.tenant.name if submission.tenant else 'N/A' }}</td>
<td>{{ submission.created_at.strftime('%Y-%m-%d %H:%M') if submission.created_at else 'N/A' }}</td>
<td>
<span class="badge bg-{{ 'success' if submission.status.value == 'processed' else 'warning' if submission.status.value == 'pending' else 'danger' }}">
{{ submission.status.value }}
</span>
{% if submission.status.value == 'processed' %}
<span class="badge bg-success">Processed</span>
{% elif submission.status.value == 'pending' %}
<span class="badge bg-warning text-dark">Pending</span>
{% elif submission.status.value == 'spam' %}
<span class="badge bg-danger">Spam</span>
{% else %}
<span class="badge bg-secondary">{{ submission.status.value }}</span>
{% endif %}
</td>
<td>
<a href="{{ url_for('admin.view_submission', submission_id=submission.id) }}" class="btn btn-sm btn-outline-secondary">
<i class="bi bi-eye"></i>
<td class="text-end">
<a href="{{ url_for('admin.view_submission', submission_id=submission.id) }}" class="btn btn-sm btn-outline-primary">
<i class="bi bi-eye"></i> View
</a>
</td>
</tr>
@@ -119,13 +133,13 @@
</table>
</div>
{% else %}
<div class="p-4 text-center text-muted">
<i class="bi bi-inbox display-4"></i>
<p>No recent submissions</p>
<div class="p-5 text-center text-muted">
<i class="bi bi-inbox display-4 d-block mb-3"></i>
<p>No active recent submissions found.</p>
</div>
{% endif %}
</div>
<div class="card-footer bg-light">
<div class="card-footer bg-light text-end">
<a href="{{ url_for('admin.list_submissions') }}" class="btn btn-sm btn-outline-primary">
<i class="bi bi-list"></i> View All Submissions
</a>
@@ -134,38 +148,42 @@
</div>
{# Recent Forms #}
<div class="col-lg-6 mb-4">
<div class="card">
<div class="col-12 mb-4">
<div class="card shadow-sm">
<div class="card-header bg-light">
<h5><i class="bi bi-file-earmark-text"></i> Recent Forms</h5>
<h5 class="mb-0"><i class="bi bi-file-earmark-text me-2"></i> Recent Forms</h5>
</div>
<div class="card-body p-0">
{% if recent_forms %}
<div class="table-responsive">
<table class="table table-hover mb-0">
<thead class="table-light">
<div class="table-responsive" style="max-height: 400px; overflow-y: auto;">
<table class="table table-hover mb-0 align-middle">
<thead class="table-light sticky-top">
<tr>
<th>Name</th>
<th>Tenant</th>
<th>Fields</th>
<th>Status</th>
<th>Created</th>
<th>Actions</th>
<th class="text-end">Actions</th>
</tr>
</thead>
<tbody>
{% for form in recent_forms %}
<tr>
<td>{{ form.name }}</td>
<td><strong>{{ form.name }}</strong></td>
<td>{{ form.tenant.name if form.tenant else 'N/A' }}</td>
<td><span class="badge bg-info text-dark">{{ form.get_field_definitions()|length }}</span></td>
<td>
<span class="badge bg-{{ 'success' if form.is_active else 'secondary' }}">
{{ 'Active' if form.is_active else 'Inactive' }}
</span>
{% if form.is_active %}
<span class="badge bg-success">Active</span>
{% else %}
<span class="badge bg-secondary">Inactive</span>
{% endif %}
</td>
<td>{{ form.created_at.strftime('%Y-%m-%d') if form.created_at else 'N/A' }}</td>
<td>
<a href="{{ url_for('admin.view_form', form_id=form.id) }}" class="btn btn-sm btn-outline-secondary">
<i class="bi bi-eye"></i>
<td class="text-end">
<a href="{{ url_for('admin.view_form', form_id=form.id) }}" class="btn btn-sm btn-outline-primary">
<i class="bi bi-pencil"></i> Edit
</a>
</td>
</tr>
@@ -174,19 +192,19 @@
</table>
</div>
{% else %}
<div class="p-4 text-center text-muted">
<i class="bi bi-file-earmark-text display-4"></i>
<p>No recent forms</p>
<div class="p-5 text-center text-muted">
<i class="bi bi-file-earmark-text display-4 d-block mb-3"></i>
<p>No forms have been created yet.</p>
</div>
{% endif %}
</div>
<div class="card-footer bg-light">
<div class="card-footer bg-light d-flex justify-content-between">
<a href="{{ url_for('admin.create_form') }}" class="btn btn-sm btn-primary">
<i class="bi bi-plus"></i> Create New Form
</a>
<a href="{{ url_for('admin.list_forms') }}" class="btn btn-sm btn-outline-primary">
<i class="bi bi-list"></i> View All Forms
</a>
<a href="{{ url_for('admin.create_form') }}" class="btn btn-sm btn-primary">
<i class="bi bi-plus"></i> Create Form
</a>
</div>
</div>
</div>
@@ -278,5 +296,13 @@
.display-6 {
font-size: calc(1.2525rem + 0.975vw);
}
.hover-shadow {
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hover-shadow:hover {
transform: translateY(-3px);
box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
}
</style>
{% endblock %}
templates/admin/forms/create.html
+435
View File
@@ -0,0 +1,435 @@
{% extends "base.html" %}
{% block title %}Create Form - Admin Dashboard{% endblock %}
{% block extra_css %}
<style>
/* Styling for the visual form builder */
.field-card { border-left: 4px solid #0d6efd; transition: all 0.2s; }
.field-card:hover { box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); }
.drag-handle { cursor: grab; color: #adb5bd; }
</style>
<!-- Include SortableJS for drag-and-drop support -->
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
{% endblock %}
{% block content %}
<div class="mb-4">
<a href="{{ url_for('admin.list_forms') }}" class="btn btn-outline-secondary btn-sm mb-3">
<i class="bi bi-arrow-left"></i> Back to Forms
</a>
<h2><i class="bi bi-plus-circle me-2"></i> Create New Form</h2>
</div>
<div class="row">
<div class="col-12">
<div class="card shadow-sm mb-4">
<div class="card-body">
<form action="{{ url_for('admin.create_form') }}" method="POST" id="create-form-form">
<input type="hidden" name="csrf_token" value="{{ csrf_token() if csrf_token else '' }}">
<!-- Hidden input to store the JSON payload we build via JS -->
<input type="hidden" name="form_structure" id="hidden_form_structure">
<div class="row">
<div class="col-md-6 mb-3">
<label for="name" class="form-label">Form Name <span class="text-danger">*</span></label>
<input type="text" class="form-control" id="name" name="name" required placeholder="e.g. Contact Us">
</div>
<div class="col-md-6 mb-3 d-flex align-items-end">
<div class="form-check form-switch mb-2">
<input class="form-check-input" type="checkbox" id="is_active" name="is_active" value="true" checked>
<label class="form-check-label" for="is_active">Active (accepting submissions)</label>
</div>
</div>
</div>
<div class="mb-3">
<label for="description" class="form-label">Description</label>
<textarea class="form-control" id="description" name="description" rows="2" placeholder="Brief description of the form's purpose"></textarea>
</div>
<hr class="my-4">
<div class="d-flex justify-content-between align-items-center mb-3">
<h5 class="mb-0">Form Builder</h5>
<div>
<button type="button" class="btn btn-sm btn-outline-secondary me-2" id="toggle-json-view">
<i class="bi bi-code-slash"></i> Toggle JSON View
</button>
<button type="button" class="btn btn-sm btn-success" id="add-field-btn">
<i class="bi bi-plus"></i> Add Field
</button>
</div>
</div>
<!-- Visual Builder Area -->
<div id="visual-builder" class="mb-4 bg-light p-3 rounded border">
<div id="fields-container">
<!-- Fields will be dynamically injected here by JS -->
</div>
<!-- Submit Button Config -->
<div class="card mt-4 border-success">
<div class="card-header bg-success text-white py-2">
<i class="bi bi-hand-index-thumb me-1"></i> Submit Button Configuration
</div>
<div class="card-body row">
<div class="col-md-6 mb-2">
<label class="form-label small">Button Text</label>
<input type="text" class="form-control form-control-sm" id="submit-btn-text" value="Submit">
</div>
<div class="col-md-6 mb-2">
<label class="form-label small">Custom CSS Classes</label>
<input type="text" class="form-control form-control-sm" id="submit-btn-css" placeholder="e.g. btn btn-primary">
</div>
</div>
</div>
<!-- Notifications & Email Settings -->
<div class="card mt-4 border-info">
<div class="card-header bg-info text-dark py-2">
<i class="bi bi-envelope-paper me-1"></i> Notifications & Autoresponder
</div>
<div class="card-body">
<input type="hidden" name="settings" id="hidden_settings">
<div class="row mb-4">
<div class="col-12 border-bottom pb-3">
<h6><i class="bi bi-bell text-primary me-2"></i>Admin Notification</h6>
<p class="small text-muted mb-2">Send an email alert to specific addresses when a new submission arrives.</p>
<div class="form-check form-switch mb-2">
<input class="form-check-input" type="checkbox" id="notify_enabled">
<label class="form-check-label small fw-bold" for="notify_enabled">Enable Admin Notification</label>
</div>
<div id="notify_options" style="display:none;" class="ps-4 mt-2 border-start border-2 border-primary">
<label class="form-label small">Recipient Email(s)</label>
<input type="text" class="form-control form-control-sm mb-1" id="notify_emails" placeholder="admin@domain.com, sales@domain.com">
<small class="text-muted d-block" style="font-size: 0.75rem;">Comma separated list of email addresses.</small>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<h6><i class="bi bi-reply-all text-success me-2"></i>Submitter Autoresponder</h6>
<p class="small text-muted mb-2">Send an automated "Thank You" email to the person who submitted the form.</p>
<div class="form-check form-switch mb-2">
<input class="form-check-input" type="checkbox" id="autorespond_enabled">
<label class="form-check-label small fw-bold" for="autorespond_enabled">Enable Autoresponder</label>
</div>
<div id="autorespond_options" style="display:none;" class="ps-4 mt-2 border-start border-2 border-success">
<div class="mb-2">
<label class="form-label small">Target Email Field</label>
<select class="form-select form-select-sm" id="autorespond_target_field">
<option value="">-- Select an email field from your form --</option>
</select>
<small class="text-muted d-block mt-1" style="font-size: 0.75rem;">Select which form field contains the submitter's email address.</small>
</div>
<div class="mb-2">
<label class="form-label small">Email Subject</label>
<input type="text" class="form-control form-control-sm" id="autorespond_subject" value="Thank you for your submission!">
</div>
<div class="mb-2">
<label class="form-label small">Email Body Template</label>
<textarea class="form-control form-control-sm" id="autorespond_body" rows="4">Hello,
Thank you for contacting us. We have received your submission and will get back to you shortly.
Best regards,
The Team</textarea>
<small class="text-muted d-block mt-1" style="font-size: 0.75rem;">You can use field variables like <code>{{'{{'}} field_name {{'}}'}}</code> in the body.</small>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- JSON Editor Area (Hidden by default) -->
<div id="json-editor-container" class="mb-4" style="display:none;">
<div class="alert alert-warning py-2 small">
<i class="bi bi-exclamation-triangle"></i> Editing JSON directly will override the visual builder.
</div>
<textarea class="form-control font-monospace" id="json_textarea" rows="15">{{ default_form_structure | tojson(indent=4) }}</textarea>
<div class="form-text text-danger" id="json-error" style="display:none;">Invalid JSON format.</div>
</div>
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
<a href="{{ url_for('admin.list_forms') }}" class="btn btn-light me-md-2">Cancel</a>
<button type="submit" class="btn btn-primary" id="save-btn"><i class="bi bi-save"></i> Save Form</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Template for a new field -->
<template id="field-template">
<div class="card field-card mb-3 shadow-sm">
<div class="card-body p-3">
<div class="d-flex justify-content-between align-items-center mb-3">
<h6 class="mb-0 text-primary"><i class="bi bi-grip-vertical drag-handle me-2"></i> Form Field</h6>
<button type="button" class="btn btn-sm btn-outline-danger remove-field-btn"><i class="bi bi-trash"></i></button>
</div>
<div class="row g-2">
<div class="col-md-4">
<label class="form-label small mb-1">Field Type</label>
<select class="form-select form-select-sm field-type">
<option value="text">Text Input</option>
<option value="email">Email</option>
<option value="textarea">Textarea (Multiline)</option>
<option value="select">Dropdown (Select)</option>
<option value="checkbox">Checkbox</option>
</select>
</div>
<div class="col-md-4">
<label class="form-label small mb-1">Field Name (ID) *</label>
<input type="text" class="form-control form-control-sm field-name" required placeholder="e.g. first_name">
</div>
<div class="col-md-4">
<label class="form-label small mb-1">Display Label</label>
<input type="text" class="form-control form-control-sm field-label" placeholder="e.g. First Name">
</div>
<div class="col-md-4 mt-2">
<label class="form-label small mb-1">Placeholder</label>
<input type="text" class="form-control form-control-sm field-placeholder" placeholder="Optional text inside field">
</div>
<div class="col-md-4 mt-2">
<label class="form-label small mb-1">Custom CSS Classes</label>
<input type="text" class="form-control form-control-sm field-css" placeholder="e.g. form-control my-custom-input">
</div>
<div class="col-md-4 mt-2 d-flex align-items-end">
<div class="form-check form-switch mb-1">
<input class="form-check-input field-required" type="checkbox">
<label class="form-check-label small">Required Field</label>
</div>
</div>
<!-- Options container (only visible for select/radio/checkbox) -->
<div class="col-12 mt-2 options-container" style="display:none;">
<label class="form-label small mb-1">Options (Comma separated)</label>
<input type="text" class="form-control form-control-sm field-options" placeholder="Option 1, Option 2, Option 3">
</div>
</div>
</div>
</div>
</template>
{% endblock %}
{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
// Core Elements
const fieldsContainer = document.getElementById('fields-container');
const addFieldBtn = document.getElementById('add-field-btn');
const toggleJsonBtn = document.getElementById('toggle-json-view');
const visualBuilder = document.getElementById('visual-builder');
const jsonEditor = document.getElementById('json-editor-container');
const jsonTextarea = document.getElementById('json_textarea');
const hiddenFormStructure = document.getElementById('hidden_form_structure');
const formEl = document.getElementById('create-form-form');
// Initialize Drag & Drop Sortable
if (typeof Sortable !== 'undefined') {
new Sortable(fieldsContainer, {
handle: '.drag-handle',
animation: 150,
ghostClass: 'bg-light',
dragClass: 'shadow-lg',
onEnd: function (evt) {
// Fired when dragging ends
}
});
}
let isJsonView = false;
let fieldCounter = 0;
// Initialize with one default field
addField('text', 'name', 'Name', 'Enter your name');
addField('email', 'email', 'Email Address', 'Enter your email');
// Add Field Button
addFieldBtn.addEventListener('click', () => {
addField();
});
// Toggle JSON / Visual View
toggleJsonBtn.addEventListener('click', () => {
isJsonView = !isJsonView;
if (isJsonView) {
// Switching to JSON: Generate JSON from visual builder
jsonTextarea.value = JSON.stringify(buildJsonFromVisual(), null, 4);
visualBuilder.style.display = 'none';
jsonEditor.style.display = 'block';
toggleJsonBtn.innerHTML = '<i class="bi bi-palette"></i> Back to Builder';
addFieldBtn.style.display = 'none';
} else {
// Switching to Visual: We don't auto-parse complex JSON back to visual (too error prone for edge cases)
// But we hide JSON and show visual again.
visualBuilder.style.display = 'block';
jsonEditor.style.display = 'none';
toggleJsonBtn.innerHTML = '<i class="bi bi-code-slash"></i> Toggle JSON View';
addFieldBtn.style.display = 'inline-block';
}
});
// Toggle Settings UI
const notifyEnabled = document.getElementById('notify_enabled');
const notifyOptions = document.getElementById('notify_options');
notifyEnabled.addEventListener('change', (e) => { notifyOptions.style.display = e.target.checked ? 'block' : 'none'; });
const autorespondEnabled = document.getElementById('autorespond_enabled');
const autorespondOptions = document.getElementById('autorespond_options');
autorespondEnabled.addEventListener('change', (e) => {
autorespondOptions.style.display = e.target.checked ? 'block' : 'none';
if(e.target.checked) updateEmailFieldDropdown();
});
// Helper to extract email fields for the dropdown
function updateEmailFieldDropdown() {
const select = document.getElementById('autorespond_target_field');
const currentVal = select.value;
select.innerHTML = '<option value="">-- Select an email field from your form --</option>';
const cards = fieldsContainer.querySelectorAll('.field-card');
cards.forEach(card => {
const type = card.querySelector('.field-type').value;
if(type === 'email' || type === 'text') {
const name = card.querySelector('.field-name').value;
const label = card.querySelector('.field-label').value || name;
if(name) {
const opt = document.createElement('option');
opt.value = name;
opt.text = `${label} (${name})`;
select.appendChild(opt);
}
}
});
if(currentVal) select.value = currentVal;
}
// Handle Form Submit
formEl.addEventListener('submit', function(e) {
// Build settings JSON
const settingsJson = {
notifications: {
enabled: notifyEnabled.checked,
send_to: document.getElementById('notify_emails').value.split(',').map(s => s.trim()).filter(s => s)
},
autoresponder: {
enabled: autorespondEnabled.checked,
email_field_name: document.getElementById('autorespond_target_field').value,
subject: document.getElementById('autorespond_subject').value,
body_template: document.getElementById('autorespond_body').value
}
};
document.getElementById('hidden_settings').value = JSON.stringify(settingsJson);
if (!isJsonView) {
// If in visual mode, build the JSON right before submit
hiddenFormStructure.value = JSON.stringify(buildJsonFromVisual());
} else {
// If in JSON mode, take text area value directly
try {
JSON.parse(jsonTextarea.value); // Validate
hiddenFormStructure.value = jsonTextarea.value;
} catch (err) {
e.preventDefault();
alert("Invalid JSON configuration. Please fix errors before saving.");
return false;
}
}
});
// Function to add a new visual field
function addField(type = 'text', name = '', label = '', placeholder = '') {
fieldCounter++;
const template = document.getElementById('field-template');
const clone = template.content.cloneNode(true);
const card = clone.querySelector('.field-card');
// Populate default values if provided
card.querySelector('.field-type').value = type;
card.querySelector('.field-name').value = name || `field_${fieldCounter}`;
card.querySelector('.field-label').value = label;
card.querySelector('.field-placeholder').value = placeholder;
// Setup event listeners for this specific card
setupCardEvents(card);
fieldsContainer.appendChild(clone);
}
function setupCardEvents(card) {
// Remove button
card.querySelector('.remove-field-btn').addEventListener('click', function() {
card.remove();
updateEmailFieldDropdown(); // Refresh dropdown
});
// Type change (show/hide options)
const typeSelect = card.querySelector('.field-type');
const optionsContainer = card.querySelector('.options-container');
typeSelect.addEventListener('change', function() {
const val = this.value;
if (val === 'select' || val === 'radio') {
optionsContainer.style.display = 'block';
} else {
optionsContainer.style.display = 'none';
}
updateEmailFieldDropdown(); // Refresh dropdown
});
// Name change (refresh dropdown)
card.querySelector('.field-name').addEventListener('change', updateEmailFieldDropdown);
// Trigger change initially to set correct state
typeSelect.dispatchEvent(new Event('change'));
}
// Builder Logic: Read visual fields and construct JSON
function buildJsonFromVisual() {
const json = {
version: "1.0",
fields: [],
submit_button: {
text: document.getElementById('submit-btn-text').value || "Submit",
css_classes: document.getElementById('submit-btn-css').value || ""
}
};
const cards = fieldsContainer.querySelectorAll('.field-card');
cards.forEach(card => {
const type = card.querySelector('.field-type').value;
const fieldDef = {
name: card.querySelector('.field-name').value,
type: type,
label: card.querySelector('.field-label').value,
placeholder: card.querySelector('.field-placeholder').value,
required: card.querySelector('.field-required').checked,
css_classes: card.querySelector('.field-css').value
};
if (type === 'select' || type === 'radio') {
const optsString = card.querySelector('.field-options').value;
if (optsString) {
fieldDef.options = optsString.split(',').map(s => s.trim()).filter(s => s);
}
}
json.fields.push(fieldDef);
});
return json;
}
});
</script>
{% endblock %}
templates/admin/forms/view.html
+524
View File
@@ -0,0 +1,524 @@
{% extends "base.html" %}
{% block title %}Edit Form - Admin Dashboard{% endblock %}
{% block extra_css %}
<style>
/* Styling for the visual form builder */
.field-card { border-left: 4px solid #0d6efd; transition: all 0.2s; }
.field-card:hover { box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); }
.drag-handle { cursor: grab; color: #adb5bd; }
</style>
<!-- Include SortableJS for drag-and-drop support -->
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
{% endblock %}
{% block content %}
<div class="mb-4">
<a href="{{ url_for('admin.list_forms') }}" class="btn btn-outline-secondary btn-sm mb-3">
<i class="bi bi-arrow-left"></i> Back to Forms
</a>
<div class="d-flex justify-content-between align-items-center">
<h2><i class="bi bi-pencil-square me-2"></i> Edit Form: {{ form.name }}</h2>
<span class="badge {{ 'bg-success' if form.is_active else 'bg-secondary' }}">
{{ 'Active' if form.is_active else 'Inactive' }}
</span>
</div>
</div>
<div class="row">
<div class="col-lg-8 mb-4">
<div class="card shadow-sm h-100">
<div class="card-body">
<form action="{{ url_for('admin.view_form', form_id=form.id) }}" method="POST" id="edit-form-form">
<input type="hidden" name="csrf_token" value="{{ csrf_token() if csrf_token else '' }}">
<input type="hidden" name="form_structure" id="hidden_form_structure">
<div class="row">
<div class="col-md-6 mb-3">
<label for="name" class="form-label">Form Name <span class="text-danger">*</span></label>
<input type="text" class="form-control" id="name" name="name" value="{{ form.name }}" required>
</div>
<div class="col-md-6 mb-3 d-flex align-items-end">
<div class="form-check form-switch mb-2">
<input class="form-check-input" type="checkbox" id="is_active" name="is_active" value="true" {% if form.is_active %}checked{% endif %}>
<label class="form-check-label" for="is_active">Active (accepting submissions)</label>
</div>
</div>
</div>
<div class="mb-3">
<label for="description" class="form-label">Description</label>
<textarea class="form-control" id="description" name="description" rows="2">{{ form.description or '' }}</textarea>
</div>
<hr class="my-4">
<div class="d-flex justify-content-between align-items-center mb-3">
<h5 class="mb-0">Form Builder</h5>
<div>
<button type="button" class="btn btn-sm btn-outline-secondary me-2" id="toggle-json-view">
<i class="bi bi-code-slash"></i> Toggle JSON View
</button>
<button type="button" class="btn btn-sm btn-success" id="add-field-btn">
<i class="bi bi-plus"></i> Add Field
</button>
</div>
</div>
<!-- Visual Builder Area -->
<div id="visual-builder" class="mb-4 bg-light p-3 rounded border">
<div id="fields-container">
<!-- Fields will be dynamically injected here by JS -->
</div>
<!-- Submit Button Config -->
<div class="card mt-4 border-success">
<div class="card-header bg-success text-white py-2">
<i class="bi bi-hand-index-thumb me-1"></i> Submit Button Configuration
</div>
<div class="card-body row">
<div class="col-md-6 mb-2">
<label class="form-label small">Button Text</label>
<input type="text" class="form-control form-control-sm" id="submit-btn-text" value="{{ form.form_structure.submit_button.text if form.form_structure.submit_button else 'Submit' }}">
</div>
<div class="col-md-6 mb-2">
<label class="form-label small">Custom CSS Classes</label>
<input type="text" class="form-control form-control-sm" id="submit-btn-css" value="{{ form.form_structure.submit_button.css_classes if form.form_structure.submit_button and form.form_structure.submit_button.css_classes else '' }}" placeholder="e.g. btn btn-primary">
</div>
</div>
</div>
<!-- Notifications & Email Settings -->
<div class="card mt-4 border-info">
<div class="card-header bg-info text-dark py-2">
<i class="bi bi-envelope-paper me-1"></i> Notifications & Autoresponder
</div>
<div class="card-body">
<input type="hidden" name="settings" id="hidden_settings">
<div class="row mb-4">
<div class="col-12 border-bottom pb-3">
<h6><i class="bi bi-bell text-primary me-2"></i>Admin Notification</h6>
<p class="small text-muted mb-2">Send an email alert to specific addresses when a new submission arrives.</p>
<div class="form-check form-switch mb-2">
<input class="form-check-input" type="checkbox" id="notify_enabled" {% if form.settings and form.settings.notifications and form.settings.notifications.enabled %}checked{% endif %}>
<label class="form-check-label small fw-bold" for="notify_enabled">Enable Admin Notification</label>
</div>
<div id="notify_options" style="display:{% if form.settings and form.settings.notifications and form.settings.notifications.enabled %}block{% else %}none{% endif %};" class="ps-4 mt-2 border-start border-2 border-primary">
<label class="form-label small">Recipient Email(s)</label>
<input type="text" class="form-control form-control-sm mb-1" id="notify_emails" placeholder="admin@domain.com, sales@domain.com" value="{{ form.settings.notifications.send_to|join(', ') if form.settings and form.settings.notifications and form.settings.notifications.send_to else '' }}">
<small class="text-muted d-block" style="font-size: 0.75rem;">Comma separated list of email addresses.</small>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<h6><i class="bi bi-reply-all text-success me-2"></i>Submitter Autoresponder</h6>
<p class="small text-muted mb-2">Send an automated "Thank You" email to the person who submitted the form.</p>
<div class="form-check form-switch mb-2">
<input class="form-check-input" type="checkbox" id="autorespond_enabled" {% if form.settings and form.settings.autoresponder and form.settings.autoresponder.enabled %}checked{% endif %}>
<label class="form-check-label small fw-bold" for="autorespond_enabled">Enable Autoresponder</label>
</div>
<div id="autorespond_options" style="display:{% if form.settings and form.settings.autoresponder and form.settings.autoresponder.enabled %}block{% else %}none{% endif %};" class="ps-4 mt-2 border-start border-2 border-success">
<div class="mb-2">
<label class="form-label small">Target Email Field</label>
<select class="form-select form-select-sm" id="autorespond_target_field" data-selected="{{ form.settings.autoresponder.email_field_name if form.settings and form.settings.autoresponder else '' }}">
<option value="">-- Select an email field from your form --</option>
</select>
<small class="text-muted d-block mt-1" style="font-size: 0.75rem;">Select which form field contains the submitter's email address.</small>
</div>
<div class="mb-2">
<label class="form-label small">Email Subject</label>
<input type="text" class="form-control form-control-sm" id="autorespond_subject" value="{{ form.settings.autoresponder.subject if form.settings and form.settings.autoresponder and form.settings.autoresponder.subject else 'Thank you for your submission!' }}">
</div>
<div class="mb-2">
<label class="form-label small">Email Body Template</label>
<textarea class="form-control form-control-sm" id="autorespond_body" rows="4">{{ form.settings.autoresponder.body_template if form.settings and form.settings.autoresponder and form.settings.autoresponder.body_template else 'Hello,\n\nThank you for contacting us. We have received your submission and will get back to you shortly.\n\nBest regards,\nThe Team' }}</textarea>
<small class="text-muted d-block mt-1" style="font-size: 0.75rem;">You can use field variables like <code>{{'{{'}} field_name {{'}}'}}</code> in the body.</small>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- JSON Editor Area -->
<div id="json-editor-container" class="mb-4" style="display:none;">
<div class="alert alert-warning py-2 small">
<i class="bi bi-exclamation-triangle"></i> Editing JSON directly will override the visual builder.
</div>
<textarea class="form-control font-monospace" id="json_textarea" rows="15">{{ form.form_structure | tojson(indent=4) }}</textarea>
<div class="form-text text-danger" id="json-error" style="display:none;">Invalid JSON format.</div>
</div>
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
<button type="submit" class="btn btn-primary" id="save-btn"><i class="bi bi-save"></i> Update Configuration</button>
</div>
</form>
</div>
</div>
</div>
<div class="col-lg-4 mb-4">
<!-- Embed Snippet Card -->
<div class="card shadow-sm mb-4">
<div class="card-header bg-light">
<h5 class="card-title mb-0">Embed Snippet</h5>
</div>
<div class="card-body">
<p class="small text-muted mb-2">Copy this HTML code to embed the form on the tenant's website:</p>
<div class="position-relative">
<pre class="bg-dark text-light p-3 rounded small" style="white-space: pre-wrap;" id="embed-code">
&lt;!-- Formeleon Embed --&gt;
&lt;script src="{{ request.url_root }}static/js/embed.js"
data-form-id="{{ form.id }}"
data-public-key="{{ tenant.public_key }}"&gt;&lt;/script&gt;
&lt;div id="formeleon-form"&gt;&lt;/div&gt;</pre>
<button class="btn btn-sm btn-outline-light position-absolute top-0 end-0 m-2" onclick="navigator.clipboard.writeText(document.getElementById('embed-code').innerText); alert('Copied!');">
<i class="bi bi-clipboard"></i>
</button>
</div>
</div>
</div>
<!-- Recent Submissions Card -->
<div class="card shadow-sm">
<div class="card-header bg-light d-flex justify-content-between align-items-center">
<h5 class="card-title mb-0">Recent Submissions</h5>
<a href="{{ url_for('admin.list_submissions') }}" class="btn btn-sm btn-outline-secondary">View All</a>
</div>
<ul class="list-group list-group-flush">
{% for sub in submissions %}
<a href="{{ url_for('admin.view_submission', submission_id=sub.id) }}" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between align-items-center">
<small>{{ sub.created_at.strftime('%Y-%m-%d %H:%M') }}</small>
{% if sub.status.value == 'pending' %}
<span class="badge bg-warning text-dark">Pending</span>
{% elif sub.status.value == 'processed' %}
<span class="badge bg-success">Processed</span>
{% else %}
<span class="badge bg-secondary">{{ sub.status.value }}</span>
{% endif %}
</div>
</a>
{% else %}
<li class="list-group-item text-center text-muted py-4">No submissions yet.</li>
{% endfor %}
</ul>
</div>
</div>
</div>
<!-- Template for a new field -->
<template id="field-template">
<div class="card field-card mb-3 shadow-sm">
<div class="card-body p-3">
<div class="d-flex justify-content-between align-items-center mb-3">
<h6 class="mb-0 text-primary"><i class="bi bi-grip-vertical drag-handle me-2"></i> Form Field</h6>
<button type="button" class="btn btn-sm btn-outline-danger remove-field-btn"><i class="bi bi-trash"></i></button>
</div>
<div class="row g-2">
<div class="col-md-4">
<label class="form-label small mb-1">Field Type</label>
<select class="form-select form-select-sm field-type">
<option value="text">Text Input</option>
<option value="email">Email</option>
<option value="textarea">Textarea (Multiline)</option>
<option value="select">Dropdown (Select)</option>
<option value="checkbox">Checkbox</option>
</select>
</div>
<div class="col-md-4">
<label class="form-label small mb-1">Field Name (ID) *</label>
<input type="text" class="form-control form-control-sm field-name" required placeholder="e.g. first_name">
</div>
<div class="col-md-4">
<label class="form-label small mb-1">Display Label</label>
<input type="text" class="form-control form-control-sm field-label" placeholder="e.g. First Name">
</div>
<div class="col-md-4 mt-2">
<label class="form-label small mb-1">Placeholder</label>
<input type="text" class="form-control form-control-sm field-placeholder" placeholder="Optional text inside field">
</div>
<div class="col-md-4 mt-2">
<label class="form-label small mb-1">Custom CSS Classes</label>
<input type="text" class="form-control form-control-sm field-css" placeholder="e.g. form-control my-custom-input">
</div>
<div class="col-md-4 mt-2 d-flex align-items-end">
<div class="form-check form-switch mb-1">
<input class="form-check-input field-required" type="checkbox">
<label class="form-check-label small">Required Field</label>
</div>
</div>
<div class="col-12 mt-2 options-container" style="display:none;">
<label class="form-label small mb-1">Options (Comma separated)</label>
<input type="text" class="form-control form-control-sm field-options" placeholder="Option 1, Option 2, Option 3">
</div>
</div>
</div>
</div>
</template>
{% endblock %}
{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
// Core Elements
const fieldsContainer = document.getElementById('fields-container');
const addFieldBtn = document.getElementById('add-field-btn');
const toggleJsonBtn = document.getElementById('toggle-json-view');
const visualBuilder = document.getElementById('visual-builder');
const jsonEditor = document.getElementById('json-editor-container');
const jsonTextarea = document.getElementById('json_textarea');
const hiddenFormStructure = document.getElementById('hidden_form_structure');
const formEl = document.getElementById('edit-form-form');
// Initialize Drag & Drop Sortable
if (typeof Sortable !== 'undefined') {
new Sortable(fieldsContainer, {
handle: '.drag-handle',
animation: 150,
ghostClass: 'bg-light',
dragClass: 'shadow-lg'
});
}
let isJsonView = false;
let fieldCounter = 0;
// Load existing form structure into visual builder
try {
const existingStructure = JSON.parse(jsonTextarea.value);
if (existingStructure && existingStructure.fields && Array.isArray(existingStructure.fields)) {
existingStructure.fields.forEach(field => {
const options = field.options ? field.options.join(', ') : '';
addField(field.type, field.name, field.label, field.placeholder, field.css_classes, field.required, options);
});
}
} catch (e) {
console.error("Could not parse initial form structure for visual builder:", e);
// Fallback to JSON view if it's too broken
isJsonView = true;
visualBuilder.style.display = 'none';
jsonEditor.style.display = 'block';
toggleJsonBtn.innerHTML = '<i class="bi bi-palette"></i> Back to Builder';
addFieldBtn.style.display = 'none';
}
// Add Field Button
addFieldBtn.addEventListener('click', () => {
addField();
});
// Toggle JSON / Visual View
toggleJsonBtn.addEventListener('click', () => {
isJsonView = !isJsonView;
if (isJsonView) {
jsonTextarea.value = JSON.stringify(buildJsonFromVisual(), null, 4);
visualBuilder.style.display = 'none';
jsonEditor.style.display = 'block';
toggleJsonBtn.innerHTML = '<i class="bi bi-palette"></i> Back to Builder';
addFieldBtn.style.display = 'none';
} else {
// Here in edit mode, if a user switches BACK from JSON to visual,
// we should technically re-render the visual builder from the JSON they just edited!
try {
const updatedStruct = JSON.parse(jsonTextarea.value);
// Clear existing cards
fieldsContainer.innerHTML = '';
fieldCounter = 0;
// Rebuild from JSON
if (updatedStruct.fields) {
updatedStruct.fields.forEach(field => {
const options = field.options ? field.options.join(', ') : '';
addField(field.type, field.name, field.label, field.placeholder, field.css_classes, field.required, options);
});
}
if (updatedStruct.submit_button) {
document.getElementById('submit-btn-text').value = updatedStruct.submit_button.text || '';
document.getElementById('submit-btn-css').value = updatedStruct.submit_button.css_classes || '';
}
document.getElementById('json-error').style.display = 'none';
document.getElementById('save-btn').disabled = false;
visualBuilder.style.display = 'block';
jsonEditor.style.display = 'none';
toggleJsonBtn.innerHTML = '<i class="bi bi-code-slash"></i> Toggle JSON View';
addFieldBtn.style.display = 'inline-block';
} catch (err) {
document.getElementById('json-error').style.display = 'block';
alert("Cannot switch to visual builder: JSON is invalid.");
isJsonView = true; // revert state
}
}
});
// Toggle Settings UI
const notifyEnabled = document.getElementById('notify_enabled');
const notifyOptions = document.getElementById('notify_options');
notifyEnabled.addEventListener('change', (e) => { notifyOptions.style.display = e.target.checked ? 'block' : 'none'; });
const autorespondEnabled = document.getElementById('autorespond_enabled');
const autorespondOptions = document.getElementById('autorespond_options');
autorespondEnabled.addEventListener('change', (e) => {
autorespondOptions.style.display = e.target.checked ? 'block' : 'none';
if(e.target.checked) updateEmailFieldDropdown();
});
// Helper to extract email fields for the dropdown
function updateEmailFieldDropdown() {
const select = document.getElementById('autorespond_target_field');
const currentVal = select.value || select.getAttribute('data-selected');
select.innerHTML = '<option value="">-- Select an email field from your form --</option>';
const cards = fieldsContainer.querySelectorAll('.field-card');
cards.forEach(card => {
const type = card.querySelector('.field-type').value;
if(type === 'email' || type === 'text') {
const name = card.querySelector('.field-name').value;
const label = card.querySelector('.field-label').value || name;
if(name) {
const opt = document.createElement('option');
opt.value = name;
opt.text = `${label} (${name})`;
select.appendChild(opt);
}
}
});
if(currentVal) select.value = currentVal;
}
// Trigger initial dropdown population if needed
setTimeout(updateEmailFieldDropdown, 100);
// Handle Form Submit
formEl.addEventListener('submit', function(e) {
// Build settings JSON
const settingsJson = {
notifications: {
enabled: notifyEnabled.checked,
send_to: document.getElementById('notify_emails').value.split(',').map(s => s.trim()).filter(s => s)
},
autoresponder: {
enabled: autorespondEnabled.checked,
email_field_name: document.getElementById('autorespond_target_field').value,
subject: document.getElementById('autorespond_subject').value,
body_template: document.getElementById('autorespond_body').value
}
};
document.getElementById('hidden_settings').value = JSON.stringify(settingsJson);
if (!isJsonView) {
hiddenFormStructure.value = JSON.stringify(buildJsonFromVisual());
} else {
try {
JSON.parse(jsonTextarea.value);
hiddenFormStructure.value = jsonTextarea.value;
} catch (err) {
e.preventDefault();
alert("Invalid JSON configuration. Please fix errors before saving.");
return false;
}
}
});
// Function to add a new visual field
function addField(type = 'text', name = '', label = '', placeholder = '', css_classes = '', required = false, options = '') {
fieldCounter++;
const template = document.getElementById('field-template');
const clone = template.content.cloneNode(true);
const card = clone.querySelector('.field-card');
card.querySelector('.field-type').value = type || 'text';
card.querySelector('.field-name').value = name || `field_${fieldCounter}`;
card.querySelector('.field-label').value = label || '';
card.querySelector('.field-placeholder').value = placeholder || '';
card.querySelector('.field-css').value = css_classes || '';
card.querySelector('.field-required').checked = required;
card.querySelector('.field-options').value = options || '';
setupCardEvents(card);
fieldsContainer.appendChild(clone);
}
function setupCardEvents(card) {
card.querySelector('.remove-field-btn').addEventListener('click', function() {
card.remove();
updateEmailFieldDropdown();
});
const typeSelect = card.querySelector('.field-type');
const optionsContainer = card.querySelector('.options-container');
typeSelect.addEventListener('change', function() {
const val = this.value;
if (val === 'select' || val === 'radio') {
optionsContainer.style.display = 'block';
} else {
optionsContainer.style.display = 'none';
}
updateEmailFieldDropdown();
});
card.querySelector('.field-name').addEventListener('change', updateEmailFieldDropdown);
typeSelect.dispatchEvent(new Event('change'));
}
function buildJsonFromVisual() {
const json = {
version: "1.0",
fields: [],
submit_button: {
text: document.getElementById('submit-btn-text').value || "Submit",
css_classes: document.getElementById('submit-btn-css').value || ""
}
};
const cards = fieldsContainer.querySelectorAll('.field-card');
cards.forEach(card => {
const type = card.querySelector('.field-type').value;
const fieldDef = {
name: card.querySelector('.field-name').value,
type: type,
label: card.querySelector('.field-label').value,
placeholder: card.querySelector('.field-placeholder').value,
required: card.querySelector('.field-required').checked,
css_classes: card.querySelector('.field-css').value
};
if (type === 'select' || type === 'radio') {
const optsString = card.querySelector('.field-options').value;
if (optsString) {
fieldDef.options = optsString.split(',').map(s => s.trim()).filter(s => s);
}
}
json.fields.push(fieldDef);
});
return json;
}
// Live JSON Validation (only active when in JSON mode)
jsonTextarea.addEventListener('input', function() {
if (!isJsonView) return;
try {
JSON.parse(this.value);
document.getElementById('json-error').style.display = 'none';
document.getElementById('save-btn').disabled = false;
} catch (e) {
document.getElementById('json-error').style.display = 'block';
document.getElementById('save-btn').disabled = true;
}
});
});
</script>
{% endblock %}
templates/admin/profile.html
+110
View File
@@ -0,0 +1,110 @@
{% extends "base.html" %}
{% block title %}My Profile - Formeleon{% endblock %}
{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
<h2><i class="bi bi-person-badge me-2"></i> My Profile</h2>
</div>
<div class="row">
<!-- User Information -->
<div class="col-lg-5 mb-4">
<div class="card shadow-sm h-100 border-top border-primary border-4">
<div class="card-header bg-light bg-gradient">
<h5 class="card-title mb-0"><i class="bi bi-person-circle me-2"></i> Account Details</h5>
</div>
<div class="card-body">
<div class="text-center mb-4 mt-2">
<div class="rounded-circle bg-primary text-white d-inline-flex align-items-center justify-content-center mx-auto shadow-sm" style="width: 80px; height: 80px; font-size: 2rem;">
{{ user.name[0]|upper if user.name else '?' }}
</div>
<h4 class="mt-3 mb-1">{{ user.name }}</h4>
<p class="text-muted mb-0">{{ user.email }}</p>
</div>
<ul class="list-group list-group-flush mb-4">
<li class="list-group-item d-flex justify-content-between align-items-center px-0">
<span class="text-muted">Account Role</span>
{% if user.role.value == 'admin' %}
<span class="badge bg-danger">Global Admin</span>
{% elif user.role.value == 'tenant_admin' %}
<span class="badge bg-primary">Tenant Admin</span>
{% elif user.role.value == 'user' %}
<span class="badge bg-info text-dark">User</span>
{% else %}
<span class="badge bg-secondary">{{ user.role.value|title }}</span>
{% endif %}
</li>
<li class="list-group-item d-flex justify-content-between align-items-center px-0">
<span class="text-muted">Member Since</span>
<span>{{ user.created_at.strftime('%Y-%m-%d') if user.created_at else 'Unknown' }}</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center px-0">
<span class="text-muted">Last Login</span>
<span>{{ user.last_login.strftime('%Y-%m-%d %H:%M') if user.last_login else 'Unknown' }}</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center px-0">
<span class="text-muted">Authentication</span>
{% if dev_mode %}
<span class="badge bg-warning text-dark"><i class="bi bi-bug"></i> Dev Mode Bypass</span>
{% else %}
<span class="badge bg-success"><i class="bi bi-shield-check"></i> OIDC (Zitadel)</span>
{% endif %}
</li>
</ul>
{% if not dev_mode %}
<div class="alert alert-info py-2 small mb-0">
<i class="bi bi-info-circle me-1"></i>
To change your name, email, or password, please visit the <a href="{{ config.get('ZITADEL_ISSUER') }}/ui/console/users/me" target="_blank" class="alert-link">Zitadel Identity Console <i class="bi bi-box-arrow-up-right"></i></a>.
</div>
{% endif %}
</div>
</div>
</div>
<!-- Assigned Tenants -->
<div class="col-lg-7 mb-4">
<div class="card shadow-sm h-100">
<div class="card-header bg-light bg-gradient d-flex justify-content-between align-items-center">
<h5 class="card-title mb-0"><i class="bi bi-buildings me-2"></i> My Workspaces (Tenants)</h5>
<span class="badge bg-secondary rounded-pill">{{ user.tenants|length if not user.is_admin() else 'All' }}</span>
</div>
<div class="card-body p-0">
{% if user.is_admin() %}
<div class="p-4 text-center">
<div class="text-danger mb-3">
<i class="bi bi-shield-lock-fill" style="font-size: 3rem;"></i>
</div>
<h5>Global Admin Access</h5>
<p class="text-muted">As a global administrator, you automatically have access to view and manage <strong>all</strong> tenants in the system.</p>
<a href="{{ url_for('admin.list_tenants') }}" class="btn btn-outline-primary">Manage All Tenants</a>
</div>
{% else %}
{% if user.tenants %}
<div class="list-group list-group-flush">
{% for t in user.tenants %}
<a href="{{ url_for('admin.view_tenant', tenant_id=t.id) }}" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center p-3">
<div>
<h6 class="mb-1">{{ t.name }}</h6>
<small class="text-muted font-monospace">{{ t.id }}</small>
</div>
<span class="badge bg-{{ 'success' if t.is_active() else 'secondary' }}">
{{ 'Active' if t.is_active() else 'Inactive' }}
</span>
</a>
{% endfor %}
</div>
{% else %}
<div class="p-5 text-center text-muted">
<i class="bi bi-building-x fs-1 d-block mb-3"></i>
<p>You are not currently assigned to any workspaces.</p>
<p class="small">Please contact your administrator to request access.</p>
</div>
{% endif %}
{% endif %}
</div>
</div>
</div>
</div>
{% endblock %}
templates/admin/settings.html
+131
View File
@@ -0,0 +1,131 @@
{% extends "base.html" %}
{% block title %}Settings - Admin Dashboard{% endblock %}
{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
<h2><i class="bi bi-gear me-2"></i> Application Settings</h2>
</div>
<div class="row">
<!-- System Overview -->
<div class="col-lg-6 mb-4">
<div class="card shadow-sm h-100">
<div class="card-header bg-light">
<h5 class="card-title mb-0"><i class="bi bi-info-circle me-2"></i> System Overview</h5>
</div>
<div class="card-body">
<ul class="list-group list-group-flush">
<li class="list-group-item d-flex justify-content-between align-items-center">
Total Tenants
<span class="badge bg-primary rounded-pill">{{ tenant_count }}</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Total Users
<span class="badge bg-primary rounded-pill">{{ user_count }}</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Total Forms
<span class="badge bg-primary rounded-pill">{{ form_count }}</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Total Submissions
<span class="badge bg-primary rounded-pill">{{ submission_count }}</span>
</li>
</ul>
<h6 class="mt-4 mb-3 text-muted">Environment</h6>
<table class="table table-sm table-borderless">
<tbody>
<tr>
<td class="text-muted" style="width: 150px;">Dev Mode</td>
<td>
{% if dev_mode %}
<span class="badge bg-warning text-dark"><i class="bi bi-bug"></i> Active</span>
{% else %}
<span class="badge bg-success">Inactive (Production)</span>
{% endif %}
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Security & API -->
<div class="col-lg-6 mb-4">
<div class="card shadow-sm h-100">
<div class="card-header bg-light">
<h5 class="card-title mb-0"><i class="bi bi-shield-lock me-2"></i> Security & API</h5>
</div>
<div class="card-body">
<p class="text-muted small">Most security settings are configured via environment variables (<code>.env</code> file) and require a server restart to take effect.</p>
<h6 class="mt-3">reCAPTCHA v3 Integration</h6>
<div class="alert {{ 'alert-success' if config.get('RECAPTCHA_SITE_KEY') or dev_mode else 'alert-warning' }} py-2">
<i class="bi {{ 'bi-check-circle' if config.get('RECAPTCHA_SITE_KEY') or dev_mode else 'bi-exclamation-triangle' }} me-2"></i>
{% if dev_mode %}
Mock Mode Active (Dev Mode)
{% elif config.get('RECAPTCHA_SITE_KEY') %}
Configured and Active
{% else %}
Not Configured (Missing Keys)
{% endif %}
</div>
<h6 class="mt-4">OIDC Authentication (Zitadel)</h6>
<div class="alert {{ 'alert-warning' if dev_mode else 'alert-success' }} py-2">
<i class="bi {{ 'bi-exclamation-triangle' if dev_mode else 'bi-check-circle' }} me-2"></i>
{% if dev_mode %}
Bypassed (Dev Mode Active)
{% else %}
Active
{% endif %}
</div>
</div>
</div>
</div>
<!-- Audit Log -->
<div class="col-12 mb-4">
<div class="card shadow-sm">
<div class="card-header bg-light">
<h5 class="card-title mb-0"><i class="bi bi-journal-text me-2"></i> Recent Audit Logs</h5>
</div>
<div class="card-body p-0">
<div class="table-responsive" style="max-height: 400px;">
<table class="table table-hover table-sm mb-0">
<thead class="table-light sticky-top">
<tr>
<th>Timestamp</th>
<th>Action</th>
<th>Resource</th>
<th>Details</th>
<th>Status</th>
</tr>
</thead>
<tbody>
{% for log in audit_logs %}
<tr>
<td><small>{{ log.created_at.strftime('%Y-%m-%d %H:%M:%S') }}</small></td>
<td><span class="badge bg-secondary">{{ log.action }}</span></td>
<td>{{ log.resource_type }} <code>{{ log.resource_id|truncate(8, true, '') if log.resource_id else '' }}</code></td>
<td><small class="text-muted">{{ log.details|tojson if log.details else '' }}</small></td>
<td>
{% if log.status == 'success' %}
<i class="bi bi-check-circle text-success"></i>
{% else %}
<i class="bi bi-x-circle text-danger"></i>
{% endif %}
</td>
</tr>
{% else %}
<tr><td colspan="5" class="text-center text-muted py-3">No audit logs found.</td></tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
templates/admin/submissions/list.html
+145
View File
@@ -0,0 +1,145 @@
{% extends "base.html" %}
{% block title %}Submissions - Admin Dashboard{% endblock %}
{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
<h2>
<i class="bi bi-inbox me-2"></i>
Form Submissions
{% if show_archived %} <span class="badge bg-secondary fs-6 align-middle ms-2">Archive View</span> {% endif %}
</h2>
<div>
<div class="btn-group me-2">
<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-download"></i> Export
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="{{ url_for('admin.export_submissions', format='csv') }}"><i class="bi bi-filetype-csv me-2 text-success"></i> Download CSV</a></li>
<li><a class="dropdown-item" href="{{ url_for('admin.export_submissions', format='json') }}"><i class="bi bi-filetype-json me-2 text-warning"></i> Download JSON</a></li>
</ul>
</div>
{% if show_archived %}
<a href="{{ url_for('admin.list_submissions') }}" class="btn btn-outline-primary"><i class="bi bi-inbox"></i> Active View</a>
{% else %}
<a href="{{ url_for('admin.list_submissions', show_archived='true') }}" class="btn btn-outline-secondary"><i class="bi bi-archive"></i> View Archive</a>
{% endif %}
</div>
</div>
<div class="card shadow-sm">
<div class="card-body">
{% if submissions %}
<form action="{{ url_for('admin.bulk_action_submissions') }}" method="POST" id="bulk-form">
<input type="hidden" name="csrf_token" value="{{ csrf_token() if csrf_token else '' }}">
<!-- Bulk Actions Toolbar -->
<div class="bg-light p-2 mb-3 rounded d-flex align-items-center" id="bulk-toolbar" style="display: none !important;">
<span class="me-3 fw-bold"><span id="selected-count">0</span> selected</span>
{% if show_archived %}
<button type="submit" name="action" value="unarchive" class="btn btn-sm btn-success"><i class="bi bi-box-arrow-up"></i> Restore (Unarchive)</button>
{% else %}
<button type="submit" name="action" value="archive" class="btn btn-sm btn-warning"><i class="bi bi-archive"></i> Move to Archive</button>
{% endif %}
</div>
<div class="table-responsive">
<table class="table table-hover align-middle">
<thead class="table-light">
<tr>
<th style="width: 40px;">
<input class="form-check-input" type="checkbox" id="select-all">
</th>
<th>Date</th>
<th>Form</th>
<th>Tenant</th>
<th>Status</th>
<th>reCAPTCHA</th>
<th class="text-end">Actions</th>
</tr>
</thead>
<tbody>
{% for sub in submissions %}
<tr class="{% if sub.status.value == 'archived' %}opacity-75{% endif %}">
<td>
<input class="form-check-input sub-checkbox" type="checkbox" name="submission_ids" value="{{ sub.id }}">
</td>
<td><small>{{ sub.created_at.strftime('%Y-%m-%d %H:%M') }}</small></td>
<td>{{ sub.form_config.name }}</td>
<td><small class="text-muted">{{ sub.tenant.name }}</small></td>
<td>
{% if sub.status.value == 'pending' %}
<span class="badge bg-warning text-dark">Pending</span>
{% elif sub.status.value == 'processed' %}
<span class="badge bg-success">Processed</span>
{% elif sub.status.value == 'spam' %}
<span class="badge bg-danger">Spam</span>
{% elif sub.status.value == 'archived' %}
<span class="badge bg-secondary"><i class="bi bi-archive"></i> Archived</span>
{% else %}
<span class="badge bg-secondary">{{ sub.status.value }}</span>
{% endif %}
</td>
<td>
{% if sub.recaptcha_score is not none %}
<span class="badge {{ 'bg-success' if sub.recaptcha_passed else 'bg-danger' }}">
Score: {{ "%.2f"|format(sub.recaptcha_score) }}
</span>
{% else %}
<span class="text-muted small">N/A</span>
{% endif %}
</td>
<td class="text-end">
<a href="{{ url_for('admin.view_submission', submission_id=sub.id) }}" class="btn btn-sm btn-outline-primary">
<i class="bi bi-eye"></i> View
</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</form>
{% else %}
<div class="text-center py-5 text-muted">
<i class="bi {% if show_archived %}bi-archive{% else %}bi-inbox{% endif %} fs-1 d-block mb-3"></i>
<p>No {% if show_archived %}archived {% endif %}submissions found.</p>
</div>
{% endif %}
</div>
</div>
{% endblock %}
{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
const selectAll = document.getElementById('select-all');
const checkboxes = document.querySelectorAll('.sub-checkbox');
const bulkToolbar = document.getElementById('bulk-toolbar');
const countDisplay = document.getElementById('selected-count');
function updateToolbar() {
if(!bulkToolbar) return;
const checkedCount = document.querySelectorAll('.sub-checkbox:checked').length;
countDisplay.textContent = checkedCount;
if (checkedCount > 0) {
bulkToolbar.style.setProperty('display', 'flex', 'important');
} else {
bulkToolbar.style.setProperty('display', 'none', 'important');
}
}
if(selectAll) {
selectAll.addEventListener('change', function() {
checkboxes.forEach(cb => cb.checked = selectAll.checked);
updateToolbar();
});
}
checkboxes.forEach(cb => {
cb.addEventListener('change', updateToolbar);
});
});
</script>
{% endblock %}
templates/admin/submissions/view.html
+102
View File
@@ -0,0 +1,102 @@
{% extends "base.html" %}
{% block title %}Submission Details - Admin Dashboard{% endblock %}
{% block content %}
<div class="mb-4">
<a href="{{ url_for('admin.list_submissions') }}" class="btn btn-outline-secondary btn-sm mb-3">
<i class="bi bi-arrow-left"></i> Back to Submissions
</a>
<div class="d-flex justify-content-between align-items-center">
<h2><i class="bi bi-file-text me-2"></i> Submission Details</h2>
<div>
<form action="{{ url_for('admin.update_submission_status', submission_id=submission.id) }}" method="POST" class="d-inline-flex align-items-center">
<input type="hidden" name="csrf_token" value="{{ csrf_token() if csrf_token else '' }}">
<select name="status" class="form-select form-select-sm me-2" style="width: auto;" onchange="this.form.submit()">
<option value="pending" {% if submission.status.value == 'pending' %}selected{% endif %}>Pending</option>
<option value="processed" {% if submission.status.value == 'processed' %}selected{% endif %}>Processed</option>
<option value="spam" {% if submission.status.value == 'spam' %}selected{% endif %}>Spam</option>
<option value="failed" {% if submission.status.value == 'failed' %}selected{% endif %}>Failed</option>
</select>
<noscript><button type="submit" class="btn btn-sm btn-primary">Update</button></noscript>
</form>
</div>
</div>
</div>
<div class="row">
<!-- Meta Info Sidebar -->
<div class="col-md-4 mb-4">
<div class="card shadow-sm h-100">
<div class="card-header bg-light">
<h5 class="card-title mb-0">Metadata</h5>
</div>
<div class="card-body">
<ul class="list-group list-group-flush">
<li class="list-group-item px-0">
<small class="text-muted d-block">ID</small>
<code>{{ submission.id }}</code>
</li>
<li class="list-group-item px-0">
<small class="text-muted d-block">Date Received</small>
{{ submission.created_at.strftime('%Y-%m-%d %H:%M:%S UTC') }}
</li>
<li class="list-group-item px-0">
<small class="text-muted d-block">Form Source</small>
<a href="{{ url_for('admin.view_form', form_id=form.id) }}">{{ form.name }}</a>
</li>
<li class="list-group-item px-0">
<small class="text-muted d-block">Tenant</small>
<a href="{{ url_for('admin.view_tenant', tenant_id=tenant.id) }}">{{ tenant.name }}</a>
</li>
<li class="list-group-item px-0">
<small class="text-muted d-block">reCAPTCHA Score</small>
{% if submission.recaptcha_score is not none %}
<span class="badge {{ 'bg-success' if submission.recaptcha_passed else 'bg-danger' }}">
{{ "%.2f"|format(submission.recaptcha_score) }}
</span>
{% else %}
<span class="text-muted">Not validated</span>
{% endif %}
</li>
<li class="list-group-item px-0">
<small class="text-muted d-block">Referer</small>
<span class="text-truncate d-block" title="{{ submission.referer }}">{{ submission.referer or 'Unknown' }}</span>
</li>
<li class="list-group-item px-0">
<small class="text-muted d-block">IP Hash (Anonymized)</small>
<code class="text-truncate d-block">{{ submission.ip_hash or 'Not tracked' }}</code>
</li>
</ul>
</div>
</div>
</div>
<!-- Payload Content -->
<div class="col-md-8 mb-4">
<div class="card shadow-sm h-100">
<div class="card-header bg-light d-flex justify-content-between align-items-center">
<h5 class="card-title mb-0">Submitted Data</h5>
</div>
<div class="card-body p-0">
<table class="table table-striped table-hover mb-0">
<tbody>
{% for key, value in submission.payload.items() %}
<tr>
<th style="width: 30%;" class="ps-4">{{ key }}</th>
<td class="pe-4">
{% if value is string and '\n' in value %}
<pre class="mb-0 bg-light p-2 rounded" style="white-space: pre-wrap; font-family: inherit; font-size: inherit;">{{ value }}</pre>
{% elif value is mapping or value is iterable and value is not string %}
<code>{{ value|tojson }}</code>
{% else %}
{{ value }}
{% endif %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</div>
{% endblock %}
templates/admin/users/list.html
+77 -101
View File
@@ -1,109 +1,85 @@
# ==============================================================================
# Formeleon - Multi-tenant Form Generator
# Author: Björn Runden <br@runden.net>
# Template: admin/users/list.html
# Description: List all users with filtering and role management.
# ============================================================================== #}
{% extends "base.html" %}
{% block title %}Users - Formeleon{% endblock %}
{% block content %}
<div class="container">
<div class="row mb-4">
<div class="col-12 d-flex justify-content-between align-items-center">
<h1><i class="bi bi-people"></i> Users</h1>
</div>
</div>
{% if users %}
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header bg-light d-flex justify-content-between align-items-center">
<h5><i class="bi bi-list"></i> All Users ({{ users|length }})</h5>
<div class="input-group" style="width: 300px;">
<input type="text" class="form-control" id="searchInput" placeholder="Search users...">
<button class="btn btn-outline-secondary" type="button">
<i class="bi bi-search"></i>
</button>
</div>
</div>
<div class="card-body p-0">
<div class="table-responsive">
<table class="table table-hover mb-0">
<thead class="table-light">
<tr>
<th>Name</th>
<th>Email</th>
<th>Role</th>
<th>Tenants</th>
<th>Last Login</th>
<th>Created</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{% for u in users %}
<tr>
<td>{{ u.name }}</td>
<td>{{ u.email }}</td>
<td>
<span class="badge bg-{{ 'primary' if u.role.value == 'admin' else 'success' if u.role.value == 'tenant_admin' else 'info' if u.role.value == 'user' else 'secondary' }}">
{{ u.role.value }}
</span>
</td>
<td>{{ u.tenants|length }}</td>
<td>{{ u.last_login.strftime('%Y-%m-%d %H:%M') if u.last_login else 'Never' }}</td>
<td>{{ u.created_at.strftime('%Y-%m-%d') if u.created_at else 'N/A' }}</td>
<td>
<div class="btn-group btn-group-sm" role="group">
<a href="{{ url_for('admin.view_user', user_id=u.id) }}" class="btn btn-outline-secondary" title="View">
<i class="bi bi-eye"></i>
</a>
<a href="{{ url_for('admin.manage_user_tenants', user_id=u.id) }}" class="btn btn-outline-info" title="Manage Tenants">
<i class="bi bi-buildings"></i>
</a>
<form action="{{ url_for('admin.delete_user', user_id=u.id) }}" method="POST"
onsubmit="return confirm('Are you sure you want to delete user {{ u.email }}? This action cannot be undone.');">
<button type="submit" class="btn btn-outline-danger" title="Delete">
<i class="bi bi-trash"></i>
</button>
</form>
</div>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
{% else %}
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body text-center py-5">
<i class="bi bi-people display-4 text-muted mb-3"></i>
<h3>No Users</h3>
<p class="text-muted">No users have been registered yet.</p>
<p class="text-muted">Users are created through OIDC authentication (Zitadel) or in development mode.</p>
</div>
</div>
</div>
</div>
{% endif %}
<div class="d-flex justify-content-between align-items-center mb-4">
<h2><i class="bi bi-people me-2"></i> Users</h2>
</div>
{% if dev_mode %}
<div class="container mt-4">
<div class="alert alert-info">
<i class="bi bi-info-circle"></i> <strong>Development Mode:</strong>
User management is available. In production, users are managed through your OIDC provider.
<div class="card shadow-sm">
<div class="card-header bg-light d-flex justify-content-between align-items-center">
<h5 class="mb-0">All Users</h5>
<div class="input-group" style="width: 300px;">
<input type="text" class="form-control form-control-sm" id="searchInput" placeholder="Search users...">
</div>
</div>
<div class="card-body p-0">
{% if users %}
<div class="table-responsive">
<table class="table table-hover align-middle mb-0">
<thead class="table-light">
<tr>
<th class="ps-3">Name</th>
<th>Email</th>
<th>Role</th>
<th>Tenants</th>
<th>Last Login</th>
<th class="text-end pe-3">Actions</th>
</tr>
</thead>
<tbody>
{% for u in users %}
<tr>
<td class="ps-3"><strong>{{ u.name }}</strong></td>
<td>{{ u.email }}</td>
<td>
{% if u.role.value == 'admin' %}
<span class="badge bg-danger">Admin</span>
{% elif u.role.value == 'tenant_admin' %}
<span class="badge bg-primary">Tenant Admin</span>
{% elif u.role.value == 'user' %}
<span class="badge bg-info text-dark">User</span>
{% else %}
<span class="badge bg-secondary">{{ u.role.value }}</span>
{% endif %}
</td>
<td>
<span class="badge bg-secondary rounded-pill">{{ u.tenants|length }}</span>
</td>
<td><small class="text-muted">{{ u.last_login.strftime('%Y-%m-%d %H:%M') if u.last_login else 'Never' }}</small></td>
<td class="text-end pe-3">
<div class="btn-group btn-group-sm">
<a href="{{ url_for('admin.view_user', user_id=u.id) }}" class="btn btn-outline-secondary" title="View"><i class="bi bi-eye"></i></a>
<a href="{{ url_for('admin.manage_user_tenants', user_id=u.id) }}" class="btn btn-outline-primary" title="Manage Tenants"><i class="bi bi-buildings"></i></a>
<form action="{{ url_for('admin.delete_user', user_id=u.id) }}" method="POST" class="d-inline" onsubmit="return confirm('Delete user {{ u.email }}?');">
<input type="hidden" name="csrf_token" value="{{ csrf_token() if csrf_token else '' }}">
<button type="submit" class="btn btn-outline-danger" title="Delete"><i class="bi bi-trash"></i></button>
</form>
</div>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% else %}
<div class="text-center py-5 text-muted">
<i class="bi bi-people fs-1 d-block mb-3"></i>
<p>No users found.</p>
</div>
{% endif %}
</div>
</div>
{% endif %}
{% endblock %}
{% block extra_js %}
<script>
$(document).ready(function() {
$('#searchInput').on('input', function() {
const term = $(this).val().toLowerCase();
$('tbody tr').each(function() {
const text = $(this).text().toLowerCase();
$(this).toggle(text.includes(term));
});
});
});
</script>
{% endblock %}
templates/admin/users/tenants.html
+1 -1
View File
@@ -1,4 +1,4 @@
# ==============================================================================
{# ==============================================================================
# Formeleon - Multi-tenant Form Generator
# Author: Björn Runden <br@runden.net>
# Template: admin/users/tenants.html