Add connect existing account modal (#40)

* Add connect existing account modal


Co-authored-by: Jess Martin <jessmartin@gmail.com>

src/components/auth/connect/Connect.svelte

@@ -1,8 +1,17 @@
 <script lang="ts">
+  import { createEventDispatcher } from 'svelte'
+
   import { appName } from '$lib/app-name'
+  import type { ConnectView } from '$lib/views'
+
+  const dispatch = createEventDispatcher()
+
+  const navigate = (view: ConnectView) => {
+    dispatch('navigate', { view })
+  }
 </script>
 
-<input type="checkbox" id="my-modal-5" checked class="modal-toggle" />
+<input type="checkbox" id="connect-modal" checked class="modal-toggle" />
 <div class="modal">
   <div
     class="modal-box w-80 relative text-center dark:border-slate-600 dark:border"
@@ -20,9 +29,12 @@
         <a class="btn btn-primary mb-5 w-full" href="/register">
           Create a new account
         </a>
-        <a class="btn btn-primary btn-outline w-full" href="/">
+        <button
+          class="btn btn-primary btn-outline w-full"
+          on:click={() => navigate('open-connected-device')}
+        >
           I have an existing account
-        </a>
+        </button>
       </div>
     </div>
   </div>

src/components/auth/connect/OpenConnectedDevice.svelte

@@ -0,0 +1,24 @@
+<input
+  type="checkbox"
+  id="open-connected-device-modal"
+  checked
+  class="modal-toggle"
+/>
+<div class="modal">
+  <div class="modal-box w-96 relative text-center">
+    <a href="/" class="btn btn-xs btn-circle absolute right-2 top-2">✕</a>
+    <div>
+      <h3 class="mb-5 text-2xl font-serif">Connect an existing account</h3>
+      <div>
+        <p class="text-sm mb-3">
+          To connect with an existing account, you'll need a device that's
+          already connected to that account.
+        </p>
+        <p class="text-sm">
+          On that device, click "Connect a new device" and follow the
+          instuctions.
+        </p>
+      </div>
+    </div>
+  </div>
+</div>

src/lib/views.ts

@@ -1 +1,3 @@
 export type BackupView = 'backup' | 'are-you-sure'
+
+export type ConnectView = 'connect' | 'open-connected-device'

src/routes/connect.svelte

@@ -1,5 +1,18 @@
 <script lang="ts">
   import Connect from '$components/auth/connect/Connect.svelte'
+  import OpenConnectedDevice from '$components/auth/connect/OpenConnectedDevice.svelte'
+  import type { ConnectView } from '$lib/views'
+
+  let view: ConnectView = 'connect'
+
+  const navigate = (event: CustomEvent<{ view: ConnectView }>) => {
+    console.log(event.detail.view)
+    view = event.detail.view
+  }
 </script>
 
-<Connect />
+{#if view === 'connect'}
+  <Connect on:navigate={navigate} />
+{:else if view === 'open-connected-device'}
+  <OpenConnectedDevice />
+{/if}