javascript - 不同应用程序中的电子邮件样式变化
问题描述
我目前nodemailer
用于向要求在我的网站上更改密码的客户发送电子邮件。但是,该样式适用于默认的 windowsmail
应用程序,但在使用gmail时会有所不同,在使用移动版 gmail 应用程序时又会有所不同。
我的问题是我将如何继续制作一个带有徽标和重置链接的简单框与所有邮件应用程序一起使用?
我的代码:
const nodemailer = require('nodemailer');
async function main() {
let transporter = nodemailer.createTransport({
host: 'smtp.gmail.com', //gmail smtp server
port: 587, //gmail port
secure: false,
auth: {
user: require('./misc/auth').email,
pass: require('./misc/auth').token
},
});
if (req.query.type === 'forgot-password' && data.from) {
let name = '';
db.fetchAll().forEach(d => {
if (d.ID !== 'login') return;
d = JSON.parse(JSON.stringify(d.data[0]));
if (d.email === data.from) name = d.fName.toString();
});
function makeid(length) {
let result = '';
let characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
let charactersLength = characters.length;
for (let i = 0; i < length; i++ ) {
result += characters.charAt(Math.floor(Math.random() * charactersLength));
}
return result;
}
let link = `${req.headers.referer.split(req.headers.host)[0]}${req.headers.host}/reset/${makeid(20)}?token=${makeid(15)}`;
setTimeout(async function() {
if (name === '') return res.json({ error: 'Internal Error' });
await transporter.sendMail({
from: `${require('./misc/auth').name} <${require('./misc/auth').email}>`,
to: data.from,
subject: 'Reset Your Password',
text: '',
html:
`<!DOCTYPE html><html>` +
`<style>` +
`a {text-decoration: none; color: black; } .text-center { text-align: center; } .text { font-family: Arial; font-size: 20px; } .title { font-weight: bold; font-size: 12px; } .sub-title { font-weight: bold; font-size: 10px; } .body { display: flex; justify-content: center; margin: auto; } .header { border-radius: 5px; border: 5px solid black; padding: 50px 90px; } button { display: flex; justify-content: center; margin: aut; font-size: 15px; padding: 5px 10px; border-radius: 5px; border-color: black; }` +
`</style>` +
`<body>` +
`<div class="body">
<div class="header">
<img class="logo" src="${req.headers.referer.split(req.headers.host)[0]}${req.headers.host}/style/images/logo.webp" width="200px" height="200px">
<div class="text title text-center"><h1>Website Name</h1></div>
<span class="text">Hi ${name[0].toUpperCase() + name.substring(1).toLowerCase()},</span><br>
<div class="text sub-title text-center"><h1>Forgot your password?</h1></div><br>
<a href="${link}">
<button>Reset Your Password</button>
</a>
</div>
</div>` +
`</body></html>`
});
res.json({ response: 'Success' });
}, 100);
}
}
解决方案
推荐阅读
- xml - XPath 谓词仅使用节点集中的第一个节点进行匹配
- javascript - React Native:尝试通过道具传递参考函数
- matplotlib - matplotlib 图形屏幕菜单改变了吗?
- node.js - Node.js 安装错误“仅在 windows 8.1、windows server 2012 R2 或更高版本上支持该应用程序”
- git - 为什么 github/bitbucket 等默认需要生成的密钥作为“密码”来克隆私有仓库?而不是密码+ 2FA?
- questdb - 运行 QuestDB 二进制文件时如何更改 webconsole 端口?
- python - 处理 Python 列表
- react-native - 参考错误:找不到变量:dis
- jquery - 如何给ajax加载器超时?
- jquery - 检测 html 元素更改的 jQuery 最佳实践