Rework banner logo height to use named sizes instead of pixels

Replace the uint pixel value with a string enum (small/normal/big)
mapping to 12/24/48px respectively. Default remains normal (24px).
This avoids inline styles blocked by CSP and uses predefined MUI
CSS classes instead.

Author: fbartels

bootstrap/bootstrap.go

@@ -257,9 +257,8 @@ func (bs *bootstrap) initialize(settings *Settings) error {
 		}
 		bs.config.IdentifierDefaultBannerLogo = b
 	}
-	if settings.IdentifierDefaultBannerLogoHeight != 0 {
-		h := settings.IdentifierDefaultBannerLogoHeight
-		bs.config.IdentifierDefaultBannerLogoHeight = &h
+	if settings.IdentifierDefaultBannerLogoHeight != "" {
+		bs.config.IdentifierDefaultBannerLogoHeight = &settings.IdentifierDefaultBannerLogoHeight
 	}
 	if settings.IdentifierDefaultSignInPageText != "" {
 		bs.config.IdentifierDefaultSignInPageText = &settings.IdentifierDefaultSignInPageText

bootstrap/config.go

@@ -50,7 +50,7 @@ type Config struct {
 	IdentifierAuthoritiesConf         string
 	IdentifierScopesConf              string
 	IdentifierDefaultBannerLogo       []byte
-	IdentifierDefaultBannerLogoHeight *uint
+	IdentifierDefaultBannerLogoHeight *string
 	IdentifierDefaultSignInPageText   *string
 	IdentifierDefaultLogoTargetURI    *string
 	IdentifierDefaultUsernameHintText *string

bootstrap/settings.go

@@ -43,7 +43,7 @@ type Settings struct {
 	IdentifierRegistrationConf        string
 	IdentifierScopesConf              string
 	IdentifierDefaultBannerLogo       string
-	IdentifierDefaultBannerLogoHeight uint
+	IdentifierDefaultBannerLogoHeight string
 	IdentifierDefaultSignInPageText   string
 	IdentifierDefaultLogoTargetURI    string
 	IdentifierDefaultUsernameHintText string

cmd/licod/serve.go

@@ -89,7 +89,7 @@ func commandServe() *cobra.Command {
 	serveCmd.Flags().StringVar(&cfg.IdentifierRegistrationConf, "identifier-registration-conf", "", "Path to a identifier-registration.yaml configuration file")
 	serveCmd.Flags().StringVar(&cfg.IdentifierScopesConf, "identifier-scopes-conf", "", "Path to a scopes.yaml configuration file")
 	serveCmd.Flags().StringVar(&cfg.IdentifierDefaultBannerLogo, "identifier-default-banner-logo", "", "Path to a default banner logo that appears on sign-in page.")
-	serveCmd.Flags().UintVar(&cfg.IdentifierDefaultBannerLogoHeight, "identifier-default-banner-logo-height", 0, "Height in pixels of the banner logo on the sign-in page (default 24).")
+	serveCmd.Flags().StringVar(&cfg.IdentifierDefaultBannerLogoHeight, "identifier-default-banner-logo-height", "", "Size of the banner logo on the sign-in page (small, normal, big; default normal).")
 	serveCmd.Flags().StringVar(&cfg.IdentifierDefaultSignInPageText, "identifier-default-sign-in-page-text", "", "Default text that appears at the bottom of the sign-in box.")
 	serveCmd.Flags().StringVar(&cfg.IdentifierDefaultLogoTargetURI, "identifier-default-logo-target-url", "", "Default URL for the logo of the login page.")
 	serveCmd.Flags().StringVar(&cfg.IdentifierDefaultUsernameHintText, "identifier-default-username-hint-text", "", "Default string that shows as the hint in the username textbox on the sign-in screen.")

identifier/config.go

@@ -47,7 +47,7 @@ type Config struct {
 	SignedOutEndpointURI     *url.URL
 
 	DefaultBannerLogo        []byte
-	DefaultBannerLogoHeight  *uint
+	DefaultBannerLogoHeight  *string
 	DefaultSignInPageText    *string
 	DefaultSignInPageLogoURI *string
 	DefaultUsernameHintText  *string

identifier/identifier.go

@@ -86,7 +86,7 @@ type Identifier struct {
 	meta *meta.Meta
 
 	defaultBannerLogo       *string
-	defaultBannerLogoHeight *uint
+	defaultBannerLogoHeight *string
 
 	onSetLogonCallbacks   []func(ctx context.Context, rw http.ResponseWriter, user identity.User) error
 	onUnsetLogonCallbacks []func(ctx context.Context, rw http.ResponseWriter) error

identifier/meta/branding.go

@@ -20,7 +20,7 @@ package meta
 // Branding is a container to hold identifier branding meta data.
 type Branding struct {
 	BannerLogo        *string  `json:"bannerLogo,omitempty"`
-	BannerLogoHeight  *uint    `json:"bannerLogoHeight,omitempty"`
+	BannerLogoHeight  *string  `json:"bannerLogoHeight,omitempty"`
 	SignInPageText    *string  `json:"signinPageText,omitempty"`
 	UsernameHintText  *string  `json:"usernameHintText,omitempty"`
 	SignInPageLogoURI *string  `json:"signinPageLogoURI,omitempty"`

identifier/src/components/ResponsiveScreen.jsx

@@ -28,9 +28,15 @@ const styles = theme => ({
   dialog: {
     maxWidth: 440,
   },
-  logo: {
+  logoSmall: {
+    height: 12,
+  },
+  logoNormal: {
     height: 24,
   },
+  logoBig: {
+    height: 48,
+  },
   actions: {
     marginTop: -40,
     minHeight: 45,
@@ -55,9 +61,10 @@ const ResponsiveScreen = (props) => {
   } = props;
 
   const bannerLogoSrc = branding?.bannerLogo ? branding.bannerLogo : Logo;
-  const bannerLogoHeight = branding?.bannerLogoHeight || 24;
+  const logoSizeClassMap = { small: classes.logoSmall, normal: classes.logoNormal, big: classes.logoBig };
+  const logoClassName = logoSizeClassMap[branding?.bannerLogoHeight] || classes.logoNormal;
   const logo = withoutLogo ? null :
-    <DialogContent><img src={bannerLogoSrc} className={classes.logo} style={{ height: bannerLogoHeight }} alt=""/></DialogContent>;
+    <DialogContent><img src={bannerLogoSrc} className={logoClassName} alt=""/></DialogContent>;
 
   const content = loading ? <Loading/> : (withoutPadding ? children : <DialogContent>{children}</DialogContent>);