From 9e795ed3bdef49d1832bbfe185c11a33cb733525 Mon Sep 17 00:00:00 2001
From: Tulir Asokan <tulir@maunium.net>
Date: Mon, 18 Nov 2024 00:27:47 +0200
Subject: [PATCH] web/login: reorder fields

---
 web/src/ui/login/LoginScreen.tsx | 35 +++++++++++++++++++++-----------
 1 file changed, 23 insertions(+), 12 deletions(-)

diff --git a/web/src/ui/login/LoginScreen.tsx b/web/src/ui/login/LoginScreen.tsx
index c3a680f..bf7ee10 100644
--- a/web/src/ui/login/LoginScreen.tsx
+++ b/web/src/ui/login/LoginScreen.tsx
@@ -71,7 +71,10 @@ export const LoginScreen = ({ client }: LoginScreenProps) => {
 
 	const resolveLoginFlows = useCallback((serverURL: string) => {
 		client.rpc.getLoginFlows(serverURL).then(
-			resp => setLoginFlows(resp.flows.map(flow => flow.type)),
+			resp => {
+				setLoginFlows(resp.flows.map(flow => flow.type))
+				setError("")
+			},
 			err => setError(`Failed to get login flows: ${err}`),
 		)
 	}, [client])
@@ -79,7 +82,7 @@ export const LoginScreen = ({ client }: LoginScreenProps) => {
 		client.rpc.discoverHomeserver(username).then(
 			resp => {
 				const url = resp["m.homeserver"].base_url
-				setLoginFlows(null)
+				setLoginFlows([])
 				setHomeserverURL(url)
 				resolveLoginFlows(url)
 			},
@@ -96,6 +99,15 @@ export const LoginScreen = ({ client }: LoginScreenProps) => {
 			clearTimeout(timeout)
 		}
 	}, [username, resolveHomeserver])
+	useEffect(() => {
+		if (loginFlows !== null || loginFlows === "resolving" || !homeserverURL) {
+			return
+		}
+		const timeout = setTimeout(() => resolveLoginFlows(homeserverURL), 500)
+		return () => {
+			clearTimeout(timeout)
+		}
+	}, [homeserverURL, loginFlows, resolveLoginFlows])
 	const onChangeUsername = useCallback((evt: React.ChangeEvent<HTMLInputElement>) => {
 		setUsername(evt.target.value)
 	}, [])
@@ -120,30 +132,29 @@ export const LoginScreen = ({ client }: LoginScreenProps) => {
 				value={username}
 				onChange={onChangeUsername}
 			/>
-			{supportsPassword !== false && <input
+			<input
+				type="text"
+				id="mxlogin-homeserver-url"
+				placeholder="Homeserver URL (will autofill)"
+				value={homeserverURL}
+				onChange={onChangeHomeserverURL}
+			/>
+			{supportsPassword && <input
 				type="password"
 				id="mxlogin-password"
 				placeholder="Password"
 				value={password}
 				onChange={onChangePassword}
 			/>}
-			<input
-				type="text"
-				id="mxlogin-homeserver-url"
-				placeholder="Homeserver URL"
-				value={homeserverURL}
-				onChange={onChangeHomeserverURL}
-			/>
 			<div className="buttons">
 				{supportsSSO && <button
 					className="mx-login-button"
 					type={supportsPassword ? "button" : "submit"}
 					onClick={supportsPassword ? loginSSO : undefined}
 				>Login with SSO</button>}
-				{supportsPassword !== false && <button
+				{supportsPassword && <button
 					className="mx-login-button"
 					type="submit"
-					disabled={!loginFlows}
 				>Login{supportsSSO || beeperDomain ? " with password" : ""}</button>}
 			</div>
 			{error && <div className="error">