92 lines
6.3 KiB
HTML
92 lines
6.3 KiB
HTML
{% extends 'base.html' %}
|
|
{% block title %}{{ mb.name or 'Nieuwe mailbox' }}{% endblock %}
|
|
{% macro field(key, label, type='text', placeholder='', full=false) %}
|
|
<div class="{{ 'col-12' if full else 'col-md-6 col-xl-4' }}"><label class="form-label" for="{{ key }}">{{ label }}</label><input class="form-control" id="{{ key }}" type="{{ type }}" name="{{ key }}" value="{{ mb[key] or '' if mb[key] is defined else '' }}" placeholder="{{ placeholder }}"></div>
|
|
{% endmacro %}
|
|
{% macro security(key) %}
|
|
<div class="col-md-6 col-xl-4"><label class="form-label" for="{{ key }}">Beveiliging</label>
|
|
<select class="form-select" id="{{ key }}" name="{{ key }}">{% for v, label in SECURITY %}<option value="{{ v }}" {{ 'selected' if (mb[key] or '') == v }}>{{ label }}</option>{% endfor %}</select></div>
|
|
{% endmacro %}
|
|
{% macro secret(key, label, empty='') %}
|
|
<div class="col-md-6 col-xl-4"><label class="form-label" for="{{ key }}">{{ label }}</label><input class="form-control" id="{{ key }}" type="password" name="{{ key }}" placeholder="{{ '•••••••• (ingesteld)' if mb[key] else empty }}" autocomplete="new-password"></div>
|
|
{% endmacro %}
|
|
{% block content %}
|
|
<div class="head">
|
|
<div><a class="label" href="{{ url_for('settings', _anchor='mail') }}">← Instellingen</a><h1>{{ mb.name if mb.id else 'Nieuwe mailbox' }}</h1>
|
|
{% if mb.last_error %}<div class="flash error mt-2">Laatste fout bij ophalen: {{ mb.last_error }}</div>{% endif %}</div>
|
|
</div>
|
|
<form method="post">
|
|
<div class="card"><div class="card-body">
|
|
<h2>Algemeen</h2>
|
|
<div class="row g-3">
|
|
<div class="col-md-6 col-xl-4"><label class="form-label" for="name">Naam *</label><input class="form-control" id="name" name="name" value="{{ mb.name or '' }}" placeholder="Info" required></div>
|
|
<div class="col-md-6 col-xl-4"><label class="form-label" for="purpose">Rol</label>
|
|
<select class="form-select" id="purpose" name="purpose" aria-describedby="purpose-hint">{% for k, l in PURPOSES %}<option value="{{ k }}" {{ 'selected' if mb.purpose == k }}>{{ l }}</option>{% endfor %}</select>
|
|
<p class="hint" id="purpose-hint">Nieuwsbrieven kiezen standaard een nieuwsbriefmailbox.</p></div>
|
|
{{ field('smtp_from', 'Afzender', placeholder='Van Emous <info@vanemouswoningen.nl>') }}
|
|
<div class="col-12">
|
|
<div class="form-check"><input class="form-check-input" type="checkbox" id="active" name="active" value="1" {{ 'checked' if mb.active }}><label class="form-check-label" for="active">Actief (ophalen en versturen)</label></div>
|
|
<div class="form-check"><input class="form-check-input" type="checkbox" id="notify" name="notify" value="1" {{ 'checked' if mb.notify }}><label class="form-check-label" for="notify">Melding bij nieuwe e-mail voor wie toegang heeft</label></div>
|
|
</div>
|
|
</div>
|
|
<h3>Toegang</h3>
|
|
<p class="hint">Niemand aangevinkt = gedeeld met iedereen. Vink alleen jezelf aan voor een persoonlijke mailbox.</p>
|
|
<div class="d-flex flex-wrap gap-3">
|
|
{% for u in USERS %}<div class="form-check"><input class="form-check-input" type="checkbox" id="user-{{ u.id }}" name="users" value="{{ u.id }}" {{ 'checked' if u.id in access }}><label class="form-check-label" for="user-{{ u.id }}">{{ u.name }}</label></div>{% endfor %}
|
|
</div>
|
|
</div></div>
|
|
|
|
<div class="card"><div class="card-body">
|
|
<h2>Verbinding</h2>
|
|
<p class="hint" style="margin:-.4rem 0 1rem">Bij OVHcloud (Zimbra of MX Plan) is de gebruikersnaam het volledige e-mailadres en heeft elke mailbox een eigen wachtwoord.
|
|
Gmail werkt met een app-wachtwoord. Wachtwoorden staan in de database: houd de map <code>data/</code> privé.</p>
|
|
<div class="row g-3">
|
|
<div class="col-md-6 col-xl-4"><label class="form-label" for="mail-provider">Aanbieder</label>
|
|
<select class="form-select" id="mail-provider" aria-describedby="mail-provider-hint">
|
|
<option value="">Kies om de servers in te vullen…</option>
|
|
{% for key, p in PROVIDERS.items() %}<option value="{{ key }}" data-preset="{{ p|tojson|forceescape }}">{{ p.label }}</option>{% endfor %}
|
|
</select>
|
|
<p class="hint" id="mail-provider-hint">Vult server, poort en beveiliging in; daarna kun je alles nog aanpassen.</p>
|
|
</div>
|
|
</div>
|
|
<h3>Ontvangen (IMAP)</h3>
|
|
<div class="row g-3">
|
|
{{ field('imap_host', 'Server', placeholder='imap.mail.ovh.net') }}
|
|
{{ field('imap_port', 'Poort', 'number', '993') }}
|
|
{{ security('imap_security') }}
|
|
{{ field('imap_user', 'Gebruikersnaam', placeholder='info@vanemouswoningen.nl') }}
|
|
{{ secret('imap_pass', 'Wachtwoord') }}
|
|
{{ field('imap_folder', 'Map', placeholder='INBOX') }}
|
|
{{ field('imap_days', 'Aantal dagen terug ophalen', 'number', '30') }}
|
|
</div>
|
|
<h3>Versturen (SMTP)</h3>
|
|
<div class="row g-3">
|
|
{{ field('smtp_host', 'Server', placeholder='smtp.mail.ovh.net') }}
|
|
{{ field('smtp_port', 'Poort', 'number', '465') }}
|
|
{{ security('smtp_security') }}
|
|
{{ field('smtp_user', 'Gebruikersnaam', placeholder='leeg = zelfde als IMAP') }}
|
|
{{ secret('smtp_pass', 'Wachtwoord', 'leeg = zelfde als IMAP') }}
|
|
<div class="col-md-6 col-xl-4"><label class="form-label" for="smtp_sent_folder">Kopie in map</label><input class="form-control" id="smtp_sent_folder" name="smtp_sent_folder" value="{{ mb.smtp_sent_folder or '' }}" placeholder="leeg = geen kopie" aria-describedby="sent-hint"><p class="hint" id="sent-hint">Bij Zimbra/MX Plan <code>Sent</code>, zodat verstuurde mail ook in de webmail staat. Gmail doet dit zelf. Nieuwsbrieven komen er niet in.</p></div>
|
|
</div>
|
|
</div></div>
|
|
|
|
<div class="actions">
|
|
<button class="btn btn-primary" name="action" value="save">Opslaan</button>
|
|
<button class="btn btn-outline-primary" name="action" value="test">Opslaan en verbinding testen</button>
|
|
<a class="btn btn-outline-secondary" href="{{ url_for('settings', _anchor='mail') }}">Annuleren</a>
|
|
</div>
|
|
</form>
|
|
{% endblock %}
|
|
{% block scripts %}
|
|
<script>
|
|
document.getElementById('mail-provider').addEventListener('change', (e) => {
|
|
const opt = e.target.selectedOptions[0];
|
|
if (!opt || !opt.dataset.preset) return;
|
|
Object.entries(JSON.parse(opt.dataset.preset)).forEach(([key, value]) => {
|
|
const el = document.getElementById(key);
|
|
if (el) el.value = value;
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %}
|