Unverified Commit 5276c0a0 authored by Eugen Rochko's avatar Eugen Rochko Committed by GitHub

HTML e-mails for UserMailer (#6256)

- premailer gem to turn CSS into inline styles automatically
- rework UserMailer templates
- reword UserMailer templates
parent 7861c5f1
......@@ -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'
......
......@@ -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)
......
# frozen_string_literal: true
module MailerHelper
end
<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
<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
<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
require('../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;
}
}
# frozen_string_literal: true
class AdminMailer < ApplicationMailer
helper StreamEntriesHelper
layout 'plain_mailer'
helper :stream_entries
def new_report(recipient, report)
@report = report
......
......@@ -2,7 +2,9 @@
class ApplicationMailer < ActionMailer::Base
layout 'mailer'
helper :instance
helper :mailer
protected
......
# frozen_string_literal: true
class NotificationMailer < ApplicationMailer
helper StreamEntriesHelper
layout 'plain_mailer'
helper :stream_entries
def mention(recipient, notification)
@me = recipient
......
!!!
%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
!= "&nbsp; "
%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
<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>
<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>
<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>
<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
<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
<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>
<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>
<div lang="he" dir="rtl">
<p>שלום <%= @resource.email %> !</p>
<p>הרגע יצרת חשבון בקהילה <%= @instance %>.</p>
<p>כדי לוודא את הרשמתך, יש ללחוץ על הקישורית הבאה : <br>
<%= link_to 'Confirm my account', confirmation_url(@resource, confirmation_token: @token) %>
<p>יש לעבור גם על תנאי השימוש <%= link_to 'terms and conditions', terms_url %>.</p>
<p>בתודה מראש,<p>
<p>צוות ניהול <%= @instance %></p>
</div>
\ No newline at end of file
%table.email-table{ cellspacing: 0, cellpadding: 0 }
%tbody
%tr
%td.email-body
.email-container
%table.content-section{ cellspacing: 0, cellpadding: 0 }
%tbody
%tr
%td.content-cell.hero
.email-row
.col-6
%table.column{ cellspacing: 0, cellpadding: 0 }
%tbody
%tr
%td.column-cell.text-center.padded
%table.hero-icon{ align: 'center', cellspacing: 0, cellpadding: 0 }
%tbody
%tr
%td
= image_tag asset_pack_path('icon_email.svg')
%h1= t 'devise.mailer.confirmation_instructions.title'
%table.email-table{ cellspacing: 0, cellpadding: 0 }
%tbody
%tr
%td.email-body
.email-container
%table.content-section{ cellspacing: 0, cellpadding: 0 }