br
5fff17531d
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.
436 lines
22 KiB
HTML
436 lines
22 KiB
HTML
{% 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 %}
|