do not fail on incorrect MXC URLs

Bumps [@tanstack/react-query](https://github.com/TanStack/query/tree/HEAD/packages/react-query) from 5.79.0 to 5.80.6.
- [Release notes](https://github.com/TanStack/query/releases)
- [Commits](https://github.com/TanStack/query/commits/v5.80.6/packages/react-query)

---
updated-dependencies:
- dependency-name: "@tanstack/react-query"
  dependency-version: 5.80.6
  dependency-type: direct:production
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

.github/workflows/workflow.yml

@@ -72,7 +72,7 @@ jobs:
             type=raw,value=latest,enable=${{ github.ref_name == 'main' }}
             type=semver,pattern={{raw}}
       - name: Build and push
-        uses: docker/build-push-action@14487ce63c7a62a4a324b0bfb37086795e31c6c1 # v6.16.0
+        uses: docker/build-push-action@263435318d21b8e681c14492fe198d362a7d2c83 # v6.18.0
         with:
           platforms: linux/amd64,linux/arm64
           context: .

README.md

@@ -113,6 +113,9 @@ The following changes are already implemented:
 * 🗂️ [Add Users' Account Data tab](https://github.com/etkecc/synapse-admin/pull/276)
 * 🧾 [Make bulk registration CSV import more user-friendly](https://github.com/etkecc/synapse-admin/pull/411)
 * 🌐 [Configurable CORS Credentials](https://github.com/etkecc/synapse-admin/pull/456)
+* [Do not check homeserver URL during typing in the login form](https://github.com/etkecc/synapse-admin/pull/585)
+* [Improve user account status toggles](https://github.com/etkecc/synapse-admin/pull/608)
+* [Validate that password is entered upon reactivation of account](https://github.com/etkecc/synapse-admin/pull/609)
 
 #### exclusive for [etke.cc](https://etke.cc) customers
 

docs/restrict-hs.md

@@ -9,7 +9,7 @@ You can do that for a single homeserver or multiple homeservers at once, as `res
 an array of strings.
 
 The examples below contain the configuration settings to restrict the Synapse Admin instance to work only with
-`example.com` (with Synapse runing at `matrix.example.com`) and
+`example.com` (with Synapse running at `matrix.example.com`) and
 `example.net` (with Synapse running at `synapse.example.net`) homeservers.
 Note that the homeserver URL should be the _actual_ homeserver URL, and not the delegated one.
 

justfile

@@ -6,6 +6,9 @@ default:
 build: __install
     @yarn run build --base=./
 
+update:
+    yarn upgrade-interactive --latest
+
 # run the app in a development mode
 run:
     @yarn start --host 0.0.0.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "synapse-admin",
-  "version": "0.10.3",
+  "version": "0.11.1",
   "description": "Admin GUI for the Matrix.org server Synapse",
   "type": "module",
   "author": "etke.cc (originally by Awesome Technologies Innovationslabor GmbH)",
@@ -17,29 +17,29 @@
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^29.5.14",
-    "@types/lodash": "^4.17.16",
-    "@types/node": "^22.15.3",
-    "@types/papaparse": "^5.3.15",
-    "@types/react": "^19.1.2",
+    "@types/lodash": "^4.17.17",
+    "@types/node": "^22.15.30",
+    "@types/papaparse": "^5.3.16",
+    "@types/react": "^19.1.6",
     "@typescript-eslint/eslint-plugin": "^8.32.0",
     "@typescript-eslint/parser": "^8.32.0",
-    "@vitejs/plugin-react": "^4.4.1",
-    "eslint": "^9.26.0",
-    "eslint-config-prettier": "^10.1.2",
+    "@vitejs/plugin-react": "^4.5.1",
+    "eslint": "^9.28.0",
+    "eslint-config-prettier": "^10.1.5",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
-    "eslint-plugin-prettier": "^5.3.1",
+    "eslint-plugin-prettier": "^5.4.1",
     "eslint-plugin-unused-imports": "^4.1.4",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-fetch-mock": "^3.0.3",
     "prettier": "^3.5.3",
     "react-test-renderer": "^19.1.0",
-    "ts-jest": "^29.3.2",
+    "ts-jest": "^29.3.4",
     "ts-node": "^10.9.2",
     "typescript": "^5.8.3",
-    "typescript-eslint": "^8.31.1",
-    "vite": "^6.3.4",
+    "typescript-eslint": "^8.33.1",
+    "vite": "^6.3.5",
     "vite-plugin-version-mark": "^0.1.4"
   },
   "dependencies": {
@@ -47,29 +47,29 @@
     "@emotion/styled": "^11.14.0",
     "@haleos/ra-language-german": "^1.0.0",
     "@haxqer/ra-language-chinese": "^4.16.2",
-    "@mui/icons-material": "^6.4.8",
-    "@mui/material": "^6.4.8",
-    "@mui/utils": "^6.4.9",
-    "@tanstack/react-query": "^5.75.4",
+    "@mui/icons-material": "^7.1.1",
+    "@mui/material": "^7.1.1",
+    "@mui/utils": "^7.1.0",
+    "@tanstack/react-query": "^5.80.6",
     "history": "^5.3.0",
     "jest-fixed-jsdom": "^0.0.9",
     "lodash": "^4.17.21",
-    "papaparse": "^5.5.1",
+    "papaparse": "^5.5.3",
     "ra-core": "^5.4.4",
     "ra-i18n-polyglot": "^5.4.4",
     "ra-language-english": "^5.4.4",
     "ra-language-farsi": "^5.1.0",
-    "ra-language-french": "^5.8.0",
+    "ra-language-french": "^5.8.3",
     "ra-language-italian": "^3.13.1",
-    "ra-language-russian": "^5.4.3",
+    "ra-language-russian": "^5.4.4",
     "react": "^19.1.0",
-    "react-admin": "^5.8.0",
+    "react-admin": "^5.8.3",
     "react-dom": "^19.1.0",
-    "react-hook-form": "^7.56.2",
+    "react-hook-form": "^7.57.0",
     "react-is": "^19.1.0",
-    "ts-jest-mock-import-meta": "^1.3.0",
-    "react-router": "^7.5.2",
-    "react-router-dom": "^7.5.3"
+    "react-router": "^7.6.0",
+    "react-router-dom": "^7.6.2",
+    "ts-jest-mock-import-meta": "^1.3.0"
   },
   "scripts": {
     "start": "vite serve",

src/App.tsx

@@ -59,6 +59,7 @@ export const App = () => (
     <Admin
       disableTelemetry
       requireAuth
+      title="Synapse Admin"
       layout={AdminLayout}
       loginPage={LoginPage}
       authProvider={authProvider}

src/components/ExperimentalFeatures.tsx

@@ -74,7 +74,7 @@ export const ExperimentalFeaturesList = () => {
   const updateFeature = async (feature_name: string, feature_value: boolean) => {
     const updatedFeatures = { ...features, [feature_name]: feature_value } as ExperimentalFeaturesModel;
     setFeatures(updatedFeatures);
-    const reponse = await dataProvider.updateFeatures(record.id, updatedFeatures);
+    const response = await dataProvider.updateFeatures(record.id, updatedFeatures);
     notify("ra.notification.updated", {
       messageArgs: { smart_count: 1 },
       type: "success",

src/components/UserAccountData.tsx

@@ -40,7 +40,7 @@ const UserAccountData = () => {
     <>
       <Stack direction="column" spacing={2} width="100%">
         <Typography variant="h6">{translate("resources.users.account_data.title")}</Typography>
-        <Typography variant="body1">
+        <Typography variant="body1" component="div">
           <Box>
             <Accordion>
               <AccordionSummary expandIcon={<ArrowDownwardIcon />}>

src/components/UserRateLimits.tsx

@@ -33,7 +33,6 @@ const RateLimitRow = ({
       }}
     >
       <TextField
-        id="outlined-number"
         type="number"
         value={value}
         onChange={handleChange}

src/i18n/de.ts

@@ -204,11 +204,14 @@ const de: SynapseTranslationMessages = {
       },
       helper: {
         password: "Durch die Änderung des Passworts wird der Benutzer von allen Sitzungen abgemeldet.",
+        password_required_for_reactivation: "Sie müssen ein Passwort angeben, um ein Konto wieder zu aktivieren.",
         create_password: "Generiere ein starkes und sicheres Passwort mit dem Button unten.",
         deactivate: "Sie müssen ein Passwort angeben, um ein Konto wieder zu aktivieren.",
         suspend:
           "Ein gesperrter Benutzer kann sich nicht mehr anmelden und wird in den schreibgeschützten Modus versetzt.",
         erase: "DSGVO konformes Löschen der Benutzerdaten.",
+        admin: "Ein Serveradministrator hat volle Kontrolle über den Server und seine Benutzer.",
+        lock: "Verhindert, dass der Benutzer den Server nutzen kann. Dies ist eine nicht-destruktive Aktion, die rückgängig gemacht werden kann.",
         erase_text:
           "Das bedeutet, dass die von dem/den Benutzer(n) gesendeten Nachrichten für alle, die zum Zeitpunkt des Sendens im Raum waren, sichtbar bleiben, aber für Benutzer, die dem Raum später beitreten, nicht sichtbar sind.",
         erase_admin_error: "Das Löschen des eigenen Benutzers ist nicht erlaubt.",

src/i18n/en.ts

@@ -171,10 +171,13 @@ const en: SynapseTranslationMessages = {
       },
       helper: {
         password: "Changing password will log user out of all sessions.",
+        password_required_for_reactivation: "You must provide a password to re-activate an account.",
         create_password: "Generate a strong and secure password using the button below.",
+        lock: "Prevent the user from usefully using their account. This is a non-destructive action that can be reversed.",
         deactivate: "You must provide a password to re-activate an account.",
         suspend: "Suspending user means they are put into a read-only mode.",
-        erase: "Mark the user as GDPR-erased",
+        erase: "In addition to deactivating the user, mark the user as GDPR-erased.",
+        admin: "A server administrator has full control over the server and its users.",
         erase_text:
           "This means messages sent by the user(-s) will still be visible by anyone who was in the room when these messages were sent, but hidden from users joining the room afterward.",
         erase_admin_error: "Deleting own user is not allowed.",

src/i18n/fa.ts

@@ -162,6 +162,9 @@ const fa: SynapseTranslationMessages = {
         user_type: "نوع کاربر",
       },
       helper: {
+        password_required_for_reactivation: "برای فعالسازی مجدد حساب باید رمز عبور وارد کنید.",
+        admin: "مدیر سرور دارای کنترل کامل بر روی سرور و کاربران آن است.",
+        lock: "ممنوعیت استفاده از سرور توسط کاربر. این یک عملیات غیر مخرب است که می تواند برگردانده شود.",
         password: "با تغییر رمز عبور کاربر از تمام دستگاه ها خارج می شود.",
         create_password: "رمز عبور قوی و امنی را با استفاده از دکمه زیر ایجاد کنید.",
         deactivate: "برای فعالسازی مجدد حساب باید رمز عبور وارد کنید.",

src/i18n/fr.ts

@@ -170,10 +170,13 @@ const fr: SynapseTranslationMessages = {
       },
       helper: {
         password: "Changer le mot de passe déconnectera l'utilisateur de toutes les sessions.",
+        password_required_for_reactivation: "Vous devez fournir un mot de passe pour réactiver le compte.",
         create_password: "Générer un mot de passe fort et sécurisé en utilisant le bouton ci-dessous.",
         deactivate: "Vous devrez fournir un mot de passe pour réactiver le compte.",
         suspend: "L'utilisateur sera suspendu jusqu'à ce que vous le réactiviez.",
         erase: "Marquer l'utilisateur comme effacé conformément au RGPD",
+        admin: "Un administrateur de serveur a un contrôle total sur le serveur et ses utilisateurs.",
+        lock: "Empêche l'utilisateur d'utiliser le serveur. C'est une action non destructive qui peut être annulée.",
         erase_text:
           "Cela signifie que les messages envoyés par le(s) utilisateur(s) seront toujours visibles par toute personne qui se trouvait dans la salle au moment où ces messages ont été envoyés, mais qu'ils seront cachés aux utilisateurs qui rejoindront la salle par la suite.",
         erase_admin_error: "La suppression de son propre utilisateur n'est pas autorisée.",

src/i18n/index.d.ts

@@ -161,9 +161,12 @@ interface SynapseTranslationMessages extends TranslationMessages {
       };
       helper: {
         password: string;
+        password_required_for_reactivation: string;
         create_password: string;
+        lock: string;
         deactivate: string;
         suspend: string;
+        admin: string;
         erase: string;
         erase_text: string;
         erase_admin_error: string;

src/i18n/it.ts

@@ -163,10 +163,13 @@ const it: SynapseTranslationMessages = {
       },
       helper: {
         password: "Cambiando la password l'utente verrà disconnesso da tutte le sessioni attive.",
+        password_required_for_reactivation: "Devi fornire una password per riattivare l'account.",
         create_password: "Genera una password forte e sicura utilizzando il pulsante sottostante.",
         deactivate: "Devi fornire una password per riattivare l'account.",
         suspend: "Sospendi l'utente",
         erase: "Constrassegna l'utente come cancellato dal GDPR",
+        admin: "Un amministratore del server ha controllo totale sul server e sui suoi utenti.",
+        lock: "Impedisce all'utente di utilizzare il server. Questa è un'azione non distruttiva che può essere annullata.",
         erase_text:
           "Ciò significa che i messaggi inviati dall'utente (o dagli utenti) saranno ancora visibili da chiunque si trovasse nella stanza al momento dell'invio, ma saranno nascosti agli utenti che si uniranno alla stanza in seguito.",
         erase_admin_error: "Non è consentito eliminare il proprio utente.",

src/i18n/ru.ts

@@ -208,11 +208,14 @@ const ru: SynapseTranslationMessages = {
       },
       helper: {
         password: "Смена пароля завершит все сессии пользователя.",
+        password_required_for_reactivation: "Вы должны предоставить пароль для реактивации учётной записи.",
         create_password: "Сгенерировать надёжный и безопасный пароль, используя кнопку ниже.",
         deactivate: "Вы должны предоставить пароль для реактивации учётной записи.",
         suspend:
           "Приостановка учётной записи означает, что пользователь не сможет войти в свою учётную запись, пока она не будет снова активирована.",
         erase: "Пометить пользователя как удалённого в соответствии с GDPR",
+        admin: "Администратор сервера имеет полный контроль над сервером и его пользователями.",
+        lock: "Предотвращает использование пользователем сервера. Это неразрушающее действие, которое может быть отменено.",
         erase_text:
           "Это означает, что сообщения, отправленные пользователем (-ами), будут по-прежнему видны всем, кто находился в комнате в момент их отправки, но будут скрыты от пользователей, присоединившихся к комнате после этого.",
         erase_admin_error: "Удаление собственного пользователя запрещено.",

src/i18n/zh.ts

@@ -193,10 +193,13 @@ const zh: SynapseTranslationMessages = {
       },
       helper: {
         password: "更改密码会使用户注销所有会话。",
+        password_required_for_reactivation: "您必须提供一串密码来激活账户。",
         create_password: "使用下面的按钮生成一个强大和安全的密码。",
         deactivate: "您必须提供一串密码来激活账户。",
         suspend: "您必须提供一串密码来暂停账户。",
         erase: "将用户标记为根据 GDPR 的要求抹除了",
+        admin: "服务器管理员对服务器和其用户有完全的控制权。",
+        lock: "阻止用户使用服务器。这是一个非破坏性的操作，可以被撤销。",
         erase_text:
           "这意味着用户发送的信息对于发送信息时在房间内的任何人来说都是可见的，但对于之后加入房间的用户来说则是隐藏的。",
         erase_admin_error: "不允许删除自己的用户",

src/pages/LoginPage.test.tsx

@@ -1,7 +1,6 @@
 import { render, screen } from "@testing-library/react";
 import polyglotI18nProvider from "ra-i18n-polyglot";
 import { AdminContext } from "react-admin";
-import { BrowserRouter } from "react-router-dom";
 
 import LoginPage from "./LoginPage";
 import { AppContext } from "../Context";
@@ -14,11 +13,9 @@ describe("LoginForm", () => {
   it("renders with no restriction to homeserver", async () => {
     await act(async () => {
       render(
-        <BrowserRouter>
-          <AdminContext i18nProvider={i18nProvider}>
-            <LoginPage />
-          </AdminContext>
-        </BrowserRouter>
+        <AdminContext i18nProvider={i18nProvider}>
+          <LoginPage />
+        </AdminContext>
       );
     });
 
@@ -35,20 +32,18 @@ describe("LoginForm", () => {
 
   it("renders with single restricted homeserver", () => {
     render(
-      <BrowserRouter>
-        <AppContext.Provider
-          value={{
-            restrictBaseUrl: "https://matrix.example.com",
-            asManagedUsers: [],
-            menu: [],
-            corsCredentials: "include",
-          }}
-        >
-          <AdminContext i18nProvider={i18nProvider}>
-            <LoginPage />
-          </AdminContext>
-        </AppContext.Provider>
-      </BrowserRouter>
+      <AppContext.Provider
+        value={{
+          restrictBaseUrl: "https://matrix.example.com",
+          asManagedUsers: [],
+          menu: [],
+          corsCredentials: "include",
+        }}
+      >
+        <AdminContext i18nProvider={i18nProvider}>
+          <LoginPage />
+        </AdminContext>
+      </AppContext.Provider>
     );
 
     screen.getByText(englishMessages.synapseadmin.auth.welcome);
@@ -73,9 +68,7 @@ describe("LoginForm", () => {
         }}
       >
         <AdminContext i18nProvider={i18nProvider}>
-          <BrowserRouter>
-            <LoginPage />
-          </BrowserRouter>
+          <LoginPage />
         </AdminContext>
       </AppContext.Provider>
     );

src/pages/LoginPage.tsx

@@ -23,6 +23,7 @@ import {
   useTranslate,
   PasswordInput,
   TextInput,
+  SelectInput,
   useLocales,
 } from "react-admin";
 import { useFormContext } from "react-hook-form";
@@ -51,16 +52,31 @@ const LoginPage = () => {
     restrictBaseUrl.length > 0 &&
     restrictBaseUrl[0] !== "" &&
     restrictBaseUrl[0] !== null;
+  const baseUrlChoices = allowMultipleBaseUrls ? restrictBaseUrl.map(url => ({ id: url, name: url })) : [];
   const allowAnyBaseUrl = !(allowSingleBaseUrl || allowMultipleBaseUrls);
+  const localStorageBaseUrl = localStorage.getItem("base_url");
+  let base_url = allowSingleBaseUrl ? restrictBaseUrl : localStorageBaseUrl;
+  if (allowMultipleBaseUrls && localStorageBaseUrl && !restrictBaseUrl.includes(localStorageBaseUrl)) {
+    // don't set base_url if it is not in the restrictBaseUrl array
+    base_url = null;
+  }
   const [loading, setLoading] = useState(false);
   const [supportPassAuth, setSupportPassAuth] = useState(true);
   const [locale, setLocale] = useLocaleState();
   const locales = useLocales();
   const translate = useTranslate();
-  const base_url = allowSingleBaseUrl ? restrictBaseUrl : localStorage.getItem("base_url");
+
   const [ssoBaseUrl, setSSOBaseUrl] = useState("");
   const loginToken = new URLSearchParams(window.location.search).get("loginToken");
   const [loginMethod, setLoginMethod] = useState<LoginMethod>("credentials");
+  const [serverVersion, setServerVersion] = useState("");
+  const [matrixVersions, setMatrixVersions] = useState("");
+
+  useEffect(() => {
+    if (base_url) {
+      checkServerInfo(base_url);
+    }
+  }, []);
 
   useEffect(() => {
     if (!loginToken) {
@@ -133,54 +149,75 @@ const LoginPage = () => {
     window.location.href = ssoFullUrl;
   };
 
+  const checkServerInfo = async (url: string) => {
+    if (!isValidBaseUrl(url)) {
+      setServerVersion("");
+      setMatrixVersions("");
+      setSupportPassAuth(false);
+      setSSOBaseUrl("");
+      return;
+    }
+
+    try {
+      const serverVersion = await getServerVersion(url);
+      setServerVersion(`${translate("synapseadmin.auth.server_version")} ${serverVersion}`);
+    } catch (error) {
+      setServerVersion("");
+    }
+
+    try {
+      const features = await getSupportedFeatures(url);
+      setMatrixVersions(`${translate("synapseadmin.auth.supports_specs")} ${features.versions.join(", ")}`);
+    } catch (error) {
+      setMatrixVersions("");
+    }
+
+    // Set SSO Url
+    try {
+      const loginFlows = await getSupportedLoginFlows(url);
+      const supportPass = loginFlows.find(f => f.type === "m.login.password") !== undefined;
+      const supportSSO = loginFlows.find(f => f.type === "m.login.sso") !== undefined;
+      setSupportPassAuth(supportPass);
+      setSSOBaseUrl(supportSSO ? url : "");
+    } catch (error) {
+      setSupportPassAuth(false);
+      setSSOBaseUrl("");
+    }
+  };
+
   const UserData = ({ formData }) => {
     const form = useFormContext();
-    const [serverVersion, setServerVersion] = useState("");
-    const [matrixVersions, setMatrixVersions] = useState("");
 
-    const handleUsernameChange = () => {
+    const handleUsernameChange = async () => {
       if (formData.base_url || allowSingleBaseUrl) {
         return;
       }
       // check if username is a full qualified userId then set base_url accordingly
       const domain = splitMxid(formData.username)?.domain;
       if (domain) {
-        getWellKnownUrl(domain).then(url => {
-          if (allowAnyBaseUrl || (allowMultipleBaseUrls && restrictBaseUrl.includes(url)))
-            form.setValue("base_url", url);
-        });
+        const url = await getWellKnownUrl(domain);
+        if (allowAnyBaseUrl || (allowMultipleBaseUrls && restrictBaseUrl.includes(url))) {
+          form.setValue("base_url", url, {
+            shouldValidate: true,
+            shouldDirty: true,
+          });
+          checkServerInfo(url);
+        }
       }
     };
 
-    useEffect(() => {
-      if (!formData.base_url) {
-        form.setValue("base_url", "");
+    const handleBaseUrlBlurOrChange = event => {
+      // Get the value either from the event (onChange) or from formData (onBlur)
+      const value = event?.target?.value || formData.base_url;
+
+      if (!value) {
+        return;
       }
-      if (formData.base_url === "" && allowMultipleBaseUrls) {
-        form.setValue("base_url", restrictBaseUrl[0]);
-      }
-      if (!isValidBaseUrl(formData.base_url)) return;
 
-      getServerVersion(formData.base_url)
-        .then(serverVersion => setServerVersion(`${translate("synapseadmin.auth.server_version")} ${serverVersion}`))
-        .catch(() => setServerVersion(""));
-
-      getSupportedFeatures(formData.base_url)
-        .then(features =>
-          setMatrixVersions(`${translate("synapseadmin.auth.supports_specs")} ${features.versions.join(", ")}`)
-        )
-        .catch(() => setMatrixVersions(""));
-
-      // Set SSO Url
-      getSupportedLoginFlows(formData.base_url)
-        .then(loginFlows => {
-          const supportPass = loginFlows.find(f => f.type === "m.login.password") !== undefined;
-          const supportSSO = loginFlows.find(f => f.type === "m.login.sso") !== undefined;
-          setSupportPassAuth(supportPass);
-          setSSOBaseUrl(supportSSO ? formData.base_url : "");
-        })
-        .catch(() => setSSOBaseUrl(""));
-    }, [formData.base_url, form]);
+      // Trigger validation only when user finishes typing/selecting
+      form.trigger("base_url");
+      checkServerInfo(value);
+    };
 
     useEffect(() => {
       const params = new URLSearchParams(window.location.search);
@@ -189,6 +226,7 @@ const LoginPage = () => {
       const password = params.get("password");
       const accessToken = params.get("accessToken");
       let serverURL = params.get("server");
+
       if (username) {
         form.setValue("username", username);
       }
@@ -202,12 +240,19 @@ const LoginPage = () => {
           form.setValue("accessToken", accessToken);
         }
       }
+
       if (serverURL) {
         const isFullUrl = serverURL.match(/^(http|https):\/\//);
         if (!isFullUrl) {
           serverURL = `https://${serverURL}`;
         }
-        form.setValue("base_url", serverURL);
+
+        form.setValue("base_url", serverURL, {
+          shouldValidate: true,
+          shouldDirty: true,
+        });
+
+        checkServerInfo(serverURL);
       }
     }, [window.location.search]);
 
@@ -227,7 +272,6 @@ const LoginPage = () => {
           <>
             <Box>
               <TextInput
-                autoFocus
                 source="username"
                 label="ra.auth.username"
                 autoComplete="username"
@@ -261,23 +305,30 @@ const LoginPage = () => {
           </Box>
         )}
         <Box>
-          <TextInput
-            source="base_url"
-            label="synapseadmin.auth.base_url"
-            select={allowMultipleBaseUrls}
-            autoComplete="url"
-            {...(loading ? { disabled: true } : {})}
-            readOnly={allowSingleBaseUrl}
-            resettable={allowAnyBaseUrl}
-            validate={[required(), validateBaseUrl]}
-          >
-            {allowMultipleBaseUrls &&
-              restrictBaseUrl.map(url => (
-                <MenuItem key={url} value={url}>
-                  {url}
-                </MenuItem>
-              ))}
-          </TextInput>
+          {allowMultipleBaseUrls && (
+            <SelectInput
+              source="base_url"
+              label="synapseadmin.auth.base_url"
+              select={allowMultipleBaseUrls}
+              autoComplete="url"
+              {...(loading ? { disabled: true } : {})}
+              onChange={handleBaseUrlBlurOrChange}
+              validate={[required(), validateBaseUrl]}
+              choices={baseUrlChoices}
+            />
+          )}
+          {!allowMultipleBaseUrls && (
+            <TextInput
+              source="base_url"
+              label="synapseadmin.auth.base_url"
+              autoComplete="url"
+              {...(loading ? { disabled: true } : {})}
+              readOnly={allowSingleBaseUrl}
+              resettable={allowAnyBaseUrl}
+              validate={[required(), validateBaseUrl]}
+              onBlur={handleBaseUrlBlurOrChange}
+            />
+          )}
         </Box>
         <Typography className="serverVersion">{serverVersion}</Typography>
         <Typography className="matrixVersions">{matrixVersions}</Typography>
@@ -286,7 +337,7 @@ const LoginPage = () => {
   };
 
   return (
-    <Form defaultValues={{ base_url: base_url }} onSubmit={handleSubmit} mode="onTouched">
+    <Form defaultValues={{ base_url: base_url }} onSubmit={handleSubmit} mode="onBlur">
       <LoginFormBox>
         <Card className="card">
           <Box className="avatar">

src/resources/users.tsx

@@ -115,7 +115,8 @@ const userFilters = [
   <BooleanInput source="guests" alwaysOn />,
   <BooleanInput label="resources.users.fields.show_deactivated" source="deactivated" alwaysOn />,
   <BooleanInput label="resources.users.fields.show_locked" source="locked" alwaysOn />,
-  <BooleanInput label="resources.users.fields.show_suspended" source="suspended" alwaysOn />,
+  // waiting for https://github.com/element-hq/synapse/issues/18016
+  // <BooleanInput label="resources.users.fields.show_suspended" source="suspended" alwaysOn />,
 ];
 
 const UserPreventSelfDelete: React.FC<{
@@ -171,7 +172,7 @@ export const UserList = (props: ListProps) => (
   <List
     {...props}
     filters={userFilters}
-    filterDefaultValues={{ deactivated: false, locked: false, suspended: false }}
+    filterDefaultValues={{ guests: false, deactivated: false, locked: false, suspended: false }}
     sort={{ field: "name", order: "ASC" }}
     actions={<UserListActions />}
     pagination={<UserPagination />}
@@ -208,7 +209,6 @@ export const UserList = (props: ListProps) => (
       <BooleanField source="admin" label="resources.users.fields.admin" />
       <BooleanField source="deactivated" label="resources.users.fields.deactivated" />
       <BooleanField source="locked" label="resources.users.fields.locked" />
-      <BooleanField source="suspended" label="resources.users.fields.suspended" />
       <BooleanField source="erased" sortable={false} label="resources.users.fields.erased" />
       <DateField source="creation_ts" label="resources.users.fields.creation_ts_ms" showTime options={DATE_FORMAT} />
     </DatagridConfigurable>
@@ -426,7 +426,7 @@ const UserBooleanInput = props => {
 
   return (
     <UserPreventSelfDelete ownUserIsSelected={ownUserIsSelected} asManagedUserIsSelected={asManagedUserIsSelected}>
-      <BooleanInput {...props} disabled={ownUserIsSelected || asManagedUserIsSelected} />
+      <BooleanInput disabled={ownUserIsSelected || asManagedUserIsSelected} {...props} />
     </UserPreventSelfDelete>
   );
 };
@@ -434,6 +434,7 @@ const UserBooleanInput = props => {
 const UserPasswordInput = props => {
   const record = useRecordContext();
   let asManagedUserIsSelected = false;
+  const translate = useTranslate();
 
   // Get form context to update field value
   const form = useFormContext();
@@ -446,17 +447,34 @@ const UserPasswordInput = props => {
     form.setValue("password", password, { shouldDirty: true });
   };
 
+  // Get the current deactivated state and the original value
+  const deactivated = form.watch("deactivated");
+  const deactivatedFromRecord = record?.deactivated;
+
+  // Custom validation for reactivation case
+  const validatePasswordOnReactivation = value => {
+    if (deactivatedFromRecord === true && deactivated === false && !value) {
+      return translate("resources.users.helper.password_required_for_reactivation");
+    }
+    return undefined;
+  };
+
+  let passwordHelperText = "resources.users.helper.create_password";
+
+  if (asManagedUserIsSelected) {
+    passwordHelperText = "resources.users.helper.modify_managed_user_error";
+  } else if (deactivatedFromRecord === true && deactivated === false) {
+    passwordHelperText = "resources.users.helper.password_required_for_reactivation";
+  } else if (record) {
+    passwordHelperText = "resources.users.helper.password";
+  }
+
   return (
     <>
       <PasswordInput
         {...props}
-        helperText={
-          asManagedUserIsSelected
-            ? "resources.users.helper.modify_managed_user_error"
-            : record
-              ? "resources.users.helper.password"
-              : "resources.users.helper.create_password"
-        }
+        validate={validatePasswordOnReactivation}
+        helperText={passwordHelperText}
         disabled={asManagedUserIsSelected}
       />
       <Button
@@ -470,8 +488,28 @@ const UserPasswordInput = props => {
   );
 };
 
+const ErasedBooleanInput = props => {
+  const record = useRecordContext();
+  const form = useFormContext();
+  const deactivated = form.watch("deactivated");
+  const erased = form.watch("erased");
+
+  const erasedFromRecord = record?.erased;
+  const deactivatedFromRecord = record?.deactivated;
+
+  useEffect(() => {
+    // If the user was erased and deactivated, by unchecking Erased, we want to also uncheck Deactivated
+    if (erasedFromRecord === true && erased === false) {
+      form.setValue("deactivated", false);
+    }
+  }, [deactivatedFromRecord, erased, erasedFromRecord]);
+
+  return <UserBooleanInput disabled={!deactivated} {...props} />;
+};
+
 export const UserEdit = (props: EditProps) => {
   const translate = useTranslate();
+  const theme = useTheme();
 
   return (
     <Edit
@@ -515,12 +553,24 @@ export const UserEdit = (props: EditProps) => {
             helperText="resources.users.helper.password"
           />
           <SelectInput source="user_type" choices={choices_type} translateChoice={false} resettable />
-          <BooleanInput source="admin" />
-          <UserBooleanInput source="locked" />
-          <UserBooleanInput source="deactivated" helperText="resources.users.helper.deactivate" />
+          <BooleanInput source="admin" helperText="resources.users.helper.admin" />
           <UserBooleanInput source="suspended" helperText="resources.users.helper.suspend" />
-          <BooleanInput source="erased" disabled />
-          <DateField source="creation_ts_ms" showTime options={DATE_FORMAT} />
+          <UserBooleanInput
+            sx={{ color: theme.palette.warning.main }}
+            source="locked"
+            helperText="resources.users.helper.lock"
+          />
+          <UserBooleanInput
+            sx={{ color: theme.palette.error.main }}
+            source="deactivated"
+            helperText="resources.users.helper.deactivate"
+          />
+          <ErasedBooleanInput
+            sx={{ color: theme.palette.error.main, marginLeft: "25px" }}
+            source="erased"
+            helperText="resources.users.helper.erase"
+          />
+          <DateField sx={{ marginTop: "20px" }} source="creation_ts_ms" showTime options={DATE_FORMAT} />
           <TextField source="consent_version" />
         </FormTab>
 

src/synapse/dataProvider.ts

@@ -348,6 +348,11 @@ export interface SynapseDataProvider extends DataProvider {
   getAccountData: (id: Identifier) => Promise<AccountDataModel>;
   checkUsernameAvailability: (username: string) => Promise<UsernameAvailabilityResult>;
   makeRoomAdmin: (room_id: string, user_id: string) => Promise<{ success: boolean; error?: string; errcode?: string }>;
+  suspendUser: (
+    id: Identifier,
+    suspendValue: boolean
+  ) => Promise<{ success: boolean; error?: string; errcode?: string }>;
+  eraseUser: (id: Identifier) => Promise<{ success: boolean; error?: string; errcode?: string }>;
   getServerRunningProcess: (etkeAdminUrl: string) => Promise<ServerProcessResponse>;
   getServerStatus: (etkeAdminUrl: string) => Promise<ServerStatusResponse>;
   getServerNotifications: (etkeAdminUrl: string) => Promise<ServerNotificationsResponse>;
@@ -782,6 +787,7 @@ const baseDataProvider: SynapseDataProvider = {
     const res = resourceMap[resource];
 
     const endpoint_url = homeserver + res.path;
+
     const { json } = await jsonClient(`${endpoint_url}/${encodeURIComponent(params.id)}`, {
       method: "PUT",
       body: JSON.stringify(params.data, filterNullValues),
@@ -1026,6 +1032,38 @@ const baseDataProvider: SynapseDataProvider = {
       throw error;
     }
   },
+  suspendUser: async (id: Identifier, suspendValue: boolean) => {
+    const base_url = localStorage.getItem("base_url");
+    const endpoint_url = `${base_url}/_synapse/admin/v1/suspend/${encodeURIComponent(returnMXID(id))}`;
+    try {
+      const { json } = await jsonClient(endpoint_url, {
+        method: "PUT",
+        body: JSON.stringify({ suspend: suspendValue }),
+      });
+      return { success: true };
+    } catch (error) {
+      if (error instanceof HttpError) {
+        return { success: false, error: error.body.error, errcode: error.body.errcode };
+      }
+      throw error;
+    }
+  },
+  eraseUser: async (id: Identifier) => {
+    const base_url = localStorage.getItem("base_url");
+    const endpoint_url = `${base_url}/_synapse/admin/v1/deactivate/${encodeURIComponent(returnMXID(id))}`;
+    try {
+      await jsonClient(endpoint_url, {
+        method: "POST",
+        body: JSON.stringify({ erase: true }),
+      });
+      return { success: true };
+    } catch (error) {
+      if (error instanceof HttpError) {
+        return { success: false, error: error.body.error, errcode: error.body.errcode };
+      }
+      throw error;
+    }
+  },
   getServerRunningProcess: async (etkeAdminUrl: string, burstCache = false): Promise<ServerProcessResponse> => {
     const locked_at = "";
     const command = "";
@@ -1427,24 +1465,39 @@ const dataProvider = withLifecycleCallbacks(baseDataProvider, [
       const avatarFile = params.data.avatar_file?.rawFile;
       const avatarErase = params.data.avatar_erase;
       const rates = params.data.rates;
+      const suspended = params.data.suspended;
+      const previousSuspended = params.previousData?.suspended;
+      const deactivated = params.data.deactivated;
+      const erased = params.data.erased;
 
       if (rates) {
         await dataProvider.setRateLimits(params.id, rates);
         delete params.data.rates;
       }
 
+      if (suspended !== undefined && suspended !== previousSuspended) {
+        await (dataProvider as SynapseDataProvider).suspendUser(params.id, suspended);
+        delete params.data.suspended;
+      }
+
+      if (deactivated !== undefined && erased !== undefined) {
+        await (dataProvider as SynapseDataProvider).eraseUser(params.id);
+        delete params.data.deactivated;
+        delete params.data.erased;
+      }
+
       if (avatarErase) {
         params.data.avatar_url = "";
         return params;
       }
 
       if (avatarFile instanceof File) {
-        const reponse = await dataProvider.uploadMedia({
+        const response = await dataProvider.uploadMedia({
           file: avatarFile,
           filename: params.data.avatar_file.title,
           content_type: params.data.avatar_file.rawFile.type,
         });
-        params.data.avatar_url = reponse.content_uri;
+        params.data.avatar_url = response.content_uri;
       }
       return params;
     },

src/utils/config.ts

@@ -67,7 +67,7 @@ export const FetchConfig = async () => {
 };
 
 // load config from context
-// we deliberately processing each key separately to avoid overwriting the whole config, loosing some keys, and messing
+// we deliberately processing each key separately to avoid overwriting the whole config, losing some keys, and messing
 // with typescript types
 export const LoadConfig = (context: any) => {
   if (context?.restrictBaseUrl) {

src/utils/fetchMedia.ts

@@ -2,7 +2,7 @@ export const getServerAndMediaIdFromMxcUrl = (mxcUrl: string): { serverName: str
   const re = /^mxc:\/\/([^/]+)\/([\w-]+)$/;
   const ret = re.exec(mxcUrl);
   if (ret == null) {
-    throw new Error("Invalid mxcUrl");
+    return { serverName: "", mediaId: "" };
   }
   const serverName = ret[1];
   const mediaId = ret[2];
@@ -17,7 +17,8 @@ export const fetchAuthenticatedMedia = async (mxcUrl: string, type: MediaType):
 
   const { serverName, mediaId } = getServerAndMediaIdFromMxcUrl(mxcUrl);
   if (!serverName || !mediaId) {
-    throw new Error("Invalid mxcUrl");
+    console.error("Invalid mxcUrl", mxcUrl, "serverName:", serverName, "mediaId:", mediaId);
+    return new Response(null, { status: 400, statusText: "Invalid mxcUrl" });
   }
 
   let url = "";