mirror of
https://github.com/bewcloud/bewcloud.git
synced 2026-03-11 08:54:49 +00:00
c26cae625e
This implements a huge change, where Fresh is removed as a framework and serving files, allowing more control over importing, bundling, and serving files and components. The biggest challenge was to continue making sure that there weren't too many places to look into for import versions, and `PasswordlessPasskeyLogin.tsx` became a prototype in migrating a component to fully SSR, no need for frontend parsing (via Babel) or bundling (via a custom-script, downloading frontend dependencies from esm.sh). Still, there are too many components to migrate like that, and it's all working, so I likely won't even attempt it unless there's some bug, new feature, or security vulnerability to address that warrants a rewrite of those. This also updates all dependencies (except `@libs/xml` because that still causes some breaking in DAV endpoints), including Deno! All other advantages can be seen in the related issues, and the breaking change this (v4.0.0) introduces is related simply to `config.email.tlsMode` (which had a deprecation warning throughout v3), and because, while I tested many things exhaustively, it's not impossible something broke that I didn't see. Closes #141 Closes #132
630 lines
15 KiB
TypeScript
630 lines
15 KiB
TypeScript
import nodemailer from 'nodemailer';
|
|
import '@std/dotenv/load';
|
|
|
|
import { escapeHtml } from '/public/ts/utils/misc.ts';
|
|
import { AppConfig } from '/lib/config.ts';
|
|
|
|
const SMTP_USERNAME = Deno.env.get('SMTP_USERNAME') || '';
|
|
const SMTP_PASSWORD = Deno.env.get('SMTP_PASSWORD') || '';
|
|
|
|
export class EmailModel {
|
|
private static async send(to: string, subject: string, htmlBody: string, textBody: string) {
|
|
const emailConfig = await AppConfig.getEmailConfig();
|
|
|
|
if (!emailConfig.from || !emailConfig.host || !emailConfig.port) {
|
|
throw new Error('config.email.from, config.email.host, or config.email.port is not set');
|
|
}
|
|
|
|
let tlsMode = emailConfig.tlsMode;
|
|
if (tlsMode === 'auto') {
|
|
tlsMode = Number(emailConfig.port) === 465 ? 'immediate' : 'starttls';
|
|
}
|
|
|
|
const transporterConfig = {
|
|
host: emailConfig.host,
|
|
port: emailConfig.port,
|
|
|
|
secure: tlsMode === 'immediate',
|
|
requireTLS: tlsMode === 'starttls',
|
|
ignoreTLS: tlsMode === 'none',
|
|
tls: emailConfig.tlsVerify === false
|
|
? { rejectUnauthorized: false }
|
|
: emailConfig.tlsVerify !== true
|
|
? { servername: emailConfig.tlsVerify }
|
|
: {},
|
|
|
|
auth: (SMTP_USERNAME || SMTP_PASSWORD)
|
|
? {
|
|
user: SMTP_USERNAME,
|
|
pass: SMTP_PASSWORD,
|
|
}
|
|
: null,
|
|
};
|
|
|
|
const transporter = nodemailer.createTransport(transporterConfig);
|
|
|
|
const mailOptions = {
|
|
from: emailConfig.from,
|
|
to,
|
|
subject,
|
|
html: htmlBody,
|
|
text: textBody,
|
|
};
|
|
|
|
try {
|
|
await transporter.sendMail(mailOptions);
|
|
console.log(`Email sent to "${to}", "${subject}"`);
|
|
} catch (error) {
|
|
console.log(error);
|
|
throw new Error(`Failed to send email to "${to}", "${subject}"`);
|
|
}
|
|
}
|
|
|
|
/** Based off of https://github.com/ActiveCampaign/postmark-templates/tree/main/templates-inlined/basic/password-reset */
|
|
private static getHtmlBody(title: string, htmlBody: string) {
|
|
return `
|
|
<!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">
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta name="x-apple-disable-message-reformatting" />
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
|
<meta name="color-scheme" content="light dark" />
|
|
<meta name="supported-color-schemes" content="light dark" />
|
|
<title>${escapeHtml(title)}</title>
|
|
<style type="text/css" rel="stylesheet" media="all">
|
|
/* Base ------------------------------ */
|
|
|
|
body {
|
|
width: 100% !important;
|
|
height: 100%;
|
|
margin: 0;
|
|
-webkit-text-size-adjust: none;
|
|
}
|
|
|
|
a {
|
|
color: #3869D4;
|
|
}
|
|
|
|
a img {
|
|
border: none;
|
|
}
|
|
|
|
td {
|
|
word-break: break-word;
|
|
}
|
|
|
|
.preheader {
|
|
display: none !important;
|
|
visibility: hidden;
|
|
mso-hide: all;
|
|
font-size: 1px;
|
|
line-height: 1px;
|
|
max-height: 0;
|
|
max-width: 0;
|
|
opacity: 0;
|
|
overflow: hidden;
|
|
}
|
|
/* Type ------------------------------ */
|
|
|
|
body,
|
|
td,
|
|
th {
|
|
/* Source: https://fontsarena.com/blog/operating-systems-default-sans-serif-fonts/ */
|
|
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Oxygen, Cantarell, sans-serif;
|
|
}
|
|
|
|
h1 {
|
|
margin-top: 0;
|
|
color: #333333;
|
|
font-size: 22px;
|
|
font-weight: bold;
|
|
text-align: left;
|
|
}
|
|
|
|
h2 {
|
|
margin-top: 0;
|
|
color: #333333;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
text-align: left;
|
|
}
|
|
|
|
h3 {
|
|
margin-top: 0;
|
|
color: #333333;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
text-align: left;
|
|
}
|
|
|
|
td,
|
|
th {
|
|
font-size: 16px;
|
|
}
|
|
|
|
p,
|
|
ul,
|
|
ol,
|
|
blockquote {
|
|
margin: .4em 0 1.1875em;
|
|
font-size: 16px;
|
|
line-height: 1.625;
|
|
}
|
|
|
|
p.sub {
|
|
font-size: 13px;
|
|
}
|
|
/* Utilities ------------------------------ */
|
|
|
|
.align-right {
|
|
text-align: right;
|
|
}
|
|
|
|
.align-left {
|
|
text-align: left;
|
|
}
|
|
|
|
.align-center {
|
|
text-align: center;
|
|
}
|
|
|
|
.u-margin-bottom-none {
|
|
margin-bottom: 0;
|
|
}
|
|
/* Buttons ------------------------------ */
|
|
|
|
.button {
|
|
background-color: #3869D4;
|
|
border-top: 10px solid #3869D4;
|
|
border-right: 18px solid #3869D4;
|
|
border-bottom: 10px solid #3869D4;
|
|
border-left: 18px solid #3869D4;
|
|
display: inline-block;
|
|
color: #FFF;
|
|
text-decoration: none;
|
|
border-radius: 3px;
|
|
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.16);
|
|
-webkit-text-size-adjust: none;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.button--green {
|
|
background-color: #22BC66;
|
|
border-top: 10px solid #22BC66;
|
|
border-right: 18px solid #22BC66;
|
|
border-bottom: 10px solid #22BC66;
|
|
border-left: 18px solid #22BC66;
|
|
}
|
|
|
|
.button--red {
|
|
background-color: #FF6136;
|
|
border-top: 10px solid #FF6136;
|
|
border-right: 18px solid #FF6136;
|
|
border-bottom: 10px solid #FF6136;
|
|
border-left: 18px solid #FF6136;
|
|
}
|
|
|
|
@media only screen and (max-width: 500px) {
|
|
.button {
|
|
width: 100% !important;
|
|
text-align: center !important;
|
|
}
|
|
}
|
|
/* Attribute list ------------------------------ */
|
|
|
|
.attributes {
|
|
margin: 0 0 21px;
|
|
}
|
|
|
|
.attributes_content {
|
|
background-color: #F4F4F7;
|
|
padding: 16px;
|
|
}
|
|
|
|
.attributes_item {
|
|
padding: 0;
|
|
}
|
|
/* Related Items ------------------------------ */
|
|
|
|
.related {
|
|
width: 100%;
|
|
margin: 0;
|
|
padding: 25px 0 0 0;
|
|
-premailer-width: 100%;
|
|
-premailer-cellpadding: 0;
|
|
-premailer-cellspacing: 0;
|
|
}
|
|
|
|
.related_item {
|
|
padding: 10px 0;
|
|
color: #CBCCCF;
|
|
font-size: 15px;
|
|
line-height: 18px;
|
|
}
|
|
|
|
.related_item-title {
|
|
display: block;
|
|
margin: .5em 0 0;
|
|
}
|
|
|
|
.related_item-thumb {
|
|
display: block;
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
.related_heading {
|
|
border-top: 1px solid #CBCCCF;
|
|
text-align: center;
|
|
padding: 25px 0 10px;
|
|
}
|
|
/* Discount Code ------------------------------ */
|
|
|
|
.discount {
|
|
width: 100%;
|
|
margin: 0;
|
|
padding: 24px;
|
|
-premailer-width: 100%;
|
|
-premailer-cellpadding: 0;
|
|
-premailer-cellspacing: 0;
|
|
background-color: #F4F4F7;
|
|
border: 2px dashed #CBCCCF;
|
|
}
|
|
|
|
.discount_heading {
|
|
text-align: center;
|
|
}
|
|
|
|
.discount_body {
|
|
text-align: center;
|
|
font-size: 15px;
|
|
}
|
|
/* Social Icons ------------------------------ */
|
|
|
|
.social {
|
|
width: auto;
|
|
}
|
|
|
|
.social td {
|
|
padding: 0;
|
|
width: auto;
|
|
}
|
|
|
|
.social_icon {
|
|
height: 20px;
|
|
margin: 0 8px 10px 8px;
|
|
padding: 0;
|
|
}
|
|
/* Data table ------------------------------ */
|
|
|
|
.purchase {
|
|
width: 100%;
|
|
margin: 0;
|
|
padding: 35px 0;
|
|
-premailer-width: 100%;
|
|
-premailer-cellpadding: 0;
|
|
-premailer-cellspacing: 0;
|
|
}
|
|
|
|
.purchase_content {
|
|
width: 100%;
|
|
margin: 0;
|
|
padding: 25px 0 0 0;
|
|
-premailer-width: 100%;
|
|
-premailer-cellpadding: 0;
|
|
-premailer-cellspacing: 0;
|
|
}
|
|
|
|
.purchase_item {
|
|
padding: 10px 0;
|
|
color: #51545E;
|
|
font-size: 15px;
|
|
line-height: 18px;
|
|
}
|
|
|
|
.purchase_heading {
|
|
padding-bottom: 8px;
|
|
border-bottom: 1px solid #EAEAEC;
|
|
}
|
|
|
|
.purchase_heading p {
|
|
margin: 0;
|
|
color: #85878E;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.purchase_footer {
|
|
padding-top: 15px;
|
|
border-top: 1px solid #EAEAEC;
|
|
}
|
|
|
|
.purchase_total {
|
|
margin: 0;
|
|
text-align: right;
|
|
font-weight: bold;
|
|
color: #333333;
|
|
}
|
|
|
|
.purchase_total--label {
|
|
padding: 0 15px 0 0;
|
|
}
|
|
|
|
body {
|
|
background-color: #F2F4F6;
|
|
color: #51545E;
|
|
}
|
|
|
|
p {
|
|
color: #51545E;
|
|
}
|
|
|
|
.email-wrapper {
|
|
width: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
-premailer-width: 100%;
|
|
-premailer-cellpadding: 0;
|
|
-premailer-cellspacing: 0;
|
|
background-color: #F2F4F6;
|
|
}
|
|
|
|
.email-content {
|
|
width: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
-premailer-width: 100%;
|
|
-premailer-cellpadding: 0;
|
|
-premailer-cellspacing: 0;
|
|
}
|
|
/* Masthead ----------------------- */
|
|
|
|
.email-masthead {
|
|
padding: 25px 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.email-masthead_logo {
|
|
width: 94px;
|
|
}
|
|
|
|
.email-masthead_name {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
color: #A8AAAF;
|
|
text-decoration: none;
|
|
text-shadow: 0 1px 0 white;
|
|
}
|
|
/* Body ------------------------------ */
|
|
|
|
.email-body {
|
|
width: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
-premailer-width: 100%;
|
|
-premailer-cellpadding: 0;
|
|
-premailer-cellspacing: 0;
|
|
}
|
|
|
|
.email-body_inner {
|
|
width: 570px;
|
|
margin: 0 auto;
|
|
padding: 0;
|
|
-premailer-width: 570px;
|
|
-premailer-cellpadding: 0;
|
|
-premailer-cellspacing: 0;
|
|
background-color: #FFFFFF;
|
|
}
|
|
|
|
.email-footer {
|
|
width: 570px;
|
|
margin: 0 auto;
|
|
padding: 0;
|
|
-premailer-width: 570px;
|
|
-premailer-cellpadding: 0;
|
|
-premailer-cellspacing: 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.email-footer p {
|
|
color: #A8AAAF;
|
|
}
|
|
|
|
.body-action {
|
|
width: 100%;
|
|
margin: 30px auto;
|
|
padding: 0;
|
|
-premailer-width: 100%;
|
|
-premailer-cellpadding: 0;
|
|
-premailer-cellspacing: 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.body-sub {
|
|
margin-top: 25px;
|
|
padding-top: 25px;
|
|
border-top: 1px solid #EAEAEC;
|
|
}
|
|
|
|
.content-cell {
|
|
padding: 45px;
|
|
}
|
|
/*Media Queries ------------------------------ */
|
|
|
|
@media only screen and (max-width: 600px) {
|
|
.email-body_inner,
|
|
.email-footer {
|
|
width: 100% !important;
|
|
}
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
body,
|
|
.email-body,
|
|
.email-body_inner,
|
|
.email-content,
|
|
.email-wrapper,
|
|
.email-masthead,
|
|
.email-footer {
|
|
background-color: #333333 !important;
|
|
color: #FFF !important;
|
|
}
|
|
p,
|
|
ul,
|
|
ol,
|
|
blockquote,
|
|
h1,
|
|
h2,
|
|
h3,
|
|
span,
|
|
.purchase_item {
|
|
color: #FFF !important;
|
|
}
|
|
.attributes_content,
|
|
.discount {
|
|
background-color: #222 !important;
|
|
}
|
|
.email-masthead_name {
|
|
text-shadow: none !important;
|
|
}
|
|
}
|
|
|
|
:root {
|
|
color-scheme: light dark;
|
|
supported-color-schemes: light dark;
|
|
}
|
|
</style>
|
|
<!--[if mso]>
|
|
<style type="text/css">
|
|
.f-fallback {
|
|
font-family: Arial, sans-serif;
|
|
}
|
|
</style>
|
|
<![endif]-->
|
|
</head>
|
|
<body>
|
|
<span class="preheader">${escapeHtml(title)}</span>
|
|
<table class="email-wrapper" width="100%" cellpadding="0" cellspacing="0" role="presentation">
|
|
<tr>
|
|
<td align="center">
|
|
<table class="email-content" width="100%" cellpadding="0" cellspacing="0" role="presentation">
|
|
<tr>
|
|
<td class="email-masthead">
|
|
<a href="https://bewcloud.com" class="f-fallback email-masthead_name">
|
|
bewCloud
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="email-body" width="570" cellpadding="0" cellspacing="0">
|
|
<table class="email-body_inner" align="center" width="570" cellpadding="0" cellspacing="0" role="presentation">
|
|
<tr>
|
|
<td class="content-cell">
|
|
<div class="f-fallback">
|
|
${htmlBody}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</body>
|
|
</html>
|
|
`;
|
|
}
|
|
|
|
static async sendVerificationEmail(
|
|
email: string,
|
|
verificationCode: string,
|
|
) {
|
|
const emailTitle = 'Verify your email in bewCloud';
|
|
|
|
const textBody = `
|
|
${emailTitle}
|
|
------------------------
|
|
|
|
You or someone who knows your email is trying to verify it in bewCloud.
|
|
|
|
Here's the verification code:
|
|
|
|
**${verificationCode}**
|
|
===============================
|
|
|
|
This code will expire in 30 minutes.
|
|
`;
|
|
|
|
const htmlBody = this.getHtmlBody(
|
|
emailTitle,
|
|
`
|
|
<h1>${escapeHtml(emailTitle)}</h1>
|
|
<p>You or someone who knows your email is trying to verify it in bewCloud.</p>
|
|
<p>Here's the verification code:</p>
|
|
<table class="body-action" align="center" width="100%" cellpadding="0" cellspacing="0" role="presentation">
|
|
<tr>
|
|
<td align="center">
|
|
<table width="100%" border="0" cellspacing="0" cellpadding="0" role="presentation">
|
|
<tr>
|
|
<td align="center">
|
|
<span class="f-fallback button button--green">${escapeHtml(verificationCode)}</span>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<p>This code will expire in 30 minutes.</p>
|
|
`,
|
|
);
|
|
|
|
await this.send(email, emailTitle, htmlBody, textBody);
|
|
}
|
|
|
|
static async sendLoginVerificationEmail(
|
|
email: string,
|
|
verificationCode: string,
|
|
) {
|
|
const emailTitle = 'Verify your login in bewCloud';
|
|
|
|
const textBody = `
|
|
${emailTitle}
|
|
------------------------
|
|
|
|
You or someone who knows your email and password is trying to login to bewCloud.
|
|
|
|
Here's the verification code:
|
|
|
|
**${verificationCode}**
|
|
===============================
|
|
|
|
This code will expire in 30 minutes.
|
|
`;
|
|
|
|
const htmlBody = this.getHtmlBody(
|
|
emailTitle,
|
|
`
|
|
<h1>${escapeHtml(emailTitle)}</h1>
|
|
<p>You or someone who knows your email and password is trying to login to bewCloud.</p>
|
|
<p>Here's the verification code:</p>
|
|
<table class="body-action" align="center" width="100%" cellpadding="0" cellspacing="0" role="presentation">
|
|
<tr>
|
|
<td align="center">
|
|
<table width="100%" border="0" cellspacing="0" cellpadding="0" role="presentation">
|
|
<tr>
|
|
<td align="center">
|
|
<span class="f-fallback button button--green">${escapeHtml(verificationCode)}</span>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<p>This code will expire in 30 minutes.</p>
|
|
`,
|
|
);
|
|
|
|
await this.send(email, emailTitle, htmlBody, textBody);
|
|
}
|
|
}
|