[ESD-22866] Disable spellcheck and autocorrect on all sensitive input fields (#2178)

* Disable spellcheck and autocorrect on all sensitive input fields

These were already disabled for the username field spellcheck has recently been discovered to
potentially disclose information to browser vendors that provide this feature. So disabling it
helps to prevent this.

autocorrect is a safari only feature that will autocorrect what it believes to be misspelled words,
so this is disabled for user experience

* Disable autocorrect and spellcheck for vcode and phone

Author: ewanharris

src/__tests__/ui/input/__snapshots__/email_input.test.jsx.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`EmailInput renders without issue 1`] = `"<div data-__type=\\"input_wrap\\" data-invalidhint=\\"invalidHint\\" data-isvalid=\\"true\\" data-name=\\"email\\" data-icon=\\"[object Object]\\"><input type=\\"email\\" id=\\"1-email\\" inputmode=\\"email\\" name=\\"email\\" class=\\"auth0-lock-input\\" placeholder=\\"yours@example.com\\" autocomplete=\\"off\\" autocapitalize=\\"off\\" aria-label=\\"Email\\" aria-invalid=\\"false\\" value=\\"value\\"></div>"`;
+exports[`EmailInput renders without issue 1`] = `"<div data-__type=\\"input_wrap\\" data-invalidhint=\\"invalidHint\\" data-isvalid=\\"true\\" data-name=\\"email\\" data-icon=\\"[object Object]\\"><input type=\\"email\\" id=\\"1-email\\" inputmode=\\"email\\" name=\\"email\\" class=\\"auth0-lock-input\\" placeholder=\\"yours@example.com\\" autocomplete=\\"off\\" autocapitalize=\\"off\\" autocorrect=\\"off\\" spellcheck=\\"false\\" aria-label=\\"Email\\" aria-invalid=\\"false\\" value=\\"value\\"></div>"`;

src/ui/input/captcha_input.jsx

@@ -114,6 +114,8 @@ export default class CaptchaInput extends React.Component {
             placeholder={placeholder}
             autoComplete="off"
             autoCapitalize="off"
+            autoCorrect="off"
+            spellCheck="false"
             onChange={::this.handleOnChange}
             onFocus={::this.handleFocus}
             onBlur={::this.handleBlur}

src/ui/input/email_input.jsx

@@ -67,6 +67,8 @@ export default class EmailInput extends React.Component {
           placeholder="yours@example.com"
           autoComplete={autoComplete ? 'on' : 'off'}
           autoCapitalize="off"
+          autoCorrect="off"
+          spellCheck="false"
           onChange={::this.handleOnChange}
           onFocus={::this.handleFocus}
           onBlur={::this.handleBlur}

src/ui/input/mfa_code_input.jsx

@@ -46,6 +46,8 @@ export default class MFACodeInput extends React.Component {
           className="auth0-lock-input"
           autoComplete="off"
           autoCapitalize="off"
+          autoCorrect="off"
+          spellCheck="false"
           onChange={::this.handleOnChange}
           onFocus={::this.handleFocus}
           onBlur={::this.handleBlur}

src/ui/input/password_input.jsx

@@ -91,6 +91,8 @@ export default class PasswordInput extends React.Component {
           className="auth0-lock-input"
           autoComplete={allowPasswordAutocomplete ? 'on' : 'off'}
           autoCapitalize="off"
+          autoCorrect="off"
+          spellCheck="false"
           onChange={::this.handleOnChange}
           onFocus={::this.handleFocus}
           onBlur={::this.handleBlur}

src/ui/input/phone_number_input.jsx

@@ -49,6 +49,8 @@ export default class PhoneNumberInput extends React.Component {
           name="phoneNumber"
           className="auth0-lock-input auth0-lock-input-number"
           autoComplete="off"
+          autoCorrect="off"
+          spellCheck="false"
           onFocus={::this.handleFocus}
           onBlur={::this.handleBlur}
           aria-label="Telephone number"

src/ui/input/username_input.jsx

@@ -60,7 +60,7 @@ export default class UsernameInput extends React.Component {
           placeholder="username"
           autoComplete={autoComplete ? 'on' : 'off'}
           autoCapitalize="off"
-          spellCheck="off"
+          spellCheck="false"
           autoCorrect="off"
           onChange={::this.handleOnChange}
           onFocus={::this.handleFocus}

src/ui/input/vcode_input.jsx

@@ -58,6 +58,8 @@ export default class VcodeInput extends React.Component {
           className="auth0-lock-input auth0-lock-input-code"
           autoComplete="off"
           autoCapitalize="off"
+          autoCorrect="off"
+          spellCheck="false"
           onFocus={::this.handleFocus}
           onBlur={::this.handleBlur}
           aria-label="vcode"