Add message to login screen (useful for demo instances) (#329)

* Add message for demo instances to login screen

* Rename env variable

* Added key into

* Add styling to conform with Immich color scheme

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>

docker/.env.example

@@ -51,7 +51,7 @@ MAPBOX_KEY=
 
 
 ###################################################################################
-# WEB
+# WEB - Required
 ###################################################################################
 
 # This is the URL of your vm/server where you host Immich, so that the web frontend
@@ -61,3 +61,13 @@ MAPBOX_KEY=
 # !CAUTION! THERE IS NO FORWARD SLASH AT THE END
 
 VITE_SERVER_ENDPOINT=
+
+
+####################################################################################
+# WEB - Optional
+####################################################################################
+
+# Custom message on the login page, should be written in HTML form.
+# For example VITE_LOGIN_PAGE_MESSAGE="This is a demo instance of Immich.<br><br>Email: <i>demo@demo.de</i><br>Password: <i>demo</i>"
+
+VITE_LOGIN_PAGE_MESSAGE=

web/src/lib/components/forms/login-form.svelte

@@ -2,6 +2,7 @@
 	import { goto } from '$app/navigation';
 	import { session } from '$app/stores';
 	import { sendLoginForm } from '$lib/auth-api';
+	import { loginPageMessage } from '$lib/constants';
 	import { createEventDispatcher } from 'svelte';
 
 	let error: string;
@@ -43,6 +44,16 @@
 		<h1 class="text-2xl text-immich-primary font-medium">Login</h1>
 	</div>
 
+	{#if loginPageMessage}
+		<!-- <div class="bg-blue-100 m-4 p-2 border-t border-b border-blue-500 text-blue-700" role="alert">
+			<p>{@html loginPageMessage}</p>
+		</div> -->
+
+		<p class="text-sm border rounded-md m-4 p-4 text-immich-primary font-medium bg-immich-primary/5">
+			{@html loginPageMessage}
+		</p>
+	{/if}
+
 	<form on:submit|preventDefault={login} method="post" action="" autocomplete="off">
 		<div class="m-4 flex flex-col gap-2">
 			<label class="immich-form-label" for="email">Email</label>

web/src/lib/constants.ts

@@ -1 +1,2 @@
 export const serverEndpoint: string = import.meta.env.VITE_SERVER_ENDPOINT;
+export const loginPageMessage: string = import.meta.env.VITE_LOGIN_PAGE_MESSAGE;