chipmunkmc/gamja
1
0
Fork 0
mirror of https://codeberg.org/emersion/gamja.git synced 2024-11-28 18:26:19 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Mark register/verify dialogs as loading

Browse source
This commit is contained in:
Simon Ser 2021-11-30 15:49:52 +01:00
parent 1e84412172
commit 47f56f06b9
2 changed files with 36 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
components/app.js
View file

@ -1436,11 +1436,22 @@ export default class App extends Component {
this.openDialog("register", { emailRequired }); 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) { handleRegisterSubmit(email, password) {
let serverID = State.getActiveServerID(this.state); let serverID = State.getActiveServerID(this.state);
let client = this.clients.get(serverID); let client = this.clients.get(serverID);
// TODO: show registration status (pending/error) in dialog // TODO: show registration status (pending/error) in dialog
client.registerAccount(email, password).then((data) => { let promise = client.registerAccount(email, password).then((data) => {
this.dismissDialog(); this.dismissDialog();
if (data.verificationRequired) { if (data.verificationRequired) {
@ -1464,6 +1475,7 @@ export default class App extends Component {
}; };
store.autoconnect.put(autoconnect); store.autoconnect.put(autoconnect);
}); });
this.setDialogLoading(promise);
} }
handleVerifyClick(account, message) { handleVerifyClick(account, message) {
@ -1474,9 +1486,10 @@ export default class App extends Component {
let serverID = State.getActiveServerID(this.state); let serverID = State.getActiveServerID(this.state);
let client = this.clients.get(serverID); let client = this.clients.get(serverID);
// TODO: display verification status (pending/error) in dialog // 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.dismissDialog();
}); });
this.setDialogLoading(promise);
} }
handleAddNetworkClick() { handleAddNetworkClick() {
@ -1632,6 +1645,7 @@ export default class App extends Component {
let dialog = null; let dialog = null;
let dialogData = this.state.dialogData || {}; let dialogData = this.state.dialogData || {};
let dialogBody;
switch (this.state.dialog) { switch (this.state.dialog) {
case "network": case "network":
let isNew = !dialogData.id; let isNew = !dialogData.id;
@ -1670,18 +1684,33 @@ export default class App extends Component {
`; `;
break; break;
case "register": case "register":
if (dialogData.loading) {
dialogBody = html`<p>Creating account…</p>`;
} else {
dialogBody = html`
<${RegisterForm} emailRequired=${dialogData.emailRequired} onSubmit=${this.handleRegisterSubmit}/>
`;
}
dialog = html` dialog = html`
<${Dialog} title="Register a new ${getServerName(activeServer, activeBouncerNetwork, isBouncer)} account" onDismiss=${this.dismissDialog}> <${Dialog} title="Register a new ${getServerName(activeServer, activeBouncerNetwork, isBouncer)} account" onDismiss=${this.dismissDialog}>
<${RegisterForm} emailRequired=${dialogData.emailRequired} onSubmit=${this.handleRegisterSubmit}/> ${dialogBody}
</> </>
`; `;
break; break;
case "verify": 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 = html`
<${Dialog} title="Verify ${getServerName(activeServer, activeBouncerNetwork, isBouncer)} account" onDismiss=${this.dismissDialog}> <${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; let error = null;

4
components/verify-form.js
View file

@ -28,7 +28,9 @@ export default class RegisterForm extends Component {
render() { render() {
return html` return html`
<form onChange=${this.handleChange} onSubmit=${this.handleSubmit}> <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> <label>
Verification code:<br/> Verification code:<br/>