login - register fix (loading, structure ,error)

package-lock.json

@@ -11,8 +11,11 @@
         "@beyonk/svelte-mapbox": "^8.1.4",
         "@bytemd/plugin-gfm": "^1.17.4",
         "@lottiefiles/svelte-lottie-player": "^0.3.0",
+        "@popperjs/core": "^2.11.6",
         "appwrite": "^10.1.0",
         "bytemd": "^1.17.4",
+        "classnames": "^2.3.2",
+        "flowbite": "^1.6.3",
         "html5-qrcode": "^2.3.0",
         "mapbox": "^1.0.0-beta10",
         "mapbox-gl": "^2.10.0",
@@ -31,7 +34,7 @@
         "eslint-plugin-import": "^2.27.5",
         "eslint-plugin-n": "^15.6.1",
         "eslint-plugin-promise": "^6.1.1",
-        "flowbite-svelte": "^0.28.4",
+        "flowbite-svelte": "^0.28.11",
         "postcss": "^8.4.19",
         "sass": "^1.56.1",
         "svelte": "^3.52.0",
@@ -1758,8 +1761,7 @@
     "node_modules/classnames": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
-      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==",
+      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
-      "dev": true
     },
     "node_modules/cli-color": {
       "version": "2.0.3",
@@ -3195,24 +3197,23 @@
       "dev": true
     },
     "node_modules/flowbite": {
-      "version": "1.5.4",
+      "version": "1.6.3",
-      "resolved": "https://registry.npmjs.org/flowbite/-/flowbite-1.5.4.tgz",
+      "resolved": "https://registry.npmjs.org/flowbite/-/flowbite-1.6.3.tgz",
-      "integrity": "sha512-A4VTeJE+aHSbwrMzWvpTADhNgX8Njpb3DqRL26pFkOupklPg8cmNstZK8cXrFnBPxomOiX/OazZnhQM1BIZADQ==",
+      "integrity": "sha512-wTtAzZBLrUYqUBoTSNcMAeJrZNAcdx04EDgXWnkQ7gkKoAPFvLaq/H/Zw0JKZLVKFpKxqJ7PlvocfDApSHjhvw==",
-      "dev": true,
       "dependencies": {
         "@popperjs/core": "^2.9.3",
         "mini-svg-data-uri": "^1.4.3"
       }
     },
     "node_modules/flowbite-svelte": {
-      "version": "0.28.4",
+      "version": "0.28.11",
-      "resolved": "https://registry.npmjs.org/flowbite-svelte/-/flowbite-svelte-0.28.4.tgz",
+      "resolved": "https://registry.npmjs.org/flowbite-svelte/-/flowbite-svelte-0.28.11.tgz",
-      "integrity": "sha512-7E/LJrM1TdOSdn+mhp4Vx4hROEgO9ymXjZK+c87/qa/29VgQZTG9cqMtYFB9XormbCSxgffxTLGk4F1NiN4rgA==",
+      "integrity": "sha512-wbpJvqRJj9UcZfYX1UJwRaculY1teMBU24TltgOd/edHi07wbT3ooJpFqurf8G1yToWHbIMD672ws31EplYj+w==",
       "dev": true,
       "dependencies": {
         "@popperjs/core": "^2.11.6",
         "classnames": "^2.3.2",
-        "flowbite": "^1.5.3"
+        "flowbite": "^1.5.5"
       },
       "engines": {
         "node": ">=16.0.0",
@@ -5175,7 +5176,6 @@
       "version": "1.4.4",
       "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz",
       "integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==",
-      "dev": true,
       "bin": {
         "mini-svg-data-uri": "cli.js"
       }
@@ -8398,8 +8398,7 @@
     "classnames": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
-      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==",
+      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
-      "dev": true
     },
     "cli-color": {
       "version": "2.0.3",
@@ -9397,24 +9396,23 @@
       "dev": true
     },
     "flowbite": {
-      "version": "1.5.4",
+      "version": "1.6.3",
-      "resolved": "https://registry.npmjs.org/flowbite/-/flowbite-1.5.4.tgz",
+      "resolved": "https://registry.npmjs.org/flowbite/-/flowbite-1.6.3.tgz",
-      "integrity": "sha512-A4VTeJE+aHSbwrMzWvpTADhNgX8Njpb3DqRL26pFkOupklPg8cmNstZK8cXrFnBPxomOiX/OazZnhQM1BIZADQ==",
+      "integrity": "sha512-wTtAzZBLrUYqUBoTSNcMAeJrZNAcdx04EDgXWnkQ7gkKoAPFvLaq/H/Zw0JKZLVKFpKxqJ7PlvocfDApSHjhvw==",
-      "dev": true,
       "requires": {
         "@popperjs/core": "^2.9.3",
         "mini-svg-data-uri": "^1.4.3"
       }
     },
     "flowbite-svelte": {
-      "version": "0.28.4",
+      "version": "0.28.11",
-      "resolved": "https://registry.npmjs.org/flowbite-svelte/-/flowbite-svelte-0.28.4.tgz",
+      "resolved": "https://registry.npmjs.org/flowbite-svelte/-/flowbite-svelte-0.28.11.tgz",
-      "integrity": "sha512-7E/LJrM1TdOSdn+mhp4Vx4hROEgO9ymXjZK+c87/qa/29VgQZTG9cqMtYFB9XormbCSxgffxTLGk4F1NiN4rgA==",
+      "integrity": "sha512-wbpJvqRJj9UcZfYX1UJwRaculY1teMBU24TltgOd/edHi07wbT3ooJpFqurf8G1yToWHbIMD672ws31EplYj+w==",
       "dev": true,
       "requires": {
         "@popperjs/core": "^2.11.6",
         "classnames": "^2.3.2",
-        "flowbite": "^1.5.3"
+        "flowbite": "^1.5.5"
       }
     },
     "for-each": {
@@ -10744,8 +10742,7 @@
     "mini-svg-data-uri": {
       "version": "1.4.4",
       "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz",
-      "integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==",
+      "integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg=="
-      "dev": true
     },
     "minimatch": {
       "version": "3.1.2",

package.json

@@ -19,7 +19,7 @@
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-n": "^15.6.1",
     "eslint-plugin-promise": "^6.1.1",
-    "flowbite-svelte": "^0.28.4",
+    "flowbite-svelte": "^0.28.11",
     "postcss": "^8.4.19",
     "sass": "^1.56.1",
     "svelte": "^3.52.0",
@@ -32,8 +32,11 @@
     "@beyonk/svelte-mapbox": "^8.1.4",
     "@bytemd/plugin-gfm": "^1.17.4",
     "@lottiefiles/svelte-lottie-player": "^0.3.0",
+    "@popperjs/core": "^2.11.6",
     "appwrite": "^10.1.0",
     "bytemd": "^1.17.4",
+    "classnames": "^2.3.2",
+    "flowbite": "^1.6.3",
     "html5-qrcode": "^2.3.0",
     "mapbox": "^1.0.0-beta10",
     "mapbox-gl": "^2.10.0",

src/__routes.svelte

@@ -54,7 +54,7 @@
 		},
 		{
 			path: '/login',
-			component: () => import('$routes/log_in.svelte'),
+			component: () => import('$routes/login/log_in.svelte'),
 		},
 		{
 			path: '/register',

src/lib/components/Inputs/Hidden_Input.svelte

@@ -5,7 +5,7 @@
 	export let placeholder = ''
 	export let value = ''
 
-	export let input
+	export let input = null
 	let vissible = false
 
 	function changeVisibility(i) {

src/routes/login/log_in.svelte

@@ -1,21 +1,32 @@
-<script>
+<script lang="ts">
 	import { account, user } from '$lib/appwrite'
+	import Button from '$lib/components/Buttons/Button.svelte'
+	import Loading from '$lib/components/Common/Loading.svelte'
 	import { navigate } from 'svelte-routing'
-	import HiddenInput from '../lib/components/Inputs/Hidden_Input.svelte'
+	import HiddenInput from '../../lib/components/Inputs/Hidden_Input.svelte'
-	import GoogleLogo from '../lib/svg/GoogleLogo.svelte'
+	import GoogleLogo from '../../lib/svg/GoogleLogo.svelte'
-	import TopImage from '../lib/svg/Top-Image.svelte'
+	import TopImage from '../../lib/svg/Top-Image.svelte'
+	import { Alert, Helper } from 'flowbite-svelte'
 
 	export let purpose = 'login' //possible values login, register
 
 	let email = ''
 	let password = ''
 
-	$: console.log($user)
+	let state: 'loading' | 'basic' = 'basic'
+	let error: string | null = null
 
 	const emailLogin = async () => {
-		await user.createEmailSession(email, password)
+		state = 'loading'
-		//if (navigation.canGoBack) navigation.back()
+		error = null
-		navigate('/')
+		try {
+			await user.createEmailSession(email, password)
+			//if (navigation.canGoBack) navigation.back()
+			navigate('/')
+		} catch (err) {
+			error = JSON.parse(JSON.stringify(err)).response.message
+			state = 'basic'
+		}
 	}
 </script>
 
@@ -36,11 +47,20 @@
 
 	<!--2 forms from components-->
 	<div class="form">
-		<form>
+		{#if error}
+			<Helper color="red">{error}</Helper>
+		{/if}
+		<div class="inform">
 			<input bind:value={email} type="text" placeholder="E-mail" autocomplete="email" required />
 			<HiddenInput bind:value={password} placeholder="Password" />
-			<input on:click={() => emailLogin()} type="button" value="Sign in" />
+			<button class="loginButton" on:click={() => emailLogin()}>
-		</form>
+				{#if state === 'loading'}
+					<Loading class="text-white" />
+				{:else}
+					Sign in
+				{/if}
+			</button>
+		</div>
 	</div>
 
 	<div class="continue_with">
@@ -158,7 +178,7 @@
 				width: calc(100% - 24px);
 			}
 
-			form {
+			.inform {
 				display: flex;
 				flex-direction: column;
 				align-items: center;
@@ -194,7 +214,7 @@
 					line-height: 28px;
 				}
 
-				input[type='button'] {
+				.loginButton {
 					background-color: #4263eb;
 					color: white;
 

src/routes/register/register.svelte

@@ -4,6 +4,7 @@
 	import { navigate } from '$lib/router'
 	import Error from '$root/src/__error.svelte'
 	import { ID } from 'appwrite'
+	import { Helper } from 'flowbite-svelte'
 	import HiddenInput from '../../lib/components/Inputs/Hidden_Input.svelte'
 	import GoogleLogo from '../../lib/svg/GoogleLogo.svelte'
 	import TopImage from '../../lib/svg/Top-Image.svelte'
@@ -15,22 +16,25 @@
 	let erantId = ''
 
 	let state: 'email-sent' | 'register' | 'loading' = 'register'
+	let error: string | null = null
 
 	const register = async () => {
 		//if (password === repeatPassword || name.length < 8 || email.length < 8) throw new Error('conditions are not fine')
 		try {
 			state = 'loading'
+			error = null
 			await account.create(ID.unique(), email, password, name)
 			await account.createEmailSession(email, password)
 			await account.createVerification(`${location.origin}/register/emailverification/${erantId}`)
 			state = 'email-sent'
-		} catch (error) {
+		} catch (err) {
+			error = JSON.parse(JSON.stringify(err)).response.message
 			state = 'register'
 		}
 	}
 </script>
 
-{#if state === 'register'}
+{#if state !== 'email-sent'}
 	<div class="main">
 		<div class="top-image">
 			<TopImage />
@@ -39,14 +43,23 @@
 		<h1 class="headline">Register</h1>
 
 		<div class="form">
-			<form>
+			{#if error}
+				<Helper color="red">{error}</Helper>
+			{/if}
+			<div class="inform">
 				<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="erantId" 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" />
+				<button class="loginButton" on:click={() => register()}>
-			</form>
+					{#if state === 'loading'}
+						<Loading class="text-white" />
+					{:else}
+						Sign in
+					{/if}
+				</button>
+			</div>
 		</div>
 
 		<div class="continue_with">
@@ -64,12 +77,8 @@
 			<p>Already have an account? <a href="/login">Log In</a></p>
 		</div>
 	</div>
-{:else if state === 'email-sent'}
+{:else}
-	<div class="w-full h-full flex justify-center items-center">email has been sent</div>
+	<div class="w-full h-full flex justify-center items-center absolute">email has been sent</div>
-{:else if state === 'loading'}
-	<div class="w-full h-full flex items-center justify-center">
-		<Loading />
-	</div>
 {/if}
 
 <style lang="scss">
@@ -166,7 +175,7 @@
 				width: calc(100% - 24px);
 			}
 
-			form {
+			.inform {
 				display: flex;
 				flex-direction: column;
 				align-items: center;
@@ -202,7 +211,7 @@
 					line-height: 28px;
 				}
 
-				input[type='button'] {
+				.loginButton {
 					background-color: #4263eb;
 					color: white;
 

tailwind.config.cjs

@@ -1,8 +1,9 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-	content: ['./index.html', './src/**/*.{html,svelte,js,ts}'],
+	content: ['./index.html', './src/**/*.{html,svelte,js,ts}', './node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}'],
 	theme: {
 		extend: {},
 	},
-	plugins: [],
+	plugins: [require('flowbite/plugin')],
+	darkMode: 'class',
 }