feat(ui): allow configuring background via css instead of an image (#1101)

Co-authored-by: Stavros <steveiliop56@gmail.com>

Author: flbraun

.env.example

@@ -205,6 +205,8 @@ TINYAUTH_UI_TITLE="Tinyauth"
 TINYAUTH_UI_FORGOTPASSWORDMESSAGE="You can change your password by changing the configuration."
 # Path to the background image.
 TINYAUTH_UI_BACKGROUNDIMAGE="/background.webp"
+# Value of the CSS background property, takes precedence over the background image.
+TINYAUTH_UI_BACKGROUNDCSS=
 # Enable UI warnings.
 TINYAUTH_UI_WARNINGSENABLED=true
 

frontend/src/components/layout/layout.tsx

@@ -15,11 +15,15 @@ const BaseLayout = ({ children }: { children: React.ReactNode }) => {
   return (
     <div
       className="flex flex-col justify-center items-center min-h-svh px-4"
-      style={{
-        backgroundImage: `url(${ui.backgroundImage})`,
-        backgroundSize: "cover",
-        backgroundPosition: "center",
-      }}
+      style={
+        ui.backgroundCss
+          ? { background: ui.backgroundCss }
+          : {
+              backgroundImage: `url(${ui.backgroundImage})`,
+              backgroundSize: "cover",
+              backgroundPosition: "center",
+            }
+      }
     >
       <div className="absolute top-4 right-4">
         <QuickActions />

frontend/src/schemas/app-context-schema.ts

@@ -18,6 +18,7 @@ const uiSchema = z.object({
   title: z.string(),
   forgotPasswordMessage: z.string(),
   backgroundImage: z.string(),
+  backgroundCss: z.string(),
   warningsEnabled: z.boolean(),
 });
 

internal/controller/context_controller.go

@@ -56,6 +56,7 @@ type ACRUI struct {
 	Title                 string `json:"title"`
 	ForgotPasswordMessage string `json:"forgotPasswordMessage"`
 	BackgroundImage       string `json:"backgroundImage"`
+	BackgroundCSS         string `json:"backgroundCss"`
 	WarningsEnabled       bool   `json:"warningsEnabled"`
 }
 
@@ -161,6 +162,7 @@ func (controller *ContextController) appContextHandler(c *gin.Context) {
 			Title:                 controller.config.UI.Title,
 			ForgotPasswordMessage: controller.config.UI.ForgotPasswordMessage,
 			BackgroundImage:       controller.config.UI.BackgroundImage,
+			BackgroundCSS:         controller.config.UI.BackgroundCSS,
 			WarningsEnabled:       controller.config.UI.WarningsEnabled,
 		},
 		App: ACRApp{

internal/controller/context_controller_test.go

@@ -45,6 +45,7 @@ func TestContextController(t *testing.T) {
 						Title:                 cfg.UI.Title,
 						ForgotPasswordMessage: cfg.UI.ForgotPasswordMessage,
 						BackgroundImage:       cfg.UI.BackgroundImage,
+						BackgroundCSS:         cfg.UI.BackgroundCSS,
 						WarningsEnabled:       cfg.UI.WarningsEnabled,
 					},
 					App: ACRApp{

internal/model/config.go

@@ -205,6 +205,7 @@ type UIConfig struct {
 	Title                 string `description:"The title of the UI." yaml:"title,omitempty"`
 	ForgotPasswordMessage string `description:"Message displayed on the forgot password page." yaml:"forgotPasswordMessage,omitempty"`
 	BackgroundImage       string `description:"Path to the background image." yaml:"backgroundImage,omitempty"`
+	BackgroundCSS         string `description:"Value of the CSS background property, takes precedence over the background image." yaml:"backgroundCss,omitempty"`
 	WarningsEnabled       bool   `description:"Enable UI warnings." yaml:"warningsEnabled,omitempty"`
 }