Add multi-identity support: send/RSVP from multiple addresses per mailbox

Introduce EXTRA_IDENTITIES config for multiple email addresses. Users can filter inbox by identity, compose/reply from the correct address, and RSVP from the invited address. Setup script now creates Email Routing rules for all identities. UI shows identity picker, "To" badges in combined view, and organizer selector for calendar events.

Author: AmirhosseinOlyaei

README.md

@@ -20,7 +20,8 @@ No Google. No iCloud. No third-party mail service.
 | --------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
 | 📥 **Inbound email**        | Email Routing → Worker `email()` handler → parsed & stored in D1                                                                   |
 | 📤 **Outbound email**       | Send real mail as `you@yourdomain.com` via the `send_email` binding                                                                |
-| 📅 **Calendar invites**     | Parses `text/calendar`, RSVP **Yes / Maybe / No** sends a real iCal `METHOD:REPLY` — organizers see `you@yourdomain.com: Accepted` |
+| � **Multi-identity**        | Multiple addresses per mailbox — pick an identity, send as it, RSVP from the invited address                                       |
+| �📅 **Calendar invites**    | Parses `text/calendar`, RSVP **Yes / Maybe / No** sends a real iCal `METHOD:REPLY` — organizers see `you@yourdomain.com: Accepted` |
 | 🗓️ **Independent calendar** | Create/edit/delete events in your own calendar, send `REQUEST`/`CANCEL` invites, import `.ics` anywhere                            |
 | ⏰ **Reminders**            | Cron trigger emails you before events                                                                                              |
 | 🔐 **Auth**                 | Password login, HMAC-signed session cookie                                                                                         |

public/app.js

@@ -34,6 +34,7 @@ function toast(msg, kind = "ok") {
 
 let state = {
   cfg: null,
+  identity: "all", // "all" or one of cfg.identities[].address
   emails: { in: [], out: [] },
   events: [],
   calCursor: new Date(),
@@ -88,15 +89,37 @@ function switchTab(name) {
 }
 
 // ------------------------------------------------------------------ mail list
+const parseAddrs = (j) => {
+  try {
+    return JSON.parse(j);
+  } catch {
+    return [];
+  }
+};
+
+// Which of our identities an inbound email was addressed to (to/cc).
+const ourRecipientOf = (m) => {
+  const ids = state.cfg?.identities || [];
+  const rcpts = [...parseAddrs(m.to_addresses), ...parseAddrs(m.cc_addresses)];
+  for (const r of rcpts) {
+    const hit = ids.find((i) => i.address === String(r).toLowerCase());
+    if (hit) return hit.address;
+  }
+  return "";
+};
+
 async function loadBox(box) {
-  const { emails } = await api(`/api/emails?box=${box}`);
+  const addr =
+    state.identity === "all" ? "" : `&address=${encodeURIComponent(state.identity)}`;
+  const { emails } = await api(`/api/emails?box=${box}${addr}`);
   state.emails[box] = emails;
   if (box === "in") {
     const unread = emails.filter((m) => !m.read).length;
     $("#inbox-count").textContent = unread || "";
   }
   const list = $(box === "in" ? "#inbox-list" : "#sent-list");
   list.innerHTML = emails.length ? "" : `<div class="item sub">No messages yet</div>`;
+  const multi = (state.cfg?.identities?.length || 0) > 1;
   for (const m of emails) {
     const div = document.createElement("div");
     div.className =
@@ -106,8 +129,15 @@ async function loadBox(box) {
     const badge = m.has_calendar
       ? `<span class="badge ${m.calendar_method === "CANCEL" ? "cancel" : m.calendar_method === "REPLY" ? "reply" : ""}">${esc(m.calendar_method || "invite")}</span>`
       : "";
+    // In the combined view, tag which address received/sent each message.
+    const whoBadge =
+      multi && state.identity === "all"
+        ? `<span class="badge to">${esc(
+            box === "in" ? ourRecipientOf(m) : m.from_address,
+          )}</span>`
+        : "";
     div.innerHTML = `
-      <div class="from">${esc(box === "in" ? m.from_address : joinAddrs(m.to_addresses))} ${badge}</div>
+      <div class="from">${esc(box === "in" ? m.from_address : joinAddrs(m.to_addresses))} ${badge} ${whoBadge}</div>
       <div class="subj">${esc(m.subject) || "(no subject)"}</div>
       <div class="meta"><span>${fmtDate(m.received_at)}</span></div>`;
     div.onclick = () => openEmail(m.id, box);
@@ -190,11 +220,19 @@ async function openEmail(id, box) {
     }),
   );
   detail.querySelector("#btn-reply").onclick = () => {
+    // Reply as the identity that was addressed (inbox) or that sent (sent box).
+    const from =
+      box === "in"
+        ? ourRecipientOf(email)
+        : (state.cfg?.identities || []).find(
+            (i) => i.address === email.from_address.toLowerCase(),
+          )?.address || "";
     openCompose(
-      email.from_address,
+      box === "in" ? email.from_address : joinAddrs(email.to_addresses),
       "Re: " + (email.subject || ""),
       "",
       email.message_id,
+      from,
     );
   };
   detail.querySelector("#btn-del").onclick = async () => {
@@ -208,7 +246,12 @@ async function openEmail(id, box) {
 
 // ------------------------------------------------------------------ compose
 const composeDlg = $("#compose-modal");
-function openCompose(to = "", subject = "", body = "", inReplyTo = "") {
+function openCompose(to = "", subject = "", body = "", inReplyTo = "", from = "") {
+  const sel = $("#compose-from");
+  sel.value =
+    from ||
+    (state.identity !== "all" ? state.identity : state.cfg?.primaryAddress) ||
+    sel.value;
   $("#compose-to").value = to;
   $("#compose-subject").value = subject;
   $("#compose-body").value = body;
@@ -229,6 +272,7 @@ $("#compose-form").addEventListener("submit", async (e) => {
     await api("/api/send", {
       method: "POST",
       body: {
+        from: $("#compose-from").value,
         to: $("#compose-to").value,
         subject: $("#compose-subject").value,
         text: $("#compose-body").value,
@@ -336,6 +380,14 @@ function openEventModal(ev, date) {
   $("#ev-start").value = toLocalInput(start);
   $("#ev-end").value = toLocalInput(end);
   $("#ev-attendees").value = (ev?.attendees || []).map((a) => a.email).join(", ");
+  // Organizer is fixed once the event exists.
+  const orgSel = $("#ev-organizer");
+  orgSel.disabled = !!ev;
+  if (!ev)
+    orgSel.value =
+      state.identity !== "all" ? state.identity : state.cfg?.primaryAddress;
+  else if ((state.cfg?.identities || []).some((i) => i.address === ev.organizerEmail))
+    orgSel.value = ev.organizerEmail;
   $("#ev-delete").classList.toggle("hidden", !ev);
   $("#ev-ics").classList.toggle("hidden", !ev);
   $("#ev-ics").onclick = () => {
@@ -409,7 +461,7 @@ $("#event-form").addEventListener("submit", async (e) => {
     } else {
       await api("/api/events", {
         method: "POST",
-        body: { ...body, sendInvites: notify },
+        body: { ...body, organizer: $("#ev-organizer").value, sendInvites: notify },
       });
       toast("Event created");
     }
@@ -424,7 +476,43 @@ $("#event-form").addEventListener("submit", async (e) => {
 // ------------------------------------------------------------------ boot
 async function boot() {
   state.cfg = await api("/api/config");
-  $("#me-address").textContent = state.cfg.primaryAddress;
+  const ids = state.cfg.identities?.length
+    ? state.cfg.identities
+    : [{ address: state.cfg.primaryAddress, name: state.cfg.displayName }];
+
+  const idSel = $("#identity-picker");
+  idSel.innerHTML =
+    (ids.length > 1 ? `<option value="all">All addresses</option>` : "") +
+    ids
+      .map((i) => `<option value="${esc(i.address)}">${esc(i.address)}</option>`)
+      .join("");
+  state.identity = ids.length > 1 ? "all" : ids[0].address;
+  idSel.value = state.identity;
+
+  const fromOpts = ids
+    .map(
+      (i) =>
+        `<option value="${esc(i.address)}">${esc(
+          i.name && i.name !== i.address ? `${i.name} <${i.address}>` : i.address,
+        )}</option>`,
+    )
+    .join("");
+  $("#compose-from").innerHTML = fromOpts;
+  $("#ev-organizer").innerHTML = fromOpts;
+
+  const showMe = () => {
+    $("#me-address").textContent =
+      state.identity === "all" ? `${ids.length} addresses` : state.identity;
+  };
+  showMe();
+  idSel.onchange = () => {
+    state.identity = idSel.value;
+    state.selectedId = null;
+    showMe();
+    loadBox("in");
+    loadBox("out");
+  };
+
   await Promise.all([loadBox("in"), refreshEvents()]);
   showApp();
 }

public/index.html

@@ -39,6 +39,7 @@ <h1>DevArts Mail</h1>
     <div id="app" class="app hidden">
       <aside class="sidebar">
         <div class="brand"><span class="brand-dot">D</span> DevArts Lab</div>
+        <select id="identity-picker" class="identity-picker"></select>
         <button id="compose-open" class="btn primary block">+ Compose</button>
         <nav>
           <button data-tab="inbox" class="nav-item active">
@@ -97,6 +98,7 @@ <h2 id="cal-title"></h2>
           <h3>New message</h3>
           <button type="button" class="x" data-close>&times;</button>
         </div>
+        <select id="compose-from"></select>
         <input id="compose-to" placeholder="To — comma separated" required />
         <input id="compose-subject" placeholder="Subject" required />
         <textarea id="compose-body" placeholder="Write something…" rows="10"></textarea>
@@ -121,6 +123,7 @@ <h3 id="event-modal-title">Event</h3>
           <label>End<input id="ev-end" type="datetime-local" required /></label>
         </div>
         <input id="ev-attendees" placeholder="Invite emails — comma separated" />
+        <label>Organizer<select id="ev-organizer"></select></label>
         <textarea id="ev-description" placeholder="Description" rows="3"></textarea>
         <label class="check"
           ><input id="ev-notify" type="checkbox" checked /> Email invites / updates to

public/styles.css

@@ -47,6 +47,7 @@ body {
 
 /* ---------- buttons / inputs ---------- */
 input,
+select,
 textarea {
   font: inherit;
   color: var(--text);
@@ -60,6 +61,7 @@ textarea {
     box-shadow 0.15s;
 }
 input:focus,
+select:focus,
 textarea:focus {
   outline: none;
   border-color: var(--accent);
@@ -199,6 +201,11 @@ textarea:focus {
   place-items: center;
   color: #fff;
 }
+.identity-picker {
+  font-size: 12px;
+  padding: 7px 10px;
+  background: var(--panel-2);
+}
 .sidebar nav {
   display: flex;
   flex-direction: column;
@@ -339,6 +346,11 @@ main {
   background: rgba(63, 185, 80, 0.14);
   color: var(--ok);
 }
+.badge.to {
+  background: var(--panel-2);
+  color: var(--muted);
+  text-transform: none;
+}
 
 /* ---------- detail ---------- */
 .detail {
@@ -633,6 +645,7 @@ dialog::backdrop {
   }
   .sidebar .brand,
   .sidebar .me,
+  .sidebar .identity-picker,
   .nav-item .count {
     display: none;
   }

scripts/setup.mjs

@@ -10,7 +10,8 @@
  *   2. Applies migrations (remote).
  *   3. Pushes secrets from .dev.vars -> `wrangler secret put`.
  *   4. Deploys the Worker.
- *   5. Configures the Email Routing rule: PRIMARY_ADDRESS -> this Worker.
+ *   5. Configures Email Routing rules: PRIMARY_ADDRESS + EXTRA_IDENTITIES
+ *      -> this Worker.
  *
  * Auth (either works):
  *   - CLOUDFLARE_API_TOKEN + CLOUDFLARE_ACCOUNT_ID env (or in .dev.vars), or
@@ -70,6 +71,16 @@ const D1_NAME = vars.D1_DATABASE_NAME || "devarts-mail";
 const PRIMARY = vars.PRIMARY_ADDRESS;
 const DOMAIN = vars.MAIL_DOMAIN;
 
+// All addresses routed to the worker: primary + EXTRA_IDENTITIES
+// ("addr=Display Name;addr2=Name2").
+const ADDRESSES = [
+  PRIMARY,
+  ...(vars.EXTRA_IDENTITIES || "")
+    .split(";")
+    .map((p) => p.split("=")[0].trim().toLowerCase())
+    .filter(Boolean),
+].filter((a, i, arr) => a && arr.indexOf(a) === i);
+
 const run = (cmd, opts = {}) =>
   execSync(cmd, {
     cwd: root,
@@ -156,7 +167,7 @@ run(`npx wrangler deploy`);
 
 // --- 5. email routing rule --------------------------------------------------------
 if (API_TOKEN) {
-  console.log(`-> configuring Email Routing for ${PRIMARY}`);
+  console.log(`-> configuring Email Routing for ${ADDRESSES.join(", ")}`);
   const cf = cfRaw;
   const zones = await cf("GET", `/zones?name=${DOMAIN}`);
   const zoneId = zones?.[0]?.id;
@@ -169,28 +180,33 @@ if (API_TOKEN) {
   await cf("PUT", `/zones/${zoneId}/email/routing`, { enabled: true }).catch(() => {});
 
   const rules = await cf("GET", `/zones/${zoneId}/email/routing/rules`);
-  const existing = rules.find((r) => r.matchers?.[0]?.value === PRIMARY);
-  if (existing) {
-    await cf("PUT", `/zones/${zoneId}/email/routing/rules/${existing.tag}`, {
-      ...existing,
-      enabled: true,
-      actions: [{ type: "worker", value: [WORKER_NAME] }],
-    });
-    console.log(`   updated existing rule -> worker "${WORKER_NAME}"`);
-  } else {
-    await cf("POST", `/zones/${zoneId}/email/routing/rules`, {
-      name: `${WORKER_NAME}: ${PRIMARY}`,
-      enabled: true,
-      matchers: [{ type: "literal", field: "to", value: PRIMARY }],
-      actions: [{ type: "worker", value: [WORKER_NAME] }],
-    });
-    console.log(`   created rule ${PRIMARY} -> worker "${WORKER_NAME}"`);
+  for (const addr of ADDRESSES) {
+    const existing = rules.find(
+      (r) => r.matchers?.[0]?.value?.toLowerCase() === addr.toLowerCase(),
+    );
+    if (existing) {
+      await cf("PUT", `/zones/${zoneId}/email/routing/rules/${existing.tag}`, {
+        ...existing,
+        enabled: true,
+        actions: [{ type: "worker", value: [WORKER_NAME] }],
+      });
+      console.log(`   updated existing rule ${addr} -> worker "${WORKER_NAME}"`);
+    } else {
+      await cf("POST", `/zones/${zoneId}/email/routing/rules`, {
+        name: `${WORKER_NAME}: ${addr}`,
+        enabled: true,
+        matchers: [{ type: "literal", field: "to", value: addr }],
+        actions: [{ type: "worker", value: [WORKER_NAME] }],
+      });
+      console.log(`   created rule ${addr} -> worker "${WORKER_NAME}"`);
+    }
   }
   console.log("   (contact@ rules left untouched)");
 } else {
   console.log("   ! no API token or wrangler login — skipped email routing setup.");
   console.log(`     Manually: Dashboard -> ${DOMAIN} -> Email Routing -> Rules ->`);
-  console.log(`     ${PRIMARY} -> Send to Worker -> ${WORKER_NAME}`);
+  for (const addr of ADDRESSES)
+    console.log(`     ${addr} -> Send to Worker -> ${WORKER_NAME}`);
 }
 
 console.log("\nDone. Open https://" + WORKER_NAME + ".<subdomain>.workers.dev");