@microcosmmoney/portal-react 3.12.7 → 3.13.0

package/dist/main-portal/components/organization/connection-line.js

@@ -0,0 +1,38 @@
+"use strict";
+// AI-generated · AI-managed · AI-maintained
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConnectionLine = ConnectionLine;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const typeColors = {
+    hdmi: { stroke: "#22d3ee", glow: "#22d3ee" },
+    sdi: { stroke: "#fb923c", glow: "#fb923c" },
+    usb: { stroke: "#4ade80", glow: "#4ade80" },
+    wireless: { stroke: "#f472b6", glow: "#f472b6" },
+    ethernet: { stroke: "#facc15", glow: "#facc15" },
+    stream: { stroke: "#a78bfa", glow: "#a78bfa" },
+    audio: { stroke: "#f87171", glow: "#f87171" },
+};
+function ConnectionLine({ fromX, fromY, toX, toY, label, type, lineStyle = "solid", isHighlighted }) {
+    const { stroke, glow } = typeColors[type];
+    const baseStrokeWidth = lineStyle === "thick" ? 4 : 2;
+    const highlightedStrokeWidth = lineStyle === "thick" ? 5 : 3;
+    const getDashArray = () => {
+        if (lineStyle === "dotted")
+            return "4 4";
+        if (type === "wireless")
+            return "8 4";
+        return undefined;
+    };
+    const midX = (fromX + toX) / 2;
+    const midY = (fromY + toY) / 2;
+    const dx = toX - fromX;
+    const cx1 = fromX + dx * 0.25;
+    const cy1 = fromY;
+    const cx2 = toX - dx * 0.25;
+    const cy2 = toY;
+    const pathD = `M ${fromX} ${fromY} C ${cx1} ${cy1}, ${cx2} ${cy2}, ${toX} ${toY}`;
+    return ((0, jsx_runtime_1.jsxs)("g", { className: "transition-opacity duration-300", style: { opacity: isHighlighted ? 1 : 0.3 }, children: [isHighlighted && ((0, jsx_runtime_1.jsx)("path", { d: pathD, fill: "none", stroke: glow, strokeWidth: "6", strokeOpacity: "0.3", filter: "url(#glow)" })), (0, jsx_runtime_1.jsx)("path", { d: pathD, fill: "none", stroke: stroke, strokeWidth: isHighlighted ? highlightedStrokeWidth : baseStrokeWidth, strokeDasharray: getDashArray(), className: isHighlighted ? "animate-flow-line" : "", style: {
+                    strokeDasharray: getDashArray() || (isHighlighted ? "20 20" : undefined),
+                } }), isHighlighted && ((0, jsx_runtime_1.jsx)("circle", { r: "4", fill: stroke, children: (0, jsx_runtime_1.jsx)("animateMotion", { dur: "2s", repeatCount: "indefinite", path: pathD }) })), label && ((0, jsx_runtime_1.jsxs)("g", { transform: `translate(${midX}, ${midY - 8})`, children: [(0, jsx_runtime_1.jsx)("rect", { x: "-35", y: "-10", width: "70", height: "18", rx: "4", fill: "rgba(0,0,0,0.7)", stroke: isHighlighted ? stroke : "transparent", strokeWidth: "1" }), (0, jsx_runtime_1.jsx)("text", { textAnchor: "middle", dominantBaseline: "middle", fill: isHighlighted ? stroke : "#888", fontSize: "9", fontFamily: "var(--font-mono)", className: "select-none", children: label })] }))] }));
+}

package/dist/main-portal/components/organization/diagram-node.d.ts

@@ -0,0 +1,17 @@
+interface DiagramNodeProps {
+    id: string;
+    label: string;
+    sublabel?: string;
+    type: "system" | "sector" | "matrix" | "station" | "empty" | "team";
+    x: number;
+    y: number;
+    system: string;
+    isSelected: boolean;
+    isConnected: boolean;
+    isHovered: boolean;
+    onSelect: () => void;
+    onHover: (hovered: boolean) => void;
+    onDrag: (nodeId: string, x: number, y: number) => void;
+}
+export declare function DiagramNode({ id, label, sublabel, type, x, y, isSelected, isConnected, isHovered, onSelect, onHover, onDrag, }: DiagramNodeProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/main-portal/components/organization/diagram-node.js

@@ -0,0 +1,105 @@
+"use strict";
+// AI-generated · AI-managed · AI-maintained
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DiagramNode = DiagramNode;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const utils_1 = require("../../lib/utils");
+const lucide_react_1 = require("lucide-react");
+const typeConfig = {
+    system: {
+        icon: lucide_react_1.Globe,
+        className: "border-purple-500/50 bg-purple-500/10 text-purple-400 shadow-purple-500/20",
+        glowColor: "shadow-purple-500/50",
+    },
+    sector: {
+        icon: lucide_react_1.Map,
+        className: "border-blue-500/50 bg-blue-500/5 text-blue-400 shadow-blue-500/20",
+        glowColor: "shadow-blue-500/50",
+    },
+    matrix: {
+        icon: lucide_react_1.Grid3x3,
+        className: "border-cyan-500/50 bg-cyan-500/5 text-cyan-400 shadow-cyan-500/20",
+        glowColor: "shadow-cyan-500/50",
+    },
+    station: {
+        icon: lucide_react_1.Building2,
+        className: "border-emerald-500/50 bg-emerald-500/5 text-emerald-400 shadow-emerald-500/20",
+        glowColor: "shadow-emerald-500/50",
+    },
+    empty: {
+        icon: lucide_react_1.CircleDashed,
+        className: "border-dashed border-zinc-500/50 bg-zinc-500/5 text-zinc-400 shadow-zinc-500/20",
+        glowColor: "shadow-zinc-500/50",
+    },
+    team: {
+        icon: lucide_react_1.Users,
+        className: "border-orange-500/50 bg-orange-500/5 text-orange-400 shadow-orange-500/20",
+        glowColor: "shadow-orange-500/50",
+    },
+};
+function DiagramNode({ id, label, sublabel, type, x, y, isSelected, isConnected, isHovered, onSelect, onHover, onDrag, }) {
+    const config = typeConfig[type];
+    const Icon = config.icon;
+    const [isDragging, setIsDragging] = (0, react_1.useState)(false);
+    const dragOffset = (0, react_1.useRef)({ x: 0, y: 0 });
+    const nodeRef = (0, react_1.useRef)(null);
+    const handleMouseDown = (e) => {
+        if (e.button !== 0)
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragging(true);
+        dragOffset.current = {
+            x: e.clientX - x,
+            y: e.clientY - y,
+        };
+    };
+    const handleTouchStart = (e) => {
+        e.stopPropagation();
+        const touch = e.touches[0];
+        setIsDragging(true);
+        dragOffset.current = {
+            x: touch.clientX - x,
+            y: touch.clientY - y,
+        };
+    };
+    (0, react_1.useEffect)(() => {
+        if (!isDragging)
+            return;
+        const handleMouseMove = (e) => {
+            const newX = e.clientX - dragOffset.current.x;
+            const newY = e.clientY - dragOffset.current.y;
+            onDrag(id, Math.max(0, newX), Math.max(0, newY));
+        };
+        const handleTouchMove = (e) => {
+            const touch = e.touches[0];
+            const newX = touch.clientX - dragOffset.current.x;
+            const newY = touch.clientY - dragOffset.current.y;
+            onDrag(id, Math.max(0, newX), Math.max(0, newY));
+        };
+        const handleMouseUp = () => {
+            setIsDragging(false);
+        };
+        const handleTouchEnd = () => {
+            setIsDragging(false);
+        };
+        document.addEventListener("mousemove", handleMouseMove);
+        document.addEventListener("mouseup", handleMouseUp);
+        document.addEventListener("touchmove", handleTouchMove, { passive: false });
+        document.addEventListener("touchend", handleTouchEnd);
+        return () => {
+            document.removeEventListener("mousemove", handleMouseMove);
+            document.removeEventListener("mouseup", handleMouseUp);
+            document.removeEventListener("touchmove", handleTouchMove);
+            document.removeEventListener("touchend", handleTouchEnd);
+        };
+    }, [isDragging, id, onDrag]);
+    return ((0, jsx_runtime_1.jsx)("div", { ref: nodeRef, className: (0, utils_1.cn)("absolute transition-all duration-300 ease-out select-none", "w-[120px]", isDragging && "cursor-grabbing z-50 transition-none", !isDragging && "cursor-grab"), style: { left: x, top: y }, onClick: (e) => {
+            if (!isDragging) {
+                e.stopPropagation();
+                onSelect();
+            }
+        }, onMouseEnter: () => !isDragging && onHover(true), onMouseLeave: () => !isDragging && onHover(false), children: (0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("relative p-3 rounded-lg border-2 backdrop-blur-sm", "transition-all duration-300", config.className, (isSelected || isHovered || isDragging) && ["scale-110 z-20", "shadow-lg", config.glowColor], isConnected && !isHovered && "opacity-100", !isConnected && !isHovered && !isSelected && "opacity-60", isDragging && "ring-2 ring-white/30"), children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute -top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 p-1 rounded bg-background/80 border border-border/50 opacity-0 group-hover:opacity-100 hover:opacity-100 transition-opacity cursor-grab active:cursor-grabbing", onMouseDown: handleMouseDown, onTouchStart: handleTouchStart, style: { opacity: isHovered || isDragging ? 1 : 0 }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.GripVertical, { className: "w-3 h-3 text-muted-foreground" }) }), isSelected && (0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 rounded-lg border-2 border-current animate-ping opacity-30" }), (0, jsx_runtime_1.jsxs)("div", { onMouseDown: handleMouseDown, onTouchStart: handleTouchStart, children: [(0, jsx_runtime_1.jsx)("div", { className: "flex justify-center mb-2", children: (0, jsx_runtime_1.jsx)(Icon, { className: "w-6 h-6" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "text-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-xs font-medium truncate", children: label }), sublabel && (0, jsx_runtime_1.jsx)("div", { className: "text-[10px] opacity-70 truncate", children: sublabel })] })] }), (isSelected || isHovered) && !isDragging && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute -top-1 left-1/2 -translate-x-1/2 w-2 h-2 rounded-full bg-current animate-pulse" }), (0, jsx_runtime_1.jsx)("div", { className: "absolute -bottom-1 left-1/2 -translate-x-1/2 w-2 h-2 rounded-full bg-current animate-pulse" }), (0, jsx_runtime_1.jsx)("div", { className: "absolute top-1/2 -left-1 -translate-y-1/2 w-2 h-2 rounded-full bg-current animate-pulse" }), (0, jsx_runtime_1.jsx)("div", { className: "absolute top-1/2 -right-1 -translate-y-1/2 w-2 h-2 rounded-full bg-current animate-pulse" })] }))] }) }));
+}

package/dist/main-portal/components/organization/system-panel.d.ts

@@ -0,0 +1,11 @@
+interface SystemPanelProps {
+    id: string;
+    title: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    onDrag?: (id: string, deltaX: number, deltaY: number) => void;
+}
+export declare function SystemPanel({ id, title, x, y, width, height, onDrag }: SystemPanelProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/main-portal/components/organization/system-panel.js

@@ -0,0 +1,72 @@
+"use strict";
+// AI-generated · AI-managed · AI-maintained
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SystemPanel = SystemPanel;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const lucide_react_1 = require("lucide-react");
+function SystemPanel({ id, title, x, y, width, height, onDrag }) {
+    const [isDragging, setIsDragging] = (0, react_1.useState)(false);
+    const dragStartRef = (0, react_1.useRef)({ x: 0, y: 0 });
+    const onDragRef = (0, react_1.useRef)(onDrag);
+    (0, react_1.useEffect)(() => {
+        onDragRef.current = onDrag;
+    }, [onDrag]);
+    const handleMouseDown = (e) => {
+        if (e.button !== 0)
+            return;
+        e.stopPropagation();
+        e.preventDefault();
+        setIsDragging(true);
+        dragStartRef.current = { x: e.clientX, y: e.clientY };
+    };
+    const handleTouchStart = (e) => {
+        e.stopPropagation();
+        const touch = e.touches[0];
+        setIsDragging(true);
+        dragStartRef.current = { x: touch.clientX, y: touch.clientY };
+    };
+    (0, react_1.useEffect)(() => {
+        if (!isDragging)
+            return;
+        const handleMouseMove = (e) => {
+            const deltaX = e.clientX - dragStartRef.current.x;
+            const deltaY = e.clientY - dragStartRef.current.y;
+            if (deltaX === 0 && deltaY === 0)
+                return;
+            if (onDragRef.current) {
+                onDragRef.current(id, deltaX, deltaY);
+                dragStartRef.current = { x: e.clientX, y: e.clientY };
+            }
+        };
+        const handleTouchMove = (e) => {
+            const touch = e.touches[0];
+            const deltaX = touch.clientX - dragStartRef.current.x;
+            const deltaY = touch.clientY - dragStartRef.current.y;
+            if (deltaX === 0 && deltaY === 0)
+                return;
+            if (onDragRef.current) {
+                onDragRef.current(id, deltaX, deltaY);
+                dragStartRef.current = { x: touch.clientX, y: touch.clientY };
+            }
+        };
+        const handleMouseUp = () => {
+            setIsDragging(false);
+        };
+        const handleTouchEnd = () => {
+            setIsDragging(false);
+        };
+        window.addEventListener("mousemove", handleMouseMove);
+        window.addEventListener("mouseup", handleMouseUp);
+        window.addEventListener("touchmove", handleTouchMove, { passive: false });
+        window.addEventListener("touchend", handleTouchEnd);
+        return () => {
+            window.removeEventListener("mousemove", handleMouseMove);
+            window.removeEventListener("mouseup", handleMouseUp);
+            window.removeEventListener("touchmove", handleTouchMove);
+            window.removeEventListener("touchend", handleTouchEnd);
+        };
+    }, [isDragging, id]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `absolute rounded-xl border border-border/30 bg-card/20 backdrop-blur-sm transition-shadow ${isDragging ? "shadow-lg shadow-primary/20 border-primary/50" : ""}`, style: { left: x, top: y, width, height }, children: [(0, jsx_runtime_1.jsxs)("div", { className: `flex items-center gap-2 px-4 py-2 border-b border-border/30 cursor-grab select-none ${isDragging ? "cursor-grabbing bg-primary/10" : "hover:bg-primary/5"}`, onMouseDown: handleMouseDown, onTouchStart: handleTouchStart, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.GripHorizontal, { className: "w-4 h-4 text-muted-foreground/50" }), (0, jsx_runtime_1.jsx)("div", { className: "w-2 h-2 rounded-full bg-accent animate-pulse" }), (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wider", children: title })] }), (0, jsx_runtime_1.jsxs)("svg", { className: "absolute inset-0 w-full h-full pointer-events-none", children: [(0, jsx_runtime_1.jsx)("line", { x1: "0", y1: "20", x2: "0", y2: "40", stroke: "currentColor", strokeOpacity: "0.2", strokeWidth: "2", className: "text-primary" }), (0, jsx_runtime_1.jsx)("line", { x1: "0", y1: "20", x2: "20", y2: "20", stroke: "currentColor", strokeOpacity: "0.2", strokeWidth: "2", className: "text-primary" }), (0, jsx_runtime_1.jsx)("line", { x1: width, y1: "20", x2: width, y2: "40", stroke: "currentColor", strokeOpacity: "0.2", strokeWidth: "2", className: "text-primary" }), (0, jsx_runtime_1.jsx)("line", { x1: width, y1: "20", x2: width - 20, y2: "20", stroke: "currentColor", strokeOpacity: "0.2", strokeWidth: "2", className: "text-primary" }), (0, jsx_runtime_1.jsx)("line", { x1: "0", y1: height - 20, x2: "0", y2: height - 40, stroke: "currentColor", strokeOpacity: "0.2", strokeWidth: "2", className: "text-primary" }), (0, jsx_runtime_1.jsx)("line", { x1: "0", y1: height - 20, x2: "20", y2: height - 20, stroke: "currentColor", strokeOpacity: "0.2", strokeWidth: "2", className: "text-primary" }), (0, jsx_runtime_1.jsx)("line", { x1: width, y1: height - 20, x2: width, y2: height - 40, stroke: "currentColor", strokeOpacity: "0.2", strokeWidth: "2", className: "text-primary" }), (0, jsx_runtime_1.jsx)("line", { x1: width, y1: height - 20, x2: width - 20, y2: height - 20, stroke: "currentColor", strokeOpacity: "0.2", strokeWidth: "2", className: "text-primary" })] })] }));
+}

package/dist/main-portal/components/profile/EmailChangeCard.d.ts

@@ -0,0 +1 @@
+export default function EmailChangeCard(): import("react/jsx-runtime").JSX.Element;

package/dist/main-portal/components/profile/EmailChangeCard.js

@@ -0,0 +1,58 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = EmailChangeCard;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const card_1 = require("../ui/card");
+const button_1 = require("../ui/button");
+const auth_service_1 = require("../../lib/auth-service");
+const sonner_1 = require("sonner");
+const lucide_react_1 = require("lucide-react");
+function EmailChangeCard() {
+    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 [submitting, setSubmitting] = (0, react_1.useState)(false);
+    const handleRequestChange = async () => {
+        if (!newEmail || !password)
+            return;
+        setSubmitting(true);
+        try {
+            await (0, auth_service_1.requestEmailChange)(newEmail, password);
+            setStep('verify');
+            sonner_1.toast.success('Verification code sent to new email');
+        }
+        catch (err) {
+            sonner_1.toast.error(err instanceof Error ? err.message : 'Failed');
+        }
+        finally {
+            setSubmitting(false);
+        }
+    };
+    const handleVerify = async () => {
+        if (!code || code.length !== 6)
+            return;
+        setSubmitting(true);
+        try {
+            await (0, auth_service_1.verifyEmailChange)(newEmail, code);
+            sonner_1.toast.success('Email changed successfully');
+            setStep('idle');
+            setNewEmail("");
+            setPassword("");
+            setCode("");
+            window.location.reload();
+        }
+        catch (err) {
+            sonner_1.toast.error(err instanceof Error ? err.message : 'Verification failed');
+        }
+        finally {
+            setSubmitting(false);
+        }
+    };
+    if (step === 'idle') {
+        return ((0, jsx_runtime_1.jsx)("div", { id: "change-email", children: (0, jsx_runtime_1.jsx)(card_1.Card, { className: "bg-neutral-900 border-neutral-700 dash-card", children: (0, jsx_runtime_1.jsxs)(card_1.CardContent, { className: "p-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 mb-3", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Mail, { className: "h-4 w-4 text-neutral-400" }), (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_1.Button, { onClick: () => setStep('form'), variant: "outline", className: "border-neutral-700 text-neutral-300 hover:bg-neutral-800 bg-transparent text-xs", children: "Change Email" })] }) }) }));
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { id: "change-email", children: (0, jsx_runtime_1.jsx)(card_1.Card, { className: "bg-neutral-900 border-neutral-700 dash-card", children: (0, jsx_runtime_1.jsxs)(card_1.CardContent, { className: "p-6 space-y-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Mail, { className: "h-4 w-4 text-neutral-400" }), (0, jsx_runtime_1.jsx)("span", { className: "text-sm text-neutral-300 font-medium tracking-wider", children: "change_email" })] }), 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_1.Button, { onClick: () => { setStep('idle'); setNewEmail(''); setPassword(''); }, variant: "ghost", className: "flex-1 text-neutral-500 hover:text-neutral-300 text-xs", children: "Cancel" }), (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: handleRequestChange, disabled: submitting || !newEmail || !password, className: "flex-1 bg-cyan-700 hover:bg-cyan-600 text-white text-xs", children: submitting ? '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_1.Button, { onClick: () => { setStep('form'); setCode(''); }, variant: "ghost", className: "flex-1 text-neutral-500 hover:text-neutral-300 text-xs", children: "Back" }), (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: handleVerify, disabled: submitting || code.length !== 6, className: "flex-1 bg-cyan-700 hover:bg-cyan-600 text-white text-xs", children: submitting ? 'Verifying...' : 'Verify' })] })] }))] }) }) }));
+}

package/dist/main-portal/components/profile/ProfilePage.d.ts

@@ -0,0 +1 @@
+export default function ProfilePage(): import("react/jsx-runtime").JSX.Element;

package/dist/main-portal/components/profile/ProfilePage.js

@@ -0,0 +1,263 @@
+"use strict";
+"use client";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = ProfilePage;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const card_1 = require("../ui/card");
+const badge_1 = require("../ui/badge");
+const button_1 = require("../ui/button");
+const useAuth_1 = require("../../hooks/useAuth");
+const auth_service_1 = require("../../lib/auth-service");
+const services_1 = require("../../lib/api/services");
+const sonner_1 = require("sonner");
+const lucide_react_1 = require("lucide-react");
+const WalletManagement_1 = __importDefault(require("../wallet/WalletManagement"));
+const TwoFactorSettings_1 = __importDefault(require("./TwoFactorSettings"));
+const EmailChangeCard_1 = __importDefault(require("./EmailChangeCard"));
+const next_intl_1 = require("next-intl");
+const LEVEL_INFO = {
+    miner: { label: 'Miner', description: 'Registration', color: 'text-white' },
+    commander: { label: 'Commander', description: 'Owns >=1 Station NFT', color: 'text-cyan-400' },
+    pioneer: { label: 'Pioneer', description: 'Auto-minted Matrix NFT (>=10 Station)', color: 'text-cyan-400' },
+    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-500' },
+};
+function ProfilePage() {
+    const t = (0, next_intl_1.useTranslations)('profile');
+    const { userInfo } = (0, useAuth_1.useAuth)();
+    const [loading, setLoading] = (0, react_1.useState)(true);
+    const [editing, setEditing] = (0, react_1.useState)(false);
+    const [saving, setSaving] = (0, react_1.useState)(false);
+    const [displayName, setDisplayName] = (0, react_1.useState)("");
+    const [avatarUrl, setAvatarUrl] = (0, react_1.useState)("");
+    const [emailVerified, setEmailVerified] = (0, react_1.useState)(false);
+    const [createdAt, setCreatedAt] = (0, react_1.useState)("");
+    const [lastLoginAt, setLastLoginAt] = (0, react_1.useState)("");
+    const [shortId, setShortId] = (0, react_1.useState)(null);
+    const [locationId, setLocationId] = (0, react_1.useState)(null);
+    const [editDisplayName, setEditDisplayName] = (0, react_1.useState)("");
+    const [isAvatarDialogOpen, setIsAvatarDialogOpen] = (0, react_1.useState)(false);
+    const [avatarPreview, setAvatarPreview] = (0, react_1.useState)(null);
+    const [avatarFile, setAvatarFile] = (0, react_1.useState)(null);
+    const [uploadingAvatar, setUploadingAvatar] = (0, react_1.useState)(false);
+    const fileInputRef = (0, react_1.useRef)(null);
+    const [sendingVerification, setSendingVerification] = (0, react_1.useState)(false);
+    const [checkingVerification, setCheckingVerification] = (0, react_1.useState)(false);
+    const [showVerifyDialog, setShowVerifyDialog] = (0, react_1.useState)(false);
+    const [verifyDialogStep, setVerifyDialogStep] = (0, react_1.useState)('main');
+    const [newEmailInput, setNewEmailInput] = (0, react_1.useState)("");
+    const [changePasswordInput, setChangePasswordInput] = (0, react_1.useState)("");
+    const [changeCodeInput, setChangeCodeInput] = (0, react_1.useState)("");
+    const [verifyDialogLoading, setVerifyDialogLoading] = (0, react_1.useState)(false);
+    const [levelStatus, setLevelStatus] = (0, react_1.useState)(null);
+    const [levelLoading, setLevelLoading] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        const unsubscribe = (0, auth_service_1.onAuthChange)(async (user) => {
+            if (user) {
+                setCreatedAt("");
+                setLastLoginAt("");
+                try {
+                    const token = await (0, auth_service_1.getCurrentUserToken)();
+                    if (token) {
+                        const response = await fetch("/api/users/profile", { headers: { Authorization: `Bearer ${token}` } });
+                        if (response.ok) {
+                            const data = await response.json();
+                            if (data.success && data.user) {
+                                const name = data.user.display_name || data.user.email?.split("@")[0] || "user";
+                                setDisplayName(name);
+                                setEditDisplayName(name);
+                                if (data.user.email_verified !== undefined)
+                                    setEmailVerified(data.user.email_verified);
+                                if (data.user.avatar_url)
+                                    setAvatarUrl(data.user.avatar_url);
+                                if (data.user.short_id)
+                                    setShortId(data.user.short_id);
+                                if (data.user.location_id)
+                                    setLocationId(data.user.location_id);
+                                if (data.user.created_at)
+                                    setCreatedAt(data.user.created_at);
+                                if (data.user.last_login_at)
+                                    setLastLoginAt(data.user.last_login_at);
+                            }
+                            else {
+                                setDisplayName("user");
+                                setEditDisplayName("user");
+                            }
+                        }
+                        else {
+                            setDisplayName("user");
+                            setEditDisplayName("user");
+                        }
+                    }
+                }
+                catch {
+                    setDisplayName("user");
+                    setEditDisplayName("user");
+                }
+                setLoading(false);
+                loadLevelStatus(user.uid);
+            }
+        });
+        return () => unsubscribe();
+    }, []);
+    const loadLevelStatus = async (uid) => {
+        try {
+            setLevelLoading(true);
+            const result = await (0, services_1.getUserLevelStatus)(uid);
+            if (result.success && result.data)
+                setLevelStatus(result.data);
+        }
+        catch { }
+        finally {
+            setLevelLoading(false);
+        }
+    };
+    const getRoleLabel = (role) => role === "admin" || role === "platform_admin" ? t('platformAdmin') : role === "team_member" ? t('teamMember') : t('normalUser');
+    const getRoleBadgeVariant = (role) => role === "admin" || role === "platform_admin" ? "default" : role === "team_member" ? "secondary" : "outline";
+    const formatDate = (dateStr) => { if (!dateStr)
+        return "-"; try {
+        return new Date(dateStr).toLocaleDateString("zh-CN", { year: "numeric", month: "long", day: "numeric" });
+    }
+    catch {
+        return "-";
+    } };
+    const handleSave = async () => {
+        setSaving(true);
+        try {
+            const token = await (0, auth_service_1.getCurrentUserToken)();
+            if (!token)
+                throw new Error("Not authenticated");
+            const response = await fetch("/api/users/profile", { method: "PATCH", headers: { "Content-Type": "application/json", Authorization: `Bearer ${token}` }, body: JSON.stringify({ display_name: editDisplayName }) });
+            if (!response.ok) {
+                const error = await response.json();
+                throw new Error(error.error || "Failed to update profile");
+            }
+            setDisplayName(editDisplayName);
+            setEditing(false);
+            sonner_1.toast.success("profile updated successfully");
+        }
+        catch (error) {
+            sonner_1.toast.error(error instanceof Error ? error.message : "save failed");
+        }
+        finally {
+            setSaving(false);
+        }
+    };
+    const handleFileSelect = (e) => {
+        const file = e.target.files?.[0];
+        if (!file)
+            return;
+        if (!file.type.startsWith("image/")) {
+            sonner_1.toast.error("please select an image file");
+            return;
+        }
+        if (file.size > 2 * 1024 * 1024) {
+            sonner_1.toast.error("image size must be less than 2MB");
+            return;
+        }
+        setAvatarFile(file);
+        const reader = new FileReader();
+        reader.onload = (e) => { setAvatarPreview(e.target?.result); };
+        reader.readAsDataURL(file);
+    };
+    const handleAvatarUpload = async () => {
+        if (!avatarFile) {
+            if (!avatarPreview && avatarUrl) {
+                setAvatarUrl("");
+                setIsAvatarDialogOpen(false);
+                return;
+            }
+            ;
+            setIsAvatarDialogOpen(false);
+            return;
+        }
+        setUploadingAvatar(true);
+        try {
+            const token = await (0, auth_service_1.getCurrentUserToken)();
+            if (!token)
+                throw new Error("Not authenticated");
+            const formData = new FormData();
+            formData.append("avatar", avatarFile);
+            const response = await fetch("/api/users/avatar", { method: "POST", headers: { Authorization: `Bearer ${token}` }, body: formData });
+            if (!response.ok)
+                throw new Error("Upload failed");
+            const result = await response.json();
+            setAvatarUrl(result.data?.avatar_url || result.avatar_url);
+            setIsAvatarDialogOpen(false);
+            sonner_1.toast.success("avatar updated");
+        }
+        catch {
+            sonner_1.toast.error("avatar upload failed");
+        }
+        finally {
+            setUploadingAvatar(false);
+        }
+    };
+    if (loading)
+        return (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center py-20", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-8 w-8 animate-spin text-neutral-400" }), (0, jsx_runtime_1.jsx)("span", { className: "ml-3 text-neutral-400 text-sm", children: "loading profile..." })] });
+    const lvl = levelStatus?.current_rank?.toLowerCase() || levelStatus?.database_level?.toLowerCase() || 'miner';
+    const lvlInfo = LEVEL_INFO[lvl] || LEVEL_INFO.miner;
+    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", 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: "view and manage your personal information" })] }), (0, jsx_runtime_1.jsx)(card_1.Card, { className: "bg-neutral-900 border-neutral-700 dash-card", children: (0, jsx_runtime_1.jsxs)(card_1.CardContent, { className: "p-3 sm:p-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-start gap-3 sm:gap-4 mb-4 sm:mb-6 pb-4 sm:pb-6 border-b border-neutral-700", children: [(0, jsx_runtime_1.jsxs)("div", { className: "relative group cursor-pointer", onClick: () => { setAvatarPreview(avatarUrl || null); setAvatarFile(null); setIsAvatarDialogOpen(true); }, children: [avatarUrl ? (0, jsx_runtime_1.jsx)("img", { src: avatarUrl, alt: "", className: "h-20 w-20 rounded bg-neutral-800 border border-neutral-700 object-cover", onError: e => { e.currentTarget.onerror = null; e.currentTarget.src = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect width='40' height='40' rx='20' fill='%23312e81'/%3E%3Ccircle cx='20' cy='15' r='6' fill='%236366f1'/%3E%3Cellipse cx='20' cy='32' rx='10' ry='8' fill='%236366f1'/%3E%3C/svg%3E"; } }) : (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)("div", { className: "absolute inset-0 bg-black/50 rounded opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center", children: (0, jsx_runtime_1.jsx)("span", { className: "text-white text-xs", children: "edit" }) })] }), (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.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: "text-xs text-neutral-400 tracking-wider block mb-1", children: "display_name" }), (0, jsx_runtime_1.jsx)("input", { type: "text", value: editDisplayName, onChange: e => setEditDisplayName(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-neutral-400", placeholder: "Enter display name" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { onClick: handleSave, disabled: saving, size: "sm", className: "bg-cyan-700 hover:bg-cyan-600 text-white", children: saving ? "saving..." : "save" }), (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: () => { setEditDisplayName(displayName); setEditing(false); }, disabled: saving, variant: "outline", size: "sm", className: "border-neutral-700 text-neutral-400 hover:bg-neutral-800 hover:text-neutral-300 bg-transparent", 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_1.Button, { onClick: () => { setEditDisplayName(displayName); setEditing(true); }, variant: "ghost", size: "sm", className: "text-neutral-400 hover:text-cyan-400 text-xs h-auto py-0 px-1", children: "[edit]" })] }), (0, jsx_runtime_1.jsx)("div", { className: "text-sm text-neutral-400 mt-1", children: userInfo?.email || "no email set" }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs text-neutral-500 mt-1", children: t('avatarAutoGenNote') }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2 mt-2", children: [(0, jsx_runtime_1.jsx)(badge_1.Badge, { variant: getRoleBadgeVariant(userInfo?.role), children: getRoleLabel(userInfo?.role) }), emailVerified ? (0, jsx_runtime_1.jsx)(badge_1.Badge, { variant: "default", className: "bg-green-600 text-white hover:bg-green-600", children: "verified" }) : (0, jsx_runtime_1.jsx)(badge_1.Badge, { variant: "destructive", className: "cursor-pointer hover:opacity-80", onClick: () => { setShowVerifyDialog(true); setVerifyDialogStep('main'); }, children: "unverified" })] })] })) })] }), (0, jsx_runtime_1.jsx)("div", { className: "space-y-0", children: [{ l: 'id', v: (0, jsx_runtime_1.jsx)("span", { className: "text-xs bg-neutral-800 px-2 py-0.5 rounded font-mono", children: shortId || userInfo?.uid || "-" }) }, { l: 'email', v: userInfo?.email || "-" }, { l: 'role', v: (0, jsx_runtime_1.jsx)("span", { className: "text-cyan-400", children: getRoleLabel(userInfo?.role) }) }, { l: 'status', v: (0, jsx_runtime_1.jsx)("span", { className: "text-white", children: "active" }) }].map(({ l, v }) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between py-2 border-b border-neutral-800", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-neutral-400 text-sm", children: l }), (0, jsx_runtime_1.jsx)("span", { className: "text-white text-sm", children: v })] }, l))) })] }) }), (0, jsx_runtime_1.jsx)(card_1.Card, { className: "bg-neutral-900 border-neutral-700 dash-card", children: (0, jsx_runtime_1.jsx)(card_1.CardContent, { className: "p-3 sm:p-6", children: (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [[{ l: 'created_at', v: formatDate(createdAt) }, { l: 'last_login', v: formatDate(lastLoginAt) }, { l: 'short_id', v: (0, jsx_runtime_1.jsx)("span", { className: "font-mono text-sm", children: shortId || userInfo?.uid?.substring(0, 16) + '...' }) }].map(({ l, v }) => ((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: l }), (0, jsx_runtime_1.jsx)("div", { className: "text-white font-medium", children: v })] }, l))), locationId && (0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-800 rounded p-4 col-span-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-xs text-neutral-400 tracking-wider mb-1", children: "location_id" }), (0, jsx_runtime_1.jsx)("div", { className: "text-cyan-400 font-mono text-sm break-all", children: locationId })] }), (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: "email_status" }), emailVerified ? (0, jsx_runtime_1.jsx)("div", { className: "text-green-400 font-medium", children: "verified" }) : ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-cyan-400 font-medium", children: "unverified" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap gap-2", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { onClick: async () => { setSendingVerification(true); try {
+                                                            await (0, auth_service_1.sendEmailVerification)();
+                                                            sonner_1.toast.success("verification email sent", { description: "check your inbox (and spam folder)" });
+                                                        }
+                                                        catch (e) {
+                                                            sonner_1.toast.error("send failed", { description: e instanceof Error ? e.message : "send failed" });
+                                                        }
+                                                        finally {
+                                                            setSendingVerification(false);
+                                                        } }, disabled: sendingVerification, variant: "outline", size: "sm", className: "border-neutral-700 text-neutral-400 hover:bg-neutral-800 hover:text-neutral-300 bg-transparent text-xs", children: sendingVerification ? "sending..." : "send email" }), (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: async () => { setCheckingVerification(true); try {
+                                                            const v = await (0, auth_service_1.checkEmailVerified)();
+                                                            if (v) {
+                                                                setEmailVerified(true);
+                                                                sonner_1.toast.success("email verified!");
+                                                            }
+                                                            else
+                                                                sonner_1.toast.info("email not verified yet", { description: "click the link in the email" });
+                                                        }
+                                                        catch {
+                                                            sonner_1.toast.error("check failed", { description: "please try again" });
+                                                        }
+                                                        finally {
+                                                            setCheckingVerification(false);
+                                                        } }, disabled: checkingVerification, variant: "outline", size: "sm", className: "border-neutral-700 text-neutral-400 hover:bg-neutral-800 hover:text-neutral-300 bg-transparent text-xs", children: checkingVerification ? "checking..." : "check" }), (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: () => window.location.href = '#change-email', variant: "outline", size: "sm", className: "border-cyan-800 text-cyan-500 hover:bg-cyan-950 hover:text-cyan-300 bg-transparent text-xs", children: "change email" })] }), (0, jsx_runtime_1.jsx)("p", { className: "text-[10px] text-neutral-500", children: "If you entered an incorrect email, you can change it below." })] }))] })] }) }) }), (0, jsx_runtime_1.jsx)(card_1.Card, { className: "bg-neutral-900 border-neutral-700 dash-card", children: (0, jsx_runtime_1.jsx)(card_1.CardContent, { className: "p-3 sm:p-6", children: levelLoading ? (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center py-4", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-5 w-5 animate-spin text-neutral-400" }), (0, jsx_runtime_1.jsx)("span", { className: "ml-2 text-neutral-500 text-sm", children: t('loadingLevel') })] }) : levelStatus ? ((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-white text-xs font-mono", children: ["S:", levelStatus.holdings.station, " M:", levelStatus.holdings.matrix, " Se:", levelStatus.holdings.sector, " Sy:", levelStatus.holdings.system] })] })] }), levelStatus.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: "upgrade_progress" }), (0, jsx_runtime_1.jsxs)("span", { className: "text-white text-sm font-mono", children: [levelStatus.progress_percent, "%"] })] }), (0, jsx_runtime_1.jsx)("div", { className: "w-full bg-neutral-800 rounded-full h-2", children: (0, jsx_runtime_1.jsx)("div", { className: "h-2 rounded-full transition-all bg-cyan-400", style: { width: `${Math.min(levelStatus.progress_percent, 100)}%` } }) }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs text-neutral-500 mt-2", children: levelStatus.next_level_requirement.description }), (0, jsx_runtime_1.jsxs)("div", { className: "text-xs text-neutral-400 mt-1", children: [levelStatus.next_level_requirement.have, "/", levelStatus.next_level_requirement.need, " ", levelStatus.next_level_requirement.tier, " \u2192 ", (0, jsx_runtime_1.jsx)("span", { className: "text-white", children: levelStatus.next_rank })] })] }))] })) : (0, jsx_runtime_1.jsxs)("div", { className: "text-center py-6 text-neutral-500", children: [(0, jsx_runtime_1.jsx)("p", { children: t('noLevelInfo') }), (0, jsx_runtime_1.jsx)("p", { className: "text-xs mt-1", children: t('noLevelInfoHint') })] }) }) }), (0, jsx_runtime_1.jsx)(WalletManagement_1.default, {}), (0, jsx_runtime_1.jsx)(EmailChangeCard_1.default, {}), (0, jsx_runtime_1.jsx)(TwoFactorSettings_1.default, {}), (0, jsx_runtime_1.jsx)(card_1.Card, { className: "bg-neutral-900 border-neutral-700 dash-card", children: (0, jsx_runtime_1.jsxs)(card_1.CardContent, { className: "p-3 sm:p-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "text-neutral-400 text-sm mb-4", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-cyan-400", children: "!" }), " security notice"] }), (0, jsx_runtime_1.jsx)("div", { className: "space-y-2 text-sm text-neutral-400", children: ['Keep your account credentials secure', 'Change password periodically', 'Report suspicious activity immediately', 'Verify email to receive important notifications'].map(p => (0, jsx_runtime_1.jsxs)("p", { children: ["- ", p] }, p)) })] }) }), isAvatarDialogOpen && ((0, jsx_runtime_1.jsx)("div", { className: "fixed inset-0 bg-black/50 flex items-center justify-center z-50", children: (0, jsx_runtime_1.jsx)(card_1.Card, { className: "bg-neutral-900 border-neutral-700 w-full max-w-md mx-4", children: (0, jsx_runtime_1.jsxs)(card_1.CardContent, { className: "p-6 space-y-6", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex justify-center", children: (0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [avatarPreview ? (0, jsx_runtime_1.jsx)("img", { src: avatarPreview, alt: "preview", className: "h-32 w-32 rounded border-4 border-neutral-700 object-cover" }) : (0, jsx_runtime_1.jsx)("div", { className: "h-32 w-32 rounded border-4 border-neutral-700 bg-neutral-800 flex items-center justify-center text-4xl text-neutral-500", children: displayName.charAt(0).toUpperCase() }), avatarPreview && (0, jsx_runtime_1.jsx)("button", { onClick: () => { setAvatarPreview(null); setAvatarFile(null); if (fileInputRef.current)
+                                                fileInputRef.current.value = ""; }, className: "absolute -top-2 -right-2 w-6 h-6 bg-red-500 hover:bg-red-600 rounded-full flex items-center justify-center text-white text-xs", children: "x" })] }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center gap-4", children: [(0, jsx_runtime_1.jsx)("input", { ref: fileInputRef, type: "file", accept: "image/jpeg,image/png,image/gif,image/webp", onChange: handleFileSelect, className: "hidden" }), (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: () => fileInputRef.current?.click(), variant: "outline", className: "w-full border-neutral-700 text-neutral-400 hover:bg-neutral-800 hover:text-neutral-300 bg-transparent", children: "select image" }), avatarFile && (0, jsx_runtime_1.jsxs)("p", { className: "text-sm text-neutral-500", children: ["selected: ", avatarFile.name, " (", (avatarFile.size / 1024).toFixed(1), " KB)"] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-end gap-2", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { onClick: () => setIsAvatarDialogOpen(false), disabled: uploadingAvatar, variant: "outline", size: "sm", className: "border-neutral-700 text-neutral-400 hover:bg-neutral-800 hover:text-neutral-300 bg-transparent", children: "cancel" }), (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: handleAvatarUpload, disabled: uploadingAvatar || (!avatarFile && avatarPreview === avatarUrl), size: "sm", className: "bg-cyan-700 hover:bg-cyan-600 text-white", children: uploadingAvatar ? "uploading..." : "upload" })] })] }) }) })), showVerifyDialog && ((0, jsx_runtime_1.jsx)("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4", onClick: () => setShowVerifyDialog(false), children: (0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-900 border border-neutral-700 rounded-lg w-full max-w-md p-6 space-y-4", onClick: e => e.stopPropagation(), children: [verifyDialogStep === 'main' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "text-white font-medium text-sm", children: "Verify Your Email" }), (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: "current email" }), (0, jsx_runtime_1.jsx)("div", { className: "text-white text-sm font-mono", children: userInfo?.email || '-' })] }), (0, jsx_runtime_1.jsx)("p", { className: "text-xs text-neutral-400", children: "A verification link will be sent to this email. If this is not your real email, change it first." }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { onClick: async () => { setVerifyDialogLoading(true); try {
+                                                await (0, auth_service_1.resendVerificationEmail)();
+                                                sonner_1.toast.success('Verification email sent! Check your inbox.');
+                                                setShowVerifyDialog(false);
+                                            }
+                                            catch (err) {
+                                                sonner_1.toast.error(err instanceof Error ? err.message : 'Failed to send');
+                                            }
+                                            finally {
+                                                setVerifyDialogLoading(false);
+                                            } }, disabled: verifyDialogLoading, className: "flex-1 bg-cyan-700 hover:bg-cyan-600 text-white text-xs", children: verifyDialogLoading ? 'Sending...' : 'Send Verification Link' }), (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: () => { setVerifyDialogStep('change'); setNewEmailInput(''); setChangePasswordInput(''); }, variant: "outline", className: "flex-1 border-neutral-700 text-neutral-300 hover:bg-neutral-800 bg-transparent text-xs", children: "Change Email" })] }), (0, jsx_runtime_1.jsx)("button", { onClick: () => setShowVerifyDialog(false), className: "w-full text-center text-xs text-neutral-500 hover:text-neutral-300 pt-1", children: "Close" })] })), verifyDialogStep === 'change' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "text-white font-medium text-sm", children: "Change Email Address" }), (0, jsx_runtime_1.jsx)("p", { className: "text-xs text-neutral-400", children: "Enter your new email and current password. A verification code will be sent to the new email." }), (0, jsx_runtime_1.jsx)("input", { type: "email", value: newEmailInput, onChange: e => setNewEmailInput(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: changePasswordInput, onChange: e => setChangePasswordInput(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_1.Button, { onClick: () => setVerifyDialogStep('main'), variant: "ghost", className: "flex-1 text-neutral-500 hover:text-neutral-300 text-xs", children: "Back" }), (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: async () => { if (!newEmailInput || !changePasswordInput)
+                                                return; setVerifyDialogLoading(true); try {
+                                                await (0, auth_service_1.requestEmailChange)(newEmailInput, changePasswordInput);
+                                                sonner_1.toast.success('Verification code sent to new email');
+                                                setVerifyDialogStep('change-verify');
+                                            }
+                                            catch (err) {
+                                                sonner_1.toast.error(err instanceof Error ? err.message : 'Failed');
+                                            }
+                                            finally {
+                                                setVerifyDialogLoading(false);
+                                            } }, disabled: verifyDialogLoading || !newEmailInput || !changePasswordInput, className: "flex-1 bg-cyan-700 hover:bg-cyan-600 text-white text-xs", children: verifyDialogLoading ? 'Sending...' : 'Send Code' })] })] })), verifyDialogStep === 'change-verify' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "text-white font-medium text-sm", children: "Enter Verification Code" }), (0, jsx_runtime_1.jsxs)("p", { className: "text-xs text-neutral-400", children: ["A 6-digit code was sent to ", (0, jsx_runtime_1.jsx)("span", { className: "text-cyan-400", children: newEmailInput }), ". After verification, this becomes your new login email. Your password stays the same."] }), (0, jsx_runtime_1.jsx)("input", { type: "text", value: changeCodeInput, onChange: e => setChangeCodeInput(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-xl 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_1.Button, { onClick: () => { setVerifyDialogStep('change'); setChangeCodeInput(''); }, variant: "ghost", className: "flex-1 text-neutral-500 hover:text-neutral-300 text-xs", children: "Back" }), (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: async () => { if (changeCodeInput.length !== 6)
+                                                return; setVerifyDialogLoading(true); try {
+                                                await (0, auth_service_1.verifyEmailChange)(newEmailInput, changeCodeInput);
+                                                sonner_1.toast.success('Email changed and verified!');
+                                                setEmailVerified(true);
+                                                setShowVerifyDialog(false);
+                                                window.location.reload();
+                                            }
+                                            catch (err) {
+                                                sonner_1.toast.error(err instanceof Error ? err.message : 'Verification failed');
+                                            }
+                                            finally {
+                                                setVerifyDialogLoading(false);
+                                            } }, disabled: verifyDialogLoading || changeCodeInput.length !== 6, className: "flex-1 bg-cyan-700 hover:bg-cyan-600 text-white text-xs", children: verifyDialogLoading ? 'Verifying...' : 'Verify & Change' })] })] }))] }) }))] }));
+}

package/dist/main-portal/components/profile/TwoFactorSettings.d.ts

@@ -0,0 +1 @@
+export default function TwoFactorSettings(): import("react/jsx-runtime").JSX.Element | null;