login, register, user reactive, creating user

src/__routes.svelte

@@ -64,13 +64,18 @@
 			path: '/register/failed',
 			component: () => import('$routes/register/registerFailed.svelte'),
 		},
+
+		{
+			path: '/register/emailverification/:erantId',
+			component: () => import('$routes/register/emailVerification.svelte'),
+		},
+		{
+			path: '/create/account/:erantId/',
+			component: () => import('$routes/register/createAccount.svelte'),
+		},
 		{
 			path: '/:gameurl',
 			component: () => import('$routes/game/game.svelte'),
 		},
-		{
-			path: '/create/account',
-			component: () => import('$routes/game/game.svelte'),
-		},
 	]}
 />

src/routes/log_in.svelte

@@ -13,7 +13,7 @@
 	$: console.log($user)
 
 	const emailLogin = async () => {
-		await account.createEmailSession(email, password)
+		await user.createEmailSession(email, password)
 		//if (navigation.canGoBack) navigation.back()
 		navigate('/')
 	}

src/routes/register/createAccount.svelte

@@ -1,4 +1,23 @@
-<script>
+<script lang="ts">
+	import { user } from '$lib/appwrite'
+	import collections from '$lib/collections'
+	import Loading from '$lib/components/Common/Loading.svelte'
+	import { navigate } from '$lib/router'
+	import { Permission, Role } from 'appwrite'
+	export let params
+	;(async () => {
+		await collections.users.createDocument(
+			{
+				erantId: params.erantId,
+				userName: $user.name,
+				userId: $user.$id,
+			},
+			[Permission.delete(Role.user($user.$id)), Permission.update(Role.user($user.$id))],
+		)
+		navigate('/')
+	})()
 </script>
 
-<div />
+<div class="w-full h-full flex items-center justify-center">
+	<Loading />
+</div>

src/routes/register/emailVerification.svelte

@@ -1,14 +1,24 @@
-<script>
+<script lang="ts">
+	import { user } from '$lib/appwrite'
+	import Loading from '$lib/components/Common/Loading.svelte'
+	import { navigate } from '$lib/router'
+
+	export let params
+
 	//register email verification
 	const urlParams = new URLSearchParams(location.search)
 	const userId = urlParams.get('userId')
 	const secret = urlParams.get('secret')
 	;(async () => {
 		try {
-			await account.updateVerification(userId, secret)
+			await user.updateVerification(userId, secret)
-			navigate('/')
+			navigate(`/create/account/${params.erantId}`)
 		} catch (err) {
 			console.log(err)
 		}
 	})()
 </script>
+
+<div class="w-full h-full flex items-center justify-center">
+	<Loading />
+</div>

src/routes/register/register.svelte

@@ -1,5 +1,7 @@
-<script>
+<script lang="ts">
 	import { account, user } from '$lib/appwrite'
+	import Loading from '$lib/components/Common/Loading.svelte'
+	import { navigate } from '$lib/router'
 	import Error from '$root/src/__error.svelte'
 	import { ID } from 'appwrite'
 	import HiddenInput from '../../lib/components/Inputs/Hidden_Input.svelte'
@@ -10,51 +12,65 @@
 	let password = 'aaaaaaaa'
 	let repeatPassword = 'aaaaaaaa'
 	let name = 'test'
+	let erantId = '@otik'
+
+	let state: 'email-sent' | 'register' | 'loading' = 'register'
 
 	const register = async () => {
 		//if (password === repeatPassword || name.length < 8 || email.length < 8) throw new Error('conditions are not fine')
 		try {
+			state = 'loading'
 			await account.create(ID.unique(), email, password, name)
 			await account.createEmailSession(email, password)
-			await account.createVerification(`${location.origin}/`)
+			await account.createVerification(`${location.origin}/register/emailverification/${erantId}`)
+			state = 'email-sent'
 		} catch (error) {
-			console.log(error)
+			state = 'register'
 		}
 	}
 </script>
 
-<div class="main">
+{#if state === 'register'}
-	<div class="top-image">
+	<div class="main">
-		<TopImage />
+		<div class="top-image">
+			<TopImage />
+		</div>
+
+		<h1 class="headline">Register</h1>
+
+		<div class="form">
+			<form>
+				<input bind:value={name} type="text" placeholder="Name" autocomplete="full-name" required />
+				<input bind:value={email} type="text" placeholder="E-mail" autocomplete="email" required />
+				<input bind:value={erantId} type="text" placeholder="E-mail" autocomplete="email" required />
+				<HiddenInput bind:value={password} placeholder="Password" />
+				<HiddenInput bind:value={repeatPassword} placeholder="Re-type password" />
+				<input class="cursor-pointer" on:click={() => register()} type="button" value="Sign up" />
+			</form>
+		</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>
+
+		<div class="LR_switch">
+			<p>Already have an account? <a href="/login">Log In</a></p>
+		</div>
 	</div>
-
+{:else if state === 'email-sent'}
-	<h1 class="headline">Register</h1>
+	<div class="w-full h-full flex justify-center items-center">email has been sent</div>
-
+{:else if state === 'loading'}
-	<div class="form">
+	<div class="w-full h-full flex items-center justify-center">
-		<form>
+		<Loading />
-			<input bind:value={name} type="text" placeholder="Name" autocomplete="full-name" required />
-			<input bind:value={email} type="text" placeholder="E-mail" autocomplete="email" required />
-			<HiddenInput bind:value={password} placeholder="Password" />
-			<HiddenInput bind:value={repeatPassword} placeholder="Re-type password" />
-			<input class="cursor-pointer" on:click={() => register()} type="button" value="Sign up" />
-		</form>
 	</div>
-
+{/if}
-	<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>
-
-	<div class="LR_switch">
-		<p>Already have an account? <a href="/login">Log In</a></p>
-	</div>
-</div>
 
 <style lang="scss">
 	$gap: 20px;