register new inputs ability
This commit is contained in:
parent
5f5e54b51a
commit
ad62ea5735
|
@ -1,13 +1,27 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import elementIdGenerator from '$lib/utils/elementIdGenerator'
|
import elementIdGenerator from '$lib/utils/elementIdGenerator'
|
||||||
import { Input } from 'flowbite-svelte'
|
import { Input } from 'flowbite-svelte'
|
||||||
|
import { createEventDispatcher, onMount } from 'svelte'
|
||||||
|
|
||||||
|
const dispatch = createEventDispatcher()
|
||||||
|
export let value = ''
|
||||||
|
export let placeholder = ''
|
||||||
|
export let id = elementIdGenerator()
|
||||||
|
export let podm = true
|
||||||
|
export let readOnly = false
|
||||||
|
export let maxLength = Infinity
|
||||||
|
export let icon: string | null = null
|
||||||
|
export let iconFunction: 'password' = null
|
||||||
|
export let changedIconOnActive = icon
|
||||||
|
export let iconPosition: 'right' | 'left' = 'left'
|
||||||
|
|
||||||
|
//erant-new
|
||||||
|
export let autocomplete = ''
|
||||||
|
export let pattern: any = null
|
||||||
|
|
||||||
export let value: string = ''
|
|
||||||
export let focus = false
|
|
||||||
export let prefix: string = ''
|
export let prefix: string = ''
|
||||||
export let placeholder: string = ''
|
export let invisiblePrefix = icon ? true : false
|
||||||
export let autocomplete: string = ''
|
|
||||||
const id = elementIdGenerator()
|
|
||||||
export let type:
|
export let type:
|
||||||
| 'color'
|
| 'color'
|
||||||
| 'date'
|
| 'date'
|
||||||
|
@ -29,28 +43,106 @@
|
||||||
| 'search'
|
| 'search'
|
||||||
| 'textarea' = 'text'
|
| 'textarea' = 'text'
|
||||||
|
|
||||||
let className = 'bg-white text-black border-4 border-blue-300 rounded-[25px] text-left text-[30px] p-[16px] outline-none appearance-none w-full'
|
let className: string = ''
|
||||||
export { className as class }
|
export { className as class }
|
||||||
|
|
||||||
const setType = (node: HTMLInputElement) => {
|
$: inputValue = pattern ? value.replace(pattern, '') : value //this is here because we always want to equal input.value = value
|
||||||
node.type = type
|
|
||||||
|
$: prefixControl(inputValue) //when inputValue changes => it will check prefix (so when we do $: inputValue = value this func will trigger every moment when inputValue will change and it will overwhite currect input.value thats will be {value})
|
||||||
|
|
||||||
|
const prefixControl = (_e) => {
|
||||||
|
if (prefix) {
|
||||||
|
if (!invisiblePrefix) {
|
||||||
|
if (inputValue?.indexOf(prefix) < 0) inputValue = `${prefix}${inputValue}`
|
||||||
|
value = inputValue
|
||||||
|
} else if (inputValue?.indexOf(prefix) < 0) {
|
||||||
|
value = `${prefix}${inputValue}`
|
||||||
|
//inputValue = value.slice(prefix.length, value.length)
|
||||||
|
} else value = inputValue
|
||||||
|
} else {
|
||||||
|
value = inputValue
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const setFocus = (node: HTMLInputElement | HTMLTextAreaElement) => {
|
onMount(() => {
|
||||||
focus && node.focus()
|
prefixControl('')
|
||||||
}
|
})
|
||||||
|
|
||||||
$: if (prefix && !value.startsWith(prefix)) value = `${prefix}${value}`
|
let iconActived = false
|
||||||
|
let iconPushedCount = 0
|
||||||
|
|
||||||
|
const iconClick = () => {
|
||||||
|
iconPushedCount++
|
||||||
|
iconActived = iconPushedCount % 2 === 1
|
||||||
|
dispatch('iconClick')
|
||||||
|
if (iconFunction === 'password') type = type === 'text' ? 'password' : 'text'
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if type === 'textarea'}
|
{#if icon}
|
||||||
<textarea {id} {placeholder} use:setFocus bind:value class={className} {...$$restProps} />
|
{#if iconPosition === 'left'}
|
||||||
|
<Input
|
||||||
|
{autocomplete}
|
||||||
|
{...$$restProps}
|
||||||
|
maxlength={maxLength}
|
||||||
|
readonly={readOnly ? true : null}
|
||||||
|
{id}
|
||||||
|
{type}
|
||||||
|
bind:value={inputValue}
|
||||||
|
class="input rounded-[24px] p-4 text-gray-900 border border-gray-300 text-left outline-none appearance-none {className} {readOnly ? 'cursor-pointer' : ''}"
|
||||||
|
color={!podm ? 'red' : null}
|
||||||
|
{placeholder}
|
||||||
|
on:input
|
||||||
|
>
|
||||||
|
<button class={`w-auto pointer-events-auto z-50 `} on:click={iconClick} slot="left">
|
||||||
|
{#if iconActived}
|
||||||
|
{changedIconOnActive}
|
||||||
|
{:else}
|
||||||
|
{icon}
|
||||||
|
{/if}
|
||||||
|
</button>
|
||||||
|
</Input>
|
||||||
|
{:else}
|
||||||
|
<Input
|
||||||
|
{autocomplete}
|
||||||
|
{...$$restProps}
|
||||||
|
maxlength={maxLength}
|
||||||
|
readonly={readOnly ? true : null}
|
||||||
|
{id}
|
||||||
|
{type}
|
||||||
|
bind:value={inputValue}
|
||||||
|
class="input rounded-[24px] p-4 text-gray-900 border border-gray-300 text-left outline-none appearance-none {className} {readOnly ? 'cursor-pointer' : ''}"
|
||||||
|
color={!podm ? 'red' : null}
|
||||||
|
{placeholder}
|
||||||
|
on:input
|
||||||
|
>
|
||||||
|
<button class={`w-auto pointer-events-auto z-50 `} on:click={iconClick} slot="right">
|
||||||
|
{#if iconActived}
|
||||||
|
{changedIconOnActive}
|
||||||
|
{:else}
|
||||||
|
{icon}
|
||||||
|
{/if}
|
||||||
|
</button>
|
||||||
|
</Input>
|
||||||
|
{/if}
|
||||||
{:else}
|
{:else}
|
||||||
<input {autocomplete} {id} {placeholder} class:prefixPlaceholder={prefix.length === value.length} class={'' + className} use:setType use:setFocus bind:value {...$$restProps} />
|
<Input
|
||||||
|
{autocomplete}
|
||||||
|
{...$$restProps}
|
||||||
|
maxlength={maxLength}
|
||||||
|
readonly={readOnly ? true : null}
|
||||||
|
{id}
|
||||||
|
{type}
|
||||||
|
bind:value={inputValue}
|
||||||
|
class="input rounded-[24px] p-4 text-gray-900 border border-gray-300 text-left outline-none appearance-none {className} {readOnly ? 'cursor-pointer' : ''}"
|
||||||
|
color={!podm ? 'red' : null}
|
||||||
|
{placeholder}
|
||||||
|
on:input
|
||||||
|
/>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
input::placeholder {
|
.input::placeholder {
|
||||||
color: #8f8f8f;
|
color: #8f8f8f;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-family: 'Source Sans Pro';
|
font-family: 'Source Sans Pro';
|
||||||
|
|
|
@ -5,7 +5,10 @@
|
||||||
const urlFail = `${location.origin}/register/failed`
|
const urlFail = `${location.origin}/register/failed`
|
||||||
const urlSuccess = `${location.origin}/create/account`
|
const urlSuccess = `${location.origin}/create/account`
|
||||||
|
|
||||||
|
export let disableLogin = false
|
||||||
|
|
||||||
const login = async (platform: 'facebook' | 'google') => {
|
const login = async (platform: 'facebook' | 'google') => {
|
||||||
|
if (disableLogin) return
|
||||||
try {
|
try {
|
||||||
await user.deleteSessions()
|
await user.deleteSessions()
|
||||||
} catch (error) {}
|
} catch (error) {}
|
||||||
|
@ -14,12 +17,12 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="continue_with">
|
<div class="continue_with">
|
||||||
<button>
|
<button on:click>
|
||||||
<GoogleLogo />
|
<GoogleLogo />
|
||||||
<p>Continue with Google</p>
|
<p>Continue with Google</p>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<button on:click={() => login('facebook')}>
|
<button on:click on:click={() => login('facebook')}>
|
||||||
<p>Continue with Facebook</p>
|
<p>Continue with Facebook</p>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -18,13 +18,15 @@
|
||||||
let repeatPassword = ''
|
let repeatPassword = ''
|
||||||
let name = ''
|
let name = ''
|
||||||
let erantId = ''
|
let erantId = ''
|
||||||
let termsChecked: boolean = false
|
let termsChecked = false
|
||||||
|
let termsCheckboxShake = false
|
||||||
|
$: if (termsCheckboxShake) setTimeout(() => (termsCheckboxShake = false), 750)
|
||||||
|
|
||||||
let state: 'email-sent' | 'register' | 'loading' = 'register'
|
let state: 'email-sent' | 'register' | 'loading' = 'register'
|
||||||
let error: string | null = null
|
let error: string | null = null
|
||||||
$: buttonCodition = name.length > 0 && email.length > 0 && password.length >= 8 && password === repeatPassword && erantId.length > 2 && termsChecked && nicknameIsValid
|
$: buttonCodition = name.length > 0 && email.length > 0 && password.length >= 8 && password === repeatPassword && erantId.length > 2 && termsChecked && nicknameIsValid
|
||||||
|
|
||||||
const pattern = /^[a-zA-Z0-9+@]+$/
|
const pattern = /[^a-zA-Z0-9]/g
|
||||||
$: nicknameIsValid = pattern.test(erantId)
|
$: nicknameIsValid = pattern.test(erantId)
|
||||||
|
|
||||||
const register = async () => {
|
const register = async () => {
|
||||||
|
@ -70,14 +72,38 @@
|
||||||
<Input bind:value={name} placeholder="Your name" autocomplete="full-name" class="p-3 border-1 rounded-[15px] bg-[#eeeeee] text-lg w-full" />
|
<Input bind:value={name} placeholder="Your name" autocomplete="full-name" class="p-3 border-1 rounded-[15px] bg-[#eeeeee] text-lg w-full" />
|
||||||
<Input bind:value={email} placeholder="Your e-mail" autocomplete="email" class="p-3 border-1 rounded-[15px] bg-[#eeeeee] text-lg w-full" />
|
<Input bind:value={email} placeholder="Your e-mail" autocomplete="email" class="p-3 border-1 rounded-[15px] bg-[#eeeeee] text-lg w-full" />
|
||||||
<div class="w-full">
|
<div class="w-full">
|
||||||
<Input bind:value={erantId} placeholder="@your_nickname" class="p-3 border-1 rounded-[15px] bg-[#eeeeee] text-lg w-full" prefix="@" />
|
<Input
|
||||||
|
bind:value={erantId}
|
||||||
|
prefix="@"
|
||||||
|
placeholder="your_nickname"
|
||||||
|
class="p-3 border-1 rounded-[15px] bg-[#eeeeee] text-lg w-full"
|
||||||
|
{pattern}
|
||||||
|
invisiblePrefix
|
||||||
|
icon="@"
|
||||||
|
/>
|
||||||
{#if !nicknameIsValid}
|
{#if !nicknameIsValid}
|
||||||
<Helper class="flex justify-start w-full pl-4" color="red">Your nickname can include only a-zA-Z0-9 characters</Helper>
|
<Helper class="flex justify-start w-full pl-4" color="red">Your nickname can include only a-zA-Z0-9 characters</Helper>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
<HiddenInput bind:value={password} placeholder="Password" />
|
<Input
|
||||||
|
iconFunction="password"
|
||||||
|
bind:value={password}
|
||||||
|
placeholder="Password"
|
||||||
|
class="p-3 border-1 rounded-[15px] bg-[#eeeeee] text-lg w-full"
|
||||||
|
inputFunction="password"
|
||||||
|
iconPosition="right"
|
||||||
|
icon="eye"
|
||||||
|
/>
|
||||||
<div class="w-full">
|
<div class="w-full">
|
||||||
<HiddenInput bind:value={repeatPassword} placeholder="Re-type password" />
|
<Input
|
||||||
|
iconFunction="password"
|
||||||
|
bind:value={repeatPassword}
|
||||||
|
placeholder="Re-type password"
|
||||||
|
class="p-3 border-1 rounded-[15px] bg-[#eeeeee] text-lg w-full"
|
||||||
|
inputFunction="password"
|
||||||
|
iconPosition="right"
|
||||||
|
icon="eye"
|
||||||
|
/>
|
||||||
{#if password !== repeatPassword && password.length >= 8}
|
{#if password !== repeatPassword && password.length >= 8}
|
||||||
<Helper class="flex justify-start w-full pl-4" helperClass="text-sm" color="red">Passwords are not equal</Helper>
|
<Helper class="flex justify-start w-full pl-4" helperClass="text-sm" color="red">Passwords are not equal</Helper>
|
||||||
{/if}
|
{/if}
|
||||||
|
@ -86,7 +112,9 @@
|
||||||
<div class="flex items-center">
|
<div class="flex items-center">
|
||||||
<Checkbox
|
<Checkbox
|
||||||
bind:checked={termsChecked}
|
bind:checked={termsChecked}
|
||||||
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
|
class="w-5 h-5 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600 {termsCheckboxShake
|
||||||
|
? 'animate-bounce border-4 border-red-500'
|
||||||
|
: ''}"
|
||||||
/>
|
/>
|
||||||
<label for="link-checkbox" class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300"
|
<label for="link-checkbox" class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300"
|
||||||
>I agree with the <a href="erant.cz/terms-and-conditions" class="text-blue-600 dark:text-blue-500 hover:underline">terms and conditions</a>,
|
>I agree with the <a href="erant.cz/terms-and-conditions" class="text-blue-600 dark:text-blue-500 hover:underline">terms and conditions</a>,
|
||||||
|
@ -104,7 +132,12 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<SocialLogin />
|
<SocialLogin
|
||||||
|
disableLogin={!termsChecked}
|
||||||
|
on:click={() => {
|
||||||
|
if (!termsChecked) termsCheckboxShake = true
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
<div class="LR_switch">
|
<div class="LR_switch">
|
||||||
<p>Already have an account? <a href="/login">Log In</a></p>
|
<p>Already have an account? <a href="/login">Log In</a></p>
|
||||||
|
|
Loading…
Reference in New Issue