Compare commits
17 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
8f34c2de73 | ||
|
|
ca75df8bb4 | ||
|
|
c747f1f315 | ||
|
|
2a66b5eeec | ||
|
|
fa9688b17e | ||
|
|
a0e18c34d6 | ||
|
|
995c3f526c | ||
|
|
77ea4a8e67 | ||
|
|
12d4810f4c | ||
|
|
517974699d | ||
|
|
bac621bbaa | ||
|
|
9f0b0638e5 | ||
|
|
b59bf17372 | ||
|
|
3b1eb7f951 | ||
|
|
72b0d9b102 | ||
|
|
bad361a686 | ||
|
|
025d66c096 |
46
.gitignore
vendored
46
.gitignore
vendored
@@ -1,33 +1,21 @@
|
||||
# Dependencies
|
||||
node_modules/
|
||||
nostr-tools/
|
||||
|
||||
packages/auth/dist/
|
||||
packages/components/dist/
|
||||
packages/components/www/
|
||||
packages/components/loader/
|
||||
# IDE and OS files
|
||||
.idea/
|
||||
.vscode/
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
|
||||
packages/components/*~
|
||||
packages/components/*.sw[mnpcod]
|
||||
packages/components/*.log
|
||||
packages/components/*.lock
|
||||
packages/components/*.tmp
|
||||
packages/components/*.tmp.*
|
||||
packages/components/log.txt
|
||||
packages/components/*.sublime-project
|
||||
packages/components/*.sublime-workspace
|
||||
# Temporary files
|
||||
*.log
|
||||
*.tmp
|
||||
*.tmp.*
|
||||
*~
|
||||
*.sw[mnpcod]
|
||||
*.lock
|
||||
log.txt
|
||||
Trash/
|
||||
|
||||
packages/components/.stencil/
|
||||
packages/components/.idea/
|
||||
packages/components/.vscode/
|
||||
packages/components/.sass-cache/
|
||||
packages/components/.versions/
|
||||
|
||||
packages/components/$RECYCLE.BIN/
|
||||
|
||||
packages/components/.DS_Store
|
||||
packages/components/Thumbs.db
|
||||
packages/components/UserInterfaceState.xcuserstate
|
||||
packages/components/.env
|
||||
# Aider files
|
||||
.aider.chat.history.md
|
||||
.aider.input.history
|
||||
.aider.tags.cache.v3/
|
||||
nostr-login/
|
||||
@@ -1,318 +0,0 @@
|
||||
# NOSTR_LOGIN_LITE
|
||||
|
||||
Objective
|
||||
- Deliver a minimal, dependency-light replacement for the current auth/UI stack that:
|
||||
- Preserves all login methods: Nostr Connect (nip46), Extension, Local key, Read-only, OTP/DM.
|
||||
- Exposes the same window.nostr surface: [getPublicKey()](lite/nostr-login-lite.js:1), [signEvent(event)](lite/nostr-login-lite.js:1), [nip04.encrypt(pubkey, plaintext)](lite/nostr-login-lite.js:1), [nip04.decrypt(pubkey, ciphertext)](lite/nostr-login-lite.js:1), [nip44.encrypt(pubkey, plaintext)](lite/nostr-login-lite.js:1), [nip44.decrypt(pubkey, ciphertext)](lite/nostr-login-lite.js:1).
|
||||
- Dispatches identical nlAuth/nlLaunch/nlLogout/nlDarkMode events and accepts setAuth calls for compatibility.
|
||||
|
||||
Key differences vs current project
|
||||
- UI: replace Stencil/Tailwind component library with a single vanilla-JS modal and minimal CSS.
|
||||
- Transport: remove NDK; implement NIP-46 RPC using nostr-tools SimplePool.
|
||||
- Crypto: rely on nostr-tools (via CDN global window.NostrTools) for keygen/signing (finalizeEvent), nip04, nip19, and SimplePool; embed a small NIP-44 codec if window.NostrTools.nip44 is not available. The current project’s codec is in [packages/auth/src/utils/nip44.ts](packages/auth/src/utils/nip44.ts).
|
||||
|
||||
Nostr Tools via CDN (global window.NostrTools)
|
||||
- Include the bundle once in the page:
|
||||
<script src="https://unpkg.com/nostr-tools/lib/nostr.bundle.js"></script>
|
||||
- Access APIs via window.NostrTools inside the lite build:
|
||||
- [NostrTools.generateSecretKey()](lite/nostr-login-lite.js:1) or [NostrTools.generatePrivateKey()](lite/nostr-login-lite.js:1) (depending on CDN version)
|
||||
- [NostrTools.getPublicKey()](lite/nostr-login-lite.js:1)
|
||||
- [NostrTools.finalizeEvent()](lite/nostr-login-lite.js:1)
|
||||
- [NostrTools.nip04](lite/nostr-login-lite.js:1) encrypt/decrypt
|
||||
- [NostrTools.nip19](lite/nostr-login-lite.js:1) npub/nsec encode/decode
|
||||
- [NostrTools.SimplePool](lite/nostr-login-lite.js:1) relay connectivity
|
||||
|
||||
Supported login methods and crypto summary
|
||||
- Connect (nip46): secp256k1 Schnorr for event signing/hash; nip44 (ChaCha20/HKDF/HMAC) for RPC payloads, with nip04 fallback. Requires relay connectivity (via [NostrTools.SimplePool](lite/nostr-login-lite.js:1)).
|
||||
- Extension: crypto handled by the extension; we bridge calls.
|
||||
- Local key: secp256k1 Schnorr signing ([NostrTools.finalizeEvent()](lite/nostr-login-lite.js:1)) and nip04/nip44 encrypt/decrypt locally.
|
||||
- Read-only: no client crypto.
|
||||
- OTP/DM: no client crypto beyond state persistence; server sends DM and verifies via HTTP.
|
||||
|
||||
Minimal file layout
|
||||
- Single file drop-in (script tag friendly):
|
||||
- [lite/nostr-login-lite.js](lite/nostr-login-lite.js)
|
||||
- Optional split during development (bundled later):
|
||||
- [lite/core/nostr-lite.js](lite/core/nostr-lite.js)
|
||||
- [lite/core/nip46-client.js](lite/core/nip46-client.js)
|
||||
- [lite/core/extension-bridge.js](lite/core/extension-bridge.js)
|
||||
- [lite/core/store.js](lite/core/store.js)
|
||||
- [lite/ui/modal.js](lite/ui/modal.js)
|
||||
|
||||
External dependencies strategy
|
||||
- Use the CDN bundle to provide [window.NostrTools](lite/nostr-login-lite.js:1) at runtime. No npm installs required.
|
||||
- Prefer built-ins from window.NostrTools:
|
||||
- Keys/sign: [generateSecretKey()](lite/nostr-login-lite.js:1)/[generatePrivateKey()](lite/nostr-login-lite.js:1), [getPublicKey()](lite/nostr-login-lite.js:1), [finalizeEvent()](lite/nostr-login-lite.js:1).
|
||||
- Encoding: [nip19](lite/nostr-login-lite.js:1).
|
||||
- Encryption: [nip04](lite/nostr-login-lite.js:1).
|
||||
- Relays: [SimplePool](lite/nostr-login-lite.js:1).
|
||||
- Nip44 choice:
|
||||
- If window.NostrTools.nip44 is available, use it directly.
|
||||
- Otherwise embed the existing lightweight codec adapted from [packages/auth/src/utils/nip44.ts](packages/auth/src/utils/nip44.ts) as [Nip44](lite/nostr-login-lite.js:1).
|
||||
|
||||
Compatibility requirements
|
||||
- Provide the same exports: [init(opts)](lite/nostr-login-lite.js:1), [launch(startScreen)](lite/nostr-login-lite.js:1), [logout()](lite/nostr-login-lite.js:1), [setDarkMode(dark)](lite/nostr-login-lite.js:1), [setAuth(o)](lite/nostr-login-lite.js:1), [cancelNeedAuth()](lite/nostr-login-lite.js:1).
|
||||
- Dispatch identical events and payload shapes as in [onAuth()](packages/auth/src/modules/AuthNostrService.ts:347).
|
||||
|
||||
Architecture overview
|
||||
- NostrLite: window.nostr facade mirroring current behavior, invokes auth UI when needed.
|
||||
- Auth: manages methods (connect/extension/local/readOnly/otp), state, storage, event dispatch.
|
||||
- NIP46Client: minimal RPC over [NostrTools.SimplePool](lite/nostr-login-lite.js:1) (subscribe, send request, parse/decrypt, dedupe auth_url).
|
||||
- ExtensionBridge: safely handle window.nostr detection, guard against overwrites, switch to extension mode when requested.
|
||||
- Store: localStorage helpers for accounts/current/recents and misc values.
|
||||
- UI: single vanilla modal that lists options and drives flow, with optional inline iframe starter for providers that publish iframe_url.
|
||||
|
||||
Function-level TODO checklist (execution order)
|
||||
|
||||
Bootstrap and API surface
|
||||
- [ ] [Deps.ensureNostrToolsLoaded()](lite/nostr-login-lite.js:1)
|
||||
- Verify window.NostrTools presence; throw with actionable message if missing.
|
||||
|
||||
- [ ] [NostrLite.init(options: NostrLoginOptions)](lite/nostr-login-lite.js:1)
|
||||
- Call [Deps.ensureNostrToolsLoaded()](lite/nostr-login-lite.js:1).
|
||||
- Bind window.nostr to the facade.
|
||||
- Initialize ExtensionBridge checking loop.
|
||||
- Mount modal UI, persist options (theme, perms, bunkers, methods, otp URLs, default relays).
|
||||
- Wire nlLaunch/nlLogout/nlDarkMode/nlSetAuth listeners.
|
||||
|
||||
- [ ] [NostrLite.launch(startScreen?: string)](lite/nostr-login-lite.js:1)
|
||||
- Open modal with selected start screen or switch-account if accounts exist.
|
||||
|
||||
- [ ] [NostrLite.logout()](lite/nostr-login-lite.js:1)
|
||||
- Clear current account; dispatch nlAuth logout; reset signer/client state.
|
||||
|
||||
- [ ] [NostrLite.setDarkMode(dark: boolean)](lite/nostr-login-lite.js:1)
|
||||
- Persist and apply theme to modal.
|
||||
|
||||
- [ ] [NostrLite.setAuth(o: NostrLoginAuthOptions)](lite/nostr-login-lite.js:1)
|
||||
- Validate o.type in {login, signup, logout}; o.method in {connect, extension, local, otp, readOnly}.
|
||||
- Delegate to [Auth.switchAccount()](lite/nostr-login-lite.js:1); dispatch consistent nlAuth.
|
||||
|
||||
- [ ] [NostrLite.cancelNeedAuth()](lite/nostr-login-lite.js:1)
|
||||
- Cancel current connect/listen flow and close modal section if waiting.
|
||||
|
||||
window.nostr facade
|
||||
- [ ] [NostrLite.ensureAuth()](lite/nostr-login-lite.js:1)
|
||||
- If no user, open modal; await until authenticated or rejected.
|
||||
|
||||
- [ ] [NostrLite.getPublicKey()](lite/nostr-login-lite.js:1)
|
||||
- Ensure auth, return current pubkey or throw.
|
||||
|
||||
- [ ] [NostrLite.signEvent(event: NostrEvent)](lite/nostr-login-lite.js:1)
|
||||
- Ensure auth; if local key then sign locally via [NostrTools.finalizeEvent()](lite/nostr-login-lite.js:1); else sign via [NIP46Client.sendRequest()](lite/nostr-login-lite.js:1).
|
||||
|
||||
- [ ] [NostrLite.nip04.encrypt(pubkey, plaintext)](lite/nostr-login-lite.js:1)
|
||||
- [ ] [NostrLite.nip04.decrypt(pubkey, ciphertext)](lite/nostr-login-lite.js:1)
|
||||
- Ensure auth; route to local ([NostrTools.nip04](lite/nostr-login-lite.js:1)) or remote signer via NIP-46 nip04_{encrypt|decrypt}.
|
||||
|
||||
- [ ] [NostrLite.nip44.encrypt(pubkey, plaintext)](lite/nostr-login-lite.js:1)
|
||||
- [ ] [NostrLite.nip44.decrypt(pubkey, ciphertext)](lite/nostr-login-lite.js:1)
|
||||
- Ensure auth; use window.NostrTools.nip44 if present or local [Nip44](lite/nostr-login-lite.js:1); remote via nip44_{encrypt|decrypt}.
|
||||
|
||||
Auth module
|
||||
- [ ] [Auth.startAuthSession()](lite/nostr-login-lite.js:1)
|
||||
- Create a promise used by ensureAuth/waitReady; allows Connect flow to resolve or be cancelled.
|
||||
|
||||
- [ ] [Auth.endAuthSession()](lite/nostr-login-lite.js:1)
|
||||
- Resolve session; if iframeUrl present, bind iframe port to NIP46Client before resolving.
|
||||
|
||||
- [ ] [Auth.resetAuthSession()](lite/nostr-login-lite.js:1)
|
||||
- Cancel current session safely.
|
||||
|
||||
- [ ] [Auth.onAuth(type: "login" | "signup" | "logout", info?: Info)](lite/nostr-login-lite.js:1)
|
||||
- Update state, persist, dispatch nlAuth; fetch profile asynchronously and update name/picture when fetched; preserve nip05 semantics.
|
||||
|
||||
- [ ] [Auth.switchAccount(info: Info, signup = false)](lite/nostr-login-lite.js:1)
|
||||
- Branch to [Auth.setReadOnly()](lite/nostr-login-lite.js:1)/[Auth.setOTP()](lite/nostr-login-lite.js:1)/[Auth.setLocal()](lite/nostr-login-lite.js:1)/[Auth.trySetExtensionForPubkey()](lite/nostr-login-lite.js:1)/[Auth.setConnect()](lite/nostr-login-lite.js:1).
|
||||
|
||||
- [ ] [Auth.setReadOnly(pubkey: string)](lite/nostr-login-lite.js:1)
|
||||
|
||||
- [ ] [Auth.setOTP(pubkey: string, data: string)](lite/nostr-login-lite.js:1)
|
||||
|
||||
- [ ] [Auth.localSignup(name: string, sk?: string)](lite/nostr-login-lite.js:1)
|
||||
- Generate sk via [NostrTools.generateSecretKey()](lite/nostr-login-lite.js:1)/[generatePrivateKey()](lite/nostr-login-lite.js:1) if missing; [Auth.setLocal(signup=true)](lite/nostr-login-lite.js:1).
|
||||
|
||||
- [ ] [Auth.setLocal(info: Info, signup?: boolean)](lite/nostr-login-lite.js:1)
|
||||
- Instantiate [LocalSigner](lite/nostr-login-lite.js:1); call [Auth.onAuth()](lite/nostr-login-lite.js:1).
|
||||
|
||||
- [ ] [Auth.trySetExtensionForPubkey(pubkey: string)](lite/nostr-login-lite.js:1)
|
||||
- Use [ExtensionBridge.setExtensionReadPubkey()](lite/nostr-login-lite.js:1) and reconcile.
|
||||
|
||||
- [ ] [Auth.setConnect(info: Info)](lite/nostr-login-lite.js:1)
|
||||
- Initialize NIP46Client with existing token/relays via [NIP46Client.init()](lite/nostr-login-lite.js:1) and [NIP46Client.connect()](lite/nostr-login-lite.js:1); call [Auth.onAuth()](lite/nostr-login-lite.js:1); [Auth.endAuthSession()](lite/nostr-login-lite.js:1).
|
||||
|
||||
- [ ] [Auth.authNip46(type, { name, bunkerUrl, sk, domain, iframeUrl })](lite/nostr-login-lite.js:1)
|
||||
- Parse bunkerUrl/nip05; [NIP46Client.init()](lite/nostr-login-lite.js:1) + [NIP46Client.connect()](lite/nostr-login-lite.js:1); [Auth.onAuth()](lite/nostr-login-lite.js:1).
|
||||
|
||||
- [ ] [Auth.nostrConnect(relay?: string, opts?: { domain?: string; link?: string; importConnect?: boolean; iframeUrl?: string })](lite/nostr-login-lite.js:1)
|
||||
- Create local keypair and secret; open provider link or show iframe starter; [NIP46Client.listen()](lite/nostr-login-lite.js:1) to learn signerPubkey, then [NIP46Client.initUserPubkey()](lite/nostr-login-lite.js:1); set bunkerUrl; [Auth.onAuth()](lite/nostr-login-lite.js:1) unless importConnect.
|
||||
|
||||
- [ ] [Auth.createNostrConnect(relay?: string)](lite/nostr-login-lite.js:1)
|
||||
- Build nostrconnect:// URL with meta (icon/url/name/perms).
|
||||
|
||||
- [ ] [Auth.getNostrConnectServices(): Promise<[string, ConnectionString[]]>](lite/nostr-login-lite.js:1)
|
||||
- Return nostrconnect URL and preconfigured providers; query .well-known/nostr.json for relays and iframe_url.
|
||||
|
||||
- [ ] [Auth.importAndConnect(cs: ConnectionString)](lite/nostr-login-lite.js:1)
|
||||
- nostrConnect(..., importConnect=true) → logout keep signer → onAuth(login, connect info).
|
||||
|
||||
- [ ] [Auth.createAccount(nip05: string)](lite/nostr-login-lite.js:1) (optional parity)
|
||||
- Use bunker provider to create account; return bunkerUrl and sk.
|
||||
|
||||
NIP46Client (transport over NostrTools.SimplePool)
|
||||
- [ ] [NIP46Client.init(localSk: string, remotePubkey?: string, relays: string[], iframeOrigin?: string)](lite/nostr-login-lite.js:1)
|
||||
- Create [this.pool = new NostrTools.SimplePool()](lite/nostr-login-lite.js:1).
|
||||
- Cache relays; initialize local signer state (seckey, pubkey via [NostrTools.getPublicKey()](lite/nostr-login-lite.js:1)).
|
||||
- If remotePubkey provided, set it; cache iframeOrigin.
|
||||
|
||||
- [ ] [NIP46Client.setUseNip44(use: boolean)](lite/nostr-login-lite.js:1)
|
||||
|
||||
- [ ] [NIP46Client.subscribeReplies()](lite/nostr-login-lite.js:1)
|
||||
- sub = pool.sub(relays, [{ kinds:[24133], '#p':[localPubkey] }])
|
||||
- sub.on('event', (ev) => [NIP46Client.onEvent(ev)](lite/nostr-login-lite.js:1)); sub.on('eose', () => {/* keep alive */})
|
||||
|
||||
- [ ] [NIP46Client.onEvent(ev: NostrEvent)](lite/nostr-login-lite.js:1)
|
||||
- Parse/decrypt via [NIP46Client.parseEvent()](lite/nostr-login-lite.js:1); route to response handlers.
|
||||
|
||||
- [ ] [NIP46Client.listen(nostrConnectSecret: string): Promise<string>](lite/nostr-login-lite.js:1)
|
||||
- Await unsolicited reply to local pubkey; accept "ack" or exact secret; return signer’s pubkey; unsubscribe this one-shot subscription.
|
||||
|
||||
- [ ] [NIP46Client.connect(token?: string, perms?: string)](lite/nostr-login-lite.js:1)
|
||||
- [NIP46Client.sendRequest()](lite/nostr-login-lite.js:1) with method "connect" and params [userPubkey, token||'', perms||'']; resolve on ack.
|
||||
|
||||
- [ ] [NIP46Client.initUserPubkey(hint?: string): Promise<string>](lite/nostr-login-lite.js:1)
|
||||
- If hint present, set and return; else call "get_public_key" RPC and store result.
|
||||
|
||||
- [ ] [NIP46Client.sendRequest(remotePubkey: string, method: string, params: string[], kind = 24133, cb?: (res) => void)](lite/nostr-login-lite.js:1)
|
||||
- id = random string
|
||||
- ev = [NIP46Client.createRequestEvent(id, remotePubkey, method, params, kind)](lite/nostr-login-lite.js:1)
|
||||
- pool.publish(relays, ev)
|
||||
- [NIP46Client.setResponseHandler(id, cb)](lite/nostr-login-lite.js:1)
|
||||
|
||||
- [ ] [NIP46Client.createRequestEvent(id, remotePubkey, method, params, kind)](lite/nostr-login-lite.js:1)
|
||||
- content = JSON.stringify({ id, method, params })
|
||||
- encrypt content using nip44 unless method==='create_account', otherwise nip04 fallback
|
||||
- tags: [ ['p', remotePubkey] ]
|
||||
- sign via [NostrTools.finalizeEvent()](lite/nostr-login-lite.js:1)
|
||||
- return event object
|
||||
|
||||
- [ ] [NIP46Client.parseEvent(event)](lite/nostr-login-lite.js:1)
|
||||
- Detect nip04 vs nip44 by ciphertext shape; decrypt using local seckey and remote pubkey (nip04 or [Nip44](lite/nostr-login-lite.js:1)/window.NostrTools.nip44).
|
||||
- Return { id, method, params, event } or { id, result, error, event }.
|
||||
|
||||
- [ ] [NIP46Client.setResponseHandler(id, cb)](lite/nostr-login-lite.js:1)
|
||||
- Deduplicate 'auth_url' emissions; ensure only one resolution per id; log elapsed; cleanup map entries.
|
||||
|
||||
- [ ] [NIP46Client.setWorkerIframePort(port: MessagePort)](lite/nostr-login-lite.js:1)
|
||||
- When iframe is present, forward signed events via postMessage and map request id↔event.id; send keepalive pings.
|
||||
|
||||
- [ ] [NIP46Client.teardown()](lite/nostr-login-lite.js:1)
|
||||
- Unsubscribe; clear timers/ports; pool.close(relays).
|
||||
|
||||
Iframe handshake
|
||||
- [ ] [IframeReadyListener.start(messages: string[], origin: string)](lite/nostr-login-lite.js:1)
|
||||
- Listen for ["workerReady","workerError"] and ["starterDone","starterError"]; origin-check by host or subdomain.
|
||||
|
||||
- [ ] [IframeReadyListener.wait(): Promise<any>](lite/nostr-login-lite.js:1)
|
||||
|
||||
ExtensionBridge
|
||||
- [ ] [ExtensionBridge.startChecking(nostrLite: NostrLite)](lite/nostr-login-lite.js:1)
|
||||
- Poll window.nostr until found; then call [ExtensionBridge.initExtension()](lite/nostr-login-lite.js:1) once; retry after a delay to capture last extension.
|
||||
|
||||
- [ ] [ExtensionBridge.initExtension(nostrLite: NostrLite, lastTry?: boolean)](lite/nostr-login-lite.js:1)
|
||||
- Cache extension, reassign window.nostr to nostrLite; if currently authed as extension, reconcile; schedule a final late check.
|
||||
|
||||
- [ ] [ExtensionBridge.setExtensionReadPubkey(expectedPubkey?: string)](lite/nostr-login-lite.js:1)
|
||||
- Temporarily set window.nostr = extension; read pubkey; compare to expected; emit extensionLogin/extensionLogout.
|
||||
|
||||
- [ ] [ExtensionBridge.trySetForPubkey(expectedPubkey: string)](lite/nostr-login-lite.js:1)
|
||||
- [ ] [ExtensionBridge.setExtension()](lite/nostr-login-lite.js:1)
|
||||
- [ ] [ExtensionBridge.unset(nostrLite: NostrLite)](lite/nostr-login-lite.js:1)
|
||||
- [ ] [ExtensionBridge.hasExtension(): boolean](lite/nostr-login-lite.js:1)
|
||||
|
||||
Local signer (wrapping window.NostrTools)
|
||||
- [ ] [LocalSigner.constructor(sk: string)](lite/nostr-login-lite.js:1)
|
||||
- Cache public key on construct via [NostrTools.getPublicKey()](lite/nostr-login-lite.js:1).
|
||||
|
||||
- [ ] [LocalSigner.pubkey(): string](lite/nostr-login-lite.js:1)
|
||||
|
||||
- [ ] [LocalSigner.sign(event: NostrEvent): Promise<string>](lite/nostr-login-lite.js:1)
|
||||
- Use [NostrTools.finalizeEvent()](lite/nostr-login-lite.js:1), set id/sig/pubkey.
|
||||
|
||||
- [ ] [LocalSigner.encrypt04(pubkey: string, plaintext: string): Promise<string>](lite/nostr-login-lite.js:1)
|
||||
- Use [NostrTools.nip04.encrypt()](lite/nostr-login-lite.js:1).
|
||||
|
||||
- [ ] [LocalSigner.decrypt04(pubkey: string, ciphertext: string): Promise<string>](lite/nostr-login-lite.js:1)
|
||||
- Use [NostrTools.nip04.decrypt()](lite/nostr-login-lite.js:1).
|
||||
|
||||
- [ ] [LocalSigner.encrypt44(pubkey: string, plaintext: string): Promise<string>](lite/nostr-login-lite.js:1)
|
||||
- Use window.NostrTools.nip44 if available, else [Nip44.encrypt()](lite/nostr-login-lite.js:1).
|
||||
|
||||
- [ ] [LocalSigner.decrypt44(pubkey: string, ciphertext: string): Promise<string>](lite/nostr-login-lite.js:1)
|
||||
- Use window.NostrTools.nip44 if available, else [Nip44.decrypt()](lite/nostr-login-lite.js:1).
|
||||
|
||||
Store (localStorage helpers)
|
||||
- [ ] [Store.addAccount(info: Info)](lite/nostr-login-lite.js:1)
|
||||
- [ ] [Store.removeCurrentAccount()](lite/nostr-login-lite.js:1)
|
||||
- [ ] [Store.getCurrent(): Info | null](lite/nostr-login-lite.js:1)
|
||||
- [ ] [Store.getAccounts(): Info[]](lite/nostr-login-lite.js:1)
|
||||
- [ ] [Store.getRecents(): Info[]](lite/nostr-login-lite.js:1)
|
||||
- [ ] [Store.setItem(key: string, value: string)](lite/nostr-login-lite.js:1)
|
||||
- [ ] [Store.getIcon(): Promise<string>](lite/nostr-login-lite.js:1)
|
||||
|
||||
UI (single modal)
|
||||
- [ ] [Modal.init(options)](lite/nostr-login-lite.js:1)
|
||||
- Create modal container; inject minimal CSS; set theme and RTL if required.
|
||||
|
||||
- [ ] [Modal.open(opts: { startScreen?: string })](lite/nostr-login-lite.js:1)
|
||||
- Render options: Connect (with provider list/QR), Extension, Local (Create/Import), Read-only, OTP (if server URLs configured), Switch Account if prior accounts.
|
||||
|
||||
- [ ] [Modal.close()](lite/nostr-login-lite.js:1)
|
||||
|
||||
- [ ] [Modal.showAuthUrl(url: string)](lite/nostr-login-lite.js:1)
|
||||
- For connect OAuth-like prompt; present link/QR; if iframeUrl is used, show embedded iframe.
|
||||
|
||||
- [ ] [Modal.showIframeUrl(url: string)](lite/nostr-login-lite.js:1)
|
||||
|
||||
- [ ] [Modal.onSwitchAccount(info: Info)](lite/nostr-login-lite.js:1)
|
||||
|
||||
- [ ] [Modal.onLogoutConfirm()](lite/nostr-login-lite.js:1)
|
||||
|
||||
- [ ] [Modal.onImportConnectionString(cs: ConnectionString)](lite/nostr-login-lite.js:1)
|
||||
- Import-and-connect flow: calls [Auth.importAndConnect()](lite/nostr-login-lite.js:1).
|
||||
|
||||
Event bus
|
||||
- [ ] [Bus.on(event: string, handler: Function)](lite/nostr-login-lite.js:1)
|
||||
- [ ] [Bus.off(event: string, handler: Function)](lite/nostr-login-lite.js:1)
|
||||
- [ ] [Bus.emit(event: string, payload?: any)](lite/nostr-login-lite.js:1)
|
||||
|
||||
Relay configuration helpers
|
||||
- [ ] [Relays.getDefaultRelays(options): string[]](lite/nostr-login-lite.js:1)
|
||||
- From options or sensible defaults.
|
||||
|
||||
- [ ] [Relays.normalize(relays: string[]): string[]](lite/nostr-login-lite.js:1)
|
||||
- Ensure proper wss:// and deduping.
|
||||
|
||||
Parity acceptance criteria
|
||||
- Same external API names and events exported as current initializer: [init](packages/auth/src/index.ts:333), [launch](packages/auth/src/index.ts:333), [logout](packages/auth/src/index.ts:333), [setDarkMode](packages/auth/src/index.ts:333), [setAuth](packages/auth/src/index.ts:333), [cancelNeedAuth](packages/auth/src/index.ts:333).
|
||||
- Same nlAuth payload shape as [onAuth()](packages/auth/src/modules/AuthNostrService.ts:347-418).
|
||||
- window.nostr behavior matches [class Nostr](packages/auth/src/modules/Nostr.ts:23).
|
||||
|
||||
Notes and implementation tips
|
||||
- Load order: [Deps.ensureNostrToolsLoaded()](lite/nostr-login-lite.js:1) must guard all usages of window.NostrTools.
|
||||
- Request de-duplication: mirror [setResponseHandler()](packages/auth/src/modules/Nip46.ts:150-173) behavior to avoid auth_url flooding.
|
||||
- NIP-44 selection: use nip44 for all methods except "create_account".
|
||||
- Iframe origin checks: follow [ReadyListener](packages/auth/src/modules/Nip46.ts:291-338) host/subdomain verification.
|
||||
- Secret handling in nostrconnect: accept 'ack' or exact secret; see [listen](packages/auth/src/modules/Nip46.ts:71-107).
|
||||
- Profile fetch is optional; keep it async and non-blocking, update UI/state when complete.
|
||||
|
||||
Out of scope for initial lite version
|
||||
- Complex banners/popups and multi-window flows.
|
||||
- Full NDK feature parity beyond the minimum for NIP-46 RPC.
|
||||
- Advanced error telemetry; keep console logs minimal.
|
||||
|
||||
Deliverables
|
||||
- Single distributable [lite/nostr-login-lite.js](lite/nostr-login-lite.js) usable via:
|
||||
- <script src="..."></script> with window.nostr present after [init()](lite/nostr-login-lite.js:1).
|
||||
- Optional ESM import with same API.
|
||||
- Minimal HTML example showing each auth method path is functional.
|
||||
229
README.md
229
README.md
@@ -1,167 +1,88 @@
|
||||
Nostr_Login_Lite
|
||||
===========
|
||||
|
||||
This library is a powerful `window.nostr` provider.
|
||||
## Floating Tab API
|
||||
|
||||
```
|
||||
<script src='https://www.unpkg.com/nostr-login@latest/dist/unpkg.js'></script>
|
||||
```
|
||||
|
||||
Just add the above script to your HTML and
|
||||
get a nice UI for users to login with Nostr Connect (nip46), with an extension, read-only login,
|
||||
account switching, OAuth-like sign up, etc. Your app just talks to the `window.nostr`, the rest is handled by `nostr-login`.
|
||||
|
||||
See it in action on [nostr.band](https://nostr.band).
|
||||
|
||||
## Options
|
||||
|
||||
You can set these attributes to the `script` tag to customize the behavior:
|
||||
- `data-dark-mode` - `true`/`false`, default will use the browser's color theme
|
||||
- `data-bunkers` - the comma-separated list of domain names of Nostr Connect (nip46) providers for sign up, i.e. `nsec.app,highlighter.com`
|
||||
- `data-perms` - the comma-separated list of [permissions](https://github.com/nostr-protocol/nips/blob/master/46.md#requested-permissions) requested by the app over Nostr Connect, i.e. `sign_event:1,nip04_encrypt`
|
||||
- `data-theme` - color themes, one of `default`, `ocean`, `lemonade`, `purple`
|
||||
- `data-no-banner` - if `true`, do not show the `nostr-login` banner, will need to launch the modals using event dispatch, see below
|
||||
- `data-methods` - comma-separated list of allowed auth methods, method names: `connect`, `extension`, `readOnly`, `local`, all allowed by default.
|
||||
- `data-otp-request-url` - URL for requesting OTP code
|
||||
- `data-otp-reply-url` - URL for replying with OTP code
|
||||
- `data-title` - title for the welcome screen
|
||||
- `data-description` - description for the welcome screen
|
||||
- `data-start-screen` - screen shown by default (banner click, window.nostr.* call), options: `welcome`, `welcome-login`, `welcome-signup`, `signup`, `local-signup`, `login`, `otp`, `connect`, `login-bunker-url`, `login-read-only`, `connection-string`, `switch-account`, `import`
|
||||
- `data-signup-relays` - comma-separated list of relays where nip65 event will be published on local signup
|
||||
- `data-outbox-relays` - comma-separated list of relays that will be added to nip65 event on local signup
|
||||
- `data-signup-nstart` - "true" to use start.njump.me instead of local signup
|
||||
- `data-follow-npubs` - comma-separated list of npubs to follow if njump.me signup is used
|
||||
|
||||
Example:
|
||||
```
|
||||
<script src='https://www.unpkg.com/nostr-login@latest/dist/unpkg.js' data-perms="sign_event:1,sign_event:0" data-theme="ocean"></script>
|
||||
```
|
||||
|
||||
## Updating the UI
|
||||
|
||||
Whenever user performs an auth-related action using `nostr-login`, a `nlAuth` event will be dispatched on the `document`, which you can listen
|
||||
to in order to update your UI (show user profile, etc):
|
||||
|
||||
```
|
||||
document.addEventListener('nlAuth', (e) => {
|
||||
// type is login, signup or logout
|
||||
if (e.detail.type === 'login' || e.detail.type === 'signup') {
|
||||
onLogin(); // get pubkey with window.nostr and show user profile
|
||||
} else {
|
||||
onLogout() // clear local user data, hide profile info
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## Launching, logout, etc
|
||||
|
||||
The `nostr-login` auth modals will be automatically launched whenever you
|
||||
make a call to `window.nostr` if user isn't authed yet. However, you can also launch the auth flow by dispatching a custom `nlLaunch` event:
|
||||
|
||||
```
|
||||
document.dispatchEvent(new CustomEvent('nlLaunch', { detail: 'welcome' }));
|
||||
```
|
||||
|
||||
The `detail` event payload can be empty, or can be one of `welcome`, `signup`, `login`, `login-bunker-url`, `login-read-only`, `switch-account`.
|
||||
|
||||
To trigger logout in the `nostr-login`, you can dispatch a `nlLogout` event:
|
||||
|
||||
```
|
||||
document.dispatchEvent(new Event("nlLogout"));
|
||||
```
|
||||
|
||||
To change dark mode in the `nostr-login`, you can dispatch a `nlDarkMode` event, with detail as `darkMode` boolean:
|
||||
|
||||
```
|
||||
document.dispatchEvent(new CustomEvent("nlDarkMode", { detail: true }));
|
||||
```
|
||||
|
||||
## Use as a package
|
||||
|
||||
Install `nostr-login` package with `npm` and then:
|
||||
|
||||
```
|
||||
import { init as initNostrLogin } from "nostr-login"
|
||||
|
||||
// make sure this is called before any
|
||||
// window.nostr calls are made
|
||||
initNostrLogin({/*options*/})
|
||||
|
||||
```
|
||||
|
||||
Now the `window.nostr` will be initialized and on your first call
|
||||
to it the auth flow will be launched if user isn't authed yet.
|
||||
|
||||
You can also launch the auth flow yourself:
|
||||
|
||||
```
|
||||
import { launch as launchNostrLoginDialog } from "nostr-login"
|
||||
|
||||
// make sure init() was called
|
||||
|
||||
// on your signup button click
|
||||
function onSignupClick() {
|
||||
// launch signup screen
|
||||
launchNostrLoginDialog({
|
||||
startScreen: 'signup'
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
### Next.js Fix for Server Side Rendering (SSR)
|
||||
|
||||
`nostr-login` calls `document` which is unavailable for server-side rendering. You will have build errors. To fix this, you can import `nostr-login` on the client side in your component with a `useEffect` like this:
|
||||
Configure persistent floating tab for login/logout:
|
||||
|
||||
```javascript
|
||||
useEffect(() => {
|
||||
import('nostr-login')
|
||||
.then(async ({ init }) => {
|
||||
init({
|
||||
// options
|
||||
})
|
||||
})
|
||||
.catch((error) => console.log('Failed to load nostr-login', error));
|
||||
}, []);
|
||||
await NOSTR_LOGIN_LITE.init({
|
||||
// Set the initial theme (default: 'default')
|
||||
theme: 'dark', // Choose from 'default' or 'dark'
|
||||
|
||||
// Standard configuration options
|
||||
methods: {
|
||||
extension: true,
|
||||
local: true,
|
||||
readonly: true,
|
||||
connect: true,
|
||||
otp: true
|
||||
},
|
||||
|
||||
// Floating tab configuration (now uses theme-aware text icons)
|
||||
floatingTab: {
|
||||
enabled: true,
|
||||
hPosition: 0.95, // 0.0-1.0 or '95%' from left
|
||||
vPosition: 0.5, // 0.0-1.0 or '50%' from top
|
||||
getUserInfo: true, // Fetch user profile name from relays
|
||||
getUserRelay: [ // Relays for profile queries
|
||||
'wss://relay.damus.io',
|
||||
'wss://nos.lol'
|
||||
],
|
||||
appearance: {
|
||||
style: 'pill', // 'pill', 'square', 'circle', 'minimal'
|
||||
theme: 'auto', // 'auto' follows main theme
|
||||
icon: '[LOGIN]', // Now uses text-based icons like [LOGIN], [KEY], [NET]
|
||||
text: 'Login'
|
||||
},
|
||||
behavior: {
|
||||
hideWhenAuthenticated: false,
|
||||
showUserInfo: true,
|
||||
autoSlide: true
|
||||
},
|
||||
animation: {
|
||||
slideDirection: 'auto' // 'auto', 'left', 'right', 'up', 'down'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// After initialization, you can switch themes dynamically:
|
||||
NOSTR_LOGIN_LITE.switchTheme('dark');
|
||||
NOSTR_LOGIN_LITE.switchTheme('default');
|
||||
|
||||
// Or customize individual theme variables:
|
||||
NOSTR_LOGIN_LITE.setThemeVariable('--nl-accent-color', '#00ff00');
|
||||
|
||||
```
|
||||
Note: even if your component has `"use client"` in the first line, this fix still may be necessary.
|
||||
|
||||
---
|
||||
Control methods:
|
||||
```javascript
|
||||
NOSTR_LOGIN_LITE.showFloatingTab();
|
||||
NOSTR_LOGIN_LITE.hideFloatingTab();
|
||||
NOSTR_LOGIN_LITE.updateFloatingTab(options);
|
||||
NOSTR_LOGIN_LITE.destroyFloatingTab();
|
||||
```
|
||||
|
||||
API:
|
||||
- `init(opts)` - set mapping of window.nostr to nostr-login
|
||||
- `launch(startScreen)` - launch nostr-login UI
|
||||
- `logout()` - drop the current nip46 connection
|
||||
## Embedded Modal API
|
||||
|
||||
Options:
|
||||
- `theme` - same as `data-theme` above
|
||||
- `startScreen` - same as `startScreen` for `nlLaunch` event above
|
||||
- `bunkers` - same as `data-bunkers` above
|
||||
- `devOverrideBunkerOrigin` - for testing, overrides the bunker origin for local setup
|
||||
- `onAuth: (npub: string, options: NostrLoginAuthOptions)` - a callback to provide instead of listening to `nlAuth` event
|
||||
- `perms` - same as `data-perms` above
|
||||
- `darkMode` - same as `data-dark-mode` above
|
||||
- `noBanner` - same as `data-no-banner` above
|
||||
- `isSignInWithExtension` - `true` to bring the *Sign in with exception* button into main list of options, `false` to hide to the *Advanced*, default will behave as `true` if extension is detected.
|
||||
Embed login interface directly into page element:
|
||||
|
||||
## OTP login
|
||||
```javascript
|
||||
// Initialize library first
|
||||
await NOSTR_LOGIN_LITE.init({
|
||||
methods: {
|
||||
extension: true,
|
||||
local: true,
|
||||
readonly: true
|
||||
}
|
||||
});
|
||||
|
||||
If you supply both `data-otp-request-url` and `data-otp-reply-url` then "Login with DM" button will appear on the welcome screen.
|
||||
// Embed into container
|
||||
const modal = NOSTR_LOGIN_LITE.embed('#login-container', {
|
||||
title: 'Login',
|
||||
showHeader: true,
|
||||
seamless: false // true = no borders/shadows, blends into page
|
||||
});
|
||||
```
|
||||
|
||||
When user enters their nip05 or npub, a GET request is made to `<data-otp-request-url>[?&]pubkey=<user-pubkey>`. Server should send
|
||||
a DM with one-time code to that pubkey and should return 200.
|
||||
|
||||
After user enters the code, a GET request is made to `<data-otp-reply-url>[?&]pubkey=<user-pubkey>&code=<code>`. Server should check that code matches the pubkey and hasn't expired, and should return 200 status and an optional payload. Nostr-login will deliver the payload as `otpData` field in `nlAuth` event, and will save the payload in localstore and will deliver it again as `nlAuth` on page reload.
|
||||
|
||||
The reply payload may be used to supply the session token. If token is sent by the server as a cookie then payload might be empty, otherwise the payload should be used by the app to extract the token and use it in future API calls to the server.
|
||||
|
||||
## Examples
|
||||
|
||||
* [Basic HTML Example](./examples/usage.html)
|
||||
|
||||
## TODO
|
||||
|
||||
- fetch bunker list using NIP-89
|
||||
- Amber support
|
||||
- allow use without the UIs
|
||||
- add timeout handling
|
||||
- more at [issues](https://github.com/nostrband/nostr-login/issues)
|
||||
Container can be CSS selector or DOM element. Modal renders inline without backdrop overlay.
|
||||
|
||||
75
examples/button.html
Normal file
75
examples/button.html
Normal file
@@ -0,0 +1,75 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Embedded NOSTR_LOGIN_LITE</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
margin: 0;
|
||||
padding: 40px;
|
||||
background: white;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 90vh;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 400px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#login-button {
|
||||
background: #0066cc;
|
||||
color: white;
|
||||
padding: 12px 24px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
#login-button:hover {
|
||||
background: #0052a3;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<div id="login-button">Login</div>
|
||||
</div>
|
||||
|
||||
<script src="../lite/nostr.bundle.js"></script>
|
||||
<script src="../lite/nostr-lite.js"></script>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', async () => {
|
||||
await window.NOSTR_LOGIN_LITE.init({
|
||||
|
||||
methods: {
|
||||
extension: true,
|
||||
local: true,
|
||||
readonly: true,
|
||||
connect: true,
|
||||
remote: true,
|
||||
otp: true
|
||||
},
|
||||
floatingTab: {
|
||||
enabled: false
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('login-button').addEventListener('click', () => {
|
||||
window.NOSTR_LOGIN_LITE.launch('login');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
1134
examples/comprehensive-test.html
Normal file
1134
examples/comprehensive-test.html
Normal file
File diff suppressed because it is too large
Load Diff
57
examples/embedded.html
Normal file
57
examples/embedded.html
Normal file
@@ -0,0 +1,57 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Embedded NOSTR_LOGIN_LITE</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
margin: 0;
|
||||
padding: 40px;
|
||||
background: white;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 400px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#login-container {
|
||||
/* No styling - let embedded modal blend seamlessly */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div id="login-container"></div>
|
||||
</div>
|
||||
|
||||
<script src="../lite/nostr.bundle.js"></script>
|
||||
<script src="../lite/nostr-lite.js"></script>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', async () => {
|
||||
await window.NOSTR_LOGIN_LITE.init({
|
||||
theme:'default',
|
||||
methods: {
|
||||
extension: true,
|
||||
local: true,
|
||||
readonly: true,
|
||||
connect: true,
|
||||
remote: true,
|
||||
otp: true
|
||||
}
|
||||
});
|
||||
|
||||
window.NOSTR_LOGIN_LITE.embed('#login-container', {
|
||||
seamless: true
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
189
examples/login-and-profile.html
Normal file
189
examples/login-and-profile.html
Normal file
@@ -0,0 +1,189 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>🔐 NOSTR_LOGIN_LITE - All Login Methods Test</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
background: #ffffff;
|
||||
min-height: 100vh;
|
||||
color: #000000;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="login-section">
|
||||
<!-- Login UI if needed -->
|
||||
</div>
|
||||
<div id="profile-section">
|
||||
<img id="profile-picture">
|
||||
<div id="profile-pubkey"></div>
|
||||
<div id="profile-name"></div>
|
||||
<div id="profile-about"></div>
|
||||
</div>
|
||||
|
||||
<!-- Load the official nostr-tools bundle first -->
|
||||
<script src="../lite/nostr.bundle.js"></script>
|
||||
|
||||
<!-- Load NOSTR_LOGIN_LITE main library (now includes NIP-46 extension) -->
|
||||
<script src="../lite/nostr-lite.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
// Global variables
|
||||
let nlLite = null;
|
||||
let userPubkey = null;
|
||||
let relayUrl = 'wss://relay.laantungir.net';
|
||||
|
||||
// Initialize NOSTR_LOGIN_LITE
|
||||
async function initializeApp() {
|
||||
// console.log('INFO', 'Initializing NOSTR_LOGIN_LITE...');
|
||||
|
||||
try {
|
||||
await window.NOSTR_LOGIN_LITE.init({
|
||||
theme: 'default',
|
||||
darkMode: false,
|
||||
relays: [relayUrl, 'wss://relay.damus.io'],
|
||||
methods: {
|
||||
extension: true,
|
||||
local: true,
|
||||
readonly: true,
|
||||
connect: true, // Enables "Nostr Connect" (NIP-46)
|
||||
remote: true, // Also needed for "Nostr Connect" compatibility
|
||||
otp: true // Enables "DM/OTP"
|
||||
},
|
||||
floatingTab: {
|
||||
enabled: true,
|
||||
hPosition: 0.80, // 95% from left
|
||||
vPosition: 0.01, // 50% from top (center)
|
||||
appearance: {
|
||||
style: 'minimal',
|
||||
theme: 'auto',
|
||||
icon: '',
|
||||
text: 'Login',
|
||||
iconOnly: false
|
||||
},
|
||||
behavior: {
|
||||
hideWhenAuthenticated: false,
|
||||
showUserInfo: true,
|
||||
autoSlide: false,
|
||||
persistent: false
|
||||
},
|
||||
animation: {
|
||||
slideDirection: 'right' // Slide to the right when hiding
|
||||
}
|
||||
},
|
||||
debug: true
|
||||
});
|
||||
|
||||
nlLite = window.NOSTR_LOGIN_LITE;
|
||||
console.log('SUCCESS', 'NOSTR_LOGIN_LITE initialized successfully');
|
||||
|
||||
window.addEventListener('nlMethodSelected', handleAuthEvent);
|
||||
|
||||
} catch (error) {
|
||||
console.log('ERROR', `Initialization failed: ${error.message}`);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function handleAuthEvent(event) {
|
||||
const {pubkey, method, error } = event.detail;
|
||||
console.log('INFO', `Auth event received: method=${method}`);
|
||||
|
||||
if (method && pubkey) {
|
||||
userPubkey = pubkey;
|
||||
console.log('SUCCESS', `Login successful! Method: ${method}, Pubkey: ${pubkey}`);
|
||||
|
||||
loadUserProfile();
|
||||
|
||||
} else if (error) {
|
||||
console.log('ERROR', `Authentication error: ${error}`);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// Load user profile using nostr-tools pool
|
||||
async function loadUserProfile() {
|
||||
if (!userPubkey) return;
|
||||
|
||||
console.log('INFO', `Loading profile for: ${userPubkey}`);
|
||||
document.getElementById('profile-name').textContent = 'Loading profile...';
|
||||
document.getElementById('profile-pubkey').textContent = userPubkey;
|
||||
|
||||
try {
|
||||
// Create a SimplePool instance
|
||||
const pool = new window.NostrTools.SimplePool();
|
||||
const relays = [relayUrl, 'wss://relay.laantungir.net'];
|
||||
|
||||
// Get profile event (kind 0) for the user using querySync
|
||||
const events = await pool.querySync(relays, {
|
||||
kinds: [0],
|
||||
authors: [userPubkey],
|
||||
limit: 1
|
||||
});
|
||||
|
||||
pool.close(relays); // Clean up connections
|
||||
|
||||
if (events.length > 0) {
|
||||
console.log('SUCCESS', 'Profile event received');
|
||||
const profile = JSON.parse(events[0].content);
|
||||
displayProfile(profile);
|
||||
} else {
|
||||
console.log('INFO', 'No profile found');
|
||||
document.getElementById('profile-name').textContent = 'No profile found';
|
||||
document.getElementById('profile-about').textContent = 'User has not set up a profile yet.';
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.log('ERROR', `Profile loading failed: ${error.message}`);
|
||||
document.getElementById('profile-name').textContent = 'Error loading profile';
|
||||
document.getElementById('profile-about').textContent = error.message;
|
||||
}
|
||||
}
|
||||
|
||||
// Display profile data
|
||||
function displayProfile(profile) {
|
||||
const name = profile.name || profile.display_name || profile.displayName || 'Anonymous User';
|
||||
const about = profile.about || '';
|
||||
const picture = profile.picture || '';
|
||||
|
||||
document.getElementById('profile-name').textContent = name;
|
||||
document.getElementById('profile-about').textContent = about;
|
||||
|
||||
if (picture) {
|
||||
document.getElementById('profile-picture').src = picture;
|
||||
}
|
||||
|
||||
console.log('SUCCESS', `Profile displayed: ${name}`);
|
||||
}
|
||||
|
||||
// Logout function
|
||||
async function logout() {
|
||||
console.log('INFO', 'Logging out...');
|
||||
try {
|
||||
await nlLite.logout();
|
||||
console.log('SUCCESS', 'Logged out successfully');
|
||||
} catch (error) {
|
||||
console.log('ERROR', `Logout failed: ${error.message}`);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// Initialize the app
|
||||
setTimeout(initializeApp, 100);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,121 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Minimal Nostr Login Test (Remote)</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="user-info" style="display: none;">
|
||||
<div id="user-name"></div>
|
||||
<img id="user-picture" style="display: none;">
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Load nostr-login script with configuration from your website
|
||||
const script = document.createElement('script');
|
||||
script.src = 'https://laantungir.net/nostr-login/unpkg.js';
|
||||
|
||||
// Configure with Laan theme and Welcome Login start screen
|
||||
script.setAttribute('data-theme', 'laan');
|
||||
script.setAttribute('data-start-screen', 'welcome-login');
|
||||
script.setAttribute('data-methods', 'connect,extension,local,readOnly');
|
||||
script.setAttribute('data-no-banner', 'false');
|
||||
|
||||
document.head.appendChild(script);
|
||||
|
||||
// Wait for script to load, then set up event listeners
|
||||
script.onload = () => {
|
||||
setupEventListeners();
|
||||
};
|
||||
|
||||
function setupEventListeners() {
|
||||
// Listen for authentication events
|
||||
document.addEventListener('nlAuth', (e) => {
|
||||
const { type, pubkey, name } = e.detail;
|
||||
|
||||
if (type === 'login' || type === 'signup') {
|
||||
console.log('User logged in:', e.detail);
|
||||
showUserInfo();
|
||||
// Check for profile updates periodically
|
||||
startProfilePolling();
|
||||
} else if (type === 'logout') {
|
||||
console.log('User logged out');
|
||||
hideUserInfo();
|
||||
stopProfilePolling();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
let profileInterval;
|
||||
|
||||
function startProfilePolling() {
|
||||
// Check immediately
|
||||
updateUserProfile();
|
||||
|
||||
// Then check every 2 seconds for profile updates
|
||||
profileInterval = setInterval(updateUserProfile, 2000);
|
||||
|
||||
// Stop checking after 15 seconds (profile should be loaded by then)
|
||||
setTimeout(stopProfilePolling, 15000);
|
||||
}
|
||||
|
||||
function stopProfilePolling() {
|
||||
if (profileInterval) {
|
||||
clearInterval(profileInterval);
|
||||
profileInterval = null;
|
||||
}
|
||||
}
|
||||
|
||||
function updateUserProfile() {
|
||||
try {
|
||||
// Try to get user info from localStorage (current user)
|
||||
const userInfo = JSON.parse(localStorage.getItem('__nostrlogin_nip46') || 'null');
|
||||
if (userInfo) {
|
||||
updateUserDisplay(userInfo);
|
||||
}
|
||||
} catch (error) {
|
||||
// Silently handle errors to avoid interference
|
||||
}
|
||||
}
|
||||
|
||||
function showUserInfo() {
|
||||
const userInfoDiv = document.getElementById('user-info');
|
||||
userInfoDiv.style.display = 'block';
|
||||
updateUserProfile();
|
||||
}
|
||||
|
||||
function updateUserDisplay(userInfo) {
|
||||
const userNameDiv = document.getElementById('user-name');
|
||||
const userPicture = document.getElementById('user-picture');
|
||||
|
||||
// Display name with proper fallback hierarchy
|
||||
const displayName = userInfo.name ||
|
||||
(userInfo.nip05 && userInfo.nip05.split('@')[0]) ||
|
||||
(userInfo.pubkey && userInfo.pubkey.substring(0, 16) + '...') ||
|
||||
'Unknown';
|
||||
|
||||
userNameDiv.textContent = displayName;
|
||||
|
||||
// Update profile picture if available
|
||||
if (userInfo.picture) {
|
||||
userPicture.src = userInfo.picture;
|
||||
userPicture.style.display = 'block';
|
||||
userPicture.style.width = '200px';
|
||||
// userPicture.style.height = '200px';
|
||||
}
|
||||
}
|
||||
|
||||
function hideUserInfo() {
|
||||
const userInfoDiv = document.getElementById('user-info');
|
||||
const userNameDiv = document.getElementById('user-name');
|
||||
const userPicture = document.getElementById('user-picture');
|
||||
|
||||
userInfoDiv.style.display = 'none';
|
||||
userNameDiv.textContent = '';
|
||||
userPicture.src = '';
|
||||
userPicture.style.display = 'none';
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,121 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Minimal Nostr Login Test</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="user-info" style="display: none;">
|
||||
<div id="user-name"></div>
|
||||
<img id="user-picture" style="display: none;">
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Load nostr-login script with configuration
|
||||
const script = document.createElement('script');
|
||||
script.src = '../packages/auth/dist/unpkg.js';
|
||||
|
||||
// Configure with Laan theme and Welcome Login start screen
|
||||
script.setAttribute('data-theme', 'laan');
|
||||
script.setAttribute('data-start-screen', 'welcome-login');
|
||||
script.setAttribute('data-methods', 'connect,extension,local,readOnly');
|
||||
script.setAttribute('data-no-banner', 'false');
|
||||
|
||||
document.head.appendChild(script);
|
||||
|
||||
// Wait for script to load, then set up event listeners
|
||||
script.onload = () => {
|
||||
setupEventListeners();
|
||||
};
|
||||
|
||||
function setupEventListeners() {
|
||||
// Listen for authentication events
|
||||
document.addEventListener('nlAuth', (e) => {
|
||||
const { type, pubkey, name } = e.detail;
|
||||
|
||||
if (type === 'login' || type === 'signup') {
|
||||
console.log('User logged in:', e.detail);
|
||||
showUserInfo();
|
||||
// Check for profile updates periodically
|
||||
startProfilePolling();
|
||||
} else if (type === 'logout') {
|
||||
console.log('User logged out');
|
||||
hideUserInfo();
|
||||
stopProfilePolling();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
let profileInterval;
|
||||
|
||||
function startProfilePolling() {
|
||||
// Check immediately
|
||||
updateUserProfile();
|
||||
|
||||
// Then check every 2 seconds for profile updates
|
||||
profileInterval = setInterval(updateUserProfile, 2000);
|
||||
|
||||
// Stop checking after 15 seconds (profile should be loaded by then)
|
||||
setTimeout(stopProfilePolling, 15000);
|
||||
}
|
||||
|
||||
function stopProfilePolling() {
|
||||
if (profileInterval) {
|
||||
clearInterval(profileInterval);
|
||||
profileInterval = null;
|
||||
}
|
||||
}
|
||||
|
||||
function updateUserProfile() {
|
||||
try {
|
||||
// Try to get user info from localStorage (current user)
|
||||
const userInfo = JSON.parse(localStorage.getItem('__nostrlogin_nip46') || 'null');
|
||||
if (userInfo) {
|
||||
updateUserDisplay(userInfo);
|
||||
}
|
||||
} catch (error) {
|
||||
// Silently handle errors to avoid interference
|
||||
}
|
||||
}
|
||||
|
||||
function showUserInfo() {
|
||||
const userInfoDiv = document.getElementById('user-info');
|
||||
userInfoDiv.style.display = 'block';
|
||||
updateUserProfile();
|
||||
}
|
||||
|
||||
function updateUserDisplay(userInfo) {
|
||||
const userNameDiv = document.getElementById('user-name');
|
||||
const userPicture = document.getElementById('user-picture');
|
||||
|
||||
// Display name with proper fallback hierarchy
|
||||
const displayName = userInfo.name ||
|
||||
(userInfo.nip05 && userInfo.nip05.split('@')[0]) ||
|
||||
(userInfo.pubkey && userInfo.pubkey.substring(0, 16) + '...') ||
|
||||
'Unknown';
|
||||
|
||||
userNameDiv.textContent = displayName;
|
||||
|
||||
// Update profile picture if available
|
||||
if (userInfo.picture) {
|
||||
userPicture.src = userInfo.picture;
|
||||
userPicture.style.display = 'block';
|
||||
userPicture.style.width = '200px';
|
||||
// userPicture.style.height = '200px';
|
||||
}
|
||||
}
|
||||
|
||||
function hideUserInfo() {
|
||||
const userInfoDiv = document.getElementById('user-info');
|
||||
const userNameDiv = document.getElementById('user-name');
|
||||
const userPicture = document.getElementById('user-picture');
|
||||
|
||||
userInfoDiv.style.display = 'none';
|
||||
userNameDiv.textContent = '';
|
||||
userPicture.src = '';
|
||||
userPicture.style.display = 'none';
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
74
examples/modal.html
Normal file
74
examples/modal.html
Normal file
@@ -0,0 +1,74 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Embedded NOSTR_LOGIN_LITE</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
margin: 0;
|
||||
padding: 40px;
|
||||
background: white;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 90vh;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 400px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#login-container {
|
||||
/* No styling - let embedded modal blend seamlessly */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<script src="../lite/nostr.bundle.js"></script>
|
||||
<script src="../lite/nostr-lite.js"></script>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', async () => {
|
||||
await window.NOSTR_LOGIN_LITE.init({
|
||||
theme: 'default',
|
||||
methods: {
|
||||
extension: true,
|
||||
local: true,
|
||||
readonly: true,
|
||||
connect: true,
|
||||
remote: true,
|
||||
otp: true
|
||||
},
|
||||
floatingTab: {
|
||||
enabled: true,
|
||||
hPosition: 1, // 0.0-1.0 or '95%' from left
|
||||
vPosition: 0, // 0.0-1.0 or '50%' from top
|
||||
appearance: {
|
||||
style: 'square', // 'pill', 'square', 'circle', 'minimal'
|
||||
// icon: '[LOGIN]', // Now uses text-based icons like [LOGIN], [KEY], [NET]
|
||||
text: 'Login'
|
||||
},
|
||||
behavior: {
|
||||
hideWhenAuthenticated: false,
|
||||
showUserInfo: true,
|
||||
autoSlide: true
|
||||
},
|
||||
animation: {
|
||||
slideDirection: 'auto' // 'auto', 'left', 'right', 'up', 'down'
|
||||
}
|
||||
|
||||
}});
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,838 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="" class="has-dark-text" dir="rtl">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>من الجميل في نوستر هي قدرة…</title>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://blossom.npubpro.com/9d9f5663fcc8ec87f256d3959fcd763ae234774d7cfcaf85a5ad10e3adea63e3.css"
|
||||
/>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
/* The script for calculating the color contrast was taken from
|
||||
https://gomakethings.com/dynamically-changing-the-text-color-based-on-background-color-contrast-with-vanilla-js/ */
|
||||
var accentColor = getComputedStyle(
|
||||
document.documentElement,
|
||||
).getPropertyValue('--background-color')
|
||||
accentColor = accentColor.trim().slice(1)
|
||||
var r = parseInt(accentColor.substr(0, 2), 16)
|
||||
var g = parseInt(accentColor.substr(2, 2), 16)
|
||||
var b = parseInt(accentColor.substr(4, 2), 16)
|
||||
var yiq = (r * 299 + g * 587 + b * 114) / 1000
|
||||
var textColor = yiq >= 128 ? 'dark' : 'light'
|
||||
|
||||
document.documentElement.className = `has-${textColor}-text`
|
||||
</script>
|
||||
|
||||
<meta property="og:title" content="من الجميل في نوستر هي قدرة…" />
|
||||
<meta name="twitter:title" content="من الجميل في نوستر هي قدرة…" />
|
||||
|
||||
<meta
|
||||
name="description"
|
||||
content="من الجميل في نوستر هي قدرة التطبيقات على التخاطر.
|
||||
|
||||
إذا بتفضلوا استخدام مساحة مثل الDiscord، ضيفوا صفحتنا على flotilla.social للتواصل بصيغة التشات.
|
||||
|
||||
اضغط إضافة مساحة Add Space،
|
||||
ثم الدخول على مساحة Join a space،
|
||||
وضيفوا ريلاي relay.nostrarabia.com
|
||||
|
||||
نراكم. 🫡
|
||||
|
||||
#nostrarabia…"
|
||||
/>
|
||||
<meta
|
||||
property="og:description"
|
||||
content="من الجميل في نوستر هي قدرة التطبيقات على التخاطر.
|
||||
|
||||
إذا بتفضلوا استخدام مساحة مثل الDiscord، ضيفوا صفحتنا على flotilla.social للتواصل بصيغة التشات.
|
||||
|
||||
اضغط إضافة مساحة Add Space،
|
||||
ثم الدخول على مساحة Join a space،
|
||||
وضيفوا ريلاي relay.nostrarabia.com
|
||||
|
||||
نراكم. 🫡
|
||||
|
||||
#nostrarabia…"
|
||||
/>
|
||||
<meta
|
||||
name="twitter:description"
|
||||
content="من الجميل في نوستر هي قدرة التطبيقات على التخاطر.
|
||||
|
||||
إذا بتفضلوا استخدام مساحة مثل الDiscord، ضيفوا صفحتنا على flotilla.social للتواصل بصيغة التشات.
|
||||
|
||||
اضغط إضافة مساحة Add Space،
|
||||
ثم الدخول على مساحة Join a space،
|
||||
وضيفوا ريلاي relay.nostrarabia.com
|
||||
|
||||
نراكم. 🫡
|
||||
|
||||
#nostrarabia…"
|
||||
/>
|
||||
|
||||
<meta
|
||||
property="og:image"
|
||||
content="https://image.nostr.build/4afea744d3f72f4f7af1f7d632a8594159ef65f49b48cb00890c3904c57e1822.jpg"
|
||||
/>
|
||||
<meta
|
||||
name="twitter:image"
|
||||
content="https://image.nostr.build/4afea744d3f72f4f7af1f7d632a8594159ef65f49b48cb00890c3904c57e1822.jpg"
|
||||
/>
|
||||
<meta name="twitter:image:alt" content="من الجميل في نوستر هي قدرة…" />
|
||||
|
||||
<link
|
||||
rel="canonical"
|
||||
href="https://nostrarabia.npub.pro/post/note1dplcmt2885l9tsy6c4xenm3w7hrg92af42sz76p0ypd7ft0muvpqg80sqn/"
|
||||
/>
|
||||
<link
|
||||
rel="og:url"
|
||||
href="https://nostrarabia.npub.pro/post/note1dplcmt2885l9tsy6c4xenm3w7hrg92af42sz76p0ypd7ft0muvpqg80sqn/"
|
||||
/>
|
||||
<meta property="og:site_name" content="نوستر" />
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:site" content="@nostrprotocol" />
|
||||
<meta property="og:type" content="website" />
|
||||
|
||||
<!--
|
||||
***********************
|
||||
Powered by npub.pro
|
||||
***********************
|
||||
-->
|
||||
|
||||
<meta
|
||||
name="nostr:site"
|
||||
content="naddr1qqxkummnw3shywnzxg6kyv34qythwumn8ghj7un9d3shjtnwwp6kyurjduhxxmmdqgsgzt8ltta9m8pmgzptstrsxew06tf8nsn64yfrzwu0e07kt3q2a6crqsqqqaesldfhew"
|
||||
/>
|
||||
<meta name="author" content="نوستر بالعربي" />
|
||||
<meta
|
||||
name="nostr:author"
|
||||
content="npub1syk07kh6tkwrksyzhqk8qdjul5kj08p842gjxyacljlavhzq4m4slmdu3p"
|
||||
/>
|
||||
<meta
|
||||
name="nostr:id"
|
||||
content="note1dplcmt2885l9tsy6c4xenm3w7hrg92af42sz76p0ypd7ft0muvpqg80sqn"
|
||||
/>
|
||||
<meta
|
||||
name="nostr:event_id"
|
||||
content="note1dplcmt2885l9tsy6c4xenm3w7hrg92af42sz76p0ypd7ft0muvpqg80sqn"
|
||||
/>
|
||||
<link
|
||||
rel="manifest"
|
||||
href="https://nostrarabia.npub.pro/manifest.webmanifest"
|
||||
/>
|
||||
|
||||
<script
|
||||
src="https://code.jquery.com/jquery-3.5.1.min.js"
|
||||
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
|
||||
crossorigin="anonymous"
|
||||
></script>
|
||||
|
||||
<link
|
||||
rel="preload"
|
||||
as="style"
|
||||
href="https://cdn.jsdelivr.net/npm/venobox@2.1.8/dist/venobox.min.css"
|
||||
/>
|
||||
|
||||
<link
|
||||
rel="icon"
|
||||
href="https://image.nostr.build/4afea744d3f72f4f7af1f7d632a8594159ef65f49b48cb00890c3904c57e1822.jpg"
|
||||
type="image/jpeg"
|
||||
/>
|
||||
<link
|
||||
rel="apple-touch-icon"
|
||||
href="https://image.nostr.build/4afea744d3f72f4f7af1f7d632a8594159ef65f49b48cb00890c3904c57e1822.jpg"
|
||||
/>
|
||||
<meta name="theme-color" content="#ffffff" />
|
||||
|
||||
<script>
|
||||
document.documentElement.setAttribute('dir', 'rtl')
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.np-oembed-video-link {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
.np-oembed-video-link img {
|
||||
max-width: 100%;
|
||||
}
|
||||
.np-oembed-video-link:after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAAAsTAAALEwEAmpwYAAAJeUlEQVR4nO1daYwUVRD+9oBlV9kFJESjixxq8GAl3lEU1EXiwQ+RQwUPvIi3xgMVD7wxCgYTDwQFlxANakw0Jho1iqJoBEQMIuqqYHA9dleRBXZhZExpTeyU1T09M/1ed8/0l7xkd2be1a/7Vb2qr6qBBAkSJEiQoHjRA8AwABMA3AFgMYDlANYAaAbQDqCLSzt/Rt99xL+9g+sO47YS5IhKAIcDmAbgLQDbAaQDKjsBrAAwE0AjgKpkdXSU8wVqArAlwAXIVqiv5wCczGMoefTnu/VHi4uQdik0hgeBf8ZUctgfwDMAdvi8WM0AXgXwMIBLAZwA4BAAAwH0BtCNS2/+jL4bwb+lOq9xG376Ilk0H8B+KAEMAvA8gFSWi7IRwAIA5wHYJ8D+qa3zASz08VSmWCmgBS460N17LYAOjwuwmWUIyZIyS+Mi5WEOgFaPcW0DMKOYFIBTAHztMeG1fNdWhzjGah7DWo9xruebJdbqK91Zf7lMcDVfhApEB2UAxgD4xGXMu/iJ6o6YYYDHpDYBmIjo4xweqzYHOpjui5jgVAC/uxzKZgPoifigFsCjPHY5H7IKjEbEcb6LKksy5DDEF4cD+EaZF811MiKKa1zkxcsAeiH+6MkquyZXbkLEcJ/LFnU5ig9Xumxh9yIiuEoZXCeAsShejAGwVZn3DWEPbJKyTZFAH47ix9EAflO2rwvD1KZ2KJpHA0oHDTxnKeita19kEW1TTAyl8GRoT4o0CbXzWcyaXeojxRB3JkoXZyiC/hNbJ/rZijArRm0qCOWGTP9GMYoFl7PTF0x3GiO8qAh58kYaAZmfvxIdfsPmhQT/HR7XK1YKI6b7O5WDX5DmkNMAfAngAwBnIb44UnHA3WbC07dNdEKyJChUKAbJd5m6E0fMEXPZGrTWJW04mwK22vZ1MXOnADwNoB/ihToALWIui4Jq/ADlEQzan+G2IGkufwC4MWaOoUnKFj84iIafFQ2vMuDz3iPLgqQdSsR4xAcrxfjpaS/4RC7NIyaMhn1EH9sVjc5Z3mKqT9QxXqEY1RfS4EzR4FpDDL/eiumhG4DrFFuRcwt4gre7qIKu1Tox7gcKaUxyl8gjaAK9RD+/O77ryxfejcvVzgtHCxhFXCjGuyHfm3qUwpuqgTmtJC2EuMQQAK97bGNfR1S+VPN8nGM9KZ+GmkQj82AOtcriu6ExC3/qbQBDES0sEGOk/3NCd4WFTnxaU+gp+vrTx/huUu68TNnBhzNSFqKAk5QbLqct9niFa2uS3rm76G+Lz3r9WJV0I+O1sg+cSHtholzheB2XSwMzRGU6i5jEbqK/jhzrHwjgDY9tjFTo0xEupAi4PZfKS0VlYqGbRI1i+8mXfNCc5fxyMMLBFDGWd3LRCjpF5SBDAtz6TDsKGTLzBcUR3uoRiUWHs1khcMX6K4dfXzGPw0RFuuNMo4cy2EKxF2+1bvLlVwBTLZO9vxdj8EUImSgqUeSSaVSJPjsDbJt8Nu97bGPrmEFjA/IcNS4fR5RxvzCrsWmxrQQNki/feSzMa0FZY3PgI0z3U2mxqHQJzKObco4wJaum8TnH6/xClgMTmCr6I80rKz4UlSh40jQqFcOhSezNDiNJ2MiUnwFcbMCQeqLoh9zVWfGFqGRDTawQfaZgB0cAWOaxja0K2ELRINr/3E+lH0QlG5FC5aLPv2APZWyU/CGLfCFeQaEYKNolmZYVMiKVvHk2LkraUWgrsQ2yFtyjkDmcqvjYgD2jRNbOii5RyZYfOy1KWOjP5D9tUcimZ129D2tBdol+bcWqawfjpR5nFusLEsaWBeVEXQ67IM/kkx6eyZ+Y6W59ywpDqIe5IJUALlOCb+TZpDYsoR6G2gvlzqyw0OdIVj29rMMHha32LgvhYAiFbtTNYF8DFKa6s6xnrjGicDAMw3Ria0Gq2XTiZprvMJxoJi/TSRjGRRva3RjF/O0899DF2RMRNC6GYX6H4hSrCqhdog+96bE9UQ7GYxFh8/uhITiooJyQqwNQMR/3UGNbmMRm87wjn9Chfr138m4tiI/qE1tFn/mS8kg7u0KJEs6ULt6GbUd+7auYYnzvAu9ZopAGvSAjfKixYZEcLsqX5EC4q1CmXR7oEH2SsS8X/0aTh38jCmEMi/IR6BkMF5V/tLDX/in69BOhVc03j5Z3JM1t3hyBQJ9yNr04x5aTItFduUCmD4ibRX/Z9vhxHj6MXZwgmZgnUcDJhVJJwRNyNkK5bKOwIEOysBRX5krTtICFYoyUszhnNFoMR4BCnK5TgnrmuOSqSrOV+tqIJdUEXzO525ANLdIBO1DConvz5xWcusMtt+4OZiKaYopEJmAHnAvdRkgblNC1PkwwWO2xPb3BW1icQtruL6TBesXGZCrLQptCLEh7qLFkm4o6JohxdwbBk54vGv3MkArc5rEAmbKVrbFxeDFLmRIW/VQQDQ9WBOnZCB6tHgtBauySmL1K4jwxh1SQb1yQPpKfDNiCfo2ANTYo1DH7MWffRy6+YGmNpYzPQWKFaP8Xdo7F8c03j4m5dJh4uqeLTnZyxucg3ZstfB6ZHePky0cpJv9bTHRUpSTnCjqBWVkEAjQLQS8lpO5Lk7a0RsWiSsI2wb94SVFG6Mk3ikcUwUuhx6WOa5Tr8pCNjiuVGJJUkacWz4YxytHgY5v5V+qVc8M2TjhQajhG8cdYTaScAaXTTlKN4382uC5O3BPaa4G0ZPzHl3Ay/gvCHtiVijDrjHmqVz8yQwvsuR4RwT3K4HZy+u1i1KZSynzvRsRwtUvWhFcczqY4o9YlsiqSrzzKYLLLS8G+5YhXxNgc0qzMiwT4uYg4Rrv4NlKGg/JNoI4NhdoW1RqmNpUPbXK5izm9hZMMhxVD6Adl7M+Q2akz5UNL9Fqrr15dE8FXr5azBvVpllevRjUDqm+SmFdS5HXMzKgJcYw1nGBMEhKk1da4odD267vdIpcyppclfIdWWHoaiDI71yMZjdOPXzSv73ZiAJOO3chuaYeLuImfnP4By7YpPAbJtdXOUU0x8+MXRJyYp1CM0i7le44+msUhzCM5onUQ87e6c+nDnzXwb6Zyndc9wtk0VXZuQLlNYod6Jo5t9Hmx0gbLBh6L6fySsUA5JxteqJCuTZbNnJdxZEzJFFZQweSJaRzxtD3ABdjJ7JaZ7I4OO24klqhimTCemS+LOLnBajZntPG+38V/N/N3y1goT+dYkoZi1ZQSJEiQIEECwt/UKk4KqlBwIwAAAABJRU5ErkJggg==');
|
||||
background-size: cover;
|
||||
content: '';
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
:root {
|
||||
--ghost-accent-color: #139ad4;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.npubpro.com/maptalks.css" />
|
||||
|
||||
<link
|
||||
rel="alternate"
|
||||
type="application/rss+xml"
|
||||
title="نوستر"
|
||||
href="https://nostrarabia.npub.pro/rss/"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
type="text/css"
|
||||
href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300..800&display=swap"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
type="text/css"
|
||||
href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300..800&display=swap"
|
||||
/>
|
||||
<link
|
||||
rel="preload"
|
||||
as="script"
|
||||
href="https://blossom.npubpro.com/64f7c3c5de348a7d1a5c7d1519abfa33fec8c5442c583fda441d25cd7b5990cf.js"
|
||||
/>
|
||||
<link
|
||||
rel="preload"
|
||||
as="style"
|
||||
href="https://blossom.npubpro.com/8c397e35e20c7e4c6e163f0d17511294a2fba1c1a13823b91e2c220c3c38e83b.css"
|
||||
/>
|
||||
<link
|
||||
rel="preload"
|
||||
as="style"
|
||||
href="https://blossom.npubpro.com/9d9f5663fcc8ec87f256d3959fcd763ae234774d7cfcaf85a5ad10e3adea63e3.css"
|
||||
/>
|
||||
<link
|
||||
rel="preload"
|
||||
as="script"
|
||||
href="https://blossom.npubpro.com/b8292724b60caed6133f097c3f0427163e93e87724da84861192e1322d4146f5.js"
|
||||
/>
|
||||
<link
|
||||
rel="preload"
|
||||
as="script"
|
||||
href="https://blossom.npubpro.com/b866f2b384af7668032c0c2fd523717520537bf812de9870cf1a960b11087333.js"
|
||||
/>
|
||||
<link
|
||||
rel="preload"
|
||||
as="style"
|
||||
href="https://blossom.npubpro.com/eb267981d379bed63595b7ebd1dd6cb775c912a6f9b0f16c2faee5050afbf381.css"
|
||||
/>
|
||||
</head>
|
||||
|
||||
<body
|
||||
class="post-template tag-nostrarabia is-head-left-logo has-parallax-feed is-dropdown-loaded"
|
||||
style="overflow: initial"
|
||||
>
|
||||
<div class="gh-site">
|
||||
<header id="gh-head" class="gh-head gh-outer">
|
||||
<div class="gh-head-inner gh-inner">
|
||||
<div class="gh-head-brand">
|
||||
<div class="gh-head-brand-wrapper">
|
||||
<a
|
||||
class="gh-head-logo"
|
||||
href="https://nostrarabia.npub.pro"
|
||||
>
|
||||
<img
|
||||
src="https://image.nostr.build/4afea744d3f72f4f7af1f7d632a8594159ef65f49b48cb00890c3904c57e1822.jpg"
|
||||
alt="نوستر"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<button
|
||||
class="gh-search gh-icon-btn"
|
||||
aria-label="Search this site"
|
||||
data-ghost-search=""
|
||||
>
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M17.5 17.5L12.5 12.5L17.5 17.5ZM14.1667 8.33333C14.1667 9.09938 14.0158 9.85792 13.7226 10.5657C13.4295 11.2734 12.9998 11.9164 12.4581 12.4581C11.9164 12.9998 11.2734 13.4295 10.5657 13.7226C9.85792 14.0158 9.09938 14.1667 8.33333 14.1667C7.56729 14.1667 6.80875 14.0158 6.10101 13.7226C5.39328 13.4295 4.75022 12.9998 4.20854 12.4581C3.66687 11.9164 3.23719 11.2734 2.94404 10.5657C2.65088 9.85792 2.5 9.09938 2.5 8.33333C2.5 6.78624 3.11458 5.30251 4.20854 4.20854C5.30251 3.11458 6.78624 2.5 8.33333 2.5C9.88043 2.5 11.3642 3.11458 12.4581 4.20854C13.5521 5.30251 14.1667 6.78624 14.1667 8.33333Z"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="gh-burger"></button>
|
||||
</div>
|
||||
|
||||
<nav class="gh-head-menu">
|
||||
<ul class="nav">
|
||||
<li class="nav-alreysyh">
|
||||
<a href="https://nostrarabia.npub.pro/"
|
||||
>الرئيسية</a
|
||||
>
|
||||
</li>
|
||||
<li class="nav-nwstr-arby">
|
||||
<a
|
||||
href="https://nostrarabia.npub.pro/tag/nostrarabia/"
|
||||
>نوستر عربي</a
|
||||
>
|
||||
</li>
|
||||
<li class="nav-talm-albytkwyn">
|
||||
<a
|
||||
href="https://nostrarabia.npub.pro/tag/learnbitcoin/"
|
||||
>تعلّم البيتكوين</a
|
||||
>
|
||||
</li>
|
||||
<li class="nav-talm-alaqtsad-alnmsawy">
|
||||
<a
|
||||
href="https://nostrarabia.npub.pro/tag/Learnaustrianeconomics/"
|
||||
>تعلّم الاقتصاد النمساوي</a
|
||||
>
|
||||
</li>
|
||||
<li class="nav-alaadhaa">
|
||||
<a
|
||||
href="https://nostrarabia.npub.pro/tag/community/"
|
||||
>الأعضاء</a
|
||||
>
|
||||
</li>
|
||||
<li class="nav-akhbar">
|
||||
<a href="https://nostrarabia.npub.pro/tag/news/"
|
||||
>أخبار</a
|
||||
>
|
||||
</li>
|
||||
|
||||
<button
|
||||
class="nav-more-toggle gh-icon-btn"
|
||||
aria-label="More"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 32 32"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
d="M21.333 16c0-1.473 1.194-2.667 2.667-2.667v0c1.473 0 2.667 1.194 2.667 2.667v0c0 1.473-1.194 2.667-2.667 2.667v0c-1.473 0-2.667-1.194-2.667-2.667v0zM13.333 16c0-1.473 1.194-2.667 2.667-2.667v0c1.473 0 2.667 1.194 2.667 2.667v0c0 1.473-1.194 2.667-2.667 2.667v0c-1.473 0-2.667-1.194-2.667-2.667v0zM5.333 16c0-1.473 1.194-2.667 2.667-2.667v0c1.473 0 2.667 1.194 2.667 2.667v0c0 1.473-1.194 2.667-2.667 2.667v0c-1.473 0-2.667-1.194-2.667-2.667v0z"
|
||||
></path>
|
||||
</svg>
|
||||
<div class="gh-dropdown">
|
||||
<li class="nav-mymz">
|
||||
<a
|
||||
href="https://nostrarabia.npub.pro/tag/memes/"
|
||||
>ميمز</a
|
||||
>
|
||||
</li>
|
||||
<li class="nav-adwat">
|
||||
<a
|
||||
href="https://nostrarabia.npub.pro/tag/tools/"
|
||||
>أدوات</a
|
||||
>
|
||||
</li>
|
||||
<li class="nav-idamna">
|
||||
<a
|
||||
href="https://nostrarabia.npub.pro/tag/supportus/"
|
||||
>إدعمنا</a
|
||||
>
|
||||
</li>
|
||||
</div>
|
||||
</button>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<div class="gh-head-actions">
|
||||
<button
|
||||
class="gh-search gh-icon-btn"
|
||||
aria-label="Search this site"
|
||||
data-ghost-search=""
|
||||
>
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M17.5 17.5L12.5 12.5L17.5 17.5ZM14.1667 8.33333C14.1667 9.09938 14.0158 9.85792 13.7226 10.5657C13.4295 11.2734 12.9998 11.9164 12.4581 12.4581C11.9164 12.9998 11.2734 13.4295 10.5657 13.7226C9.85792 14.0158 9.09938 14.1667 8.33333 14.1667C7.56729 14.1667 6.80875 14.0158 6.10101 13.7226C5.39328 13.4295 4.75022 12.9998 4.20854 12.4581C3.66687 11.9164 3.23719 11.2734 2.94404 10.5657C2.65088 9.85792 2.5 9.09938 2.5 8.33333C2.5 6.78624 3.11458 5.30251 4.20854 4.20854C5.30251 3.11458 6.78624 2.5 8.33333 2.5C9.88043 2.5 11.3642 3.11458 12.4581 4.20854C13.5521 5.30251 14.1667 6.78624 14.1667 8.33333Z"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="gh-main gh-outer">
|
||||
<div class="gh-inner">
|
||||
<article class="gh-article post tag-nostrarabia no-image">
|
||||
<section class="gh-content gh-canvas">
|
||||
<np-content
|
||||
event="note1dplcmt2885l9tsy6c4xenm3w7hrg92af42sz76p0ypd7ft0muvpqg80sqn"
|
||||
><p>
|
||||
من الجميل في نوستر هي قدرة التطبيقات على
|
||||
التخاطر.<br /><br />إذا بتفضلوا استخدام
|
||||
مساحة مثل الDiscord، ضيفوا صفحتنا على
|
||||
flotilla.social للتواصل بصيغة التشات.
|
||||
<br /><br />اضغط إضافة مساحة Add Space،<br />ثم
|
||||
الدخول على مساحة Join a space،<br />وضيفوا
|
||||
ريلاي relay.nostrarabia.com<br /><br />نراكم.
|
||||
🫡<br /><br /><a href="/tag/nostrarabia/"
|
||||
>#nostrarabia</a
|
||||
>
|
||||
</p>
|
||||
</np-content>
|
||||
<style>
|
||||
np-map {
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
np-content p {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
np-content h1 {
|
||||
margin-top: 4rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
np-content h2 {
|
||||
margin-top: 4rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
np-content h3 {
|
||||
margin-top: 4rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
np-content h4 {
|
||||
margin-top: 4rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
np-content h5 {
|
||||
margin-top: 4rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
np-content h6 {
|
||||
margin-top: 4rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
</style>
|
||||
<np-content-cta
|
||||
data-cta-list="zap,like,share"
|
||||
data-cta-main="zap"
|
||||
data-button-color="#139ad4"
|
||||
data-text-button-color="#fff"
|
||||
data-event-addr="note1dplcmt2885l9tsy6c4xenm3w7hrg92af42sz76p0ypd7ft0muvpqg80sqn"
|
||||
data-event-id="note1dplcmt2885l9tsy6c4xenm3w7hrg92af42sz76p0ypd7ft0muvpqg80sqn"
|
||||
data-author-npub="npub1syk07kh6tkwrksyzhqk8qdjul5kj08p842gjxyacljlavhzq4m4slmdu3p"
|
||||
id="np-content-cta"
|
||||
></np-content-cta>
|
||||
<div
|
||||
style="display: none"
|
||||
id="zap-button"
|
||||
data-anon=""
|
||||
data-npub="npub1syk07kh6tkwrksyzhqk8qdjul5kj08p842gjxyacljlavhzq4m4slmdu3p"
|
||||
data-note-id="note1dplcmt2885l9tsy6c4xenm3w7hrg92af42sz76p0ypd7ft0muvpqg80sqn"
|
||||
data-relays="wss://purplepag.es/,wss://user.kindpag.es/,wss://relay.nos.social/,wss://relay.primal.net/,wss://relay.damus.io/,wss://relay.nostrarabia.com/"
|
||||
data-button-color="#139ad4"
|
||||
data-amount=""
|
||||
></div>
|
||||
<np-content-comments
|
||||
data-id="note1dplcmt2885l9tsy6c4xenm3w7hrg92af42sz76p0ypd7ft0muvpqg80sqn"
|
||||
data-relays="wss://purplepag.es/,wss://user.kindpag.es/,wss://relay.nos.social/,wss://relay.primal.net/,wss://relay.damus.io/,wss://relay.nostrarabia.com/"
|
||||
data-client="nostrarabia.npub.pro"
|
||||
></np-content-comments
|
||||
><np-content-dm
|
||||
data-peer-npub="npub1syk07kh6tkwrksyzhqk8qdjul5kj08p842gjxyacljlavhzq4m4slmdu3p"
|
||||
data-relays="wss://purplepag.es/,wss://user.kindpag.es/,wss://relay.nos.social/,wss://relay.primal.net/,wss://relay.damus.io/,wss://relay.nostrarabia.com/"
|
||||
></np-content-dm>
|
||||
<header class="gh-article-header">
|
||||
<h1 class="gh-article-title">
|
||||
من الجميل في نوستر هي قدرة…
|
||||
</h1>
|
||||
</header>
|
||||
<aside class="gh-article-meta">
|
||||
<div class="gh-article-meta-inner">
|
||||
<figure class="gh-author-image">
|
||||
<img
|
||||
src="https://mir-s3-cdn-cf.behance.net/projects/404/01ffa529646977.55fca90cee60d.jpg"
|
||||
alt="نوستر بالعربي"
|
||||
/>
|
||||
</figure>
|
||||
<div class="gh-article-meta-wrapper">
|
||||
<h4 class="gh-author-name">
|
||||
<a
|
||||
href="/author/npub1syk07kh6tkwrksyzhqk8qdjul5kj08p842gjxyacljlavhzq4m4slmdu3p/"
|
||||
>نوستر بالعربي</a
|
||||
>
|
||||
</h4>
|
||||
<time
|
||||
class="gh-article-date"
|
||||
datetime="2024-12-01"
|
||||
>Dec 01, 2024</time
|
||||
>
|
||||
</div>
|
||||
<!-- <a
|
||||
class="gh-article-tag"
|
||||
href="/tag/nostrarabia/"
|
||||
style="--tag-color:"
|
||||
>nostrarabia</a
|
||||
> -->
|
||||
</div>
|
||||
</aside>
|
||||
</section>
|
||||
|
||||
<footer class="gh-article-footer gh-canvas">
|
||||
<nav class="gh-navigation">
|
||||
<div class="gh-navigation-previous">
|
||||
<a
|
||||
class="gh-navigation-link"
|
||||
href="/post/1733010811046/"
|
||||
>← Previous</a
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="gh-navigation-middle"></div>
|
||||
|
||||
<div class="gh-navigation-next">
|
||||
<a
|
||||
class="gh-navigation-link"
|
||||
href="/post/1733278250434/"
|
||||
>Next →</a
|
||||
>
|
||||
</div>
|
||||
</nav>
|
||||
</footer>
|
||||
</article>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="gh-foot gh-outer">
|
||||
<div class="gh-foot-inner gh-inner">
|
||||
<nav class="gh-foot-menu"></nav>
|
||||
|
||||
<div class="gh-copyright">
|
||||
نوستر © 2024. Powered by
|
||||
<a
|
||||
href="https://npub.pro/"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>Npub.pro</a
|
||||
>. Theme by
|
||||
<a
|
||||
href="https://ghost.org/"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>Ghost</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="pswp__bg"></div>
|
||||
|
||||
<div class="pswp__scroll-wrap">
|
||||
<div class="pswp__container">
|
||||
<div class="pswp__item"></div>
|
||||
<div class="pswp__item"></div>
|
||||
<div class="pswp__item"></div>
|
||||
</div>
|
||||
|
||||
<div class="pswp__ui pswp__ui--hidden">
|
||||
<div class="pswp__top-bar">
|
||||
<div class="pswp__counter"></div>
|
||||
|
||||
<button
|
||||
class="pswp__button pswp__button--close"
|
||||
title="Close (Esc)"
|
||||
></button>
|
||||
<button
|
||||
class="pswp__button pswp__button--share"
|
||||
title="Share"
|
||||
></button>
|
||||
<button
|
||||
class="pswp__button pswp__button--fs"
|
||||
title="Toggle fullscreen"
|
||||
></button>
|
||||
<button
|
||||
class="pswp__button pswp__button--zoom"
|
||||
title="Zoom in/out"
|
||||
></button>
|
||||
|
||||
<div class="pswp__preloader">
|
||||
<div class="pswp__preloader__icn">
|
||||
<div class="pswp__preloader__cut">
|
||||
<div class="pswp__preloader__donut"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap"
|
||||
>
|
||||
<div class="pswp__share-tooltip"></div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="pswp__button pswp__button--arrow--left"
|
||||
title="Previous (arrow left)"
|
||||
></button>
|
||||
<button
|
||||
class="pswp__button pswp__button--arrow--right"
|
||||
title="Next (arrow right)"
|
||||
></button>
|
||||
|
||||
<div class="pswp__caption">
|
||||
<div class="pswp__caption__center"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="https://blossom.npubpro.com/64f7c3c5de348a7d1a5c7d1519abfa33fec8c5442c583fda441d25cd7b5990cf.js"></script>
|
||||
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/venobox@2.1.8/dist/venobox.min.css"
|
||||
type="text/css"
|
||||
media="screen"
|
||||
/>
|
||||
<script>
|
||||
;(() => {
|
||||
const script = document.createElement('script')
|
||||
script.async = true
|
||||
script.type = 'text/javascript'
|
||||
script.src =
|
||||
'https://cdn.jsdelivr.net/npm/venobox@2.1.8/dist/venobox.min.js'
|
||||
script.onload = () => {
|
||||
new VenoBox({
|
||||
selector: '.vbx-media',
|
||||
spinColor: '#139ad4',
|
||||
overlayColor: '#139ad4',
|
||||
})
|
||||
}
|
||||
document.body.appendChild(script)
|
||||
})()
|
||||
</script>
|
||||
<script
|
||||
async=""
|
||||
type="text/javascript"
|
||||
src="https://cdn.jsdelivr.net/npm/venobox@2.1.8/dist/venobox.min.js"
|
||||
></script>
|
||||
|
||||
<script
|
||||
type="text/javascript"
|
||||
async=""
|
||||
src="https://cdn.npubpro.com/zapthreads.iife.0.6.0.js"
|
||||
></script>
|
||||
<script
|
||||
type="text/javascript"
|
||||
async=""
|
||||
src="https://cdn.npubpro.com/nostr-site-zapthreads.1.0.2.js"
|
||||
></script>
|
||||
|
||||
<script
|
||||
type="text/javascript"
|
||||
async=""
|
||||
src="https://cdn.npubpro.com/content-cta.iife.1.0.22.js"
|
||||
></script>
|
||||
|
||||
<script
|
||||
async=""
|
||||
src="../packages/auth/dist/unpkg.js"
|
||||
data-perms="sign_event:1,sign_event:7,sign_event:3,sign_event:9734,sign_event:10003,sign_event:9802,nip04_encrypt,nip04_decrypt"
|
||||
data-start-screen="local-signup"
|
||||
data-signup-relays="wss://relay.primal.net/,wss://relay.damus.io/,wss://relay.nostrarabia.com/"
|
||||
></script>
|
||||
<script>
|
||||
;(async () => {
|
||||
if (!window.nostrSite)
|
||||
await new Promise((ok) =>
|
||||
document.addEventListener('npLoad', ok),
|
||||
)
|
||||
const ep = window.nostrSite.plugins.register('nostr-login')
|
||||
document.addEventListener('nlAuth', async (e) => {
|
||||
console.log('nlAuth', e)
|
||||
ep.dispatch('auth', {
|
||||
type: e.detail.type,
|
||||
pubkey: e.detail.pubkey,
|
||||
})
|
||||
|
||||
if (
|
||||
e.detail.type === 'login' ||
|
||||
e.detail.type === 'signup'
|
||||
) {
|
||||
window.__nlAuthed = true
|
||||
} else {
|
||||
window.__nlAuthed = false
|
||||
}
|
||||
|
||||
const npub = window.nostrSite.nostrTools.nip19.npubEncode(
|
||||
await window.nostr.getPublicKey(),
|
||||
)
|
||||
const zapButton = document.querySelector('#zap-button')
|
||||
if (zapButton) {
|
||||
if (window.__nlAuthed)
|
||||
zapButton.setAttribute('data-anon', '')
|
||||
else zapButton.setAttribute('data-anon', 'true')
|
||||
}
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
|
||||
<script src="https://cdn.npubpro.com/nostr-zap.0.22.2.js"></script>
|
||||
<div></div>
|
||||
<np-content-cta-selection></np-content-cta-selection>
|
||||
<script>
|
||||
;(async () => {
|
||||
if (!window.nostrSite)
|
||||
await new Promise((ok) =>
|
||||
document.addEventListener('npLoad', ok),
|
||||
)
|
||||
const ep = window.nostrSite.plugins.register('nostr-zap')
|
||||
console.log('nostr-zap ep', ep)
|
||||
ep.subscribe('action-zap', (amount) => {
|
||||
const button = document.querySelector('#zap-button')
|
||||
button.setAttribute('data-amount', amount || '')
|
||||
button.dispatchEvent(new Event('click'))
|
||||
})
|
||||
document.addEventListener('nostr-zap-published', (e) => {
|
||||
console.log('nostr-zap on zap published', e)
|
||||
ep.dispatch('event-published', e.detail)
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
|
||||
<script
|
||||
async=""
|
||||
src="https://unpkg.com/nostr-site-search@1.0.12/dist/index.js"
|
||||
></script>
|
||||
<script>
|
||||
document.addEventListener('np-search-goto', (e) => {
|
||||
console.log('np-search-goto', e)
|
||||
window.location.href = e.detail
|
||||
})
|
||||
</script>
|
||||
<script
|
||||
async=""
|
||||
src="https://cdn.npubpro.com/embeds.iife.1.0.4.js"
|
||||
></script>
|
||||
|
||||
<script
|
||||
type="text/javascript"
|
||||
src="https://cdn.npubpro.com/maptalks.min.js"
|
||||
></script>
|
||||
<script>
|
||||
const container = document.querySelector('np-map')
|
||||
console.log('map', container)
|
||||
if (container) {
|
||||
const coords = container
|
||||
.getAttribute('coords')
|
||||
.split(',')
|
||||
.map((c) => Number(c))
|
||||
console.log('coords', coords)
|
||||
const div = document.createElement('div')
|
||||
div.style.width = '100%'
|
||||
div.style.height = '300px'
|
||||
container.append(div)
|
||||
const map = new maptalks.Map(div, {
|
||||
center: coords,
|
||||
zoom: 15,
|
||||
zoomControl: true, // add zoom control
|
||||
scaleControl: true, // add scale control
|
||||
baseLayer: new maptalks.TileLayer('base', {
|
||||
// urlTemplate: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
|
||||
urlTemplate:
|
||||
'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
|
||||
subdomains: ['a', 'b', 'c'], // "d"
|
||||
attribution:
|
||||
'© <a href="http://osm.org">OpenStreetMap</a>',
|
||||
}),
|
||||
})
|
||||
|
||||
const point = new maptalks.Marker(coords, {
|
||||
visible: true,
|
||||
editable: false,
|
||||
cursor: 'pointer',
|
||||
draggable: false,
|
||||
// symbol : {
|
||||
// 'textFaceName' : 'sans-serif',
|
||||
// 'textName' : 'MapTalks',
|
||||
// 'textFill' : '#34495e',
|
||||
// 'textHorizontalAlignment' : 'right',
|
||||
// 'textSize' : 40
|
||||
// }
|
||||
})
|
||||
point.on('click touchend', (e) => console.log(e))
|
||||
|
||||
new maptalks.VectorLayer('vector', point).addTo(map)
|
||||
}
|
||||
</script>
|
||||
|
||||
<script
|
||||
type="text/javascript"
|
||||
src="https://cdn.npubpro.com/index.js"
|
||||
onload="window.nostrSite.startTab();"
|
||||
></script>
|
||||
|
||||
<style>
|
||||
#pwa-toast {
|
||||
visibility: hidden;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
margin: 16px;
|
||||
padding: 12px;
|
||||
border: 1px solid #8885;
|
||||
border-radius: 4px;
|
||||
z-index: 1;
|
||||
text-align: left;
|
||||
box-shadow: 3px 4px 5px 0 #8885;
|
||||
display: grid;
|
||||
background-color: #fff;
|
||||
}
|
||||
#pwa-toast .message {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
#pwa-toast .buttons {
|
||||
display: flex;
|
||||
}
|
||||
#pwa-toast button {
|
||||
border: 1px solid #8885;
|
||||
outline: none;
|
||||
margin-right: 5px;
|
||||
border-radius: 2px;
|
||||
padding: 3px 10px;
|
||||
}
|
||||
#pwa-toast.show {
|
||||
visibility: visible;
|
||||
}
|
||||
button#pwa-refresh {
|
||||
display: none;
|
||||
}
|
||||
#pwa-toast.show.refresh button#pwa-refresh {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
|
||||
<iframe
|
||||
width="0"
|
||||
height="0"
|
||||
border="0"
|
||||
id="__nostr-login-worker-iframe-3-use-nsec-app"
|
||||
style="display: none"
|
||||
src="https://3.use.nsec.app/iframe"
|
||||
></iframe
|
||||
><deepl-input-controller></deepl-input-controller>
|
||||
</body>
|
||||
</html>
|
||||
184
examples/sign.html
Normal file
184
examples/sign.html
Normal file
@@ -0,0 +1,184 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>NIP-07 Signing Test</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div>
|
||||
<div id="status"></div>
|
||||
|
||||
<div id="test-section" style="display:none;">
|
||||
<button id="sign-button">Sign Event</button>
|
||||
<button id="encrypt-button">Test NIP-04 Encrypt</button>
|
||||
<button id="decrypt-button">Test NIP-04 Decrypt</button>
|
||||
<div id="results"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../lite/nostr.bundle.js"></script>
|
||||
<script src="../lite/nostr-lite.js"></script>
|
||||
|
||||
<script>
|
||||
let testPubkey = 'npub1damus9dqe7g7jqn45kjcjgsv0vxjqnk8cxjkf8gqjwm8t8qjm7cqm3z7l';
|
||||
let ciphertext = '';
|
||||
|
||||
document.addEventListener('DOMContentLoaded', async () => {
|
||||
await window.NOSTR_LOGIN_LITE.init({
|
||||
theme: 'default',
|
||||
methods: {
|
||||
extension: true,
|
||||
local: true,
|
||||
readonly: true,
|
||||
connect: true,
|
||||
remote: true,
|
||||
otp: true
|
||||
},
|
||||
floatingTab: {
|
||||
enabled: true,
|
||||
hPosition: 1, // 0.0-1.0 or '95%' from left
|
||||
vPosition: 0, // 0.0-1.0 or '50%' from top
|
||||
appearance: {
|
||||
style: 'pill', // 'pill', 'square', 'circle', 'minimal'
|
||||
icon: '', // Clean display without icon placeholders
|
||||
text: 'Login'
|
||||
},
|
||||
behavior: {
|
||||
hideWhenAuthenticated: false,
|
||||
showUserInfo: true,
|
||||
autoSlide: true
|
||||
},
|
||||
getUserInfo: true, // Enable profile fetching
|
||||
getUserRelay: [ // Specific relays for profile fetching
|
||||
'wss://relay.laantungir.net'
|
||||
]
|
||||
}});
|
||||
|
||||
|
||||
// document.getElementById('login-button').addEventListener('click', () => {
|
||||
// window.NOSTR_LOGIN_LITE.launch('login');
|
||||
// });
|
||||
|
||||
window.addEventListener('nlMethodSelected', (event) => {
|
||||
document.getElementById('status').textContent = `Authenticated with: ${event.detail.method}`;
|
||||
document.getElementById('test-section').style.display = 'block';
|
||||
});
|
||||
|
||||
document.getElementById('sign-button').addEventListener('click', testSigning);
|
||||
document.getElementById('encrypt-button').addEventListener('click', testEncryption);
|
||||
document.getElementById('decrypt-button').addEventListener('click', testDecryption);
|
||||
});
|
||||
|
||||
async function testSigning() {
|
||||
try {
|
||||
console.log('=== DEBUGGING SIGN EVENT START ===');
|
||||
console.log('testSigning: window.nostr is:', window.nostr);
|
||||
console.log('testSigning: window.nostr constructor:', window.nostr?.constructor?.name);
|
||||
console.log('testSigning: window.nostr === our facade?', window.nostr?.constructor?.name === 'WindowNostr');
|
||||
|
||||
// Get user public key for comparison
|
||||
const userPubkey = await window.nostr.getPublicKey();
|
||||
console.log('User public key:', userPubkey);
|
||||
|
||||
// Check auth state if our facade
|
||||
if (window.nostr?.constructor?.name === 'WindowNostr') {
|
||||
console.log('WindowNostr authState:', window.nostr.authState);
|
||||
console.log('WindowNostr authenticatedExtension:', window.nostr.authenticatedExtension);
|
||||
console.log('WindowNostr existingNostr:', window.nostr.existingNostr);
|
||||
}
|
||||
|
||||
const event = {
|
||||
kind: 1,
|
||||
content: 'Hello from NIP-07!',
|
||||
tags: [],
|
||||
created_at: Math.floor(Date.now() / 1000)
|
||||
};
|
||||
|
||||
console.log('=== EVENT BEING SENT TO EXTENSION ===');
|
||||
console.log('Event object:', JSON.stringify(event, null, 2));
|
||||
console.log('Event keys:', Object.keys(event));
|
||||
console.log('Event kind type:', typeof event.kind, event.kind);
|
||||
console.log('Event content type:', typeof event.content, event.content);
|
||||
console.log('Event tags type:', typeof event.tags, event.tags);
|
||||
console.log('Event created_at type:', typeof event.created_at, event.created_at);
|
||||
console.log('Event created_at value:', event.created_at);
|
||||
|
||||
// Check if created_at is within reasonable bounds
|
||||
const now = Math.floor(Date.now() / 1000);
|
||||
const timeDiff = Math.abs(event.created_at - now);
|
||||
console.log('Time difference from now (seconds):', timeDiff);
|
||||
console.log('Event timestamp as Date:', new Date(event.created_at * 1000));
|
||||
|
||||
// Additional debugging for user-specific issues
|
||||
console.log('=== USER-SPECIFIC DEBUG INFO ===');
|
||||
console.log('User pubkey length:', userPubkey?.length);
|
||||
console.log('User pubkey format check (hex):', /^[a-fA-F0-9]{64}$/.test(userPubkey));
|
||||
|
||||
// Try to get user profile info if available
|
||||
try {
|
||||
const profileEvent = {
|
||||
kinds: [0],
|
||||
authors: [userPubkey],
|
||||
limit: 1
|
||||
};
|
||||
console.log('Would query profile with filter:', profileEvent);
|
||||
} catch (profileErr) {
|
||||
console.log('Profile query setup failed:', profileErr);
|
||||
}
|
||||
|
||||
console.log('=== ABOUT TO CALL EXTENSION SIGN EVENT ===');
|
||||
const signedEvent = await window.nostr.signEvent(event);
|
||||
|
||||
console.log('=== SIGN EVENT SUCCESSFUL ===');
|
||||
console.log('Signed event:', JSON.stringify(signedEvent, null, 2));
|
||||
console.log('Signed event keys:', Object.keys(signedEvent));
|
||||
console.log('Signature present:', !!signedEvent.sig);
|
||||
console.log('ID present:', !!signedEvent.id);
|
||||
console.log('Pubkey matches user:', signedEvent.pubkey === userPubkey);
|
||||
|
||||
document.getElementById('results').innerHTML = `<h3>Signed Event:</h3><pre>${JSON.stringify(signedEvent, null, 2)}</pre>`;
|
||||
|
||||
console.log('=== DEBUGGING SIGN EVENT END ===');
|
||||
} catch (error) {
|
||||
console.error('=== SIGN EVENT ERROR ===');
|
||||
console.error('Error message:', error.message);
|
||||
console.error('Error stack:', error.stack);
|
||||
console.error('Error object:', error);
|
||||
|
||||
document.getElementById('results').innerHTML = `<h3>Sign Error:</h3><pre>${error.message}</pre><pre>${error.stack}</pre>`;
|
||||
}
|
||||
}
|
||||
|
||||
async function testEncryption() {
|
||||
try {
|
||||
const plaintext = 'Secret message for testing';
|
||||
const pubkey = await window.nostr.getPublicKey();
|
||||
|
||||
ciphertext = await window.nostr.nip04.encrypt(pubkey, plaintext);
|
||||
document.getElementById('results').innerHTML = `<h3>Encrypted:</h3><pre>${ciphertext}</pre>`;
|
||||
} catch (error) {
|
||||
document.getElementById('results').innerHTML = `<h3>Encrypt Error:</h3><pre>${error.message}</pre>`;
|
||||
}
|
||||
}
|
||||
|
||||
async function testDecryption() {
|
||||
try {
|
||||
if (!ciphertext) {
|
||||
document.getElementById('results').innerHTML = `<h3>Decrypt Error:</h3><pre>No ciphertext available. Run encrypt first.</pre>`;
|
||||
return;
|
||||
}
|
||||
|
||||
const pubkey = await window.nostr.getPublicKey();
|
||||
const decrypted = await window.nostr.nip04.decrypt(pubkey, ciphertext);
|
||||
document.getElementById('results').innerHTML = `<h3>Decrypted:</h3><pre>${decrypted}</pre>`;
|
||||
} catch (error) {
|
||||
document.getElementById('results').innerHTML = `<h3>Decrypt Error:</h3><pre>${error.message}</pre>`;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,343 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Nostr Login Interactive Test</title>
|
||||
<style>
|
||||
body { font-family: Arial, sans-serif; margin: 20px; }
|
||||
.container { max-width: 800px; margin: 0 auto; }
|
||||
.controls { background: #f5f5f5; padding: 20px; border-radius: 8px; margin-bottom: 20px; }
|
||||
.control-group { margin-bottom: 15px; }
|
||||
.control-group label { display: inline-block; width: 150px; font-weight: bold; }
|
||||
.control-group input, .control-group select { margin-left: 10px; padding: 5px; }
|
||||
.checkbox-group { display: flex; gap: 10px; flex-wrap: wrap; }
|
||||
.checkbox-group label { width: auto; margin-right: 15px; }
|
||||
.current-config { background: #e8f4fd; padding: 15px; border-radius: 5px; margin-bottom: 20px; }
|
||||
.login-area { background: #fff; border: 2px solid #ddd; padding: 20px; border-radius: 8px; }
|
||||
button { padding: 10px 15px; margin: 5px; cursor: pointer; }
|
||||
.apply-btn { background: #007cba; color: white; border: none; border-radius: 5px; }
|
||||
.reset-btn { background: #999; color: white; border: none; border-radius: 5px; }
|
||||
.note { background: #fff3cd; padding: 10px; border-radius: 5px; margin-top: 10px; font-size: 14px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>Nostr Login Interactive Test</h1>
|
||||
|
||||
<!-- Controls Section -->
|
||||
<div class="controls">
|
||||
<h3>Configuration Options</h3>
|
||||
|
||||
<div class="control-group">
|
||||
<label>Theme:</label>
|
||||
<select id="themeSelect">
|
||||
<option value="default">Default</option>
|
||||
<option value="ocean">Ocean</option>
|
||||
<option value="lemonade">Lemonade</option>
|
||||
<option value="purple">Purple</option>
|
||||
<option value="laan">Laan</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<label>Dark Mode:</label>
|
||||
<input type="checkbox" id="darkModeCheck">
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<label>Start Screen:</label>
|
||||
<select id="startScreenSelect">
|
||||
<option value="">Default</option>
|
||||
<option value="welcome">Welcome</option>
|
||||
<option value="welcome-login">Welcome Login</option>
|
||||
<option value="welcome-signup">Welcome Signup</option>
|
||||
<option value="signup">Signup</option>
|
||||
<option value="local-signup">Local Signup</option>
|
||||
<option value="login">Login</option>
|
||||
<option value="connect">Connect</option>
|
||||
<option value="login-bunker-url">Login Bunker URL</option>
|
||||
<option value="login-read-only">Login Read Only</option>
|
||||
<option value="switch-account">Switch Account</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<label>Auth Methods:</label>
|
||||
<div class="checkbox-group">
|
||||
<label><input type="checkbox" value="connect" checked> Connect (NIP-46)</label>
|
||||
<label><input type="checkbox" value="extension" checked> Extension</label>
|
||||
<label><input type="checkbox" value="readOnly" checked> Read Only</label>
|
||||
<label><input type="checkbox" value="local" checked> Local</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<label>No Banner:</label>
|
||||
<input type="checkbox" id="noBannerCheck">
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<label>Bunkers:</label>
|
||||
<input type="text" id="bunkersInput" placeholder="e.g., nsec.app,highlighter.com" style="width: 300px;">
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<label>Permissions:</label>
|
||||
<input type="text" id="permsInput" placeholder="e.g., sign_event:1,nip04_encrypt" style="width: 300px;">
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<label>Title:</label>
|
||||
<input type="text" id="titleInput" placeholder="Custom welcome title" style="width: 300px;">
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<label>Description:</label>
|
||||
<input type="text" id="descriptionInput" placeholder="Custom welcome description" style="width: 300px;">
|
||||
</div>
|
||||
|
||||
<button class="apply-btn" onclick="applyConfig()">Apply Configuration</button>
|
||||
<button class="reset-btn" onclick="resetConfig()">Reset to Defaults</button>
|
||||
|
||||
<div class="note">
|
||||
<strong>Note:</strong> Configuration changes will be applied by reloading the page with new settings.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Current Configuration Display -->
|
||||
<div class="current-config">
|
||||
<h4>Current Configuration:</h4>
|
||||
<pre id="configDisplay"></pre>
|
||||
</div>
|
||||
|
||||
<!-- Login/User Section -->
|
||||
<div class="login-area">
|
||||
<!-- Login Section -->
|
||||
<div id="loginSection">
|
||||
<h3>Test Login</h3>
|
||||
<button id="loginBtn">Login with Nostr</button>
|
||||
<button onclick="launchSpecificScreen()">Launch with Start Screen</button>
|
||||
</div>
|
||||
|
||||
<!-- User Info Section (hidden initially) -->
|
||||
<div id="userSection" style="display: none;">
|
||||
<h3>Welcome!</h3>
|
||||
<p><strong>Your Public Key (hex):</strong></p>
|
||||
<div id="pubkeyHex" style="word-break: break-all; background: #f0f0f0; padding: 10px; border-radius: 4px;"></div>
|
||||
<br>
|
||||
<button id="logoutBtn">Logout</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dynamic script loading with configuration -->
|
||||
<script>
|
||||
let currentConfig = {};
|
||||
let scriptLoaded = false;
|
||||
|
||||
// Load nostr-login with current configuration
|
||||
function loadNostrLogin() {
|
||||
if (scriptLoaded) return;
|
||||
|
||||
const script = document.createElement('script');
|
||||
script.src = '../packages/auth/dist/unpkg.js';
|
||||
|
||||
// Apply configuration as data attributes
|
||||
const config = getStoredConfig();
|
||||
if (config.theme) script.setAttribute('data-theme', config.theme);
|
||||
if (config.darkMode !== undefined) script.setAttribute('data-dark-mode', config.darkMode);
|
||||
if (config.startScreen) script.setAttribute('data-start-screen', config.startScreen);
|
||||
if (config.noBanner !== undefined) script.setAttribute('data-no-banner', config.noBanner);
|
||||
if (config.bunkers) script.setAttribute('data-bunkers', config.bunkers);
|
||||
if (config.perms) script.setAttribute('data-perms', config.perms);
|
||||
if (config.title) script.setAttribute('data-title', config.title);
|
||||
if (config.description) script.setAttribute('data-description', config.description);
|
||||
if (config.methods && config.methods.length > 0) {
|
||||
script.setAttribute('data-methods', config.methods.join(','));
|
||||
}
|
||||
|
||||
document.head.appendChild(script);
|
||||
scriptLoaded = true;
|
||||
|
||||
// Wait for script to load, then set up event listeners
|
||||
script.onload = () => {
|
||||
setupEventListeners();
|
||||
};
|
||||
}
|
||||
|
||||
// Get stored configuration from localStorage
|
||||
function getStoredConfig() {
|
||||
try {
|
||||
return JSON.parse(localStorage.getItem('nostrLoginConfig') || '{}');
|
||||
} catch {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
|
||||
// Store configuration in localStorage
|
||||
function storeConfig(config) {
|
||||
localStorage.setItem('nostrLoginConfig', JSON.stringify(config));
|
||||
}
|
||||
|
||||
// Listen for nostr-login auth events
|
||||
function setupEventListeners() {
|
||||
document.addEventListener('nlAuth', async (e) => {
|
||||
console.log('nlAuth event:', e.detail);
|
||||
if (e.detail.type === 'login' || e.detail.type === 'signup') {
|
||||
await showUserInfo();
|
||||
} else if (e.detail.type === 'logout') {
|
||||
showLoginSection();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Get and display user info
|
||||
async function showUserInfo() {
|
||||
try {
|
||||
const pubkey = await window.nostr.getPublicKey();
|
||||
console.log('Got pubkey:', pubkey);
|
||||
|
||||
// Display pubkey
|
||||
document.getElementById('pubkeyHex').textContent = pubkey;
|
||||
|
||||
// Hide login section, show user section
|
||||
document.getElementById('loginSection').style.display = 'none';
|
||||
document.getElementById('userSection').style.display = 'block';
|
||||
|
||||
} catch (error) {
|
||||
console.error('Failed to get pubkey:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// Show login section
|
||||
function showLoginSection() {
|
||||
document.getElementById('loginSection').style.display = 'block';
|
||||
document.getElementById('userSection').style.display = 'none';
|
||||
document.getElementById('pubkeyHex').textContent = '';
|
||||
}
|
||||
|
||||
// Apply configuration
|
||||
function applyConfig() {
|
||||
// Collect all settings
|
||||
const config = {
|
||||
theme: document.getElementById('themeSelect').value,
|
||||
darkMode: document.getElementById('darkModeCheck').checked,
|
||||
startScreen: document.getElementById('startScreenSelect').value,
|
||||
noBanner: document.getElementById('noBannerCheck').checked,
|
||||
bunkers: document.getElementById('bunkersInput').value,
|
||||
perms: document.getElementById('permsInput').value,
|
||||
title: document.getElementById('titleInput').value,
|
||||
description: document.getElementById('descriptionInput').value,
|
||||
methods: Array.from(document.querySelectorAll('input[type="checkbox"][value]'))
|
||||
.filter(cb => cb.checked)
|
||||
.map(cb => cb.value)
|
||||
};
|
||||
|
||||
// Remove empty values
|
||||
Object.keys(config).forEach(key => {
|
||||
if (config[key] === '' || (Array.isArray(config[key]) && config[key].length === 0)) {
|
||||
delete config[key];
|
||||
}
|
||||
});
|
||||
|
||||
currentConfig = config;
|
||||
storeConfig(config);
|
||||
updateConfigDisplay();
|
||||
|
||||
console.log('Applied config:', config);
|
||||
|
||||
// Reload page to apply new configuration
|
||||
window.location.reload();
|
||||
}
|
||||
|
||||
// Reset configuration
|
||||
function resetConfig() {
|
||||
document.getElementById('themeSelect').value = 'default';
|
||||
document.getElementById('darkModeCheck').checked = false;
|
||||
document.getElementById('startScreenSelect').value = '';
|
||||
document.getElementById('noBannerCheck').checked = false;
|
||||
document.getElementById('bunkersInput').value = '';
|
||||
document.getElementById('permsInput').value = '';
|
||||
document.getElementById('titleInput').value = '';
|
||||
document.getElementById('descriptionInput').value = '';
|
||||
|
||||
// Reset auth methods to all checked
|
||||
document.querySelectorAll('input[type="checkbox"][value]').forEach(cb => cb.checked = true);
|
||||
|
||||
currentConfig = {};
|
||||
localStorage.removeItem('nostrLoginConfig');
|
||||
updateConfigDisplay();
|
||||
}
|
||||
|
||||
// Update config display
|
||||
function updateConfigDisplay() {
|
||||
document.getElementById('configDisplay').textContent = JSON.stringify(currentConfig, null, 2);
|
||||
}
|
||||
|
||||
// Launch with specific screen
|
||||
function launchSpecificScreen() {
|
||||
const startScreen = document.getElementById('startScreenSelect').value || 'welcome';
|
||||
document.dispatchEvent(new CustomEvent('nlLaunch', { detail: startScreen }));
|
||||
}
|
||||
|
||||
// Load configuration from storage and update UI
|
||||
function loadConfigIntoUI() {
|
||||
const config = getStoredConfig();
|
||||
currentConfig = config;
|
||||
|
||||
// Set default to laan theme for testing
|
||||
if (config.theme) document.getElementById('themeSelect').value = config.theme;
|
||||
else document.getElementById('themeSelect').value = 'laan';
|
||||
|
||||
if (config.darkMode !== undefined) document.getElementById('darkModeCheck').checked = config.darkMode;
|
||||
if (config.startScreen) document.getElementById('startScreenSelect').value = config.startScreen;
|
||||
if (config.noBanner !== undefined) document.getElementById('noBannerCheck').checked = config.noBanner;
|
||||
if (config.bunkers) document.getElementById('bunkersInput').value = config.bunkers;
|
||||
if (config.perms) document.getElementById('permsInput').value = config.perms;
|
||||
if (config.title) document.getElementById('titleInput').value = config.title;
|
||||
if (config.description) document.getElementById('descriptionInput').value = config.description;
|
||||
|
||||
// Load auth methods
|
||||
document.querySelectorAll('input[type="checkbox"][value]').forEach(cb => {
|
||||
cb.checked = !config.methods || config.methods.includes(cb.value);
|
||||
});
|
||||
|
||||
updateConfigDisplay();
|
||||
}
|
||||
|
||||
// Handle login button click
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// Load configuration into UI
|
||||
loadConfigIntoUI();
|
||||
|
||||
// Load nostr-login with current config
|
||||
loadNostrLogin();
|
||||
|
||||
document.getElementById('loginBtn').addEventListener('click', () => {
|
||||
// Trigger nostr-login modal
|
||||
document.dispatchEvent(new CustomEvent('nlLaunch', { detail: 'welcome' }));
|
||||
});
|
||||
|
||||
// Handle logout button click
|
||||
document.getElementById('logoutBtn').addEventListener('click', () => {
|
||||
// Trigger logout
|
||||
document.dispatchEvent(new Event('nlLogout'));
|
||||
});
|
||||
|
||||
// Update config display when inputs change
|
||||
document.querySelectorAll('input, select').forEach(input => {
|
||||
input.addEventListener('change', () => {
|
||||
// Auto-apply dark mode for immediate feedback
|
||||
if (input.id === 'darkModeCheck') {
|
||||
document.dispatchEvent(new CustomEvent('nlDarkMode', { detail: input.checked }));
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,135 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Input and Output Fields</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
margin: 20px;
|
||||
}
|
||||
.container {
|
||||
max-width: 400px;
|
||||
margin: auto;
|
||||
}
|
||||
input, button, textarea {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
margin: 10px 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.button-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px; /* Adds space between the buttons */
|
||||
}
|
||||
.button-container button {
|
||||
flex: 1 1 calc(50% - 10px); /* Makes each button take up half the width minus the gap */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
<script src='https://www.unpkg.com/nostr-login@latest/dist/unpkg.js'></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>Try Nostr-Login</h1>
|
||||
<textarea id="inputField" rows="4" placeholder="Paste your json formatted event here"></textarea>
|
||||
<label>Output:</label>
|
||||
<textarea id="outputField" rows="4" placeholder="Output will be shown here" readonly></textarea>
|
||||
<button onclick="fillExampleData()">Fill with example event</button>
|
||||
<button onclick="SignEventFn()">Sign Event</button>
|
||||
<div class="button-container">
|
||||
<button onclick="cryptWithNIP04('encrypt')">Encrypt with NIP-04</button>
|
||||
<button onclick="cryptWithNIP04('decrypt')">Decrypt with NIP-04</button>
|
||||
<button onclick="cryptWithNIP44('encrypt')">Encrypt with NIP-44</button>
|
||||
<button onclick="cryptWithNIP44('decrypt')">Decrypt with NIP-44</button>
|
||||
</div>
|
||||
<button onclick="switchOutputInput()">Switch Output Input</button>
|
||||
</div>
|
||||
|
||||
<form id="testpw" action="/usage.html" method="POST">
|
||||
<input type="text" name="name" value="npub">
|
||||
<input type="password" name="password" value="a;h123UIFBEKSDBF,SA">
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
<script>
|
||||
const form = document.querySelector("#testpw");
|
||||
form.onsubmit = (e) => {
|
||||
e.preventDefault();
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<script>
|
||||
// Example Nostr event as json string
|
||||
var ExampleData = `{ "content": "hello world", "created_at": 1731313613, "id": "", "kind": 1, "pubkey": "568ad8bf00ed530eb44614e4b363271f36f6b645700630470c51f98e7e58fbf0", "tags": [] }`
|
||||
|
||||
// Function to get public key
|
||||
async function getPublicKey() {
|
||||
return await window.nostr.getPublicKey();
|
||||
}
|
||||
|
||||
// Function to encrypt with NIP-04
|
||||
async function cryptWithNIP04(encryptType) {
|
||||
try {
|
||||
var publicKey = await getPublicKey();
|
||||
var data = document.getElementById('inputField').value;
|
||||
var result;
|
||||
if (encryptType === "encrypt") {
|
||||
result = await window.nostr.nip04.encrypt(publicKey, data);
|
||||
} else if (encryptType === "decrypt") {
|
||||
result = await window.nostr.nip04.decrypt(publicKey, data);
|
||||
}
|
||||
document.getElementById('outputField').value = result;
|
||||
} catch (error) {
|
||||
console.error("Error in cryptWithNIP04:", error);
|
||||
}
|
||||
}
|
||||
|
||||
// Function to encrypt with NIP-44
|
||||
async function cryptWithNIP44(encryptType) {
|
||||
try {
|
||||
var publicKey = await getPublicKey();
|
||||
var data = document.getElementById('inputField').value;
|
||||
var result;
|
||||
if (encryptType === "encrypt") {
|
||||
result = await window.nostr.nip44.encrypt(publicKey, data);
|
||||
} else if (encryptType === "decrypt") {
|
||||
result = await window.nostr.nip44.decrypt(publicKey, data);
|
||||
}
|
||||
document.getElementById('outputField').value = result;
|
||||
} catch (error) {
|
||||
console.error("Error in cryptWithNIP44:", error);
|
||||
}
|
||||
}
|
||||
|
||||
// Sign nostr event
|
||||
async function SignEventFn() {
|
||||
try {
|
||||
var input = document.getElementById('inputField').value;
|
||||
// Convert the text from input to json object
|
||||
var json_data = JSON.parse(input);
|
||||
// Sign the event object using the plugin signEvent method
|
||||
var signedEvent = await window.nostr.signEvent(json_data);
|
||||
document.getElementById('outputField').value = JSON.stringify(signedEvent, null, 2);
|
||||
} catch (error) {
|
||||
console.error("Error in SignEventFn:", error);
|
||||
}
|
||||
}
|
||||
|
||||
// Fill example data for easy testing
|
||||
function fillExampleData() {
|
||||
document.getElementById('outputField').value = '';
|
||||
document.getElementById('inputField').value = ExampleData;
|
||||
}
|
||||
|
||||
// Switch input and output fields
|
||||
function switchOutputInput() {
|
||||
var tempOutput = document.getElementById('outputField').value;
|
||||
document.getElementById('inputField').value = tempOutput;
|
||||
document.getElementById('outputField').value = '';
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,5 +0,0 @@
|
||||
{
|
||||
"$schema": "node_modules/lerna/schemas/lerna-schema.json",
|
||||
"version": "1.0.1",
|
||||
"npmClient": "npm"
|
||||
}
|
||||
282
lite/README.md
Normal file
282
lite/README.md
Normal file
@@ -0,0 +1,282 @@
|
||||
# NOSTR_LOGIN_LITE
|
||||
|
||||
A minimal, dependency-light replacement for the current auth/UI stack that preserves all login methods and window.nostr surface.
|
||||
|
||||
## Features
|
||||
|
||||
- ✅ Single file distributable (`nostr-login-lite.bundle.js`)
|
||||
- ✅ All major login methods: Extension, Local key, Read-only
|
||||
- ✅ Compatible window.nostr facade
|
||||
- ✅ NIP-04 and NIP-44 encryption (local)
|
||||
- ✅ Minimal vanilla JavaScript modal
|
||||
- ✅ No bulky frameworks (no Stencil/Tailwind)
|
||||
- ✅ Just ~50KB gzipped (minus nostr-tools)
|
||||
|
||||
## Installation
|
||||
|
||||
```html
|
||||
<!-- 1. Load nostr-tools (local bundle) -->
|
||||
<script src="./lite/nostr.bundle.js"></script>
|
||||
|
||||
<!-- 2. Load NOSTR_LOGIN_LITE -->
|
||||
<script src="./lite/nostr-login-lite.bundle.js"></script>
|
||||
```
|
||||
|
||||
## Quick Start
|
||||
|
||||
```javascript
|
||||
// Initialize with default options
|
||||
await window.NOSTR_LOGIN_LITE.init({
|
||||
theme: 'light',
|
||||
relays: ['wss://relay.damus.io'],
|
||||
methods: {
|
||||
extension: true,
|
||||
local: true,
|
||||
readonly: true
|
||||
}
|
||||
});
|
||||
|
||||
// Launch login modal
|
||||
window.NOSTR_LOGIN_LITE.launch();
|
||||
```
|
||||
|
||||
## API Reference
|
||||
|
||||
### Initialization
|
||||
```javascript
|
||||
// Initialize the library
|
||||
await window.NOSTR_LOGIN_LITE.init(options)
|
||||
|
||||
// Options
|
||||
{
|
||||
theme: 'light' | 'dark',
|
||||
darkMode: boolean,
|
||||
relays: string[], // Default relays for NIP-46
|
||||
methods: {
|
||||
connect: boolean, // NIP-46 providers (coming)
|
||||
extension: boolean, // Browser extensions
|
||||
local: boolean, // Local key generation
|
||||
readonly: boolean, // Read-only mode
|
||||
otp: boolean // OTP/DM (coming)
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### User Interface
|
||||
```javascript
|
||||
// Launch authentication modal
|
||||
window.NOSTR_LOGIN_LITE.launch(startScreen);
|
||||
|
||||
// Available screens
|
||||
'login' // Auth selection
|
||||
'signup' // Account creation
|
||||
'switch' // Account switching
|
||||
|
||||
// Logout current user
|
||||
window.NOSTR_LOGIN_LITE.logout();
|
||||
|
||||
// Set theme
|
||||
window.NOSTR_LOGIN_LITE.setDarkMode(dark: boolean);
|
||||
```
|
||||
|
||||
### Programmatic Auth
|
||||
```javascript
|
||||
// Set authentication manually
|
||||
window.NOSTR_LOGIN_LITE.setAuth({
|
||||
type: 'login' | 'signup' | 'logout',
|
||||
method: 'extension' | 'local' | 'readonly' | 'connect' | 'otp',
|
||||
pubkey: string, // Public key
|
||||
secret: string // Private key (optional)
|
||||
});
|
||||
|
||||
// Cancel ongoing auth flow
|
||||
window.NOSTR_LOGIN_LITE.cancelNeedAuth();
|
||||
```
|
||||
|
||||
### window.nostr Compatibility
|
||||
|
||||
All standard window.nostr methods work transparently:
|
||||
|
||||
```javascript
|
||||
// Get current user's public key
|
||||
const pubkey = await window.nostr.getPublicKey();
|
||||
|
||||
// Sign an event
|
||||
const signed = await window.nostr.signEvent({
|
||||
kind: 1,
|
||||
content: 'Hello Nostr!',
|
||||
tags: [],
|
||||
created_at: Date.now()
|
||||
});
|
||||
|
||||
// NIP-04 encrypt/decrypt
|
||||
const encrypted = await window.nostr.nip04.encrypt(recipientPubkey, 'secret');
|
||||
const decrypted = await window.nostr.nip04.decrypt(senderPubkey, encrypted);
|
||||
|
||||
// NIP-44 encrypt/decrypt (if available in nostr-tools)
|
||||
const encrypted = await window.nostr.nip44.encrypt(recipientPubkey, 'secret');
|
||||
const decrypted = await window.nostr.nip44.decrypt(senderPubkey, encrypted);
|
||||
```
|
||||
|
||||
## Events
|
||||
|
||||
Listen for authentication events:
|
||||
|
||||
```javascript
|
||||
// Auth state changes
|
||||
window.addEventListener('nlAuth', (event) => {
|
||||
console.log(event.detail);
|
||||
// { type: 'login', pubkey: '...', method: 'local' }
|
||||
});
|
||||
|
||||
// Dark mode changes
|
||||
window.addEventListener('nlDarkMode', (event) => {
|
||||
document.body.classList.toggle('dark', event.detail.dark);
|
||||
});
|
||||
|
||||
// Auth URLs (for NIP-46)
|
||||
window.addEventListener('nlAuthUrl', (event) => {
|
||||
console.log('Auth URL:', event.detail.url);
|
||||
});
|
||||
|
||||
// Logout events
|
||||
window.addEventListener('nlLogout', () => {
|
||||
console.log('User logged out');
|
||||
});
|
||||
```
|
||||
|
||||
## Architecture
|
||||
|
||||
```
|
||||
NOSTR_LOGIN_LITE/
|
||||
├── nostr-login-lite.bundle.js # Single distributable
|
||||
├── core/
|
||||
│ ├── nip46-client.js # NIP-46 transport over websockets
|
||||
│ └── {other components} # Future components
|
||||
├── ui/
|
||||
│ └── modal.js # Vanilla JS modal
|
||||
└── README.md # This file
|
||||
```
|
||||
|
||||
### Key Components
|
||||
|
||||
- **Modal**: Lightweight modal using vanilla CSS
|
||||
- **Store**: localStorage helpers for accounts/relays
|
||||
- **LocalSigner**: Wraps nostr-tools for local signing
|
||||
- **ExtensionBridge**: Detects and bridges browser extensions
|
||||
- **NIP46Client**: Handles remote signing (NIP-46)
|
||||
- **Relays**: Default relay management
|
||||
|
||||
## Browser Support
|
||||
|
||||
- Modern browsers with ES2018+ support
|
||||
- WebWorkers (for NIP-46)
|
||||
- localStorage (for account storage)
|
||||
|
||||
## Dependencies
|
||||
|
||||
This project uses a local copy of nostr-tools instead of loading from CDN:
|
||||
|
||||
- **nostr.bundle.js**: Local nostr-tools bundle (~200KB)
|
||||
- **nostr-login-lite.bundle.js**: This library (~50KB gzipped)
|
||||
|
||||
## Size Comparison
|
||||
|
||||
```
|
||||
nostr-tools ~200KB (served locally)
|
||||
NOSTR_LOGIN_LITE ~50KB (gzipped)
|
||||
Total: ~250KB
|
||||
|
||||
vs.
|
||||
|
||||
Full nostr-login: ~2.5MB+ framework dependencies
|
||||
```
|
||||
|
||||
## Future Roadmap ⚠️
|
||||
|
||||
The following features are planned but not yet implemented:
|
||||
|
||||
- **NIP-46 Connect**: External signer integration
|
||||
- **OTP/DM**: Server-side OTP delivery
|
||||
- **Connect Wallet**: Wallet integration
|
||||
- **Advanced UI**: Multi-screen flows
|
||||
- **NIP-05 Profiles**: User discovery
|
||||
- **Backup/Restore**: Key backup functionality
|
||||
|
||||
## Development
|
||||
|
||||
⚠️ **CRITICAL: DO NOT EDIT `nostr-lite.js` DIRECTLY!**
|
||||
|
||||
The `nostr-lite.js` file is **auto-generated** by the build script. All changes must be made in the build script itself.
|
||||
|
||||
### Build Process
|
||||
|
||||
```bash
|
||||
# The main library source code is in:
|
||||
lite/build.js # ← Edit this file for library changes
|
||||
|
||||
# To make changes:
|
||||
1. Edit lite/build.js # Contains all source code
|
||||
2. cd lite && node build.js # Regenerates nostr-lite.js
|
||||
3. Test your changes in examples/
|
||||
|
||||
# NEVER edit these files directly (they get overwritten):
|
||||
lite/nostr-lite.js # ← Auto-generated, don't edit!
|
||||
|
||||
# Separate components that can be edited:
|
||||
lite/ui/modal.js # Modal UI component
|
||||
themes/default/theme.css # Default theme
|
||||
themes/dark/theme.css # Dark theme
|
||||
```
|
||||
|
||||
### Development Workflow
|
||||
|
||||
```bash
|
||||
# 1. Make changes to source
|
||||
nano lite/build.js
|
||||
|
||||
# 2. Rebuild bundle
|
||||
cd lite && node build.js
|
||||
|
||||
# 3. Start dev server (from project root)
|
||||
python3 -m http.server 8000
|
||||
|
||||
# 4. Test changes
|
||||
open http://localhost:8000/examples/modal.html
|
||||
```
|
||||
|
||||
### Local Bundle Setup
|
||||
|
||||
The project uses a local copy of nostr-tools:
|
||||
- `lite/nostr.bundle.js` - Local nostr-tools bundle (serves from this location)
|
||||
- `nostr-tools/` - Reference directory (excluded from git, not used in runtime)
|
||||
- Examples load from: `../lite/nostr.bundle.js`
|
||||
|
||||
## Examples
|
||||
|
||||
See `examples/` directory:
|
||||
- `simple-demo.html` - Basic functionality demo
|
||||
- `full-test.html` - Comprehensive test suite
|
||||
- `test-lite.html` - Minimal functionality test
|
||||
|
||||
## Migration from Full nostr-login
|
||||
|
||||
The lite version provides the same API surface, but is much smaller:
|
||||
|
||||
```javascript
|
||||
// Before (full library)
|
||||
import { init, launch, logout } from 'nostr-login';
|
||||
|
||||
// After (lite version)
|
||||
await window.NOSTR_LOGIN_LITE.init();
|
||||
window.NOSTR_LOGIN_LITE.launch();
|
||||
window.NOSTR_LOGIN_LITE.logout();
|
||||
```
|
||||
|
||||
## License
|
||||
|
||||
Same license as the original nostr-login project.
|
||||
|
||||
## Contributing
|
||||
|
||||
This is meant to be lightweight and focused. Contributions should maintain the minimal footprint while extending functionality.
|
||||
2145
lite/build.js
Normal file
2145
lite/build.js
Normal file
File diff suppressed because it is too large
Load Diff
4077
lite/nostr-lite.js
Normal file
4077
lite/nostr-lite.js
Normal file
File diff suppressed because it is too large
Load Diff
11534
lite/nostr.bundle.js
Normal file
11534
lite/nostr.bundle.js
Normal file
File diff suppressed because it is too large
Load Diff
1831
lite/ui/modal.js
Normal file
1831
lite/ui/modal.js
Normal file
File diff suppressed because it is too large
Load Diff
1
nostr-tools
Submodule
1
nostr-tools
Submodule
Submodule nostr-tools added at 23aebbd341
10007
package-lock.json
generated
10007
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -10,7 +10,8 @@
|
||||
"publish": "lerna publish --no-private"
|
||||
},
|
||||
"dependencies": {
|
||||
"@nostr-dev-kit/ndk": "^2.4.0"
|
||||
"@nostr-dev-kit/ndk": "^2.4.0",
|
||||
"nostr-tools": "^2.16.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"lerna": "^8.0.2"
|
||||
|
||||
@@ -1,13 +0,0 @@
|
||||
{
|
||||
"arrowParens": "avoid",
|
||||
"bracketSpacing": true,
|
||||
"jsxBracketSameLine": false,
|
||||
"jsxSingleQuote": false,
|
||||
"quoteProps": "consistent",
|
||||
"printWidth": 180,
|
||||
"semi": true,
|
||||
"singleQuote": true,
|
||||
"tabWidth": 2,
|
||||
"trailingComma": "all",
|
||||
"useTabs": false
|
||||
}
|
||||
@@ -1,167 +0,0 @@
|
||||
Nostr-Login
|
||||
===========
|
||||
|
||||
This library is a powerful `window.nostr` provider.
|
||||
|
||||
```
|
||||
<script src='https://www.unpkg.com/nostr-login@latest/dist/unpkg.js'></script>
|
||||
```
|
||||
|
||||
Just add the above script to your HTML and
|
||||
get a nice UI for users to login with Nostr Connect (nip46), with an extension, read-only login,
|
||||
account switching, OAuth-like sign up, etc. Your app just talks to the `window.nostr`, the rest is handled by `nostr-login`.
|
||||
|
||||
See it in action on [nostr.band](https://nostr.band).
|
||||
|
||||
## Options
|
||||
|
||||
You can set these attributes to the `script` tag to customize the behavior:
|
||||
- `data-dark-mode` - `true`/`false`, default will use the browser's color theme
|
||||
- `data-bunkers` - the comma-separated list of domain names of Nostr Connect (nip46) providers for sign up, i.e. `nsec.app,highlighter.com`
|
||||
- `data-perms` - the comma-separated list of [permissions](https://github.com/nostr-protocol/nips/blob/master/46.md#requested-permissions) requested by the app over Nostr Connect, i.e. `sign_event:1,nip04_encrypt`
|
||||
- `data-theme` - color themes, one of `default`, `ocean`, `lemonade`, `purple`
|
||||
- `data-no-banner` - if `true`, do not show the `nostr-login` banner, will need to launch the modals using event dispatch, see below
|
||||
- `data-methods` - comma-separated list of allowed auth methods, method names: `connect`, `extension`, `readOnly`, `local`, all allowed by default.
|
||||
- `data-otp-request-url` - URL for requesting OTP code
|
||||
- `data-otp-reply-url` - URL for replying with OTP code
|
||||
- `data-title` - title for the welcome screen
|
||||
- `data-description` - description for the welcome screen
|
||||
- `data-start-screen` - screen shown by default (banner click, window.nostr.* call), options: `welcome`, `welcome-login`, `welcome-signup`, `signup`, `local-signup`, `login`, `otp`, `connect`, `login-bunker-url`, `login-read-only`, `connection-string`, `switch-account`, `import`
|
||||
- `data-signup-relays` - comma-separated list of relays where nip65 event will be published on local signup
|
||||
- `data-outbox-relays` - comma-separated list of relays that will be added to nip65 event on local signup
|
||||
- `data-signup-nstart` - "true" to use start.njump.me instead of local signup
|
||||
- `data-follow-npubs` - comma-separated list of npubs to follow if njump.me signup is used
|
||||
|
||||
Example:
|
||||
```
|
||||
<script src='https://www.unpkg.com/nostr-login@latest/dist/unpkg.js' data-perms="sign_event:1,sign_event:0" data-theme="ocean"></script>
|
||||
```
|
||||
|
||||
## Updating the UI
|
||||
|
||||
Whenever user performs an auth-related action using `nostr-login`, a `nlAuth` event will be dispatched on the `document`, which you can listen
|
||||
to in order to update your UI (show user profile, etc):
|
||||
|
||||
```
|
||||
document.addEventListener('nlAuth', (e) => {
|
||||
// type is login, signup or logout
|
||||
if (e.detail.type === 'login' || e.detail.type === 'signup') {
|
||||
onLogin(); // get pubkey with window.nostr and show user profile
|
||||
} else {
|
||||
onLogout() // clear local user data, hide profile info
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## Launching, logout, etc
|
||||
|
||||
The `nostr-login` auth modals will be automatically launched whenever you
|
||||
make a call to `window.nostr` if user isn't authed yet. However, you can also launch the auth flow by dispatching a custom `nlLaunch` event:
|
||||
|
||||
```
|
||||
document.dispatchEvent(new CustomEvent('nlLaunch', { detail: 'welcome' }));
|
||||
```
|
||||
|
||||
The `detail` event payload can be empty, or can be one of `welcome`, `signup`, `login`, `login-bunker-url`, `login-read-only`, `switch-account`.
|
||||
|
||||
To trigger logout in the `nostr-login`, you can dispatch a `nlLogout` event:
|
||||
|
||||
```
|
||||
document.dispatchEvent(new Event("nlLogout"));
|
||||
```
|
||||
|
||||
To change dark mode in the `nostr-login`, you can dispatch a `nlDarkMode` event, with detail as `darkMode` boolean:
|
||||
|
||||
```
|
||||
document.dispatchEvent(new CustomEvent("nlDarkMode", { detail: true }));
|
||||
```
|
||||
|
||||
## Use as a package
|
||||
|
||||
Install `nostr-login` package with `npm` and then:
|
||||
|
||||
```
|
||||
import { init as initNostrLogin } from "nostr-login"
|
||||
|
||||
// make sure this is called before any
|
||||
// window.nostr calls are made
|
||||
initNostrLogin({/*options*/})
|
||||
|
||||
```
|
||||
|
||||
Now the `window.nostr` will be initialized and on your first call
|
||||
to it the auth flow will be launched if user isn't authed yet.
|
||||
|
||||
You can also launch the auth flow yourself:
|
||||
|
||||
```
|
||||
import { launch as launchNostrLoginDialog } from "nostr-login"
|
||||
|
||||
// make sure init() was called
|
||||
|
||||
// on your signup button click
|
||||
function onSignupClick() {
|
||||
// launch signup screen
|
||||
launchNostrLoginDialog({
|
||||
startScreen: 'signup'
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
### Next.js Fix for Server Side Rendering (SSR)
|
||||
|
||||
`nostr-login` calls `document` which is unavailable for server-side rendering. You will have build errors. To fix this, you can import `nostr-login` on the client side in your component with a `useEffect` like this:
|
||||
|
||||
```javascript
|
||||
useEffect(() => {
|
||||
import('nostr-login')
|
||||
.then(async ({ init }) => {
|
||||
init({
|
||||
// options
|
||||
})
|
||||
})
|
||||
.catch((error) => console.log('Failed to load nostr-login', error));
|
||||
}, []);
|
||||
```
|
||||
Note: even if your component has `"use client"` in the first line, this fix still may be necessary.
|
||||
|
||||
---
|
||||
|
||||
API:
|
||||
- `init(opts)` - set mapping of window.nostr to nostr-login
|
||||
- `launch(startScreen)` - launch nostr-login UI
|
||||
- `logout()` - drop the current nip46 connection
|
||||
|
||||
Options:
|
||||
- `theme` - same as `data-theme` above
|
||||
- `startScreen` - same as `startScreen` for `nlLaunch` event above
|
||||
- `bunkers` - same as `data-bunkers` above
|
||||
- `devOverrideBunkerOrigin` - for testing, overrides the bunker origin for local setup
|
||||
- `onAuth: (npub: string, options: NostrLoginAuthOptions)` - a callback to provide instead of listening to `nlAuth` event
|
||||
- `perms` - same as `data-perms` above
|
||||
- `darkMode` - same as `data-dark-mode` above
|
||||
- `noBanner` - same as `data-no-banner` above
|
||||
- `isSignInWithExtension` - `true` to bring the *Sign in with exception* button into main list of options, `false` to hide to the *Advanced*, default will behave as `true` if extension is detected.
|
||||
|
||||
## OTP login
|
||||
|
||||
If you supply both `data-otp-request-url` and `data-otp-reply-url` then "Login with DM" button will appear on the welcome screen.
|
||||
|
||||
When user enters their nip05 or npub, a GET request is made to `<data-otp-request-url>[?&]pubkey=<user-pubkey>`. Server should send
|
||||
a DM with one-time code to that pubkey and should return 200.
|
||||
|
||||
After user enters the code, a GET request is made to `<data-otp-reply-url>[?&]pubkey=<user-pubkey>&code=<code>`. Server should check that code matches the pubkey and hasn't expired, and should return 200 status and an optional payload. Nostr-login will deliver the payload as `otpData` field in `nlAuth` event, and will save the payload in localstore and will deliver it again as `nlAuth` on page reload.
|
||||
|
||||
The reply payload may be used to supply the session token. If token is sent by the server as a cookie then payload might be empty, otherwise the payload should be used by the app to extract the token and use it in future API calls to the server.
|
||||
|
||||
## Examples
|
||||
|
||||
* [Basic HTML Example](./examples/usage.html)
|
||||
|
||||
## TODO
|
||||
|
||||
- fetch bunker list using NIP-89
|
||||
- Amber support
|
||||
- allow use without the UIs
|
||||
- add timeout handling
|
||||
- more at [issues](https://github.com/nostrband/nostr-login/issues)
|
||||
@@ -1,30 +0,0 @@
|
||||
<!doctype html>
|
||||
<html dir="ltr" lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
|
||||
<title>Modal Auth Demo</title>
|
||||
|
||||
<script type="module">
|
||||
// import { init } from './dist/index.esm.js';
|
||||
//
|
||||
// const test = async () => {
|
||||
// const bunkerUrl = await launch({
|
||||
// theme: 'purple',
|
||||
// startScreen: 'signup',
|
||||
// });
|
||||
//
|
||||
// console.log(bunkerUrl);
|
||||
// };
|
||||
</script>
|
||||
|
||||
<script src="./dist/unpkg.js" data-start-screen="local-signup"
|
||||
data-signup-relays="wss://relay.nostr.band/,wss://relay.primal.net"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!--<nl-button title-btn="Sign in" start-screen="login" nl-theme="lemonade"></nl-button>-->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,28 +0,0 @@
|
||||
{
|
||||
"name": "nostr-login",
|
||||
"version": "1.7.11",
|
||||
"description": "",
|
||||
"main": "./dist/index.esm.js",
|
||||
"types": "./dist/index.d.ts",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"build": "rollup -c",
|
||||
"format": "npx prettier --write src"
|
||||
},
|
||||
"author": "a-fralou",
|
||||
"dependencies": {
|
||||
"@nostr-dev-kit/ndk": "^2.3.1",
|
||||
"nostr-tools": "^1.17.0",
|
||||
"tseep": "^1.2.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@rollup/plugin-commonjs": "^25.0.7",
|
||||
"@rollup/plugin-node-resolve": "^15.2.3",
|
||||
"@rollup/plugin-terser": "^0.4.4",
|
||||
"nostr-login-components": "^1.0.3",
|
||||
"prettier": "^3.2.2",
|
||||
"rollup": "^4.9.6",
|
||||
"rollup-plugin-typescript2": "^0.36.0"
|
||||
},
|
||||
"license": "MIT"
|
||||
}
|
||||
@@ -1,55 +0,0 @@
|
||||
import commonjs from '@rollup/plugin-commonjs';
|
||||
import resolve from '@rollup/plugin-node-resolve';
|
||||
import typescript from 'rollup-plugin-typescript2';
|
||||
import terser from '@rollup/plugin-terser';
|
||||
|
||||
export default [
|
||||
{
|
||||
input: 'src/index.ts',
|
||||
output: [
|
||||
{
|
||||
file: 'dist/index.esm.js',
|
||||
format: 'esm',
|
||||
sourcemap: true,
|
||||
},
|
||||
],
|
||||
plugins: [
|
||||
typescript({
|
||||
tsconfig: 'tsconfig.json',
|
||||
}),
|
||||
resolve({
|
||||
browser: true
|
||||
}),
|
||||
commonjs(),
|
||||
terser({
|
||||
compress: {
|
||||
toplevel: true,
|
||||
}
|
||||
})
|
||||
],
|
||||
},
|
||||
{
|
||||
input: 'src/iife-module.ts',
|
||||
output: [
|
||||
{
|
||||
file: 'dist/unpkg.js',
|
||||
format: 'iife',
|
||||
}
|
||||
],
|
||||
plugins: [
|
||||
typescript({
|
||||
tsconfig: 'tsconfig.json',
|
||||
}),
|
||||
resolve({
|
||||
browser: true
|
||||
}),
|
||||
commonjs(),
|
||||
terser({
|
||||
compress: {
|
||||
toplevel: true,
|
||||
},
|
||||
})
|
||||
],
|
||||
}
|
||||
];
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
export const CALL_TIMEOUT = 5000;
|
||||
@@ -1,81 +0,0 @@
|
||||
import { init } from './index';
|
||||
import { NostrLoginOptions, StartScreens } from './types';
|
||||
|
||||
// wrap to hide local vars
|
||||
(() => {
|
||||
// currentScript only visible in global scope code, not event handlers
|
||||
const cs = document.currentScript;
|
||||
const start = async () => {
|
||||
const options: NostrLoginOptions = {};
|
||||
|
||||
if (cs) {
|
||||
const dm = cs.getAttribute('data-dark-mode');
|
||||
if (dm) options.darkMode = dm === 'true';
|
||||
|
||||
const bunkers = cs.getAttribute('data-bunkers');
|
||||
if (bunkers) options.bunkers = bunkers;
|
||||
|
||||
const startScreen = cs.getAttribute('data-start-screen');
|
||||
if (startScreen) options.startScreen = startScreen as StartScreens;
|
||||
|
||||
const perms = cs.getAttribute('data-perms');
|
||||
if (perms) options.perms = perms;
|
||||
|
||||
const theme = cs.getAttribute('data-theme');
|
||||
if (theme) options.theme = theme;
|
||||
|
||||
const noBanner = cs.getAttribute('data-no-banner');
|
||||
if (noBanner) options.noBanner = noBanner === 'true';
|
||||
|
||||
const localSignup = cs.getAttribute('data-local-signup');
|
||||
if (localSignup) options.localSignup = localSignup === 'true';
|
||||
|
||||
const signupNjump = cs.getAttribute('data-signup-nstart') || cs.getAttribute('data-signup-njump');
|
||||
if (signupNjump) options.signupNstart = signupNjump === 'true';
|
||||
|
||||
const followNpubs = cs.getAttribute('data-follow-npubs');
|
||||
if (followNpubs) options.followNpubs = followNpubs;
|
||||
|
||||
const otpRequestUrl = cs.getAttribute('data-otp-request-url');
|
||||
if (otpRequestUrl) options.otpRequestUrl = otpRequestUrl;
|
||||
|
||||
const otpReplyUrl = cs.getAttribute('data-otp-reply-url');
|
||||
if (otpReplyUrl) options.otpReplyUrl = otpReplyUrl;
|
||||
|
||||
if (!!otpRequestUrl !== !!otpReplyUrl) console.warn('nostr-login: need request and reply urls for OTP auth');
|
||||
|
||||
const methods = cs.getAttribute('data-methods');
|
||||
if (methods) {
|
||||
// @ts-ignore
|
||||
options.methods = methods
|
||||
.trim()
|
||||
.split(',')
|
||||
.filter(m => !!m);
|
||||
}
|
||||
|
||||
const title = cs.getAttribute('data-title');
|
||||
if (title) options.title = title;
|
||||
|
||||
const description = cs.getAttribute('data-description');
|
||||
if (description) options.description = description;
|
||||
|
||||
const signupRelays = cs.getAttribute('data-signup-relays');
|
||||
if (signupRelays) options.signupRelays = signupRelays;
|
||||
|
||||
const outboxRelays = cs.getAttribute('data-outbox-relays');
|
||||
if (outboxRelays) options.outboxRelays = outboxRelays.split(',');
|
||||
|
||||
const dev = cs.getAttribute('data-dev') === 'true';
|
||||
if (dev) options.dev = dev;
|
||||
|
||||
const custom = cs.getAttribute('data-custom-nostr-connect') === 'true';
|
||||
if (custom) options.customNostrConnect = custom;
|
||||
|
||||
console.log('nostr-login options', options);
|
||||
}
|
||||
|
||||
init(options);
|
||||
};
|
||||
if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', start);
|
||||
else start();
|
||||
})();
|
||||
@@ -1,347 +0,0 @@
|
||||
import 'nostr-login-components';
|
||||
import { AuthNostrService, NostrExtensionService, Popup, NostrParams, Nostr, ProcessManager, BannerManager, ModalManager } from './modules';
|
||||
import { NostrLoginAuthOptions, NostrLoginOptions, StartScreens } from './types';
|
||||
import { localStorageGetAccounts, localStorageGetCurrent, localStorageGetRecents, localStorageSetItem } from './utils';
|
||||
import { Info } from 'nostr-login-components/dist/types/types';
|
||||
import { NostrObjectParams } from './modules/Nostr';
|
||||
|
||||
export class NostrLoginInitializer {
|
||||
public extensionService: NostrExtensionService;
|
||||
public params: NostrParams;
|
||||
public authNostrService: AuthNostrService;
|
||||
public nostr: Nostr;
|
||||
public processManager: ProcessManager;
|
||||
public popupManager: Popup;
|
||||
public bannerManager: BannerManager;
|
||||
public modalManager: ModalManager;
|
||||
|
||||
private customLaunchCallback?: () => void;
|
||||
|
||||
constructor() {
|
||||
this.params = new NostrParams();
|
||||
this.processManager = new ProcessManager();
|
||||
this.popupManager = new Popup();
|
||||
this.bannerManager = new BannerManager(this.params);
|
||||
this.authNostrService = new AuthNostrService(this.params);
|
||||
this.extensionService = new NostrExtensionService(this.params);
|
||||
this.modalManager = new ModalManager(this.params, this.authNostrService, this.extensionService);
|
||||
|
||||
const nostrApi: NostrObjectParams = {
|
||||
waitReady: async () => {
|
||||
await this.authNostrService.waitReady();
|
||||
await this.modalManager.waitReady();
|
||||
},
|
||||
getUserInfo: () => this.params.userInfo,
|
||||
getSigner: () => {
|
||||
if (this.params.userInfo!.authMethod === 'readOnly') throw new Error('Read only');
|
||||
return this.params.userInfo!.authMethod === 'extension' ? this.extensionService.getExtension() : this.authNostrService;
|
||||
},
|
||||
launch: () => {
|
||||
return this.launch();
|
||||
},
|
||||
wait: cb => this.processManager.wait(cb),
|
||||
};
|
||||
|
||||
this.nostr = new Nostr(nostrApi);
|
||||
|
||||
this.processManager.on('onCallTimeout', () => {
|
||||
this.bannerManager.onCallTimeout();
|
||||
});
|
||||
|
||||
this.processManager.on('onCallEnd', () => {
|
||||
this.bannerManager.onCallEnd();
|
||||
this.modalManager.onCallEnd();
|
||||
});
|
||||
|
||||
this.processManager.on('onCallStart', () => {
|
||||
this.bannerManager.onCallStart();
|
||||
});
|
||||
|
||||
this.authNostrService.on('onIframeUrl', url => {
|
||||
this.modalManager.onIframeUrl(url);
|
||||
});
|
||||
|
||||
this.authNostrService.on('iframeRestart', ({ iframeUrl }) => {
|
||||
this.processManager.onIframeUrl();
|
||||
this.bannerManager.onIframeRestart(iframeUrl);
|
||||
});
|
||||
|
||||
this.authNostrService.on('onAuthUrl', ({ url, iframeUrl, eventToAddAccount }) => {
|
||||
this.processManager.onAuthUrl();
|
||||
|
||||
if (eventToAddAccount) {
|
||||
this.modalManager.onAuthUrl(url);
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.params.userInfo) {
|
||||
// show the 'Please confirm' banner
|
||||
this.bannerManager.onAuthUrl(url, iframeUrl);
|
||||
} else {
|
||||
// if it fails we will either return 'failed'
|
||||
// to the window.nostr caller, or show proper error
|
||||
// in our modal
|
||||
this.modalManager.onAuthUrl(url);
|
||||
}
|
||||
});
|
||||
|
||||
this.authNostrService.on('updateAccounts', () => {
|
||||
this.updateAccounts();
|
||||
});
|
||||
|
||||
this.authNostrService.on('onUserInfo', info => {
|
||||
this.bannerManager.onUserInfo(info);
|
||||
});
|
||||
|
||||
this.modalManager.on('onAuthUrlClick', url => {
|
||||
this.openPopup(url);
|
||||
});
|
||||
|
||||
this.bannerManager.on('onIframeAuthUrlClick', url => {
|
||||
this.modalManager.showIframeUrl(url);
|
||||
});
|
||||
|
||||
this.modalManager.on('onSwitchAccount', async (info: Info) => {
|
||||
this.switchAccount(info);
|
||||
});
|
||||
|
||||
this.modalManager.on('onLogoutBanner', async (info: Info) => {
|
||||
logout();
|
||||
});
|
||||
|
||||
this.bannerManager.on('onConfirmLogout', async () => {
|
||||
// @ts-ignore
|
||||
this.launch('confirm-logout');
|
||||
});
|
||||
|
||||
this.modalManager.on('updateAccounts', () => {
|
||||
this.updateAccounts();
|
||||
});
|
||||
|
||||
this.bannerManager.on('logout', () => {
|
||||
logout();
|
||||
});
|
||||
|
||||
this.bannerManager.on('onAuthUrlClick', url => {
|
||||
this.openPopup(url);
|
||||
});
|
||||
|
||||
this.bannerManager.on('onSwitchAccount', async (info: Info) => {
|
||||
this.switchAccount(info);
|
||||
});
|
||||
|
||||
this.bannerManager.on('import', () => {
|
||||
this.launch('import');
|
||||
});
|
||||
|
||||
this.extensionService.on('extensionLogin', (pubkey: string) => {
|
||||
this.authNostrService.setExtension(pubkey);
|
||||
});
|
||||
|
||||
this.extensionService.on('extensionLogout', () => {
|
||||
logout();
|
||||
});
|
||||
|
||||
this.bannerManager.on('launch', (startScreen?: StartScreens) => {
|
||||
this.launch(startScreen);
|
||||
});
|
||||
}
|
||||
|
||||
private openPopup(url: string) {
|
||||
this.popupManager.openPopup(url);
|
||||
}
|
||||
|
||||
private async switchAccount(info: Info, signup = false) {
|
||||
console.log('nostr login switch to info', info);
|
||||
|
||||
// make sure extension is unlinked
|
||||
this.extensionService.unsetExtension(this.nostr);
|
||||
|
||||
if (info.authMethod === 'readOnly') {
|
||||
this.authNostrService.setReadOnly(info.pubkey);
|
||||
} else if (info.authMethod === 'otp') {
|
||||
this.authNostrService.setOTP(info.pubkey, info.otpData || '');
|
||||
} else if (info.authMethod === 'local' && info.sk) {
|
||||
this.authNostrService.setLocal(info, signup);
|
||||
} else if (info.authMethod === 'extension') {
|
||||
// trySetExtensionForPubkey will check if
|
||||
// we still have the extension and it's the same pubkey
|
||||
await this.extensionService.trySetExtensionForPubkey(info.pubkey);
|
||||
} else if (info.authMethod === 'connect' && info.sk && info.relays && info.relays[0]) {
|
||||
this.authNostrService.setConnect(info);
|
||||
} else {
|
||||
throw new Error('Bad auth info');
|
||||
}
|
||||
}
|
||||
|
||||
private updateAccounts() {
|
||||
const accounts = localStorageGetAccounts();
|
||||
const recents = localStorageGetRecents();
|
||||
this.bannerManager.onUpdateAccounts(accounts);
|
||||
this.modalManager.onUpdateAccounts(accounts, recents);
|
||||
}
|
||||
|
||||
public async launchCustomNostrConnect() {
|
||||
try {
|
||||
if (this.authNostrService.isAuthing()) this.authNostrService.cancelNostrConnect();
|
||||
|
||||
const customLaunchPromise = new Promise<void>(ok => (this.customLaunchCallback = ok));
|
||||
await this.authNostrService.startAuth();
|
||||
await this.authNostrService.sendNeedAuth();
|
||||
|
||||
try {
|
||||
await this.authNostrService.nostrConnect();
|
||||
await this.authNostrService.endAuth();
|
||||
} catch (e) {
|
||||
// if client manually launches the UI we'll
|
||||
// have cancelled error from the nostrConnect call,
|
||||
// and that's when we should block on the customLaunchPromise
|
||||
if (e === 'cancelled') await customLaunchPromise;
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('launchCustomNostrConnect', e);
|
||||
}
|
||||
}
|
||||
|
||||
private fulfillCustomLaunchPromise() {
|
||||
if (this.customLaunchCallback) {
|
||||
const cb = this.customLaunchCallback;
|
||||
this.customLaunchCallback = undefined;
|
||||
cb();
|
||||
}
|
||||
}
|
||||
|
||||
public launch = async (startScreen?: StartScreens | 'default') => {
|
||||
if (!startScreen) {
|
||||
if (this.params.optionsModal.customNostrConnect) {
|
||||
return this.launchCustomNostrConnect();
|
||||
}
|
||||
}
|
||||
|
||||
const recent = localStorageGetRecents();
|
||||
const accounts = localStorageGetAccounts();
|
||||
|
||||
const options = { ...this.params.optionsModal };
|
||||
if (startScreen && startScreen !== 'default') options.startScreen = startScreen;
|
||||
else if (Boolean(recent?.length) || Boolean(accounts?.length)) {
|
||||
options.startScreen = 'switch-account';
|
||||
}
|
||||
|
||||
// if we're being manually called in the middle of customNostrConnect
|
||||
// flow then we'll reset the current auth session and launch
|
||||
// our manual flow and then release the customNostrConnect session
|
||||
// as if it finished properly
|
||||
if (this.customLaunchCallback) this.authNostrService.cancelNostrConnect();
|
||||
try {
|
||||
await this.modalManager.launch(options);
|
||||
|
||||
// if custom launch was interrupted by manual
|
||||
// launch then we unlock the custom launch to make
|
||||
// it proceed
|
||||
this.fulfillCustomLaunchPromise();
|
||||
} catch (e) {
|
||||
// don't throw if cancelled
|
||||
console.log('nostr-login failed', e);
|
||||
}
|
||||
};
|
||||
|
||||
public init = async (opt: NostrLoginOptions) => {
|
||||
// watch for extension trying to overwrite our window.nostr
|
||||
this.extensionService.startCheckingExtension(this.nostr);
|
||||
|
||||
// set ourselves as nostr
|
||||
|
||||
// @ts-ignore
|
||||
window.nostr = this.nostr;
|
||||
|
||||
// connect launching of our modals to nl-button elements
|
||||
this.modalManager.connectModals(opt);
|
||||
|
||||
// launch
|
||||
this.bannerManager.launchAuthBanner(opt);
|
||||
|
||||
// store options
|
||||
if (opt) {
|
||||
this.params.optionsModal = { ...opt };
|
||||
}
|
||||
|
||||
try {
|
||||
// read conf from localstore
|
||||
const info = localStorageGetCurrent();
|
||||
|
||||
// have current session?
|
||||
if (info) {
|
||||
// wtf?
|
||||
if (!info.pubkey) throw new Error('Bad stored info');
|
||||
|
||||
// switch to it
|
||||
await this.switchAccount(info);
|
||||
}
|
||||
} catch (e) {
|
||||
console.log('nostr login init error', e);
|
||||
|
||||
await logout();
|
||||
}
|
||||
|
||||
// ensure current state
|
||||
this.updateAccounts();
|
||||
};
|
||||
|
||||
public logout = async () => {
|
||||
// replace back
|
||||
this.extensionService.unsetExtension(this.nostr);
|
||||
|
||||
await this.authNostrService.logout();
|
||||
};
|
||||
|
||||
public setDarkMode = (dark: boolean) => {
|
||||
localStorageSetItem('nl-dark-mode', `${dark}`);
|
||||
this.bannerManager.onDarkMode(dark);
|
||||
this.modalManager.onDarkMode(dark);
|
||||
};
|
||||
|
||||
public setAuth = async (o: NostrLoginAuthOptions) => {
|
||||
if (!o.type) throw new Error('Invalid auth event');
|
||||
if (o.type !== 'login' && o.type !== 'logout' && o.type !== 'signup') throw new Error('Invalid auth event');
|
||||
if (o.method && o.method !== 'connect' && o.method !== 'extension' && o.method !== 'local' && o.method !== 'otp' && o.method !== 'readOnly')
|
||||
throw new Error('Invalid auth event');
|
||||
|
||||
if (o.type === 'logout') return this.logout();
|
||||
|
||||
if (!o.method || !o.pubkey) throw new Error('Invalid pubkey');
|
||||
|
||||
const info: Info = {
|
||||
authMethod: o.method,
|
||||
pubkey: o.pubkey,
|
||||
relays: o.relays,
|
||||
sk: o.localNsec,
|
||||
otpData: o.otpData,
|
||||
name: o.name,
|
||||
};
|
||||
await this.switchAccount(info, o.type === 'signup');
|
||||
};
|
||||
|
||||
public cancelNeedAuth = () => {
|
||||
console.log("cancelNeedAuth");
|
||||
this.fulfillCustomLaunchPromise();
|
||||
this.authNostrService.cancelNostrConnect();
|
||||
};
|
||||
}
|
||||
|
||||
const initializer = new NostrLoginInitializer();
|
||||
|
||||
export const { init, launch, logout, setDarkMode, setAuth, cancelNeedAuth } = initializer;
|
||||
|
||||
document.addEventListener('nlLogout', logout);
|
||||
document.addEventListener('nlLaunch', (event: any) => {
|
||||
launch(event.detail || '');
|
||||
});
|
||||
document.addEventListener('nlNeedAuthCancel', () => {
|
||||
cancelNeedAuth();
|
||||
});
|
||||
document.addEventListener('nlDarkMode', (event: any) => {
|
||||
setDarkMode(!!event.detail);
|
||||
});
|
||||
document.addEventListener('nlSetAuth', (event: any) => {
|
||||
setAuth(event.detail as NostrLoginAuthOptions);
|
||||
});
|
||||
@@ -1,718 +0,0 @@
|
||||
import { localStorageAddAccount, bunkerUrlToInfo, isBunkerUrl, fetchProfile, getBunkerUrl, localStorageRemoveCurrentAccount, createProfile, getIcon } from '../utils';
|
||||
import { ConnectionString, Info } from 'nostr-login-components/dist/types/types';
|
||||
import { generatePrivateKey, getEventHash, getPublicKey, nip19 } from 'nostr-tools';
|
||||
import { NostrLoginAuthOptions, Response } from '../types';
|
||||
import NDK, { NDKEvent, NDKNip46Signer, NDKRpcResponse, NDKUser, NostrEvent } from '@nostr-dev-kit/ndk';
|
||||
import { NostrParams } from './';
|
||||
import { EventEmitter } from 'tseep';
|
||||
import { Signer } from './Nostr';
|
||||
import { Nip44 } from '../utils/nip44';
|
||||
import { IframeNostrRpc, Nip46Signer, ReadyListener } from './Nip46';
|
||||
import { PrivateKeySigner } from './Signer';
|
||||
|
||||
const OUTBOX_RELAYS = ['wss://user.kindpag.es', 'wss://purplepag.es', 'wss://relay.nos.social'];
|
||||
const DEFAULT_NOSTRCONNECT_RELAY = 'wss://relay.nsec.app/';
|
||||
const NOSTRCONNECT_APPS: ConnectionString[] = [
|
||||
{
|
||||
name: 'Nsec.app',
|
||||
domain: 'nsec.app',
|
||||
canImport: true,
|
||||
img: 'https://nsec.app/assets/favicon.ico',
|
||||
link: 'https://use.nsec.app/<nostrconnect>',
|
||||
relay: 'wss://relay.nsec.app/',
|
||||
},
|
||||
{
|
||||
name: 'Amber',
|
||||
img: 'https://raw.githubusercontent.com/greenart7c3/Amber/refs/heads/master/assets/android-icon.svg',
|
||||
link: '<nostrconnect>',
|
||||
relay: 'wss://relay.nsec.app/',
|
||||
},
|
||||
{
|
||||
name: 'Other key stores',
|
||||
img: '',
|
||||
link: '<nostrconnect>',
|
||||
relay: 'wss://relay.nsec.app/',
|
||||
},
|
||||
];
|
||||
|
||||
class AuthNostrService extends EventEmitter implements Signer {
|
||||
private ndk: NDK;
|
||||
private profileNdk: NDK;
|
||||
private signer: Nip46Signer | null = null;
|
||||
private localSigner: PrivateKeySigner | null = null;
|
||||
private params: NostrParams;
|
||||
private signerPromise?: Promise<void>;
|
||||
private signerErrCallback?: (err: string) => void;
|
||||
private readyPromise?: Promise<void>;
|
||||
private readyCallback?: () => void;
|
||||
private nip44Codec = new Nip44();
|
||||
private nostrConnectKey: string = '';
|
||||
private nostrConnectSecret: string = '';
|
||||
private iframe?: HTMLIFrameElement;
|
||||
private starterReady?: ReadyListener;
|
||||
|
||||
nip04: {
|
||||
encrypt: (pubkey: string, plaintext: string) => Promise<string>;
|
||||
decrypt: (pubkey: string, ciphertext: string) => Promise<string>;
|
||||
};
|
||||
nip44: {
|
||||
encrypt: (pubkey: string, plaintext: string) => Promise<string>;
|
||||
decrypt: (pubkey: string, ciphertext: string) => Promise<string>;
|
||||
};
|
||||
|
||||
constructor(params: NostrParams) {
|
||||
super();
|
||||
this.params = params;
|
||||
this.ndk = new NDK({
|
||||
enableOutboxModel: false,
|
||||
});
|
||||
|
||||
this.profileNdk = new NDK({
|
||||
enableOutboxModel: true,
|
||||
explicitRelayUrls: OUTBOX_RELAYS,
|
||||
});
|
||||
this.profileNdk.connect();
|
||||
|
||||
this.nip04 = {
|
||||
encrypt: this.encrypt04.bind(this),
|
||||
decrypt: this.decrypt04.bind(this),
|
||||
};
|
||||
this.nip44 = {
|
||||
encrypt: this.encrypt44.bind(this),
|
||||
decrypt: this.decrypt44.bind(this),
|
||||
};
|
||||
}
|
||||
|
||||
public isIframe() {
|
||||
return !!this.iframe;
|
||||
}
|
||||
|
||||
public async waitReady() {
|
||||
if (this.signerPromise) {
|
||||
try {
|
||||
await this.signerPromise;
|
||||
} catch {}
|
||||
}
|
||||
|
||||
if (this.readyPromise) {
|
||||
try {
|
||||
await this.readyPromise;
|
||||
} catch {}
|
||||
}
|
||||
}
|
||||
|
||||
public cancelNostrConnect() {
|
||||
this.releaseSigner();
|
||||
this.resetAuth();
|
||||
}
|
||||
|
||||
public async nostrConnect(
|
||||
relay?: string,
|
||||
{
|
||||
domain = '',
|
||||
link = '',
|
||||
iframeUrl = '',
|
||||
importConnect = false,
|
||||
}: {
|
||||
domain?: string;
|
||||
link?: string;
|
||||
importConnect?: boolean;
|
||||
iframeUrl?: string;
|
||||
} = {},
|
||||
) {
|
||||
relay = relay || DEFAULT_NOSTRCONNECT_RELAY;
|
||||
|
||||
const info: Info = {
|
||||
authMethod: 'connect',
|
||||
pubkey: '', // unknown yet!
|
||||
signerPubkey: '', // unknown too!
|
||||
sk: this.nostrConnectKey,
|
||||
domain: domain,
|
||||
relays: [relay],
|
||||
iframeUrl,
|
||||
};
|
||||
|
||||
console.log('nostrconnect info', info, link);
|
||||
|
||||
// non-iframe flow
|
||||
if (link && !iframeUrl) window.open(link, '_blank', 'width=400,height=700');
|
||||
|
||||
// init nip46 signer
|
||||
await this.initSigner(info, { listen: true });
|
||||
|
||||
// signer learns the remote pubkey
|
||||
if (!info.pubkey || !info.signerPubkey) throw new Error('Bad remote pubkey');
|
||||
|
||||
info.bunkerUrl = `bunker://${info.signerPubkey}?relay=${relay}`;
|
||||
|
||||
// callback
|
||||
if (!importConnect) this.onAuth('login', info);
|
||||
|
||||
return info;
|
||||
}
|
||||
|
||||
public async createNostrConnect(relay?: string) {
|
||||
this.nostrConnectKey = generatePrivateKey();
|
||||
this.nostrConnectSecret = Math.random().toString(36).substring(7);
|
||||
|
||||
const pubkey = getPublicKey(this.nostrConnectKey);
|
||||
const meta = {
|
||||
name: encodeURIComponent(document.location.host),
|
||||
url: encodeURIComponent(document.location.origin),
|
||||
icon: encodeURIComponent(await getIcon()),
|
||||
perms: encodeURIComponent(this.params.optionsModal.perms || ''),
|
||||
};
|
||||
|
||||
return `nostrconnect://${pubkey}?image=${meta.icon}&url=${meta.url}&name=${meta.name}&perms=${meta.perms}&secret=${this.nostrConnectSecret}${relay ? `&relay=${relay}` : ''}`;
|
||||
}
|
||||
|
||||
public async getNostrConnectServices(): Promise<[string, ConnectionString[]]> {
|
||||
const nostrconnect = await this.createNostrConnect();
|
||||
|
||||
// copy defaults
|
||||
const apps = NOSTRCONNECT_APPS.map(a => ({ ...a }));
|
||||
// if (this.params.optionsModal.dev) {
|
||||
// apps.push({
|
||||
// name: 'Dev.Nsec.app',
|
||||
// domain: 'new.nsec.app',
|
||||
// canImport: true,
|
||||
// img: 'https://new.nsec.app/assets/favicon.ico',
|
||||
// link: 'https://dev.nsec.app/<nostrconnect>',
|
||||
// relay: 'wss://relay.nsec.app/',
|
||||
// });
|
||||
// }
|
||||
|
||||
for (const a of apps) {
|
||||
let relay = DEFAULT_NOSTRCONNECT_RELAY;
|
||||
if (a.link.startsWith('https://')) {
|
||||
let domain = a.domain || new URL(a.link).hostname;
|
||||
try {
|
||||
const info = await (await fetch(`https://${domain}/.well-known/nostr.json`)).json();
|
||||
const pubkey = info.names['_'];
|
||||
const relays = info.nip46[pubkey] as string[];
|
||||
if (relays && relays.length) relay = relays[0];
|
||||
a.iframeUrl = info.nip46.iframe_url || '';
|
||||
} catch (e) {
|
||||
console.log('Bad app info', e, a);
|
||||
}
|
||||
}
|
||||
const nc = nostrconnect + '&relay=' + relay;
|
||||
if (a.iframeUrl) {
|
||||
// pass plain nc url for iframe-based flow
|
||||
a.link = nc;
|
||||
} else {
|
||||
// we will open popup ourselves
|
||||
a.link = a.link.replace('<nostrconnect>', nc);
|
||||
}
|
||||
}
|
||||
|
||||
return [nostrconnect, apps];
|
||||
}
|
||||
|
||||
public async localSignup(name: string, sk?: string) {
|
||||
const signup = !sk;
|
||||
sk = sk || generatePrivateKey();
|
||||
const pubkey = getPublicKey(sk);
|
||||
const info: Info = {
|
||||
pubkey,
|
||||
sk,
|
||||
name,
|
||||
authMethod: 'local',
|
||||
};
|
||||
console.log(`localSignup name: ${name}`);
|
||||
await this.setLocal(info, signup);
|
||||
}
|
||||
|
||||
public async setLocal(info: Info, signup?: boolean) {
|
||||
this.releaseSigner();
|
||||
this.localSigner = new PrivateKeySigner(info.sk!);
|
||||
|
||||
if (signup) await createProfile(info, this.profileNdk, this.localSigner, this.params.optionsModal.signupRelays, this.params.optionsModal.outboxRelays);
|
||||
|
||||
this.onAuth(signup ? 'signup' : 'login', info);
|
||||
}
|
||||
|
||||
public prepareImportUrl(url: string) {
|
||||
// for OTP we choose interactive import
|
||||
if (this.params.userInfo?.authMethod === 'otp') return url + '&import=true';
|
||||
|
||||
// for local we export our existing key
|
||||
if (!this.localSigner || this.params.userInfo?.authMethod !== 'local') throw new Error('Most be local keys');
|
||||
return url + '#import=' + nip19.nsecEncode(this.localSigner.privateKey!);
|
||||
}
|
||||
|
||||
public async importAndConnect(cs: ConnectionString) {
|
||||
const { relay, domain, link, iframeUrl } = cs;
|
||||
if (!domain) throw new Error('Domain required');
|
||||
|
||||
const info = await this.nostrConnect(relay, { domain, link, importConnect: true, iframeUrl });
|
||||
|
||||
// logout to remove local keys from storage
|
||||
// but keep the connect signer
|
||||
await this.logout(/*keepSigner*/ true);
|
||||
|
||||
// release local one
|
||||
this.localSigner = null;
|
||||
|
||||
// notify app that we've switched to 'connect' keys
|
||||
this.onAuth('login', info);
|
||||
}
|
||||
|
||||
public setReadOnly(pubkey: string) {
|
||||
const info: Info = { pubkey, authMethod: 'readOnly' };
|
||||
this.onAuth('login', info);
|
||||
}
|
||||
|
||||
public setExtension(pubkey: string) {
|
||||
const info: Info = { pubkey, authMethod: 'extension' };
|
||||
this.onAuth('login', info);
|
||||
}
|
||||
|
||||
public setOTP(pubkey: string, data: string) {
|
||||
const info: Info = { pubkey, authMethod: 'otp', otpData: data };
|
||||
this.onAuth('login', info);
|
||||
}
|
||||
|
||||
public async setConnect(info: Info) {
|
||||
this.releaseSigner();
|
||||
await this.startAuth();
|
||||
await this.initSigner(info);
|
||||
this.onAuth('login', info);
|
||||
await this.endAuth();
|
||||
}
|
||||
|
||||
public async createAccount(nip05: string) {
|
||||
const [name, domain] = nip05.split('@');
|
||||
|
||||
// bunker's own url
|
||||
const bunkerUrl = await getBunkerUrl(`_@${domain}`, this.params.optionsModal);
|
||||
console.log("create account bunker's url", bunkerUrl);
|
||||
|
||||
// parse bunker url and generate local nsec
|
||||
const info = bunkerUrlToInfo(bunkerUrl);
|
||||
if (!info.signerPubkey) throw new Error('Bad bunker url');
|
||||
|
||||
const eventToAddAccount = Boolean(this.params.userInfo);
|
||||
|
||||
// init signer to talk to the bunker (not the user!)
|
||||
await this.initSigner(info, { eventToAddAccount });
|
||||
|
||||
const userPubkey = await this.signer!.createAccount2({ bunkerPubkey: info.signerPubkey!, name, domain, perms: this.params.optionsModal.perms });
|
||||
|
||||
return {
|
||||
bunkerUrl: `bunker://${userPubkey}?relay=${info.relays?.[0]}`,
|
||||
sk: info.sk, // reuse the same local key
|
||||
};
|
||||
}
|
||||
|
||||
private releaseSigner() {
|
||||
this.signer = null;
|
||||
this.signerErrCallback?.('cancelled');
|
||||
this.localSigner = null;
|
||||
|
||||
// disconnect from signer relays
|
||||
for (const r of this.ndk.pool.relays.keys()) {
|
||||
this.ndk.pool.removeRelay(r);
|
||||
}
|
||||
}
|
||||
|
||||
public async logout(keepSigner = false) {
|
||||
if (!keepSigner) this.releaseSigner();
|
||||
|
||||
// move current to recent
|
||||
localStorageRemoveCurrentAccount();
|
||||
|
||||
// notify everyone
|
||||
this.onAuth('logout');
|
||||
|
||||
this.emit('updateAccounts');
|
||||
}
|
||||
|
||||
private setUserInfo(userInfo: Info | null) {
|
||||
this.params.userInfo = userInfo;
|
||||
this.emit('onUserInfo', userInfo);
|
||||
|
||||
if (userInfo) {
|
||||
localStorageAddAccount(userInfo);
|
||||
this.emit('updateAccounts');
|
||||
}
|
||||
}
|
||||
|
||||
public exportKeys() {
|
||||
if (!this.params.userInfo) return '';
|
||||
if (this.params.userInfo.authMethod !== 'local') return '';
|
||||
return nip19.nsecEncode(this.params.userInfo.sk!);
|
||||
}
|
||||
|
||||
private onAuth(type: 'login' | 'signup' | 'logout', info: Info | null = null) {
|
||||
if (type !== 'logout' && !info) throw new Error('No user info in onAuth');
|
||||
|
||||
// make sure we emulate logout first
|
||||
if (info && this.params.userInfo && (info.pubkey !== this.params.userInfo.pubkey || info.authMethod !== this.params.userInfo.authMethod)) {
|
||||
const event = new CustomEvent('nlAuth', { detail: { type: 'logout' } });
|
||||
console.log('nostr-login auth', event.detail);
|
||||
document.dispatchEvent(event)
|
||||
}
|
||||
|
||||
this.setUserInfo(info);
|
||||
|
||||
if (info) {
|
||||
// async profile fetch
|
||||
fetchProfile(info, this.profileNdk).then(p => {
|
||||
if (this.params.userInfo !== info) return;
|
||||
|
||||
const userInfo = {
|
||||
...this.params.userInfo,
|
||||
picture: p?.image || p?.picture,
|
||||
name: p?.name || p?.displayName || p?.nip05 || nip19.npubEncode(info.pubkey),
|
||||
// NOTE: do not overwrite info.nip05 with the one from profile!
|
||||
// info.nip05 refers to nip46 provider,
|
||||
// profile.nip05 is just a fancy name that user has chosen
|
||||
// nip05: p?.nip05
|
||||
};
|
||||
|
||||
this.setUserInfo(userInfo);
|
||||
});
|
||||
}
|
||||
|
||||
try {
|
||||
const npub = info ? nip19.npubEncode(info.pubkey) : '';
|
||||
|
||||
const options: NostrLoginAuthOptions = {
|
||||
type,
|
||||
};
|
||||
|
||||
if (type === 'logout') {
|
||||
// reset
|
||||
if (this.iframe) this.iframe.remove();
|
||||
this.iframe = undefined;
|
||||
} else {
|
||||
options.pubkey = info!.pubkey;
|
||||
options.name = info!.name;
|
||||
|
||||
if (info!.sk) {
|
||||
options.localNsec = nip19.nsecEncode(info!.sk);
|
||||
}
|
||||
|
||||
if (info!.relays) {
|
||||
options.relays = info!.relays;
|
||||
}
|
||||
|
||||
if (info!.otpData) {
|
||||
options.otpData = info!.otpData;
|
||||
}
|
||||
|
||||
options.method = info!.authMethod || 'connect';
|
||||
}
|
||||
|
||||
const event = new CustomEvent('nlAuth', { detail: options });
|
||||
console.log('nostr-login auth', options);
|
||||
document.dispatchEvent(event);
|
||||
|
||||
if (this.params.optionsModal.onAuth) {
|
||||
this.params.optionsModal.onAuth(npub, options);
|
||||
}
|
||||
} catch (e) {
|
||||
console.log('onAuth error', e);
|
||||
}
|
||||
}
|
||||
|
||||
private async createIframe(iframeUrl?: string) {
|
||||
if (!iframeUrl) return undefined;
|
||||
|
||||
// ensure iframe
|
||||
const url = new URL(iframeUrl);
|
||||
const domain = url.hostname;
|
||||
let iframe: HTMLIFrameElement | undefined;
|
||||
|
||||
// one iframe per domain
|
||||
const did = domain.replaceAll('.', '-');
|
||||
const id = '__nostr-login-worker-iframe-' + did;
|
||||
iframe = document.querySelector(`#${id}`) as HTMLIFrameElement;
|
||||
console.log('iframe', id, iframe);
|
||||
if (!iframe) {
|
||||
iframe = document.createElement('iframe');
|
||||
iframe.setAttribute('width', '0');
|
||||
iframe.setAttribute('height', '0');
|
||||
iframe.setAttribute('border', '0');
|
||||
iframe.style.display = 'none';
|
||||
// iframe.setAttribute('sandbox', 'allow-forms allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts');
|
||||
iframe.id = id;
|
||||
document.body.append(iframe);
|
||||
}
|
||||
|
||||
// wait until loaded
|
||||
iframe.setAttribute('src', iframeUrl);
|
||||
|
||||
// we start listening right now to avoid races
|
||||
// with 'load' event below
|
||||
const ready = new ReadyListener(['workerReady', 'workerError'], url.origin);
|
||||
|
||||
await new Promise(ok => {
|
||||
iframe!.addEventListener('load', ok);
|
||||
});
|
||||
|
||||
// now make sure the iframe is ready,
|
||||
// timeout timer starts here
|
||||
const r = await ready.wait();
|
||||
|
||||
// FIXME wait until the iframe is ready to accept requests,
|
||||
// maybe it should send us some message?
|
||||
|
||||
console.log('nostr-login iframe ready', iframeUrl, r);
|
||||
|
||||
return { iframe, port: r[1] as MessagePort };
|
||||
}
|
||||
|
||||
// private async getIframeUrl(domain?: string) {
|
||||
// if (!domain) return '';
|
||||
// try {
|
||||
// const r = await fetch(`https://${domain}/.well-known/nostr.json`);
|
||||
// const data = await r.json();
|
||||
// return data.nip46?.iframe_url || '';
|
||||
// } catch (e) {
|
||||
// console.log('failed to fetch iframe url', e, domain);
|
||||
// return '';
|
||||
// }
|
||||
// }
|
||||
|
||||
public async sendNeedAuth() {
|
||||
const [nostrconnect] = await this.getNostrConnectServices();
|
||||
const event = new CustomEvent('nlNeedAuth', { detail: { nostrconnect } });
|
||||
console.log('nostr-login need auth', nostrconnect);
|
||||
document.dispatchEvent(event);
|
||||
}
|
||||
|
||||
public isAuthing() {
|
||||
return !!this.readyCallback;
|
||||
}
|
||||
|
||||
public async startAuth() {
|
||||
console.log("startAuth");
|
||||
if (this.readyCallback) throw new Error('Already started');
|
||||
|
||||
// start the new promise
|
||||
this.readyPromise = new Promise<void>(ok => (this.readyCallback = ok));
|
||||
}
|
||||
|
||||
public async endAuth() {
|
||||
console.log('endAuth', this.params.userInfo);
|
||||
if (this.params.userInfo && this.params.userInfo.iframeUrl) {
|
||||
// create iframe
|
||||
const { iframe, port } = (await this.createIframe(this.params.userInfo.iframeUrl)) || {};
|
||||
this.iframe = iframe;
|
||||
if (!this.iframe || !port) return;
|
||||
|
||||
// assign iframe to RPC object
|
||||
(this.signer!.rpc as IframeNostrRpc).setWorkerIframePort(port);
|
||||
}
|
||||
|
||||
this.readyCallback!();
|
||||
this.readyCallback = undefined;
|
||||
}
|
||||
|
||||
public resetAuth() {
|
||||
if (this.readyCallback) this.readyCallback();
|
||||
this.readyCallback = undefined;
|
||||
}
|
||||
|
||||
private async listen(info: Info) {
|
||||
if (!info.iframeUrl) return this.signer!.listen(this.nostrConnectSecret);
|
||||
const r = await this.starterReady!.wait();
|
||||
if (r[0] === 'starterError') throw new Error(r[1]);
|
||||
return this.signer!.setListenReply(r[1], this.nostrConnectSecret);
|
||||
}
|
||||
|
||||
public async connect(info: Info, perms?: string) {
|
||||
return this.signer!.connect(info.token, perms);
|
||||
}
|
||||
|
||||
public async initSigner(info: Info, { listen = false, connect = false, eventToAddAccount = false } = {}) {
|
||||
// mutex
|
||||
if (this.signerPromise) {
|
||||
try {
|
||||
await this.signerPromise;
|
||||
} catch {}
|
||||
}
|
||||
|
||||
// we remove support for iframe from nip05 and bunker-url methods,
|
||||
// only nostrconnect flow will use it.
|
||||
// info.iframeUrl = info.iframeUrl || (await this.getIframeUrl(info.domain));
|
||||
console.log('initSigner info', info);
|
||||
|
||||
// start listening for the ready signal
|
||||
const iframeOrigin = info.iframeUrl ? new URL(info.iframeUrl!).origin : undefined;
|
||||
if (iframeOrigin) this.starterReady = new ReadyListener(['starterDone', 'starterError'], iframeOrigin);
|
||||
|
||||
// notify modals so they could show the starter iframe,
|
||||
// FIXME shouldn't this come from nostrconnect service list?
|
||||
this.emit('onIframeUrl', info.iframeUrl);
|
||||
|
||||
this.signerPromise = new Promise<void>(async (ok, err) => {
|
||||
this.signerErrCallback = err;
|
||||
try {
|
||||
// pre-connect if we're creating the connection (listen|connect) or
|
||||
// not iframe mode
|
||||
if (info.relays && !info.iframeUrl) {
|
||||
for (const r of info.relays) {
|
||||
this.ndk.addExplicitRelay(r, undefined);
|
||||
}
|
||||
}
|
||||
|
||||
// wait until we connect, otherwise
|
||||
// signer won't start properly
|
||||
await this.ndk.connect();
|
||||
|
||||
// create and prepare the signer
|
||||
const localSigner = new PrivateKeySigner(info.sk!);
|
||||
this.signer = new Nip46Signer(this.ndk, localSigner, info.signerPubkey!, iframeOrigin);
|
||||
|
||||
// we should notify the banner the same way as
|
||||
// the onAuthUrl does
|
||||
this.signer.on(`iframeRestart`, async () => {
|
||||
const iframeUrl = info.iframeUrl + (info.iframeUrl!.includes('?') ? '&' : '?') + 'pubkey=' + info.pubkey + '&rebind=' + localSigner.pubkey;
|
||||
this.emit('iframeRestart', { pubkey: info.pubkey, iframeUrl });
|
||||
});
|
||||
|
||||
// OAuth flow
|
||||
// if (!listen) {
|
||||
this.signer.on('authUrl', (url: string) => {
|
||||
console.log('nostr login auth url', url);
|
||||
|
||||
// notify our UI
|
||||
this.emit('onAuthUrl', { url, iframeUrl: info.iframeUrl, eventToAddAccount });
|
||||
});
|
||||
// }
|
||||
|
||||
if (listen) {
|
||||
// nostrconnect: flow
|
||||
// wait for the incoming message from signer
|
||||
await this.listen(info);
|
||||
} else if (connect) {
|
||||
// bunker: flow
|
||||
// send 'connect' message to signer
|
||||
await this.connect(info, this.params.optionsModal.perms);
|
||||
} else {
|
||||
// provide saved pubkey as a hint
|
||||
await this.signer!.initUserPubkey(info.pubkey);
|
||||
}
|
||||
|
||||
// ensure, we're using it in callbacks above
|
||||
// and expect info to be valid after this call
|
||||
info.pubkey = this.signer!.userPubkey;
|
||||
// learned after nostrconnect flow
|
||||
info.signerPubkey = this.signer!.remotePubkey;
|
||||
|
||||
ok();
|
||||
} catch (e) {
|
||||
console.log('initSigner failure', e);
|
||||
// make sure signer isn't set
|
||||
this.signer = null;
|
||||
err(e);
|
||||
}
|
||||
});
|
||||
|
||||
return this.signerPromise;
|
||||
}
|
||||
|
||||
public async authNip46(
|
||||
type: 'login' | 'signup',
|
||||
{ name, bunkerUrl, sk = '', domain = '', iframeUrl = '' }: { name: string; bunkerUrl: string; sk?: string; domain?: string; iframeUrl?: string },
|
||||
) {
|
||||
try {
|
||||
const info = bunkerUrlToInfo(bunkerUrl, sk);
|
||||
if (isBunkerUrl(name)) info.bunkerUrl = name;
|
||||
else {
|
||||
info.nip05 = name;
|
||||
info.domain = name.split('@')[1];
|
||||
}
|
||||
if (domain) info.domain = domain;
|
||||
if (iframeUrl) info.iframeUrl = iframeUrl;
|
||||
|
||||
// console.log('nostr login auth info', info);
|
||||
if (!info.signerPubkey || !info.sk || !info.relays?.[0]) {
|
||||
throw new Error(`Bad bunker url ${bunkerUrl}`);
|
||||
}
|
||||
|
||||
const eventToAddAccount = Boolean(this.params.userInfo);
|
||||
console.log('authNip46', type, info);
|
||||
|
||||
// updates the info
|
||||
await this.initSigner(info, { connect: true, eventToAddAccount });
|
||||
|
||||
// callback
|
||||
this.onAuth(type, info);
|
||||
} catch (e) {
|
||||
console.log('nostr login auth failed', e);
|
||||
// make ure it's closed
|
||||
// this.popupManager.closePopup();
|
||||
throw e;
|
||||
}
|
||||
}
|
||||
|
||||
public async signEvent(event: any) {
|
||||
if (this.localSigner) {
|
||||
event.pubkey = getPublicKey(this.localSigner.privateKey!);
|
||||
event.id = getEventHash(event);
|
||||
event.sig = await this.localSigner.sign(event);
|
||||
} else {
|
||||
event.pubkey = this.signer?.remotePubkey;
|
||||
event.id = getEventHash(event);
|
||||
event.sig = await this.signer?.sign(event);
|
||||
}
|
||||
console.log('signed', { event });
|
||||
return event;
|
||||
}
|
||||
|
||||
private async codec_call(method: string, pubkey: string, param: string) {
|
||||
return new Promise<string>((resolve, reject) => {
|
||||
this.signer!.rpc.sendRequest(this.signer!.remotePubkey!, method, [pubkey, param], 24133, (response: NDKRpcResponse) => {
|
||||
if (!response.error) {
|
||||
resolve(response.result);
|
||||
} else {
|
||||
reject(response.error);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
public async encrypt04(pubkey: string, plaintext: string) {
|
||||
if (this.localSigner) {
|
||||
return this.localSigner.encrypt(new NDKUser({ pubkey }), plaintext);
|
||||
} else {
|
||||
return this.signer!.encrypt(new NDKUser({ pubkey }), plaintext);
|
||||
}
|
||||
}
|
||||
|
||||
public async decrypt04(pubkey: string, ciphertext: string) {
|
||||
if (this.localSigner) {
|
||||
return this.localSigner.decrypt(new NDKUser({ pubkey }), ciphertext);
|
||||
} else {
|
||||
// decrypt is broken in ndk v2.3.1, and latest
|
||||
// ndk v2.8.1 doesn't allow to override connect easily,
|
||||
// so we reimplement and fix decrypt here as a temporary fix
|
||||
|
||||
return this.codec_call('nip04_decrypt', pubkey, ciphertext);
|
||||
}
|
||||
}
|
||||
|
||||
public async encrypt44(pubkey: string, plaintext: string) {
|
||||
if (this.localSigner) {
|
||||
return this.nip44Codec.encrypt(this.localSigner.privateKey!, pubkey, plaintext);
|
||||
} else {
|
||||
// no support of nip44 in ndk yet
|
||||
return this.codec_call('nip44_encrypt', pubkey, plaintext);
|
||||
}
|
||||
}
|
||||
|
||||
public async decrypt44(pubkey: string, ciphertext: string) {
|
||||
if (this.localSigner) {
|
||||
return this.nip44Codec.decrypt(this.localSigner.privateKey!, pubkey, ciphertext);
|
||||
} else {
|
||||
// no support of nip44 in ndk yet
|
||||
return this.codec_call('nip44_decrypt', pubkey, ciphertext);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default AuthNostrService;
|
||||
@@ -1,146 +0,0 @@
|
||||
import { NostrLoginOptions, TypeBanner } from '../types';
|
||||
import { NostrParams } from '.';
|
||||
import { Info } from 'nostr-login-components/dist/types/types';
|
||||
import { EventEmitter } from 'tseep';
|
||||
import { getDarkMode } from '../utils';
|
||||
import { ReadyListener } from './Nip46';
|
||||
|
||||
class BannerManager extends EventEmitter {
|
||||
private banner: TypeBanner | null = null;
|
||||
private iframeReady?: ReadyListener;
|
||||
|
||||
private params: NostrParams;
|
||||
|
||||
constructor(params: NostrParams) {
|
||||
super();
|
||||
this.params = params;
|
||||
}
|
||||
|
||||
public onAuthUrl(url: string, iframeUrl: string) {
|
||||
if (this.banner) {
|
||||
if (url)
|
||||
this.banner.notify = {
|
||||
mode: iframeUrl ? 'iframeAuthUrl' : 'authUrl',
|
||||
url,
|
||||
};
|
||||
else
|
||||
this.banner.notify = {
|
||||
mode: '',
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
public onIframeRestart(iframeUrl: string) {
|
||||
if (this.banner) {
|
||||
this.iframeReady = new ReadyListener(['rebinderDone', 'rebinderError'], new URL(iframeUrl).origin);
|
||||
this.banner.notify = {
|
||||
mode: 'rebind',
|
||||
url: iframeUrl,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
public onUserInfo(info: Info | null) {
|
||||
if (this.banner) {
|
||||
this.banner.userInfo = info;
|
||||
}
|
||||
}
|
||||
|
||||
public onCallTimeout() {
|
||||
if (this.banner) {
|
||||
this.banner.notify = {
|
||||
mode: 'timeout',
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
public onCallStart() {
|
||||
if (this.banner) {
|
||||
this.banner.isLoading = true;
|
||||
}
|
||||
}
|
||||
|
||||
public async onCallEnd() {
|
||||
if (this.banner) {
|
||||
if (this.iframeReady) {
|
||||
await this.iframeReady.wait();
|
||||
this.iframeReady = undefined;
|
||||
}
|
||||
this.banner.isLoading = false;
|
||||
this.banner.notify = { mode: '' };
|
||||
}
|
||||
}
|
||||
|
||||
public onUpdateAccounts(accounts: Info[]) {
|
||||
if (this.banner) {
|
||||
this.banner.accounts = accounts;
|
||||
}
|
||||
}
|
||||
|
||||
public onDarkMode(dark: boolean) {
|
||||
if (this.banner) this.banner.darkMode = dark;
|
||||
}
|
||||
|
||||
public launchAuthBanner(opt: NostrLoginOptions) {
|
||||
this.banner = document.createElement('nl-banner');
|
||||
|
||||
this.banner.setAttribute('dark-mode', String(getDarkMode(opt)));
|
||||
|
||||
if (opt.theme) this.banner.setAttribute('theme', opt.theme);
|
||||
if (opt.noBanner) this.banner.setAttribute('hidden-mode', 'true');
|
||||
|
||||
this.banner.addEventListener('handleLoginBanner', (event: any) => {
|
||||
this.emit('launch', event.detail);
|
||||
});
|
||||
|
||||
this.banner.addEventListener('handleConfirmLogout', () => {
|
||||
this.emit('onConfirmLogout');
|
||||
});
|
||||
|
||||
this.banner.addEventListener('handleLogoutBanner', async () => {
|
||||
this.emit('logout');
|
||||
});
|
||||
|
||||
this.banner.addEventListener('handleImportModal', (event: any) => {
|
||||
this.emit('import');
|
||||
});
|
||||
|
||||
this.banner.addEventListener('handleNotifyConfirmBanner', (event: any) => {
|
||||
this.emit('onAuthUrlClick', event.detail);
|
||||
});
|
||||
|
||||
this.banner.addEventListener('handleNotifyConfirmBannerIframe', (event: any) => {
|
||||
this.emit('onIframeAuthUrlClick', event.detail);
|
||||
});
|
||||
|
||||
this.banner.addEventListener('handleSwitchAccount', (event: any) => {
|
||||
this.emit('onSwitchAccount', event.detail);
|
||||
});
|
||||
|
||||
this.banner.addEventListener('handleOpenWelcomeModal', () => {
|
||||
this.emit('launch');
|
||||
|
||||
if (this.banner) {
|
||||
this.banner.isOpen = false;
|
||||
}
|
||||
});
|
||||
|
||||
// this.banner.addEventListener('handleRetryConfirmBanner', () => {
|
||||
// const url = this.listNotifies.pop();
|
||||
// // FIXME go to nip05 domain?
|
||||
// if (!url) {
|
||||
// return;
|
||||
// }
|
||||
|
||||
// if (this.banner) {
|
||||
// this.banner.listNotifies = this.listNotifies;
|
||||
// }
|
||||
|
||||
// this.emit('onAuthUrlClick', url);
|
||||
// });
|
||||
|
||||
document.body.appendChild(this.banner);
|
||||
}
|
||||
}
|
||||
|
||||
export default BannerManager;
|
||||
@@ -1,635 +0,0 @@
|
||||
import { NostrLoginOptions, StartScreens, TypeModal } from '../types';
|
||||
import { checkNip05, getBunkerUrl, getDarkMode, localStorageRemoveRecent, localStorageSetItem, prepareSignupRelays } from '../utils';
|
||||
import { AuthNostrService, NostrExtensionService, NostrParams } from '.';
|
||||
import { EventEmitter } from 'tseep';
|
||||
import { ConnectionString, Info, RecentType } from 'nostr-login-components/dist/types/types';
|
||||
import { nip19 } from 'nostr-tools';
|
||||
import { setDarkMode } from '..';
|
||||
|
||||
class ModalManager extends EventEmitter {
|
||||
private modal: TypeModal | null = null;
|
||||
private params: NostrParams;
|
||||
private extensionService: NostrExtensionService;
|
||||
private authNostrService: AuthNostrService;
|
||||
private launcherPromise?: Promise<void>;
|
||||
private accounts: Info[] = [];
|
||||
private recents: RecentType[] = [];
|
||||
private opt?: NostrLoginOptions;
|
||||
|
||||
constructor(params: NostrParams, authNostrService: AuthNostrService, extensionManager: NostrExtensionService) {
|
||||
super();
|
||||
this.params = params;
|
||||
this.extensionService = extensionManager;
|
||||
this.authNostrService = authNostrService;
|
||||
}
|
||||
|
||||
public async waitReady() {
|
||||
if (this.launcherPromise) {
|
||||
try {
|
||||
await this.launcherPromise;
|
||||
} catch {}
|
||||
this.launcherPromise = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
public async launch(opt: NostrLoginOptions) {
|
||||
console.log('nostr-login launch', opt);
|
||||
// mutex
|
||||
if (this.launcherPromise) await this.waitReady();
|
||||
|
||||
// hmm?!
|
||||
if (this.authNostrService.isAuthing()) this.authNostrService.resetAuth();
|
||||
|
||||
this.opt = opt;
|
||||
|
||||
const dialog = document.createElement('dialog');
|
||||
this.modal = document.createElement('nl-auth');
|
||||
this.modal.accounts = this.accounts;
|
||||
this.modal.recents = this.recents;
|
||||
|
||||
this.modal.setAttribute('dark-mode', String(getDarkMode(opt)));
|
||||
|
||||
if (opt.theme) {
|
||||
this.modal.setAttribute('theme', opt.theme);
|
||||
}
|
||||
|
||||
if (opt.startScreen) {
|
||||
this.modal.setAttribute('start-screen', opt.startScreen);
|
||||
}
|
||||
|
||||
if (opt.bunkers) {
|
||||
this.modal.setAttribute('bunkers', opt.bunkers);
|
||||
} else {
|
||||
let bunkers = 'nsec.app,highlighter.com';
|
||||
// if (opt.dev) bunkers += ',new.nsec.app';
|
||||
this.modal.setAttribute('bunkers', bunkers);
|
||||
}
|
||||
|
||||
if (opt.methods !== undefined) {
|
||||
this.modal.authMethods = opt.methods;
|
||||
}
|
||||
|
||||
if (opt.localSignup !== undefined) {
|
||||
this.modal.localSignup = opt.localSignup;
|
||||
}
|
||||
|
||||
if (opt.signupNstart !== undefined) {
|
||||
this.modal.signupNjump = opt.signupNstart;
|
||||
}
|
||||
|
||||
if (opt.title) {
|
||||
this.modal.welcomeTitle = opt.title;
|
||||
}
|
||||
|
||||
if (opt.description) {
|
||||
this.modal.welcomeDescription = opt.description;
|
||||
}
|
||||
|
||||
this.modal.hasExtension = this.extensionService.hasExtension();
|
||||
this.modal.hasOTP = !!opt.otpRequestUrl && !!opt.otpReplyUrl;
|
||||
|
||||
this.modal.isLoadingExtension = false;
|
||||
this.modal.isLoading = false;
|
||||
|
||||
[this.modal.connectionString, this.modal.connectionStringServices] = await this.authNostrService.getNostrConnectServices();
|
||||
|
||||
dialog.appendChild(this.modal);
|
||||
document.body.appendChild(dialog);
|
||||
|
||||
let otpPubkey = '';
|
||||
|
||||
this.launcherPromise = new Promise<void>((ok, err) => {
|
||||
dialog.addEventListener('close', () => {
|
||||
// noop if already resolved
|
||||
err(new Error('Closed'));
|
||||
|
||||
this.authNostrService.resetAuth();
|
||||
|
||||
if (this.modal) {
|
||||
// it's reset on modal creation
|
||||
// // reset state
|
||||
// this.modal.isLoading = false;
|
||||
// this.modal.authUrl = '';
|
||||
// this.modal.iframeUrl = '';
|
||||
// this.modal.error = '';
|
||||
// this.modal.isLoadingExtension = false;
|
||||
|
||||
// drop it
|
||||
// @ts-ignore
|
||||
document.body.removeChild(this.modal.parentNode);
|
||||
this.modal = null;
|
||||
}
|
||||
});
|
||||
|
||||
const done = async (ok: () => void) => {
|
||||
if (this.modal) this.modal.isLoading = false;
|
||||
await this.authNostrService.endAuth();
|
||||
dialog.close();
|
||||
this.modal = null;
|
||||
ok();
|
||||
};
|
||||
|
||||
const exec = async (
|
||||
body: () => Promise<void>,
|
||||
options?: {
|
||||
start?: boolean;
|
||||
end?: boolean;
|
||||
},
|
||||
) => {
|
||||
if (this.modal) {
|
||||
this.modal.isLoading = true;
|
||||
}
|
||||
|
||||
try {
|
||||
if (!options || options.start) await this.authNostrService.startAuth();
|
||||
await body();
|
||||
if (!options || options.end) await done(ok);
|
||||
} catch (e: any) {
|
||||
console.log('error', e);
|
||||
if (this.modal) {
|
||||
this.modal.isLoading = false;
|
||||
this.modal.authUrl = '';
|
||||
this.modal.iframeUrl = '';
|
||||
if (e !== 'cancelled') this.modal.error = e.toString();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const login = async (name: string, domain?: string) => {
|
||||
await exec(async () => {
|
||||
// convert name to bunker url
|
||||
const bunkerUrl = await getBunkerUrl(name, this.params.optionsModal);
|
||||
|
||||
// connect to bunker by url
|
||||
await this.authNostrService.authNip46('login', { name, bunkerUrl, domain });
|
||||
});
|
||||
};
|
||||
|
||||
const signup = async (name: string) => {
|
||||
await exec(async () => {
|
||||
// create acc on service and get bunker url
|
||||
const { bunkerUrl, sk } = await this.authNostrService.createAccount(name);
|
||||
|
||||
// connect to bunker by url
|
||||
await this.authNostrService.authNip46('signup', { name, bunkerUrl, sk });
|
||||
});
|
||||
};
|
||||
|
||||
const exportKeys = async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(this.authNostrService.exportKeys());
|
||||
localStorageSetItem('backupKey', 'true');
|
||||
} catch (err) {
|
||||
console.error('Failed to copy to clipboard: ', err);
|
||||
}
|
||||
};
|
||||
|
||||
const importKeys = async (cs: ConnectionString) => {
|
||||
await exec(async () => {
|
||||
const { iframeUrl } = cs;
|
||||
cs.link = this.authNostrService.prepareImportUrl(cs.link);
|
||||
|
||||
if (this.modal && iframeUrl) {
|
||||
// we pass the link down to iframe so it could open it
|
||||
this.modal.authUrl = cs.link;
|
||||
this.modal.iframeUrl = iframeUrl;
|
||||
this.modal.isLoading = false;
|
||||
console.log('nostrconnect authUrl', this.modal.authUrl, this.modal.iframeUrl);
|
||||
}
|
||||
|
||||
await this.authNostrService.importAndConnect(cs);
|
||||
});
|
||||
};
|
||||
|
||||
const nostrConnect = async (cs?: ConnectionString) => {
|
||||
await exec(async () => {
|
||||
const { relay, domain, link, iframeUrl } = cs || {};
|
||||
console.log('nostrConnect', cs, relay, domain, link, iframeUrl);
|
||||
|
||||
if (this.modal) {
|
||||
if (iframeUrl) {
|
||||
// we pass the link down to iframe so it could open it
|
||||
this.modal.authUrl = link;
|
||||
this.modal.iframeUrl = iframeUrl;
|
||||
this.modal.isLoading = false;
|
||||
console.log('nostrconnect authUrl', this.modal.authUrl, this.modal.iframeUrl);
|
||||
}
|
||||
|
||||
if (!cs) this.modal.isLoading = false;
|
||||
}
|
||||
|
||||
await this.authNostrService.nostrConnect(relay, { domain, link, iframeUrl });
|
||||
});
|
||||
};
|
||||
|
||||
const localSignup = async (name?: string) => {
|
||||
await exec(async () => {
|
||||
if (!name) throw new Error('Please enter some nickname');
|
||||
await this.authNostrService.localSignup(name);
|
||||
});
|
||||
};
|
||||
|
||||
const signupNjump = async () => {
|
||||
await exec(async () => {
|
||||
const self = new URL(window.location.href);
|
||||
const name =
|
||||
self.hostname
|
||||
.toLocaleLowerCase()
|
||||
.replace(/^www\./i, '')
|
||||
.charAt(0)
|
||||
.toUpperCase() + self.hostname.slice(1);
|
||||
const relays = prepareSignupRelays(this.params.optionsModal.signupRelays);
|
||||
// const url = `https://start.njump.me/?an=${name}&at=popup&ac=${window.location.href}&s=${this.opt!.followNpubs || ''}&arr=${relays}&awr=${relays}`;
|
||||
// console.log('njump url', url);
|
||||
|
||||
this.modal!.njumpIframe = `
|
||||
<html><body>
|
||||
<script src='https://start.njump.me/modal.js'></script>
|
||||
<script>
|
||||
new NstartModal({
|
||||
baseUrl: 'https://start.njump.me',
|
||||
// Required parameters
|
||||
an: '${name}',
|
||||
// Optional parameters
|
||||
s: [${this.opt!.followNpubs ? `'${this.opt!.followNpubs}'` : ''}],
|
||||
afb: false, // forceBunker
|
||||
asb: false, // skipBunker
|
||||
aan: false, // avoidNsec
|
||||
aac: true, // avoidNcryptsec
|
||||
ahc: true, // hide close button
|
||||
arr: ${JSON.stringify(relays)}, //readRelays
|
||||
awr: ${JSON.stringify(relays)}, //writeRelays
|
||||
// Callbacks
|
||||
onComplete: (result) => {
|
||||
console.log('Login token:', result.nostrLogin);
|
||||
window.parent.location.href='${window.location.href}#nostr-login='+result.nostrLogin;
|
||||
},
|
||||
onCancel: () => {
|
||||
window.parent.location.href='${window.location.href}#nostr-login=null';
|
||||
},
|
||||
}).open();
|
||||
</script>
|
||||
</body></html>
|
||||
`.replaceAll('&', '&'); // needed?
|
||||
|
||||
return new Promise((ok, err) => {
|
||||
const process = async (nsecOrBunker: string) => {
|
||||
// process the returned value
|
||||
console.log('nsecOrBunker', nsecOrBunker);
|
||||
if (nsecOrBunker.startsWith('nsec1')) {
|
||||
let decoded;
|
||||
try {
|
||||
decoded = nip19.decode(nsecOrBunker);
|
||||
} catch (e) {
|
||||
throw new Error('Bad nsec value');
|
||||
}
|
||||
if (decoded.type !== 'nsec') throw new Error('Bad bech32 type');
|
||||
await this.authNostrService.localSignup('', decoded.data);
|
||||
ok();
|
||||
} else if (nsecOrBunker.startsWith('bunker:')) {
|
||||
await this.authNostrService.authNip46('login', { name: '', bunkerUrl: nsecOrBunker });
|
||||
ok();
|
||||
} else if (nsecOrBunker === 'null') {
|
||||
err('Cancelled');
|
||||
} else {
|
||||
err('Unknown return value');
|
||||
}
|
||||
};
|
||||
|
||||
const onOpen = async () => {
|
||||
if (window.location.hash.startsWith('#nostr-login=')) {
|
||||
const nsecOrBunker = window.location.hash.split('#nostr-login=')[1];
|
||||
|
||||
// clear hash from history
|
||||
const url = new URL(window.location.toString());
|
||||
url.hash = '';
|
||||
window.history.replaceState({}, '', url.toString());
|
||||
|
||||
process(nsecOrBunker);
|
||||
}
|
||||
};
|
||||
|
||||
// // use random 'target' to make sure window.opener is
|
||||
// // accessible to the popup
|
||||
// window.open(url, '' + Date.now(), 'popup=true,width=600,height=950');
|
||||
window.addEventListener('hashchange', onOpen);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
if (!this.modal) throw new Error('WTH?');
|
||||
|
||||
this.modal.addEventListener('handleContinue', () => {
|
||||
if (this.modal) {
|
||||
this.modal.isLoading = true;
|
||||
this.emit('onAuthUrlClick', this.modal.authUrl);
|
||||
}
|
||||
});
|
||||
|
||||
this.modal.addEventListener('nlLogin', (event: any) => {
|
||||
login(event.detail);
|
||||
});
|
||||
|
||||
this.modal.addEventListener('nlSignup', (event: any) => {
|
||||
signup(event.detail);
|
||||
});
|
||||
|
||||
this.modal.addEventListener('nlLocalSignup', (event: any) => {
|
||||
localSignup(event.detail);
|
||||
});
|
||||
|
||||
this.modal.addEventListener('nlSignupNjump', (event: any) => {
|
||||
signupNjump();
|
||||
});
|
||||
|
||||
this.modal.addEventListener('nlImportAccount', (event: any) => {
|
||||
importKeys(event.detail);
|
||||
});
|
||||
|
||||
this.modal.addEventListener('nlExportKeys', (event: any) => {
|
||||
exportKeys();
|
||||
});
|
||||
|
||||
this.modal.addEventListener('handleLogoutBanner', () => {
|
||||
this.emit('onLogoutBanner');
|
||||
});
|
||||
|
||||
this.modal.addEventListener('nlNostrConnect', (event: any) => {
|
||||
nostrConnect(event.detail);
|
||||
});
|
||||
|
||||
this.modal.addEventListener('nlNostrConnectDefault', () => {
|
||||
// dedup the calls
|
||||
if (!this.authNostrService.isAuthing()) nostrConnect();
|
||||
});
|
||||
|
||||
this.modal.addEventListener('nlNostrConnectDefaultCancel', () => {
|
||||
console.log('nlNostrConnectDefaultCancel');
|
||||
this.authNostrService.cancelNostrConnect();
|
||||
});
|
||||
|
||||
this.modal.addEventListener('nlSwitchAccount', (event: any) => {
|
||||
const eventInfo: Info = event.detail as Info;
|
||||
|
||||
this.emit('onSwitchAccount', eventInfo);
|
||||
|
||||
// wait a bit, if dialog closes before
|
||||
// switching finishes then launched promise rejects
|
||||
|
||||
// FIXME this calls resetAuth which then prevents
|
||||
// endAuth from getting properly called. 300 is not
|
||||
// enough to init iframe, so there should be a
|
||||
// feedback from switchAccount here
|
||||
setTimeout(() => dialog.close(), 300);
|
||||
});
|
||||
|
||||
this.modal.addEventListener('nlLoginRecentAccount', async (event: any) => {
|
||||
const userInfo: Info = event.detail as Info;
|
||||
|
||||
if (userInfo.authMethod === 'readOnly') {
|
||||
this.authNostrService.setReadOnly(userInfo.pubkey);
|
||||
dialog.close();
|
||||
} else if (userInfo.authMethod === 'otp') {
|
||||
try {
|
||||
this.modal!.dispatchEvent(
|
||||
new CustomEvent('nlLoginOTPUser', {
|
||||
detail: userInfo.nip05 || userInfo.pubkey,
|
||||
}),
|
||||
);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
} else if (userInfo.authMethod === 'extension') {
|
||||
await this.extensionService.trySetExtensionForPubkey(userInfo.pubkey);
|
||||
dialog.close();
|
||||
} else {
|
||||
const input = userInfo.bunkerUrl || userInfo.nip05;
|
||||
if (!input) throw new Error('Bad connect info');
|
||||
login(input, userInfo.domain);
|
||||
}
|
||||
});
|
||||
|
||||
this.modal.addEventListener('nlRemoveRecent', (event: any) => {
|
||||
localStorageRemoveRecent(event.detail as RecentType);
|
||||
this.emit('updateAccounts');
|
||||
});
|
||||
|
||||
const nameToPubkey = async (nameNpub: string) => {
|
||||
let pubkey = '';
|
||||
if (nameNpub.includes('@')) {
|
||||
const { error, pubkey: nip05pubkey } = await checkNip05(nameNpub);
|
||||
if (nip05pubkey) pubkey = nip05pubkey;
|
||||
else throw new Error(error);
|
||||
} else if (nameNpub.startsWith('npub')) {
|
||||
const { type, data } = nip19.decode(nameNpub);
|
||||
if (type === 'npub') pubkey = data as string;
|
||||
else throw new Error('Bad npub');
|
||||
} else if (nameNpub.trim().length === 64) {
|
||||
pubkey = nameNpub.trim();
|
||||
nip19.npubEncode(pubkey); // check
|
||||
}
|
||||
return pubkey;
|
||||
};
|
||||
|
||||
this.modal.addEventListener('nlLoginReadOnly', async (event: any) => {
|
||||
await exec(async () => {
|
||||
const nameNpub = event.detail;
|
||||
const pubkey = await nameToPubkey(nameNpub);
|
||||
this.authNostrService.setReadOnly(pubkey);
|
||||
});
|
||||
});
|
||||
|
||||
this.modal.addEventListener('nlLoginExtension', async () => {
|
||||
if (!this.extensionService.hasExtension()) {
|
||||
throw new Error('No extension');
|
||||
}
|
||||
|
||||
await exec(async () => {
|
||||
if (!this.modal) return;
|
||||
this.modal.isLoadingExtension = true;
|
||||
await this.extensionService.setExtension();
|
||||
this.modal.isLoadingExtension = false;
|
||||
});
|
||||
});
|
||||
|
||||
this.modal.addEventListener('nlLoginOTPUser', async (event: any) => {
|
||||
await exec(
|
||||
async () => {
|
||||
if (!this.modal) return;
|
||||
|
||||
const nameNpub = event.detail;
|
||||
const pubkey = await nameToPubkey(nameNpub);
|
||||
const url = this.opt!.otpRequestUrl! + (this.opt!.otpRequestUrl!.includes('?') ? '&' : '?') + 'pubkey=' + pubkey;
|
||||
const r = await fetch(url);
|
||||
if (r.status !== 200) {
|
||||
console.warn('nostr-login: bad otp reply', r);
|
||||
throw new Error('Failed to send DM');
|
||||
}
|
||||
|
||||
// switch to 'enter code' mode
|
||||
this.modal.isOTP = true;
|
||||
|
||||
// remember for code handler below
|
||||
otpPubkey = pubkey;
|
||||
|
||||
// spinner off
|
||||
this.modal.isLoading = false;
|
||||
},
|
||||
{ start: true },
|
||||
);
|
||||
});
|
||||
|
||||
this.modal.addEventListener('nlLoginOTPCode', async (event: any) => {
|
||||
await exec(
|
||||
async () => {
|
||||
if (!this.modal) return;
|
||||
const code = event.detail;
|
||||
const url = this.opt!.otpReplyUrl! + (this.opt!.otpRequestUrl!.includes('?') ? '&' : '?') + 'pubkey=' + otpPubkey + '&code=' + code;
|
||||
const r = await fetch(url);
|
||||
if (r.status !== 200) {
|
||||
console.warn('nostr-login: bad otp reply', r);
|
||||
throw new Error('Invalid code');
|
||||
}
|
||||
|
||||
const data = await r.text();
|
||||
this.authNostrService.setOTP(otpPubkey, data);
|
||||
|
||||
this.modal.isOTP = false;
|
||||
},
|
||||
{ end: true },
|
||||
);
|
||||
});
|
||||
|
||||
this.modal.addEventListener('nlCheckSignup', async (event: any) => {
|
||||
const { available, taken, error } = await checkNip05(event.detail);
|
||||
if (this.modal) {
|
||||
this.modal.error = String(error);
|
||||
|
||||
if (!error && taken) {
|
||||
this.modal.error = 'Already taken';
|
||||
}
|
||||
|
||||
this.modal.signupNameIsAvailable = available;
|
||||
}
|
||||
});
|
||||
|
||||
this.modal.addEventListener('nlCheckLogin', async (event: any) => {
|
||||
const { available, taken, error } = await checkNip05(event.detail);
|
||||
if (this.modal) {
|
||||
this.modal.error = String(error);
|
||||
if (available) {
|
||||
this.modal.error = 'Name not found';
|
||||
}
|
||||
this.modal.loginIsGood = taken;
|
||||
}
|
||||
});
|
||||
|
||||
const cancel = () => {
|
||||
if (this.modal) {
|
||||
this.modal.isLoading = false;
|
||||
}
|
||||
|
||||
// this.authNostrService.cancelListenNostrConnect();
|
||||
|
||||
dialog.close();
|
||||
err(new Error('Cancelled'));
|
||||
};
|
||||
this.modal.addEventListener('stopFetchHandler', cancel);
|
||||
this.modal.addEventListener('nlCloseModal', cancel);
|
||||
|
||||
this.modal.addEventListener('nlChangeDarkMode', (event: any) => {
|
||||
setDarkMode(event.detail);
|
||||
document.dispatchEvent(new CustomEvent('nlDarkMode', { detail: event.detail }));
|
||||
});
|
||||
|
||||
this.on('onIframeAuthUrlCallEnd', () => {
|
||||
dialog.close();
|
||||
this.modal = null;
|
||||
ok();
|
||||
});
|
||||
|
||||
dialog.showModal();
|
||||
});
|
||||
|
||||
return this.launcherPromise;
|
||||
}
|
||||
|
||||
public async showIframeUrl(url: string) {
|
||||
// make sure we consume the previous promise,
|
||||
// otherwise launch will start await-ing
|
||||
// before modal is created and setting iframeUrl will fail
|
||||
await this.waitReady();
|
||||
|
||||
this.launch({
|
||||
startScreen: 'iframe' as StartScreens,
|
||||
}).catch(() => console.log('closed auth iframe'));
|
||||
|
||||
this.modal!.authUrl = url;
|
||||
}
|
||||
|
||||
public connectModals(defaultOpt: NostrLoginOptions) {
|
||||
const initialModals = async (opt: NostrLoginOptions) => {
|
||||
await this.launch(opt);
|
||||
};
|
||||
|
||||
const nlElements = document.getElementsByTagName('nl-button');
|
||||
|
||||
for (let i = 0; i < nlElements.length; i++) {
|
||||
const theme = nlElements[i].getAttribute('nl-theme');
|
||||
const startScreen = nlElements[i].getAttribute('start-screen');
|
||||
|
||||
const elementOpt = {
|
||||
...defaultOpt,
|
||||
};
|
||||
if (theme) elementOpt.theme = theme;
|
||||
|
||||
switch (startScreen as StartScreens) {
|
||||
case 'login':
|
||||
case 'login-bunker-url':
|
||||
case 'login-read-only':
|
||||
case 'signup':
|
||||
case 'switch-account':
|
||||
case 'welcome':
|
||||
elementOpt.startScreen = startScreen as StartScreens;
|
||||
}
|
||||
|
||||
nlElements[i].addEventListener('click', function () {
|
||||
initialModals(elementOpt);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
public onAuthUrl(url: string) {
|
||||
if (this.modal) {
|
||||
this.modal.authUrl = url;
|
||||
this.modal.isLoading = false;
|
||||
}
|
||||
}
|
||||
|
||||
public onIframeUrl(url: string) {
|
||||
if (this.modal) {
|
||||
console.log('modal iframe url', url);
|
||||
this.modal.iframeUrl = url;
|
||||
}
|
||||
}
|
||||
|
||||
public onCallEnd() {
|
||||
if (this.modal && this.modal.authUrl && this.params.userInfo?.iframeUrl) {
|
||||
this.emit('onIframeAuthUrlCallEnd');
|
||||
}
|
||||
}
|
||||
|
||||
public onUpdateAccounts(accounts: Info[], recents: RecentType[]) {
|
||||
this.accounts = accounts;
|
||||
this.recents = recents;
|
||||
if (!this.modal) return;
|
||||
this.modal.accounts = accounts;
|
||||
this.modal.recents = recents;
|
||||
}
|
||||
|
||||
public onDarkMode(dark: boolean) {
|
||||
if (this.modal) this.modal.darkMode = dark;
|
||||
}
|
||||
}
|
||||
|
||||
export default ModalManager;
|
||||
@@ -1,429 +0,0 @@
|
||||
import NDK, { NDKEvent, NDKFilter, NDKNip46Signer, NDKNostrRpc, NDKRpcRequest, NDKRpcResponse, NDKSubscription, NDKSubscriptionCacheUsage, NostrEvent } from '@nostr-dev-kit/ndk';
|
||||
import { validateEvent, verifySignature } from 'nostr-tools';
|
||||
import { PrivateKeySigner } from './Signer';
|
||||
|
||||
class NostrRpc extends NDKNostrRpc {
|
||||
protected _ndk: NDK;
|
||||
protected _signer: PrivateKeySigner;
|
||||
protected requests: Set<string> = new Set();
|
||||
private sub?: NDKSubscription;
|
||||
protected _useNip44: boolean = false;
|
||||
|
||||
public constructor(ndk: NDK, signer: PrivateKeySigner) {
|
||||
super(ndk, signer, ndk.debug.extend('nip46:signer:rpc'));
|
||||
this._ndk = ndk;
|
||||
this._signer = signer;
|
||||
}
|
||||
|
||||
public async subscribe(filter: NDKFilter): Promise<NDKSubscription> {
|
||||
// NOTE: fixing ndk
|
||||
filter.kinds = filter.kinds?.filter(k => k === 24133);
|
||||
this.sub = await super.subscribe(filter);
|
||||
return this.sub;
|
||||
}
|
||||
|
||||
public stop() {
|
||||
if (this.sub) {
|
||||
this.sub.stop();
|
||||
this.sub = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
public setUseNip44(useNip44: boolean) {
|
||||
this._useNip44 = useNip44;
|
||||
}
|
||||
|
||||
private isNip04(ciphertext: string) {
|
||||
const l = ciphertext.length;
|
||||
if (l < 28) return false;
|
||||
return ciphertext[l - 28] === '?' && ciphertext[l - 27] === 'i' && ciphertext[l - 26] === 'v' && ciphertext[l - 25] === '=';
|
||||
}
|
||||
|
||||
// override to auto-decrypt nip04/nip44
|
||||
public async parseEvent(event: NDKEvent): Promise<NDKRpcRequest | NDKRpcResponse> {
|
||||
const remoteUser = this._ndk.getUser({ pubkey: event.pubkey });
|
||||
remoteUser.ndk = this._ndk;
|
||||
const decrypt = this.isNip04(event.content) ? this._signer.decrypt : this._signer.decryptNip44;
|
||||
const decryptedContent = await decrypt.call(this._signer, remoteUser, event.content);
|
||||
const parsedContent = JSON.parse(decryptedContent);
|
||||
const { id, method, params, result, error } = parsedContent;
|
||||
|
||||
if (method) {
|
||||
return { id, pubkey: event.pubkey, method, params, event };
|
||||
} else {
|
||||
return { id, result, error, event };
|
||||
}
|
||||
}
|
||||
|
||||
public async parseNostrConnectReply(reply: any, secret: string) {
|
||||
const event = new NDKEvent(this._ndk, reply);
|
||||
const parsedEvent = await this.parseEvent(event);
|
||||
console.log('nostr connect parsedEvent', parsedEvent);
|
||||
if (!(parsedEvent as NDKRpcRequest).method) {
|
||||
const response = parsedEvent as NDKRpcResponse;
|
||||
if (response.result !== secret) throw new Error(response.error);
|
||||
return event.pubkey;
|
||||
} else {
|
||||
throw new Error('Bad nostr connect reply');
|
||||
}
|
||||
}
|
||||
|
||||
// ndk doesn't support nostrconnect:
|
||||
// we just listed to an unsolicited reply to
|
||||
// our pubkey and if it's ack/secret - we're fine
|
||||
public async listen(nostrConnectSecret: string): Promise<string> {
|
||||
const pubkey = this._signer.pubkey;
|
||||
console.log('nostr-login listening for conn to', pubkey);
|
||||
const sub = await this.subscribe({
|
||||
'kinds': [24133],
|
||||
'#p': [pubkey],
|
||||
});
|
||||
return new Promise<string>((ok, err) => {
|
||||
sub.on('event', async (event: NDKEvent) => {
|
||||
try {
|
||||
const parsedEvent = await this.parseEvent(event);
|
||||
// console.log('ack parsedEvent', parsedEvent);
|
||||
if (!(parsedEvent as NDKRpcRequest).method) {
|
||||
const response = parsedEvent as NDKRpcResponse;
|
||||
|
||||
// ignore
|
||||
if (response.result === 'auth_url') return;
|
||||
|
||||
// FIXME for now accept 'ack' replies, later on only
|
||||
// accept secrets
|
||||
if (response.result === 'ack' || response.result === nostrConnectSecret) {
|
||||
ok(event.pubkey);
|
||||
} else {
|
||||
err(response.error);
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.log('error parsing event', e, event.rawEvent());
|
||||
}
|
||||
// done
|
||||
this.stop();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// since ndk doesn't yet support perms param
|
||||
// we reimplement the 'connect' call here
|
||||
// instead of await signer.blockUntilReady();
|
||||
public async connect(pubkey: string, token?: string, perms?: string) {
|
||||
return new Promise<void>((ok, err) => {
|
||||
const connectParams = [pubkey!, token || '', perms || ''];
|
||||
this.sendRequest(pubkey!, 'connect', connectParams, 24133, (response: NDKRpcResponse) => {
|
||||
if (response.result === 'ack') {
|
||||
ok();
|
||||
} else {
|
||||
err(response.error);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
protected getId(): string {
|
||||
return Math.random().toString(36).substring(7);
|
||||
}
|
||||
|
||||
public async sendRequest(remotePubkey: string, method: string, params: string[] = [], kind = 24133, cb?: (res: NDKRpcResponse) => void): Promise<NDKRpcResponse> {
|
||||
const id = this.getId();
|
||||
|
||||
// response handler will deduplicate auth urls and responses
|
||||
this.setResponseHandler(id, cb);
|
||||
|
||||
// create and sign request
|
||||
const event = await this.createRequestEvent(id, remotePubkey, method, params, kind);
|
||||
console.log("sendRequest", { event, method, remotePubkey, params });
|
||||
|
||||
// send to relays
|
||||
await event.publish();
|
||||
|
||||
// NOTE: ndk returns a promise that never resolves and
|
||||
// in fact REQUIRES cb to be provided (otherwise no way
|
||||
// to consume the result), we've already stepped on the bug
|
||||
// of waiting for this unresolvable result, so now we return
|
||||
// undefined to make sure waiters fail, not hang.
|
||||
// @ts-ignore
|
||||
return undefined as NDKRpcResponse;
|
||||
}
|
||||
|
||||
protected setResponseHandler(id: string, cb?: (res: NDKRpcResponse) => void) {
|
||||
let authUrlSent = false;
|
||||
const now = Date.now();
|
||||
return new Promise<NDKRpcResponse>(() => {
|
||||
const responseHandler = (response: NDKRpcResponse) => {
|
||||
if (response.result === 'auth_url') {
|
||||
this.once(`response-${id}`, responseHandler);
|
||||
if (!authUrlSent) {
|
||||
authUrlSent = true;
|
||||
this.emit('authUrl', response.error);
|
||||
}
|
||||
} else if (cb) {
|
||||
if (this.requests.has(id)) {
|
||||
this.requests.delete(id);
|
||||
console.log('nostr-login processed nip46 request in', Date.now() - now, 'ms');
|
||||
cb(response);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
this.once(`response-${id}`, responseHandler);
|
||||
});
|
||||
}
|
||||
|
||||
protected async createRequestEvent(id: string, remotePubkey: string, method: string, params: string[] = [], kind = 24133) {
|
||||
this.requests.add(id);
|
||||
const localUser = await this._signer.user();
|
||||
const remoteUser = this._ndk.getUser({ pubkey: remotePubkey });
|
||||
const request = { id, method, params };
|
||||
|
||||
const event = new NDKEvent(this._ndk, {
|
||||
kind,
|
||||
content: JSON.stringify(request),
|
||||
tags: [['p', remotePubkey]],
|
||||
pubkey: localUser.pubkey,
|
||||
} as NostrEvent);
|
||||
|
||||
const useNip44 = this._useNip44 && method !== 'create_account';
|
||||
const encrypt = useNip44 ? this._signer.encryptNip44 : this._signer.encrypt;
|
||||
event.content = await encrypt.call(this._signer, remoteUser, event.content);
|
||||
await event.sign(this._signer);
|
||||
|
||||
return event;
|
||||
}
|
||||
}
|
||||
|
||||
export class IframeNostrRpc extends NostrRpc {
|
||||
private peerOrigin?: string;
|
||||
private iframePort?: MessagePort;
|
||||
private iframeRequests = new Map<string, { id: string; pubkey: string }>();
|
||||
|
||||
public constructor(ndk: NDK, localSigner: PrivateKeySigner, iframePeerOrigin?: string) {
|
||||
super(ndk, localSigner);
|
||||
this._ndk = ndk;
|
||||
this.peerOrigin = iframePeerOrigin;
|
||||
}
|
||||
|
||||
public async subscribe(filter: NDKFilter): Promise<NDKSubscription> {
|
||||
if (!this.peerOrigin) return super.subscribe(filter);
|
||||
return new NDKSubscription(
|
||||
this._ndk,
|
||||
{},
|
||||
{
|
||||
// don't send to relay
|
||||
closeOnEose: true,
|
||||
cacheUsage: NDKSubscriptionCacheUsage.ONLY_CACHE,
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
public setWorkerIframePort(port: MessagePort) {
|
||||
if (!this.peerOrigin) throw new Error('Unexpected iframe port');
|
||||
|
||||
this.iframePort = port;
|
||||
|
||||
// to make sure Chrome doesn't terminate the channel
|
||||
setInterval(() => {
|
||||
console.log('iframe-nip46 ping');
|
||||
this.iframePort!.postMessage('ping');
|
||||
}, 5000);
|
||||
|
||||
port.onmessage = async ev => {
|
||||
console.log('iframe-nip46 got response', ev.data);
|
||||
if (typeof ev.data === 'string' && ev.data.startsWith('errorNoKey')) {
|
||||
const event_id = ev.data.split(':')[1];
|
||||
const { id = '', pubkey = '' } = this.iframeRequests.get(event_id) || {};
|
||||
if (id && pubkey && this.requests.has(id)) this.emit(`iframeRestart-${pubkey}`);
|
||||
return;
|
||||
}
|
||||
|
||||
// a copy-paste from rpc.subscribe
|
||||
try {
|
||||
const event = ev.data;
|
||||
|
||||
if (!validateEvent(event)) throw new Error('Invalid event from iframe');
|
||||
if (!verifySignature(event)) throw new Error('Invalid event signature from iframe');
|
||||
const nevent = new NDKEvent(this._ndk, event);
|
||||
const parsedEvent = await this.parseEvent(nevent);
|
||||
// we're only implementing client-side rpc
|
||||
if (!(parsedEvent as NDKRpcRequest).method) {
|
||||
console.log('parsed response', parsedEvent);
|
||||
this.emit(`response-${parsedEvent.id}`, parsedEvent);
|
||||
}
|
||||
} catch (e) {
|
||||
console.log('error parsing event', e, ev.data);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
public async sendRequest(remotePubkey: string, method: string, params: string[] = [], kind = 24133, cb?: (res: NDKRpcResponse) => void): Promise<NDKRpcResponse> {
|
||||
const id = this.getId();
|
||||
|
||||
// create and sign request event
|
||||
const event = await this.createRequestEvent(id, remotePubkey, method, params, kind);
|
||||
|
||||
// set response handler, it will dedup auth urls,
|
||||
// and also dedup response handlers - we're sending
|
||||
// to relays and to iframe
|
||||
this.setResponseHandler(id, cb);
|
||||
|
||||
if (this.iframePort) {
|
||||
// map request event id to request id, if iframe
|
||||
// has no key it will reply with error:event_id (it can't
|
||||
// decrypt the request id without keys)
|
||||
this.iframeRequests.set(event.id, { id, pubkey: remotePubkey });
|
||||
|
||||
// send to iframe
|
||||
console.log('iframe-nip46 sending request to', this.peerOrigin, event.rawEvent());
|
||||
this.iframePort.postMessage(event.rawEvent());
|
||||
} else {
|
||||
// send to relays
|
||||
await event.publish();
|
||||
}
|
||||
|
||||
// see notes in 'super'
|
||||
// @ts-ignore
|
||||
return undefined as NDKRpcResponse;
|
||||
}
|
||||
}
|
||||
|
||||
export class ReadyListener {
|
||||
origin: string;
|
||||
messages: string[];
|
||||
promise: Promise<any>;
|
||||
|
||||
constructor(messages: string[], origin: string) {
|
||||
this.origin = origin;
|
||||
this.messages = messages;
|
||||
this.promise = new Promise<any>(ok => {
|
||||
console.log(new Date(), 'started listener for', this.messages);
|
||||
|
||||
// ready message handler
|
||||
const onReady = async (e: MessageEvent) => {
|
||||
const originHostname = new URL(origin!).hostname;
|
||||
const messageHostname = new URL(e.origin).hostname;
|
||||
// same host or subdomain
|
||||
const validHost = messageHostname === originHostname || messageHostname.endsWith('.' + originHostname);
|
||||
if (!validHost || !Array.isArray(e.data) || !e.data.length || !this.messages.includes(e.data[0])) {
|
||||
// console.log(new Date(), 'got invalid ready message', e.origin, e.data);
|
||||
return;
|
||||
}
|
||||
|
||||
console.log(new Date(), 'got ready message from', e.origin, e.data);
|
||||
window.removeEventListener('message', onReady);
|
||||
ok(e.data);
|
||||
};
|
||||
window.addEventListener('message', onReady);
|
||||
});
|
||||
}
|
||||
|
||||
async wait(): Promise<any> {
|
||||
console.log(new Date(), 'waiting for', this.messages);
|
||||
const r = await this.promise;
|
||||
// NOTE: timer here doesn't help bcs it must be activated when
|
||||
// user "confirms", but that's happening on a different
|
||||
// origin and we can't really know.
|
||||
// await new Promise<any>((ok, err) => {
|
||||
// // 10 sec should be more than enough
|
||||
// setTimeout(() => err(new Date() + ' timeout for ' + this.message), 10000);
|
||||
|
||||
// // if promise already resolved or will resolve in the future
|
||||
// this.promise.then(ok);
|
||||
// });
|
||||
|
||||
console.log(new Date(), 'finished waiting for', this.messages, r);
|
||||
return r;
|
||||
}
|
||||
}
|
||||
|
||||
export class Nip46Signer extends NDKNip46Signer {
|
||||
private _userPubkey: string = '';
|
||||
private _rpc: IframeNostrRpc;
|
||||
|
||||
constructor(ndk: NDK, localSigner: PrivateKeySigner, signerPubkey: string, iframeOrigin?: string) {
|
||||
super(ndk, signerPubkey, localSigner);
|
||||
|
||||
// override with our own rpc implementation
|
||||
this._rpc = new IframeNostrRpc(ndk, localSigner, iframeOrigin);
|
||||
this._rpc.setUseNip44(true); // !!this.params.optionsModal.dev);
|
||||
this._rpc.on('authUrl', (url: string) => {
|
||||
this.emit('authUrl', url);
|
||||
});
|
||||
|
||||
this.rpc = this._rpc;
|
||||
}
|
||||
|
||||
get userPubkey() {
|
||||
return this._userPubkey;
|
||||
}
|
||||
|
||||
private async setSignerPubkey(signerPubkey: string, sameAsUser: boolean = false) {
|
||||
console.log("setSignerPubkey", signerPubkey);
|
||||
|
||||
// ensure it's set
|
||||
this.remotePubkey = signerPubkey;
|
||||
|
||||
// when we're sure it's known
|
||||
this._rpc.on(`iframeRestart-${signerPubkey}`, () => {
|
||||
this.emit('iframeRestart');
|
||||
});
|
||||
|
||||
// now call getPublicKey and swap remotePubkey w/ that
|
||||
await this.initUserPubkey(sameAsUser ? signerPubkey : '');
|
||||
}
|
||||
|
||||
public async initUserPubkey(hintPubkey?: string) {
|
||||
if (this._userPubkey) throw new Error('Already called initUserPubkey');
|
||||
|
||||
if (hintPubkey) {
|
||||
this._userPubkey = hintPubkey;
|
||||
return;
|
||||
}
|
||||
|
||||
this._userPubkey = await new Promise<string>((ok, err) => {
|
||||
if (!this.remotePubkey) throw new Error('Signer pubkey not set');
|
||||
|
||||
console.log("get_public_key", this.remotePubkey);
|
||||
this._rpc.sendRequest(this.remotePubkey, 'get_public_key', [], 24133, (response: NDKRpcResponse) => {
|
||||
ok(response.result);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
public async listen(nostrConnectSecret: string) {
|
||||
const signerPubkey = await (this.rpc as IframeNostrRpc).listen(nostrConnectSecret);
|
||||
await this.setSignerPubkey(signerPubkey);
|
||||
}
|
||||
|
||||
public async connect(token?: string, perms?: string) {
|
||||
if (!this.remotePubkey) throw new Error('No signer pubkey');
|
||||
await this._rpc.connect(this.remotePubkey, token, perms);
|
||||
await this.setSignerPubkey(this.remotePubkey);
|
||||
}
|
||||
|
||||
public async setListenReply(reply: any, nostrConnectSecret: string) {
|
||||
const signerPubkey = await this._rpc.parseNostrConnectReply(reply, nostrConnectSecret);
|
||||
await this.setSignerPubkey(signerPubkey, true);
|
||||
}
|
||||
|
||||
public async createAccount2({ bunkerPubkey, name, domain, perms = '' }: { bunkerPubkey: string; name: string; domain: string; perms?: string }) {
|
||||
const params = [
|
||||
name,
|
||||
domain,
|
||||
'', // email
|
||||
perms,
|
||||
];
|
||||
|
||||
const r = await new Promise<NDKRpcResponse>(ok => {
|
||||
this.rpc.sendRequest(bunkerPubkey, 'create_account', params, undefined, ok);
|
||||
});
|
||||
|
||||
console.log('create_account pubkey', r);
|
||||
if (r.result === 'error') {
|
||||
throw new Error(r.error);
|
||||
}
|
||||
|
||||
return r.result;
|
||||
}
|
||||
}
|
||||
@@ -1,107 +0,0 @@
|
||||
import { Info } from 'nostr-login-components/dist/types/types';
|
||||
|
||||
export interface Signer {
|
||||
signEvent: (event: any) => Promise<any>;
|
||||
nip04: {
|
||||
encrypt: (pubkey: string, plaintext: string) => Promise<string>;
|
||||
decrypt: (pubkey: string, ciphertext: string) => Promise<string>;
|
||||
};
|
||||
nip44: {
|
||||
encrypt: (pubkey: string, plaintext: string) => Promise<string>;
|
||||
decrypt: (pubkey: string, ciphertext: string) => Promise<string>;
|
||||
};
|
||||
}
|
||||
|
||||
export interface NostrObjectParams {
|
||||
waitReady(): Promise<void>;
|
||||
getUserInfo(): Info | null;
|
||||
launch(): Promise<void>;
|
||||
getSigner(): Signer;
|
||||
wait<T>(cb: () => Promise<T>): Promise<T>;
|
||||
}
|
||||
|
||||
class Nostr {
|
||||
#params: NostrObjectParams;
|
||||
private nip04: {
|
||||
encrypt: (pubkey: string, plaintext: string) => Promise<any>;
|
||||
decrypt: (pubkey: string, ciphertext: string) => Promise<any>;
|
||||
};
|
||||
private nip44: {
|
||||
encrypt: (pubkey: string, plaintext: string) => Promise<any>;
|
||||
decrypt: (pubkey: string, ciphertext: string) => Promise<any>;
|
||||
};
|
||||
|
||||
constructor(params: NostrObjectParams) {
|
||||
this.#params = params;
|
||||
|
||||
this.getPublicKey = this.getPublicKey.bind(this);
|
||||
this.signEvent = this.signEvent.bind(this);
|
||||
this.getRelays = this.getRelays.bind(this);
|
||||
this.nip04 = {
|
||||
encrypt: this.encrypt04.bind(this),
|
||||
decrypt: this.decrypt04.bind(this),
|
||||
};
|
||||
this.nip44 = {
|
||||
encrypt: this.encrypt44.bind(this),
|
||||
decrypt: this.decrypt44.bind(this),
|
||||
};
|
||||
}
|
||||
|
||||
private async ensureAuth() {
|
||||
await this.#params.waitReady();
|
||||
|
||||
// authed?
|
||||
if (this.#params.getUserInfo()) return;
|
||||
|
||||
// launch auth flow
|
||||
await this.#params.launch();
|
||||
|
||||
// give up
|
||||
if (!this.#params.getUserInfo()) {
|
||||
throw new Error('Rejected by user');
|
||||
}
|
||||
}
|
||||
|
||||
async getPublicKey() {
|
||||
await this.ensureAuth();
|
||||
const userInfo = this.#params.getUserInfo();
|
||||
if (userInfo) {
|
||||
return userInfo.pubkey;
|
||||
} else {
|
||||
throw new Error('No user');
|
||||
}
|
||||
}
|
||||
|
||||
// @ts-ignore
|
||||
async signEvent(event) {
|
||||
await this.ensureAuth();
|
||||
return this.#params.wait(async () => await this.#params.getSigner().signEvent(event));
|
||||
}
|
||||
|
||||
async getRelays() {
|
||||
// FIXME implement!
|
||||
return {};
|
||||
}
|
||||
|
||||
async encrypt04(pubkey: string, plaintext: string) {
|
||||
await this.ensureAuth();
|
||||
return this.#params.wait(async () => await this.#params.getSigner().nip04.encrypt(pubkey, plaintext));
|
||||
}
|
||||
|
||||
async decrypt04(pubkey: string, ciphertext: string) {
|
||||
await this.ensureAuth();
|
||||
return this.#params.wait(async () => await this.#params.getSigner().nip04.decrypt(pubkey, ciphertext));
|
||||
}
|
||||
|
||||
async encrypt44(pubkey: string, plaintext: string) {
|
||||
await this.ensureAuth();
|
||||
return this.#params.wait(async () => await this.#params.getSigner().nip44.encrypt(pubkey, plaintext));
|
||||
}
|
||||
|
||||
async decrypt44(pubkey: string, ciphertext: string) {
|
||||
await this.ensureAuth();
|
||||
return this.#params.wait(async () => await this.#params.getSigner().nip44.decrypt(pubkey, ciphertext));
|
||||
}
|
||||
}
|
||||
|
||||
export default Nostr;
|
||||
@@ -1,99 +0,0 @@
|
||||
import { Nostr, NostrParams } from './';
|
||||
import { EventEmitter } from 'tseep';
|
||||
|
||||
class NostrExtensionService extends EventEmitter {
|
||||
private params: NostrParams;
|
||||
private nostrExtension: any | undefined;
|
||||
|
||||
constructor(params: NostrParams) {
|
||||
super();
|
||||
this.params = params;
|
||||
}
|
||||
|
||||
public startCheckingExtension(nostr: Nostr) {
|
||||
if (this.checkExtension(nostr)) return;
|
||||
|
||||
// watch out for extension trying to overwrite us
|
||||
const to = setInterval(() => {
|
||||
if (this.checkExtension(nostr)) clearTimeout(to);
|
||||
}, 100);
|
||||
}
|
||||
|
||||
private checkExtension(nostr: Nostr) {
|
||||
// @ts-ignore
|
||||
if (!this.nostrExtension && window.nostr && window.nostr !== nostr) {
|
||||
this.initExtension(nostr);
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
private async initExtension(nostr: Nostr, lastTry?: boolean) {
|
||||
// @ts-ignore
|
||||
this.nostrExtension = window.nostr;
|
||||
// @ts-ignore
|
||||
window.nostr = nostr;
|
||||
// we're signed in with extesions? well execute that
|
||||
if (this.params.userInfo?.authMethod === 'extension') {
|
||||
await this.trySetExtensionForPubkey(this.params.userInfo.pubkey);
|
||||
}
|
||||
|
||||
// schedule another check
|
||||
if (!lastTry) {
|
||||
setTimeout(() => {
|
||||
// NOTE: we can't know if user has >1 extension and thus
|
||||
// if the current one we detected is the actual 'last one'
|
||||
// that will set the window.nostr. So the simplest
|
||||
// solution is to wait a bit more, hoping that if one
|
||||
// extension started then the rest are likely to start soon,
|
||||
// and then just capture the most recent one
|
||||
|
||||
// @ts-ignore
|
||||
if (window.nostr !== nostr && this.nostrExtension !== window.nostr) {
|
||||
this.initExtension(nostr, true);
|
||||
}
|
||||
}, 300);
|
||||
}
|
||||
|
||||
// in the worst case of app saving the nostrExtension reference
|
||||
// it will be calling it directly, not a big deal
|
||||
}
|
||||
|
||||
private async setExtensionReadPubkey(expectedPubkey?: string) {
|
||||
window.nostr = this.nostrExtension;
|
||||
// @ts-ignore
|
||||
const pubkey = await window.nostr.getPublicKey();
|
||||
if (expectedPubkey && expectedPubkey !== pubkey) {
|
||||
this.emit('extensionLogout');
|
||||
} else {
|
||||
this.emit('extensionLogin', pubkey);
|
||||
}
|
||||
}
|
||||
|
||||
public async trySetExtensionForPubkey(expectedPubkey: string) {
|
||||
if (this.nostrExtension) {
|
||||
return this.setExtensionReadPubkey(expectedPubkey);
|
||||
}
|
||||
}
|
||||
|
||||
public async setExtension() {
|
||||
return this.setExtensionReadPubkey();
|
||||
}
|
||||
|
||||
public unsetExtension(nostr: Nostr) {
|
||||
if (window.nostr === this.nostrExtension) {
|
||||
// @ts-ignore
|
||||
window.nostr = nostr;
|
||||
}
|
||||
}
|
||||
|
||||
public getExtension() {
|
||||
return this.nostrExtension;
|
||||
}
|
||||
|
||||
public hasExtension() {
|
||||
return !!this.nostrExtension;
|
||||
}
|
||||
}
|
||||
|
||||
export default NostrExtensionService;
|
||||
@@ -1,18 +0,0 @@
|
||||
import { Info } from 'nostr-login-components/dist/types/types';
|
||||
import { NostrLoginOptions } from '../types';
|
||||
|
||||
class NostrParams {
|
||||
public userInfo: Info | null;
|
||||
public optionsModal: NostrLoginOptions;
|
||||
constructor() {
|
||||
this.userInfo = null;
|
||||
|
||||
this.optionsModal = {
|
||||
theme: 'default',
|
||||
startScreen: 'welcome',
|
||||
devOverrideBunkerOrigin: '',
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export default NostrParams;
|
||||
@@ -1,27 +0,0 @@
|
||||
class Popup {
|
||||
private popup: Window | null = null;
|
||||
|
||||
constructor() {}
|
||||
|
||||
public openPopup(url: string) {
|
||||
// user might have closed it already
|
||||
if (!this.popup || this.popup.closed) {
|
||||
// NOTE: do not set noreferrer, bunker might use referrer to
|
||||
// simplify the naming of the connected app.
|
||||
// NOTE: do not pass noopener, otherwise null is returned
|
||||
this.popup = window.open(url, '_blank', 'width=400,height=700');
|
||||
console.log('popup', this.popup);
|
||||
if (!this.popup) throw new Error('Popup blocked. Try again, please!');
|
||||
}
|
||||
}
|
||||
|
||||
public closePopup() {
|
||||
// make sure we release the popup
|
||||
try {
|
||||
this.popup?.close();
|
||||
this.popup = null;
|
||||
} catch {}
|
||||
}
|
||||
}
|
||||
|
||||
export default Popup;
|
||||
@@ -1,67 +0,0 @@
|
||||
import { EventEmitter } from 'tseep';
|
||||
import { CALL_TIMEOUT } from '../const';
|
||||
|
||||
class ProcessManager extends EventEmitter {
|
||||
private callCount: number = 0;
|
||||
private callTimer: NodeJS.Timeout | undefined;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
public onAuthUrl() {
|
||||
if (Boolean(this.callTimer)) {
|
||||
clearTimeout(this.callTimer);
|
||||
}
|
||||
}
|
||||
|
||||
public onIframeUrl() {
|
||||
if (Boolean(this.callTimer)) {
|
||||
clearTimeout(this.callTimer);
|
||||
}
|
||||
}
|
||||
|
||||
public async wait<T>(cb: () => Promise<T>): Promise<T> {
|
||||
// FIXME only allow 1 parallel req
|
||||
|
||||
if (!this.callTimer) {
|
||||
this.callTimer = setTimeout(() => this.emit('onCallTimeout'), CALL_TIMEOUT);
|
||||
}
|
||||
|
||||
if (!this.callCount) {
|
||||
this.emit('onCallStart');
|
||||
}
|
||||
|
||||
this.callCount++;
|
||||
|
||||
let error;
|
||||
let result;
|
||||
|
||||
try {
|
||||
result = await cb();
|
||||
} catch (e) {
|
||||
error = e;
|
||||
}
|
||||
|
||||
this.callCount--;
|
||||
|
||||
this.emit('onCallEnd');
|
||||
|
||||
if (this.callTimer) {
|
||||
clearTimeout(this.callTimer);
|
||||
}
|
||||
|
||||
this.callTimer = undefined;
|
||||
|
||||
if (error) {
|
||||
throw error;
|
||||
}
|
||||
|
||||
// we can't return undefined bcs an exception is
|
||||
// thrown above on error
|
||||
// @ts-ignore
|
||||
return result;
|
||||
}
|
||||
}
|
||||
|
||||
export default ProcessManager;
|
||||
@@ -1,25 +0,0 @@
|
||||
import { NDKPrivateKeySigner, NDKUser } from '@nostr-dev-kit/ndk';
|
||||
import { Nip44 } from '../utils/nip44';
|
||||
import { getPublicKey } from 'nostr-tools';
|
||||
|
||||
export class PrivateKeySigner extends NDKPrivateKeySigner {
|
||||
private nip44: Nip44 = new Nip44();
|
||||
private _pubkey: string;
|
||||
|
||||
constructor(privateKey: string) {
|
||||
super(privateKey);
|
||||
this._pubkey = getPublicKey(privateKey);
|
||||
}
|
||||
|
||||
get pubkey() {
|
||||
return this._pubkey;
|
||||
}
|
||||
|
||||
encryptNip44(recipient: NDKUser, value: string): Promise<string> {
|
||||
return Promise.resolve(this.nip44.encrypt(this.privateKey!, recipient.pubkey, value));
|
||||
}
|
||||
|
||||
decryptNip44(sender: NDKUser, value: string): Promise<string> {
|
||||
return Promise.resolve(this.nip44.decrypt(this.privateKey!, sender.pubkey, value));
|
||||
}
|
||||
}
|
||||
@@ -1,8 +0,0 @@
|
||||
export { default as BannerManager } from './BannerManager';
|
||||
export { default as AuthNostrService } from './AuthNostrService';
|
||||
export { default as ModalManager } from './ModalManager';
|
||||
export { default as Nostr } from './Nostr';
|
||||
export { default as NostrExtensionService } from './NostrExtensionService';
|
||||
export { default as NostrParams } from './NostrParams';
|
||||
export { default as Popup } from './Popup';
|
||||
export { default as ProcessManager } from './ProcessManager';
|
||||
@@ -1,124 +0,0 @@
|
||||
import { Info, AuthMethod, ConnectionString, RecentType, BannerNotify } from 'nostr-login-components/dist/types/types';
|
||||
|
||||
export interface NostrLoginAuthOptions {
|
||||
localNsec?: string;
|
||||
relays?: string[];
|
||||
type: 'login' | 'signup' | 'logout';
|
||||
method?: AuthMethod;
|
||||
pubkey?: string;
|
||||
otpData?: string;
|
||||
name?: string;
|
||||
}
|
||||
|
||||
// NOTE: must be a subset of CURRENT_MODULE enum
|
||||
export type StartScreens =
|
||||
| 'welcome'
|
||||
| 'welcome-login'
|
||||
| 'welcome-signup'
|
||||
| 'signup'
|
||||
| 'local-signup'
|
||||
| 'login'
|
||||
| 'otp'
|
||||
| 'connect'
|
||||
| 'login-bunker-url'
|
||||
| 'login-read-only'
|
||||
| 'connection-string'
|
||||
| 'switch-account'
|
||||
| 'import';
|
||||
|
||||
export interface NostrLoginOptions {
|
||||
// optional
|
||||
theme?: string;
|
||||
startScreen?: StartScreens;
|
||||
bunkers?: string;
|
||||
onAuth?: (npub: string, options: NostrLoginAuthOptions) => void;
|
||||
perms?: string;
|
||||
darkMode?: boolean;
|
||||
|
||||
// do not show the banner, modals must be `launch`-ed
|
||||
noBanner?: boolean;
|
||||
|
||||
// forward reqs to this bunker origin for testing
|
||||
devOverrideBunkerOrigin?: string;
|
||||
|
||||
// deprecated, use methods=['local']
|
||||
// use local signup instead of nostr connect
|
||||
localSignup?: boolean;
|
||||
|
||||
// allowed auth methods
|
||||
methods?: AuthMethod[];
|
||||
|
||||
// otp endpoints
|
||||
otpRequestUrl?: string;
|
||||
otpReplyUrl?: string;
|
||||
|
||||
// welcome screen's title/desc
|
||||
title?: string;
|
||||
description?: string;
|
||||
|
||||
// comma-separated list of relays added
|
||||
// to relay list of new profiles created with local signup
|
||||
signupRelays?: string;
|
||||
|
||||
// relay list to override hardcoded `OUTBOX_RELAYS` constant
|
||||
outboxRelays?: string[];
|
||||
|
||||
// dev mode
|
||||
dev?: boolean;
|
||||
|
||||
// use start.njump.me instead of local signup
|
||||
signupNstart?: boolean;
|
||||
|
||||
// list of npubs to auto/suggest-follow on signup
|
||||
followNpubs?: string;
|
||||
|
||||
// when method call auth needed, instead of showing
|
||||
// the modal, we start waiting for incoming nip46
|
||||
// connection and send the nostrconnect string using
|
||||
// nlNeedAuth event
|
||||
customNostrConnect?: boolean;
|
||||
}
|
||||
|
||||
export interface IBanner {
|
||||
userInfo?: Info | null;
|
||||
titleBanner?: string;
|
||||
isLoading?: boolean;
|
||||
listNotifies?: string[];
|
||||
accounts?: Info[];
|
||||
isOpen?: boolean;
|
||||
darkMode?: boolean;
|
||||
notify?: BannerNotify;
|
||||
}
|
||||
|
||||
export type TypeBanner = IBanner & HTMLElement;
|
||||
|
||||
export interface IModal {
|
||||
authUrl?: string;
|
||||
iframeUrl?: string;
|
||||
isLoading?: boolean;
|
||||
isOTP?: boolean;
|
||||
isLoadingExtension?: boolean;
|
||||
localSignup?: boolean;
|
||||
signupNjump?: boolean;
|
||||
njumpIframe?: string;
|
||||
authMethods?: AuthMethod[];
|
||||
hasExtension?: boolean;
|
||||
hasOTP?: boolean;
|
||||
error?: string;
|
||||
signupNameIsAvailable?: string | boolean;
|
||||
loginIsGood?: string | boolean;
|
||||
recents?: RecentType[];
|
||||
accounts?: Info[];
|
||||
darkMode?: boolean;
|
||||
welcomeTitle?: string;
|
||||
welcomeDescription?: string;
|
||||
connectionString?: string;
|
||||
connectionStringServices?: ConnectionString[];
|
||||
}
|
||||
|
||||
export type TypeModal = IModal & HTMLElement;
|
||||
|
||||
export interface Response {
|
||||
result?: string;
|
||||
error?: string;
|
||||
}
|
||||
@@ -1,326 +0,0 @@
|
||||
import { Info, RecentType } from 'nostr-login-components/dist/types/types';
|
||||
import NDK, { NDKEvent, NDKRelaySet, NDKSigner, NDKUser } from '@nostr-dev-kit/ndk';
|
||||
import { generatePrivateKey } from 'nostr-tools';
|
||||
import { NostrLoginOptions } from '../types';
|
||||
|
||||
const LOCAL_STORE_KEY = '__nostrlogin_nip46';
|
||||
const LOGGED_IN_ACCOUNTS = '__nostrlogin_accounts';
|
||||
const RECENT_ACCOUNTS = '__nostrlogin_recent';
|
||||
const OUTBOX_RELAYS = ['wss://purplepag.es', 'wss://relay.nos.social', 'wss://user.kindpag.es', 'wss://relay.damus.io', 'wss://nos.lol'];
|
||||
const DEFAULT_SIGNUP_RELAYS = ['wss://relay.damus.io/', 'wss://nos.lol/', 'wss://relay.primal.net/'];
|
||||
|
||||
export const localStorageSetItem = (key: string, value: string) => {
|
||||
localStorage.setItem(key, value);
|
||||
};
|
||||
|
||||
export const localStorageGetItem = (key: string) => {
|
||||
const value = window.localStorage.getItem(key);
|
||||
|
||||
if (value) {
|
||||
try {
|
||||
return JSON.parse(value);
|
||||
} catch {}
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
export const localStorageRemoveItem = (key: string) => {
|
||||
localStorage.removeItem(key);
|
||||
};
|
||||
|
||||
export const fetchProfile = async (info: Info, profileNdk: NDK) => {
|
||||
const user = new NDKUser({ pubkey: info.pubkey });
|
||||
|
||||
user.ndk = profileNdk;
|
||||
|
||||
return await user.fetchProfile();
|
||||
};
|
||||
|
||||
export const prepareSignupRelays = (signupRelays?: string) => {
|
||||
const relays = (signupRelays || '')
|
||||
.split(',')
|
||||
.map(r => r.trim())
|
||||
.filter(r => r.startsWith('ws'));
|
||||
if (!relays.length) relays.push(...DEFAULT_SIGNUP_RELAYS);
|
||||
return relays;
|
||||
};
|
||||
|
||||
export const createProfile = async (info: Info, profileNdk: NDK, signer: NDKSigner, signupRelays?: string, outboxRelays?: string[]) => {
|
||||
const meta = {
|
||||
name: info.name,
|
||||
};
|
||||
|
||||
const profileEvent = new NDKEvent(profileNdk, {
|
||||
kind: 0,
|
||||
created_at: Math.floor(Date.now() / 1000),
|
||||
pubkey: info.pubkey,
|
||||
content: JSON.stringify(meta),
|
||||
tags: [],
|
||||
});
|
||||
if (window.location.hostname) profileEvent.tags.push(['client', window.location.hostname]);
|
||||
|
||||
const relaysEvent = new NDKEvent(profileNdk, {
|
||||
kind: 10002,
|
||||
created_at: Math.floor(Date.now() / 1000),
|
||||
pubkey: info.pubkey,
|
||||
content: '',
|
||||
tags: [],
|
||||
});
|
||||
|
||||
const relays = prepareSignupRelays(signupRelays)
|
||||
for (const r of relays) {
|
||||
relaysEvent.tags.push(['r', r]);
|
||||
}
|
||||
|
||||
await profileEvent.sign(signer);
|
||||
console.log('signed profile', profileEvent);
|
||||
await relaysEvent.sign(signer);
|
||||
console.log('signed relays', relaysEvent);
|
||||
|
||||
const outboxRelaysFinal = outboxRelays && outboxRelays.length ? outboxRelays : OUTBOX_RELAYS;
|
||||
|
||||
await profileEvent.publish(NDKRelaySet.fromRelayUrls(outboxRelaysFinal, profileNdk));
|
||||
console.log('published profile', profileEvent);
|
||||
await relaysEvent.publish(NDKRelaySet.fromRelayUrls(outboxRelaysFinal, profileNdk));
|
||||
console.log('published relays', relaysEvent);
|
||||
};
|
||||
|
||||
export const bunkerUrlToInfo = (bunkerUrl: string, sk = ''): Info => {
|
||||
const url = new URL(bunkerUrl);
|
||||
|
||||
return {
|
||||
pubkey: '',
|
||||
signerPubkey: url.hostname || url.pathname.split('//')[1],
|
||||
sk: sk || generatePrivateKey(),
|
||||
relays: url.searchParams.getAll('relay'),
|
||||
token: url.searchParams.get('secret') || '',
|
||||
authMethod: 'connect',
|
||||
};
|
||||
};
|
||||
|
||||
export const isBunkerUrl = (value: string) => value.startsWith('bunker://');
|
||||
|
||||
export const getBunkerUrl = async (value: string, optionsModal: NostrLoginOptions) => {
|
||||
if (!value) {
|
||||
return '';
|
||||
}
|
||||
|
||||
if (isBunkerUrl(value)) {
|
||||
return value;
|
||||
}
|
||||
|
||||
if (value.includes('@')) {
|
||||
const [name, domain] = value.toLocaleLowerCase().split('@');
|
||||
const origin = optionsModal.devOverrideBunkerOrigin || `https://${domain}`;
|
||||
const bunkerUrl = `${origin}/.well-known/nostr.json?name=_`;
|
||||
const userUrl = `${origin}/.well-known/nostr.json?name=${name}`;
|
||||
const bunker = await fetch(bunkerUrl);
|
||||
const bunkerData = await bunker.json();
|
||||
const bunkerPubkey = bunkerData.names['_'];
|
||||
const bunkerRelays = bunkerData.nip46[bunkerPubkey];
|
||||
const user = await fetch(userUrl);
|
||||
const userData = await user.json();
|
||||
const userPubkey = userData.names[name];
|
||||
// console.log({
|
||||
// bunkerData, userData, bunkerPubkey, bunkerRelays, userPubkey,
|
||||
// name, domain, origin
|
||||
// })
|
||||
if (!bunkerRelays.length) {
|
||||
throw new Error('Bunker relay not provided');
|
||||
}
|
||||
|
||||
return `bunker://${userPubkey}?relay=${bunkerRelays[0]}`;
|
||||
}
|
||||
|
||||
throw new Error('Invalid user name or bunker url');
|
||||
};
|
||||
|
||||
export const checkNip05 = async (nip05: string) => {
|
||||
let available = false;
|
||||
let error = '';
|
||||
let pubkey = '';
|
||||
await (async () => {
|
||||
if (!nip05 || !nip05.includes('@')) return;
|
||||
|
||||
const [name, domain] = nip05.toLocaleLowerCase().split('@');
|
||||
if (!name) return;
|
||||
|
||||
const REGEXP = new RegExp(/^[\w-.]+@([\w-]+\.)+[\w-]{2,8}$/g);
|
||||
if (!REGEXP.test(nip05)) {
|
||||
error = 'Invalid name';
|
||||
return;
|
||||
}
|
||||
|
||||
if (!domain) {
|
||||
error = 'Select service';
|
||||
return;
|
||||
}
|
||||
|
||||
const url = `https://${domain}/.well-known/nostr.json?name=${name.toLowerCase()}`;
|
||||
try {
|
||||
const r = await fetch(url);
|
||||
const d = await r.json();
|
||||
if (d.names[name]) {
|
||||
pubkey = d.names[name];
|
||||
return;
|
||||
}
|
||||
} catch {}
|
||||
|
||||
available = true;
|
||||
})();
|
||||
|
||||
return {
|
||||
available,
|
||||
taken: pubkey != '',
|
||||
error,
|
||||
pubkey,
|
||||
};
|
||||
};
|
||||
|
||||
const upgradeInfo = (info: Info | RecentType) => {
|
||||
if ('typeAuthMethod' in info) delete info['typeAuthMethod'];
|
||||
|
||||
if (!info.authMethod) {
|
||||
if ('extension' in info && info['extension']) info.authMethod = 'extension';
|
||||
else if ('readOnly' in info && info['readOnly']) info.authMethod = 'readOnly';
|
||||
else info.authMethod = 'connect';
|
||||
}
|
||||
|
||||
if (info.nip05 && isBunkerUrl(info.nip05)) {
|
||||
info.bunkerUrl = info.nip05;
|
||||
info.nip05 = '';
|
||||
}
|
||||
|
||||
if (info.authMethod === 'connect' && !info.signerPubkey) {
|
||||
info.signerPubkey = info.pubkey;
|
||||
}
|
||||
};
|
||||
|
||||
export const localStorageAddAccount = (info: Info) => {
|
||||
// make current
|
||||
localStorageSetItem(LOCAL_STORE_KEY, JSON.stringify(info));
|
||||
|
||||
const loggedInAccounts: Info[] = localStorageGetItem(LOGGED_IN_ACCOUNTS) || [];
|
||||
const recentAccounts: RecentType[] = localStorageGetItem(RECENT_ACCOUNTS) || [];
|
||||
|
||||
// upgrade first
|
||||
loggedInAccounts.forEach(a => upgradeInfo(a));
|
||||
recentAccounts.forEach(a => upgradeInfo(a));
|
||||
|
||||
// upsert new info into accounts
|
||||
const accounts: Info[] = loggedInAccounts;
|
||||
const index = loggedInAccounts.findIndex((el: Info) => el.pubkey === info.pubkey && el.authMethod === info.authMethod);
|
||||
if (index !== -1) {
|
||||
accounts[index] = info;
|
||||
} else {
|
||||
accounts.push(info);
|
||||
}
|
||||
|
||||
// remove new info from recent
|
||||
const recents = recentAccounts.filter(el => el.pubkey !== info.pubkey || el.authMethod !== info.authMethod);
|
||||
|
||||
localStorageSetItem(RECENT_ACCOUNTS, JSON.stringify(recents));
|
||||
localStorageSetItem(LOGGED_IN_ACCOUNTS, JSON.stringify(accounts));
|
||||
};
|
||||
|
||||
export const localStorageRemoveCurrentAccount = () => {
|
||||
const user: Info = localStorageGetItem(LOCAL_STORE_KEY);
|
||||
if (!user) return;
|
||||
|
||||
// make sure it's valid
|
||||
upgradeInfo(user);
|
||||
|
||||
// remove secret fields
|
||||
const recentUser: RecentType = { ...user };
|
||||
|
||||
// make sure session keys are dropped
|
||||
// @ts-ignore
|
||||
delete recentUser['sk'];
|
||||
// @ts-ignore
|
||||
delete recentUser['otpData'];
|
||||
|
||||
// get accounts and recent
|
||||
const loggedInAccounts: Info[] = localStorageGetItem(LOGGED_IN_ACCOUNTS) || [];
|
||||
const recentsAccounts: RecentType[] = localStorageGetItem(RECENT_ACCOUNTS) || [];
|
||||
|
||||
// upgrade first
|
||||
loggedInAccounts.forEach(a => upgradeInfo(a));
|
||||
recentsAccounts.forEach(a => upgradeInfo(a));
|
||||
|
||||
const recents: RecentType[] = recentsAccounts;
|
||||
if (recentUser.authMethod === 'connect' && recentUser.bunkerUrl && recentUser.bunkerUrl.includes('secret=')) {
|
||||
console.log('nostr login bunker conn with a secret not saved to recent');
|
||||
} else if (recentUser.authMethod === 'local') {
|
||||
console.log('nostr login temporary local keys not save to recent');
|
||||
} else {
|
||||
// upsert to recent
|
||||
const index = recentsAccounts.findIndex((el: RecentType) => el.pubkey === recentUser.pubkey && el.authMethod === recentUser.authMethod);
|
||||
if (index !== -1) {
|
||||
recents[index] = recentUser;
|
||||
} else {
|
||||
recents.push(recentUser);
|
||||
}
|
||||
}
|
||||
|
||||
// remove from accounts
|
||||
const accounts = loggedInAccounts.filter(el => el.pubkey !== user.pubkey || el.authMethod !== user.authMethod);
|
||||
|
||||
// update accounts and recent, clear current
|
||||
localStorageSetItem(RECENT_ACCOUNTS, JSON.stringify(recents));
|
||||
localStorageSetItem(LOGGED_IN_ACCOUNTS, JSON.stringify(accounts));
|
||||
localStorageRemoveItem(LOCAL_STORE_KEY);
|
||||
};
|
||||
|
||||
export const localStorageRemoveRecent = (user: RecentType) => {
|
||||
const recentsAccounts: RecentType[] = localStorageGetItem(RECENT_ACCOUNTS) || [];
|
||||
recentsAccounts.forEach(a => upgradeInfo(a));
|
||||
const recents = recentsAccounts.filter(el => el.pubkey !== user.pubkey || el.authMethod !== user.authMethod);
|
||||
localStorageSetItem(RECENT_ACCOUNTS, JSON.stringify(recents));
|
||||
};
|
||||
|
||||
export const localStorageGetRecents = (): RecentType[] => {
|
||||
const recents: RecentType[] = localStorageGetItem(RECENT_ACCOUNTS) || [];
|
||||
recents.forEach(r => upgradeInfo(r));
|
||||
return recents;
|
||||
};
|
||||
|
||||
export const localStorageGetAccounts = (): Info[] => {
|
||||
const accounts: Info[] = localStorageGetItem(LOGGED_IN_ACCOUNTS) || [];
|
||||
accounts.forEach(a => upgradeInfo(a));
|
||||
return accounts;
|
||||
};
|
||||
|
||||
export const localStorageGetCurrent = (): Info | null => {
|
||||
const info = localStorageGetItem(LOCAL_STORE_KEY);
|
||||
if (info) upgradeInfo(info);
|
||||
return info;
|
||||
};
|
||||
|
||||
export const setDarkMode = (dark: boolean) => {
|
||||
localStorageSetItem('nl-dark-mode', dark ? 'true' : 'false');
|
||||
};
|
||||
|
||||
export const getDarkMode = (opt: NostrLoginOptions) => {
|
||||
const getDarkModeLocal = localStorage.getItem('nl-dark-mode');
|
||||
|
||||
if (getDarkModeLocal) {
|
||||
// user already changed it
|
||||
return Boolean(JSON.parse(getDarkModeLocal));
|
||||
} else if (opt.darkMode !== undefined) {
|
||||
// app provided an option
|
||||
return opt.darkMode;
|
||||
} else {
|
||||
// auto-detect
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export const getIcon = async () => {
|
||||
// FIXME look at meta tags or manifest
|
||||
return document.location.origin + '/favicon.ico';
|
||||
};
|
||||
@@ -1,185 +0,0 @@
|
||||
import { chacha20 } from "@noble/ciphers/chacha"
|
||||
import { concatBytes, randomBytes, utf8ToBytes } from "@noble/hashes/utils"
|
||||
import { equalBytes } from "@noble/ciphers/utils";
|
||||
import { secp256k1 } from "@noble/curves/secp256k1"
|
||||
import {
|
||||
expand as hkdf_expand,
|
||||
extract as hkdf_extract,
|
||||
} from "@noble/hashes/hkdf"
|
||||
import { sha256 } from "@noble/hashes/sha256"
|
||||
import { hmac } from "@noble/hashes/hmac";
|
||||
import { base64 } from "@scure/base";
|
||||
import { getPublicKey } from 'nostr-tools'
|
||||
|
||||
// from https://github.com/nbd-wtf/nostr-tools
|
||||
|
||||
const decoder = new TextDecoder()
|
||||
|
||||
const u = {
|
||||
minPlaintextSize: 0x0001, // 1b msg => padded to 32b
|
||||
maxPlaintextSize: 0xffff, // 65535 (64kb-1) => padded to 64kb
|
||||
|
||||
utf8Encode: utf8ToBytes,
|
||||
utf8Decode(bytes: Uint8Array): string {
|
||||
return decoder.decode(bytes);
|
||||
},
|
||||
|
||||
getConversationKey(privkeyA: string, pubkeyB: string): Uint8Array {
|
||||
const sharedX = secp256k1
|
||||
.getSharedSecret(privkeyA, "02" + pubkeyB)
|
||||
.subarray(1, 33);
|
||||
return hkdf_extract(sha256, sharedX, "nip44-v2");
|
||||
},
|
||||
|
||||
getMessageKeys(conversationKey: Uint8Array, nonce: Uint8Array) {
|
||||
const keys = hkdf_expand(sha256, conversationKey, nonce, 76);
|
||||
return {
|
||||
chacha_key: keys.subarray(0, 32),
|
||||
chacha_nonce: keys.subarray(32, 44),
|
||||
hmac_key: keys.subarray(44, 76),
|
||||
};
|
||||
},
|
||||
|
||||
calcPaddedLen(len: number): number {
|
||||
if (!Number.isSafeInteger(len) || len < 1)
|
||||
throw new Error("expected positive integer");
|
||||
if (len <= 32) return 32;
|
||||
const nextPower = 1 << (Math.floor(Math.log2(len - 1)) + 1);
|
||||
const chunk = nextPower <= 256 ? 32 : nextPower / 8;
|
||||
return chunk * (Math.floor((len - 1) / chunk) + 1);
|
||||
},
|
||||
|
||||
writeU16BE(num: number): Uint8Array {
|
||||
if (
|
||||
!Number.isSafeInteger(num) ||
|
||||
num < u.minPlaintextSize ||
|
||||
num > u.maxPlaintextSize
|
||||
)
|
||||
throw new Error(
|
||||
"invalid plaintext size: must be between 1 and 65535 bytes"
|
||||
);
|
||||
const arr = new Uint8Array(2);
|
||||
new DataView(arr.buffer).setUint16(0, num, false);
|
||||
return arr;
|
||||
},
|
||||
|
||||
pad(plaintext: string): Uint8Array {
|
||||
const unpadded = u.utf8Encode(plaintext);
|
||||
const unpaddedLen = unpadded.length;
|
||||
const prefix = u.writeU16BE(unpaddedLen);
|
||||
const suffix = new Uint8Array(u.calcPaddedLen(unpaddedLen) - unpaddedLen);
|
||||
return concatBytes(prefix, unpadded, suffix);
|
||||
},
|
||||
|
||||
unpad(padded: Uint8Array): string {
|
||||
const unpaddedLen = new DataView(padded.buffer).getUint16(0);
|
||||
const unpadded = padded.subarray(2, 2 + unpaddedLen);
|
||||
if (
|
||||
unpaddedLen < u.minPlaintextSize ||
|
||||
unpaddedLen > u.maxPlaintextSize ||
|
||||
unpadded.length !== unpaddedLen ||
|
||||
padded.length !== 2 + u.calcPaddedLen(unpaddedLen)
|
||||
)
|
||||
throw new Error("invalid padding");
|
||||
return u.utf8Decode(unpadded);
|
||||
},
|
||||
|
||||
hmacAad(key: Uint8Array, message: Uint8Array, aad: Uint8Array): Uint8Array {
|
||||
if (aad.length !== 32)
|
||||
throw new Error("AAD associated data must be 32 bytes");
|
||||
const combined = concatBytes(aad, message);
|
||||
return hmac(sha256, key, combined);
|
||||
},
|
||||
|
||||
// metadata: always 65b (version: 1b, nonce: 32b, max: 32b)
|
||||
// plaintext: 1b to 0xffff
|
||||
// padded plaintext: 32b to 0xffff
|
||||
// ciphertext: 32b+2 to 0xffff+2
|
||||
// raw payload: 99 (65+32+2) to 65603 (65+0xffff+2)
|
||||
// compressed payload (base64): 132b to 87472b
|
||||
decodePayload(payload: string): {
|
||||
nonce: Uint8Array;
|
||||
ciphertext: Uint8Array;
|
||||
mac: Uint8Array;
|
||||
} {
|
||||
if (typeof payload !== "string")
|
||||
throw new Error("payload must be a valid string");
|
||||
const plen = payload.length;
|
||||
if (plen < 132 || plen > 87472)
|
||||
throw new Error("invalid payload length: " + plen);
|
||||
if (payload[0] === "#") throw new Error("unknown encryption version");
|
||||
let data: Uint8Array;
|
||||
try {
|
||||
data = base64.decode(payload);
|
||||
} catch (error) {
|
||||
throw new Error("invalid base64: " + (error as Error).message);
|
||||
}
|
||||
const dlen = data.length;
|
||||
if (dlen < 99 || dlen > 65603)
|
||||
throw new Error("invalid data length: " + dlen);
|
||||
const vers = data[0];
|
||||
if (vers !== 2) throw new Error("unknown encryption version " + vers);
|
||||
return {
|
||||
nonce: data.subarray(1, 33),
|
||||
ciphertext: data.subarray(33, -32),
|
||||
mac: data.subarray(-32),
|
||||
};
|
||||
},
|
||||
};
|
||||
|
||||
export function encryptNip44(
|
||||
plaintext: string,
|
||||
conversationKey: Uint8Array,
|
||||
nonce: Uint8Array = randomBytes(32)
|
||||
): string {
|
||||
const { chacha_key, chacha_nonce, hmac_key } = u.getMessageKeys(
|
||||
conversationKey,
|
||||
nonce
|
||||
);
|
||||
const padded = u.pad(plaintext);
|
||||
const ciphertext = chacha20(chacha_key, chacha_nonce, padded);
|
||||
const mac = u.hmacAad(hmac_key, ciphertext, nonce);
|
||||
return base64.encode(
|
||||
concatBytes(new Uint8Array([2]), nonce, ciphertext, mac)
|
||||
);
|
||||
}
|
||||
|
||||
export function decryptNip44(payload: string, conversationKey: Uint8Array): string {
|
||||
const { nonce, ciphertext, mac } = u.decodePayload(payload);
|
||||
const { chacha_key, chacha_nonce, hmac_key } = u.getMessageKeys(
|
||||
conversationKey,
|
||||
nonce
|
||||
);
|
||||
const calculatedMac = u.hmacAad(hmac_key, ciphertext, nonce);
|
||||
if (!equalBytes(calculatedMac, mac)) throw new Error("invalid MAC");
|
||||
const padded = chacha20(chacha_key, chacha_nonce, ciphertext);
|
||||
return u.unpad(padded);
|
||||
}
|
||||
|
||||
export class Nip44 {
|
||||
private cache = new Map<string, Uint8Array>()
|
||||
|
||||
public createKey(privkey: string, pubkey: string) {
|
||||
return u.getConversationKey(privkey, pubkey)
|
||||
}
|
||||
|
||||
private getKey(privkey: string, pubkey: string, extractable?: boolean) {
|
||||
const id = getPublicKey(privkey) + pubkey
|
||||
let cryptoKey = this.cache.get(id)
|
||||
if (cryptoKey) return cryptoKey
|
||||
|
||||
const key = this.createKey(privkey, pubkey)
|
||||
this.cache.set(id, key)
|
||||
return key
|
||||
}
|
||||
|
||||
public encrypt(privkey: string, pubkey: string, text: string): string {
|
||||
const key = this.getKey(privkey, pubkey)
|
||||
return encryptNip44(text, key)
|
||||
}
|
||||
|
||||
public decrypt(privkey: string, pubkey: string, data: string): string {
|
||||
const key = this.getKey(privkey, pubkey)
|
||||
return decryptNip44(data, key)
|
||||
}
|
||||
}
|
||||
@@ -1,15 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "esnext",
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"esModuleInterop": true,
|
||||
"skipLibCheck": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"strict": true,
|
||||
"declaration": true,
|
||||
"outDir": "./dist",
|
||||
},
|
||||
"include": ["src/**/*.ts"],
|
||||
"exclude": ["node_modules"],
|
||||
}
|
||||
@@ -1,15 +0,0 @@
|
||||
# http://editorconfig.org
|
||||
|
||||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
end_of_line = lf
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
|
||||
[*.md]
|
||||
insert_final_newline = false
|
||||
trim_trailing_whitespace = false
|
||||
26
packages/components/.gitignore
vendored
26
packages/components/.gitignore
vendored
@@ -1,26 +0,0 @@
|
||||
dist/
|
||||
www/
|
||||
loader/
|
||||
|
||||
*~
|
||||
*.sw[mnpcod]
|
||||
*.log
|
||||
*.lock
|
||||
*.tmp
|
||||
*.tmp.*
|
||||
log.txt
|
||||
*.sublime-project
|
||||
*.sublime-workspace
|
||||
|
||||
.stencil/
|
||||
.idea/
|
||||
.vscode/
|
||||
.sass-cache/
|
||||
.versions/
|
||||
node_modules/
|
||||
$RECYCLE.BIN/
|
||||
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
UserInterfaceState.xcuserstate
|
||||
.env
|
||||
@@ -1,13 +0,0 @@
|
||||
{
|
||||
"arrowParens": "avoid",
|
||||
"bracketSpacing": true,
|
||||
"jsxBracketSameLine": false,
|
||||
"jsxSingleQuote": false,
|
||||
"quoteProps": "consistent",
|
||||
"printWidth": 180,
|
||||
"semi": true,
|
||||
"singleQuote": true,
|
||||
"tabWidth": 2,
|
||||
"trailingComma": "all",
|
||||
"useTabs": false
|
||||
}
|
||||
@@ -1,49 +0,0 @@
|
||||
{
|
||||
"name": "nostr-login-components",
|
||||
"version": "1.0.3",
|
||||
"main": "dist/index.cjs.js",
|
||||
"module": "dist/index.js",
|
||||
"es2015": "dist/esm/index.js",
|
||||
"es2017": "dist/esm/index.js",
|
||||
"types": "dist/types/index.d.ts",
|
||||
"collection": "dist/collection/collection-manifest.json",
|
||||
"collection:main": "dist/collection/index.js",
|
||||
"author": "a-fralou",
|
||||
"files": [
|
||||
"dist/",
|
||||
"loader/"
|
||||
],
|
||||
"exports": {
|
||||
".": "./dist/components/index.js"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "stencil build --docs --prod && node post-build-plugin.js",
|
||||
"dev": "stencil build --dev --watch --serve",
|
||||
"test": "stencil test --spec --e2e",
|
||||
"test.watch": "stencil test --spec --e2e --watchAll",
|
||||
"generate": "stencil generate",
|
||||
"format": "npx prettier --write src"
|
||||
},
|
||||
"dependencies": {
|
||||
"@stencil/core": "^4.20.0",
|
||||
"@stencil/sass": "^3.0.12",
|
||||
"@stencil/store": "^2.0.16",
|
||||
"@tailwindcss/forms": "^0.5.7",
|
||||
"qrcode": "^1.5.4",
|
||||
"tailwindcss": "^3.4.0",
|
||||
"tailwindcss-rtl": "^0.9.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/jest": "^29.5.6",
|
||||
"@types/node": "^16.18.11",
|
||||
"@types/qrcode": "^1.5.5",
|
||||
"jest": "^29.7.0",
|
||||
"jest-cli": "^29.7.0",
|
||||
"prettier": "^3.2.2",
|
||||
"puppeteer": "21.1.1",
|
||||
"stencil-tailwind-plugin": "^1.8.0",
|
||||
"typescript": "^5.3.3",
|
||||
"workbox-build": "^4.3.1"
|
||||
},
|
||||
"license": "MIT"
|
||||
}
|
||||
@@ -1,48 +0,0 @@
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
|
||||
const folderPath = './dist/components';
|
||||
const cssFilePath = './dist/components/css.js';
|
||||
let countFileRead = 0;
|
||||
|
||||
// Function to get all JavaScript files in the directory
|
||||
function getFilesInDirectory(dir) {
|
||||
const files = fs.readdirSync(dir);
|
||||
return files.filter(file => file.endsWith('.js')); // Filter out only .js files
|
||||
}
|
||||
|
||||
// Function to process a single file
|
||||
function processFile(filePath, cssContent) {
|
||||
const fileContent = fs.readFileSync(filePath, 'utf8');
|
||||
|
||||
// Replace the CSS variable declarations and import them from css.js
|
||||
const updatedContent = fileContent.replace(/const\s+(\w+Css)\s*=\s*(`[^`]*`|".*?"|'.*?')(?:\s*;|(\s*\/\/.*?))?(?=\s*const|$)/g, (match, varName, varValue) => {
|
||||
// Save CSS variables and their values in cssContent
|
||||
if (countFileRead === 0) {
|
||||
cssContent.push(`export const baseCss = ${varValue};`);
|
||||
countFileRead = countFileRead + 1;
|
||||
}
|
||||
// Return the string with the import from css.js
|
||||
return `import { baseCss } from './css.js';\nconst ${varName} = baseCss;\n`;
|
||||
});
|
||||
|
||||
// Write the modified content back to the file
|
||||
fs.writeFileSync(filePath, updatedContent, 'utf8');
|
||||
}
|
||||
|
||||
// Main function to process all files
|
||||
function main() {
|
||||
const cssContent = [];
|
||||
const files = getFilesInDirectory(folderPath);
|
||||
|
||||
files.forEach(file => {
|
||||
const filePath = path.join(folderPath, file);
|
||||
processFile(filePath, cssContent);
|
||||
});
|
||||
|
||||
// Write collected CSS variables to css.js
|
||||
fs.writeFileSync(cssFilePath, cssContent.join('\n'), 'utf8');
|
||||
console.log('Done! All CSS variables have been moved to css.js.');
|
||||
}
|
||||
|
||||
main();
|
||||
929
packages/components/src/components.d.ts
vendored
929
packages/components/src/components.d.ts
vendored
@@ -1,929 +0,0 @@
|
||||
/* eslint-disable */
|
||||
/* tslint:disable */
|
||||
/**
|
||||
* This is an autogenerated file created by the Stencil compiler.
|
||||
* It contains typing information for all components that exist in this project.
|
||||
*/
|
||||
import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
|
||||
import { AuthMethod, BannerNotify, ConnectionString, Info, NlTheme, RecentType } from "./types/index";
|
||||
import { OptionType } from "./components/nl-select/nl-select";
|
||||
export { AuthMethod, BannerNotify, ConnectionString, Info, NlTheme, RecentType } from "./types/index";
|
||||
export { OptionType } from "./components/nl-select/nl-select";
|
||||
export namespace Components {
|
||||
interface ButtonBase {
|
||||
"darkMode": boolean;
|
||||
"disabled": boolean;
|
||||
"theme": NlTheme;
|
||||
"titleBtn": string;
|
||||
}
|
||||
interface NlAuth {
|
||||
"accounts": Info[];
|
||||
"authMethods": AuthMethod[];
|
||||
"authUrl": string;
|
||||
"bunkers": string;
|
||||
"connectionString": string;
|
||||
"connectionStringServices": ConnectionString[];
|
||||
"darkMode": boolean;
|
||||
"error": string;
|
||||
"hasExtension": boolean;
|
||||
"hasOTP": boolean;
|
||||
"iframeUrl": string;
|
||||
"isLoading": boolean;
|
||||
"isLoadingExtension": boolean;
|
||||
"isOTP": boolean;
|
||||
"localSignup": boolean;
|
||||
"njumpIframe": string;
|
||||
"recents": RecentType[];
|
||||
"signupNjump": boolean;
|
||||
"startScreen": string;
|
||||
"theme": NlTheme;
|
||||
"welcomeDescription": string;
|
||||
"welcomeTitle": string;
|
||||
}
|
||||
interface NlBanner {
|
||||
"accounts": Info[];
|
||||
"darkMode": boolean;
|
||||
"hiddenMode": boolean;
|
||||
"isLoading": boolean;
|
||||
"isOpen": boolean;
|
||||
"notify": BannerNotify | null;
|
||||
"theme": NlTheme;
|
||||
"titleBanner": string;
|
||||
"userInfo": Info | null;
|
||||
}
|
||||
interface NlButton {
|
||||
"darkMode": boolean;
|
||||
"disabled": boolean;
|
||||
"theme": NlTheme;
|
||||
"titleBtn": string;
|
||||
}
|
||||
interface NlChangeAccount {
|
||||
"accounts": Info[];
|
||||
"currentAccount": Info;
|
||||
"darkMode": boolean;
|
||||
"theme": 'default' | 'ocean' | 'lemonade' | 'purple';
|
||||
}
|
||||
interface NlConfirmLogout {
|
||||
"description": string;
|
||||
"titleModal": string;
|
||||
}
|
||||
interface NlConnect {
|
||||
"authMethods": AuthMethod[];
|
||||
"connectionStringServices": ConnectionString[];
|
||||
"hasOTP": boolean;
|
||||
"titleWelcome": string;
|
||||
}
|
||||
interface NlDialog {
|
||||
}
|
||||
interface NlIframe {
|
||||
"description": string;
|
||||
"iframeUrl": string;
|
||||
"titleModal": string;
|
||||
}
|
||||
interface NlImportFlow {
|
||||
"services": ConnectionString[];
|
||||
"titleImport": string;
|
||||
"titleInfo": string;
|
||||
}
|
||||
interface NlInfo {
|
||||
"darkMode": boolean;
|
||||
"theme": NlTheme;
|
||||
}
|
||||
interface NlInfoExtension {
|
||||
}
|
||||
interface NlLoading {
|
||||
"path": string;
|
||||
}
|
||||
interface NlLocalSignup {
|
||||
"description": string;
|
||||
"descriptionNjump": string;
|
||||
"signupNjump": boolean;
|
||||
"titleSignup": string;
|
||||
}
|
||||
interface NlLoginStatus {
|
||||
"info": RecentType | Info | undefined;
|
||||
}
|
||||
interface NlOtpMigrate {
|
||||
"services": ConnectionString[];
|
||||
"textImport": string;
|
||||
"titleImport": string;
|
||||
"titleInfo": string;
|
||||
}
|
||||
interface NlPreviouslyLogged {
|
||||
"accounts": Info[];
|
||||
"description": string;
|
||||
"recents": RecentType[];
|
||||
"titlePage": string;
|
||||
}
|
||||
interface NlSelect {
|
||||
"darkMode": boolean;
|
||||
"options": OptionType[];
|
||||
"selected": number;
|
||||
"theme": 'default' | 'ocean' | 'lemonade' | 'purple';
|
||||
}
|
||||
interface NlSignin {
|
||||
"description": string;
|
||||
"titleLogin": string;
|
||||
}
|
||||
interface NlSigninBunkerUrl {
|
||||
"description": string;
|
||||
"titleLogin": string;
|
||||
}
|
||||
interface NlSigninConnectionString {
|
||||
"connectionString": string;
|
||||
"description": string;
|
||||
"titleLogin": string;
|
||||
}
|
||||
interface NlSigninOtp {
|
||||
"description": string;
|
||||
"descriptionOTP": string;
|
||||
"titleLogin": string;
|
||||
"titleLoginOTP": string;
|
||||
}
|
||||
interface NlSigninReadOnly {
|
||||
"description": string;
|
||||
"titleLogin": string;
|
||||
}
|
||||
interface NlSignup {
|
||||
"bunkers": string;
|
||||
"description": string;
|
||||
"titleSignup": string;
|
||||
}
|
||||
interface NlWelcome {
|
||||
"description": string;
|
||||
"titleWelcome": string;
|
||||
}
|
||||
interface NlWelcomeSignin {
|
||||
"authMethods": AuthMethod[];
|
||||
"hasExtension": boolean;
|
||||
"hasOTP": boolean;
|
||||
"titleWelcome": string;
|
||||
}
|
||||
interface NlWelcomeSignup {
|
||||
"description": string;
|
||||
"titleWelcome": string;
|
||||
}
|
||||
}
|
||||
export interface NlAuthCustomEvent<T> extends CustomEvent<T> {
|
||||
detail: T;
|
||||
target: HTMLNlAuthElement;
|
||||
}
|
||||
export interface NlBannerCustomEvent<T> extends CustomEvent<T> {
|
||||
detail: T;
|
||||
target: HTMLNlBannerElement;
|
||||
}
|
||||
export interface NlChangeAccountCustomEvent<T> extends CustomEvent<T> {
|
||||
detail: T;
|
||||
target: HTMLNlChangeAccountElement;
|
||||
}
|
||||
export interface NlConfirmLogoutCustomEvent<T> extends CustomEvent<T> {
|
||||
detail: T;
|
||||
target: HTMLNlConfirmLogoutElement;
|
||||
}
|
||||
export interface NlConnectCustomEvent<T> extends CustomEvent<T> {
|
||||
detail: T;
|
||||
target: HTMLNlConnectElement;
|
||||
}
|
||||
export interface NlIframeCustomEvent<T> extends CustomEvent<T> {
|
||||
detail: T;
|
||||
target: HTMLNlIframeElement;
|
||||
}
|
||||
export interface NlImportFlowCustomEvent<T> extends CustomEvent<T> {
|
||||
detail: T;
|
||||
target: HTMLNlImportFlowElement;
|
||||
}
|
||||
export interface NlLoadingCustomEvent<T> extends CustomEvent<T> {
|
||||
detail: T;
|
||||
target: HTMLNlLoadingElement;
|
||||
}
|
||||
export interface NlLocalSignupCustomEvent<T> extends CustomEvent<T> {
|
||||
detail: T;
|
||||
target: HTMLNlLocalSignupElement;
|
||||
}
|
||||
export interface NlOtpMigrateCustomEvent<T> extends CustomEvent<T> {
|
||||
detail: T;
|
||||
target: HTMLNlOtpMigrateElement;
|
||||
}
|
||||
export interface NlPreviouslyLoggedCustomEvent<T> extends CustomEvent<T> {
|
||||
detail: T;
|
||||
target: HTMLNlPreviouslyLoggedElement;
|
||||
}
|
||||
export interface NlSelectCustomEvent<T> extends CustomEvent<T> {
|
||||
detail: T;
|
||||
target: HTMLNlSelectElement;
|
||||
}
|
||||
export interface NlSigninCustomEvent<T> extends CustomEvent<T> {
|
||||
detail: T;
|
||||
target: HTMLNlSigninElement;
|
||||
}
|
||||
export interface NlSigninBunkerUrlCustomEvent<T> extends CustomEvent<T> {
|
||||
detail: T;
|
||||
target: HTMLNlSigninBunkerUrlElement;
|
||||
}
|
||||
export interface NlSigninConnectionStringCustomEvent<T> extends CustomEvent<T> {
|
||||
detail: T;
|
||||
target: HTMLNlSigninConnectionStringElement;
|
||||
}
|
||||
export interface NlSigninOtpCustomEvent<T> extends CustomEvent<T> {
|
||||
detail: T;
|
||||
target: HTMLNlSigninOtpElement;
|
||||
}
|
||||
export interface NlSigninReadOnlyCustomEvent<T> extends CustomEvent<T> {
|
||||
detail: T;
|
||||
target: HTMLNlSigninReadOnlyElement;
|
||||
}
|
||||
export interface NlSignupCustomEvent<T> extends CustomEvent<T> {
|
||||
detail: T;
|
||||
target: HTMLNlSignupElement;
|
||||
}
|
||||
export interface NlWelcomeSigninCustomEvent<T> extends CustomEvent<T> {
|
||||
detail: T;
|
||||
target: HTMLNlWelcomeSigninElement;
|
||||
}
|
||||
declare global {
|
||||
interface HTMLButtonBaseElement extends Components.ButtonBase, HTMLStencilElement {
|
||||
}
|
||||
var HTMLButtonBaseElement: {
|
||||
prototype: HTMLButtonBaseElement;
|
||||
new (): HTMLButtonBaseElement;
|
||||
};
|
||||
interface HTMLNlAuthElementEventMap {
|
||||
"nlCloseModal": any;
|
||||
"nlChangeDarkMode": boolean;
|
||||
"nlNostrConnectDefaultCancel": void;
|
||||
}
|
||||
interface HTMLNlAuthElement extends Components.NlAuth, HTMLStencilElement {
|
||||
addEventListener<K extends keyof HTMLNlAuthElementEventMap>(type: K, listener: (this: HTMLNlAuthElement, ev: NlAuthCustomEvent<HTMLNlAuthElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
|
||||
addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
||||
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
||||
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
|
||||
removeEventListener<K extends keyof HTMLNlAuthElementEventMap>(type: K, listener: (this: HTMLNlAuthElement, ev: NlAuthCustomEvent<HTMLNlAuthElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
|
||||
removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
||||
removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
||||
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
|
||||
}
|
||||
var HTMLNlAuthElement: {
|
||||
prototype: HTMLNlAuthElement;
|
||||
new (): HTMLNlAuthElement;
|
||||
};
|
||||
interface HTMLNlBannerElementEventMap {
|
||||
"handleNotifyConfirmBanner": string;
|
||||
"handleNotifyConfirmBannerIframe": string;
|
||||
"handleLoginBanner": string;
|
||||
"handleLogoutBanner": string;
|
||||
"handleOpenWelcomeModal": string;
|
||||
"handleConfirmLogout": string;
|
||||
"handleImportModal": string;
|
||||
}
|
||||
interface HTMLNlBannerElement extends Components.NlBanner, HTMLStencilElement {
|
||||
addEventListener<K extends keyof HTMLNlBannerElementEventMap>(type: K, listener: (this: HTMLNlBannerElement, ev: NlBannerCustomEvent<HTMLNlBannerElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
|
||||
addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
||||
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
||||
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
|
||||
removeEventListener<K extends keyof HTMLNlBannerElementEventMap>(type: K, listener: (this: HTMLNlBannerElement, ev: NlBannerCustomEvent<HTMLNlBannerElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
|
||||
removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
||||
removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
||||
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
|
||||
}
|
||||
var HTMLNlBannerElement: {
|
||||
prototype: HTMLNlBannerElement;
|
||||
new (): HTMLNlBannerElement;
|
||||
};
|
||||
interface HTMLNlButtonElement extends Components.NlButton, HTMLStencilElement {
|
||||
}
|
||||
var HTMLNlButtonElement: {
|
||||
prototype: HTMLNlButtonElement;
|
||||
new (): HTMLNlButtonElement;
|
||||
};
|
||||
interface HTMLNlChangeAccountElementEventMap {
|
||||
"handleOpenWelcomeModal": string;
|
||||
"handleSwitchAccount": Info;
|
||||
}
|
||||
interface HTMLNlChangeAccountElement extends Components.NlChangeAccount, HTMLStencilElement {
|
||||
addEventListener<K extends keyof HTMLNlChangeAccountElementEventMap>(type: K, listener: (this: HTMLNlChangeAccountElement, ev: NlChangeAccountCustomEvent<HTMLNlChangeAccountElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
|
||||
addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
||||
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
||||
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
|
||||
removeEventListener<K extends keyof HTMLNlChangeAccountElementEventMap>(type: K, listener: (this: HTMLNlChangeAccountElement, ev: NlChangeAccountCustomEvent<HTMLNlChangeAccountElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
|
||||
removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
||||
removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
||||
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
|
||||
}
|
||||
var HTMLNlChangeAccountElement: {
|
||||
prototype: HTMLNlChangeAccountElement;
|
||||
new (): HTMLNlChangeAccountElement;
|
||||
};
|
||||
interface HTMLNlConfirmLogoutElementEventMap {
|
||||
"handleLogoutBanner": string;
|
||||
"handleBackUpModal": string;
|
||||
"nlCloseModal": any;
|
||||
}
|
||||
interface HTMLNlConfirmLogoutElement extends Components.NlConfirmLogout, HTMLStencilElement {
|
||||
addEventListener<K extends keyof HTMLNlConfirmLogoutElementEventMap>(type: K, listener: (this: HTMLNlConfirmLogoutElement, ev: NlConfirmLogoutCustomEvent<HTMLNlConfirmLogoutElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
|
||||
addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
||||
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
||||
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
|
||||
removeEventListener<K extends keyof HTMLNlConfirmLogoutElementEventMap>(type: K, listener: (this: HTMLNlConfirmLogoutElement, ev: NlConfirmLogoutCustomEvent<HTMLNlConfirmLogoutElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
|
||||
removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
||||
removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
||||
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
|
||||
}
|
||||
var HTMLNlConfirmLogoutElement: {
|
||||
prototype: HTMLNlConfirmLogoutElement;
|
||||
new (): HTMLNlConfirmLogoutElement;
|
||||
};
|
||||
interface HTMLNlConnectElementEventMap {
|
||||
"nlNostrConnect": ConnectionString;
|
||||
}
|
||||
interface HTMLNlConnectElement extends Components.NlConnect, HTMLStencilElement {
|
||||
addEventListener<K extends keyof HTMLNlConnectElementEventMap>(type: K, listener: (this: HTMLNlConnectElement, ev: NlConnectCustomEvent<HTMLNlConnectElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
|
||||
addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
||||
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
||||
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
|
||||
removeEventListener<K extends keyof HTMLNlConnectElementEventMap>(type: K, listener: (this: HTMLNlConnectElement, ev: NlConnectCustomEvent<HTMLNlConnectElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
|
||||
removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
||||
removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
||||
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
|
||||
}
|
||||
var HTMLNlConnectElement: {
|
||||
prototype: HTMLNlConnectElement;
|
||||
new (): HTMLNlConnectElement;
|
||||
};
|
||||
interface HTMLNlDialogElement extends Components.NlDialog, HTMLStencilElement {
|
||||
}
|
||||
var HTMLNlDialogElement: {
|
||||
prototype: HTMLNlDialogElement;
|
||||
new (): HTMLNlDialogElement;
|
||||
};
|
||||
interface HTMLNlIframeElementEventMap {
|
||||
"nlCloseModal": any;
|
||||
}
|
||||
interface HTMLNlIframeElement extends Components.NlIframe, HTMLStencilElement {
|
||||
addEventListener<K extends keyof HTMLNlIframeElementEventMap>(type: K, listener: (this: HTMLNlIframeElement, ev: NlIframeCustomEvent<HTMLNlIframeElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
|
||||
addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
||||
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
||||
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
|
||||
removeEventListener<K extends keyof HTMLNlIframeElementEventMap>(type: K, listener: (this: HTMLNlIframeElement, ev: NlIframeCustomEvent<HTMLNlIframeElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
|
||||
removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
||||
removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
||||
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
|
||||
}
|
||||
var HTMLNlIframeElement: {
|
||||
prototype: HTMLNlIframeElement;
|
||||
new (): HTMLNlIframeElement;
|
||||
};
|
||||
interface HTMLNlImportFlowElementEventMap {
|
||||
"nlImportAccount": ConnectionString;
|
||||
"nlExportKeys": void;
|
||||
}
|
||||
interface HTMLNlImportFlowElement extends Components.NlImportFlow, HTMLStencilElement {
|
||||
addEventListener<K extends keyof HTMLNlImportFlowElementEventMap>(type: K, listener: (this: HTMLNlImportFlowElement, ev: NlImportFlowCustomEvent<HTMLNlImportFlowElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
|
||||
addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
||||
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
||||
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
|
||||
removeEventListener<K extends keyof HTMLNlImportFlowElementEventMap>(type: K, listener: (this: HTMLNlImportFlowElement, ev: NlImportFlowCustomEvent<HTMLNlImportFlowElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
|
||||
removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
||||
removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
||||
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
|
||||
}
|
||||
var HTMLNlImportFlowElement: {
|
||||
prototype: HTMLNlImportFlowElement;
|
||||
new (): HTMLNlImportFlowElement;
|
||||
};
|
||||
interface HTMLNlInfoElement extends Components.NlInfo, HTMLStencilElement {
|
||||
}
|
||||
var HTMLNlInfoElement: {
|
||||
prototype: HTMLNlInfoElement;
|
||||
new (): HTMLNlInfoElement;
|
||||
};
|
||||
interface HTMLNlInfoExtensionElement extends Components.NlInfoExtension, HTMLStencilElement {
|
||||
}
|
||||
var HTMLNlInfoExtensionElement: {
|
||||
prototype: HTMLNlInfoExtensionElement;
|
||||
new (): HTMLNlInfoExtensionElement;
|
||||
};
|
||||
interface HTMLNlLoadingElementEventMap {
|
||||
"stopFetchHandler": boolean;
|
||||
"handleContinue": boolean;
|
||||
}
|
||||
interface HTMLNlLoadingElement extends Components.NlLoading, HTMLStencilElement {
|
||||
addEventListener<K extends keyof HTMLNlLoadingElementEventMap>(type: K, listener: (this: HTMLNlLoadingElement, ev: NlLoadingCustomEvent<HTMLNlLoadingElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
|
||||
addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
||||
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
||||
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
|
||||
removeEventListener<K extends keyof HTMLNlLoadingElementEventMap>(type: K, listener: (this: HTMLNlLoadingElement, ev: NlLoadingCustomEvent<HTMLNlLoadingElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
|
||||
removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
||||
removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
||||
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
|
||||
}
|
||||
var HTMLNlLoadingElement: {
|
||||
prototype: HTMLNlLoadingElement;
|
||||
new (): HTMLNlLoadingElement;
|
||||
};
|
||||
interface HTMLNlLocalSignupElementEventMap {
|
||||
"nlLocalSignup": string;
|
||||
"nlSignupNjump": void;
|
||||
"fetchHandler": boolean;
|
||||
}
|
||||
interface HTMLNlLocalSignupElement extends Components.NlLocalSignup, HTMLStencilElement {
|
||||
addEventListener<K extends keyof HTMLNlLocalSignupElementEventMap>(type: K, listener: (this: HTMLNlLocalSignupElement, ev: NlLocalSignupCustomEvent<HTMLNlLocalSignupElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
|
||||
addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
||||
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
||||
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
|
||||
removeEventListener<K extends keyof HTMLNlLocalSignupElementEventMap>(type: K, listener: (this: HTMLNlLocalSignupElement, ev: NlLocalSignupCustomEvent<HTMLNlLocalSignupElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
|
||||
removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
||||
removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
||||
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
|
||||
}
|
||||
var HTMLNlLocalSignupElement: {
|
||||
prototype: HTMLNlLocalSignupElement;
|
||||
new (): HTMLNlLocalSignupElement;
|
||||
};
|
||||
interface HTMLNlLoginStatusElement extends Components.NlLoginStatus, HTMLStencilElement {
|
||||
}
|
||||
var HTMLNlLoginStatusElement: {
|
||||
prototype: HTMLNlLoginStatusElement;
|
||||
new (): HTMLNlLoginStatusElement;
|
||||
};
|
||||
interface HTMLNlOtpMigrateElementEventMap {
|
||||
"nlImportAccount": ConnectionString;
|
||||
}
|
||||
interface HTMLNlOtpMigrateElement extends Components.NlOtpMigrate, HTMLStencilElement {
|
||||
addEventListener<K extends keyof HTMLNlOtpMigrateElementEventMap>(type: K, listener: (this: HTMLNlOtpMigrateElement, ev: NlOtpMigrateCustomEvent<HTMLNlOtpMigrateElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
|
||||
addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
||||
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
||||
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
|
||||
removeEventListener<K extends keyof HTMLNlOtpMigrateElementEventMap>(type: K, listener: (this: HTMLNlOtpMigrateElement, ev: NlOtpMigrateCustomEvent<HTMLNlOtpMigrateElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
|
||||
removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
||||
removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
||||
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
|
||||
}
|
||||
var HTMLNlOtpMigrateElement: {
|
||||
prototype: HTMLNlOtpMigrateElement;
|
||||
new (): HTMLNlOtpMigrateElement;
|
||||
};
|
||||
interface HTMLNlPreviouslyLoggedElementEventMap {
|
||||
"nlSwitchAccount": Info;
|
||||
"nlLoginRecentAccount": RecentType;
|
||||
"nlRemoveRecent": RecentType;
|
||||
}
|
||||
interface HTMLNlPreviouslyLoggedElement extends Components.NlPreviouslyLogged, HTMLStencilElement {
|
||||
addEventListener<K extends keyof HTMLNlPreviouslyLoggedElementEventMap>(type: K, listener: (this: HTMLNlPreviouslyLoggedElement, ev: NlPreviouslyLoggedCustomEvent<HTMLNlPreviouslyLoggedElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
|
||||
addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
||||
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
||||
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
|
||||
removeEventListener<K extends keyof HTMLNlPreviouslyLoggedElementEventMap>(type: K, listener: (this: HTMLNlPreviouslyLoggedElement, ev: NlPreviouslyLoggedCustomEvent<HTMLNlPreviouslyLoggedElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
|
||||
removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
||||
removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
||||
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
|
||||
}
|
||||
var HTMLNlPreviouslyLoggedElement: {
|
||||
prototype: HTMLNlPreviouslyLoggedElement;
|
||||
new (): HTMLNlPreviouslyLoggedElement;
|
||||
};
|
||||
interface HTMLNlSelectElementEventMap {
|
||||
"selectDomain": string;
|
||||
}
|
||||
interface HTMLNlSelectElement extends Components.NlSelect, HTMLStencilElement {
|
||||
addEventListener<K extends keyof HTMLNlSelectElementEventMap>(type: K, listener: (this: HTMLNlSelectElement, ev: NlSelectCustomEvent<HTMLNlSelectElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
|
||||
addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
||||
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
||||
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
|
||||
removeEventListener<K extends keyof HTMLNlSelectElementEventMap>(type: K, listener: (this: HTMLNlSelectElement, ev: NlSelectCustomEvent<HTMLNlSelectElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
|
||||
removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
||||
removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
||||
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
|
||||
}
|
||||
var HTMLNlSelectElement: {
|
||||
prototype: HTMLNlSelectElement;
|
||||
new (): HTMLNlSelectElement;
|
||||
};
|
||||
interface HTMLNlSigninElementEventMap {
|
||||
"nlLogin": string;
|
||||
"nlCheckLogin": string;
|
||||
}
|
||||
interface HTMLNlSigninElement extends Components.NlSignin, HTMLStencilElement {
|
||||
addEventListener<K extends keyof HTMLNlSigninElementEventMap>(type: K, listener: (this: HTMLNlSigninElement, ev: NlSigninCustomEvent<HTMLNlSigninElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
|
||||
addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
||||
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
||||
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
|
||||
removeEventListener<K extends keyof HTMLNlSigninElementEventMap>(type: K, listener: (this: HTMLNlSigninElement, ev: NlSigninCustomEvent<HTMLNlSigninElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
|
||||
removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
||||
removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
||||
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
|
||||
}
|
||||
var HTMLNlSigninElement: {
|
||||
prototype: HTMLNlSigninElement;
|
||||
new (): HTMLNlSigninElement;
|
||||
};
|
||||
interface HTMLNlSigninBunkerUrlElementEventMap {
|
||||
"nlLogin": string;
|
||||
"nlCheckLogin": string;
|
||||
}
|
||||
interface HTMLNlSigninBunkerUrlElement extends Components.NlSigninBunkerUrl, HTMLStencilElement {
|
||||
addEventListener<K extends keyof HTMLNlSigninBunkerUrlElementEventMap>(type: K, listener: (this: HTMLNlSigninBunkerUrlElement, ev: NlSigninBunkerUrlCustomEvent<HTMLNlSigninBunkerUrlElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
|
||||
addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
||||
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
||||
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
|
||||
removeEventListener<K extends keyof HTMLNlSigninBunkerUrlElementEventMap>(type: K, listener: (this: HTMLNlSigninBunkerUrlElement, ev: NlSigninBunkerUrlCustomEvent<HTMLNlSigninBunkerUrlElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
|
||||
removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
||||
removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
||||
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
|
||||
}
|
||||
var HTMLNlSigninBunkerUrlElement: {
|
||||
prototype: HTMLNlSigninBunkerUrlElement;
|
||||
new (): HTMLNlSigninBunkerUrlElement;
|
||||
};
|
||||
interface HTMLNlSigninConnectionStringElementEventMap {
|
||||
"nlNostrConnectDefault": void;
|
||||
}
|
||||
interface HTMLNlSigninConnectionStringElement extends Components.NlSigninConnectionString, HTMLStencilElement {
|
||||
addEventListener<K extends keyof HTMLNlSigninConnectionStringElementEventMap>(type: K, listener: (this: HTMLNlSigninConnectionStringElement, ev: NlSigninConnectionStringCustomEvent<HTMLNlSigninConnectionStringElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
|
||||
addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
||||
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
||||
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
|
||||
removeEventListener<K extends keyof HTMLNlSigninConnectionStringElementEventMap>(type: K, listener: (this: HTMLNlSigninConnectionStringElement, ev: NlSigninConnectionStringCustomEvent<HTMLNlSigninConnectionStringElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
|
||||
removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
||||
removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
||||
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
|
||||
}
|
||||
var HTMLNlSigninConnectionStringElement: {
|
||||
prototype: HTMLNlSigninConnectionStringElement;
|
||||
new (): HTMLNlSigninConnectionStringElement;
|
||||
};
|
||||
interface HTMLNlSigninOtpElementEventMap {
|
||||
"nlLoginOTPUser": string;
|
||||
"nlLoginOTPCode": string;
|
||||
"nlCheckLogin": string;
|
||||
}
|
||||
interface HTMLNlSigninOtpElement extends Components.NlSigninOtp, HTMLStencilElement {
|
||||
addEventListener<K extends keyof HTMLNlSigninOtpElementEventMap>(type: K, listener: (this: HTMLNlSigninOtpElement, ev: NlSigninOtpCustomEvent<HTMLNlSigninOtpElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
|
||||
addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
||||
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
||||
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
|
||||
removeEventListener<K extends keyof HTMLNlSigninOtpElementEventMap>(type: K, listener: (this: HTMLNlSigninOtpElement, ev: NlSigninOtpCustomEvent<HTMLNlSigninOtpElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
|
||||
removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
||||
removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
||||
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
|
||||
}
|
||||
var HTMLNlSigninOtpElement: {
|
||||
prototype: HTMLNlSigninOtpElement;
|
||||
new (): HTMLNlSigninOtpElement;
|
||||
};
|
||||
interface HTMLNlSigninReadOnlyElementEventMap {
|
||||
"nlLoginReadOnly": string;
|
||||
"nlCheckLogin": string;
|
||||
}
|
||||
interface HTMLNlSigninReadOnlyElement extends Components.NlSigninReadOnly, HTMLStencilElement {
|
||||
addEventListener<K extends keyof HTMLNlSigninReadOnlyElementEventMap>(type: K, listener: (this: HTMLNlSigninReadOnlyElement, ev: NlSigninReadOnlyCustomEvent<HTMLNlSigninReadOnlyElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
|
||||
addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
||||
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
||||
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
|
||||
removeEventListener<K extends keyof HTMLNlSigninReadOnlyElementEventMap>(type: K, listener: (this: HTMLNlSigninReadOnlyElement, ev: NlSigninReadOnlyCustomEvent<HTMLNlSigninReadOnlyElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
|
||||
removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
||||
removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
||||
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
|
||||
}
|
||||
var HTMLNlSigninReadOnlyElement: {
|
||||
prototype: HTMLNlSigninReadOnlyElement;
|
||||
new (): HTMLNlSigninReadOnlyElement;
|
||||
};
|
||||
interface HTMLNlSignupElementEventMap {
|
||||
"nlSignup": string;
|
||||
"nlCheckSignup": string;
|
||||
"fetchHandler": boolean;
|
||||
}
|
||||
interface HTMLNlSignupElement extends Components.NlSignup, HTMLStencilElement {
|
||||
addEventListener<K extends keyof HTMLNlSignupElementEventMap>(type: K, listener: (this: HTMLNlSignupElement, ev: NlSignupCustomEvent<HTMLNlSignupElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
|
||||
addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
||||
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
||||
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
|
||||
removeEventListener<K extends keyof HTMLNlSignupElementEventMap>(type: K, listener: (this: HTMLNlSignupElement, ev: NlSignupCustomEvent<HTMLNlSignupElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
|
||||
removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
||||
removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
||||
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
|
||||
}
|
||||
var HTMLNlSignupElement: {
|
||||
prototype: HTMLNlSignupElement;
|
||||
new (): HTMLNlSignupElement;
|
||||
};
|
||||
interface HTMLNlWelcomeElement extends Components.NlWelcome, HTMLStencilElement {
|
||||
}
|
||||
var HTMLNlWelcomeElement: {
|
||||
prototype: HTMLNlWelcomeElement;
|
||||
new (): HTMLNlWelcomeElement;
|
||||
};
|
||||
interface HTMLNlWelcomeSigninElementEventMap {
|
||||
"nlLoginExtension": void;
|
||||
}
|
||||
interface HTMLNlWelcomeSigninElement extends Components.NlWelcomeSignin, HTMLStencilElement {
|
||||
addEventListener<K extends keyof HTMLNlWelcomeSigninElementEventMap>(type: K, listener: (this: HTMLNlWelcomeSigninElement, ev: NlWelcomeSigninCustomEvent<HTMLNlWelcomeSigninElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
|
||||
addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
||||
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
|
||||
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
|
||||
removeEventListener<K extends keyof HTMLNlWelcomeSigninElementEventMap>(type: K, listener: (this: HTMLNlWelcomeSigninElement, ev: NlWelcomeSigninCustomEvent<HTMLNlWelcomeSigninElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
|
||||
removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
||||
removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
||||
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
|
||||
}
|
||||
var HTMLNlWelcomeSigninElement: {
|
||||
prototype: HTMLNlWelcomeSigninElement;
|
||||
new (): HTMLNlWelcomeSigninElement;
|
||||
};
|
||||
interface HTMLNlWelcomeSignupElement extends Components.NlWelcomeSignup, HTMLStencilElement {
|
||||
}
|
||||
var HTMLNlWelcomeSignupElement: {
|
||||
prototype: HTMLNlWelcomeSignupElement;
|
||||
new (): HTMLNlWelcomeSignupElement;
|
||||
};
|
||||
interface HTMLElementTagNameMap {
|
||||
"button-base": HTMLButtonBaseElement;
|
||||
"nl-auth": HTMLNlAuthElement;
|
||||
"nl-banner": HTMLNlBannerElement;
|
||||
"nl-button": HTMLNlButtonElement;
|
||||
"nl-change-account": HTMLNlChangeAccountElement;
|
||||
"nl-confirm-logout": HTMLNlConfirmLogoutElement;
|
||||
"nl-connect": HTMLNlConnectElement;
|
||||
"nl-dialog": HTMLNlDialogElement;
|
||||
"nl-iframe": HTMLNlIframeElement;
|
||||
"nl-import-flow": HTMLNlImportFlowElement;
|
||||
"nl-info": HTMLNlInfoElement;
|
||||
"nl-info-extension": HTMLNlInfoExtensionElement;
|
||||
"nl-loading": HTMLNlLoadingElement;
|
||||
"nl-local-signup": HTMLNlLocalSignupElement;
|
||||
"nl-login-status": HTMLNlLoginStatusElement;
|
||||
"nl-otp-migrate": HTMLNlOtpMigrateElement;
|
||||
"nl-previously-logged": HTMLNlPreviouslyLoggedElement;
|
||||
"nl-select": HTMLNlSelectElement;
|
||||
"nl-signin": HTMLNlSigninElement;
|
||||
"nl-signin-bunker-url": HTMLNlSigninBunkerUrlElement;
|
||||
"nl-signin-connection-string": HTMLNlSigninConnectionStringElement;
|
||||
"nl-signin-otp": HTMLNlSigninOtpElement;
|
||||
"nl-signin-read-only": HTMLNlSigninReadOnlyElement;
|
||||
"nl-signup": HTMLNlSignupElement;
|
||||
"nl-welcome": HTMLNlWelcomeElement;
|
||||
"nl-welcome-signin": HTMLNlWelcomeSigninElement;
|
||||
"nl-welcome-signup": HTMLNlWelcomeSignupElement;
|
||||
}
|
||||
}
|
||||
declare namespace LocalJSX {
|
||||
interface ButtonBase {
|
||||
"darkMode"?: boolean;
|
||||
"disabled"?: boolean;
|
||||
"theme"?: NlTheme;
|
||||
"titleBtn"?: string;
|
||||
}
|
||||
interface NlAuth {
|
||||
"accounts"?: Info[];
|
||||
"authMethods"?: AuthMethod[];
|
||||
"authUrl"?: string;
|
||||
"bunkers"?: string;
|
||||
"connectionString"?: string;
|
||||
"connectionStringServices"?: ConnectionString[];
|
||||
"darkMode"?: boolean;
|
||||
"error"?: string;
|
||||
"hasExtension"?: boolean;
|
||||
"hasOTP"?: boolean;
|
||||
"iframeUrl"?: string;
|
||||
"isLoading"?: boolean;
|
||||
"isLoadingExtension"?: boolean;
|
||||
"isOTP"?: boolean;
|
||||
"localSignup"?: boolean;
|
||||
"njumpIframe"?: string;
|
||||
"onNlChangeDarkMode"?: (event: NlAuthCustomEvent<boolean>) => void;
|
||||
"onNlCloseModal"?: (event: NlAuthCustomEvent<any>) => void;
|
||||
"onNlNostrConnectDefaultCancel"?: (event: NlAuthCustomEvent<void>) => void;
|
||||
"recents"?: RecentType[];
|
||||
"signupNjump"?: boolean;
|
||||
"startScreen"?: string;
|
||||
"theme"?: NlTheme;
|
||||
"welcomeDescription"?: string;
|
||||
"welcomeTitle"?: string;
|
||||
}
|
||||
interface NlBanner {
|
||||
"accounts"?: Info[];
|
||||
"darkMode"?: boolean;
|
||||
"hiddenMode"?: boolean;
|
||||
"isLoading"?: boolean;
|
||||
"isOpen"?: boolean;
|
||||
"notify"?: BannerNotify | null;
|
||||
"onHandleConfirmLogout"?: (event: NlBannerCustomEvent<string>) => void;
|
||||
"onHandleImportModal"?: (event: NlBannerCustomEvent<string>) => void;
|
||||
"onHandleLoginBanner"?: (event: NlBannerCustomEvent<string>) => void;
|
||||
"onHandleLogoutBanner"?: (event: NlBannerCustomEvent<string>) => void;
|
||||
"onHandleNotifyConfirmBanner"?: (event: NlBannerCustomEvent<string>) => void;
|
||||
"onHandleNotifyConfirmBannerIframe"?: (event: NlBannerCustomEvent<string>) => void;
|
||||
"onHandleOpenWelcomeModal"?: (event: NlBannerCustomEvent<string>) => void;
|
||||
"theme"?: NlTheme;
|
||||
"titleBanner"?: string;
|
||||
"userInfo"?: Info | null;
|
||||
}
|
||||
interface NlButton {
|
||||
"darkMode"?: boolean;
|
||||
"disabled"?: boolean;
|
||||
"theme"?: NlTheme;
|
||||
"titleBtn"?: string;
|
||||
}
|
||||
interface NlChangeAccount {
|
||||
"accounts"?: Info[];
|
||||
"currentAccount"?: Info;
|
||||
"darkMode"?: boolean;
|
||||
"onHandleOpenWelcomeModal"?: (event: NlChangeAccountCustomEvent<string>) => void;
|
||||
"onHandleSwitchAccount"?: (event: NlChangeAccountCustomEvent<Info>) => void;
|
||||
"theme"?: 'default' | 'ocean' | 'lemonade' | 'purple';
|
||||
}
|
||||
interface NlConfirmLogout {
|
||||
"description"?: string;
|
||||
"onHandleBackUpModal"?: (event: NlConfirmLogoutCustomEvent<string>) => void;
|
||||
"onHandleLogoutBanner"?: (event: NlConfirmLogoutCustomEvent<string>) => void;
|
||||
"onNlCloseModal"?: (event: NlConfirmLogoutCustomEvent<any>) => void;
|
||||
"titleModal"?: string;
|
||||
}
|
||||
interface NlConnect {
|
||||
"authMethods"?: AuthMethod[];
|
||||
"connectionStringServices"?: ConnectionString[];
|
||||
"hasOTP"?: boolean;
|
||||
"onNlNostrConnect"?: (event: NlConnectCustomEvent<ConnectionString>) => void;
|
||||
"titleWelcome"?: string;
|
||||
}
|
||||
interface NlDialog {
|
||||
}
|
||||
interface NlIframe {
|
||||
"description"?: string;
|
||||
"iframeUrl"?: string;
|
||||
"onNlCloseModal"?: (event: NlIframeCustomEvent<any>) => void;
|
||||
"titleModal"?: string;
|
||||
}
|
||||
interface NlImportFlow {
|
||||
"onNlExportKeys"?: (event: NlImportFlowCustomEvent<void>) => void;
|
||||
"onNlImportAccount"?: (event: NlImportFlowCustomEvent<ConnectionString>) => void;
|
||||
"services"?: ConnectionString[];
|
||||
"titleImport"?: string;
|
||||
"titleInfo"?: string;
|
||||
}
|
||||
interface NlInfo {
|
||||
"darkMode"?: boolean;
|
||||
"theme"?: NlTheme;
|
||||
}
|
||||
interface NlInfoExtension {
|
||||
}
|
||||
interface NlLoading {
|
||||
"onHandleContinue"?: (event: NlLoadingCustomEvent<boolean>) => void;
|
||||
"onStopFetchHandler"?: (event: NlLoadingCustomEvent<boolean>) => void;
|
||||
"path"?: string;
|
||||
}
|
||||
interface NlLocalSignup {
|
||||
"description"?: string;
|
||||
"descriptionNjump"?: string;
|
||||
"onFetchHandler"?: (event: NlLocalSignupCustomEvent<boolean>) => void;
|
||||
"onNlLocalSignup"?: (event: NlLocalSignupCustomEvent<string>) => void;
|
||||
"onNlSignupNjump"?: (event: NlLocalSignupCustomEvent<void>) => void;
|
||||
"signupNjump"?: boolean;
|
||||
"titleSignup"?: string;
|
||||
}
|
||||
interface NlLoginStatus {
|
||||
"info"?: RecentType | Info | undefined;
|
||||
}
|
||||
interface NlOtpMigrate {
|
||||
"onNlImportAccount"?: (event: NlOtpMigrateCustomEvent<ConnectionString>) => void;
|
||||
"services"?: ConnectionString[];
|
||||
"textImport"?: string;
|
||||
"titleImport"?: string;
|
||||
"titleInfo"?: string;
|
||||
}
|
||||
interface NlPreviouslyLogged {
|
||||
"accounts"?: Info[];
|
||||
"description"?: string;
|
||||
"onNlLoginRecentAccount"?: (event: NlPreviouslyLoggedCustomEvent<RecentType>) => void;
|
||||
"onNlRemoveRecent"?: (event: NlPreviouslyLoggedCustomEvent<RecentType>) => void;
|
||||
"onNlSwitchAccount"?: (event: NlPreviouslyLoggedCustomEvent<Info>) => void;
|
||||
"recents"?: RecentType[];
|
||||
"titlePage"?: string;
|
||||
}
|
||||
interface NlSelect {
|
||||
"darkMode"?: boolean;
|
||||
"onSelectDomain"?: (event: NlSelectCustomEvent<string>) => void;
|
||||
"options"?: OptionType[];
|
||||
"selected"?: number;
|
||||
"theme"?: 'default' | 'ocean' | 'lemonade' | 'purple';
|
||||
}
|
||||
interface NlSignin {
|
||||
"description"?: string;
|
||||
"onNlCheckLogin"?: (event: NlSigninCustomEvent<string>) => void;
|
||||
"onNlLogin"?: (event: NlSigninCustomEvent<string>) => void;
|
||||
"titleLogin"?: string;
|
||||
}
|
||||
interface NlSigninBunkerUrl {
|
||||
"description"?: string;
|
||||
"onNlCheckLogin"?: (event: NlSigninBunkerUrlCustomEvent<string>) => void;
|
||||
"onNlLogin"?: (event: NlSigninBunkerUrlCustomEvent<string>) => void;
|
||||
"titleLogin"?: string;
|
||||
}
|
||||
interface NlSigninConnectionString {
|
||||
"connectionString"?: string;
|
||||
"description"?: string;
|
||||
"onNlNostrConnectDefault"?: (event: NlSigninConnectionStringCustomEvent<void>) => void;
|
||||
"titleLogin"?: string;
|
||||
}
|
||||
interface NlSigninOtp {
|
||||
"description"?: string;
|
||||
"descriptionOTP"?: string;
|
||||
"onNlCheckLogin"?: (event: NlSigninOtpCustomEvent<string>) => void;
|
||||
"onNlLoginOTPCode"?: (event: NlSigninOtpCustomEvent<string>) => void;
|
||||
"onNlLoginOTPUser"?: (event: NlSigninOtpCustomEvent<string>) => void;
|
||||
"titleLogin"?: string;
|
||||
"titleLoginOTP"?: string;
|
||||
}
|
||||
interface NlSigninReadOnly {
|
||||
"description"?: string;
|
||||
"onNlCheckLogin"?: (event: NlSigninReadOnlyCustomEvent<string>) => void;
|
||||
"onNlLoginReadOnly"?: (event: NlSigninReadOnlyCustomEvent<string>) => void;
|
||||
"titleLogin"?: string;
|
||||
}
|
||||
interface NlSignup {
|
||||
"bunkers"?: string;
|
||||
"description"?: string;
|
||||
"onFetchHandler"?: (event: NlSignupCustomEvent<boolean>) => void;
|
||||
"onNlCheckSignup"?: (event: NlSignupCustomEvent<string>) => void;
|
||||
"onNlSignup"?: (event: NlSignupCustomEvent<string>) => void;
|
||||
"titleSignup"?: string;
|
||||
}
|
||||
interface NlWelcome {
|
||||
"description"?: string;
|
||||
"titleWelcome"?: string;
|
||||
}
|
||||
interface NlWelcomeSignin {
|
||||
"authMethods"?: AuthMethod[];
|
||||
"hasExtension"?: boolean;
|
||||
"hasOTP"?: boolean;
|
||||
"onNlLoginExtension"?: (event: NlWelcomeSigninCustomEvent<void>) => void;
|
||||
"titleWelcome"?: string;
|
||||
}
|
||||
interface NlWelcomeSignup {
|
||||
"description"?: string;
|
||||
"titleWelcome"?: string;
|
||||
}
|
||||
interface IntrinsicElements {
|
||||
"button-base": ButtonBase;
|
||||
"nl-auth": NlAuth;
|
||||
"nl-banner": NlBanner;
|
||||
"nl-button": NlButton;
|
||||
"nl-change-account": NlChangeAccount;
|
||||
"nl-confirm-logout": NlConfirmLogout;
|
||||
"nl-connect": NlConnect;
|
||||
"nl-dialog": NlDialog;
|
||||
"nl-iframe": NlIframe;
|
||||
"nl-import-flow": NlImportFlow;
|
||||
"nl-info": NlInfo;
|
||||
"nl-info-extension": NlInfoExtension;
|
||||
"nl-loading": NlLoading;
|
||||
"nl-local-signup": NlLocalSignup;
|
||||
"nl-login-status": NlLoginStatus;
|
||||
"nl-otp-migrate": NlOtpMigrate;
|
||||
"nl-previously-logged": NlPreviouslyLogged;
|
||||
"nl-select": NlSelect;
|
||||
"nl-signin": NlSignin;
|
||||
"nl-signin-bunker-url": NlSigninBunkerUrl;
|
||||
"nl-signin-connection-string": NlSigninConnectionString;
|
||||
"nl-signin-otp": NlSigninOtp;
|
||||
"nl-signin-read-only": NlSigninReadOnly;
|
||||
"nl-signup": NlSignup;
|
||||
"nl-welcome": NlWelcome;
|
||||
"nl-welcome-signin": NlWelcomeSignin;
|
||||
"nl-welcome-signup": NlWelcomeSignup;
|
||||
}
|
||||
}
|
||||
export { LocalJSX as JSX };
|
||||
declare module "@stencil/core" {
|
||||
export namespace JSX {
|
||||
interface IntrinsicElements {
|
||||
"button-base": LocalJSX.ButtonBase & JSXBase.HTMLAttributes<HTMLButtonBaseElement>;
|
||||
"nl-auth": LocalJSX.NlAuth & JSXBase.HTMLAttributes<HTMLNlAuthElement>;
|
||||
"nl-banner": LocalJSX.NlBanner & JSXBase.HTMLAttributes<HTMLNlBannerElement>;
|
||||
"nl-button": LocalJSX.NlButton & JSXBase.HTMLAttributes<HTMLNlButtonElement>;
|
||||
"nl-change-account": LocalJSX.NlChangeAccount & JSXBase.HTMLAttributes<HTMLNlChangeAccountElement>;
|
||||
"nl-confirm-logout": LocalJSX.NlConfirmLogout & JSXBase.HTMLAttributes<HTMLNlConfirmLogoutElement>;
|
||||
"nl-connect": LocalJSX.NlConnect & JSXBase.HTMLAttributes<HTMLNlConnectElement>;
|
||||
"nl-dialog": LocalJSX.NlDialog & JSXBase.HTMLAttributes<HTMLNlDialogElement>;
|
||||
"nl-iframe": LocalJSX.NlIframe & JSXBase.HTMLAttributes<HTMLNlIframeElement>;
|
||||
"nl-import-flow": LocalJSX.NlImportFlow & JSXBase.HTMLAttributes<HTMLNlImportFlowElement>;
|
||||
"nl-info": LocalJSX.NlInfo & JSXBase.HTMLAttributes<HTMLNlInfoElement>;
|
||||
"nl-info-extension": LocalJSX.NlInfoExtension & JSXBase.HTMLAttributes<HTMLNlInfoExtensionElement>;
|
||||
"nl-loading": LocalJSX.NlLoading & JSXBase.HTMLAttributes<HTMLNlLoadingElement>;
|
||||
"nl-local-signup": LocalJSX.NlLocalSignup & JSXBase.HTMLAttributes<HTMLNlLocalSignupElement>;
|
||||
"nl-login-status": LocalJSX.NlLoginStatus & JSXBase.HTMLAttributes<HTMLNlLoginStatusElement>;
|
||||
"nl-otp-migrate": LocalJSX.NlOtpMigrate & JSXBase.HTMLAttributes<HTMLNlOtpMigrateElement>;
|
||||
"nl-previously-logged": LocalJSX.NlPreviouslyLogged & JSXBase.HTMLAttributes<HTMLNlPreviouslyLoggedElement>;
|
||||
"nl-select": LocalJSX.NlSelect & JSXBase.HTMLAttributes<HTMLNlSelectElement>;
|
||||
"nl-signin": LocalJSX.NlSignin & JSXBase.HTMLAttributes<HTMLNlSigninElement>;
|
||||
"nl-signin-bunker-url": LocalJSX.NlSigninBunkerUrl & JSXBase.HTMLAttributes<HTMLNlSigninBunkerUrlElement>;
|
||||
"nl-signin-connection-string": LocalJSX.NlSigninConnectionString & JSXBase.HTMLAttributes<HTMLNlSigninConnectionStringElement>;
|
||||
"nl-signin-otp": LocalJSX.NlSigninOtp & JSXBase.HTMLAttributes<HTMLNlSigninOtpElement>;
|
||||
"nl-signin-read-only": LocalJSX.NlSigninReadOnly & JSXBase.HTMLAttributes<HTMLNlSigninReadOnlyElement>;
|
||||
"nl-signup": LocalJSX.NlSignup & JSXBase.HTMLAttributes<HTMLNlSignupElement>;
|
||||
"nl-welcome": LocalJSX.NlWelcome & JSXBase.HTMLAttributes<HTMLNlWelcomeElement>;
|
||||
"nl-welcome-signin": LocalJSX.NlWelcomeSignin & JSXBase.HTMLAttributes<HTMLNlWelcomeSigninElement>;
|
||||
"nl-welcome-signup": LocalJSX.NlWelcomeSignup & JSXBase.HTMLAttributes<HTMLNlWelcomeSignupElement>;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,27 +0,0 @@
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.animate-spin-loading {
|
||||
background: var(--qa-dark-color);
|
||||
animation: spin2 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin2 {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
animation: blink 0.7s infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@@ -1,41 +0,0 @@
|
||||
import { Component, h, Prop, Element } from '@stencil/core';
|
||||
import { NlTheme } from '@/types';
|
||||
import { IButton } from '@/types/button';
|
||||
|
||||
@Component({
|
||||
tag: 'button-base',
|
||||
styleUrl: 'button-base.css',
|
||||
shadow: false,
|
||||
})
|
||||
export class ButtonBase implements IButton {
|
||||
@Element() element: HTMLElement;
|
||||
@Prop({ mutable: true }) theme: NlTheme = 'default';
|
||||
@Prop({ mutable: true }) darkMode: boolean = false;
|
||||
@Prop() titleBtn = 'Open modal';
|
||||
@Prop() disabled = false;
|
||||
|
||||
componentDidRender() {
|
||||
const svgElement = this.element.querySelector('svg');
|
||||
|
||||
if (svgElement) {
|
||||
svgElement.classList.add('flex-shrink-0', 'w-4', 'h-4', 'block');
|
||||
svgElement.removeAttribute('style'); // hack frieze svg
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div class={`theme-${this.theme}`}>
|
||||
<div class="animate-spin-loading active"></div>
|
||||
<button
|
||||
disabled={this.disabled}
|
||||
type="button"
|
||||
class="nl-button py-2.5 px-3 w-full inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
|
||||
>
|
||||
<slot name="icon-start" />
|
||||
{this.titleBtn}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,61 +0,0 @@
|
||||
# button-base
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
|
||||
## Properties
|
||||
|
||||
| Property | Attribute | Description | Type | Default |
|
||||
| ---------- | ----------- | ----------- | -------------------------------------------------------------------- | -------------- |
|
||||
| `darkMode` | `dark-mode` | | `boolean` | `false` |
|
||||
| `disabled` | `disabled` | | `boolean` | `false` |
|
||||
| `theme` | `theme` | | `"crab" \| "default" \| "laan" \| "lemonade" \| "ocean" \| "purple"` | `'default'` |
|
||||
| `titleBtn` | `title-btn` | | `string` | `'Open modal'` |
|
||||
|
||||
|
||||
## Dependencies
|
||||
|
||||
### Used by
|
||||
|
||||
- [nl-banner](../nl-banner)
|
||||
- [nl-button](../nl-button)
|
||||
- [nl-confirm-logout](../nl-confirm-logout)
|
||||
- [nl-connect](../nl-connect)
|
||||
- [nl-import-flow](../nl-import-flow)
|
||||
- [nl-loading](../nl-loading)
|
||||
- [nl-local-signup](../nl-local-signup)
|
||||
- [nl-otp-migrate](../nl-otp-migrate)
|
||||
- [nl-signin](../nl-signin)
|
||||
- [nl-signin-bunker-url](../nl-signin-bunker-url)
|
||||
- [nl-signin-otp](../nl-signin-otp)
|
||||
- [nl-signin-read-only](../nl-signin-read-only)
|
||||
- [nl-signup](../nl-signup)
|
||||
- [nl-welcome](../nl-welcome)
|
||||
- [nl-welcome-signin](../nl-welcome-signin)
|
||||
- [nl-welcome-signup](../nl-welcome-signup)
|
||||
|
||||
### Graph
|
||||
```mermaid
|
||||
graph TD;
|
||||
nl-banner --> button-base
|
||||
nl-button --> button-base
|
||||
nl-confirm-logout --> button-base
|
||||
nl-connect --> button-base
|
||||
nl-import-flow --> button-base
|
||||
nl-loading --> button-base
|
||||
nl-local-signup --> button-base
|
||||
nl-otp-migrate --> button-base
|
||||
nl-signin --> button-base
|
||||
nl-signin-bunker-url --> button-base
|
||||
nl-signin-otp --> button-base
|
||||
nl-signin-read-only --> button-base
|
||||
nl-signup --> button-base
|
||||
nl-welcome --> button-base
|
||||
nl-welcome-signin --> button-base
|
||||
nl-welcome-signup --> button-base
|
||||
style button-base fill:#f9f,stroke:#333,stroke-width:4px
|
||||
```
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
*Built with [StencilJS](https://stenciljs.com/)*
|
||||
@@ -1,3 +0,0 @@
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
@@ -1,332 +0,0 @@
|
||||
import { Component, Event, EventEmitter, Fragment, h, Prop, Watch } from '@stencil/core';
|
||||
import { AuthMethod, ConnectionString, CURRENT_MODULE, Info, NlTheme, RecentType } from '@/types';
|
||||
import { state } from '@/store';
|
||||
|
||||
@Component({
|
||||
tag: 'nl-auth',
|
||||
styleUrl: 'nl-auth.css',
|
||||
shadow: true,
|
||||
})
|
||||
export class NlAuth {
|
||||
@Prop({ mutable: true }) theme: NlTheme = 'default';
|
||||
@Prop() bunkers: string = '';
|
||||
@Prop() startScreen: string = CURRENT_MODULE.WELCOME;
|
||||
@Prop() authMethods: AuthMethod[] = [];
|
||||
@Prop() hasExtension: boolean = false;
|
||||
@Prop() hasOTP: boolean = false;
|
||||
@Prop() isLoading: boolean = false;
|
||||
@Prop() isLoadingExtension: boolean = false;
|
||||
@Prop() isOTP: boolean = false;
|
||||
@Prop() authUrl: string = '';
|
||||
@Prop() iframeUrl: string = '';
|
||||
@Prop() error: string = '';
|
||||
@Prop() localSignup: boolean = false;
|
||||
@Prop() signupNjump: boolean = false;
|
||||
@Prop() njumpIframe: string = '';
|
||||
@Prop({ mutable: true }) accounts: Info[] = [];
|
||||
@Prop({ mutable: true }) recents: RecentType[] = [];
|
||||
@Prop({ mutable: true }) darkMode: boolean = false;
|
||||
@Prop() welcomeTitle: string = '';
|
||||
@Prop() welcomeDescription: string = '';
|
||||
@Prop() connectionString: string = '';
|
||||
@Prop() connectionStringServices: ConnectionString[] = [];
|
||||
|
||||
@Event() nlCloseModal: EventEmitter;
|
||||
@Event() nlChangeDarkMode: EventEmitter<boolean>;
|
||||
@Event() nlNostrConnectDefaultCancel: EventEmitter<void>;
|
||||
|
||||
prevPath: string = '';
|
||||
|
||||
@Watch('isLoading')
|
||||
watchLoadingHandler(newValue: boolean) {
|
||||
state.isLoading = newValue;
|
||||
}
|
||||
|
||||
@Watch('isLoadingExtension')
|
||||
watchLoadingExtensionHandler(newValue: boolean) {
|
||||
state.isLoadingExtension = newValue;
|
||||
}
|
||||
|
||||
@Watch('isOTP')
|
||||
watchOTPHandler(newValue: boolean) {
|
||||
state.isOTP = newValue;
|
||||
}
|
||||
|
||||
@Watch('authUrl')
|
||||
watchAuthUrlHandler(newValue: string) {
|
||||
state.authUrl = newValue;
|
||||
}
|
||||
|
||||
@Watch('iframeUrl')
|
||||
watchIframeUrlHandler(newValue: string) {
|
||||
state.iframeUrl = newValue;
|
||||
}
|
||||
|
||||
@Watch('njumpIframe')
|
||||
watchNjumpIframeHandler(newValue: string) {
|
||||
state.njumpIframe = newValue;
|
||||
}
|
||||
|
||||
@Watch('error')
|
||||
watchErrorHandler(newValue: string) {
|
||||
state.error = newValue;
|
||||
}
|
||||
|
||||
handleClose() {
|
||||
this.nlCloseModal.emit();
|
||||
}
|
||||
|
||||
handleChangeDarkMode() {
|
||||
this.nlChangeDarkMode.emit(!this.darkMode);
|
||||
}
|
||||
|
||||
componentWillLoad() {
|
||||
// init state
|
||||
state.path = [this.startScreen as CURRENT_MODULE];
|
||||
state.error = '';
|
||||
state.iframeUrl = '';
|
||||
state.authUrl = '';
|
||||
state.isLoading = false;
|
||||
state.isLoadingExtension = false;
|
||||
state.isOTP = false;
|
||||
|
||||
console.log('path', state.path);
|
||||
}
|
||||
|
||||
handleClickToBack() {
|
||||
state.path.pop();
|
||||
state.path = [...state.path];
|
||||
|
||||
// reset
|
||||
state.isLoading = false;
|
||||
state.isLoadingExtension = false;
|
||||
state.authUrl = '';
|
||||
state.isOTP = false;
|
||||
}
|
||||
|
||||
switchSignSignUpStrategy(str: CURRENT_MODULE) {
|
||||
if (CURRENT_MODULE.LOCAL_SIGNUP === str) {
|
||||
state.path = [CURRENT_MODULE.WELCOME, CURRENT_MODULE.WELCOME_SIGNUP, str];
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
state.path = [CURRENT_MODULE.WELCOME, str];
|
||||
}
|
||||
|
||||
render() {
|
||||
const classWrapper = `w-full h-full fixed top-0 start-0 z-[80] overflow-x-hidden overflow-y-auto flex items-center ${this.darkMode ? 'dark' : ''}`;
|
||||
const currentModule = state.path.at(-1);
|
||||
|
||||
if (currentModule !== this.prevPath && this.prevPath === CURRENT_MODULE.CONNECTION_STRING) {
|
||||
this.nlNostrConnectDefaultCancel.emit();
|
||||
}
|
||||
this.prevPath = currentModule;
|
||||
|
||||
const renderModule = () => {
|
||||
if (state.isOTP) return <nl-signin-otp />;
|
||||
|
||||
// @ts-ignore
|
||||
// const t: CURRENT_MODULE = 'import' // lastValuePath
|
||||
|
||||
switch (currentModule) {
|
||||
case CURRENT_MODULE.WELCOME:
|
||||
return <nl-welcome titleWelcome={this.welcomeTitle || undefined} description={this.welcomeDescription || undefined} />;
|
||||
case CURRENT_MODULE.LOGIN:
|
||||
return <nl-signin />;
|
||||
case CURRENT_MODULE.SIGNUP:
|
||||
return <nl-signup bunkers={this.bunkers} />;
|
||||
case CURRENT_MODULE.LOCAL_SIGNUP:
|
||||
return <nl-local-signup signupNjump={this.signupNjump} />;
|
||||
case CURRENT_MODULE.CONFIRM_LOGOUT:
|
||||
return <nl-confirm-logout />;
|
||||
case CURRENT_MODULE.IMPORT_FLOW:
|
||||
return <nl-import-flow services={this.connectionStringServices} />;
|
||||
case CURRENT_MODULE.IMPORT_OTP:
|
||||
return <nl-otp-migrate services={this.connectionStringServices} />;
|
||||
case CURRENT_MODULE.INFO:
|
||||
return <nl-info theme={this.theme} darkMode={this.darkMode} />;
|
||||
case CURRENT_MODULE.EXTENSION:
|
||||
return <nl-info-extension />;
|
||||
case CURRENT_MODULE.LOGIN_READ_ONLY:
|
||||
return <nl-signin-read-only />;
|
||||
case CURRENT_MODULE.LOGIN_BUNKER_URL:
|
||||
return <nl-signin-bunker-url />;
|
||||
case CURRENT_MODULE.LOGIN_OTP:
|
||||
return <nl-signin-otp />;
|
||||
case CURRENT_MODULE.WELCOME_LOGIN:
|
||||
return <nl-welcome-signin hasOTP={this.hasOTP} authMethods={this.authMethods} hasExtension={this.hasExtension} />;
|
||||
case CURRENT_MODULE.WELCOME_SIGNUP:
|
||||
return <nl-welcome-signup />;
|
||||
case CURRENT_MODULE.CONNECTION_STRING:
|
||||
return <nl-signin-connection-string connectionString={this.connectionString} />;
|
||||
case CURRENT_MODULE.CONNECT:
|
||||
return <nl-connect connectionStringServices={this.connectionStringServices} authMethods={this.authMethods} />;
|
||||
case CURRENT_MODULE.PREVIOUSLY_LOGGED:
|
||||
return <nl-previously-logged accounts={this.accounts} recents={this.recents} />;
|
||||
case CURRENT_MODULE.IFRAME:
|
||||
return <nl-iframe iframeUrl={this.authUrl} />;
|
||||
default:
|
||||
return <nl-welcome />;
|
||||
}
|
||||
};
|
||||
|
||||
const showLogin =
|
||||
state.isOTP ||
|
||||
(currentModule !== CURRENT_MODULE.INFO &&
|
||||
currentModule !== CURRENT_MODULE.CONFIRM_LOGOUT &&
|
||||
currentModule !== CURRENT_MODULE.IMPORT_FLOW &&
|
||||
currentModule !== CURRENT_MODULE.WELCOME &&
|
||||
currentModule !== CURRENT_MODULE.EXTENSION &&
|
||||
currentModule !== CURRENT_MODULE.IFRAME &&
|
||||
currentModule !== CURRENT_MODULE.PREVIOUSLY_LOGGED);
|
||||
|
||||
const showSignup =
|
||||
currentModule !== CURRENT_MODULE.IFRAME &&
|
||||
(!this.authMethods.length || (!this.localSignup && this.authMethods.includes('connect')) || (this.localSignup && this.authMethods.includes('local')));
|
||||
|
||||
return (
|
||||
<div class={`theme-${this.theme}`} dir="ltr">
|
||||
<div class={classWrapper}>
|
||||
<div onClick={() => this.handleClose()} class="absolute top-0 left-0 w-full h-full bg-gray-500 bg-opacity-75 z-[80]" />
|
||||
|
||||
<div class="nl-bg relative z-[81] w-full flex flex-col rounded-xl sm:max-w-lg sm:w-full sm:mx-auto">
|
||||
<div class={`flex justify-between items-center py-3 px-4`}>
|
||||
<div class="flex gap-2 items-center">
|
||||
<svg class="w-7 h-7" width="225" height="224" viewBox="0 0 225 224" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="224.047" height="224" rx="64" fill={this.theme === 'laan' ? (this.darkMode ? 'white' : 'black') : '#6951FA'} />
|
||||
<path
|
||||
d="M162.441 135.941V88.0593C170.359 85.1674 176 77.5348 176 68.6696C176 57.2919 166.708 48 155.33 48C143.953 48 134.661 57.2444 134.661 68.6696C134.661 77.5822 140.302 85.1674 148.219 88.0593V135.941C147.698 136.13 147.176 136.367 146.655 136.604L87.3956 77.3452C88.6282 74.6904 89.2919 71.7511 89.2919 68.6696C89.2919 57.2444 80.0474 48 68.6696 48C57.2919 48 48 57.2444 48 68.6696C48 77.5822 53.6415 85.1674 61.5585 88.0593V135.941C53.6415 138.833 48 146.465 48 155.33C48 166.708 57.2444 176 68.6696 176C80.0948 176 89.3393 166.708 89.3393 155.33C89.3393 146.418 83.6978 138.833 75.7807 135.941V88.0593C76.3022 87.8696 76.8237 87.6326 77.3452 87.3956L136.604 146.655C135.372 149.31 134.708 152.249 134.708 155.33C134.708 166.708 143.953 176 155.378 176C166.803 176 176.047 166.708 176.047 155.33C176.047 146.418 170.406 138.833 162.489 135.941H162.441Z"
|
||||
fill={this.theme === 'laan' ? (this.darkMode ? 'black' : 'white') : 'white'}
|
||||
/>
|
||||
</svg>
|
||||
<p class="font-bold nl-logo text-base">
|
||||
Nostr <span class="font-light">Login</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-1">
|
||||
<button
|
||||
onClick={() => this.handleChangeDarkMode()}
|
||||
type="button"
|
||||
class="nl-action-button flex justify-center items-center w-7 h-7 text-sm font-semibold rounded-full border border-transparent"
|
||||
>
|
||||
<span class="sr-only">Change theme</span>
|
||||
{this.darkMode ? (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="flex-shrink-0 w-5 h-5">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z"
|
||||
/>
|
||||
</svg>
|
||||
) : (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="flex-shrink-0 w-5 h-5">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z"
|
||||
/>
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
{!state.isLoading && (
|
||||
<button
|
||||
onClick={() => (state.path = [...state.path, CURRENT_MODULE.INFO])}
|
||||
type="button"
|
||||
class="nl-action-button flex justify-center items-center w-7 h-7 text-sm font-semibold rounded-full border border-transparent"
|
||||
>
|
||||
<span class="sr-only">Info</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="flex-shrink-0 w-5 h-5">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={() => this.handleClose()}
|
||||
type="button"
|
||||
class="nl-action-button flex justify-center items-center w-7 h-7 text-sm font-semibold rounded-full border border-transparent"
|
||||
>
|
||||
<span class="sr-only">Close</span>
|
||||
<svg
|
||||
class="flex-shrink-0 w-5 h-5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M18 6 6 18" />
|
||||
<path d="m6 6 12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{state.path.length > 1 && !state.isLoading && (
|
||||
<div class="p-4">
|
||||
<button
|
||||
onClick={() => this.handleClickToBack()}
|
||||
type="button"
|
||||
class="nl-action-button flex justify-center items-center w-7 h-7 text-sm font-semibold rounded-full border border-transparent dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
|
||||
data-hs-overlay="#hs-vertically-centered-modal"
|
||||
>
|
||||
<span class="sr-only">Back</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="flex-shrink-0 w-5 h-5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
{state.isLoading || state.authUrl ? (
|
||||
<nl-loading path={currentModule} />
|
||||
) : (
|
||||
<Fragment>
|
||||
{renderModule()}
|
||||
{showLogin && (
|
||||
<Fragment>
|
||||
{currentModule === CURRENT_MODULE.WELCOME_SIGNUP || currentModule === CURRENT_MODULE.SIGNUP || currentModule === CURRENT_MODULE.LOCAL_SIGNUP ? (
|
||||
<div class="p-4 overflow-y-auto">
|
||||
<p class="nl-footer font-light text-center text-sm pt-3 max-w-96 mx-auto">
|
||||
If you already have a profile please{' '}
|
||||
<span onClick={() => this.switchSignSignUpStrategy(CURRENT_MODULE.WELCOME_LOGIN)} class="cursor-pointer text-blue-400">
|
||||
log in
|
||||
</span>
|
||||
.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
showSignup && (
|
||||
<div class="p-4 overflow-y-auto">
|
||||
<p class="nl-footer font-light text-center text-sm pt-3 max-w-96 mx-auto">
|
||||
If you don't have a profile please{' '}
|
||||
<span
|
||||
onClick={() =>
|
||||
this.localSignup ? this.switchSignSignUpStrategy(CURRENT_MODULE.LOCAL_SIGNUP) : this.switchSignSignUpStrategy(CURRENT_MODULE.WELCOME_SIGNUP)
|
||||
}
|
||||
class="cursor-pointer text-blue-400"
|
||||
>
|
||||
sign up
|
||||
</span>
|
||||
.
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</Fragment>
|
||||
)}
|
||||
</Fragment>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,112 +0,0 @@
|
||||
# nl-auth
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
|
||||
## Properties
|
||||
|
||||
| Property | Attribute | Description | Type | Default |
|
||||
| -------------------------- | ---------------------- | ----------- | -------------------------------------------------------------------- | ------------------------ |
|
||||
| `accounts` | -- | | `Info[]` | `[]` |
|
||||
| `authMethods` | -- | | `AuthMethod[]` | `[]` |
|
||||
| `authUrl` | `auth-url` | | `string` | `''` |
|
||||
| `bunkers` | `bunkers` | | `string` | `''` |
|
||||
| `connectionString` | `connection-string` | | `string` | `''` |
|
||||
| `connectionStringServices` | -- | | `ConnectionString[]` | `[]` |
|
||||
| `darkMode` | `dark-mode` | | `boolean` | `false` |
|
||||
| `error` | `error` | | `string` | `''` |
|
||||
| `hasExtension` | `has-extension` | | `boolean` | `false` |
|
||||
| `hasOTP` | `has-o-t-p` | | `boolean` | `false` |
|
||||
| `iframeUrl` | `iframe-url` | | `string` | `''` |
|
||||
| `isLoading` | `is-loading` | | `boolean` | `false` |
|
||||
| `isLoadingExtension` | `is-loading-extension` | | `boolean` | `false` |
|
||||
| `isOTP` | `is-o-t-p` | | `boolean` | `false` |
|
||||
| `localSignup` | `local-signup` | | `boolean` | `false` |
|
||||
| `njumpIframe` | `njump-iframe` | | `string` | `''` |
|
||||
| `recents` | -- | | `RecentType[]` | `[]` |
|
||||
| `signupNjump` | `signup-njump` | | `boolean` | `false` |
|
||||
| `startScreen` | `start-screen` | | `string` | `CURRENT_MODULE.WELCOME` |
|
||||
| `theme` | `theme` | | `"crab" \| "default" \| "laan" \| "lemonade" \| "ocean" \| "purple"` | `'default'` |
|
||||
| `welcomeDescription` | `welcome-description` | | `string` | `''` |
|
||||
| `welcomeTitle` | `welcome-title` | | `string` | `''` |
|
||||
|
||||
|
||||
## Events
|
||||
|
||||
| Event | Description | Type |
|
||||
| ----------------------------- | ----------- | ---------------------- |
|
||||
| `nlChangeDarkMode` | | `CustomEvent<boolean>` |
|
||||
| `nlCloseModal` | | `CustomEvent<any>` |
|
||||
| `nlNostrConnectDefaultCancel` | | `CustomEvent<void>` |
|
||||
|
||||
|
||||
## Dependencies
|
||||
|
||||
### Depends on
|
||||
|
||||
- [nl-signin-otp](../nl-signin-otp)
|
||||
- [nl-welcome](../nl-welcome)
|
||||
- [nl-signin](../nl-signin)
|
||||
- [nl-signup](../nl-signup)
|
||||
- [nl-local-signup](../nl-local-signup)
|
||||
- [nl-confirm-logout](../nl-confirm-logout)
|
||||
- [nl-import-flow](../nl-import-flow)
|
||||
- [nl-otp-migrate](../nl-otp-migrate)
|
||||
- [nl-info](../nl-info)
|
||||
- [nl-info-extension](../nl-info-extension)
|
||||
- [nl-signin-read-only](../nl-signin-read-only)
|
||||
- [nl-signin-bunker-url](../nl-signin-bunker-url)
|
||||
- [nl-welcome-signin](../nl-welcome-signin)
|
||||
- [nl-welcome-signup](../nl-welcome-signup)
|
||||
- [nl-signin-connection-string](../nl-signin-connection-string)
|
||||
- [nl-connect](../nl-connect)
|
||||
- [nl-previously-logged](../nl-previously-logged)
|
||||
- [nl-iframe](../nl-iframe)
|
||||
- [nl-loading](../nl-loading)
|
||||
|
||||
### Graph
|
||||
```mermaid
|
||||
graph TD;
|
||||
nl-auth --> nl-signin-otp
|
||||
nl-auth --> nl-welcome
|
||||
nl-auth --> nl-signin
|
||||
nl-auth --> nl-signup
|
||||
nl-auth --> nl-local-signup
|
||||
nl-auth --> nl-confirm-logout
|
||||
nl-auth --> nl-import-flow
|
||||
nl-auth --> nl-otp-migrate
|
||||
nl-auth --> nl-info
|
||||
nl-auth --> nl-info-extension
|
||||
nl-auth --> nl-signin-read-only
|
||||
nl-auth --> nl-signin-bunker-url
|
||||
nl-auth --> nl-welcome-signin
|
||||
nl-auth --> nl-welcome-signup
|
||||
nl-auth --> nl-signin-connection-string
|
||||
nl-auth --> nl-connect
|
||||
nl-auth --> nl-previously-logged
|
||||
nl-auth --> nl-iframe
|
||||
nl-auth --> nl-loading
|
||||
nl-signin-otp --> button-base
|
||||
nl-welcome --> button-base
|
||||
nl-signin --> button-base
|
||||
nl-signup --> nl-select
|
||||
nl-signup --> button-base
|
||||
nl-local-signup --> button-base
|
||||
nl-confirm-logout --> button-base
|
||||
nl-import-flow --> button-base
|
||||
nl-import-flow --> nl-select
|
||||
nl-otp-migrate --> nl-select
|
||||
nl-otp-migrate --> button-base
|
||||
nl-signin-read-only --> button-base
|
||||
nl-signin-bunker-url --> button-base
|
||||
nl-welcome-signin --> button-base
|
||||
nl-welcome-signup --> button-base
|
||||
nl-connect --> button-base
|
||||
nl-previously-logged --> nl-login-status
|
||||
nl-loading --> button-base
|
||||
style nl-auth fill:#f9f,stroke:#333,stroke-width:4px
|
||||
```
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
*Built with [StencilJS](https://stenciljs.com/)*
|
||||
@@ -1,4 +0,0 @@
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@@ -1,345 +0,0 @@
|
||||
import { Component, Event, EventEmitter, Fragment, h, Prop, State, Watch } from '@stencil/core';
|
||||
import { BannerNotify, BannerNotifyMode, Info, METHOD_MODULE, NlTheme } from '@/types';
|
||||
|
||||
@Component({
|
||||
tag: 'nl-banner',
|
||||
styleUrl: 'nl-banner.css',
|
||||
shadow: true,
|
||||
})
|
||||
export class NlBanner {
|
||||
@Prop({ mutable: true }) theme: NlTheme = 'default';
|
||||
@Prop({ mutable: true }) darkMode: boolean = false;
|
||||
@Prop({ mutable: true }) hiddenMode: boolean = false;
|
||||
@Prop() titleBanner: string = '';
|
||||
@Prop({ mutable: true }) isOpen: boolean = false;
|
||||
|
||||
@Prop() isLoading: boolean = false;
|
||||
@Prop() notify: BannerNotify | null = null;
|
||||
@Prop() userInfo: Info | null = null;
|
||||
@Prop({ mutable: true }) accounts: Info[] = [];
|
||||
|
||||
@State() isUserImgError = false;
|
||||
|
||||
@State() domain: string = '';
|
||||
@State() mode: BannerNotifyMode = '';
|
||||
@State() url: string = '';
|
||||
@State() isOpenConfirm: boolean = false;
|
||||
|
||||
@Event() handleNotifyConfirmBanner: EventEmitter<string>;
|
||||
@Event() handleNotifyConfirmBannerIframe: EventEmitter<string>;
|
||||
@Event() handleLoginBanner: EventEmitter<string>;
|
||||
@Event() handleLogoutBanner: EventEmitter<string>;
|
||||
@Event() handleOpenWelcomeModal: EventEmitter<string>;
|
||||
@Event() handleConfirmLogout: EventEmitter<string>;
|
||||
@Event() handleImportModal: EventEmitter<string>;
|
||||
|
||||
@Watch('notify')
|
||||
watchNotifyHandler(notify: BannerNotify) {
|
||||
this.isOpen = true;
|
||||
this.isOpenConfirm = true;
|
||||
this.domain = this.userInfo?.domain || this.userInfo?.nip05?.split('@')?.[1] || '';
|
||||
|
||||
this.mode = notify.mode;
|
||||
this.url = notify.url;
|
||||
if (!this.mode) {
|
||||
this.isOpenConfirm = false;
|
||||
this.isOpen = false;
|
||||
}
|
||||
}
|
||||
|
||||
handleOpen() {
|
||||
if (this.userInfo) {
|
||||
this.isOpen = true;
|
||||
} else {
|
||||
this.handleOpenWelcomeModal.emit();
|
||||
}
|
||||
}
|
||||
|
||||
handleClose() {
|
||||
this.isOpen = false;
|
||||
}
|
||||
|
||||
handleLogin() {
|
||||
this.handleLoginBanner.emit(METHOD_MODULE.LOGIN);
|
||||
this.handleClose();
|
||||
}
|
||||
|
||||
handleSignup() {
|
||||
this.handleLoginBanner.emit(METHOD_MODULE.SIGNUP);
|
||||
this.handleClose();
|
||||
}
|
||||
|
||||
handleImport() {
|
||||
this.handleImportModal.emit();
|
||||
this.handleClose();
|
||||
}
|
||||
|
||||
handleLogout() {
|
||||
const isBackupKey = localStorage.getItem('backupKey');
|
||||
|
||||
if (isBackupKey) {
|
||||
this.handleLogoutBanner.emit(METHOD_MODULE.LOGOUT);
|
||||
this.handleClose();
|
||||
localStorage.removeItem('backupKey');
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.userInfo.authMethod === 'local') {
|
||||
this.handleConfirmLogout.emit();
|
||||
} else {
|
||||
this.handleLogoutBanner.emit(METHOD_MODULE.LOGOUT);
|
||||
}
|
||||
|
||||
this.handleClose();
|
||||
}
|
||||
|
||||
handleConfirm() {
|
||||
switch (this.mode) {
|
||||
case 'authUrl':
|
||||
this.handleNotifyConfirmBanner.emit(this.url);
|
||||
break;
|
||||
case 'iframeAuthUrl':
|
||||
this.handleNotifyConfirmBannerIframe.emit(this.url);
|
||||
break;
|
||||
}
|
||||
this.handleClose();
|
||||
}
|
||||
|
||||
render() {
|
||||
const isShowImg = Boolean(this.userInfo?.picture);
|
||||
const userName = this.userInfo?.name || this.userInfo?.nip05?.split('@')?.[0] || this.userInfo?.pubkey || '';
|
||||
const isShowUserName = Boolean(userName);
|
||||
const isTemporary = this.userInfo && this.userInfo.authMethod === 'local';
|
||||
const isBackupKey = localStorage.getItem('backupKey');
|
||||
|
||||
const defaultUserAvatar = (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-full">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M17.982 18.725A7.488 7.488 0 0 0 12 15.75a7.488 7.488 0 0 0-5.982 2.975m11.963 0a9 9 0 1 0-11.963 0m11.963 0A8.966 8.966 0 0 1 12 21a8.966 8.966 0 0 1-5.982-2.275M15 9.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
const content = (
|
||||
<Fragment>
|
||||
<div class="block w-[48px] h-[46px] relative z-10">
|
||||
<div onClick={() => this.handleOpen()} class={`flex w-52 h-[46px] items-center pl-[11px]`}>
|
||||
<span
|
||||
class={`${this.isLoading ? 'w-5 h-5 border-[2px] mr-3.5 ml-[2px] opacity-1' : 'w-0 h-0 border-[0px] mr-0 opacity-0 ml-0'} animate-spin transition-all duration-300 ease-in-out inline-block border-current border-t-transparent text-slate-900 dark:text-gray-300 rounded-full`}
|
||||
role="status"
|
||||
aria-label="loading"
|
||||
></span>
|
||||
|
||||
{this.userInfo ? (
|
||||
<div class={`uppercase font-bold w-6 h-6 mr-2 rounded-full border border-gray-200 flex justify-center items-center`}>
|
||||
{isShowImg ? (
|
||||
this.isUserImgError ? (
|
||||
defaultUserAvatar
|
||||
) : (
|
||||
<img class="w-full rounded-full" src={this.userInfo.picture} alt="Logo" onError={() => (this.isUserImgError = true)} />
|
||||
)
|
||||
) : isShowUserName ? (
|
||||
userName[0]
|
||||
) : (
|
||||
defaultUserAvatar
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div class="flex justify-center items-center">
|
||||
<svg class="w-6 h-6" width="225" height="224" viewBox="0 0 225 224" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="224.047" height="224" rx="64" fill={this.theme === 'laan' ? (this.darkMode ? 'white' : 'black') : '#6951FA'} />
|
||||
<path
|
||||
d="M162.441 135.941V88.0593C170.359 85.1674 176 77.5348 176 68.6696C176 57.2919 166.708 48 155.33 48C143.953 48 134.661 57.2444 134.661 68.6696C134.661 77.5822 140.302 85.1674 148.219 88.0593V135.941C147.698 136.13 147.176 136.367 146.655 136.604L87.3956 77.3452C88.6282 74.6904 89.2919 71.7511 89.2919 68.6696C89.2919 57.2444 80.0474 48 68.6696 48C57.2919 48 48 57.2444 48 68.6696C48 77.5822 53.6415 85.1674 61.5585 88.0593V135.941C53.6415 138.833 48 146.465 48 155.33C48 166.708 57.2444 176 68.6696 176C80.0948 176 89.3393 166.708 89.3393 155.33C89.3393 146.418 83.6978 138.833 75.7807 135.941V88.0593C76.3022 87.8696 76.8237 87.6326 77.3452 87.3956L136.604 146.655C135.372 149.31 134.708 152.249 134.708 155.33C134.708 166.708 143.953 176 155.378 176C166.803 176 176.047 166.708 176.047 155.33C176.047 146.418 170.406 138.833 162.489 135.941H162.441Z"
|
||||
fill={this.theme === 'laan' ? (this.darkMode ? 'black' : 'white') : 'white'}
|
||||
/>
|
||||
</svg>
|
||||
{this.isOpen && (
|
||||
<span class="px-2">
|
||||
<b>Nostr</b> Login
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{this.isOpen && isShowUserName && <div class="show-slow truncate w-16 text-xs">{userName}</div>}
|
||||
{this.isOpen && isShowUserName && <nl-login-status info={this.userInfo} />}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => this.handleClose()}
|
||||
type="button"
|
||||
class={`${this.isOpen ? 'z-20' : 'z-0'} nl-action-button absolute right-2 top-2 z-0 show-slow grid place-items-center w-7 h-7 text-sm font-semibold rounded-full border border-transparent`}
|
||||
>
|
||||
<span class="sr-only">Close</span>
|
||||
<svg
|
||||
class="flex-shrink-0 w-5 h-5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M18 6 6 18" />
|
||||
<path d="m6 6 12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<div class="p-3 show-slow">
|
||||
{this.isOpenConfirm ? (
|
||||
<div>
|
||||
<div class="w-8 h-8 p-1/2 rounded-full border border-gray-200 bg-white mb-2 mt-2 show-slow m-auto">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#5a68ff" class="w-full">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<p class="mb-2 text-center max-w-40 min-w-40 mx-auto">
|
||||
{this.mode === 'timeout' ? 'Keys not responding, check your key storage app' : `Confirmation required at ${this.domain}`}
|
||||
</p>
|
||||
|
||||
{this.mode === 'timeout' ? (
|
||||
<a
|
||||
onClick={() => this.handleClose()}
|
||||
href={`https://${this.domain}`}
|
||||
target="_blank"
|
||||
class="nl-button text-nowrap py-2.5 px-3 w-full inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
|
||||
>
|
||||
Go to {this.domain}
|
||||
</a>
|
||||
) : this.mode === 'rebind' ? (
|
||||
<iframe src={this.url} width={'180'} height={'80'} frameBorder={'0'}></iframe>
|
||||
) : (
|
||||
<button-base onClick={() => this.handleConfirm()} titleBtn="Confirm" />
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<div>
|
||||
{this.titleBanner && <p class="mb-2 text-center show-slow max-w-40 min-w-40 mx-auto">{this.titleBanner}</p>}
|
||||
{isTemporary && (
|
||||
<Fragment>
|
||||
{!isBackupKey && <p class="mb-2 text-center show-slow text-red-400 max-w-40 min-w-40 mx-auto">Your profile may be lost if you close this tab</p>}
|
||||
<div class="mb-2">
|
||||
<button-base onClick={() => this.handleImport()} theme="lemonade" titleBtn="Back up profile" />
|
||||
</div>
|
||||
</Fragment>
|
||||
)}
|
||||
<div class="mb-2">
|
||||
<nl-change-account currentAccount={this.userInfo} accounts={this.accounts} />
|
||||
</div>
|
||||
{/* {Boolean(this.listNotifies.length) && (
|
||||
<div
|
||||
onClick={() => this.handleRetryConfirm()}
|
||||
class="show-slow border border-yellow-600 text-yellow-600 bg-yellow-100 p-2 rounded-lg mb-2 cursor-pointer w-44 text-xs m-auto text-center"
|
||||
>
|
||||
Requests: {this.listNotifies.length}
|
||||
</div>
|
||||
)} */}
|
||||
{!this.userInfo ? (
|
||||
<div>
|
||||
<button-base onClick={() => this.handleLogin()} titleBtn="Log in">
|
||||
<svg
|
||||
style={{ display: 'none' }}
|
||||
slot="icon-start"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="flex-shrink-0 w-4 h-4"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M15.75 5.25a3 3 0 0 1 3 3m3 0a6 6 0 0 1-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1 1 21.75 8.25Z"
|
||||
/>
|
||||
</svg>
|
||||
</button-base>
|
||||
<button-base onClick={() => this.handleSignup()} titleBtn="Sign up">
|
||||
<svg
|
||||
style={{ display: 'none' }}
|
||||
slot="icon-start"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="flex-shrink-0 w-4 h-4"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M18 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0ZM3 19.235v-.11a6.375 6.375 0 0 1 12.75 0v.109A12.318 12.318 0 0 1 9.374 21c-2.331 0-4.512-.645-6.374-1.766Z"
|
||||
/>
|
||||
</svg>
|
||||
</button-base>
|
||||
</div>
|
||||
) : (
|
||||
<button-base onClick={() => this.handleLogout()} titleBtn="Log out" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Fragment>
|
||||
);
|
||||
|
||||
// https://gist.github.com/Haprog/848fc451c25da00b540e6d34c301e96a
|
||||
function deepQuerySelectorAll(selector: string, root?: Element) {
|
||||
root = root || document.body;
|
||||
const results = Array.from(root.querySelectorAll(selector));
|
||||
const pushNestedResults = function (root) {
|
||||
deepQuerySelectorAll(selector, root).forEach(elem => {
|
||||
if (!results.includes(elem)) {
|
||||
results.push(elem);
|
||||
}
|
||||
});
|
||||
};
|
||||
if (root.shadowRoot) {
|
||||
pushNestedResults(root.shadowRoot);
|
||||
}
|
||||
for (const elem of Array.from(root.querySelectorAll('*'))) {
|
||||
if (elem.shadowRoot) {
|
||||
pushNestedResults(elem.shadowRoot);
|
||||
}
|
||||
}
|
||||
return results;
|
||||
}
|
||||
|
||||
const dialogs = deepQuerySelectorAll('dialog');
|
||||
const needDialog = !!dialogs.find(d => (d as HTMLDialogElement).open && !d.classList.contains('nl-banner-dialog'));
|
||||
|
||||
return (
|
||||
<div class={`theme-${this.theme} ${!this.isOpen && this.hiddenMode ? 'hidden' : ''}`}>
|
||||
<div class={this.darkMode && 'dark'} dir="ltr">
|
||||
{this.isOpenConfirm && needDialog ? (
|
||||
<nl-dialog>
|
||||
<div
|
||||
class={`nl-banner ${this.isOpen ? 'w-52 h-auto right-2 rounded-r-lg isOpen ' : 'rounded-r-none hover:rounded-r-lg cursor-pointer'} z-50 w-12 h-12 fixed top-52 right-0 inline-block gap-x-2 text-sm font-medium rounded-lg hover:right-2 transition-all duration-300 ease-in-out`}
|
||||
>
|
||||
{content}
|
||||
</div>
|
||||
</nl-dialog>
|
||||
) : (
|
||||
<div
|
||||
class={`nl-banner ${this.isOpen ? 'w-52 h-auto right-2 rounded-r-lg isOpen' : 'rounded-r-none hover:rounded-r-lg cursor-pointer'} z-50 w-12 h-12 fixed top-52 right-0 inline-block gap-x-2 text-sm font-medium rounded-lg hover:right-2 transition-all duration-300 ease-in-out`}
|
||||
>
|
||||
{content}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,56 +0,0 @@
|
||||
# nl-banner
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
|
||||
## Properties
|
||||
|
||||
| Property | Attribute | Description | Type | Default |
|
||||
| ------------- | -------------- | ----------- | -------------------------------------------------------------------- | ----------- |
|
||||
| `accounts` | -- | | `Info[]` | `[]` |
|
||||
| `darkMode` | `dark-mode` | | `boolean` | `false` |
|
||||
| `hiddenMode` | `hidden-mode` | | `boolean` | `false` |
|
||||
| `isLoading` | `is-loading` | | `boolean` | `false` |
|
||||
| `isOpen` | `is-open` | | `boolean` | `false` |
|
||||
| `notify` | -- | | `BannerNotify` | `null` |
|
||||
| `theme` | `theme` | | `"crab" \| "default" \| "laan" \| "lemonade" \| "ocean" \| "purple"` | `'default'` |
|
||||
| `titleBanner` | `title-banner` | | `string` | `''` |
|
||||
| `userInfo` | -- | | `Info` | `null` |
|
||||
|
||||
|
||||
## Events
|
||||
|
||||
| Event | Description | Type |
|
||||
| --------------------------------- | ----------- | --------------------- |
|
||||
| `handleConfirmLogout` | | `CustomEvent<string>` |
|
||||
| `handleImportModal` | | `CustomEvent<string>` |
|
||||
| `handleLoginBanner` | | `CustomEvent<string>` |
|
||||
| `handleLogoutBanner` | | `CustomEvent<string>` |
|
||||
| `handleNotifyConfirmBanner` | | `CustomEvent<string>` |
|
||||
| `handleNotifyConfirmBannerIframe` | | `CustomEvent<string>` |
|
||||
| `handleOpenWelcomeModal` | | `CustomEvent<string>` |
|
||||
|
||||
|
||||
## Dependencies
|
||||
|
||||
### Depends on
|
||||
|
||||
- [nl-login-status](../nl-login-status)
|
||||
- [button-base](../button-base)
|
||||
- [nl-change-account](../nl-change-account)
|
||||
- [nl-dialog](../nl-dialog)
|
||||
|
||||
### Graph
|
||||
```mermaid
|
||||
graph TD;
|
||||
nl-banner --> nl-login-status
|
||||
nl-banner --> button-base
|
||||
nl-banner --> nl-change-account
|
||||
nl-banner --> nl-dialog
|
||||
nl-change-account --> nl-login-status
|
||||
style nl-banner fill:#f9f,stroke:#333,stroke-width:4px
|
||||
```
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
*Built with [StencilJS](https://stenciljs.com/)*
|
||||
@@ -1,18 +0,0 @@
|
||||
import { Component, h, Prop } from '@stencil/core';
|
||||
import { NlTheme } from '@/types';
|
||||
import { IButton } from '@/types/button';
|
||||
|
||||
@Component({
|
||||
tag: 'nl-button',
|
||||
shadow: true,
|
||||
})
|
||||
export class NlButton implements IButton {
|
||||
@Prop() theme: NlTheme = 'default';
|
||||
@Prop() darkMode: boolean = false;
|
||||
@Prop() titleBtn = 'Open modal';
|
||||
@Prop() disabled = false;
|
||||
|
||||
render() {
|
||||
return <button-base theme={this.theme} darkMode={this.darkMode} titleBtn={this.titleBtn} disabled={this.disabled} />;
|
||||
}
|
||||
}
|
||||
@@ -1,31 +0,0 @@
|
||||
# nl-button
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
|
||||
## Properties
|
||||
|
||||
| Property | Attribute | Description | Type | Default |
|
||||
| ---------- | ----------- | ----------- | -------------------------------------------------------------------- | -------------- |
|
||||
| `darkMode` | `dark-mode` | | `boolean` | `false` |
|
||||
| `disabled` | `disabled` | | `boolean` | `false` |
|
||||
| `theme` | `theme` | | `"crab" \| "default" \| "laan" \| "lemonade" \| "ocean" \| "purple"` | `'default'` |
|
||||
| `titleBtn` | `title-btn` | | `string` | `'Open modal'` |
|
||||
|
||||
|
||||
## Dependencies
|
||||
|
||||
### Depends on
|
||||
|
||||
- [button-base](../button-base)
|
||||
|
||||
### Graph
|
||||
```mermaid
|
||||
graph TD;
|
||||
nl-button --> button-base
|
||||
style nl-button fill:#f9f,stroke:#333,stroke-width:4px
|
||||
```
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
*Built with [StencilJS](https://stenciljs.com/)*
|
||||
@@ -1,3 +0,0 @@
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
@@ -1,154 +0,0 @@
|
||||
import { Component, h, Listen, Prop, State, Watch, Element, Event, EventEmitter } from '@stencil/core';
|
||||
import { Info } from '@/types';
|
||||
|
||||
@Component({
|
||||
tag: 'nl-change-account',
|
||||
styleUrl: 'nl-change-account.css',
|
||||
shadow: false,
|
||||
})
|
||||
export class NLChangeAccount {
|
||||
@State() isOpen: boolean = false;
|
||||
@State() options: Info[] = [];
|
||||
@Prop() accounts: Info[] = [];
|
||||
@Prop() currentAccount: Info = null;
|
||||
|
||||
@Element() element: HTMLElement;
|
||||
@Event() handleOpenWelcomeModal: EventEmitter<string>;
|
||||
@Event() handleSwitchAccount: EventEmitter<Info>;
|
||||
|
||||
buttonRef: HTMLButtonElement;
|
||||
ulRef: HTMLUListElement;
|
||||
wrapperRef: HTMLDivElement;
|
||||
|
||||
@Listen('click', { target: 'window' })
|
||||
handleWindowClick() {
|
||||
if (this.wrapperRef.querySelector('.listClass')) {
|
||||
this.isOpen = false;
|
||||
}
|
||||
}
|
||||
|
||||
toggleDropdown() {
|
||||
this.isOpen = !this.isOpen;
|
||||
this.calculateDropdownPosition();
|
||||
}
|
||||
|
||||
@State() mode: boolean = false;
|
||||
@Prop() darkMode: boolean = false;
|
||||
@State() themeState: 'default' | 'ocean' | 'lemonade' | 'purple' = 'default';
|
||||
@Prop() theme: 'default' | 'ocean' | 'lemonade' | 'purple' = 'default';
|
||||
@Watch('theme')
|
||||
watchPropHandler(newValue: 'default' | 'ocean' | 'lemonade' | 'purple') {
|
||||
this.themeState = newValue;
|
||||
}
|
||||
|
||||
@Watch('darkMode')
|
||||
watchModeHandler(newValue: boolean) {
|
||||
this.mode = newValue;
|
||||
}
|
||||
|
||||
@Watch('accounts')
|
||||
watchAccountsHandler(newValue: Info[]) {
|
||||
this.options = newValue;
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.themeState = this.theme;
|
||||
this.mode = this.darkMode;
|
||||
}
|
||||
|
||||
calculateDropdownPosition() {
|
||||
if (this.isOpen && this.buttonRef) {
|
||||
const buttonRect = this.buttonRef.getBoundingClientRect();
|
||||
this.ulRef.style.top = `${buttonRect.height}px`;
|
||||
}
|
||||
}
|
||||
|
||||
handleChange(el: Info) {
|
||||
this.handleSwitchAccount.emit(el);
|
||||
}
|
||||
|
||||
handleOpenModal() {
|
||||
this.handleOpenWelcomeModal.emit();
|
||||
}
|
||||
|
||||
render() {
|
||||
const listClass = `${this.isOpen ? 'listClass flex flex-col gap-2' : 'hidden'} w-full nl-select-list absolute z-10 left-0 shadow-md rounded-lg p-2 mt-1 after:h-4 after:absolute after:-bottom-4 after:start-0 after:w-full before:h-4 before:absolute before:-top-4 before:start-0 before:w-full`;
|
||||
const arrowClass = `${this.isOpen ? 'rotate-180' : 'rotate-0'} duration-300 flex-shrink-0 w-4 h-4 text-gray-500`;
|
||||
const filteredOptions =
|
||||
this.options && this.currentAccount ? this.options.filter(el => el.pubkey !== this.currentAccount.pubkey || el.authMethod !== this.currentAccount.authMethod) : [];
|
||||
|
||||
return (
|
||||
<div class={`theme-${this.themeState}`}>
|
||||
<div class="relative" ref={el => (this.wrapperRef = el)}>
|
||||
<button
|
||||
ref={el => (this.buttonRef = el)}
|
||||
onClick={() => this.toggleDropdown()}
|
||||
type="button"
|
||||
class="nl-select peer py-3 px-4 flex items-center w-full justify-between border-transparent rounded-lg text-sm disabled:opacity-50 disabled:pointer-events-none dark:border-transparent"
|
||||
>
|
||||
<span class="text-gray-500">Switch profile</span>
|
||||
<svg
|
||||
class={arrowClass}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="m6 9 6 6 6-6" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<ul ref={el => (this.ulRef = el)} class={listClass}>
|
||||
{this.options &&
|
||||
filteredOptions.map(el => {
|
||||
const isShowImg = Boolean(el?.picture);
|
||||
const userName = el.name || el.nip05 || el.pubkey;
|
||||
const isShowUserName = Boolean(userName);
|
||||
|
||||
return (
|
||||
<li onClick={() => this.handleChange(el)} class="nl-select-option flex cursor-pointer items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm">
|
||||
<div class="uppercase font-bold w-full max-w-6 h-6 rounded-full border border-gray-400 flex justify-center items-center">
|
||||
{isShowImg ? (
|
||||
<img class="w-full rounded-full" src={el.picture} alt="Logo" />
|
||||
) : isShowUserName ? (
|
||||
userName[0]
|
||||
) : (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-full">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M17.982 18.725A7.488 7.488 0 0 0 12 15.75a7.488 7.488 0 0 0-5.982 2.975m11.963 0a9 9 0 1 0-11.963 0m11.963 0A8.966 8.966 0 0 1 12 21a8.966 8.966 0 0 1-5.982-2.275M15 9.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
|
||||
/>
|
||||
</svg>
|
||||
)}
|
||||
</div>
|
||||
{/*<div class="truncate overflow-hidden w-full">{userName}</div>*/}
|
||||
|
||||
<div class="overflow-hidden flex flex-col w-full">
|
||||
<div class="truncate overflow-hidden">{userName}</div>
|
||||
<nl-login-status info={el} />
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
<li class="first:pt-0 pt-2 border-t-[1px] first:border-none border-gray-300">
|
||||
<div onClick={() => this.handleOpenModal()} class="nl-select-option flex cursor-pointer items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm">
|
||||
<div class="uppercase font-bold w-6 h-6 rounded-full border border-gray-400 flex justify-center items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
|
||||
</svg>
|
||||
</div>
|
||||
Add profile
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,44 +0,0 @@
|
||||
# nl-change-account
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
|
||||
## Properties
|
||||
|
||||
| Property | Attribute | Description | Type | Default |
|
||||
| ---------------- | ----------- | ----------- | ------------------------------------------------ | ----------- |
|
||||
| `accounts` | -- | | `Info[]` | `[]` |
|
||||
| `currentAccount` | -- | | `Info` | `null` |
|
||||
| `darkMode` | `dark-mode` | | `boolean` | `false` |
|
||||
| `theme` | `theme` | | `"default" \| "lemonade" \| "ocean" \| "purple"` | `'default'` |
|
||||
|
||||
|
||||
## Events
|
||||
|
||||
| Event | Description | Type |
|
||||
| ------------------------ | ----------- | --------------------- |
|
||||
| `handleOpenWelcomeModal` | | `CustomEvent<string>` |
|
||||
| `handleSwitchAccount` | | `CustomEvent<Info>` |
|
||||
|
||||
|
||||
## Dependencies
|
||||
|
||||
### Used by
|
||||
|
||||
- [nl-banner](../nl-banner)
|
||||
|
||||
### Depends on
|
||||
|
||||
- [nl-login-status](../nl-login-status)
|
||||
|
||||
### Graph
|
||||
```mermaid
|
||||
graph TD;
|
||||
nl-change-account --> nl-login-status
|
||||
nl-banner --> nl-change-account
|
||||
style nl-change-account fill:#f9f,stroke:#333,stroke-width:4px
|
||||
```
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
*Built with [StencilJS](https://stenciljs.com/)*
|
||||
@@ -1,3 +0,0 @@
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
@@ -1,44 +0,0 @@
|
||||
import { Component, Event, EventEmitter, Prop, h } from '@stencil/core';
|
||||
import { CURRENT_MODULE, METHOD_MODULE } from '@/types';
|
||||
import { state } from '@/store';
|
||||
|
||||
@Component({
|
||||
tag: 'nl-confirm-logout',
|
||||
styleUrl: 'nl-confirm-logout.css',
|
||||
shadow: false,
|
||||
})
|
||||
export class NlConfirmLogout {
|
||||
@Prop() titleModal = "Delete keys?";
|
||||
@Prop() description = "Your profile keys are stored in this browser tab and will be deleted if you log out, and your profile will be inaccessible.";
|
||||
@Event() handleLogoutBanner: EventEmitter<string>;
|
||||
@Event() handleBackUpModal: EventEmitter<string>;
|
||||
@Event() nlCloseModal: EventEmitter;
|
||||
|
||||
handleLogout() {
|
||||
this.handleLogoutBanner.emit(METHOD_MODULE.LOGOUT);
|
||||
this.nlCloseModal.emit();
|
||||
}
|
||||
|
||||
handleCancel() {
|
||||
this.nlCloseModal.emit();
|
||||
}
|
||||
|
||||
handleBackUp() {
|
||||
state.path = [CURRENT_MODULE.IMPORT_FLOW];
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div class="p-4 overflow-y-auto">
|
||||
<h1 class="nl-title font-bold text-center text-4xl">{this.titleModal}</h1>
|
||||
<p class="nl-description font-light text-center text-lg pt-2 max-w-96 mx-auto">{this.description}</p>
|
||||
|
||||
<div class="mt-3 ml-auto mr-auto w-60 flex flex-col gap-2">
|
||||
{/* <button-base onClick={() => this.handleCancel()} titleBtn="Cancel" /> */}
|
||||
<button-base onClick={() => this.handleBackUp()} titleBtn="Backup keys" theme="lemonade" />
|
||||
<button-base onClick={() => this.handleLogout()} theme="crab" titleBtn="Logout and delete keys" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,43 +0,0 @@
|
||||
# nl-confirm-logout
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
|
||||
## Properties
|
||||
|
||||
| Property | Attribute | Description | Type | Default |
|
||||
| ------------- | ------------- | ----------- | -------- | ------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| `description` | `description` | | `string` | `"Your profile keys are stored in this browser tab and will be deleted if you log out, and your profile will be inaccessible."` |
|
||||
| `titleModal` | `title-modal` | | `string` | `"Delete keys?"` |
|
||||
|
||||
|
||||
## Events
|
||||
|
||||
| Event | Description | Type |
|
||||
| -------------------- | ----------- | --------------------- |
|
||||
| `handleBackUpModal` | | `CustomEvent<string>` |
|
||||
| `handleLogoutBanner` | | `CustomEvent<string>` |
|
||||
| `nlCloseModal` | | `CustomEvent<any>` |
|
||||
|
||||
|
||||
## Dependencies
|
||||
|
||||
### Used by
|
||||
|
||||
- [nl-auth](../nl-auth)
|
||||
|
||||
### Depends on
|
||||
|
||||
- [button-base](../button-base)
|
||||
|
||||
### Graph
|
||||
```mermaid
|
||||
graph TD;
|
||||
nl-confirm-logout --> button-base
|
||||
nl-auth --> nl-confirm-logout
|
||||
style nl-confirm-logout fill:#f9f,stroke:#333,stroke-width:4px
|
||||
```
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
*Built with [StencilJS](https://stenciljs.com/)*
|
||||
@@ -1,3 +0,0 @@
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
@@ -1,178 +0,0 @@
|
||||
import { Component, Event, EventEmitter, Fragment, h, Prop, State } from '@stencil/core';
|
||||
import { AuthMethod, ConnectionString, CURRENT_MODULE } from '@/types';
|
||||
import { state } from '@/store';
|
||||
|
||||
@Component({
|
||||
tag: 'nl-connect',
|
||||
styleUrl: 'nl-connect.css',
|
||||
shadow: false,
|
||||
})
|
||||
export class NlConnect {
|
||||
@Prop() titleWelcome = 'Connect to key store';
|
||||
@Prop() authMethods: AuthMethod[] = [];
|
||||
@Prop() hasOTP: boolean = false;
|
||||
@Prop() connectionStringServices: ConnectionString[] = [];
|
||||
|
||||
@State() isOpenAdvancedLogin: boolean = false;
|
||||
@Event() nlNostrConnect: EventEmitter<ConnectionString>;
|
||||
|
||||
handleChangeScreen(screen) {
|
||||
state.path = [...state.path, screen];
|
||||
}
|
||||
|
||||
handleOpenAdvanced() {
|
||||
this.isOpenAdvancedLogin = !this.isOpenAdvancedLogin;
|
||||
}
|
||||
|
||||
allowAuthMethod(m: AuthMethod) {
|
||||
return !this.authMethods.length || this.authMethods.includes(m);
|
||||
}
|
||||
|
||||
componentWillLoad() {}
|
||||
|
||||
handleOpenLink(e: Event, cs: ConnectionString) {
|
||||
e.preventDefault();
|
||||
this.nlNostrConnect.emit(cs);
|
||||
}
|
||||
|
||||
handleConnectionString() {
|
||||
this.handleChangeScreen(CURRENT_MODULE.CONNECTION_STRING)
|
||||
}
|
||||
|
||||
render() {
|
||||
const arrowClass = `${this.isOpenAdvancedLogin ? 'rotate-180' : 'rotate-0'} duration-300 flex-shrink-0 w-4 h-4 text-blue-500`;
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<div class="p-4 overflow-y-auto">
|
||||
<h1 class="nl-title font-bold text-center text-3xl">{this.titleWelcome}</h1>
|
||||
</div>
|
||||
|
||||
<div class="p-4">
|
||||
{Boolean(this.connectionStringServices.length) && (
|
||||
<div class="max-w-96 mx-auto pt-5">
|
||||
<p class="nl-description font-medium text-sm pb-1.5">Select key store:</p>
|
||||
<ul class="p-2 rounded-lg border border-gray-200 flex flex-col w-full gap-0.5">
|
||||
{this.connectionStringServices.map(el => {
|
||||
return (
|
||||
<li>
|
||||
<a
|
||||
href={el.link}
|
||||
target="_blank"
|
||||
onClick={e => this.handleOpenLink(e, el)}
|
||||
class="flex items-center gap-x-3.5 w-full hover:bg-gray-300 flex cursor-pointer items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm justify-between"
|
||||
>
|
||||
<div class="w-full max-w-7 h-7 flex relative">
|
||||
<div class="uppercase font-bold w-full h-full rounded-full border border-gray-400 flex justify-center items-center">
|
||||
{Boolean(el.img) ? (
|
||||
<img class="w-full rounded-full" src={el.img} alt={el.name} />
|
||||
) : (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#9ca3af" class="w-4 h-4 block">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M15.75 5.25a3 3 0 0 1 3 3m3 0a6 6 0 0 1-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1 1 21.75 8.25Z"
|
||||
/>
|
||||
</svg>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-hidden flex flex-col w-full">
|
||||
<div class="nl-title truncate overflow-hidden">{el.name}</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div class="ps-4 pe-4 overflow-y-auto">
|
||||
<p class="nl-error font-light text-center text-sm max-w-96 mx-auto">{state.error}</p>
|
||||
</div>
|
||||
<div class="max-w-52 mx-auto pb-5">
|
||||
{(this.allowAuthMethod('connect') || this.allowAuthMethod('readOnly')) && (
|
||||
<div class="flex justify-center">
|
||||
<div
|
||||
onClick={() => this.handleOpenAdvanced()}
|
||||
class="text-blue-500 mt-3 decoration-dashed cursor-pointer inline-flex gap-2 items-center pb-1 border-dashed border-b-[1px] border-blue-500 text-sm font-light"
|
||||
>
|
||||
Advanced
|
||||
<svg
|
||||
class={arrowClass}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="m6 9 6 6 6-6" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div
|
||||
class={`${this.isOpenAdvancedLogin ? 'max-h-[500px] mt-3 duration-300' : 'max-h-0 mt-0 duration-[0.25s]'} transition-max-height ease-in flex gap-3 flex-col overflow-hidden`}
|
||||
>
|
||||
{/* {this.hasExtension && !this.allowAuthMethod('extension') && this.renderSignInWithExtension()} */}
|
||||
{this.allowAuthMethod('connect') && (
|
||||
<button-base titleBtn="User name" onClick={() => this.handleChangeScreen(CURRENT_MODULE.LOGIN)}>
|
||||
<svg
|
||||
style={{ display: 'none' }}
|
||||
slot="icon-start"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
stroke="currentColor"
|
||||
// class="flex-shrink-0 w-4 h-4 text-gray-500"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z"
|
||||
/>
|
||||
</svg>
|
||||
</button-base>
|
||||
)}
|
||||
|
||||
{this.allowAuthMethod('connect') && (
|
||||
<button-base titleBtn="Connection string" onClick={() => this.handleConnectionString()}>
|
||||
<svg style={{ display: 'none' }} slot="icon-start" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0 1 3.75 9.375v-4.5ZM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 0 1-1.125-1.125v-4.5ZM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0 1 13.5 9.375v-4.5Z"
|
||||
/>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M6.75 6.75h.75v.75h-.75v-.75ZM6.75 16.5h.75v.75h-.75v-.75ZM16.5 6.75h.75v.75h-.75v-.75ZM13.5 13.5h.75v.75h-.75v-.75ZM13.5 19.5h.75v.75h-.75v-.75ZM19.5 13.5h.75v.75h-.75v-.75ZM19.5 19.5h.75v.75h-.75v-.75ZM16.5 16.5h.75v.75h-.75v-.75Z"
|
||||
/>
|
||||
</svg>
|
||||
</button-base>
|
||||
)}
|
||||
|
||||
{this.allowAuthMethod('connect') && (
|
||||
<button-base onClick={() => this.handleChangeScreen(CURRENT_MODULE.LOGIN_BUNKER_URL)} titleBtn="Bunker URL">
|
||||
<svg style={{ display: 'none' }} slot="icon-start" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"
|
||||
/>
|
||||
</svg>
|
||||
</button-base>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,43 +0,0 @@
|
||||
# nl-connect
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
|
||||
## Properties
|
||||
|
||||
| Property | Attribute | Description | Type | Default |
|
||||
| -------------------------- | --------------- | ----------- | -------------------- | ------------------------ |
|
||||
| `authMethods` | -- | | `AuthMethod[]` | `[]` |
|
||||
| `connectionStringServices` | -- | | `ConnectionString[]` | `[]` |
|
||||
| `hasOTP` | `has-o-t-p` | | `boolean` | `false` |
|
||||
| `titleWelcome` | `title-welcome` | | `string` | `'Connect to key store'` |
|
||||
|
||||
|
||||
## Events
|
||||
|
||||
| Event | Description | Type |
|
||||
| ---------------- | ----------- | ------------------------------- |
|
||||
| `nlNostrConnect` | | `CustomEvent<ConnectionString>` |
|
||||
|
||||
|
||||
## Dependencies
|
||||
|
||||
### Used by
|
||||
|
||||
- [nl-auth](../nl-auth)
|
||||
|
||||
### Depends on
|
||||
|
||||
- [button-base](../button-base)
|
||||
|
||||
### Graph
|
||||
```mermaid
|
||||
graph TD;
|
||||
nl-connect --> button-base
|
||||
nl-auth --> nl-connect
|
||||
style nl-connect fill:#f9f,stroke:#333,stroke-width:4px
|
||||
```
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
*Built with [StencilJS](https://stenciljs.com/)*
|
||||
@@ -1,3 +0,0 @@
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
@@ -1,26 +0,0 @@
|
||||
import { Component, h } from '@stencil/core';
|
||||
|
||||
@Component({
|
||||
tag: 'nl-dialog',
|
||||
styleUrl: 'nl-dialog.css',
|
||||
shadow: true,
|
||||
})
|
||||
export class NlDialog {
|
||||
private dialogElement?: HTMLDialogElement;
|
||||
|
||||
componentDidLoad() {
|
||||
this.dialogElement?.showModal();
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
this.dialogElement?.close();
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<dialog ref={el => (this.dialogElement = el as HTMLDialogElement)} class={'m-auto nl-banner-dialog'} style={{ border: '0', backgroundColor: 'transparent' }}>
|
||||
<slot></slot>
|
||||
</dialog>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,23 +0,0 @@
|
||||
# nl-dialog
|
||||
|
||||
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
|
||||
## Dependencies
|
||||
|
||||
### Used by
|
||||
|
||||
- [nl-banner](../nl-banner)
|
||||
|
||||
### Graph
|
||||
```mermaid
|
||||
graph TD;
|
||||
nl-banner --> nl-dialog
|
||||
style nl-dialog fill:#f9f,stroke:#333,stroke-width:4px
|
||||
```
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
*Built with [StencilJS](https://stenciljs.com/)*
|
||||
@@ -1,3 +0,0 @@
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
@@ -1,40 +0,0 @@
|
||||
import { Component, Event, EventEmitter, Prop, h } from '@stencil/core';
|
||||
|
||||
@Component({
|
||||
tag: 'nl-iframe',
|
||||
styleUrl: 'nl-iframe.css',
|
||||
shadow: false,
|
||||
})
|
||||
export class NlConfirmLogout {
|
||||
@Prop() titleModal = 'Confirm';
|
||||
@Prop() description = 'Your profile keys are stored in this browser tab and will be deleted if you log out, and your profile will be inaccessible.';
|
||||
@Prop() iframeUrl = '';
|
||||
@Event() nlCloseModal: EventEmitter;
|
||||
|
||||
handleCancel() {
|
||||
this.nlCloseModal.emit();
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div class="p-4 overflow-y-auto">
|
||||
{/* <h1 class="nl-title font-bold text-center text-4xl">{this.titleModal}</h1>
|
||||
<p class="nl-description font-light text-center text-lg pt-2 max-w-96 mx-auto">{this.description}</p> */}
|
||||
|
||||
<div class="mt-3 flex flex-col gap-2">
|
||||
{this.iframeUrl && (
|
||||
<iframe
|
||||
src={this.iframeUrl}
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '600px',
|
||||
border: '1px solid #ccc',
|
||||
borderRadius: '8px',
|
||||
}}
|
||||
></iframe>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,39 +0,0 @@
|
||||
# nl-iframe
|
||||
|
||||
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
|
||||
## Properties
|
||||
|
||||
| Property | Attribute | Description | Type | Default |
|
||||
| ------------- | ------------- | ----------- | -------- | ------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| `description` | `description` | | `string` | `'Your profile keys are stored in this browser tab and will be deleted if you log out, and your profile will be inaccessible.'` |
|
||||
| `iframeUrl` | `iframe-url` | | `string` | `''` |
|
||||
| `titleModal` | `title-modal` | | `string` | `'Confirm'` |
|
||||
|
||||
|
||||
## Events
|
||||
|
||||
| Event | Description | Type |
|
||||
| -------------- | ----------- | ------------------ |
|
||||
| `nlCloseModal` | | `CustomEvent<any>` |
|
||||
|
||||
|
||||
## Dependencies
|
||||
|
||||
### Used by
|
||||
|
||||
- [nl-auth](../nl-auth)
|
||||
|
||||
### Graph
|
||||
```mermaid
|
||||
graph TD;
|
||||
nl-auth --> nl-iframe
|
||||
style nl-iframe fill:#f9f,stroke:#333,stroke-width:4px
|
||||
```
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
*Built with [StencilJS](https://stenciljs.com/)*
|
||||
@@ -1,3 +0,0 @@
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
@@ -1,145 +0,0 @@
|
||||
import { Component, h, Fragment, State, Prop, Event, EventEmitter } from '@stencil/core';
|
||||
import { state } from '@/store';
|
||||
import { ConnectionString } from '@/types';
|
||||
|
||||
@Component({
|
||||
tag: 'nl-import-flow',
|
||||
styleUrl: 'nl-import-flow.css',
|
||||
shadow: false,
|
||||
})
|
||||
export class NlImportFlow {
|
||||
@Prop({ mutable: true }) titleInfo = 'Back up your keys';
|
||||
@Prop() titleImport = 'Choose a service';
|
||||
@Prop() services: ConnectionString[] = [];
|
||||
|
||||
@State() isContinued = false;
|
||||
@State() isKeyBackup = false;
|
||||
|
||||
@State() isCopy = false;
|
||||
|
||||
@Event() nlImportAccount: EventEmitter<ConnectionString>;
|
||||
@Event() nlExportKeys: EventEmitter<void>;
|
||||
|
||||
handleDomainSelect(event: CustomEvent<string>) {
|
||||
const s = this.services.find(s => s.domain === event.detail);
|
||||
state.nlImport = s;
|
||||
}
|
||||
|
||||
handleCreateAccount(e: MouseEvent) {
|
||||
e.preventDefault();
|
||||
this.nlImportAccount.emit(state.nlImport);
|
||||
}
|
||||
|
||||
handleContinue() {
|
||||
this.isContinued = true;
|
||||
}
|
||||
|
||||
handleContinueKeyBackup() {
|
||||
this.isKeyBackup = true;
|
||||
}
|
||||
|
||||
async copyToClipboard() {
|
||||
this.nlExportKeys.emit();
|
||||
this.isCopy = true;
|
||||
|
||||
setTimeout(() => {
|
||||
this.isCopy = false;
|
||||
}, 1500);
|
||||
}
|
||||
|
||||
render() {
|
||||
if (!this.isContinued && !this.isKeyBackup) {
|
||||
return (
|
||||
<div class="p-4 overflow-y-auto">
|
||||
<h1 class="nl-title font-bold text-center text-2xl">{this.titleInfo}</h1>
|
||||
<p class="nl-description font-light text-sm pt-2 pb-2 max-w-96 mx-auto">
|
||||
Nostr profiles are controlled by cryptographic keys.
|
||||
<br />
|
||||
<br />
|
||||
Your keys are currently only stored in this browser tab, and may be lost if you close it.
|
||||
<br />
|
||||
<br />
|
||||
You should backup your keys.
|
||||
<br />
|
||||
<br />
|
||||
We recommend to import your keys into a key store service, to protect them and to use with other apps.
|
||||
{/* <br />
|
||||
<br />
|
||||
You can also export your keys and save them in your password manager. */}
|
||||
</p>
|
||||
<div class="ml-auto mr-auto mb-2 w-72">
|
||||
<button-base onClick={() => this.handleContinue()} titleBtn="Import to key store" />
|
||||
</div>
|
||||
<div class="ml-auto mr-auto w-72">
|
||||
<button-base onClick={() => this.handleContinueKeyBackup()} titleBtn="Export keys" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (this.isKeyBackup) {
|
||||
return (
|
||||
<div class="p-4 overflow-y-auto">
|
||||
<h1 class="nl-title font-bold text-center text-2xl">Key export</h1>
|
||||
<p class="nl-description font-light text-sm pt-2 pb-2 max-w-96 mx-auto">
|
||||
Copy your keys and store them in a safe place, like a password manager.
|
||||
<br />
|
||||
<br />
|
||||
You can sign into other Nostr apps by pasting your keys into them.
|
||||
<br />
|
||||
<br />
|
||||
Your keys must be kept secret, never share them with anyone.
|
||||
</p>
|
||||
<div class="max-w-72 mx-auto">
|
||||
<div class="ml-auto mr-auto mb-2 w-72">
|
||||
<button-base onClick={() => this.copyToClipboard()} titleBtn={this.isCopy ? 'Copied!' : 'Copy to clipboard'} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const options = this.services.filter(s => s.canImport).map(s => ({ name: s.domain!, value: s.domain! }));
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<div class="p-4 overflow-y-auto">
|
||||
<h1 class="nl-title font-bold text-center text-2xl">{this.titleImport}</h1>
|
||||
<p class="nl-description font-light text-center text-sm pt-2 max-w-96 mx-auto">
|
||||
Your Nostr keys will be imported into the service you choose. You will manage your keys on their website.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="max-w-72 mx-auto mb-5">
|
||||
<div class="mb-0.5">
|
||||
<nl-select onSelectDomain={e => this.handleDomainSelect(e)} selected={0} options={options}></nl-select>
|
||||
</div>
|
||||
<p class="nl-title font-light text-sm mb-2">Default provider is a fine choice to start with.</p>
|
||||
|
||||
<div class="ps-4 pe-4 overflow-y-auto">
|
||||
<p class="nl-error font-light text-center text-sm max-w-96 mx-auto">{state.error}</p>
|
||||
</div>
|
||||
|
||||
<button-base disabled={state.isLoading} onClick={e => this.handleCreateAccount(e)} titleBtn="Start importing">
|
||||
{state.isLoading ? (
|
||||
<span
|
||||
slot="icon-start"
|
||||
class="animate-spin-loading inline-block w-4 h-4 border-[3px] border-current border-t-transparent text-slate-900 dark:text-gray-300 rounded-full"
|
||||
role="status"
|
||||
aria-label="loading"
|
||||
></span>
|
||||
) : (
|
||||
<svg slot="icon-start" style={{ display: 'none' }} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M18 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0ZM3 19.235v-.11a6.375 6.375 0 0 1 12.75 0v.109A12.318 12.318 0 0 1 9.374 21c-2.331 0-4.512-.645-6.374-1.766Z"
|
||||
/>
|
||||
</svg>
|
||||
)}
|
||||
</button-base>
|
||||
</div>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,45 +0,0 @@
|
||||
# nl-import-flow
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
|
||||
## Properties
|
||||
|
||||
| Property | Attribute | Description | Type | Default |
|
||||
| ------------- | -------------- | ----------- | -------------------- | --------------------- |
|
||||
| `services` | -- | | `ConnectionString[]` | `[]` |
|
||||
| `titleImport` | `title-import` | | `string` | `'Choose a service'` |
|
||||
| `titleInfo` | `title-info` | | `string` | `'Back up your keys'` |
|
||||
|
||||
|
||||
## Events
|
||||
|
||||
| Event | Description | Type |
|
||||
| ----------------- | ----------- | ------------------------------- |
|
||||
| `nlExportKeys` | | `CustomEvent<void>` |
|
||||
| `nlImportAccount` | | `CustomEvent<ConnectionString>` |
|
||||
|
||||
|
||||
## Dependencies
|
||||
|
||||
### Used by
|
||||
|
||||
- [nl-auth](../nl-auth)
|
||||
|
||||
### Depends on
|
||||
|
||||
- [button-base](../button-base)
|
||||
- [nl-select](../nl-select)
|
||||
|
||||
### Graph
|
||||
```mermaid
|
||||
graph TD;
|
||||
nl-import-flow --> button-base
|
||||
nl-import-flow --> nl-select
|
||||
nl-auth --> nl-import-flow
|
||||
style nl-import-flow fill:#f9f,stroke:#333,stroke-width:4px
|
||||
```
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
*Built with [StencilJS](https://stenciljs.com/)*
|
||||
@@ -1,3 +0,0 @@
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
@@ -1,50 +0,0 @@
|
||||
import { Component, h } from '@stencil/core';
|
||||
import { state } from '@/store';
|
||||
|
||||
@Component({
|
||||
tag: 'nl-info-extension',
|
||||
styleUrl: 'nl-info-extension.css',
|
||||
shadow: false,
|
||||
})
|
||||
export class NlInfoExtension {
|
||||
render() {
|
||||
return (
|
||||
<div class="p-4 overflow-y-auto">
|
||||
{state.isLoadingExtension ? (
|
||||
<div>
|
||||
<h1 class="nl-title font-bold text-center text-4xl">Signing in...</h1>
|
||||
<div class="mt-10 mb-10 ml-auto mr-auto w-20">
|
||||
<span
|
||||
slot="icon-start"
|
||||
class="animate-spin-loading ml-auto mr-auto inline-block w-20 h-20 border-[4px] border-current border-t-transparent text-slate-900 dark:text-gray-300 rounded-full"
|
||||
role="status"
|
||||
aria-label="loading"
|
||||
></span>
|
||||
</div>
|
||||
<div class="ps-4 pe-4 overflow-y-auto">
|
||||
<p class="nl-error font-light text-center text-sm max-w-96 mx-auto">{state.error}</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<h1 class="nl-title font-bold text-center text-4xl">Install browser extension!</h1>
|
||||
<p class="nl-description font-light text-center text-lg pt-2 max-w-96 mx-auto">
|
||||
Try{' '}
|
||||
<a href="https://getalby.com" target="_blank">
|
||||
Alby
|
||||
</a>
|
||||
,{' '}
|
||||
<a href="https://chromewebstore.google.com/detail/nos2x/kpgefcfmnafjgpblomihpgmejjdanjjp" target="_blank">
|
||||
nos2x
|
||||
</a>{' '}
|
||||
or{' '}
|
||||
<a href="https://apps.apple.com/us/app/nostore/id1666553677" target="_blank">
|
||||
Nostore
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,21 +0,0 @@
|
||||
# nl-info-extension
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
|
||||
## Dependencies
|
||||
|
||||
### Used by
|
||||
|
||||
- [nl-auth](../nl-auth)
|
||||
|
||||
### Graph
|
||||
```mermaid
|
||||
graph TD;
|
||||
nl-auth --> nl-info-extension
|
||||
style nl-info-extension fill:#f9f,stroke:#333,stroke-width:4px
|
||||
```
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
*Built with [StencilJS](https://stenciljs.com/)*
|
||||
@@ -1,3 +0,0 @@
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
@@ -1,46 +0,0 @@
|
||||
import { Component, h, Prop } from '@stencil/core';
|
||||
import { NlTheme } from '@/types';
|
||||
|
||||
@Component({
|
||||
tag: 'nl-info',
|
||||
styleUrl: 'nl-info.css',
|
||||
shadow: false,
|
||||
})
|
||||
export class NlInfo {
|
||||
@Prop() theme: NlTheme = 'default';
|
||||
@Prop() darkMode: boolean = false;
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div class="p-4 overflow-y-auto">
|
||||
<svg class="w-12 h-12 mx-auto mb-2" width="225" height="224" viewBox="0 0 225 224" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="224.047" height="224" rx="64" fill={this.theme === 'laan' ? (this.darkMode ? 'white' : 'black') : '#6951FA'} />
|
||||
<path
|
||||
d="M162.441 135.941V88.0593C170.359 85.1674 176 77.5348 176 68.6696C176 57.2919 166.708 48 155.33 48C143.953 48 134.661 57.2444 134.661 68.6696C134.661 77.5822 140.302 85.1674 148.219 88.0593V135.941C147.698 136.13 147.176 136.367 146.655 136.604L87.3956 77.3452C88.6282 74.6904 89.2919 71.7511 89.2919 68.6696C89.2919 57.2444 80.0474 48 68.6696 48C57.2919 48 48 57.2444 48 68.6696C48 77.5822 53.6415 85.1674 61.5585 88.0593V135.941C53.6415 138.833 48 146.465 48 155.33C48 166.708 57.2444 176 68.6696 176C80.0948 176 89.3393 166.708 89.3393 155.33C89.3393 146.418 83.6978 138.833 75.7807 135.941V88.0593C76.3022 87.8696 76.8237 87.6326 77.3452 87.3956L136.604 146.655C135.372 149.31 134.708 152.249 134.708 155.33C134.708 166.708 143.953 176 155.378 176C166.803 176 176.047 166.708 176.047 155.33C176.047 146.418 170.406 138.833 162.489 135.941H162.441Z"
|
||||
fill={this.theme === 'laan' ? (this.darkMode ? 'black' : 'white') : 'white'}
|
||||
/>
|
||||
</svg>
|
||||
<h1 class="nl-title font-bold text-center text-4xl">
|
||||
Nostr <span class="font-light">Login</span>
|
||||
</h1>
|
||||
<p class="text-green-800 dark:text-green-200 font-light text-center text-lg pt-2 max-w-96 mx-auto">Version: 1.7.11</p>
|
||||
<p class="nl-description font-light text-center text-lg pt-2 max-w-96 mx-auto">
|
||||
Learn more about Nostr{' '}
|
||||
<a target="_blank" href="https://nostr.how">
|
||||
here
|
||||
</a>
|
||||
.<br />
|
||||
This is an{' '}
|
||||
<a target="_blank" href="https://github.com/nostrband/nostr-login">
|
||||
open-source
|
||||
</a>{' '}
|
||||
tool by{' '}
|
||||
<a target="_blank" href="https://nostr.band">
|
||||
Nostr.Band
|
||||
</a>
|
||||
.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,29 +0,0 @@
|
||||
# nl-info
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
|
||||
## Properties
|
||||
|
||||
| Property | Attribute | Description | Type | Default |
|
||||
| ---------- | ----------- | ----------- | -------------------------------------------------------------------- | ----------- |
|
||||
| `darkMode` | `dark-mode` | | `boolean` | `false` |
|
||||
| `theme` | `theme` | | `"crab" \| "default" \| "laan" \| "lemonade" \| "ocean" \| "purple"` | `'default'` |
|
||||
|
||||
|
||||
## Dependencies
|
||||
|
||||
### Used by
|
||||
|
||||
- [nl-auth](../nl-auth)
|
||||
|
||||
### Graph
|
||||
```mermaid
|
||||
graph TD;
|
||||
nl-auth --> nl-info
|
||||
style nl-info fill:#f9f,stroke:#333,stroke-width:4px
|
||||
```
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
*Built with [StencilJS](https://stenciljs.com/)*
|
||||
@@ -1,3 +0,0 @@
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
@@ -1,93 +0,0 @@
|
||||
import { Component, Event, EventEmitter, Prop, h } from '@stencil/core';
|
||||
import { state } from '@/store';
|
||||
import { CURRENT_MODULE } from '@/types';
|
||||
|
||||
@Component({
|
||||
tag: 'nl-loading',
|
||||
styleUrl: 'nl-loading.css',
|
||||
shadow: false,
|
||||
})
|
||||
export class NlLoading {
|
||||
@Event() stopFetchHandler: EventEmitter<boolean>;
|
||||
@Event() handleContinue: EventEmitter<boolean>;
|
||||
@Prop() path: string;
|
||||
|
||||
handleStop(e) {
|
||||
e.preventDefault();
|
||||
this.stopFetchHandler.emit();
|
||||
}
|
||||
|
||||
handleContinueClick(e) {
|
||||
e.preventDefault();
|
||||
// reset();
|
||||
this.handleContinue.emit();
|
||||
}
|
||||
|
||||
render() {
|
||||
let title = 'Connecting...';
|
||||
let text = 'Establishing connection to your key storage.';
|
||||
if (state.njumpIframe) {
|
||||
title = '';
|
||||
text = '';
|
||||
} else if (this.path === CURRENT_MODULE.LOCAL_SIGNUP) {
|
||||
title = 'Creating...';
|
||||
text = 'Publishing your profile on Nostr.';
|
||||
} else if (state.authUrl) {
|
||||
if (state.isLoading) {
|
||||
title = 'Confirming...';
|
||||
text = 'Please confirm the connection in your key storage app.';
|
||||
} else {
|
||||
title = 'Almost ready!';
|
||||
text = 'Continue to confirm the connection to your key storage.';
|
||||
}
|
||||
}
|
||||
|
||||
const showButton = this.path !== CURRENT_MODULE.LOCAL_SIGNUP;
|
||||
const showIframe = !state.isLoading && state.iframeUrl && state.authUrl;
|
||||
const iframeUrl = state.iframeUrl ? `${state.iframeUrl}?connect=${encodeURIComponent(state.authUrl)}` : '';
|
||||
|
||||
return (
|
||||
<div class="p-4 overflow-y-auto">
|
||||
{title && (<h1 class="nl-title font-bold text-center text-4xl">{title}</h1>)}
|
||||
{text && (<p class="nl-description font-light text-center text-lg pt-2 max-w-96 mx-auto">{text}</p>)}
|
||||
{!state.njumpIframe && !state.authUrl && state.isLoading && (
|
||||
<div class="mt-10 mb-10 ml-auto mr-auto w-20">
|
||||
<span
|
||||
slot="icon-start"
|
||||
class="animate-spin-loading ml-auto mr-auto inline-block w-20 h-20 border-[4px] border-current border-t-transparent text-slate-900 dark:text-gray-300 rounded-full"
|
||||
role="status"
|
||||
aria-label="loading"
|
||||
></span>
|
||||
</div>
|
||||
)}
|
||||
<div class="ps-4 pe-4 overflow-y-auto">
|
||||
<p class="nl-error font-light text-center text-sm max-w-96 mx-auto">{state.error}</p>
|
||||
</div>
|
||||
{iframeUrl && (
|
||||
<div class="mt-3 ml-auto mr-auto w-72 flex justify-center">
|
||||
<iframe src={iframeUrl} width="180px" height="80px" style={{ display: showIframe ? 'block' : 'none', border: '0' }}></iframe>
|
||||
</div>
|
||||
)}
|
||||
{state.njumpIframe && (
|
||||
<div class="mt-3 ml-auto mr-auto flex justify-center">
|
||||
<iframe srcdoc={state.njumpIframe} width="600px" style={{ border: '0', height: "80vh", borderRadius: "8px" }}></iframe>
|
||||
</div>
|
||||
)}
|
||||
{!showIframe && showButton && (
|
||||
<div class="mt-3 ml-auto mr-auto w-72">
|
||||
<button-base
|
||||
onClick={e => {
|
||||
if (state.authUrl && !state.isLoading) {
|
||||
this.handleContinueClick(e);
|
||||
} else {
|
||||
this.handleStop(e);
|
||||
}
|
||||
}}
|
||||
titleBtn={!state.isLoading ? 'Continue' : 'Cancel'}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,41 +0,0 @@
|
||||
# nl-loading
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
|
||||
## Properties
|
||||
|
||||
| Property | Attribute | Description | Type | Default |
|
||||
| -------- | --------- | ----------- | -------- | ----------- |
|
||||
| `path` | `path` | | `string` | `undefined` |
|
||||
|
||||
|
||||
## Events
|
||||
|
||||
| Event | Description | Type |
|
||||
| ------------------ | ----------- | ---------------------- |
|
||||
| `handleContinue` | | `CustomEvent<boolean>` |
|
||||
| `stopFetchHandler` | | `CustomEvent<boolean>` |
|
||||
|
||||
|
||||
## Dependencies
|
||||
|
||||
### Used by
|
||||
|
||||
- [nl-auth](../nl-auth)
|
||||
|
||||
### Depends on
|
||||
|
||||
- [button-base](../button-base)
|
||||
|
||||
### Graph
|
||||
```mermaid
|
||||
graph TD;
|
||||
nl-loading --> button-base
|
||||
nl-auth --> nl-loading
|
||||
style nl-loading fill:#f9f,stroke:#333,stroke-width:4px
|
||||
```
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
*Built with [StencilJS](https://stenciljs.com/)*
|
||||
@@ -1,3 +0,0 @@
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
@@ -1,100 +0,0 @@
|
||||
import { Component, h, Fragment, State, Prop, Event, EventEmitter } from '@stencil/core';
|
||||
import { state } from '@/store';
|
||||
|
||||
@Component({
|
||||
tag: 'nl-local-signup',
|
||||
styleUrl: 'nl-local-signup.css',
|
||||
shadow: false,
|
||||
})
|
||||
export class NlLocalSignup {
|
||||
@Prop() titleSignup = 'Create Nostr profile';
|
||||
@Prop() description = 'Choose any username, you can always change it later.';
|
||||
@Prop() descriptionNjump = 'Proceed to creating your Nostr profile in a new tab.';
|
||||
@Prop() signupNjump = false;
|
||||
|
||||
@State() isAvailable = false;
|
||||
|
||||
@Event() nlLocalSignup: EventEmitter<string>;
|
||||
@Event() nlSignupNjump: EventEmitter<void>;
|
||||
// @Event() nlCheckSignup: EventEmitter<string>;
|
||||
@Event() fetchHandler: EventEmitter<boolean>;
|
||||
|
||||
handleInputChange(event: Event) {
|
||||
state.nlSignup.signupName = (event.target as HTMLInputElement).value;
|
||||
// this.nlCheckSignup.emit(`${(event.target as HTMLInputElement).value}@${state.nlSignup.domain}`);
|
||||
}
|
||||
|
||||
handleCreateAccount(e: MouseEvent) {
|
||||
e.preventDefault();
|
||||
|
||||
if (this.signupNjump) {
|
||||
this.nlSignupNjump.emit();
|
||||
} else {
|
||||
this.nlLocalSignup.emit(`${state.nlSignup.signupName}`);
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Fragment>
|
||||
<div class="p-4 overflow-y-auto">
|
||||
<h1 class="nl-title font-bold text-center text-2xl">{this.titleSignup}</h1>
|
||||
<p class="nl-description font-light text-center text-sm pt-2 max-w-96 mx-auto">{this.signupNjump ? this.descriptionNjump : this.description}</p>
|
||||
</div>
|
||||
|
||||
<div class="max-w-72 mx-auto">
|
||||
{!this.signupNjump && (
|
||||
<div class="relative mb-2">
|
||||
<input
|
||||
onInput={e => this.handleInputChange(e)}
|
||||
type="text"
|
||||
class="nl-input peer py-3 px-4 ps-11 block w-full border-transparent rounded-lg text-sm disabled:opacity-50 disabled:pointer-events-none dark:border-transparent"
|
||||
placeholder="Enter username"
|
||||
value={state.nlSignup.signupName}
|
||||
/>
|
||||
<div class="absolute inset-y-0 start-0 flex items-center pointer-events-none ps-4 peer-disabled:opacity-50 peer-disabled:pointer-events-none">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
stroke={this.isAvailable ? '#00cc00' : 'currentColor'}
|
||||
class="flex-shrink-0 w-4 h-4 text-gray-500"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div class="ps-4 pe-4 overflow-y-auto">
|
||||
<p class="nl-error font-light text-center text-sm max-w-96 mx-auto">{state.error}</p>
|
||||
</div>
|
||||
|
||||
<button-base disabled={state.isLoading} onClick={e => this.handleCreateAccount(e)} titleBtn={this.signupNjump ? 'Get started' : 'Create profile'}>
|
||||
{state.isLoading ? (
|
||||
<span
|
||||
slot="icon-start"
|
||||
class="animate-spin-loading inline-block w-4 h-4 border-[3px] border-current border-t-transparent text-slate-900 dark:text-gray-300 rounded-full"
|
||||
role="status"
|
||||
aria-label="loading"
|
||||
></span>
|
||||
) : (
|
||||
<svg slot="icon-start" style={{ display: 'none' }} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M18 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0ZM3 19.235v-.11a6.375 6.375 0 0 1 12.75 0v.109A12.318 12.318 0 0 1 9.374 21c-2.331 0-4.512-.645-6.374-1.766Z"
|
||||
/>
|
||||
</svg>
|
||||
)}
|
||||
</button-base>
|
||||
</div>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,45 +0,0 @@
|
||||
# nl-local-signup
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
|
||||
## Properties
|
||||
|
||||
| Property | Attribute | Description | Type | Default |
|
||||
| ------------------ | ------------------- | ----------- | --------- | -------------------------------------------------------- |
|
||||
| `description` | `description` | | `string` | `'Choose any username, you can always change it later.'` |
|
||||
| `descriptionNjump` | `description-njump` | | `string` | `'Proceed to creating your Nostr profile in a new tab.'` |
|
||||
| `signupNjump` | `signup-njump` | | `boolean` | `false` |
|
||||
| `titleSignup` | `title-signup` | | `string` | `'Create Nostr profile'` |
|
||||
|
||||
|
||||
## Events
|
||||
|
||||
| Event | Description | Type |
|
||||
| --------------- | ----------- | ---------------------- |
|
||||
| `fetchHandler` | | `CustomEvent<boolean>` |
|
||||
| `nlLocalSignup` | | `CustomEvent<string>` |
|
||||
| `nlSignupNjump` | | `CustomEvent<void>` |
|
||||
|
||||
|
||||
## Dependencies
|
||||
|
||||
### Used by
|
||||
|
||||
- [nl-auth](../nl-auth)
|
||||
|
||||
### Depends on
|
||||
|
||||
- [button-base](../button-base)
|
||||
|
||||
### Graph
|
||||
```mermaid
|
||||
graph TD;
|
||||
nl-local-signup --> button-base
|
||||
nl-auth --> nl-local-signup
|
||||
style nl-local-signup fill:#f9f,stroke:#333,stroke-width:4px
|
||||
```
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
*Built with [StencilJS](https://stenciljs.com/)*
|
||||
@@ -1,41 +0,0 @@
|
||||
import { Info, RecentType } from '@/types';
|
||||
import { Component, h, Prop } from '@stencil/core';
|
||||
|
||||
@Component({
|
||||
tag: 'nl-login-status',
|
||||
// styleUrl: 'nl-login-status.css',
|
||||
shadow: false,
|
||||
})
|
||||
export class NlLoginStatus {
|
||||
@Prop() info: RecentType | Info | undefined;
|
||||
|
||||
render() {
|
||||
let text = '';
|
||||
let color = '';
|
||||
if (this.info.authMethod === 'extension') {
|
||||
text = 'Extension';
|
||||
color = 'border-yellow-300 text-yellow-500 bg-yellow-100';
|
||||
} else if (this.info.authMethod === 'readOnly') {
|
||||
text = 'Read only';
|
||||
color = 'border-gray-300 text-gray-400 bg-gray-100';
|
||||
} else if (this.info.authMethod === 'connect') {
|
||||
text = 'Connect';
|
||||
color = 'border-teal-300 text-teal-600 bg-teal-100';
|
||||
} else if (this.info.authMethod === 'local') {
|
||||
text = 'Temporary';
|
||||
color = 'border-red-300 text-red-600 bg-red-100';
|
||||
} else if (this.info.authMethod === 'otp') {
|
||||
text = 'Delegated';
|
||||
color = 'border-orange-300 text-orange-600 bg-orange-100';
|
||||
} else {
|
||||
console.log('unknown auth method', this.info);
|
||||
throw new Error('Unknown auth method');
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<span class={`${color} rounded-xl border w-auto text-[10px] px-1 `}>{text}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,32 +0,0 @@
|
||||
# nl-login-status
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
|
||||
## Properties
|
||||
|
||||
| Property | Attribute | Description | Type | Default |
|
||||
| -------- | --------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |
|
||||
| `info` | -- | | `Info \| { name?: string; picture?: string; nip05?: string; pubkey: string; bunkerUrl?: string; authMethod: AuthMethod; domain?: string; signerPubkey?: string; }` | `undefined` |
|
||||
|
||||
|
||||
## Dependencies
|
||||
|
||||
### Used by
|
||||
|
||||
- [nl-banner](../nl-banner)
|
||||
- [nl-change-account](../nl-change-account)
|
||||
- [nl-previously-logged](../nl-previously-logged)
|
||||
|
||||
### Graph
|
||||
```mermaid
|
||||
graph TD;
|
||||
nl-banner --> nl-login-status
|
||||
nl-change-account --> nl-login-status
|
||||
nl-previously-logged --> nl-login-status
|
||||
style nl-login-status fill:#f9f,stroke:#333,stroke-width:4px
|
||||
```
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
*Built with [StencilJS](https://stenciljs.com/)*
|
||||
@@ -1,3 +0,0 @@
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
@@ -1,70 +0,0 @@
|
||||
import { Component, h, Fragment, Prop, Event, EventEmitter } from '@stencil/core';
|
||||
import { state } from '@/store';
|
||||
import { ConnectionString } from '@/types';
|
||||
|
||||
@Component({
|
||||
tag: 'nl-otp-migrate',
|
||||
styleUrl: 'nl-otp-migrate.css',
|
||||
shadow: false,
|
||||
})
|
||||
export class NlImportFlow {
|
||||
@Prop({ mutable: true }) titleInfo = 'Import keys to storage service';
|
||||
@Prop() titleImport = 'Choose a service';
|
||||
@Prop() textImport = 'You will be prompted to import keys to the chosen service, and this website will connect to your keys.';
|
||||
@Prop() services: ConnectionString[] = [];
|
||||
|
||||
@Event() nlImportAccount: EventEmitter<ConnectionString>;
|
||||
|
||||
handleDomainSelect(event: CustomEvent<string>) {
|
||||
const s = this.services.find(s => s.domain === event.detail);
|
||||
state.nlImport = s;
|
||||
}
|
||||
|
||||
handleCreateAccount(e: MouseEvent) {
|
||||
e.preventDefault();
|
||||
this.nlImportAccount.emit(state.nlImport);
|
||||
}
|
||||
|
||||
render() {
|
||||
const options = this.services.filter(s => s.canImport).map(s => ({ name: s.domain!, value: s.domain! }));
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<div class="p-4 overflow-y-auto">
|
||||
<h1 class="nl-title font-bold text-center text-2xl">{this.titleImport}</h1>
|
||||
<p class="nl-description font-light text-center text-sm pt-2 max-w-96 mx-auto">{this.textImport}</p>
|
||||
</div>
|
||||
|
||||
<div class="max-w-72 mx-auto mb-5">
|
||||
<div class="mb-0.5">
|
||||
<nl-select onSelectDomain={e => this.handleDomainSelect(e)} selected={0} options={options}></nl-select>
|
||||
</div>
|
||||
<p class="nl-title font-light text-sm mb-2">Default provider is a fine choice to start with.</p>
|
||||
|
||||
<div class="ps-4 pe-4 overflow-y-auto">
|
||||
<p class="nl-error font-light text-center text-sm max-w-96 mx-auto">{state.error}</p>
|
||||
</div>
|
||||
|
||||
<button-base disabled={state.isLoading} onClick={e => this.handleCreateAccount(e)} titleBtn="Start importing">
|
||||
{state.isLoading ? (
|
||||
<span
|
||||
slot="icon-start"
|
||||
class="animate-spin-loading inline-block w-4 h-4 border-[3px] border-current border-t-transparent text-slate-900 dark:text-gray-300 rounded-full"
|
||||
role="status"
|
||||
aria-label="loading"
|
||||
></span>
|
||||
) : (
|
||||
<svg slot="icon-start" style={{ display: 'none' }} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M18 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0ZM3 19.235v-.11a6.375 6.375 0 0 1 12.75 0v.109A12.318 12.318 0 0 1 9.374 21c-2.331 0-4.512-.645-6.374-1.766Z"
|
||||
/>
|
||||
</svg>
|
||||
)}
|
||||
</button-base>
|
||||
</div>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,47 +0,0 @@
|
||||
# nl-otp-migrate
|
||||
|
||||
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
|
||||
## Properties
|
||||
|
||||
| Property | Attribute | Description | Type | Default |
|
||||
| ------------- | -------------- | ----------- | -------------------- | ---------------------------------------------------------------------------------------------------------- |
|
||||
| `services` | -- | | `ConnectionString[]` | `[]` |
|
||||
| `textImport` | `text-import` | | `string` | `'You will be prompted to import keys to the chosen service, and this website will connect to your keys.'` |
|
||||
| `titleImport` | `title-import` | | `string` | `'Choose a service'` |
|
||||
| `titleInfo` | `title-info` | | `string` | `'Import keys to storage service'` |
|
||||
|
||||
|
||||
## Events
|
||||
|
||||
| Event | Description | Type |
|
||||
| ----------------- | ----------- | ------------------------------- |
|
||||
| `nlImportAccount` | | `CustomEvent<ConnectionString>` |
|
||||
|
||||
|
||||
## Dependencies
|
||||
|
||||
### Used by
|
||||
|
||||
- [nl-auth](../nl-auth)
|
||||
|
||||
### Depends on
|
||||
|
||||
- [nl-select](../nl-select)
|
||||
- [button-base](../button-base)
|
||||
|
||||
### Graph
|
||||
```mermaid
|
||||
graph TD;
|
||||
nl-otp-migrate --> nl-select
|
||||
nl-otp-migrate --> button-base
|
||||
nl-auth --> nl-otp-migrate
|
||||
style nl-otp-migrate fill:#f9f,stroke:#333,stroke-width:4px
|
||||
```
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
*Built with [StencilJS](https://stenciljs.com/)*
|
||||
@@ -1,4 +0,0 @@
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@@ -1,191 +0,0 @@
|
||||
import { Component, h, Fragment, Prop, Event, EventEmitter, Watch } from '@stencil/core';
|
||||
import { CURRENT_MODULE, Info, RecentType } from '@/types';
|
||||
import { state } from '@/store';
|
||||
|
||||
@Component({
|
||||
tag: 'nl-previously-logged',
|
||||
styleUrl: 'nl-previously-logged.css',
|
||||
shadow: false,
|
||||
})
|
||||
export class NlPreviouslyLogged {
|
||||
@Prop() titlePage = 'Your profiles';
|
||||
@Prop() description = 'Switch between active profiles or choose a recent one for fast login.';
|
||||
|
||||
@Prop() accounts: Info[] = [];
|
||||
@Prop() recents: RecentType[] = [];
|
||||
|
||||
@Event() nlSwitchAccount: EventEmitter<Info>;
|
||||
@Event() nlLoginRecentAccount: EventEmitter<RecentType>;
|
||||
@Event() nlRemoveRecent: EventEmitter<RecentType>;
|
||||
|
||||
handleGoToWelcome() {
|
||||
state.path = [CURRENT_MODULE.WELCOME];
|
||||
}
|
||||
|
||||
switchToWelcomeIfEmpty() {
|
||||
if (!this.recents.length && !this.accounts.length) {
|
||||
state.path = [CURRENT_MODULE.WELCOME];
|
||||
}
|
||||
}
|
||||
|
||||
@Watch('accounts')
|
||||
watchAccounts() {
|
||||
this.switchToWelcomeIfEmpty();
|
||||
}
|
||||
|
||||
@Watch('recents')
|
||||
watchRecents() {
|
||||
this.switchToWelcomeIfEmpty();
|
||||
}
|
||||
|
||||
handleRemoveRecent(user: Info) {
|
||||
this.nlRemoveRecent.emit(user);
|
||||
}
|
||||
|
||||
handleSwitch(el: Info) {
|
||||
this.nlSwitchAccount.emit(el);
|
||||
}
|
||||
|
||||
handleLoginRecentAccount(el: RecentType) {
|
||||
this.nlLoginRecentAccount.emit(el);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Fragment>
|
||||
<div class="p-4 pt-0 overflow-y-auto">
|
||||
<h1 class="nl-title font-bold text-center text-4xl">{this.titlePage}</h1>
|
||||
<p class="nl-description font-light text-center text-lg pt-2 max-w-96 mx-auto">{this.description}</p>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
{Boolean(this.accounts.length) && (
|
||||
<div class="max-w-96 mx-auto">
|
||||
<p class="nl-description font-medium text-sm pb-1.5">Active profiles</p>
|
||||
<ul class="p-2 rounded-lg border border-blue-200 flex flex-col w-full gap-0.5">
|
||||
{this.accounts.map(el => {
|
||||
const isShowImg = Boolean(el?.picture);
|
||||
const userName = el.name || el.nip05 || el.pubkey;
|
||||
const isShowUserName = Boolean(userName);
|
||||
|
||||
return (
|
||||
<li onClick={() => this.handleSwitch(el)} class="group hover:bg-gray-400 flex cursor-pointer gap-x-3.5 py-2 px-3 rounded-lg text-sm items-center justify-between">
|
||||
<div class="flex items-center gap-x-3.5 w-full">
|
||||
<div class="w-full max-w-7 h-7 flex relative">
|
||||
<div class="absolute top-[-2px] right-[-2px] bg-white border-2 border-white rounded-xl">
|
||||
<div class="active h-1.5 w-1.5 bg-green-500 rounded-xl"></div>
|
||||
</div>
|
||||
<div class="group-hover:border-blue-400 uppercase font-bold w-full h-full rounded-full border border-gray-400 flex justify-center items-center">
|
||||
{isShowImg ? (
|
||||
<img class="w-full rounded-full" src={el.picture} alt="Logo" />
|
||||
) : isShowUserName ? (
|
||||
userName[0]
|
||||
) : (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-full">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M17.982 18.725A7.488 7.488 0 0 0 12 15.75a7.488 7.488 0 0 0-5.982 2.975m11.963 0a9 9 0 1 0-11.963 0m11.963 0A8.966 8.966 0 0 1 12 21a8.966 8.966 0 0 1-5.982-2.275M15 9.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
|
||||
/>
|
||||
</svg>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="overflow-hidden flex flex-col w-full">
|
||||
<div class="nl-title truncate overflow-hidden">{userName}</div>
|
||||
<nl-login-status info={el} />
|
||||
</div>
|
||||
</div>
|
||||
{/* <div class="w-full max-w-6">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-full hover:text-blue-600">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M8.25 9V5.25A2.25 2.25 0 0 1 10.5 3h6a2.25 2.25 0 0 1 2.25 2.25v13.5A2.25 2.25 0 0 1 16.5 21h-6a2.25 2.25 0 0 1-2.25-2.25V15M12 9l3 3m0 0-3 3m3-3H2.25"
|
||||
/>
|
||||
</svg>
|
||||
</div> */}
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{Boolean(this.recents.length) && (
|
||||
<div class="max-w-96 mx-auto pt-5">
|
||||
<p class="nl-description font-medium text-sm pb-1.5">Recent profiles</p>
|
||||
<ul class="p-2 rounded-lg border border-gray-200 flex flex-col w-full gap-0.5">
|
||||
{this.recents.map(el => {
|
||||
const isShowImg = Boolean(el?.picture);
|
||||
const userName = el.name || el.nip05 || el.pubkey;
|
||||
const isShowUserName = Boolean(userName);
|
||||
|
||||
return (
|
||||
<li
|
||||
onClick={() => this.handleLoginRecentAccount(el)}
|
||||
class="flex items-center gap-x-3.5 w-full hover:bg-gray-400 flex cursor-pointer items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm justify-between"
|
||||
>
|
||||
<div class="w-full max-w-7 h-7 flex relative">
|
||||
<div class="absolute top-[-3px] right-[-3px] bg-white border border-white rounded-xl">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-3 h-3">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="uppercase font-bold w-full h-full rounded-full border border-gray-400 flex justify-center items-center">
|
||||
{isShowImg ? (
|
||||
<img class="w-full rounded-full" src={el.picture} alt="Logo" />
|
||||
) : isShowUserName ? (
|
||||
userName[0]
|
||||
) : (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-full">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M17.982 18.725A7.488 7.488 0 0 0 12 15.75a7.488 7.488 0 0 0-5.982 2.975m11.963 0a9 9 0 1 0-11.963 0m11.963 0A8.966 8.966 0 0 1 12 21a8.966 8.966 0 0 1-5.982-2.275M15 9.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
|
||||
/>
|
||||
</svg>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-hidden flex flex-col w-full">
|
||||
<div class="nl-title truncate overflow-hidden">{userName}</div>
|
||||
<nl-login-status info={el} />
|
||||
</div>
|
||||
<svg
|
||||
onClick={e => {
|
||||
e.stopPropagation();
|
||||
this.handleRemoveRecent(el);
|
||||
}}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="w-full max-w-6 h-6 text-red-500 hover:text-red-600 ml-auto"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"
|
||||
/>
|
||||
</svg>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div class="p-4 overflow-y-auto">
|
||||
<p class="nl-footer font-light text-center text-sm max-w-96 mx-auto">
|
||||
You can also{' '}
|
||||
<span onClick={() => this.handleGoToWelcome()} class="cursor-pointer pb-3 text-blue-500">
|
||||
add another profile
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user