GRN-48: Password reset e-mails getting into SPAM folders (#349)

* Changed the way emails look and added an extra string for the user to check their spam folder * Update verify_email.text.erb

GRN-48: Password reset e-mails getting into SPAM folders (#349)
ffff7247 · farhatahmad · Jesus Federico · 56a72ade · ffff7247 · ffff7247
Commit ffff7247 authored Feb 1, 2019 by farhatahmad Committed by Jesus Federico Feb 1, 2019
--- a/app/views/user_mailer/password_reset.html.erb
+++ b/app/views/user_mailer/password_reset.html.erb
@@ -15,18 +15,32 @@
 # You should have received a copy of the GNU Lesser General Public License along
 # with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
 %>
+  <div style="text-align:center; font-family:'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif">
+    <div style="display:inline-block; background-color:#F5F7FB; border:1px solid #d3d3d3; padding: 25px 70px">
+      <%= image_tag(Rails.configuration.branding_image.blank? ? "logo_with_text.png" : Rails.configuration.branding_image) %>
-<h1>Password reset</h1>
+      <h1 style="margin-bottom:30px">Password Reset</h1>
-<p>Please click the link below to reset your password:</p>
+      <p>
+        It seems like you forgot your password for <%= t('bigbluebutton') %>
+      </p>
-<%= link_to "Reset password", edit_password_reset_url(@user.reset_token,
+      <p style="margin-bottom:45px;">
-                                                      email: @user.email,
+        If this is true, please click the link below to reset your password:
-                                                      host: @url) %>
+      </p>
-<p>This link will expire in two hours.</p>
+      <a
+        style="background: #467fcf;color: #ffffff; padding: 10px 15px; box-shadow: 0 2px 4px 0 rgba(0,0,0,.25);border: 1px solid transparent;text-decoration:none;"
+        href="<%= edit_password_reset_url(@user.reset_token, email: @user.email, host: @url) %>">
+        Reset Password
+      </a>
+      <p style="margin-top:45px;">
+        This link will expire in two hours.
+      </p>
      <p>
-If you did not request your password to be reset, please ignore this email and
+        You can safely ignore this email if you did not request a password reset.
-your password will not be changed.
      </p>
+    </div>
+  </div>
--- a/app/views/user_mailer/password_reset.text.erb
+++ b/app/views/user_mailer/password_reset.text.erb
@@ -16,11 +16,13 @@
 # with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
 %>
-Please click the link below to reset your password:
+Password Reset
+It seems like you forgot your password for <%= t('bigbluebutton') %>
+If this is true, please click the link below to reset your password:
 <%= edit_password_reset_url(@user.reset_token,email: @user.email, host: @url) %>
 This link will expire in two hours.
-If you did not request your password to be reset, please ignore this email and
+You can safely ignore this email if you did not request a password reset.
-your password will not be changed.
\ No newline at end of file
--- a/app/views/user_mailer/verify_email.html.erb
+++ b/app/views/user_mailer/verify_email.html.erb
@@ -16,20 +16,27 @@
 # with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
 %>
-<!DOCTYPE html>
+  <div style="text-align:center; font-family:'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif">
-<html>
+    <div style="display:inline-block; background-color:#F5F7FB; border:1px solid #d3d3d3; padding: 25px 70px">
-  <head>
+      <%= image_tag(Rails.configuration.branding_image.blank? ? "logo_with_text.png" : Rails.configuration.branding_image) %>
-    <meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />
-  </head>
+      <h1 style="margin-bottom:30px">Welcome to  <%= t('bigbluebutton') %>!,
-  <body>
+        <%= @user[:name] %></h1>
-    <h1>Welcome to BigBlueButton!, <%= @user.name %></h1>
      <p>
-      You have successfully registered your Greenlight account,
+        You have successfully registered your <%= t('bigbluebutton') %> account, your username is:
-      your username is: <%= @user.email %>.<br>
+        <%= @user[:email] %>.
      </p>
-    <p>
-      To verify your account, just follow this link: <%= link_to 'verify your email', @url %>.
+      <p style="margin-bottom:45px;">
+        To verify your account, just click the button below.
      </p>
-    <p>Thanks for joining and have a great day!</p>
-  </body>
+      <a style="background: #467fcf;color: #ffffff; padding: 10px 15px; box-shadow: 0 2px 4px 0 rgba(0,0,0,.25);border: 1px solid transparent;text-decoration:none;" href="<%= @url %>">
-</html>
+        Verify Account
+      </a>
+      <p style="margin-top:45px;">Thanks for joining and have a great day!</p>
+    </div>
+  </div>
--- a/app/views/user_mailer/verify_email.text.erb
+++ b/app/views/user_mailer/verify_email.text.erb
@@ -16,13 +16,10 @@
 # with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
 %>
+Welcome to <%= t('bigbluebutton') %>!,  <%= @user[:name] %>
-Welcome to Greenlight, <%= @user.name %>
+You have successfully registered your <%= t('bigbluebutton') %> account, your username is: <%= @user[:email] %>.
-===============================================
-You have successfully registered your Greenlight account,
+To verify your account, just follow this link: <%= @url  %>
-your username is: <%= @user.email %>.
-To verify your account, just follow this link: <%= link_to 'verify your email', @url  %>.
 Thanks for joining and have a great day!
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -29,7 +29,7 @@ en:
  delivery_error: An error occured during email delivery. Please contact an administrator!
  docs: Documentation
  email: Email
-  email_sent: Email Sent!
+  email_sent: Email Sent! (Please check your Spam folder if you haven't received it)
  enter_your_name: Enter your name!
  errors:
    internal: