Add fallback image for login page

- Adds a fallback image that displays when the Three.js context fails to render.
withstudiocms · Nov 9, 2024 · 3e6af40 · 3e6af40
1 parent 81f8381
commit 3e6af40
Show file tree

Hide file tree

Showing 9 changed files with 128 additions and 37 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -7,5 +7,6 @@
   "editor.defaultFormatter": "biomejs.biome",
   "[mdx]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
-  }
+  },
+  "editor.gotoLocation.multipleDefinitions": "goto"
 }
diff --git a/packages/studiocms_auth/src/components/StudioCMSLogoSVG.astro b/packages/studiocms_auth/src/components/StudioCMSLogoSVG.astro
@@ -0,0 +1,13 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+interface Props extends HTMLAttributes<'svg'> {}
+
+const { class: className } = Astro.props;
+---
+
+<svg class:list={[className]} width="755" height="792" viewBox="0 0 755 792" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="295" width="460" height="466" rx="32" fill="currentColor"/>
+  <path d="M272 434V166H180C162.327 166 148 180.327 148 198V597C148 614.673 162.327 629 180 629H577.5C595.173 629 609.5 614.673 609.5 597V490H328C297.072 490 272 464.928 272 434Z" fill="currentColor"/>
+  <path d="M124 597V329H32C14.3269 329 0 343.327 0 361V760C0 777.673 14.3269 792 32 792H429.5C447.173 792 461.5 777.673 461.5 760V653H180C149.072 653 124 627.928 124 597Z" fill="currentColor"/>
+</svg>
diff --git a/packages/studiocms_auth/src/integration.ts b/packages/studiocms_auth/src/integration.ts
@@ -70,6 +70,7 @@ export default defineIntegration({
 							'studiocms:auth/lib/types': `export * from '${resolve('./lib/types.ts')}'`,
 							'studiocms:auth/lib/user': `export * from '${resolve('./lib/user.ts')}'`,
 							'studiocms:auth/utils/authEnvCheck': `export * from '${resolve('./utils/authEnvCheck.ts')}'`,
+							'studiocms:auth/utils/validImages': `export * from '${resolve('./utils/validImages.ts')}'`,
 							'studiocms:auth/scripts/three': `import ${JSON.stringify(resolve('./scripts/three.ts'))}`,
 							'studiocms:auth/scripts/formListener': `export * from '${resolve('./scripts/formListener.ts')}'`,
 						},

diff --git a/packages/studiocms_auth/src/layouts/AuthLayout.astro b/packages/studiocms_auth/src/layouts/AuthLayout.astro
@@ -2,14 +2,17 @@
 import '@fontsource-variable/onest/index.css';
 import '@studiocms/ui/css/global.css';
 import './authlayout.css';
+import { Image } from 'astro:assets';
 import { db, eq } from 'astro:db';
+import { validImages } from 'studiocms:auth/utils/validImages';
 import Config from 'virtual:studiocms/config';
 import version from 'virtual:studiocms/version';
 import onestWoff2 from '@fontsource-variable/onest/files/onest-latin-wght-normal.woff2?url';
 import { CMSSiteConfigId } from '@studiocms/core/consts';
 import { tsSiteConfig } from '@studiocms/core/db/tsTables';
 import { Toaster } from '@studiocms/ui/components';
 import OAuthButtonStack from '../components/OAuthButtonStack.astro';
+import StudioCMSLogoSVG from '../components/StudioCMSLogoSVG.astro';
 
 const {
 	dashboardConfig: { faviconURL },
@@ -33,6 +36,10 @@ const siteConfig = await db
 // Get the login page background and custom image from the site config
 const loginPageBackground = siteConfig?.loginPageBackground;
 const loginPageCustomImage = siteConfig?.loginPageCustomImage;
+
+const fallbackImageSrc = loginPageBackground === 'custom'
+	?	loginPageCustomImage
+	: validImages.find((x) => x.name !== 'custom' && x.name === loginPageBackground)?.dark; // TODO: Adapt to theme
 ---
 <!doctype html>
 <html lang={lang} data-theme="dark">
@@ -50,7 +57,30 @@ const loginPageCustomImage = siteConfig?.loginPageCustomImage;
   <body>
 	<Toaster />
 	<main>
-		<div id="canvas-container" />
+		<div id="canvas-container">
+			<div class="fallback-container">
+				<StudioCMSLogoSVG
+					class="static-logo"
+				/>
+				{typeof fallbackImageSrc === 'string' && (
+					<Image 
+						src={fallbackImageSrc || ''}
+						inferSize
+						alt="A fallback image displaying because the interactive wallpaper couldn't be loaded."
+						class={'fallback-image'}
+						quality={100}
+					/>
+				)}
+				{typeof fallbackImageSrc !== 'string' && !!fallbackImageSrc && (
+					<Image 
+						src={fallbackImageSrc}
+						alt="A fallback image displaying because the interactive wallpaper couldn't be loaded."
+						class={'fallback-image'}
+						quality={100}
+					/>
+				)}
+			</div>
+		</div>
 		<div class="login-form-container">
 
 			<slot name="header" />
@@ -70,7 +100,7 @@ const loginPageCustomImage = siteConfig?.loginPageCustomImage;
 		id="login-page-configs" 
 		data-pagebg={loginPageBackground} 
 		data-pagecustomimage={loginPageCustomImage}
-		/>
+	/>
   </body>
   <script>import "studiocms:auth/scripts/three";</script>
-</html>
+</html>
diff --git a/packages/studiocms_auth/src/layouts/authlayout.css b/packages/studiocms_auth/src/layouts/authlayout.css
@@ -38,6 +38,7 @@ main {
 #canvas-container {
 	opacity: 0;
 	transition: all .15s ease;
+	overflow: hidden;
 }
 
 #canvas-container.loaded {
@@ -134,3 +135,30 @@ main {
 		padding-right: 2rem;
 	}
 }
+
+.fallback-container {
+	position: relative;
+}
+
+.fallback-image {
+	height: 100vh;
+	width: auto;
+}
+
+.fallback-container:has(+ canvas) {
+	display: none;
+}
+
+#canvas-container:not(:has(canvas)) {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.static-logo {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	height: 45%;
+}
diff --git a/packages/studiocms_auth/src/scripts/three.ts b/packages/studiocms_auth/src/scripts/three.ts
@@ -3,44 +3,14 @@ import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
 import { OutlinePass } from 'three/addons/postprocessing/OutlinePass.js';
 import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
-import studiocmsBlobsDark from '../loginBackgrounds/studiocms-blobs-dark.png';
-import studiocmsBlobsLight from '../loginBackgrounds/studiocms-blobs-light.png';
-import studiocmsBlocksDark from '../loginBackgrounds/studiocms-blocks-dark.png';
-import studiocmsBlocksLight from '../loginBackgrounds/studiocms-blocks-light.png';
-import studiocmsCurvesDark from '../loginBackgrounds/studiocms-curves-dark.png';
-import studiocmsCurvesLight from '../loginBackgrounds/studiocms-curves-light.png';
 import { fitModelToViewport } from '../scripts/utils/fitModelToViewport';
+import { validImages } from '../utils/validImages';
 
 // Get the current configuration for the login page
 const loginPageBackground = document.getElementById('login-page-configs')?.dataset.pagebg;
 const loginPageCustomImage = document.getElementById('login-page-configs')?.dataset.pagecustomimage;
 const currentMode = document.documentElement.dataset.theme || 'dark';
 
-/**
- * The valid images that can be used as a background for the StudioCMS Logo.
- */
-const validImages = [
-	{
-		name: 'studiocms-blobs',
-		format: 'png',
-		light: studiocmsBlobsLight.src,
-		dark: studiocmsBlobsDark.src,
-	},
-	{
-		name: 'studiocms-blocks',
-		format: 'png',
-		light: studiocmsBlocksLight.src,
-		dark: studiocmsBlocksDark.src,
-	},
-	{
-		name: 'studiocms-curves',
-		format: 'png',
-		light: studiocmsCurvesLight.src,
-		dark: studiocmsCurvesDark.src,
-	},
-	{ name: 'custom', format: 'web' },
-] as const;
-
 /**
  * A valid image that can be used as a background for the StudioCMS Logo.
  */
@@ -105,8 +75,8 @@ function bgSelector(image: ValidImage, params: BackgroundParams) {
 	return image.format === 'web'
 		? params.customImageHref
 		: params.mode === 'dark'
-			? image.dark
-			: image.light;
+			? image.dark.src
+			: image.light.src;
 }
 
 /**
@@ -391,6 +361,7 @@ if (!smallScreen) {
 		);
 	} catch (err) {
 		console.error("ERROR: Couldn't create StudioCMS3DLogo", err);
+		logoContainer.classList.add('loaded');
 		// TODO: Show static image instead (configured background plus non-transparent logo in the same position, allow for custom bgs)
 	}
 }
diff --git a/packages/studiocms_auth/src/utils/validImages.ts b/packages/studiocms_auth/src/utils/validImages.ts
@@ -0,0 +1,38 @@
+import studiocmsBlobsDark from '../loginBackgrounds/studiocms-blobs-dark.png';
+import studiocmsBlobsLight from '../loginBackgrounds/studiocms-blobs-light.png';
+import studiocmsBlocksDark from '../loginBackgrounds/studiocms-blocks-dark.png';
+import studiocmsBlocksLight from '../loginBackgrounds/studiocms-blocks-light.png';
+import studiocmsCurvesDark from '../loginBackgrounds/studiocms-curves-dark.png';
+import studiocmsCurvesLight from '../loginBackgrounds/studiocms-curves-light.png';
+
+/**
+ * The valid images that can be used as a background for the StudioCMS Logo.
+ */
+const validImages = [
+	{
+		name: 'studiocms-blobs',
+		format: 'png',
+		light: studiocmsBlobsLight,
+		dark: studiocmsBlobsDark,
+	},
+	{
+		name: 'studiocms-blocks',
+		format: 'png',
+		light: studiocmsBlocksLight,
+		dark: studiocmsBlocksDark,
+	},
+	{
+		name: 'studiocms-curves',
+		format: 'png',
+		light: studiocmsCurvesLight,
+		dark: studiocmsCurvesDark,
+	},
+	{ 
+		name: 'custom', 
+		format: 'web',
+		light: null,
+		dark: null,
+	},
+] as const;
+
+export { validImages };
diff --git a/packages/studiocms_auth/virtuals.d.ts b/packages/studiocms_auth/virtuals.d.ts
@@ -83,6 +83,10 @@ declare module 'studiocms:auth/utils/authEnvCheck' {
 	export const authEnvCheck: typeof import('./src/utils/authEnvCheck').authEnvCheck;
 }
 
+declare module 'studiocms:auth/utils/validImages' {
+	export const validImages: typeof import('./src/utils/validImages').validImages;
+}
+
 declare module 'studiocms:auth/scripts/three' {
 	/**
 	 * This module should be imported within a script tag.

diff --git a/playgrounds/node/public/studiocms-auth/logo-adaptive.svg b/playgrounds/node/public/studiocms-auth/logo-adaptive.svg