mirror of
https://github.com/appwrite/console.git
synced 2026-06-06 19:27:48 +00:00
feat: invite screens
This commit is contained in:
Arman
+1
-1
@@ -23,7 +23,7 @@
|
||||
"@appwrite.io/pink": "0.25.0",
|
||||
"@appwrite.io/pink-icons": "0.25.0",
|
||||
"@appwrite.io/pink-icons-svelte": "1.0.0-next.7",
|
||||
"@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@3114ccc",
|
||||
"@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@9bf8175",
|
||||
"@popperjs/core": "^2.11.8",
|
||||
"@sentry/sveltekit": "^8.38.0",
|
||||
"@stripe/stripe-js": "^3.5.0",
|
||||
|
||||
Generated
+9
-9
@@ -21,8 +21,8 @@ importers:
|
||||
specifier: 1.0.0-next.7
|
||||
version: 1.0.0-next.7(svelte@4.2.19)
|
||||
'@appwrite.io/pink-svelte':
|
||||
specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@3114ccc
|
||||
version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@3114ccc(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)
|
||||
specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@9bf8175
|
||||
version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@9bf8175(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)
|
||||
'@popperjs/core':
|
||||
specifier: ^2.11.8
|
||||
version: 2.11.8
|
||||
@@ -223,8 +223,8 @@ packages:
|
||||
peerDependencies:
|
||||
svelte: ^4.0.0
|
||||
|
||||
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@3114ccc0b95c9d94385c06730b7aeaef7b4a81fc':
|
||||
resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@3114ccc0b95c9d94385c06730b7aeaef7b4a81fc}
|
||||
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@9bf8175bdcd6ed9f4614a76521d80963e75171cb':
|
||||
resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@9bf8175bdcd6ed9f4614a76521d80963e75171cb}
|
||||
version: 1.0.0-next.7
|
||||
peerDependencies:
|
||||
svelte: ^4.0.0
|
||||
@@ -232,8 +232,8 @@ packages:
|
||||
'@appwrite.io/pink-icons@0.25.0':
|
||||
resolution: {integrity: sha512-0O3i2oEuh5mWvjO80i+X6rbzrWLJ1m5wmv2/M3a1p2PyBJsFxN8xQMTEmTn3Wl/D26SsM7SpzbdW6gmfgoVU9Q==}
|
||||
|
||||
'@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@3114ccc':
|
||||
resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@3114ccc}
|
||||
'@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@9bf8175':
|
||||
resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@9bf8175}
|
||||
version: 1.0.0-next.85
|
||||
peerDependencies:
|
||||
react-dom: ^18.0.0
|
||||
@@ -4087,15 +4087,15 @@ snapshots:
|
||||
dependencies:
|
||||
svelte: 4.2.19
|
||||
|
||||
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@3114ccc0b95c9d94385c06730b7aeaef7b4a81fc(svelte@4.2.19)':
|
||||
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@9bf8175bdcd6ed9f4614a76521d80963e75171cb(svelte@4.2.19)':
|
||||
dependencies:
|
||||
svelte: 4.2.19
|
||||
|
||||
'@appwrite.io/pink-icons@0.25.0': {}
|
||||
|
||||
'@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@3114ccc(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)':
|
||||
'@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@9bf8175(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)':
|
||||
dependencies:
|
||||
'@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@3114ccc0b95c9d94385c06730b7aeaef7b4a81fc(svelte@4.2.19)
|
||||
'@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@9bf8175bdcd6ed9f4614a76521d80963e75171cb(svelte@4.2.19)
|
||||
'@floating-ui/dom': 1.6.13
|
||||
'@melt-ui/svelte': 0.83.0(svelte@4.2.19)
|
||||
pretty-bytes: 6.1.1
|
||||
|
||||
@@ -1,10 +1,64 @@
|
||||
<script>
|
||||
import { Container } from '$lib/layout';
|
||||
import { app } from '$lib/stores/app';
|
||||
import { loading } from '$routes/store';
|
||||
import { Typography } from '@appwrite.io/pink-svelte';
|
||||
|
||||
loading.set(false);
|
||||
</script>
|
||||
|
||||
<Container>
|
||||
<slot />
|
||||
</Container>
|
||||
<div class="auth-bg">
|
||||
<div>
|
||||
<Container>
|
||||
<slot />
|
||||
</Container>
|
||||
</div>
|
||||
<footer>
|
||||
<!-- TODO: change text style to eyebrow -->
|
||||
<Typography.Text size="s" color="--color-fgColor-neutral-secondary">
|
||||
POWERED BY
|
||||
</Typography.Text>
|
||||
{#if $app.themeInUse === 'dark'}
|
||||
<img
|
||||
src="/console/images/appwrite-logo-dark.svg"
|
||||
width="120"
|
||||
height="22"
|
||||
alt="Appwrite Logo" />
|
||||
{:else}
|
||||
<img
|
||||
src="/console/images/appwrite-logo-light.svg"
|
||||
width="120"
|
||||
height="22"
|
||||
alt="Appwrite Logo" />
|
||||
{/if}
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.auth-bg {
|
||||
position: fixed;
|
||||
background: var(--color-bgcolor-neutral-primary, #fff);
|
||||
background-size: cover;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
justify-content: space-between;
|
||||
div {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
footer {
|
||||
padding: 2rem 1rem;
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,227 +1,28 @@
|
||||
<script lang="ts">
|
||||
import { invalidate } from '$app/navigation';
|
||||
import { goto } from '$app/navigation';
|
||||
import { base } from '$app/paths';
|
||||
import { page } from '$app/stores';
|
||||
import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
|
||||
import { Card } from '$lib/components';
|
||||
import Modal from '$lib/components/modal.svelte';
|
||||
import { Dependencies } from '$lib/constants';
|
||||
import { Link } from '$lib/elements';
|
||||
import {
|
||||
Button,
|
||||
Form,
|
||||
InputChoice,
|
||||
InputEmail,
|
||||
InputPassword,
|
||||
InputText
|
||||
} from '$lib/elements/forms';
|
||||
import { logout } from '$lib/helpers/logout';
|
||||
import { addNotification } from '$lib/stores/notifications';
|
||||
import { sdk } from '$lib/stores/sdk';
|
||||
import { user } from '$lib/stores/user';
|
||||
import { isCloud } from '$lib/system';
|
||||
import { redirectTo } from '$routes/store';
|
||||
import { ID, OAuthProvider } from '@appwrite.io/console';
|
||||
import { Layout } from '@appwrite.io/pink-svelte';
|
||||
import { Layout, Spinner, Typography } from '@appwrite.io/pink-svelte';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
export let data;
|
||||
onMount(async () => {
|
||||
//check if user has access
|
||||
//if not, redirect to login
|
||||
|
||||
let state: 'register' | 'login' | 'authenticated' = 'login';
|
||||
let hasAccess = false;
|
||||
let mail: string;
|
||||
let pass: string;
|
||||
let terms = false;
|
||||
let name: string;
|
||||
|
||||
onMount(() => {
|
||||
if (data?.account?.$id) {
|
||||
//Check if they have access
|
||||
|
||||
state = 'authenticated';
|
||||
}
|
||||
//simulate login
|
||||
setTimeout(() => {
|
||||
goto(`${base}/auth/preview/access`);
|
||||
}, 3000);
|
||||
});
|
||||
|
||||
async function login() {
|
||||
try {
|
||||
await sdk.forConsole.account.createEmailPasswordSession(mail, pass);
|
||||
await invalidate(Dependencies.ACCOUNT);
|
||||
trackEvent(Submit.AccountLogin);
|
||||
if ($user) {
|
||||
addNotification({
|
||||
type: 'success',
|
||||
message: 'Successfully logged in.'
|
||||
});
|
||||
}
|
||||
if ($redirectTo) {
|
||||
window.location.href = $redirectTo;
|
||||
return;
|
||||
}
|
||||
} catch (error) {
|
||||
addNotification({
|
||||
type: 'error',
|
||||
message: error.message
|
||||
});
|
||||
trackError(error, Submit.AccountLogin);
|
||||
}
|
||||
}
|
||||
|
||||
async function register() {
|
||||
try {
|
||||
await sdk.forConsole.account.create(ID.unique(), mail, pass, name ?? '');
|
||||
await sdk.forConsole.account.createEmailPasswordSession(mail, pass);
|
||||
|
||||
if ($redirectTo) {
|
||||
window.location.href = $redirectTo;
|
||||
return;
|
||||
}
|
||||
|
||||
await invalidate(Dependencies.ACCOUNT);
|
||||
trackEvent(Submit.AccountCreate);
|
||||
} catch (error) {
|
||||
addNotification({
|
||||
type: 'error',
|
||||
message: error.message
|
||||
});
|
||||
trackError(error, Submit.AccountCreate);
|
||||
}
|
||||
}
|
||||
|
||||
function onGithubAuth() {
|
||||
let url = window.location.origin;
|
||||
|
||||
if ($page.url.searchParams) {
|
||||
const redirect = $page.url.searchParams.get('redirect');
|
||||
$page.url.searchParams.delete('redirect');
|
||||
if (redirect) {
|
||||
url = `${redirect}${$page.url.search}`;
|
||||
} else {
|
||||
url = `${base}${$page.url.search ?? ''}`;
|
||||
}
|
||||
}
|
||||
sdk.forConsole.account.createOAuth2Session(
|
||||
OAuthProvider.Github,
|
||||
window.location.origin + url,
|
||||
window.location.origin,
|
||||
['read:user', 'user:email']
|
||||
);
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
if (state === 'login') {
|
||||
await login();
|
||||
} else if (state === 'register') {
|
||||
await register();
|
||||
}
|
||||
}
|
||||
|
||||
async function requestAccess() {
|
||||
//TODO: Implement request access
|
||||
}
|
||||
|
||||
$: console.log(data);
|
||||
</script>
|
||||
|
||||
<Modal
|
||||
title={state === 'authenticated' ? 'Request access' : 'Sign up or log in to view this preview'}
|
||||
dismissible={false}
|
||||
show
|
||||
hideFooter={state !== 'authenticated'}>
|
||||
<Form onSubmit={handleSubmit}>
|
||||
<Layout.Stack gap="l">
|
||||
{#if state === 'login'}
|
||||
<InputEmail
|
||||
id="email"
|
||||
label="Email"
|
||||
placeholder="Email"
|
||||
autofocus
|
||||
required
|
||||
bind:value={mail} />
|
||||
<InputPassword
|
||||
id="password"
|
||||
label="Password"
|
||||
placeholder="Password"
|
||||
required
|
||||
meter={false}
|
||||
showPasswordButton
|
||||
bind:value={pass} />
|
||||
<Button size="m" fullWidth submit>Sign in</Button>
|
||||
{#if isCloud}
|
||||
<span class="with-separators eyebrow-heading-3">or</span>
|
||||
<Button size="m" secondary fullWidth on:click={onGithubAuth}>
|
||||
<span class="icon-github" aria-hidden="true" />
|
||||
<span class="text">Sign in with GitHub</span>
|
||||
</Button>
|
||||
{/if}
|
||||
<Button size="m" text fullWidth on:click={() => (state = 'register')}>
|
||||
Sign up instead
|
||||
</Button>
|
||||
{:else if state === 'register'}
|
||||
<InputText
|
||||
id="name"
|
||||
label="Name"
|
||||
placeholder="Your name"
|
||||
autofocus
|
||||
required
|
||||
bind:value={name} />
|
||||
<InputEmail
|
||||
id="email"
|
||||
label="Email"
|
||||
placeholder="Email"
|
||||
required
|
||||
bind:value={mail} />
|
||||
<InputPassword
|
||||
id="password"
|
||||
label="Password"
|
||||
placeholder="Password"
|
||||
required
|
||||
meter={false}
|
||||
showPasswordButton
|
||||
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 <a
|
||||
class="link"
|
||||
href="https://appwrite.io/privacy"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer">
|
||||
Privacy Policy</a>
|
||||
and accept our
|
||||
<a
|
||||
class="link"
|
||||
href="https://appwrite.io/terms"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer">General Terms of Use</a
|
||||
>.</InputChoice>
|
||||
<Button size="m" fullWidth submit>Sign up</Button>
|
||||
{#if isCloud}
|
||||
<span class="with-separators eyebrow-heading-3">or</span>
|
||||
<Button size="m" secondary fullWidth on:click={onGithubAuth}>
|
||||
<span class="icon-github" aria-hidden="true" />
|
||||
<span class="text">Continue with GitHub</span>
|
||||
</Button>
|
||||
{/if}
|
||||
<Button size="m" text fullWidth on:click={() => (state = 'login')}>
|
||||
Sign in instead
|
||||
</Button>
|
||||
{:else if state === 'authenticated'}
|
||||
<Card isTile>
|
||||
<Layout.Stack gap="xxs">
|
||||
<p>
|
||||
You're signed in as <b>{data.account.email}</b>
|
||||
</p>
|
||||
<Link
|
||||
size="s"
|
||||
on:click={() => {
|
||||
logout();
|
||||
state = 'login';
|
||||
}}>Swith account</Link>
|
||||
</Layout.Stack>
|
||||
</Card>
|
||||
{/if}
|
||||
</Layout.Stack>
|
||||
</Form>
|
||||
<svelte:head>
|
||||
<title>Preview - Appwrite</title>
|
||||
</svelte:head>
|
||||
|
||||
<svelte:fragment slot="footer">
|
||||
<Button>Request access</Button>
|
||||
</svelte:fragment>
|
||||
</Modal>
|
||||
<Layout.Stack alignItems="center" justifyContent="center">
|
||||
<Layout.Stack direction="row" alignItems="center" justifyContent="center">
|
||||
<Spinner size="l" />
|
||||
<Typography.Text>Authenticating...</Typography.Text>
|
||||
</Layout.Stack>
|
||||
<Typography.Title>Please wait while we authenticate you</Typography.Title>
|
||||
</Layout.Stack>
|
||||
|
||||
@@ -1,7 +1,14 @@
|
||||
import { base } from '$app/paths';
|
||||
import { redirect } from '@sveltejs/kit';
|
||||
|
||||
export const load = async ({ parent }) => {
|
||||
const { account } = await parent();
|
||||
|
||||
return {
|
||||
account
|
||||
};
|
||||
if (!account) {
|
||||
redirect(303, `${base}/auth/preview/access`);
|
||||
} else {
|
||||
return {
|
||||
account
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
@@ -0,0 +1,245 @@
|
||||
<script lang="ts">
|
||||
import { invalidate } from '$app/navigation';
|
||||
import { base } from '$app/paths';
|
||||
import { page } from '$app/stores';
|
||||
import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
|
||||
import { Card } from '$lib/components';
|
||||
import Modal from '$lib/components/modal.svelte';
|
||||
import { Dependencies } from '$lib/constants';
|
||||
import { Link } from '$lib/elements';
|
||||
import {
|
||||
Button,
|
||||
Form,
|
||||
InputChoice,
|
||||
InputEmail,
|
||||
InputPassword,
|
||||
InputText
|
||||
} from '$lib/elements/forms';
|
||||
import { logout } from '$lib/helpers/logout';
|
||||
import { addNotification } from '$lib/stores/notifications';
|
||||
import { sdk } from '$lib/stores/sdk';
|
||||
import { user } from '$lib/stores/user';
|
||||
import { isCloud } from '$lib/system';
|
||||
import { redirectTo } from '$routes/store';
|
||||
import { ID, OAuthProvider } from '@appwrite.io/console';
|
||||
import { Layout } from '@appwrite.io/pink-svelte';
|
||||
import { onMount } from 'svelte';
|
||||
import BGDark from './bg_dark.jpg';
|
||||
import BGLight from './bg_light.jpg';
|
||||
import { app } from '$lib/stores/app.js';
|
||||
|
||||
export let data;
|
||||
|
||||
let state: 'register' | 'login' | 'authenticated' = 'login';
|
||||
let mail: string;
|
||||
let pass: string;
|
||||
let terms = false;
|
||||
let name: string;
|
||||
|
||||
onMount(() => {
|
||||
if (data?.account?.$id) {
|
||||
state = 'authenticated';
|
||||
}
|
||||
});
|
||||
|
||||
async function login() {
|
||||
try {
|
||||
await sdk.forConsole.account.createEmailPasswordSession(mail, pass);
|
||||
await invalidate(Dependencies.ACCOUNT);
|
||||
trackEvent(Submit.AccountLogin);
|
||||
if ($user) {
|
||||
addNotification({
|
||||
type: 'success',
|
||||
message: 'Successfully logged in.'
|
||||
});
|
||||
}
|
||||
if ($redirectTo) {
|
||||
window.location.href = $redirectTo;
|
||||
return;
|
||||
}
|
||||
} catch (error) {
|
||||
addNotification({
|
||||
type: 'error',
|
||||
message: error.message
|
||||
});
|
||||
trackError(error, Submit.AccountLogin);
|
||||
}
|
||||
}
|
||||
|
||||
async function register() {
|
||||
try {
|
||||
await sdk.forConsole.account.create(ID.unique(), mail, pass, name ?? '');
|
||||
await sdk.forConsole.account.createEmailPasswordSession(mail, pass);
|
||||
|
||||
if ($redirectTo) {
|
||||
window.location.href = $redirectTo;
|
||||
return;
|
||||
}
|
||||
|
||||
await invalidate(Dependencies.ACCOUNT);
|
||||
trackEvent(Submit.AccountCreate);
|
||||
} catch (error) {
|
||||
addNotification({
|
||||
type: 'error',
|
||||
message: error.message
|
||||
});
|
||||
trackError(error, Submit.AccountCreate);
|
||||
}
|
||||
}
|
||||
|
||||
function onGithubAuth() {
|
||||
let url = window.location.origin;
|
||||
|
||||
if ($page.url.searchParams) {
|
||||
const redirect = $page.url.searchParams.get('redirect');
|
||||
$page.url.searchParams.delete('redirect');
|
||||
if (redirect) {
|
||||
url = `${redirect}${$page.url.search}`;
|
||||
} else {
|
||||
url = `${base}${$page.url.search ?? ''}`;
|
||||
}
|
||||
}
|
||||
sdk.forConsole.account.createOAuth2Session(
|
||||
OAuthProvider.Github,
|
||||
window.location.origin + url,
|
||||
window.location.origin,
|
||||
['read:user', 'user:email']
|
||||
);
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
if (state === 'login') {
|
||||
await login();
|
||||
} else if (state === 'register') {
|
||||
await register();
|
||||
}
|
||||
}
|
||||
|
||||
async function requestAccess() {
|
||||
//TODO: Implement request access
|
||||
}
|
||||
|
||||
$: console.log(data);
|
||||
</script>
|
||||
|
||||
{#if $app.themeInUse === 'dark'}
|
||||
<img class="preview-img" src={BGDark} alt="background" aria-hidden="true" />
|
||||
{:else}
|
||||
<img class="preview-img" src={BGLight} alt="background" aria-hidden="true" />
|
||||
{/if}
|
||||
|
||||
<svelte:head>
|
||||
<title>Preview access - Appwrite</title>
|
||||
</svelte:head>
|
||||
|
||||
<Modal
|
||||
title={state === 'authenticated' ? 'Request access' : 'Sign up or log in to view this preview'}
|
||||
dismissible={false}
|
||||
show
|
||||
hideFooter={state !== 'authenticated'}>
|
||||
<Form onSubmit={handleSubmit}>
|
||||
<Layout.Stack gap="l">
|
||||
{#if state === 'login'}
|
||||
<InputEmail
|
||||
id="email"
|
||||
label="Email"
|
||||
placeholder="Email"
|
||||
autofocus
|
||||
required
|
||||
bind:value={mail} />
|
||||
<InputPassword
|
||||
id="password"
|
||||
label="Password"
|
||||
placeholder="Password"
|
||||
required
|
||||
bind:value={pass} />
|
||||
<Button size="m" fullWidth submit>Sign in</Button>
|
||||
{#if isCloud}
|
||||
<span class="with-separators eyebrow-heading-3">or</span>
|
||||
<Button size="m" secondary fullWidth on:click={onGithubAuth}>
|
||||
<span class="icon-github" aria-hidden="true" />
|
||||
<span class="text">Sign in with GitHub</span>
|
||||
</Button>
|
||||
{/if}
|
||||
<Button size="m" text fullWidth on:click={() => (state = 'register')}>
|
||||
Sign up instead
|
||||
</Button>
|
||||
{:else if state === 'register'}
|
||||
<InputText
|
||||
id="name"
|
||||
label="Name"
|
||||
placeholder="Your name"
|
||||
autofocus
|
||||
required
|
||||
bind:value={name} />
|
||||
<InputEmail
|
||||
id="email"
|
||||
label="Email"
|
||||
placeholder="Email"
|
||||
required
|
||||
bind:value={mail} />
|
||||
<InputPassword
|
||||
id="password"
|
||||
label="Password"
|
||||
placeholder="Password"
|
||||
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 <a
|
||||
class="link"
|
||||
href="https://appwrite.io/privacy"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer">
|
||||
Privacy Policy</a>
|
||||
and accept our
|
||||
<a
|
||||
class="link"
|
||||
href="https://appwrite.io/terms"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer">General Terms of Use</a
|
||||
>.</InputChoice>
|
||||
<Button size="m" fullWidth submit>Sign up</Button>
|
||||
{#if isCloud}
|
||||
<span class="with-separators eyebrow-heading-3">or</span>
|
||||
<Button size="m" secondary fullWidth on:click={onGithubAuth}>
|
||||
<span class="icon-github" aria-hidden="true" />
|
||||
<span class="text">Continue with GitHub</span>
|
||||
</Button>
|
||||
{/if}
|
||||
<Button size="m" text fullWidth on:click={() => (state = 'login')}>
|
||||
Sign in instead
|
||||
</Button>
|
||||
{:else if state === 'authenticated'}
|
||||
<Card isTile>
|
||||
<Layout.Stack gap="xxs">
|
||||
<p>
|
||||
You're signed in as <b>{data.account.email}</b>
|
||||
</p>
|
||||
<Link
|
||||
size="s"
|
||||
on:click={() => {
|
||||
logout();
|
||||
state = 'login';
|
||||
}}>Swith account</Link>
|
||||
</Layout.Stack>
|
||||
</Card>
|
||||
{/if}
|
||||
</Layout.Stack>
|
||||
</Form>
|
||||
|
||||
<svelte:fragment slot="footer">
|
||||
<Button on:click={requestAccess}>Request access</Button>
|
||||
</svelte:fragment>
|
||||
</Modal>
|
||||
|
||||
<style lang="scss">
|
||||
.preview-img {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: top left;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,7 @@
|
||||
export const load = async ({ parent }) => {
|
||||
const { account } = await parent();
|
||||
|
||||
return {
|
||||
account
|
||||
};
|
||||
};
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Reference in New Issue
Block a user