Add svelte as a view engine to swaf #33
@ -3,6 +3,7 @@
|
|||||||
import BaseLayout from "../layouts/BaseLayout.svelte";
|
import BaseLayout from "../layouts/BaseLayout.svelte";
|
||||||
import Form from "../utils/Form.svelte";
|
import Form from "../utils/Form.svelte";
|
||||||
import Field from "../utils/Field.svelte";
|
import Field from "../utils/Field.svelte";
|
||||||
|
import Icon from "../utils/Icon.svelte";
|
||||||
|
|
||||||
let registerUsingMagicLink = $locals.previousFormData()?.['auth_method'] !== 'password';
|
let registerUsingMagicLink = $locals.previousFormData()?.['auth_method'] !== 'password';
|
||||||
let loginUsingMagicLink = true;
|
let loginUsingMagicLink = true;
|
||||||
@ -25,16 +26,17 @@
|
|||||||
<h2><i data-feather="log-in"></i> Log in</h2>
|
<h2><i data-feather="log-in"></i> Log in</h2>
|
||||||
|
|
||||||
<Form action={$locals.route('login') + queryStr} submitText="Authenticate" submitIcon="log-in">
|
<Form action={$locals.route('login') + queryStr} submitText="Authenticate" submitIcon="log-in">
|
||||||
<Field type="text" name="identifier" value={$locals.query?.identifier}
|
<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/>
|
placeholder="Your email address or username" required/>
|
||||||
|
|
||||||
{#if !loginUsingMagicLink}
|
{#if !loginUsingMagicLink}
|
||||||
<Field type="password" name="password" placeholder="Your password" required/>
|
<Field type="password" name="password" placeholder="Your password" icon="key" required/>
|
||||||
<button on:click={() => loginUsingMagicLink=true} type="button">Use magic link</button>
|
<button on:click={() => loginUsingMagicLink=true} type="button"><Icon name="link"/> Use magic link</button>
|
||||||
{:else}
|
{:else}
|
||||||
<button on:click={() => loginUsingMagicLink=false} type="button">Use password</button>
|
<button on:click={() => loginUsingMagicLink=false} type="button"><Icon name="key"/> Use password</button>
|
||||||
{/if}
|
{/if}
|
||||||
<Field type="checkbox" name="persist_session" placeholder="Stay logged in on this computer."/>
|
<Field type="checkbox" name="persist_session" icon="clock" placeholder="Stay logged in on this computer."/>
|
||||||
</Form>
|
</Form>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
@ -45,21 +47,23 @@
|
|||||||
<Field type="hidden" name="auth_method" value={registerUsingMagicLink ? 'magic_link': 'password'}/>
|
<Field type="hidden" name="auth_method" value={registerUsingMagicLink ? 'magic_link': 'password'}/>
|
||||||
|
|
||||||
{#if $locals.has_username}
|
{#if $locals.has_username}
|
||||||
<Field type="text" name={registerUsingMagicLink ? 'name' : 'identifier'}
|
<Field type="text" name={registerUsingMagicLink ? 'name' : 'identifier'} icon="user"
|
||||||
placeholder="Choose your username" hint="This cannot be changed later."
|
placeholder="Choose your username" hint="This cannot be changed later."
|
||||||
pattern="[0-9a-z_-]+" required/>
|
pattern="[0-9a-z_-]+" required/>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
{#if registerUsingMagicLink}
|
{#if registerUsingMagicLink}
|
||||||
<Field type="email" name="identifier" placeholder="Your email address" required/>
|
<Field type="email" name="identifier" icon="at-sign" placeholder="Your email address"
|
||||||
<button on:click={() => registerUsingMagicLink=false} type="button">Use password instead</button>
|
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}
|
{:else}
|
||||||
<Field type="password" name="password" placeholder="Choose a password" required/>
|
<Field type="password" name="password" icon="key" placeholder="Choose a password" required/>
|
||||||
<Field type="password" name="password_confirmation" placeholder="Confirm your password" required/>
|
<Field type="password" name="password_confirmation" icon="key" placeholder="Confirm your password" required/>
|
||||||
<button on:click={() => registerUsingMagicLink=true} type="button">Use email address instead</button>
|
<button on:click={() => registerUsingMagicLink=true} type="button"><Icon name="at-sign"/>Use email address instead</button>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<Field type="checkbox" name="terms" required>
|
<Field type="checkbox" name="terms" icon="file-text" required>
|
||||||
I accept the <a href="/terms-of-services" target="_blank">Terms Of Services</a>.
|
I accept the <a href="/terms-of-services" target="_blank">Terms Of Services</a>.
|
||||||
</Field>
|
</Field>
|
||||||
</Form>
|
</Form>
|
||||||
|
Loading…
Reference in New Issue
Block a user