Auth form validation improvements

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

@@ -20,11 +20,27 @@ class LoginForm extends ImmutablePureComponent {
       <form className='simple_form new_user' method='post' onSubmit={handleSubmit}>
         <fieldset disabled={isLoading}>
           <div className='fields-group'>
-            <div className='input email optional user_email'>
-              <input aria-label={intl.formatMessage(messages.username)} className='string email optional' placeholder={intl.formatMessage(messages.username)} type='text' name='username' />
+            <div className='input email user_email'>
+              <input
+                aria-label={intl.formatMessage(messages.username)}
+                className='string email'
+                placeholder={intl.formatMessage(messages.username)}
+                type='text'
+                name='username'
+                autoComplete='off'
+                required
+              />
             </div>
-            <div className='input password optional user_password'>
-              <input aria-label={intl.formatMessage(messages.password)} className='password optional' placeholder={intl.formatMessage(messages.password)} type='password' name='password' />
+            <div className='input password user_password'>
+              <input
+                aria-label={intl.formatMessage(messages.password)}
+                className='password'
+                placeholder={intl.formatMessage(messages.password)}
+                type='password'
+                name='password'
+                autoComplete='off'
+                required
+              />
             </div>
             <p className='hint subtle-hint'>
               <Link to='/auth/reset_password'>

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

@@ -37,6 +37,7 @@ class PasswordReset extends ImmutablePureComponent {
               name='nickname_or_email'
               label='Email or username'
               placeholder='me@example.com'
+              required
             />
           </FieldsGroup>
         </fieldset>

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

@@ -20,6 +20,7 @@ import { getSettings } from 'soapbox/actions/settings';
 
 const messages = defineMessages({
   username: { id: 'registration.fields.username_placeholder', defaultMessage: 'Username' },
+  username_hint: { id: 'registration.fields.username_hint', defaultMessage: 'Only letters, numbers, and underscores are allowed.' },
   email: { id: 'registration.fields.email_placeholder', defaultMessage: 'E-Mail address' },
   password: { id: 'registration.fields.password_placeholder', defaultMessage: 'Password' },
   confirm: { id: 'registration.fields.confirm_placeholder', defaultMessage: 'Password (again)' },
@@ -109,7 +110,9 @@ class RegistrationForm extends ImmutablePureComponent {
               <TextInput
                 placeholder={intl.formatMessage(messages.username)}
                 name='username'
+                hint={intl.formatMessage(messages.username_hint)}
                 autoComplete='off'
+                pattern='^[a-zA-Z\d_-]+'
                 onChange={this.onInputChange}
                 required
               />