Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

DBC22-3244: HTML emails for route notifications and verification email #800

Merged
merged 5 commits into from
Jan 9, 2025
Merged

DBC22-3244: HTML emails for route notifications and verification email #800

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e71f6dc
DBC22-3244: HTML emails for route notifications and verification email
minORC Jan 7, 2025
002dd46
DBC22-3244: fixed buffer filter and email template
ray-oxd Jan 8, 2025
b449176
DBC22-3244: working image attachment
ray-oxd Jan 8, 2025
779548f
DBC22-2879: verification redirection and success message
ray-oxd Jan 9, 2025
45fa6f8
DBC22-2879: polishing
ray-oxd Jan 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
87 changes: 83 additions & 4 deletions src/backend/apps/authentication/templates/email/email_verification.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,83 @@
<p>
Please click the link below to verify your email address: \n
{{verification_url}}
</p>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Email Verification</title>
</head>
<body style="margin:0; padding:0; font-family:Arial, sans-serif; font-size:16px; line-height:1.5rem; color:#2D2D2D;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#F1F8FE" style="padding:50px">
<tr>
<td align="center" valign="top">
<!-- Email container -->
<table width="620" cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#FFFFFF" style="padding:24px; border-top: 4px solid #013366">
<!-- Logo Header -->
<tr>
<td>
<a href="https://beta.drivebc.ca/" target="_blank" rel="noopener noreferrer" style="display:inline-block">
<img src="cid:drivebclogo" alt="DriveBC Logo" />
</a>
</td>
</tr>
<!-- Body -->
<tr>
<td>
<table>
<tr>
<td style="font-size:2rem;font-weight:700;padding-top:30px">
Almost there!
</td>
</tr>
<tr>
<td style="padding-top:30px; padding-bottom:24px">
To finish creating your account, we need you to verify your email.
Once verified, you’ll be able to save cameras and routes that matter to you, and setup personalized notifications for delays that could affect a trip.
</td>
</tr>
</table>
<table>
<tr>
<td align="center" bgcolor="#255A90" style="border-radius:4px; width: 160px;">
<a href={{ verification_url }} style="color:#ffffff; text-decoration: none; font-size: 0.875rem; font-weight: 700">
<div style="padding: 12px">
Verify email
</div>
</a>
</td>
</tr>
</table>
<table>
<tr>
<td style="font-weight:700; padding-top: 24px">
If you didn’t initiate this request, please disregard this email.
</td>
</tr>
</table>
</td>
</tr>
<!-- Footer -->
<tr>
<td >
<table>
<tr>
<td style="padding-top:30px">
Your DriveBC team.
</td>
</tr>
<tr>
<td style="padding-top:30px; font-size:0.75rem; color:#605E5C">
Add [email protected] to your address book to ensure that you receive these notifications to your inbox.
</td>
</tr>
</table>
</td>
</tr>

</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
25 changes: 23 additions & 2 deletions src/backend/apps/authentication/views.py
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import os
from email.mime.image import MIMEImage
from pathlib import Path

import environ
Expand Down Expand Up @@ -129,7 +131,12 @@ def get(self, request, uidb64, token):
if user is not None and EmailVerificationTokenGenerator().check_token(user, token):
user.verified = True
user.save()
return HttpResponseRedirect(env("FRONTEND_BASE_URL") + 'account') # Redirect to the account page

my_routes = request.GET.get('my_routes')
redirect_url = env("FRONTEND_BASE_URL") + 'my-routes?verified=true' if my_routes == 'True'\
else env("FRONTEND_BASE_URL") + 'account?verified=true'

return HttpResponseRedirect(redirect_url) # Redirect to the account page

else:
return Response({'error': 'Invalid token'}, status=status.HTTP_400_BAD_REQUEST)
Expand All @@ -145,7 +152,11 @@ def post(self, request):

uid = urlsafe_base64_encode(force_bytes(user.pk))
token = EmailVerificationTokenGenerator().make_token(user)
verification_url = request.build_absolute_uri(reverse('verify-email', kwargs={'uidb64': uid, 'token': token}))

my_routes = request.data.get('my_routes', 'false')
verification_url = request.build_absolute_uri(
reverse('verify-email', kwargs={'uidb64': uid, 'token': token}) + f'?my_routes={my_routes}'
)

context = {
'email': request.user.email,
Expand All @@ -161,6 +172,16 @@ def post(self, request):
env("DRIVEBC_FEEDBACK_EMAIL_DEFAULT"),
[request.user.email]
)

# Attach image with Content-ID
image_path = os.path.join(BASE_DIR, 'src', 'backend', 'static', 'images', 'drivebclogo.png')
with open(image_path, 'rb') as image_file:
img = MIMEImage(image_file.read(), _subtype="png")
img.add_header('Content-ID', '<drivebclogo>')
img.add_header('X-Attachment-Id', 'drivebclogo.png')
img.add_header('Content-Disposition', 'inline', filename='drivebclogo.png')
msg.attach(img)

msg.attach_alternative(html, 'text/html')
msg.send()

Expand Down
53 changes: 36 additions & 17 deletions src/backend/apps/event/tasks.py
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import datetime
import logging
import os
from email.mime.image import MIMEImage
from pathlib import Path
from zoneinfo import ZoneInfo

Expand Down Expand Up @@ -177,22 +179,39 @@ def populate_all_event_data():

def send_event_notifications(updated_event_ids):
for saved_route in SavedRoutes.objects.filter(user__verified=True, notification=True):
updated_interecting_events = Event.objects.filter(id__in=updated_event_ids, location__intersects=saved_route.route)
# Apply a 150m buffer to the route geometry
buffered_route = saved_route.route.buffer(150)
updated_interecting_events = Event.objects.filter(id__in=updated_event_ids, location__intersects=buffered_route)

if updated_interecting_events.count() > 0:
context = {
'events': updated_interecting_events,
'route': saved_route,
}

text = render_to_string('email/event_updated.txt', context)
html = render_to_string('email/event_updated.html', context)

msg = EmailMultiAlternatives(
f'DriveBC route update: {saved_route.label}',
text,
env("DRIVEBC_FEEDBACK_EMAIL_DEFAULT"),
[saved_route.user.email]
)
msg.attach_alternative(html, 'text/html')
msg.send()
for event in updated_interecting_events:

print(f"Event: {event}")

context = {
'event': event,
'route': saved_route,
'user': saved_route.user
}

text = render_to_string('email/event_updated.txt', context)
html = render_to_string('email/event_updated.html', context)

msg = EmailMultiAlternatives(
f'DriveBC route update: {saved_route.label}' if saved_route.label else 'DriveBC route update',
text,
env("DRIVEBC_FEEDBACK_EMAIL_DEFAULT"),
[saved_route.user.email]
)

# Attach image with Content-ID
image_path = os.path.join(BASE_DIR, 'src', 'backend', 'static', 'images', 'drivebclogo.png')
with open(image_path, 'rb') as image_file:
img = MIMEImage(image_file.read(), _subtype="png")
img.add_header('Content-ID', '<drivebclogo>')
img.add_header('X-Attachment-Id', 'drivebclogo.png')
img.add_header('Content-Disposition', 'inline', filename='drivebclogo.png')
msg.attach(img)

msg.attach_alternative(html, 'text/html')
msg.send()
148 changes: 148 additions & 0 deletions src/backend/apps/event/templates/email/advisory.html
View file
Open in desktop

Large diffs are not rendered by default.

148 changes: 148 additions & 0 deletions src/backend/apps/event/templates/email/environment-canada.html
View file
Open in desktop

Large diffs are not rendered by default.

167 changes: 154 additions & 13 deletions src/backend/apps/event/templates/email/event_updated.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,155 @@
<p>
Hello,\n
This notification is sent based on your route notification settings on DriveBC for the following route:\n
<body style="margin:0; padding:0; font-family:Arial, sans-serif; font-size:16px line-height:1.5rem; color:#2D2D2D">
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#F1F8FE" style="padding:50px">
<tr>
<td align="center" valign="top">
<!-- Email container -->
<table width="620" cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#FFFFFF" style="padding:24px; border-top: 4px solid #CE3E39">
<!-- Logo Header -->
<tr>
<td>
<a href="https://beta.drivebc.ca/" target="_blank" rel="noopener noreferrer" style="display:inline-block">
<img src="cid:drivebclogo" alt="DriveBC Logo" />
</a>
</td>
</tr>
<!-- Intro paragraph -->
<tr>
<td>
<table style="padding-top:30px">
<tr>
<td style="padding-bottom:8px">
Hello {% if user.first_name %}{{ user.first_name }}{% else %}{{ user.email }}{% endif %},
</td>
</tr>
<tr>
<td>
This notification is sent based on your
<span>
<a href="https://beta.drivebc.ca/my-routes" target="_blank" rel="noopener noreferrer" style="display:inline-block">
route notification settings
</a>
</span>
on DriveBC for the following route:
</td>
</tr>
</table>
</td>
</tr>
<!-- Saved route details -->
<tr>
<td style="padding-top:30px">
<table width="100%">
<tr>
<td style="font-size:1.5rem; font-weight:700; color:#053662">
{{ route.label }}
</td>
</tr>
<tr>
<td style="color:#605E5C">
{{ route.start }} to {{ route.end }}
</td>
</tr>
<tr>
<td style="padding-top:16px">
<!-- Event card -->
<table width="100%">
<tr>
<td bgcolor="#FFE4E5" style="padding:12px; border-radius:4px; font-size: 0.875rem; font-weight:700; color:#D8292F">
{{ event.event_type }}
</td>
</tr>
<tr>
<td style="font-size: 1.25rem; font-weight:700; color:#D8292F; padding: 8px 12px 0">
{{ event.highway_segment_names }}
</td>
</tr>
<tr>
<td style="padding:12px">
<table width="100%">
<tr>
<td style="color:#013366; width:130px">
Location
</td>
<td>
{{ event.location_description }}
</td>
</tr>
<tr>
<td style="color:#013366; width: 130px">
Closest landmark
</td>
<td>
{{ event.closest_landmark }}
</td>
</tr>
<tr>
<td style="color:#013366; width: 130px">
Description
</td>
<td>
{{ event.description }}
</td>
</tr>
<tr>
<td style="color:#013366; width: 130px">
Last updated
</td>
<td>
{{ event.last_updated }}
</td>
</tr>
<tr>
<td style="color:#013366; width: 130px">
Next update
</td>
<td>
{{ event.next_update }}
</td>
</tr>
</table>
</td>
</tr>
<!-- View on DriveBC button -->
<tr>
<td align="center" bgcolor="#255A90" style="border-radius:4px;">
<a href=# style="color:#ffffff; text-decoration: none; font-size: 0.875rem; font-weight: 700">
<div style="height:100%;width:100%; padding: 12px">
View on DriveBC
</div>
</a>
</td>
</tr>

<b>{{ route.label }}</b>\n
from: {{ route.start }}\n
to: {{ route.end }}\n

{% for event in events %}
<b>{{ event.event_type }}</b>\n
{{ event.description }}\n
Last updated: {{ event.last_updated }}\n
{% endfor %}
</p>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- Footer -->
<tr>
<td >
<table>
<tr>
<td style="padding-top:30px">
Your DriveBC team.
</td>
</tr>
<tr>
<td style="padding-top:30px; font-size:0.875rem; color:#605E5C">
Based on your settings, you are being notified for new and updated advisories, closures, major delays, and road conditions from 9:00 am to 10:30 am, every Monday, Tuesday, Wednesday, Thursday, Friday.
</td>
</tr>
<tr>
<td style="padding-top:30px; font-size:0.75rem; color:#605E5C">
Add [email protected] to your address book to ensure that you receive these notifications to your inbox. If you do not want to receive emails related to this route, you can turn off or modify these notifications at any time.
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
172 changes: 172 additions & 0 deletions src/backend/apps/event/templates/email/major-delay.html
View file
Open in desktop

Large diffs are not rendered by default.

172 changes: 172 additions & 0 deletions src/backend/apps/event/templates/email/road-condition.html
View file
Open in desktop

Large diffs are not rendered by default.

Binary file added src/backend/static/images/drivebclogo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions src/frontend/src/Components/data/user.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { getCookie } from "../../util";

export const sendVerificationEmail = async () => {
export const sendVerificationEmail = async ({ my_routes = false } = {}) => {
const url = `${window.API_HOST}/api/users/send-verification-email/`;

try {
Expand All @@ -10,7 +10,7 @@ export const sendVerificationEmail = async () => {
'Content-Type': 'application/json',
'X-CSRFToken': getCookie('csrftoken')
},
body: JSON.stringify({ }),
body: JSON.stringify({ my_routes }),
credentials: 'include'
});

Expand Down
2 changes: 1 addition & 1 deletion src/frontend/src/Components/routing/RouteDetails.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -336,7 +336,7 @@ export default function RouteDetails(props) {
const toggleHandler = async (e) => {
if (!authContext.verified) {
e.preventDefault();
navigate('/verify-email');
navigate('/verify-email?my_route=true');
return;
}

Expand Down
Loading
Loading