input register fix
This commit is contained in:
parent
8b1ae1656d
commit
029c7e183a
|
@ -1,31 +1,61 @@
|
|||
<script>
|
||||
export let value = ''
|
||||
export let type = 'text'
|
||||
export let placeholder = ''
|
||||
<script lang="ts">
|
||||
import elementIdGenerator from '$lib/utils/elementIdGenerator'
|
||||
import { Input } from 'flowbite-svelte'
|
||||
|
||||
let className
|
||||
export let value: string = ''
|
||||
export let focus = false
|
||||
export let prefix: string = ''
|
||||
export let placeholder: string = ''
|
||||
export let autocomplete: string = ''
|
||||
const id = elementIdGenerator()
|
||||
export let type:
|
||||
| 'color'
|
||||
| 'date'
|
||||
| 'datetime-local'
|
||||
| 'email'
|
||||
| 'file'
|
||||
| 'hidden'
|
||||
| 'image'
|
||||
| 'month'
|
||||
| 'number'
|
||||
| 'password'
|
||||
| 'reset'
|
||||
| 'submit'
|
||||
| 'tel'
|
||||
| 'text'
|
||||
| 'time'
|
||||
| 'url'
|
||||
| 'week'
|
||||
| 'search'
|
||||
| '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'
|
||||
export { className as class }
|
||||
|
||||
function typeAction(node) {
|
||||
const setType = (node: HTMLInputElement) => {
|
||||
node.type = type
|
||||
}
|
||||
|
||||
const setFocus = (node: HTMLInputElement | HTMLTextAreaElement) => {
|
||||
focus && node.focus()
|
||||
}
|
||||
|
||||
$: if (prefix && !value.startsWith(prefix)) value = `${prefix}${value}`
|
||||
</script>
|
||||
|
||||
<input bind:value class="input {className}" use:typeAction {placeholder} on:input />
|
||||
{#if type === 'textarea'}
|
||||
<textarea {id} {placeholder} use:setFocus bind:value class={className} {...$$restProps} />
|
||||
{:else}
|
||||
<input {autocomplete} {id} {placeholder} class:prefixPlaceholder={prefix.length === value.length} class={'' + className} use:setType use:setFocus bind:value {...$$restProps} />
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
input {
|
||||
background-color: rgb(232, 232, 232);
|
||||
color: var(--blue);
|
||||
background: white;
|
||||
border: 4px solid var(--blue);
|
||||
border-radius: 25px;
|
||||
text-align: left;
|
||||
font-size: 30px;
|
||||
input::placeholder {
|
||||
color: #8f8f8f;
|
||||
font-size: 18px;
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: 20px;
|
||||
padding: 28px 20px;
|
||||
outline: none;
|
||||
appearance: none;
|
||||
line-height: 28px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -0,0 +1,76 @@
|
|||
<script lang="ts">
|
||||
import { account, user } from '$lib/appwrite'
|
||||
import GoogleLogo from '$lib/svg/GoogleLogo.svelte'
|
||||
|
||||
const urlFail = `${location.origin}/register/failed`
|
||||
const urlSuccess = `${location.origin}/create/account`
|
||||
|
||||
const login = async (platform: 'facebook' | 'google') => {
|
||||
try {
|
||||
await user.deleteSessions()
|
||||
} catch (error) {}
|
||||
user.createOAuth2Session(platform, urlSuccess, urlFail)
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="continue_with">
|
||||
<button>
|
||||
<GoogleLogo />
|
||||
<p>Continue with Google</p>
|
||||
</button>
|
||||
|
||||
<button on:click={() => login('facebook')}>
|
||||
<p>Continue with Facebook</p>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!--!!!!!!!!!Vím že je to špatně, ale nemuze prestavovat cely kod od znova, to by jsme se vsichni strasne zpozdili-->
|
||||
<style lang="scss">
|
||||
.continue_with {
|
||||
width: calc(100% - 48px);
|
||||
margin: 0 auto 0 auto;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
|
||||
@media screen and (max-width: 410px) {
|
||||
width: calc(100% - 24px);
|
||||
}
|
||||
|
||||
button {
|
||||
height: 60px;
|
||||
width: 100%;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.084), 0px 2px 3px rgba(0, 0, 0, 0.168);
|
||||
|
||||
@media screen and (max-width: 410px) {
|
||||
gap: 3.5vw;
|
||||
}
|
||||
p {
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 28px;
|
||||
line-height: 36px;
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
|
||||
@media screen and (max-width: 400px) {
|
||||
font-size: 7.3vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
button:hover {
|
||||
opacity: 70%;
|
||||
}
|
||||
}
|
||||
</style>
|
|
@ -8,6 +8,7 @@
|
|||
import { Helper } from 'flowbite-svelte'
|
||||
import { getErrorMessage } from '../utils/authorizationErrors'
|
||||
import Button from '$lib/components/Buttons/Button.svelte'
|
||||
import SocialLogin from '../Components/SocialLogin.svelte'
|
||||
|
||||
export let purpose = 'login' //possible values login, register
|
||||
|
||||
|
@ -20,6 +21,9 @@
|
|||
const emailLogin = async () => {
|
||||
state = 'loading'
|
||||
error = null
|
||||
try {
|
||||
await user.deleteSessions()
|
||||
} catch (error) {}
|
||||
try {
|
||||
await user.createEmailSession(email, password)
|
||||
//if (navigation.canGoBack) navigation.back()
|
||||
|
@ -69,16 +73,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="continue_with">
|
||||
<button>
|
||||
<GoogleLogo />
|
||||
<p>Continue with Google</p>
|
||||
</button>
|
||||
|
||||
<button on:click={() => account.createOAuth2Session('facebook', `${location.origin}/create/account`, `${location.origin}/register/failed`)}>
|
||||
<p>Continue with Facebook</p>
|
||||
</button>
|
||||
</div>
|
||||
<SocialLogin />
|
||||
|
||||
<div class="LR_switch">
|
||||
<!--LR switch = login / register switch-->
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<script lang="ts">
|
||||
import { account } from '$lib/appwrite'
|
||||
import { account, user } from '$lib/appwrite'
|
||||
import Loading from '$lib/components/Common/Loading.svelte'
|
||||
import HiddenInput from '$lib/components/Inputs/Hidden_Input.svelte'
|
||||
import GoogleLogo from '$lib/svg/GoogleLogo.svelte'
|
||||
|
@ -9,6 +9,8 @@
|
|||
import { ID } from 'appwrite'
|
||||
import { Checkbox, Helper } from 'flowbite-svelte'
|
||||
import Button from '$lib/components/Buttons/Button.svelte'
|
||||
import SocialLogin from '../Components/SocialLogin.svelte'
|
||||
import Input from '$lib/components/Inputs/Input.svelte'
|
||||
|
||||
let email = ''
|
||||
let password = ''
|
||||
|
@ -19,10 +21,16 @@
|
|||
|
||||
let state: 'email-sent' | 'register' | 'loading' = 'register'
|
||||
let error: string | null = null
|
||||
$: buttonCodition = name.length > 0 && email.length > 0 && password.length >= 8 && password === repeatPassword && erantId.length > 2 && termsChecked
|
||||
$: buttonCodition = name.length > 0 && email.length > 0 && password.length >= 8 && password === repeatPassword && erantId.length > 2 && termsChecked && nicknameIsValid
|
||||
|
||||
const pattern = /^[a-zA-Z0-9+@]+$/
|
||||
$: nicknameIsValid = pattern.test(erantId)
|
||||
|
||||
const register = async () => {
|
||||
//if (password === repeatPassword || name.length < 8 || email.length < 8) throw new Error('conditions are not fine')
|
||||
try {
|
||||
await user.deleteSessions()
|
||||
} catch (error) {}
|
||||
try {
|
||||
state = 'loading'
|
||||
error = null
|
||||
|
@ -58,9 +66,14 @@
|
|||
<Helper class="ml-4" color="red">{error}</Helper>
|
||||
{/if}
|
||||
<div class="inform">
|
||||
<input bind:value={name} type="text" placeholder="Your name" autocomplete="full-name" required />
|
||||
<input bind:value={email} type="text" placeholder="Your e-mail" autocomplete="email" required />
|
||||
<input bind:value={erantId} type="text" placeholder="@your_nickname" autocomplete="email" required />
|
||||
<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" />
|
||||
<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="@" />
|
||||
{#if !nicknameIsValid}
|
||||
<Helper class="flex justify-start w-full pl-4" color="red">Your nickname can include only a-zA-Z0-9 characters</Helper>
|
||||
{/if}
|
||||
</div>
|
||||
<HiddenInput bind:value={password} placeholder="Password" />
|
||||
<div class="w-full">
|
||||
<HiddenInput bind:value={repeatPassword} placeholder="Re-type password" />
|
||||
|
@ -68,6 +81,7 @@
|
|||
<Helper class="flex justify-start w-full pl-4" helperClass="text-sm" color="red">Passwords are not equal</Helper>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<Checkbox
|
||||
bind:checked={termsChecked}
|
||||
|
@ -89,16 +103,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="continue_with">
|
||||
<button on:click={() => account.createOAuth2Session('google', location.origin, `${location.origin}/register/failed`)}>
|
||||
<GoogleLogo />
|
||||
<p>Continue with Google</p>
|
||||
</button>
|
||||
|
||||
<button on:click={() => account.createOAuth2Session('facebook', `${location.origin}/`, `${location.origin}/register/failed`)}>
|
||||
<p>Continue with Facebook</p>
|
||||
</button>
|
||||
</div>
|
||||
<SocialLogin />
|
||||
|
||||
<div class="LR_switch">
|
||||
<p>Already have an account? <a href="/login">Log In</a></p>
|
||||
|
|
Loading…
Reference in New Issue