Work on login screen

src/app/components/InfoNip29.svelte

@@ -1,11 +1,14 @@
 <script lang="ts">
+  import Button from "@lib/components/Button.svelte"
   import Link from '@lib/components/Link.svelte'
   import Icon from '@lib/components/Icon.svelte'
   import {clip} from '@app/toast'
 </script>
 
 <div class="column gap-4">
-  <h1 class="heading">What is a relay?</h1>
+  <div class="py-2">
+    <h1 class="heading">What is a relay?</h1>
+  </div>
   <p>
     Flotilla hosts spaces on the <Link external href="https://nostr.com/">Nostr protocol</Link>.
     Nostr uses "relays" to host data, which are special-purpose servers that speak nostr's language.
@@ -19,11 +22,11 @@
   </p>
   <div class="card flex-row justify-between">
     devrelay.highlighter.com
-    <button on:click={() => clip('devrelay.highlighter.com')}>
+    <Button on:click={() => clip('devrelay.highlighter.com')}>
       <Icon icon="copy" />
-    </button>
+    </Button>
   </div>
-  <button class="btn btn-primary" on:click={() => history.back()}>
+  <Button class="btn btn-primary" on:click={() => history.back()}>
     Got it
-  </button>
+  </Button>
 </div>

src/app/components/InfoNostr.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import Link from '@lib/components/Link.svelte'
+  import Icon from '@lib/components/Icon.svelte'
+  import Button from "@lib/components/Button.svelte"
+  import {clip} from '@app/toast'
+</script>
+
+<div class="column gap-4">
+  <div class="py-2">
+    <h1 class="heading">What is Nostr?</h1>
+  </div>
+  <p>
+    <Link external href="https://nostr.com/">Nostr</Link> is way to build social apps that talk to eachother.
+    Users own their social identity instead of renting it from a tech company, and can bring it with them from
+    app to app.
+  </p>
+  <p>
+    This can be a little confusing when you're just getting started, but as long as you're using Flotilla, it
+    will work just like a normal app. When you're ready to start exploring nostr, visit your settings page to
+    learn more.
+  </p>
+  <Button class="btn btn-primary" on:click={() => history.back()}>
+    Got it
+  </Button>
+</div>

src/app/components/Landing.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import CardButton from '@lib/components/CardButton.svelte'
+  import LogIn from '@app/components/LogIn.svelte'
+  import SignUp from '@app/components/SignUp.svelte'
+  import {pushModal} from '@app/modal'
+
+  const logIn = () => pushModal(LogIn)
+
+  const signUp = () => pushModal(SignUp)
+</script>
+
+<div class="column gap-4">
+  <div class="py-2">
+    <h1 class="heading">Welcome to Flotilla!</h1>
+    <p class="text-center">The chat app built for sovereign communities.</p>
+  </div>
+  <CardButton icon="login-2" title="Log in" on:click={logIn}>
+    If you've been here before, you know the drill.
+  </CardButton>
+  <CardButton icon="add-circle" title="Create an account" on:click={signUp}>
+    Just a few questions and you'll be on your way.
+  </CardButton>
+</div>

src/app/components/LogIn.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+  import {nip19} from 'nostr-tools'
+  import {makeSecret, Nip46Broker} from '@welshman/signer'
+  import Icon from '@lib/components/Icon.svelte'
+  import Field from '@lib/components/Field.svelte'
+  import Button from '@lib/components/Button.svelte'
+  import CardButton from '@lib/components/CardButton.svelte'
+  import InfoNostr from '@app/components/LogIn.svelte'
+  import {pushModal, clearModal} from '@app/modal'
+  import {pushToast} from '@app/toast'
+  import {getProfile, getFollows, getMutes, getHandleInfo, addSession} from '@app/commands'
+
+  const back = () => history.back()
+
+  const tryLogin = async () => {
+    const secret = makeSecret()
+    const handle = await getHandleInfo(`${username}@${handler.domain}`)
+
+    if (!handle?.pubkey) {
+      return pushToast({
+        theme: "error",
+        message: "Sorry, it looks like you don't have an account yet. Try signing up instead."
+      })
+    }
+
+    const {pubkey, relays = []} = handle
+    const broker = Nip46Broker.get(pubkey, secret, handler)
+    const [profile, success] = await Promise.all([
+      getProfile(pubkey, relays),
+      getFollows(pubkey, relays),
+      getMutes(pubkey, relays),
+      broker.connect(),
+    ])
+
+    if (success) {
+      addSession({method: "nip46", pubkey, secret, handler})
+      pushToast({message: "Successfully logged in!"})
+      clearModal()
+    } else {
+      pushToast({
+        theme: "error",
+        message: "Something went wrong! Please try again."
+      })
+    }
+  }
+
+  const login = async () => {
+    loading = true
+
+    try {
+      await tryLogin()
+    } 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={login}>
+  <div class="py-2">
+    <h1 class="heading">Log in with Nostr</h1>
+    <p class="text-center">
+      Flotilla is built using the
+      <Button class="link" on:click={() => pushModal(InfoNostr)}>
+        nostr protocol
+      </Button>, which allows you to own your social identity.
+    </p>
+  </div>
+  <Field>
+    <div class="flex gap-2 items-center" slot="input">
+      <label class="input input-bordered w-full flex items-center gap-2">
+        <Icon icon="user-rounded" />
+        <input bind:value={username} class="grow" type="text" placeholder="username" />
+      </label>
+      @{handler.domain}
+    </div>
+  </Field>
+  <div class="flex flex-col gap-2">
+    <Button type="submit" class="btn btn-primary" disabled={loading}>
+      <span class="loading loading-spinner opacity-0" class:opacity-100={loading} />
+      Log In
+      <Icon icon="alt-arrow-right" />
+    </Button>
+    <div class="text-sm">
+      Need an account?
+      <Button class="link" on:click={back}>
+        Register
+      </Button>
+    </div>
+  </div>
+</form>

src/app/components/PrimaryNav.svelte

@@ -10,32 +10,32 @@
   import Icon from "@lib/components/Icon.svelte"
   import PrimaryNavItem from "@lib/components/PrimaryNavItem.svelte"
   import SpaceAdd from '@app/components/SpaceAdd.svelte'
-  import {getGroupName, getGroupPicture, makeGroupId} from "@app/domain"
-  import {userGroupRelaysByNom, groupsById} from "@app/state"
+  import {makeGroupId} from "@app/domain"
+  import {session} from "@app/base"
+  import {userGroupRelaysByNom, groupsById, deriveProfile} from "@app/state"
   import {pushModal} from "@app/modal"
 
   export const addSpace = () => pushModal(SpaceAdd)
 
   export const browseSpaces = () => goto("/browse")
+
+  const profile = deriveProfile($session?.pubkey)
 </script>
 
 <div class="relative w-14 bg-base-100">
   <div class="absolute -top-[44px] z-nav-active ml-2 h-[144px] w-12 bg-base-300" />
   <div class="flex h-full flex-col justify-between">
     <div>
-      <PrimaryNavItem title="Hodlbod">
+      <PrimaryNavItem title={$profile?.name}>
         <div class="w-10 rounded-full border border-solid border-base-300">
-          <img
-            alt=""
-            src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
+          <img alt="" src={$profile?.picture} />
         </div>
       </PrimaryNavItem>
       {#each $userGroupRelaysByNom.entries() as [nom, relays] (nom)}
-        {@const event = $groupsById.get(makeGroupId(relays[0], nom))}
-        {@const name = getGroupName(event)}
-        <PrimaryNavItem title={name}>
+        {@const group = $groupsById.get(makeGroupId(relays[0], nom))}
+        <PrimaryNavItem title={group.name}>
           <div class="w-10 rounded-full border border-solid border-base-300">
-            <img alt={name} src={getGroupPicture(event)} />
+            <img alt={group.name} src={group.picture} />
           </div>
         </PrimaryNavItem>
       {/each}

src/app/components/SignUp.svelte

@@ -0,0 +1 @@
+

src/app/components/SpaceAdd.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Button from "@lib/components/Button.svelte"
   import CardButton from '@lib/components/CardButton.svelte'
   import SpaceCreate from '@app/components/SpaceCreate.svelte'
   import SpaceJoin from '@app/components/SpaceJoin.svelte'
@@ -10,15 +11,17 @@
 </script>
 
 <div class="column gap-4">
-  <h1 class="heading">Add a Space</h1>
-  <p class="text-center">Spaces are places where communities come together to work, play, and hang out.</p>
+  <div class="py-2">
+    <h1 class="heading">Add a Space</h1>
+    <p class="text-center">Spaces are places where communities come together to work, play, and hang out.</p>
+  </div>
   <CardButton icon="add-circle" title="Get started" on:click={startCreate}>
     Just a few questions and you'll be on your way.
   </CardButton>
   <div class="card column gap-4">
     <h2 class="subheading">Have an invite?</h2>
-    <button class="btn btn-primary" on:click={startJoin}>
+    <Button class="btn btn-primary" on:click={startJoin}>
       Join a Space
-    </button>
+    </Button>
   </div>
 </div>

src/app/components/SpaceCreate.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import InputProfilePicture from '@lib/components/InputProfilePicture.svelte'
+  import Button from "@lib/components/Button.svelte"
   import Field from '@lib/components/Field.svelte'
   import Icon from '@lib/components/Icon.svelte'
   import InfoNip29 from '@app/components/InfoNip29.svelte'
@@ -10,18 +11,18 @@
 
   const next = () => pushModal(SpaceCreateFinish)
 
-  const showNip29Info = () => pushModal(InfoNip29)
-
   let file: File
   let name = ""
   let relay = ""
 </script>
 
-<div class="column gap-4">
-  <h1 class="heading">Customize your Space</h1>
-  <p class="text-center">
-    Give people a few details to go on. You can always change this later.
-  </p>
+<form class="column gap-4" on:submit|preventDefault={next}>
+  <div class="py-2">
+    <h1 class="heading">Customize your Space</h1>
+    <p class="text-center">
+      Give people a few details to go on. You can always change this later.
+    </p>
+  </div>
   <div class="flex justify-center py-2">
     <InputProfilePicture bind:file />
   </div>
@@ -40,19 +41,19 @@
     </label>
     <p slot="info">
       This should be a NIP-29 compatible nostr relay where you'd like to host your space.
-      <button class="text-primary underline cursor-pointer" on:click={showNip29Info}>
+      <Button class="link" on:click={() => pushModal(InfoNip29)}>
         More information
-      </button>
+      </Button>
     </p>
   </Field>
   <div class="flex flex-row justify-between items-center gap-4">
-    <button class="btn btn-link" on:click={back}>
+    <Button class="btn btn-link" on:click={back}>
       <Icon icon="alt-arrow-left" />
       Go back
-    </button>
-    <button class="btn btn-primary" on:click={next}>
+    </Button>
+    <Button type="submit" class="btn btn-primary">
       Next
       <Icon icon="alt-arrow-right" class="!bg-base-300" />
-    </button>
+    </Button>
   </div>
-</div>
+</form>

src/app/components/SpaceJoin.svelte

@@ -1,45 +1,85 @@
 <script lang="ts">
   import {goto} from '$app/navigation'
   import CardButton from '@lib/components/CardButton.svelte'
+  import Button from "@lib/components/Button.svelte"
   import Field from '@lib/components/Field.svelte'
   import Icon from '@lib/components/Icon.svelte'
   import SpaceCreateFinish from '@app/components/SpaceCreateFinish.svelte'
+  import {splitGroupId, GROUP_DELIMITER} from '@app/domain'
+  import {getRelayInfo, getGroup} from '@app/commands'
   import {pushModal} from '@app/modal'
+  import {pushToast} from '@app/toast'
+  import {relayInfo} from '@app/state'
 
   const back = () => history.back()
 
   const browse = () => goto("/browse", {state: {}})
 
-  const join = () => {}
+  const tryJoin = async () => {
+    const [url, nom] = splitGroupId(id)
 
-  let link = ""
+    const info = await getRelayInfo(url)
 
-  $: linkIsValid = Boolean(link.match(/.+\..+'.+/))
+    if (!info) {
+      return pushToast({
+        theme: "error",
+        message: "Sorry, we weren't able to find that relay."
+      })
+    }
+
+    if (!info.supported_nips?.includes(29)) {
+      return pushToast({
+        theme: "error",
+        message: "Sorry, it looks like that relay doesn't support nostr groups."
+      })
+    }
+
+    const group = await getGroup(id)
+    console.log(info, group)
+  }
+
+  const join = async () => {
+    loading = true
+
+    try {
+      await tryJoin()
+    } finally {
+      loading = false
+    }
+  }
+
+  let id = "wss://devrelay.highlighter.com'group628195"
+  let loading = false
+
+  $: linkIsValid = Boolean(id.match(/.+\..+'.+/))
 </script>
 
-<div class="column gap-4">
-  <h1 class="heading">Join a Space</h1>
-  <p class="text-center">
-    Enter an invite link below to join an existing space.
-  </p>
+<form class="column gap-4" on:submit|preventDefault={join}>
+  <div class="py-2">
+    <h1 class="heading">Join a Space</h1>
+    <p class="text-center">
+      Enter an invite link below to join an existing space.
+    </p>
+  </div>
   <Field>
     <p slot="label">Invite Link*</p>
     <label class="input input-bordered w-full flex items-center gap-2" slot="input">
       <Icon icon="link-round" />
-      <input bind:value={link} class="grow" type="text" />
+      <input bind:value={id} class="grow" type="text" />
     </label>
   </Field>
   <CardButton icon="compass" title="Don't have an invite?" on:click={browse}>
     Browse other spaces on the discover page.
   </CardButton>
   <div class="flex flex-row justify-between items-center gap-4">
-    <button class="btn btn-link" on:click={back}>
+    <Button class="btn btn-link" on:click={back}>
       <Icon icon="alt-arrow-left" />
       Go back
-    </button>
-    <button class="btn btn-primary" on:click={join} disabled={!linkIsValid}>
+    </Button>
+    <Button type="submit" class="btn btn-primary" disabled={!linkIsValid || loading}>
+      <span class="loading loading-spinner opacity-0" class:opacity-100={loading} />
       Join Space
-      <Icon icon="alt-arrow-right" class="!bg-base-300" />
-    </button>
+      <Icon icon="alt-arrow-right" />
+    </Button>
   </div>
-</div>
+</form>

src/app/components/Toast.svelte

@@ -6,7 +6,7 @@
 {#if $toast}
   {#key $toast.id}
     <div transition:fly class="toast z-toast">
-      <div role="alert" class="alert flex justify-center">
+      <div role="alert" class="alert flex justify-center" class:alert-error={$toast.theme === "error"}>
         {$toast.message}
       </div>
     </div>