You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
77 lines
2.7 KiB
77 lines
2.7 KiB
<script lang="ts"> |
|
import { Button } from "flowbite-svelte"; |
|
import { loginWithExtension, ndkSignedIn } from '$lib/ndk'; |
|
|
|
const { show = false, onClose = () => {}, onLoginSuccess = () => {} } = $props<{ |
|
show?: boolean; |
|
onClose?: () => void; |
|
onLoginSuccess?: () => void; |
|
}>(); |
|
|
|
let signInFailed = $state<boolean>(false); |
|
let errorMessage = $state<string>(''); |
|
|
|
$effect(() => { |
|
if ($ndkSignedIn && show) { |
|
onLoginSuccess(); |
|
onClose(); |
|
} |
|
}); |
|
|
|
async function handleSignInClick() { |
|
try { |
|
signInFailed = false; |
|
errorMessage = ''; |
|
|
|
const user = await loginWithExtension(); |
|
if (!user) { |
|
throw new Error('The NIP-07 extension did not return a user.'); |
|
} |
|
} catch (e: unknown) { |
|
console.error(e); |
|
signInFailed = true; |
|
errorMessage = (e as Error)?.message ?? 'Failed to sign in. Please try again.'; |
|
} |
|
} |
|
</script> |
|
|
|
{#if show} |
|
<div class="fixed inset-0 z-50 flex items-center justify-center overflow-x-hidden overflow-y-auto outline-none focus:outline-none bg-gray-900 bg-opacity-50"> |
|
<div class="relative w-auto my-6 mx-auto max-w-3xl"> |
|
<div class="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white dark:bg-gray-800 outline-none focus:outline-none"> |
|
<!-- Header --> |
|
<div class="flex items-start justify-between p-5 border-b border-solid border-gray-300 dark:border-gray-600 rounded-t"> |
|
<h3 class="text-xl font-medium text-gray-900 dark:text-gray-100">Login Required</h3> |
|
<button |
|
class="ml-auto bg-transparent border-0 text-gray-600 float-right text-3xl leading-none font-semibold outline-none focus:outline-none" |
|
onclick={onClose} |
|
> |
|
<span class="bg-transparent text-gray-700 dark:text-gray-300 h-6 w-6 text-2xl block outline-none focus:outline-none">×</span> |
|
</button> |
|
</div> |
|
|
|
<!-- Body --> |
|
<div class="relative p-6 flex-auto"> |
|
<p class="text-base leading-relaxed text-gray-700 dark:text-gray-300 mb-6"> |
|
You need to be logged in to submit an issue. Your form data will be preserved. |
|
</p> |
|
<div class="flex flex-col space-y-4"> |
|
<div class="flex justify-center"> |
|
<Button |
|
color="primary" |
|
onclick={handleSignInClick} |
|
> |
|
Sign in with Extension |
|
</Button> |
|
</div> |
|
{#if signInFailed} |
|
<div class="p-3 text-sm text-red-600 dark:text-red-400 bg-red-100 dark:bg-red-900 rounded"> |
|
{errorMessage} |
|
</div> |
|
{/if} |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
{/if} |