closes #619

client/src/components/accounts/mainFields/MainFields.component.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef, useState } from 'react';
 import Button from '@material-ui/core/Button';
 import TextField from '~components/TextField';
 import Dropdown from '~components/dropdown/Dropdown';
@@ -16,13 +16,25 @@ export type MainFieldsProps = {
 	onSave: () => void;
 	onCancel: () => void;
 	showRequiredFieldError: boolean;
+	isAddingUser: boolean;
 	className?: string;
 };
 
 const MainFields = ({
 	data, accountHasChanges, updateAccount, onSave, onCancel, submitButtonLabel, i18n, showRequiredFieldError,
-	className = ''
+	isAddingUser, className = ''
 }: MainFieldsProps): JSX.Element => {
+	const emailFieldRef = useRef(null);
+
+	// very fussy indeed!
+	const [emailFieldHasFocus, setEmailFieldHasFocus] = useState(false);
+	const [emailFieldHasHadFocus, setEmailFieldHasHadFocus] = useState(false);
+
+	const onBlurEmail = (): void => {
+		setEmailFieldHasFocus(false);
+		setEmailFieldHasHadFocus(true);
+	};
+
 	const update = (fieldName: string, value: string): void => {
 		updateAccount({
 			...data,
@@ -42,8 +54,13 @@ const MainFields = ({
 			emailError = i18n.requiredField;
 		}
 	} else if (!isValidEmail(data.email)) {
-		emailError = i18n.validationInvalidEmail;
-		fieldsValid = false;
+		// subtle. We only want to show the email field is in an invalid state when
+		// (a) adding an email and the user's moved off the field & left it in an invalid state
+		// (b) is editing the email
+		if (!isAddingUser || (emailFieldHasHadFocus && !emailFieldHasFocus)) {
+			emailError = i18n.validationInvalidEmail;
+			fieldsValid = false;
+		}
 	}
 
 	const saveButtonEnabled = accountHasChanges && fieldsValid;
@@ -118,7 +135,10 @@ const MainFields = ({
 						value={data.email}
 						name="email"
 						onChange={(e: any): void => update('email', e.target.value)}
+						onFocus={(): void => setEmailFieldHasFocus(true)}
+						onBlur={onBlurEmail}
 						style={{ width: '100%' }}
+						ref={emailFieldRef}
 					/>
 				</div>
 

client/src/components/accounts/manageAccount/ManageAccount.component.tsx

@@ -31,6 +31,7 @@ export type ManageAccountState = {
 	expiry: ExpiryOption;
 	expiryDate: null | number;
 	numRowsGenerated: number;
+	isAddingUser: boolean;
 }
 
 const yearFromNow = Number(format(add(new Date(), { years: 1 }), 't'));
@@ -111,6 +112,7 @@ const ManageAccount = ({ i18n, onCancel, onSave, initialState, submitButtonLabel
 					showRequiredFieldError={showErrors}
 					onCancel={onClickCancel}
 					onSave={(): void => onSave(data)}
+					isAddingUser={data.isAddingUser}
 				/>
 			</div>
 			<div className={styles.rightCol}>

client/src/core/account/yourAccount/YourAccount.component.tsx

@@ -54,6 +54,7 @@ const YourAccount = ({
 				i18n={i18n}
 				submitButtonLabel={i18n.save}
 				showRequiredFieldError={true}
+				isAddingUser={false}
 			/>
 			<div className={styles.yourAccountRightCol}>
 				<div className={styles.rightCol}>

client/src/core/accounts/createAccount/CreateAccount.container.ts

@@ -14,7 +14,8 @@ const initialState: ManageAccountState = {
 	disabled: false,
 	expiry: ExpiryOption.none,
 	expiryDate: null,
-	numRowsGenerated: 0
+	numRowsGenerated: 0,
+	isAddingUser: true
 };
 
 const mapStateToProps = (state: Store): Partial<ManageAccountProps> => {

client/src/core/accounts/editAccount/EditAccount.container.ts

@@ -18,7 +18,8 @@ const mapStateToProps = (state: Store): Partial<ManageAccountProps> => {
 	return {
 		initialState: {
 			...initialState,
-			expiry: initialState.expiryDate ? ExpiryOption.date : ExpiryOption.none
+			expiry: initialState.expiryDate ? ExpiryOption.date : ExpiryOption.none,
+			isAddingUser: false
 		} as ManageAccountState,
 		i18n,
 		submitButtonLabel: i18n.updateAccount