shogun-button-react 1.0.0 → 1.3.1

package/dist/components/ShogunButton.js

@@ -1,6 +1,6 @@
-import React, { useContext, useState, createContext, useEffect } from "react";
+import React, { useContext, useState, createContext, useEffect, useRef } from "react";
 import { Observable } from "rxjs";
-import "../types.js"; // Import type file to extend definitions
+import "../types/index.js"; // Import type file to extend definitions
 import "../styles/index.css";
 // Default context
 const defaultShogunContext = {
@@ -16,6 +16,8 @@ const defaultShogunContext = {
     setProvider: () => false,
     hasPlugin: () => false,
     getPlugin: () => undefined,
+    exportGunPair: async () => "",
+    importGunPair: async () => false,
 };
 // Create context using React's createContext directly
 const ShogunContext = createContext(defaultShogunContext);
@@ -24,19 +26,48 @@ export const useShogun = () => useContext(ShogunContext);
 // Provider component
 export function ShogunButtonProvider({ children, sdk, options, onLoginSuccess, onSignupSuccess, onError, }) {
     // Use React's useState directly
-    const [isLoggedIn, setIsLoggedIn] = useState((sdk === null || sdk === void 0 ? void 0 : sdk.isLoggedIn()) || false);
+    const [isLoggedIn, setIsLoggedIn] = useState(false);
     const [userPub, setUserPub] = useState(null);
     const [username, setUsername] = useState(null);
     // Effetto per gestire l'inizializzazione e pulizia
     useEffect(() => {
-        // Controlla se l'utente è già autenticato all'avvio
-        if (sdk === null || sdk === void 0 ? void 0 : sdk.isLoggedIn()) {
-            setIsLoggedIn(true);
+        var _a, _b;
+        if (!sdk)
+            return;
+        const handleLogin = (authResult) => {
+            var _a, _b;
+            const pub = authResult.pub || ((_b = (_a = sdk.gun.user()) === null || _a === void 0 ? void 0 : _a.is) === null || _b === void 0 ? void 0 : _b.pub);
+            if (pub) {
+                setIsLoggedIn(true);
+                setUserPub(pub);
+                setUsername(authResult.alias || pub.slice(0, 8) + '...');
+                if (onLoginSuccess && authResult.method !== 'recall') {
+                    onLoginSuccess({
+                        userPub: pub,
+                        username: authResult.alias || pub.slice(0, 8) + '...',
+                        authMethod: authResult.method,
+                    });
+                }
+            }
+        };
+        const handleLogout = () => {
+            setIsLoggedIn(false);
+            setUserPub(null);
+            setUsername(null);
+        };
+        if (sdk.isLoggedIn()) {
+            const pub = (_b = (_a = sdk.gun.user()) === null || _a === void 0 ? void 0 : _a.is) === null || _b === void 0 ? void 0 : _b.pub;
+            if (pub) {
+                handleLogin({ pub, method: 'recall' });
+            }
         }
+        sdk.on('auth:login', handleLogin);
+        sdk.on('auth:logout', handleLogout);
         return () => {
-            // Pulizia quando il componente si smonta
+            sdk.off('auth:login', handleLogin);
+            sdk.off('auth:logout', handleLogout);
         };
-    }, [sdk]);
+    }, [sdk, onLoginSuccess]);
     // RxJS observe method
     const observe = (path) => {
         if (!sdk) {
@@ -58,6 +89,31 @@ export function ShogunButtonProvider({ children, sdk, options, onLoginSuccess, o
                     username = args[0];
                     result = await sdk.login(args[0], args[1]);
                     break;
+                case "pair":
+                    // New pair authentication method
+                    const pair = args[0];
+                    if (!pair || typeof pair !== 'object') {
+                        throw new Error("Invalid pair data provided");
+                    }
+                    result = await new Promise((resolve, reject) => {
+                        sdk.gun.user().auth(pair, (ack) => {
+                            if (ack.err) {
+                                reject(new Error(`Pair authentication failed: ${ack.err}`));
+                                return;
+                            }
+                            const pub = ack.pub || pair.pub;
+                            const alias = ack.alias || `user_${pub === null || pub === void 0 ? void 0 : pub.substring(0, 8)}`;
+                            resolve({
+                                success: true,
+                                userPub: pub,
+                                alias: alias,
+                                method: 'pair'
+                            });
+                        });
+                    });
+                    username = result.alias;
+                    authMethod = "pair";
+                    break;
                 case "webauthn":
                     username = args[0];
                     const webauthn = sdk.getPlugin("webauthn");
@@ -246,6 +302,70 @@ export function ShogunButtonProvider({ children, sdk, options, onLoginSuccess, o
     const getPlugin = (name) => {
         return sdk ? sdk.getPlugin(name) : undefined;
     };
+    // Export Gun pair functionality
+    const exportGunPair = async (password) => {
+        var _a;
+        if (!sdk) {
+            throw new Error("SDK not initialized");
+        }
+        if (!isLoggedIn) {
+            throw new Error("User not authenticated");
+        }
+        try {
+            const user = sdk.gun.user();
+            const pair = (_a = user === null || user === void 0 ? void 0 : user._) === null || _a === void 0 ? void 0 : _a.sea;
+            if (!pair) {
+                throw new Error("No Gun pair available for current user");
+            }
+            let pairData = JSON.stringify(pair);
+            // If password provided, encrypt the pair
+            if (password && password.trim()) {
+                // Use Gun's SEA for encryption if available
+                if (window.SEA && window.SEA.encrypt) {
+                    pairData = await window.SEA.encrypt(pairData, password);
+                }
+                else {
+                    console.warn("SEA encryption not available, exporting unencrypted");
+                }
+            }
+            return pairData;
+        }
+        catch (error) {
+            throw new Error(`Failed to export Gun pair: ${error.message}`);
+        }
+    };
+    // Import Gun pair functionality
+    const importGunPair = async (pairData, password) => {
+        if (!sdk) {
+            throw new Error("SDK not initialized");
+        }
+        try {
+            let dataString = pairData;
+            // If password provided, decrypt the pair
+            if (password && password.trim()) {
+                if (window.SEA && window.SEA.decrypt) {
+                    dataString = await window.SEA.decrypt(pairData, password);
+                    if (!dataString) {
+                        throw new Error("Failed to decrypt pair data - wrong password?");
+                    }
+                }
+                else {
+                    console.warn("SEA decryption not available, assuming unencrypted data");
+                }
+            }
+            const pair = JSON.parse(dataString);
+            // Validate pair structure
+            if (!pair.pub || !pair.priv || !pair.epub || !pair.epriv) {
+                throw new Error("Invalid pair structure - missing required keys");
+            }
+            // Authenticate with the imported pair
+            const result = await login("pair", pair);
+            return result.success;
+        }
+        catch (error) {
+            throw new Error(`Failed to import Gun pair: ${error.message}`);
+        }
+    };
     // Provide the context value to children
     return (React.createElement(ShogunContext.Provider, { value: {
             sdk,
@@ -260,6 +380,8 @@ export function ShogunButtonProvider({ children, sdk, options, onLoginSuccess, o
             setProvider,
             hasPlugin,
             getPlugin,
+            exportGunPair,
+            importGunPair,
         } }, children));
 }
 // SVG Icons Components
@@ -298,20 +420,44 @@ const CloseIcon = () => (React.createElement("svg", { xmlns: "http://www.w3.org/
 // Component for Shogun login button
 export const ShogunButton = (() => {
     const Button = () => {
-        const { isLoggedIn, username, logout, login, signUp, sdk, options } = useShogun();
+        const { isLoggedIn, username, logout, login, signUp, sdk, options, exportGunPair, importGunPair } = useShogun();
         // Form states
         const [modalIsOpen, setModalIsOpen] = useState(false);
         const [formUsername, setFormUsername] = useState("");
         const [formPassword, setFormPassword] = useState("");
         const [formPasswordConfirm, setFormPasswordConfirm] = useState("");
+        const [formHint, setFormHint] = useState("");
+        const [formSecurityQuestion] = useState("What is your favorite color?"); // Hardcoded for now
+        const [formSecurityAnswer, setFormSecurityAnswer] = useState("");
         const [formMode, setFormMode] = useState("login");
+        const [authView, setAuthView] = useState("options");
         const [error, setError] = useState("");
         const [loading, setLoading] = useState(false);
         const [dropdownOpen, setDropdownOpen] = useState(false);
+        const [recoveredHint, setRecoveredHint] = useState("");
+        const [exportPassword, setExportPassword] = useState("");
+        const [importPassword, setImportPassword] = useState("");
+        const [importPairData, setImportPairData] = useState("");
+        const [exportedPair, setExportedPair] = useState("");
+        const dropdownRef = useRef(null);
+        // Handle click outside to close dropdown
+        useEffect(() => {
+            const handleClickOutside = (event) => {
+                if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+                    setDropdownOpen(false);
+                }
+            };
+            if (dropdownOpen) {
+                document.addEventListener('mousedown', handleClickOutside);
+                return () => {
+                    document.removeEventListener('mousedown', handleClickOutside);
+                };
+            }
+        }, [dropdownOpen]);
         // If already logged in, show only logout button
         if (isLoggedIn && username) {
             return (React.createElement("div", { className: "shogun-logged-in-container" },
-                React.createElement("div", { className: "shogun-dropdown" },
+                React.createElement("div", { className: "shogun-dropdown", ref: dropdownRef },
                     React.createElement("button", { className: "shogun-button shogun-logged-in", onClick: () => setDropdownOpen(!dropdownOpen) },
                         React.createElement("div", { className: "shogun-avatar" }, username.substring(0, 2).toUpperCase()),
                         React.createElement("span", { className: "shogun-username" }, username.length > 12
@@ -326,13 +472,21 @@ export const ShogunButton = (() => {
                                     : username))),
                         React.createElement("div", { className: "shogun-dropdown-item", onClick: logout },
                             React.createElement(LogoutIcon, null),
-                            React.createElement("span", null, "Disconnect")))))));
+                            React.createElement("span", null, "Disconnect")),
+                        React.createElement("div", { className: "shogun-dropdown-item", onClick: () => {
+                                setDropdownOpen(false);
+                                setAuthView("export");
+                                setModalIsOpen(true);
+                            } },
+                            React.createElement("span", null, "\uD83D\uDCE4"),
+                            React.createElement("span", null, "Export Pair")))))));
         }
         // Event handlers
         const handleAuth = async (method, ...args) => {
             setError("");
             setLoading(true);
             try {
+                // Use formMode to determine whether to call login or signUp
                 const action = formMode === "login" ? login : signUp;
                 const result = await action(method, ...args);
                 if (result && !result.success && result.error) {
@@ -352,9 +506,33 @@ export const ShogunButton = (() => {
                 setLoading(false);
             }
         };
-        const handleSubmit = (e) => {
+        const handleSubmit = async (e) => {
             e.preventDefault();
-            handleAuth("password", formUsername, formPassword, formPasswordConfirm);
+            setError("");
+            setLoading(true);
+            try {
+                if (formMode === "signup") {
+                    const result = await signUp("password", formUsername, formPassword, formPasswordConfirm);
+                    if (result && result.success) {
+                        if (sdk === null || sdk === void 0 ? void 0 : sdk.gundb) {
+                            await sdk.gundb.setPasswordHint(formUsername, formPassword, formHint, [formSecurityQuestion], [formSecurityAnswer]);
+                        }
+                        setModalIsOpen(false);
+                    }
+                    else if (result && result.error) {
+                        setError(result.error);
+                    }
+                }
+                else {
+                    await handleAuth("password", formUsername, formPassword);
+                }
+            }
+            catch (e) {
+                setError(e.message || "An unexpected error occurred.");
+            }
+            finally {
+                setLoading(false);
+            }
         };
         const handleWeb3Auth = () => handleAuth("web3");
         const handleWebAuthnAuth = () => {
@@ -370,15 +548,89 @@ export const ShogunButton = (() => {
         };
         const handleNostrAuth = () => handleAuth("nostr");
         const handleOAuth = (provider) => handleAuth("oauth", provider);
+        const handleRecover = async () => {
+            setError("");
+            setLoading(true);
+            try {
+                if (!(sdk === null || sdk === void 0 ? void 0 : sdk.gundb)) {
+                    throw new Error("SDK not ready");
+                }
+                const result = await sdk.gundb.forgotPassword(formUsername, [
+                    formSecurityAnswer,
+                ]);
+                if (result.success && result.hint) {
+                    setRecoveredHint(result.hint);
+                    setAuthView("showHint");
+                }
+                else {
+                    setError(result.error || "Could not recover hint.");
+                }
+            }
+            catch (e) {
+                setError(e.message || "An unexpected error occurred.");
+            }
+            finally {
+                setLoading(false);
+            }
+        };
+        const handleExportPair = async () => {
+            setError("");
+            setLoading(true);
+            try {
+                const pairData = await exportGunPair(exportPassword || undefined);
+                setExportedPair(pairData);
+                // Copy to clipboard
+                if (navigator.clipboard) {
+                    await navigator.clipboard.writeText(pairData);
+                    alert("Pair exported and copied to clipboard!");
+                }
+                else {
+                    alert("Pair exported! Please copy it manually from the text area.");
+                }
+            }
+            catch (e) {
+                setError(e.message || "Failed to export pair");
+            }
+            finally {
+                setLoading(false);
+            }
+        };
+        const handleImportPair = async () => {
+            setError("");
+            setLoading(true);
+            try {
+                if (!importPairData.trim()) {
+                    throw new Error("Please enter pair data");
+                }
+                const success = await importGunPair(importPairData, importPassword || undefined);
+                if (success) {
+                    setModalIsOpen(false);
+                    alert("Pair imported successfully! You are now logged in.");
+                }
+                else {
+                    throw new Error("Failed to import pair");
+                }
+            }
+            catch (e) {
+                setError(e.message || "Failed to import pair");
+            }
+            finally {
+                setLoading(false);
+            }
+        };
         const resetForm = () => {
             setFormUsername("");
             setFormPassword("");
             setFormPasswordConfirm("");
+            setFormHint("");
+            setFormSecurityAnswer("");
             setError("");
             setLoading(false);
+            setAuthView("options");
         };
         const openModal = () => {
             resetForm();
+            setAuthView("options");
             setModalIsOpen(true);
         };
         const closeModal = () => {
@@ -386,62 +638,196 @@ export const ShogunButton = (() => {
         };
         const toggleMode = () => {
             resetForm();
+            setAuthView("password");
             setFormMode((prev) => (prev === "login" ? "signup" : "login"));
         };
+        // Add buttons for both login and signup for alternative auth methods
+        const renderAuthOptions = () => (React.createElement("div", { className: "shogun-auth-options" },
+            options.showMetamask !== false && (sdk === null || sdk === void 0 ? void 0 : sdk.hasPlugin("web3")) && (React.createElement("div", { className: "shogun-auth-option-group" },
+                React.createElement("button", { type: "button", className: "shogun-auth-option-button", onClick: () => handleAuth("web3"), disabled: loading },
+                    React.createElement(WalletIcon, null),
+                    formMode === "login" ? "Login with MetaMask" : "Signup with MetaMask"))),
+            options.showWebauthn !== false && (sdk === null || sdk === void 0 ? void 0 : sdk.hasPlugin("webauthn")) && (React.createElement("div", { className: "shogun-auth-option-group" },
+                React.createElement("button", { type: "button", className: "shogun-auth-option-button", onClick: () => {
+                        if (!formUsername) {
+                            setError("Username required for WebAuthn");
+                            return;
+                        }
+                        handleAuth("webauthn", formUsername);
+                    }, disabled: loading },
+                    React.createElement(WebAuthnIcon, null),
+                    formMode === "login" ? "Login with WebAuthn" : "Signup with WebAuthn"))),
+            options.showNostr !== false && (sdk === null || sdk === void 0 ? void 0 : sdk.hasPlugin("nostr")) && (React.createElement("div", { className: "shogun-auth-option-group" },
+                React.createElement("button", { type: "button", className: "shogun-auth-option-button", onClick: () => handleAuth("nostr"), disabled: loading },
+                    React.createElement(NostrIcon, null),
+                    formMode === "login" ? "Login with Nostr" : "Signup with Nostr"))),
+            options.showOauth !== false && (sdk === null || sdk === void 0 ? void 0 : sdk.hasPlugin("oauth")) && (React.createElement("div", { className: "shogun-auth-option-group" },
+                React.createElement("button", { type: "button", className: "shogun-auth-option-button shogun-google-button", onClick: () => handleAuth("oauth", "google"), disabled: loading },
+                    React.createElement(GoogleIcon, null),
+                    formMode === "login" ? "Login with Google" : "Signup with Google"))),
+            React.createElement("div", { className: "shogun-divider" },
+                React.createElement("span", null, "or")),
+            React.createElement("button", { type: "button", className: "shogun-auth-option-button", onClick: () => setAuthView("password"), disabled: loading },
+                React.createElement(LockIcon, null),
+                formMode === "login" ? "Login with Password" : "Signup with Password"),
+            formMode === "login" && (React.createElement("button", { type: "button", className: "shogun-auth-option-button", onClick: () => setAuthView("import"), disabled: loading },
+                React.createElement("span", null, "\uD83D\uDCE5"),
+                "Import Gun Pair"))));
+        const renderPasswordForm = () => (React.createElement("form", { onSubmit: handleSubmit, className: "shogun-auth-form" },
+            React.createElement("div", { className: "shogun-form-group" },
+                React.createElement("label", { htmlFor: "username" },
+                    React.createElement(UserIcon, null),
+                    React.createElement("span", null, "Username")),
+                React.createElement("input", { type: "text", id: "username", value: formUsername, onChange: (e) => setFormUsername(e.target.value), disabled: loading, required: true, placeholder: "Enter your username" })),
+            React.createElement("div", { className: "shogun-form-group" },
+                React.createElement("label", { htmlFor: "password" },
+                    React.createElement(LockIcon, null),
+                    React.createElement("span", null, "Password")),
+                React.createElement("input", { type: "password", id: "password", value: formPassword, onChange: (e) => setFormPassword(e.target.value), disabled: loading, required: true, placeholder: "Enter your password" })),
+            formMode === "signup" && (React.createElement(React.Fragment, null,
+                React.createElement("div", { className: "shogun-form-group" },
+                    React.createElement("label", { htmlFor: "passwordConfirm" },
+                        React.createElement(KeyIcon, null),
+                        React.createElement("span", null, "Confirm Password")),
+                    React.createElement("input", { type: "password", id: "passwordConfirm", value: formPasswordConfirm, onChange: (e) => setFormPasswordConfirm(e.target.value), disabled: loading, required: true, placeholder: "Confirm your password" })),
+                React.createElement("div", { className: "shogun-form-group" },
+                    React.createElement("label", { htmlFor: "hint" },
+                        React.createElement(UserIcon, null),
+                        React.createElement("span", null, "Password Hint")),
+                    React.createElement("input", { type: "text", id: "hint", value: formHint, onChange: (e) => setFormHint(e.target.value), disabled: loading, required: true, placeholder: "Enter your password hint" })),
+                React.createElement("div", { className: "shogun-form-group" },
+                    React.createElement("label", { htmlFor: "securityQuestion" },
+                        React.createElement(UserIcon, null),
+                        React.createElement("span", null, "Security Question")),
+                    React.createElement("input", { type: "text", id: "securityQuestion", value: formSecurityQuestion, disabled: true })),
+                React.createElement("div", { className: "shogun-form-group" },
+                    React.createElement("label", { htmlFor: "securityAnswer" },
+                        React.createElement(UserIcon, null),
+                        React.createElement("span", null, "Security Answer")),
+                    React.createElement("input", { type: "text", id: "securityAnswer", value: formSecurityAnswer, onChange: (e) => setFormSecurityAnswer(e.target.value), disabled: loading, required: true, placeholder: "Enter your security answer" })))),
+            React.createElement("button", { type: "submit", className: "shogun-submit-button", disabled: loading }, loading
+                ? "Processing..."
+                : formMode === "login"
+                    ? "Sign In"
+                    : "Create Account"),
+            React.createElement("div", { className: "shogun-form-footer" },
+                React.createElement("button", { type: "button", className: "shogun-toggle-mode shogun-prominent-toggle", onClick: toggleMode, disabled: loading }, formMode === "login"
+                    ? "Don't have an account? Sign up"
+                    : "Already have an account? Log in"),
+                formMode === "login" && (React.createElement("button", { type: "button", className: "shogun-toggle-mode", onClick: () => setAuthView("recover"), disabled: loading }, "Forgot password?")))));
+        const renderRecoveryForm = () => (React.createElement("div", { className: "shogun-auth-form" },
+            React.createElement("div", { className: "shogun-form-group" },
+                React.createElement("label", { htmlFor: "username" },
+                    React.createElement(UserIcon, null),
+                    React.createElement("span", null, "Username")),
+                React.createElement("input", { type: "text", id: "username", value: formUsername, onChange: (e) => setFormUsername(e.target.value), disabled: loading, required: true, placeholder: "Enter your username" })),
+            React.createElement("div", { className: "shogun-form-group" },
+                React.createElement("label", null, "Security Question"),
+                React.createElement("p", null, formSecurityQuestion)),
+            React.createElement("div", { className: "shogun-form-group" },
+                React.createElement("label", { htmlFor: "securityAnswer" },
+                    React.createElement(KeyIcon, null),
+                    React.createElement("span", null, "Answer")),
+                React.createElement("input", { type: "text", id: "securityAnswer", value: formSecurityAnswer, onChange: (e) => setFormSecurityAnswer(e.target.value), disabled: loading, required: true, placeholder: "Enter your answer" })),
+            React.createElement("button", { type: "button", className: "shogun-submit-button", onClick: handleRecover, disabled: loading }, loading ? "Recovering..." : "Get Hint"),
+            React.createElement("div", { className: "shogun-form-footer" },
+                React.createElement("button", { className: "shogun-toggle-mode", onClick: () => setAuthView("password"), disabled: loading }, "Back to Login"))));
+        const renderHint = () => (React.createElement("div", { className: "shogun-auth-form" },
+            React.createElement("h3", null, "Your Password Hint"),
+            React.createElement("p", { className: "shogun-hint" }, recoveredHint),
+            React.createElement("button", { className: "shogun-submit-button", onClick: () => {
+                    setAuthView("password");
+                    resetForm();
+                    setFormMode("login");
+                } }, "Back to Login")));
+        const renderExportForm = () => (React.createElement("div", { className: "shogun-auth-form" },
+            React.createElement("h3", null, "Export Gun Pair"),
+            React.createElement("p", { style: { fontSize: '14px', color: '#666', marginBottom: '16px' } }, "Export your Gun pair to backup your account. You can use this to login from another device."),
+            React.createElement("div", { className: "shogun-form-group" },
+                React.createElement("label", { htmlFor: "exportPassword" },
+                    React.createElement(LockIcon, null),
+                    React.createElement("span", null, "Encryption Password (optional but recommended)")),
+                React.createElement("input", { type: "password", id: "exportPassword", value: exportPassword, onChange: (e) => setExportPassword(e.target.value), disabled: loading, placeholder: "Leave empty to export unencrypted" })),
+            exportedPair && (React.createElement("div", { className: "shogun-form-group" },
+                React.createElement("label", null, "Your Gun Pair (copy this safely):"),
+                React.createElement("textarea", { value: exportedPair, readOnly: true, rows: 6, style: {
+                        fontFamily: 'monospace',
+                        fontSize: '12px',
+                        width: '100%',
+                        padding: '8px',
+                        border: '1px solid #ccc',
+                        borderRadius: '4px'
+                    } }))),
+            React.createElement("button", { type: "button", className: "shogun-submit-button", onClick: handleExportPair, disabled: loading }, loading ? "Exporting..." : "Export Pair"),
+            React.createElement("div", { className: "shogun-form-footer" },
+                React.createElement("button", { className: "shogun-toggle-mode", onClick: () => {
+                        setAuthView("options");
+                        setExportPassword("");
+                        setExportedPair("");
+                    }, disabled: loading }, "Back"))));
+        const renderImportForm = () => (React.createElement("div", { className: "shogun-auth-form" },
+            React.createElement("h3", null, "Import Gun Pair"),
+            React.createElement("p", { style: { fontSize: '14px', color: '#666', marginBottom: '16px' } }, "Import a Gun pair to login with your existing account from another device."),
+            React.createElement("div", { className: "shogun-form-group" },
+                React.createElement("label", { htmlFor: "importPairData" },
+                    React.createElement("span", null, "\uD83D\uDCC4"),
+                    React.createElement("span", null, "Gun Pair Data")),
+                React.createElement("textarea", { id: "importPairData", value: importPairData, onChange: (e) => setImportPairData(e.target.value), disabled: loading, placeholder: "Paste your Gun pair JSON here...", rows: 6, style: {
+                        fontFamily: 'monospace',
+                        fontSize: '12px',
+                        width: '100%',
+                        padding: '8px',
+                        border: '1px solid #ccc',
+                        borderRadius: '4px'
+                    } })),
+            React.createElement("div", { className: "shogun-form-group" },
+                React.createElement("label", { htmlFor: "importPassword" },
+                    React.createElement(LockIcon, null),
+                    React.createElement("span", null, "Decryption Password (if encrypted)")),
+                React.createElement("input", { type: "password", id: "importPassword", value: importPassword, onChange: (e) => setImportPassword(e.target.value), disabled: loading, placeholder: "Enter password if pair was encrypted" })),
+            React.createElement("button", { type: "button", className: "shogun-submit-button", onClick: handleImportPair, disabled: loading }, loading ? "Importing..." : "Import and Login"),
+            React.createElement("div", { className: "shogun-form-footer" },
+                React.createElement("button", { className: "shogun-toggle-mode", onClick: () => {
+                        setAuthView("options");
+                        setImportPassword("");
+                        setImportPairData("");
+                    }, disabled: loading }, "Back to Login Options"))));
         // Render logic
         return (React.createElement(React.Fragment, null,
             React.createElement("button", { className: "shogun-connect-button", onClick: openModal },
                 React.createElement(WalletIcon, null),
-                React.createElement("span", null, "Connect")),
+                React.createElement("span", null, "Login / Sign Up")),
             modalIsOpen && (React.createElement("div", { className: "shogun-modal-overlay", onClick: closeModal },
                 React.createElement("div", { className: "shogun-modal", onClick: (e) => e.stopPropagation() },
                     React.createElement("div", { className: "shogun-modal-header" },
-                        React.createElement("h2", null, formMode === "login" ? "Sign In" : "Create Account"),
-                        React.createElement("button", { className: "shogun-close-button", onClick: closeModal },
+                        React.createElement("h2", null, authView === "recover"
+                            ? "Recover Password"
+                            : authView === "showHint"
+                                ? "Password Hint"
+                                : authView === "export"
+                                    ? "Export Gun Pair"
+                                    : authView === "import"
+                                        ? "Import Gun Pair"
+                                        : formMode === "login"
+                                            ? "Login"
+                                            : "Sign Up"),
+                        React.createElement("button", { className: "shogun-close-button", onClick: closeModal, "aria-label": "Close" },
                             React.createElement(CloseIcon, null))),
                     React.createElement("div", { className: "shogun-modal-content" },
                         error && React.createElement("div", { className: "shogun-error-message" }, error),
-                        React.createElement("div", { className: "shogun-auth-options" },
-                            (options === null || options === void 0 ? void 0 : options.showMetamask) && (sdk === null || sdk === void 0 ? void 0 : sdk.hasPlugin("web3")) && (React.createElement("button", { className: "shogun-auth-option-button", onClick: handleWeb3Auth, disabled: loading },
-                                React.createElement(WalletIcon, null),
-                                React.createElement("span", null, "Continue with Wallet"))),
-                            (options === null || options === void 0 ? void 0 : options.showWebauthn) && (sdk === null || sdk === void 0 ? void 0 : sdk.hasPlugin("webauthn")) && (React.createElement("button", { className: "shogun-auth-option-button", onClick: handleWebAuthnAuth, disabled: loading },
-                                React.createElement(WebAuthnIcon, null),
-                                React.createElement("span", null, "Continue with Passkey"))),
-                            (options === null || options === void 0 ? void 0 : options.showNostr) && (sdk === null || sdk === void 0 ? void 0 : sdk.hasPlugin("nostr")) && (React.createElement("button", { className: "shogun-auth-option-button", onClick: handleNostrAuth, disabled: loading },
-                                React.createElement(NostrIcon, null),
-                                React.createElement("span", null, "Continue with Nostr"))),
-                            (options === null || options === void 0 ? void 0 : options.showOauth) && (sdk === null || sdk === void 0 ? void 0 : sdk.hasPlugin("oauth")) && (React.createElement("button", { className: "shogun-auth-option-button shogun-google-button", onClick: () => handleOAuth("google"), disabled: loading },
-                                React.createElement(GoogleIcon, null),
-                                React.createElement("span", null, "Continue with Google")))),
-                        React.createElement("div", { className: "shogun-divider" },
-                            React.createElement("span", null, "or continue with password")),
-                        React.createElement("form", { onSubmit: handleSubmit, className: "shogun-auth-form" },
-                            React.createElement("div", { className: "shogun-form-group" },
-                                React.createElement("label", { htmlFor: "username" },
-                                    React.createElement(UserIcon, null),
-                                    React.createElement("span", null, "Username")),
-                                React.createElement("input", { type: "text", id: "username", value: formUsername, onChange: (e) => setFormUsername(e.target.value), disabled: loading, required: true, placeholder: "Enter your username" })),
-                            React.createElement("div", { className: "shogun-form-group" },
-                                React.createElement("label", { htmlFor: "password" },
-                                    React.createElement(LockIcon, null),
-                                    React.createElement("span", null, "Password")),
-                                React.createElement("input", { type: "password", id: "password", value: formPassword, onChange: (e) => setFormPassword(e.target.value), disabled: loading, required: true, placeholder: "Enter your password" })),
-                            formMode === "signup" && (React.createElement("div", { className: "shogun-form-group" },
-                                React.createElement("label", { htmlFor: "passwordConfirm" },
-                                    React.createElement(KeyIcon, null),
-                                    React.createElement("span", null, "Confirm Password")),
-                                React.createElement("input", { type: "password", id: "passwordConfirm", value: formPasswordConfirm, onChange: (e) => setFormPasswordConfirm(e.target.value), disabled: loading, required: true, placeholder: "Confirm your password" }))),
-                            React.createElement("button", { type: "submit", className: "shogun-submit-button", disabled: loading }, loading
-                                ? "Processing..."
-                                : formMode === "login"
-                                    ? "Sign In"
-                                    : "Create Account")),
-                        React.createElement("div", { className: "shogun-form-footer" },
-                            formMode === "login"
-                                ? "Don't have an account?"
-                                : "Already have an account?",
-                            React.createElement("button", { className: "shogun-toggle-mode", onClick: toggleMode, disabled: loading }, formMode === "login" ? "Sign Up" : "Sign In"))))))));
+                        authView === "options" && (React.createElement(React.Fragment, null,
+                            renderAuthOptions(),
+                            React.createElement("div", { className: "shogun-form-footer" },
+                                React.createElement("button", { type: "button", className: "shogun-toggle-mode shogun-prominent-toggle", onClick: toggleMode, disabled: loading }, formMode === "login"
+                                    ? "Don't have an account? Sign up"
+                                    : "Already have an account? Log in")))),
+                        authView === "password" && (React.createElement(React.Fragment, null,
+                            React.createElement("button", { className: "shogun-back-button", onClick: () => setAuthView("options") }, "\u2190 Back"),
+                            renderPasswordForm())),
+                        authView === "recover" && renderRecoveryForm(),
+                        authView === "showHint" && renderHint(),
+                        authView === "export" && renderExportForm(),
+                        authView === "import" && renderImportForm()))))));
     };
     Button.displayName = "ShogunButton";
     return Object.assign(Button, {

package/dist/connector.d.ts

@@ -0,0 +1,2 @@
+import { ShogunConnectorOptions, ShogunConnectorResult } from "./types";
+export declare function shogunConnector(options: ShogunConnectorOptions): ShogunConnectorResult;