Skip to content
Snippets Groups Projects
Unverified Commit 5c9008e1 authored by Samuel Couillard's avatar Samuel Couillard Committed by GitHub
Browse files

Fix Email styling (#4675)

* Fix ActivateAccount and ResetPassword email design

* esf

* Rubo

* Add Invitation email

* Fix specs
parent 6a49f6b6
No related branches found
No related tags found
No related merge requests found
# frozen_string_literal: true
class UserMailer < ApplicationMailer
# TODO: Amir - add i18n.
# rubocop:disable Rails/I18nLocaleTexts
before_action :branding
# Sends a test email
def test_email
mail(to: params[:to], subject: params[:subject])
......@@ -13,7 +13,7 @@ class UserMailer < ApplicationMailer
@reset_url = params[:reset_url]
@expires_in = params[:expires_in]
mail(to: email_address_with_name(@user.email, @user.name), subject: 'Reset Password')
mail(to: email_address_with_name(@user.email, @user.name), subject: t('email.reset.password_reset'))
end
def activate_account_email
......@@ -21,14 +21,19 @@ class UserMailer < ApplicationMailer
@activation_url = params[:activation_url]
@expires_in = params[:expires_in]
mail(to: email_address_with_name(@user.email, @user.name), subject: 'Account Activation')
mail(to: email_address_with_name(@user.email, @user.name), subject: t('email.activation.account_activation'))
end
def invitation_email
@name = params[:name]
@signup_url = params[:signup_url]
mail(to: @email, subject: 'Invitation to join BigBlueButton')
mail(to: @email, subject: t('email.invitation.invitation_to_join'))
end
def branding
branding_hash = SiteSetting.includes(:setting).where(settings: { name: %w[PrimaryColor BrandingImage] }).pluck(:'settings.name', :value).to_h
@brand_image = branding_hash['BrandingImage']
@brand_color = branding_hash['PrimaryColor']
end
# rubocop:enable Rails/I18nLocaleTexts
end
......@@ -7,7 +7,19 @@
</style>
</head>
<body>
<body style="background-color: whitesmoke;">
<div style="text-align:center; font-family:'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif">
<% if @brand_image %>
<%= image_tag @brand_image, :style => "max-width: 300px; max-height: 200px; margin-top: 64px; margin-bottom: 1.5rem; display: block; margin-left: auto; margin-right: auto;" %>
<% end %>
<div style="max-width: 800px; display:block; margin-left:auto; margin-right: auto; border-radius: 12px; background-color: white; box-shadow: 0 0.125rem 0.25rem rgb(33 37 41 / 8%);">
<div style="padding: 64px;">
<%= yield %>
</div>
</div>
</div>
</body>
</html>
<%# TODO: Amir - Revisit this (i18n, styling, template,, add in logo, ...). %>
<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">
<h1 style="margin-bottom:30px"> <%= t('email.activation.line0', name: @user.name) %> </h1>
<p style="font-size: 40px; margin-bottom: 20px;"> <%= t('email.activation.welcome_to_bbb') %> </p>
<p style="margin-bottom:20px;"> <%= t('email.activation.line1') %> </p>
<p style="font-size: 24px;"> <%= t('email.activation.get_started') %> </p>
<p style="margin-bottom:20px;"> <%= t('email.activation.line2') %> </p>
<a href="<%= @activation_url %>" target="_blank">
<button style="background-color: <%= @brand_color %>; border-radius: 10px; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; font-weight: 600; margin-top: 16px; margin-bottom: 64px;">
<%= t('email.activation.activate_account') %>
</button>
</a>
<p style="margin-bottom:20px;"> <%= t('email.activation.line3') %> </p>
<p style="margin-bottom:20px;"> <%= t('email.activation.line4') %> </p>
<a href="<%= @activation_url %>" target="_blank"> <%= t('email.activation.line5') %> </a>
<p> <%= t('email.activation.line6', time: time_ago_in_words(@expires_in)) %> </p>
<p> <%= t('email.activation.line7') %> </p>
</div>
</div>
\ No newline at end of file
<p> <%= t('email.link_expires', time: time_ago_in_words(@expires_in)) %> </p>
<p> <%= t('email.activation.if_link_expires') %> </p>
\ No newline at end of file
---
<%= t('email.activation.line0', name: @user.name) %>
<%= t('email.activation.line1') %>
<%= t('email.activation.line2') %>
<%= t('email.activation.line3') %>
<%= t('email.activation.line4') %>
<%= t('email.activation.line5') %> <%= @activation_url %>
<%= t('email.activation.line6', time: time_ago_in_words(@expires_in)) %>
<%= t('email.activation.line7') %>
<%= t('email.activation.welcome_to_bbb') %>
<%= t('email.activation.get_started') %>
<%= t('email.activation.activate_account') %> <%= @activation_url %>
<%= t('email.link_expires', time: time_ago_in_words(@expires_in)) %>
<%= t('email.activation.if_link_expires') %>
---
\ No newline at end of file
<%# TODO: Amir - Revisit this (i18n, styling, template,, add in logo, ...). %>
<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">
<p style="font-size: 40px; margin-bottom: 20px;"><%= t('email.invitation.invitation_to_join') %></p>
<h1 style="margin-bottom:30px"><%= t('email.invitation.line0') %></h1>
<p style="font-size: 24px;"><%= t('email.invitation.you_have_been_invited', name: @name) %></p>
<p><%= t('email.invitation.line1', name: @name) %></p>
<p><%= t('email.invitation.get_started') %></p>
<p><%= t('email.invitation.line2') %></p>
<a href="<%= @signup_url %>">
<button style="background-color: <%= @brand_color %>; border-radius: 10px; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; font-weight: 600; margin-top: 16px; margin-bottom: 64px;">
<%= t('email.invitation.sign_up') %>
</button>
</a>
<p style="margin-bottom:35px;"><%= t('email.invitation.line3') %></p>
<p style="margin-bottom:35px;"><%= t('email.invitation.valid_invitation') %></p>
<a style="color: #ffffff; padding: 10px 15px; box-shadow: 0 2px 4px 0 rgba(0,0,0,.25);border: 1px solid transparent;text-decoration:none;" href="<%= @signup_url %>">
<%= t('email.invitation.line4') %>
</a>
</div>
</div>
---
<%= t('email.invitation.line0') %>
<%= t('email.invitation.line1', name: @name) %>
<%= t('email.invitation.line2') %>
<%= t('email.invitation.line3') %>
<%= t('email.invitation.line4') %> <%= @signup_url %>
<%= t('email.invitation.invitation_to_join') %>
<%= t('email.invitation.you_have_been_invited', name: @name) %>
<%= t('email.invitation.get_started') %>
<%= t('email.invitation.sign_up') %> <%= @signup_url %>
<%= t('email.invitation.valid_invitation') %>
---
<%# TODO: Revisit this (i18n, styling, template,, add in logo, ...). %>
<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">
<h1 style="margin-bottom:30px"> <%= t('email.reset.line0') %></h1>
<p style="font-size: 40px; margin-bottom: 20px;"> <%= t('email.reset.password_reset') %> </p>
<p><%= t('email.reset.line1', email: @user.email) %> </p>
<p style="font-size: 24px;"> <%= t('email.reset.password_reset_requested', email: @user.email) %> </p>
<p style="margin-bottom:45px;"><%= t('email.reset.line2') %> </p>
<a href="<%= @reset_url %>" target="_blank">
<button style="background-color: <%= @brand_color %>; border-radius: 10px; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; font-weight: 600; margin-top: 16px; margin-bottom: 64px;">
<%= t('email.reset.reset_password') %>
</button>
</a>
<a href="<%= @reset_url %>" target="_blank"><%= t('email.reset.line3') %></a>
<p><%= t('email.link_expires', time: time_ago_in_words(@expires_in)) %> </p>
<p><%= t('email.reset.ignore_request') %> </p>
<p style="margin-top:45px;"><%= t('email.reset.line4') %> </p>
<p><%= t('email.reset.line5', time: time_ago_in_words(@expires_in)) %> </p>
</div>
</div>
\ No newline at end of file
---
<%= t('email.reset.line0') %>
<%= t('email.reset.line1', email: @user.email) %>
<%= t('email.reset.line2') %>
<%= t('email.reset.line3') %> <%= @reset_url %>
<%= t('email.reset.line4') %>
<%= t('email.reset.line5', time: time_ago_in_words(@expires_in)) %> ---
<%= t('email.reset.password_reset') %>
<%= t('email.reset.password_reset_requested', email: @user.email) %>
<%= t('email.reset.reset_password') %> <%= @reset_url %>
<%= t('email.link_expires', time: time_ago_in_words(@expires_in)) %>
<%= t('email.reset.ignore_request') %>
---
\ No newline at end of file
......@@ -34,25 +34,22 @@ en:
moderator_message: "To invite someone to the meeting, send them this link:"
access_code: "Access Code: %{code}"
email:
link_expires: The link will expire in %{time}.
activation:
line0: Welcome %{name}!
line1: There's only one step left to start using and leverage what Greenlight and BigBlueButton has to offer!
line2: You are invited to verifiy your identity by following the link below to activate your account.
line3: Activating your account will enable you to leverage all of Greenlight and BigBlueButton features!
line4: You can create rooms, host sessions, share recordings and collaborate with others!
line5: Activate My Account
line6: This link will expire in %{time}
line7: You can still login to your account to get a new activation link if this email expires.
account_activation: Account Activation
welcome_to_bbb: Welcome to BigBlueButton!
get_started: To get started, please activate your account by clicking on the button below.
activate_account: Activate Account
if_link_expires: If the link expires, please log in and request a new activation email.
invitation:
line0: Invitation to join BigBlueButton
line1: You have been invited to your own personal space by %{name}.
line2: To signup using your email, click the button below and follow the steps.
line3: The invite is only valid for 48 hours.
line4: Sign Up
invitation_to_join: Invitation to join BigBlueButton
you_have_been_invited: You have been invited to create a BigBlueButton account by %{name}.
get_started: To sign up, please click the button below and follow the steps.
valid_invitation: The invitation is valid for 48 hours.
sign_up: Sign Up
reset:
line0: Password Reset
line1: A password reset has been requested for the email %{email}
line2: If you requested this reset, then please click the link below to reset your password:"
line3: Reset Password
line4: You can safely ignore this email if you did not make this request.
line5: This link will expire in %{time}.
password_reset: Password Reset Request
password_reset_requested: A password reset has been requested for %{email}
password_reset_confirmation: To reset your password, please click on the button below"
reset_password: Reset Password
ignore_request: If you did not make a request to change your password, please ignore this email.
......@@ -10,11 +10,11 @@ describe UserMailer, type: :mailer do
mail = described_class.with(user:, reset_url: 'https://reset.password.now/token', expires_in: 1.day.from_now).reset_password_email
expect(mail.subject).to eq 'Reset Password'
expect(mail.subject).to eq 'Password Reset Request'
expect(mail.to).to eq([user.email])
expect(mail.body.encoded).to match(user.email)
expect(mail.body.encoded).to match('href="https://reset.password.now/token"')
expect(mail.body.encoded).to match('This link will expire in 1 day.')
expect(mail.body.encoded).to match('The link will expire in 1 day.')
end
end
......@@ -27,9 +27,8 @@ describe UserMailer, type: :mailer do
expect(mail.subject).to eq 'Account Activation'
expect(mail.to).to eq([user.email])
expect(mail.body.encoded).to match(user.name)
expect(mail.body.encoded).to match('href="https://activate.account.now/token"')
expect(mail.body.encoded).to match('This link will expire in 1 day.')
expect(mail.body.encoded).to match('The link will expire in 1 day.')
end
end
......
......@@ -16,4 +16,10 @@ class UserMailerPreview < ActionMailer::Preview
UserMailer.with(user: fake_user.new('user', 'user@users.com'), expires_in: 1.hour.from_now, activation_url: 'https://example.com/activate').activate_account_email
end
def invitation_email
fake_user = Struct.new(:name, :email)
UserMailer.with(user: fake_user.new('user', 'user@users'), expires_in: 1.hour.from_now, invitation_url: 'https://example.com/invite').invitation_email
end
end
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment