An easy-to-host PDS on the ATProtocol, MacOS. Grandma-approved.
feat(identity-wallet): add EmailScreen component
authored by
Tangled
170e2179
764515e5
+97
+97
apps/identity-wallet/src/lib/components/onboarding/EmailScreen.svelte
+97
apps/identity-wallet/src/lib/components/onboarding/EmailScreen.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
+
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
13
+
let isValid = $derived(emailRegex.test(value));
14
+
</script>
15
+
16
+
<div class="screen">
17
+
<h2>Enter Your Email</h2>
18
+
<p class="hint">We'll associate this email with your new account.</p>
19
+
20
+
<input
21
+
type="email"
22
+
class:error={!!error}
23
+
placeholder="you@example.com"
24
+
autocomplete="email"
25
+
inputmode="email"
26
+
bind:value
27
+
/>
28
+
29
+
{#if error}
30
+
<p class="error-text">{error}</p>
31
+
{/if}
32
+
33
+
<button disabled={!isValid} onclick={onnext}>Next</button>
34
+
</div>
35
+
36
+
<style>
37
+
.screen {
38
+
display: flex;
39
+
flex-direction: column;
40
+
align-items: center;
41
+
padding: 2rem;
42
+
gap: 1rem;
43
+
height: 100%;
44
+
justify-content: center;
45
+
}
46
+
47
+
h2 {
48
+
font-size: 1.5rem;
49
+
font-weight: 700;
50
+
margin: 0;
51
+
}
52
+
53
+
.hint {
54
+
font-size: 0.9rem;
55
+
color: #6b7280;
56
+
text-align: center;
57
+
margin: 0;
58
+
}
59
+
60
+
input {
61
+
width: 100%;
62
+
max-width: 320px;
63
+
padding: 1rem;
64
+
font-size: 1rem;
65
+
border: 2px solid #d1d5db;
66
+
border-radius: 12px;
67
+
}
68
+
69
+
input.error {
70
+
border-color: #ef4444;
71
+
}
72
+
73
+
.error-text {
74
+
color: #ef4444;
75
+
font-size: 0.875rem;
76
+
margin: 0;
77
+
text-align: center;
78
+
}
79
+
80
+
button {
81
+
width: 100%;
82
+
max-width: 320px;
83
+
padding: 1rem;
84
+
background: #007aff;
85
+
color: #fff;
86
+
border: none;
87
+
border-radius: 12px;
88
+
font-size: 1rem;
89
+
font-weight: 600;
90
+
cursor: pointer;
91
+
}
92
+
93
+
button:disabled {
94
+
background: #9ca3af;
95
+
cursor: not-allowed;
96
+
}
97
+
</style>