diff options
Diffstat (limited to 'src/components/RegisterOrLogin.svelte')
| -rw-r--r-- | src/components/RegisterOrLogin.svelte | 203 |
1 files changed, 91 insertions, 112 deletions
diff --git a/src/components/RegisterOrLogin.svelte b/src/components/RegisterOrLogin.svelte index 7ac2fbb3..6c099178 100644 --- a/src/components/RegisterOrLogin.svelte +++ b/src/components/RegisterOrLogin.svelte @@ -1,28 +1,32 @@ <script> import { applyAction, deserialize } from '$app/forms'; import { tick } from 'svelte'; - import { Pincode, PincodeInput } from 'svelte-pincode'; import { fly } from 'svelte/transition'; import { enhance } from '$app/forms'; - import { Icon, Spinner } from '$comp'; - import { focus } from '$lib/utils'; + import { Pin, Icon, Spinner } from '$comp'; + import { focus, fail } from '$lib/utils'; import { password, loginRedirect } from '$lib/store'; import { t } from '$lib/translations'; import { page } from '$app/stores'; import { generate } from '$lib/nostr'; import { invalidateAll } from '$app/navigation'; - let token, tokenInput, formElement; + export let form; + export let pageID; + + let token, formElement; let code = []; let redirect; $password = undefined; $: need2fa = form?.message === '2fa'; - $: if (need2fa) tokenInput && tick().then(tokenInput.focusFirstInput); - - export let form; - export let pageID; + let cancel = () => (need2fa = false); + $: if (form?.message === '2fa' && form.token === token) { + token = ''; + console.log('TOKEN', token); + fail('Invalid token, try again'); + } let username, email, btn; @@ -66,6 +70,10 @@ } </script> +{#if need2fa} + <Pin bind:value={token} title="Enter 2FA Code" {cancel} /> +{/if} + <div class="pt-10"> <div class="w-[243px] mx-auto mb-10"> <a href="/"> @@ -75,126 +83,97 @@ <div class="flex justify-center items-center"> <div class="shadow-xl rounded-3xl p-10 pb-12 space-y-5 w-full mx-5 md:mx-0 md:w-[400px]"> - {#if need2fa} - <h1 class="text-2xl font-bold text-center">Enter 2FA Code</h1> + <h1 class="text-2xl font-bold text-center">{$t('login.' + pageID)}</h1> - {#if form?.token} - <div class="text-red-600 text-center" in:fly>Invalid token, try again</div> - {/if} - - <form class="space-y-5" {action} method="POST" use:enhance> - <input type="hidden" name="username" value={username} /> - <input type="hidden" name="password" value={$password} /> - <input type="hidden" name="token" value={token} /> - - <div> - <Pincode bind:code bind:value={token} bind:this={tokenInput}> - <PincodeInput /> - <PincodeInput /> - <PincodeInput /> - <PincodeInput /> - <PincodeInput /> - <PincodeInput /> - </Pincode> - </div> - <button - bind:this={btn} - type="submit" - class="bg-black text-white w-full rounded-2xl p-4 font-semibold hover:opacity-80" - >{$t('login.' + pageID)} - </button> - </form> - {:else} - <h1 class="text-2xl font-bold text-center">{$t('login.' + pageID)}</h1> + {#if form?.error} + <div class="text-red-600 text-center" in:fly> + {form.error} + </div> + {/if} - {#if form?.error} - <div class="text-red-600 text-center" in:fly> - {form.error} - </div> - {/if} + <form class="space-y-5" on:submit|preventDefault={handleSubmit} method="POST"> + <input type="hidden" name="loginRedirect" value={$loginRedirect} /> + <input type="hidden" name="token" value={token} /> - <form class="space-y-5" on:submit|preventDefault={handleSubmit} method="POST"> - <input type="hidden" name="loginRedirect" value={$loginRedirect} /> + <div> + <label for="username" class="font-semibold">{$t('login.username')}</label> + <input + name="username" + type="text" + required + class="bg-primary" + bind:value={username} + use:focus + autocapitalize="none" + /> + </div> - <div> - <label for="username" class="font-semibold">{$t('login.username')}</label> + <div class="relative"> + <label for="password" class="block font-semibold">{$t('login.password')}</label> + {#if revealPassword} <input - name="username" + name="password" type="text" required class="bg-primary" - bind:value={username} - use:focus + bind:value={$password} autocapitalize="none" /> - </div> - - <div class="relative"> - <label for="password" class="block font-semibold">{$t('login.password')}</label> - {#if revealPassword} - <input - name="password" - type="text" - required - class="bg-primary" - bind:value={$password} - autocapitalize="none" - /> - {:else} - <input - name="password" - type="password" - required - class="bg-primary" - bind:value={$password} - autocapitalize="none" - /> - {/if} - <button - type="button" - on:click={() => (revealPassword = !revealPassword)} - class="absolute right-5 top-10" - > - <Icon icon={revealPassword ? 'eye' : 'eye-off'} /> - </button> - </div> - - {#if pageID === 'register'} - <p class="text-secondary text-sm"> - {$t('login.passwordRecommendation')} - </p> {:else} - <!-- TODO --> - <!-- <div class="flex justify-end items-center"> --> - <!-- <a href="/forgot" class="underline underline-offset-4 text-black text-sm" --> - <!-- >{$t('login.forgotUserOrPassword')}</a --> - <!-- > --> - <!-- </div> --> + <input + name="password" + type="password" + required + class="bg-primary" + bind:value={$password} + autocapitalize="none" + /> {/if} - <button - type="submit" - class="bg-black text-white w-full rounded-2xl p-4 font-semibold hover:opacity-80" - disabled={loading} + type="button" + on:click={() => (revealPassword = !revealPassword)} + class="absolute right-5 top-10" > - {#if loading} - <Spinner /> - {:else} - {$t('login.' + pageID)} - {/if} + <Icon icon={revealPassword ? 'eye' : 'eye-off'} /> </button> - </form> + </div> - <p class="text-secondary text-center font-medium"> - {pageID === 'register' ? $t('login.haveAccount') : $t('login.noAccount')} - <a - href={pageID === 'register' ? '/login' : '/register'} - class="block md:inline text-black underline underline-offset-4 hover:opacity-80" - > - {pageID === 'register' ? $t('login.signIn') : $t('login.register')} - </a> - </p> - {/if} + {#if pageID === 'register'} + <p class="text-secondary text-sm"> + {$t('login.passwordRecommendation')} + </p> + {:else} + <!-- TODO --> + <!-- <div class="flex justify-end items-center"> --> + <!-- <a href="/forgot" class="underline underline-offset-4 text-black text-sm" --> + <!-- >{$t('login.forgotUserOrPassword')}</a --> + <!-- > --> + <!-- </div> --> + {/if} + + <button + type="submit" + class="bg-black text-white w-full rounded-2xl p-4 font-semibold hover:opacity-80" + disabled={loading} + bind:this={btn} + > + {#if loading} + <Spinner /> + {:else} + {$t('login.' + pageID)} + {/if} + </button> + </form> + + <p class="text-secondary text-center font-medium"> + {pageID === 'register' ? $t('login.haveAccount') : $t('login.noAccount')} + <a + href={pageID === 'register' ? '/login' : '/register'} + class="block md:inline text-black underline underline-offset-4 hover:opacity-80" + > + {pageID === 'register' ? $t('login.signIn') : $t('login.register')} + </a> + </p> </div> </div> </div> |