Forgot password page added

Changes to be committed:
 	modified:   src/__routes.svelte
 	new file:   src/routes/login/forgot-pswd.svelte
 	modified:   src/routes/login/log_in.svelte
 	modified:   src/routes/register/register.svelte

src/__routes.svelte

@@ -89,5 +89,9 @@
 			path: '/cookie-policy',
 			component: () => import('$routes/legal/cookie-policy.svelte'),
 		},
+		{
+			path: '/forgot-pswd',
+			component: () => import('$routes/login/forgot-pswd.svelte'),
+		},
 	]}
 />

src/routes/login/forgot-pswd.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+	import { account } 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 TopImage from '../../lib/svg/Top-Image.svelte'
+	import { Alert, Helper } from 'flowbite-svelte'
+
+	let email = ''
+	let state: 'basic' | 'loading' = 'basic'
+	let error: string | null = null
+
+	const sendRecoveryEmail = async () => {
+		state = 'loading'
+		error = null
+		try {
+			await account.createRecovery(email, `${location.origin}/reset-password`)
+			navigate('/reset-password-sent')
+		} catch (err) {
+			error = JSON.parse(JSON.stringify(err)).response.message
+			state = 'basic'
+		}
+	}
+</script>
+
+<div class="main">
+	<!--Top image static link form lib/svg-->
+	<div class="top-image">
+		<TopImage />
+	</div>
+
+	<!--Forgot password form-->
+	<h1 class="headline">Forgot Password</h1>
+	<div class="form">
+		{#if error}
+			<Helper color="red">{error}</Helper>
+		{/if}
+		<div class="inform">
+			<input bind:value={email} type="text" placeholder="E-mail" autocomplete="email" required />
+			<button class="loginButton" on:click={() => sendRecoveryEmail()}>
+				{#if state === 'loading'}
+					<Loading class="text-white" />
+				{:else}
+					Send Email
+				{/if}
+			</button>
+		</div>
+	</div>
+</div>

src/routes/login/log_in.svelte

@@ -53,6 +53,9 @@
 		<div class="inform">
 			<input bind:value={email} type="text" placeholder="E-mail" autocomplete="email" required />
 			<HiddenInput bind:value={password} placeholder="Password" />
+			<div class="forgot_password">
+				<a href="/forgot-password">Forgot password?</a>
+			</div>
 			<button class="loginButton" on:click={() => emailLogin()}>
 				{#if state === 'loading'}
 					<Loading class="text-white" />
@@ -86,7 +89,19 @@
 
 <style lang="scss">
 	$gap: 20px;
-
+	.forgot_password {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		a {
+			font-family: 'Source Sans Pro';
+			font-style: normal;
+			font-weight: 600;
+			font-size: 20px;
+			line-height: 18px;
+			color: #4263eb;
+		}
+	}
 	.main {
 		width: 100%;
 		max-height: 100vh;

src/routes/register/register.svelte

@@ -49,7 +49,7 @@
 			<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 />
+				<input bind:value={erantId} type="text" placeholder="@your_nickname" autocomplete="email" required />
 				<HiddenInput bind:value={password} placeholder="Password" />
 				<HiddenInput bind:value={repeatPassword} placeholder="Re-type password" />
 				<div class="flex items-center">