Skip to content

Commit

Permalink
Merge pull request #423 from huwshimi/verification-email-integration
Browse files Browse the repository at this point in the history 
WD-15025 - feat: add built verification email
  • Loading branch information
@huwshimi
huwshimi authored Oct 4, 2024
2 parents 42bd514 + ce8eb80 commit d4ca318
Show file tree
Hide file tree
Showing 5 changed files with 17 additions and 95 deletions.
98 changes: 14 additions & 84 deletions internal/mail/html/user-invite.html
View file
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
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
Binary file not shown.
2 changes: 1 addition & 1 deletion ui/emails/mjml/includes/header.mjml
View file
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
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

0 comments on commit d4ca318

Please sign in to comment.