1
0
mirror of https://github.com/bitwarden/server synced 2026-02-20 03:13:35 +00:00

[PM-31776] Fix email-verified Send OTP email design discrepancies (#6990)

* [PM-31776] Fix email-verified Send OTP email design discrepancies

* Fix README
This commit is contained in:
Mike Amirault
2026-02-19 12:52:35 -05:00
committed by GitHub
parent 507c3a105c
commit 232b325ed7
37 changed files with 1341 additions and 1176 deletions

View File

@@ -279,7 +279,7 @@
<tr>
<td align="left" style="font-size:0px;padding:15px 15px 0px 15px;word-break:break-word;">
<div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;line-height:24px;text-align:left;color:#1B2029;">As a member of <b>{{OrganizationName}}</b>:</div>
<div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;line-height:24px;text-align:left;color:#1B2029;">As a member of <b>{{ OrganizationName }}</b>:</div>
</td>
</tr>
@@ -756,14 +756,15 @@
<td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:12px;line-height:16px;text-align:center;color:#5A6D91;"><p style="margin-bottom: 5px; margin-top: 5px">
© {{ CurrentYear }} Bitwarden Inc. 1 N. Calle Cesar Chavez, Suite 102, Santa
Barbara, CA, USA
© {{ CurrentYear }} Bitwarden Inc. 1 N. Calle Cesar Chavez, Suite 102,
Santa Barbara, CA, USA
</p>
<p style="margin-top: 5px">
Always confirm you are on a trusted Bitwarden domain before logging
in:<br>
<a href="https://bitwarden.com/" style="text-decoration:none;color:#175ddc; font-weight:400">bitwarden.com</a> |
<a href="https://bitwarden.com/help/emails-from-bitwarden/" style="text-decoration:none; color:#175ddc; font-weight:400">Learn why we include this</a>
<a href="https://bitwarden.com/" style="text-decoration: none; color: #175ddc; font-weight: 400">bitwarden.com</a>
|
<a href="https://bitwarden.com/help/emails-from-bitwarden/" style="text-decoration: none; color: #175ddc; font-weight: 400">Learn why we include this</a>
</p></div>
</td>

View File

@@ -103,8 +103,10 @@
border-radius: 3px;
}
@media only screen and (max-width: 480px) {
.hide-mobile { display: none !important; }
.hide-mobile {
display: none !important;
}
}
</style>
<!-- Include shared head styles -->
<!-- Include admin console shared styles -->
@@ -287,7 +289,7 @@
<tr>
<td align="left" style="font-size:0px;padding:15px 15px 0px 15px;word-break:break-word;">
<div style="font-family:'Helvetica Neue','Inter',Helvetica,Arial,sans-serif;font-size:16px;line-height:24px;text-align:left;color:#1B2029;">As a member of <b>{{OrganizationName}}</b>:</div>
<div style="font-family:'Helvetica Neue','Inter',Helvetica,Arial,sans-serif;font-size:16px;line-height:24px;text-align:left;color:#1B2029;">As a member of <b>{{ OrganizationName }}</b>:</div>
</td>
</tr>
@@ -513,11 +515,12 @@
<tr>
<td align="left" style="font-size:0px;padding:0 0 24px 0;word-break:break-word;">
<div style="font-family:'Helvetica Neue','Inter',Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:24px;text-align:left;color:#1B2029;">Already using the <a href="https://bitwarden.com/download/" class="link" style="text-decoration: none; color: #175ddc; font-weight: 600;">browser extension</a>?
Download the Bitwarden mobile app from the
<a href="https://apps.apple.com/us/app/bitwarden-password-manager/id1137397744" class="link" style="text-decoration: none; color: #175ddc; font-weight: 600;">App Store</a>
or <a href="https://play.google.com/store/apps/details?id=com.x8bit.bitwarden" class="link" style="text-decoration: none; color: #175ddc; font-weight: 600;">Google Play</a>
to quickly save logins and autofill forms on the go.</div>
<div style="font-family:'Helvetica Neue','Inter',Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:24px;text-align:left;color:#1B2029;">Already using the
<a href="https://bitwarden.com/download/" class="link" style="text-decoration: none; color: #175ddc; font-weight: 600;">browser extension</a>? Download the Bitwarden mobile app from the
<a href="https://apps.apple.com/us/app/bitwarden-password-manager/id1137397744" class="link" style="text-decoration: none; color: #175ddc; font-weight: 600;">App Store</a>
or
<a href="https://play.google.com/store/apps/details?id=com.x8bit.bitwarden" class="link" style="text-decoration: none; color: #175ddc; font-weight: 600;">Google Play</a>
to quickly save logins and autofill forms on the go.</div>
</td>
</tr>
@@ -928,14 +931,15 @@
<td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:'Helvetica Neue','Inter',Helvetica,Arial,sans-serif;font-size:12px;line-height:16px;text-align:center;color:#5A6D91;"><p style="margin-bottom: 5px; margin-top: 5px">
© {{ CurrentYear }} Bitwarden Inc. 1 N. Calle Cesar Chavez, Suite 102, Santa
Barbara, CA, USA
© {{ CurrentYear }} Bitwarden Inc. 1 N. Calle Cesar Chavez, Suite 102,
Santa Barbara, CA, USA
</p>
<p style="margin-top: 5px">
Always confirm you are on a trusted Bitwarden domain before logging
in:<br>
<a href="https://bitwarden.com/" style="text-decoration:none;color:#175ddc; font-weight:400">bitwarden.com</a> |
<a href="https://bitwarden.com/help/emails-from-bitwarden/" style="text-decoration:none; color:#175ddc; font-weight:400">Learn why we include this</a>
<a href="https://bitwarden.com/" style="text-decoration: none; color: #175ddc; font-weight: 400">bitwarden.com</a>
|
<a href="https://bitwarden.com/help/emails-from-bitwarden/" style="text-decoration: none; color: #175ddc; font-weight: 400">Learn why we include this</a>
</p></div>
</td>

View File

@@ -29,8 +29,8 @@
.mj-outlook-group-fix { width:100% !important; }
</style>
<![endif]-->
<style type="text/css">
@media only screen and (min-width:480px) {
.mj-column-per-70 { width:70% !important; max-width: 70%; }
@@ -43,10 +43,10 @@
.moz-text-html .mj-column-per-30 { width:30% !important; max-width: 30%; }
.moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }
</style>
<style type="text/css">
@media only screen and (max-width:480px) {
@@ -54,15 +54,15 @@
display: none !important;
}
}
@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">
.border-fix > table {
border-collapse: separate !important;
@@ -71,230 +71,232 @@
border-radius: 3px;
}
</style>
</head>
<body style="word-spacing:normal;background-color:#e6e9ef;">
<div class="border-fix" style="background-color:#e6e9ef;" lang="und" dir="auto">
<!-- Blue Header Section -->
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="border-fix-outlook" role="presentation" style="width:660px;" width="660" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div class="border-fix" style="margin:0px auto;max-width:660px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:20px 20px 0px 20px;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" width="660px" ><![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#175ddc;background-color:#175ddc;width:100%;border-radius:4px 4px 0px 0px;">
<tbody>
<tr>
<td>
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:620px;" width="620" bgcolor="#175ddc" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="margin:0px auto;border-radius:4px 4px 0px 0px;max-width:620px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;border-radius:4px 4px 0px 0px;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:434px;" ><![endif]-->
<div class="mj-column-per-70 mj-outlook-group-fix" style="font-size:0px;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:0px;padding:10px 25px;word-break:break-word;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
<tbody>
<tr>
<td style="width:150px;">
<img alt src="https://bitwarden.com/images/logo-horizontal-white.png" style="border:0;display:block;outline:none;text-decoration:none;height:30px;width:100%;font-size:16px;" width="150" height="30">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;padding-top:0;padding-bottom:0;word-break:break-word;">
<div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;line-height:1;text-align:left;color:#ffffff;"><h1 style="font-weight: normal; font-size: 24px; line-height: 32px">
</h1></div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td><td class="" style="vertical-align:bottom;width:186px;" ><![endif]-->
<div class="mj-column-per-30 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:bottom;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:bottom;" width="100%">
<tbody>
<tr>
<td align="center" class="mj-bw-hero-responsive-img" style="font-size:0px;padding:0px;word-break:break-word;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
<tbody>
<tr>
<td style="width:155px;">
<img alt src="undefined" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:16px;" width="155" 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><![endif]-->
</td>
</tr>
</tbody>
</table>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
<!-- Main Content -->
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:660px;" width="660" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="margin:0px auto;max-width:660px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:0px 20px 0px 20px;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" width="660px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:620px;" width="620" bgcolor="#ffffff" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="background:#ffffff;background-color:#ffffff;margin:0px auto;max-width:620px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:0px 10px 0px 10px;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
<div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;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:0px;padding:10px 15px;word-break:break-word;">
<div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;line-height:24px;text-align:left;color:#1B2029;">The following emergency contacts have been removed from your account:
<ul>
{{#each RemovedGranteeEmails}}
<li>{{this}}</li>
{{/each}}
</ul>
Learn more about <a href="{{EmergencyAccessHelpPageUrl}}">emergency access</a>.</div>
<div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;line-height:24px;text-align:left;color:#1B2029;">The following emergency contacts have been removed from your
account:
<ul>
{{#each RemovedGranteeEmails}}
<li>{{ this }}</li>
{{/each}}
</ul>
Learn more about
<a href="{{EmergencyAccessHelpPageUrl}}">emergency access</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></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
<!-- Footer -->
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:660px;" width="660" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="margin:0px auto;max-width:660px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:5px 20px 10px 20px;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:620px;" ><![endif]-->
<div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;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:0px;padding:0;word-break:break-word;">
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" ><tr><td><![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;">
<tbody>
<tr>
<td style="padding:8px;vertical-align:middle;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-radius:3px;width:24px;">
@@ -309,15 +311,15 @@
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if mso | IE]></td><td><![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;">
<tbody>
<tr>
<td style="padding:8px;vertical-align:middle;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-radius:3px;width:24px;">
@@ -332,15 +334,15 @@
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if mso | IE]></td><td><![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;">
<tbody>
<tr>
<td style="padding:8px;vertical-align:middle;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-radius:3px;width:24px;">
@@ -355,15 +357,15 @@
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if mso | IE]></td><td><![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;">
<tbody>
<tr>
<td style="padding:8px;vertical-align:middle;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-radius:3px;width:24px;">
@@ -378,15 +380,15 @@
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if mso | IE]></td><td><![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;">
<tbody>
<tr>
<td style="padding:8px;vertical-align:middle;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-radius:3px;width:24px;">
@@ -401,15 +403,15 @@
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if mso | IE]></td><td><![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;">
<tbody>
<tr>
<td style="padding:8px;vertical-align:middle;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-radius:3px;width:24px;">
@@ -424,15 +426,15 @@
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if mso | IE]></td><td><![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;">
<tbody>
<tr>
<td style="padding:8px;vertical-align:middle;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-radius:3px;width:24px;">
@@ -447,52 +449,54 @@
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
<tr>
<td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:12px;line-height:16px;text-align:center;color:#5A6D91;"><p style="margin-bottom: 5px; margin-top: 5px">
© {{ CurrentYear }} Bitwarden Inc. 1 N. Calle Cesar Chavez, Suite 102, Santa
Barbara, CA, USA
© {{ CurrentYear }} Bitwarden Inc. 1 N. Calle Cesar Chavez, Suite 102,
Santa Barbara, CA, USA
</p>
<p style="margin-top: 5px">
Always confirm you are on a trusted Bitwarden domain before logging
in:<br>
<a href="https://bitwarden.com/" style="text-decoration:none;color:#175ddc; font-weight:400">bitwarden.com</a> |
<a href="https://bitwarden.com/help/emails-from-bitwarden/" style="text-decoration:none; color:#175ddc; font-weight:400">Learn why we include this</a>
<a href="https://bitwarden.com/" style="text-decoration: none; color: #175ddc; font-weight: 400">bitwarden.com</a>
|
<a href="https://bitwarden.com/help/emails-from-bitwarden/" style="text-decoration: none; color: #175ddc; font-weight: 400">Learn why we include this</a>
</p></div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</div>
</body>
</html>

View File

@@ -260,7 +260,7 @@
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:32px;line-height:1;text-align:left;color:#1B2029;"><b>{{Token}}</b></div>
<div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:32px;font-weight:500;line-height:1;text-align:left;color:#1B2029;">{{ Token }}</div>
</td>
</tr>
@@ -276,7 +276,7 @@
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;line-height:1;text-align:left;color:#1B2029;">This code expires in {{Expiry}} minutes. After that, you'll need
<div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;line-height:1;text-align:left;color:#1B2029;">This code expires in {{ Expiry }} minutes. After that, you'll need
to verify your email again.</div>
</td>
@@ -325,9 +325,9 @@
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;line-height:1;text-align:left;color:#1B2029;"><p>
Bitwarden Send transmits sensitive, temporary information to
others easily and securely. Learn more about
<div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;line-height:24px;text-align:left;color:#1B2029;"><p>
Bitwarden Send securely shares sensitive information. Learn more
about
<a href="https://bitwarden.com/help/send" class="link" style="text-decoration: none; color: #175ddc; font-weight: 600;">Bitwarden Send</a>
or
<a href="https://bitwarden.com/signup" class="link" style="text-decoration: none; color: #175ddc; font-weight: 600;">sign up</a>
@@ -386,8 +386,8 @@
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#F3F6F9;background-color:#F3F6F9;width:100%;border-radius:0px 0px 4px 4px;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:5px 10px 10px 10px;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:420px;" ><![endif]-->
<td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:434px;" ><![endif]-->
<div class="mj-column-per-70 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
@@ -397,7 +397,7 @@
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;line-height:24px;text-align:left;color:#1B2029;"><p style="font-size: 18px; line-height: 28px; font-weight: bold;">
<div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;line-height:24px;text-align:left;color:#1B2029;"><p style="font-size: 18px; line-height: 28px; font-weight: 500; margin-top: 0px;">
Learn more about Bitwarden
</p>
Find user guides, product documentation, and videos on the
@@ -411,7 +411,7 @@
</div>
<!--[if mso | IE]></td><td class="" style="vertical-align:top;width:180px;" ><![endif]-->
<!--[if mso | IE]></td><td class="" style="vertical-align:top;width:186px;" ><![endif]-->
<div class="mj-column-per-30 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
@@ -654,14 +654,15 @@
<td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:12px;line-height:16px;text-align:center;color:#5A6D91;"><p style="margin-bottom: 5px; margin-top: 5px">
© {{ CurrentYear }} Bitwarden Inc. 1 N. Calle Cesar Chavez, Suite 102, Santa
Barbara, CA, USA
© {{ CurrentYear }} Bitwarden Inc. 1 N. Calle Cesar Chavez, Suite 102,
Santa Barbara, CA, USA
</p>
<p style="margin-top: 5px">
Always confirm you are on a trusted Bitwarden domain before logging
in:<br>
<a href="https://bitwarden.com/" style="text-decoration:none;color:#175ddc; font-weight:400">bitwarden.com</a> |
<a href="https://bitwarden.com/help/emails-from-bitwarden/" style="text-decoration:none; color:#175ddc; font-weight:400">Learn why we include this</a>
<a href="https://bitwarden.com/" style="text-decoration: none; color: #175ddc; font-weight: 400">bitwarden.com</a>
|
<a href="https://bitwarden.com/help/emails-from-bitwarden/" style="text-decoration: none; color: #175ddc; font-weight: 400">Learn why we include this</a>
</p></div>
</td>

View File

@@ -269,7 +269,7 @@
<tr>
<td align="left" style="font-size:0px;padding:10px 15px;word-break:break-word;">
<div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;line-height:24px;text-align:left;color:#1B2029;">An administrator from <b>{{OrganizationName}}</b> will approve you
<div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;line-height:24px;text-align:left;color:#1B2029;">An administrator from <b>{{ OrganizationName }}</b> will approve you
before you can share passwords. While you wait for approval, get
started with Bitwarden Password Manager:</div>
@@ -599,8 +599,8 @@
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#F3F6F9;background-color:#F3F6F9;width:100%;border-radius:0px 0px 4px 4px;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:5px 10px 10px 10px;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:420px;" ><![endif]-->
<td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:434px;" ><![endif]-->
<div class="mj-column-per-70 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
@@ -610,7 +610,7 @@
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;line-height:24px;text-align:left;color:#1B2029;"><p style="font-size: 18px; line-height: 28px; font-weight: bold;">
<div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;line-height:24px;text-align:left;color:#1B2029;"><p style="font-size: 18px; line-height: 28px; font-weight: 500; margin-top: 0px;">
Learn more about Bitwarden
</p>
Find user guides, product documentation, and videos on the
@@ -624,7 +624,7 @@
</div>
<!--[if mso | IE]></td><td class="" style="vertical-align:top;width:180px;" ><![endif]-->
<!--[if mso | IE]></td><td class="" style="vertical-align:top;width:186px;" ><![endif]-->
<div class="mj-column-per-30 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
@@ -867,14 +867,15 @@
<td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:12px;line-height:16px;text-align:center;color:#5A6D91;"><p style="margin-bottom: 5px; margin-top: 5px">
© {{ CurrentYear }} Bitwarden Inc. 1 N. Calle Cesar Chavez, Suite 102, Santa
Barbara, CA, USA
© {{ CurrentYear }} Bitwarden Inc. 1 N. Calle Cesar Chavez, Suite 102,
Santa Barbara, CA, USA
</p>
<p style="margin-top: 5px">
Always confirm you are on a trusted Bitwarden domain before logging
in:<br>
<a href="https://bitwarden.com/" style="text-decoration:none;color:#175ddc; font-weight:400">bitwarden.com</a> |
<a href="https://bitwarden.com/help/emails-from-bitwarden/" style="text-decoration:none; color:#175ddc; font-weight:400">Learn why we include this</a>
<a href="https://bitwarden.com/" style="text-decoration: none; color: #175ddc; font-weight: 400">bitwarden.com</a>
|
<a href="https://bitwarden.com/help/emails-from-bitwarden/" style="text-decoration: none; color: #175ddc; font-weight: 400">Learn why we include this</a>
</p></div>
</td>

View File

@@ -598,8 +598,8 @@
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#F3F6F9;background-color:#F3F6F9;width:100%;border-radius:0px 0px 4px 4px;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:5px 10px 10px 10px;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:420px;" ><![endif]-->
<td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:434px;" ><![endif]-->
<div class="mj-column-per-70 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
@@ -609,7 +609,7 @@
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;line-height:24px;text-align:left;color:#1B2029;"><p style="font-size: 18px; line-height: 28px; font-weight: bold;">
<div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;line-height:24px;text-align:left;color:#1B2029;"><p style="font-size: 18px; line-height: 28px; font-weight: 500; margin-top: 0px;">
Learn more about Bitwarden
</p>
Find user guides, product documentation, and videos on the
@@ -623,7 +623,7 @@
</div>
<!--[if mso | IE]></td><td class="" style="vertical-align:top;width:180px;" ><![endif]-->
<!--[if mso | IE]></td><td class="" style="vertical-align:top;width:186px;" ><![endif]-->
<div class="mj-column-per-30 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
@@ -866,14 +866,15 @@
<td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:12px;line-height:16px;text-align:center;color:#5A6D91;"><p style="margin-bottom: 5px; margin-top: 5px">
© {{ CurrentYear }} Bitwarden Inc. 1 N. Calle Cesar Chavez, Suite 102, Santa
Barbara, CA, USA
© {{ CurrentYear }} Bitwarden Inc. 1 N. Calle Cesar Chavez, Suite 102,
Santa Barbara, CA, USA
</p>
<p style="margin-top: 5px">
Always confirm you are on a trusted Bitwarden domain before logging
in:<br>
<a href="https://bitwarden.com/" style="text-decoration:none;color:#175ddc; font-weight:400">bitwarden.com</a> |
<a href="https://bitwarden.com/help/emails-from-bitwarden/" style="text-decoration:none; color:#175ddc; font-weight:400">Learn why we include this</a>
<a href="https://bitwarden.com/" style="text-decoration: none; color: #175ddc; font-weight: 400">bitwarden.com</a>
|
<a href="https://bitwarden.com/help/emails-from-bitwarden/" style="text-decoration: none; color: #175ddc; font-weight: 400">Learn why we include this</a>
</p></div>
</td>

View File

@@ -269,9 +269,9 @@
<tr>
<td align="left" style="font-size:0px;padding:10px 15px;word-break:break-word;">
<div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;line-height:24px;text-align:left;color:#1B2029;">An administrator from <b>{{OrganizationName}}</b> will need to confirm
you before you can share passwords. Get started with Bitwarden
Password Manager:</div>
<div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;line-height:24px;text-align:left;color:#1B2029;">An administrator from <b>{{ OrganizationName }}</b> will need to
confirm you before you can share passwords. Get started with
Bitwarden Password Manager:</div>
</td>
</tr>
@@ -599,8 +599,8 @@
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#F3F6F9;background-color:#F3F6F9;width:100%;border-radius:0px 0px 4px 4px;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:5px 10px 10px 10px;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:420px;" ><![endif]-->
<td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:434px;" ><![endif]-->
<div class="mj-column-per-70 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
@@ -610,7 +610,7 @@
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;line-height:24px;text-align:left;color:#1B2029;"><p style="font-size: 18px; line-height: 28px; font-weight: bold;">
<div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;line-height:24px;text-align:left;color:#1B2029;"><p style="font-size: 18px; line-height: 28px; font-weight: 500; margin-top: 0px;">
Learn more about Bitwarden
</p>
Find user guides, product documentation, and videos on the
@@ -624,7 +624,7 @@
</div>
<!--[if mso | IE]></td><td class="" style="vertical-align:top;width:180px;" ><![endif]-->
<!--[if mso | IE]></td><td class="" style="vertical-align:top;width:186px;" ><![endif]-->
<div class="mj-column-per-30 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
@@ -867,14 +867,15 @@
<td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:12px;line-height:16px;text-align:center;color:#5A6D91;"><p style="margin-bottom: 5px; margin-top: 5px">
© {{ CurrentYear }} Bitwarden Inc. 1 N. Calle Cesar Chavez, Suite 102, Santa
Barbara, CA, USA
© {{ CurrentYear }} Bitwarden Inc. 1 N. Calle Cesar Chavez, Suite 102,
Santa Barbara, CA, USA
</p>
<p style="margin-top: 5px">
Always confirm you are on a trusted Bitwarden domain before logging
in:<br>
<a href="https://bitwarden.com/" style="text-decoration:none;color:#175ddc; font-weight:400">bitwarden.com</a> |
<a href="https://bitwarden.com/help/emails-from-bitwarden/" style="text-decoration:none; color:#175ddc; font-weight:400">Learn why we include this</a>
<a href="https://bitwarden.com/" style="text-decoration: none; color: #175ddc; font-weight: 400">bitwarden.com</a>
|
<a href="https://bitwarden.com/help/emails-from-bitwarden/" style="text-decoration: none; color: #175ddc; font-weight: 400">Learn why we include this</a>
</p></div>
</td>

View File

@@ -53,7 +53,7 @@ Not all `MJML` tags have the same attributes, it is highly recommended to review
### Testing the mail template with `IMailer`
After the email is developed in the [initial step](#developing-the-mail-template), we need to make sure that the email `{{variables}}` are populated properly by Handlebars. We can do this by running it through an `IMailer` implementation. The `IMailer`, documented [here](../../Platform/Mail/README.md#step-3-create-handlebars-templates), requires that the ViewModel, the `.html.hbs` `MJML` build artifact, and `.text.hbs` files be in the same directory.
After the email is developed in the [initial step](#developing-the-mail-template), we need to make sure that the email `{{variables}}` are populated properly by Handlebars. We can do this by running it through an `IMailer` implementation. The `IMailer`, documented [here](../../Platform/Mail/README.md#step-3-create-handlebars-templates), requires that the ViewModel, the `.html.hbs` `MJML` build artifact, and `.text.hbs` files be in the same directory.
1. Run `npm run build:hbs`.
2. Copy built `*.html.hbs` files from the build directory to the directory that the `IMailer` expects. All files in the `Core/MailTemplates/Mjml/out` directory should be copied to the `/src/Core/MailTemplates/Mjml` directory, ensuring that the files are in the same directory as the corresponding ViewModels. If a shared component is modified it is important to copy and overwrite all files in that directory to capture changes in the `*.html.hbs` files.
@@ -70,7 +70,7 @@ After the email is developed from the [initial step](#developing-the-mail-templa
1. Run `npm run build:hbs`
2. Copy built `*.html.hbs` files from the build directory to a location the mail service can consume them.
1. All files in the `Core/MailTemplates/Mjml/out` directory should be copied to the `src/Core/MailTemplates/Handlebars/MJML` directory. If a shared component is modified it is important to copy and overwrite all files in that directory to capture changes in the `*.html.hbs`.
- All files in the `Core/MailTemplates/Mjml/out` directory should be copied to the `src/Core/MailTemplates/Handlebars/MJML` directory. If a shared component is modified it is important to copy and overwrite all files in that directory to capture changes in the `*.html.hbs`.
3. Run code that will send the email.
The minified `html.hbs` artifacts are deliverables and must be placed into the correct `src/Core/MailTemplates/Handlebars/` directories in order to be used by `IMailService` implementations, see 2.1 above.
@@ -80,6 +80,7 @@ The minified `html.hbs` artifacts are deliverables and must be placed into the c
There is currently a `mj-bw-hero` tag you can use within your `*.mjml` templates. This is a good example of how to create a component that takes in attribute values allowing us to be more DRY in our development of emails. Since the attribute's input is a string we are able to define whatever we need into the component, in this case `mj-bw-hero`.
In order to view the custom component you have written you will need to include it in the `.mjmlconfig` and reference it in a `.mjml` template file.
```html
<!-- Custom component implementation-->
<mj-bw-hero
@@ -89,6 +90,7 @@ In order to view the custom component you have written you will need to include
```
Attributes in custom components are defined by the developer. They can be required or optional depending on implementation. See the official `MJML` [documentation](https://documentation.mjml.io/#components) for more information.
```js
static allowedAttributes = {
"img-src": "string", // REQUIRED: Source for the image displayed in the right-hand side of the blue header area
@@ -121,6 +123,7 @@ You are also able to reference other more static `MJML` templates in your `MJML`
```
#### `head.mjml`
Currently we include the `head.mjml` file in all `MJML` templates as it contains shared styling and formatting that ensures consistency across all email implementations.
In the future we may deviate from this practice to support different layouts. At that time we will modify the docs with direction.

View File

@@ -43,7 +43,7 @@ if (!fs.existsSync(config.outputDir)) {
// Find all MJML files with absolute paths, excluding components directories
const mjmlFiles = glob.sync(`${config.inputDir}/**/*.mjml`, {
ignore: ['**/components/**']
ignore: ["**/components/**"],
});
console.log(`\n[INFO] Found ${mjmlFiles.length} MJML file(s) to compile...`);

View File

@@ -39,14 +39,23 @@
<mj-text align="center" font-size="12px" line-height="16px" color="#5A6D91">
<p style="margin-bottom: 5px; margin-top: 5px">
© {{ CurrentYear }} Bitwarden Inc. 1 N. Calle Cesar Chavez, Suite 102, Santa
Barbara, CA, USA
© {{ CurrentYear }} Bitwarden Inc. 1 N. Calle Cesar Chavez, Suite 102,
Santa Barbara, CA, USA
</p>
<p style="margin-top: 5px">
Always confirm you are on a trusted Bitwarden domain before logging
in:<br />
<a href="https://bitwarden.com/" style="text-decoration:none;color:#175ddc; font-weight:400">bitwarden.com</a> |
<a href="https://bitwarden.com/help/emails-from-bitwarden/" style="text-decoration:none; color:#175ddc; font-weight:400">Learn why we include this</a>
<a
href="https://bitwarden.com/"
style="text-decoration: none; color: #175ddc; font-weight: 400"
>bitwarden.com</a
>
|
<a
href="https://bitwarden.com/help/emails-from-bitwarden/"
style="text-decoration: none; color: #175ddc; font-weight: 400"
>Learn why we include this</a
>
</p>
</mj-text>
</mj-column>

View File

@@ -18,19 +18,20 @@ class MjBwHero extends BodyComponent {
static defaultAttributes = {};
componentHeadStyle = breakpoint => {
componentHeadStyle = (breakpoint) => {
return `
@media only screen and (max-width:${breakpoint}) {
.mj-bw-hero-responsive-img {
display: none !important;
}
}
`
}
`;
};
render() {
const buttonElement = this.getAttribute("button-text") && this.getAttribute("button-url") ?
`<mj-button
const buttonElement =
this.getAttribute("button-text") && this.getAttribute("button-url")
? `<mj-button
href="${this.getAttribute("button-url")}"
background-color="#fff"
color="#1A41AC"
@@ -39,13 +40,15 @@ class MjBwHero extends BodyComponent {
>
${this.getAttribute("button-text")}
</mj-button
>` : "";
const subTitleElement = this.getAttribute("sub-title") ?
`<mj-text color="#fff" padding-top="0" padding-bottom="0">
>`
: "";
const subTitleElement = this.getAttribute("sub-title")
? `<mj-text color="#fff" padding-top="0" padding-bottom="0">
<h2 style="font-weight: normal; font-size: 16px; line-height: 0px">
${this.getAttribute("sub-title")}
</h2>
</mj-text>` : "";
</mj-text>`
: "";
return this.renderMJML(
`

View File

@@ -26,7 +26,7 @@ class MjBwIconRow extends BodyComponent {
static defaultAttributes = {};
headStyle = (breakpoint) => {
headStyle = (breakpoint) => {
return `
@media only screen and (max-width:${breakpoint}) {
.mj-bw-icon-row-text {

View File

@@ -25,10 +25,10 @@ class MjBwLearnMoreFooter extends BodyComponent {
render() {
return this.renderMJML(
`
<mj-section border-radius="0px 0px 4px 4px" background-color="#F3F6F9" padding="5px 10px 10px 10px">
<mj-section border-radius="0px 0px 4px 4px" background-color="#F3F6F9">
<mj-column width="70%">
<mj-text line-height="24px">
<p style="font-size: 18px; line-height: 28px; font-weight: bold;">
<p style="font-size: 18px; line-height: 28px; font-weight: 500; margin-top: 0px;">
Learn more about Bitwarden
</p>
Find user guides, product documentation, and videos on the

View File

@@ -1,51 +1,54 @@
<mjml>
<mj-head>
<!-- Include shared head styles -->
<mj-include path="../../../components/head.mjml" />
<mj-head>
<!-- Include shared head styles -->
<mj-include path="../../../components/head.mjml" />
</mj-head>
<mj-body>
<!-- Blue Header Section -->
<mj-wrapper css-class="border-fix" padding="20px 20px 10px 20px">
<mj-bw-ac-hero
title="You can now share passwords with members of <b>{{OrganizationName}}!</b>"
img-src="https://assets.bitwarden.com/email/v1/ac-spot-enterprise.png"
button-text="<b>Log in</b>"
button-url="{{WebVaultUrl}}"
/>
</mj-wrapper>
</mj-head>
<!-- Main Content -->
<mj-wrapper padding="5px 20px 8px 20px">
<mj-section background-color="#fff" padding="10px 10px 16px 10px">
<mj-column>
<mj-text
font-size="16px"
line-height="24px"
padding="15px 15px 0px 15px"
>
As a member of <b>{{ OrganizationName }}</b
>:
</mj-text>
</mj-column>
</mj-section>
<mj-bw-ac-icon-row-without-bulletins
icon-src="https://assets.bitwarden.com/email/v1/icon-enterprise.png"
icon-alt="Organization Icon"
text="Your account is owned by {{OrganizationName}} and is subject to their security and management policies."
/>
<mj-bw-ac-icon-row-without-bulletins
icon-src="https://assets.bitwarden.com/email/v1/icon-account-switching-new.png"
icon-alt="Share Icon"
text="You can easily access and share passwords with your team."
foot-url-text="Share passwords in Bitwarden"
foot-url="https://bitwarden.com/help/sharing"
/>
</mj-wrapper>
<mj-body>
<!-- Blue Header Section -->
<mj-wrapper css-class="border-fix" padding="20px 20px 10px 20px">
<mj-bw-ac-hero
title="You can now share passwords with members of <b>{{OrganizationName}}!</b>"
img-src="https://assets.bitwarden.com/email/v1/ac-spot-enterprise.png"
button-text="<b>Log in</b>"
button-url="{{WebVaultUrl}}"
/>
</mj-wrapper>
<!-- Learn More Section -->
<mj-wrapper padding="8px 20px 10px 20px">
<mj-bw-ac-learn-more-footer />
</mj-wrapper>
<!-- Main Content -->
<mj-wrapper padding="5px 20px 8px 20px">
<mj-section background-color="#fff" padding="10px 10px 16px 10px">
<mj-column>
<mj-text font-size="16px" line-height="24px" padding="15px 15px 0px 15px">
As a member of <b>{{OrganizationName}}</b>:
</mj-text>
</mj-column>
</mj-section>
<mj-bw-ac-icon-row-without-bulletins
icon-src="https://assets.bitwarden.com/email/v1/icon-enterprise.png"
icon-alt="Organization Icon"
text="Your account is owned by {{OrganizationName}} and is subject to their security and management policies."
/>
<mj-bw-ac-icon-row-without-bulletins
icon-src="https://assets.bitwarden.com/email/v1/icon-account-switching-new.png"
icon-alt="Share Icon"
text="You can easily access and share passwords with your team."
foot-url-text="Share passwords in Bitwarden"
foot-url="https://bitwarden.com/help/sharing"
/>
</mj-wrapper>
<!-- Learn More Section -->
<mj-wrapper padding="8px 20px 10px 20px">
<mj-bw-ac-learn-more-footer />
</mj-wrapper>
<!-- Footer -->
<mj-include path="../../../components/footer.mjml" />
</mj-body>
<!-- Footer -->
<mj-include path="../../../components/footer.mjml" />
</mj-body>
</mjml>

View File

@@ -1,104 +1,123 @@
<mjml>
<mj-head>
<!-- Include shared head styles -->
<mj-include path="../../../components/head.mjml" />
<mj-head>
<!-- Include shared head styles -->
<mj-include path="../../../components/head.mjml" />
<!-- Include admin console shared styles --><mj-include path="../components/admin-console-head.mjml" />
</mj-head>
<!-- Include admin console shared styles --><mj-include
path="../components/admin-console-head.mjml"
/>
</mj-head>
<mj-body>
<!-- Blue Header Section -->
<mj-wrapper css-class="border-fix" padding="20px 20px 10px 20px">
<mj-bw-ac-hero
title="You can now share passwords with members of <b>{{OrganizationName}}!</b>"
img-src="https://assets.bitwarden.com/email/v1/ac-spot-family.png"
button-text="<b>Log in</b>"
button-url="{{WebVaultUrl}}">
</mj-bw-ac-hero>
</mj-wrapper>
<mj-body>
<!-- Blue Header Section -->
<mj-wrapper css-class="border-fix" padding="20px 20px 10px 20px">
<mj-bw-ac-hero
title="You can now share passwords with members of <b>{{OrganizationName}}!</b>"
img-src="https://assets.bitwarden.com/email/v1/ac-spot-family.png"
button-text="<b>Log in</b>"
button-url="{{WebVaultUrl}}"
>
</mj-bw-ac-hero>
</mj-wrapper>
<!-- Main Content -->
<mj-wrapper padding="5px 20px 8px 20px">
<mj-section background-color="#fff" padding="10px 10px 16px 10px">
<mj-column>
<mj-text font-size="16px" line-height="24px" padding="15px 15px 0px 15px">
As a member of <b>{{OrganizationName}}</b>:
</mj-text>
</mj-column>
</mj-section>
<mj-bw-ac-icon-row-without-bulletins
icon-src="https://assets.bitwarden.com/email/v1/icon-item-type.png"
icon-alt="Group Users Icon"
text="You can access passwords {{OrganizationName}} has shared with you.">
</mj-bw-ac-icon-row-without-bulletins>
<mj-bw-ac-icon-row-without-bulletins
icon-src="https://assets.bitwarden.com/email/v1/icon-account-switching-new.png"
icon-alt="Share Icon"
text="You can easily share passwords with friends, family, or coworkers."
foot-url-text="Share passwords in Bitwarden"
foot-url="https://bitwarden.com/help/sharing">
</mj-bw-ac-icon-row-without-bulletins>
</mj-wrapper>
<!-- Main Content -->
<mj-wrapper padding="5px 20px 8px 20px">
<mj-section background-color="#fff" padding="10px 10px 16px 10px">
<mj-column>
<mj-text
font-size="16px"
line-height="24px"
padding="15px 15px 0px 15px"
>
As a member of <b>{{ OrganizationName }}</b
>:
</mj-text>
</mj-column>
</mj-section>
<mj-bw-ac-icon-row-without-bulletins
icon-src="https://assets.bitwarden.com/email/v1/icon-item-type.png"
icon-alt="Group Users Icon"
text="You can access passwords {{OrganizationName}} has shared with you."
>
</mj-bw-ac-icon-row-without-bulletins>
<mj-bw-ac-icon-row-without-bulletins
icon-src="https://assets.bitwarden.com/email/v1/icon-account-switching-new.png"
icon-alt="Share Icon"
text="You can easily share passwords with friends, family, or coworkers."
foot-url-text="Share passwords in Bitwarden"
foot-url="https://bitwarden.com/help/sharing"
>
</mj-bw-ac-icon-row-without-bulletins>
</mj-wrapper>
<!-- Download Mobile Apps Section -->
<mj-wrapper padding="8px 20px 10px 20px">
<mj-section background-color="#fff" padding="32px 10px 0px 25px">
<mj-column>
<mj-text
font-size="18px"
font-weight="500"
line-height="24px"
padding="0 0 16px 0">
Download Bitwarden on all devices
</mj-text>
<!-- Download Mobile Apps Section -->
<mj-wrapper padding="8px 20px 10px 20px">
<mj-section background-color="#fff" padding="32px 10px 0px 25px">
<mj-column>
<mj-text
font-size="18px"
font-weight="500"
line-height="24px"
padding="0 0 16px 0"
>
Download Bitwarden on all devices
</mj-text>
<mj-text
mj-class="ac-text"
padding="0 0 24px 0">
Already using the <a href="https://bitwarden.com/download/" class="link">browser extension</a>?
Download the Bitwarden mobile app from the
<a href="https://apps.apple.com/us/app/bitwarden-password-manager/id1137397744" class="link">App Store</a>
or <a href="https://play.google.com/store/apps/details?id=com.x8bit.bitwarden" class="link">Google Play</a>
to quickly save logins and autofill forms on the go.
</mj-text>
</mj-column>
</mj-section>
<mj-text mj-class="ac-text" padding="0 0 24px 0">
Already using the
<a href="https://bitwarden.com/download/" class="link"
>browser extension</a
>? Download the Bitwarden mobile app from the
<a
href="https://apps.apple.com/us/app/bitwarden-password-manager/id1137397744"
class="link"
>App Store</a
>
or
<a
href="https://play.google.com/store/apps/details?id=com.x8bit.bitwarden"
class="link"
>Google Play</a
>
to quickly save logins and autofill forms on the go.
</mj-text>
</mj-column>
</mj-section>
<mj-section background-color="#fff" padding="0 10px 32px 25px">
<mj-group>
<mj-column width="159px">
<mj-image
css-class="hide-mobile"
href="https://apps.apple.com/us/app/bitwarden-password-manager/id1137397744"
src="https://assets.bitwarden.com/email/v1/ac-apple-store.png"
alt="Download on the App Store"
width="135px"
height="40px"
padding="0 24px 0 0"
/>
</mj-column>
<mj-column width="140px">
<mj-image
css-class="hide-mobile"
href="https://play.google.com/store/apps/details?id=com.x8bit.bitwarden"
src="https://assets.bitwarden.com/email/v1/ac-google-play.png"
alt="Get it on Google Play"
width="140px"
height="40px"
padding="0"
/>
</mj-column>
</mj-group>
</mj-section>
</mj-wrapper>
<mj-section background-color="#fff" padding="0 10px 32px 25px">
<mj-group>
<mj-column width="159px">
<mj-image
css-class="hide-mobile"
href="https://apps.apple.com/us/app/bitwarden-password-manager/id1137397744"
src="https://assets.bitwarden.com/email/v1/ac-apple-store.png"
alt="Download on the App Store"
width="135px"
height="40px"
padding="0 24px 0 0"
/>
</mj-column>
<mj-column width="140px">
<mj-image
css-class="hide-mobile"
href="https://play.google.com/store/apps/details?id=com.x8bit.bitwarden"
src="https://assets.bitwarden.com/email/v1/ac-google-play.png"
alt="Get it on Google Play"
width="140px"
height="40px"
padding="0"
/>
</mj-column>
</mj-group>
</mj-section>
</mj-wrapper>
<!-- Learn More Section -->
<mj-wrapper padding="8px 20px 10px 20px">
<mj-bw-ac-learn-more-footer />
</mj-wrapper>
<!-- Learn More Section -->
<mj-wrapper padding="8px 20px 10px 20px">
<mj-bw-ac-learn-more-footer />
</mj-wrapper>
<!-- Footer -->
<mj-include path="../../../components/footer.mjml" />
</mj-body>
<!-- Footer -->
<mj-include path="../../../components/footer.mjml" />
</mj-body>
</mjml>

View File

@@ -18,8 +18,14 @@
<mj-wrapper padding="5px 20px 8px 20px">
<mj-section background-color="#fff" padding="10px 10px 16px 10px">
<mj-column>
<mj-text font-size="16px" line-height="24px" padding="15px 15px 0px 15px">
<b>{{OrganizationName}}</b> is rolling out Bitwarden to increase security and protect your sensitive data. Once you accept this invitation, you can:
<mj-text
font-size="16px"
line-height="24px"
padding="15px 15px 0px 15px"
>
<b>{{ OrganizationName }}</b> is rolling out Bitwarden to increase
security and protect your sensitive data. Once you accept this
invitation, you can:
</mj-text>
</mj-column>
</mj-section>
@@ -40,11 +46,22 @@
/>
<mj-section background-color="#fff" padding="0px 10px 12px 10px">
<mj-column>
<mj-text font-size="12px" line-height="16px" color="#1B2029" padding="0px 15px 15px 15px">
<mj-text
font-size="12px"
line-height="16px"
color="#1B2029"
padding="0px 15px 15px 15px"
>
{{#if InviterEmail}}
This invitation was sent by <a href="mailto:{{InviterEmail}}" style="color: #175ddc; text-decoration: none;">{{InviterEmail}}</a> and expires {{ExpirationDate}}
This invitation was sent by
<a
href="mailto:{{InviterEmail}}"
style="color: #175ddc; text-decoration: none"
>{{ InviterEmail }}</a
>
and expires {{ ExpirationDate }}
{{else}}
This invitation expires {{ExpirationDate}}
This invitation expires {{ ExpirationDate }}
{{/if}}
</mj-text>
</mj-column>
@@ -55,11 +72,23 @@
<mj-wrapper padding="8px 20px 8px 20px">
<mj-section background-color="#fff" padding="10px 10px">
<mj-column>
<mj-text font-size="18px" line-height="28px" font-weight="500" padding="15px 15px 8px 15px">
Your existing account will be owned by {{OrganizationName}}
<mj-text
font-size="18px"
line-height="28px"
font-weight="500"
padding="15px 15px 8px 15px"
>
Your existing account will be owned by {{ OrganizationName }}
</mj-text>
<mj-text font-size="16px" line-height="24px" padding="0px 15px 15px 15px">
By accepting this invitation, your account ({{Email}}) will be owned by <b>{{OrganizationName}}</b> and will be subject to their security and management policies. Contact your administrator with any questions or concerns.
<mj-text
font-size="16px"
line-height="24px"
padding="0px 15px 15px 15px"
>
By accepting this invitation, your account ({{ Email }}) will be
owned by <b>{{ OrganizationName }}</b> and will be subject to their
security and management policies. Contact your administrator with
any questions or concerns.
</mj-text>
</mj-column>
</mj-section>

View File

@@ -18,8 +18,14 @@
<mj-wrapper padding="5px 20px 8px 20px">
<mj-section background-color="#fff" padding="10px 10px 16px 10px">
<mj-column>
<mj-text font-size="16px" line-height="24px" padding="15px 15px 0px 15px">
<b>{{OrganizationName}}</b> is rolling out Bitwarden to increase security and protect your sensitive data. Once you finish account setup, you can:
<mj-text
font-size="16px"
line-height="24px"
padding="15px 15px 0px 15px"
>
<b>{{ OrganizationName }}</b> is rolling out Bitwarden to increase
security and protect your sensitive data. Once you finish account
setup, you can:
</mj-text>
</mj-column>
</mj-section>
@@ -40,11 +46,22 @@
/>
<mj-section background-color="#fff" padding="0px 10px 12px 10px">
<mj-column>
<mj-text font-size="12px" line-height="16px" color="#1B2029" padding="0px 15px 15px 15px">
<mj-text
font-size="12px"
line-height="16px"
color="#1B2029"
padding="0px 15px 15px 15px"
>
{{#if InviterEmail}}
This invitation was sent by <a href="mailto:{{InviterEmail}}" style="color: #175ddc; text-decoration: none;">{{InviterEmail}}</a> and expires {{ExpirationDate}}
This invitation was sent by
<a
href="mailto:{{InviterEmail}}"
style="color: #175ddc; text-decoration: none"
>{{ InviterEmail }}</a
>
and expires {{ ExpirationDate }}
{{else}}
This invitation expires {{ExpirationDate}}
This invitation expires {{ ExpirationDate }}
{{/if}}
</mj-text>
</mj-column>

View File

@@ -18,8 +18,14 @@
<mj-wrapper padding="5px 20px 8px 20px">
<mj-section background-color="#fff" padding="10px 10px 16px 10px">
<mj-column>
<mj-text font-size="16px" line-height="24px" padding="15px 15px 0px 15px">
<b>{{OrganizationName}}</b> is using Bitwarden to simplify password sharing and protect your sensitive data. Once you accept this invitation, you can:
<mj-text
font-size="16px"
line-height="24px"
padding="15px 15px 0px 15px"
>
<b>{{ OrganizationName }}</b> is using Bitwarden to simplify
password sharing and protect your sensitive data. Once you accept
this invitation, you can:
</mj-text>
</mj-column>
</mj-section>
@@ -40,11 +46,22 @@
/>
<mj-section background-color="#fff" padding="0px 10px 12px 10px">
<mj-column>
<mj-text font-size="12px" line-height="16px" color="#1B2029" padding="0px 15px 15px 15px">
<mj-text
font-size="12px"
line-height="16px"
color="#1B2029"
padding="0px 15px 15px 15px"
>
{{#if InviterEmail}}
This invitation was sent by <a href="mailto:{{InviterEmail}}" style="color: #175ddc; text-decoration: none;">{{InviterEmail}}</a> and expires {{ExpirationDate}}
This invitation was sent by
<a
href="mailto:{{InviterEmail}}"
style="color: #175ddc; text-decoration: none"
>{{ InviterEmail }}</a
>
and expires {{ ExpirationDate }}
{{else}}
This invitation expires {{ExpirationDate}}
This invitation expires {{ ExpirationDate }}
{{/if}}
</mj-text>
</mj-column>

View File

@@ -18,8 +18,14 @@
<mj-wrapper padding="5px 20px 8px 20px">
<mj-section background-color="#fff" padding="10px 10px 16px 10px">
<mj-column>
<mj-text font-size="16px" line-height="24px" padding="15px 15px 0px 15px">
<b>{{OrganizationName}}</b> is using Bitwarden to simplify password sharing and protect your sensitive data. Once you finish account setup, you can:
<mj-text
font-size="16px"
line-height="24px"
padding="15px 15px 0px 15px"
>
<b>{{ OrganizationName }}</b> is using Bitwarden to simplify
password sharing and protect your sensitive data. Once you finish
account setup, you can:
</mj-text>
</mj-column>
</mj-section>
@@ -40,11 +46,22 @@
/>
<mj-section background-color="#fff" padding="0px 10px 12px 10px">
<mj-column>
<mj-text font-size="12px" line-height="16px" color="#1B2029" padding="0px 15px 15px 15px">
<mj-text
font-size="12px"
line-height="16px"
color="#1B2029"
padding="0px 15px 15px 15px"
>
{{#if InviterEmail}}
This invitation was sent by <a href="mailto:{{InviterEmail}}" style="color: #175ddc; text-decoration: none;">{{InviterEmail}}</a> and expires {{ExpirationDate}}
This invitation was sent by
<a
href="mailto:{{InviterEmail}}"
style="color: #175ddc; text-decoration: none"
>{{ InviterEmail }}</a
>
and expires {{ ExpirationDate }}
{{else}}
This invitation expires {{ExpirationDate}}
This invitation expires {{ ExpirationDate }}
{{/if}}
</mj-text>
</mj-column>

View File

@@ -18,8 +18,14 @@
<mj-wrapper padding="5px 20px 8px 20px">
<mj-section background-color="#fff" padding="10px 10px 16px 10px">
<mj-column>
<mj-text font-size="16px" line-height="24px" padding="15px 15px 0px 15px">
Bitwarden is a password manager used to simplify password sharing and protect your sensitive data. Once you accept this invitation, you can:
<mj-text
font-size="16px"
line-height="24px"
padding="15px 15px 0px 15px"
>
Bitwarden is a password manager used to simplify password sharing
and protect your sensitive data. Once you accept this invitation,
you can:
</mj-text>
</mj-column>
</mj-section>
@@ -40,11 +46,22 @@
/>
<mj-section background-color="#fff" padding="0px 10px 12px 10px">
<mj-column>
<mj-text font-size="12px" line-height="16px" color="#1B2029" padding="0px 15px 15px 15px">
<mj-text
font-size="12px"
line-height="16px"
color="#1B2029"
padding="0px 15px 15px 15px"
>
{{#if InviterEmail}}
This invitation was sent by <a href="mailto:{{InviterEmail}}" style="color: #175ddc; text-decoration: none;">{{InviterEmail}}</a> and expires {{ExpirationDate}}
This invitation was sent by
<a
href="mailto:{{InviterEmail}}"
style="color: #175ddc; text-decoration: none"
>{{ InviterEmail }}</a
>
and expires {{ ExpirationDate }}
{{else}}
This invitation expires {{ExpirationDate}}
This invitation expires {{ ExpirationDate }}
{{/if}}
</mj-text>
</mj-column>

View File

@@ -1,17 +1,17 @@
<mj-attributes>
<mj-all
font-family="'Helvetica Neue','Inter',Helvetica,Arial,sans-serif" />
<mj-class
name="ac-text"
font-size="16px"
font-weight="400"
line-height="24px"
/>
<mj-all font-family="'Helvetica Neue','Inter',Helvetica,Arial,sans-serif" />
<mj-class
name="ac-text"
font-size="16px"
font-weight="400"
line-height="24px"
/>
</mj-attributes>
<mj-style>
@media only screen and (max-width: 480px) {
.hide-mobile { display: none !important; }
@media only screen and (max-width: 480px) {
.hide-mobile {
display: none !important;
}
}
</mj-style>

View File

@@ -18,19 +18,20 @@ class MjBwAcHero extends BodyComponent {
static defaultAttributes = {};
componentHeadStyle = breakpoint => {
componentHeadStyle = (breakpoint) => {
return `
@media only screen and (max-width:${breakpoint}) {
.mj-bw-ac-hero-responsive-img {
display: none !important;
}
}
`
}
`;
};
render() {
const buttonElement = this.getAttribute("button-text") && this.getAttribute("button-url") ?
`<mj-button
const buttonElement =
this.getAttribute("button-text") && this.getAttribute("button-url")
? `<mj-button
href="${this.getAttribute("button-url")}"
background-color="#fff"
color="#1A41AC"
@@ -40,13 +41,15 @@ class MjBwAcHero extends BodyComponent {
>
${this.getAttribute("button-text")}
</mj-button
>` : "";
const subTitleElement = this.getAttribute("sub-title") ?
`<mj-text color="#fff" padding-top="0" padding-bottom="0">
>`
: "";
const subTitleElement = this.getAttribute("sub-title")
? `<mj-text color="#fff" padding-top="0" padding-bottom="0">
<h2 style="font-weight: normal; font-size: 16px; line-height: 0px">
${this.getAttribute("sub-title")}
</h2>
</mj-text>` : "";
</mj-text>`
: "";
return this.renderMJML(
`
@@ -89,4 +92,4 @@ class MjBwAcHero extends BodyComponent {
}
}
module.exports = MjBwAcHero;
module.exports = MjBwAcHero;

View File

@@ -8,26 +8,26 @@ const BODY_TEXT_STYLES = `
`;
class MjBwAcIconRowWithoutBulletins extends BodyComponent {
static dependencies = {
"mj-column": ["mj-bw-ac-icon-row-without-bulletins"],
"mj-wrapper": ["mj-bw-ac-icon-row-without-bulletins"],
"mj-bw-ac-icon-row-without-bulletins": [],
};
static dependencies = {
"mj-column": ["mj-bw-ac-icon-row-without-bulletins"],
"mj-wrapper": ["mj-bw-ac-icon-row-without-bulletins"],
"mj-bw-ac-icon-row-without-bulletins": [],
};
static allowedAttributes = {
"icon-src": "string",
"icon-alt": "string",
"head-url-text": "string",
"head-url": "string",
text: "string",
"foot-url-text": "string",
"foot-url": "string",
};
static allowedAttributes = {
"icon-src": "string",
"icon-alt": "string",
"head-url-text": "string",
"head-url": "string",
text: "string",
"foot-url-text": "string",
"foot-url": "string",
};
static defaultAttributes = {};
static defaultAttributes = {};
headStyle = (breakpoint) => {
return `
headStyle = (breakpoint) => {
return `
@media only screen and (max-width:${breakpoint}) {
.mj-bw-ac-icon-row-text {
padding-left: 15px !important;
@@ -44,12 +44,12 @@ class MjBwAcIconRowWithoutBulletins extends BodyComponent {
}
}
`;
};
};
render() {
const headAnchorElement =
this.getAttribute("head-url-text") && this.getAttribute("head-url")
? `
render() {
const headAnchorElement =
this.getAttribute("head-url-text") && this.getAttribute("head-url")
? `
<mj-text css-class="mj-bw-ac-icon-row-text" padding="5px 10px 0px 10px" ${BODY_TEXT_STYLES}>
<a href="${this.getAttribute("head-url")}" class="link">
${this.getAttribute("head-url-text")}
@@ -62,19 +62,19 @@ class MjBwAcIconRowWithoutBulletins extends BodyComponent {
</span>
</a>
</mj-text>`
: "";
: "";
const footAnchorElement =
this.getAttribute("foot-url-text") && this.getAttribute("foot-url")
? `<mj-text css-class="mj-bw-ac-icon-row-text" padding="0px" ${BODY_TEXT_STYLES}>
const footAnchorElement =
this.getAttribute("foot-url-text") && this.getAttribute("foot-url")
? `<mj-text css-class="mj-bw-ac-icon-row-text" padding="0px" ${BODY_TEXT_STYLES}>
<a href="${this.getAttribute("foot-url")}" class="link">
${this.getAttribute("foot-url-text")}
</a>
</mj-text>`
: "";
: "";
return this.renderMJML(
`
return this.renderMJML(
`
<mj-section background-color="#fff" padding="0px 10px 24px 10px">
<mj-group css-class="mj-bw-ac-icon-row">
<mj-column width="15%" vertical-align="middle" css-class="mj-bw-ac-icon-row-icon">
@@ -96,8 +96,8 @@ class MjBwAcIconRowWithoutBulletins extends BodyComponent {
</mj-group>
</mj-section>
`,
);
}
);
}
}
module.exports = MjBwAcIconRowWithoutBulletins;

View File

@@ -26,7 +26,7 @@ class MjBwAcIconRow extends BodyComponent {
static defaultAttributes = {};
headStyle = (breakpoint) => {
headStyle = (breakpoint) => {
return `
@media only screen and (max-width:${breakpoint}) {
.mj-bw-ac-icon-row-text {
@@ -107,4 +107,4 @@ class MjBwAcIconRow extends BodyComponent {
}
}
module.exports = MjBwAcIconRow;
module.exports = MjBwAcIconRow;

View File

@@ -52,4 +52,4 @@ class MjBwAcLearnMoreFooter extends BodyComponent {
}
}
module.exports = MjBwAcLearnMoreFooter;
module.exports = MjBwAcLearnMoreFooter;

View File

@@ -1,17 +1,16 @@
const { BodyComponent } = require("mjml-core");
class MjBwInviterInfo extends BodyComponent {
static dependencies = {
"mj-column": ["mj-bw-inviter-info"],
"mj-wrapper": ["mj-bw-inviter-info"],
"mj-bw-inviter-info": [],
};
static dependencies = {
"mj-column": ["mj-bw-inviter-info"],
"mj-wrapper": ["mj-bw-inviter-info"],
"mj-bw-inviter-info": [],
};
static allowedAttributes = {
static allowedAttributes = {
"expiration-date": "string", // REQUIRED: Date to display
"email-address": "string", // Optional: Email address to display
};
};
render() {
const emailAddressText = this.getAttribute("email-address")
@@ -27,7 +26,7 @@ class MjBwInviterInfo extends BodyComponent {
</mj-text>
</mj-column>
</mj-section>
`
`,
);
}
}

View File

@@ -1,38 +1,53 @@
<mj-section background-color="#fff" padding="30px 30px 10px 30px">
<mj-column>
<mj-text font-size="18px" font-weight="700" line-height="32px" padding="0 0 15px 0">
Download Bitwarden on all devices
</mj-text>
<mj-text font-size="15px" line-height="16px" padding="0 0 20px 0">
Already using the <a href="https://bitwarden.com/download/" class="link">browser extension</a>?
Download the Bitwarden mobile app from the
<a href="https://apps.apple.com/us/app/bitwarden-password-manager/id1137397744" class="link">App Store</a>
or <a href="https://play.google.com/store/apps/details?id=com.x8bit.bitwarden" class="link">Google Play</a>
to quickly save logins and autofill forms on the go.
</mj-text>
</mj-column>
<mj-column>
<mj-text
font-size="18px"
font-weight="700"
line-height="32px"
padding="0 0 15px 0"
>
Download Bitwarden on all devices
</mj-text>
<mj-text font-size="15px" line-height="16px" padding="0 0 20px 0">
Already using the
<a href="https://bitwarden.com/download/" class="link"
>browser extension</a
>? Download the Bitwarden mobile app from the
<a
href="https://apps.apple.com/us/app/bitwarden-password-manager/id1137397744"
class="link"
>App Store</a
>
or
<a
href="https://play.google.com/store/apps/details?id=com.x8bit.bitwarden"
class="link"
>Google Play</a
>
to quickly save logins and autofill forms on the go.
</mj-text>
</mj-column>
</mj-section>
<mj-section background-color="#fff" padding="0 30px 20px 30px">
<mj-group>
<mj-column width="120px" vertical-align="middle">
<mj-image
href="https://apps.apple.com/us/app/bitwarden-password-manager/id1137397744"
src="https://assets.bitwarden.com/email/v1/App-store.png"
alt="Download on the App Store"
width="120px"
padding="0"
/>
</mj-column>
<mj-column width="150px" vertical-align="middle">
<mj-image
href="https://play.google.com/store/apps/details?id=com.x8bit.bitwarden"
src="https://assets.bitwarden.com/email/v1/google-play-badge.png"
alt="Get it on Google Play"
width="150px"
padding="0 0 0 10px"
/>
</mj-column>
</mj-group>
<mj-group>
<mj-column width="120px" vertical-align="middle">
<mj-image
href="https://apps.apple.com/us/app/bitwarden-password-manager/id1137397744"
src="https://assets.bitwarden.com/email/v1/App-store.png"
alt="Download on the App Store"
width="120px"
padding="0"
/>
</mj-column>
<mj-column width="150px" vertical-align="middle">
<mj-image
href="https://play.google.com/store/apps/details?id=com.x8bit.bitwarden"
src="https://assets.bitwarden.com/email/v1/google-play-badge.png"
alt="Get it on Google Play"
width="150px"
padding="0 0 0 10px"
/>
</mj-column>
</mj-group>
</mj-section>

View File

@@ -18,7 +18,7 @@
<mj-section background-color="#fff" padding="15px 10px 10px 10px">
<mj-column>
<mj-text font-size="16px" line-height="24px" padding="10px 15px">
An administrator from <b>{{OrganizationName}}</b> will approve you
An administrator from <b>{{ OrganizationName }}</b> will approve you
before you can share passwords. While you wait for approval, get
started with Bitwarden Password Manager:
</mj-text>

View File

@@ -18,9 +18,9 @@
<mj-section background-color="#fff" padding="15px 10px 10px 10px">
<mj-column>
<mj-text font-size="16px" line-height="24px" padding="10px 15px">
An administrator from <b>{{OrganizationName}}</b> will need to confirm
you before you can share passwords. Get started with Bitwarden
Password Manager:
An administrator from <b>{{ OrganizationName }}</b> will need to
confirm you before you can share passwords. Get started with
Bitwarden Password Manager:
</mj-text>
</mj-column>
</mj-section>

View File

@@ -1,31 +1,33 @@
<mjml>
<mj-head>
<mj-include path="../../../../components/head.mjml" />
</mj-head>
<mj-body css-class="border-fix">
<!-- Blue Header Section -->
<mj-wrapper css-class="border-fix" padding="20px 20px 0px 20px">
<mj-bw-hero title=""/>
</mj-wrapper>
<mj-head>
<mj-include path="../../../../components/head.mjml" />
</mj-head>
<mj-body css-class="border-fix">
<!-- Blue Header Section -->
<mj-wrapper css-class="border-fix" padding="20px 20px 0px 20px">
<mj-bw-hero title="" />
</mj-wrapper>
<!-- Main Content -->
<mj-wrapper padding="0px 20px 0px 20px">
<mj-section background-color="#fff" padding="0px 10px 0px 10px">
<mj-column>
<mj-text font-size="16px" line-height="24px" padding="10px 15px">
The following emergency contacts have been removed from your account:
<ul>
{{#each RemovedGranteeEmails}}
<li>{{this}}</li>
{{/each}}
</ul>
Learn more about <a href="{{EmergencyAccessHelpPageUrl}}">emergency access</a>.
</mj-text>
</mj-column>
</mj-section>
</mj-wrapper>
<!-- Main Content -->
<mj-wrapper padding="0px 20px 0px 20px">
<mj-section background-color="#fff" padding="0px 10px 0px 10px">
<mj-column>
<mj-text font-size="16px" line-height="24px" padding="10px 15px">
The following emergency contacts have been removed from your
account:
<ul>
{{#each RemovedGranteeEmails}}
<li>{{ this }}</li>
{{/each}}
</ul>
Learn more about
<a href="{{EmergencyAccessHelpPageUrl}}">emergency access</a>.
</mj-text>
</mj-column>
</mj-section>
</mj-wrapper>
<!-- Footer -->
<mj-include path="../../../../components/footer.mjml" />
</mj-body>
<!-- Footer -->
<mj-include path="../../../../components/footer.mjml" />
</mj-body>
</mjml>

View File

@@ -24,12 +24,12 @@
<mj-section background-color="#fff">
<mj-column padding="0px">
<mj-text> Your verification code is: </mj-text>
<mj-text font-size="32px">
<b>{{Token}}</b>
<mj-text font-size="32px" font-weight="500">
{{ Token }}
</mj-text>
<mj-spacer height="20px" />
<mj-text>
This code expires in {{Expiry}} minutes. After that, you'll need
This code expires in {{ Expiry }} minutes. After that, you'll need
to verify your email again.
</mj-text>
</mj-column>
@@ -42,10 +42,10 @@
inner-border-radius="16px"
padding="0px"
>
<mj-text>
<mj-text line-height="24px">
<p>
Bitwarden Send transmits sensitive, temporary information to
others easily and securely. Learn more about
Bitwarden Send securely shares sensitive information. Learn more
about
<a href="https://bitwarden.com/help/send" class="link"
>Bitwarden Send</a
>

View File

@@ -1,42 +1,55 @@
<mjml>
<mj-head>
<mj-include path="../../../components/head.mjml"/>
</mj-head>
<mj-head>
<mj-include path="../../../components/head.mjml" />
</mj-head>
<!-- Blue Header Section-->
<mj-body css-class="border-fix">
<mj-wrapper css-class="border-fix" padding="20px 20px 0px 20px">
<mj-bw-simple-hero />
</mj-wrapper>
<!-- Blue Header Section-->
<mj-body css-class="border-fix">
<mj-wrapper css-class="border-fix" padding="20px 20px 0px 20px">
<mj-bw-simple-hero />
</mj-wrapper>
<!-- Main Content Section -->
<mj-wrapper padding="0px 20px 0px 20px">
<mj-section background-color="#fff" padding="15px 10px 10px 10px">
<mj-column>
<mj-text font-size="16px" line-height="24px" padding="10px 15px 15px 15px">
Your Bitwarden Families subscription renews in 15 days. The price is updating to {{BaseMonthlyRenewalPrice}}/month, billed annually
at {{BaseAnnualRenewalPrice}} + tax.
</mj-text>
<mj-text font-size="16px" line-height="24px" padding="10px 15px 15px 15px">
As a long time Bitwarden customer, you will receive a one-time {{DiscountAmount}} loyalty discount for this year's renewal.
This renewal will now be billed annually at {{DiscountedAnnualRenewalPrice}} + tax.
</mj-text>
<mj-text font-size="16px" line-height="24px" padding="10px 15px">
Questions? Contact
<a href="mailto:support@bitwarden.com" class="link">support@bitwarden.com</a>
</mj-text>
</mj-column>
</mj-section>
<mj-section background-color="#fff" padding="0 20px 20px 20px">
</mj-section>
</mj-wrapper>
<!-- Main Content Section -->
<mj-wrapper padding="0px 20px 0px 20px">
<mj-section background-color="#fff" padding="15px 10px 10px 10px">
<mj-column>
<mj-text
font-size="16px"
line-height="24px"
padding="10px 15px 15px 15px"
>
Your Bitwarden Families subscription renews in 15 days. The price is
updating to {{ BaseMonthlyRenewalPrice }}/month, billed annually at
{{ BaseAnnualRenewalPrice }} + tax.
</mj-text>
<mj-text
font-size="16px"
line-height="24px"
padding="10px 15px 15px 15px"
>
As a long time Bitwarden customer, you will receive a one-time
{{ DiscountAmount }} loyalty discount for this year's renewal. This
renewal will now be billed annually at
{{ DiscountedAnnualRenewalPrice }} + tax.
</mj-text>
<mj-text font-size="16px" line-height="24px" padding="10px 15px">
Questions? Contact
<a href="mailto:support@bitwarden.com" class="link"
>support@bitwarden.com</a
>
</mj-text>
</mj-column>
</mj-section>
<mj-section background-color="#fff" padding="0 20px 20px 20px">
</mj-section>
</mj-wrapper>
<!-- Learn More Section -->
<mj-wrapper padding="0px 20px 10px 20px">
<mj-bw-learn-more-footer/>
</mj-wrapper>
<!-- Learn More Section -->
<mj-wrapper padding="0px 20px 10px 20px">
<mj-bw-learn-more-footer />
</mj-wrapper>
<!-- Footer -->
<mj-include path="../../../components/footer.mjml"/>
</mj-body>
<!-- Footer -->
<mj-include path="../../../components/footer.mjml" />
</mj-body>
</mjml>

View File

@@ -13,11 +13,19 @@
<mj-wrapper padding="0px 20px 0px 20px">
<mj-section background-color="#fff" padding="15px 10px 10px 10px">
<mj-column>
<mj-text font-size="16px" line-height="24px" padding="10px 15px 15px 15px">
Your Bitwarden Families subscription renews in 15 days. The price is updating to {{MonthlyRenewalPrice}}/month, billed annually.
<mj-text
font-size="16px"
line-height="24px"
padding="10px 15px 15px 15px"
>
Your Bitwarden Families subscription renews in 15 days. The price is
updating to {{ MonthlyRenewalPrice }}/month, billed annually.
</mj-text>
<mj-text font-size="16px" line-height="24px" padding="10px 15px">
Questions? Contact <a href="mailto:support@bitwarden.com" class="link">support@bitwarden.com</a>
Questions? Contact
<a href="mailto:support@bitwarden.com" class="link"
>support@bitwarden.com</a
>
</mj-text>
</mj-column>
</mj-section>

View File

@@ -1,41 +1,54 @@
<mjml>
<mj-head>
<mj-include path="../../../components/head.mjml"/>
</mj-head>
<mj-head>
<mj-include path="../../../components/head.mjml" />
</mj-head>
<!-- Blue Header Section-->
<mj-body css-class="border-fix">
<mj-wrapper css-class="border-fix" padding="20px 20px 0px 20px">
<mj-bw-simple-hero />
</mj-wrapper>
<!-- Blue Header Section-->
<mj-body css-class="border-fix">
<mj-wrapper css-class="border-fix" padding="20px 20px 0px 20px">
<mj-bw-simple-hero />
</mj-wrapper>
<!-- Main Content Section -->
<mj-wrapper padding="0px 20px 0px 20px">
<mj-section background-color="#fff" padding="15px 10px 10px 10px">
<mj-column>
<mj-text font-size="16px" line-height="24px" padding="10px 15px 15px 15px">
Your Bitwarden Premium subscription renews in 15 days. The price is updating to {{BaseMonthlyRenewalPrice}}/month, billed annually.
</mj-text>
<mj-text font-size="16px" line-height="24px" padding="10px 15px 15px 15px">
As an existing Bitwarden customer, you will receive a one-time {{DiscountAmount}} loyalty discount for this year's renewal.
This renewal will now be billed annually at {{DiscountedAnnualRenewalPrice}} + tax.
</mj-text>
<mj-text font-size="16px" line-height="24px" padding="10px 15px">
Questions? Contact
<a href="mailto:support@bitwarden.com" class="link">support@bitwarden.com</a>
</mj-text>
</mj-column>
</mj-section>
<mj-section background-color="#fff" padding="0 20px 20px 20px">
</mj-section>
</mj-wrapper>
<!-- Main Content Section -->
<mj-wrapper padding="0px 20px 0px 20px">
<mj-section background-color="#fff" padding="15px 10px 10px 10px">
<mj-column>
<mj-text
font-size="16px"
line-height="24px"
padding="10px 15px 15px 15px"
>
Your Bitwarden Premium subscription renews in 15 days. The price is
updating to {{ BaseMonthlyRenewalPrice }}/month, billed annually.
</mj-text>
<mj-text
font-size="16px"
line-height="24px"
padding="10px 15px 15px 15px"
>
As an existing Bitwarden customer, you will receive a one-time
{{ DiscountAmount }} loyalty discount for this year's renewal. This
renewal will now be billed annually at
{{ DiscountedAnnualRenewalPrice }} + tax.
</mj-text>
<mj-text font-size="16px" line-height="24px" padding="10px 15px">
Questions? Contact
<a href="mailto:support@bitwarden.com" class="link"
>support@bitwarden.com</a
>
</mj-text>
</mj-column>
</mj-section>
<mj-section background-color="#fff" padding="0 20px 20px 20px">
</mj-section>
</mj-wrapper>
<!-- Learn More Section -->
<mj-wrapper padding="0px 20px 10px 20px">
<mj-bw-learn-more-footer/>
</mj-wrapper>
<!-- Learn More Section -->
<mj-wrapper padding="0px 20px 10px 20px">
<mj-bw-learn-more-footer />
</mj-wrapper>
<!-- Footer -->
<mj-include path="../../../components/footer.mjml"/>
</mj-body>
<!-- Footer -->
<mj-include path="../../../components/footer.mjml" />
</mj-body>
</mjml>

View File

@@ -193,8 +193,9 @@
<tr>
<td align="left" style="font-size:0px;padding:10px 15px 15px 15px;word-break:break-word;">
<div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;line-height:24px;text-align:left;color:#1B2029;">Your Bitwarden Families subscription renews in 15 days. The price is updating to {{BaseMonthlyRenewalPrice}}/month, billed annually
at {{BaseAnnualRenewalPrice}} + tax.</div>
<div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;line-height:24px;text-align:left;color:#1B2029;">Your Bitwarden Families subscription renews in 15 days. The price is
updating to {{ BaseMonthlyRenewalPrice }}/month, billed annually at
{{ BaseAnnualRenewalPrice }} + tax.</div>
</td>
</tr>
@@ -202,8 +203,10 @@
<tr>
<td align="left" style="font-size:0px;padding:10px 15px 15px 15px;word-break:break-word;">
<div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;line-height:24px;text-align:left;color:#1B2029;">As a long time Bitwarden customer, you will receive a one-time {{DiscountAmount}} loyalty discount for this year's renewal.
This renewal will now be billed annually at {{DiscountedAnnualRenewalPrice}} + tax.</div>
<div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;line-height:24px;text-align:left;color:#1B2029;">As a long time Bitwarden customer, you will receive a one-time
{{ DiscountAmount }} loyalty discount for this year's renewal. This
renewal will now be billed annually at
{{ DiscountedAnnualRenewalPrice }} + tax.</div>
</td>
</tr>
@@ -212,7 +215,7 @@
<td align="left" style="font-size:0px;padding:10px 15px;word-break:break-word;">
<div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;line-height:24px;text-align:left;color:#1B2029;">Questions? Contact
<a href="mailto:support@bitwarden.com" class="link" style="text-decoration: none; color: #175ddc; font-weight: 600;">support@bitwarden.com</a></div>
<a href="mailto:support@bitwarden.com" class="link" style="text-decoration: none; color: #175ddc; font-weight: 600;">support@bitwarden.com</a></div>
</td>
</tr>
@@ -279,8 +282,8 @@
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#F3F6F9;background-color:#F3F6F9;width:100%;border-radius:0px 0px 4px 4px;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:5px 10px 10px 10px;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:420px;" ><![endif]-->
<td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:434px;" ><![endif]-->
<div class="mj-column-per-70 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
@@ -290,7 +293,7 @@
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;line-height:24px;text-align:left;color:#1B2029;"><p style="font-size: 18px; line-height: 28px; font-weight: bold;">
<div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;line-height:24px;text-align:left;color:#1B2029;"><p style="font-size: 18px; line-height: 28px; font-weight: 500; margin-top: 0px;">
Learn more about Bitwarden
</p>
Find user guides, product documentation, and videos on the
@@ -304,7 +307,7 @@
</div>
<!--[if mso | IE]></td><td class="" style="vertical-align:top;width:180px;" ><![endif]-->
<!--[if mso | IE]></td><td class="" style="vertical-align:top;width:186px;" ><![endif]-->
<div class="mj-column-per-30 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
@@ -547,14 +550,15 @@
<td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:12px;line-height:16px;text-align:center;color:#5A6D91;"><p style="margin-bottom: 5px; margin-top: 5px">
© {{ CurrentYear }} Bitwarden Inc. 1 N. Calle Cesar Chavez, Suite 102, Santa
Barbara, CA, USA
© {{ CurrentYear }} Bitwarden Inc. 1 N. Calle Cesar Chavez, Suite 102,
Santa Barbara, CA, USA
</p>
<p style="margin-top: 5px">
Always confirm you are on a trusted Bitwarden domain before logging
in:<br>
<a href="https://bitwarden.com/" style="text-decoration:none;color:#175ddc; font-weight:400">bitwarden.com</a> |
<a href="https://bitwarden.com/help/emails-from-bitwarden/" style="text-decoration:none; color:#175ddc; font-weight:400">Learn why we include this</a>
<a href="https://bitwarden.com/" style="text-decoration: none; color: #175ddc; font-weight: 400">bitwarden.com</a>
|
<a href="https://bitwarden.com/help/emails-from-bitwarden/" style="text-decoration: none; color: #175ddc; font-weight: 400">Learn why we include this</a>
</p></div>
</td>

View File

@@ -193,7 +193,8 @@
<tr>
<td align="left" style="font-size:0px;padding:10px 15px 15px 15px;word-break:break-word;">
<div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;line-height:24px;text-align:left;color:#1B2029;">Your Bitwarden Premium subscription renews in 15 days. The price is updating to {{BaseMonthlyRenewalPrice}}/month, billed annually.</div>
<div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;line-height:24px;text-align:left;color:#1B2029;">Your Bitwarden Premium subscription renews in 15 days. The price is
updating to {{ BaseMonthlyRenewalPrice }}/month, billed annually.</div>
</td>
</tr>
@@ -201,8 +202,10 @@
<tr>
<td align="left" style="font-size:0px;padding:10px 15px 15px 15px;word-break:break-word;">
<div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;line-height:24px;text-align:left;color:#1B2029;">As an existing Bitwarden customer, you will receive a one-time {{DiscountAmount}} loyalty discount for this year's renewal.
This renewal will now be billed annually at {{DiscountedAnnualRenewalPrice}} + tax.</div>
<div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;line-height:24px;text-align:left;color:#1B2029;">As an existing Bitwarden customer, you will receive a one-time
{{ DiscountAmount }} loyalty discount for this year's renewal. This
renewal will now be billed annually at
{{ DiscountedAnnualRenewalPrice }} + tax.</div>
</td>
</tr>
@@ -211,7 +214,7 @@
<td align="left" style="font-size:0px;padding:10px 15px;word-break:break-word;">
<div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;line-height:24px;text-align:left;color:#1B2029;">Questions? Contact
<a href="mailto:support@bitwarden.com" class="link" style="text-decoration: none; color: #175ddc; font-weight: 600;">support@bitwarden.com</a></div>
<a href="mailto:support@bitwarden.com" class="link" style="text-decoration: none; color: #175ddc; font-weight: 600;">support@bitwarden.com</a></div>
</td>
</tr>
@@ -278,8 +281,8 @@
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#F3F6F9;background-color:#F3F6F9;width:100%;border-radius:0px 0px 4px 4px;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:5px 10px 10px 10px;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:420px;" ><![endif]-->
<td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:434px;" ><![endif]-->
<div class="mj-column-per-70 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
@@ -289,7 +292,7 @@
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;line-height:24px;text-align:left;color:#1B2029;"><p style="font-size: 18px; line-height: 28px; font-weight: bold;">
<div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;line-height:24px;text-align:left;color:#1B2029;"><p style="font-size: 18px; line-height: 28px; font-weight: 500; margin-top: 0px;">
Learn more about Bitwarden
</p>
Find user guides, product documentation, and videos on the
@@ -303,7 +306,7 @@
</div>
<!--[if mso | IE]></td><td class="" style="vertical-align:top;width:180px;" ><![endif]-->
<!--[if mso | IE]></td><td class="" style="vertical-align:top;width:186px;" ><![endif]-->
<div class="mj-column-per-30 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
@@ -546,14 +549,15 @@
<td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:12px;line-height:16px;text-align:center;color:#5A6D91;"><p style="margin-bottom: 5px; margin-top: 5px">
© {{ CurrentYear }} Bitwarden Inc. 1 N. Calle Cesar Chavez, Suite 102, Santa
Barbara, CA, USA
© {{ CurrentYear }} Bitwarden Inc. 1 N. Calle Cesar Chavez, Suite 102,
Santa Barbara, CA, USA
</p>
<p style="margin-top: 5px">
Always confirm you are on a trusted Bitwarden domain before logging
in:<br>
<a href="https://bitwarden.com/" style="text-decoration:none;color:#175ddc; font-weight:400">bitwarden.com</a> |
<a href="https://bitwarden.com/help/emails-from-bitwarden/" style="text-decoration:none; color:#175ddc; font-weight:400">Learn why we include this</a>
<a href="https://bitwarden.com/" style="text-decoration: none; color: #175ddc; font-weight: 400">bitwarden.com</a>
|
<a href="https://bitwarden.com/help/emails-from-bitwarden/" style="text-decoration: none; color: #175ddc; font-weight: 400">Learn why we include this</a>
</p></div>
</td>