Chore: remove isUsernameAvailable check and update readme (#114)

README.md

@@ -113,6 +113,14 @@ The app template is designed to be easy for you to _make it your own._ Here's ho
 
 Check out the [Webnative Guide](https://guide.fission.codes/developers/webnative) for Webnative questions or [UCAN.xyz](https://ucan.xyz) for UCAN questions.
 
+## 📛 Usernames
+
+When you go through the registration flow in WAT, the username you type in the form field has a `#{DID}` appended to it in the background. We did this to enable discord style usernames where users can share the same usernames, but have unique identifiers attached to the end to distinguish them from one another. We then create a hash of the `fullUsername`(the one with the `#{DID}` appended to the end) that is passed to Webnative. So Webnative only has a notion of the `hashed` username currently. This should also allow users to create usernames using emojis or non-English characters. Also, this is the only username schema that currently supports our File System recovery flow.
+
+You don’t necessarily need to follow that same pattern though. If you were to register two of the same usernames in the app without hashing them, you would be able to call `session.authStrategy.isUsernameAvailable(username)` to ensure duplicate usernames aren't present in the app. We will be working on porting some of this functionality over to the Webnative library over the next while and we will be updating the docs to reflect that.
+
+[Please take a look at our init function](https://github.com/webnative-examples/webnative-app-template/blob/main/src/lib/init.ts#L34-L38) to see how we are currently constructing the username schema.
+
 ## 🧨 Deploy
 
 Any static hosting platform should be supported. The Webnative App Template is currently deployed on:

src/components/auth/register/Register.svelte

@@ -4,14 +4,10 @@
   import { sessionStore } from '$src/stores'
   import {
     createDID,
-    isUsernameValid,
-    isUsernameAvailable,
     prepareUsername,
     register,
     USERNAME_STORAGE_KEY
   } from '$lib/auth/account'
-  import CheckIcon from '$components/icons/CheckIcon.svelte'
-  import XIcon from '$components/icons/XIcon.svelte'
   import FilesystemActivity from '$components/common/FilesystemActivity.svelte'
 
   let username: string = ''
@@ -44,11 +40,6 @@
 
     encodedUsername = await prepareUsername(fullUsername)
 
-    usernameValid = await isUsernameValid(encodedUsername)
-
-    if (usernameValid) {
-      usernameAvailable = await isUsernameAvailable(encodedUsername)
-    }
     checkingUsername = false
   }
 
@@ -110,38 +101,8 @@
             class="rounded-lg border-t-2 border-l-2 border-base-content w-4 h-4 block absolute top-4 right-4 animate-spin"
           />
         {/if}
-        {#if usernameApproved}
-          <span
-            class="w-4 h-4 block absolute top-[17px] right-4 text-green-300"
-          >
-            <CheckIcon />
-          </span>
-        {/if}
-        {#if usernameError}
-          <span class="w-4 h-4 block absolute top-[17px] right-4 text-red-400">
-            <XIcon />
-          </span>
-        {/if}
       </div>
 
-      {#if !(username.length === 0)}
-        <!-- Status of username: valid, available, etc -->
-        <label for="registration">
-          {#if usernameApproved}
-            <span class="text-xxs !p-0 text-green-300 dark:text-green-500">
-              This username is available.
-            </span>
-          {:else if !checkingUsername && !usernameValid}
-            <span class="text-xxs !p-0 text-error">
-              This username is not valid.
-            </span>
-          {:else if !checkingUsername && !usernameAvailable}
-            <span class="text-xxs !p-0 text-error">
-              This username is not available.
-            </span>
-          {/if}
-        </label>
-      {/if}
       {#if !registrationSuccess}
         <!-- Error when registration fails -->
         <label for="registration" class="label">