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

Jump to bottom

WD-15025 - feat: add built verification email #423

Merged
merged 4 commits into from
Oct 4, 2024
Merged

WD-15025 - feat: add built verification email #423

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5a43aef
feat: add built verification email
huwshimi Sep 25, 2024
3008d6f
refactor: remove security code formatting, add logo alt text
huwshimi Sep 26, 2024
02cd560
refactor: display email logo from CDN
huwshimi Oct 4, 2024
ce8eb80
Merge branch 'main' into verification-email-integration
huwshimi Oct 4, 2024
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
98 changes: 14 additions & 84 deletions internal/mail/html/user-invite.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,85 +1,15 @@
<!-- Copyright 2024 Canonical Ltd. -->
<!-- SPDX-License-Identifier: AGPL-3.0 -->

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Verify Your Account</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f6f6f6;
color: #333;
margin: 0;
padding: 0;
}

.container {
width: 100%;
max-width: 600px;
margin: 20px auto;
background-color: #ffffff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.header {
text-align: center;
padding: 20px 0;
}

.header h1 {
color: #007BFF;
margin: 0;
}

.content {
text-align: center;
}

.content p {
font-size: 16px;
line-height: 1.5;
margin: 20px 0;
}

.verify-button {
display: inline-block;
background-color: #007BFF;
color: #ffffff;
text-decoration: none;
padding: 10px 20px;
border-radius: 5px;
font-size: 18px;
margin-top: 20px;
}

.footer {
text-align: center;
font-size: 12px;
color: #666;
margin-top: 20px;
}
<!doctype html><html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"><head><title></title><!--[if !mso]><!--><meta http-equiv="X-UA-Compatible" content="IE=edge"><!--<![endif]--><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><style type="text/css">#outlook a{padding:0}body{margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}table,td{border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0}img{border:0;height:auto;line-height:100%;outline:0;text-decoration:none;-ms-interpolation-mode:bicubic}p{display:block;margin:13px 0}</style><!--[if mso]>
<noscript>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<![endif]--><!--[if lte mso 11]>
<style type="text/css">
.mj-outlook-group-fix { width:100% !important; }
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>Verify Your Account</h1>
</div>
<div class="content">
<p>Hello,</p>
<p>Your account with the email address <strong>{{ .Email }}</strong> was recently created. To complete your
registration, click the button below:</p>
<p>Verification code <span><strong>{{ .RecoveryCode }}</strong></span></p>
<a class="verify-button" href="{{ .InviteUrl }}">Verify Account</a>
</div>
<div class="footer">
<p>&copy;Copyright 2024 Canonical Ltd.</p>
</div>
</div>
</body>
</html>
<![endif]--><!--[if !mso]><!--><link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css"><style type="text/css">@import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);</style><!--<![endif]--><style type="text/css">@media only screen and (min-width:480px){.mj-column-per-100{width:100%!important;max-width:100%}.mj-column-per-30{width:30%!important;max-width:30%}.mj-column-per-70{width:70%!important;max-width:70%}}</style><style media="screen and (min-width:480px)">.moz-text-html .mj-column-per-100{width:100%!important;max-width:100%}.moz-text-html .mj-column-per-30{width:30%!important;max-width:30%}.moz-text-html .mj-column-per-70{width:70%!important;max-width:70%}</style><style type="text/css">@media only screen and (max-width:479px){table.mj-full-width-mobile{width:100%!important}td.mj-full-width-mobile{width:auto!important}}</style><style type="text/css">@font-face{font-family:'Ubuntu variable';font-stretch:100%;font-style:normal;font-weight:100 800;src:url(https://assets.ubuntu.com/v1/f1ea362b-Ubuntu%5Bwdth,wght%5D-latin-v0.896a.woff2) format('woff2-variations')}a,a:focus,a:hover,a:visited{color:#06c;text-decoration:none}</style></head><body style="word-spacing:normal;background-color:#f3f4f8"><div style="background-color:#f3f4f8" lang="und" dir="auto"><!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]--><div style="margin:0 auto;max-width:600px"><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%"><tbody><tr><td style="direction:ltr;font-size:0;padding:32px;text-align:center"><!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" width="600px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:536px;" width="536" bgcolor="#242424" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]--><div style="background:#242424;background-color:#242424;margin:0 auto;max-width:536px"><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#242424;background-color:#242424;width:100%"><tbody><tr><td style="direction:ltr;font-size:0;padding:0 0 18px 32px;text-align:center"><!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:504px;" ><![endif]--><div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%"><table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top" width="100%"><tbody><tr><td align="left" style="font-size:0;padding:0;word-break:break-word"><table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0"><tbody><tr><td style="width:130px"><img alt="Canonical" src="https://assets.ubuntu.com/v1/cbe904ec-canonical.jpg" style="border:0;display:block;outline:0;text-decoration:none;height:auto;width:100%;font-size:16px" width="130" height="auto"></td></tr></tbody></table></td></tr></tbody></table></div><!--[if mso | IE]></td></tr></table><![endif]--></td></tr></tbody></table></div><!--[if mso | IE]></td></tr></table></td></tr><tr><td class="" width="600px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:536px;" width="536" bgcolor="#ffffff" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]--><div style="background:#fff;background-color:#fff;margin:0 auto;max-width:536px"><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#fff;background-color:#fff;width:100%"><tbody><tr><td style="direction:ltr;font-size:0;padding:32px;padding-bottom:8px;text-align:center"><!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:472px;" ><![endif]--><div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%"><table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top" width="100%"><tbody><tr><td align="left" style="font-size:0;padding:0;word-break:break-word"><div style="font-family:'Ubuntu variable',Ubuntu,Arial,'libra sans',sans-serif;font-size:24px;font-weight:275;line-height:24px;text-align:left;color:#000">Verify your account</div></td></tr></tbody></table></div><!--[if mso | IE]></td></tr></table><![endif]--></td></tr></tbody></table></div><!--[if mso | IE]></td></tr></table></td></tr><tr><td class="" width="600px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:536px;" width="536" bgcolor="#ffffff" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]--><div style="background:#fff;background-color:#fff;margin:0 auto;max-width:536px"><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#fff;background-color:#fff;width:100%"><tbody><tr><td style="direction:ltr;font-size:0;padding:32px;padding-bottom:24px;text-align:center"><!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:141.6px;" ><![endif]--><div class="mj-column-per-30 mj-outlook-group-fix" style="font-size:0;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%"><table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%"><tbody><tr><td style="vertical-align:top;padding-bottom:8px"><table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%"><tbody><tr><td align="left" style="font-size:0;padding:0;word-break:break-word"><div style="font-family:'Ubuntu variable',Ubuntu,Arial,'libra sans',sans-serif;font-size:16px;font-weight:400;line-height:24px;text-align:left;color:#000">Account</div></td></tr></tbody></table></td></tr></tbody></table></div><!--[if mso | IE]></td><td class="" style="vertical-align:top;width:330.4px;" ><![endif]--><div class="mj-column-per-70 mj-outlook-group-fix" style="font-size:0;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%"><table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%"><tbody><tr><td style="vertical-align:top;padding-bottom:8px"><table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%"><tbody><tr><td align="left" style="font-size:0;padding:0;word-break:break-word"><div style="font-family:'Ubuntu variable',Ubuntu,Arial,'libra sans',sans-serif;font-size:16px;font-weight:300;line-height:24px;text-align:left;color:#000">{{ .Email }}</div></td></tr></tbody></table></td></tr></tbody></table></div><!--[if mso | IE]></td></tr></table><![endif]--></td></tr></tbody></table></div><!--[if mso | IE]></td></tr></table></td></tr><tr><td class="" width="600px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:536px;" width="536" bgcolor="#ffffff" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]--><div style="background:#fff;background-color:#fff;margin:0 auto;max-width:536px"><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#fff;background-color:#fff;width:100%"><tbody><tr><td style="direction:ltr;font-size:0;padding:32px;padding-bottom:12px;padding-top:0;text-align:center"><!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:141.6px;" ><![endif]--><div class="mj-column-per-30 mj-outlook-group-fix" style="font-size:0;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%"><table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top" width="100%"><tbody><tr><td align="left" style="font-size:0;padding:0;padding-bottom:8px;word-break:break-word"><div style="font-family:'Ubuntu variable',Ubuntu,Arial,'libra sans',sans-serif;font-size:16px;font-weight:400;line-height:24px;text-align:left;color:#000">Verification code</div></td></tr></tbody></table></div><!--[if mso | IE]></td><td class="" style="vertical-align:top;width:330.4px;" ><![endif]--><div class="mj-column-per-70 mj-outlook-group-fix" style="font-size:0;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%"><table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top" width="100%"><tbody><tr><td align="left" style="font-size:0;padding:0;padding-bottom:8px;word-break:break-word"><div style="font-family:'Ubuntu variable',Ubuntu,Arial,'libra sans',sans-serif;font-size:24px;font-weight:275;line-height:32px;text-align:left;color:#000">{{ .RecoveryCode }}</div></td></tr></tbody></table></div><!--[if mso | IE]></td></tr></table><![endif]--></td></tr></tbody></table></div><!--[if mso | IE]></td></tr></table></td></tr><tr><td class="" width="600px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:536px;" width="536" bgcolor="#ffffff" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]--><div style="background:#fff;background-color:#fff;margin:0 auto;max-width:536px"><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#fff;background-color:#fff;width:100%"><tbody><tr><td style="direction:ltr;font-size:0;padding:32px;padding-top:0;text-align:center"><!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:472px;" ><![endif]--><div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%"><table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top" width="100%"><tbody><tr><td align="center" style="font-size:0;padding:10px 25px;padding-top:0;padding-right:0;padding-left:0;word-break:break-word"><p style="border-top:solid 1px #e6e6e6;font-size:1px;margin:0 auto;width:100%"></p><!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" style="border-top:solid 1px #e6e6e6;font-size:1px;margin:0px auto;width:472px;" role="presentation" width="472px" ><tr><td style="height:0;line-height:0;"> &nbsp;
</td></tr></table><![endif]--></td></tr><tr><td align="left" style="font-size:0;padding:10px 25px;padding-right:0;padding-left:0;word-break:break-word"><table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%"><tbody><tr><td align="center" bgcolor="#0C8420" role="presentation" style="border:none;border-radius:0;cursor:auto;mso-padding-alt:6.4px 16px;background:#0c8420" valign="middle"><a href="{{ .InviteUrl }}" style="display:inline-block;background:#0c8420;color:#fff;font-family:'Ubuntu variable',Ubuntu,Arial,'libra sans',sans-serif;font-size:16px;font-weight:300;line-height:24px;margin:0;text-decoration:none;text-transform:none;padding:6.4px 16px;mso-padding-alt:0;border-radius:0" target="_blank">Verify your account</a></td></tr></tbody></table></td></tr><tr><td align="left" style="font-size:0;padding:0;word-break:break-word"><div style="font-family:'Ubuntu variable',Ubuntu,Arial,'libra sans',sans-serif;font-size:16px;font-weight:300;line-height:24px;text-align:left;color:#000">or visit this link</div></td></tr><tr><td align="left" style="font-size:0;padding:0;word-break:break-word"><div style="font-family:'Ubuntu variable',Ubuntu,Arial,'libra sans',sans-serif;font-size:16px;font-weight:300;line-height:24px;text-align:left;color:#000"><a href="{{ .InviteUrl }}">{{ .InviteUrl }}</a></div></td></tr></tbody></table></div><!--[if mso | IE]></td></tr></table><![endif]--></td></tr></tbody></table></div><!--[if mso | IE]></td></tr></table></td></tr><tr><td class="" width="600px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:536px;" width="536" bgcolor="#F7F7F7" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]--><div style="background:#f7f7f7;background-color:#f7f7f7;margin:0 auto;max-width:536px"><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#f7f7f7;background-color:#f7f7f7;width:100%"><tbody><tr><td style="direction:ltr;font-size:0;padding:32px 24px;text-align:center"><!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:488px;" ><![endif]--><div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%"><table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top" width="100%"><tbody><tr><td align="left" style="font-size:0;padding:0;word-break:break-word"><div style="font-family:'Ubuntu variable',Ubuntu,Arial,'libra sans',sans-serif;font-size:14px;font-weight:300;line-height:24px;text-align:left;color:#666">You are receiving this email because you are a user of Canonical Identity Platform.</div></td></tr><tr><td align="left" style="font-size:0;padding:0;word-break:break-word"><div style="font-family:'Ubuntu variable',Ubuntu,Arial,'libra sans',sans-serif;font-size:14px;font-weight:300;line-height:24px;text-align:left;color:#666">If you're not sure why you're receiving this please contact support.</div></td></tr></tbody></table></div><!--[if mso | IE]></td></tr></table><![endif]--></td></tr></tbody></table></div><!--[if mso | IE]></td></tr></table></td></tr></table><![endif]--></td></tr></tbody></table></div><!--[if mso | IE]></td></tr></table><![endif]--></div></body></html>
10 changes: 1 addition & 9 deletions ui/emails/Makefile
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,9 @@
MJML=npx mjml
MJML_DIR=mjml
MJML_FILES=$(wildcard $(MJML_DIR)/*.mjml)
IMAGES_DIR_NAME=images
MJML_IMAGES=$(MJML_DIR)/$(IMAGES_DIR_NAME)
HTML_DIR=../../internal/mail/html
IMAGES_DIR=$(HTML_DIR)/$(IMAGES_DIR_NAME)

images:
rsync -a --delete $(MJML_IMAGES)/ $(IMAGES_DIR)

.PHONY=images

build: $(MJML_FILES) images
build: $(MJML_FILES)
$(foreach file, $(MJML_FILES), $(MJML) $(file) --config.minify --config.minifyOptions='{"minifyCSS": true}' -o $(HTML_DIR)/$(basename $(notdir $(file))).html;)

.PHONY=build
Binary file removed ui/emails/mjml/images/canonical.jpg
View file
Open in desktop
Binary file not shown.
2 changes: 1 addition & 1 deletion ui/emails/mjml/includes/header.mjml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<mj-section background-color="#242424" padding="0 0 18px 32px">
<mj-column>
<mj-image padding="0" align="left" width="130px" src="./images/canonical.jpg"></mj-image>
<mj-image padding="0" align="left" width="130px" src="https://assets.ubuntu.com/v1/cbe904ec-canonical.jpg" alt="Canonical"></mj-image>
</mj-column>
</mj-section>
2 changes: 1 addition & 1 deletion ui/emails/mjml/user-invite.mjml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@
<mj-text font-weight="400" padding-bottom="8px">Verification code</mj-text>
</mj-column>
<mj-column width="70%">
<mj-text font-size="24px" padding-bottom="8px" font-weight="275" line-height="32px">{{slice .RecoveryCode 0 3}} {{slice .RecoveryCode 3 6}}</mj-text>
<mj-text font-size="24px" padding-bottom="8px" font-weight="275" line-height="32px">{{ .RecoveryCode }}</mj-text>
</mj-column>
</mj-section>
<mj-section padding-top="0" background-color="#fff">
Expand Down
Loading