From 37755eeac9420814e5525dac6f1c8ea6674e2294 Mon Sep 17 00:00:00 2001
From: matthieu42morin <matthieu.bernard.morin@gmail.com>
Date: Sun, 12 Mar 2023 19:02:07 +0100
Subject: [PATCH]  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                 |  4 +++
 src/routes/login/forgot-pswd.svelte | 49 +++++++++++++++++++++++++++++
 src/routes/login/log_in.svelte      | 17 +++++++++-
 src/routes/register/register.svelte |  2 +-
 4 files changed, 70 insertions(+), 2 deletions(-)
 create mode 100644 src/routes/login/forgot-pswd.svelte

diff --git a/src/__routes.svelte b/src/__routes.svelte
index 963ee5b..8471594 100644
--- a/src/__routes.svelte
+++ b/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'),
+		},
 	]}
 />
diff --git a/src/routes/login/forgot-pswd.svelte b/src/routes/login/forgot-pswd.svelte
new file mode 100644
index 0000000..f07c4b1
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/routes/login/log_in.svelte b/src/routes/login/log_in.svelte
index f95514a..4effe8a 100644
--- a/src/routes/login/log_in.svelte
+++ b/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;
diff --git a/src/routes/register/register.svelte b/src/routes/register/register.svelte
index fd0e617..62a4e37 100644
--- a/src/routes/register/register.svelte
+++ b/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">