Login failed

\n No authorization code received. Try again\n

\n \n ,\n 400,\n );\n }\n\n try {\n const tokenResponse = await getToken(code);\n const oauthToken = tokenResponse.access_token;\n\n setCookie(c, \"gigya_oauth_token\", oauthToken, {\n path: \"/\",\n httpOnly: true,\n secure: true,\n sameSite: \"Lax\",\n maxAge: 3600, // 1 hour\n });\n\n return c.redirect(state || \"./\");\n } catch (e: any) {\n console.error(\"getToken error:\", e);\n return c.html(\n \n \n

Login failed

Could not exchange authorization code for token.

{e.message}

\n Try again\n \n ,\n 500,\n );\n }\n});\n\n// ── Logout ─────────────────────────────────────────────────────\napp.get(\"/logout\", (c) => {\n deleteCookie(c, \"gigya_oauth_token\", { path: \"/\" });\n return c.redirect(\"./\");\n});\n\n// ── Helper: get token from context ─────────────────────────────\nfunction getOAuthToken(c: any): string {\n return c.get(\"oauth_token\") || getCookie(c, \"gigya_oauth_token\") || \"\";\n}\n\nasync function fetchGroups(): Promise {\n try {\n const r = await makeGigyaRequest(\"accounts.groups.search\", {\n query: \"select * from groups\",\n model: \"playground-access\",\n userKey: GIGYA_APP_KEY,\n secret: GIGYA_APP_SECRET,\n });\n return r?.results || [];\n } catch {\n return [];\n }\n}\n\n// Normalise group record — Gigya returns groupId (lowercase d)\nfunction groupId(g: any): string {\n return g.groupId || g.groupID || g.id || \"\";\n}\nfunction groupLabel(g: any): string {\n return g.name || groupId(g);\n}\n\n// ── Shared CSS ─────────────────────────────────────────────────\nconst STYLES = `\n .card{background:#fff;border-radius:12px;border:1px solid #e5e7eb;padding:24px;margin-bottom:20px;box-shadow:0 1px 3px rgba(0,0,0,.06)}\n .field-label{display:block;font-size:.875rem;font-weight:500;color:#374151;margin-bottom:4px}\n .field-hint{font-size:.75rem;color:#9ca3af;margin-top:3px}\n .input{width:100%;padding:8px 12px;border:1px solid #d1d5db;border-radius:8px;font-size:.875rem;outline:none;box-sizing:border-box;transition:border-color .15s}\n .input:focus{border-color:#6366f1;box-shadow:0 0 0 3px rgba(99,102,241,.1)}\n .input.mono{font-family:monospace}\n .btn{display:inline-flex;align-items:center;gap:8px;padding:8px 20px;border-radius:8px;font-weight:600;font-size:.875rem;cursor:pointer;border:none;transition:all .15s}\n .btn-primary{background:#6366f1;color:#fff}\n .btn-primary:hover{background:#4f46e5}\n .btn-danger{background:#dc2626;color:#fff}\n .btn-danger:hover{background:#b91c1c}\n .btn-ghost{background:transparent;color:#6b7280;border:1px solid #e5e7eb}\n .btn-ghost:hover{background:#f9fafb;color:#111827}\n .tag{display:inline-flex;align-items:center;gap:4px;background:#e0e7ff;color:#3730a3;border-radius:9999px;padding:2px 10px;font-size:12px;font-weight:600}\n .badge-ok{background:#dcfce7;color:#166534}\n .badge-fail{background:#fee2e2;color:#991b1b}\n .badge-skip{background:#fef9c3;color:#854d0e}\n .row-ok{border-left:3px solid #22c55e}\n .row-fail{border-left:3px solid #ef4444}\n .row-skip{border-left:3px solid #eab308}\n .email-pill{display:inline-flex;align-items:center;gap:6px;background:#eef2ff;border:1px solid #c7d2fe;border-radius:9999px;padding:3px 10px;font-size:.75rem;color:#3730a3;margin:2px}\n .email-pill-invalid{background:#fef2f2;border-color:#fecaca;color:#991b1b}\n .section-title{font-size:1.125rem;font-weight:700;color:#111827;margin:0}\n .section-sub{font-size:.875rem;color:#6b7280;margin:4px 0 0}\n .divider{border:none;border-top:1px solid #f3f4f6;margin:20px 0}\n .spin{animation:spin 1s linear infinite}\n @keyframes spin{to{transform:rotate(360deg)}}\n .htmx-indicator{display:none}\n .htmx-request .htmx-indicator{display:inline-flex}\n .htmx-request.htmx-indicator{display:inline-flex}\n .progress-bar{height:6px;background:#e5e7eb;border-radius:9999px;overflow:hidden;margin-top:8px}\n .progress-fill{height:100%;background:#22c55e;border-radius:9999px;transition:width .3s}\n .step-dot{width:28px;height:28px;border-radius:9999px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex-shrink:0}\n .dot-done{background:#22c55e;color:#fff}\n .dot-active{background:#6366f1;color:#fff}\n .dot-idle{background:#e5e7eb;color:#9ca3af}\n .step-lock{opacity:.4;pointer-events:none}\n .preview-table{width:100%;font-size:.8rem;border-collapse:collapse}\n .preview-table th{text-align:left;padding:6px 10px;background:#f9fafb;font-size:.7rem;text-transform:uppercase;color:#6b7280;border-bottom:1px solid #e5e7eb}\n .preview-table td{padding:6px 10px;border-bottom:1px solid #f3f4f6;vertical-align:middle}\n .preview-table tr:last-child td{border-bottom:none}\n .mode-tab{padding:8px 18px;border-radius:8px;font-size:.875rem;font-weight:500;cursor:pointer;border:2px solid transparent;transition:all .15s}\n .mode-tab.active{border-color:#6366f1;background:#eef2ff;color:#4338ca}\n .mode-tab:not(.active){color:#6b7280}\n .mode-tab:not(.active):hover{background:#f9fafb}\n`;\n\n// ── Spinner ────────────────────────────────────────────────────\nfunction Spinner({ id }: { id?: string }) {\n return (\n \n \n \n \n );\n}\n\n// ── Shell layout ───────────────────────────────────────────────\nfunction Layout({ title, children }: { title: string; children: any }) {\n return (\n \n \n \n \n {title}\n \n \n \n\n \n \n \n \n

\n {children}\n

\n \n \n );\n}\n\n// ── Progress stepper ───────────────────────────────────────────\nfunction Stepper({ step }: { step: 1 | 2 | 3 }) {\n const steps = [\"Configure\", \"Preview\", \"Send\"];\n return (\n

\n {steps.map((label, idx) => {\n const n = idx + 1;\n const cls = n < step\n ? \"dot-done\"\n : n === step\n ? \"dot-active\"\n : \"dot-idle\";\n return (\n <>\n

{n < step ? \"✓\" : String(n)}

\n \n {label}\n \n {n < steps.length && (\n \n )}\n \n );\n })}\n

\n );\n}\n\n// ══════════════════════════════════════════════════════════════\n// GET / — Step 1: Configure invitation\n// ══════════════════════════════════════════════════════════════\napp.get(\"/\", async (c) => {\n const oauthToken = getOAuthToken(c);\n const groups = await fetchGroups(oauthToken);\n return c.html(\n \n

Send Invitations

\n Invite people to a group — works for non-existing users too\n

\n\n \n\n {/* Step 1 card */}\n

Configure Invitation

\n Fill in group, template, and email addresses\n

\n\n \n {/* ── Group & model ── */}\n {/* model is encoded as data-model on each option; JS-free auto-fill via hx-on:change */}\n

\n \n Group *\n \n \n \n {groups.length\n ? groups.map((g: any) => (\n \n ))\n : (\n \n )}\n \n

\n \n Model ID *\n \n \n

\n Auto-filled when you select a group, or enter manually\n

\n\n {/* ── Invitation type & language ── */}\n

\n Invitation Type\n \n

\n Language\n \n

\n\n {/* ── Console note ── */}\n

\n ℹ️\n

\n Landing page{\" \"}\n must be configured in the Gigya Console for your invitation model.\n Go to{\" \"}\n \n Customer Data Cloud → Groups → Invitation Models → [your model]\n → Landing Page\n . Once set in the console it is used automatically — you do\n not pass it at runtime.\n

\n\n {/* ── Permissions ── */}\n

\n \n Permissions{\" \"}\n \n (comma-separated)\n \n \n \n

\n\n

\n\n {/* ── Email addresses — single or list ── */}\n

Email Addresses

\n Enter one email or paste a list (one per line, or\n comma/space-separated)\n

\n\n {/* Mode toggle */}\n

\n \n Single email\n \n \n Bulk list\n \n

\n\n {/* Single */}\n

\n \n

\n\n {/* Bulk */}\n

\n \n

\n One per line, or comma/space separated. Duplicates and invalid\n addresses are filtered out.\n

\n\n

\n\n {/* ── Optional JSON fields ── */}\n

\n ▸ Optional: memberInfo / adminInfo / relationship (JSON)\n

\n Member Info (JSON)\n \n

\n Admin Info (JSON)\n \n

\n Relationship (JSON)\n \n

\n\n

\n \n

\n\n {/* Step 2 – preview (locked until form submitted) */}\n

Preview Recipients

Review parsed addresses before sending

\n Fill in step 1 and click \"Preview recipients\".\n

\n\n {/* Step 3 – results (locked until send) */}\n

Results

Delivery status per recipient

\n Results will appear here after sending.\n

\n ,\n );\n});\n\n// ══════════════════════════════════════════════════════════════\n// POST /preview — Parse emails, show preview table (Step 2)\n// ══════════════════════════════════════════════════════════════\napp.post(\"/preview\", async (c) => {\n const form = await c.req.formData();\n const singleEmail = (form.get(\"single_email\") as string || \"\").trim();\n const bulkEmails = (form.get(\"bulk_emails\") as string || \"\").trim();\n\n // Gather raw email strings\n const raw = bulkEmails\n ? bulkEmails.split(/[\\n,\\s]+/).map((s) => s.trim()).filter(Boolean)\n : singleEmail\n ? [singleEmail]\n : [];\n\n // Deduplicate & validate\n const seen = new Set();\n const valid: string[] = [];\n const invalid: string[] = [];\n\n const EMAIL_RE = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;\n for (const e of raw) {\n const lower = e.toLowerCase();\n if (seen.has(lower)) continue;\n seen.add(lower);\n if (EMAIL_RE.test(e)) valid.push(e);\n else invalid.push(e);\n }\n\n if (valid.length === 0 && invalid.length === 0) {\n return c.html(\n

\n ⚠️ No email addresses provided. Enter at least one email above.\n

,\n );\n }\n\n // Collect all other form fields (pass-through to send step)\n const fields: Record = {};\n for (const [k, v] of form.entries()) {\n if (k === \"single_email\" || k === \"bulk_emails\") continue;\n fields[k] = v as string;\n }\n const hiddenFields = Object.entries(fields).map(([k, v]) => (\n \n ));\n\n return c.html(\n <>\n {/* OOB: activate step-2 card */}\n

Preview Recipients

\n {valid.length} valid · {invalid.length} invalid ·{\" \"}\n {valid.length + invalid.length} total parsed\n

\n \n

\n {/* placeholder for primary target */}\n \n ,\n );\n});\n\n// ── Preview table component ────────────────────────────────────\nfunction PreviewTable({\n valid,\n invalid,\n hiddenFields,\n}: {\n valid: string[];\n invalid: string[];\n hiddenFields: any;\n}) {\n return (\n <>\n {/* Valid */}\n {valid.length > 0 && (\n

\n \n ✅ Valid addresses ({valid.length})\n \n

\n \n \n \n \n \n \n \n \n \n {valid.map((email, i) => (\n \n \n \n \n \n ))}\n \n

#	Email	Status
{i + 1}	{email}	\n will send\n

\n )}\n\n {/* Invalid */}\n {invalid.length > 0 && (\n

\n \n ❌ Invalid / skipped ({invalid.length})\n \n

\n \n \n \n \n \n \n \n \n \n {invalid.map((e, i) => (\n \n \n \n \n \n ))}\n \n

#	Value	Reason
{i + 1}	{e}	Not a valid email

\n )}\n\n {valid.length === 0\n ? (\n

\n No valid email addresses — fix the addresses above and try again.\n

\n )\n : (\n \n {hiddenFields}\n {valid.map((email) => (\n \n ))}\n

\n Ready to send {valid.length}{\" \"}\n invitation{valid.length !== 1 ? \"s\" : \"\"}\n {invalid.length > 0 && ` (${invalid.length} skipped)`}.\n

\n \n

\n \n )}\n \n );\n}\n\n// ══════════════════════════════════════════════════════════════\n// POST /send — Send invitations, stream results (Step 3)\n// ══════════════════════════════════════════════════════════════\napp.post(\"/send\", async (c) => {\n const oauthToken = getOAuthToken(c);\n const form = await c.req.formData();\n const emails = form.getAll(\"email\") as string[];\n const groupId = (form.get(\"groupId\") as string || \"\").trim();\n const model = (form.get(\"model\") as string || \"\").trim();\n const type = (form.get(\"type\") as string) || \"emailLink\";\n const lang = (form.get(\"language\") as string) || \"en\";\n const perms = (form.get(\"permissions\") as string || \"\").trim();\n\n // Optional JSON fields\n const parseJsonField = (key: string): any | undefined => {\n const raw = (form.get(key) as string || \"\").trim();\n if (!raw) return undefined;\n try {\n return JSON.parse(raw);\n } catch {\n return raw;\n }\n };\n const memberInfo = parseJsonField(\"memberInfo\");\n const adminInfo = parseJsonField(\"adminInfo\");\n const relationship = parseJsonField(\"relationship\");\n\n if (!emails.length) {\n return c.html(\n

\n No emails provided.\n

,\n );\n }\n\n type InvResult = {\n email: string;\n status: \"ok\" | \"fail\";\n invitationId?: string;\n error?: string;\n };\n const results: InvResult[] = [];\n\n for (const email of emails) {\n const invParams: Record = {\n groupId,\n model,\n type,\n channel: email,\n language: lang,\n };\n if (perms) invParams.permissions = perms;\n if (memberInfo) {\n invParams.memberInfo = typeof memberInfo === \"string\"\n ? memberInfo\n : JSON.stringify(memberInfo);\n }\n if (adminInfo) {\n invParams.adminInfo = typeof adminInfo === \"string\"\n ? adminInfo\n : JSON.stringify(adminInfo);\n }\n if (relationship) {\n invParams.relationship = typeof relationship === \"string\"\n ? relationship\n : JSON.stringify(relationship);\n }\n\n try {\n const r = await makeGigyaRequest(\n \"accounts.groups.invitation.send\",\n invParams,\n oauthToken,\n );\n results.push({\n email,\n status: \"ok\",\n invitationId: r.invitationId || r.id,\n });\n } catch (e: any) {\n // Try to extract a clean Gigya errorDetails from the raw message\n let errMsg = e.message as string;\n try {\n const jsonStart = errMsg.indexOf(\"{\");\n if (jsonStart !== -1) {\n const parsed = JSON.parse(errMsg.slice(jsonStart));\n errMsg = parsed.errorDetails || parsed.errorMessage || errMsg;\n }\n } catch { /* keep raw */ }\n results.push({ email, status: \"fail\", error: errMsg });\n }\n }\n\n const ok = results.filter((r) => r.status === \"ok\").length;\n const fail = results.filter((r) => r.status === \"fail\").length;\n const pct = results.length ? Math.round((ok / results.length) * 100) : 0;\n\n return c.html(\n <>\n {/* OOB: mark step-2 done, activate step-3 */}\n

✓

Preview Recipients

{results.length} processed

\n\n {/* Step-3 results inline */}\n \n ,\n );\n});\n\n// ── Results panel ──────────────────────────────────────────────\nfunction ResultsPanel({\n results,\n ok,\n fail,\n pct,\n}: {\n results: Array<\n {\n email: string;\n status: \"ok\" | \"fail\";\n invitationId?: string;\n error?: string;\n }\n >;\n ok: number;\n fail: number;\n pct: number;\n}) {\n return (\n

\n {/* Summary banner */}\n \n {fail === 0 ? \"🎉\" : \"⚠️\"}\n

\n {fail === 0 ? \"All invitations sent!\" : \"Completed with errors\"}\n

\n {ok} sent · {fail} failed · {results.length} total\n

{pct}%

\n\n {/* Per-email rows */}\n

\n \n \n \n \n \n \n \n \n \n \n {results.map((r, i) => (\n \n \n \n \n \n \n ))}\n \n

#	Email	Invitation ID	Status
{i + 1}	{r.email}	\n {r.invitationId \|\|\n (r.error\n ? {r.error}\n : \"—\")}\n	\n \n {r.status === \"ok\" ? \"✓ sent\" : \"✗ failed\"}\n \n

\n\n {/* Actions */}\n

\n ← Back to Group Manager\n Send more invitations\n

\n );\n}\n\nexport default app.fetch;","deleted","label","build-invitations",[182,164],"groupmanager","permalink","https://www.val.town/x/dinavinter/gigya/code/groupmanager/invitation-client.tsx","extension","actionData","errors"]