35 lines
1.7 KiB
Plaintext
35 lines
1.7 KiB
Plaintext
component PasskeyButton {
|
|
props {
|
|
mode = "authenticate"
|
|
label = "Continue with a passkey"
|
|
registerLabel = "Add a passkey"
|
|
identifier = ""
|
|
rpId = ""
|
|
rpName = "WRNexusJS"
|
|
passkeyName = "Passkey"
|
|
optionsEndpoint = ""
|
|
verifyEndpoint = ""
|
|
redirect = ""
|
|
mfaHref = "/two-factor"
|
|
conditional = false
|
|
fullWidth = false
|
|
loadingMessage = "Waiting for your passkey…"
|
|
successMessage = "Passkey verified."
|
|
color = "primary"
|
|
size = "md"
|
|
class = ""
|
|
@event passkeyRegistered = function
|
|
@event passkeyAuthenticated = function
|
|
@event error = function
|
|
}
|
|
view {
|
|
<div {...attrs} data-wrnexus-runtime="auth" data-auth-passkey='{mode}' data-identifier='{identifier}' data-rp-id='{rpId}' data-rp-name='{rpName}' data-passkey-name='{passkeyName}' data-options-endpoint='{optionsEndpoint}' data-verify-endpoint='{verifyEndpoint}' data-redirect='{redirect}' data-mfa-href='{mfaHref}' data-conditional='{conditional}' data-loading-message='{loadingMessage}' data-success-message='{successMessage}' data-auth-state="idle" aria-busy="false" class='space-y-2 {class}'>
|
|
<button type="button" class='inline-flex h-11 items-center justify-center gap-2 rounded-[var(--wire-radius-sm)] border border-[var(--wire-color-border)] bg-[var(--wire-color-surface)] px-4 text-sm font-semibold text-[var(--wire-color-text)] hover:bg-[var(--wire-color-surface-2)] disabled:cursor-wait disabled:opacity-60 {fullWidth ? "w-full" : ""}'>
|
|
<span aria-hidden="true" class="icon-[lucide--key-round] size-4"></span>
|
|
{mode == "register" ? registerLabel : label}
|
|
</button>
|
|
<p data-auth-status hidden role="status" class="m-0 text-xs text-[var(--wire-color-muted)]"></p>
|
|
</div>
|
|
}
|
|
}
|