87 lines
2.9 KiB
Plaintext
87 lines
2.9 KiB
Plaintext
component RecoveryCodes {
|
|
props {
|
|
codes = []
|
|
schema = "auth-recovery-codes"
|
|
title = "Recovery codes"
|
|
description = "Store these codes somewhere safe. Each code can be used once."
|
|
downloadLabel = "Download codes"
|
|
regenerateLabel = "Generate new codes"
|
|
regenerateAction = "/api/auth/recovery-codes"
|
|
successMessage = "New recovery codes generated. Previous unused codes are no longer valid."
|
|
count = 10
|
|
color = "primary"
|
|
size = "md"
|
|
class = ""
|
|
}
|
|
|
|
view {
|
|
<section
|
|
{...attrs}
|
|
data-wrnexus-runtime="auth"
|
|
data-auth-recovery-codes
|
|
data-recovery-filename="wrnexus-recovery-codes.txt"
|
|
class='w-full max-w-xl rounded-[var(--wire-radius-lg)] border border-[var(--wire-color-border)] bg-[var(--wire-color-surface)] p-6 {class}'
|
|
>
|
|
<div class="flex items-start justify-between gap-4">
|
|
<div>
|
|
<h2 class="m-0 text-xl font-semibold">{title}</h2>
|
|
<p class="mt-1 text-sm text-[var(--wire-color-muted)]">{description}</p>
|
|
</div>
|
|
<span class="icon-[lucide--shield-keyhole] size-6 text-[var(--wire-color-primary)]"></span>
|
|
</div>
|
|
|
|
<div
|
|
data-recovery-code-list
|
|
class="mt-5 grid grid-cols-2 gap-2 rounded-[var(--wire-radius-sm)] bg-[var(--wire-color-surface-2)] p-4 font-mono text-sm sm:grid-cols-3"
|
|
>
|
|
{#each codes as code}
|
|
<code
|
|
data-recovery-code
|
|
class="rounded bg-[var(--wire-color-surface)] px-2 py-1.5 text-center"
|
|
>{code}</code>
|
|
{/each}
|
|
</div>
|
|
|
|
<div class="mt-4 flex flex-wrap gap-2">
|
|
<button
|
|
type="button"
|
|
data-recovery-download
|
|
class="h-10 rounded-[var(--wire-radius-sm)] border border-[var(--wire-color-border)] px-4 text-sm font-semibold"
|
|
>
|
|
{downloadLabel}
|
|
</button>
|
|
|
|
<form
|
|
method="post"
|
|
action='{regenerateAction}'
|
|
data-schema='{schema}'
|
|
novalidate
|
|
class="flex-1"
|
|
>
|
|
<input type="hidden" name="count" value='{count}' />
|
|
<p data-error="count" class="m-0 min-h-4 text-xs text-[var(--wire-color-danger)]"></p>
|
|
<p
|
|
data-error="_form"
|
|
role="alert"
|
|
class="m-0 hidden text-xs text-[var(--wire-color-danger)]"
|
|
></p>
|
|
<p
|
|
data-success='{successMessage}'
|
|
role="status"
|
|
hidden
|
|
class="m-0 rounded-[var(--wire-radius-sm)] bg-[color-mix(in_srgb,var(--wire-color-success)_10%,transparent)] p-3 text-xs text-[var(--wire-color-success)]"
|
|
>
|
|
{successMessage}
|
|
</p>
|
|
<button
|
|
type="submit"
|
|
class="h-10 w-full rounded-[var(--wire-radius-sm)] border border-[var(--wire-color-border)] px-4 text-sm font-semibold disabled:cursor-wait disabled:opacity-60"
|
|
>
|
|
{regenerateLabel}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</section>
|
|
}
|
|
}
|