(core) Ask the user some questions after they sign up and set their name.

Summary:
- Add a /welcome/info endpoint, to serve a page after /welcome/user
- Add a new forms module to factor out the styles that feel more natural for a web form.
- Simplify form submission using JSON with a BaseAPI helper.
- The POST submission to /welcome/info gets added to a Grist doc, using a
  specialPermit grant to gain access. A failure (e.g. missing doc) is logged
  but does not affect the user.

Test Plan: Added a test case.

Reviewers: paulfitz

Reviewed By: paulfitz

Differential Revision: https://phab.getgrist.com/D2640

app/client/ui/WelcomePage.ts

@@ -6,11 +6,28 @@ import { urlState } from "app/client/models/gristUrlState";
 import { AccountWidget } from "app/client/ui/AccountWidget";
 import { appHeader } from 'app/client/ui/AppHeader';
 import * as BillingPageCss from "app/client/ui/BillingPageCss";
+import * as forms from "app/client/ui/forms";
 import { pagePanels } from "app/client/ui/PagePanels";
-import { bigPrimaryButton, bigPrimaryButtonLink, cssButton } from "app/client/ui2018/buttons";
+import { bigBasicButton, bigPrimaryButton, bigPrimaryButtonLink, cssButton } from "app/client/ui2018/buttons";
 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);
+  const redirectUrl = result.redirectUrl;
+  if (!redirectUrl) {
+    throw new Error('form failed to redirect');
+  }
+  window.location.assign(redirectUrl);
+}
+
+function handleSubmit(): (elem: HTMLFormElement) => void {
+  return dom.on('submit', async (e, form) => {
+    e.preventDefault();
+    _submitForm(form).catch(reportError);
+  });
+}
+
 export class WelcomePage extends Disposable {
 
   private _currentUserName = this._appModel.currentUser && this._appModel.currentUser.name || '';
@@ -42,8 +59,9 @@ export class WelcomePage extends Disposable {
 
       domComputed(urlState().state, (state) => (
         state.welcome === 'user' ? dom.create(this._buildNameForm.bind(this)) :
-          state.welcome === 'teams' ? dom.create(this._buildOrgPicker.bind(this)) :
-          null
+        state.welcome === 'info' ? dom.create(this._buildInfoForm.bind(this)) :
+        state.welcome === 'teams' ? dom.create(this._buildOrgPicker.bind(this)) :
+        null
       )),
     ));
   }
@@ -60,16 +78,12 @@ export class WelcomePage extends Disposable {
     return form = dom(
       'form',
       { method: "post" },
-      dom.on('submit', (e) => {
-        e.preventDefault();
-        this._submitForm(form).catch(reportError);
-        return false;
-      }),
+      handleSubmit(),
       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() && this._submitForm(form).catch(reportError)}),
+        dom.onKeyDown({Enter: () => isNameValid.get() && _submitForm(form).catch(reportError)}),
       ),
       dom.maybe((use) => use(value) && !use(isNameValid), buildNameWarningsDom),
       cssButtonGroup(
@@ -82,14 +96,47 @@ export class WelcomePage extends Disposable {
     );
   }
 
-  private async _submitForm(form: HTMLFormElement) {
-    const result = await submitForm(form);
-    const redirectUrl = result.redirectUrl;
-    if (!redirectUrl) {
-      throw new Error('form failed to redirect');
-    }
-    window.location.assign(redirectUrl);
-    return false;
+  /**
+   * Builds a form to ask the new user a few questions.
+   */
+  private _buildInfoForm(owner: MultiHolder) {
+    const allFilled = Observable.create(owner, false);
+    return forms.form({method: "post"},
+      handleSubmit(),
+      (elem) => { setTimeout(() => elem.focus(), 0); },
+      forms.text('Please help us serve you better by answering a few questions.'),
+      forms.question(
+        forms.text('Where do you plan to use Grist?'),
+        forms.checkboxItem([{name: 'use_work'}], 'Work'),
+        forms.checkboxItem([{name: 'use_personal'}], 'Personal'),
+      ),
+      forms.question(
+        forms.text('What brings you to Grist?'),
+        forms.checkboxItem([{name: 'reason_problem'}], 'Solve a particular problem or need'),
+        forms.checkboxItem([{name: 'reason_tool'}], 'Find a better tool than the one I am using'),
+        forms.checkboxItem([{name: 'reason_curious'}], 'Just curious about a new product'),
+        forms.checkboxOther([{name: 'reason_other'}], {name: 'other_reason', placeholder: 'Other...'}),
+      ),
+      forms.question(
+        forms.text('What kind of industry do you work in?'),
+        forms.textBox({name: 'industry', placeholder: 'Your answer'}),
+      ),
+      forms.question(
+        forms.text('What is your role?'),
+        forms.textBox({name: 'role', placeholder: 'Your answer'}),
+      ),
+      dom.on('change', (e, form) => {
+        allFilled.set(forms.isFormFilled(form, ['use_*', 'reason_*', 'industry', 'role']));
+      }),
+      cssButtonGroup(
+        cssButtonGroup.cls('-right'),
+        bigBasicButton('Continue',
+          cssButton.cls('-primary', allFilled),
+          {tabIndex: '0'},
+          testId('continue-button')),
+      ),
+      testId('info-form'),
+    );
   }
 
   private async _fetchOrgs() {
@@ -174,6 +221,9 @@ const cssParagraph = styled('p', textStyle);
 const cssButtonGroup = styled('div', `
   margin-top: 24px;
   display: flex;
+  &-right {
+    justify-content: flex-end;
+  }
 `);
 
 const cssWarning = styled('div', `