feat: custom background image config option

.env.example

@@ -27,4 +27,6 @@ LOGIN_TIMEOUT=300
 LOGIN_MAX_RETRIES=5
 LOG_LEVEL=0
 APP_TITLE=Tinyauth SSO
-FORGOT_PASSWORD_MESSAGE=Some message about resetting the password
+FORGOT_PASSWORD_MESSAGE=Some message about resetting the password
+OAUTH_AUTO_REDIRECT=none
+BACKGROUND_IMAGE=some_image_url

cmd/root.go

@@ -91,6 +91,7 @@ var rootCmd = &cobra.Command{
 			CookieSecure:          config.CookieSecure,
 			Domain:                domain,
 			ForgotPasswordMessage: config.FogotPasswordMessage,
+			BackgroundImage:       config.BackgroundImage,
 		}
 
 		// Create api config
@@ -198,6 +199,7 @@ func init() {
 	rootCmd.Flags().Int("log-level", 1, "Log level.")
 	rootCmd.Flags().String("app-title", "Tinyauth", "Title of the app.")
 	rootCmd.Flags().String("forgot-password-message", "You can reset your password by changing the `USERS` environment variable.", "Message to show on the forgot password page.")
+	rootCmd.Flags().String("background-image", "/background.jpg", "Background image URL for the login page.")
 
 	// Bind flags to environment
 	viper.BindEnv("port", "PORT")
@@ -230,6 +232,7 @@ func init() {
 	viper.BindEnv("login-timeout", "LOGIN_TIMEOUT")
 	viper.BindEnv("login-max-retries", "LOGIN_MAX_RETRIES")
 	viper.BindEnv("forgot-password-message", "FORGOT_PASSWORD_MESSAGE")
+	viper.BindEnv("background-image", "BACKGROUND_IMAGE")
 
 	// Bind flags to viper
 	viper.BindPFlags(rootCmd.Flags())

frontend/src/components/layout/layout.tsx

@@ -1,8 +1,14 @@
+import { useAppContext } from "@/context/app-context";
 import { LanguageSelector } from "../language/language";
 
 export const Layout = ({ children }: { children: React.ReactNode }) => {
+  const { backgroundImage } = useAppContext();
+
   return (
-    <div className="flex flex-col justify-center items-center min-h-svh bg-[url(/background.jpg)] bg-cover">
+    <div
+      className={`flex flex-col justify-center items-center min-h-svh bg-[url(${backgroundImage})] bg-cover`}
+    >
+      <img></img>
       <LanguageSelector />
       {children}
     </div>

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

@@ -7,7 +7,8 @@ export const appContextSchema = z.object({
     genericName: z.string(),
     domain: z.string(),
     forgotPasswordMessage: z.string(),
-    oauthAutoRedirect: z.string(),
+    // oauthAutoRedirect: z.string(),
+    backgroundImage: z.string(),
 })
 
 export type AppContextSchema = z.infer<typeof appContextSchema>;

internal/handlers/handlers.go

@@ -448,6 +448,7 @@ func (h *Handlers) AppHandler(c *gin.Context) {
 		GenericName:           h.Config.GenericName,
 		Domain:                h.Config.Domain,
 		ForgotPasswordMessage: h.Config.ForgotPasswordMessage,
+		BackgroundImage:       h.Config.BackgroundImage,
 	}
 
 	// Return app context

internal/types/api.go

@@ -48,6 +48,7 @@ type AppContext struct {
 	GenericName           string   `json:"genericName"`
 	Domain                string   `json:"domain"`
 	ForgotPasswordMessage string   `json:"forgotPasswordMessage"`
+	BackgroundImage       string   `json:"backgroundImage"`
 }
 
 // Totp request is the request for the totp endpoint

internal/types/config.go

@@ -33,6 +33,7 @@ type Config struct {
 	LoginTimeout            int    `mapstructure:"login-timeout"`
 	LoginMaxRetries         int    `mapstructure:"login-max-retries"`
 	FogotPasswordMessage    string `mapstructure:"forgot-password-message" validate:"required"`
+	BackgroundImage         string `mapstructure:"background-image" validate:"required"`
 }
 
 // Server configuration
@@ -44,6 +45,7 @@ type HandlersConfig struct {
 	GenericName           string
 	Title                 string
 	ForgotPasswordMessage string
+	BackgroundImage       string
 }
 
 // OAuthConfig is the configuration for the providers