Skip to content

Commit 27d3883

Browse files
adeel-ahmad-awanAdeel AhmadAdeel AhmadAdeel Ahmad
authored
#199 integrate email templates in the portal for sign up and forgot password (#222)
Co-authored-by: Adeel Ahmad <[email protected]> Co-authored-by: Adeel Ahmad <[email protected]> Co-authored-by: Adeel Ahmad <[email protected]>
1 parent 71e200f commit 27d3883

18 files changed

+181
-86
lines changed

Diff for: ‎app/assets/images/emails/reset_password.png

301 KB
Loading

Diff for: ‎app/assets/images/emails/welcome.png

214 KB
Loading

Diff for: ‎app/views/admin_mailer/event_updated_by_user.html.erb

+18-16
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,39 @@
1-
<p style="font-size: 16px; color: #333;">Dear Admin,</p>
2-
3-
<p style="font-size: 16px; color: #333;">
1+
<%= link_to(root_url) do %>
2+
<%= image_tag(TeSS::Config.site['logo_email'], alt: TeSS::Config.site['title_short'],
3+
title: "Visit #{TeSS::Config.site['title_short']}",
4+
style: 'width: 100%;', target: '_blank') %>
5+
<% end %>
6+
<br>
7+
<h3><strong>Dear Admin,</strong></h3>
8+
9+
<p style="color: #333;">
410
The event titled <strong><%= @event.title %></strong> has been updated by
511
<strong><%= @event.user.username %></strong>.
612
</p>
713

8-
<p style="font-size: 16px; color: #333;">
14+
<p style="color: #333;">
915
The event status has been changed to <strong><%= Event.event_statuses.key(Event.event_statuses[:awaiting_review]).humanize %></strong> for your review.
1016
</p>
1117

12-
<p style="font-size: 16px; color: #333;">Please review the updated event and user details below:</p>
18+
<p style="color: #333;">Please review the updated event and user details below:</p>
1319

14-
<h3 style="font-size: 18px; color: #0d6efd;">Event Details:</h3>
15-
<ul style="font-size: 16px; color: #333; padding-left: 20px;">
20+
<h3 style="font-size: 18px; color: #045C64;">Event Details:</h3>
21+
<ul style="color: #333; padding-left: 20px;">
1622
<li><strong>Event Title:</strong> <%= @event.title %></li>
17-
<li><strong>URL:</strong> <a href="<%= @event.url %>" target="_blank" style="color: #0d6efd;"><%= @event.url %></a>
23+
<li><strong>URL:</strong> <a href="<%= @event.url %>" target="_blank" style="color: #045C64;"><%= @event.url %></a>
1824
</li>
1925
<li><strong>Status:</strong> <%= @event.event_status.humanize %></li>
2026
</ul>
2127

22-
<h3 style="font-size: 18px; color: #0d6efd;">User Details:</h3>
23-
<ul style="font-size: 16px; color: #333; padding-left: 20px;">
28+
<h3 style="font-size: 18px; color: #045C64;">User Details:</h3>
29+
<ul style="color: #333; padding-left: 20px;">
2430
<li><strong>Username:</strong> <%= @event.user.username %></li>
2531
<li><strong>Email:</strong> <%= @event.user.email %></li>
2632
<li><strong>Role:</strong> <%= @event.user.role&.title || 'Unknown' %></li>
2733
<li><strong>Last Sign-In IP:</strong> <%= @event.user.last_sign_in_ip || 'Not available' %></li>
2834
<li><strong>Sign-In Count:</strong> <%= @event.user.sign_in_count %></li>
2935
</ul>
3036

31-
<p style="font-size: 16px; color: #333;">You can review the event details and approve or reject it using the link below:</p>
32-
<a style="display: inline-block; margin-top: 10px; padding: 12px 15px; background-color: #0d6efd; color: #ffffff; text-decoration: none; border-radius: 5px; font-size: 14px; font-weight: 500; text-align: center; transition: background-color 0.3s ease;"
37+
<p style="color: #333;">You can review the event details and approve or reject it using the link below:</p>
38+
<a style="display: inline-block; margin-top: 10px; padding: 12px 15px; background-color: #045C64; color: #ffffff; text-decoration: none; border-radius: 5px; font-size: 14px; font-weight: 500; text-align: center; transition: background-color 0.3s ease;"
3339
href="<%= root_url %>admin/event/<%= @event.id %>/edit">Review Event</a>
34-
35-
<p style="font-size: 16px; color: #333;">Thank you!</p>
36-
37-
<br/>

Diff for: ‎app/views/admin_mailer/event_updated_by_user.text.erb

-2
Original file line numberDiff line numberDiff line change
@@ -20,5 +20,3 @@ User Details:
2020

2121
You can review the event using the following link:
2222
<%= root_url %>admin/event/<%= @event.id %>/edit
23-
24-
Thank you!

Diff for: ‎app/views/admin_mailer/review_event.html.erb

+28-23
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,41 @@
1-
<p style="font-size: 16px; color: #333;">Dear Admin,</p>
2-
3-
<p style="font-size: 16px; color: #333;">An event titled <strong><%= @event.title %></strong> has been submitted by
4-
<strong><%= @event.user.username %></strong> and is pending your review.</p>
5-
6-
<p style="font-size: 16px; color: #333;">Please review the event and user details below:</p>
7-
8-
<h3 style="font-size: 18px; color: #0d6efd;">Event Details:</h3>
9-
<ul style="font-size: 16px; color: #333; padding-left: 20px;">
1+
<%= link_to(root_url) do %>
2+
<%= image_tag(TeSS::Config.site['logo_email'], alt: TeSS::Config.site['title_short'],
3+
title: "Visit #{TeSS::Config.site['title_short']}",
4+
style: 'width: 100%;', target: '_blank') %>
5+
<% end %>
6+
<br>
7+
<h3> <strong>Dear Admin,</strong> </h3>
8+
9+
<p style=" color: #333; margin: 0 0 20px;">
10+
An event titled <strong><%= @event.title %></strong> has been submitted by
11+
<strong><%= @event.user.username %></strong> and is <strong style="color: #045C64;">pending your review</strong>.
12+
</p>
13+
14+
<p style=" color: #333; margin: 0 0 20px;">Please review the event and user details below:</p>
15+
16+
<h3 style="font-size: 18px; color: #045C64; margin: 0 0 10px;">Event Details:</h3>
17+
<ul style=" color: #333; padding-left: 20px; margin: 0 0 20px;">
1018
<li><strong>Event Title:</strong> <%= @event.title %></li>
11-
<li><strong>URL:</strong> <a href="<%= @event.url %>" target="_blank" style="color: #0d6efd;"><%= @event.url %></a>
19+
<li><strong>URL:</strong>
20+
<a href="<%= @event.url %>" target="_blank" style="color: #045C64; text-decoration: none;"><%= @event.url %></a>
1221
</li>
1322
<li><strong>Status:</strong> <%= @event.event_status.humanize %></li>
1423
</ul>
1524

16-
<h3 style="font-size: 18px; color: #0d6efd;">User Details:</h3>
17-
<ul style="font-size: 16px; color: #333; padding-left: 20px;">
25+
<h3 style="font-size: 18px; color: #045C64; margin: 0 0 10px;">User Details:</h3>
26+
<ul style=" color: #333; padding-left: 20px; margin: 0 0 20px;">
1827
<li><strong>Username:</strong> <%= @event.user.username %></li>
1928
<li><strong>Email:</strong> <%= @event.user.email %></li>
2029
<li><strong>Role:</strong> <%= @event.user.role&.title || 'Unknown' %></li>
2130
<li><strong>Last Sign-In IP:</strong> <%= @event.user.last_sign_in_ip || 'Not available' %></li>
2231
<li><strong>Sign-In Count:</strong> <%= @event.user.sign_in_count %></li>
2332
</ul>
2433

25-
<p style="font-size: 16px; color: #333;">You can view more details and approve or reject the event using the link
26-
below:</p>
27-
28-
<a style="display: inline-block; margin-top: 10px; padding: 12px 15px; background-color: #0d6efd; color: #ffffff; text-decoration: none; border-radius: 5px; font-size: 14px; font-weight: 500; text-align: center; transition: background-color 0.3s ease;"
29-
href="<%= root_url %>admin/event/<%= @event.id %>/edit">Review Event</a>
30-
31-
<p style="font-size: 16px; color: #333;">If you have any questions, please reply to this email or contact us at <a
32-
href="mailto:<%= TeSS::Config.contact_email %>" style="color: #0d6efd;"><%= TeSS::Config.contact_email %></a>.</p>
33-
34-
<p style="font-size: 16px; color: #333;">Thank you!</p>
34+
<p style=" color: #333; margin: 0 0 20px;">
35+
You can view more details and approve or reject the event using the link below:
36+
</p>
3537

36-
<br/>
38+
<a href="<%= root_url %>admin/event/<%= @event.id %>/edit"
39+
style="display: inline-block; margin-top: 10px; padding: 12px 15px; background-color: #045C64; color: #ffffff; text-decoration: none; border-radius: 5px; font-size: 14px; font-weight: 500; text-align: center;">
40+
Review Event
41+
</a>

Diff for: ‎app/views/admin_mailer/review_event.text.erb

-2
Original file line numberDiff line numberDiff line change
@@ -18,5 +18,3 @@ You can review the event using the following link:
1818
<%= root_url %>admin/event/<%= @event.id %>/edit
1919

2020
If you have any questions, please reply to this email or contact us at <%= TeSS::Config.contact_email %>.
21-
22-
Thank you!

Diff for: ‎app/views/devise/mailer/confirmation_instructions.html.erb

+13-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,15 @@
1-
<p><%= t("devise.mailer.welcome", email: @email)%></p>
1+
<%= image_tag("emails/welcome.png", alt: TeSS::Config.site['title_short'],
2+
title: "Visit #{TeSS::Config.site['title_short']}",
3+
style: 'width: 100%;', target: '_blank') %>
24

3-
<p><%= t("devise.mailer.confirmation_instructions.confirm_through_link")%></p>
5+
<h3><%= t("devise.mailer.hello", email: @email)%></h3>
6+
7+
<p><%= t("devise.mailer.confirmation_instructions.additional_message")%></p>
8+
9+
<p style="text-align: center;">
10+
<a href="<%= confirmation_url(@resource, confirmation_token: @token) %>"
11+
style="display: inline-block; padding: 12px 24px; background-color: #045C64; color: #ffffff; text-decoration: none; border-radius: 5px; font-weight: 500; text-align: center; transition: background-color 0.3s ease;">
12+
Confirm your email address
13+
</a>
14+
</p>
415

5-
<p><%= link_to 'Confirm my account', confirmation_url(@resource, confirmation_token: @token) %></p>

Diff for: ‎app/views/devise/mailer/confirmation_instructions.text.erb

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
Hello <%= @email %>,
2+
3+
You’re one step away from joining the portal for life science training in Sweden.
4+
5+
To confirm your email address, please click the link below or copy and paste it into your browser:
6+
<%= confirmation_url(@resource, confirmation_token: @token) %>

Diff for: ‎app/views/devise/mailer/reset_password_instructions.html.erb

+9-5
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,12 @@
1-
<p><%= t("devise.mailer.hello", email: @resource.email) %></p>
1+
<%= image_tag("emails/reset_password.png", alt: TeSS::Config.site['title_short'],
2+
title: "Visit #{TeSS::Config.site['title_short']}",
3+
style: 'width: 100%;', target: '_blank') %>
24

3-
<p><%= t("devise.mailer.reset_password_instructions.password_change_request")%></p>
5+
<h3><%= t("devise.mailer.hello", email: @resource.username) %></h3>
46

5-
<p><%= link_to 'Change my password', edit_password_url(@resource, reset_password_token: @token) %></p>
7+
<p><%= t("devise.mailer.reset_password_instructions.password_change_request")%></p>
68

7-
<p><%= t("devise.mailer.reset_password_instructions.ignore_if_not_you")%></p>
8-
<p><%= t("devise.mailer.reset_password_instructions.password_change_waits")%></p>
9+
<p style="text-align: center;">
10+
<%= link_to 'Change my password', edit_password_url(@resource, reset_password_token: @token),
11+
style: 'display: inline-block; padding: 12px 24px; background-color: #045C64; color: #ffffff; text-decoration: none; border-radius: 5px; font-weight: 500; text-align: center; transition: background-color 0.3s ease;' %>
12+
</p>

Diff for: ‎app/views/devise/mailer/reset_password_instructions.text.erb

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<%= t("devise.mailer.hello", email: @resource.username) %>
2+
3+
<%= t("devise.mailer.reset_password_instructions.password_change_request")%>
4+
5+
<%= link_to 'Change my password', edit_password_url(@resource, reset_password_token: @token)%>

Diff for: ‎app/views/layouts/mailer.html.erb

+60-9
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,68 @@
11
<html>
22
<head>
33
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
4+
<!-- Media Query for Small Screens -->
5+
<style>
6+
p, .email_footer, a, ul, li {
7+
font-size: 14px;
8+
}
9+
10+
@media (max-width: 600px) {
11+
.email_footer {
12+
table, td {
13+
width: 100% !important;
14+
display: block;
15+
text-align: left;
16+
}
17+
18+
td {
19+
padding: 10px 0;
20+
}
21+
22+
td + td {
23+
padding-top: 10px;
24+
}
25+
26+
td p, td a {
27+
font-size: 16px;
28+
}
29+
}
30+
}
31+
</style>
432
</head>
5-
<body style="font-family: sans-serif; width: 100%; -webkit-font-smoothing: antialiased; background-color: #fff">
6-
<div style="margin: 0 auto; max-width: 600px; padding: 20px;">
7-
<%= yield %>
33+
<body style="font-family: Arial, sans-serif; color: #333; line-height: 1.6; background-color: #ffffff; margin: 0; padding: 0;">
834

9-
<br/><br/>
10-
<%= link_to(root_url) do %>
11-
<%= image_tag(TeSS::Config.site['logo_email'], alt: TeSS::Config.site['title_short'],
12-
title: "Visit #{TeSS::Config.site['title_short']}",
13-
style: 'height: 100px;', target: '_blank') %>
14-
<% end %>
35+
<!-- Email Container -->
36+
<div style="margin: 0 auto; max-width: 600px; padding: 20px; background-color: #ffffff; box-sizing: border-box;">
37+
38+
<!-- Email Content -->
39+
<div>
40+
<%= yield %>
1541
</div>
42+
43+
<p style="margin-top: 20px;">
44+
Thank you for being a part of our community!
45+
</p>
46+
47+
<!-- Footer -->
48+
<hr style="border: none; border-top: 1px solid #ccc; margin: 20px 0;">
49+
50+
<table class="email_footer" width="100%" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
51+
<tr>
52+
<!-- Left Section -->
53+
<td style="width: 50%; text-align: right; vertical-align: top; padding: 10px;">
54+
<p style="margin: 0; font-size: 14px; font-weight: bold; color: #333;">SciLifeLab Training Hub</p>
55+
<a href="<%= root_url %>events" style="font-size: 14px; color: #045C64; text-decoration: none;">Check out our
56+
upcoming courses</a>
57+
</td>
58+
<!-- Right Section -->
59+
<td style="width: 50%; text-align: left; vertical-align: top; padding: 10px;">
60+
<p style="margin: 0; font-size: 14px; font-weight: bold; color: #333;">Get in touch</p>
61+
<a href="mailto:<%= AdminMailer::ADMIN_EMAIL_ADDRESS %>" style="font-size: 14px; color: #045C64; text-decoration: none;"><%= AdminMailer::ADMIN_EMAIL_ADDRESS %></a>
62+
</td>
63+
</tr>
64+
</table>
65+
<hr style="border: none; border-top: 1px solid #ccc; margin: 20px 0;">
66+
</div>
1667
</body>
1768
</html>

Diff for: ‎app/views/layouts/mailer.text.erb

+4
Original file line numberDiff line numberDiff line change
@@ -1 +1,5 @@
11
<%= yield %>
2+
3+
Thank you for being a part of our community!
4+
- Check out our upcoming courses at <%= root_url %>events
5+
- Get in touch at <%= AdminMailer::ADMIN_EMAIL_ADDRESS %>

Diff for: ‎app/views/user_mailer/event_published.html.erb

+13-10
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,30 @@
1+
<%= link_to(root_url) do %>
2+
<%= image_tag(TeSS::Config.site['logo_email'], alt: TeSS::Config.site['title_short'],
3+
title: "Visit #{TeSS::Config.site['title_short']}",
4+
style: 'width: 100%;', target: '_blank') %>
5+
<% end %>
6+
<br>
7+
18
<div style="font-family: Arial, sans-serif; color: #333; line-height: 1.6;">
2-
<p style="font-size: 16px;">Hi <strong><%= @event.user.username %></strong>,</p>
9+
<h3>Hi <strong><%= @event.user.username %></strong>,</h3>
310

4-
<p style="font-size: 16px;">
11+
<p>
512
Your training event titled "<strong><%= @event.title %></strong>" is now live on the Training Portal!
613
</p>
714

8-
<p style="font-size: 16px; margin-top: 20px;">
15+
<p style="margin-top: 20px;">
916
You can view and manage your event using the following link:
1017
<a href="<%= event_url(@event) %>"
1118
style="color: #045C64; text-decoration: underline; font-weight: bold;">
1219
View Event
1320
</a>.
1421
</p>
1522

16-
<p style="font-size: 16px; margin-top: 20px;">
23+
<p style=" margin-top: 20px;">
1724
If you've found a typo or need to update your venue, you can do so via the 'Edit' button on your event page.
1825
</p>
1926

20-
<p style="font-size: 16px;">
27+
<p>
2128
Training events are pulled from the Training Portal into the SciLifeLab Newsletter every other week and shared with communities based on keywords. We hope your event will attract many registrations!
2229
</p>
23-
24-
<p style="font-size: 16px; margin-top: 20px;">
25-
Thank you for being a part of our community!
26-
</p>
27-
</div>
30+
</div>

Diff for: ‎app/views/user_mailer/event_published.text.erb

-2
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,3 @@ You can view and manage your event using the following link:
66
<%= event_url(@event) %>
77

88
If you've found a typo or need to update your venue you can do so via the 'Edit' button on your event page. Training events are pulled from the Training Portal into the SciLifeLab Newsletter every other week and shared with communities based on keywords, so we hope you will have many registrations!
9-
10-
Thank you for being a part of our community!

Diff for: ‎app/views/user_mailer/event_submitted.html.erb

+11-11
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,20 @@
1+
<%= link_to(root_url) do %>
2+
<%= image_tag(TeSS::Config.site['logo_email'], alt: TeSS::Config.site['title_short'],
3+
title: "Visit #{TeSS::Config.site['title_short']}",
4+
style: 'width: 100%;', target: '_blank') %>
5+
<% end %>
6+
<br>
17
<div style="font-family: Arial, sans-serif; color: #333; line-height: 1.6;">
28
<!-- User Greeting -->
3-
<p style="font-size: 16px;">Hi <strong><%= @event.user.username %></strong>,</p>
9+
<h3>Hi <strong><%= @event.user.username %></strong>,</h3>
410

511
<!-- Introduction Section -->
6-
<p style="font-size: 16px; margin-top: 20px;">
12+
<p style=" margin-top: 20px;">
713
Your training event has been successfully submitted on the SciLifeLab Training Portal and is
814
<strong style="color: #045C64;">currently under review by our team</strong>.
915
</p>
1016

11-
<p style="font-size: 16px; margin-top: 20px;">Next Steps:</p>
17+
<p style=" margin-top: 20px;">Next Steps:</p>
1218
<ul style="list-style-type: disc; padding-left: 20px; font-size: 15px; margin-bottom: 20px;">
1319
<li>If approved, your training event will be published and visible on the SciLifeLab Training Portal.</li>
1420
<li>If any changes are required, you will receive an email from one of our admins with details.</li>
@@ -18,7 +24,7 @@
1824
</ul>
1925

2026
<!-- Event Details Section -->
21-
<p style="font-size: 16px;">
27+
<p>
2228
Below are the details of your submitted training event:
2329
</p>
2430
<ul style="list-style-type: none; padding-left: 0; font-size: 15px; margin-bottom: 20px;">
@@ -30,17 +36,11 @@
3036
<li><strong>End Date:</strong> <%= @event.end.strftime('%d %B %Y') %></li>
3137
</ul>
3238

33-
<p style="font-size: 16px; margin-top: 20px;">
39+
<p style=" margin-top: 20px;">
3440
You can view and manage your event using the following link:
3541
<a href="<%= event_url(@event) %>"
3642
style="color: #045C64; text-decoration: underline; font-weight: bold;">
3743
View Event
3844
</a>.
3945
</p>
40-
41-
<!-- Closing Note -->
42-
<p style="font-size: 16px; margin-top: 20px;">
43-
Thank you for being an active part of the SciLifeLab community. We value your contributions to making training
44-
accessible and impactful!
45-
</p>
4646
</div>

Diff for: ‎app/views/user_mailer/event_submitted.text.erb

-2
Original file line numberDiff line numberDiff line change
@@ -15,5 +15,3 @@ Event Details:
1515
End Date: <%= @event.end.strftime('%d %B %Y') %>
1616

1717
You can view and manage your event using the following link: <%= event_url(@event) %>
18-
19-
Thank you for being an active part of the SciLifeLab community. We value your contributions to making training accessible and impactful!

Diff for: ‎config/locales/devise.en.yml

+2-1
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,10 @@ en:
1818
confirmation_instructions:
1919
subject: "Confirmation instructions"
2020
confirm_through_link: "You can confirm your TeSS account email through the link below:"
21+
additional_message: "You're one step away from joining the portal for life science training in Sweden:"
2122
reset_password_instructions:
2223
subject: "Reset password instructions"
23-
password_change_request: "Someone has requested a link to change your password on TeSS. You can do this through the link below."
24+
password_change_request: "Follow the link to reset your Training Portal password:"
2425
ignore_if_not_you: "If you didn't request this, please ignore this email."
2526
password_change_waits: "Your password won't change until you access the link above and create a new one."
2627
unlock_instructions:

Diff for: ‎test/mailers/previews/devise_mailer_preview.rb

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
# frozen_string_literal: true
2+
# Preview all emails at http://localhost:3000/rails/mailers/devise_mailer
3+
class DeviseMailerPreview < ActionMailer::Preview
4+
5+
def confirmation_instructions
6+
Devise::Mailer.confirmation_instructions(User.first, "faketoken")
7+
end
8+
9+
def reset_password_instructions
10+
Devise::Mailer.reset_password_instructions(User.first, "faketoken")
11+
end
12+
end

0 commit comments

Comments
 (0)