93 lines
5.2 KiB
Plaintext
93 lines
5.2 KiB
Plaintext
import Button from "./button.wrn"
|
|
import Checkbox from "./Checkbox.wrn"
|
|
import Input from "./Input.wrn"
|
|
import PinInput from "./PinInput.wrn"
|
|
|
|
component AuthForm {
|
|
outputs {
|
|
submit(payload: { event: Event; mode: string; action: string })
|
|
change(payload: { value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)
|
|
input(payload: { value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)
|
|
focus(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object })
|
|
blur(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object })
|
|
}
|
|
|
|
props {
|
|
size: string = "default"
|
|
color: string = "primary"
|
|
mode: string = "sign-in"
|
|
action: string = "/api/auth/login"
|
|
method: string = "post"
|
|
title: string = "Sign in"
|
|
description: string = ""
|
|
returnTo: string = ""
|
|
schema: string = ""
|
|
showRemember: boolean = true
|
|
showName: boolean = true
|
|
submitLabel: string = "Continue"
|
|
class: string = ""
|
|
}
|
|
|
|
functions {
|
|
shared function schemaName() {
|
|
if (schema) return schema
|
|
if (mode === "sign-in") return "auth-login"
|
|
if (mode === "register") return "auth-register"
|
|
if (mode === "recover") return "auth-password-request"
|
|
if (mode === "reset") return "auth-password-reset"
|
|
if (mode === "mfa") return "auth-mfa"
|
|
return "auth-empty"
|
|
}
|
|
|
|
client function submitForm(event) {
|
|
output.submit({ event: event, mode: mode, action: action })
|
|
}
|
|
client function fieldEvent(type, payload) {
|
|
const detail = payload || {}
|
|
output[type]({ sourceEvent: detail.sourceEvent, name: detail.name || "", value: detail.value || "" })
|
|
}
|
|
}
|
|
|
|
view {
|
|
<section class="wire-auth-form wire-next--color-{color} wire-next--size-{size} {class}">
|
|
<header>
|
|
<span class="wire-auth-form__icon icon-[lucide--fingerprint]" aria-hidden="true"></span>
|
|
<div><h2>{title}</h2>{#if description}<p>{description}</p>{/if}</div>
|
|
</header>
|
|
<form
|
|
action="{action}"
|
|
method="{method}"
|
|
data-schema="{schemaName()}"
|
|
data-wrnexus-runtime="auth"
|
|
novalidate="true"
|
|
@submit="submitForm(event)"
|
|
>
|
|
{#if returnTo}<input type="hidden" name="returnTo" value="{returnTo}" />{/if}
|
|
{#if mode === "register" && showName}
|
|
<Input label="Full name" name="displayName" autocomplete="name" placeholder="Enter your full name" required="true" icon="icon-[lucide--user-round]" iconPosition="start" @change="fieldEvent('change', payload)" @input="fieldEvent('input', payload)" @focus="fieldEvent('focus', payload)" @blur="fieldEvent('blur', payload)" />
|
|
{/if}
|
|
{#if mode === "sign-in" || mode === "register" || mode === "recover"}
|
|
<Input label="{mode === 'recover' ? 'Registered email or mobile' : 'Email, mobile, or username'}" name="{mode === 'recover' ? 'identifier' : mode === 'register' ? 'email' : 'identifier'}" type="{mode === 'register' ? 'email' : 'text'}" autocomplete="{mode === 'register' ? 'email' : 'username'}" placeholder="{mode === 'recover' ? 'Enter your registered identity' : 'Enter your identity'}" required="true" icon="icon-[lucide--at-sign]" iconPosition="start" @change="fieldEvent('change', payload)" @input="fieldEvent('input', payload)" @focus="fieldEvent('focus', payload)" @blur="fieldEvent('blur', payload)" />
|
|
{/if}
|
|
{#if mode === "sign-in" || mode === "register" || mode === "reset"}
|
|
<Input label="{mode === 'reset' ? 'New password' : 'Password'}" name="password" type="password" autocomplete="{mode === 'sign-in' ? 'current-password' : 'new-password'}" placeholder="Enter your password" required="true" icon="icon-[lucide--lock-keyhole]" iconPosition="start" @change="fieldEvent('change', payload)" @input="fieldEvent('input', payload)" @focus="fieldEvent('focus', payload)" @blur="fieldEvent('blur', payload)" />
|
|
{/if}
|
|
{#if mode === "register" || mode === "reset"}
|
|
<Input label="Confirm password" name="confirmPassword" type="password" autocomplete="new-password" placeholder="Enter the password again" required="true" icon="icon-[lucide--shield-check]" iconPosition="start" @change="fieldEvent('change', payload)" @input="fieldEvent('input', payload)" @focus="fieldEvent('focus', payload)" @blur="fieldEvent('blur', payload)" />
|
|
{/if}
|
|
{#if mode === "mfa"}
|
|
<PinInput label="Verification code" name="code" length={6} inputMode="numeric" />
|
|
{/if}
|
|
{#if mode === "sign-in" && showRemember}
|
|
<div class="wire-auth-form__options">
|
|
<Checkbox label="Remember this device" name="rememberDevice" value="on" />
|
|
<a href="/forgot-password">Forgot password?</a>
|
|
</div>
|
|
{/if}
|
|
<Button type="submit" label="{submitLabel}" variant="default" color="{color}" size="lg" fullWidth="true" icon="icon-[lucide--arrow-right]" iconPosition="end" class="wire-auth-form__submit" />
|
|
</form>
|
|
<slot />
|
|
</section>
|
|
}
|
|
}
|