390 lines
15 KiB
Python
390 lines
15 KiB
Python
EMAIL_TEMPLATES = {
|
|
"verification": {
|
|
"subject": "Welcome to Backstory - Please verify your email",
|
|
"html": """
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Email Verification</title>
|
|
<style>
|
|
body {{
|
|
font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
line-height: 1.6;
|
|
color: #2E2E2E;
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: #D3CDBF;
|
|
}}
|
|
.container {{
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
background-color: #FFFFFF;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
box-shadow: 0 4px 12px rgba(26, 37, 54, 0.15);
|
|
margin-top: 40px;
|
|
margin-bottom: 40px;
|
|
}}
|
|
.header {{
|
|
background: linear-gradient(135deg, #1A2536 0%, #4A7A7D 100%);
|
|
color: #D3CDBF;
|
|
padding: 40px 30px;
|
|
text-align: center;
|
|
}}
|
|
.header h1 {{
|
|
margin: 0 0 10px 0;
|
|
font-size: 2rem;
|
|
font-weight: 500;
|
|
color: #D3CDBF;
|
|
}}
|
|
.header p {{
|
|
margin: 0;
|
|
opacity: 0.9;
|
|
font-size: 1rem;
|
|
color: #D3CDBF;
|
|
}}
|
|
.content {{
|
|
padding: 40px 30px;
|
|
}}
|
|
.content h2 {{
|
|
margin: 0 0 20px 0;
|
|
color: #2E2E2E;
|
|
font-size: 1.75rem;
|
|
font-weight: 500;
|
|
}}
|
|
.button {{
|
|
display: inline-block;
|
|
background: #D4A017;
|
|
color: #FFFFFF;
|
|
padding: 16px 32px;
|
|
text-decoration: none;
|
|
border-radius: 4px;
|
|
font-weight: 500;
|
|
margin: 24px 0;
|
|
font-size: 1rem;
|
|
transition: background-color 0.3s ease;
|
|
}}
|
|
.button:hover {{
|
|
background: rgba(212, 160, 23, 0.8);
|
|
}}
|
|
.link-text {{
|
|
word-break: break-all;
|
|
color: #4A7A7D;
|
|
background-color: rgba(74, 122, 125, 0.1);
|
|
padding: 12px;
|
|
border-radius: 4px;
|
|
font-family: 'Roboto', monospace;
|
|
font-size: 0.875rem;
|
|
margin: 16px 0;
|
|
}}
|
|
.footer {{
|
|
background: #D3CDBF;
|
|
padding: 30px;
|
|
text-align: center;
|
|
font-size: 0.875rem;
|
|
color: #1A2536;
|
|
border-top: 1px solid rgba(26, 37, 54, 0.1);
|
|
}}
|
|
.security-note {{
|
|
background: rgba(212, 160, 23, 0.1);
|
|
border: 1px solid #D4A017;
|
|
padding: 16px;
|
|
border-radius: 4px;
|
|
margin: 24px 0;
|
|
color: #2E2E2E;
|
|
}}
|
|
.security-note strong {{
|
|
color: #1A2536;
|
|
}}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="header">
|
|
<h1>Welcome to Backstory!</h1>
|
|
<p>Thanks for joining us, {user_name}</p>
|
|
</div>
|
|
<div class="content">
|
|
<h2>Please verify your email address</h2>
|
|
<p>To complete your registration and start using Backstory, please verify your email address by clicking the button below:</p>
|
|
|
|
<div style="text-align: center; margin: 32px 0;">
|
|
<a href="{verification_link}" class="button">Verify Email Address</a>
|
|
</div>
|
|
|
|
<p>If the button doesn't work, copy and paste this link into your browser:</p>
|
|
<div class="link-text">{verification_link}</div>
|
|
|
|
<div class="security-note">
|
|
<strong>Security Note:</strong> This verification link will expire in 24 hours. If you didn't create this account, please ignore this email and the account will be automatically deleted.
|
|
</div>
|
|
</div>
|
|
<div class="footer">
|
|
<p><strong>This email was sent to:</strong> {to_email}</p>
|
|
<p>If you have any questions, please contact our support team.</p>
|
|
<p>© 2025 Backstory. All rights reserved.</p>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
""",
|
|
},
|
|
"mfa": {
|
|
"subject": "Security Code for Backstory",
|
|
"html": """
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Backstory Security Code</title>
|
|
<style>
|
|
body {{
|
|
font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
line-height: 1.6;
|
|
color: #2E2E2E;
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: #D3CDBF;
|
|
}}
|
|
.container {{
|
|
max-width: 600px;
|
|
margin: 40px auto;
|
|
background-color: #FFFFFF;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
box-shadow: 0 4px 12px rgba(26, 37, 54, 0.15);
|
|
}}
|
|
.header {{
|
|
background: linear-gradient(135deg, #1A2536 0%, #4A7A7D 100%);
|
|
color: #D3CDBF;
|
|
padding: 40px 30px;
|
|
text-align: center;
|
|
}}
|
|
.header h1 {{
|
|
margin: 0 0 10px 0;
|
|
font-size: 2rem;
|
|
font-weight: 500;
|
|
color: #D3CDBF;
|
|
}}
|
|
.content {{
|
|
padding: 40px 30px;
|
|
}}
|
|
.content h2 {{
|
|
margin: 0 0 20px 0;
|
|
color: #2E2E2E;
|
|
font-size: 1.75rem;
|
|
font-weight: 500;
|
|
}}
|
|
.device-info {{
|
|
background: rgba(74, 122, 125, 0.1);
|
|
border: 1px solid #4A7A7D;
|
|
padding: 16px;
|
|
border-radius: 4px;
|
|
margin: 20px 0;
|
|
color: #1A2536;
|
|
}}
|
|
.code {{
|
|
background: #D3CDBF;
|
|
border: 3px solid #D4A017;
|
|
padding: 24px;
|
|
text-align: center;
|
|
font-size: 2.25rem;
|
|
font-weight: 500;
|
|
letter-spacing: 12px;
|
|
color: #1A2536;
|
|
border-radius: 4px;
|
|
margin: 32px 0;
|
|
font-family: 'Roboto', 'Courier New', monospace;
|
|
}}
|
|
.footer {{
|
|
background: #D3CDBF;
|
|
padding: 30px;
|
|
text-align: center;
|
|
font-size: 0.875rem;
|
|
color: #1A2536;
|
|
border-top: 1px solid rgba(26, 37, 54, 0.1);
|
|
}}
|
|
.warning {{
|
|
background: rgba(212, 160, 23, 0.1);
|
|
border: 1px solid #D4A017;
|
|
color: #2E2E2E;
|
|
padding: 16px;
|
|
border-radius: 4px;
|
|
margin: 24px 0;
|
|
}}
|
|
.warning strong {{
|
|
color: #1A2536;
|
|
}}
|
|
.expiry-info {{
|
|
background: rgba(74, 122, 125, 0.1);
|
|
border: 1px solid #4A7A7D;
|
|
color: #1A2536;
|
|
padding: 12px;
|
|
border-radius: 4px;
|
|
margin: 16px 0;
|
|
font-size: 0.875rem;
|
|
text-align: center;
|
|
}}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="header">
|
|
<h1>🔐 Backstory Security Code</h1>
|
|
<p>Hi {user_name}</p>
|
|
</div>
|
|
<div class="content">
|
|
<h2>New device login detected</h2>
|
|
|
|
<div class="device-info">
|
|
<strong>Device Details:</strong><br>
|
|
<strong>Name:</strong> {device_name}<br>
|
|
<strong>IP Address:</strong> {ip_address}<br>
|
|
<strong>Time:</strong> {login_time}
|
|
</div>
|
|
|
|
<p>Please enter this security code to complete your login:</p>
|
|
|
|
<div class="code">{mfa_code}</div>
|
|
|
|
<div class="expiry-info">
|
|
⏱️ This code will expire in 10 minutes
|
|
</div>
|
|
|
|
<div class="warning">
|
|
<strong>⚠️ Important Security Notice:</strong><br>
|
|
If you didn't attempt to log in from this device, please:
|
|
<ul style="margin: 12px 0; padding-left: 20px;">
|
|
<li>Change your password immediately</li>
|
|
<li>Review your account activity</li>
|
|
<li>Contact our support team</li>
|
|
</ul>
|
|
Never share this code with anyone, including Backstory support.
|
|
</div>
|
|
</div>
|
|
<div class="footer">
|
|
<p><strong>This email was sent to:</strong> {to_email}</p>
|
|
<p>For security questions, please contact our support team immediately.</p>
|
|
<p>© 2025 Backstory. All rights reserved.</p>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
""",
|
|
},
|
|
"password_reset": {
|
|
"subject": "Reset your Backstory password",
|
|
"html": """
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Password Reset</title>
|
|
<style>
|
|
body {{
|
|
font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
line-height: 1.6;
|
|
color: #2E2E2E;
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: #D3CDBF;
|
|
}}
|
|
.container {{
|
|
max-width: 600px;
|
|
margin: 40px auto;
|
|
background-color: #FFFFFF;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
box-shadow: 0 4px 12px rgba(26, 37, 54, 0.15);
|
|
}}
|
|
.header {{
|
|
background: linear-gradient(135deg, #4A7A7D 0%, #1A2536 100%);
|
|
color: #D3CDBF;
|
|
padding: 40px 30px;
|
|
text-align: center;
|
|
}}
|
|
.header h1 {{
|
|
margin: 0 0 10px 0;
|
|
font-size: 2rem;
|
|
font-weight: 500;
|
|
color: #D3CDBF;
|
|
}}
|
|
.content {{
|
|
padding: 40px 30px;
|
|
}}
|
|
.content h2 {{
|
|
margin: 0 0 20px 0;
|
|
color: #2E2E2E;
|
|
font-size: 1.75rem;
|
|
font-weight: 500;
|
|
}}
|
|
.button {{
|
|
display: inline-block;
|
|
background: #D4A017;
|
|
color: #FFFFFF;
|
|
padding: 16px 32px;
|
|
text-decoration: none;
|
|
border-radius: 4px;
|
|
font-weight: 500;
|
|
margin: 24px 0;
|
|
font-size: 1rem;
|
|
transition: background-color 0.3s ease;
|
|
}}
|
|
.button:hover {{
|
|
background: rgba(212, 160, 23, 0.8);
|
|
}}
|
|
.footer {{
|
|
background: #D3CDBF;
|
|
padding: 30px;
|
|
text-align: center;
|
|
font-size: 0.875rem;
|
|
color: #1A2536;
|
|
border-top: 1px solid rgba(26, 37, 54, 0.1);
|
|
}}
|
|
.security-note {{
|
|
background: rgba(212, 160, 23, 0.1);
|
|
border: 1px solid #D4A017;
|
|
padding: 16px;
|
|
border-radius: 4px;
|
|
margin: 24px 0;
|
|
color: #2E2E2E;
|
|
}}
|
|
.security-note strong {{
|
|
color: #1A2536;
|
|
}}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="header">
|
|
<h1>🔑 Password Reset</h1>
|
|
<p>Reset your password for Backstory</p>
|
|
</div>
|
|
<div class="content">
|
|
<h2>Reset your password</h2>
|
|
<p>We received a request to reset your password. Click the button below to create a new password:</p>
|
|
|
|
<div style="text-align: center; margin: 32px 0;">
|
|
<a href="{reset_link}" class="button">Reset Password</a>
|
|
</div>
|
|
|
|
<div class="security-note">
|
|
<strong>Security Information:</strong><br>
|
|
This link will expire in 1 hour for security reasons. If you didn't request a password reset, please ignore this email and your password will remain unchanged.
|
|
</div>
|
|
</div>
|
|
<div class="footer">
|
|
<p><strong>This email was sent to:</strong> {to_email}</p>
|
|
<p>If you have any questions, please contact our support team.</p>
|
|
<p>© 2025 Backstory. All rights reserved.</p>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
""",
|
|
},
|
|
}
|