From f57beafa6c49600c4405f1c69b9462c6419c94a8 Mon Sep 17 00:00:00 2001
From: Jess Martin <jessmartin@gmail.com>
Date: Wed, 24 Aug 2022 16:15:43 -0400
Subject: [PATCH] Add a loading screen during filesystem init (#35)

---
 src/components/auth/register/Register.svelte | 201 ++++++++++---------
 1 file changed, 111 insertions(+), 90 deletions(-)

diff --git a/src/components/auth/register/Register.svelte b/src/components/auth/register/Register.svelte
index c341bd0..26c6061 100644
--- a/src/components/auth/register/Register.svelte
+++ b/src/components/auth/register/Register.svelte
@@ -24,111 +24,132 @@
 
     if (usernameValid) {
       usernameAvailable = await isUsernameAvailable(username)
-      console.log(username, ' is available: ', usernameAvailable)
     }
     checkingUsername = false
   }
 
+  let authInProcess = false
   const registerUser = async () => {
+    authInProcess = true
+
     registrationSuccess = await register(username)
   }
 </script>
 
-<input type="checkbox" id="register-modal" checked class="modal-toggle" />
-<div class="modal">
-  <div class="modal-box w-80 relative text-center">
-    <a href="/" class="btn btn-xs btn-circle absolute right-2 top-2">✕</a>
-
-    <div>
-      <h3 class="mb-7 text-xl font-serif">Choose a username</h3>
-      <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 authInProcess}
+  <input type="checkbox" id="initializing" checked class="modal-toggle" />
+  <div class="modal">
+    <div
+      class="modal-box rounded-lg shadow-sm bg-slate-100 w-80 relative text-center"
+    >
+      <p class="text-slate-500">
+        <span
+          class="rounded-lg border-t-2 border-l-2 border-slate-500 w-4 h-4 inline-block animate-spin mr-1"
         />
-        {#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-5 right-4">
-            <CheckIcon />
-          </span>
-        {/if}
-        {#if !(username.length === 0) && !checkingUsername && !(usernameAvailable && usernameValid)}
-          <span class="w-4 h-4 block absolute top-5 right-4">
-            <XIcon />
-          </span>
-        {/if}
-      </div>
+        Initializing file system...
+      </p>
+    </div>
+  </div>
+{:else}
+  <input type="checkbox" id="register-modal" checked class="modal-toggle" />
+  <div class="modal">
+    <div class="modal-box w-80 relative text-center">
+      <a href="/" class="btn btn-xs btn-circle absolute right-2 top-2">✕</a>
 
-      {#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">
-              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.
+      <div>
+        <h3 class="mb-7 text-xl font-serif">Choose a username</h3>
+        <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-5 right-4">
+              <CheckIcon />
             </span>
           {/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}
+          {#if !(username.length === 0) && !checkingUsername && !(usernameAvailable && usernameValid)}
+            <span class="w-4 h-4 block absolute top-5 right-4">
+              <XIcon />
+            </span>
+          {/if}
+        </div>
 
-      <div class="text-left mt-3">
-        <input
-          type="checkbox"
-          id="shared-computer"
-          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 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">
-            For security reasons, {appName} doesn't support shared computers at this
-            time.
-          </span>
-        </label>
-      </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">
+                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}
+        {#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="mt-5">
-        <a class="btn btn-primary btn-outline" href="/connect">Back</a>
-        <button
-          class="btn btn-primary"
-          disabled={username.length === 0 ||
-            !usernameValid ||
-            !usernameAvailable}
-          on:click={registerUser}
-        >
-          Register
-        </button>
+        <div class="text-left mt-3">
+          <input
+            type="checkbox"
+            id="shared-computer"
+            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 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">
+              For security reasons, {appName} doesn't support shared computers at
+              this time.
+            </span>
+          </label>
+        </div>
+
+        <div class="mt-5">
+          <a class="btn btn-primary btn-outline" href="/connect">Back</a>
+          <button
+            class="btn btn-primary"
+            disabled={username.length === 0 ||
+              !usernameValid ||
+              !usernameAvailable}
+            on:click={registerUser}
+          >
+            Register
+          </button>
+        </div>
       </div>
     </div>
   </div>
-</div>
+{/if}