Redesign of email settings (#2426)

Co-authored-by: Felix Rindt <felix@rindt.me>
This commit is contained in:
Raphael Michel
2022-01-26 12:47:58 +01:00
committed by GitHub
parent 194042dca5
commit e3c7cd7c6d
27 changed files with 1223 additions and 160 deletions

View File

@@ -0,0 +1,14 @@
{% load i18n %}{% blocktrans with code=code instance=instance %}Hello,
someone requested to use {{ address }} as a sender address on {{ instance }}.
This will allow them to send emails that are shown to originate from this email address.
If that was you, please enter the following confirmation code:
{{ code }}
If this was not requested by you, you can safely ignore this email.
Best regards,
Your {{ instance }} team
{% endblocktrans %}

View File

@@ -0,0 +1,127 @@
{% extends basetpl %}
{% load i18n %}
{% load bootstrap3 %}
{% load hierarkey_form %}
{% load static %}
{% block title %}{% trans "Organizer" %}{% endblock %}
{% block content %}
<h1>{% trans "E-mail sending" %}</h1>
<form action="" method="post" class="form-horizontal">
{% csrf_token %}
<div class="panel-group" id="email">
<div class="panel panel-default">
<div class="accordion-radio">
<div class="panel-heading">
<p class="panel-title">
<input type="radio" name="mode" value="system"
data-parent="#email"
{% if mode == "system" %}checked="checked"{% endif %}
id="input_mode_system"
data-toggle="radiocollapse" data-target="#mode_system"/>
<label for="input_mode_system"><strong>{% trans "Use system default" %}</strong></label>
</p>
</div>
</div>
<div id="mode_system"
class="panel-collapse collapsed {% if mode == "system" %}in{% endif %}">
<div class="panel-body form-horizontal">
<p>
{% blocktrans trimmed %}
E-mails will be sent through the system's default server. They will show the following
sender information:
{% endblocktrans %}
</p>
<dl class="dl-horizontal">
<dt>{% trans "From" context "mail_header" %}</dt>
<dd>{{ object.settings.mail_from_name|default_if_none:object.name }}
&lt;{{ default_sender_address }}&gt;
</dd>
{% if object.settings.contact_mail %}
<dt>{% trans "Reply-To" context "mail_header" %}</dt>
<dd>{{ object.settings.contact_mail }}</dd>
{% endif %}
</dl>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="accordion-radio">
<div class="panel-heading">
<p class="panel-title">
<input type="radio" name="mode" value="simple"
data-parent="#email"
{% if mode == "simple" %}checked="checked"{% endif %}
id="input_mode_simple"
data-toggle="radiocollapse" data-target="#mode_simple"/>
<label for="input_mode_simple"><strong>{% trans "Use system email server with a custom sender address" %}</strong></label>
</p>
</div>
</div>
<div id="mode_simple"
class="panel-collapse collapsed {% if mode == "simple" %}in{% endif %}">
<div class="panel-body form-horizontal">
<p>
{% blocktrans trimmed %}
E-mails will be sent through the system's default server but with your own sender
address.
This will make your emails look more personalized and coming directly from you, but it
also might require some extra steps to ensure good deliverability.
{% endblocktrans %}
</p>
{% bootstrap_form simple_form layout="control" %}
</div>
</div>
</div>
<div class="panel panel-default">
<div class="accordion-radio">
<div class="panel-heading">
<p class="panel-title">
<input type="radio" name="mode" value="smtp"
data-parent="#email"
{% if mode == "smtp" %}checked="checked"{% endif %}
id="input_mode_smtp"
data-toggle="radiocollapse" data-target="#mode_smtp"/>
<label for="input_mode_smtp"><strong>{% trans "Use a custom SMTP server" %}</strong></label>
</p>
</div>
</div>
<div id="mode_smtp"
class="panel-collapse collapsed {% if mode == "smtp" %}in{% endif %}">
<div class="panel-body form-horizontal">
<p>
{% blocktrans trimmed %}
For full customization, you can configure your own SMTP server that will be used for
email sending.
{% endblocktrans %}
</p>
{% bootstrap_form smtp_form layout="control" %}
</div>
</div>
</div>
{% if request.event %}
<div class="panel panel-default">
<div class="accordion-radio">
<div class="panel-heading">
<p class="panel-title">
<input type="radio" name="mode" value="reset"
data-parent="#reset"
id="input_mode_reset"
data-toggle="radiocollapse" data-target="#mode_reset"/>
<label for="input_mode_reset"><strong>{% trans "Reset to organizer settings" %}</strong></label>
</p>
</div>
</div>
<div id="mode_reset"
class="panel-collapse collapsed {% if mode == "reset" %}in{% endif %}">
</div>
</div>
{% endif %}
</div>
<div class="form-group submit-group">
<button type="submit" class="btn btn-primary btn-save">
{% trans "Continue" %}
</button>
</div>
</form>
{% endblock %}

View File

@@ -0,0 +1,79 @@
{% extends basetpl %}
{% load i18n %}
{% load bootstrap3 %}
{% load hierarkey_form %}
{% load static %}
{% block title %}{% trans "Organizer" %}{% endblock %}
{% block content %}
<h1>{% trans "E-mail sending" %}</h1>
<form action="" method="post" class="form-horizontal">
{% csrf_token %}
{% for k, v in request.POST.items %}
<input type="hidden" name="{{ k }}" value="{{ v }}">
{% endfor %}
<input type="hidden" name="state" value="save">
<div class="panel panel-default">
<div class="panel-heading">
<p class="panel-title">
<strong>{% trans "Use system email server with a custom sender address" %}</strong>
</p>
</div>
<div class="panel-body form-horizontal">
{% if spf_warning %}
<div class="alert alert-warning">
<p>
{{ spf_warning }}
</p>
{% if spf_record %}
<p>
{% trans "This is the SPF record we found on your domain:" %}
</p>
<pre><code>{{ spf_record }}</code></pre>
<p>
{% trans "To fix this, include the following part before the last word:" %}
</p>
<pre><code>{{ spf_key }}</code></pre>
{% else %}
<p>
{% trans "Your new SPF record could look like this:" %}
</p>
<pre><code>v=spf1 a mx {{ spf_key }} ~all</code></pre>
{% endif %}
<p>
{% trans "Please keep in mind that updates to DNS might require multiple hours to take effect." %}
</p>
</div>
{% elif spf_key %}
<div class="alert alert-success">
{% blocktrans trimmed %}
We found an SPF record on your domain that includes this system. Great!
{% endblocktrans %}
</div>
{% endif %}
{% if verification %}
<h3>{% trans "Verification" %}</h3>
<p>
{% blocktrans trimmed with recp=recp %}
We've sent an email to {{ recp }} with a confirmation code to verify that this email address
is owned by you. Please enter the verification code below:
{% endblocktrans %}
</p>
<div class="form-group">
<label class="col-md-3 control-label" for="id_verification">
{% trans "Verification code" %}
</label>
<div class="col-md-9">
<input type="text" name="verification" class="form-control">
</div>
</div>
{% endif %}
</div>
</div>
<div class="form-group submit-group">
<button type="submit" class="btn btn-primary btn-save">
{% trans "Save" %}
</button>
</div>
</form>
{% endblock %}

View File

@@ -0,0 +1,42 @@
{% extends basetpl %}
{% load i18n %}
{% load bootstrap3 %}
{% load hierarkey_form %}
{% load static %}
{% block title %}{% trans "Organizer" %}{% endblock %}
{% block content %}
<h1>{% trans "E-mail sending" %}</h1>
<form action="" method="post" class="form-horizontal">
{% csrf_token %}
{% for k, v in request.POST.items %}
<input type="hidden" name="{{ k }}" value="{{ v }}">
{% endfor %}
<input type="hidden" name="state" value="save">
<div class="panel panel-default">
<div class="panel-heading">
<p class="panel-title">
<strong>{% trans "Use a custom SMTP server" %}</strong>
</p>
</div>
<div class="panel-body form-horizontal">
<div class="alert alert-success">
{% blocktrans trimmed %}
A test connection to your SMTP server was successful. You can now save your new settings
to put them in use.
{% endblocktrans %}
</div>
{% if known_host_problem %}
<div class="alert alert-warning">
{{ known_host_problem }}
</div>
{% endif %}
</div>
</div>
<div class="form-group submit-group">
<button type="submit" class="btn btn-primary btn-save">
{% trans "Save" %}
</button>
</div>
</form>
{% endblock %}

View File

@@ -12,16 +12,49 @@
<div class="tabbed-form">
<fieldset>
<legend>{% trans "General" %}</legend>
{% bootstrap_field form.mail_prefix layout="control" %}
{% bootstrap_field form.mail_attach_tickets layout="control" %}
{% bootstrap_field form.mail_attach_ical layout="control" %}
{% url "control:organizer.settings.mail" organizer=request.organizer.slug as org_url %}
{% propagated request.event org_url "mail_from" "mail_from_name" "mail_text_signature" "mail_bcc" %}
{% bootstrap_field form.mail_from layout="control" %}
{% propagated request.event org_url "mail_from" "smtp_use_custom" "smtp_host" "smtp_port" "smtp_username" "smtp_password" "smtp_use_tls" "smtp_use_ssl" %}
<div class="form-group">
<label class="col-md-3 control-label">
{% trans "Sending method" %}
</label>
<div class="col-md-9 static-form-row-with-btn">
{% if request.event.settings.smtp_use_custom %}
{% trans "Custom SMTP server" %}: {{ request.event.settings.smtp_host }}
{% else %}
{% trans "System-provided email server" %}
{% endif %}
&nbsp;&nbsp;
<a href="{% url "control:event.settings.mail.setup" organizer=request.organizer.slug event=request.event.slug %}"
class="btn btn-default">
<span class="fa fa-edit"></span>
{% trans "Edit" %}
</a>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">
{% trans "Sender address" %}
</label>
<div class="col-md-9 static-form-row-with-btn">
{{ request.event.settings.mail_from }}
&nbsp;&nbsp;
<a href="{% url "control:event.settings.mail.setup" organizer=request.organizer.slug event=request.event.slug %}"
class="btn btn-default">
<span class="fa fa-edit"></span>
{% trans "Edit" %}
</a>
</div>
</div>
{% endpropagated %}
{% propagated request.event org_url "mail_from_name" "mail_text_signature" "mail_bcc" %}
{% bootstrap_field form.mail_from_name layout="control" %}
{% bootstrap_field form.mail_text_signature layout="control" %}
{% bootstrap_field form.mail_bcc layout="control" %}
{% endpropagated %}
{% bootstrap_field form.mail_prefix layout="control" %}
{% bootstrap_field form.mail_attach_tickets layout="control" %}
{% bootstrap_field form.mail_attach_ical layout="control" %}
{% bootstrap_field form.mail_sales_channel_placed_paid layout="control" %}
</fieldset>
<fieldset>
@@ -85,26 +118,11 @@
<h4>{% trans "Attachments" %}</h4>
{% bootstrap_field form.mail_attachment_new_order layout="control" %}
</fieldset>
<fieldset>
<legend>{% trans "SMTP settings" %}</legend>
{% propagated request.event org_url "smtp_use_custom" "smtp_host" "smtp_port" "smtp_username" "smtp_password" "smtp_use_tls" "smtp_use_ssl" %}
{% bootstrap_field form.smtp_use_custom layout="control" %}
{% bootstrap_field form.smtp_host layout="control" %}
{% bootstrap_field form.smtp_port layout="control" %}
{% bootstrap_field form.smtp_username layout="control" %}
{% bootstrap_field form.smtp_password layout="control" %}
{% bootstrap_field form.smtp_use_tls layout="control" %}
{% bootstrap_field form.smtp_use_ssl layout="control" %}
{% endpropagated %}
</fieldset>
</div>
<div class="form-group submit-group">
<button type="submit" class="btn btn-primary btn-save">
{% trans "Save" %}
</button>
<button type="submit" class="btn btn-default btn-save pull-left" name="test" value="1">
{% trans "Save and test custom SMTP connection" %}
</button>
</div>
</form>
{% endblock %}

View File

@@ -11,13 +11,45 @@
<h1>{% trans "E-mail settings" %}</h1>
<form action="" method="post" class="form-horizontal" enctype="multipart/form-data"
mail-preview-url="{% url "control:organizer.settings.mail.preview" organizer=request.organizer.slug %}">
mail-preview-url="{% url "control:organizer.settings.mail.preview" organizer=request.organizer.slug %}">
{% csrf_token %}
{% bootstrap_form_errors form %}
<div class="tabbed-form">
<fieldset>
<legend>{% trans "General" %}</legend>
{% bootstrap_field form.mail_from layout="control" %}
<div class="form-group">
<label class="col-md-3 control-label">
{% trans "Sending method" %}
</label>
<div class="col-md-9 static-form-row-with-btn">
{% if request.organizer.settings.smtp_use_custom %}
{% trans "Custom SMTP server" %}: {{ request.organizer.settings.smtp_host }}
{% else %}
{% trans "System-provided email server" %}
{% endif %}
&nbsp;&nbsp;
<a href="{% url "control:organizer.settings.mail.setup" organizer=request.organizer.slug %}"
class="btn btn-default">
<span class="fa fa-edit"></span>
{% trans "Edit" %}
</a>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">
{% trans "Sender address" %}
</label>
<div class="col-md-9 static-form-row-with-btn">
{{ request.organizer.settings.mail_from }}
&nbsp;&nbsp;
<a href="{% url "control:organizer.settings.mail.setup" organizer=request.organizer.slug %}"
class="btn btn-default">
<span class="fa fa-edit"></span>
{% trans "Edit" %}
</a>
</div>
</div>
{% bootstrap_field form.mail_from_name layout="control" %}
{% bootstrap_field form.mail_text_signature layout="control" %}
{% bootstrap_field form.mail_bcc layout="control" %}
@@ -35,24 +67,11 @@
{% include "pretixcontrol/event/mail_settings_fragment.html" with pid="reset" title=title_reset items="mail_text_customer_reset" %}
</div>
</fieldset>
<fieldset>
<legend>{% trans "SMTP settings" %}</legend>
{% bootstrap_field form.smtp_use_custom layout="control" %}
{% bootstrap_field form.smtp_host layout="control" %}
{% bootstrap_field form.smtp_port layout="control" %}
{% bootstrap_field form.smtp_username layout="control" %}
{% bootstrap_field form.smtp_password layout="control" %}
{% bootstrap_field form.smtp_use_tls layout="control" %}
{% bootstrap_field form.smtp_use_ssl layout="control" %}
</fieldset>
</div>
<div class="form-group submit-group">
<button type="submit" class="btn btn-primary btn-save">
{% trans "Save" %}
</button>
<button type="submit" class="btn btn-default btn-save pull-left" name="test" value="1">
{% trans "Save and test custom SMTP connection" %}
</button>
</div>
</form>
{% endblock %}