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