Login with custom homeserver

src/ConferenceCallManagerHooks.js

@@ -130,15 +130,34 @@ export function useClient(homeserverUrl) {
       });
   }, []);
 
-  const login = useCallback(async (username, password) => {
+  const login = useCallback(async (homeserver, username, password) => {
     try {
-      const registrationClient = matrix.createClient(homeserverUrl);
+      let loginHomeserverUrl = homeserver.trim();
+
+      if (!loginHomeserverUrl.includes("://")) {
+        loginHomeserverUrl = "https://" + loginHomeserverUrl;
+      }
+
+      try {
+        const wellKnownUrl = new URL(
+          "/.well-known/matrix/client",
+          window.location
+        );
+        const response = await fetch(wellKnownUrl);
+        const config = await response.json();
+
+        if (config["m.homeserver"]) {
+          loginHomeserverUrl = config["m.homeserver"];
+        }
+      } catch (error) {}
+
+      const registrationClient = matrix.createClient(loginHomeserverUrl);
 
       const { user_id, device_id, access_token } =
         await registrationClient.loginWithPassword(username, password);
 
       const client = await initClient({
-        baseUrl: homeserverUrl,
+        baseUrl: loginHomeserverUrl,
         accessToken: access_token,
         userId: user_id,
         deviceId: device_id,

src/LoginPage.jsx

@@ -21,8 +21,9 @@ import { FieldRow, InputField, Button, ErrorMessage } from "./Input";
 import { Center, Content, Info, Modal } from "./Layout";
 
 export function LoginPage({ onLogin }) {
-  const loginUsernameRef = useRef();
+  const homeserverRef = useRef();
-  const loginPasswordRef = useRef();
+  const usernameRef = useRef();
+  const passwordRef = useRef();
   const history = useHistory();
   const location = useLocation();
   const [error, setError] = useState();
@@ -30,7 +31,11 @@ export function LoginPage({ onLogin }) {
   const onSubmitLoginForm = useCallback(
     (e) => {
       e.preventDefault();
-      onLogin(loginUsernameRef.current.value, loginPasswordRef.current.value)
+      onLogin(
+        homeserverRef.current.value,
+        usernameRef.current.value,
+        passwordRef.current.value
+      )
         .then(() => {
           if (location.state && location.state.from) {
             history.replace(location.state.from);
@@ -56,7 +61,18 @@ export function LoginPage({ onLogin }) {
               <FieldRow>
                 <InputField
                   type="text"
-                  ref={loginUsernameRef}
+                  ref={homeserverRef}
+                  value={`${window.location.protocol}//${window.location.host}`}
+                  placeholder="Homeserver"
+                  label="Homeserver"
+                  autoCorrect="off"
+                  autoCapitalize="none"
+                />
+              </FieldRow>
+              <FieldRow>
+                <InputField
+                  type="text"
+                  ref={usernameRef}
                   placeholder="Username"
                   label="Username"
                   autoCorrect="off"
@@ -66,7 +82,7 @@ export function LoginPage({ onLogin }) {
               <FieldRow>
                 <InputField
                   type="password"
-                  ref={loginPasswordRef}
+                  ref={passwordRef}
                   placeholder="Password"
                   label="Password"
                 />