bitwarden/server
1
0
Fork 0
mirror of https://github.com/bitwarden/server synced 2026-02-13 23:13:22 +00:00
Code Issues Releases Wiki Activity

[PM-30610] Merge Rui’s changes and use shared components.

Browse Source
This commit is contained in:
Jimmy Vo
2026-02-12 12:10:23 -05:00
parent 3ab4a07e1d
commit 8e94b58838
6 changed files with 194 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/Core/MailTemplates/Mjml/components/mj-bw-hero.js
View File

@@ -62,7 +62,7 @@ class MjBwHero extends BodyComponent {
height="30px"
></mj-image>
<mj-text color="#fff" padding-top="0" padding-bottom="0">
<h1 style="font-weight: normal; font-size: 24px; line-height: 32px">
<h1 style="font-weight: 500; font-size: 24px; line-height: 32px">
${this.getAttribute("title")}
</h1>
` +

25
src/Core/MailTemplates/Mjml/components/mj-bw-icon-row.js
View File

@@ -1,7 +1,7 @@
const { BodyComponent } = require("mjml-core");
const BODY_TEXT_STYLES = `
font-family="Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif"
font-family="'Helvetica Neue', Helvetica, Arial, sans-serif"
font-size="16px"
font-weight="400"
line-height="24px"
@@ -30,12 +30,17 @@ class MjBwIconRow extends BodyComponent {
return `
@media only screen and (max-width:${breakpoint}) {
.mj-bw-icon-row-text {
padding-left: 5px !important;
padding-left: 15px !important;
padding-right: 15px !important;
line-height: 20px;
}
.mj-bw-icon-row {
padding: 10px 15px;
width: fit-content !important;
.mj-bw-icon-row-icon {
display: none !important;
width: 0 !important;
max-width: 0 !important;
}
.mj-bw-icon-row-text-column {
width: 100% !important;
}
}
`;
@@ -77,20 +82,20 @@ class MjBwIconRow extends BodyComponent {
return this.renderMJML(
`
<mj-section background-color="#fff" padding="10px 10px 10px 10px">
<mj-section background-color="#fff" padding="0px 10px 24px 10px">
<mj-group css-class="mj-bw-icon-row">
<mj-column width="15%" vertical-align="top">
<mj-column width="15%" vertical-align="middle" css-class="mj-bw-icon-row-icon">
<mj-image
src="${this.getAttribute("icon-src")}"
alt="${this.getAttribute("icon-alt")}"
width="48px"
padding="0px"
padding="0px 10px 0px 5px"
border-radius="8px"
/>
</mj-column>
<mj-column width="85%" vertical-align="top">
<mj-column width="85%" vertical-align="middle" css-class="mj-bw-icon-row-text-column">
${headAnchorElement}
<mj-text css-class="mj-bw-icon-row-text" padding="5px 10px 0px 10px" ${BODY_TEXT_STYLES}>
<mj-text css-class="mj-bw-icon-row-text" padding="0px 0px 0px 0px" ${BODY_TEXT_STYLES}>
${this.getAttribute("text")}
</mj-text>
${footAnchorElement}

16
src/Core/MailTemplates/Mjml/components/mj-bw-learn-more-footer.js
View File

@@ -25,21 +25,25 @@ 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" padding="14px 10px 14px 10px">
<mj-column width="70%">
<mj-text line-height="24px">
<p style="font-size: 18px; line-height: 28px; font-weight: bold;">
<mj-text padding="10px 15px 10px 15px">
<p style="font-size: 18px; line-height: 28px; font-weight: 500; margin: 0 0 8px 0;">
Learn more about Bitwarden
</p>
Find user guides, product documentation, and videos on the
<a href="https://bitwarden.com/help/" class="link"> Bitwarden Help Center</a>.
<p style="font-size: 16px; line-height: 24px; margin: 0;">
Find user guides, product documentation, and videos on the
<a href="https://bitwarden.com/help/" class="link"> Bitwarden Help Center</a>.
</p>
</mj-text>
</mj-column>
<mj-column width="30%">
<mj-column width="30%" vertical-align="bottom">
<mj-image
src="https://assets.bitwarden.com/email/v1/spot-community.png"
css-class="mj-bw-learn-more-footer-responsive-img"
width="94px"
padding="0px 15px 0px 0px"
align="right"
/>
</mj-column>
</mj-section>

51
src/Core/MailTemplates/Mjml/emails/AdminConsole/OrganizationConfirmation/organization-confirmation-enterprise-teams-use-all-shared-components.mjml Normal file
View File

@@ -0,0 +1,51 @@
<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-hero
title="You can now share passwords with members of {{OrganizationName}}!"
img-src="https://assets.bitwarden.com/email/v1/ac-spot-enterprise.png"
button-text="Log in"
button-url="{{WebVaultUrl}}"
/>
</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-icon-row
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-icon-row
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-learn-more-footer />
</mj-wrapper>
<!-- Footer -->
<mj-include path="../../../components/footer.mjml" />
</mj-body>
</mjml>

116
src/Core/MailTemplates/Mjml/emails/AdminConsole/OrganizationConfirmation/organization-confirmation-enterprise-teams-without-rows.mjml Normal file
View File

@@ -0,0 +1,116 @@
<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>
<mj-body>
<!-- Blue Header Section -->
<mj-wrapper css-class="border-fix" padding="20px 20px 10px 20px">
<mj-bw-hero
title="You can now share passwords with members of {{OrganizationName}}!"
img-src="https://assets.bitwarden.com/email/v1/ac-spot-enterprise.png"
button-text="Log in"
button-url="{{WebVaultUrl}}"
/>
</mj-wrapper>
<!-- Main Content -->
<mj-wrapper padding="5px 20px 8px 20px">
<!-- Main Text -->
<mj-section
padding="40px 40px 8px 40px"
background-color="#fff">
<mj-column>
<mj-text
mj-class="ac-text"
padding="0px">
As a member of <b>{{OrganizationName}}</b>:
</mj-text>
</mj-column>
</mj-section>
<!-- Icon Row 1: Organization Ownership -->
<mj-section
padding="8px 40px"
text-align="left"
background-color="#fff">
<mj-column
width="48px"
css-class="hide-mobile"
vertical-align="top">
<mj-image
src="https://assets.bitwarden.com/email/v1/icon-enterprise.png"
alt="Organization Icon"
width="48px"
border-radius="8px"
padding="0px">
</mj-image>
</mj-column>
<mj-column
css-class="hide-mobile"
width="5%">
<mj-spacer
height="1px">
</mj-spacer>
</mj-column>
<mj-column
width="80%"
vertical-align="top">
<mj-text
mj-class="ac-text"
padding="0px 0px 0px 0px">
Your account is owned by {{OrganizationName}} and is subject to their security and management policies.
</mj-text>
</mj-column>
</mj-section>
<!-- Icon Row 2: Password Sharing -->
<mj-section
padding="8px 40px 40px 40px"
text-align="left"
background-color="#fff">
<mj-column
width="48px"
css-class="hide-mobile"
vertical-align="top">
<mj-image
src="https://assets.bitwarden.com/email/v1/icon-account-switching-new.png"
alt="Share Icon"
width="48px"
border-radius="8px"
padding="0px">
</mj-image>
</mj-column>
<mj-column
css-class="hide-mobile"
width="5%">
<mj-spacer
height="1px">
</mj-spacer>
</mj-column>
<mj-column
width="80%"
vertical-align="top">
<mj-text
mj-class="ac-text"
padding="0px 0px 0px 0px">
You can easily access and share passwords with your team.
<a href="https://bitwarden.com/help/sharing" class="ac-link">Share passwords in Bitwarden</a>
</mj-text>
</mj-column>
</mj-section>
</mj-wrapper>
<!-- Learn More Section -->
<mj-wrapper padding="8px 20px 10px 20px">
<mj-bw-learn-more-footer />
</mj-wrapper>
<!-- Footer -->
<mj-include path="../../../components/footer.mjml" />
</mj-body>
</mjml>

1
src/Core/MailTemplates/Mjml/emails/AdminConsole/OrganizationConfirmation/organization-confirmation-enterprise-teams.mjml
View File

@@ -60,6 +60,7 @@
</mj-section>
<!-- Main Content Section -->
<!-- Main Text -->
<mj-section
padding="40px 40px 8px 40px"
background-color="#fff">