Jon Staab
113 lines
3.5 KiB
Svelte
113 lines
3.5 KiB
Svelte
<script lang="ts">
|
|
import {makeSecret, Nip46Broker} from "@welshman/signer"
|
|
import {loadHandle} from "@welshman/app"
|
|
import Icon from "@lib/components/Icon.svelte"
|
|
import Field from "@lib/components/Field.svelte"
|
|
import Link from "@lib/components/Link.svelte"
|
|
import Button from "@lib/components/Button.svelte"
|
|
import Divider from "@lib/components/Divider.svelte"
|
|
import Spinner from "@lib/components/Spinner.svelte"
|
|
import LogIn from "@app/components/LogIn.svelte"
|
|
import InfoNostr from "@app/components/InfoNostr.svelte"
|
|
import {pushModal, clearModals} from "@app/modal"
|
|
import {setChecked} from "@app/notifications"
|
|
import {PLATFORM_NAME, NIP46_PERMS} from "@app/state"
|
|
import {pushToast} from "@app/toast"
|
|
import {loginWithNip46} from "@app/commands"
|
|
|
|
const relays = ["wss://relay.nsec.app"]
|
|
|
|
const signerDomain = "nsec.app"
|
|
|
|
const signerPubkey = "e24a86943d37a91ab485d6f9a7c66097c25ddd67e8bd1b75ed252a3c266cf9bb"
|
|
|
|
const login = () => pushModal(LogIn)
|
|
|
|
const trySignup = async () => {
|
|
const handle = await loadHandle(`${username}@${signerDomain}`)
|
|
|
|
if (handle?.pubkey) {
|
|
return pushToast({
|
|
theme: "error",
|
|
message: "Sorry, it looks like that account already exists. Try logging in instead.",
|
|
})
|
|
}
|
|
|
|
const clientSecret = makeSecret()
|
|
const broker = Nip46Broker.get({relays, clientSecret, signerPubkey})
|
|
|
|
const userPubkey = await broker.createAccount(username, signerDomain, NIP46_PERMS)
|
|
|
|
if (!userPubkey) {
|
|
return pushToast({
|
|
theme: "error",
|
|
message: "Sorry, it looks like something went wrong. Please try again.",
|
|
})
|
|
}
|
|
|
|
// Now we can log in. Use the user's pubkey for the handler (legacy stuff)
|
|
const success = await loginWithNip46({relays, signerPubkey: userPubkey, clientSecret})
|
|
|
|
if (!success) {
|
|
return pushToast({
|
|
theme: "error",
|
|
message: "Sorry, it looks like something went wrong. Please try again.",
|
|
})
|
|
}
|
|
|
|
pushToast({message: "Successfully logged in!"})
|
|
setChecked("*")
|
|
clearModals()
|
|
}
|
|
|
|
const signup = async () => {
|
|
loading = true
|
|
|
|
try {
|
|
await trySignup()
|
|
} finally {
|
|
loading = false
|
|
}
|
|
}
|
|
|
|
const handler = {
|
|
domain: "nsec.app",
|
|
relays: ["wss://relay.nsec.app"],
|
|
pubkey: "e24a86943d37a91ab485d6f9a7c66097c25ddd67e8bd1b75ed252a3c266cf9bb",
|
|
}
|
|
|
|
let username = ""
|
|
let loading = false
|
|
</script>
|
|
|
|
<form class="column gap-4" on:submit|preventDefault={signup}>
|
|
<h1 class="heading">Sign up with Nostr</h1>
|
|
<p class="m-auto max-w-sm text-center">
|
|
{PLATFORM_NAME} is built using the
|
|
<Button class="link" on:click={() => pushModal(InfoNostr)}>nostr protocol</Button>, which allows
|
|
you to own your social identity.
|
|
</p>
|
|
<Field>
|
|
<div class="flex items-center gap-2" slot="input">
|
|
<label class="input input-bordered flex w-full items-center gap-2">
|
|
<Icon icon="user-rounded" />
|
|
<input bind:value={username} class="grow" type="text" placeholder="username" />
|
|
</label>
|
|
@{handler.domain}
|
|
</div>
|
|
</Field>
|
|
<Button type="submit" class="btn btn-primary" disabled={!username || loading}>
|
|
<Spinner {loading}>Sign Up</Spinner>
|
|
<Icon icon="alt-arrow-right" />
|
|
</Button>
|
|
<Divider>Or</Divider>
|
|
<Link external href="https://nosta.me" class="btn {username ? 'btn-neutral' : 'btn-primary'}">
|
|
<Icon icon="square-share-line" />
|
|
Get started on Nosta.me
|
|
</Link>
|
|
<div class="text-sm">
|
|
Already have an account?
|
|
<Button class="link" on:click={login}>Log in instead</Button>
|
|
</div>
|
|
</form>
|