Merge branch 'rs-confirmation-mail' into 'master'

New confirmation email

See merge request !3354

CHANGELOG

@@ -3,6 +3,7 @@ Please view this file on the master branch, on stable branches it's out of date.
 v 8.9.0 (unreleased)
   - Allow forking projects with restricted visibility level
   - Redesign navigation for project pages
+  - Redesign account and email confirmation emails
   - Use gitlab-shell v3.0.0
   - Add rake task 'gitlab:db:configure' for conditionally seeding or migrating the database
   - Changed the Slack build message to use the singular duration if necessary (Aran Koning)

app/assets/stylesheets/mailers/devise.scss

+// NOTE: This stylesheet is for the exclusive use of the `devise_mailer` layout
+// used for Devise email templates, and _should not_ be included in any
+// application stylesheets.
+//
+// Styles defined here are embedded directly into the resulting email HTML via
+// the `premailer` gem.
+
+$body-background-color:    #363636;
+$message-background-color: #fafafa;
+
+$header-color:             #6b4fbb;
+$body-color:               #444;
+$cta-color:                #e14329;
+$footer-link-color:        #7e7e7e;
+
+$font-family: Helvetica, Arial, sans-serif;
+
+body {
+  background-color: $body-background-color;
+  font-family: $font-family;
+  margin: 0;
+  padding: 0;
+}
+
+table {
+  -premailer-cellpadding: 0;
+  -premailer-cellspacing: 0;
+
+  border: 0;
+  border-collapse: separate;
+
+  &#wrapper {
+    background-color: $body-background-color;
+    width: 100%;
+  }
+
+  &#header {
+    margin: 0 auto;
+    text-align: left;
+    width: 600px;
+  }
+
+  &#body {
+    background-color: $message-background-color;
+    border: 1px solid #000;
+    border-radius: 4px;
+    margin: 0 auto;
+    width: 600px;
+  }
+
+  &#footer {
+    color: $footer-link-color;
+    font-size: 14px;
+    text-align: center;
+    width: 100%;
+  }
+
+  td {
+    &#body-container {
+      padding: 20px 40px;
+    }
+  }
+}
+
+.center {
+  text-align: center;
+}
+
+#logo {
+  border: none;
+  outline: none;
+  min-height: 88px;
+  width: 134px;
+}
+
+#content {
+  h2 {
+    color: $header-color;
+    font-size: 30px;
+    font-weight: 400;
+    line-height: 34px;
+    margin-top: 0;
+  }
+
+  p {
+    color: $body-color;
+    font-size: 17px;
+    line-height: 24px;
+    margin-bottom: 0;
+  }
+}
+
+#cta {
+  border: 1px solid $cta-color;
+  border-radius: 3px;
+  display: inline-block;
+  margin: 20px 0;
+  padding: 12px 24px;
+
+  a {
+    background-color: $message-background-color;
+    color: $cta-color;
+    display: inline-block;
+    text-decoration: none;
+  }
+}
+
+#tanuki {
+  padding: 40px 0 0;
+
+  img {
+    border: none;
+    outline: none;
+    width: 37px;
+    min-height: 36px;
+  }
+}
+
+#tagline {
+  font-size: 22px;
+  font-weight: 100;
+  padding: 4px 0 40px;
+}
+
+#social {
+  padding: 0 10px 20px;
+  width: 600px;
+  word-spacing: 20px;
+
+  a {
+    color: $footer-link-color;
+    text-decoration: none;
+  }
+}

app/mailers/devise_mailer.rb

 class DeviseMailer < Devise::Mailer
   default from: "#{Gitlab.config.gitlab.email_display_name} <#{Gitlab.config.gitlab.email_from}>"
   default reply_to: Gitlab.config.gitlab.email_reply_to
+
+  layout 'devise_mailer'
 end

app/views/devise/mailer/confirmation_instructions.html.erb

-<p>Welcome <%= @resource.name %>!</p>
-
-<% if @resource.unconfirmed_email.present? %>
-  <p>You can confirm your email (<%= @resource.unconfirmed_email %>) through the link below:</p>
-<% else %>
-  <p>You can confirm your account through the link below:</p>
-<% end %>
-
-<p><%= link_to 'Confirm your account', confirmation_url(@resource, confirmation_token: @token) %></p>

app/views/devise/mailer/confirmation_instructions.html.haml

+.center
+  - if @resource.unconfirmed_email.present?
+    #content
+      %h2= @resource.unconfirmed_email
+      %p Click the link below to confirm your email address.
+    #cta
+      = link_to 'Confirm your email address', confirmation_url(@resource, confirmation_token: @token)
+  - else
+    #content
+      - if Gitlab.com?
+        %h2 Thanks for signing up to GitLab!
+      - else
+        %h2 Welcome, #{@resource.name}!
+      %p To get started, click the link below to confirm your account.
+    #cta
+      = link_to 'Confirm your account', confirmation_url(@resource, confirmation_token: @token)

app/views/devise/mailer/confirmation_instructions.text.erb

+Welcome, <%= @resource.name %>!
+
+<% if @resource.unconfirmed_email.present? %>
+You can confirm your email (<%= @resource.unconfirmed_email %>) through the link below:
+<% else %>
+You can confirm your account through the link below:
+<% end %>
+
+<%= confirmation_url(@resource, confirmation_token: @token) %>

app/views/layouts/devise_mailer.html.haml

+!!! 5
+%html
+  %head
+    %meta(content='text/html; charset=UTF-8' http-equiv='Content-Type')
+    = stylesheet_link_tag 'mailers/devise'
+
+  %body
+    %table#wrapper
+      %tr
+        %td
+          %table#header
+            %td{valign: "top"}
+              = image_tag('mailers/gitlab_header_logo.png', id: 'logo', alt: 'GitLab Wordmark')
+
+          %table#body
+            %tr
+              %td#body-container
+                = yield
+
+          - if Gitlab.com?
+            %table#footer
+              %tr
+                %td#tanuki
+                  = image_tag('mailers/gitlab_tanuki_2x.png', alt: 'GitLab Logo')
+              %tr
+                %td#tagline
+                  Everyone can contribute
+              %tr
+                %td#social
+                  = link_to 'Blog',     'https://about.gitlab.com/blog/'
+                  = link_to 'Twitter',  'https://twitter.com/gitlab'
+                  = link_to 'Facebook', 'https://www.facebook.com/gitlab/'
+                  = link_to 'YouTube',  'https://www.youtube.com/channel/UCnMGQ8QHMAnVIsI3xJrihhg'
+                  = link_to 'LinkedIn', 'https://www.linkedin.com/company/gitlab-com'

config/application.rb

@@ -80,7 +80,7 @@ module Gitlab
     config.assets.precompile << "*.png"
     config.assets.precompile << "print.css"
     config.assets.precompile << "notify.css"
-    config.assets.precompile << "mailers/repository_push_email.css"
+    config.assets.precompile << "mailers/*.css"
 
     # Version of your assets, change this if you want to expire all your assets
     config.assets.version = '1.0'

config/environments/development.rb

@@ -39,6 +39,7 @@ Rails.application.configure do
   config.action_mailer.delivery_method = :letter_opener_web
   # Don't make a mess when bootstrapping a development environment
   config.action_mailer.perform_deliveries = (ENV['BOOTSTRAP'] != '1')
+  config.action_mailer.preview_path = 'spec/mailers/previews'
 
   config.eager_load = false
 end

config/initializers/premailer.rb

@@ -3,6 +3,6 @@ Premailer::Rails.config.merge!(
   generate_text_part: false,
   preserve_styles: true,
   remove_comments: true,
-  remove_ids: true,
+  remove_ids: false,
   remove_scripts: false
 )

spec/mailers/previews/devise_mailer_preview.rb

+class DeviseMailerPreview < ActionMailer::Preview
+  def confirmation_instructions_for_signup
+    user = User.new(name: 'Jane Doe', email: 'signup@example.com')
+    DeviseMailer.confirmation_instructions(user, 'faketoken', {})
+  end
+
+  def confirmation_instructions_for_new_email
+    user = User.last
+    DeviseMailer.confirmation_instructions(user, 'faketoken', {})
+  end
+end