96 lines
4.3 KiB
Svelte
96 lines
4.3 KiB
Svelte
<script lang="ts">
|
|
import {locals} from "../../ts/stores.js";
|
|
import BaseTemplate from "../templates/BaseTemplate.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.flash.previousFormData?.[0]?.['auth_method'] !== 'password';
|
|
let loginUsingMagicLink = !$locals.flash.previousFormData?.[0]?.['password'];
|
|
|
|
let queryStr = '';
|
|
let previousUrl: string = $locals.previousUrl as string | undefined;
|
|
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>
|
|
|
|
<BaseTemplate title="Authentication / Registration"
|
|
description="Join {$locals.app.name} and share your files!"
|
|
h1="Authentication and registration">
|
|
|
|
{#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}
|
|
</BaseTemplate>
|