Refactor login, pass bunker to alerts

src/app/components/AlertAdd.svelte

@@ -3,6 +3,7 @@
   import {randomInt} from "@welshman/lib"
   import {displayRelayUrl, THREAD, MESSAGE, EVENT_TIME, COMMENT} from "@welshman/util"
   import type {Filter} from "@welshman/util"
+  import type {Nip46ResponseWithResult} from "@welshman/signer"
   import {pubkey} from "@welshman/app"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -10,11 +11,13 @@
   import Spinner from "@lib/components/Spinner.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
+  import InfoBunker from "@app/components/InfoBunker.svelte"
+  import BunkerConnect, {BunkerConnectController} from "@app/components/BunkerConnect.svelte"
   import {GENERAL, getMembershipUrls, getMembershipRoomsByUrl, userMembership} from "@app/state"
   import {loadAlertStatuses} from "@app/requests"
   import {publishAlert} from "@app/commands"
   import {pushToast} from "@app/toast"
-
+  import {pushModal} from "@app/modal"
   const timezone = new Date()
     .toString()
     .match(/GMT[^\s]+/)![0]
@@ -29,12 +32,36 @@
   let cron = WEEKLY
   let email = ""
   let relay = ""
+  let bunker = ""
+  let secret = ""
   let notifyThreads = true
   let notifyCalendar = true
   let notifyChat = false
+  let showBunker = false
 
   const back = () => history.back()
 
+  const controller = new BunkerConnectController({
+    onNostrConnect: (response: Nip46ResponseWithResult) => {
+      bunker = controller.broker.getBunkerUrl()
+      secret = controller.broker.params.clientSecret
+      showBunker = false
+    },
+  })
+
+  const connectBunker = () => {
+    showBunker = true
+  }
+
+  const hideBunker = () => {
+    showBunker = false
+  }
+
+  const clearBunker = () => {
+    bunker = ""
+    secret = ""
+  }
+
   const submit = async () => {
     if (!email.includes("@")) {
       return pushToast({
@@ -79,7 +106,7 @@
     loading = true
 
     try {
-      const thunk = await publishAlert({cron, email, relay, filters})
+      const thunk = await publishAlert({cron, email, relay, filters, bunker, secret})
 
       await thunk.result
       await loadAlertStatuses($pubkey!)
@@ -98,67 +125,100 @@
       Add an Alert
     {/snippet}
   </ModalHeader>
-  <FieldInline>
-    {#snippet label()}
-      <p>Email Address*</p>
-    {/snippet}
-    {#snippet input()}
-      <label class="input input-bordered flex w-full items-center gap-2">
-        <input placeholder="email@example.com" bind:value={email} />
-      </label>
-    {/snippet}
-  </FieldInline>
-  <FieldInline>
-    {#snippet label()}
-      <p>Frequency*</p>
-    {/snippet}
-    {#snippet input()}
-      <select bind:value={cron} class="select select-bordered">
-        <option value={WEEKLY}>Weekly</option>
-        <option value={DAILY}>Daily</option>
-      </select>
-    {/snippet}
-  </FieldInline>
-  <FieldInline>
-    {#snippet label()}
-      <p>Space*</p>
-    {/snippet}
-    {#snippet input()}
-      <select bind:value={relay} class="select select-bordered">
-        <option value="" disabled selected>Choose a space URL</option>
-        {#each getMembershipUrls($userMembership) as url (url)}
-          <option value={url}>{displayRelayUrl(url)}</option>
-        {/each}
-      </select>
-    {/snippet}
-  </FieldInline>
-  <FieldInline>
-    {#snippet label()}
-      <p>Notifications*</p>
-    {/snippet}
-    {#snippet input()}
-      <div class="flex items-center justify-end gap-4">
-        <span class="flex gap-3">
-          <input type="checkbox" class="checkbox" bind:checked={notifyThreads} />
-          Threads
-        </span>
-        <span class="flex gap-3">
-          <input type="checkbox" class="checkbox" bind:checked={notifyCalendar} />
-          Calendar
-        </span>
-        <span class="flex gap-3">
-          <input type="checkbox" class="checkbox" bind:checked={notifyChat} />
-          Chat
+  {#if showBunker}
+    <div class="card2 flex flex-col items-center gap-4 bg-base-300">
+      <p>Scan using a nostr signer, or click to copy.</p>
+      <BunkerConnect {controller} />
+      <Button class="btn btn-neutral btn-sm" onclick={hideBunker}>Cancel</Button>
+    </div>
+  {:else}
+    <FieldInline>
+      {#snippet label()}
+        <p>Email Address*</p>
+      {/snippet}
+      {#snippet input()}
+        <label class="input input-bordered flex w-full items-center gap-2">
+          <input placeholder="email@example.com" bind:value={email} />
+        </label>
+      {/snippet}
+    </FieldInline>
+    <FieldInline>
+      {#snippet label()}
+        <p>Frequency*</p>
+      {/snippet}
+      {#snippet input()}
+        <select bind:value={cron} class="select select-bordered">
+          <option value={WEEKLY}>Weekly</option>
+          <option value={DAILY}>Daily</option>
+        </select>
+      {/snippet}
+    </FieldInline>
+    <FieldInline>
+      {#snippet label()}
+        <p>Space*</p>
+      {/snippet}
+      {#snippet input()}
+        <select bind:value={relay} class="select select-bordered">
+          <option value="" disabled selected>Choose a space URL</option>
+          {#each getMembershipUrls($userMembership) as url (url)}
+            <option value={url}>{displayRelayUrl(url)}</option>
+          {/each}
+        </select>
+      {/snippet}
+    </FieldInline>
+    <FieldInline>
+      {#snippet label()}
+        <p>Notifications*</p>
+      {/snippet}
+      {#snippet input()}
+        <div class="flex items-center justify-end gap-4">
+          <span class="flex gap-3">
+            <input type="checkbox" class="checkbox" bind:checked={notifyThreads} />
+            Threads
+          </span>
+          <span class="flex gap-3">
+            <input type="checkbox" class="checkbox" bind:checked={notifyCalendar} />
+            Calendar
+          </span>
+          <span class="flex gap-3">
+            <input type="checkbox" class="checkbox" bind:checked={notifyChat} />
+            Chat
+          </span>
+        </div>
+      {/snippet}
+    </FieldInline>
+    <div class="card2 flex flex-col gap-3 bg-base-300">
+      <div class="flex items-center justify-between">
+        <strong>Connect a Bunker</strong>
+        <span class="flex items-center gap-2 text-sm" class:text-primary={bunker}>
+          {#if bunker}
+            <Icon icon="check-circle" size={5} />
+            Connected
+          {:else}
+            <Icon icon="close-circle" size={5} />
+            Not Connected
+          {/if}
         </span>
       </div>
-    {/snippet}
-  </FieldInline>
+      <p class="text-sm">
+        Required for receiving alerts about spaces with access controls. You can get one from your
+        <Button class="text-primary" onclick={() => pushModal(InfoBunker)}>remote signer app</Button
+        >.
+      </p>
+      {#if bunker}
+        <Button class="btn btn-neutral btn-sm flex-grow" onclick={clearBunker}>Disconnect</Button>
+      {:else}
+        <Button class="btn btn-primary btn-sm w-full flex-grow" onclick={connectBunker}
+          >Connect</Button>
+      {/if}
+    </div>
+  {/if}
   <ModalFooter>
     <Button class="btn btn-link" onclick={back}>
       <Icon icon="alt-arrow-left" />
       Go back
     </Button>
-    <Button type="submit" class="btn btn-primary" disabled={loading}>
+    <Button type="submit" class="btn btn-primary" disabled={loading || showBunker}>
       <Spinner {loading}>Confirm</Spinner>
       <Icon icon="alt-arrow-right" />
     </Button>