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) {
|
||||
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}
|
||||
|
|
|
|||
Loading…
Reference in New Issue