|
|
|
@ -8,11 +8,8 @@ |
|
|
|
loginWithAmber, |
|
|
|
loginWithAmber, |
|
|
|
loginWithNpub |
|
|
|
loginWithNpub |
|
|
|
} from "$lib/stores/userStore"; |
|
|
|
} from "$lib/stores/userStore"; |
|
|
|
import { |
|
|
|
import { Avatar, Popover, Dropdown, DropdownGroup, DropdownItem, DropdownHeader } from "flowbite-svelte"; |
|
|
|
ArrowRightToBracketOutline, |
|
|
|
import { Globe, Loader, Book, Smartphone } from "@lucide/svelte"; |
|
|
|
UserOutline, |
|
|
|
|
|
|
|
} from "flowbite-svelte-icons"; |
|
|
|
|
|
|
|
import { Avatar, Popover } from "flowbite-svelte"; |
|
|
|
|
|
|
|
import { get } from "svelte/store"; |
|
|
|
import { get } from "svelte/store"; |
|
|
|
import { goto } from "$app/navigation"; |
|
|
|
import { goto } from "$app/navigation"; |
|
|
|
import NDK, { NDKNip46Signer, NDKPrivateKeySigner } from "@nostr-dev-kit/ndk"; |
|
|
|
import NDK, { NDKNip46Signer, NDKPrivateKeySigner } from "@nostr-dev-kit/ndk"; |
|
|
|
@ -22,8 +19,6 @@ |
|
|
|
|
|
|
|
|
|
|
|
const ndk = getNdkContext(); |
|
|
|
const ndk = getNdkContext(); |
|
|
|
|
|
|
|
|
|
|
|
let { isNav = false } = $props<{ isNav?: boolean }>(); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// UI state for login functionality |
|
|
|
// UI state for login functionality |
|
|
|
let isLoadingExtension: boolean = $state(false); |
|
|
|
let isLoadingExtension: boolean = $state(false); |
|
|
|
let isLoadingAmber: boolean = $state(false); |
|
|
|
let isLoadingAmber: boolean = $state(false); |
|
|
|
@ -31,7 +26,6 @@ |
|
|
|
let nostrConnectUri: string | undefined = $state(undefined); |
|
|
|
let nostrConnectUri: string | undefined = $state(undefined); |
|
|
|
let showQrCode: boolean = $state(false); |
|
|
|
let showQrCode: boolean = $state(false); |
|
|
|
let qrCodeDataUrl: string | undefined = $state(undefined); |
|
|
|
let qrCodeDataUrl: string | undefined = $state(undefined); |
|
|
|
let loginButtonRef: HTMLElement | undefined = $state(); |
|
|
|
|
|
|
|
let resultTimeout: ReturnType<typeof setTimeout> | null = null; |
|
|
|
let resultTimeout: ReturnType<typeof setTimeout> | null = null; |
|
|
|
let profileAvatarId = "profile-avatar-btn"; |
|
|
|
let profileAvatarId = "profile-avatar-btn"; |
|
|
|
let showAmberFallback = $state(false); |
|
|
|
let showAmberFallback = $state(false); |
|
|
|
@ -390,162 +384,132 @@ |
|
|
|
<div class="relative h-fit my-auto"> |
|
|
|
<div class="relative h-fit my-auto"> |
|
|
|
{#if !userState.signedIn} |
|
|
|
{#if !userState.signedIn} |
|
|
|
<!-- Login button --> |
|
|
|
<!-- Login button --> |
|
|
|
<div class="group"> |
|
|
|
<Avatar size="xs" id="login-menu"/> |
|
|
|
<button |
|
|
|
<Dropdown placement="bottom" triggeredBy="#login-menu" class="min-w-xs"> |
|
|
|
bind:this={loginButtonRef} |
|
|
|
<DropdownGroup> |
|
|
|
id="login-avatar" |
|
|
|
<DropdownHeader>Login with...</DropdownHeader> |
|
|
|
class="h-6 w-6 rounded-full bg-gray-300 flex items-center justify-center cursor-pointer hover:bg-gray-400 transition-colors" |
|
|
|
<DropdownItem |
|
|
|
> |
|
|
|
class="w-full" |
|
|
|
<UserOutline class="h-4 w-4 text-gray-600" /> |
|
|
|
onclick={handleBrowserExtensionLogin} |
|
|
|
</button> |
|
|
|
disabled={isLoadingExtension || isLoadingAmber}> |
|
|
|
<Popover |
|
|
|
<span class="w-full flex items-center justify-start gap-3"> |
|
|
|
placement="bottom" |
|
|
|
|
|
|
|
triggeredBy="#login-avatar" |
|
|
|
|
|
|
|
class="popover-leather w-[200px]" |
|
|
|
|
|
|
|
trigger="click" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<div class="flex flex-col space-y-2"> |
|
|
|
|
|
|
|
<h3 class="text-lg font-bold mb-2">Login with...</h3> |
|
|
|
|
|
|
|
<button |
|
|
|
|
|
|
|
class="btn-leather text-nowrap flex self-stretch align-middle hover:text-primary-400 dark:hover:text-primary-500 disabled:opacity-50" |
|
|
|
|
|
|
|
onclick={handleBrowserExtensionLogin} |
|
|
|
|
|
|
|
disabled={isLoadingExtension || isLoadingAmber} |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
{#if isLoadingExtension} |
|
|
|
{#if isLoadingExtension} |
|
|
|
🔄 Connecting... |
|
|
|
<Loader size={16} class="inline" /> Connecting... |
|
|
|
{:else} |
|
|
|
{:else} |
|
|
|
🌐 Browser extension |
|
|
|
<Globe size={16} class="inline" /> Browser extension |
|
|
|
{/if} |
|
|
|
{/if} |
|
|
|
</button> |
|
|
|
</span></DropdownItem> |
|
|
|
<button |
|
|
|
<DropdownItem |
|
|
|
class="btn-leather text-nowrap flex self-stretch align-middle hover:text-primary-400 dark:hover:text-primary-500 disabled:opacity-50" |
|
|
|
class="w-full" |
|
|
|
onclick={handleAmberLogin} |
|
|
|
onclick={handleAmberLogin} |
|
|
|
disabled={isLoadingAmber || isLoadingExtension} |
|
|
|
disabled={isLoadingAmber || isLoadingExtension} |
|
|
|
> |
|
|
|
> |
|
|
|
{#if isLoadingAmber} |
|
|
|
<span class="w-full flex items-center justify-start gap-3"> |
|
|
|
🔄 Connecting... |
|
|
|
{#if isLoadingAmber} |
|
|
|
|
|
|
|
<Loader size={16} class="inline" /> Connecting... |
|
|
|
{:else} |
|
|
|
{:else} |
|
|
|
📱 Amber: NostrConnect |
|
|
|
<Smartphone size={16} class="inline" /> Amber: NostrConnect |
|
|
|
{/if} |
|
|
|
{/if} |
|
|
|
</button> |
|
|
|
</span> |
|
|
|
<button |
|
|
|
</DropdownItem> |
|
|
|
class="btn-leather text-nowrap flex self-stretch align-middle hover:text-primary-400 dark:hover:text-primary-500" |
|
|
|
<DropdownItem |
|
|
|
onclick={handleReadOnlyLogin} |
|
|
|
class="w-full" |
|
|
|
> |
|
|
|
onclick={handleReadOnlyLogin} |
|
|
|
📖 npub (read only) |
|
|
|
|
|
|
|
</button> |
|
|
|
|
|
|
|
<div class="border-t border-gray-200 pt-2 mt-2"> |
|
|
|
|
|
|
|
<div class="text-xs text-gray-500 mb-1">Network Status:</div> |
|
|
|
|
|
|
|
<NetworkStatus /> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</Popover> |
|
|
|
|
|
|
|
{#if result} |
|
|
|
|
|
|
|
<div |
|
|
|
|
|
|
|
class="absolute right-0 top-10 z-50 bg-gray-100 p-3 rounded text-sm break-words whitespace-pre-line max-w-lg shadow-lg border border-gray-300" |
|
|
|
|
|
|
|
> |
|
|
|
> |
|
|
|
{result} |
|
|
|
<span class="w-full flex items-center justify-start gap-3"> |
|
|
|
<button |
|
|
|
<Book size={16} class="inline" /> npub (read only) |
|
|
|
class="ml-2 text-gray-500 hover:text-gray-700" |
|
|
|
</span> |
|
|
|
onclick={() => (result = null)}>✖</button |
|
|
|
</DropdownItem> |
|
|
|
|
|
|
|
{#if result} |
|
|
|
|
|
|
|
<DropdownHeader> |
|
|
|
|
|
|
|
<div |
|
|
|
|
|
|
|
class="absolute right-0 top-10 z-50 bg-gray-100 p-3 rounded text-sm break-words whitespace-pre-line max-w-lg shadow-lg border border-gray-300" |
|
|
|
> |
|
|
|
> |
|
|
|
</div> |
|
|
|
{result} |
|
|
|
{/if} |
|
|
|
<button |
|
|
|
</div> |
|
|
|
class="ml-2 text-gray-500 hover:text-gray-700" |
|
|
|
|
|
|
|
onclick={() => (result = null)}>✖</button |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</DropdownHeader> |
|
|
|
|
|
|
|
{/if} |
|
|
|
|
|
|
|
</DropdownGroup> |
|
|
|
|
|
|
|
<DropdownGroup> |
|
|
|
|
|
|
|
<DropdownHeader> |
|
|
|
|
|
|
|
<NetworkStatus /> |
|
|
|
|
|
|
|
</DropdownHeader> |
|
|
|
|
|
|
|
</DropdownGroup> |
|
|
|
|
|
|
|
</Dropdown> |
|
|
|
{:else} |
|
|
|
{:else} |
|
|
|
<!-- User profile --> |
|
|
|
<!-- User profile --> |
|
|
|
<div class="group"> |
|
|
|
<Avatar |
|
|
|
<button |
|
|
|
src={pfp} |
|
|
|
class="h-6 w-6 rounded-full p-0 border-0 bg-transparent cursor-pointer" |
|
|
|
alt={username || "User"} |
|
|
|
id={profileAvatarId} |
|
|
|
aria-label="Open profile menu" |
|
|
|
type="button" |
|
|
|
size="xs" id={profileAvatarId}/> |
|
|
|
aria-label="Open profile menu" |
|
|
|
<Dropdown placement="bottom" triggeredBy="#{profileAvatarId}" class="min-w-xs"> |
|
|
|
> |
|
|
|
<DropdownHeader> |
|
|
|
{#if !pfp} |
|
|
|
{#if username} |
|
|
|
<div class="h-6 w-6 rounded-full bg-gray-300 animate-pulse cursor-pointer"></div> |
|
|
|
<span class="block text-sm">{username}</span> |
|
|
|
|
|
|
|
<span class="block truncate text-sm font-medium">@{tag}</span> |
|
|
|
|
|
|
|
{:else if !pfp} |
|
|
|
|
|
|
|
<span>Loading profile...</span> |
|
|
|
{:else} |
|
|
|
{:else} |
|
|
|
<Avatar |
|
|
|
<span>Loading...</span> |
|
|
|
rounded |
|
|
|
|
|
|
|
class="h-6 w-6 cursor-pointer" |
|
|
|
|
|
|
|
src={pfp} |
|
|
|
|
|
|
|
alt={username || "User"} |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
{/if} |
|
|
|
{/if} |
|
|
|
</button> |
|
|
|
</DropdownHeader> |
|
|
|
<Popover |
|
|
|
<DropdownGroup> |
|
|
|
placement="bottom" |
|
|
|
<DropdownItem class="w-full"> |
|
|
|
triggeredBy={`#${profileAvatarId}`} |
|
|
|
<CopyToClipboard |
|
|
|
class="popover-leather w-[220px]" |
|
|
|
displayText={shortenNpub(npub) || "Loading..."} |
|
|
|
trigger="click" |
|
|
|
copyText={npub || ""} |
|
|
|
> |
|
|
|
/> |
|
|
|
<div class="flex flex-row justify-between space-x-4"> |
|
|
|
</DropdownItem> |
|
|
|
<div class="flex flex-col"> |
|
|
|
</DropdownGroup> |
|
|
|
{#if username} |
|
|
|
<DropdownGroup> |
|
|
|
<h3 class="text-lg font-bold">{username}</h3> |
|
|
|
<DropdownItem |
|
|
|
{#if isNav}<h4 class="text-base">@{tag}</h4>{/if} |
|
|
|
class="w-full items-start" |
|
|
|
{:else if !pfp} |
|
|
|
onclick={() => goto('/profile')} |
|
|
|
<h3 class="text-lg font-bold">Loading profile...</h3> |
|
|
|
> |
|
|
|
{:else} |
|
|
|
View profile |
|
|
|
<h3 class="text-lg font-bold">Loading...</h3> |
|
|
|
</DropdownItem> |
|
|
|
{/if} |
|
|
|
<DropdownItem |
|
|
|
<ul class="space-y-2 mt-2"> |
|
|
|
class="w-full" |
|
|
|
<li> |
|
|
|
onclick={() => goto('/profile/my-notes')} |
|
|
|
<CopyToClipboard |
|
|
|
> |
|
|
|
displayText={shortenNpub(npub) || "Loading..."} |
|
|
|
My notes |
|
|
|
copyText={npub || ""} |
|
|
|
</DropdownItem> |
|
|
|
/> |
|
|
|
<DropdownItem |
|
|
|
</li> |
|
|
|
class="w-full" |
|
|
|
<li> |
|
|
|
onclick={() => goto('/profile/notifications')} |
|
|
|
<button |
|
|
|
> |
|
|
|
class="hover:text-primary-400 dark:hover:text-primary-500 text-nowrap mt-3 m-0 text-left" |
|
|
|
Notifications |
|
|
|
onclick={handleViewProfile} |
|
|
|
</DropdownItem> |
|
|
|
> |
|
|
|
</DropdownGroup> |
|
|
|
<UserOutline |
|
|
|
<DropdownGroup> |
|
|
|
class="mr-1 !h-6 !w-6 inline !fill-none dark:!fill-none" |
|
|
|
<DropdownHeader class="text-xs"> |
|
|
|
/><span class="underline">View notifications</span> |
|
|
|
{#if userState.loginMethod === "extension"} |
|
|
|
</button> |
|
|
|
Logged in with extension |
|
|
|
</li> |
|
|
|
{:else if userState.loginMethod === "amber"} |
|
|
|
|
|
|
|
Logged in with Amber |
|
|
|
<li class="text-xs text-gray-500"> |
|
|
|
{:else if userState.loginMethod === "npub"} |
|
|
|
{#if userState.loginMethod === "extension"} |
|
|
|
Logged in with npub |
|
|
|
Logged in with extension |
|
|
|
{:else} |
|
|
|
{:else if userState.loginMethod === "amber"} |
|
|
|
Unknown login method |
|
|
|
Logged in with Amber |
|
|
|
{/if} |
|
|
|
{:else if userState.loginMethod === "npub"} |
|
|
|
</DropdownHeader> |
|
|
|
Logged in with npub |
|
|
|
<DropdownHeader><NetworkStatus /></DropdownHeader> |
|
|
|
{:else} |
|
|
|
</DropdownGroup> |
|
|
|
Unknown login method |
|
|
|
<DropdownGroup> |
|
|
|
{/if} |
|
|
|
<DropdownItem |
|
|
|
</li> |
|
|
|
id="sign-out-button" |
|
|
|
<li> |
|
|
|
class="w-full" |
|
|
|
<NetworkStatus /> |
|
|
|
onclick={handleSignOutClick} |
|
|
|
</li> |
|
|
|
> |
|
|
|
{#if isNav} |
|
|
|
Sign out |
|
|
|
<li> |
|
|
|
</DropdownItem> |
|
|
|
<button |
|
|
|
</DropdownGroup> |
|
|
|
id="sign-out-button" |
|
|
|
</Dropdown> |
|
|
|
class="btn-leather text-nowrap mt-3 flex self-stretch align-middle hover:text-primary-400 dark:hover:text-primary-500" |
|
|
|
|
|
|
|
onclick={handleSignOutClick} |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<ArrowRightToBracketOutline |
|
|
|
|
|
|
|
class="mr-1 !h-6 !w-6 inline !fill-none dark:!fill-none" |
|
|
|
|
|
|
|
/> Sign out |
|
|
|
|
|
|
|
</button> |
|
|
|
|
|
|
|
</li> |
|
|
|
|
|
|
|
{:else} |
|
|
|
|
|
|
|
<!-- li> |
|
|
|
|
|
|
|
<button |
|
|
|
|
|
|
|
class='btn-leather text-nowrap mt-3 flex self-stretch align-middle hover:text-primary-400 dark:hover:text-primary-500' |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<FileSearchOutline class='mr-1 !h-6 inline !fill-none dark:!fill-none' /> More content |
|
|
|
|
|
|
|
</button> |
|
|
|
|
|
|
|
</li --> |
|
|
|
|
|
|
|
{/if} |
|
|
|
|
|
|
|
</ul> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</Popover> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
{/if} |
|
|
|
{/if} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
Nuša Pukšič
7 months ago
committed by
buttercat1791