mostly working

This commit is contained in:
2026-01-07 17:53:21 -05:00
parent 5b0f6dba0f
commit 6a934880f9
13 changed files with 772 additions and 188 deletions

View File

@@ -0,0 +1,45 @@
<html>
<head>
<style>
.center {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
flex-direction: column;
}
.button {
display: inline-block;
padding: 10px 20px;
text-align: center;
text-decoration: none;
color: #ffffff;
background-color: #007bff;
border-radius: 6px;
transition: background-color 0.3s;
margin: 10px 0;
}
.button:hover {
background-color: #0056b3;
}
.expiry {
color: #666;
font-size: 14px;
}
</style>
</head>
<body>
<div class="center">
<h2>Verify Your Email</h2>
<p>Click the button below to verify your email address:</p>
<a href="{{VERIFICATION_URL}}" class="button">Verify Email</a>
<p class="expiry">This link will expire in {{EXPIRY_TIME}}.</p>
</div>
<div class="center" style="margin-top: 30px">
<p style="color: #666; font-size: 12px">
You can ignore this if you did not request this email
</p>
</div>
</body>
</html>

View File

@@ -0,0 +1,117 @@
import { readFileSync } from "fs";
import { join } from "path";
import { AUTH_CONFIG } from "~/config";
/**
* Convert expiry string to human-readable format
* @param expiry - Expiry string like "15m", "1h", "7d"
* @returns Human-readable string like "15 minutes", "1 hour", "7 days"
*/
export function expiryToHuman(expiry: string): string {
const value = parseInt(expiry);
if (expiry.endsWith("m")) {
return value === 1 ? "1 minute" : `${value} minutes`;
} else if (expiry.endsWith("h")) {
return value === 1 ? "1 hour" : `${value} hours`;
} else if (expiry.endsWith("d")) {
return value === 1 ? "1 day" : `${value} days`;
}
return expiry;
}
/**
* Load email template from file
* @param templateName - Name of the template file (without .html extension)
* @returns Template content as string
*/
function loadTemplate(templateName: string): string {
try {
const templatePath = join(
process.cwd(),
"src",
"server",
"email-templates",
`${templateName}.html`
);
return readFileSync(templatePath, "utf-8");
} catch (error) {
console.error(`Failed to load email template: ${templateName}`, error);
throw new Error(`Email template not found: ${templateName}`);
}
}
/**
* Replace placeholders in template with actual values
* @param template - Template string with {{PLACEHOLDER}} markers
* @param vars - Object with placeholder values
* @returns Processed template string
*/
function processTemplate(
template: string,
vars: Record<string, string>
): string {
let processed = template;
for (const [key, value] of Object.entries(vars)) {
const placeholder = `{{${key}}}`;
processed = processed.replaceAll(placeholder, value);
}
return processed;
}
export interface LoginLinkEmailParams {
email: string;
loginUrl: string;
loginCode: string;
}
/**
* Generate login link email HTML
*/
export function generateLoginLinkEmail(params: LoginLinkEmailParams): string {
const template = loadTemplate("login-link");
const expiryTime = expiryToHuman(AUTH_CONFIG.EMAIL_LOGIN_LINK_EXPIRY);
return processTemplate(template, {
LOGIN_URL: params.loginUrl,
LOGIN_CODE: params.loginCode,
EXPIRY_TIME: expiryTime
});
}
export interface PasswordResetEmailParams {
resetUrl: string;
}
/**
* Generate password reset email HTML
*/
export function generatePasswordResetEmail(
params: PasswordResetEmailParams
): string {
const template = loadTemplate("password-reset");
const expiryTime = "1 hour"; // Password reset is hardcoded to 1 hour
return processTemplate(template, {
RESET_URL: params.resetUrl,
EXPIRY_TIME: expiryTime
});
}
export interface EmailVerificationParams {
verificationUrl: string;
}
/**
* Generate email verification email HTML
*/
export function generateEmailVerificationEmail(
params: EmailVerificationParams
): string {
const template = loadTemplate("email-verification");
const expiryTime = expiryToHuman(AUTH_CONFIG.EMAIL_VERIFICATION_LINK_EXPIRY);
return processTemplate(template, {
VERIFICATION_URL: params.verificationUrl,
EXPIRY_TIME: expiryTime
});
}

View File

@@ -0,0 +1,67 @@
<html>
<head>
<style>
.center {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
flex-direction: column;
}
.button {
display: inline-block;
padding: 10px 20px;
text-align: center;
text-decoration: none;
color: #ffffff;
background-color: #007bff;
border-radius: 6px;
transition: background-color 0.3s;
margin: 10px 0;
}
.button:hover {
background-color: #0056b3;
}
.code {
font-size: 32px;
font-weight: bold;
letter-spacing: 8px;
color: #007bff;
margin: 20px 0;
font-family: monospace;
}
.divider {
margin: 30px 0;
color: #666;
}
.expiry {
color: #666;
font-size: 14px;
}
</style>
</head>
<body>
<div class="center">
<h2>Login to freno.me</h2>
<p>Click the button below to log in automatically:</p>
<a href="{{LOGIN_URL}}" class="button">Log In</a>
<p class="expiry">Link expires in {{EXPIRY_TIME}}</p>
</div>
<div class="center divider">
<p>── OR ──</p>
</div>
<div class="center">
<p>Enter this code on the login page:</p>
<div class="code">{{LOGIN_CODE}}</div>
<p class="expiry">Code expires in {{EXPIRY_TIME}}</p>
</div>
<div class="center" style="margin-top: 30px">
<p style="color: #666; font-size: 12px">
You can ignore this if you did not request this email
</p>
</div>
</body>
</html>

View File

@@ -0,0 +1,48 @@
<html>
<head>
<style>
.center {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
flex-direction: column;
}
.button {
display: inline-block;
padding: 10px 20px;
text-align: center;
text-decoration: none;
color: #ffffff;
background-color: #007bff;
border-radius: 6px;
transition: background-color 0.3s;
margin: 10px 0;
}
.button:hover {
background-color: #0056b3;
}
.expiry {
color: #666;
font-size: 14px;
}
</style>
</head>
<body>
<div class="center">
<h2>Reset Your Password</h2>
<p>Click the button below to reset your password:</p>
<a href="{{RESET_URL}}" class="button">Reset Password</a>
<p class="expiry">
This link will expire in {{EXPIRY_TIME}} and can only be used once.
</p>
</div>
<div class="center" style="margin-top: 30px">
<p style="color: #666; font-size: 12px">
You can ignore this if you did not request this email, someone may have
requested it in error
</p>
</div>
</body>
</html>