Archives/gristlabs_grist-core
1
0
Fork 0
mirror of https://github.com/gristlabs/grist-core.git synced 2024-10-27 20:44:07 +00:00
Code Issues Projects Releases Wiki Activity

(core) On welcome form pages, prevent accidental multiple submissions.

Browse Source 
Summary:
Disable the submit button while a form submission is pending.

(We don't move to the next page without waiting since we get the page to
redirect to from the server.)

Test Plan: Tested manually by pausing the server and trying to submit multiple times.

Reviewers: paulfitz

Reviewed By: paulfitz

Differential Revision: https://phab.getgrist.com/D2688
This commit is contained in:
Dmitry S 2020-12-11 18:07:03 -05:00
parent e5c24eb5ea
commit 02ed4c59a0
1 changed files with 14 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
app/client/ui/WelcomePage.ts
View File

@ -12,8 +12,10 @@ import { bigBasicButton, bigPrimaryButton, bigPrimaryButtonLink, cssButton } fro
import { colors, testId, vars } from "app/client/ui2018/cssVars";
import { getOrgName, Organization } from "app/common/UserAPI";
async function _submitForm(form: HTMLFormElement) {
const result = await submitForm(form);
async function _submitForm(form: HTMLFormElement, pending: Observable<boolean>) {
if (pending.get()) { return; }
pending.set(true);
const result = await submitForm(form).finally(() => pending.set(false));
const redirectUrl = result.redirectUrl;
if (!redirectUrl) {
throw new Error('form failed to redirect');
@ -21,10 +23,11 @@ async function _submitForm(form: HTMLFormElement) {
window.location.assign(redirectUrl);
}
function handleSubmit(): (elem: HTMLFormElement) => void {
// If a 'pending' observable is given, it will be set to true while waiting for the submission.
function handleSubmit(pending: Observable<boolean>): (elem: HTMLFormElement) => void {
return dom.on('submit', async (e, form) => {
e.preventDefault();
_submitForm(form).catch(reportError);
_submitForm(form, pending).catch(reportError);
});
}
@ -71,6 +74,7 @@ export class WelcomePage extends Disposable {
let form: HTMLFormElement;
const value = Observable.create(owner, checkName(this._currentUserName) ? this._currentUserName : '');
const isNameValid = Computed.create(owner, value, (use, val) => checkName(val));
const pending = Observable.create(owner, false);
// delayed focus
setTimeout(() => inputEl.focus(), 10);
@ -78,18 +82,18 @@ export class WelcomePage extends Disposable {
return form = dom(
'form',
{ method: "post", action: location.href },
handleSubmit(),
handleSubmit(pending),
cssLabel('Your full name, as you\'d like it displayed to your collaborators.'),
inputEl = cssInput(
value, { onInput: true, },
{ name: "username" },
dom.onKeyDown({Enter: () => isNameValid.get() && _submitForm(form).catch(reportError)}),
dom.onKeyDown({Enter: () => isNameValid.get() && _submitForm(form, pending).catch(reportError)}),
),
dom.maybe((use) => use(value) && !use(isNameValid), buildNameWarningsDom),
cssButtonGroup(
bigPrimaryButton(
'Continue',
dom.boolAttr('disabled', (use) => Boolean(use(value) && !use(isNameValid))),
dom.boolAttr('disabled', (use) => Boolean(use(value) && !use(isNameValid)) || use(pending)),
testId('continue-button')
),
)
@ -102,9 +106,10 @@ export class WelcomePage extends Disposable {
private _buildInfoForm(owner: MultiHolder) {
const allFilled = Observable.create(owner, false);
const whereObs = Observable.create(owner, '');
const pending = Observable.create(owner, false);
return forms.form({method: "post", action: location.href },
handleSubmit(),
handleSubmit(pending),
(elem) => { setTimeout(() => elem.focus(), 0); },
forms.text('Please help us serve you better by answering a few questions.'),
forms.question(
@ -140,6 +145,7 @@ export class WelcomePage extends Disposable {
cssButtonGroup.cls('-right'),
bigBasicButton('Continue',
cssButton.cls('-primary', allFilled),
dom.boolAttr('disabled', pending),
{tabIndex: '0'},
testId('continue-button')),
),