i18 drin
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
1 parent
7f81932fa5
commit
5fff17531d
31 files changed
+2683
-550
No files matched your search
@@ -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">
|
||||
<!-- Formeleon Embed -->
|
||||
<script src="{{ request.url_root }}static/js/embed.js"
|
||||
data-form-id="{{ form.id }}"
|
||||
data-public-key="{{ tenant.public_key }}"></script>
|
||||
<div id="formeleon-form"></div></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 %}
|
||||
Reference in new issue
Block a user