forked from coracle/caravel
Jon Staab
85 lines
3.4 KiB
TypeScript
85 lines
3.4 KiB
TypeScript
import { Show } from "solid-js"
|
|
import type { Tab } from "@/lib/loginInput"
|
|
|
|
// Presentational tab-selection panel for the login screen. All login logic stays
|
|
// in Login.tsx; this only renders tabs and surfaces continue callbacks. Props are
|
|
// reactive only when read lazily, so access props.* inside JSX, never destructure
|
|
// signal-bearing props at the top.
|
|
type LoginTabsScreenProps = {
|
|
tab: () => Tab
|
|
setTab: (tab: Tab) => void
|
|
loading: () => boolean
|
|
hasExtension: boolean
|
|
onContinueExtension: () => void
|
|
onContinueSigner: () => void
|
|
onContinueKey: () => void
|
|
}
|
|
|
|
export default function LoginTabsScreen(props: LoginTabsScreenProps) {
|
|
return (
|
|
<>
|
|
<h2 class="text-lg font-semibold text-gray-900">Log in / Sign up</h2>
|
|
<p class="mt-2 text-xs text-gray-500">
|
|
Use any Nostr signer method. New users are automatically onboarded.
|
|
</p>
|
|
<div class="mt-6 space-y-4">
|
|
<div class="flex gap-2 border border-gray-200 rounded-lg p-1">
|
|
<button
|
|
type="button"
|
|
class={`flex-1 rounded-md px-3 py-2 text-sm ${props.tab() === "nip07" ? "bg-gray-900 text-white" : "text-gray-700"}`}
|
|
onClick={() => props.setTab("nip07")}
|
|
disabled={!props.hasExtension}
|
|
>
|
|
Extension
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class={`flex-1 rounded-md px-3 py-2 text-sm ${props.tab() === "nip46" ? "bg-gray-900 text-white" : "text-gray-700"}`}
|
|
onClick={() => props.setTab("nip46")}
|
|
>
|
|
Signer
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class={`flex-1 rounded-md px-3 py-2 text-sm ${props.tab() === "key" ? "bg-gray-900 text-white" : "text-gray-700"}`}
|
|
onClick={() => props.setTab("key")}
|
|
>
|
|
Key
|
|
</button>
|
|
</div>
|
|
|
|
<Show when={props.tab() === "nip07"}>
|
|
<button
|
|
type="button"
|
|
class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm font-medium disabled:opacity-50"
|
|
disabled={!props.hasExtension || props.loading()}
|
|
onClick={props.onContinueExtension}
|
|
>
|
|
{props.loading() ? "Connecting..." : <>Continue with extension <svg class="inline-block w-4 h-4 ml-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg></>}
|
|
</button>
|
|
</Show>
|
|
|
|
<Show when={props.tab() === "nip46"}>
|
|
<button
|
|
type="button"
|
|
class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm font-medium"
|
|
onClick={props.onContinueSigner}
|
|
>
|
|
Continue with signer <svg class="inline-block w-4 h-4 ml-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
|
</button>
|
|
</Show>
|
|
|
|
<Show when={props.tab() === "key"}>
|
|
<button
|
|
type="button"
|
|
class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm font-medium"
|
|
onClick={props.onContinueKey}
|
|
>
|
|
Continue with key <svg class="inline-block w-4 h-4 ml-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
|
</button>
|
|
</Show>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|