HTML e-mails for UserMailer (#6256)

- premailer gem to turn CSS into inline styles automatically
- rework UserMailer templates
- reword UserMailer templates

Gemfile

@@ -49,6 +49,7 @@ gem 'oj', '~> 3.3'
 gem 'ostatus2', '~> 2.0'
 gem 'ox', '~> 2.8'
 gem 'pundit', '~> 1.1'
+gem 'premailer-rails'
 gem 'rack-attack', '~> 5.0'
 gem 'rack-cors', '~> 0.4', require: 'rack/cors'
 gem 'rack-timeout', '~> 0.4'

Gemfile.lock

@@ -122,6 +122,8 @@ GEM
     crack (0.4.3)
       safe_yaml (~> 1.0.0)
     crass (1.0.3)
+    css_parser (1.6.0)
+      addressable
     debug_inspector (0.0.3)
     devise (4.3.0)
       bcrypt (~> 3.0)
@@ -324,6 +326,13 @@ GEM
       activerecord
     pkg-config (1.2.8)
     powerpack (0.1.1)
+    premailer (1.11.1)
+      addressable
+      css_parser (>= 1.6.0)
+      htmlentities (>= 4.0.0)
+    premailer-rails (1.10.1)
+      actionmailer (>= 3, < 6)
+      premailer (~> 1.7, >= 1.7.9)
     pry (0.11.3)
       coderay (~> 1.1.0)
       method_source (~> 0.9.0)
@@ -600,6 +609,7 @@ DEPENDENCIES
   pg (~> 0.20)
   pghero (~> 1.7)
   pkg-config (~> 1.2)
+  premailer-rails
   pry-rails (~> 0.3)
   puma (~> 3.10)
   pundit (~> 1.1)

app/helpers/mailer_helper.rb

+# frozen_string_literal: true
+
+module MailerHelper
+end

app/javascript/images/icon_email.svg

+<svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
+    <path d="M0 0h24v24H0z" fill="none"/>
+</svg>
\ No newline at end of file

app/javascript/images/icon_lock_open.svg

+<svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 0h24v24H0z" fill="none"/>
+    <path d="M12 17c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm6-9h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6h1.9c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm0 12H6V10h12v10z"/>
+</svg>
\ No newline at end of file

app/javascript/images/logo_transparent.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216.4144 232.00976"><path d="M107.86523 0C78.203984.2425 49.672422 3.4535937 33.044922 11.089844c0 0-32.97656262 14.752031-32.97656262 65.082031 0 11.525-.224375 25.306175.140625 39.919925 1.19750002 49.22 9.02375002 97.72843 54.53124962 109.77343 20.9825 5.55375 38.99711 6.71547 53.505856 5.91797 26.31125-1.45875 41.08203-9.38867 41.08203-9.38867l-.86914-19.08984s-18.80171 5.92758-39.91796 5.20508c-20.921254-.7175-43.006879-2.25516-46.390629-27.94141-.3125-2.25625-.46875-4.66938-.46875-7.20313 0 0 20.536953 5.0204 46.564449 6.21289 15.915.73001 30.8393-.93343 45.99805-2.74218 29.07-3.47125 54.38125-21.3818 57.5625-37.74805 5.0125-25.78125 4.59961-62.916015 4.59961-62.916015 0-50.33-32.97461-65.082031-32.97461-65.082031C166.80539 3.4535938 138.255.2425 108.59375 0h-.72852zM74.296875 39.326172c12.355 0 21.710234 4.749297 27.896485 14.248047l6.01367 10.080078 6.01563-10.080078c6.185-9.49875 15.54023-14.248047 27.89648-14.248047 10.6775 0 19.28156 3.753672 25.85156 11.076172 6.36875 7.3225 9.53907 17.218828 9.53907 29.673828v60.941408h-24.14454V81.869141c0-12.46875-5.24453-18.798829-15.73828-18.798829-11.6025 0-17.41797 7.508516-17.41797 22.353516v32.375002H96.207031V85.423828c0-14.845-5.815468-22.353515-17.417969-22.353516-10.49375 0-15.740234 6.330079-15.740234 18.798829v59.148439H38.904297V80.076172c0-12.455 3.171016-22.351328 9.541015-29.673828 6.568751-7.3225 15.172813-11.076172 25.851563-11.076172z" fill="#fff"/></svg>
\ No newline at end of file

app/javascript/packs/mailer.js

+require('../styles/mailer.scss');

app/javascript/styles/mailer.scss

+@import 'mastodon/variables';
+@import 'fonts/roboto';
+
+table,
+td,
+div {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  width: 100% !important;
+  min-width: 100%;
+  margin: 0;
+  padding: 0;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+}
+
+.email_body {
+  td,
+  div,
+  a,
+  span {
+    line-height: inherit;
+  }
+}
+
+a {
+  &,
+  &:visited,
+  span {
+    text-decoration: none;
+    color: $ui-highlight-color;
+  }
+
+  #outlook & {
+    padding: 0;
+  }
+}
+
+img {
+  outline: none;
+  border: 0;
+  text-decoration: none;
+  -ms-interpolation-mode: bicubic;
+  clear: both;
+  line-height: 100%;
+}
+
+table {
+  border-spacing: 0;
+  mso-table-lspace: 0;
+  mso-table-rspace: 0;
+}
+
+td {
+  vertical-align: top;
+}
+
+.email-table,
+.content-section,
+.column,
+.column-cell {
+  width: 100%;
+  min-width: 100%;
+}
+
+.email-body {
+  font-size: 0 !important;
+  line-height: 100%;
+  text-align: center;
+  padding-left: 16px;
+  padding-right: 16px;
+}
+
+.email-start {
+  padding-top: 32px;
+}
+
+.email-end {
+  padding-bottom: 32px;
+}
+
+.email-body,
+html,
+body {
+  background-color: lighten($ui-base-color, 4%);
+}
+
+.email-container,
+.email-row,
+.col-0,
+.col-1,
+.col-2,
+.col-3,
+.col-4,
+.col-5,
+.col-6, {
+  font-size: 0;
+  display: inline-block;
+  width: 100%;
+  min-width: 100%;
+  min-width: 0 !important;
+  vertical-align: top;
+}
+
+.content-cell {
+  width: 100%;
+  min-width: 100%;
+  min-width: 0 !important;
+}
+
+.column-cell {
+  padding-top: 16px;
+  padding-bottom: 16px;
+  vertical-align: top;
+
+  &.button-cell {
+    padding-top: 0;
+  }
+}
+
+.email-container {
+  max-width: 632px;
+  margin: 0 auto;
+  text-align: center;
+}
+
+.email-row {
+  display: block;
+  max-width: 600px !important;
+  margin: 0 auto;
+  text-align: center;
+  clear: both;
+}
+
+.col-0 {
+  max-width: 50px;
+}
+
+.col-1 {
+  max-width: 100px;
+}
+
+.col-2 {
+  max-width: 200px;
+}
+
+.col-3 {
+  max-width: 300px;
+}
+
+.col-4 {
+  max-width: 400px;
+}
+
+.col-5 {
+  max-width: 500px;
+}
+
+.col-6 {
+  max-width: 600px;
+}
+
+.column-cell,
+.column-cell td,
+p {
+  font-family: Helvetica, Arial, sans-serif;
+
+  @media only screen {
+    font-family: 'mastodon-font-sans-serif', sans-serif !important;
+  }
+}
+
+.email-body .column-cell,
+.column-cell,
+p {
+  font-size: 15px;
+  line-height: 23px;
+  color: $ui-primary-color;
+  mso-line-height-rule: exactly;
+  text-rendering: optimizelegibility;
+}
+
+p {
+  display: block;
+  margin-top: 0;
+  margin-bottom: 16px;
+
+  &.small {
+    font-size: 13px;
+  }
+
+  &.lead {
+    font-size: 19px;
+    line-height: 27px;
+  }
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: $ui-secondary-color;
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 20px;
+  margin-bottom: 8px;
+  padding: 0;
+  font-weight: 500;
+}
+
+h1 {
+  font-size: 26px;
+  line-height: 36px;
+}
+
+h2 {
+  font-size: 23px;
+  line-height: 30px;
+}
+
+h3 {
+  font-size: 19px;
+  line-height: 25px;
+}
+
+.input {
+  td {
+    background: darken($ui-base-color, 8%);
+    border-radius: 4px;
+    padding: 16px;
+    line-height: 20px;
+    mso-line-height-rule: exactly;
+    border-radius: 4px;
+    text-align: center;
+    font-weight: 500;
+    font-size: 17px;
+  }
+}
+
+.content-cell,
+.blank-cell {
+  width: 100%;
+  font-size: 0;
+  text-align: center;
+  vertical-align: top;
+  padding-left: 16px;
+  padding-right: 16px;
+}
+
+.content-cell {
+  background-color: darken($ui-base-color, 4%);
+}
+
+.hero {
+  background-color: $ui-base-color;
+  padding-top: 20px;
+}
+
+.header {
+  border-radius: 5px 5px 0 0;
+  background-color: darken($ui-base-color, 8%);
+
+  .column-cell {
+    text-align: center;
+    padding-top: 20px;
+    padding-bottom: 8px;
+  }
+}
+
+.content-start {
+  padding-top: 32px;
+}
+
+.content-end {
+  border-radius: 0 0 5px 5px;
+  padding-top: 16px;
+}
+
+.footer {
+  .column-cell,
+  p {
+    color: lighten($ui-base-color, 26%);
+  }
+
+  p {
+    margin-bottom: 0;
+    font-size: 13px;
+
+    &.small {
+      margin-bottom: 0;
+    }
+  }
+
+  a {
+    color: lighten($ui-base-color, 26%);
+    text-decoration: underline;
+  }
+
+  img {
+    opacity: 0.3;
+  }
+}
+
+.logo {
+  position: relative;
+  left: -4px;
+}
+
+.button {
+  display: table;
+  margin-left: auto;
+  margin-right: auto;
+
+  td {
+    line-height: 20px;
+    mso-line-height-rule: exactly;
+    border-radius: 4px;
+    text-align: center;
+    font-weight: 500;
+    font-size: 17px;
+    padding: 0 !important;
+
+    a,
+    a span {
+      color: $primary-text-color;
+      display: block !important;
+      text-align: center !important;
+      vertical-align: top !important;
+      line-height: inherit !important;
+    }
+
+    a {
+      padding: 10px 22px !important;
+      line-height: 26px !important;
+      font-weight: 500 !important;
+    }
+  }
+}
+
+.button-default {
+  background-color: darken($ui-base-color, 8%);
+}
+
+.button-primary {
+  background-color: $ui-highlight-color;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.padded {
+  padding-left: 16px;
+  padding-right: 16px;
+}
+
+.hero-icon {
+  width: 64px;
+
+  td {
+    text-align: center;
+    vertical-align: middle;
+    line-height: 100%;
+    mso-line-height-rule: exactly;
+    padding: 16px;
+    border-radius: 80px;
+    background: $success-green;
+  }
+
+  img {
+    max-width: 32px;
+    width: 32px;
+    height: 32px;
+    display: block;
+    line-height: 100%;
+  }
+}
+
+@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
+  body {
+    min-height: 1024px !important;
+  }
+}

app/mailers/admin_mailer.rb

 # frozen_string_literal: true
 
 class AdminMailer < ApplicationMailer
-  helper StreamEntriesHelper
+  layout 'plain_mailer'
+
+  helper :stream_entries
 
   def new_report(recipient, report)
     @report   = report

app/mailers/application_mailer.rb

@@ -2,7 +2,9 @@
 
 class ApplicationMailer < ActionMailer::Base
   layout 'mailer'
+
   helper :instance
+  helper :mailer
 
   protected
 

app/mailers/notification_mailer.rb

 # frozen_string_literal: true
 
 class NotificationMailer < ApplicationMailer
-  helper StreamEntriesHelper
+  layout 'plain_mailer'
+
+  helper :stream_entries
 
   def mention(recipient, notification)
     @me     = recipient

app/views/layouts/mailer.html.haml

+!!!
+%html{ lang: I18n.locale }
+  %head
+    %meta{ 'http-equiv' => 'Content-Type', 'content' => 'text/html; charset=utf-8' }/
+    %meta{ name: 'viewport', content: 'width=device-width, initial-scale=1.0, shrink-to-fit=no' }
+
+    %title/
+
+    = stylesheet_pack_tag 'mailer'
+  %body
+    %table.email-table{ cellspacing: 0, cellpadding: 0 }
+      %tbody
+        %tr
+          %td.email-body.email-start
+            .email-container
+              %table.content-section{ cellspacing: 0, cellpadding: 0 }
+                %tbody
+                  %tr
+                    %td.content-cell.header
+                      .email-row
+                        .col-6
+                          %table.column{ cellspacing: 0, cellpadding: 0 }
+                            %tbody
+                              %tr
+                                %td.column-cell
+                                  = link_to root_url do
+                                    = image_tag asset_pack_path('logo_full.svg'), height: 34, class: 'logo'
+
+    = yield
+
+    %table.email-table{ cellspacing: 0, cellpadding: 0 }
+      %tbody
+        %tr
+          %td.email-body.email-end
+            .email-container
+              %table.content-section{ cellspacing: 0, cellpadding: 0 }
+                %tbody
+                  %tr
+                    %td.content-cell.content-end
+                      != "  "
+                  %tr
+                    %td.blank-cell.footer
+                      .email-row
+                        .col-4
+                          %table.column{ cellspacing: 0, cellpadding: 0 }
+                            %tbody
+                              %td.column-cell
+                                %p= t 'about.hosted_on', domain: site_hostname
+                                %p= link_to t('application_mailer.notification_preferences'), settings_notifications_url
+                        .col-2
+                          %table.column{ cellspacing: 0, cellpadding: 0 }
+                            %tbody
+                              %td.column-cell.text-right
+                                = link_to root_url do
+                                  = image_tag asset_pack_path('logo_transparent.svg'), height: 24

app/views/layouts/plain_mailer.html.haml

+= yield

app/views/user_mailer/confirmation_instructions.ar.html.erb

-<p>مرحبا <%= @resource.email %> !</p>
-
-<p>لقد قمت بإنشاء حساب على <%= @instance %>.</p>
-
-<p>لتأكيد التسجيل يرجى النقر على الرابط التالي : <br>
-<%= link_to 'تأكيد إنشاء الحساب', confirmation_url(@resource, confirmation_token: @token) %>
-
-<p>يرجى الإطلاع على <%= link_to 'شروط الإستخدام', terms_url %>.</p>
-
-<p>مع أجمل التحيات،<p>
-
-<p>فريق <%= @instance %> </p>

app/views/user_mailer/confirmation_instructions.ca.html.erb

-<p>Benvingut <%= @resource.email %> !</p>
-
-<p>Has creat un compte a <%= @instance %>.</p>
-
-<p>Per confirmar la subscripció si us plau fes clic en el següent vincle : <br>
-<%= link_to 'Confirmar el meu compte', confirmation_url(@resource, confirmation_token: @token) %>
-
-<p>Si us plau, també fes un cop d'ull als nostres <%= link_to 'termes i condicions', terms_url %>.</p>
-
-<p>Sincerament,<p>
-
-<p>L'equip <%= @instance %> </p>

app/views/user_mailer/confirmation_instructions.en.html.erb

-<p>Welcome <%= @resource.email %> !</p>
-
-<p>You just created an account on <%= @instance %>.</p>
-
-<p>To confirm your inscription, please click on the following link : <br>
-<%= link_to 'Confirm my account', confirmation_url(@resource, confirmation_token: @token) %></p>
-
-<p>If the above link did not work, copy and paste this URL into your address bar: <br>
-<span><%= confirmation_url(@resource, confirmation_token: @token) %></span>
-
-<p>Please also check out our <%= link_to 'terms and conditions', terms_url %>.</p>
-
-<p>Sincerely,<p>
-
-<p>The <%= @instance %> team</p>

app/views/user_mailer/confirmation_instructions.es.html.erb

-<p>¡Bienvenido, <%= @resource.email %>!</p>
-
-<p>Acabas de crear una cuenta en <%= @instance %>.</p>
-
-<p>Para confirmar tu registro, por favor ingresa al siguiente enlace:<br>
-<%= link_to 'Confirmar mi cuenta', confirmation_url(@resource, confirmation_token: @token) %>
-
-<p>También revisa nuestros <%= link_to 'términos y condiciones', terms_url %>.</p>
-
-<p>Sinceramente,<p>
-
-<p>El equipo de <%= @instance %></p>
\ No newline at end of file

app/views/user_mailer/confirmation_instructions.fa.html.erb

-<p dir="rtl">خوش آمدید <%= @resource.email %> !</p>
-
-<p dir="rtl">شما الان در <%= @instance %> حساب باز کردید.</p>
-
-<p dir="rtl">برای تأیید عضویت، لطفاً روی پیوند زیر کلیک کنید: <br>
-<%= link_to 'تأیید حساب', confirmation_url(@resource, confirmation_token: @token) %>
-
-<p dir="rtl">لطفاً همچنین <%= link_to 'شرایط و مقررات استفادهٔ', terms_url %> ما را هم بخوانید.</p>
-
-<p dir="rtl">با احترام,<p>
-
-<p dir="rtl">گردانندگان سرور <%= @instance %></p>
\ No newline at end of file

app/views/user_mailer/confirmation_instructions.fi.html.erb

-<p>Tervetuloa <%= @resource.email %>!</p>
-
-<p>Voit vahvistaa Mastodon tilisi klikkaamalla alla olevaa linkkiä:</p>
-
-<p><%= link_to 'Varmista tilini', confirmation_url(@resource, confirmation_token: @token) %></p>

app/views/user_mailer/confirmation_instructions.fr.html.erb

-<p>Bonjour <%= @resource.email %>&nbsp;!<p>
-
-<p>Vous venez de vous créer un compte sur <%= @instance %> et nous vous en remercions :)</p>
-
-<p>Pour confirmer votre inscription, merci de cliquer sur le lien suivant : <br>
-<%= link_to 'Confirmer mon compte', confirmation_url(@resource, confirmation_token: @token) %></p>
-
-<p>Après votre première connexion, vous pourrez accéder à la documentation de l’outil.</p>
-
-<p>Pensez également à jeter un œil à nos <%= link_to 'conditions d\'utilisation', terms_url %>.</p>
-
-<p>Amicalement,</p>
-
-<p>L’équipe <%= @instance %></p>