Statusphere, but in atcute and SvelteKit
atproto
svelte
sveltekit
drizzle
atcute
typescript
fix: make errors work
+8
-7
+8
-7
src/routes/login/+page.svelte
+8
-7
src/routes/login/+page.svelte
···
1
1
<script lang="ts">
2
2
import { doLogin } from '$lib/auth.remote';
3
3
4
-
const identifierIssues = $derived(doLogin.fields.identifier.issues() ?? []);
5
-
const allIssues = $derived(doLogin.fields.issues() ?? []);
6
-
const formIssue = $derived(allIssues.find((i) => i.path === undefined));
4
+
const formId = $props.id();
5
+
6
+
const formIssue = $derived(doLogin.fields.issues()?.at(0));
7
+
const identifierIssue = $derived(doLogin.fields.identifier.issues()?.at(0));
7
8
</script>
8
9
9
10
<div class="page">
···
15
16
<label for="identifier" class="label">handle</label>
16
17
<input
17
18
{...doLogin.fields.identifier.as('text')}
18
-
id="identifier"
19
19
class="input"
20
20
placeholder="alice.bsky.social"
21
21
required
22
-
aria-invalid={identifierIssues.length > 0 ? 'true' : undefined}
22
+
aria-describedby={`${formId}-identifier-validation-message`}
23
23
/>
24
-
{#if identifierIssues.length > 0}
25
-
<p class="error">{identifierIssues[0].message}</p>
24
+
25
+
{#if identifierIssue}
26
+
<p id={`${formId}-identifier-validation-message`} class="error">{identifierIssue.message}</p>
26
27
{/if}
27
28
</div>
28
29