From d0496caeb18096335f987008cf4f2d8f186302fe Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 29 Sep 2020 21:29:06 -0500
Subject: [PATCH] Auth form validation improvements

---
 .../auth_login/components/login_form.js       | 24 +++++++++++++++----
 .../auth_login/components/password_reset.js   |  1 +
 .../components/registration_form.js           |  3 +++
 3 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/app/soapbox/features/auth_login/components/login_form.js b/app/soapbox/features/auth_login/components/login_form.js
index bb616a076..d9933f6d0 100644
--- a/app/soapbox/features/auth_login/components/login_form.js
+++ b/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'>
diff --git a/app/soapbox/features/auth_login/components/password_reset.js b/app/soapbox/features/auth_login/components/password_reset.js
index 7dc363a2f..f7ca59712 100644
--- a/app/soapbox/features/auth_login/components/password_reset.js
+++ b/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>
diff --git a/app/soapbox/features/landing_page/components/registration_form.js b/app/soapbox/features/landing_page/components/registration_form.js
index 0d6a9db71..7a2ada78a 100644
--- a/app/soapbox/features/landing_page/components/registration_form.js
+++ b/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
               />