(core) Add new Grist sign-up page

Summary:
Available at login.getgrist.com/signup, the new sign-up page
includes similar options available on the hosted Cognito sign-up
page, such as support for registering with Google. All previous
redirects to Cognito for sign-up should now redirect to the new
Grist sign-up page.

Login is still handled with the hosted Cognito login page, and there
is a link to go there from the new sign-up page.

Test Plan: Browser, project and server tests.

Reviewers: paulfitz

Reviewed By: paulfitz

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

app/client/models/gristUrlState.ts

@@ -65,8 +65,8 @@ export function getMainOrgUrl(): string { return urlState().makeUrl({}); }
 export function getCurrentDocUrl(): string { return urlState().makeUrl({docPage: undefined}); }
 
 // Get url for the login page, which will then redirect to nextUrl (current page by default).
-export function getLoginUrl(nextUrl: string = _getCurrentUrl()): string {
-  return _getLoginLogoutUrl('login', nextUrl);
+export function getLoginUrl(nextUrl: string | null = _getCurrentUrl()): string {
+  return _getLoginLogoutUrl('login', nextUrl ?? undefined);
 }
 
 // Get url for the signup page, which will then redirect to nextUrl (current page by default).
@@ -101,10 +101,10 @@ function _getCurrentUrl(): string {
 }
 
 // Helper for getLoginUrl()/getLogoutUrl().
-function _getLoginLogoutUrl(method: 'login'|'logout'|'signin'|'signup', nextUrl: string): string {
+function _getLoginLogoutUrl(method: 'login'|'logout'|'signin'|'signup', nextUrl?: string): string {
   const startUrl = new URL(window.location.href);
   startUrl.pathname = addOrgToPath('', window.location.href) + '/' + method;
-  startUrl.searchParams.set('next', nextUrl);
+  if (nextUrl) { startUrl.searchParams.set('next', nextUrl); }
   return startUrl.href;
 }
 

app/client/ui/AccountWidget.ts

@@ -100,7 +100,7 @@ export class AccountWidget extends Disposable {
           cssEmail(user.email, testId('usermenu-email'))
         )
       ),
-      menuItemLink(urlState().setLinkUrl({account: 'profile'}), 'Profile Settings'),
+      menuItemLink(urlState().setLinkUrl({account: 'account'}), 'Profile Settings'),
 
       documentSettingsItem,
 

app/client/ui/WelcomePage.ts

@@ -196,11 +196,11 @@ export class WelcomePage extends Disposable {
       'form',
       { method: "post", action: action.href },
       handleSubmitForm(pending, (result) => {
-        if (result.act === 'confirmed') {
+        if (result.status === 'confirmed') {
           const verified = new URL(window.location.href);
           verified.pathname = '/verified';
           window.location.assign(verified.href);
-        } else if (result.act === 'resent') {
+        } else if (result.status === 'resent') {
           // just to give a sense that something happened...
           window.location.reload();
         }

app/client/ui/errorPages.ts

@@ -1,5 +1,5 @@
 import {AppModel} from 'app/client/models/AppModel';
-import {getLoginUrl, getMainOrgUrl, urlState} from 'app/client/models/gristUrlState';
+import {getLoginUrl, urlState} from 'app/client/models/gristUrlState';
 import {AppHeader} from 'app/client/ui/AppHeader';
 import {leftPanelBasic} from 'app/client/ui/LeftPanelCommon';
 import {pagePanels} from 'app/client/ui/PagePanels';
@@ -15,7 +15,6 @@ export function createErrPage(appModel: AppModel) {
   const gristConfig: GristLoadConfig = (window as any).gristConfig || {};
   const message = gristConfig.errMessage;
   return gristConfig.errPage === 'signed-out' ? createSignedOutPage(appModel) :
-    gristConfig.errPage === 'verified' ? createVerifiedPage(appModel) :
     gristConfig.errPage === 'not-found' ? createNotFoundPage(appModel, message) :
     gristConfig.errPage === 'access-denied' ? createForbiddenPage(appModel, message) :
     createOtherErrorPage(appModel, message);
@@ -56,18 +55,6 @@ export function createSignedOutPage(appModel: AppModel) {
   ]);
 }
 
-/**
- * Creates a page that shows the user is verified.
- */
-export function createVerifiedPage(appModel: AppModel) {
-  return pagePanelsError(appModel, 'Verified', [
-    cssErrorText("Your email is now verified."),
-    cssButtonWrap(bigPrimaryButtonLink(
-      'Sign in', {href: getLoginUrl(getMainOrgUrl())}, testId('error-signin')
-    ))
-  ]);
-}
-
 /**
  * Creates a "Page not found" page.
  */

app/client/ui2018/IconList.ts

@@ -30,6 +30,10 @@ export type IconName = "ChartArea" |
   "FieldText" |
   "FieldTextbox" |
   "FieldToggle" |
+  "LoginStreamline" |
+  "LoginUnify" |
+  "LoginVisualize" |
+  "GoogleLogo" |
   "GristLogo" |
   "ThumbPreview" |
   "BarcodeQR" |
@@ -143,6 +147,10 @@ export const IconList: IconName[] = ["ChartArea",
   "FieldText",
   "FieldTextbox",
   "FieldToggle",
+  "LoginStreamline",
+  "LoginUnify",
+  "LoginVisualize",
+  "GoogleLogo",
   "GristLogo",
   "ThumbPreview",
   "BarcodeQR",

app/client/ui2018/cssVars.ts

@@ -164,10 +164,12 @@ export const testId: TestId = makeTestId('test-');
 
 // Min width for normal screen layout (in px). Note: <768px is bootstrap's definition of small
 // screen (covers phones, including landscape, but not tablets).
+const largeScreenWidth = 992;
 const mediumScreenWidth = 768;
 const smallScreenWidth = 576;   // Anything below this is extra-small (e.g. portrait phones).
 
 // Fractional width for max-query follows https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints
+export const mediaMedium = `(max-width: ${largeScreenWidth - 0.02}px)`;
 export const mediaSmall = `(max-width: ${mediumScreenWidth - 0.02}px)`;
 export const mediaNotSmall = `(min-width: ${mediumScreenWidth}px)`;
 export const mediaXSmall = `(max-width: ${smallScreenWidth - 0.02}px)`;