From e0003cb003e046dde60dba7fe0f7de3e9ab44b81 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20P=C3=A9ters?= <fpeters@entrouvert.com>
Date: Mon, 30 Jan 2017 15:35:36 +0100
Subject: [PATCH] templates: add a modern layout to authentic emails (#14814)

---
 .../api_user_create_registration_email_body.html   |   8 +-
 .../api_user_create_registration_email_body.txt    |   5 +-
 .../authentic2/change_email_notification_body.html |   7 +-
 .../authentic2/change_email_notification_body.txt  |   2 +-
 templates/authentic2/password_change_body.html     |   4 +-
 templates/authentic2/password_change_body.txt      |   4 +-
 .../authentic2/password_reset_email_body.html      |  12 +-
 templates/authentic2/password_reset_email_body.txt |   6 +-
 templates/emails/body_base.html                    | 163 +++++++++++++++++++--
 templates/emails/body_base.txt                     |   2 +
 templates/emails/button-link.html                  |  11 ++
 templates/registration/activation_email.html       |  11 +-
 templates/registration/activation_email.txt        |   6 +-
 13 files changed, 200 insertions(+), 41 deletions(-)
 create mode 100644 templates/emails/button-link.html

diff --git a/templates/authentic2/api_user_create_registration_email_body.html b/templates/authentic2/api_user_create_registration_email_body.html
index 42c4f4c..16c46e9 100644
--- a/templates/authentic2/api_user_create_registration_email_body.html
+++ b/templates/authentic2/api_user_create_registration_email_body.html
@@ -3,7 +3,7 @@
 <p>Bonjour,</p>
 
 <p>
-Un administrateur vous a créé un compte sur {% firstof global_title site_name site "Compte Citoyen" %} :
+Un administrateur vient de vous créer un compte :
 </p>
 
 <ul>
@@ -14,10 +14,12 @@ Un administrateur vous a créé un compte sur {% firstof global_title site_name
 
 <p>
 Pour choisir un mot de passe et accéder à votre compte, veuillez cliquer
-sur le lien suivant : <a href="{{ reset_url }}">{{ reset_url }}</a>.
+sur le bouton suivant :
 </p>
 
+{% include "emails/button-link.html" with url=reset_url label="Accéder au compte" %}
+
 <p>
-Attention, ce lien ne sera valide que durant {{expiration_days}} jours.
+Attention, cette action n'est valide que durant {{ expiration_days }} jours.
 </p>
 {% endblock %}
diff --git a/templates/authentic2/api_user_create_registration_email_body.txt b/templates/authentic2/api_user_create_registration_email_body.txt
index ea50ef5..ee107c0 100644
--- a/templates/authentic2/api_user_create_registration_email_body.txt
+++ b/templates/authentic2/api_user_create_registration_email_body.txt
@@ -1,7 +1,7 @@
 {% extends "emails/body_base.txt" %}
 {% block content %}Bonjour,
 
-Un administrateur vous a créé un compte sur {% firstof global_title site_name site "Compte Citoyen" %} :
+Un administrateur vient de vous créer un compte :
 
 * Courriel : {{ data.email }}
 * Prénom : {{ data.first_name }}
@@ -12,6 +12,7 @@ sur le lien suivant :
 
   {{ reset_url }}
 
-Attention, ce lien ne sera valide que durant {{ expiration_days }} jours.
+
+Attention, cette action n'est valide que durant {{ expiration_days }} jours.
 {% endblock %}
 
diff --git a/templates/authentic2/change_email_notification_body.html b/templates/authentic2/change_email_notification_body.html
index e9f3ca5..44f051a 100644
--- a/templates/authentic2/change_email_notification_body.html
+++ b/templates/authentic2/change_email_notification_body.html
@@ -3,13 +3,14 @@
 <p>Bonjour,</p>
 
 <p>
-Vous avez demandé à changer votre adresse électronique sur {% firstof global_title site_name site "Compte Citoyen" %}
+Vous avez demandé à changer votre adresse électronique
 de {{ old_email }} à {{ email }}.
 </p>
 
 <p>
-Pour valider ce changement, veuillez cliquer sur le lien suivant :
-<a href="{{ link }}">{{ link }}</a>.
+Pour valider ce changement, veuillez cliquer sur le bouton suivant :
 </p>
 
+{% include "emails/button-link.html" with url=link label="Valider le changement" %}
+
 {% endblock %}
diff --git a/templates/authentic2/change_email_notification_body.txt b/templates/authentic2/change_email_notification_body.txt
index 1b28f3a..845f72b 100644
--- a/templates/authentic2/change_email_notification_body.txt
+++ b/templates/authentic2/change_email_notification_body.txt
@@ -1,7 +1,7 @@
 {% extends "emails/body_base.txt" %}
 {% block content %}Bonjour,
 
-Vous avez demandé à changer votre adresse électronique sur {% firstof global_title site_name site "Compte Citoyen" %}
+Vous avez demandé à changer votre adresse électronique
 de {{ old_email }} à {{ email }}.
 
 Pour valider ce changement, veuillez cliquer sur le lien suivant :
diff --git a/templates/authentic2/password_change_body.html b/templates/authentic2/password_change_body.html
index 4ac17e7..8543f6e 100644
--- a/templates/authentic2/password_change_body.html
+++ b/templates/authentic2/password_change_body.html
@@ -3,12 +3,12 @@
 <p>Bonjour,</p>
 
 <p>
-Vous avez changé votre mot de passe sur {% firstof global_title site_name site "Compte Citoyen" %}.
+Vous avez changé votre mot de passe.
 </p>
 
 <p>
 Si vous n'avez pas demandé le changement de votre mot de passe, contactez
-l’équipe {% firstof global_title site_name site "Compte Citoyen" %}.
+l'équipe {% firstof global_title site_name site "Compte Citoyen" %}.
 </p>
 
 {% endblock %}
diff --git a/templates/authentic2/password_change_body.txt b/templates/authentic2/password_change_body.txt
index f5ff353..1973b5d 100644
--- a/templates/authentic2/password_change_body.txt
+++ b/templates/authentic2/password_change_body.txt
@@ -1,8 +1,8 @@
 {% extends "emails/body_base.txt" %}
 {% block content %}Bonjour,
 
-Vous avez changé votre mot de passe sur {% firstof global_title site_name site "Compte Citoyen" %}.
+Vous avez changé votre mot de passe.
 
 Si vous n'avez pas demandé le changement de votre mot de passe, contactez
-l’équipe {% firstof global_title site_name site "Compte Citoyen" %}.
+l'équipe {% firstof global_title site_name site "Compte Citoyen" %}.
 {% endblock %}
diff --git a/templates/authentic2/password_reset_email_body.html b/templates/authentic2/password_reset_email_body.html
index 0daf060..7889daf 100644
--- a/templates/authentic2/password_reset_email_body.html
+++ b/templates/authentic2/password_reset_email_body.html
@@ -4,16 +4,18 @@
 <p>Bonjour,</p>
 
 <p>
-Vous avez demandé la réinitialisation de votre mot de passe de connexion sur
-{% firstof global_title site_name site "Compte Citoyen" %}.
+Vous avez demandé la réinitialisation de votre mot de passe de connexion.
 </p>
 
 <p>
-Pour réinitialiser le mot de passe, veuillez cliquer sur le lien suivant :
-<a href="{{reset_url}}">{{reset_url}}</a>.
+Pour réinitialiser le mot de passe, veuillez cliquer sur le bouton suivant :
 </p>
 
+{% include "emails/button-link.html" with url=reset_url label="Réinitialiser le mot de passe" %}
+
 <p>
-Attention, ce lien ne sera valide que durant {{expiration_days}} jours.
+Attention, sans validation de votre part dans les {{expiration_days}} jours,
+votre demande sera annulée.
 </p>
+
 {% endblock %}
diff --git a/templates/authentic2/password_reset_email_body.txt b/templates/authentic2/password_reset_email_body.txt
index e6b7545..c2cdd29 100644
--- a/templates/authentic2/password_reset_email_body.txt
+++ b/templates/authentic2/password_reset_email_body.txt
@@ -1,13 +1,13 @@
 {% extends "emails/body_base.txt" %}
 {% block content %}Bonjour,
 
-Vous avez demandé la réinitialisation de votre mot de passe de connexion sur
-{% firstof global_title site_name site "Compte Citoyen" %}.
+Vous avez demandé la réinitialisation de votre mot de passe de connexion.
 
 Pour réinitialiser le mot de passe, veuillez cliquer sur le lien suivant :
 
   {{reset_url}}
 
 
-Attention, ce lien ne sera valide que durant {{expiration_days}} jours.
+Attention, sans validation de votre part dans les {{expiration_days}} jours,
+votre demande sera annulée.
 {% endblock %}
diff --git a/templates/emails/body_base.html b/templates/emails/body_base.html
index 5b144d4..2611efb 100644
--- a/templates/emails/body_base.html
+++ b/templates/emails/body_base.html
@@ -1,20 +1,159 @@
-<html>
- <head>
-  <meta charset="utf-8">
- </head>
- <body>
-  <div style="max-width: 60ex;">
-   <div class="content">
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="x-apple-disable-message-reformatting">
+    <title></title>
+    <style>
+        html,
+        body {
+            margin: 0 auto !important;
+            padding: 0 !important;
+            height: 100% !important;
+            width: 100% !important;
+        }
+
+        * {
+            -ms-text-size-adjust: 100%;
+            -webkit-text-size-adjust: 100%;
+        }
+
+        div[style*="margin: 16px 0"] {
+            margin:0 !important;
+        }
+
+        table,
+        td {
+            mso-table-lspace: 0pt !important;
+            mso-table-rspace: 0pt !important;
+        }
+
+        table {
+            border-spacing: 0 !important;
+            border-collapse: collapse !important;
+            table-layout: fixed !important;
+            margin: 0 auto !important;
+        }
+        table table table {
+            table-layout: auto;
+        }
+
+        img {
+            -ms-interpolation-mode:bicubic;
+        }
+
+        *[x-apple-data-detectors] {
+            color: inherit !important;
+            text-decoration: none !important;
+        }
+
+        .x-gmail-data-detectors,
+        .x-gmail-data-detectors *,
+        .aBn {
+            border-bottom: 0 !important;
+            cursor: default !important;
+        }
+
+
+        .button-link {
+            text-decoration: none !important;
+        }
+
+        @media only screen and (min-device-width: 375px) and (max-device-width: 413px) { /* iPhone 6 and 6+ */
+            .email-container {
+                min-width: 375px !important;
+            }
+        }
+
+    </style>
+
+    <style>
+        .button-td,
+        .button-a {
+            transition: all 100ms ease-in;
+        }
+        .button-td:hover,
+        .button-a:hover {
+            background: #555555 !important;
+            border-color: #555555 !important;
+        }
+    </style>
+
+</head>
+<body width="100%" bgcolor="#F2F2F2" style="margin: 0; mso-line-height-rule: exactly;">
+    <center style="width: 100%; background: #F2F2F2;">
+
+        <div style="max-width: 600px; margin: auto;" class="email-container">
+            <!--[if mso]>
+            <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="600" align="center">
+            <tr>
+            <td>
+            <![endif]-->
+
+            <table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 600px;">
+                <tr>
+                    <td style="padding: 20px 0; text-align: center; font-family: sans-serif;">
+                        <span style="font-size: 15px; line-height: 20px;">{% firstof global_title site_name site "Compte Citoyen" %}</span>
+                    </td>
+                </tr>
+            </table>
+
+            <table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 600px;">
+
+                <tr>
+                    <td bgcolor="{% if theme_color %}{{theme_color}}{% else %}#ffffff{% endif %}">
+                            &nbsp;
+                    </td>
+                </tr>
+
+                <tr>
+                    <td bgcolor="#ffffff">
+                        <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
+                            <tr>
+                                <td style="padding: 40px; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;">
+
      {% block content %}
      {% endblock %}
-   </div>
+                                </td>
+                                </tr>
+                        </table>
+                    </td>
+                </tr>
+
+                <tr>
+                    <td bgcolor="{% if theme_color %}{{theme_color}}{% else %}#ffffff{% endif %}">
+                            &nbsp;
+                    </td>
+                </tr>
+
+                <tr>
+                    <td height="40" style="font-size: 0; line-height: 0;">
+                        &nbsp;
+                    </td>
+                </tr>
+
+            </table>
+
+            <table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 680px;">
+                <tr>
+                    <td style="padding: 40px 10px;width: 100%;font-size: 12px; font-family: sans-serif; line-height:18px; text-align: center; color: #888888;" class="x-gmail-data-detectors">
    {% block footer %}
    {% if email_signature %}
-   <div style="font-size: smaller; font-color: #888; margin-top: 2em;">
    {{ email_signature }}
-   </div>
    {% endif %}
    {% endblock %}
-  </div>
- </body>
+                    </td>
+                </tr>
+            </table>
+            <!--[if mso]>
+            </td>
+            </tr>
+            </table>
+            <![endif]-->
+        </div>
+    </center>
+    <!-- adapted from http://tedgoas.github.io/Cerberus templates -->
+</body>
 </html>
diff --git a/templates/emails/body_base.txt b/templates/emails/body_base.txt
index 19333a0..d9c585c 100644
--- a/templates/emails/body_base.txt
+++ b/templates/emails/body_base.txt
@@ -1,3 +1,5 @@
+## {% firstof global_title site_name site "Compte Citoyen" %} ##
+
 {% block content %}
 {% endblock %}
 
diff --git a/templates/emails/button-link.html b/templates/emails/button-link.html
new file mode 100644
index 0000000..0b6c110
--- /dev/null
+++ b/templates/emails/button-link.html
@@ -0,0 +1,11 @@
+<br>
+<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" style="margin: auto;">
+<tr>
+  <td style="border-radius: 3px; background: #7D7D7D; text-align: center;" class="button-td">
+    <a href="{{url}}" style="background: #7D7D7D; border: 15px solid #7D7D7D; font-family: sans-serif; font-size: 13px; line-height: 1.1; text-align: center; text-decoration: none; display: block; border-radius: 3px; font-weight: bold;" class="button-a">
+      <span style="color:#ffffff;" class="button-link">{{label}}</span>
+    </a>
+  </td>
+</tr>
+</table>
+<br>
diff --git a/templates/registration/activation_email.html b/templates/registration/activation_email.html
index c8e950d..f8884f5 100644
--- a/templates/registration/activation_email.html
+++ b/templates/registration/activation_email.html
@@ -4,16 +4,17 @@
 <p>Bonjour,</p>
 
 <p>
-Vous venez de créer votre compte sur {% firstof global_title site_name site "Compte Citoyen" %}.
-Nous vous en remercions.
+Vous venez de créer votre compte, nous vous en remercions.
 </p>
 
 <p>
-Pour activer votre compte, veuillez cliquer sur le lien suivant :
-<a href="{{registration_url}}">{{registration_url}}</a>.
+Pour activer votre compte, veuillez cliquer sur le bouton suivant :
 </p>
 
+{% include "emails/button-link.html" with url=registration_url label="Finaliser l'inscription" %}
+
 <p>
-Attention, ce lien ne sera valide que durant {{expiration_days}} jours.
+Attention, sans validation de votre part dans les {{expiration_days}} jours,
+votre demande de compte sera annulée.
 </p>
 {% endblock %}
diff --git a/templates/registration/activation_email.txt b/templates/registration/activation_email.txt
index 5d1438b..61f8701 100644
--- a/templates/registration/activation_email.txt
+++ b/templates/registration/activation_email.txt
@@ -1,13 +1,13 @@
 {% extends "emails/body_base.txt" %}
 {% block content %}Bonjour,
 
-Vous venez de créer votre compte sur {% firstof global_title site_name site "Compte Citoyen" %}.
-Nous vous en remercions.
+Vous venez de créer votre compte, nous vous en remercions.
 
 Pour activer votre compte, veuillez cliquer sur le lien suivant :
 
   {{registration_url}}
 
 
-Attention, ce lien ne sera valide que durant {{expiration_days}} jours.
+Attention, sans validation de votre part dans les {{expiration_days}} jours,
+votre demande de compte sera annulée.
 {% endblock %}
-- 
2.11.0