huanld/speckle-email-templates
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(p): password reset template

Browse Source
This commit is contained in:
Dimitrie Stefanescu
2022-08-10 18:07:40 +03:00
parent 027aca1033
commit 360f40f29c
3 changed files with 106 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+2 -3
View File
@@ -11,15 +11,14 @@ Uses the [MJML](https://mjml.io/) framework to build e-mail templates without de
### Environment setup
- Make sure you have `yarn 1.x` available globally (e.g. through corepack)
- Make sure you have `docker-compose`
### Development
Use VSCode and make sure you install the recommended MJML extension. Through this extension you can will get syntax highlighting in .mjml files and also the option to trigger a live preview right from the specific .mjml file.
Before development do `yarn env:up` to start the docker environment that serves a local file server. You'll need that to be able to see assets in the preview pane, cause it expects assets to be hosted somewhere and accessed through HTTP, not loaded from a relative path on your PC.
Before development do `yarn serve:assets` to start a local file server. You'll need that to be able to see assets in the preview pane, cause it expects assets to be hosted somewhere and accessed through HTTP, not loaded from a relative path on your PC.
The file server is accessible at `localhost:3030`, assets are served from `/assets` and built templates from `/templates`.
The file server is accessible at `localhost:4040`, assets are served from `/assets` and built templates from `/templates`.
### Building
dist/main_server_template.html
Vendored
+35 -11
View File
@@ -94,8 +94,8 @@
<div style="">
<!-- Header -->
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" bgcolor="linear-gradient(90deg, rgba(0,143,233,1) 0%, rgba(0,76,235,1) 100%)" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="background:linear-gradient(90deg, rgba(0,143,233,1) 0%, rgba(0,76,235,1) 100%);background-color:linear-gradient(90deg, rgba(0,143,233,1) 0%, rgba(0,76,235,1) 100%);margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:linear-gradient(90deg, rgba(0,143,233,1) 0%, rgba(0,76,235,1) 100%);background-color:linear-gradient(90deg, rgba(0,143,233,1) 0%, rgba(0,76,235,1) 100%);width:100%;">
<div style="background:linear-gradient(90deg, rgba(0,143,233,1) 0%, rgba(0,76,235,1) 100%);background-color:linear-gradient(90deg, rgba(0,143,233,1) 0%, rgba(0,76,235,1) 100%);margin:0px auto;border-radius:8px;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:linear-gradient(90deg, rgba(0,143,233,1) 0%, rgba(0,76,235,1) 100%);background-color:linear-gradient(90deg, rgba(0,143,233,1) 0%, rgba(0,76,235,1) 100%);width:100%;border-radius:8px;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:0;text-align:center;">
@@ -109,7 +109,7 @@
<tbody>
<tr>
<td style="width:100px;">
<img alt="Speckle" height="auto" src="http://localhost:3030/assets/logo-slab-white.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:16px;" width="100" />
<img alt="Speckle" height="auto" src="http://localhost:4040/assets/logo-slab-white.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:16px;" width="100" />
</td>
</tr>
</tbody>
@@ -140,9 +140,9 @@
<!-- Some example text -->
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:Helvetica;font-size:16px;line-height:1;text-align:left;color:#000000;">
<div style="font-family:Helvetica;font-size:16px;line-height:20px;text-align:left;color:#000000;">
<p> Hello, </p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Rutrum quisque non tellus orci ac auctor. In fermentum et sollicitudin ac. Arcu cursus vitae congue mauris rhoncus aenean. Odio ut enim blandit volutpat maecenas. Et molestie ac feugiat sed lectus. Diam vulputate ut pharetra sit amet aliquam id. Purus semper eget duis at tellus at urna condimentum mattis. Aliquam nulla facilisi cras fermentum odio eu feugiat pretium. Convallis aenean et tortor at risus viverra. Malesuada bibendum arcu vitae elementum curabitur vitae nunc. In iaculis nunc sed augue lacus viverra vitae congue. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Rutrum quisque non tellus orci ac auctor. </p>
<p> Here's a basic <a href="#" alt="link title">link</a>. </p>
</div>
</td>
@@ -173,8 +173,8 @@
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;">
<tbody>
<tr>
<td align="center" bgcolor="linear-gradient(90deg, rgba(0,143,233,1) 0%, rgba(0,76,235,1) 100%)" role="presentation" style="border:none;border-radius:8px;cursor:auto;mso-padding-alt:10px 25px;background:linear-gradient(90deg, rgba(0,143,233,1) 0%, rgba(0,76,235,1) 100%);" valign="middle">
<a href="#" title="CTA Title" style="display:inline-block;background:linear-gradient(90deg, rgba(0,143,233,1) 0%, rgba(0,76,235,1) 100%);color:white;font-family:Helvetica;font-size:16px;font-weight:normal;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:8px;" target="_blank"> Call To Action (CTA) </a>
<td align="center" bgcolor="linear-gradient(90deg, rgba(0,143,233,1) 0%, rgba(0,76,235,1) 100%)" role="presentation" style="border:none;border-radius:8px;cursor:auto;mso-padding-alt:25px 55px;background:linear-gradient(90deg, rgba(0,143,233,1) 0%, rgba(0,76,235,1) 100%);" valign="middle">
<a href="#" rel="notrack" title="CTA Title" style="display:inline-block;background:linear-gradient(90deg, rgba(0,143,233,1) 0%, rgba(0,76,235,1) 100%);color:white;font-family:Helvetica;font-size:16px;font-weight:bold;line-height:20px;margin:0;text-decoration:none;text-transform:none;padding:25px 55px;mso-padding-alt:0px;border-radius:8px;" target="_blank"> Call To Action (CTA) </a>
</td>
</tr>
</tbody>
@@ -205,8 +205,8 @@
<!-- Some example finishing text -->
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:Helvetica;font-size:16px;line-height:1;text-align:left;color:#000000;">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Rutrum quisque non tellus orci ac auctor. In fermentum et sollicitudin ac. Arcu cursus vitae congue mauris rhoncus aenean. </p>
<div style="font-family:Helvetica;font-size:16px;line-height:20px;text-align:left;color:#000000;">
<p> If this was not you, feel free to ignore this email! </p>
</div>
</td>
</tr>
@@ -226,14 +226,38 @@
<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 0;padding-top:0;text-align:center;">
<td style="border-bottom:1px solid #e0e0e0;direction:ltr;font-size:0px;padding:20px 0;padding-top:0;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width: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="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:Helvetica;font-size:14px;line-height:1;text-align:center;color:#999999;">Sent from %SERVERNAME% at <a href="#">%SERVERURL%</a>, deployed and managed by %COMPANY%. Your admin contact is %ADMINCONTACT%.</div>
<div style="font-family:Helvetica;font-size:12px;line-height:18px;text-align:center;color:#999999;">Sent from %SERVERNAME% at <a href="#">%SERVERURL%</a>, deployed and managed by %COMPANY%. Your admin contact is %ADMINCONTACT%.</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:20px 0;padding-top:20px;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="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:Helvetica;font-size:12px;line-height:18px;text-align:center;color:#e0e0e0;">Brought to you by <a href="https://speckle.systems" target="_blank">Speckle</a>, the Open Source Data Platform for 3D Data</div>
</td>
</tr>
</tbody>
src/password_reset_template.mjml
+69
View File
@@ -0,0 +1,69 @@
<mjml>
<mj-head>
<mj-attributes>
<mj-all font-family="Helvetica" font-size="16px" line-height="20px"/>
</mj-attributes>
</mj-head>
<mj-body>
<!-- Header -->
<mj-section border-radius="8px" background-color="linear-gradient(90deg, rgba(0,143,233,1) 0%, rgba(0,76,235,1) 100%)" padding="0">
<mj-column>
<mj-image width="100px" src="http://localhost:4040/assets/logo-slab-white.png" alt="Speckle" />
</mj-column>
</mj-section>
<!-- Body - Start -->
<mj-section>
<mj-column>
<!-- Some example text -->
<mj-text>
<p>
Hello,
</p>
<p>
You have just requested a password reset a few moments ago for your Speckle account. Please click on the button below to complete the process:
</p>
</mj-text>
</mj-column>
</mj-section>
<!-- CTA -->
<mj-section padding="0">
<mj-column>
<mj-button background-color="linear-gradient(90deg, rgba(0,143,233,1) 0%, rgba(0,76,235,1) 100%)" border-radius="8px" color="white" href="#" title="CTA Title" rel="notrack" inner-padding="25px 55px" font-weight="bold">
Reset Your Password
</mj-button>
</mj-column>
</mj-section>
<!-- Body - End -->
<mj-section>
<mj-column>
<!-- Some example finishing text -->
<mj-text>
<p>
The link above is valid for <b>1 hour</b>.
If you didn't request a password reset, feel free to ignore this email - nothing will happen, and your account is secure.
</p>
</mj-text>
</mj-column>
</mj-section>
<!-- Footer -->
<mj-section padding-top="0" border-bottom="1px solid #e0e0e0">
<mj-column>
<mj-text font-size="12px" line-height="18px" align="center" color="#999">
Sent from %SERVERNAME% at <a href="#">%SERVERURL%</a>, deployed and managed by %COMPANY%. Your admin contact is %ADMINCONTACT%.
</mj-text>
</mj-column>
</mj-section>
<mj-section padding-top="20px" >
<mj-column>
<mj-text font-size="12px" line-height="18px" align="center" color="#e0e0e0">
Brought to you by <a href="https://speckle.systems" target="_blank">Speckle</a>, the Open Source Data Platform for 3D Data
</mj-text>
</mj-column>
</mj-section>
</mj-body>
</mjml>