problem: user can only sign in with extension (#27)

package.json

@@ -62,6 +62,7 @@
 		"eslint": "^8.56.0",
 		"husky": "^9.1.5",
 		"lint-staged": "^15.2.10",
+		"lucide-svelte": "0.439.0",
 		"postcss": "^8.4.29",
 		"prettier": "^3.1.1",
 		"prettier-plugin-svelte": "^3.1.2",

src/lib/components/ChatLayout.svelte

@@ -16,7 +16,6 @@
 		AngleRightSolid
 	} from 'svelte-awesome-icons';
 	import Button from './Button.svelte';
-	import LoginButton from './LoginButton.svelte';
 	import Login from '@/ndk/Login.svelte';
 
 	export let hideFaucet = false;
@@ -125,11 +124,9 @@
 
 				<div class="flex w-full items-center">
 					<Button onClick={toggleMode}>
-						<Moon
-							class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
-						/>
+						<Moon class="h-6 w-6 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
 						<Sun
-							class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
+							class="absolute h-6 w-6 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
 						/>
 						<span class="sr-only">Toggle theme</span>
 					</Button>

src/lib/components/ConnectToBunker.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+	import * as Dialog from '$lib/components/ui/dialog';
+	import { Input } from '@components/ui/input';
+	import { Button } from '@components/ui/button';
+	import { ndk } from '$lib/ndk/ndk';
+	import { connectToBunker } from '$lib/ndk/login';
+	import { currentPubkey } from '$lib/stores/user';
+
+	$: isLoading = false;
+	let nip05 = '';
+
+	async function handleLogin() {
+		isLoading = true;
+		try {
+			const signer = await connectToBunker(nip05);
+			$currentPubkey = (await signer.user()).pubkey;
+			$ndk.signer = signer;
+		} catch (error) {
+			console.error('Login failed:', error);
+		} finally {
+			isLoading = false;
+		}
+	}
+</script>
+
+<Dialog.Root>
+	<Dialog.Trigger class="w-full">
+		<Button class="w-full">Nostr Address</Button>
+	</Dialog.Trigger>
+	<Dialog.Content>
+		<Dialog.Header>
+			<Dialog.Title>Login with Nostr Address</Dialog.Title>
+		</Dialog.Header>
+		<form on:submit|preventDefault={handleLogin}>
+			<div class="grid gap-4 py-4">
+				<div class="grid grid-cols-4 items-center gap-4">
+					<label for="bunker-id" class="text-right"> Nostr Address </label>
+					<Input id="bunker-id" placeholder="user@provider" bind:value={nip05} class="col-span-3" />
+				</div>
+				<p class="col-span-4 text-center text-sm text-gray-600">
+					Don't have a Nostr address? You can sign up for one at
+					<a
+						href="https://nsec.app"
+						target="_blank"
+						rel="noopener noreferrer"
+						class="text-blue-500 hover:underline">nsec.app</a
+					>.
+				</p>
+			</div>
+			<Dialog.Footer>
+				<Button type="submit" disabled={isLoading}>
+					{#if isLoading}
+						Connecting to bunker...
+					{:else}
+						Connect
+					{/if}
+				</Button>
+			</Dialog.Footer>
+		</form>
+	</Dialog.Content>
+</Dialog.Root>

src/lib/components/CopyButton.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button/index.js';
+	import { Check, Copy } from 'lucide-svelte';
+
+	export let text;
+	let copyed: boolean;
+</script>
+
+<Button
+	on:click={() => {
+		if (text && navigator.clipboard) {
+			navigator.clipboard.writeText(text);
+			copyed = true;
+			setTimeout(() => {
+				copyed = false;
+			}, 2000);
+		}
+	}}
+>
+	{#if copyed}
+		<Check class="h-5 w-5" />
+	{:else}
+		<Copy class="h-5 w-5" />
+	{/if}
+</Button>

src/lib/components/UseTemporaryAccount.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+	import { ndk } from '$lib/ndk/ndk';
+	import { Button } from '@/components/ui/button';
+	import * as Dialog from '$lib/components/ui/dialog';
+	import { NDKPrivateKeySigner } from '@nostr-dev-kit/ndk';
+	import { nip19 } from 'nostr-tools';
+	import CopyButton from './CopyButton.svelte';
+	import { Input } from '$lib/components/ui/input';
+	import { currentPubkey } from '$lib/stores/user';
+
+	let temporaryAccount: NDKPrivateKeySigner;
+	let nsec: string;
+
+	async function createTemporaryAccount() {
+		temporaryAccount = NDKPrivateKeySigner.generate();
+		nsec = nip19.nsecEncode(temporaryAccount.privateKey!);
+		console.log(nsec);
+	}
+
+	async function useTemporaryAccount() {
+		$currentPubkey = (await temporaryAccount.user()).pubkey;
+		$ndk.signer = temporaryAccount;
+		localStorage.setItem('signed-in', 'nsec');
+		localStorage.setItem('signed-in-nsec', nsec);
+	}
+</script>
+
+<Dialog.Root>
+	<Dialog.Trigger class="w-full">
+		<Button on:click={createTemporaryAccount} class="w-full">Use Temporary Account</Button>
+	</Dialog.Trigger>
+	<Dialog.Content>
+		<div class="space-y-6 py-4">
+			<p class="mb-4">
+				Your temporary account has been created. Please save the following private key (nsec) for
+				future use:
+			</p>
+			<div class="mb-4 flex gap-2">
+				<Input bind:value={nsec} readonly />
+				<CopyButton text={nsec} />
+			</div>
+			<p class="mb-6 text-sm text-gray-600">
+				Warning: Please store this private key in a secure location. If lost, you will not be able
+				to access this account again.
+			</p>
+			<Button on:click={useTemporaryAccount} class="w-full">
+				I've Safely Stored the Private Key
+			</Button>
+		</div>
+	</Dialog.Content>
+</Dialog.Root>