mirror of
https://github.com/appwrite/console.git
synced 2026-06-06 19:27:48 +00:00
feat: refactor code, update register, create recover
This commit is contained in:
Arman
@@ -7,3 +7,4 @@ export { default as Notification } from './notification.svelte';
|
||||
export { default as Notifications } from './notifications.svelte';
|
||||
export { default as Shell } from './shell.svelte';
|
||||
export { default as Breadcrumbs } from './breadcrumbs.svelte';
|
||||
export { default as Unauthenticated } from './unauthenticated.svelte';
|
||||
|
||||
@@ -0,0 +1,82 @@
|
||||
<script lang="ts">
|
||||
import AppwriteLogo from '$lib/images/appwrite.svg';
|
||||
import LoginLight from '$lib/images/login/login-light-mode.svg';
|
||||
import LoginDark from '$lib/images/login/login-dark-mode.svg';
|
||||
|
||||
const technologies = [
|
||||
'js',
|
||||
'flutter',
|
||||
'apple',
|
||||
'android',
|
||||
'node_js',
|
||||
'php',
|
||||
'python',
|
||||
'ruby',
|
||||
'dart',
|
||||
'kotlin',
|
||||
'swift'
|
||||
];
|
||||
</script>
|
||||
|
||||
<main class="grid-1-1 is-full-page" id="main">
|
||||
<section class="grid-1-1-col-1 u-flex u-flex-vertical">
|
||||
<div
|
||||
class="container u-margin-block-start-40"
|
||||
style="--p-container-max-size: var(--container-size-medium);">
|
||||
<a href="/">
|
||||
<img src={AppwriteLogo} width="196" height="47" class="u-block" alt="Appwrite" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="u-margin-block-start-auto" />
|
||||
|
||||
<div
|
||||
class="container u-margin-block-start-20"
|
||||
style="--p-container-max-size: var(--container-size-large);">
|
||||
<img src={LoginLight} alt="" class="u-only-light" />
|
||||
<img src={LoginDark} alt="" class="u-only-dark" />
|
||||
</div>
|
||||
|
||||
<div class="u-margin-block-start-auto" />
|
||||
|
||||
<div
|
||||
class="container u-text-color-light-gray is-only-desktop"
|
||||
style="--p-container-max-size:var(--container-size-small); --p-container-padding-inline:1rem;">
|
||||
<p>Integrate with your favourite technologies</p>
|
||||
<ul
|
||||
class="u-flex u-main-center u-flex-wrap u-gap-16 u-margin-block-start-32 u-line-height-1 ">
|
||||
{#each technologies as tech}
|
||||
<li>
|
||||
<span
|
||||
class={`icon-${tech} u-font-size-32`}
|
||||
aria-hidden="true"
|
||||
aria-label={tech} />
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
<div class="u-margin-block-start-40" />
|
||||
</section>
|
||||
<section class="grid-1-1-col-2 u-flex u-main-center u-cross-center">
|
||||
<div class="container u-flex u-flex-vertical u-cross-center">
|
||||
<div class="u-margin-block-start-auto" />
|
||||
|
||||
<div class="u-max-width-500 u-width-full-line">
|
||||
<h1 class="heading-level-3 u-margin-block-start-auto"><slot name="title" /></h1>
|
||||
<div class="u-margin-block-start-40">
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
<ul class="inline-links is-center is-with-sep u-margin-block-start-32">
|
||||
<slot name="links" />
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="u-margin-block-start-auto" />
|
||||
<p class="u-max-width-500 u-width-full-line u-margin-block-start-24">
|
||||
version 0.15.2.402
|
||||
</p>
|
||||
<div class="u-margin-block-start-40" />
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
+37
-106
@@ -12,9 +12,7 @@
|
||||
import { addNotification } from '$lib/stores/notifications';
|
||||
import { sdkForConsole } from '$lib/stores/sdk';
|
||||
import { user } from '$lib/stores/user';
|
||||
import AppwriteLogo from '$lib/images/appwrite.svg';
|
||||
import LoginLight from '$lib/images/login/login-light-mode.svg';
|
||||
import LoginDark from '$lib/images/login/login-dark-mode.svg';
|
||||
import { Unauthenticated } from '$lib/layout';
|
||||
|
||||
let mail: string, pass: string;
|
||||
|
||||
@@ -34,112 +32,45 @@
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const technologies = [
|
||||
'js',
|
||||
'flutter',
|
||||
'apple',
|
||||
'android',
|
||||
'node_js',
|
||||
'php',
|
||||
'python',
|
||||
'ruby',
|
||||
'dart',
|
||||
'kotlin',
|
||||
'swift'
|
||||
];
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Appwrite - Sign in</title>
|
||||
</svelte:head>
|
||||
|
||||
<main class="grid-1-1 is-full-page" id="main">
|
||||
<section class="grid-1-1-col-1 u-flex u-flex-vertical">
|
||||
<div
|
||||
class="container u-margin-block-start-40"
|
||||
style="--p-container-max-size: var(--container-size-medium);">
|
||||
<a href="/">
|
||||
<img src={AppwriteLogo} width="196" height="47" class="u-block" alt="Appwrite" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="u-margin-block-start-auto" />
|
||||
|
||||
<div
|
||||
class="container u-margin-block-start-20"
|
||||
style="--p-container-max-size: var(--container-size-large);">
|
||||
<img src={LoginLight} alt="" class="u-only-light" />
|
||||
<img src={LoginDark} alt="" class="u-only-dark" />
|
||||
</div>
|
||||
|
||||
<div class="u-margin-block-start-auto" />
|
||||
|
||||
<div
|
||||
class="container u-text-color-light-gray"
|
||||
style="--p-container-max-size:var(--container-size-small); --p-container-padding-inline:1rem;">
|
||||
<p>Integrate with your favourite technologies</p>
|
||||
<ul
|
||||
class="u-flex u-main-center u-flex-wrap u-gap-16 u-margin-block-start-32 u-line-height-1">
|
||||
{#each technologies as tech}
|
||||
<li>
|
||||
<span
|
||||
class={`icon-${tech} u-font-size-32`}
|
||||
aria-hidden="true"
|
||||
aria-label={tech} />
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
<div class="u-margin-block-start-40" />
|
||||
</section>
|
||||
<section class="grid-1-1-col-2 u-flex u-main-center u-cross-center">
|
||||
<div class="container u-flex u-flex-vertical u-cross-center">
|
||||
<div class="u-margin-block-start-auto" />
|
||||
|
||||
<div class="u-max-width-500 u-width-full-line">
|
||||
<h1 class="heading-level-3 u-margin-block-start-auto">Sign In</h1>
|
||||
<div class="u-margin-block-start-40">
|
||||
<Form on:submit={login}>
|
||||
<FormList>
|
||||
<InputEmail
|
||||
id="email"
|
||||
label="Email"
|
||||
placeholder="Email"
|
||||
showLabel={false}
|
||||
autofocus={true}
|
||||
required={true}
|
||||
bind:value={mail} />
|
||||
<InputPassword
|
||||
id="password"
|
||||
label="Password"
|
||||
placeholder="Password"
|
||||
showLabel={false}
|
||||
required={true}
|
||||
meter={false}
|
||||
bind:value={pass} />
|
||||
<FormItem>
|
||||
<Button fullWidth submit>Sign in</Button>
|
||||
</FormItem>
|
||||
</FormList>
|
||||
</Form>
|
||||
</div>
|
||||
|
||||
<ul class="inline-links is-center is-with-sep u-margin-block-start-32">
|
||||
<li class="inline-links-item">
|
||||
<a href="#/"><span class="text">Forgot Password?</span></a>
|
||||
</li>
|
||||
<li class="inline-links-item">
|
||||
<a href={`${base}/register`}><span class="text">Sign Up</span></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="u-margin-block-start-auto" />
|
||||
<p class="u-max-width-500 u-width-full-line u-margin-block-start-24">
|
||||
version 0.15.2.402
|
||||
</p>
|
||||
<div class="u-margin-block-start-40" />
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<Unauthenticated>
|
||||
<svelte:fragment slot="title">Sign in</svelte:fragment>
|
||||
<svelte:fragment>
|
||||
<Form on:submit={login}>
|
||||
<FormList>
|
||||
<InputEmail
|
||||
id="email"
|
||||
label="Email"
|
||||
placeholder="Email"
|
||||
showLabel={false}
|
||||
autofocus={true}
|
||||
required={true}
|
||||
bind:value={mail} />
|
||||
<InputPassword
|
||||
id="password"
|
||||
label="Password"
|
||||
placeholder="Password"
|
||||
showLabel={false}
|
||||
required={true}
|
||||
meter={false}
|
||||
showPasswordButton={true}
|
||||
bind:value={pass} />
|
||||
<FormItem>
|
||||
<Button fullWidth submit>Sign in</Button>
|
||||
</FormItem>
|
||||
</FormList>
|
||||
</Form></svelte:fragment>
|
||||
<svelte:fragment slot="links">
|
||||
<li class="inline-links-item">
|
||||
<a href={`${base}/recover`}><span class="text">Forgot Password?</span></a>
|
||||
</li>
|
||||
<li class="inline-links-item">
|
||||
<a href={`${base}/register`}><span class="text">Sign Up</span></a>
|
||||
</li>
|
||||
</svelte:fragment>
|
||||
</Unauthenticated>
|
||||
|
||||
@@ -0,0 +1,57 @@
|
||||
<script lang="ts">
|
||||
import { base } from '$app/paths';
|
||||
import { Button, Form, FormItem, FormList, InputEmail } from '$lib/elements/forms';
|
||||
import { addNotification } from '$lib/stores/notifications';
|
||||
import { sdkForConsole } from '$lib/stores/sdk';
|
||||
import { user } from '$lib/stores/user';
|
||||
import { Unauthenticated } from '$lib/layout';
|
||||
|
||||
let mail: string;
|
||||
const recover = async () => {
|
||||
try {
|
||||
await sdkForConsole.account.createRecovery(mail, `${base}`);
|
||||
user.fetchUser();
|
||||
addNotification({
|
||||
type: 'success',
|
||||
message: 'We have sent you an email with a password reset link'
|
||||
});
|
||||
} catch (error) {
|
||||
addNotification({
|
||||
type: 'error',
|
||||
message: error.message
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Appwrite - Recover</title>
|
||||
</svelte:head>
|
||||
|
||||
<Unauthenticated>
|
||||
<svelte:fragment slot="title">Password Recovery</svelte:fragment>
|
||||
<svelte:fragment>
|
||||
<Form on:submit={recover}>
|
||||
<FormList>
|
||||
<InputEmail
|
||||
id="email"
|
||||
label="Email"
|
||||
placeholder="Email"
|
||||
autofocus={true}
|
||||
required={true}
|
||||
bind:value={mail} />
|
||||
|
||||
<FormItem>
|
||||
<Button fullWidth submit>Recover</Button>
|
||||
</FormItem>
|
||||
</FormList>
|
||||
</Form></svelte:fragment>
|
||||
<svelte:fragment slot="links">
|
||||
<li class="inline-links-item">
|
||||
<a href={`${base}/login`}><span class="text">Sign in</span></a>
|
||||
</li>
|
||||
<li class="inline-links-item">
|
||||
<a href={`${base}/register`}><span class="text">Sign Up</span></a>
|
||||
</li>
|
||||
</svelte:fragment>
|
||||
</Unauthenticated>
|
||||
+40
-21
@@ -11,6 +11,8 @@
|
||||
} from '$lib/elements/forms';
|
||||
import { addNotification } from '$lib/stores/notifications';
|
||||
import { sdkForConsole } from '$lib/stores/sdk';
|
||||
import { Unauthenticated } from '$lib/layout';
|
||||
import FormList from '$lib/elements/forms/formList.svelte';
|
||||
|
||||
let name: string, mail: string, pass: string;
|
||||
|
||||
@@ -29,27 +31,44 @@
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Register</title>
|
||||
<title>Appwrite - Sign up</title>
|
||||
</svelte:head>
|
||||
|
||||
<h1>Register</h1>
|
||||
<Unauthenticated>
|
||||
<svelte:fragment slot="title">Sign up</svelte:fragment>
|
||||
<svelte:fragment>
|
||||
<Form on:submit={register}>
|
||||
<FormList>
|
||||
<InputText
|
||||
id="name"
|
||||
label="Name"
|
||||
placeholder="Your name"
|
||||
autofocus={true}
|
||||
bind:value={name} />
|
||||
<InputEmail
|
||||
id="email"
|
||||
label="Email"
|
||||
placeholder="Your email"
|
||||
required={true}
|
||||
bind:value={mail} />
|
||||
<InputPassword
|
||||
id="password"
|
||||
label="Password"
|
||||
placeholder="Your password"
|
||||
required={true}
|
||||
showPasswordButton={true}
|
||||
bind:value={pass} />
|
||||
|
||||
<Form on:submit={register}>
|
||||
<InputText id="name" label="Name" placeholder="John Doe" autofocus={true} bind:value={name} />
|
||||
<InputEmail
|
||||
id="email"
|
||||
label="Email"
|
||||
placeholder="test@example.com"
|
||||
required={true}
|
||||
bind:value={mail} />
|
||||
<InputPassword
|
||||
id="password"
|
||||
label="Password"
|
||||
placeholder="********"
|
||||
required={true}
|
||||
bind:value={pass} />
|
||||
|
||||
<FormItem><Button submit>Register</Button></FormItem>
|
||||
</Form>
|
||||
|
||||
<a href={`${base}/login`}>Login</a>
|
||||
<FormItem>
|
||||
<Button fullWidth submit>Sign up</Button></FormItem>
|
||||
</FormList>
|
||||
</Form>
|
||||
</svelte:fragment>
|
||||
<svelte:fragment slot="links">
|
||||
<li class="inline-links-item">
|
||||
<span class="text">
|
||||
Already got an account? <a class="link" href={`${base}/login`}>Sign in</a>
|
||||
</span>
|
||||
</li>
|
||||
</svelte:fragment>
|
||||
</Unauthenticated>
|
||||
|
||||
Reference in New Issue
Block a user