nikdoof/pocket-id
1
0
Fork 0
mirror of https://github.com/nikdoof/pocket-id.git synced 2025-12-14 15:22:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: improve error state design for login page

Browse Source
This commit is contained in:
Elias Schneider
2024-12-17 19:36:47 +01:00
parent 789d9394a5
commit 0716c38fb8
2 changed files with 45 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,19 +1,21 @@
<script> <script lang="ts">
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import SignInWrapper from '$lib/components/login-wrapper.svelte'; import SignInWrapper from '$lib/components/login-wrapper.svelte';
import Logo from '$lib/components/logo.svelte';
import { Button } from '$lib/components/ui/button'; import { Button } from '$lib/components/ui/button';
import WebAuthnService from '$lib/services/webauthn-service'; import WebAuthnService from '$lib/services/webauthn-service';
import appConfigStore from '$lib/stores/application-configuration-store'; import appConfigStore from '$lib/stores/application-configuration-store';
import userStore from '$lib/stores/user-store'; import userStore from '$lib/stores/user-store';
import { getWebauthnErrorMessage } from '$lib/utils/error-util'; import { getWebauthnErrorMessage } from '$lib/utils/error-util';
import { startAuthentication } from '@simplewebauthn/browser'; import { startAuthentication } from '@simplewebauthn/browser';
import { toast } from 'svelte-sonner'; import { fade } from 'svelte/transition';
import LoginLogoErrorIndicator from './components/login-logo-error-indicator.svelte';
const webauthnService = new WebAuthnService(); const webauthnService = new WebAuthnService();
let isLoading = $state(false); let isLoading = $state(false);
let error: string | undefined = $state(undefined);
async function authenticate() { async function authenticate() {
error = undefined;
isLoading = true; isLoading = true;
try { try {
const loginOptions = await webauthnService.getLoginOptions(); const loginOptions = await webauthnService.getLoginOptions();
@@ -23,7 +25,7 @@
userStore.setUser(user); userStore.setUser(user);
goto('/settings'); goto('/settings');
} catch (e) { } catch (e) {
toast.error(getWebauthnErrorMessage(e)); error = getWebauthnErrorMessage(e);
} }
isLoading = false; isLoading = false;
} }
@@ -35,15 +37,21 @@
<SignInWrapper> <SignInWrapper>
<div class="flex justify-center"> <div class="flex justify-center">
<div class="bg-muted rounded-2xl p-3"> <LoginLogoErrorIndicator error={!!error} />
<Logo class="h-10 w-10" />
</div>
</div> </div>
<h1 class="font-playfair mt-5 text-3xl font-bold sm:text-4xl"> <h1 class="font-playfair mt-5 text-3xl font-bold sm:text-4xl">
Sign in to {$appConfigStore.appName} Sign in to {$appConfigStore.appName}
</h1> </h1>
<p class="text-muted-foreground mt-2"> {#if error}
Authenticate yourself with your passkey to access the admin panel <p class="text-muted-foreground mt-2" in:fade>
{error}. Please try to sign in again.
</p> </p>
<Button class="mt-5" {isLoading} on:click={authenticate}>Authenticate</Button> {:else}
<p class="text-muted-foreground mt-2" in:fade>
Authenticate yourself with your passkey to access the admin panel.
</p>
{/if}
<Button class="mt-10" {isLoading} on:click={authenticate}
>{error ? 'Try again' : 'Authenticate'}</Button
>
</SignInWrapper> </SignInWrapper>

26
frontend/src/routes/login/components/login-logo-error-indicator.svelte Normal file
View File

@@ -0,0 +1,26 @@
<script lang="ts">
import Logo from '$lib/components/logo.svelte';
import CrossAnimated from '$lib/icons/cross-animated.svelte';
import { fade } from 'svelte/transition';
const {
error
}: {
error: boolean;
} = $props();
</script>
<div
class="rounded-2xl p-3 transition-[background-color] duration-300
{error ? 'bg-red-200' : 'bg-muted'}"
>
{#if error}
<div class="flex h-10 w-10 items-center justify-center">
<CrossAnimated class="h-5 w-5" />
</div>
{:else}
<div in:fade={{ duration: 300 }}>
<Logo class="h-10 w-10" />
</div>
{/if}
</div>