From aa69de39f32b6eb776af8a135b9822dec95d8a25 Mon Sep 17 00:00:00 2001
From: Ben Wheeler <wheeler.benjamin@gmail.com>
Date: Mon, 12 Aug 2019 16:07:11 -0400
Subject: [PATCH] keep showing validation errors on focus, until first
 keystroke; prioritize vulgarity

---
 src/components/join-flow/username-step.jsx | 36 ++++++++++++++++------
 1 file changed, 26 insertions(+), 10 deletions(-)

diff --git a/src/components/join-flow/username-step.jsx b/src/components/join-flow/username-step.jsx
index e30f31eb1..9d5199787 100644
--- a/src/components/join-flow/username-step.jsx
+++ b/src/components/join-flow/username-step.jsx
@@ -36,16 +36,22 @@ class UsernameStep extends React.Component {
     // we allow username to be empty on blur, since you might not have typed anything yet
     validateUsernameIfPresent (username) {
         if (!username) return null; // skip validation if username is blank; null indicates valid
+        // if username is not blank, run both local and remote validations
         const localResult = validate.validateUsernameLocally(username);
-        if (localResult.valid) {
-            return validate.validateUsernameRemotely(username).then(
-                remoteResult => {
-                    if (remoteResult.valid) return null;
+        return validate.validateUsernameRemotely(username).then(
+            remoteResult => {
+                // there may be multiple validation errors. Prioritize vulgarity, then
+                // length, then having invalid chars, then all other remote reports
+                if (remoteResult.valid === false && remoteResult.errMsgId === 'registration.validationUsernameVulgar') {
+                    return this.props.intl.formatMessage({id: remoteResult.errMsgId});
+                } else if (localResult.valid === false) {
+                    return this.props.intl.formatMessage({id: localResult.errMsgId});
+                } else if (remoteResult.valid === false) {
                     return this.props.intl.formatMessage({id: remoteResult.errMsgId});
                 }
-            );
-        }
-        return this.props.intl.formatMessage({id: localResult.errMsgId});
+                return null;
+            }
+        );
     }
     validatePasswordIfPresent (password, username) {
         if (!password) return null; // skip validation if password is blank; null indicates valid
@@ -103,6 +109,7 @@ class UsernameStep extends React.Component {
                         handleSubmit,
                         isSubmitting,
                         setFieldError,
+                        setFieldValue,
                         validateField,
                         values
                     } = props;
@@ -130,7 +137,10 @@ class UsernameStep extends React.Component {
                                     validationClassName="validation-full-width-input"
                                     /* eslint-disable react/jsx-no-bind */
                                     onBlur={() => validateField('username')}
-                                    onFocus={() => setFieldError('username', null)}
+                                    onChange={e => {
+                                        setFieldValue('username', e.target.value);
+                                        setFieldError('username', null);
+                                    }}
                                     /* eslint-enable react/jsx-no-bind */
                                 />
                                 <div className="join-flow-password-section">
@@ -149,7 +159,10 @@ class UsernameStep extends React.Component {
                                         validate={password => this.validatePasswordIfPresent(password, values.username)}
                                         validationClassName="validation-full-width-input"
                                         onBlur={() => validateField('password')}
-                                        onFocus={() => setFieldError('password', null)}
+                                        onChange={e => {
+                                            setFieldValue('password', e.target.value);
+                                            setFieldError('password', null);
+                                        }}
                                         /* eslint-enable react/jsx-no-bind */
                                     />
                                     <FormikInput
@@ -169,7 +182,10 @@ class UsernameStep extends React.Component {
                                         onBlur={() =>
                                             validateField('passwordConfirm')
                                         }
-                                        onFocus={() => setFieldError('passwordConfirm', null)}
+                                        onChange={e => {
+                                            setFieldValue('passwordConfirm', e.target.value);
+                                            setFieldError('passwordConfirm', null);
+                                        }}
                                         /* eslint-enable react/jsx-no-bind */
                                     />
                                     <div className="join-flow-input-title">