An easy-to-host PDS on the ATProtocol, MacOS. Grandma-approved.
feat(identity-wallet): add HandleScreen component
authored by
Tangled
92b56ed7
170e2179
+98
+98
apps/identity-wallet/src/lib/components/onboarding/HandleScreen.svelte
+98
apps/identity-wallet/src/lib/components/onboarding/HandleScreen.svelte
···
1
+
<script lang="ts">
2
+
let {
3
+
value = $bindable(''),
4
+
onnext,
5
+
error = undefined,
6
+
}: {
7
+
value: string;
8
+
onnext: () => void;
9
+
error?: string;
10
+
} = $props();
11
+
12
+
let isValid = $derived(value.trim().length > 0);
13
+
</script>
14
+
15
+
<div class="screen">
16
+
<h2>Choose Your Handle</h2>
17
+
<p class="hint">This is your unique identifier on the network (e.g. alice.ezpds.com).</p>
18
+
19
+
<input
20
+
type="text"
21
+
class:error={!!error}
22
+
placeholder="alice"
23
+
autocomplete="off"
24
+
autocorrect="off"
25
+
autocapitalize="none"
26
+
spellcheck={false}
27
+
bind:value
28
+
/>
29
+
30
+
{#if error}
31
+
<p class="error-text">{error}</p>
32
+
{/if}
33
+
34
+
<button disabled={!isValid} onclick={onnext}>Create Account</button>
35
+
</div>
36
+
37
+
<style>
38
+
.screen {
39
+
display: flex;
40
+
flex-direction: column;
41
+
align-items: center;
42
+
padding: 2rem;
43
+
gap: 1rem;
44
+
height: 100%;
45
+
justify-content: center;
46
+
}
47
+
48
+
h2 {
49
+
font-size: 1.5rem;
50
+
font-weight: 700;
51
+
margin: 0;
52
+
}
53
+
54
+
.hint {
55
+
font-size: 0.9rem;
56
+
color: #6b7280;
57
+
text-align: center;
58
+
margin: 0;
59
+
}
60
+
61
+
input {
62
+
width: 100%;
63
+
max-width: 320px;
64
+
padding: 1rem;
65
+
font-size: 1rem;
66
+
border: 2px solid #d1d5db;
67
+
border-radius: 12px;
68
+
}
69
+
70
+
input.error {
71
+
border-color: #ef4444;
72
+
}
73
+
74
+
.error-text {
75
+
color: #ef4444;
76
+
font-size: 0.875rem;
77
+
margin: 0;
78
+
text-align: center;
79
+
}
80
+
81
+
button {
82
+
width: 100%;
83
+
max-width: 320px;
84
+
padding: 1rem;
85
+
background: #007aff;
86
+
color: #fff;
87
+
border: none;
88
+
border-radius: 12px;
89
+
font-size: 1rem;
90
+
font-weight: 600;
91
+
cursor: pointer;
92
+
}
93
+
94
+
button:disabled {
95
+
background: #9ca3af;
96
+
cursor: not-allowed;
97
+
}
98
+
</style>