Add a loading screen during filesystem init (#35)
This commit is contained in:
Jess Martin
GitHub
parent
030f478228
commit
f57beafa6c
|
|
@ -24,111 +24,132 @@
|
||||||
|
|
||||||
if (usernameValid) {
|
if (usernameValid) {
|
||||||
usernameAvailable = await isUsernameAvailable(username)
|
usernameAvailable = await isUsernameAvailable(username)
|
||||||
console.log(username, ' is available: ', usernameAvailable)
|
|
||||||
}
|
}
|
||||||
checkingUsername = false
|
checkingUsername = false
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let authInProcess = false
|
||||||
const registerUser = async () => {
|
const registerUser = async () => {
|
||||||
|
authInProcess = true
|
||||||
|
|
||||||
registrationSuccess = await register(username)
|
registrationSuccess = await register(username)
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<input type="checkbox" id="register-modal" checked class="modal-toggle" />
|
{#if authInProcess}
|
||||||
<div class="modal">
|
<input type="checkbox" id="initializing" checked class="modal-toggle" />
|
||||||
<div class="modal-box w-80 relative text-center">
|
<div class="modal">
|
||||||
<a href="/" class="btn btn-xs btn-circle absolute right-2 top-2">✕</a>
|
<div
|
||||||
|
class="modal-box rounded-lg shadow-sm bg-slate-100 w-80 relative text-center"
|
||||||
<div>
|
>
|
||||||
<h3 class="mb-7 text-xl font-serif">Choose a username</h3>
|
<p class="text-slate-500">
|
||||||
<div class="relative">
|
<span
|
||||||
<input
|
class="rounded-lg border-t-2 border-l-2 border-slate-500 w-4 h-4 inline-block animate-spin mr-1"
|
||||||
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}
|
Initializing file system...
|
||||||
<span
|
</p>
|
||||||
class="rounded-lg border-t-2 border-l-2 border-slate-600 w-4 h-4 block absolute top-4 right-4 animate-spin"
|
</div>
|
||||||
/>
|
</div>
|
||||||
{/if}
|
{:else}
|
||||||
{#if !(username.length === 0) && usernameAvailable && usernameValid && !checkingUsername}
|
<input type="checkbox" id="register-modal" checked class="modal-toggle" />
|
||||||
<span class="w-4 h-4 block absolute top-5 right-4">
|
<div class="modal">
|
||||||
<CheckIcon />
|
<div class="modal-box w-80 relative text-center">
|
||||||
</span>
|
<a href="/" class="btn btn-xs btn-circle absolute right-2 top-2">✕</a>
|
||||||
{/if}
|
|
||||||
{#if !(username.length === 0) && !checkingUsername && !(usernameAvailable && usernameValid)}
|
|
||||||
<span class="w-4 h-4 block absolute top-5 right-4">
|
|
||||||
<XIcon />
|
|
||||||
</span>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{#if !(username.length === 0)}
|
<div>
|
||||||
<!-- Status of username: valid, available, etc -->
|
<h3 class="mb-7 text-xl font-serif">Choose a username</h3>
|
||||||
<label for="registration" class="label mt-1">
|
<div class="relative">
|
||||||
{#if usernameValid && usernameAvailable}
|
<input
|
||||||
<span class="label-text-alt text-success">
|
id="registration"
|
||||||
The username is available.
|
type="text"
|
||||||
</span>
|
placeholder="Type here"
|
||||||
{:else if !usernameValid}
|
class="input input-bordered w-full block"
|
||||||
<span class="label-text-alt text-error">
|
class:input-error={username.length !== 0 &&
|
||||||
The username is invalid.
|
(!usernameValid || !usernameAvailable)}
|
||||||
</span>
|
on:input={checkUsername}
|
||||||
{:else if !usernameAvailable}
|
/>
|
||||||
<span class="label-text-alt text-error">
|
{#if checkingUsername}
|
||||||
The username is unavailable.
|
<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>
|
</span>
|
||||||
{/if}
|
{/if}
|
||||||
</label>
|
{#if !(username.length === 0) && !checkingUsername && !(usernameAvailable && usernameValid)}
|
||||||
{/if}
|
<span class="w-4 h-4 block absolute top-5 right-4">
|
||||||
{#if !registrationSuccess}
|
<XIcon />
|
||||||
<!-- Error when registration fails -->
|
</span>
|
||||||
<label for="registration" class="label mt-1">
|
{/if}
|
||||||
<span class="label-text-alt text-error text-left">
|
</div>
|
||||||
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">
|
{#if !(username.length === 0)}
|
||||||
<input
|
<!-- Status of username: valid, available, etc -->
|
||||||
type="checkbox"
|
<label for="registration" class="label mt-1">
|
||||||
id="shared-computer"
|
{#if usernameValid && usernameAvailable}
|
||||||
class="peer checkbox checkbox-primary inline-grid align-bottom"
|
<span class="label-text-alt text-success">
|
||||||
/>
|
The username is available.
|
||||||
<!-- Warning when "This is a shared computer" is checked -->
|
</span>
|
||||||
<label
|
{:else if !usernameValid}
|
||||||
for="shared-computer"
|
<span class="label-text-alt text-error">
|
||||||
class="cursor-pointer ml-1 text-sm grid-inline"
|
The username is invalid.
|
||||||
>
|
</span>
|
||||||
This is a shared computer
|
{:else if !usernameAvailable}
|
||||||
</label>
|
<span class="label-text-alt text-error">
|
||||||
<label for="registration" class="label mt-1 hidden peer-checked:block">
|
The username is unavailable.
|
||||||
<span class="label-text-alt text-error text-left">
|
</span>
|
||||||
For security reasons, {appName} doesn't support shared computers at this
|
{/if}
|
||||||
time.
|
</label>
|
||||||
</span>
|
{/if}
|
||||||
</label>
|
{#if !registrationSuccess}
|
||||||
</div>
|
<!-- 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">
|
<div class="text-left mt-3">
|
||||||
<a class="btn btn-primary btn-outline" href="/connect">Back</a>
|
<input
|
||||||
<button
|
type="checkbox"
|
||||||
class="btn btn-primary"
|
id="shared-computer"
|
||||||
disabled={username.length === 0 ||
|
class="peer checkbox checkbox-primary inline-grid align-bottom"
|
||||||
!usernameValid ||
|
/>
|
||||||
!usernameAvailable}
|
<!-- Warning when "This is a shared computer" is checked -->
|
||||||
on:click={registerUser}
|
<label
|
||||||
>
|
for="shared-computer"
|
||||||
Register
|
class="cursor-pointer ml-1 text-sm grid-inline"
|
||||||
</button>
|
>
|
||||||
|
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>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
{/if}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue