Add session store (#23)

* Add webnative initialization and session store

* Guard connect page and button

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">
+  {#if !$sessionStore.loading && !$sessionStore.authed}
-    <a class="btn btn-sm btn-primary normal-case" href="/connect">Connect</a>
+    <div class="flex-none">
-  </div>
+      <a class="btn btn-sm btn-primary normal-case" href="/connect">Connect</a>
+    </div>
+  {/if}
 </header>

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">

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" />

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 = await webnative.app({ useWnfs: true })
-    state = st
 
     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

src/lib/session.ts

@@ -0,0 +1,6 @@
+export type Session = {
+  username: string
+  authed: boolean
+  loading: boolean
+  error?: 'Insecure Context' | 'Unsupported Browser'
+}

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}>

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>

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
+})