From 47f56f06b9c48b4f0ddba32e2c5b81c65f4010a7 Mon Sep 17 00:00:00 2001
From: Simon Ser <contact@emersion.fr>
Date: Tue, 30 Nov 2021 15:49:52 +0100
Subject: [PATCH] Mark register/verify dialogs as loading

---
 components/app.js         | 37 +++++++++++++++++++++++++++++++++----
 components/verify-form.js |  4 +++-
 2 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/components/app.js b/components/app.js
index 5794fe4..70c453c 100644
--- a/components/app.js
+++ b/components/app.js
@@ -1436,11 +1436,22 @@ export default class App extends Component {
 		this.openDialog("register", { emailRequired });
 	}
 
+	setDialogLoading(promise) {
+		const setLoading = (loading) => {
+			this.setState((state) => {
+				return { dialogData: { ...state.dialogData, loading } };
+			});
+		};
+
+		setLoading(true);
+		promise.finally(() => setLoading(false));
+	}
+
 	handleRegisterSubmit(email, password) {
 		let serverID = State.getActiveServerID(this.state);
 		let client = this.clients.get(serverID);
 		// TODO: show registration status (pending/error) in dialog
-		client.registerAccount(email, password).then((data) => {
+		let promise = client.registerAccount(email, password).then((data) => {
 			this.dismissDialog();
 
 			if (data.verificationRequired) {
@@ -1464,6 +1475,7 @@ export default class App extends Component {
 			};
 			store.autoconnect.put(autoconnect);
 		});
+		this.setDialogLoading(promise);
 	}
 
 	handleVerifyClick(account, message) {
@@ -1474,9 +1486,10 @@ export default class App extends Component {
 		let serverID = State.getActiveServerID(this.state);
 		let client = this.clients.get(serverID);
 		// TODO: display verification status (pending/error) in dialog
-		client.verifyAccount(this.state.dialogData.account, code).then(() => {
+		let promise = client.verifyAccount(this.state.dialogData.account, code).then(() => {
 			this.dismissDialog();
 		});
+		this.setDialogLoading(promise);
 	}
 
 	handleAddNetworkClick() {
@@ -1632,6 +1645,7 @@ export default class App extends Component {
 
 		let dialog = null;
 		let dialogData = this.state.dialogData || {};
+		let dialogBody;
 		switch (this.state.dialog) {
 		case "network":
 			let isNew = !dialogData.id;
@@ -1670,18 +1684,33 @@ export default class App extends Component {
 			`;
 			break;
 		case "register":
+			if (dialogData.loading) {
+				dialogBody = html`<p>Creating account…</p>`;
+			} else {
+				dialogBody = html`
+					<${RegisterForm} emailRequired=${dialogData.emailRequired} onSubmit=${this.handleRegisterSubmit}/>
+				`;
+			}
 			dialog = html`
 				<${Dialog} title="Register a new ${getServerName(activeServer, activeBouncerNetwork, isBouncer)} account" onDismiss=${this.dismissDialog}>
-					<${RegisterForm} emailRequired=${dialogData.emailRequired} onSubmit=${this.handleRegisterSubmit}/>
+					${dialogBody}
 				</>
 			`;
 			break;
 		case "verify":
+			if (dialogData.loading) {
+				dialogBody = html`<p>Verifying account…</p>`;
+			} else {
+				dialogBody = html`
+					<${VerifyForm} account=${dialogData.account} message=${dialogData.message} onSubmit=${this.handleVerifySubmit}/>
+				`;
+			}
 			dialog = html`
 				<${Dialog} title="Verify ${getServerName(activeServer, activeBouncerNetwork, isBouncer)} account" onDismiss=${this.dismissDialog}>
-					<${VerifyForm} account=${dialogData.account} message=${dialogData.message} onSubmit=${this.handleVerifySubmit}/>
+					${dialogBody}
 				</>
 			`;
+			break;
 		}
 
 		let error = null;
diff --git a/components/verify-form.js b/components/verify-form.js
index 8589c3d..6f64b91 100644
--- a/components/verify-form.js
+++ b/components/verify-form.js
@@ -28,7 +28,9 @@ export default class RegisterForm extends Component {
 	render() {
 		return html`
 			<form onChange=${this.handleChange} onSubmit=${this.handleSubmit}>
-				<p>Your account <strong>${this.props.account}</strong> has been created, but a verification code is required to complete the registration:<br/>${linkify(this.props.message)}</p>
+				<p>Your account <strong>${this.props.account}</strong> has been created, but a verification code is required to complete the registration.</p>
+
+				<p>${linkify(this.props.message)}</p>
 
 				<label>
 					Verification code:<br/>