jeffemmett
/
odd-app-template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Error messages on "shared computer"; spinner

This commit is contained in:
Jess Martin 2022-07-27 12:06:06 -04:00
parent 99f912486a
commit afc887befc
1 changed files with 31 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/components/auth/Register.svelte
View File

@ -10,8 +10,10 @@
let usernameValid = true let usernameValid = true
let usernameAvailable = true let usernameAvailable = true
let registrationSuccess = true let registrationSuccess = true
let checkingUsername = false
const checkUsername = async (event: Event) => { const checkUsername = async (event: Event) => {
checkingUsername = true
const { value } = event.target as HTMLInputElement const { value } = event.target as HTMLInputElement
username = value username = value
console.log(username) console.log(username)
@ -22,6 +24,7 @@
usernameAvailable = await isUsernameAvailable(username) usernameAvailable = await isUsernameAvailable(username)
console.log(username, ' is available: ', usernameAvailable) console.log(username, ' is available: ', usernameAvailable)
} }
checkingUsername = false
} }
const registerUser = async (event: Event) => { const registerUser = async (event: Event) => {
@ -40,17 +43,25 @@
<div> <div>
<h3 class="mb-7 text-xl font-serif">Choose a username</h3> <h3 class="mb-7 text-xl font-serif">Choose a username</h3>
<input <div class="relative">
id="registration" <input
type="text" id="registration"
placeholder="Type here" type="text"
class="input input-bordered w-full block" placeholder="Type here"
class:input-error={username.length !== 0 && class="input input-bordered w-full block"
(!usernameValid || !usernameAvailable)} class:input-error={username.length !== 0 &&
on:input={checkUsername} (!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}
</div>
{#if !(username.length === 0)} {#if !(username.length === 0)}
<!-- Status of username: valid, available, etc -->
<label for="registration" class="label mt-1"> <label for="registration" class="label mt-1">
{#if usernameValid && usernameAvailable} {#if usernameValid && usernameAvailable}
<span class="label-text-alt text-success"> <span class="label-text-alt text-success">
@ -67,7 +78,8 @@
{/if} {/if}
</label> </label>
{/if} {/if}
{#if registrationSuccess} {#if !registrationSuccess}
<!-- Error when registration fails -->
<label for="registration" class="label mt-1"> <label for="registration" class="label mt-1">
<span class="label-text-alt text-error text-left"> <span class="label-text-alt text-error text-left">
There was an issue registering your account. Please try again. There was an issue registering your account. Please try again.
@ -75,18 +87,26 @@
</span> </span>
</label> </label>
{/if} {/if}
<div class="text-left mt-3"> <div class="text-left mt-3">
<input <input
type="checkbox" type="checkbox"
id="shared-computer" id="shared-computer"
class="cursor-pointer appearance-none w-5 h-5 border border-primary checked:bg-primary rounded-md align-bottom inline-grid place-content-center" class="peer cursor-pointer appearance-none w-5 h-5 border border-primary checked:bg-primary rounded-md align-bottom inline-grid place-content-center"
/> />
<!-- Warning when "This is a shared computer" is checked -->
<label <label
for="shared-computer" for="shared-computer"
class="cursor-pointer ml-1 text-sm text-slate-700 inline-grid" class="cursor-pointer ml-1 text-sm text-slate-700 inline-grid"
> >
This is a shared computer This is a shared computer
</label> </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>
<div class="mt-5"> <div class="mt-5">