Use idp logo from theme

changelog/unreleased/enhancement-load-idp-logo-from-theme.md

@@ -0,0 +1,6 @@
+Enhancement: Load IDP logo from theme
+
+We now load the IDP logo from the theme file.
+
+https://github.com/owncloud/ocis/pull/10274
+https://github.com/owncloud/web/issues/11603

services/idp/src/App.jsx

@@ -1,31 +1,64 @@
-import React, { ReactElement, Suspense, lazy } from 'react';
+import React, { ReactElement, Suspense, lazy, useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 
 import { MuiThemeProvider } from '@material-ui/core/styles';
-import { defaultTheme as theme } from 'kpop/es/theme';
+import { defaultTheme } from 'kpop/es/theme';
 
 import 'kpop/static/css/base.css';
 import 'kpop/static/css/scrollbar.css';
 
 import Spinner from './components/Spinner';
 import * as version from './version';
+import { InfiniteScaleContext } from './infiniteScaleContext';
 
 const LazyMain = lazy(() => import(/* webpackChunkName: "identifier-main" */ './Main'));
 
 console.info(`Kopano Identifier build version: ${version.build}`); // eslint-disable-line no-console
 
 const App = ({ bgImg }): ReactElement => {
+  const [theme, setTheme] = useState(null);
+  const [config, setConfig] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const configResponse = await fetch('/config.json');
+        const configData = await configResponse.json();
+        setConfig(configData);
+
+        const themeResponse = await fetch(configData.theme);
+        const themeData = await themeResponse.json();
+        setTheme(themeData);
+      } catch (error) {
+        console.error('Error fetching config/theme data:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchData();
+  }, []);
+
+
+  if (loading) {
+    return <Spinner />;
+  }
+
+
   return (
-    <div
-      className='oc-login-bg'
-      style={{ backgroundImage: bgImg ? `url(${bgImg})` : undefined }}
-    >
-      <MuiThemeProvider theme={theme}>
-        <Suspense fallback={<Spinner/>}>
-          <LazyMain/>
-        </Suspense>
-      </MuiThemeProvider>
-    </div>
+      <InfiniteScaleContext.Provider value={{ theme, config }}>
+        <div
+            className='oc-login-bg'
+            style={{ backgroundImage: bgImg ? `url(${bgImg})` : undefined }}
+        >
+          <MuiThemeProvider theme={defaultTheme}>
+            <Suspense fallback={<Spinner />}>
+              <LazyMain />
+            </Suspense>
+          </MuiThemeProvider>
+        </div>
+      </InfiniteScaleContext.Provider>
   );
 }
 

services/idp/src/components/ResponsiveScreen.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
@@ -9,6 +9,7 @@ import Grid from '@material-ui/core/Grid';
 import DialogContent from '@material-ui/core/DialogContent';
 
 import Loading from './Loading';
+import { InfiniteScaleContext } from "../infiniteScaleContext";
 
 const styles = theme => ({
   root: {
@@ -44,9 +45,11 @@ const ResponsiveScreen = (props) => {
     className,
     ...other
   } = props;
+  const { theme } = useContext(InfiniteScaleContext);
 
-  const logo = withoutLogo ? null :
-    <img src={process.env.PUBLIC_URL + '/static/logo.svg'} className="oc-logo" alt="ownCloud Logo"/>;
+  const logo = (theme && !withoutLogo) ? (
+        <img src={'/' + theme.common?.logo} className="oc-logo" alt="ownCloud Logo"/>
+    ) : null;
 
   const content = loading ? <Loading/> : (withoutPadding ? children : <DialogContent>{children}</DialogContent>);
 

services/idp/src/infiniteScaleContext.js

@@ -0,0 +1,6 @@
+import { createContext } from 'react';
+
+export const InfiniteScaleContext = createContext({
+    theme: null,
+    config: null,
+});