diff --git a/shared/components/rstack-identity.ts b/shared/components/rstack-identity.ts
index 7781f22..31313b3 100644
--- a/shared/components/rstack-identity.ts
+++ b/shared/components/rstack-identity.ts
@@ -413,29 +413,7 @@ export class RStackIdentity extends HTMLElement {
${notifsHTML}
-
-
+
@@ -488,13 +466,6 @@ export class RStackIdentity extends HTMLElement {
el.addEventListener("click", (e) => {
e.stopPropagation();
const action = (el as HTMLElement).dataset.action;
- if (action === "toggle-account") {
- const submenu = this.#shadow.getElementById("account-submenu")!;
- const arrow = (el as HTMLElement).querySelector(".submenu-arrow")!;
- submenu.classList.toggle("open");
- arrow.textContent = submenu.classList.contains("open") ? "▾" : "▸";
- return;
- }
dropdown.classList.remove("open");
if (action === "signout") {
clearSession();
@@ -503,45 +474,13 @@ export class RStackIdentity extends HTMLElement {
this.#notifications = [];
this.#render();
this.dispatchEvent(new CustomEvent("auth-change", { bubbles: true, composed: true }));
- } else if (action === "add-email") {
- this.#showAddEmailModal();
- } else if (action === "add-device") {
- this.#showAddDeviceModal();
- } else if (action === "add-recovery") {
- this.#showAddRecoveryModal();
+ } else if (action === "my-account") {
+ this.#showAccountModal();
} else if (action === "my-spaces") {
this.#showSpacesModal();
}
});
});
-
- // Theme toggle
- const themeToggle = this.#shadow.getElementById("theme-toggle") as HTMLInputElement;
- if (themeToggle) {
- const currentTheme = localStorage.getItem("canvas-theme") || "dark";
- themeToggle.checked = currentTheme === "dark";
- themeToggle.addEventListener("change", (e) => {
- e.stopPropagation();
- const newTheme = themeToggle.checked ? "dark" : "light";
- localStorage.setItem("canvas-theme", newTheme);
- document.body.setAttribute("data-theme", newTheme);
- document.querySelectorAll(".rstack-header, .rstack-tab-row").forEach(el => el.setAttribute("data-theme", newTheme));
- this.dispatchEvent(new CustomEvent("theme-change", { bubbles: true, composed: true, detail: { theme: newTheme } }));
- this.#render();
- });
- }
-
- // Backup toggle
- const backupToggle = this.#shadow.getElementById("backup-toggle") as HTMLInputElement;
- if (backupToggle) {
- backupToggle.checked = isEncryptedBackupEnabled();
- backupToggle.addEventListener("change", (e) => {
- e.stopPropagation();
- const enabled = backupToggle.checked;
- setEncryptedBackupEnabled(enabled);
- this.dispatchEvent(new CustomEvent("backup-toggle", { bubbles: true, composed: true, detail: { enabled } }));
- });
- }
} else {
this.#shadow.innerHTML = `
@@ -761,54 +700,295 @@ export class RStackIdentity extends HTMLElement {
render();
}
- // ── Settings modals ──
+ // ── Account modal (consolidated) ──
- #showAddEmailModal(): void {
- if (document.querySelector(".rstack-auth-overlay")) return;
+ #showAccountModal(): void {
+ if (document.querySelector(".rstack-account-overlay")) return;
const overlay = document.createElement("div");
- overlay.className = "rstack-auth-overlay";
- let step: "input" | "verify" = "input";
- let emailAddr = "";
+ overlay.className = "rstack-account-overlay";
- const render = () => {
- overlay.innerHTML = step === "input" ? `
-
-
-
-
Add Email
-
Link an email for notifications and account recovery.
-
-
-
-
-
-
-
-
Verify Email
-
Enter the 6-digit code sent to ${emailAddr.replace(/
-
-
-
-
-
-
-
+
+
My Account
+
+ ${renderEmailSection()}
+ ${renderDeviceSection()}
+ ${renderRecoverySection()}
+ ${renderAddressSection()}
+
+
+
+
${backupEnabled ? "Save to encrypted server" : "Save locally — you manage your own data"}
+
+
+
+
+
+
+
+
+
Link an email for notifications and account recovery.
+
+
+
+
+
+
+
Enter the 6-digit code sent to ${emailAddr.replace(/
+
+
+
+
+
+
+
+
+ ${body}
+
`;
+ };
+
+ const renderDeviceSection = () => {
+ const isOpen = openSection === "device";
+ const body = isOpen ? `
+
+
Register an additional passkey for backup access.
+
+
+
+
+
Each device you register can independently sign in to your account.
+
+
+ ${body}
+
`;
+ };
+
+ const renderRecoverySection = () => {
+ const isOpen = openSection === "recovery";
+ let body = "";
+ if (isOpen) {
+ if (guardiansLoading) {
+ body = ``;
+ } else {
+ const guardiansHTML = guardians.length > 0
+ ? `` : "";
+
+ const infoHTML = guardians.length < 2
+ ? `Add at least 2 trusted guardians to enable social recovery. Threshold: ${guardiansThreshold} of ${Math.max(guardians.length, 2)} needed to recover.
`
+ : `Social recovery is active. ${guardiansThreshold} of ${guardians.length} guardians needed to recover your account.
`;
+
+ body = `
+
+
Choose trusted contacts who can help recover your account.
+ ${guardians.length < 3 ? `
+
+
+
+
` : ""}
+ ${guardiansHTML}
+ ${infoHTML}
+
+
+
+ ${body}
+
`;
+ };
+
+ const renderAddressSection = () => {
+ const isOpen = openSection === "address";
+ let body = "";
+ if (isOpen) {
+ if (addressesLoading) {
+ body = ``;
+ } else {
+ const listHTML = addresses.length > 0
+ ? `` : "";
+
+ body = `
+ `;
+ }
+ }
+ return `
+
+
+ ${body}
+
`;
+ };
+
+ const loadGuardians = async () => {
+ if (guardiansLoaded || guardiansLoading) return;
+ guardiansLoading = true;
+ render();
+ try {
+ const res = await fetch(`${ENCRYPTID_URL}/api/guardians`, {
+ headers: { Authorization: `Bearer ${getAccessToken()}` },
+ });
+ if (res.ok) {
+ const data = await res.json();
+ guardians = data.guardians || [];
+ guardiansThreshold = data.threshold || 2;
+ }
+ } catch { /* offline */ }
+ guardiansLoaded = true;
+ guardiansLoading = false;
+ render();
+ };
+
+ const loadAddresses = async () => {
+ if (addressesLoaded || addressesLoading) return;
+ addressesLoading = true;
+ render();
+ try {
+ const res = await fetch(`${ENCRYPTID_URL}/api/user/addresses`, {
+ headers: { Authorization: `Bearer ${getAccessToken()}` },
+ });
+ if (res.ok) {
+ const data = await res.json();
+ addresses = (data.addresses || []).map((a: any) => {
+ try {
+ const decoded = JSON.parse(atob(a.ciphertext));
+ return { id: a.id, ...decoded };
+ } catch {
+ return { id: a.id, street: "", city: "", state: "", zip: "", country: "" };
+ }
+ });
+ }
+ } catch { /* offline */ }
+ addressesLoaded = true;
+ addressesLoading = false;
+ render();
+ };
+
+ const attachListeners = () => {
overlay.querySelector('[data-action="close"]')?.addEventListener("click", close);
overlay.addEventListener("click", (e) => { if (e.target === overlay) close(); });
+ // Section toggle headers
+ overlay.querySelectorAll("[data-section]").forEach(el => {
+ el.addEventListener("click", () => {
+ const section = (el as HTMLElement).dataset.section!;
+ openSection = openSection === section ? null : section;
+ if (openSection === "recovery") loadGuardians();
+ if (openSection === "address") loadAddresses();
+ render();
+ if (openSection === "email") setTimeout(() => (overlay.querySelector("#acct-email") as HTMLInputElement)?.focus(), 50);
+ if (openSection === "recovery") setTimeout(() => (overlay.querySelector("#acct-guardian-name") as HTMLInputElement)?.focus(), 50);
+ });
+ });
+
+ // Email: send code
overlay.querySelector('[data-action="send-code"]')?.addEventListener("click", async () => {
- const input = overlay.querySelector("#s-email") as HTMLInputElement;
- const err = overlay.querySelector("#s-error") as HTMLElement;
+ const input = overlay.querySelector("#acct-email") as HTMLInputElement;
+ const err = overlay.querySelector("#email-error") as HTMLElement;
const btn = overlay.querySelector('[data-action="send-code"]') as HTMLButtonElement;
emailAddr = input.value.trim();
if (!emailAddr || !emailAddr.includes("@")) { err.textContent = "Enter a valid email address."; input.focus(); return; }
@@ -820,20 +1000,21 @@ export class RStackIdentity extends HTMLElement {
body: JSON.stringify({ email: emailAddr }),
});
if (!res.ok) throw new Error((await res.json().catch(() => ({}))).error || "Failed to send verification code");
- step = "verify"; render();
- setTimeout(() => (overlay.querySelector("#s-code") as HTMLInputElement)?.focus(), 50);
+ emailStep = "verify"; render();
+ setTimeout(() => (overlay.querySelector("#acct-code") as HTMLInputElement)?.focus(), 50);
} catch (e: any) {
btn.disabled = false; btn.innerHTML = "Send Verification Code";
err.textContent = e.message;
}
});
- overlay.querySelector('[data-action="back"]')?.addEventListener("click", () => { step = "input"; render(); });
+ overlay.querySelector('[data-action="email-back"]')?.addEventListener("click", () => { emailStep = "input"; render(); });
- overlay.querySelector('[data-action="verify"]')?.addEventListener("click", async () => {
- const input = overlay.querySelector("#s-code") as HTMLInputElement;
- const err = overlay.querySelector("#s-error") as HTMLElement;
- const btn = overlay.querySelector('[data-action="verify"]') as HTMLButtonElement;
+ // Email: verify code
+ overlay.querySelector('[data-action="verify-email"]')?.addEventListener("click", async () => {
+ const input = overlay.querySelector("#acct-code") as HTMLInputElement;
+ const err = overlay.querySelector("#email-error") as HTMLElement;
+ const btn = overlay.querySelector('[data-action="verify-email"]') as HTMLButtonElement;
const code = input.value.trim();
if (!code) { err.textContent = "Enter the verification code."; input.focus(); return; }
btn.disabled = true; btn.innerHTML = ' Verifying...';
@@ -852,178 +1033,80 @@ export class RStackIdentity extends HTMLElement {
}
});
- overlay.querySelector("#s-email")?.addEventListener("keydown", (e) => {
+ // Email: enter key
+ overlay.querySelector("#acct-email")?.addEventListener("keydown", (e) => {
if ((e as KeyboardEvent).key === "Enter") (overlay.querySelector('[data-action="send-code"]') as HTMLElement)?.click();
});
- overlay.querySelector("#s-code")?.addEventListener("keydown", (e) => {
- if ((e as KeyboardEvent).key === "Enter") (overlay.querySelector('[data-action="verify"]') as HTMLElement)?.click();
+ overlay.querySelector("#acct-code")?.addEventListener("keydown", (e) => {
+ if ((e as KeyboardEvent).key === "Enter") (overlay.querySelector('[data-action="verify-email"]') as HTMLElement)?.click();
});
- };
- document.body.appendChild(overlay);
- render();
- }
+ // Device: register passkey
+ overlay.querySelector('[data-action="register-device"]')?.addEventListener("click", async () => {
+ const err = overlay.querySelector("#device-error") as HTMLElement;
+ const btn = overlay.querySelector('[data-action="register-device"]') as HTMLButtonElement;
+ err.textContent = "";
+ btn.disabled = true; btn.innerHTML = ' Registering...';
+ try {
+ const startRes = await fetch(`${ENCRYPTID_URL}/api/account/device/start`, {
+ method: "POST",
+ headers: { "Content-Type": "application/json", Authorization: `Bearer ${getAccessToken()}` },
+ });
+ if (!startRes.ok) throw new Error((await startRes.json().catch(() => ({}))).error || "Failed to start device registration");
+ const { options: serverOptions, userId } = await startRes.json();
+ const username = session.claims.username || "";
- #showAddDeviceModal(): void {
- if (document.querySelector(".rstack-auth-overlay")) return;
- const session = getSession();
- if (!session) return;
- const overlay = document.createElement("div");
- overlay.className = "rstack-auth-overlay";
-
- overlay.innerHTML = `
-
-
-
-
Add Second Device
-
Register an additional passkey for backup access. Use this on a different device or browser.
-
-
-
-
-
Each device you register can independently sign in to your account.
-
Add at least 2 trusted guardians to enable social recovery. Threshold: ${threshold} of ${Math.max(guardians.length, 2)} needed to recover.
`
- : `Social recovery is active. ${threshold} of ${guardians.length} guardians needed to recover your account.
`;
-
- overlay.innerHTML = `
-
-
-
-
Social Recovery
-
Choose trusted contacts who can help recover your account.
- ${loading ? '
Loading guardians...
' : `
- ${guardians.length < 3 ? `
-
-
-
-
` : ""}
- ${guardiansHTML}
- ${infoHTML}
- `}
-
-