From ccfd1462589c5af92a78401af9aaf5a8349a639b Mon Sep 17 00:00:00 2001
From: Brian Ginsburg <7957636+bgins@users.noreply.github.com>
Date: Tue, 30 Aug 2022 12:07:29 -0700
Subject: [PATCH] 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    | 18 +++++++++++---
 .../auth/connect/OpenConnectedDevice.svelte   | 24 +++++++++++++++++++
 src/lib/views.ts                              |  4 +++-
 src/routes/connect.svelte                     | 15 +++++++++++-
 4 files changed, 56 insertions(+), 5 deletions(-)
 create mode 100644 src/components/auth/connect/OpenConnectedDevice.svelte

diff --git a/src/components/auth/connect/Connect.svelte b/src/components/auth/connect/Connect.svelte
index 20172b1..56882ef 100644
--- a/src/components/auth/connect/Connect.svelte
+++ b/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>
diff --git a/src/components/auth/connect/OpenConnectedDevice.svelte b/src/components/auth/connect/OpenConnectedDevice.svelte
new file mode 100644
index 0000000..bb62441
--- /dev/null
+++ b/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>
diff --git a/src/lib/views.ts b/src/lib/views.ts
index 0442adf..12353af 100644
--- a/src/lib/views.ts
+++ b/src/lib/views.ts
@@ -1 +1,3 @@
-export type BackupView = 'backup' | 'are-you-sure'
\ No newline at end of file
+export type BackupView = 'backup' | 'are-you-sure'
+
+export type ConnectView = 'connect' | 'open-connected-device'
\ No newline at end of file
diff --git a/src/routes/connect.svelte b/src/routes/connect.svelte
index 9c8f69d..96458dc 100644
--- a/src/routes/connect.svelte
+++ b/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}