securing email API; making sent emails look polished and prettyyy; polishing feedback sent modal

Ammaar-Alam · Ammaar-Alam · commit 0527f0cefc87 · 2025-11-07T17:58:22.000-05:00
diff --git a/.env.example b/.env.example
@@ -15,6 +15,8 @@ DB_NAME=tigertype
 ## Feedback Email
 FEEDBACK_EMAIL_FROM=cs-tigertype@princeton.edu
 FEEDBACK_EMAIL_TO_TEAM=cs-tigertype@princeton.edu,it.admin@tigerapps.org
+FEEDBACK_REPLY_TO=cs-tigertype@princeton.edu,it.admin@tigerapps.org
+SITE_URL=https://tigertype.tigerapps.org
 
 # Scraping Configuration
 OPENAI_API_KEY=your_api_key_here
diff --git a/client/src/components/FeedbackModal.css b/client/src/components/FeedbackModal.css
@@ -100,16 +100,22 @@
 .feedback-success {
   display: flex;
   flex-direction: column;
-  gap: 1.25rem;
+  gap: 1rem;
   font-size: 0.95rem;
   color: var(--mode-text-color, #f5f5f5);
+  align-items: center;
+  text-align: center;
 }
 
 .feedback-success p {
   margin: 0;
   line-height: 1.5;
 }
 
+.feedback-success .feedback-primary-button {
+  min-width: 220px;
+}
+
 @media (max-width: 600px) {
   .feedback-actions {
     flex-direction: column;
diff --git a/client/src/components/FeedbackModal.jsx b/client/src/components/FeedbackModal.jsx
@@ -85,7 +85,7 @@ function FeedbackModal({ isOpen, onClose }) {
       onClose={closeIfAllowed}
       title={submitted ? 'Thanks for your feedback!' : 'Send Feedback'}
       showCloseButton
-      isLarge
+      isLarge={!submitted}
     >
       {submitted ? (
         <div className="feedback-success">
diff --git a/client/src/components/Navbar.jsx b/client/src/components/Navbar.jsx
@@ -17,7 +17,7 @@ function Navbar({ onOpenLeaderboard, onLoginClick }) {
   const { authenticated, user, logout, markTutorialComplete } = useAuth();
   const { isTutorialRunning, startTutorial, endTutorial } = useTutorial();
   const navigate = useNavigate();
-  const { raceState, typingState, setPlayerReady, resetRace } = useRace();
+  const { resetRace } = useRace();
 
   // State to track hover state of each link
   const [hoveredLink, setHoveredLink] = useState(null);
diff --git a/server/routes/api.js b/server/routes/api.js
@@ -117,12 +117,33 @@ router.use('/profile', requireAuth, profileRoutes);
 
 // --- Existing API Routes ---
 
+// simple in-memory rate limiting for feedback (per IP)
+const FEEDBACK_LIMIT_WINDOW_MS = 10 * 60 * 1000; // 10 minutes
+const FEEDBACK_LIMIT_COUNT = 5; // max 5 submissions per window
+const feedbackRate = new Map(); // ip -> { windowStart, count }
+
+function isRateLimited(ip) {
+  const now = Date.now();
+  const entry = feedbackRate.get(ip);
+  if (!entry || (now - entry.windowStart) > FEEDBACK_LIMIT_WINDOW_MS) {
+    feedbackRate.set(ip, { windowStart: now, count: 1 });
+    return false;
+  }
+  entry.count += 1;
+  if (entry.count > FEEDBACK_LIMIT_COUNT) return true;
+  return false;
+}
+
 router.post('/feedback', async (req, res) => {
   try {
+    const ip = (req.headers['x-forwarded-for'] || req.ip || req.connection?.remoteAddress || '').toString();
+    if (isRateLimited(ip)) {
+      return res.status(429).json({ error: 'Too many feedback submissions. Please try again later.' });
+    }
     const { category = 'feedback', message, contactInfo, pagePath } = req.body || {};
 
     if (!message || typeof message !== 'string' || message.trim().length < 10) {
-      return res.status(400).json({ error: 'Please include a short description so we can help (10+ characters).' });
+      return res.status(400).json({ error: 'Please include a description with at least 10 characters so we can help.' });
     }
 
     const sanitizedMessage = message.trim().slice(0, 4000);
@@ -142,6 +163,9 @@ router.post('/feedback', async (req, res) => {
 
     const userAgent = req.get('user-agent')?.slice(0, 500) || null;
 
+    // acknowledgement policy: only ack authenticated users at their Princeton address
+    const ackTo = (isAuthenticated(req) && netid) ? `${netid}@princeton.edu` : null;
+
     // fire and forget to avoid hanging if mail provider is slow
     sendFeedbackEmails({
       category,
@@ -150,7 +174,8 @@ router.post('/feedback', async (req, res) => {
       netid,
       userAgent,
       pagePath: sanitizedPagePath,
-      createdAt: new Date()
+      createdAt: new Date(),
+      ackTo
     }).catch(err => console.warn('feedback email send failed', err));
 
     return res.json({ success: true });
diff --git a/server/utils/email.js b/server/utils/email.js
@@ -11,9 +11,18 @@ const firstEnv = (...keys) => {
   return undefined;
 };
 
-const smtpUser = firstEnv('SMTP_SENDER', 'GRAPH_SENDER_USER', 'FEEDBACK_EMAIL_FROM') || 'cs-tigertype@princeton.edu';
+// Validate required email configuration
+if (!process.env.FEEDBACK_EMAIL_FROM) {
+  throw new Error('Missing required env var: FEEDBACK_EMAIL_FROM');
+}
+if (!process.env.FEEDBACK_EMAIL_TO_TEAM) {
+  throw new Error('Missing required env var: FEEDBACK_EMAIL_TO_TEAM');
+}
+
+const smtpUser = firstEnv('SMTP_SENDER', 'GRAPH_SENDER_USER', 'FEEDBACK_EMAIL_FROM');
 const tenantId = firstEnv('AZURE_TENANT_ID', 'TENANT_ID');
 const clientId = firstEnv('AZURE_CLIENT_ID', 'CLIENT_ID');
+const siteUrl = process.env.SITE_URL || 'https://tigertype.tigerapps.org';
 
 // token cache persistence
 const CACHE_ENV = 'SMTP_OAUTH_CACHE';
@@ -65,7 +74,7 @@ async function getSmtpAccessToken() {
   throw new Error('No delegated SMTP token available. Run: node server/scripts/seed_smtp_oauth_device_login.js');
 }
 
-const sendMailGeneric = async ({ to, from, subject, text, replyTo }) => {
+const sendMailGeneric = async ({ to, from, subject, text, html, replyTo, cc, attachments }) => {
   if (!tenantId || !clientId) throw new Error('Missing AZURE_TENANT_ID/AZURE_CLIENT_ID');
   const accessToken = await getSmtpAccessToken();
   const transporter = nodemailer.createTransport({
@@ -80,10 +89,17 @@ const sendMailGeneric = async ({ to, from, subject, text, replyTo }) => {
     }
   });
   const mail = { from, to, subject, text };
+  if (html) mail.html = html;
   if (replyTo) mail.replyTo = replyTo;
+  if (cc) mail.cc = cc;
+  if (!attachments) attachments = getLogoAttachment();
+  if (attachments && attachments.length) mail.attachments = attachments;
   await transporter.sendMail(mail);
 };
 
+// quick email regex (declare early for clarity)
+const emailRe = /[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}/i;
+
 const sendFeedbackNotification = async ({
   category,
   message,
@@ -93,9 +109,10 @@ const sendFeedbackNotification = async ({
   pagePath,
   createdAt,
   to,
-  from
+  from,
+  cc
 }) => {
-  const fromAddr = from || process.env.FEEDBACK_EMAIL_FROM || process.env.GRAPH_SENDER_USER || 'cs-tigertype@princeton.edu';
+  const fromAddr = from || process.env.FEEDBACK_EMAIL_FROM;
 
   const subject = `[TigerType Feedback] ${category.toUpperCase()} from ${netid || 'anonymous user'}`;
 
@@ -113,24 +130,44 @@ const sendFeedbackNotification = async ({
     `User Agent: ${userAgent || 'unknown'}`
   ];
 
-  // set replyTo to contact email if valid so team can reply directly to user
+  // set replyTo to contact email if present so team can reply directly to user
   let replyTo = undefined;
-  if (contactInfo && emailRe.test(contactInfo)) {
-    const m = contactInfo.match(emailRe);
-    if (m) replyTo = m[0];
-  }
+  const mReply = contactInfo?.match(emailRe);
+  if (mReply) replyTo = mReply[0];
 
-  await sendMailGeneric({ to, from: fromAddr, subject, text: lines.join('\n'), replyTo });
-};
+  const html = `
+  <div style="font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;max-width:720px;margin:0 auto;padding:32px 24px;color:#333;background:#ffffff;">
+    <div style=\"margin:0 0 32px 0;text-align:left;\">
+      <a href=\"${siteUrl}\" target=\"_blank\" rel=\"noopener noreferrer\" style=\"display:inline-block;\">
+        <img src=\"cid:tt-logo\" alt=\"TigerType\" height=\"56\" style=\"display:block;border:none;\"/>
+      </a>
+    </div>
+    <h3 style=\"margin:0 0 16px 0;color:#F58025;font-weight:800;font-size:24px;line-height:1.2;\">New ${escapeHtml(category)} submitted</h3>
+    <ul style=\"margin:0 0 24px 0;padding:0 0 0 20px;font-size:15px;line-height:1.8;color:#555;\">
+      <li><strong>Submitted:</strong> ${escapeHtml(createdAt.toISOString())}</li>
+      <li><strong>NetID:</strong> ${escapeHtml(netid || 'anonymous')}</li>
+      <li><strong>Contact:</strong> ${escapeHtml(contactInfo || 'not provided')}</li>
+      <li><strong>Page:</strong> ${escapeHtml(pagePath || 'unknown')}</li>
+      <li><strong>User Agent:</strong> ${escapeHtml(userAgent || 'unknown')}</li>
+    </ul>
+    <table role=\"presentation\" cellpadding=\"0\" cellspacing=\"0\" style=\"width:100%;margin:0 0 24px 0;border-collapse:separate;border-spacing:0;\">
+      <tr>
+        <td style=\"background:#f8f8f8;border-left:4px solid #F58025;border-radius:6px;padding:16px 20px;\">
+          <div style=\"font-weight:700;margin:0 0 10px 0;font-size:15px;color:#333;\">Message</div>
+          <div style=\"white-space:pre-wrap;line-height:1.6;color:#555;font-size:15px;\">${escapeHtml(message || '')}</div>
+        </td>
+      </tr>
+    </table>
+    <hr style=\"border:none;border-top:1px solid #e0e0e0;margin:32px 0 16px 0;\"/>
+    <p style=\"margin:0;font-size:13px;color:#999;text-align:center;\">Reply to this email to respond directly to the user.</p>
+  </div>`;
 
-// quick email regex
-const emailRe = /[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}/i;
+  await sendMailGeneric({ to, from: fromAddr, subject, text: lines.join('\n'), html, replyTo, cc });
+};
 
 const deriveUserEmail = (contactInfo, netid) => {
-  if (contactInfo && emailRe.test(contactInfo)) {
-    const m = contactInfo.match(emailRe);
-    if (m) return m[0];
-  }
+  const m = contactInfo?.match(emailRe);
+  if (m) return m[0];
   if (netid && /^[a-z0-9._-]+$/i.test(netid)) {
     return `${netid}@princeton.edu`;
   }
@@ -147,23 +184,60 @@ const sendFeedbackAcknowledgement = async ({
   createdAt
 }) => {
   if (!to) return;
-  const subject = 'thanks for your feedback to tigertype';
-  const lines = [
-    'hi there — thanks for sending feedback to tigertype',
+  const subject = 'Thanks for your feedback to TigerType';
+  const submittedLocal = (createdAt instanceof Date ? createdAt : new Date(createdAt))
+    .toLocaleString('en-US', { timeZone: 'America/New_York' });
+  const safeMessage = (message || '').trim();
+  const summaryRows = [
+    pagePath ? `<li><strong>Page:</strong> ${escapeHtml(pagePath)}</li>` : '',
+    contactInfo ? `<li><strong>Contact:</strong> <a href=\"mailto:${escapeAttr(contactInfo)}\">${escapeHtml(contactInfo)}</a></li>` : '',
+    `<li><strong>Submitted:</strong> ${submittedLocal} ET</li>`
+  ].filter(Boolean).join('');
+
+  const html = `
+  <div style=\"font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;max-width:640px;margin:0 auto;padding:32px 24px;color:#333;background:#ffffff;\">
+    <div style=\"margin:0 0 32px 0;text-align:left;\">
+      <a href=\"${siteUrl}\" target=\"_blank\" rel=\"noopener noreferrer\" style=\"display:inline-block;\">
+        <img src=\"cid:tt-logo\" alt=\"TigerType\" height=\"56\" style=\"display:block;border:none;\"/>
+      </a>
+    </div>
+    <h2 style=\"margin:0 0 16px 0;color:#F58025;font-weight:800;font-size:28px;line-height:1.2;\">Thanks for your feedback!</h2>
+    <p style=\"margin:0 0 24px 0;font-size:16px;line-height:1.6;color:#555;\">We really appreciate you taking the time to help improve <strong style=\"color:#F58025;\">TigerType</strong>. Here's a quick summary:</p>
+    <ul style=\"margin:0 0 24px 0;padding:0 0 0 20px;font-size:15px;line-height:1.8;color:#555;\">${summaryRows}</ul>
+    ${safeMessage ? `<table role=\"presentation\" cellpadding=\"0\" cellspacing=\"0\" style=\"width:100%;margin:0 0 24px 0;border-collapse:separate;border-spacing:0;\">
+      <tr>
+        <td style=\"background:#f8f8f8;border-left:4px solid #F58025;border-radius:6px;padding:16px 20px;\">
+          <div style=\"font-weight:700;margin:0 0 10px 0;font-size:15px;color:#333;\">Your message</div>
+          <div style=\"white-space:pre-wrap;line-height:1.6;color:#555;font-size:15px;\">${escapeHtml(safeMessage)}</div>
+        </td>
+      </tr>
+    </table>
+    <p style=\"margin:0 0 8px 0;font-size:15px;line-height:1.6;color:#555;\">We'll take a look and follow up if we need any more details.</p>` : ''}
+    <p style=\"margin:${safeMessage ? '24px' : '0'} 0 0 0;font-size:15px;color:#888;font-style:italic;\">— TigerType Team</p>
+    <hr style=\"border:none;border-top:1px solid #e0e0e0;margin:32px 0 16px 0;\"/>
+    <p style=\"margin:0;font-size:13px;color:#999;text-align:center;\">Reply to this email to continue the conversation with the TigerType team.</p>
+  </div>`;
+
+  const text = [
+    'Thanks for your feedback!',
     '',
-    `we received your ${category || 'feedback'} and will look into it shortly`,
+    `We received your ${category || 'feedback'} and will look into it shortly.`,
     '',
-    'summary',
-    `submitted: ${createdAt.toISOString()}`,
-    pagePath ? `page: ${pagePath}` : null,
-    contactInfo ? `contact: ${contactInfo}` : null,
+    'Summary:',
+    pagePath ? `• Page: ${pagePath}` : null,
+    contactInfo ? `• Contact: ${contactInfo}` : null,
+    `• Submitted: ${submittedLocal} ET`,
     '',
-    'message',
-    message,
+    safeMessage ? 'Your message:' : null,
+    safeMessage || null,
     '',
-    '— tigertype team'
-  ].filter(Boolean);
-  await sendMailGeneric({ from, to, subject, text: lines.join('\n') });
+    '— TigerType Team'
+  ].filter(Boolean).join('\n');
+
+  // Set Reply-To to team addresses (configurable)
+  const replyTo = process.env.FEEDBACK_REPLY_TO || process.env.FEEDBACK_EMAIL_TO_TEAM;
+
+  await sendMailGeneric({ from, to, subject, text, html, replyTo });
 };
 
 const sendFeedbackEmails = async ({
@@ -173,15 +247,17 @@ const sendFeedbackEmails = async ({
   netid,
   userAgent,
   pagePath,
-  createdAt
+  createdAt,
+  ackTo // optional: explicit recipient for acknowledgement (null/undefined to suppress)
 }) => {
-  const from = process.env.FEEDBACK_EMAIL_FROM || process.env.GRAPH_SENDER_USER || 'cs-tigertype@princeton.edu';
-  const teamList = (process.env.FEEDBACK_EMAIL_TO_TEAM || 'cs-tigertype@princeton.edu,it.admin@tigerapps.org')
+  const from = process.env.FEEDBACK_EMAIL_FROM;
+  const teamList = process.env.FEEDBACK_EMAIL_TO_TEAM
     .split(',')
     .map(s => s.trim())
     .filter(Boolean);
 
-  const toUser = deriveUserEmail(contactInfo, netid);
+  // acknowledgement recipient policy: only send when explicitly provided (e.g., authenticated user's email)
+  const toUser = (typeof ackTo !== 'undefined') ? ackTo : deriveUserEmail(contactInfo, netid);
 
   // send acknowledgement first; if it fails, throw
   if (toUser) {
@@ -196,32 +272,48 @@ const sendFeedbackEmails = async ({
     });
   }
 
-  // send to each team recipient; if all fail, throw
-  let sentAny = false;
-  for (const teamTo of teamList) {
-    try {
-      await sendFeedbackNotification({
-        category,
-        message,
-        contactInfo,
-        netid,
-        userAgent,
-        pagePath,
-        createdAt,
-        to: teamTo,
-        from
-      });
-      sentAny = true;
-    } catch (e) {
-      // continue to next recipient
-    }
-  }
-  if (teamList.length > 0 && !sentAny) {
-    throw new Error('failed to send to all team recipients');
+  // send to team recipients; use first as "to" and rest as "cc" so replies-all includes everyone
+  if (teamList.length > 0) {
+    const [primaryTeamRecipient, ...ccTeamRecipients] = teamList;
+    await sendFeedbackNotification({
+      category,
+      message,
+      contactInfo,
+      netid,
+      userAgent,
+      pagePath,
+      createdAt,
+      to: primaryTeamRecipient,
+      from,
+      cc: ccTeamRecipients.length > 0 ? ccTeamRecipients.join(', ') : undefined
+    });
   }
 };
 
 module.exports = {
   sendFeedbackNotification,
   sendFeedbackEmails
 };
+
+// utils for HTML escaping
+function escapeHtml(str) {
+  return String(str)
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/\"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+}
+function escapeAttr(str) {
+  return escapeHtml(str).replace(/\n/g, ' ');
+}
+
+function getLogoAttachment() {
+  try {
+    const logoPath = path.join(__dirname, '../../client/src/assets/logos/navbar-logo.png');
+    if (fs.existsSync(logoPath)) {
+      return [{ filename: 'navbar-logo.png', path: logoPath, cid: 'tt-logo' }];
+    }
+  } catch (_) {}
+  return undefined;
+}

Original file line number	Diff line number	Diff line change
`@@ -85,7 +85,7 @@ function FeedbackModal({ isOpen, onClose }) {`
`85`	`85`	`onClose={closeIfAllowed}`
`86`	`86`	`title={submitted ? 'Thanks for your feedback!' : 'Send Feedback'}`
`87`	`87`	`showCloseButton`
`88`		`- isLarge`
	`88`	`+ isLarge={!submitted}`
`89`	`89`	`>`
`90`	`90`	`{submitted ? (`
`91`	`91`	`<div className="feedback-success">`