Merge 36f9ce6b07 into 4054249359

src/App.jsx

@@ -24,6 +24,8 @@ import frenchMessages from "./i18n/fr";
 import chineseMessages from "./i18n/zh";
 import italianMessages from "./i18n/it";
 
+const fixed_base_url = undefined; // FIXME: process.env.REACT_APP_SERVER;
+
 // TODO: Can we use lazy loading together with browser locale?
 const messages = {
   de: germanMessages,
@@ -42,7 +44,7 @@ const App = () => (
     disableTelemetry
     requireAuth
     loginPage={LoginPage}
-    authProvider={authProvider}
+    authProvider={authProvider(fixed_base_url)}
     dataProvider={dataProvider}
     i18nProvider={i18nProvider}
   >

src/components/LoginPage.jsx

@@ -7,6 +7,7 @@ import {
   useLogin,
   useNotify,
   useLocaleState,
+  useStoreContext,
   useTranslate,
   PasswordInput,
   TextInput,
@@ -81,15 +82,15 @@ const FormBox = styled(Box)(({ theme }) => ({
   },
 }));
 
-const LoginPage = () => {
+const LoginPage = ({ cfg_base_url }) => {
   const login = useLogin();
   const notify = useNotify();
+  const store = useStoreContext();
   const [loading, setLoading] = useState(false);
   const [supportPassAuth, setSupportPassAuth] = useState(true);
   const [locale, setLocale] = useLocaleState();
   const translate = useTranslate();
-  const base_url = localStorage.getItem("base_url");
-  const cfg_base_url = process.env.REACT_APP_SERVER;
+  const base_url = store.getItem("base_url");
   const [ssoBaseUrl, setSSOBaseUrl] = useState("");
   const loginToken = /\?loginToken=([a-zA-Z0-9_-]+)/.exec(window.location.href);
 
@@ -102,8 +103,8 @@ const LoginPage = () => {
       "",
       window.location.href.replace(loginToken[0], "#").split("#")[0]
     );
-    const baseUrl = localStorage.getItem("sso_base_url");
-    localStorage.removeItem("sso_base_url");
+    const baseUrl = store.getItem("sso_base_url");
+    store.removeItem("sso_base_url");
     if (baseUrl) {
       const auth = {
         base_url: baseUrl,
@@ -169,7 +170,7 @@ const LoginPage = () => {
   };
 
   const handleSSO = () => {
-    localStorage.setItem("sso_base_url", ssoBaseUrl);
+    store.setItem("sso_base_url", ssoBaseUrl);
     const ssoFullUrl = `${ssoBaseUrl}/_matrix/client/r0/login/sso/redirect?redirectUrl=${encodeURIComponent(
       window.location.href
     )}`;
@@ -247,7 +248,7 @@ const LoginPage = () => {
             name="base_url"
             component={renderInput}
             label="synapseadmin.auth.base_url"
-            disabled={cfg_base_url || loading}
+            disabled={cfg_base_url != null || loading}
             resettable
             fullWidth
             className="input"

src/index.jsx

@@ -1,8 +1,10 @@
 import React from "react";
-import { createRoot } from "react-dom/client";
+import ReactDOM from "react-dom/client";
 import App from "./App";
 
-createRoot(document.getElementById("root")).render(
+const REACT_APP_SERVER = import.meta.env.VITE_APP_SERVER;
+
+ReactDOM.createRoot(document.getElementById("root")).render(
   <React.StrictMode>
     <App />
   </React.StrictMode>

src/synapse/authProvider.js

@@ -1,10 +1,10 @@
 import { fetchUtils } from "react-admin";
 
-const authProvider = {
+const authProvider = (fixed_base_url, store) => ({
   // called when the user attempts to log in
   login: ({ base_url, username, password, loginToken }) => {
     // force homeserver for protection in case the form is manipulated
-    base_url = process.env.REACT_APP_SERVER || base_url;
+    base_url = fixed_base_url || base_url;
 
     console.log("login ");
     const options = {
@@ -12,7 +12,7 @@ const authProvider = {
       body: JSON.stringify(
         Object.assign(
           {
-            device_id: localStorage.getItem("device_id"),
+            device_id: store.getItem("device_id"),
             initial_device_display_name: "Synapse Admin",
           },
           loginToken
@@ -33,16 +33,16 @@ const authProvider = {
     // server, since the admin might want to access the admin API via some
     // private address
     base_url = base_url.replace(/\/+$/g, "");
-    localStorage.setItem("base_url", base_url);
+    store.setItem("base_url", base_url);
 
     const decoded_base_url = window.decodeURIComponent(base_url);
     const login_api_url = decoded_base_url + "/_matrix/client/r0/login";
 
     return fetchUtils.fetchJson(login_api_url, options).then(({ json }) => {
-      localStorage.setItem("home_server", json.home_server);
-      localStorage.setItem("user_id", json.user_id);
-      localStorage.setItem("access_token", json.access_token);
-      localStorage.setItem("device_id", json.device_id);
+      store.setItem("home_server", json.home_server);
+      store.setItem("user_id", json.user_id);
+      store.setItem("access_token", json.access_token);
+      store.setItem("device_id", json.device_id);
     });
   },
   // called when the user clicks on the logout button
@@ -86,6 +86,6 @@ const authProvider = {
   },
   // called when the user navigates to a new location, to check for permissions / roles
   getPermissions: () => Promise.resolve(),
-};
+});
 
 export default authProvider;