Add nip 01 login flow to mobile

src/app/components/ProfileEdit.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import {ctx} from "@welshman/lib"
+  import type {Profile} from "@welshman/util"
   import {
     createEvent,
     makeProfile,
@@ -8,76 +9,31 @@
     isPublishedProfile,
   } from "@welshman/util"
   import {pubkey, profilesByPubkey, publishThunk} from "@welshman/app"
-  import {preventDefault} from "@lib/html"
-  import Icon from "@lib/components/Icon.svelte"
-  import Field from "@lib/components/Field.svelte"
   import Button from "@lib/components/Button.svelte"
-  import InputProfilePicture from "@lib/components/InputProfilePicture.svelte"
-  import InfoHandle from "@app/components/InfoHandle.svelte"
-  import {pushModal, clearModals} from "@app/modal"
+  import ProfileEditForm from "@app/components/ProfileEditForm.svelte"
+  import {clearModals} from "@app/modal"
   import {pushToast} from "@app/toast"
 
-  const values = $state({...($profilesByPubkey.get($pubkey!) || makeProfile())})
+  const initialValues = {...($profilesByPubkey.get($pubkey!) || makeProfile())}
 
   const back = () => history.back()
 
-  const saveEdit = () => {
+  const onsubmit = (profile: Profile) => {
     const relays = ctx.app.router.FromUser().getUrls()
-    const template = isPublishedProfile(values)
-      ? editProfile($state.snapshot(values))
-      : createProfile($state.snapshot(values))
+    const template = isPublishedProfile(profile) ? editProfile(profile) : createProfile(profile)
     const event = createEvent(template.kind, template)
 
     publishThunk({event, relays})
     pushToast({message: "Your profile has been updated!"})
     clearModals()
   }
-
-  let file: File | undefined = $state()
 </script>
 
-<form class="col-4" onsubmit={preventDefault(saveEdit)}>
-  <div class="flex justify-center py-2">
-    <InputProfilePicture bind:file bind:url={values.picture} />
-  </div>
-  <Field>
-    {#snippet label()}
-      <p>Username</p>
-    {/snippet}
-    {#snippet input()}
-      <label class="input input-bordered flex w-full items-center gap-2">
-        <Icon icon="user-circle" />
-        <input bind:value={values.name} class="grow" type="text" />
-      </label>
-    {/snippet}
-  </Field>
-  <Field>
-    {#snippet label()}
-      <p>About You</p>
-    {/snippet}
-    {#snippet input()}
-      <textarea class="textarea textarea-bordered leading-4" rows="3" bind:value={values.about}>
-      </textarea>
-    {/snippet}
-  </Field>
-  <Field>
-    {#snippet label()}
-      <p>Nostr Address</p>
-    {/snippet}
-    {#snippet input()}
-      <label class="input input-bordered flex w-full items-center gap-2">
-        <Icon icon="map-point" />
-        <input bind:value={values.nip05} class="grow" type="text" />
-      </label>
-    {/snippet}
-    {#snippet info()}
-      <p>
-        <Button class="link" onclick={() => pushModal(InfoHandle)}>What is a nostr address?</Button>
-      </p>
-    {/snippet}
-  </Field>
-  <div class="mt-4 flex flex-row items-center justify-between gap-4">
-    <Button class="btn btn-neutral" onclick={back}>Discard Changes</Button>
-    <Button type="submit" class="btn btn-primary">Save Changes</Button>
-  </div>
-</form>
+<ProfileEditForm {initialValues} {onsubmit}>
+  {#snippet footer()}
+    <div class="mt-4 flex flex-row items-center justify-between gap-4">
+      <Button class="btn btn-neutral" onclick={back}>Discard Changes</Button>
+      <Button type="submit" class="btn btn-primary">Save Changes</Button>
+    </div>
+  {/snippet}
+</ProfileEditForm>

src/app/components/ProfileEditForm.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+  import type {Snippet} from "svelte"
+  import type {Profile} from "@welshman/util"
+  import {makeProfile} from "@welshman/util"
+  import {preventDefault} from "@lib/html"
+  import Icon from "@lib/components/Icon.svelte"
+  import Field from "@lib/components/Field.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import InputProfilePicture from "@lib/components/InputProfilePicture.svelte"
+  import InfoHandle from "@app/components/InfoHandle.svelte"
+  import {pushModal} from "@app/modal"
+
+  type Props = {
+    initialValues?: Profile
+    onsubmit: (profile: Profile) => void
+    hideAddress?: boolean
+    footer: Snippet
+  }
+
+  const {initialValues = makeProfile(), hideAddress, onsubmit, footer}: Props = $props()
+
+  const values = $state(initialValues)
+
+  const submit = () => onsubmit($state.snapshot(values))
+
+  let file: File | undefined = $state()
+</script>
+
+<form class="col-4" onsubmit={preventDefault(submit)}>
+  <div class="flex justify-center py-2">
+    <InputProfilePicture bind:file bind:url={values.picture} />
+  </div>
+  <Field>
+    {#snippet label()}
+      <p>Username</p>
+    {/snippet}
+    {#snippet input()}
+      <label class="input input-bordered flex w-full items-center gap-2">
+        <Icon icon="user-circle" />
+        <input bind:value={values.name} class="grow" type="text" />
+      </label>
+    {/snippet}
+    {#snippet info()}
+      What would you like people to call you?
+    {/snippet}
+  </Field>
+  <Field>
+    {#snippet label()}
+      <p>About You</p>
+    {/snippet}
+    {#snippet input()}
+      <textarea class="textarea textarea-bordered leading-4" rows="3" bind:value={values.about}
+      ></textarea>
+    {/snippet}
+    {#snippet info()}
+      Give a brief introduction to why you're here.
+    {/snippet}
+  </Field>
+  {#if !hideAddress}
+    <Field>
+      {#snippet label()}
+        <p>Nostr Address</p>
+      {/snippet}
+      {#snippet input()}
+        <label class="input input-bordered flex w-full items-center gap-2">
+          <Icon icon="map-point" />
+          <input bind:value={values.nip05} class="grow" type="text" />
+        </label>
+      {/snippet}
+      {#snippet info()}
+        <p>
+          <Button class="link" onclick={() => pushModal(InfoHandle)}
+            >What is a nostr address?</Button>
+        </p>
+      {/snippet}
+    </Field>
+  {/if}
+  {@render footer()}
+</form>

src/app/components/SignUp.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import {Capacitor} from "@capacitor/core"
   import {postJson} from "@welshman/lib"
   import {isMobile, preventDefault} from "@lib/html"
   import Icon from "@lib/components/Icon.svelte"
@@ -8,6 +9,7 @@
   import Spinner from "@lib/components/Spinner.svelte"
   import LogIn from "@app/components/LogIn.svelte"
   import InfoNostr from "@app/components/InfoNostr.svelte"
+  import SignUpKey from "@app/components/SignUpKey.svelte"
   import SignUpSuccess from "@app/components/SignUpSuccess.svelte"
   import {pushModal} from "@app/modal"
   import {BURROW_URL, PLATFORM_NAME} from "@app/state"
@@ -37,18 +39,20 @@
     }
   }
 
-  const signup = () => {
+  const usePassword = () => {
     if (BURROW_URL) {
       signupPassword()
     }
   }
 
+  const useKey = () => pushModal(SignUpKey)
+
   let email = $state("")
   let password = $state("")
   let loading = $state(false)
 </script>
 
-<form class="column gap-4" onsubmit={preventDefault(signup)}>
+<form class="column gap-4" onsubmit={preventDefault(usePassword)}>
   <h1 class="heading">Sign up with Nostr</h1>
   <p class="m-auto max-w-sm text-center">
     {PLATFORM_NAME} is built using the
@@ -89,10 +93,21 @@
     </p>
     <Divider>Or</Divider>
   {/if}
-  <a href={nstart} class="btn {email || password ? 'btn-neutral' : 'btn-primary'}">
-    <Icon icon="square-share-line" />
-    Get going on nstart
-  </a>
+  {#if Capacitor.isNativePlatform()}
+    <Button onclick={useKey} class="btn {email || password ? 'btn-neutral' : 'btn-primary'}">
+      <Icon icon="key" />
+      Generate a key
+    </Button>
+    <a href={nstart} class="btn">
+      <Icon icon="square-share-line" />
+      Create an account on Nstart
+    </a>
+  {:else}
+    <a href={nstart} class="btn {email || password ? 'btn-neutral' : 'btn-primary'}">
+      <Icon icon="square-share-line" />
+      Create an account on Nstart
+    </a>
+  {/if}
   <div class="text-sm">
     Already have an account?
     <Button class="link" onclick={login}>Log in instead</Button>

src/app/components/SignUpKey.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+  import {encrypt} from "nostr-tools/nip49"
+  import {hexToBytes} from "@noble/hashes/utils"
+  import {makeSecret, getPubkey} from "@welshman/signer"
+  import {preventDefault, downloadText} from "@lib/html"
+  import Link from "@lib/components/Link.svelte"
+  import Icon from "@lib/components/Icon.svelte"
+  import Field from "@lib/components/Field.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalFooter from "@lib/components/ModalFooter.svelte"
+  import SignUpKeyConfirm from "@app/components/SignUpKeyConfirm.svelte"
+  import {pushToast} from "@app/toast"
+  import {pushModal} from "@app/modal"
+
+  const secret = makeSecret()
+
+  const pubkey = getPubkey(secret)
+
+  const back = () => history.back()
+
+  const next = () => {
+    if (password.length < 12) {
+      return pushToast({
+        theme: "error",
+        message: "Passwords must be at least 12 characters long.",
+      })
+    }
+
+    const ncryptsec = encrypt(hexToBytes(secret), password)
+
+    downloadText("Nostr Secret Key.txt", ncryptsec)
+
+    pushModal(SignUpKeyConfirm, {secret, pubkey, ncryptsec})
+  }
+
+  let password = ""
+</script>
+
+<form class="column gap-4" onsubmit={preventDefault(next)}>
+  <ModalHeader>
+    {#snippet title()}
+      <div>Welcome to Nostr!</div>
+    {/snippet}
+  </ModalHeader>
+  <p>
+    <Link external href="https://nostr.com/" class="link">Nostr</Link> is way to build social apps that
+    talk to each other. Users own their social identity instead of renting it from a tech company, and
+    can take it with them.
+  </p>
+  <p>
+    This means that instead of using a password to log in, you generate a <strong
+      >secret key</strong>
+    which gives you full control over your account.
+  </p>
+  <p>
+    Keeping this key safe is very important, so we encourage you to download an encrypted copy. To
+    do this, go ahead and fill in the password you'd like to use to secure your key below.
+  </p>
+  <Field>
+    {#snippet label()}
+      Password*
+    {/snippet}
+    {#snippet input()}
+      <label class="input input-bordered flex w-full items-center gap-2">
+        <Icon icon="key" />
+        <input bind:value={password} class="grow" type="password" />
+      </label>
+    {/snippet}
+    {#snippet info()}
+      <p>Passwords should be at least 12 characters long. Write this down!</p>
+    {/snippet}
+  </Field>
+  <ModalFooter>
+    <Button class="btn btn-link" onclick={back}>
+      <Icon icon="alt-arrow-left" />
+      Go back
+    </Button>
+    <Button class="btn btn-primary" type="submit">
+      Download my key
+      <Icon icon="alt-arrow-right" />
+    </Button>
+  </ModalFooter>
+</form>

src/app/components/SignUpKeyConfirm.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+  import {preventDefault, copyToClipboard} from "@lib/html"
+  import Icon from "@lib/components/Icon.svelte"
+  import Field from "@lib/components/Field.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalFooter from "@lib/components/ModalFooter.svelte"
+  import SignUpProfile from "@app/components/SignUpProfile.svelte"
+  import {pushToast} from "@app/toast"
+  import {pushModal} from "@app/modal"
+
+  type Props = {
+    secret: string
+    pubkey: string
+    ncryptsec: string
+  }
+
+  const {secret, pubkey, ncryptsec}: Props = $props()
+
+  const back = () => history.back()
+
+  const copy = () => {
+    copyToClipboard(ncryptsec)
+    pushToast({message: "Your secret key has been copied to your clipboard!"})
+  }
+
+  const next = () => {
+    pushModal(SignUpProfile, {secret, pubkey})
+  }
+</script>
+
+<form class="column gap-4" onsubmit={preventDefault(next)}>
+  <ModalHeader>
+    {#snippet title()}
+      <div>Download your key</div>
+    {/snippet}
+  </ModalHeader>
+  <p>
+    Great! We've encrypted your secret key and saved it to your device. If that didn't work, or if
+    you'd rather save your key somewhere else, you can find the encrypted version below:
+  </p>
+  <Field>
+    {#snippet label()}
+      Encrypted Secret Key
+    {/snippet}
+    {#snippet input()}
+      <label class="input input-bordered flex w-full items-center gap-2">
+        <Icon icon="key" />
+        <input value={ncryptsec} class="ellipsize grow" />
+        <Button onclick={copy} class="flex items-center">
+          <Icon icon="copy" />
+        </Button>
+      </label>
+    {/snippet}
+  </Field>
+  <ModalFooter>
+    <Button class="btn btn-link" onclick={back}>
+      <Icon icon="alt-arrow-left" />
+      Go back
+    </Button>
+    <Button class="btn btn-primary" type="submit">
+      Fill out your profile
+      <Icon icon="alt-arrow-right" />
+    </Button>
+  </ModalFooter>
+</form>

src/app/components/SignUpProfile.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import type {Profile} from "@welshman/util"
+  import {PROFILE, createProfile, createEvent} from "@welshman/util"
+  import {addSession, publishThunk} from "@welshman/app"
+  import Button from "@lib/components/Button.svelte"
+  import ProfileEditForm from "@app/components/ProfileEditForm.svelte"
+  import {INDEXER_RELAYS} from "@app/state"
+
+  type Props = {
+    secret: string
+    pubkey: string
+  }
+
+  const {secret, pubkey}: Props = $props()
+
+  const onsubmit = (profile: Profile) => {
+    const event = createEvent(PROFILE, createProfile(profile))
+
+    addSession({method: "nip01", secret, pubkey})
+    publishThunk({event, relays: INDEXER_RELAYS})
+  }
+</script>
+
+<ProfileEditForm hideAddress {onsubmit}>
+  {#snippet footer()}
+    <Button type="submit" class="btn btn-primary">Create Account</Button>
+  {/snippet}
+</ProfileEditForm>

src/lib/html.ts

@@ -76,3 +76,16 @@ export const createScroller = ({
 }
 
 export const isMobile = "ontouchstart" in document.documentElement
+
+export const downloadText = (filename: string, text: string) => {
+  const blob = new Blob([text], {type: "text/plain"})
+  const url = URL.createObjectURL(blob)
+  const a = document.createElement("a")
+
+  a.href = url
+  a.download = filename
+  document.body.appendChild(a)
+  a.click()
+  document.body.removeChild(a)
+  URL.revokeObjectURL(url)
+}