MVP #5.3 #75
|
@ -89,5 +89,9 @@
|
||||||
path: '/cookie-policy',
|
path: '/cookie-policy',
|
||||||
component: () => import('$routes/legal/cookie-policy.svelte'),
|
component: () => import('$routes/legal/cookie-policy.svelte'),
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/forgot-pswd',
|
||||||
|
component: () => import('$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>
|
|
@ -53,6 +53,9 @@
|
||||||
<div class="inform">
|
<div class="inform">
|
||||||
<input bind:value={email} type="text" placeholder="E-mail" autocomplete="email" required />
|
<input bind:value={email} type="text" placeholder="E-mail" autocomplete="email" required />
|
||||||
<HiddenInput bind:value={password} placeholder="Password" />
|
<HiddenInput bind:value={password} placeholder="Password" />
|
||||||
|
<div class="forgot_password">
|
||||||
|
<a href="/forgot-password">Forgot password?</a>
|
||||||
|
</div>
|
||||||
<button class="loginButton" on:click={() => emailLogin()}>
|
<button class="loginButton" on:click={() => emailLogin()}>
|
||||||
{#if state === 'loading'}
|
{#if state === 'loading'}
|
||||||
<Loading class="text-white" />
|
<Loading class="text-white" />
|
||||||
|
@ -86,7 +89,19 @@
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
$gap: 20px;
|
$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 {
|
.main {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-height: 100vh;
|
max-height: 100vh;
|
||||||
|
|
|
@ -49,7 +49,7 @@
|
||||||
<div class="inform">
|
<div class="inform">
|
||||||
<input bind:value={name} type="text" placeholder="Name" autocomplete="full-name" required />
|
<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={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={password} placeholder="Password" />
|
||||||
<HiddenInput bind:value={repeatPassword} placeholder="Re-type password" />
|
<HiddenInput bind:value={repeatPassword} placeholder="Re-type password" />
|
||||||
<div class="flex items-center">
|
<div class="flex items-center">
|
||||||
|
|
Loading…
Reference in New Issue