Skip to content

Commit

Permalink
fix: adapt email template to improve GMAIL compatibility #242
Browse files Browse the repository at this point in the history
  • Loading branch information
@Ravinou
Ravinou committed Jun 27, 2024
1 parent 6763cac commit 13aa405
Show file tree
Hide file tree
Showing 4 changed files with 202 additions and 212 deletions.
Binary file added helpers/templates/attachments/alert-icon.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added helpers/templates/attachments/valid-icon.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
259 changes: 114 additions & 145 deletions helpers/templates/emailAlertStatus.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,156 +11,125 @@ export default function emailTest(mailTo, username, aliasList) {
from: 'BorgWarehouse' + '<' + process.env.MAIL_SMTP_FROM + '>',
to: mailTo,
subject: 'Down status alert !',
text: 'Some repositories need attention ! Please, check your BorgWarehouse interface.',
text: 'Some repositories require your attention ! Please, check your BorgWarehouse interface.',
html:
`
<div
style="
max-width: 37.5em;
border: 1px solid #eaeaea;
border-radius: 5px;
margin: 40px auto;
overflow: hidden;
max-width: 475px;
"
>
<div
style="
border-image-slice: 1;
border-top: 4px solid;
border-image-source: linear-gradient(
90deg,
#020024 0%,
#6d4aff 50%,
#020024 100%
);
"
></div>
<div style="padding: 20px; display: flex; flex-direction: column">
<div
style="
color: #6d4aff;
font-family: Inter, sans-serif;
font-weight: 700;
font-size: 2em;
text-align: center;
margin-top: 20px;
"
>
BorgWarehouse
</div>
<div style="margin: 30px auto 20px">
<svg
xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-alert-triangle"
width="96"
height="96"
viewBox="0 0 24 24"
stroke-width="1.5"
color="#6d4aff"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 9v2m0 4v.01"></path>
<path
d="M5 19h14a2 2 0 0 0 1.84 -2.75l-7.1 -12.25a2 2 0 0 0 -3.5 0l-7.1 12.25a2 2 0 0 0 1.75 2.75"
></path>
</svg>
</div>
<div
style="
font-family: Inter, sans-serif;
font-weight: 500;
color: #494b7a;
font-size: 1.5em;
text-align: center;
margin-bottom: 20px;
"
>
<p>Some repositories need attention,<br /> ` +
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
margin: 0;
padding: 0;
font-family: 'Inter', sans-serif;
}
.container {
max-width: 475px;
margin: 40px auto;
border: 1px solid #eaeaea;
border-radius: 5px;
overflow: hidden;
}
.header {
border-top: 4px solid;
border-image-source: linear-gradient(90deg, #020024 0%, #6d4aff 50%, #020024 100%);
border-image-slice: 1;
}
.content {
padding: 20px;
}
.title {
color: #6d4aff;
font-weight: 700;
font-size: 2em;
text-align: center;
margin-top: 20px;
}
.icon {
display: block;
margin: 30px auto 20px;
text-align: center;
}
.message {
font-weight: 500;
color: #494b7a;
font-size: 1.5em;
text-align: center;
margin-bottom: 20px;
}
.description {
color: #494b7a;
font-size: 1.1em;
margin-bottom: 50px;
}
.alert {
margin: 2rem -0.5rem 0rem -0.5rem;
color: #494b7a;
background: #fff;
border: 1px solid #6d4aff5c;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
border-radius: 5px;
font-size: 0.8em;
font-family: Inter, sans-serif;
padding: 1rem 1.5rem;
display: flex;
}
.footer {
font-size: 0.8em;
color: #C8C8C8;
text-align: center;
}
.footer a {
color: #cfc4fb;
text-decoration: none;
}
.alert a {
text-decoration: none;
color: #6d4aff;
}
</style>
</head>
<body>
<div class="container">
<div class="header"></div>
<div class="content">
<div class="title">BorgWarehouse</div>
<div class="icon">
<img src="cid:alert-icon" alt="alert icon" width="96" height="96">
</div>
<div class="message">
<p>Some repositories require your attention, ` +
username +
` !</p>
</div>
<div
style="
font-family: Inter, sans-serif;
color: #494b7a;
font-size: 1.1em;
margin-bottom: 50px;
"
>
<p>
List of repositories with down status :
</p>
<ul>` +
`!</p>
</div>
<div class="description">
<p>List of repositories with down status:</p>
<ul>` +
aliasTemplate(aliasList) +
`</ul>
</div>
<div
style="
margin: 2rem -0.5rem 0rem -0.5rem;
color: #494b7a;
background: #fff;
border: 1px solid #6d4aff5c;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12),
0 1px 2px rgba(0, 0, 0, 0.24);
border-radius: 5px;
font-size: 0.8em;
font-family: Inter, sans-serif;
position: relative;
padding: 1rem 1.5rem;
display: flex;
"
>
<div style="flex-shrink: 1 !important; margin-right: 0.75rem">
🚩
</div>
<div style="width: 100%">
Please remember that the status is based on
<b>the last modification</b>. Backups are
<b
>encrypted from end to end between your client and the
server</b
>
controlled by BorgWarehouse. Don't forget to
<a
style="text-decoration: none; color: #6d4aff"
href="https://borgwarehouse.com/docs/user-manual/setupwizard/#step-3--launch--verify"
rel="noreferrer"
>check the integrity of your backups regularly</a
>.
</div>
</div>
</div>
<div
style="
font-size: 0.8em;
color: #c8c8c8;
font-family: Inter, sans-serif;
text-align: center;
"
>
<p>
About
<a
style="color: #cfc4fb; text-decoration: none"
target="_blank"
href="https://borgwarehouse.com/"
rel="noreferrer"
>BorgWarehouse</a
>
</p>
</div>
</div>
`,
</div>
<div class="alert">
<div style="flex-shrink: 1; margin-right: 0.75rem">🚩</div>
<div style="width: 100%">
Please remember that the status is based on <b>the last modification</b>. Backups are <b>encrypted from end to end between your client and the server</b> controlled by BorgWarehouse. Don't forget to <a href="https://borgwarehouse.com/docs/user-manual/setupwizard/#step-3--launch--verify" rel="noreferrer">check the integrity of your backups regularly</a>.
</div>
</div>
</div>
<div class="footer">
<p>About <a href="https://borgwarehouse.com/" target="_blank" rel="noreferrer">BorgWarehouse</a></p>
</div>
</div>
</body>
</html>
`,
attachments: [
{
path: 'helpers/templates/attachments/alert-icon.png',
cid: 'alert-icon',
},
],
};
return template;
}
Loading

0 comments on commit 13aa405

Please sign in to comment.