Merge pull request #22 from fission-suite/register-user

Get registration working
2022-07-27 16:32:41 -04:00 · 2022-07-27 16:32:41 -04:00 · 91f2122cd9
parent fc7feb1c41 f3cafb40be
commit 91f2122cd9
7 changed files with 108 additions and 217 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -8,7 +8,7 @@
      "name": "svelte-elemetary-template",
      "version": "0.1.0",
      "dependencies": {
-        "webnative": "0.33.0-alpha-1"
+        "webnative": "0.33.0-alpha-3"
      },
      "devDependencies": {
        "@sveltejs/adapter-static": "1.0.0-next.36",
@ -44,9 +44,6 @@
        "@babel/highlight": "^7.10.4"
      }
    },
-    "node_modules/@babel/highlight": {
-      "dev": true
-    },
    "node_modules/@cspotcode/source-map-support": {
      "version": "0.8.1",
      "integrity": "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==",
@ -1699,18 +1696,6 @@
        "esbuild-windows-arm64": "0.14.49"
      }
    },
-    "node_modules/esbuild-android-64": {
-      "dev": true,
-      "optional": true
-    },
-    "node_modules/esbuild-android-arm64": {
-      "dev": true,
-      "optional": true
-    },
-    "node_modules/esbuild-darwin-64": {
-      "dev": true,
-      "optional": true
-    },
    "node_modules/esbuild-darwin-arm64": {
      "version": "0.14.49",
      "integrity": "sha512-XMaqDxO846srnGlUSJnwbijV29MTKUATmOLyQSfswbK/2X5Uv28M9tTLUJcKKxzoo9lnkYPsx2o8EJcTYwCs/A==",
@ -1726,70 +1711,6 @@
        "node": ">=12"
      }
    },
-    "node_modules/esbuild-freebsd-64": {
-      "dev": true,
-      "optional": true
-    },
-    "node_modules/esbuild-freebsd-arm64": {
-      "dev": true,
-      "optional": true
-    },
-    "node_modules/esbuild-linux-32": {
-      "dev": true,
-      "optional": true
-    },
-    "node_modules/esbuild-linux-64": {
-      "dev": true,
-      "optional": true
-    },
-    "node_modules/esbuild-linux-arm": {
-      "dev": true,
-      "optional": true
-    },
-    "node_modules/esbuild-linux-arm64": {
-      "dev": true,
-      "optional": true
-    },
-    "node_modules/esbuild-linux-mips64le": {
-      "dev": true,
-      "optional": true
-    },
-    "node_modules/esbuild-linux-ppc64le": {
-      "dev": true,
-      "optional": true
-    },
-    "node_modules/esbuild-linux-riscv64": {
-      "dev": true,
-      "optional": true
-    },
-    "node_modules/esbuild-linux-s390x": {
-      "dev": true,
-      "optional": true
-    },
-    "node_modules/esbuild-netbsd-64": {
-      "dev": true,
-      "optional": true
-    },
-    "node_modules/esbuild-openbsd-64": {
-      "dev": true,
-      "optional": true
-    },
-    "node_modules/esbuild-sunos-64": {
-      "dev": true,
-      "optional": true
-    },
-    "node_modules/esbuild-windows-32": {
-      "dev": true,
-      "optional": true
-    },
-    "node_modules/esbuild-windows-64": {
-      "dev": true,
-      "optional": true
-    },
-    "node_modules/esbuild-windows-arm64": {
-      "dev": true,
-      "optional": true
-    },
    "node_modules/escalade": {
      "version": "3.1.1",
      "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
@ -4758,9 +4679,9 @@
      }
    },
    "node_modules/webnative": {
-      "version": "0.33.0-alpha-1",
-      "resolved": "https://registry.npmjs.org/webnative/-/webnative-0.33.0-alpha-1.tgz",
-      "integrity": "sha512-g5xg5gkDScTre5IrhcJgWhEgYlI/pri2OTxZxLq832cqgu42gJ9Jzs7B+hgSEDHWB+ROQWCe+RJ9H0dlhTKORw==",
+      "version": "0.33.0-alpha-3",
+      "resolved": "https://registry.npmjs.org/webnative/-/webnative-0.33.0-alpha-3.tgz",
+      "integrity": "sha512-fx7ZNk1eKdt88RHG90fKg99xhBKsPIizOEgggr0HYrbM9G9O4vXGabt48QQF6K9pTuZmrrSW/RyqR/bxCHRc6A==",
      "dependencies": {
        "@ipld/dag-cbor": "^7.0.0",
        "@ipld/dag-pb": "^2.1.15",
@ -4955,9 +4876,6 @@
        "@babel/highlight": "^7.10.4"
      }
    },
-    "@babel/highlight": {
-      "dev": true
-    },
    "@cspotcode/source-map-support": {
      "version": "0.8.1",
      "integrity": "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==",
@ -6126,88 +6044,12 @@
        "esbuild-windows-arm64": "0.14.49"
      }
    },
-    "esbuild-android-64": {
-      "dev": true,
-      "optional": true
-    },
-    "esbuild-android-arm64": {
-      "dev": true,
-      "optional": true
-    },
-    "esbuild-darwin-64": {
-      "dev": true,
-      "optional": true
-    },
    "esbuild-darwin-arm64": {
      "version": "0.14.49",
      "integrity": "sha512-XMaqDxO846srnGlUSJnwbijV29MTKUATmOLyQSfswbK/2X5Uv28M9tTLUJcKKxzoo9lnkYPsx2o8EJcTYwCs/A==",
      "dev": true,
      "optional": true
    },
-    "esbuild-freebsd-64": {
-      "dev": true,
-      "optional": true
-    },
-    "esbuild-freebsd-arm64": {
-      "dev": true,
-      "optional": true
-    },
-    "esbuild-linux-32": {
-      "dev": true,
-      "optional": true
-    },
-    "esbuild-linux-64": {
-      "dev": true,
-      "optional": true
-    },
-    "esbuild-linux-arm": {
-      "dev": true,
-      "optional": true
-    },
-    "esbuild-linux-arm64": {
-      "dev": true,
-      "optional": true
-    },
-    "esbuild-linux-mips64le": {
-      "dev": true,
-      "optional": true
-    },
-    "esbuild-linux-ppc64le": {
-      "dev": true,
-      "optional": true
-    },
-    "esbuild-linux-riscv64": {
-      "dev": true,
-      "optional": true
-    },
-    "esbuild-linux-s390x": {
-      "dev": true,
-      "optional": true
-    },
-    "esbuild-netbsd-64": {
-      "dev": true,
-      "optional": true
-    },
-    "esbuild-openbsd-64": {
-      "dev": true,
-      "optional": true
-    },
-    "esbuild-sunos-64": {
-      "dev": true,
-      "optional": true
-    },
-    "esbuild-windows-32": {
-      "dev": true,
-      "optional": true
-    },
-    "esbuild-windows-64": {
-      "dev": true,
-      "optional": true
-    },
-    "esbuild-windows-arm64": {
-      "dev": true,
-      "optional": true
-    },
    "escalade": {
      "version": "3.1.1",
      "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
@ -8227,9 +8069,9 @@
      "peer": true
    },
    "webnative": {
-      "version": "0.33.0-alpha-1",
-      "resolved": "https://registry.npmjs.org/webnative/-/webnative-0.33.0-alpha-1.tgz",
-      "integrity": "sha512-g5xg5gkDScTre5IrhcJgWhEgYlI/pri2OTxZxLq832cqgu42gJ9Jzs7B+hgSEDHWB+ROQWCe+RJ9H0dlhTKORw==",
+      "version": "0.33.0-alpha-3",
+      "resolved": "https://registry.npmjs.org/webnative/-/webnative-0.33.0-alpha-3.tgz",
+      "integrity": "sha512-fx7ZNk1eKdt88RHG90fKg99xhBKsPIizOEgggr0HYrbM9G9O4vXGabt48QQF6K9pTuZmrrSW/RyqR/bxCHRc6A==",
      "requires": {
        "@ipld/dag-cbor": "^7.0.0",
        "@ipld/dag-pb": "^2.1.15",
--- a/package.json
+++ b/package.json
@ -50,6 +50,6 @@
    ]
  },
  "dependencies": {
-    "webnative": "0.33.0-alpha-1"
+    "webnative": "0.33.0-alpha-3"
  }
 }
--- a/src/components/auth/LinkDevice.svelte
+++ b/src/components/auth/LinkDevice.svelte
@ -0,0 +1 @@
+<h1>Link Device</h1>
--- a/src/components/auth/Register.svelte
+++ b/src/components/auth/Register.svelte
@ -1,12 +1,22 @@
 <script lang="ts">
  import * as webnative from 'webnative'
-  import { isUsernameValid, isUsernameAvailable } from '$lib/common/webnative'
+  import {
+    isUsernameValid,
+    isUsernameAvailable,
+    register
+  } from '$lib/common/webnative'

  let username: string = ''
  let usernameValid = true
  let usernameAvailable = true
+  let registrationSuccess = true
+  let checkingUsername = false
+
+  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>`

  const checkUsername = async (event: Event) => {
+    checkingUsername = true
    const { value } = event.target as HTMLInputElement
    username = value
    console.log(username)
@ -17,6 +27,14 @@
      usernameAvailable = await isUsernameAvailable(username)
      console.log(username, ' is available: ', usernameAvailable)
    }
+    checkingUsername = false
+  }
+
+  const registerUser = async (event: Event) => {
+    registrationSuccess = await register(username)
+    if (registrationSuccess) {
+      window.location.href = '/linkDevice'
+    }
  }
 </script>

@ -27,17 +45,35 @@

    <div>
      <h3 class="mb-7 text-xl font-serif">Choose a username</h3>
-      <input
-        id="registration"
-        type="text"
-        placeholder="Type here"
-        class="input input-bordered w-full block"
-        class:input-error={username.length !== 0 &&
-          (!usernameValid || !usernameAvailable)}
-        on:input={checkUsername}
-      />
+      <div class="relative">
+        <input
+          id="registration"
+          type="text"
+          placeholder="Type here"
+          class="input input-bordered w-full block"
+          class:input-error={username.length !== 0 &&
+            (!usernameValid || !usernameAvailable)}
+          on:input={checkUsername}
+        />
+        {#if checkingUsername}
+          <span
+            class="rounded-lg border-t-2 border-l-2 border-slate-600 w-4 h-4 block absolute top-4 right-4 animate-spin"
+          />
+        {/if}
+        {#if !(username.length === 0) && usernameAvailable && usernameValid && !checkingUsername}
+          <span class="w-4 h-4 block absolute top-4 right-4">
+            {@html checkIcon}
+          </span>
+        {/if}
+        {#if !(username.length === 0) && !checkingUsername && !(usernameAvailable && usernameValid)}
+          <span class="w-4 h-4 block absolute top-4 right-4">
+            {@html xIcon}
+          </span>
+        {/if}
+      </div>

      {#if !(username.length === 0)}
+        <!-- Status of username: valid, available, etc -->
        <label for="registration" class="label mt-1">
          {#if usernameValid && usernameAvailable}
            <span class="label-text-alt text-success">
@ -54,18 +90,36 @@
          {/if}
        </label>
      {/if}
+      {#if !registrationSuccess}
+        <!-- Error when registration fails -->
+        <label for="registration" class="label mt-1">
+          <span class="label-text-alt text-error text-left">
+            There was an issue registering your account. Please try again.
+            <a href="#" class="underline">More info</a>
+          </span>
+        </label>
+      {/if}
+
      <div class="text-left mt-3">
        <input
          type="checkbox"
          id="shared-computer"
-          class="cursor-pointer appearance-none w-5 h-5 border border-primary checked:bg-primary rounded-md align-bottom inline-grid place-content-center"
+          class="peer checkbox checkbox-primary inline-grid align-bottom"
        />
+        <!-- Warning when "This is a shared computer" is checked -->
        <label
          for="shared-computer"
-          class="cursor-pointer ml-1 text-sm text-slate-700 inline-grid"
+          class="cursor-pointer ml-1 text-sm text-slate-700 grid-inline"
        >
          This is a shared computer
        </label>
+        <label for="registration" class="label mt-1 hidden peer-checked:block">
+          <span class="label-text-alt text-error text-left">
+            <!-- TODO: Swap in application name for AppName -->
+            For security reasons, AppName doesn't support shared computers at this
+            time.
+          </span>
+        </label>
      </div>

      <div class="mt-5">
@ -75,6 +129,7 @@
          disabled={username.length === 0 ||
            !usernameValid ||
            !usernameAvailable}
+          on:click={registerUser}
        >
          Register
        </button>
--- a/src/global.css
+++ b/src/global.css
@ -2,22 +2,14 @@
@tailwind components;
@tailwind utilities;

-input[type='checkbox']::before {
-  content: '';
-  width: 0.65em;
-  height: 0.65em;
-  transform: scale(0);
-  transition: 60ms transform ease-in-out;
-  box-shadow: inset 1em 1em #fff;
-  transform-origin: bottom left;
-  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
-  cursor: pointer;
-}
-
-input[type='checkbox']:checked::before {
-  transform: scale(1);
-}
-
 .modal-box {
  @apply p-8;
 }
+
+.label {
+  @apply px-0;
+}
+
+.label-text-alt {
+  @apply text-sm;
+}
--- a/src/lib/common/webnative.ts
+++ b/src/lib/common/webnative.ts
@ -1,44 +1,28 @@
 import * as webnative from 'webnative'

-import type FileSystem from 'webnative/fs/index'
-import { USE_WNFS_IMPLEMENTATION } from 'webnative/auth/implementation/use-wnfs'
+// import type FileSystem from 'webnative/fs/index'
 import { setup } from 'webnative'
 import { asyncDebounce } from '$lib/common/utils'

 // runfission.net = staging
 setup.endpoints({ api: 'https://runfission.net', user: 'fissionuser.net' })

-setup.setImplementations({ auth: USE_WNFS_IMPLEMENTATION.auth })
-
-let state: webnative.State
-
-const fissionInit = {
-  permissions: {
-    app: {
-      name: 'app-name',
-      creator: 'creator-name'
-    },
-    // Ask the user permission to additional filesystem paths
-    fs: {
-      // private: [webnative.path.directory('Documents', 'Contacts')],
-    }
-  }
-}
+let state: webnative.AppState

 // TODO: Add a flag or script to turn debugging on/off
 setup.debug({ enabled: true })

 export const initialize = async (): Promise<void> => {
  try {
-    const st = await webnative.initialise(fissionInit)
+    const st = await webnative.app({ useWnfs: true })
    state = st

    switch (state.scenario) {
-      case webnative.Scenario.NotAuthorised:
+      case webnative.AppScenario.NotAuthed:
        console.log('Not logged in')
        break

-      case webnative.Scenario.Continuation:
+      case webnative.AppScenario.Authed:
        console.log('Logged in')
        break

@ -62,12 +46,24 @@ export const isUsernameValid = async (username: string): Promise<boolean> => {
  return webnative.account.isUsernameValid(username)
 }

-const debouncedIsUsernameAvailable = asyncDebounce(webnative.account.isUsernameAvailable, 300)
+const debouncedIsUsernameAvailable = asyncDebounce(
+  webnative.account.isUsernameAvailable,
+  300
+)

-export const isUsernameAvailable = async (username: string): Promise<boolean> => {
+export const isUsernameAvailable = async (
+  username: string
+): Promise<boolean> => {
  return debouncedIsUsernameAvailable(username)
 }

+export const register = async (username: string): Promise<boolean> => {
+  await initialize()
+  const { success } = await webnative.account.register({ username })
+
+  return success
+}
+
 // interface StateFS {
 //   fs?: FileSystem
 // }
--- a/src/routes/linkDevice.svelte
+++ b/src/routes/linkDevice.svelte
@ -0,0 +1,5 @@
+<script lang="ts">
+  import LinkDevice from '$components/auth/LinkDevice.svelte'
+</script>
+
+<LinkDevice />