Skip to content

Commit 6d5d7e5

Browse files
authored
Ac/pm 21742/update confirmed to org email templates (#6683)
1 parent dd74e96 commit 6d5d7e5

7 files changed

Lines changed: 1948 additions & 32 deletions

File tree

src/Core/MailTemplates/Handlebars/MJML/AdminConsole/OrganizationConfirmation/organization-confirmation-enterprise-teams.html.hbs

Lines changed: 815 additions & 0 deletions
Large diffs are not rendered by default.
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{{#>TitleContactUsTextLayout}}
2+
You may now access logins and other items {{OrganizationName}} has shared with you from your Bitwarden vault.
3+
Tip: Use the Bitwarden mobile app to quickly save logins and auto-fill forms. Download from the App Store or Google Play.
4+
{{/TitleContactUsTextLayout}}

src/Core/MailTemplates/Handlebars/MJML/AdminConsole/OrganizationConfirmation/organization-confirmation-family-free.html.hbs

Lines changed: 983 additions & 0 deletions
Large diffs are not rendered by default.
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{{#>TitleContactUsTextLayout}}
2+
You may now access logins and other items {{OrganizationName}} has shared with you from your Bitwarden vault.
3+
Tip: Use the Bitwarden mobile app to quickly save logins and auto-fill forms. Download from the App Store or Google Play.
4+
{{/TitleContactUsTextLayout}}

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

Lines changed: 37 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,12 @@
11
const { BodyComponent } = require("mjml-core");
2+
3+
const BODY_TEXT_STYLES = `
4+
font-family="Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif"
5+
font-size="16px"
6+
font-weight="400"
7+
line-height="24px"
8+
`;
9+
210
class MjBwIconRow extends BodyComponent {
311
static dependencies = {
412
"mj-column": ["mj-bw-icon-row"],
@@ -18,7 +26,7 @@ class MjBwIconRow extends BodyComponent {
1826

1927
static defaultAttributes = {};
2028

21-
headStyle = (breakpoint) => {
29+
headStyle = (breakpoint) => {
2230
return `
2331
@media only screen and (max-width:${breakpoint}) {
2432
.mj-bw-icon-row-text {
@@ -36,30 +44,35 @@ class MjBwIconRow extends BodyComponent {
3644
render() {
3745
const headAnchorElement =
3846
this.getAttribute("head-url-text") && this.getAttribute("head-url")
39-
? `<a href="${this.getAttribute("head-url")}" class="link">
40-
${this.getAttribute("head-url-text")}
41-
<span style="text-decoration: none">
42-
<img src="https://assets.bitwarden.com/email/v1/bwi-external-link-16px.png"
43-
alt="External Link Icon"
44-
width="16px"
45-
style="vertical-align: middle;"
46-
/>
47-
</span>
48-
</a>`
47+
? `
48+
<mj-text css-class="mj-bw-icon-row-text" padding="5px 10px 0px 10px" ${BODY_TEXT_STYLES}>
49+
<a href="${this.getAttribute("head-url")}" class="link">
50+
${this.getAttribute("head-url-text")}
51+
<span style="text-decoration: none">
52+
<img src="https://assets.bitwarden.com/email/v1/bwi-external-link-16px.png"
53+
alt="External Link Icon"
54+
width="16px"
55+
style="vertical-align: middle;"
56+
/>
57+
</span>
58+
</a>
59+
</mj-text>`
4960
: "";
5061

5162
const footAnchorElement =
5263
this.getAttribute("foot-url-text") && this.getAttribute("foot-url")
53-
? `<a href="${this.getAttribute("foot-url")}" class="link">
54-
${this.getAttribute("foot-url-text")}
55-
<span style="text-decoration: none">
56-
<img src="https://assets.bitwarden.com/email/v1/bwi-external-link-16px.png"
57-
alt="External Link Icon"
58-
width="16px"
59-
style="vertical-align: middle;"
60-
/>
61-
</span>
62-
</a>`
64+
? `<mj-text css-class="mj-bw-icon-row-text" padding="5px 10px 0px 10px" ${BODY_TEXT_STYLES}>
65+
<a href="${this.getAttribute("foot-url")}" class="link">
66+
${this.getAttribute("foot-url-text")}
67+
<span style="text-decoration: none">
68+
<img src="https://assets.bitwarden.com/email/v1/bwi-external-link-16px.png"
69+
alt="External Link Icon"
70+
width="16px"
71+
style="vertical-align: middle;"
72+
/>
73+
</span>
74+
</a>
75+
</mj-text>`
6376
: "";
6477

6578
return this.renderMJML(
@@ -76,19 +89,11 @@ class MjBwIconRow extends BodyComponent {
7689
/>
7790
</mj-column>
7891
<mj-column width="85%" vertical-align="top">
79-
<mj-text css-class="mj-bw-icon-row-text" padding="5px 10px 0px 10px">
80-
` +
81-
headAnchorElement +
82-
`
83-
</mj-text>
84-
<mj-text css-class="mj-bw-icon-row-text" padding="5px 10px 0px 10px">
92+
${headAnchorElement}
93+
<mj-text css-class="mj-bw-icon-row-text" padding="5px 10px 0px 10px" ${BODY_TEXT_STYLES}>
8594
${this.getAttribute("text")}
8695
</mj-text>
87-
<mj-text css-class="mj-bw-icon-row-text" padding="5px 10px 0px 10px">
88-
` +
89-
footAnchorElement +
90-
`
91-
</mj-text>
96+
${footAnchorElement}
9297
</mj-column>
9398
</mj-group>
9499
</mj-section>
Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<mjml>
2+
<mj-head>
3+
<mj-include path="../../../components/head.mjml" />
4+
</mj-head>
5+
6+
<mj-body css-class="border-fix">
7+
<!-- Blue Header Section -->
8+
<mj-wrapper css-class="border-fix" padding="20px 20px 10px 20px">
9+
<mj-bw-hero
10+
img-src="https://assets.bitwarden.com/email/v1/spot-enterprise.png"
11+
title="You can now share passwords with members of {{OrganizationName}}!"
12+
button-text="Log in"
13+
button-url="https://vault.bitwarden.com"
14+
/>
15+
</mj-wrapper>
16+
17+
<!-- Main Content -->
18+
<mj-wrapper padding="5px 20px 10px 20px">
19+
<mj-section background-color="#fff" padding="15px 10px 10px 10px">
20+
<mj-column>
21+
<mj-text font-size="16px" line-height="24px" padding="10px 15px">
22+
As a member of <b>{{OrganizationName}}</b>:
23+
</mj-text>
24+
</mj-column>
25+
</mj-section>
26+
<mj-bw-icon-row
27+
icon-src="https://assets.bitwarden.com/email/v1/icon-enterprise.png"
28+
icon-alt="Organization Icon"
29+
text="Your account is owned by {{OrganizationName}} and is subject to their security and management policies."
30+
/>
31+
<mj-bw-icon-row
32+
icon-src="https://assets.bitwarden.com/email/v1/icon-account-switching-new.png"
33+
icon-alt="Group Users Icon"
34+
text="You can easily access and share passwords with your team."
35+
foot-url-text="Share passwords in Bitwarden"
36+
foot-url="https://bitwarden.com/help/share-to-a-collection/"
37+
/>
38+
<mj-section background-color="#fff" padding="0 20px 20px 20px">
39+
</mj-section>
40+
</mj-wrapper>
41+
42+
<!-- Learn More Section -->
43+
<mj-wrapper padding="5px 20px 10px 20px">
44+
<mj-bw-learn-more-footer />
45+
</mj-wrapper>
46+
47+
<!-- Footer -->
48+
<mj-include path="../../../components/footer.mjml" />
49+
</mj-body>
50+
</mjml>
Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<mjml>
2+
<mj-head>
3+
<mj-include path="../../../components/head.mjml" />
4+
</mj-head>
5+
6+
<mj-body css-class="border-fix">
7+
<!-- Blue Header Section -->
8+
<mj-wrapper css-class="border-fix" padding="20px 20px 10px 20px">
9+
<mj-bw-hero
10+
img-src="https://assets.bitwarden.com/email/v1/spot-family-homes.png"
11+
title="You can now share passwords with members of {{OrganizationName}}!"
12+
button-text="Log in"
13+
button-url="https://vault.bitwarden.com"
14+
/>
15+
</mj-wrapper>
16+
17+
<!-- Main Content -->
18+
<mj-wrapper padding="5px 20px 10px 20px">
19+
<mj-section background-color="#fff" padding="15px 10px 10px 10px">
20+
<mj-column>
21+
<mj-text font-size="16px" line-height="24px" padding="10px 15px">
22+
As a member of <b>{{OrganizationName}}</b>:
23+
</mj-text>
24+
</mj-column>
25+
</mj-section>
26+
<mj-bw-icon-row
27+
icon-src="https://assets.bitwarden.com/email/v1/icon-item-type.png"
28+
icon-alt="Collections Icon"
29+
text="You can access passwords {{OrganizationName}} has shared with you."
30+
/>
31+
<mj-bw-icon-row
32+
icon-src="https://assets.bitwarden.com/email/v1/icon-account-switching-new.png"
33+
icon-alt="Group Users Icon"
34+
text="You can easily share passwords with friends, family, or coworkers."
35+
foot-url-text="Share passwords in Bitwarden"
36+
foot-url="https://bitwarden.com/help/share-to-a-collection/"
37+
/>
38+
<mj-section background-color="#fff" padding="0 20px 20px 20px">
39+
</mj-section>
40+
</mj-wrapper>
41+
42+
<!-- Download Mobile Apps Section -->
43+
<mj-wrapper padding="5px 20px 10px 20px">
44+
<mj-include path="../components/mobile-app-download.mjml" />
45+
</mj-wrapper>
46+
47+
<!-- Learn More Section -->
48+
<mj-wrapper padding="5px 20px 10px 20px">
49+
<mj-bw-learn-more-footer />
50+
</mj-wrapper>
51+
52+
<!-- Footer -->
53+
<mj-include path="../../../components/footer.mjml" />
54+
</mj-body>
55+
</mjml>

0 commit comments

Comments
 (0)