this repo has no description
lewis.moe
1<script lang="ts">
2 import { _ } from '../../lib/i18n'
3
4 interface Props {
5 passkeyName: string
6 loading: boolean
7 error: string | null
8 onPasskeyNameChange: (name: string) => void
9 onRegister: () => void
10 }
11
12 let {
13 passkeyName,
14 loading,
15 error,
16 onPasskeyNameChange,
17 onRegister,
18 }: Props = $props()
19</script>
20
21<div class="step-content">
22 <h2>{$_('migration.inbound.passkeySetup.title')}</h2>
23 <p>{$_('migration.inbound.passkeySetup.desc')}</p>
24
25 {#if error}
26 <div class="message error">
27 {error}
28 </div>
29 {/if}
30
31 <div class="field">
32 <label for="passkey-name">{$_('migration.inbound.passkeySetup.nameLabel')}</label>
33 <input
34 id="passkey-name"
35 type="text"
36 placeholder={$_('migration.inbound.passkeySetup.namePlaceholder')}
37 value={passkeyName}
38 oninput={(e) => onPasskeyNameChange((e.target as HTMLInputElement).value)}
39 disabled={loading}
40 />
41 <p class="hint">{$_('migration.inbound.passkeySetup.nameHint')}</p>
42 </div>
43
44 <div class="passkey-section">
45 <p>{$_('migration.inbound.passkeySetup.instructions')}</p>
46 <button class="primary" onclick={onRegister} disabled={loading}>
47 {loading ? $_('migration.inbound.passkeySetup.registering') : $_('migration.inbound.passkeySetup.register')}
48 </button>
49 </div>
50</div>
51
52<style>
53 .passkey-section {
54 margin-top: 16px;
55 }
56 .passkey-section button {
57 width: 100%;
58 margin-top: 12px;
59 }
60</style>