@microcosmmoney/portal-react 3.7.0 → 3.8.0

package/dist/components/profile/email-change-card.d.ts

@@ -0,0 +1,4 @@
+export interface MicrocosmEmailChangeCardProps {
+    onSuccess?: (newEmail: string) => void;
+}
+export declare function MicrocosmEmailChangeCard({ onSuccess }?: MicrocosmEmailChangeCardProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/profile/email-change-card.js

@@ -0,0 +1,49 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MicrocosmEmailChangeCard = MicrocosmEmailChangeCard;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const auth_react_1 = require("@microcosmmoney/auth-react");
+const terminal_1 = require("../terminal");
+function MicrocosmEmailChangeCard({ onSuccess } = {}) {
+    const { requestEmailChange, verifyEmailChange, loading, error, clearError } = (0, auth_react_1.useEmailVerification)();
+    const [step, setStep] = (0, react_1.useState)('idle');
+    const [newEmail, setNewEmail] = (0, react_1.useState)('');
+    const [password, setPassword] = (0, react_1.useState)('');
+    const [code, setCode] = (0, react_1.useState)('');
+    const handleRequest = async () => {
+        if (!newEmail || !password)
+            return;
+        clearError();
+        try {
+            await requestEmailChange(newEmail, password);
+            setStep('verify');
+        }
+        catch { }
+    };
+    const handleVerify = async () => {
+        if (code.length !== 6)
+            return;
+        clearError();
+        try {
+            await verifyEmailChange(newEmail, code);
+            setStep('idle');
+            const finalEmail = newEmail;
+            setNewEmail('');
+            setPassword('');
+            setCode('');
+            onSuccess?.(finalEmail);
+        }
+        catch { }
+    };
+    if (step === 'idle') {
+        return ((0, jsx_runtime_1.jsxs)(terminal_1.TerminalCard, { children: [(0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-2 mb-3", children: (0, jsx_runtime_1.jsx)("span", { className: "text-sm text-neutral-300 font-medium tracking-wider", children: "CHANGE EMAIL" }) }), (0, jsx_runtime_1.jsx)("p", { className: "text-xs text-neutral-400 mb-3", children: "Update your email address. A verification code will be sent to the new email." }), (0, jsx_runtime_1.jsx)("button", { onClick: () => setStep('form'), className: "px-3 py-1.5 border border-neutral-700 text-neutral-300 hover:bg-neutral-800 rounded text-xs", children: "Change Email" })] }));
+    }
+    return ((0, jsx_runtime_1.jsx)(terminal_1.TerminalCard, { children: (0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-2", children: (0, jsx_runtime_1.jsx)("span", { className: "text-sm text-neutral-300 font-medium tracking-wider", children: "CHANGE EMAIL" }) }), error && ((0, jsx_runtime_1.jsx)("div", { className: "p-2 bg-red-900/20 border border-red-800 rounded text-xs text-red-300", children: error })), step === 'form' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { type: "email", value: newEmail, onChange: (e) => setNewEmail(e.target.value), placeholder: "New email address", className: "w-full bg-neutral-800 border border-neutral-700 text-white p-2 rounded text-sm outline-none focus:border-cyan-500" }), (0, jsx_runtime_1.jsx)("input", { type: "password", value: password, onChange: (e) => setPassword(e.target.value), placeholder: "Current password", className: "w-full bg-neutral-800 border border-neutral-700 text-white p-2 rounded text-sm outline-none focus:border-cyan-500" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2", children: [(0, jsx_runtime_1.jsx)("button", { onClick: () => {
+                                        setStep('idle');
+                                        setNewEmail('');
+                                        setPassword('');
+                                        clearError();
+                                    }, className: "flex-1 px-3 py-1.5 text-neutral-500 hover:text-neutral-300 text-xs", children: "Cancel" }), (0, jsx_runtime_1.jsx)("button", { onClick: handleRequest, disabled: loading || !newEmail || !password, className: "flex-1 px-3 py-1.5 bg-cyan-700 hover:bg-cyan-600 text-white rounded text-xs disabled:opacity-50", children: loading ? 'Sending...' : 'Send Code' })] })] })), step === 'verify' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("p", { className: "text-xs text-neutral-400", children: ["Enter the 6-digit code sent to ", (0, jsx_runtime_1.jsx)("span", { className: "text-cyan-400", children: newEmail })] }), (0, jsx_runtime_1.jsx)("input", { type: "text", value: code, onChange: (e) => setCode(e.target.value.replace(/\D/g, '').slice(0, 6)), placeholder: "000000", className: "w-full bg-neutral-800 border border-neutral-700 text-white p-2 rounded text-center text-lg font-mono tracking-[0.5em] outline-none focus:border-cyan-500", maxLength: 6 }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2", children: [(0, jsx_runtime_1.jsx)("button", { onClick: () => { setStep('form'); setCode(''); clearError(); }, className: "flex-1 px-3 py-1.5 text-neutral-500 hover:text-neutral-300 text-xs", children: "Back" }), (0, jsx_runtime_1.jsx)("button", { onClick: handleVerify, disabled: loading || code.length !== 6, className: "flex-1 px-3 py-1.5 bg-cyan-700 hover:bg-cyan-600 text-white rounded text-xs disabled:opacity-50", children: loading ? 'Verifying...' : 'Verify' })] })] }))] }) }));
+}

package/dist/components/profile/profile-page.d.ts

@@ -1,6 +1,7 @@
+import { type ReactNode } from 'react';
 export interface MicrocosmProfilePageProps {
     basePath?: string;
     onNavigate?: (path: string) => void;
-    mainPortalSettingsUrl?: string;
+    walletSection?: ReactNode;
 }
-export declare function MicrocosmProfilePage({ mainPortalSettingsUrl, }?: MicrocosmProfilePageProps): import("react/jsx-runtime").JSX.Element;
+export declare function MicrocosmProfilePage({ walletSection, }?: MicrocosmProfilePageProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/profile/profile-page.js

@@ -6,6 +6,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const auth_react_1 = require("@microcosmmoney/auth-react");
 const terminal_1 = require("../terminal");
+const email_change_card_1 = require("./email-change-card");
+const two_factor_settings_1 = require("./two-factor-settings");
 const API_BASE = 'https://api.microcosm.money/v1';
 const LEVEL_INFO = {
     miner: { label: 'Miner', description: 'Registered user', color: 'text-white' },
@@ -14,7 +16,7 @@ const LEVEL_INFO = {
     warden: { label: 'Warden', description: 'Auto-minted Sector NFT (≥10 Matrix)', color: 'text-cyan-400' },
     admiral: { label: 'Admiral', description: 'Auto-minted System NFT (≥10 Sector)', color: 'text-red-400' },
 };
-function MicrocosmProfilePage({ mainPortalSettingsUrl = '/user-system/profile', } = {}) {
+function MicrocosmProfilePage({ walletSection, } = {}) {
     const api = (0, auth_react_1.useMicrocosmApi)();
     const { getAccessToken } = (0, auth_react_1.useMicrocosmContext)();
     const authState = (0, auth_react_1.useAuth)();
@@ -27,6 +29,8 @@ function MicrocosmProfilePage({ mainPortalSettingsUrl = '/user-system/profile',
     const [saving, setSaving] = (0, react_1.useState)(false);
     const [uploadingAvatar, setUploadingAvatar] = (0, react_1.useState)(false);
     const [error, setError] = (0, react_1.useState)(null);
+    const [resendingVerification, setResendingVerification] = (0, react_1.useState)(false);
+    const [resendMessage, setResendMessage] = (0, react_1.useState)(null);
     const fileInputRef = (0, react_1.useRef)(null);
     const loadProfile = (0, react_1.useCallback)(async () => {
         setLoading(true);
@@ -130,5 +134,20 @@ function MicrocosmProfilePage({ mainPortalSettingsUrl = '/user-system/profile',
     return ((0, jsx_runtime_1.jsxs)("div", { className: "max-w-7xl mx-auto px-3 py-4 space-y-3 xs:px-4 xs:space-y-4 sm:px-6 sm:py-6 sm:space-y-6 font-mono", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h1", { className: "text-lg sm:text-2xl font-bold text-white tracking-wider", children: "Profile" }), (0, jsx_runtime_1.jsx)("p", { className: "text-xs sm:text-sm text-neutral-400", children: "Your account information" })] }), error && ((0, jsx_runtime_1.jsx)("div", { className: "p-3 bg-red-900/20 border border-red-800 rounded text-sm text-red-300", children: error })), (0, jsx_runtime_1.jsxs)(terminal_1.TerminalCard, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-start gap-4 mb-6 pb-6 border-b border-neutral-700", children: [(0, jsx_runtime_1.jsxs)("div", { className: "relative group", children: [profile?.avatar_url ? ((0, jsx_runtime_1.jsx)("img", { src: profile.avatar_url, alt: "", className: "h-20 w-20 rounded bg-neutral-800 border border-neutral-700 object-cover" })) : ((0, jsx_runtime_1.jsx)("div", { className: "h-20 w-20 rounded bg-cyan-400/20 border border-cyan-400/30 flex items-center justify-center text-cyan-400 text-3xl font-bold", children: displayName.charAt(0).toUpperCase() })), (0, jsx_runtime_1.jsx)("button", { onClick: () => fileInputRef.current?.click(), disabled: uploadingAvatar, className: "absolute inset-0 bg-black/50 rounded opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center text-white text-xs disabled:opacity-30", children: uploadingAvatar ? '...' : 'edit' }), (0, jsx_runtime_1.jsx)("input", { ref: fileInputRef, type: "file", accept: "image/jpeg,image/png,image/gif,image/webp", onChange: handleAvatarChange, className: "hidden" })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1", children: editing ? ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-3", children: [(0, jsx_runtime_1.jsx)("input", { type: "text", value: editName, onChange: (e) => setEditName(e.target.value), className: "w-full bg-neutral-800 border border-neutral-600 rounded px-3 py-2 text-white text-sm focus:outline-none focus:border-cyan-400", placeholder: "Display name" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2", children: [(0, jsx_runtime_1.jsx)("button", { onClick: handleSave, disabled: saving, className: "px-3 py-1.5 bg-cyan-700 hover:bg-cyan-600 text-white rounded text-sm disabled:opacity-50", children: saving ? 'Saving...' : 'Save' }), (0, jsx_runtime_1.jsx)("button", { onClick: () => {
                                                         setEditName(profile?.display_name || '');
                                                         setEditing(false);
-                                                    }, disabled: saving, className: "px-3 py-1.5 border border-neutral-700 text-neutral-400 hover:bg-neutral-800 rounded text-sm", children: "Cancel" })] })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-lg text-white", children: displayName }), (0, jsx_runtime_1.jsx)("button", { onClick: () => setEditing(true), className: "text-xs text-neutral-500 hover:text-cyan-400", children: "[edit]" })] }), (0, jsx_runtime_1.jsx)("div", { className: "text-sm text-neutral-400 mt-1", children: profile?.email || '(no email)' }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2 mt-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "px-2 py-0.5 bg-neutral-800 text-neutral-300 rounded text-xs border border-neutral-700", children: profile?.role || 'user' }), profile?.email_verified ? ((0, jsx_runtime_1.jsx)("span", { className: "px-2 py-0.5 bg-green-900/30 text-green-400 rounded text-xs border border-green-800", children: "verified" })) : ((0, jsx_runtime_1.jsx)("span", { className: "px-2 py-0.5 bg-red-900/30 text-red-400 rounded text-xs border border-red-800", children: "unverified" }))] })] })) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-800 rounded p-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-xs text-neutral-400 tracking-wider mb-1", children: "UID" }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs text-white font-mono break-all", children: profile?.uid || userInfo?.uid || '-' })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-800 rounded p-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-xs text-neutral-400 tracking-wider mb-1", children: "Short ID" }), (0, jsx_runtime_1.jsx)("div", { className: "text-sm text-white font-mono", children: profile?.short_id || '-' })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-800 rounded p-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-xs text-neutral-400 tracking-wider mb-1", children: "Created" }), (0, jsx_runtime_1.jsx)("div", { className: "text-sm text-white", children: formatDate(profile?.created_at) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-800 rounded p-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-xs text-neutral-400 tracking-wider mb-1", children: "Last Login" }), (0, jsx_runtime_1.jsx)("div", { className: "text-sm text-white", children: formatDate(profile?.last_login_at) })] })] })] }), levelData && ((0, jsx_runtime_1.jsx)(terminal_1.TerminalCard, { title: "Level Status", children: (0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between p-4 bg-neutral-800 rounded", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "text-xs text-neutral-400 tracking-wider mb-1", children: "CURRENT LEVEL" }), (0, jsx_runtime_1.jsx)("div", { className: `text-xl font-bold ${lvlInfo.color}`, children: lvlInfo.label }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs text-neutral-500 mt-1", children: lvlInfo.description })] }), (0, jsx_runtime_1.jsxs)("div", { className: "text-right", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-xs text-neutral-400 tracking-wider mb-1", children: "HOLDINGS" }), (0, jsx_runtime_1.jsxs)("div", { className: "text-xs text-white font-mono", children: ["S:", levelData.holdings?.station ?? 0, " M:", levelData.holdings?.matrix ?? 0, " Se:", levelData.holdings?.sector ?? 0, " Sy:", levelData.holdings?.system ?? 0] })] })] }), levelData.next_level_requirement && ((0, jsx_runtime_1.jsxs)("div", { className: "p-4 bg-neutral-800 rounded", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between items-center mb-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-xs text-neutral-400 tracking-wider", children: "PROGRESS" }), (0, jsx_runtime_1.jsxs)("span", { className: "text-white text-sm font-mono", children: [levelData.progress_percent ?? 0, "%"] })] }), (0, jsx_runtime_1.jsx)("div", { className: "w-full bg-neutral-900 rounded-full h-2", children: (0, jsx_runtime_1.jsx)("div", { className: "h-2 rounded-full bg-cyan-400 transition-all", style: { width: `${Math.min(levelData.progress_percent ?? 0, 100)}%` } }) }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs text-neutral-500 mt-2", children: levelData.next_level_requirement.description || '' }), (0, jsx_runtime_1.jsxs)("div", { className: "text-xs text-neutral-400 mt-1", children: [levelData.next_level_requirement.have, "/", levelData.next_level_requirement.need, ' ', levelData.next_level_requirement.tier, " \u2192 ", ' ', (0, jsx_runtime_1.jsx)("span", { className: "text-white", children: levelData.next_rank })] })] }))] }) })), (0, jsx_runtime_1.jsx)(terminal_1.TerminalCard, { title: "Advanced Settings", children: (0, jsx_runtime_1.jsxs)("div", { className: "space-y-3 text-sm text-neutral-400", children: [(0, jsx_runtime_1.jsx)("p", { children: "Email verification, email change, two-factor authentication, and wallet management are available on the main portal:" }), (0, jsx_runtime_1.jsx)("a", { href: mainPortalSettingsUrl, className: "inline-block px-3 py-1.5 border border-cyan-800 text-cyan-400 hover:bg-cyan-950 rounded text-sm", children: "Open main portal settings \u2192" })] }) }), (0, jsx_runtime_1.jsxs)(terminal_1.TerminalCard, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "text-neutral-400 text-sm mb-3", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-cyan-400", children: "!" }), " Security"] }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-1 text-sm text-neutral-400", children: [(0, jsx_runtime_1.jsx)("p", { children: "- Keep your account credentials secure" }), (0, jsx_runtime_1.jsx)("p", { children: "- Change password periodically via main portal" }), (0, jsx_runtime_1.jsx)("p", { children: "- Report suspicious activity immediately" }), (0, jsx_runtime_1.jsx)("p", { children: "- Verify your email to receive important notifications" })] })] })] }));
+                                                    }, disabled: saving, className: "px-3 py-1.5 border border-neutral-700 text-neutral-400 hover:bg-neutral-800 rounded text-sm", children: "Cancel" })] })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-lg text-white", children: displayName }), (0, jsx_runtime_1.jsx)("button", { onClick: () => setEditing(true), className: "text-xs text-neutral-500 hover:text-cyan-400", children: "[edit]" })] }), (0, jsx_runtime_1.jsx)("div", { className: "text-sm text-neutral-400 mt-1", children: profile?.email || '(no email)' }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2 mt-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "px-2 py-0.5 bg-neutral-800 text-neutral-300 rounded text-xs border border-neutral-700", children: profile?.role || 'user' }), profile?.email_verified ? ((0, jsx_runtime_1.jsx)("span", { className: "px-2 py-0.5 bg-green-900/30 text-green-400 rounded text-xs border border-green-800", children: "verified" })) : ((0, jsx_runtime_1.jsx)("span", { className: "px-2 py-0.5 bg-red-900/30 text-red-400 rounded text-xs border border-red-800", children: "unverified" }))] })] })) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-800 rounded p-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-xs text-neutral-400 tracking-wider mb-1", children: "UID" }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs text-white font-mono break-all", children: profile?.uid || userInfo?.uid || '-' })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-800 rounded p-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-xs text-neutral-400 tracking-wider mb-1", children: "Short ID" }), (0, jsx_runtime_1.jsx)("div", { className: "text-sm text-white font-mono", children: profile?.short_id || '-' })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-800 rounded p-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-xs text-neutral-400 tracking-wider mb-1", children: "Created" }), (0, jsx_runtime_1.jsx)("div", { className: "text-sm text-white", children: formatDate(profile?.created_at) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-800 rounded p-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-xs text-neutral-400 tracking-wider mb-1", children: "Last Login" }), (0, jsx_runtime_1.jsx)("div", { className: "text-sm text-white", children: formatDate(profile?.last_login_at) })] })] })] }), levelData && ((0, jsx_runtime_1.jsx)(terminal_1.TerminalCard, { title: "Level Status", children: (0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between p-4 bg-neutral-800 rounded", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "text-xs text-neutral-400 tracking-wider mb-1", children: "CURRENT LEVEL" }), (0, jsx_runtime_1.jsx)("div", { className: `text-xl font-bold ${lvlInfo.color}`, children: lvlInfo.label }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs text-neutral-500 mt-1", children: lvlInfo.description })] }), (0, jsx_runtime_1.jsxs)("div", { className: "text-right", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-xs text-neutral-400 tracking-wider mb-1", children: "HOLDINGS" }), (0, jsx_runtime_1.jsxs)("div", { className: "text-xs text-white font-mono", children: ["S:", levelData.holdings?.station ?? 0, " M:", levelData.holdings?.matrix ?? 0, " Se:", levelData.holdings?.sector ?? 0, " Sy:", levelData.holdings?.system ?? 0] })] })] }), levelData.next_level_requirement && ((0, jsx_runtime_1.jsxs)("div", { className: "p-4 bg-neutral-800 rounded", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between items-center mb-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-xs text-neutral-400 tracking-wider", children: "PROGRESS" }), (0, jsx_runtime_1.jsxs)("span", { className: "text-white text-sm font-mono", children: [levelData.progress_percent ?? 0, "%"] })] }), (0, jsx_runtime_1.jsx)("div", { className: "w-full bg-neutral-900 rounded-full h-2", children: (0, jsx_runtime_1.jsx)("div", { className: "h-2 rounded-full bg-cyan-400 transition-all", style: { width: `${Math.min(levelData.progress_percent ?? 0, 100)}%` } }) }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs text-neutral-500 mt-2", children: levelData.next_level_requirement.description || '' }), (0, jsx_runtime_1.jsxs)("div", { className: "text-xs text-neutral-400 mt-1", children: [levelData.next_level_requirement.have, "/", levelData.next_level_requirement.need, ' ', levelData.next_level_requirement.tier, " \u2192 ", ' ', (0, jsx_runtime_1.jsx)("span", { className: "text-white", children: levelData.next_rank })] })] }))] }) })), (0, jsx_runtime_1.jsx)(terminal_1.TerminalCard, { title: "Email Verification", children: (0, jsx_runtime_1.jsxs)("div", { className: "space-y-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "text-xs text-neutral-400 tracking-wider mb-1", children: "STATUS" }), profile?.email_verified ? ((0, jsx_runtime_1.jsx)("div", { className: "text-green-400 text-sm", children: "Verified" })) : ((0, jsx_runtime_1.jsx)("div", { className: "text-red-400 text-sm", children: "Unverified" }))] }), !profile?.email_verified && ((0, jsx_runtime_1.jsx)("button", { onClick: async () => {
+                                        setResendingVerification(true);
+                                        setResendMessage(null);
+                                        try {
+                                            await api.post('/users/me/resend-verification', {});
+                                            setResendMessage('Verification email sent — check your inbox');
+                                        }
+                                        catch (e) {
+                                            setResendMessage(e instanceof Error ? e.message : 'Failed to send');
+                                        }
+                                        finally {
+                                            setResendingVerification(false);
+                                        }
+                                    }, disabled: resendingVerification, className: "px-3 py-1.5 border border-cyan-800 text-cyan-400 hover:bg-cyan-950 rounded text-xs disabled:opacity-50", children: resendingVerification ? 'Sending...' : 'Resend Email' }))] }), resendMessage && ((0, jsx_runtime_1.jsx)("div", { className: "text-xs text-cyan-400", children: resendMessage }))] }) }), (0, jsx_runtime_1.jsx)(email_change_card_1.MicrocosmEmailChangeCard, { onSuccess: (newEmail) => {
+                    setProfile(prev => (prev ? { ...prev, email: newEmail, email_verified: true } : prev));
+                } }), (0, jsx_runtime_1.jsx)(two_factor_settings_1.MicrocosmTwoFactorSettings, {}), walletSection, (0, jsx_runtime_1.jsxs)(terminal_1.TerminalCard, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "text-neutral-400 text-sm mb-3", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-cyan-400", children: "!" }), " Security"] }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-1 text-sm text-neutral-400", children: [(0, jsx_runtime_1.jsx)("p", { children: "- Keep your account credentials secure" }), (0, jsx_runtime_1.jsx)("p", { children: "- Change password periodically via main portal" }), (0, jsx_runtime_1.jsx)("p", { children: "- Report suspicious activity immediately" }), (0, jsx_runtime_1.jsx)("p", { children: "- Verify your email to receive important notifications" })] })] })] }));
 }

package/dist/components/profile/two-factor-settings.d.ts

@@ -0,0 +1,3 @@
+export interface MicrocosmTwoFactorSettingsProps {
+}
+export declare function MicrocosmTwoFactorSettings({}?: MicrocosmTwoFactorSettingsProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/profile/two-factor-settings.js

@@ -0,0 +1,73 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MicrocosmTwoFactorSettings = MicrocosmTwoFactorSettings;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const auth_react_1 = require("@microcosmmoney/auth-react");
+const terminal_1 = require("../terminal");
+function MicrocosmTwoFactorSettings({} = {}) {
+    const { status, setupData, loading, error, beginSetup, verifySetup, disable, clearError, clearSetup, } = (0, auth_react_1.useTwoFactor)();
+    const [step, setStep] = (0, react_1.useState)('idle');
+    const [verifyCode, setVerifyCode] = (0, react_1.useState)('');
+    const [disablePassword, setDisablePassword] = (0, react_1.useState)('');
+    const [showSecret, setShowSecret] = (0, react_1.useState)(false);
+    const [backupCodes, setBackupCodes] = (0, react_1.useState)(null);
+    const handleBegin = async () => {
+        clearError();
+        try {
+            await beginSetup();
+            setStep('qr');
+        }
+        catch { }
+    };
+    const handleVerify = async () => {
+        if (verifyCode.length !== 6)
+            return;
+        clearError();
+        try {
+            const codes = await verifySetup(verifyCode);
+            setVerifyCode('');
+            if (codes && codes.length > 0) {
+                setBackupCodes(codes);
+                setStep('backup');
+            }
+            else {
+                setStep('idle');
+            }
+        }
+        catch { }
+    };
+    const handleDisable = async () => {
+        if (!disablePassword)
+            return;
+        clearError();
+        try {
+            await disable(disablePassword);
+            setDisablePassword('');
+            setStep('idle');
+        }
+        catch { }
+    };
+    const copyBackupCodes = async () => {
+        if (!backupCodes)
+            return;
+        try {
+            await navigator.clipboard.writeText(backupCodes.join('\n'));
+        }
+        catch { }
+    };
+    if (loading && !status)
+        return null;
+    return ((0, jsx_runtime_1.jsxs)(terminal_1.TerminalCard, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between mb-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-2", children: (0, jsx_runtime_1.jsx)("span", { className: "text-sm text-neutral-300 font-medium tracking-wider", children: "TWO FACTOR AUTH" }) }), (0, jsx_runtime_1.jsx)("span", { className: `px-2 py-0.5 rounded text-xs ${status?.enabled ? 'bg-green-900/30 text-green-400 border border-green-800' : 'bg-neutral-800 text-neutral-400 border border-neutral-700'}`, children: status?.enabled ? 'enabled' : 'disabled' })] }), error && ((0, jsx_runtime_1.jsx)("div", { className: "p-2 bg-red-900/20 border border-red-800 rounded text-xs text-red-300 mb-3", children: error })), step === 'idle' && !status?.enabled && ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-3", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-xs text-neutral-400", children: "Add an extra layer of security using Google Authenticator or any TOTP app." }), (0, jsx_runtime_1.jsx)("button", { onClick: handleBegin, disabled: loading, className: "px-3 py-1.5 bg-cyan-700 hover:bg-cyan-600 text-white rounded text-xs disabled:opacity-50", children: loading ? 'Setting up...' : 'Enable 2FA' })] })), step === 'idle' && status?.enabled && ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-800 rounded p-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-xs text-neutral-400 mb-1", children: "STATUS" }), (0, jsx_runtime_1.jsxs)("div", { className: "text-green-400 text-sm", children: ["Active ", status.created_at ? `since ${new Date(status.created_at).toLocaleDateString()}` : ''] })] }), (0, jsx_runtime_1.jsx)("button", { onClick: () => setStep('disable'), className: "px-3 py-1.5 border border-red-900 text-red-400 hover:bg-red-950 rounded text-xs", children: "Disable 2FA" })] })), step === 'qr' && setupData && ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-xs text-neutral-400", children: "1. Scan this QR code with Google Authenticator or any TOTP app." }), setupData.qr_code && ((0, jsx_runtime_1.jsx)("div", { className: "flex justify-center bg-white rounded p-4", children: (0, jsx_runtime_1.jsx)("img", { src: setupData.qr_code.startsWith('data:') ? setupData.qr_code : `data:image/png;base64,${setupData.qr_code}`, alt: "2FA QR Code", className: "w-48 h-48" }) })), (0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-800 rounded p-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between mb-1", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-xs text-neutral-400", children: "MANUAL KEY" }), (0, jsx_runtime_1.jsx)("button", { onClick: () => setShowSecret(!showSecret), className: "text-neutral-500 hover:text-neutral-300 text-xs", children: showSecret ? 'hide' : 'show' })] }), (0, jsx_runtime_1.jsx)("code", { className: "text-xs text-cyan-400 break-all", children: showSecret ? setupData.secret : '••••••••••••••••' })] }), (0, jsx_runtime_1.jsx)("p", { className: "text-xs text-neutral-400", children: "2. Enter the 6-digit code from your app." }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2", children: [(0, jsx_runtime_1.jsx)("input", { type: "text", value: verifyCode, onChange: (e) => setVerifyCode(e.target.value.replace(/\D/g, '').slice(0, 6)), placeholder: "000000", className: "flex-1 bg-neutral-800 border border-neutral-700 text-white p-2 rounded text-center text-lg font-mono tracking-[0.5em] outline-none focus:border-cyan-500", maxLength: 6 }), (0, jsx_runtime_1.jsx)("button", { onClick: handleVerify, disabled: loading || verifyCode.length !== 6, className: "px-4 py-2 bg-cyan-700 hover:bg-cyan-600 text-white rounded text-xs disabled:opacity-50", children: loading ? 'Verifying...' : 'Verify' })] }), (0, jsx_runtime_1.jsx)("button", { onClick: () => {
+                            setStep('idle');
+                            setVerifyCode('');
+                            clearSetup();
+                        }, className: "w-full py-2 text-neutral-500 hover:text-neutral-300 text-xs", children: "Cancel" })] })), step === 'backup' && backupCodes && ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "bg-yellow-950/30 border border-yellow-900/50 rounded p-3", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-xs text-yellow-400 font-medium mb-1", children: "Save your backup codes" }), (0, jsx_runtime_1.jsx)("p", { className: "text-xs text-yellow-600", children: "These codes can be used to access your account if you lose your authenticator. Each code can only be used once. Store them safely." })] }), (0, jsx_runtime_1.jsx)("div", { className: "bg-neutral-800 rounded p-4 font-mono text-sm space-y-1", children: backupCodes.map((code, i) => ((0, jsx_runtime_1.jsx)("div", { className: "text-cyan-400", children: code }, i))) }), (0, jsx_runtime_1.jsx)("button", { onClick: copyBackupCodes, className: "w-full px-3 py-2 border border-neutral-700 text-neutral-300 hover:bg-neutral-800 rounded text-xs", children: "Copy codes" }), (0, jsx_runtime_1.jsx)("button", { onClick: () => {
+                            setStep('idle');
+                            setBackupCodes(null);
+                        }, className: "w-full px-3 py-2 bg-cyan-700 hover:bg-cyan-600 text-white rounded text-xs", children: "Done" })] })), step === 'disable' && ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-xs text-neutral-400", children: "Enter your password to disable two-factor authentication." }), (0, jsx_runtime_1.jsx)("input", { type: "password", value: disablePassword, onChange: (e) => setDisablePassword(e.target.value), placeholder: "Current password", className: "w-full bg-neutral-800 border border-neutral-700 text-white p-2 rounded text-sm outline-none focus:border-cyan-500" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2", children: [(0, jsx_runtime_1.jsx)("button", { onClick: () => {
+                                    setStep('idle');
+                                    setDisablePassword('');
+                                }, className: "flex-1 px-3 py-1.5 text-neutral-500 hover:text-neutral-300 text-xs", children: "Cancel" }), (0, jsx_runtime_1.jsx)("button", { onClick: handleDisable, disabled: loading || !disablePassword, className: "flex-1 px-3 py-1.5 bg-red-900 hover:bg-red-800 text-white rounded text-xs disabled:opacity-50", children: loading ? 'Disabling...' : 'Disable 2FA' })] })] }))] }));
+}

package/dist/index.d.ts

@@ -79,3 +79,7 @@ export { MicrocosmRewardsPage } from './components/rewards/rewards-page';
 export type { MicrocosmRewardsPageProps } from './components/rewards/rewards-page';
 export { MicrocosmProfilePage } from './components/profile/profile-page';
 export type { MicrocosmProfilePageProps } from './components/profile/profile-page';
+export { MicrocosmEmailChangeCard } from './components/profile/email-change-card';
+export type { MicrocosmEmailChangeCardProps } from './components/profile/email-change-card';
+export { MicrocosmTwoFactorSettings } from './components/profile/two-factor-settings';
+export type { MicrocosmTwoFactorSettingsProps } from './components/profile/two-factor-settings';

package/dist/index.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MicrocosmTerritoryPage = exports.MicrocosmAuctionPage = exports.MicrocosmMCDPage = exports.MicrocosmMiningPage = exports.MicrocosmWalletPage = exports.MicrocosmLendingPage = exports.MicrocosmFragmentPage = exports.MicrocosmLockPeriods = exports.MicrocosmMCDStats = exports.MicrocosmMCCTokenStats = exports.MicrocosmEcosystemStats = exports.MicrocosmMyMining = exports.MicrocosmMiningWeight = exports.MicrocosmMintingStats = exports.MicrocosmPriceChart = exports.MicrocosmAssetsSummary = exports.MicrocosmQuickActions = exports.MicrocosmMarketBar = exports.MicrocosmDashboardOverview = exports.KPIRadialChart = exports.VoteResultBar = exports.MiningProgressBar = exports.TerritoryCard = exports.TerminalTooltip = exports.TerminalInput = exports.TerminalCountdown = exports.TerminalDialog = exports.TerminalTabs = exports.TerminalTable = exports.TerminalProgress = exports.TerminalDataRow = exports.TerminalBadge = exports.TerminalEmpty = exports.TerminalError = exports.TerminalLoading = exports.TerminalPageHeader = exports.TerminalCommand = exports.StatBox = exports.TerminalCard = exports.getMenuDescription = exports.getMenuTitle = exports.resolveMenuPath = exports.getAllMenuItems = exports.microcosmMenuGroups = exports.dashboardMenu = exports.web3OsMenu = exports.blockchainMenu = exports.useLinkComponent = exports.LinkProvider = exports.MicrocosmMenuSection = void 0;
-exports.MicrocosmProfilePage = exports.MicrocosmRewardsPage = exports.MicrocosmStationListPage = exports.MicrocosmQueueStatusPage = exports.MicrocosmManagerIncomePage = exports.MicrocosmReincarnationPage = exports.MicrocosmVotingPage = exports.MicrocosmOrganizationPage = void 0;
+exports.MicrocosmTwoFactorSettings = exports.MicrocosmEmailChangeCard = exports.MicrocosmProfilePage = exports.MicrocosmRewardsPage = exports.MicrocosmStationListPage = exports.MicrocosmQueueStatusPage = exports.MicrocosmManagerIncomePage = exports.MicrocosmReincarnationPage = exports.MicrocosmVotingPage = exports.MicrocosmOrganizationPage = void 0;
 var menu_section_1 = require("./components/menu-section");
 Object.defineProperty(exports, "MicrocosmMenuSection", { enumerable: true, get: function () { return menu_section_1.MicrocosmMenuSection; } });
 var link_context_1 = require("./link-context");
@@ -101,3 +101,7 @@ var rewards_page_1 = require("./components/rewards/rewards-page");
 Object.defineProperty(exports, "MicrocosmRewardsPage", { enumerable: true, get: function () { return rewards_page_1.MicrocosmRewardsPage; } });
 var profile_page_1 = require("./components/profile/profile-page");
 Object.defineProperty(exports, "MicrocosmProfilePage", { enumerable: true, get: function () { return profile_page_1.MicrocosmProfilePage; } });
+var email_change_card_1 = require("./components/profile/email-change-card");
+Object.defineProperty(exports, "MicrocosmEmailChangeCard", { enumerable: true, get: function () { return email_change_card_1.MicrocosmEmailChangeCard; } });
+var two_factor_settings_1 = require("./components/profile/two-factor-settings");
+Object.defineProperty(exports, "MicrocosmTwoFactorSettings", { enumerable: true, get: function () { return two_factor_settings_1.MicrocosmTwoFactorSettings; } });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@microcosmmoney/portal-react",
-  "version": "3.7.0",
+  "version": "3.8.0",
   "description": "Microcosm Portal UI components for React/Next.js",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -19,7 +19,7 @@
   },
   "dependencies": {
     "@microcosmmoney/auth-core": "^2.3.2",
-    "@microcosmmoney/auth-react": "^2.4.0"
+    "@microcosmmoney/auth-react": "^2.5.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.0",