From 644aa272b35051b0b77b40061a83ebfa8c8a20aa Mon Sep 17 00:00:00 2001
From: Ben Wheeler <wheeler.benjamin@gmail.com>
Date: Tue, 1 Oct 2019 16:43:33 -0400
Subject: [PATCH] turn off automplete and autocorrect for join-flow inputs

---
 src/components/formik-forms/formik-radio-button.jsx |  4 ++++
 src/components/join-flow/email-step.jsx             |  4 ++++
 src/components/join-flow/join-flow-step.jsx         |  5 ++++-
 src/components/join-flow/username-step.jsx          | 12 ++++++++++++
 4 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/src/components/formik-forms/formik-radio-button.jsx b/src/components/formik-forms/formik-radio-button.jsx
index b7ee7f488..4d131ba52 100644
--- a/src/components/formik-forms/formik-radio-button.jsx
+++ b/src/components/formik-forms/formik-radio-button.jsx
@@ -89,8 +89,12 @@ const FormikRadioButton = ({
     >
         {isCustomInput && (
             <FormikInput
+                autoCapitalize="off"
+                autoComplete="off"
+                autoCorrect="off"
                 className="formik-radio-input"
                 name="custom"
+                spellCheck={false}
                 wrapperClassName="formik-radio-input-wrapper"
                 /* eslint-disable react/jsx-no-bind */
                 onChange={event => onSetCustom(event.target.value)}
diff --git a/src/components/join-flow/email-step.jsx b/src/components/join-flow/email-step.jsx
index 803bd1bf8..c5b941738 100644
--- a/src/components/join-flow/email-step.jsx
+++ b/src/components/join-flow/email-step.jsx
@@ -160,6 +160,9 @@ class EmailStep extends React.Component {
                             onSubmit={handleSubmit}
                         >
                             <FormikInput
+                                autoCapitalize="off"
+                                autoComplete="off"
+                                autoCorrect="off"
                                 className={classNames(
                                     'join-flow-input',
                                     'join-flow-input-tall',
@@ -169,6 +172,7 @@ class EmailStep extends React.Component {
                                 id="email"
                                 name="email"
                                 placeholder={this.props.intl.formatMessage({id: 'general.emailAddress'})}
+                                type="email"
                                 validate={this.validateEmail}
                                 validationClassName="validation-full-width-input"
                                 /* eslint-disable react/jsx-no-bind */
diff --git a/src/components/join-flow/join-flow-step.jsx b/src/components/join-flow/join-flow-step.jsx
index d26e35d03..dc42c78ae 100644
--- a/src/components/join-flow/join-flow-step.jsx
+++ b/src/components/join-flow/join-flow-step.jsx
@@ -21,7 +21,10 @@ const JoinFlowStep = ({
     titleClassName,
     waiting
 }) => (
-    <form onSubmit={onSubmit}>
+    <form
+        autoComplete="off"
+        onSubmit={onSubmit}
+    >
         <div className="join-flow-outer-content">
             {headerImgSrc && (
                 <div className="join-flow-header-image-wrapper">
diff --git a/src/components/join-flow/username-step.jsx b/src/components/join-flow/username-step.jsx
index 007c02d2b..a3907bfb7 100644
--- a/src/components/join-flow/username-step.jsx
+++ b/src/components/join-flow/username-step.jsx
@@ -143,6 +143,9 @@ class UsernameStep extends React.Component {
                                     {this.props.intl.formatMessage({id: 'registration.createUsername'})}
                                 </div>
                                 <FormikInput
+                                    autoCapitalize="off"
+                                    autoComplete="off"
+                                    autoCorrect="off"
                                     className={classNames(
                                         'join-flow-input'
                                     )}
@@ -150,6 +153,7 @@ class UsernameStep extends React.Component {
                                     id="username"
                                     name="username"
                                     placeholder={this.props.intl.formatMessage({id: 'general.username'})}
+                                    spellCheck={false}
                                     toolTip={this.state.focused === 'username' && !touched.username &&
                                         this.props.intl.formatMessage({id: 'registration.usernameAdviceShort'})}
                                     validate={this.validateUsernameIfPresent}
@@ -170,6 +174,9 @@ class UsernameStep extends React.Component {
                                         {this.props.intl.formatMessage({id: 'registration.choosePasswordStepTitle'})}
                                     </div>
                                     <FormikInput
+                                        autoCapitalize="off"
+                                        autoComplete={values.showPassword ? 'off' : 'new-password'}
+                                        autoCorrect="off"
                                         className={classNames(
                                             'join-flow-input',
                                             {'join-flow-input-password':
@@ -179,6 +186,7 @@ class UsernameStep extends React.Component {
                                         id="password"
                                         name="password"
                                         placeholder={this.props.intl.formatMessage({id: 'general.password'})}
+                                        spellCheck={false}
                                         toolTip={this.state.focused === 'password' && !touched.password &&
                                             this.props.intl.formatMessage({id: 'registration.passwordAdviceShort'})}
                                         type={values.showPassword ? 'text' : 'password'}
@@ -195,6 +203,9 @@ class UsernameStep extends React.Component {
                                         /* eslint-enable react/jsx-no-bind */
                                     />
                                     <FormikInput
+                                        autoCapitalize="off"
+                                        autoComplete={values.showPassword ? 'off' : 'new-password'}
+                                        autoCorrect="off"
                                         className={classNames(
                                             'join-flow-input',
                                             'join-flow-password-confirm',
@@ -210,6 +221,7 @@ class UsernameStep extends React.Component {
                                         placeholder={this.props.intl.formatMessage({
                                             id: 'registration.confirmPasswordInstruction'
                                         })}
+                                        spellCheck={false}
                                         toolTip={
                                             this.state.focused === 'passwordConfirm' && !touched.passwordConfirm &&
                                                 this.props.intl.formatMessage({