Skip to content

Feature Request/Bug report Form - #21

Open
patrickrb wants to merge 2 commits into
mainfrom
optio/task-d6a347d0-51b7-4075-8c26-754172f3f466
Open

patrickrb wants to merge 2 commits into
mainfrom
optio/task-d6a347d0-51b7-4075-8c26-754172f3f466

Conversation

@patrickrb

Copy link
Copy Markdown
Owner

Closes #18

What changed

Adds a /contact page with a web form that lets users submit bug reports and feature requests directly, in addition to GitHub issues.

New files:

  • api/contact.js — Vercel serverless function that validates the form payload and sends the email via nodemailer (SMTP). Supports up to 5 image attachments (2 MB each).
  • src/pages/contact.mjs — Page template with the full form HTML.
  • public/assets/contact.css — Form styles following the existing site design tokens.

Modified files:

  • public/assets/ft8af.js — Client-side handler: type-pill switching (Bug/Feature), drag-and-drop + file-picker image upload with validation, base64 conversion, fetch POST to /api/contact, and success/error result states.
  • src/i18n/en.json — New contact namespace for all form copy; added common.nav.feedback and updated footer link text.
  • build.mjs — Added "Feedback" link to both desktop nav and mobile menu; updated footer "Report a bug" to link to /contact (GitHub issues link kept as "Open a GitHub issue").
  • src/pages/_registry.mjs — Registered the contact page so it is built and included in the sitemap.
  • package.json / package-lock.json — Added nodemailer dependency.

Email delivery requires three environment variables set in Vercel:

SMTP_HOST=...
SMTP_USER=...
SMTP_PASS=...

CONTACT_TO defaults to k1af@ft8af.app. SMTP_FROM defaults to FT8AF <noreply@ft8af.app>. SMTP_PORT defaults to 587 (STARTTLS); set SMTP_SECURE=true for port 465.

How to test

  1. Deploy the branch to Vercel and set the SMTP env vars.
  2. Navigate to /contact.
  3. Select "Bug Report" — fill in Summary and Steps to Reproduce, attach a screenshot, and click Send Report. Verify the email arrives at the configured address with the image attached.
  4. Select "Feature Request" — fill in Summary and Use Case, click Send Report. Verify.
  5. Test validation: submit with required fields empty — focus should move to the first missing field.
  6. Test image limits: try adding 6 images or a file over 2 MB — the UI should reject extras with an inline error.
  7. Verify the "Feedback" link appears in the desktop nav and mobile menu.
  8. Confirm the footer "Report a bug or request a feature" links to /contact and a separate "Open a GitHub issue" link still points to GitHub.

Closes #18

Adds a web form at /contact where users can submit bug reports and
feature requests with screenshots directly to k1af@ft8af.app, in
addition to GitHub issues.

- api/contact.js: Vercel serverless function that validates the
  submission and sends the email via nodemailer (SMTP)
- src/pages/contact.mjs: static page template with the form HTML
- public/assets/contact.css: form styles following site design tokens
- public/assets/ft8af.js: client-side form handler (type switching,
  drag-and-drop image upload with 5-file / 2 MB limits, base64
  conversion, JSON POST, success/error states)
- src/i18n/en.json: contact namespace translations
- build.mjs: "Feedback" nav link and updated footer "Report a bug" link
- src/pages/_registry.mjs: register the new page

Email delivery requires SMTP_HOST, SMTP_USER, and SMTP_PASS env vars
set in Vercel. CONTACT_TO defaults to k1af@ft8af.app.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@vercel

vercel Bot commented Aug 31, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated
ft8af-site Ready Ready Preview Sep 8, 2026 5:13pm UTC

Request Review

Resolved conflicts in package.json and package-lock.json by unioning the
contact form's nodemailer dependency with main's activation-sharing
dependencies (@neondatabase/serverless, qrcode-generator, pglite).

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BdUSDtqX45DF2ny9NxoMgT
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Feature Request/Bug report Form

1 participant