From 029c7e183af423bb441f3245457d9b3e5b8da981 Mon Sep 17 00:00:00 2001
From: Ota Prokopec <otaprokopec@gmail.com>
Date: Thu, 6 Apr 2023 15:18:17 +0200
Subject: [PATCH] input register fix

---
 src/lib/components/Inputs/Input.svelte        | 68 ++++++++++++-----
 .../Components/SocialLogin.svelte             | 76 +++++++++++++++++++
 src/routes/authorization/login/log_in.svelte  | 15 ++--
 .../authorization/register/register.svelte    | 35 +++++----
 4 files changed, 150 insertions(+), 44 deletions(-)
 create mode 100644 src/routes/authorization/Components/SocialLogin.svelte

diff --git a/src/lib/components/Inputs/Input.svelte b/src/lib/components/Inputs/Input.svelte
index bb288dc..901cc42 100644
--- a/src/lib/components/Inputs/Input.svelte
+++ b/src/lib/components/Inputs/Input.svelte
@@ -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>
diff --git a/src/routes/authorization/Components/SocialLogin.svelte b/src/routes/authorization/Components/SocialLogin.svelte
new file mode 100644
index 0000000..ce25fa6
--- /dev/null
+++ b/src/routes/authorization/Components/SocialLogin.svelte
@@ -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>
diff --git a/src/routes/authorization/login/log_in.svelte b/src/routes/authorization/login/log_in.svelte
index 0362ae8..bbe001a 100644
--- a/src/routes/authorization/login/log_in.svelte
+++ b/src/routes/authorization/login/log_in.svelte
@@ -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-->
diff --git a/src/routes/authorization/register/register.svelte b/src/routes/authorization/register/register.svelte
index b952e35..e035c07 100644
--- a/src/routes/authorization/register/register.svelte
+++ b/src/routes/authorization/register/register.svelte
@@ -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>