email: premium HTML template with accent colour and copy affordance

Redesigns the mail template (branded header bar, hero code block, copy
button, muted footer) and adds a configurable accent colour alongside the
brand name.
This commit is contained in:
Jean Chevronnet 2026-07-12 16:07:36 +00:00
parent 06e9da4dc8
commit 98630c7d36
No known key found for this signature in database
7 changed files with 63 additions and 22 deletions

View file

@ -19,7 +19,7 @@ pub fn handle(me: &str, from: &Sender, args: &[&str], ctx: &mut ServiceCtx, db:
return;
};
let code = db.issue_code(&canonical, CodeKind::Reset);
let mail = crate::email::reset(db.email_brand(), &canonical, &code);
let mail = crate::email::reset(db.email_brand(), db.email_accent(), &canonical, &code);
ctx.send_email(email, mail.subject, mail.text, Some(mail.html));
ctx.notice(me, from.uid, format!("A reset code has been emailed to the address on file for \x02{canonical}\x02."));
}

View file

@ -24,12 +24,19 @@ pub struct Email {
// Display name shown in email templates (header/footer).
#[serde(default = "default_brand")]
pub brand: String,
// Accent colour (any CSS colour) for the email template.
#[serde(default = "default_accent")]
pub accent: String,
}
fn default_brand() -> String {
"Network Services".to_string()
}
fn default_accent() -> String {
"#4f46e5".to_string()
}
#[derive(Debug, Deserialize, Clone)]
pub struct Gossip {
// Address to accept peer connections on. Absent = dial-only node.

View file

@ -9,15 +9,16 @@ pub struct Mail {
const BASE: &str = include_str!("../templates/email/base.html");
fn render(brand: &str, title: &str, message: &str, code: &str, note: &str) -> String {
fn render(brand: &str, accent: &str, title: &str, message: &str, code: &str, note: &str) -> String {
BASE.replace("{{brand}}", &escape(brand))
.replace("{{accent}}", &escape(accent))
.replace("{{title}}", &escape(title))
.replace("{{message}}", &escape(message))
.replace("{{code}}", &escape(code))
.replace("{{note}}", &escape(note))
}
pub fn reset(brand: &str, account: &str, code: &str) -> Mail {
pub fn reset(brand: &str, accent: &str, account: &str, code: &str) -> Mail {
Mail {
subject: format!("Password reset for {account}"),
text: format!(
@ -25,15 +26,16 @@ pub fn reset(brand: &str, account: &str, code: &str) -> Mail {
),
html: render(
brand,
accent,
"Password reset",
&format!("Use this code to reset the password for your account {account}."),
code,
"This code expires in 15 minutes.",
"This code expires in 15 minutes. If you didn't ask to reset it, ignore this email.",
),
}
}
pub fn confirm(brand: &str, account: &str, code: &str) -> Mail {
pub fn confirm(brand: &str, accent: &str, account: &str, code: &str) -> Mail {
Mail {
subject: format!("Confirm your {account} registration"),
text: format!(
@ -41,6 +43,7 @@ pub fn confirm(brand: &str, account: &str, code: &str) -> Mail {
),
html: render(
brand,
accent,
"Confirm your account",
&format!("Welcome! Confirm the email for your account {account} with the code below."),
code,

View file

@ -456,8 +456,9 @@ pub struct Db {
pub(crate) scram_iterations: u32,
// Whether outbound email is configured, so email features can gate themselves.
email_enabled: bool,
// Display name for email templates.
// Display name and accent colour for email templates.
email_brand: String,
email_accent: String,
// Node-local, non-persisted email codes: account -> (purpose, code, expiry).
codes: HashMap<String, (CodeKind, String, Instant)>,
}
@ -506,7 +507,7 @@ impl Db {
apply(&mut accounts, &mut channels, &mut grouped, event);
}
tracing::info!(accounts = accounts.len(), channels = channels.len(), "account store loaded");
Self { accounts, channels, grouped, log, scram_iterations: scram::DEFAULT_ITERATIONS, email_enabled: false, email_brand: "Network Services".to_string(), codes: HashMap::new() }
Self { accounts, channels, grouped, log, scram_iterations: scram::DEFAULT_ITERATIONS, email_enabled: false, email_brand: "Network Services".to_string(), email_accent: "#4f46e5".to_string(), codes: HashMap::new() }
}
/// Fold an entry authored by another node into the store — the services-side
@ -738,10 +739,19 @@ impl Db {
&self.email_brand
}
/// Accent colour used in email templates.
pub fn email_accent(&self) -> &str {
&self.email_accent
}
pub fn set_email_brand(&mut self, brand: &str) {
self.email_brand = brand.to_string();
}
pub fn set_email_accent(&mut self, accent: &str) {
self.email_accent = accent.to_string();
}
/// Issue a fresh emailed code for `account` and purpose, valid for 15 minutes.
pub fn issue_code(&mut self, account: &str, kind: CodeKind) -> String {
let code = gen_code();

View file

@ -548,7 +548,7 @@ impl Engine {
if ok && !self.db.is_verified(account) {
if let (Some(addr), RegReply::NickServ { agent, uid, .. }) = (addr, &reply) {
let code = self.db.issue_code(account, db::CodeKind::Confirm);
let mail = crate::email::confirm(self.db.email_brand(), account, &code);
let mail = crate::email::confirm(self.db.email_brand(), self.db.email_accent(), account, &code);
out.push(NetAction::SendEmail { to: addr, subject: mail.subject, text: mail.text, html: Some(mail.html) });
out.push(NetAction::Notice { from: agent.clone(), to: uid.clone(), text: "A confirmation code has been emailed to you. Confirm with \x02CONFIRM <code>\x02.".to_string() });
}

View file

@ -59,6 +59,7 @@ async fn main() -> Result<()> {
db.set_email_enabled(cfg.email.is_some());
if let Some(email) = &cfg.email {
db.set_email_brand(&email.brand);
db.set_email_accent(&email.accent);
}
let engine = Arc::new(Mutex::new(Engine::new(services, db)));

View file

@ -3,26 +3,46 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light">
<title>{{title}}</title>
</head>
<body style="margin:0;padding:0;background:#eef1f5;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background:#eef1f5;padding:32px 12px;">
<body style="margin:0;padding:0;background:#eef0f4;-webkit-font-smoothing:antialiased;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background:#eef0f4;padding:40px 12px;">
<tr><td align="center">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="max-width:520px;background:#ffffff;border-radius:14px;overflow:hidden;font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;box-shadow:0 1px 3px rgba(16,24,40,.08);">
<tr><td style="background:#1f2937;padding:22px 28px;">
<span style="color:#ffffff;font-size:17px;font-weight:600;letter-spacing:.2px;">{{brand}}</span>
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="max-width:468px;background:#ffffff;border-radius:16px;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;box-shadow:0 4px 24px rgba(15,23,42,.08);">
<tr><td style="height:5px;background:{{accent}};font-size:0;line-height:0;">&nbsp;</td></tr>
<tr><td style="padding:30px 36px 0;">
<span style="font-size:12px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:{{accent}};">{{brand}}</span>
<h1 style="margin:16px 0 10px;font-size:23px;line-height:1.3;font-weight:800;color:#0f172a;">{{title}}</h1>
<p style="margin:0;font-size:15px;line-height:1.65;color:#475569;">{{message}}</p>
</td></tr>
<tr><td style="padding:32px 28px 8px;">
<h1 style="margin:0 0 12px;font-size:21px;line-height:1.3;color:#111827;">{{title}}</h1>
<p style="margin:0 0 22px;font-size:15px;line-height:1.6;color:#4b5563;">{{message}}</p>
<div style="margin:0 0 22px;padding:18px;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:10px;text-align:center;">
<span style="font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:30px;font-weight:700;letter-spacing:8px;color:#1f2937;">{{code}}</span>
<tr><td style="padding:26px 36px 0;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background:#f8fafc;border:1px solid #e6eaf0;border-radius:14px;">
<tr><td align="center" style="padding:24px 16px 22px;">
<div style="font-size:11px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:#94a3b8;margin-bottom:12px;">Your code</div>
<div style="font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:36px;font-weight:800;letter-spacing:12px;color:#0f172a;padding-left:12px;">{{code}}</div>
</td></tr>
</table>
</td></tr>
<tr><td align="center" style="padding:20px 36px 4px;">
<div style="display:inline-block;background:{{accent}};color:#ffffff;font-size:14px;font-weight:600;padding:13px 30px;border-radius:11px;box-shadow:0 2px 8px rgba(15,23,42,.14);">&#128203;&nbsp;&nbsp;Copy code</div>
<div style="margin-top:10px;font-size:12px;color:#a4adba;">Tap and hold the code to copy it.</div>
</td></tr>
<tr><td style="padding:22px 36px 0;">
<p style="margin:0;font-size:13px;line-height:1.6;color:#94a3b8;">{{note}}</p>
</td></tr>
<tr><td style="padding:26px 36px 30px;">
<div style="border-top:1px solid #eef1f5;padding-top:16px;">
<p style="margin:0;font-size:12px;line-height:1.5;color:#b4bbc7;">Sent by {{brand}} services. If you didn't request this, you can safely ignore this email.</p>
</div>
<p style="margin:0 0 8px;font-size:13px;line-height:1.6;color:#6b7280;">{{note}}</p>
</td></tr>
<tr><td style="padding:18px 28px 26px;border-top:1px solid #f0f1f4;">
<p style="margin:0;font-size:12px;line-height:1.5;color:#9ca3af;">You are receiving this because your address is registered with {{brand}}. If this wasn't you, you can safely ignore it.</p>
</td></tr>
</table>
</td></tr>
</table>