upd email verification style
This commit is contained in:
oiov
@@ -1,6 +1,6 @@
|
|||||||
MIT License
|
MIT License
|
||||||
|
|
||||||
Copyright (c) 2023 mickasmt
|
Copyright (c) 2024 oiov
|
||||||
|
|
||||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
of this software and associated documentation files (the "Software"), to deal
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
|||||||
@@ -5,6 +5,9 @@ import Resend from "next-auth/providers/resend";
|
|||||||
|
|
||||||
import { env } from "@/env.mjs";
|
import { env } from "@/env.mjs";
|
||||||
|
|
||||||
|
import { siteConfig } from "./config/site";
|
||||||
|
import { getVerificationEmailHtml, resend } from "./lib/email";
|
||||||
|
|
||||||
const linuxDoProvider: any = {
|
const linuxDoProvider: any = {
|
||||||
id: "linuxdo",
|
id: "linuxdo",
|
||||||
name: "Linux Do",
|
name: "Linux Do",
|
||||||
@@ -45,6 +48,24 @@ export default {
|
|||||||
Resend({
|
Resend({
|
||||||
apiKey: env.RESEND_API_KEY,
|
apiKey: env.RESEND_API_KEY,
|
||||||
from: "wrdo <support@wr.do>",
|
from: "wrdo <support@wr.do>",
|
||||||
|
async sendVerificationRequest({ identifier: email, url, provider }) {
|
||||||
|
try {
|
||||||
|
// 使用 Resend 发送自定义验证邮件
|
||||||
|
const { data, error } = await resend.emails.send({
|
||||||
|
from: provider.from || "no-reply@wr.do",
|
||||||
|
to: [email],
|
||||||
|
subject: "Verify your email address",
|
||||||
|
html: getVerificationEmailHtml({ url, appName: siteConfig.name }),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
throw new Error(`Resend error: ${JSON.stringify(error)}`);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error sending verification email", error);
|
||||||
|
throw new Error("Error sending verification email");
|
||||||
|
}
|
||||||
|
},
|
||||||
}),
|
}),
|
||||||
linuxDoProvider,
|
linuxDoProvider,
|
||||||
],
|
],
|
||||||
|
|||||||
140
lib/email.ts
140
lib/email.ts
@@ -4,6 +4,146 @@ import { env } from "@/env.mjs";
|
|||||||
|
|
||||||
export const resend = new Resend(env.RESEND_API_KEY);
|
export const resend = new Resend(env.RESEND_API_KEY);
|
||||||
|
|
||||||
|
export function getVerificationEmailHtml({
|
||||||
|
url,
|
||||||
|
appName,
|
||||||
|
}: {
|
||||||
|
url: string;
|
||||||
|
appName: string;
|
||||||
|
}): string {
|
||||||
|
return `
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Email Verification - ${appName}</title>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||||
|
background-color: #f0f2f5;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.wrapper {
|
||||||
|
max-width: 600px;
|
||||||
|
margin: 40px auto;
|
||||||
|
background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.header {
|
||||||
|
background: linear-gradient(90deg, #346df1 0%, #5b9aff 100%);
|
||||||
|
padding: 30px 20px;
|
||||||
|
text-align: center;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
.header h1 {
|
||||||
|
font-size: 28px;
|
||||||
|
margin: 0;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.header p {
|
||||||
|
font-size: 16px;
|
||||||
|
margin: 8px 0 0;
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
padding: 30px;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
.content h2 {
|
||||||
|
font-size: 20px;
|
||||||
|
margin: 0 0 15px;
|
||||||
|
color: #1a1a1a;
|
||||||
|
}
|
||||||
|
.content p {
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 1.6;
|
||||||
|
margin: 0 0 20px;
|
||||||
|
color: #555555;
|
||||||
|
}
|
||||||
|
.button-container {
|
||||||
|
text-align: center;
|
||||||
|
margin: 20px 0;
|
||||||
|
}
|
||||||
|
.button {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 14px 30px;
|
||||||
|
background-color: #346df1;
|
||||||
|
color: #ffffff;
|
||||||
|
text-decoration: none;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
transition: background-color 0.3s;
|
||||||
|
}
|
||||||
|
.button:hover {
|
||||||
|
background-color: #2858c1;
|
||||||
|
}
|
||||||
|
.divider {
|
||||||
|
height: 1px;
|
||||||
|
background-color: #e0e0e0;
|
||||||
|
margin: 30px 0;
|
||||||
|
}
|
||||||
|
.footer {
|
||||||
|
padding: 20px 30px;
|
||||||
|
background-color: #f9fafb;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #888888;
|
||||||
|
}
|
||||||
|
.footer a {
|
||||||
|
color: #346df1;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.footer a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="wrapper">
|
||||||
|
<div class="header">
|
||||||
|
<h1>Welcome to ${appName}</h1>
|
||||||
|
<p>Your journey starts here 🎉</p>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<h2>Verify Your Email</h2>
|
||||||
|
<p>
|
||||||
|
Hello there,<br />
|
||||||
|
Thank you for joining ${appName}! To complete your login and get started,
|
||||||
|
please verify your email address by clicking the button below:
|
||||||
|
</p>
|
||||||
|
<div class="button-container">
|
||||||
|
<a href="${url}" class="button">Verify Email Now</a>
|
||||||
|
</div>
|
||||||
|
<p>
|
||||||
|
Or copy and paste the link below into your browser: <br />
|
||||||
|
<a href="${url}">${url}</a>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
If you didn’t request this email or believe this was sent in error,
|
||||||
|
you can safely ignore it. This link will expire in 24 hours for security reasons.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<div class="footer">
|
||||||
|
<p>
|
||||||
|
Best regards,<br />
|
||||||
|
The ${appName} Team
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Need help? <a href="mailto:support@${appName.toLowerCase()}">Contact Support</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
// TODO: Update sendVerificationRequest for use react-email with resend magic-link
|
// TODO: Update sendVerificationRequest for use react-email with resend magic-link
|
||||||
|
|
||||||
// Email({
|
// Email({
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user