From 72c56c1efe76745761039affc851d81c5653410a Mon Sep 17 00:00:00 2001
From: Brian Ginsburg <7957636+bgins@users.noreply.github.com>
Date: Thu, 28 Jul 2022 15:48:53 -0700
Subject: [PATCH] Add session store (#23)

* Add webnative initialization and session store

* Guard connect page and button
---
 src/components/Header.svelte        | 19 +++++++++++------
 src/components/auth/Connect.svelte  | 20 ++++++++++++++++++
 src/components/auth/Register.svelte | 32 +++++++++++++++++++++++++----
 src/lib/common/webnative.ts         | 31 ++++++++++++++++++++--------
 src/lib/session.ts                  |  6 ++++++
 src/routes/__layout.svelte          | 15 +++++++++++++-
 src/routes/index.svelte             |  7 -------
 src/stores.ts                       |  9 +++++++-
 8 files changed, 112 insertions(+), 27 deletions(-)
 create mode 100644 src/lib/session.ts

diff --git a/src/components/Header.svelte b/src/components/Header.svelte
index 4bb39ec..40ee3e2 100644
--- a/src/components/Header.svelte
+++ b/src/components/Header.svelte
@@ -1,3 +1,7 @@
+<script lang="ts">
+  import { sessionStore } from '../stores'
+</script>
+
 <header class="navbar bg-base-100 pt-0">
   <div class="flex-1">
     <button class="btn btn-sm btn-square btn-ghost">
@@ -6,17 +10,20 @@
         fill="none"
         viewBox="0 0 24 24"
         class="inline-block w-7 h-7 stroke-current"
-        ><path
+      >
+        <path
           stroke-linecap="round"
           stroke-linejoin="round"
           stroke-width="2"
           d="M4 6h16M4 12h16M4 18h16"
-        /></svg
-      >
+        />
+      </svg>
     </button>
   </div>
 
-  <div class="flex-none">
-    <a class="btn btn-sm btn-primary normal-case" href="/connect">Connect</a>
-  </div>
+  {#if !$sessionStore.loading && !$sessionStore.authed}
+    <div class="flex-none">
+      <a class="btn btn-sm btn-primary normal-case" href="/connect">Connect</a>
+    </div>
+  {/if}
 </header>
diff --git a/src/components/auth/Connect.svelte b/src/components/auth/Connect.svelte
index 617d7ef..bb36092 100644
--- a/src/components/auth/Connect.svelte
+++ b/src/components/auth/Connect.svelte
@@ -1,3 +1,23 @@
+<script lang="ts">
+  import { goto } from '$app/navigation'
+  import { onDestroy, onMount } from 'svelte'
+
+  import { sessionStore } from '../../stores'
+  import type { Session } from '$lib/session'
+
+  let unsubscribeSessionStore: () => void = () => {}
+
+  onMount(() => {
+    unsubscribeSessionStore = sessionStore.subscribe((session: Session) => {
+      if (session.authed) {
+        goto('/')
+      }
+    })
+  })
+
+  onDestroy(unsubscribeSessionStore)
+</script>
+
 <input type="checkbox" id="my-modal-5" checked class="modal-toggle" />
 <div class="modal">
   <div class="modal-box w-80 relative text-center">
diff --git a/src/components/auth/Register.svelte b/src/components/auth/Register.svelte
index 3453f2d..af807b0 100644
--- a/src/components/auth/Register.svelte
+++ b/src/components/auth/Register.svelte
@@ -1,10 +1,14 @@
 <script lang="ts">
-  import * as webnative from 'webnative'
+  import { goto } from '$app/navigation'
+  import { onDestroy, onMount } from 'svelte'
+
   import {
     isUsernameValid,
     isUsernameAvailable,
     register
   } from '$lib/common/webnative'
+  import { sessionStore } from '../../stores'
+  import type { Session } from '$lib/session'
 
   let username: string = ''
   let usernameValid = true
@@ -12,14 +16,23 @@
   let registrationSuccess = true
   let checkingUsername = false
 
+  let unsubscribeSessionStore: () => void = () => {}
+
   let checkIcon = `<svg width="15" height="10" viewBox="0 0 15 10" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M14.2071 0.292893C14.5976 0.683417 14.5976 1.31658 14.2071 1.70711L6.20711 9.70711C5.81658 10.0976 5.18342 10.0976 4.79289 9.70711L0.792893 5.70711C0.402369 5.31658 0.402369 4.68342 0.792893 4.29289C1.18342 3.90237 1.81658 3.90237 2.20711 4.29289L5.5 7.58579L12.7929 0.292893C13.1834 -0.0976311 13.8166 -0.0976311 14.2071 0.292893Z" fill="#16A34A"/> </svg> `
   let xIcon = `<svg width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M0.792893 0.292893C1.18342 -0.0976311 1.81658 -0.0976311 2.20711 0.292893L6.5 4.58579L10.7929 0.292893C11.1834 -0.0976311 11.8166 -0.0976311 12.2071 0.292893C12.5976 0.683417 12.5976 1.31658 12.2071 1.70711L7.91421 6L12.2071 10.2929C12.5976 10.6834 12.5976 11.3166 12.2071 11.7071C11.8166 12.0976 11.1834 12.0976 10.7929 11.7071L6.5 7.41421L2.20711 11.7071C1.81658 12.0976 1.18342 12.0976 0.792893 11.7071C0.402369 11.3166 0.402369 10.6834 0.792893 10.2929L5.08579 6L0.792893 1.70711C0.402369 1.31658 0.402369 0.683417 0.792893 0.292893Z" fill="#DC2626"/> </svg>`
 
+  onMount(() => {
+    unsubscribeSessionStore = sessionStore.subscribe((session: Session) => {
+      if (session.authed) {
+        goto('/')
+      }
+    })
+  })
+
   const checkUsername = async (event: Event) => {
     checkingUsername = true
     const { value } = event.target as HTMLInputElement
     username = value
-    console.log(username)
 
     usernameValid = await isUsernameValid(username)
 
@@ -30,12 +43,23 @@
     checkingUsername = false
   }
 
-  const registerUser = async (event: Event) => {
+  const registerUser = async () => {
     registrationSuccess = await register(username)
+
     if (registrationSuccess) {
-      window.location.href = '/linkDevice'
+      sessionStore.update(session => ({
+        ...session,
+        username,
+        authed: true
+      }))
+
+      console.log('session after registration', $sessionStore)
+
+      goto('/linkDevice')
     }
   }
+
+  onDestroy(unsubscribeSessionStore)
 </script>
 
 <input type="checkbox" id="my-modal-5" checked class="modal-toggle" />
diff --git a/src/lib/common/webnative.ts b/src/lib/common/webnative.ts
index 87e7339..6ba6f6c 100644
--- a/src/lib/common/webnative.ts
+++ b/src/lib/common/webnative.ts
@@ -1,8 +1,9 @@
 import * as webnative from 'webnative'
-
 // import type FileSystem from 'webnative/fs/index'
 import { setup } from 'webnative'
+
 import { asyncDebounce } from '$lib/common/utils'
+import { sessionStore } from '../../stores'
 
 // runfission.net = staging
 setup.endpoints({ api: 'https://runfission.net', user: 'fissionuser.net' })
@@ -14,16 +15,23 @@ setup.debug({ enabled: true })
 
 export const initialize = async (): Promise<void> => {
   try {
-    const st = await webnative.app({ useWnfs: true })
-    state = st
+    state = await webnative.app({ useWnfs: true })
 
     switch (state.scenario) {
       case webnative.AppScenario.NotAuthed:
-        console.log('Not logged in')
+        sessionStore.set({
+          username: '',
+          authed: false,
+          loading: false
+        })
         break
 
       case webnative.AppScenario.Authed:
-        console.log('Logged in')
+        sessionStore.set({
+          username: state.username,
+          authed: state.authenticated,
+          loading: false
+        })
         break
 
       default:
@@ -32,11 +40,19 @@ export const initialize = async (): Promise<void> => {
   } catch (error) {
     switch (error) {
       case webnative.InitialisationError.InsecureContext:
-        console.log('Insecure context')
+        sessionStore.update(session => ({
+          ...session,
+          loading: false,
+          error: 'Insecure Context'
+        }))
         break
 
       case webnative.InitialisationError.UnsupportedBrowser:
-        console.log('Unsupported browser')
+        sessionStore.update(session => ({
+          ...session,
+          loading: false,
+          error: 'Unsupported Browser'
+        }))
         break
     }
   }
@@ -58,7 +74,6 @@ export const isUsernameAvailable = async (
 }
 
 export const register = async (username: string): Promise<boolean> => {
-  await initialize()
   const { success } = await webnative.account.register({ username })
 
   return success
diff --git a/src/lib/session.ts b/src/lib/session.ts
new file mode 100644
index 0000000..fccfd38
--- /dev/null
+++ b/src/lib/session.ts
@@ -0,0 +1,6 @@
+export type Session = {
+  username: string
+  authed: boolean
+  loading: boolean
+  error?: 'Insecure Context' | 'Unsupported Browser'
+}
\ No newline at end of file
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index 02d83e8..7bba9ba 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -1,12 +1,25 @@
 <script lang="ts">
+  import { get } from 'svelte/store'
+
   import '../global.css'
-  import { theme } from '../stores'
+  import { initialize } from '$lib/common/webnative'
+  import { sessionStore, theme } from '../stores'
   import { storeTheme } from '$lib/theme'
   import Header from '$components/Header.svelte'
 
   theme.subscribe(val => {
     storeTheme(val)
   })
+
+  const init = async () => {
+    await initialize()
+
+    // TODO: Remove this debugging statement
+    const session = get(sessionStore)
+    console.log('session at init', session)
+  }
+
+  init()
 </script>
 
 <div data-theme={$theme}>
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 4864330..c89866f 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -1,11 +1,4 @@
 <script lang="ts">
-  import { initialize } from '$lib/common/webnative'
-
-  const init = async () => {
-    await initialize()
-  }
-
-  init()
 </script>
 
 <h1 class="text-center">Application Interface</h1>
diff --git a/src/stores.ts b/src/stores.ts
index 8e8333d..60af46c 100644
--- a/src/stores.ts
+++ b/src/stores.ts
@@ -1,6 +1,13 @@
 import { writable } from 'svelte/store'
-import type { Writable } from 'svelte/store'
 import { loadTheme } from '$lib/theme'
+import type { Session } from '$lib/session'
 import type { Theme } from '$lib/theme'
+import type { Writable } from 'svelte/store'
 
 export const theme: Writable<Theme> = writable(loadTheme())
+
+export const sessionStore: Writable<Session> = writable({
+  username: '',
+  authed: false,
+  loading: true
+})
\ No newline at end of file