Merge branch 'ios-improvements' into 'develop'

Improve mobile input fields

See merge request soapbox-pub/soapbox-fe!851

app/soapbox/features/auth_login/components/__tests__/__snapshots__/captcha-test.js.snap

@@ -14,7 +14,9 @@ exports[`<NativeCaptchaField /> renders correctly 1`] = `
     className="input required"
   >
     <input
+      autoCapitalize="off"
       autoComplete="off"
+      autoCorrect="off"
       onChange={[Function]}
       placeholder="Enter the pictured text"
       required={true}

app/soapbox/features/auth_login/components/__tests__/__snapshots__/login_form-test.js.snap

@@ -14,7 +14,9 @@ exports[`<LoginForm /> renders for Mastodon 1`] = `
       >
         <input
           aria-label="Username"
+          autoCapitalize="off"
           autoComplete="off"
+          autoCorrect="off"
           className="string email"
           name="username"
           placeholder="Username"
@@ -27,7 +29,9 @@ exports[`<LoginForm /> renders for Mastodon 1`] = `
       >
         <input
           aria-label="Password"
+          autoCapitalize="off"
           autoComplete="off"
+          autoCorrect="off"
           className="password"
           name="password"
           placeholder="Password"
@@ -74,7 +78,9 @@ exports[`<LoginForm /> renders for Pleroma 1`] = `
       >
         <input
           aria-label="Username"
+          autoCapitalize="off"
           autoComplete="off"
+          autoCorrect="off"
           className="string email"
           name="username"
           placeholder="Username"
@@ -87,7 +93,9 @@ exports[`<LoginForm /> renders for Pleroma 1`] = `
       >
         <input
           aria-label="Password"
+          autoCapitalize="off"
           autoComplete="off"
+          autoCorrect="off"
           className="password"
           name="password"
           placeholder="Password"

app/soapbox/features/auth_login/components/__tests__/__snapshots__/login_page-test.js.snap

@@ -17,7 +17,9 @@ exports[`<LoginPage /> renders correctly on load 1`] = `
       >
         <input
           aria-label="Username"
+          autoCapitalize="off"
           autoComplete="off"
+          autoCorrect="off"
           className="string email"
           name="username"
           placeholder="Username"
@@ -30,7 +32,9 @@ exports[`<LoginPage /> renders correctly on load 1`] = `
       >
         <input
           aria-label="Password"
+          autoCapitalize="off"
           autoComplete="off"
+          autoCorrect="off"
           className="password"
           name="password"
           placeholder="Password"

app/soapbox/features/auth_login/components/captcha.js

@@ -107,6 +107,8 @@ export const NativeCaptchaField = ({ captcha, onChange, onClick, name, value })
       name={name}
       value={value}
       autoComplete='off'
+      autoCorrect='off'
+      autoCapitalize='off'
       onChange={onChange}
       required
     />

app/soapbox/features/auth_login/components/login_form.js

@@ -40,6 +40,8 @@ class LoginForm extends ImmutablePureComponent {
                 type='text'
                 name='username'
                 autoComplete='off'
+                autoCorrect='off'
+                autoCapitalize='off'
                 required
               />
             </div>
@@ -51,6 +53,8 @@ class LoginForm extends ImmutablePureComponent {
                 type='password'
                 name='password'
                 autoComplete='off'
+                autoCorrect='off'
+                autoCapitalize='off'
                 required
               />
             </div>

app/soapbox/features/auth_login/components/registration_form.js

@@ -172,6 +172,8 @@ class RegistrationForm extends ImmutablePureComponent {
                 name='username'
                 hint={intl.formatMessage(messages.username_hint)}
                 autoComplete='off'
+                autoCorrect='off'
+                autoCapitalize='off'
                 pattern='^[a-zA-Z\d_-]+'
                 onChange={this.onInputChange}
                 required
@@ -181,6 +183,8 @@ class RegistrationForm extends ImmutablePureComponent {
                 name='email'
                 type='email'
                 autoComplete='off'
+                autoCorrect='off'
+                autoCapitalize='off'
                 onChange={this.onInputChange}
                 required
               />
@@ -189,6 +193,8 @@ class RegistrationForm extends ImmutablePureComponent {
                 name='password'
                 type='password'
                 autoComplete='off'
+                autoCorrect='off'
+                autoCapitalize='off'
                 onChange={this.onInputChange}
                 required
               />
@@ -197,6 +203,8 @@ class RegistrationForm extends ImmutablePureComponent {
                 name='confirm'
                 type='password'
                 autoComplete='off'
+                autoCorrect='off'
+                autoCapitalize='off'
                 onChange={this.onInputChange}
                 required
               />
@@ -206,7 +214,6 @@ class RegistrationForm extends ImmutablePureComponent {
                   hint={<FormattedMessage id='registration.reason_hint' defaultMessage='This will help us review your application' />}
                   name='reason'
                   maxLength={500}
-                  autoComplete='off'
                   onChange={this.onInputChange}
                   required
                 />}

app/soapbox/features/external_login/components/external_login_form.js

@@ -53,7 +53,7 @@ class ExternalLoginForm extends ImmutablePureComponent {
     }
 
     return (
-      <SimpleForm onSubmit={this.handleSubmit}>
+      <SimpleForm onSubmit={this.handleSubmit} className='external-login'>
         <fieldset disabled={isLoading}>
           <FieldsGroup>
             <TextInput
@@ -63,6 +63,8 @@ class ExternalLoginForm extends ImmutablePureComponent {
               value={this.state.host}
               onChange={this.handleHostChange}
               autoComplete='off'
+              autoCorrect='off'
+              autoCapitalize='off'
               required
             />
           </FieldsGroup>

app/soapbox/features/forms/index.js

@@ -126,6 +126,7 @@ export class SimpleForm extends ImmutablePureComponent {
 
   static propTypes = {
     children: PropTypes.node,
+    className: PropTypes.string,
   };
 
   static defaultProps = {
@@ -139,9 +140,14 @@ export class SimpleForm extends ImmutablePureComponent {
   }
 
   render() {
-    const { children, onSubmit, ...props } = this.props;
+    const { className, children, onSubmit, ...props } = this.props;
     return (
-      <form className='simple_form' method='post' onSubmit={this.onSubmit} {...props}>
+      <form
+        className={classNames('simple_form', className)}
+        method='post'
+        onSubmit={this.onSubmit}
+        {...props}
+      >
         {children}
       </form>
     );

app/styles/forms.scss

@@ -295,6 +295,7 @@ code {
     input[type=text],
     input[type=number],
     input[type=email],
+    input[type=url],
     input[type=password],
     textarea {
       color: var(--primary-text-color--faint);
@@ -305,6 +306,7 @@ code {
   input[type=text],
   input[type=number],
   input[type=email],
+  input[type=url],
   input[type=password],
   textarea,
   .rfipbtn {
@@ -348,6 +350,7 @@ code {
   input[type=text][disabled],
   input[type=number][disabled],
   input[type=email][disabled],
+  input[type=url][disabled],
   input[type=password][disabled],
   textarea[disabled] {
     color: var(--primary-text-color--faint);
@@ -362,6 +365,7 @@ code {
     input[type=text],
     input[type=number],
     input[type=email],
+    input[type=url],
     input[type=password],
     textarea,
     select {