mirror of
https://github.com/appwrite/console.git
synced 2026-06-06 19:27:48 +00:00
WIP on sign-in and register page
This commit is contained in:
ernstmul
+7
-3
@@ -7,6 +7,7 @@ type Profile = {
|
||||
hasStorage: boolean;
|
||||
hasSites: boolean;
|
||||
hasProjectProgressBars: boolean;
|
||||
hasFullPageSignup: boolean;
|
||||
};
|
||||
|
||||
export const ConsoleCloudProfile: Profile = {
|
||||
@@ -17,7 +18,8 @@ export const ConsoleCloudProfile: Profile = {
|
||||
hasMessages: true,
|
||||
hasStorage: true,
|
||||
hasSites: true,
|
||||
hasProjectProgressBars: true
|
||||
hasProjectProgressBars: true,
|
||||
hasFullPageSignup: false
|
||||
};
|
||||
|
||||
export const ConsoleSelfhostedProfile: Profile = {
|
||||
@@ -28,7 +30,8 @@ export const ConsoleSelfhostedProfile: Profile = {
|
||||
hasMessages: true,
|
||||
hasStorage: true,
|
||||
hasSites: true,
|
||||
hasProjectProgressBars: true
|
||||
hasProjectProgressBars: true,
|
||||
hasFullPageSignup: false
|
||||
};
|
||||
|
||||
export const StudioProfile: Profile = {
|
||||
@@ -39,5 +42,6 @@ export const StudioProfile: Profile = {
|
||||
hasMessages: true,
|
||||
hasStorage: true,
|
||||
hasSites: true,
|
||||
hasProjectProgressBars: false
|
||||
hasProjectProgressBars: false,
|
||||
hasFullPageSignup: true
|
||||
};
|
||||
|
||||
@@ -7,12 +7,13 @@
|
||||
import { Unauthenticated } from '$lib/layout';
|
||||
import { Dependencies } from '$lib/constants';
|
||||
import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
|
||||
import { isCloud } from '$lib/system';
|
||||
import { consoleProfile, isCloud } from '$lib/system';
|
||||
import { page } from '$app/state';
|
||||
import { OAuthProvider } from '@appwrite.io/console';
|
||||
import { redirectTo } from '$routes/store';
|
||||
import { user } from '$lib/stores/user';
|
||||
import { Layout } from '@appwrite.io/pink-svelte';
|
||||
import { Layout, Card, Modal } from '@appwrite.io/pink-svelte';
|
||||
import DesktopLight from './assets/desktop-light.png';
|
||||
|
||||
let mail: string, pass: string, disabled: boolean;
|
||||
|
||||
@@ -82,43 +83,109 @@
|
||||
<title>Sign in - Appwrite</title>
|
||||
</svelte:head>
|
||||
|
||||
<Unauthenticated coupon={data?.couponData} campaign={data?.campaign}>
|
||||
<svelte:fragment slot="title">Sign in</svelte:fragment>
|
||||
<svelte:fragment>
|
||||
<Form onSubmit={login}>
|
||||
<Layout.Stack>
|
||||
<InputEmail
|
||||
id="email"
|
||||
label="Email"
|
||||
placeholder="Email"
|
||||
autofocus={true}
|
||||
required={true}
|
||||
bind:value={mail} />
|
||||
<InputPassword
|
||||
id="password"
|
||||
label="Password"
|
||||
placeholder="Password"
|
||||
required={true}
|
||||
bind:value={pass} />
|
||||
<Button fullWidth submit {disabled}>Sign in</Button>
|
||||
{#if isCloud}
|
||||
<span class="with-separators eyebrow-heading-3">or</span>
|
||||
<Button secondary fullWidth on:click={onGithubLogin} {disabled}>
|
||||
<span class="icon-github" aria-hidden="true"></span>
|
||||
<span class="text">Sign in with GitHub</span>
|
||||
</Button>
|
||||
{/if}
|
||||
</Layout.Stack>
|
||||
</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${page?.url?.search ?? ''}`}>
|
||||
<span class="text">Sign Up</span>
|
||||
</a>
|
||||
</li>
|
||||
</svelte:fragment>
|
||||
</Unauthenticated>
|
||||
{#if consoleProfile.hasFullPageSignup}
|
||||
<main class="full-page-signup">
|
||||
<Modal title="Sign in" open dismissible={false}>
|
||||
<Form onSubmit={login}>
|
||||
<Layout.Stack>
|
||||
<InputEmail
|
||||
id="email"
|
||||
label="Email"
|
||||
placeholder="Email"
|
||||
autofocus={true}
|
||||
required={true}
|
||||
bind:value={mail} />
|
||||
<InputPassword
|
||||
id="password"
|
||||
label="Password"
|
||||
placeholder="Password"
|
||||
required={true}
|
||||
bind:value={pass} />
|
||||
<Button fullWidth submit {disabled}>Sign in</Button>
|
||||
{#if isCloud}
|
||||
<span class="with-separators eyebrow-heading-3">or</span>
|
||||
<Button secondary fullWidth on:click={onGithubLogin} {disabled}>
|
||||
<span class="icon-github" aria-hidden="true"></span>
|
||||
<span class="text">Sign in with GitHub</span>
|
||||
</Button>
|
||||
{/if}
|
||||
<Layout.Stack direction="row" justifyContent="flex-start">
|
||||
<a href={`${base}/recover`}><span class="text">Forgot Password?</span></a>
|
||||
<a href={`${base}/register${page?.url?.search ?? ''}`}>
|
||||
<span class="text">Sign Up</span>
|
||||
</a>
|
||||
</Layout.Stack>
|
||||
</Layout.Stack>
|
||||
</Form>
|
||||
</Modal>
|
||||
</main>
|
||||
<div class="overlay-image" style:background-image={`url('${DesktopLight}');`}></div>
|
||||
{:else}
|
||||
<Unauthenticated coupon={data?.couponData} campaign={data?.campaign}>
|
||||
<svelte:fragment slot="title">Sign in</svelte:fragment>
|
||||
<svelte:fragment>
|
||||
<Form onSubmit={login}>
|
||||
<Layout.Stack>
|
||||
<InputEmail
|
||||
id="email"
|
||||
label="Email"
|
||||
placeholder="Email"
|
||||
autofocus={true}
|
||||
required={true}
|
||||
bind:value={mail} />
|
||||
<InputPassword
|
||||
id="password"
|
||||
label="Password"
|
||||
placeholder="Password"
|
||||
required={true}
|
||||
bind:value={pass} />
|
||||
<Button fullWidth submit {disabled}>Sign in</Button>
|
||||
{#if isCloud}
|
||||
<span class="with-separators eyebrow-heading-3">or</span>
|
||||
<Button secondary fullWidth on:click={onGithubLogin} {disabled}>
|
||||
<span class="icon-github" aria-hidden="true"></span>
|
||||
<span class="text">Sign in with GitHub</span>
|
||||
</Button>
|
||||
{/if}
|
||||
</Layout.Stack>
|
||||
</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${page?.url?.search ?? ''}`}>
|
||||
<span class="text">Sign Up</span>
|
||||
</a>
|
||||
</li>
|
||||
</svelte:fragment>
|
||||
</Unauthenticated>
|
||||
{/if}
|
||||
|
||||
<style lang="scss">
|
||||
.full-page-signup {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
z-index: 3;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
div {
|
||||
width: 600px;
|
||||
}
|
||||
}
|
||||
|
||||
.overlay-image {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
filter: blur(4px);
|
||||
background-size: cover;
|
||||
}
|
||||
</style>
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 557 KiB |
@@ -15,11 +15,12 @@
|
||||
import { Dependencies } from '$lib/constants';
|
||||
import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
|
||||
import { ID, OAuthProvider } from '@appwrite.io/console';
|
||||
import { isCloud } from '$lib/system';
|
||||
import { consoleProfile, isCloud } from '$lib/system';
|
||||
import { page } from '$app/state';
|
||||
import { redirectTo } from '$routes/store';
|
||||
import { checkPricingRefAndRedirect } from '$lib/helpers/pricingRedirect';
|
||||
import { Layout, Link, Typography } from '@appwrite.io/pink-svelte';
|
||||
import { Layout, Link, Modal, Typography } from '@appwrite.io/pink-svelte';
|
||||
import DesktopLight from '../login/assets/desktop-light.png';
|
||||
|
||||
export let data;
|
||||
|
||||
@@ -84,58 +85,143 @@
|
||||
<title>Sign up - Appwrite</title>
|
||||
</svelte:head>
|
||||
|
||||
<Unauthenticated coupon={data?.couponData} campaign={data?.campaign}>
|
||||
<svelte:fragment slot="title">Sign up</svelte:fragment>
|
||||
<svelte:fragment>
|
||||
<Form onSubmit={register}>
|
||||
<Layout.Stack>
|
||||
<InputText
|
||||
id="name"
|
||||
label="Name"
|
||||
placeholder="Your name"
|
||||
autofocus
|
||||
required
|
||||
bind:value={name} />
|
||||
<InputEmail
|
||||
id="email"
|
||||
label="Email"
|
||||
placeholder="Your email"
|
||||
required
|
||||
bind:value={mail} />
|
||||
<InputPassword
|
||||
id="password"
|
||||
label="Password"
|
||||
placeholder="Your password"
|
||||
helper="Password must be at least 8 characters long"
|
||||
required
|
||||
bind:value={pass} />
|
||||
<InputChoice required value={terms} id="terms" label="terms" showLabel={false}>
|
||||
By registering, you agree that you have read, understand, and acknowledge our <Link.Anchor
|
||||
href="https://appwrite.io/privacy"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer">
|
||||
Privacy Policy</Link.Anchor>
|
||||
and accept our
|
||||
<Link.Anchor
|
||||
href="https://appwrite.io/terms"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer">General Terms of Use</Link.Anchor
|
||||
>.</InputChoice>
|
||||
<Button fullWidth submit {disabled}>Sign up</Button>
|
||||
{#if isCloud}
|
||||
<span class="with-separators eyebrow-heading-3">or</span>
|
||||
<Button secondary fullWidth on:click={onGithubLogin} {disabled}>
|
||||
<span class="icon-github" aria-hidden="true"></span>
|
||||
<span class="text">Sign up with GitHub</span>
|
||||
</Button>
|
||||
{/if}
|
||||
</Layout.Stack>
|
||||
</Form>
|
||||
</svelte:fragment>
|
||||
<svelte:fragment slot="links">
|
||||
<Typography.Text variant="m-400">
|
||||
Already got an account? <Link.Anchor href={`${base}/login${page?.url?.search ?? ''}`}
|
||||
>Sign in</Link.Anchor>
|
||||
</Typography.Text>
|
||||
</svelte:fragment>
|
||||
</Unauthenticated>
|
||||
{#if consoleProfile.hasFullPageSignup}
|
||||
<main class="full-page-signup">
|
||||
<Modal title="Sign up" open dismissible={false}>
|
||||
<Form onSubmit={register}>
|
||||
<Layout.Stack>
|
||||
<InputText
|
||||
id="name"
|
||||
label="Name"
|
||||
placeholder="Your name"
|
||||
autofocus
|
||||
required
|
||||
bind:value={name} />
|
||||
<InputEmail
|
||||
id="email"
|
||||
label="Email"
|
||||
placeholder="Your email"
|
||||
required
|
||||
bind:value={mail} />
|
||||
<InputPassword
|
||||
id="password"
|
||||
label="Password"
|
||||
placeholder="Your password"
|
||||
helper="Password must be at least 8 characters long"
|
||||
required
|
||||
bind:value={pass} />
|
||||
<InputChoice required value={terms} id="terms" label="terms" showLabel={false}>
|
||||
By registering, you agree that you have read, understand, and acknowledge
|
||||
our <Link.Anchor
|
||||
href="https://appwrite.io/privacy"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer">
|
||||
Privacy Policy</Link.Anchor>
|
||||
and accept our
|
||||
<Link.Anchor
|
||||
href="https://appwrite.io/terms"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer">General Terms of Use</Link.Anchor
|
||||
>.</InputChoice>
|
||||
<Button fullWidth submit {disabled}>Sign up</Button>
|
||||
{#if isCloud}
|
||||
<span class="with-separators eyebrow-heading-3">or</span>
|
||||
<Button secondary fullWidth on:click={onGithubLogin} {disabled}>
|
||||
<span class="icon-github" aria-hidden="true"></span>
|
||||
<span class="text">Sign up with GitHub</span>
|
||||
</Button>
|
||||
{/if}
|
||||
<Typography.Text variant="m-400">
|
||||
Already got an account? <Link.Anchor
|
||||
href={`${base}/login${page?.url?.search ?? ''}`}>Sign in</Link.Anchor>
|
||||
</Typography.Text>
|
||||
</Layout.Stack>
|
||||
</Form>
|
||||
</Modal>
|
||||
</main>
|
||||
<div class="overlay-image" style:background-image={`url('${DesktopLight}');`}></div>
|
||||
{:else}
|
||||
<Unauthenticated coupon={data?.couponData} campaign={data?.campaign}>
|
||||
<svelte:fragment slot="title">Sign up</svelte:fragment>
|
||||
<svelte:fragment>
|
||||
<Form onSubmit={register}>
|
||||
<Layout.Stack>
|
||||
<InputText
|
||||
id="name"
|
||||
label="Name"
|
||||
placeholder="Your name"
|
||||
autofocus
|
||||
required
|
||||
bind:value={name} />
|
||||
<InputEmail
|
||||
id="email"
|
||||
label="Email"
|
||||
placeholder="Your email"
|
||||
required
|
||||
bind:value={mail} />
|
||||
<InputPassword
|
||||
id="password"
|
||||
label="Password"
|
||||
placeholder="Your password"
|
||||
helper="Password must be at least 8 characters long"
|
||||
required
|
||||
bind:value={pass} />
|
||||
<InputChoice required value={terms} id="terms" label="terms" showLabel={false}>
|
||||
By registering, you agree that you have read, understand, and acknowledge
|
||||
our <Link.Anchor
|
||||
href="https://appwrite.io/privacy"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer">
|
||||
Privacy Policy</Link.Anchor>
|
||||
and accept our
|
||||
<Link.Anchor
|
||||
href="https://appwrite.io/terms"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer">General Terms of Use</Link.Anchor
|
||||
>.</InputChoice>
|
||||
<Button fullWidth submit {disabled}>Sign up</Button>
|
||||
{#if isCloud}
|
||||
<span class="with-separators eyebrow-heading-3">or</span>
|
||||
<Button secondary fullWidth on:click={onGithubLogin} {disabled}>
|
||||
<span class="icon-github" aria-hidden="true"></span>
|
||||
<span class="text">Sign up with GitHub</span>
|
||||
</Button>
|
||||
{/if}
|
||||
</Layout.Stack>
|
||||
</Form>
|
||||
</svelte:fragment>
|
||||
<svelte:fragment slot="links">
|
||||
<Typography.Text variant="m-400">
|
||||
Already got an account? <Link.Anchor
|
||||
href={`${base}/login${page?.url?.search ?? ''}`}>Sign in</Link.Anchor>
|
||||
</Typography.Text>
|
||||
</svelte:fragment>
|
||||
</Unauthenticated>
|
||||
{/if}
|
||||
|
||||
<style lang="scss">
|
||||
.full-page-signup {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
z-index: 3;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
div {
|
||||
width: 600px;
|
||||
}
|
||||
}
|
||||
|
||||
.overlay-image {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
filter: blur(4px);
|
||||
background-size: cover;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user