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

Add green and red checks for status

This commit is contained in:
Jess Martin 2022-07-27 12:38:08 -04:00
parent a2bed7a6b3
commit 1d7ef2d819
1 changed files with 13 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -12,6 +12,9 @@
let registrationSuccess = true
let checkingUsername = false
let checkIcon = `<svg width="15" height="10" viewBox="0 0 15 10" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M14.2071 0.292893C14.5976 0.683417 14.5976 1.31658 14.2071 1.70711L6.20711 9.70711C5.81658 10.0976 5.18342 10.0976 4.79289 9.70711L0.792893 5.70711C0.402369 5.31658 0.402369 4.68342 0.792893 4.29289C1.18342 3.90237 1.81658 3.90237 2.20711 4.29289L5.5 7.58579L12.7929 0.292893C13.1834 -0.0976311 13.8166 -0.0976311 14.2071 0.292893Z" fill="#16A34A"/> </svg> `
let xIcon = `<svg width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M0.792893 0.292893C1.18342 -0.0976311 1.81658 -0.0976311 2.20711 0.292893L6.5 4.58579L10.7929 0.292893C11.1834 -0.0976311 11.8166 -0.0976311 12.2071 0.292893C12.5976 0.683417 12.5976 1.31658 12.2071 1.70711L7.91421 6L12.2071 10.2929C12.5976 10.6834 12.5976 11.3166 12.2071 11.7071C11.8166 12.0976 11.1834 12.0976 10.7929 11.7071L6.5 7.41421L2.20711 11.7071C1.81658 12.0976 1.18342 12.0976 0.792893 11.7071C0.402369 11.3166 0.402369 10.6834 0.792893 10.2929L5.08579 6L0.792893 1.70711C0.402369 1.31658 0.402369 0.683417 0.792893 0.292893Z" fill="#DC2626"/> </svg>`
const checkUsername = async (event: Event) => {
checkingUsername = true
const { value } = event.target as HTMLInputElement
@ -58,6 +61,16 @@
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-4 right-4">
{@html checkIcon}
</span>
{/if}
{#if !(username.length === 0) && !checkingUsername && !(usernameAvailable && usernameValid)}
<span class="w-4 h-4 block absolute top-4 right-4">
{@html xIcon}
</span>
{/if}
</div>
{#if !(username.length === 0)}