turn off automplete and autocorrect for join-flow inputs

This commit is contained in:
Ben Wheeler 2019-10-01 16:43:33 -04:00
parent 01c509d527
commit 644aa272b3
4 changed files with 24 additions and 1 deletions

View file

@ -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)}

View file

@ -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 */

View file

@ -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">

View file

@ -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({