matt
/
monacousa-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix email template compatibility and enhance user dashboard
Build And Push Image / docker (push) Successful in 3m20s Details 

- Convert all email templates to table-based layouts for compatibility with Outlook, Gmail, Apple Mail, etc.
- Use only inline CSS and email-safe properties
- Fix welcome.hbs, verification.hbs, password-reset.hbs, dues-reminder.hbs, test.hbs templates
- Enhanced user dashboard with complete member information (Member ID, registration date, dues status, etc.)
- Added proper loading states and error handling for member data
- Improved member profile page with comprehensive information display
- Fixed missing wiring information in user and profile screens as requested
This commit is contained in:
Matt 2025-08-11 16:26:51 +02:00
parent c12b88072f
commit ea6a722364
6 changed files with 1189 additions and 939 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
pages/dashboard/user.vue
View File

@ -102,17 +102,69 @@
Member Information
</v-card-title>
<v-card-text class="pa-4">
<v-list>
<v-skeleton-loader v-if="pending" type="list-item-three-line"></v-skeleton-loader>
<div v-else-if="error" class="text-error text-center pa-4">
<v-icon size="48" class="mb-2">mdi-alert-circle</v-icon>
<div>Failed to load member information</div>
</div>
<v-list v-else>
<v-list-item>
<v-list-item-content>
<v-list-item-title>Member ID</v-list-item-title>
<v-list-item-subtitle>
<v-chip color="primary" size="small" variant="outlined">
{{ memberInfo?.memberId || 'Not assigned' }}
</v-chip>
</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
<v-list-item>
<v-list-item-content>
<v-list-item-title>Name</v-list-item-title>
<v-list-item-subtitle>{{ user?.name || 'Not provided' }}</v-list-item-subtitle>
<v-list-item-subtitle>{{ memberInfo?.fullName || 'Not provided' }}</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
<v-list-item>
<v-list-item-content>
<v-list-item-title>Email</v-list-item-title>
<v-list-item-subtitle>{{ user?.email || 'Not provided' }}</v-list-item-subtitle>
<v-list-item-subtitle>{{ memberInfo?.email || 'Not provided' }}</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
<v-list-item>
<v-list-item-content>
<v-list-item-title>Phone</v-list-item-title>
<v-list-item-subtitle>{{ memberInfo?.phone || 'Not provided' }}</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
<v-list-item>
<v-list-item-content>
<v-list-item-title>Nationality</v-list-item-title>
<v-list-item-subtitle>{{ memberInfo?.nationality || 'Not provided' }}</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
<v-list-item>
<v-list-item-content>
<v-list-item-title>Member Since</v-list-item-title>
<v-list-item-subtitle>{{ memberInfo?.memberSince || 'Not provided' }}</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
<v-list-item>
<v-list-item-content>
<v-list-item-title>Dues Status</v-list-item-title>
<v-list-item-subtitle>
<v-chip
:color="memberInfo?.duesStatus === 'Paid' ? 'success' : 'warning'"
size="small"
>
{{ memberInfo?.duesStatus || 'Unknown' }}
</v-chip>
</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
<v-list-item>
<v-list-item-content>
<v-list-item-title>Last Payment</v-list-item-title>
<v-list-item-subtitle>{{ memberInfo?.lastPayment || 'No payment recorded' }}</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
<v-list-item>
@ -156,6 +208,8 @@
</template>
<script setup lang="ts">
import type { Member } from '~/utils/types';
definePageMeta({
layout: 'dashboard',
middleware: 'auth'
@ -163,6 +217,31 @@ definePageMeta({
const { firstName, user, userTier } = useAuth();
// Fetch complete member data
const { data: memberData, pending, error } = await useFetch<{ success: boolean; member: Member }>('/api/auth/session', {
server: false
});
const member = computed(() => memberData.value?.member);
// Format member information for display
const memberInfo = computed(() => {
if (!member.value) return null;
return {
memberId: member.value.member_id || 'Not assigned',
fullName: member.value.FullName || `${member.value.first_name || ''} ${member.value.last_name || ''}`.trim(),
email: member.value.email || 'Not provided',
phone: member.value.FormattedPhone || member.value.phone || 'Not provided',
nationality: member.value.nationality || 'Not provided',
memberSince: member.value.member_since ? new Date(member.value.member_since).toLocaleDateString() : 'Not provided',
duesStatus: member.value.current_year_dues_paid === 'true' ? 'Paid' : 'Outstanding',
membershipStatus: member.value.membership_status || 'Active',
lastPayment: member.value.membership_date_paid ? new Date(member.value.membership_date_paid).toLocaleDateString() : 'No payment recorded',
dueDate: member.value.payment_due_date ? new Date(member.value.payment_due_date).toLocaleDateString() : 'N/A'
};
});
// Navigation methods (placeholder implementations)
const navigateToProfile = () => {
navigateTo('/dashboard/profile');
@ -186,8 +265,9 @@ I need assistance with:
[Please describe your issue]
Member: ${user.value?.name || 'Not provided'}
Email: ${user.value?.email || 'Not provided'}
Member ID: ${memberInfo.value?.memberId || 'Not provided'}
Name: ${memberInfo.value?.fullName || 'Not provided'}
Email: ${memberInfo.value?.email || 'Not provided'}
Thank you!`);

423
server/templates/dues-reminder.hbs
View File

@ -1,190 +1,249 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Membership Dues Reminder - MonacoUSA</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
color: #333;
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #f4f4f4;
}
.email-container {
background: white;
padding: 30px;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.header {
text-align: center;
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 2px solid #a31515;
}
.logo {
width: 100px;
height: 100px;
margin-bottom: 20px;
}
.title {
color: #a31515;
font-size: 28px;
font-weight: bold;
margin: 0;
}
.subtitle {
color: #666;
font-size: 16px;
margin: 10px 0 0 0;
}
.content {
margin-bottom: 30px;
}
.greeting {
font-size: 20px;
color: #a31515;
margin-bottom: 20px;
}
.dues-info {
background: rgba(163, 21, 21, 0.05);
padding: 20px;
border-radius: 8px;
border: 1px solid rgba(163, 21, 21, 0.1);
margin: 20px 0;
}
.dues-info h3 {
color: #a31515;
margin: 0 0 15px 0;
}
.amount {
font-size: 24px;
font-weight: bold;
color: #a31515;
text-align: center;
margin: 15px 0;
}
.payment-details {
background: #f8f9fa;
padding: 20px;
border-radius: 8px;
border-left: 4px solid #a31515;
margin: 20px 0;
}
.payment-details h3 {
color: #a31515;
margin: 0 0 15px 0;
}
.footer {
text-align: center;
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid #eee;
color: #666;
font-size: 14px;
}
.link {
color: #a31515;
text-decoration: none;
}
.link:hover {
text-decoration: underline;
}
@media (max-width: 600px) {
body {
padding: 10px;
}
.email-container {
padding: 20px;
}
.title {
font-size: 24px;
}
}
</style>
</head>
<body>
<div class="email-container">
<div class="header">
<img src="{{logoUrl}}" alt="MonacoUSA" class="logo">
<h1 class="title">Membership Dues Reminder</h1>
<p class="subtitle">Monaco - United States Association</p>
</div>
<div class="content">
<div class="greeting">
Dear {{firstName}} {{lastName}},
</div>
<p>This is a friendly reminder that your annual membership dues for the MonacoUSA Association are due.</p>
<div class="dues-info">
<h3>💳 Payment Due</h3>
<div class="amount">€{{amount}}</div>
<p><strong>Due Date:</strong> {{dueDate}}</p>
</div>
{{#if iban}}
<div class="payment-details">
<h3>🏦 Payment Instructions</h3>
<p><strong>Bank Transfer Details:</strong></p>
<ul>
<li><strong>IBAN:</strong> {{iban}}</li>
{{#if accountHolder}}<li><strong>Account Holder:</strong> {{accountHolder}}</li>{{/if}}
<li><strong>Amount:</strong> €{{amount}}</li>
<li><strong>Reference:</strong> Membership Dues - {{firstName}} {{lastName}}</li>
</ul>
<p><em>Please include your name in the payment reference to ensure proper crediting.</em></p>
</div>
{{/if}}
<h3>🌟 Why Your Membership Matters</h3>
<p>Your membership helps us:</p>
<ul>
<li>Connect Monaco and the United States communities</li>
<li>Organize cultural events and networking opportunities</li>
<li>Support charitable causes in both regions</li>
<li>Maintain our digital platform and services</li>
</ul>
<p>If you have already made your payment, please disregard this reminder. It may take a few days for payments to be processed.</p>
<p>If you have any questions about your membership or payment, please don't hesitate to contact us.</p>
</div>
<div class="footer">
<p><strong>MonacoUSA Association</strong><br>
Connecting Monaco and the United States</p>
<p>
<a href="https://portal.monacousa.org" class="link">Portal</a> |
<a href="mailto:info@monacousa.org" class="link">Contact Us</a> |
<a href="https://monacousa.org" class="link">Website</a>
</p>
</div>
</div>
<body style="margin: 0; padding: 0; font-family: Arial, sans-serif; background-color: #f4f4f4;">
<!-- Main Container -->
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color: #f4f4f4; padding: 20px 0;">
<tr>
<td align="center">
<!-- Email Container -->
<table width="600" cellpadding="0" cellspacing="0" border="0" style="background-color: #ffffff; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.1);">
<!-- Header with Monaco Red Background -->
<tr>
<td style="background-color: #a31515; padding: 30px; text-align: center;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center">
<img src="{{logoUrl}}" alt="MonacoUSA" width="80" height="80" style="border-radius: 8px; margin-bottom: 15px;">
<h1 style="color: #ffffff; font-size: 28px; font-weight: bold; margin: 0 0 8px 0;">Membership Dues Reminder</h1>
<p style="color: #ffffff; font-size: 16px; margin: 0; opacity: 0.9;">Monaco - United States Association</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- Main Content -->
<tr>
<td style="padding: 40px 30px;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<!-- Greeting -->
<tr>
<td style="padding-bottom: 20px;">
<h2 style="color: #a31515; font-size: 20px; font-weight: bold; margin: 0;">Dear {{firstName}} {{lastName}},</h2>
</td>
</tr>
<!-- Main Message -->
<tr>
<td style="padding-bottom: 30px;">
<p style="color: #333333; font-size: 16px; line-height: 1.6; margin: 0;">
This is a friendly reminder that your annual membership dues for the MonacoUSA Association are due.
</p>
</td>
</tr>
<!-- Payment Due Box -->
<tr>
<td style="padding-bottom: 30px;">
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color: #fff3cd; border: 1px solid #ffeaa7; border-radius: 6px;">
<tr>
<td style="padding: 25px; text-align: center;">
<h3 style="color: #856404; font-size: 18px; font-weight: bold; margin: 0 0 15px 0;">💳 Payment Due</h3>
<div style="font-size: 32px; font-weight: bold; color: #a31515; margin: 10px 0;">€{{amount}}</div>
<p style="color: #333333; font-size: 16px; font-weight: bold; margin: 10px 0 0 0;">Due Date: {{dueDate}}</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- Payment Instructions -->
{{#if iban}}
<tr>
<td style="padding-bottom: 30px;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="background-color: #e3f2fd; border-left: 4px solid #2196f3; padding: 20px; border-radius: 4px;">
<h3 style="color: #1976d2; font-size: 18px; font-weight: bold; margin: 0 0 15px 0;">🏦 Payment Instructions</h3>
<p style="color: #333333; font-size: 16px; font-weight: bold; margin: 0 0 15px 0;">Bank Transfer Details:</p>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="25%" style="vertical-align: top; padding: 5px 10px 5px 0;">
<strong style="color: #333333;">IBAN:</strong>
</td>
<td style="padding: 5px 0;">
<span style="color: #333333; font-family: monospace;">{{iban}}</span>
</td>
</tr>
{{#if accountHolder}}
<tr>
<td width="25%" style="vertical-align: top; padding: 5px 10px 5px 0;">
<strong style="color: #333333;">Account Holder:</strong>
</td>
<td style="padding: 5px 0;">
<span style="color: #333333;">{{accountHolder}}</span>
</td>
</tr>
{{/if}}
<tr>
<td width="25%" style="vertical-align: top; padding: 5px 10px 5px 0;">
<strong style="color: #333333;">Amount:</strong>
</td>
<td style="padding: 5px 0;">
<span style="color: #333333;">€{{amount}}</span>
</td>
</tr>
<tr>
<td width="25%" style="vertical-align: top; padding: 5px 10px 5px 0;">
<strong style="color: #333333;">Reference:</strong>
</td>
<td style="padding: 5px 0;">
<span style="color: #333333;">Membership Dues - {{firstName}} {{lastName}}</span>
</td>
</tr>
</table>
<p style="color: #666666; font-size: 14px; font-style: italic; margin: 15px 0 0 0;">
Please include your name in the payment reference to ensure proper crediting.
</p>
</td>
</tr>
</table>
</td>
</tr>
{{/if}}
<!-- Why Your Membership Matters -->
<tr>
<td style="padding-bottom: 30px;">
<h3 style="color: #a31515; font-size: 18px; font-weight: bold; margin: 0 0 15px 0;">🌟 Why Your Membership Matters</h3>
<p style="color: #333333; font-size: 16px; line-height: 1.6; margin: 0 0 10px 0;">Your membership helps us:</p>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="padding: 5px 0;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="20" style="vertical-align: top; padding-right: 10px;">
<span style="color: #a31515; font-weight: bold;">•</span>
</td>
<td>
<p style="margin: 0; color: #333333; font-size: 16px;">
Connect Monaco and the United States communities
</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding: 5px 0;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="20" style="vertical-align: top; padding-right: 10px;">
<span style="color: #a31515; font-weight: bold;">•</span>
</td>
<td>
<p style="margin: 0; color: #333333; font-size: 16px;">
Organize cultural events and networking opportunities
</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding: 5px 0;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="20" style="vertical-align: top; padding-right: 10px;">
<span style="color: #a31515; font-weight: bold;">•</span>
</td>
<td>
<p style="margin: 0; color: #333333; font-size: 16px;">
Support charitable causes in both regions
</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding: 5px 0;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="20" style="vertical-align: top; padding-right: 10px;">
<span style="color: #a31515; font-weight: bold;">•</span>
</td>
<td>
<p style="margin: 0; color: #333333; font-size: 16px;">
Maintain our digital platform and services
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- Payment Notice -->
<tr>
<td style="padding-bottom: 30px;">
<p style="color: #333333; font-size: 16px; line-height: 1.6; margin: 0 0 15px 0;">
If you have already made your payment, please disregard this reminder. It may take a few days for payments to be processed.
</p>
<p style="color: #333333; font-size: 16px; line-height: 1.6; margin: 0;">
If you have any questions about your membership or payment, please don't hesitate to contact us.
</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- Footer -->
<tr>
<td style="background-color: #f8f9fa; padding: 30px; text-align: center; border-top: 1px solid #e9ecef;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<h4 style="color: #333333; font-size: 18px; font-weight: bold; margin: 0 0 8px 0;">MonacoUSA Association</h4>
<p style="color: #666666; font-size: 14px; margin: 0 0 15px 0;">Connecting Monaco and the United States</p>
<!-- Links -->
<table cellpadding="0" cellspacing="0" border="0" style="margin: 0 auto;">
<tr>
<td style="padding: 0 10px;">
<a href="https://portal.monacousa.org" style="color: #a31515; text-decoration: none; font-size: 14px;">Portal</a>
</td>
<td style="padding: 0 10px; color: #cccccc;">|</td>
<td style="padding: 0 10px;">
<a href="mailto:info@monacousa.org" style="color: #a31515; text-decoration: none; font-size: 14px;">Contact Us</a>
</td>
<td style="padding: 0 10px; color: #cccccc;">|</td>
<td style="padding: 0 10px;">
<a href="https://monacousa.org" style="color: #a31515; text-decoration: none; font-size: 14px;">Website</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

286
server/templates/password-reset.hbs
View File

@ -1,167 +1,135 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Password Reset - MonacoUSA</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
color: #333;
margin: 0;
padding: 20px;
background-image: url('{{baseUrl}}/monaco_high_res.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
min-height: 100vh;
}
.email-container {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
padding: 40px;
border-radius: 12px;
box-shadow: 0 8px 25px rgba(163, 21, 21, 0.15);
max-width: 600px;
margin: 20px auto;
border: 1px solid rgba(163, 21, 21, 0.1);
}
.header {
text-align: center;
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 2px solid #a31515;
}
.logo {
width: 100px;
height: 100px;
margin-bottom: 20px;
}
.title {
color: #a31515;
font-size: 28px;
font-weight: bold;
margin: 0;
}
.subtitle {
color: #666;
font-size: 16px;
margin: 10px 0 0 0;
}
.content {
margin-bottom: 30px;
}
.greeting {
font-size: 20px;
color: #a31515;
margin-bottom: 20px;
}
.reset-button {
display: inline-block;
padding: 15px 30px;
background: linear-gradient(135deg, #a31515 0%, #c41e1e 100%);
color: white;
text-decoration: none;
border-radius: 8px;
font-weight: bold;
font-size: 16px;
text-align: center;
margin: 20px 0;
transition: all 0.3s ease;
}
.reset-button:hover {
background: linear-gradient(135deg, #8b1212 0%, #a31515 100%);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(163, 21, 21, 0.3);
}
.footer {
text-align: center;
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid #eee;
color: #666;
font-size: 14px;
}
.link {
color: #a31515;
text-decoration: none;
}
.link:hover {
text-decoration: underline;
}
@media (max-width: 600px) {
body {
padding: 10px;
}
.email-container {
padding: 20px;
}
.title {
font-size: 24px;
}
.reset-button {
display: block;
text-align: center;
}
}
</style>
</head>
<body>
<div class="email-container">
<div class="header">
<img src="{{logoUrl}}" alt="MonacoUSA" class="logo">
<h1 class="title">Password Reset</h1>
<p class="subtitle">Monaco - United States Association</p>
</div>
<div class="content">
<div class="greeting">
Dear {{firstName}},
</div>
<p>We received a request to reset your password for your MonacoUSA Portal account.</p>
<div style="text-align: center;">
<a href="{{resetLink}}" class="reset-button">
🔒 Reset Your Password
</a>
</div>
<p><em>This password reset link will expire in 1 hour for security purposes.</em></p>
<p>If you didn't request this password reset, please ignore this email. Your password will remain unchanged.</p>
<p>For security reasons, this link can only be used once.</p>
</div>
<div class="footer">
<p><strong>MonacoUSA Association</strong><br>
Connecting Monaco and the United States</p>
<p>
<a href="https://portal.monacousa.org" class="link">Portal</a> |
<a href="mailto:info@monacousa.org" class="link">Contact Us</a> |
<a href="https://monacousa.org" class="link">Website</a>
</p>
</div>
</div>
<body style="margin: 0; padding: 0; font-family: Arial, sans-serif; background-color: #f4f4f4;">
<!-- Main Container -->
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color: #f4f4f4; padding: 20px 0;">
<tr>
<td align="center">
<!-- Email Container -->
<table width="600" cellpadding="0" cellspacing="0" border="0" style="background-color: #ffffff; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.1);">
<!-- Header with Monaco Red Background -->
<tr>
<td style="background-color: #a31515; padding: 30px; text-align: center;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center">
<img src="{{logoUrl}}" alt="MonacoUSA" width="80" height="80" style="border-radius: 8px; margin-bottom: 15px;">
<h1 style="color: #ffffff; font-size: 28px; font-weight: bold; margin: 0 0 8px 0;">Password Reset</h1>
<p style="color: #ffffff; font-size: 16px; margin: 0; opacity: 0.9;">Monaco - United States Association</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- Main Content -->
<tr>
<td style="padding: 40px 30px;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<!-- Greeting -->
<tr>
<td style="padding-bottom: 20px;">
<h2 style="color: #a31515; font-size: 20px; font-weight: bold; margin: 0;">Dear {{firstName}},</h2>
</td>
</tr>
<!-- Main Message -->
<tr>
<td style="padding-bottom: 30px;">
<p style="color: #333333; font-size: 16px; line-height: 1.6; margin: 0;">
We received a request to reset your password for your MonacoUSA Portal account.
</p>
</td>
</tr>
<!-- Reset Button -->
<tr>
<td style="padding-bottom: 30px; text-align: center;">
<table cellpadding="0" cellspacing="0" border="0" style="margin: 0 auto;">
<tr>
<td style="background-color: #a31515; padding: 15px 30px; border-radius: 6px;">
<a href="{{resetLink}}" style="color: #ffffff; text-decoration: none; font-weight: bold; font-size: 16px; display: block;">
🔒 Reset Your Password
</a>
</td>
</tr>
</table>
</td>
</tr>
<!-- Important Info -->
<tr>
<td style="padding-bottom: 30px;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="background-color: #fff3cd; border-left: 4px solid #ffc107; padding: 20px; border-radius: 4px;">
<p style="color: #856404; font-size: 14px; font-style: italic; margin: 0 0 10px 0;">
<strong>Important:</strong> This password reset link will expire in 1 hour for security purposes.
</p>
<p style="color: #856404; font-size: 14px; margin: 0;">
For security reasons, this link can only be used once.
</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- Security Notice -->
<tr>
<td style="padding-bottom: 20px;">
<p style="color: #333333; font-size: 16px; line-height: 1.6; margin: 0;">
If you didn't request this password reset, please ignore this email. Your password will remain unchanged.
</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- Footer -->
<tr>
<td style="background-color: #f8f9fa; padding: 30px; text-align: center; border-top: 1px solid #e9ecef;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<h4 style="color: #333333; font-size: 18px; font-weight: bold; margin: 0 0 8px 0;">MonacoUSA Association</h4>
<p style="color: #666666; font-size: 14px; margin: 0 0 15px 0;">Connecting Monaco and the United States</p>
<!-- Links -->
<table cellpadding="0" cellspacing="0" border="0" style="margin: 0 auto;">
<tr>
<td style="padding: 0 10px;">
<a href="https://portal.monacousa.org" style="color: #a31515; text-decoration: none; font-size: 14px;">Portal</a>
</td>
<td style="padding: 0 10px; color: #cccccc;">|</td>
<td style="padding: 0 10px;">
<a href="mailto:info@monacousa.org" style="color: #a31515; text-decoration: none; font-size: 14px;">Contact Us</a>
</td>
<td style="padding: 0 10px; color: #cccccc;">|</td>
<td style="padding: 0 10px;">
<a href="https://monacousa.org" style="color: #a31515; text-decoration: none; font-size: 14px;">Website</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

543
server/templates/test.hbs
View File

@ -1,224 +1,335 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>SMTP Test Email</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
color: #333;
margin: 0;
padding: 20px;
background-image: url('{{baseUrl}}/monaco_high_res.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
min-height: 100vh;
}
.email-container {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
padding: 40px;
border-radius: 12px;
box-shadow: 0 8px 25px rgba(163, 21, 21, 0.15);
max-width: 600px;
margin: 20px auto;
border: 1px solid rgba(163, 21, 21, 0.1);
}
.header {
text-align: center;
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 2px solid #a31515;
}
.logo {
width: 100px;
height: 100px;
margin-bottom: 20px;
}
.title {
color: #a31515;
font-size: 28px;
font-weight: bold;
margin: 0;
}
.subtitle {
color: #666;
font-size: 16px;
margin: 10px 0 0 0;
}
.success-badge {
background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
color: white;
padding: 10px 20px;
border-radius: 25px;
display: inline-block;
font-weight: bold;
margin: 20px 0;
}
.test-details {
background: #f8f9fa;
padding: 20px;
border-radius: 8px;
border-left: 4px solid #a31515;
margin: 20px 0;
}
.test-details h3 {
color: #a31515;
margin: 0 0 15px 0;
}
.detail-row {
display: flex;
margin-bottom: 8px;
padding: 5px 0;
border-bottom: 1px solid #eee;
}
.detail-label {
font-weight: bold;
min-width: 120px;
color: #666;
}
.detail-value {
color: #333;
font-family: 'Courier New', monospace;
flex: 1;
}
.footer {
text-align: center;
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid #eee;
color: #666;
font-size: 14px;
}
.link {
color: #a31515;
text-decoration: none;
}
.link:hover {
text-decoration: underline;
}
@media (max-width: 600px) {
body {
padding: 10px;
}
.email-container {
padding: 20px;
}
.title {
font-size: 24px;
}
.detail-row {
flex-direction: column;
}
.detail-label {
min-width: auto;
margin-bottom: 5px;
}
}
</style>
</head>
<body>
<div class="email-container">
<div class="header">
<img src="{{logoUrl}}" alt="MonacoUSA" class="logo">
<h1 class="title">SMTP Test Email</h1>
<p class="subtitle">Email Configuration Test</p>
</div>
<div style="text-align: center;">
<div class="success-badge">
✅ SMTP Configuration Working!
</div>
</div>
<p>Congratulations! This test email confirms that your SMTP email configuration is working correctly. The MonacoUSA Portal email system is now ready to send emails.</p>
<div class="test-details">
<h3>📊 Test Configuration Details</h3>
<div class="detail-row">
<div class="detail-label">Test Time:</div>
<div class="detail-value">{{testTime}}</div>
</div>
<div class="detail-row">
<div class="detail-label">SMTP Host:</div>
<div class="detail-value">{{smtpHost}}</div>
</div>
<div class="detail-row">
<div class="detail-label">From Address:</div>
<div class="detail-value">{{fromAddress}}</div>
</div>
<div class="detail-row">
<div class="detail-label">Email Type:</div>
<div class="detail-value">SMTP Configuration Test</div>
</div>
</div>
<h3>🎯 What This Means</h3>
<ul>
<li><strong>✅ Connection Established:</strong> Successfully connected to your SMTP server</li>
<li><strong>✅ Authentication Passed:</strong> SMTP credentials are correct and working</li>
<li><strong>✅ Email Delivery:</strong> Emails can be sent from the portal</li>
<li><strong>✅ Template System:</strong> Email templates are loading and rendering correctly</li>
</ul>
<h3>📧 Available Email Types</h3>
<p>Your portal can now send the following types of emails:</p>
<ul>
<li><strong>Welcome Emails:</strong> New member registration confirmations</li>
<li><strong>Email Verification:</strong> Account activation links</li>
<li><strong>Password Reset:</strong> Secure password reset instructions</li>
<li><strong>Dues Reminders:</strong> Membership payment notifications</li>
<li><strong>General Notifications:</strong> Administrative communications</li>
</ul>
<div style="background: rgba(40, 167, 69, 0.1); padding: 15px; border-radius: 8px; margin: 20px 0; border-left: 4px solid #28a745;">
<p style="margin: 0; color: #155724;">
<strong>✨ Success!</strong> Your email system is fully configured and operational.
All automated emails from the MonacoUSA Portal will now be delivered successfully.
</p>
</div>
<div class="footer">
<p><strong>MonacoUSA Portal</strong><br>
Email System Configuration Test</p>
<p>
<a href="https://portal.monacousa.org" class="link">Portal</a> |
<a href="mailto:admin@monacousa.org" class="link">Admin Support</a>
</p>
<p style="margin-top: 20px; font-size: 12px; color: #999;">
This is an automated test email to verify SMTP configuration.<br>
Generated by MonacoUSA Portal Email System
</p>
</div>
</div>
<body style="margin: 0; padding: 0; font-family: Arial, sans-serif; background-color: #f4f4f4;">
<!-- Main Container -->
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color: #f4f4f4; padding: 20px 0;">
<tr>
<td align="center">
<!-- Email Container -->
<table width="600" cellpadding="0" cellspacing="0" border="0" style="background-color: #ffffff; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.1);">
<!-- Header with Monaco Red Background -->
<tr>
<td style="background-color: #a31515; padding: 30px; text-align: center;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center">
<img src="{{logoUrl}}" alt="MonacoUSA" width="80" height="80" style="border-radius: 8px; margin-bottom: 15px;">
<h1 style="color: #ffffff; font-size: 28px; font-weight: bold; margin: 0 0 8px 0;">SMTP Test Email</h1>
<p style="color: #ffffff; font-size: 16px; margin: 0; opacity: 0.9;">Email Configuration Test</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- Main Content -->
<tr>
<td style="padding: 40px 30px;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<!-- Success Badge -->
<tr>
<td style="padding-bottom: 30px; text-align: center;">
<table cellpadding="0" cellspacing="0" border="0" style="margin: 0 auto;">
<tr>
<td style="background-color: #28a745; color: #ffffff; padding: 10px 20px; border-radius: 20px; font-weight: bold;">
✅ SMTP Configuration Working!
</td>
</tr>
</table>
</td>
</tr>
<!-- Main Message -->
<tr>
<td style="padding-bottom: 30px;">
<p style="color: #333333; font-size: 16px; line-height: 1.6; margin: 0;">
Congratulations! This test email confirms that your SMTP email configuration is working correctly.
The MonacoUSA Portal email system is now ready to send emails.
</p>
</td>
</tr>
<!-- Test Configuration Details -->
<tr>
<td style="padding-bottom: 30px;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="background-color: #f8f9fa; border-left: 4px solid #a31515; padding: 20px; border-radius: 4px;">
<h3 style="color: #a31515; font-size: 18px; font-weight: bold; margin: 0 0 15px 0;">📊 Test Configuration Details</h3>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="25%" style="vertical-align: top; padding: 5px 10px 5px 0;">
<strong style="color: #333333;">Test Time:</strong>
</td>
<td style="padding: 5px 0; color: #333333; font-family: monospace;">
{{testTime}}
</td>
</tr>
<tr>
<td width="25%" style="vertical-align: top; padding: 5px 10px 5px 0;">
<strong style="color: #333333;">SMTP Host:</strong>
</td>
<td style="padding: 5px 0; color: #333333; font-family: monospace;">
{{smtpHost}}
</td>
</tr>
<tr>
<td width="25%" style="vertical-align: top; padding: 5px 10px 5px 0;">
<strong style="color: #333333;">From Address:</strong>
</td>
<td style="padding: 5px 0; color: #333333; font-family: monospace;">
{{fromAddress}}
</td>
</tr>
<tr>
<td width="25%" style="vertical-align: top; padding: 5px 10px 5px 0;">
<strong style="color: #333333;">Email Type:</strong>
</td>
<td style="padding: 5px 0; color: #333333;">
SMTP Configuration Test
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- What This Means -->
<tr>
<td style="padding-bottom: 30px;">
<h3 style="color: #a31515; font-size: 18px; font-weight: bold; margin: 0 0 15px 0;">🎯 What This Means</h3>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="padding: 5px 0;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="30" style="vertical-align: top; padding-right: 10px;">
<span style="color: #28a745; font-weight: bold; font-size: 16px;">✅</span>
</td>
<td>
<p style="margin: 0; color: #333333; font-size: 16px;">
<strong>Connection Established:</strong> Successfully connected to your SMTP server
</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding: 5px 0;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="30" style="vertical-align: top; padding-right: 10px;">
<span style="color: #28a745; font-weight: bold; font-size: 16px;">✅</span>
</td>
<td>
<p style="margin: 0; color: #333333; font-size: 16px;">
<strong>Authentication Passed:</strong> SMTP credentials are correct and working
</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding: 5px 0;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="30" style="vertical-align: top; padding-right: 10px;">
<span style="color: #28a745; font-weight: bold; font-size: 16px;">✅</span>
</td>
<td>
<p style="margin: 0; color: #333333; font-size: 16px;">
<strong>Email Delivery:</strong> Emails can be sent from the portal
</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding: 5px 0;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="30" style="vertical-align: top; padding-right: 10px;">
<span style="color: #28a745; font-weight: bold; font-size: 16px;">✅</span>
</td>
<td>
<p style="margin: 0; color: #333333; font-size: 16px;">
<strong>Template System:</strong> Email templates are loading and rendering correctly
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- Available Email Types -->
<tr>
<td style="padding-bottom: 30px;">
<h3 style="color: #a31515; font-size: 18px; font-weight: bold; margin: 0 0 15px 0;">📧 Available Email Types</h3>
<p style="color: #333333; font-size: 16px; line-height: 1.6; margin: 0 0 15px 0;">Your portal can now send the following types of emails:</p>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="padding: 5px 0;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="20" style="vertical-align: top; padding-right: 10px;">
<span style="color: #a31515; font-weight: bold;">•</span>
</td>
<td>
<p style="margin: 0; color: #333333; font-size: 16px;">
<strong>Welcome Emails:</strong> New member registration confirmations
</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding: 5px 0;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="20" style="vertical-align: top; padding-right: 10px;">
<span style="color: #a31515; font-weight: bold;">•</span>
</td>
<td>
<p style="margin: 0; color: #333333; font-size: 16px;">
<strong>Email Verification:</strong> Account activation links
</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding: 5px 0;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="20" style="vertical-align: top; padding-right: 10px;">
<span style="color: #a31515; font-weight: bold;">•</span>
</td>
<td>
<p style="margin: 0; color: #333333; font-size: 16px;">
<strong>Password Reset:</strong> Secure password reset instructions
</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding: 5px 0;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="20" style="vertical-align: top; padding-right: 10px;">
<span style="color: #a31515; font-weight: bold;">•</span>
</td>
<td>
<p style="margin: 0; color: #333333; font-size: 16px;">
<strong>Dues Reminders:</strong> Membership payment notifications
</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding: 5px 0;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="20" style="vertical-align: top; padding-right: 10px;">
<span style="color: #a31515; font-weight: bold;">•</span>
</td>
<td>
<p style="margin: 0; color: #333333; font-size: 16px;">
<strong>General Notifications:</strong> Administrative communications
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- Success Message -->
<tr>
<td style="padding-bottom: 20px;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="background-color: rgba(40, 167, 69, 0.1); border-left: 4px solid #28a745; padding: 15px; border-radius: 4px;">
<p style="color: #155724; font-size: 16px; font-weight: bold; margin: 0;">
✨ Success! Your email system is fully configured and operational.
All automated emails from the MonacoUSA Portal will now be delivered successfully.
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- Footer -->
<tr>
<td style="background-color: #f8f9fa; padding: 30px; text-align: center; border-top: 1px solid #e9ecef;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<h4 style="color: #333333; font-size: 18px; font-weight: bold; margin: 0 0 8px 0;">MonacoUSA Portal</h4>
<p style="color: #666666; font-size: 14px; margin: 0 0 15px 0;">Email System Configuration Test</p>
<!-- Links -->
<table cellpadding="0" cellspacing="0" border="0" style="margin: 0 auto;">
<tr>
<td style="padding: 0 10px;">
<a href="https://portal.monacousa.org" style="color: #a31515; text-decoration: none; font-size: 14px;">Portal</a>
</td>
<td style="padding: 0 10px; color: #cccccc;">|</td>
<td style="padding: 0 10px;">
<a href="mailto:admin@monacousa.org" style="color: #a31515; text-decoration: none; font-size: 14px;">Admin Support</a>
</td>
</tr>
</table>
<!-- Email Info -->
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-top: 20px;">
<tr>
<td style="padding-top: 15px; border-top: 1px solid #dddddd;">
<p style="color: #999999; font-size: 12px; margin: 0;">
This is an automated test email to verify SMTP configuration.<br>
Generated by MonacoUSA Portal Email System
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

281
server/templates/verification.hbs
View File

@ -1,165 +1,132 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Verify Your Email - MonacoUSA</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
color: #333;
margin: 0;
padding: 20px;
background-image: url('{{baseUrl}}/monaco_high_res.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
min-height: 100vh;
}
.email-container {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
padding: 40px;
border-radius: 12px;
box-shadow: 0 8px 25px rgba(163, 21, 21, 0.15);
max-width: 600px;
margin: 20px auto;
border: 1px solid rgba(163, 21, 21, 0.1);
}
.header {
text-align: center;
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 2px solid #a31515;
}
.logo {
width: 100px;
height: 100px;
margin-bottom: 20px;
}
.title {
color: #a31515;
font-size: 28px;
font-weight: bold;
margin: 0;
}
.subtitle {
color: #666;
font-size: 16px;
margin: 10px 0 0 0;
}
.content {
margin-bottom: 30px;
}
.greeting {
font-size: 20px;
color: #a31515;
margin-bottom: 20px;
}
.verify-button {
display: inline-block;
padding: 15px 30px;
background: linear-gradient(135deg, #a31515 0%, #c41e1e 100%);
color: white;
text-decoration: none;
border-radius: 8px;
font-weight: bold;
font-size: 16px;
text-align: center;
margin: 20px 0;
transition: all 0.3s ease;
}
.verify-button:hover {
background: linear-gradient(135deg, #8b1212 0%, #a31515 100%);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(163, 21, 21, 0.3);
}
.footer {
text-align: center;
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid #eee;
color: #666;
font-size: 14px;
}
.link {
color: #a31515;
text-decoration: none;
}
.link:hover {
text-decoration: underline;
}
@media (max-width: 600px) {
body {
padding: 10px;
}
.email-container {
padding: 20px;
}
.title {
font-size: 24px;
}
.verify-button {
display: block;
text-align: center;
}
}
</style>
</head>
<body>
<div class="email-container">
<div class="header">
<img src="{{logoUrl}}" alt="MonacoUSA" class="logo">
<h1 class="title">Email Verification</h1>
<p class="subtitle">Monaco - United States Association</p>
</div>
<div class="content">
<div class="greeting">
Dear {{firstName}},
</div>
<p>Please verify your email address to complete your MonacoUSA account setup.</p>
<div style="text-align: center;">
<a href="{{verificationLink}}" class="verify-button">
✉️ Verify Email Address
</a>
</div>
<p><em>This verification link will expire in 24 hours for security purposes.</em></p>
<p>If you didn't request this verification, please ignore this email.</p>
</div>
<div class="footer">
<p><strong>MonacoUSA Association</strong><br>
Connecting Monaco and the United States</p>
<p>
<a href="https://portal.monacousa.org" class="link">Portal</a> |
<a href="mailto:info@monacousa.org" class="link">Contact Us</a> |
<a href="https://monacousa.org" class="link">Website</a>
</p>
</div>
</div>
<body style="margin: 0; padding: 0; font-family: Arial, sans-serif; background-color: #f4f4f4;">
<!-- Main Container -->
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color: #f4f4f4; padding: 20px 0;">
<tr>
<td align="center">
<!-- Email Container -->
<table width="600" cellpadding="0" cellspacing="0" border="0" style="background-color: #ffffff; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.1);">
<!-- Header with Monaco Red Background -->
<tr>
<td style="background-color: #a31515; padding: 30px; text-align: center;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center">
<img src="{{logoUrl}}" alt="MonacoUSA" width="80" height="80" style="border-radius: 8px; margin-bottom: 15px;">
<h1 style="color: #ffffff; font-size: 28px; font-weight: bold; margin: 0 0 8px 0;">Email Verification</h1>
<p style="color: #ffffff; font-size: 16px; margin: 0; opacity: 0.9;">Monaco - United States Association</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- Main Content -->
<tr>
<td style="padding: 40px 30px;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<!-- Greeting -->
<tr>
<td style="padding-bottom: 20px;">
<h2 style="color: #a31515; font-size: 20px; font-weight: bold; margin: 0;">Dear {{firstName}},</h2>
</td>
</tr>
<!-- Main Message -->
<tr>
<td style="padding-bottom: 30px;">
<p style="color: #333333; font-size: 16px; line-height: 1.6; margin: 0;">
Please verify your email address to complete your MonacoUSA account setup.
</p>
</td>
</tr>
<!-- Verification Button -->
<tr>
<td style="padding-bottom: 30px; text-align: center;">
<table cellpadding="0" cellspacing="0" border="0" style="margin: 0 auto;">
<tr>
<td style="background-color: #a31515; padding: 15px 30px; border-radius: 6px;">
<a href="{{verificationLink}}" style="color: #ffffff; text-decoration: none; font-weight: bold; font-size: 16px; display: block;">
✉️ Verify Email Address
</a>
</td>
</tr>
</table>
</td>
</tr>
<!-- Important Info -->
<tr>
<td style="padding-bottom: 30px;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="background-color: #fff3cd; border-left: 4px solid #ffc107; padding: 20px; border-radius: 4px;">
<p style="color: #856404; font-size: 14px; font-style: italic; margin: 0;">
<strong>Important:</strong> This verification link will expire in 24 hours for security purposes.
</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- Security Notice -->
<tr>
<td style="padding-bottom: 20px;">
<p style="color: #333333; font-size: 16px; line-height: 1.6; margin: 0;">
If you didn't request this verification, please ignore this email.
</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- Footer -->
<tr>
<td style="background-color: #f8f9fa; padding: 30px; text-align: center; border-top: 1px solid #e9ecef;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<h4 style="color: #333333; font-size: 18px; font-weight: bold; margin: 0 0 8px 0;">MonacoUSA Association</h4>
<p style="color: #666666; font-size: 14px; margin: 0 0 15px 0;">Connecting Monaco and the United States</p>
<!-- Links -->
<table cellpadding="0" cellspacing="0" border="0" style="margin: 0 auto;">
<tr>
<td style="padding: 0 10px;">
<a href="https://portal.monacousa.org" style="color: #a31515; text-decoration: none; font-size: 14px;">Portal</a>
</td>
<td style="padding: 0 10px; color: #cccccc;">|</td>
<td style="padding: 0 10px;">
<a href="mailto:info@monacousa.org" style="color: #a31515; text-decoration: none; font-size: 14px;">Contact Us</a>
</td>
<td style="padding: 0 10px; color: #cccccc;">|</td>
<td style="padding: 0 10px;">
<a href="https://monacousa.org" style="color: #a31515; text-decoration: none; font-size: 14px;">Website</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

505
server/templates/welcome.hbs
View File

@ -1,228 +1,293 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Welcome to MonacoUSA</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
color: #333;
margin: 0;
padding: 20px;
background: linear-gradient(135deg, #a31515 0%, #8b1212 50%, #a31515 100%);
background-image: url('{{baseUrl}}/monaco_high_res.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
min-height: 100vh;
}
.email-container {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
padding: 40px;
border-radius: 12px;
box-shadow: 0 8px 25px rgba(163, 21, 21, 0.15);
max-width: 600px;
margin: 20px auto;
border: 1px solid rgba(163, 21, 21, 0.1);
}
.header {
text-align: center;
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 2px solid #a31515;
}
.logo {
width: 100px;
height: 100px;
margin-bottom: 20px;
}
.title {
color: #a31515;
font-size: 28px;
font-weight: bold;
margin: 0;
}
.subtitle {
color: #666;
font-size: 16px;
margin: 10px 0 0 0;
}
.content {
margin-bottom: 30px;
}
.greeting {
font-size: 20px;
color: #a31515;
margin-bottom: 20px;
}
.member-info {
background: #f8f9fa;
padding: 20px;
border-radius: 8px;
border-left: 4px solid #a31515;
margin: 20px 0;
}
.member-info h3 {
color: #a31515;
margin: 0 0 10px 0;
}
.verify-button {
display: inline-block;
padding: 15px 30px;
background: linear-gradient(135deg, #a31515 0%, #c41e1e 100%);
color: white;
text-decoration: none;
border-radius: 8px;
font-weight: bold;
font-size: 16px;
text-align: center;
margin: 20px 0;
transition: all 0.3s ease;
}
.verify-button:hover {
background: linear-gradient(135deg, #8b1212 0%, #a31515 100%);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(163, 21, 21, 0.3);
}
.payment-info {
background: rgba(163, 21, 21, 0.05);
padding: 20px;
border-radius: 8px;
border: 1px solid rgba(163, 21, 21, 0.1);
margin: 20px 0;
}
.payment-info h3 {
color: #a31515;
margin: 0 0 15px 0;
}
.footer {
text-align: center;
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid #eee;
color: #666;
font-size: 14px;
}
.link {
color: #a31515;
text-decoration: none;
}
.link:hover {
text-decoration: underline;
}
@media (max-width: 600px) {
body {
padding: 10px;
}
.email-container {
padding: 20px;
}
.title {
font-size: 24px;
}
.verify-button {
display: block;
text-align: center;
}
}
</style>
</head>
<body>
<div class="email-container">
<div class="header">
<img src="{{logoUrl}}" alt="MonacoUSA" class="logo">
<h1 class="title">Welcome to MonacoUSA</h1>
<p class="subtitle">Monaco - United States Association</p>
</div>
<div class="content">
<div class="greeting">
Dear {{firstName}} {{lastName}},
</div>
<p>Thank you for registering to become a member of the <strong>MonacoUSA Association</strong>! We're excited to welcome you to our community that bridges Monaco and the United States.</p>
<div class="member-info">
<h3>🎉 Registration Successful</h3>
<p><strong>Member ID:</strong> {{memberId}}</p>
<p><strong>Registration Date:</strong> {{registrationDate}}</p>
<p>Your membership application has been received and is being processed.</p>
</div>
<h3>📧 Next Step: Verify Your Email</h3>
<p>To complete your registration and activate your account, please verify your email address by clicking the button below:</p>
<div style="text-align: center;">
<a href="{{verificationLink}}" class="verify-button">
✉️ Verify Email Address
</a>
</div>
<p><em>This verification link will expire in 24 hours for security purposes.</em></p>
<div class="payment-info">
<h3>💳 Membership Dues Payment</h3>
<p>Once your email is verified, you'll be able to log in to the portal. To activate your membership, please transfer your annual membership dues:</p>
<ul>
<li><strong>Amount:</strong> €150/year</li>
<li><strong>Payment method:</strong> Bank transfer (details in your portal)</li>
<li><strong>Status:</strong> Your account will be activated once payment is verified</li>
</ul>
<p><em>You can find complete payment instructions in your member portal after verification.</em></p>
</div>
<h3>🌟 What's Next?</h3>
<ol>
<li><strong>Verify your email</strong> using the button above</li>
<li><strong>Log in to your portal</strong> at <a href="https://portal.monacousa.org" class="link">portal.monacousa.org</a></li>
<li><strong>Complete your payment</strong> to activate your membership</li>
<li><strong>Enjoy member benefits</strong> and connect with our community</li>
</ol>
<p>If you have any questions, please don't hesitate to contact us. We're here to help!</p>
</div>
<div class="footer">
<p><strong>MonacoUSA Association</strong><br>
Connecting Monaco and the United States</p>
<p>
<a href="https://portal.monacousa.org" class="link">Portal</a> |
<a href="mailto:info@monacousa.org" class="link">Contact Us</a> |
<a href="https://monacousa.org" class="link">Website</a>
</p>
<p style="margin-top: 20px; font-size: 12px; color: #999;">
This email was sent to {{email}} regarding your MonacoUSA membership registration.<br>
If you did not register for this account, please ignore this email.
</p>
</div>
</div>
<body style="margin: 0; padding: 0; font-family: Arial, sans-serif; background-color: #f4f4f4;">
<!-- Main Container -->
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color: #f4f4f4; padding: 20px 0;">
<tr>
<td align="center">
<!-- Email Container -->
<table width="600" cellpadding="0" cellspacing="0" border="0" style="background-color: #ffffff; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.1);">
<!-- Header with Monaco Red Background -->
<tr>
<td style="background-color: #a31515; padding: 30px; text-align: center;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center">
<img src="{{logoUrl}}" alt="MonacoUSA" width="80" height="80" style="border-radius: 8px; margin-bottom: 15px;">
<h1 style="color: #ffffff; font-size: 28px; font-weight: bold; margin: 0 0 8px 0;">Welcome to MonacoUSA</h1>
<p style="color: #ffffff; font-size: 16px; margin: 0; opacity: 0.9;">Monaco - United States Association</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- Main Content -->
<tr>
<td style="padding: 40px 30px;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<!-- Greeting -->
<tr>
<td style="padding-bottom: 20px;">
<h2 style="color: #a31515; font-size: 20px; font-weight: bold; margin: 0;">Dear {{firstName}} {{lastName}},</h2>
</td>
</tr>
<!-- Welcome Message -->
<tr>
<td style="padding-bottom: 30px;">
<p style="color: #333333; font-size: 16px; line-height: 1.6; margin: 0;">
Thank you for registering to become a member of the <strong>MonacoUSA Association</strong>!
We're excited to welcome you to our community that bridges Monaco and the United States.
</p>
</td>
</tr>
<!-- Registration Success Box -->
<tr>
<td style="padding-bottom: 30px;">
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color: #f8f9fa; border: 1px solid #e9ecef; border-radius: 6px;">
<tr>
<td style="padding: 25px;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="text-align: center; padding-bottom: 15px;">
<span style="background-color: #28a745; color: #ffffff; padding: 8px 16px; border-radius: 20px; font-weight: bold; font-size: 14px;">🎉 Registration Successful</span>
</td>
</tr>
<tr>
<td>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="50%" style="vertical-align: top; padding-right: 10px;">
<p style="margin: 0 0 8px 0; color: #333333; font-weight: bold;">Member ID:</p>
<p style="margin: 0; color: #a31515; font-weight: bold; font-size: 18px;">{{memberId}}</p>
</td>
<td width="50%" style="vertical-align: top; padding-left: 10px;">
<p style="margin: 0 0 8px 0; color: #333333; font-weight: bold;">Registration Date:</p>
<p style="margin: 0; color: #333333; font-size: 16px;">{{registrationDate}}</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding-top: 15px;">
<p style="margin: 0; color: #666666; font-size: 14px;">
Your membership application has been received and is being processed.
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- Next Step: Verify Email -->
<tr>
<td style="padding-bottom: 30px;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="background-color: #e3f2fd; border-left: 4px solid #2196f3; padding: 20px; border-radius: 4px;">
<h3 style="color: #1976d2; font-size: 18px; font-weight: bold; margin: 0 0 10px 0;">📧 Next Step: Verify Your Email</h3>
<p style="color: #333333; font-size: 16px; line-height: 1.6; margin: 0 0 15px 0;">
To complete your registration and activate your account, please verify your email address by clicking the button below:
</p>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="text-align: center; padding: 15px 0;">
<a href="{{verificationLink}}" style="background-color: #a31515; color: #ffffff; text-decoration: none; padding: 15px 30px; border-radius: 6px; font-weight: bold; font-size: 16px; display: inline-block;">
✉️ Verify Email Address
</a>
</td>
</tr>
</table>
<p style="color: #666666; font-size: 14px; font-style: italic; margin: 15px 0 0 0;">
This verification link will expire in 24 hours for security purposes.
</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- Membership Dues Payment -->
<tr>
<td style="padding-bottom: 30px;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="background-color: #fff3cd; border-left: 4px solid #ffc107; padding: 20px; border-radius: 4px;">
<h3 style="color: #856404; font-size: 18px; font-weight: bold; margin: 0 0 10px 0;">💳 Membership Dues Payment</h3>
<p style="color: #333333; font-size: 16px; line-height: 1.6; margin: 0 0 15px 0;">
Once your email is verified, you'll be able to log in to the portal. To activate your membership, please transfer your annual membership dues:
</p>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="33%" style="vertical-align: top; padding-right: 10px;">
<p style="margin: 0 0 5px 0; color: #333333; font-weight: bold;">Amount:</p>
<p style="margin: 0; color: #333333;">€150/year</p>
</td>
<td width="33%" style="vertical-align: top; padding: 0 5px;">
<p style="margin: 0 0 5px 0; color: #333333; font-weight: bold;">Payment method:</p>
<p style="margin: 0; color: #333333;">Bank transfer (details in your portal)</p>
</td>
<td width="33%" style="vertical-align: top; padding-left: 10px;">
<p style="margin: 0 0 5px 0; color: #333333; font-weight: bold;">Status:</p>
<p style="margin: 0; color: #333333;">Your account will be activated once payment is verified</p>
</td>
</tr>
</table>
<p style="color: #666666; font-size: 14px; font-style: italic; margin: 15px 0 0 0;">
You can find complete payment instructions in your member portal after verification.
</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- What's Next -->
<tr>
<td style="padding-bottom: 30px;">
<h3 style="color: #a31515; font-size: 18px; font-weight: bold; margin: 0 0 15px 0;">⭐ What's Next?</h3>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="padding: 5px 0; border-bottom: 1px solid #eeeeee;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="30" style="vertical-align: top; padding-right: 10px;">
<span style="background-color: #a31515; color: #ffffff; border-radius: 50%; width: 24px; height: 24px; display: inline-block; text-align: center; line-height: 24px; font-weight: bold; font-size: 14px;">1</span>
</td>
<td>
<p style="margin: 0; color: #333333; font-size: 16px;">
<strong>Verify your email</strong> using the button above
</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding: 5px 0; border-bottom: 1px solid #eeeeee;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="30" style="vertical-align: top; padding-right: 10px;">
<span style="background-color: #a31515; color: #ffffff; border-radius: 50%; width: 24px; height: 24px; display: inline-block; text-align: center; line-height: 24px; font-weight: bold; font-size: 14px;">2</span>
</td>
<td>
<p style="margin: 0; color: #333333; font-size: 16px;">
<strong>Log in to your portal</strong> at portal.monacousa.org
</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding: 5px 0; border-bottom: 1px solid #eeeeee;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="30" style="vertical-align: top; padding-right: 10px;">
<span style="background-color: #a31515; color: #ffffff; border-radius: 50%; width: 24px; height: 24px; display: inline-block; text-align: center; line-height: 24px; font-weight: bold; font-size: 14px;">3</span>
</td>
<td>
<p style="margin: 0; color: #333333; font-size: 16px;">
<strong>Complete your payment</strong> to activate your membership
</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding: 5px 0;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="30" style="vertical-align: top; padding-right: 10px;">
<span style="background-color: #a31515; color: #ffffff; border-radius: 50%; width: 24px; height: 24px; display: inline-block; text-align: center; line-height: 24px; font-weight: bold; font-size: 14px;">4</span>
</td>
<td>
<p style="margin: 0; color: #333333; font-size: 16px;">
<strong>Enjoy member benefits</strong> and connect with our community
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- Help Message -->
<tr>
<td style="padding-bottom: 20px;">
<p style="color: #333333; font-size: 16px; line-height: 1.6; margin: 0;">
If you have any questions, please don't hesitate to contact us. We're here to help!
</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- Footer -->
<tr>
<td style="background-color: #f8f9fa; padding: 30px; text-align: center; border-top: 1px solid #e9ecef;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<h4 style="color: #333333; font-size: 18px; font-weight: bold; margin: 0 0 8px 0;">MonacoUSA Association</h4>
<p style="color: #666666; font-size: 14px; margin: 0 0 15px 0;">Connecting Monaco and the United States</p>
<!-- Links -->
<table cellpadding="0" cellspacing="0" border="0" style="margin: 0 auto;">
<tr>
<td style="padding: 0 10px;">
<a href="https://portal.monacousa.org" style="color: #a31515; text-decoration: none; font-size: 14px;">Portal</a>
</td>
<td style="padding: 0 10px; color: #cccccc;">|</td>
<td style="padding: 0 10px;">
<a href="mailto:info@monacousa.org" style="color: #a31515; text-decoration: none; font-size: 14px;">Contact Us</a>
</td>
<td style="padding: 0 10px; color: #cccccc;">|</td>
<td style="padding: 0 10px;">
<a href="https://monacousa.org" style="color: #a31515; text-decoration: none; font-size: 14px;">Website</a>
</td>
</tr>
</table>
<!-- Email Info -->
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-top: 20px;">
<tr>
<td style="padding-top: 15px; border-top: 1px solid #dddddd;">
<p style="color: #999999; font-size: 12px; margin: 0;">
This email was sent to <strong>{{email}}</strong> regarding your MonacoUSA membership registration.<br>
If you did not register for this account, please ignore this email.
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>