sendnrw/pocket-id
2
0
Fork 0
mirror of https://github.com/pocket-id/pocket-id.git synced 2026-03-30 11:16:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: auto-focus on the login buttons (#647)

Browse Source
This commit is contained in:
Alessandro (Ale) Segala
2025-06-10 12:13:36 -07:00
committed by GitHub
parent fd3c76ffa3
commit d6795300b1
3 changed files with 25 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/src/routes/authorize/+page.svelte
View File

@@ -138,14 +138,20 @@
</Card.Root>
</div>
{/if}
<div class="flex w-full max-w-[450px] gap-2">
<Button onclick={() => history.back()} class="flex-1" variant="secondary">{m.cancel()}</Button
>
<!-- Flex flow is reversed so the sign in button, which has auto-focus, is the first one in the DOM, for a11y -->
<div class="flex w-full max-w-[450px] gap-2 flex-row-reverse">
{#if !errorMessage}
<Button class="flex-1" {isLoading} onclick={authorize}>{m.sign_in()}</Button>
<Button class="flex-1" {isLoading} onclick={authorize} autofocus={true}>
{m.sign_in()}
</Button>
{:else}
<Button class="flex-1" onclick={() => (errorMessage = null)}>{m.try_again()}</Button>
<Button class="flex-1" onclick={() => (errorMessage = null)}>
{m.try_again()}
</Button>
{/if}
<Button onclick={() => history.back()} class="flex-1" variant="secondary">
{m.cancel()}
</Button>
</div>
</SignInWrapper>
{/if}

6
frontend/src/routes/login/+page.svelte
View File

@@ -52,7 +52,7 @@
{m.authenticate_yourself_with_your_passkey_to_access_the_admin_panel()}
</p>
{/if}
<Button class="mt-10" {isLoading} onclick={authenticate}
>{error ? m.try_again() : m.authenticate()}</Button
>
<Button class="mt-10" {isLoading} onclick={authenticate} autofocus={true}>
{error ? m.try_again() : m.authenticate()}
</Button>
</SignInWrapper>