Fix regressions found by cypress tests

packages/app/components/accounts/AccountSwitcher.tsx

@@ -51,7 +51,7 @@ export class AccountSwitcher extends React.Component<Props> {
     const activeAccount = getActiveAccount({ accounts });
 
     if (!activeAccount) {
-      throw new Error('Can not find active account');
+      return null;
     }
 
     let { available } = accounts;

packages/app/components/auth/BaseAuthBody.tsx

@@ -53,7 +53,9 @@ export default class BaseAuthBody extends React.Component<
     renderErrors: false,
   });
 
-  bindField = this.form.bindField.bind(this.form);
+  bindField(name: string) {
+    return this.form.bindField(name);
+  }
 
   serialize() {
     return this.form.serialize();

packages/app/components/auth/PanelTransition.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { AccountsState } from 'app/components/accounts';
-import { AuthState } from 'app/components/auth';
 import { User } from 'app/components/user';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
@@ -11,18 +10,18 @@ import {
   PanelFooter,
   PanelHeader,
 } from 'app/components/ui/Panel';
-import { getLogin } from 'app/components/auth/reducer';
 import { Form } from 'app/components/ui/form';
 import MeasureHeight from 'app/components/MeasureHeight';
-import defaultHelpLinksStyles from 'app/components/auth/helpLinks.scss';
 import panelStyles from 'app/components/ui/panel.scss';
 import icons from 'app/components/ui/icons.scss';
 import authFlow from 'app/services/authFlow';
 import { userShape } from 'app/components/user/User';
-
-import * as actions from './actions';
 import { RootState } from 'app/reducers';
 
+import { getLogin, State as AuthState } from './reducer';
+import * as actions from './actions';
+import helpLinks from './helpLinks.scss';
+
 const opacitySpringConfig = { stiffness: 300, damping: 20 };
 const transformSpringConfig = { stiffness: 500, damping: 50, precision: 0.5 };
 const changeContextSpringConfig = {
@@ -31,7 +30,7 @@ const changeContextSpringConfig = {
   precision: 0.5,
 };
 
-const { helpLinksStyles } = defaultHelpLinksStyles;
+const { helpLinks: helpLinksStyles } = helpLinks;
 
 type PanelId = string;
 

packages/app/components/auth/register/RegisterBody.js

@@ -11,7 +11,6 @@ import messages from './Register.intl.json';
 // TODO: password and username can be validate for length and sameness
 
 export default class RegisterBody extends BaseAuthBody {
-  static displayName = 'RegisterBody';
   static panelId = 'register';
 
   autoFocusField = 'username';

packages/app/components/ui/form/Checkbox.tsx

@@ -7,11 +7,13 @@ import { omit } from 'app/functions';
 import styles from './form.scss';
 import FormInputComponent from './FormInputComponent';
 
-export default class Checkbox extends FormInputComponent<{
-  color: Color;
-  skin: Skin;
-  label: string | MessageDescriptor;
-}> {
+export default class Checkbox extends FormInputComponent<
+  React.InputHTMLAttributes<HTMLInputElement> & {
+    color: Color;
+    skin: Skin;
+    label: string | MessageDescriptor | React.ReactElement;
+  }
+> {
   static defaultProps = {
     color: COLOR_GREEN,
     skin: SKIN_DARK,
@@ -23,7 +25,7 @@ export default class Checkbox extends FormInputComponent<{
     const { color, skin } = this.props;
     let { label } = this.props;
 
-    label = this.formatMessage(label);
+    label = React.isValidElement(label) ? label : this.formatMessage(label);
 
     const props = omit(this.props, ['color', 'skin', 'label']);
 

packages/app/components/ui/form/FormInputComponent.tsx

@@ -3,8 +3,9 @@ import { MessageDescriptor } from 'react-intl';
 
 import FormComponent from './FormComponent';
 import FormError from './FormError';
+import { ValidationError } from './FormModel';
 
-type Error = string | MessageDescriptor;
+type Error = ValidationError | MessageDescriptor;
 
 export default class FormInputComponent<P, S = {}> extends FormComponent<
   P & {

packages/app/components/ui/form/FormModel.ts

@@ -2,7 +2,7 @@ import FormInputComponent from './FormInputComponent';
 
 type LoadingListener = (isLoading: boolean) => void;
 
-type ValidationError =
+export type ValidationError =
   | string
   | {
       type: string;
@@ -37,10 +37,20 @@ export default class FormModel {
    *
    * @returns {object} - ref and name props for component
    */
-  bindField(name: string) {
+  bindField(
+    name: string,
+  ): {
+    name: string;
+    ref: (el: any) => void;
+    error?: ValidationError;
+  } {
     this.fields[name] = {};
 
-    const props: { [key: string]: any } = {
+    const props: {
+      name: string;
+      ref: (el: any) => void;
+      error?: ValidationError;
+    } = {
       name,
       ref: (el: FormInputComponent<any> | null) => {
         if (el) {
@@ -55,8 +65,10 @@ export default class FormModel {
       },
     };
 
-    if (this.renderErrors && this.getError(name)) {
-      props.error = this.getError(name);
+    const error = this.getError(name);
+
+    if (this.renderErrors && error) {
+      props.error = error;
     }
 
     return props;

packages/app/components/ui/form/Input.tsx

@@ -19,7 +19,6 @@ export default class Input extends FormInputComponent<
     disabled: boolean;
     label?: string | MessageDescriptor;
     placeholder?: string | MessageDescriptor;
-    error?: string | { type: string; payload: string };
     icon?: string;
     copy?: boolean;
   },

packages/app/components/ui/form/TextArea.tsx

@@ -20,7 +20,6 @@ export default class TextArea extends FormInputComponent<
   {
     placeholder?: string | MessageDescriptor;
     label?: string | MessageDescriptor;
-    error?: string;
     skin: Skin;
     color: Color;
   } & TextareaAutosizeProps &