mirror of
https://github.com/pocket-id/pocket-id.git
synced 2025-12-10 23:33:00 +03:00
fix: improve spacing on auth screens
This commit is contained in:
Elias Schneider
@@ -3,6 +3,7 @@
|
||||
import { m } from '$lib/paraglide/messages';
|
||||
import { cn } from '$lib/utils/style';
|
||||
import type { Snippet } from 'svelte';
|
||||
import { MediaQuery } from 'svelte/reactivity';
|
||||
import * as Card from './ui/card';
|
||||
|
||||
let {
|
||||
@@ -14,72 +15,75 @@
|
||||
showAlternativeSignInMethodButton?: boolean;
|
||||
animate?: boolean;
|
||||
} = $props();
|
||||
|
||||
const isDesktop = new MediaQuery('min-width: 1024px');
|
||||
</script>
|
||||
|
||||
<!-- Desktop with sliding reveal animation -->
|
||||
<div class="hidden h-screen items-center overflow-hidden text-center lg:flex">
|
||||
<!-- Content area that fades in after background slides -->
|
||||
<div
|
||||
class="relative z-10 flex h-full w-[650px] p-16 {cn(
|
||||
showAlternativeSignInMethodButton && 'pb-0',
|
||||
animate && 'animate-delayed-fade'
|
||||
)}"
|
||||
>
|
||||
<div class="flex h-full w-full flex-col overflow-hidden">
|
||||
<div class="relative flex flex-grow flex-col items-center justify-center overflow-auto">
|
||||
{@render children()}
|
||||
{#if isDesktop.current}
|
||||
<div class="h-screen items-center overflow-hidden text-center">
|
||||
<div
|
||||
class="relative z-10 flex h-full w-[650px] p-16 {cn(
|
||||
showAlternativeSignInMethodButton && 'pb-0',
|
||||
animate && 'animate-delayed-fade'
|
||||
)}"
|
||||
>
|
||||
<div class="flex h-full w-full flex-col overflow-hidden">
|
||||
<div class="relative flex flex-grow flex-col items-center justify-center overflow-auto">
|
||||
{@render children()}
|
||||
</div>
|
||||
{#if showAlternativeSignInMethodButton}
|
||||
<div
|
||||
class="mb-4 flex items-center justify-center"
|
||||
style={animate ? 'animation-delay: 1000ms;' : ''}
|
||||
>
|
||||
<a
|
||||
href={page.url.pathname == '/login'
|
||||
? '/login/alternative'
|
||||
: `/login/alternative?redirect=${encodeURIComponent(
|
||||
page.url.pathname + page.url.search
|
||||
)}`}
|
||||
class="text-muted-foreground text-xs transition-colors hover:underline"
|
||||
>
|
||||
{m.dont_have_access_to_your_passkey()}
|
||||
</a>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{#if showAlternativeSignInMethodButton}
|
||||
<div
|
||||
class="mb-4 flex items-center justify-center"
|
||||
style={animate ? 'animation-delay: 1000ms;' : ''}
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- Background image with slide animation -->
|
||||
<div class="{cn(animate && 'animate-slide-bg-container')} absolute top-0 right-0 bottom-0 z-0">
|
||||
<img
|
||||
src="/api/application-configuration/background-image"
|
||||
class="h-screen rounded-l-[60px] object-cover {animate
|
||||
? 'w-full'
|
||||
: 'w-[calc(100vw-650px)]'}"
|
||||
alt={m.login_background()}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div
|
||||
class="flex h-screen items-center justify-center bg-[url('/api/application-configuration/background-image')] bg-cover bg-center text-center"
|
||||
>
|
||||
<Card.Root class="mx-3 w-full max-w-md" style={animate ? 'animation-delay: 200ms;' : ''}>
|
||||
<Card.CardContent
|
||||
class="px-4 py-10 sm:p-10 {showAlternativeSignInMethodButton ? 'pb-3 sm:pb-3' : ''}"
|
||||
>
|
||||
{@render children()}
|
||||
{#if showAlternativeSignInMethodButton}
|
||||
<a
|
||||
href={page.url.pathname == '/login'
|
||||
? '/login/alternative'
|
||||
: `/login/alternative?redirect=${encodeURIComponent(
|
||||
page.url.pathname + page.url.search
|
||||
)}`}
|
||||
class="text-muted-foreground text-xs transition-colors hover:underline"
|
||||
class="text-muted-foreground mt-7 flex justify-center text-xs transition-colors hover:underline"
|
||||
>
|
||||
{m.dont_have_access_to_your_passkey()}
|
||||
</a>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</Card.CardContent>
|
||||
</Card.Root>
|
||||
</div>
|
||||
|
||||
<!-- Background image with slide animation -->
|
||||
<div class="{cn(animate && 'animate-slide-bg-container')} absolute top-0 right-0 bottom-0 z-0">
|
||||
<img
|
||||
src="/api/application-configuration/background-image"
|
||||
class="h-screen rounded-l-[60px] object-cover {animate ? 'w-full' : 'w-[calc(100vw-650px)]'}"
|
||||
alt={m.login_background()}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile -->
|
||||
<div
|
||||
class="flex h-screen items-center justify-center bg-[url('/api/application-configuration/background-image')] bg-cover bg-center text-center lg:hidden"
|
||||
>
|
||||
<Card.Root class="mx-3 w-full max-w-md" style={animate ? 'animation-delay: 200ms;' : ''}>
|
||||
<Card.CardContent
|
||||
class="px-4 py-10 sm:p-10 {showAlternativeSignInMethodButton ? 'pb-3 sm:pb-3' : ''}"
|
||||
>
|
||||
{@render children()}
|
||||
{#if showAlternativeSignInMethodButton}
|
||||
<a
|
||||
href={page.url.pathname == '/login'
|
||||
? '/login/alternative'
|
||||
: `/login/alternative?redirect=${encodeURIComponent(
|
||||
page.url.pathname + page.url.search
|
||||
)}`}
|
||||
class="text-muted-foreground mt-7 flex justify-center text-xs transition-colors hover:underline"
|
||||
>
|
||||
{m.dont_have_access_to_your_passkey()}
|
||||
</a>
|
||||
{/if}
|
||||
</Card.CardContent>
|
||||
</Card.Root>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@@ -103,9 +103,9 @@
|
||||
})}
|
||||
</p>
|
||||
{:else if authorizationRequired}
|
||||
<div transition:slide={{ duration: 300 }}>
|
||||
<div class="w-full max-w-[450px]" transition:slide={{ duration: 300 }}>
|
||||
<Card.Root class="mt-6 mb-10">
|
||||
<Card.Header class="pb-5">
|
||||
<Card.Header>
|
||||
<p class="text-muted-foreground text-start">
|
||||
{@html m.client_wants_to_access_the_following_information({ client: client.name })}
|
||||
</p>
|
||||
@@ -138,18 +138,14 @@
|
||||
</Card.Root>
|
||||
</div>
|
||||
{/if}
|
||||
<!-- Wrap the buttons in a container with the same width as in the login code page -->
|
||||
<div class="w-full max-w-[450px]">
|
||||
<div class="mt-8 flex justify-between gap-2">
|
||||
<Button onclick={() => history.back()} class="flex-1" variant="secondary"
|
||||
>{m.cancel()}</Button
|
||||
>
|
||||
{#if !errorMessage}
|
||||
<Button class="flex-1" {isLoading} onclick={authorize}>{m.sign_in()}</Button>
|
||||
{:else}
|
||||
<Button class="flex-1" onclick={() => (errorMessage = null)}>{m.try_again()}</Button>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="flex w-full max-w-[450px] gap-2">
|
||||
<Button onclick={() => history.back()} class="flex-1" variant="secondary">{m.cancel()}</Button
|
||||
>
|
||||
{#if !errorMessage}
|
||||
<Button class="flex-1" {isLoading} onclick={authorize}>{m.sign_in()}</Button>
|
||||
{:else}
|
||||
<Button class="flex-1" onclick={() => (errorMessage = null)}>{m.try_again()}</Button>
|
||||
{/if}
|
||||
</div>
|
||||
</SignInWrapper>
|
||||
{/if}
|
||||
|
||||
@@ -89,7 +89,7 @@
|
||||
{:else if success}
|
||||
<p class="text-muted-foreground mt-2">{m.the_device_has_been_authorized()}</p>
|
||||
{:else if authorizationRequired}
|
||||
<div transition:slide={{ duration: 300 }}>
|
||||
<div class="w-full max-w-[450px]" transition:slide={{ duration: 300 }}>
|
||||
<Card.Root class="mt-6">
|
||||
<Card.Header class="pb-5">
|
||||
<p class="text-muted-foreground text-start">
|
||||
@@ -110,14 +110,14 @@
|
||||
</form>
|
||||
{/if}
|
||||
{#if !success}
|
||||
<div class="mt-10 flex w-full justify-stretch gap-2">
|
||||
<Button href="/" class="w-full" variant="secondary">{m.cancel()}</Button>
|
||||
<div class="mt-10 flex w-full max-w-[450px] gap-2">
|
||||
<Button href="/" class="flex-1" variant="secondary">{m.cancel()}</Button>
|
||||
{#if !errorMessage}
|
||||
<Button form="device-code-form" class="w-full" onclick={authorize} {isLoading}
|
||||
<Button form="device-code-form" class="flex-1" onclick={authorize} {isLoading}
|
||||
>{m.authorize()}</Button
|
||||
>
|
||||
{:else}
|
||||
<Button class="w-full" onclick={() => (errorMessage = null)}>{m.try_again()}</Button>
|
||||
<Button class="flex-1" onclick={() => (errorMessage = null)}>{m.try_again()}</Button>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
Reference in New Issue
Block a user