From bfbfade99a87a2aed481390c7d67b1d61fcb3d3c Mon Sep 17 00:00:00 2001
From: Florent Chehab <flo@nextmile.fr>
Date: Wed, 18 Mar 2026 14:00:54 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B(frontend)=20prevent=20black=20back?=
 =?UTF-8?q?ground=20image?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Prevent showing a black background when the image is not
accessible anymore.

This happens after the user logs out or logs in.
Or the auth is revoked.
---
 CHANGELOG.md                           |  2 +-
 src/frontend/src/stores/userChoices.ts | 21 ++++++++++++++++++++-
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 66eda099..ee69132b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,6 +15,7 @@ and this project adheres to
 - ✨(backend) add authenticated user rate throttling on request-entry #1129
 - ✨(backend) expose `is_active` field for Application in Django admin #1133
 - ✨(file-upload) disable by default & limit count by user #1141
+- ✨(frontend) custom background #1067
 
 ### Changed
 
@@ -65,7 +66,6 @@ and this project adheres to
 ### Added
 
 - ✨(backend) add file upload feature #1030
-- ✨(frontend) custom background #1067
 
 ## [1.9.0] - 2026-03-02
 
diff --git a/src/frontend/src/stores/userChoices.ts b/src/frontend/src/stores/userChoices.ts
index 3ab607ef..0d3e89d5 100644
--- a/src/frontend/src/stores/userChoices.ts
+++ b/src/frontend/src/stores/userChoices.ts
@@ -35,10 +35,29 @@ subscribe(userChoicesStore, () => {
   saveUserChoices(userChoicesStore, false)
 })
 
+// we run some logic on store loading to check if the processor config is still valid
 if (userChoicesStore.processorConfig?.type === ProcessorType.VIRTUAL) {
   if (userChoicesStore.processorConfig.imagePath.startsWith('blob:')) {
     // this happens when a not authenticated user had changed their background image
-    // we restore their last processor config to avoid displaying a black screen.
+    // we restore clear the processor config to avoid displaying a black screen.
     userChoicesStore.processorConfig = undefined
+  } else if (userChoicesStore.processorConfig.fileId) {
+    // Checking if the image is still available / accessible
+    await fetch(userChoicesStore.processorConfig.imagePath, {
+      // We bypass the cache to ensure we have access
+      cache: 'reload',
+    })
+      .then((response) => {
+        // if we cannot fetch the image (likely a 401 from the backend because
+        // the user is not logged in anymore, etc.),
+        // we clear the processor config to avoid displaying a black screen.
+        // This can happen when the user logs out for instance, etc.
+        if (!response.ok) {
+          userChoicesStore.processorConfig = undefined
+        }
+      })
+      .catch(() => {
+        userChoicesStore.processorConfig = undefined
+      })
   }
 }