diff --git a/src/components/LoginPage.jsx b/src/components/LoginPage.jsx index b177efa..b540515 100644 --- a/src/components/LoginPage.jsx +++ b/src/components/LoginPage.jsx @@ -27,6 +27,7 @@ import { styled } from "@mui/material/styles"; import LockIcon from "@mui/icons-material/Lock"; import { getServerVersion, + getSupportedFeatures, getSupportedLoginFlows, getWellKnownUrl, isValidBaseUrl, @@ -36,7 +37,7 @@ import { const FormBox = styled(Box)(({ theme }) => ({ display: "flex", flexDirection: "column", - minHeight: "calc(100vh - 1em)", + minHeight: "calc(100vh - 1rem)", alignItems: "center", justifyContent: "flex-start", background: "url(./images/floating-cogs.svg)", @@ -45,12 +46,12 @@ const FormBox = styled(Box)(({ theme }) => ({ backgroundSize: "cover", [`& .card`]: { - minWidth: "30em", - marginTop: "6em", - marginBottom: "6em", + width: "30rem", + marginTop: "6rem", + marginBottom: "6rem", }, [`& .avatar`]: { - margin: "1em", + margin: "1rem", display: "flex", justifyContent: "center", }, @@ -59,24 +60,31 @@ const FormBox = styled(Box)(({ theme }) => ({ }, [`& .hint`]: { marginTop: "1em", + marginBottom: "1em", display: "flex", justifyContent: "center", color: theme.palette.grey[600], }, [`& .form`]: { - padding: "0 1em 1em 1em", + padding: "0 1rem 1rem 1rem", }, - [`& .input`]: { - marginTop: "1em", + [`& .select`]: { + marginBottom: "2rem", }, [`& .actions`]: { - padding: "0 1em 1em 1em", + padding: "0 1rem 1rem 1rem", }, [`& .serverVersion`]: { color: theme.palette.grey[500], fontFamily: "Roboto, Helvetica, Arial, sans-serif", - marginBottom: "1em", - marginLeft: "0.5em", + marginLeft: "0.5rem", + }, + [`& .matrixVersions`]: { + color: theme.palette.grey[500], + fontFamily: "Roboto, Helvetica, Arial, sans-serif", + fontSize: "0.8rem", + marginBottom: "1rem", + marginLeft: "0.5rem", }, })); @@ -164,6 +172,7 @@ const LoginPage = () => { const UserData = ({ formData }) => { const form = useFormContext(); const [serverVersion, setServerVersion] = useState(""); + const [matrixVersions, setMatrixVersions] = useState(""); const handleUsernameChange = _ => { if (formData.base_url || cfg_base_url) return; @@ -185,6 +194,14 @@ const LoginPage = () => { ) .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 => { @@ -237,6 +254,7 @@ const LoginPage = () => { /> {serverVersion} + {matrixVersions} ); }; @@ -267,7 +285,7 @@ const LoginPage = () => { }} fullWidth disabled={loading} - className="input" + className="select" > Deutsch English diff --git a/src/i18n/de.js b/src/i18n/de.js index 8ba31d3..0471137 100644 --- a/src/i18n/de.js +++ b/src/i18n/de.js @@ -7,6 +7,7 @@ const de = { base_url: "Heimserver URL", welcome: "Willkommen bei Synapse-admin", server_version: "Synapse Version", + supports_specs: "unterstützt Matrix-Specs", username_error: "Bitte vollständigen Nutzernamen angeben: '@user:domain'", protocol_error: "Die URL muss mit 'http://' oder 'https://' beginnen", url_error: "Keine gültige Matrix Server URL", diff --git a/src/i18n/en.js b/src/i18n/en.js index 9586508..a7d234b 100644 --- a/src/i18n/en.js +++ b/src/i18n/en.js @@ -7,6 +7,7 @@ const en = { base_url: "Homeserver URL", welcome: "Welcome to Synapse-admin", server_version: "Synapse version", + supports_specs: "supports Matrix specs", username_error: "Please enter fully qualified user ID: '@user:domain'", protocol_error: "URL has to start with 'http://' or 'https://'", url_error: "Not a valid Matrix server URL", diff --git a/src/synapse/synapse.js b/src/synapse/synapse.js index 64003ba..ddd4136 100644 --- a/src/synapse/synapse.js +++ b/src/synapse/synapse.js @@ -36,6 +36,13 @@ export const getServerVersion = async baseUrl => { return response.json.server_version; }; +/** Get supported Matrix features */ +export const getSupportedFeatures = async baseUrl => { + const versionUrl = `${baseUrl}/_matrix/client/versions`; + const response = await fetchUtils.fetchJson(versionUrl, { method: "GET" }); + return response.json; +}; + /** * Get supported login flows * @param baseUrl the base URL of the homeserver