Add username check at registration

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

src/components/auth/Register.svelte

@@ -1,17 +1,25 @@
 <script lang="ts">
-  // Check if username is valid
+  import * as webnative from 'webnative'
+  import { isUsernameValid, isUsernameAvailable } from '$lib/common/webnative'
 
-  // Check if username is available
+  let username: string = ''
-
+  let usernameValid = true
-  const checkUsername = (event: Event) => {
+  let usernameAvailable = true
-    const { value: username } = event.target as HTMLInputElement
 
+  const checkUsername = async (event: Event) => {
+    const { value } = event.target as HTMLInputElement
+    username = value
     console.log(username)
-  }
 
-  // Register the user
+    usernameValid = await isUsernameValid(username)
-  // Bootstrap the filesystem if successful
+
-  // Report an error
+    console.log(username, ' is valid: ', usernameValid)
+
+    if (usernameValid) {
+      usernameAvailable = await isUsernameAvailable(username)
+      console.log(username, ' is available: ', usernameAvailable)
+    }
+  }
 </script>
 
 <input type="checkbox" id="my-modal-5" checked class="modal-toggle" />
@@ -22,12 +30,33 @@
     <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 mb-3 block"
+        class="input input-bordered w-full block"
+        class:input-error={username.length !== 0 &&
+          (!usernameValid || !usernameAvailable)}
         on:input={checkUsername}
       />
-      <div class="text-left">
+
+      {#if !(username.length === 0)}
+        <label for="registration" class="label mt-1">
+          {#if usernameValid && usernameAvailable}
+            <span class="label-text-alt text-success">
+              The username is available.
+            </span>
+          {:else if !usernameValid}
+            <span class="label-text-alt text-error">
+              The username is invalid.
+            </span>
+          {:else if !usernameAvailable}
+            <span class="label-text-alt text-error">
+              The username is unavailable.
+            </span>
+          {/if}
+        </label>
+      {/if}
+      <div class="text-left mt-3">
         <input
           type="checkbox"
           id="shared-computer"
@@ -42,7 +71,12 @@
 
       <div class="mt-5">
         <a class="btn btn-primary btn-outline" href="/connect">Back</a>
-        <button class="btn btn-primary" disabled>Register</button>
+        <button
+          class="btn btn-primary"
+          disabled={username.length === 0 ||
+            !usernameValid ||
+            !usernameAvailable}>Register</button
+        >
       </div>
     </div>
   </div>

src/lib/common/webnative.ts

@@ -4,6 +4,7 @@ import type FileSystem from 'webnative/fs/index'
 import { USE_WNFS_IMPLEMENTATION } from 'webnative/auth/implementation/use-wnfs'
 import { setup } from 'webnative'
 
+// runfission.net = staging
 setup.endpoints({ api: 'https://runfission.net', user: 'fissionuser.net' })
 
 setup.setImplementations({ auth: USE_WNFS_IMPLEMENTATION.auth })
@@ -56,6 +57,13 @@ export const initialize = async (): Promise<void> => {
   }
 }
 
+export const isUsernameValid = async (username: string): Promise<boolean> => {
+  return webnative.account.isUsernameValid(username)
+}
+
+export const isUsernameAvailable = async (username: string): Promise<boolean> => {
+  return webnative.account.isUsernameAvailable(username)
+}
 // interface StateFS {
 //   fs?: FileSystem
 // }