feat(idp): support login page background configuration

This revision introduces a new environment variable
`IDP_LOGIN_BACKGROUND_URL` that overrides the default background image
of the IDP login page when present.

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
 );