38 lines
2.3 KiB
Plaintext
38 lines
2.3 KiB
Plaintext
import { Alert, Button, Card } from "@wrnexus/ui"
|
|
|
|
component RecoveryCodes {
|
|
props {
|
|
codes: unknown[] = []
|
|
schema: string = "auth-recovery-codes"
|
|
title: string = "Recovery codes"
|
|
description: string = "Store these codes somewhere safe. Each code can be used once."
|
|
downloadLabel: string = "Download codes"
|
|
regenerateLabel: string = "Generate new codes"
|
|
regenerateAction: string = "/api/auth/recovery-codes"
|
|
successMessage: string = "New recovery codes generated. Previous unused codes are no longer valid."
|
|
count: number = 10
|
|
color: string = "primary"
|
|
size: string = "md"
|
|
class: string = ""
|
|
}
|
|
|
|
view {
|
|
<Card {...attrs} title='{title}' description='{description}' color='{color}' size='{size}' class='w-full max-w-xl {class}' data-wrnexus-runtime="auth" data-auth-recovery-codes data-recovery-filename="wrnexus-recovery-codes.txt">
|
|
<Alert title="Keep these codes private" description="Anyone with a recovery code may be able to access your account." icon="icon-[lucide--shield-alert]" color="warning" variant="soft" size="sm" />
|
|
<div data-recovery-code-list class="mt-4 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" label='{downloadLabel}' icon="icon-[lucide--download]" variant="outline" color='{color}' size='{size}' data-recovery-download />
|
|
<form method="post" action='{regenerateAction}' data-schema='{schema}' novalidate class="min-w-48 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 text-xs text-[var(--wire-color-success)]">{successMessage}</p>
|
|
<Button type="submit" label='{regenerateLabel}' icon="icon-[lucide--refresh-cw]" variant="outline" color='{color}' size='{size}' fullWidth="true" />
|
|
</form>
|
|
</div>
|
|
</Card>
|
|
}
|
|
}
|