1
0
mirror of https://github.com/bitwarden/server.git synced 2024-11-21 12:05:42 +01:00

[PM-1095] [PM-1104] Update new template UI (#2852)

This commit is contained in:
André Bispo 2023-04-13 18:19:49 +01:00 committed by GitHub
parent 4673e3bbc9
commit 03c740dffb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 314 additions and 117 deletions

View File

@ -5,6 +5,7 @@
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Bitwarden</title>
</head>
<body style="-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; height: 100%; line-height: 25px; width: 100% !important; margin: 0;" bgcolor="#f6f6f6">
<style type="text/css">
 body {
@ -44,20 +45,9 @@
body {
background-color: #f6f6f6;
}
.white-title {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
box-sizing: border-box;
font-size: 24px;
line-height: 32px;
font-weight: 700;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: none;
color: #ffffff;
}
@media only screen and (max-width: 350px) {
@media only screen and (max-width: 600px) {
body {
padding: 0 !important;
}
@ -100,61 +90,18 @@
.indented {
padding-left: 10px;
}
.title-header-text {
width: 100%;
display: block;
padding-top: 75px;
padding-bottom: 0px;
padding-left: 35px;
padding-right: 20px;
}
.title-header-image {
width: 100%;
display: block;
}
.footer-image {
display: none;
}
.footer-text {
width: 100%;
}
}
@media only screen and (min-width: 350px) {
.title-header-text {
width: 65%;
display: inline-block;
padding-top: 75px;
padding-bottom: 75px;
padding-left: 35px;
padding-right: 20px;
}
.title-header-image {
display: inline-block;
}
@media only screen and (min-width: 600px) {
{{! Fix for Apple Mail }}
.content-table {
width: 600px !important;
}
.footer-image {
display: block;
}
.footer-text {
width: 65%;
}
}
/* Component styling - these are explicitly applied via classes so that they can be
gradually introduced as we update templates.*/
gradually introduced as we update templates.*/
a.inline-link {
font-weight: bold;
color: #175DDC;
@ -226,4 +173,4 @@
</tr>
</table>
</body>
</html>
</html>

View File

@ -0,0 +1,201 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Bitwarden</title>
<style type="text/css">
 body {
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
box-sizing: border-box;
font-size: 16px;
color: #333;
line-height: 25px;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: none;
}
body * {
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
box-sizing: border-box;
font-size: 16px;
color: #333;
line-height: 25px;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: none;
}
img {
max-width: 100%;
border: none;
}
body {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: none;
width: 100% !important;
height: 100%;
line-height: 25px;
}
body {
background-color: #f6f6f6;
}
.white-title {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
box-sizing: border-box;
font-size: 24px;
line-height: 32px;
font-weight: 700;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: none;
color: #ffffff;
}
@media only screen and (max-width: 600px) {
body {
padding: 0 !important;
}
.container {
padding: 0 !important;
width: 100% !important;
}
.container-table {
padding: 0 !important;
width: 100% !important;
}
.content {
padding: 0 0 10px 0 !important;
}
.content-wrap {
padding: 0px !important;
}
.invoice {
width: 100% !important;
}
.main {
border-right: none !important;
border-left: none !important;
border-radius: 0 !important;
}
.logo {
padding-top: 10px !important;
}
.footer {
margin-top: 10px !important;
}
.indented {
padding-left: 10px;
}
.footer-image {
display: none !important;
mso-hide:all !important;
}
.footer-text {
width: 100% !important;
}
.templateColumnContainer{
display:block !important;
width:100% !important;
padding-left: 20px !important;
padding-right: 20px !important;
padding-bottom: 0px !important;
}
}
@media only screen and (min-width: 600px) {
{{! Fix for Apple Mail }}
.content-table {
width: 600px !important;
}
}
/* Component styling - these are explicitly applied via classes so that they can be
gradually introduced as we update templates.*/
a.inline-link {
font-weight: bold;
color: #175DDC;
text-decoration: none;
}
br.line-break {
margin: 0;
box-sizing: border-box;
color: #333;
line-height: 25px;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: none;
}
</style>
</head>
<body style="-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; height: 100%; line-height: 25px; width: 100% !important; margin: 0;" bgcolor="#f6f6f6">
<table width="100%" cellpadding="0" cellspacing="0" bgcolor="#f6f6f6">
<tr>
<td class="container" width="100%" align="center">
<table cellpadding="0" cellspacing="0" width="100%" class="content-table">
<tr>
<td></td>
<td class="content" align="center" valign="top" width="600" style="padding-bottom: 20px;">
<table class="header" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="middle" class="aligncenter middle logo" style="padding: 20px 0 10px;" align="center">
<img src="https://bitwarden.com/images/logo-horizontal-blue.png" alt="" width="250" height="39" />
</td>
</tr>
</table>
<table class="main" cellpadding="0" cellspacing="0" style="border: 1px solid #e9e9e9; border-radius: 3px;" bgcolor="white">
<tr>
<td class="content-wrap" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; box-sizing: border-box; font-size: 16px; color: #333; line-height: 25px; margin: 0; -webkit-font-smoothing: antialiased; padding: 0px; -webkit-text-size-adjust: none;" valign="top">
{{>@partial-block}}
</td>
</tr>
</table>
<table class="footer" cellpadding="0" cellspacing="0" width="100%" style="margin: 0; width: 100%;">
<tr>
<td class="aligncenter social-icons" align="center" style="margin: 0; padding: 15px 0 0 0;" valign="top">
<table cellpadding="0" cellspacing="0" style="margin: 0 auto;">
<tr>
<td style="margin: 0; padding: 0 10px;" valign="top"><a href="https://twitter.com/bitwarden" target="_blank"><img src="https://bitwarden.com/images/mail-twitter.png" alt="Twitter" width="30" height="30" /></a></td>
<td style="margin: 0; padding: 0 10px;" valign="top"><a href="https://www.reddit.com/r/Bitwarden/" target="_blank"><img src="https://bitwarden.com/images/mail-reddit.png" alt="Reddit" width="30" height="30" /></a></td>
<td style="margin: 0; padding: 0 10px;" valign="top"><a href="https://community.bitwarden.com/" target="_blank"><img src="https://bitwarden.com/images/mail-discourse.png" alt="CommunityForums" width="30" height="30" /></a></td>
<td style="margin: 0; padding: 0 10px;" valign="top"><a href="https://github.com/bitwarden" target="_blank"><img src="https://bitwarden.com/images/mail-github.png" alt="GitHub" width="30" height="30" /></a></td>
<td style="margin: 0; padding: 0 10px;" valign="top"><a href="https://www.youtube.com/channel/UCId9a_jQqvJre0_dE2lE_Rw" target="_blank"><img src="https://bitwarden.com/images/mail-youtube.png" alt="Youtube" width="30" height="30" /></a></td>
<td style="margin: 0; padding: 0 10px;" valign="top"><a href="https://www.linkedin.com/company/bitwarden1/" target="_blank"><img src="https://bitwarden.com/images/mail-linkedin.png" alt="LinkedIn" width="30" height="30" /></a></td>
<td style="margin: 0; padding: 0 10px;" valign="top"><a href="https://www.facebook.com/bitwarden/" target="_blank"><img src="https://bitwarden.com/images/mail-facebook.png" alt="Facebook" width="30" height="30" /></a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="content-block" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; box-sizing: border-box; font-size: 14px; color: #666666; line-height: 25px; margin: 0; -webkit-font-smoothing: antialiased; padding: 15px 0 0 0; -webkit-text-size-adjust: none; text-align: center;" valign="top">
&copy; {{CurrentYear}} Bitwarden Inc.
</td>
</tr>
</table>
</td>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

View File

@ -0,0 +1,13 @@
{{>@partial-block}}
----------------------------
- Twitter: https://twitter.com/bitwarden
- Reddit: https://www.reddit.com/r/Bitwarden/
- Community Forums: https://community.bitwarden.com/
- GitHub: https://github.com/bitwarden
- Youtube: https://www.youtube.com/channel/UCId9a_jQqvJre0_dE2lE_Rw
- LinkedIn: https://www.linkedin.com/company/bitwarden1/
- Facebook: https://www.facebook.com/bitwarden/
{{CurrentYear}} Bitwarden Inc.

View File

@ -1,26 +1,44 @@
{{#>FullHtmlLayout}}
<div width="auto" cellpadding="0" cellspacing="0" style="padding:0; margin:-20px">
<div style="display: block; min-height: 204px; background-color: #175DDC; margin: 0;">
<div class="title-header-text" >
<div style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; box-sizing: border-box; font-size: 24px; color: #ffffff; line-height: 32px; font-weight: 400; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none;">
{{TitleFirst}}<b class="white-title">{{TitleSecondBold}}</b>{{TitleThird}}
</div>
</div>
<div class="title-header-image" style="margin-left: auto; margin-right: 0px; vertical-align: bottom;">
<img style="margin-left: auto; margin-right: 0px; display: block;" alt='' src='https://assets.bitwarden.com/email/v1/business.png' />
</div>
</div>
{{#>FullUpdatedHtmlLayout}}
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #175DDC;padding-top:45px; ">
<tr>
<td align="center" valign="top" width="70%" class="templateColumnContainer">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="padding-left:30px; padding-right: 5px; padding-bottom: 35px;">
<tr>
<td style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; box-sizing: border-box; font-size: 24px; color: #ffffff; line-height: 32px; font-weight: 400; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none;">
{{TitleFirst}}<b class="white-title">{{TitleSecondBold}}</b>{{TitleThird}}
</td>
</tr>
</table>
</td>
<td align="right" valign="bottom" class="templateColumnContainer" style="padding-right: 10px;">
<img width="140" height="140" align="right" valign="bottom" style="width: 140px; height:140px; font-size: 0; vertical-align: bottom; text-align: right;" alt='' src='https://assets.bitwarden.com/email/v1/business.png' />
</td>
</tr>
</table>
{{>@partial-block}}
{{>@partial-block}}
<div style="display:block;background-color: #FBFBFB;">
<div class="footer-text" style="display: inline-block; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; font-size: 16px; line-height: 24px; padding-left: 35px; padding-right: 35px; margin-top: 15px; margin-bottom: 20px; margin-left: auto; margin-right: auto; vertical-align: middle; ">
<p style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-style: normal; font-weight: 600; font-size: 20px; line-height: 28px;">Were here for you!</p>
If you have any questions, search the Bitwarden <a style="text-decoration: none; color: #175DDC; font-weight: 600;" href="https://bitwarden.com/help/">Help</a> site or <a style="text-decoration: none; color: #175DDC; font-weight: 600;" href="https://bitwarden.com/contact/">contact us</a>.
</div>
<div style="display: inline-block; width:33%; margin-left: auto; margin-right: auto; vertical-align: middle; ">
<img class="footer-image" src="https://assets.bitwarden.com/email/v1/chat.png" style="width: 94.73px; height: 77.25px; margin-left: auto; margin-right: 30px;" alt="" />
</div>
</div>
</div>
{{/FullHtmlLayout}}
<table width="100%" style="display:table; background-color: #FBFBFB; vertical-align: middle; padding:30px" border="0" cellpadding="0" cellspacing="0" valign="middle">
<tr>
<td width="70%" class="footer-text" style="padding-right: 20px;">
<table align="left" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; font-size: 16px; line-height: 24px;">
<p style="margin: 0; padding: 0; margin-bottom: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-style: normal; font-weight: 600; font-size: 20px; line-height: 28px;">Were here for you!</p>
If you have any questions, search the Bitwarden <a style="text-decoration: none; color: #175DDC; font-weight: 600;" href="https://bitwarden.com/help/">Help</a> site or <a style="text-decoration: none; color: #175DDC; font-weight: 600;" href="https://bitwarden.com/contact/">contact us</a>.
</td>
</tr>
</table>
</td>
<td width="30%">
<table align="right" valign="bottom" class="footer-image" border="0" cellpadding="0" cellspacing="0" style="padding-left: 40px;">
<tr>
<td>
<img width="94" height="77" src="https://assets.bitwarden.com/email/v1/chat.png" style="width: 94px; height: 77px;" alt="" />
</td>
</tr>
</table>
</td>
</tr>
</table>
{{/FullUpdatedHtmlLayout}}

View File

@ -1,25 +1,35 @@
{{#>TitleContactUsHtmlLayout}}
<div>
<div style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; font-size: 16px; line-height: 24px; margin-top: 30px; margin-bottom: 30px; margin-left: 35px; margin-right: 35px;">
You may now access logins and other items this organizations has shared with you from your Bitwarden vault.
</div>
</div>
<div>
<div style="display: block;" align="center">
<a href="https://vault.bitwarden.com/" clicktracking=off target="_blank" style="color: #ffffff; text-decoration: none; text-align: center; cursor: pointer; border-radius: 5px; background-color: #175DDC; border-color: #175DDC; border-style: solid; border-width: 10px 20px; margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; box-sizing: border-box; font-size: 16px; line-height: 25px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none;">
Go to vault
</a>
</div>
</div>
<div>
<div style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; font-size: 16px; line-height: 24px; margin-top: 30px; margin-bottom: 15px; margin-left: 35px; margin-right: 35px;">
<b>Tip: </b>Use the Bitwarden mobile app to quickly save logins and auto-fill forms. Download from the <a style="text-decoration: none; color: #175DDC; font-weight: 600;" href="https://apps.apple.com/us/app/bitwarden-password-manager/id1137397744">App Store</a> or <a style="text-decoration: none; color: #175DDC; font-weight: 600;" href="https://play.google.com/store/apps/details?id=com.x8bit.bitwarden">Google Play</a>.
</div>
</div>
<div style="margin-bottom: 15px;">
<div style="display: block; box-sizing: border-box; clear: both; text-align: center;">
<a href='https://play.google.com/store/apps/details?id=com.x8bit.bitwarden' target="_blank" style="display: inline-block; vertical-align: top; margin-left: 10px; margin-right: 10px; height: 60px; width: 150px; "><img style="height: 60px; width: 150px; display: inline-block;" alt='Android download' src='https://assets.bitwarden.com/email/v1/google-play-badge.png' /></a>
<a href="https://apps.apple.com/us/app/bitwarden-password-manager/id1137397744" target="_blank" style="display: inline-block; height: 40px; width: 135px; margin-top:10px"><img style="height: 40px; width: 135px; display: inline-block;" alt="iOS download" src="https://assets.bitwarden.com/email/v1/App-store.png" /></a>
</div>
</div>
<table width="100%" border="0" style="display: block; padding: 30px;" align="center" cellpadding="0" cellspacing="0">
<tr>
<td style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; font-size: 16px; line-height: 24px;">
You may now access logins and other items this organization has shared with you from your Bitwarden vault.
</td>
</tr>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="display: block;" align="center">
<a href="https://vault.bitwarden.com/" clicktracking=off target="_blank" style="color: #ffffff; text-decoration: none; text-align: center; cursor: pointer; border-radius: 5px; background-color: #175DDC; border-color: #175DDC; border-style: solid; border-width: 10px 20px; margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; box-sizing: border-box; font-size: 16px; line-height: 25px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none;">
Go to vault
</a>
</td>
</tr>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="padding: 30px;">
<tr>
<td style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; font-size: 16px; line-height: 24px;">
<b>Tip: </b>Use the Bitwarden mobile app to quickly save logins and auto-fill forms. Download from the <a style="text-decoration: none; color: #175DDC; font-weight: 600;" href="https://apps.apple.com/us/app/bitwarden-password-manager/id1137397744">App Store</a> or <a style="text-decoration: none; color: #175DDC; font-weight: 600;" href="https://play.google.com/store/apps/details?id=com.x8bit.bitwarden">Google Play</a>.
</td>
</tr>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="display: table; padding-bottom: 20px; margin: 0;">
<tr>
<td class="templateColumnContainer center" width="45%" align="right">
<a height="60" width="150" href='https://play.google.com/store/apps/details?id=com.x8bit.bitwarden' target="_blank" style="height: 60px; width: 150px;"><img height="60" width="150" style="height: 60px; width: 150px; display: inline-block;" alt='Android download' src='https://assets.bitwarden.com/email/v1/google-play-badge.png' /></a>
</td>
<td class="templateColumnContainer center" width="45%" style="padding-left: 10px;">
<a height="40" width="135" href="https://apps.apple.com/us/app/bitwarden-password-manager/id1137397744" target="_blank" style="height: 40px; width: 135px;"><img height="40" width="135" style="height: 40px; width: 135px; display: inline-block;" alt="iOS download" src="https://assets.bitwarden.com/email/v1/App-store.png" /></a>
</td>
</tr>
</table>
{{/TitleContactUsHtmlLayout}}

View File

@ -1,15 +1,19 @@
{{#>TitleContactUsHtmlLayout}}
<div>
<div style="display: block; margin-top: 35px;" align="center">
<a href="{{{Url}}}" clicktracking=off target="_blank" style="color: #ffffff; text-decoration: none; text-align: center; cursor: pointer; border-radius: 5px; background-color: #175DDC; border-color: #175DDC; border-style: solid; border-width: 10px 20px; margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; box-sizing: border-box; font-size: 16px; line-height: 25px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none;">
Join Organization Now
</a>
</div>
</div>
<div>
<div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; font-size: 16px; line-height: 24px; margin-top: 30px; margin-bottom: 25px; margin-left: 35px; margin-right: 35px;">
This invitation expires on <b>{{ExpirationDate}}</b>
</div>
</div>
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="display: table; width:100%; padding-top: 35px; text-align: center;" align="center">
<tr>
<td display="display: table-cell">
<a href="{{{Url}}}" clicktracking=off target="_blank" style="color: #ffffff; text-decoration: none; text-align: center; cursor: pointer; border-radius: 5px; background-color: #175DDC; border-color: #175DDC; border-style: solid; border-width: 10px 20px; margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; box-sizing: border-box; font-size: 16px; line-height: 25px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none;">
Join Organization Now
</a>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; font-size: 16px; line-height: 24px; margin-top: 30px; margin-bottom: 25px; margin-left: 35px; margin-right: 35px;">
<tr>
<td style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; font-size: 16px; line-height: 24px; margin-top: 30px; margin-bottom: 25px; margin-left: 35px; margin-right: 35px;">
This invitation expires on <b>{{ExpirationDate}}</b>
</td>
</tr>
</table>
{{/TitleContactUsHtmlLayout}}

View File

@ -484,6 +484,10 @@ public class HandlebarsMailService : IMailService
Handlebars.RegisterTemplate("FullHtmlLayout", fullHtmlLayoutSource);
var fullTextLayoutSource = await ReadSourceAsync("Layouts.Full.text");
Handlebars.RegisterTemplate("FullTextLayout", fullTextLayoutSource);
var fullUpdatedHtmlLayoutSource = await ReadSourceAsync("Layouts.FullUpdated.html");
Handlebars.RegisterTemplate("FullUpdatedHtmlLayout", fullUpdatedHtmlLayoutSource);
var fullUpdatedTextLayoutSource = await ReadSourceAsync("Layouts.FullUpdated.text");
Handlebars.RegisterTemplate("FullUpdatedTextLayout", fullUpdatedTextLayoutSource);
var titleContactUsHtmlLayoutSource = await ReadSourceAsync("Layouts.TitleContactUs.html");
Handlebars.RegisterTemplate("TitleContactUsHtmlLayout", titleContactUsHtmlLayoutSource);
var titleContactUsTextLayoutSource = await ReadSourceAsync("Layouts.TitleContactUs.text");