78 lines
3.9 KiB
Svelte
78 lines
3.9 KiB
Svelte
<script lang="ts">
|
|
import {locals} from "../../ts/stores.js";
|
|
import BaseLayout from "../layouts/BaseLayout.svelte";
|
|
import Form from "../utils/Form.svelte";
|
|
import Field from "../utils/Field.svelte";
|
|
import Icon from "../utils/Icon.svelte";
|
|
import {hasRoute, route} from "../../../common/Routing";
|
|
|
|
let registerUsingMagicLink = $locals.previousFormData()?.['auth_method'] !== 'password';
|
|
let loginUsingMagicLink = true;
|
|
|
|
let queryStr = '';
|
|
let previousUrl = $locals.getPreviousUrl();
|
|
if ($locals.query?.redirect_uri) {
|
|
queryStr = '?' + new URLSearchParams({redirect_uri: $locals.query?.redirect_uri}).toString();
|
|
} else if (previousUrl) {
|
|
queryStr = '?' + new URLSearchParams({redirect_uri: previousUrl}).toString();
|
|
}
|
|
</script>
|
|
|
|
<BaseLayout title="Authentication / Registration"
|
|
description="Join {$locals.app.name} and share your files!"
|
|
h1="Authentication and registration">
|
|
|
|
<div class="container">
|
|
{#if hasRoute('login')}
|
|
<section class="panel">
|
|
<h2><Icon name="log-in"/> Log in</h2>
|
|
|
|
<Form action={route('login') + queryStr} submitText="Authenticate" submitIcon="log-in">
|
|
<Field type="text" name="identifier" value={$locals.query?.identifier} icon="at-sign"
|
|
hint={loginUsingMagicLink ? 'You will receive a magic link in your mailbox. Click on the link from any device to authenticate here.' : ''}
|
|
placeholder="Your email address or username" required/>
|
|
|
|
{#if !loginUsingMagicLink}
|
|
<Field type="password" name="password" placeholder="Your password" icon="key" required/>
|
|
<button on:click={() => loginUsingMagicLink=true} type="button"><Icon name="mail"/> Use magic link</button>
|
|
{:else}
|
|
<button on:click={() => loginUsingMagicLink=false} type="button"><Icon name="key"/> Use password</button>
|
|
{/if}
|
|
<Field type="checkbox" name="persist_session" icon="clock" placeholder="Stay logged in on this computer."/>
|
|
</Form>
|
|
</section>
|
|
{/if}
|
|
|
|
{#if hasRoute('register')}
|
|
<section class="panel">
|
|
<h2><Icon name="user-plus"/> Register</h2>
|
|
|
|
<Form action={route('register') + queryStr} submitText="Register" submitIcon="check">
|
|
<Field type="hidden" name="auth_method" value={registerUsingMagicLink ? 'magic_link': 'password'}/>
|
|
|
|
{#if $locals.has_username}
|
|
<Field type="text" name={registerUsingMagicLink ? 'name' : 'identifier'} icon="user"
|
|
placeholder="Choose your username"
|
|
pattern="[0-9a-z_-]+" required/>
|
|
{/if}
|
|
|
|
{#if registerUsingMagicLink}
|
|
<Field type="email" name="identifier" icon="at-sign" placeholder="Your email address"
|
|
hint="You will receive a magic link in your mailbox. Click on the link from any device to register here."
|
|
required/>
|
|
<button on:click={() => registerUsingMagicLink=false} type="button"><Icon name="key"/>Use password</button>
|
|
{:else}
|
|
<Field type="password" name="password" icon="key" placeholder="Choose a password" required/>
|
|
<Field type="password" name="password_confirmation" icon="key" placeholder="Confirm your password" required/>
|
|
<button on:click={() => registerUsingMagicLink=true} type="button"><Icon name="at-sign"/>Use email address instead</button>
|
|
{/if}
|
|
|
|
<Field type="checkbox" name="terms" icon="file-text" required>
|
|
I accept the <a href="/terms-of-services" target="_blank">Terms Of Services</a>.
|
|
</Field>
|
|
</Form>
|
|
</section>
|
|
{/if}
|
|
</div>
|
|
</BaseLayout>
|