feat(idp): support login page background configuration

changelog/unreleased/enhancement-idp-config-background-img.md

@@ -0,0 +1,7 @@
+Enhancement: Support login page background configuration
+
+Introduce a new environment variable `IDP_LOGIN_BACKGROUND_URL`
+that overrides the default background image of the IDP login page when present.
+
+https://github.com/owncloud/ocis/issues/7674
+https://github.com/owncloud/ocis/pull/7900

services/idp/pkg/config/config.go

@@ -54,7 +54,8 @@ type Ldap struct {
 
 // Asset defines the available asset configuration.
 type Asset struct {
-	Path string `yaml:"asset" env:"IDP_ASSET_PATH" desc:"Serve IDP assets from a path on the filesystem instead of the builtin assets."`
+	Path               string `yaml:"asset" env:"IDP_ASSET_PATH" desc:"Serve IDP assets from a path on the filesystem instead of the builtin assets."`
+	LoginBackgroundUrl string `yaml:"login-background-url" env:"IDP_LOGIN_BACKGROUND_URL" desc:"Configure an alternative URL to the background image for the login page."`
 }
 
 type Client struct {

services/idp/pkg/service/v0/service.go

@@ -276,7 +276,7 @@ func (idp IDP) ServeHTTP(w http.ResponseWriter, r *http.Request) {
 	idp.mux.ServeHTTP(w, r)
 }
 
-// Index renders the static html with the
+// Index renders the static html with templated variables.
 func (idp IDP) Index() http.HandlerFunc {
 	f, err := idp.assets.Open("/identifier/index.html")
 	if err != nil {
@@ -295,6 +295,9 @@ func (idp IDP) Index() http.HandlerFunc {
 	pp := "/signin/v1"
 	indexHTML := bytes.Replace(template, []byte("__PATH_PREFIX__"), []byte(pp), 1)
 
+	background := idp.config.Asset.LoginBackgroundUrl
+	indexHTML = bytes.Replace(template, []byte("__BG_IMG_URL__"), []byte(background), 1)
+
 	nonce := rndm.GenerateRandomString(32)
 	indexHTML = bytes.Replace(indexHTML, []byte("__CSP_NONCE__"), []byte(nonce), 1)
 

services/idp/public/index.html

@@ -12,6 +12,6 @@
     <noscript>
       You need to enable JavaScript to run this app.
     </noscript>
-    <main id="root" class="oc-login-bg" data-path-prefix="__PATH_PREFIX__" passwort-reset-link="__PASSWORD_RESET_LINK__"></main>
+    <main id="root" data-path-prefix="__PATH_PREFIX__" passwort-reset-link="__PASSWORD_RESET_LINK__" data-bg-img="__BG_IMG_URL__"></main>
   </body>
 </html>

services/idp/src/App.jsx

@@ -1,4 +1,5 @@
 import React, { ReactElement, Suspense, lazy } from 'react';
+import PropTypes from 'prop-types';
 
 import { MuiThemeProvider } from '@material-ui/core/styles';
 import { defaultTheme as theme } from 'kpop/es/theme';
@@ -13,14 +14,23 @@ const LazyMain = lazy(() => import(/* webpackChunkName: "identifier-main" */ './
 
 console.info(`Kopano Identifier build version: ${version.build}`); // eslint-disable-line no-console
 
-const App = (): ReactElement => {
+const App = ({ bgImg }): ReactElement => {
   return (
-    <MuiThemeProvider theme={theme}>
-      <Suspense fallback={<Spinner/>}>
-        <LazyMain />
-      </Suspense>
-    </MuiThemeProvider>
+    <div
+      className='oc-login-bg'
+      style={{ backgroundImage: bgImg ? `url(${bgImg})` : undefined }}
+    >
+      <MuiThemeProvider theme={theme}>
+        <Suspense fallback={<Spinner/>}>
+          <LazyMain/>
+        </Suspense>
+      </MuiThemeProvider>
+    </div>
   );
 }
 
+App.propTypes = {
+  bgImg: PropTypes.string
+};
+
 export default App;

services/idp/src/app.css

@@ -24,6 +24,8 @@ strong {
   background-repeat: no-repeat;
   background-position: center;
   z-index: 0;
+  display: flex;
+  width: 100%;
 }
 
 #loader {

services/idp/src/index.tsx

@@ -9,11 +9,16 @@ import store from './store';
 
 import './app.css';
 
+const root = document.getElementById('root')
+
+// if a custom background image has been configured, make use of it
+const bgImg = root.getAttribute('data-bg-img')
+
 ReactDOM.render(
   <React.StrictMode>
     <Provider store={store as any}>
-      <App/>
+      <App bgImg={bgImg}/>
     </Provider>
   </React.StrictMode>,
-  document.getElementById('root')
+  root
 );