🐛(frontend) prevent black background image

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.

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
+      })
   }
 }