46 lines
1.8 KiB
Plaintext
46 lines
1.8 KiB
Plaintext
import { Button } from "@wrnexus/ui"
|
|
|
|
component PasskeyButton {
|
|
outputs {
|
|
passkeyRegistered(payload: { credentialId: string; response?: object })
|
|
passkeyAuthenticated(payload: { userId?: string; sessionId?: string; response?: object })
|
|
error(payload: { code: string; message: string })
|
|
}
|
|
|
|
props {
|
|
mode: string = "authenticate"
|
|
label: string = "Continue with a passkey"
|
|
registerLabel: string = "Add a passkey"
|
|
identifier: string = ""
|
|
rpId: string = ""
|
|
rpName: string = "WRNexusJS"
|
|
passkeyName: string = "Passkey"
|
|
optionsEndpoint: string = ""
|
|
verifyEndpoint: string = ""
|
|
redirect: string = ""
|
|
mfaHref: string = "/two-factor"
|
|
conditional: boolean = false
|
|
fullWidth: boolean = false
|
|
loadingMessage: string = "Waiting for your passkey…"
|
|
successMessage: string = "Passkey verified."
|
|
color: string = "primary"
|
|
size: string = "md"
|
|
class: string = ""
|
|
}
|
|
|
|
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"
|
|
label='{mode == "register" ? registerLabel : label}'
|
|
icon="icon-[lucide--key-round]"
|
|
variant="outline"
|
|
color='{color}'
|
|
size='{size}'
|
|
fullWidth='{fullWidth}'
|
|
/>
|
|
<p data-auth-status hidden role="status" class="m-0 text-xs text-[var(--wrn-color-muted)]"></p>
|
|
</div>
|
|
}
|
|
}
|