this repo has no description
lewis.moe
1<script lang="ts">
2 import { _ } from '../../lib/i18n'
3
4 interface Props {
5 appPassword: string
6 appPasswordName: string
7 loading: boolean
8 onContinue: () => void
9 }
10
11 let {
12 appPassword,
13 appPasswordName,
14 loading,
15 onContinue,
16 }: Props = $props()
17
18 let copied = $state(false)
19 let acknowledged = $state(false)
20
21 function copyPassword() {
22 navigator.clipboard.writeText(appPassword)
23 copied = true
24 }
25</script>
26
27<div class="step-content">
28 <h2>{$_('migration.inbound.appPassword.title')}</h2>
29 <p>{$_('migration.inbound.appPassword.desc')}</p>
30
31 <div class="warning-box">
32 <strong>{$_('migration.inbound.appPassword.warning')}</strong>
33 </div>
34
35 <div class="app-password-display">
36 <div class="app-password-label">
37 {$_('migration.inbound.appPassword.label')}: <strong>{appPasswordName}</strong>
38 </div>
39 <code class="app-password-code">{appPassword}</code>
40 <button type="button" class="copy-btn" onclick={copyPassword}>
41 {copied ? $_('common.copied') : $_('common.copyToClipboard')}
42 </button>
43 </div>
44
45 <label class="checkbox-label">
46 <input type="checkbox" bind:checked={acknowledged} />
47 <span>{$_('migration.inbound.appPassword.saved')}</span>
48 </label>
49
50 <div class="button-row">
51 <button onclick={onContinue} disabled={!acknowledged || loading}>
52 {loading ? $_('migration.inbound.common.continue') : $_('migration.inbound.appPassword.continue')}
53 </button>
54 </div>
55</div>
56
57<style>
58 .app-password-display {
59 background: var(--bg-card);
60 border: 2px solid var(--accent);
61 border-radius: var(--radius-xl);
62 padding: var(--space-6);
63 text-align: center;
64 margin: var(--space-4) 0;
65 }
66 .app-password-label {
67 font-size: var(--text-sm);
68 color: var(--text-secondary);
69 margin-bottom: var(--space-4);
70 }
71 .app-password-code {
72 display: block;
73 font-size: var(--text-xl);
74 font-family: ui-monospace, monospace;
75 letter-spacing: 0.1em;
76 padding: var(--space-5);
77 background: var(--bg-input);
78 border-radius: var(--radius-md);
79 margin-bottom: var(--space-4);
80 user-select: all;
81 }
82 .copy-btn {
83 padding: var(--space-3) var(--space-5);
84 font-size: var(--text-sm);
85 }
86</style>