mirrors/pocket-id
1
0
Fork 0
mirror of https://github.com/pocket-id/pocket-id.git synced 2026-03-22 17:55:08 +00:00
Code Activity

feat: allow clearing background image (#1290)

Browse Source 
Co-authored-by: Kyle Mendell <kmendell@ofkm.us>
Co-authored-by: Kyle Mendell <ksm@ofkm.us>
This commit is contained in:
taoso
2026-03-09 03:45:04 +08:00
committed by GitHub
parent f90f21b620
commit 192f71a13c
5 changed files with 74 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
frontend/src/lib/components/login-wrapper.svelte
View File

@@ -1,3 +1,9 @@
<script module lang="ts">
// Persist the last failing background image URL across route remounts so
// login pages without a background do not briefly retry the image and stutter.
let persistedMissingBackgroundImageUrl: string | undefined;
</script>
<script lang="ts">
import { afterNavigate } from '$app/navigation';
import { page } from '$app/state';
@@ -17,13 +23,32 @@
showAlternativeSignInMethodButton?: boolean;
} = $props();
let missingBackgroundImageUrl = $state<string | undefined>(persistedMissingBackgroundImageUrl);
let loadedBackgroundImageUrl = $state<string | undefined>();
let isInitialLoad = $state(false);
let animate = $derived(isInitialLoad && !$appConfigStore.disableAnimations);
let backgroundImageUrl = $derived(cachedBackgroundImage.getUrl());
let imageError = $derived(missingBackgroundImageUrl === backgroundImageUrl);
let imageLoaded = $derived(loadedBackgroundImageUrl === backgroundImageUrl);
let animate = $derived(isInitialLoad && imageLoaded && !$appConfigStore.disableAnimations);
afterNavigate((e) => {
isInitialLoad = !e?.from?.url;
});
function onBackgroundImageLoad() {
loadedBackgroundImageUrl = backgroundImageUrl;
if (persistedMissingBackgroundImageUrl === backgroundImageUrl) {
persistedMissingBackgroundImageUrl = undefined;
missingBackgroundImageUrl = undefined;
}
}
function onBackgroundImageError() {
loadedBackgroundImageUrl = undefined;
persistedMissingBackgroundImageUrl = backgroundImageUrl;
missingBackgroundImageUrl = backgroundImageUrl;
}
const isDesktop = new MediaQuery('min-width: 1024px');
let alternativeSignInButton = $state({
href: '/login/alternative',
@@ -46,9 +71,9 @@
</script>
{#if isDesktop.current}
<div class="h-screen items-center overflow-hidden text-center">
<div class="h-screen items-center overflow-hidden text-center flex justify-center">
<div
class="relative z-10 flex h-full w-[650px] 2xl:w-[800px] p-16 {cn(
class="flex h-full w-[650px] 2xl:w-[800px] p-16 {cn(
showAlternativeSignInMethodButton && 'pb-0'
)}"
>
@@ -69,16 +94,18 @@
</div>
</div>
<!-- Background image -->
<div class="absolute top-0 right-0 left-500px bottom-0 z-0 overflow-hidden rounded-[40px] m-6">
<img
src={cachedBackgroundImage.getUrl()}
class="{cn(
animate && 'animate-bg-zoom'
)} h-screen object-cover w-[calc(100vw-650px)] 2xl:w-[calc(100vw-800px)]"
alt={m.login_background()}
/>
</div>
{#if !imageError}
<!-- Background image -->
<div class="m-6 flex h-[calc(100vh-3rem)] overflow-hidden rounded-[40px]">
<img
src={backgroundImageUrl}
class="h-full object-cover {cn(animate && 'animate-bg-zoom')}"
alt={m.login_background()}
onload={onBackgroundImageLoad}
onerror={onBackgroundImageError}
/>
</div>
{/if}
</div>
{:else}
<div