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 1/6] 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
               />

From 88c12a72a97f061c6e7c6018478152e09ead9a73 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 29 Sep 2020 21:35:10 -0500
Subject: [PATCH 2/6] Improve login messaging

---
 app/soapbox/actions/auth.js    | 2 +-
 app/soapbox/selectors/index.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/soapbox/actions/auth.js b/app/soapbox/actions/auth.js
index 3fd9578a0..2a252ea23 100644
--- a/app/soapbox/actions/auth.js
+++ b/app/soapbox/actions/auth.js
@@ -136,7 +136,7 @@ export function logIn(username, password) {
       if (error.response.data.error === 'mfa_required') {
         throw error;
       } else {
-        dispatch(snackbar.error('Invalid username or password.'));
+        dispatch(snackbar.error('Wrong username or password'));
       }
       throw error;
     });
diff --git a/app/soapbox/selectors/index.js b/app/soapbox/selectors/index.js
index 30ebcee3f..30d3e971f 100644
--- a/app/soapbox/selectors/index.js
+++ b/app/soapbox/selectors/index.js
@@ -126,7 +126,7 @@ export const getAlerts = createSelector([getAlertsBase], (base) => {
       key: item.get('key'),
       className: `snackbar snackbar--${item.get('severity', 'info')}`,
       activeClassName: 'snackbar--active',
-      dismissAfter: 5000,
+      dismissAfter: 6000,
     });
   });
 

From b9d484623c48dff654dbb919a7b6f460e135a481 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 29 Sep 2020 22:21:16 -0500
Subject: [PATCH 3/6] Add closed registration message fixes #177

---
 .../components/registration_form.js           | 23 ++++++++++++++++++-
 app/styles/about.scss                         | 16 +++++++++++++
 2 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/app/soapbox/features/landing_page/components/registration_form.js b/app/soapbox/features/landing_page/components/registration_form.js
index 7a2ada78a..3490e8a50 100644
--- a/app/soapbox/features/landing_page/components/registration_form.js
+++ b/app/soapbox/features/landing_page/components/registration_form.js
@@ -93,11 +93,32 @@ class RegistrationForm extends ImmutablePureComponent {
 
   render() {
     const { instance, intl } = this.props;
+    const isOpen = instance.get('registrations');
     const isLoading = this.state.captchaLoading || this.state.submissionLoading;
 
+    if (isOpen === false) {
+      return (
+        <div className='registrations-closed'>
+          <h2>
+            <FormattedMessage
+              id='registration.closed_title'
+              defaultMessage='Registrations Closed'
+            />
+          </h2>
+          <div className='registrations-closed__message'>
+            <FormattedMessage
+              id='registration.closed_message'
+              defaultMessage='{instance} is not accepting new members'
+              values={{ instance: <strong>{instance.get('title')}</strong> }}
+            />
+          </div>
+        </div>
+      );
+    }
+
     return (
       <SimpleForm onSubmit={this.onSubmit}>
-        <fieldset disabled={isLoading}>
+        <fieldset disabled={isLoading || !isOpen}>
           <div className='simple_form__overlay-area'>
             <p className='lead'>
               <FormattedMessage
diff --git a/app/styles/about.scss b/app/styles/about.scss
index 6a09753a6..ece0153e2 100644
--- a/app/styles/about.scss
+++ b/app/styles/about.scss
@@ -443,6 +443,22 @@ $fluid-breakpoint: $maximum-width + 20px;
       }
     }
 
+    .registrations-closed {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      font-size: 18px;
+
+      h2 {
+        font-weight: bold;
+        font-size: 24px;
+        margin-bottom: 10px;
+      }
+    }
+
     @media (min-width: 767px) and (max-width: 1024px) {
       padding: 40px 20px 20px;
 

From c822ce0c90f04842ac7bff2b1c8793544c33c56a Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 29 Sep 2020 23:12:33 -0500
Subject: [PATCH 4/6] Fallback to BE response in login form

---
 app/soapbox/actions/auth.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/app/soapbox/actions/auth.js b/app/soapbox/actions/auth.js
index 2a252ea23..7c0692c21 100644
--- a/app/soapbox/actions/auth.js
+++ b/app/soapbox/actions/auth.js
@@ -135,6 +135,8 @@ export function logIn(username, password) {
     }).catch(error => {
       if (error.response.data.error === 'mfa_required') {
         throw error;
+      } else if(error.response.data.error) {
+        dispatch(snackbar.error(error.response.data.error));
       } else {
         dispatch(snackbar.error('Wrong username or password'));
       }

From 2b3d86f3901495b5196959144e40975c98f3451a Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 29 Sep 2020 23:18:51 -0500
Subject: [PATCH 5/6] Improve pending account message

---
 app/soapbox/actions/auth.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/soapbox/actions/auth.js b/app/soapbox/actions/auth.js
index 7c0692c21..f6f5275ae 100644
--- a/app/soapbox/actions/auth.js
+++ b/app/soapbox/actions/auth.js
@@ -176,7 +176,7 @@ export function register(params) {
       if (needsConfirmation) {
         return dispatch(snackbar.info('You must confirm your email.'));
       } else if (needsApproval) {
-        return dispatch(snackbar.info('Your account is being reviewed.'));
+        return dispatch(snackbar.info('Your account is pending review by an admin.'));
       } else {
         return dispatch(fetchMe());
       }

From 1109a000cb6f44db58026faeeae869ea24b73a38 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 29 Sep 2020 23:42:08 -0500
Subject: [PATCH 6/6] Update snapshots

---
 .../__tests__/__snapshots__/login_form-test.js.snap  | 12 ++++++++----
 .../__tests__/__snapshots__/login_page-test.js.snap  | 12 ++++++++----
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/app/soapbox/features/auth_login/components/__tests__/__snapshots__/login_form-test.js.snap b/app/soapbox/features/auth_login/components/__tests__/__snapshots__/login_form-test.js.snap
index e78d07cab..e2c336537 100644
--- a/app/soapbox/features/auth_login/components/__tests__/__snapshots__/login_form-test.js.snap
+++ b/app/soapbox/features/auth_login/components/__tests__/__snapshots__/login_form-test.js.snap
@@ -10,24 +10,28 @@ exports[`<LoginForm /> renders correctly 1`] = `
       className="fields-group"
     >
       <div
-        className="input email optional user_email"
+        className="input email user_email"
       >
         <input
           aria-label="Username"
-          className="string email optional"
+          autoComplete="off"
+          className="string email"
           name="username"
           placeholder="Username"
+          required={true}
           type="text"
         />
       </div>
       <div
-        className="input password optional user_password"
+        className="input password user_password"
       >
         <input
           aria-label="Password"
-          className="password optional"
+          autoComplete="off"
+          className="password"
           name="password"
           placeholder="Password"
+          required={true}
           type="password"
         />
       </div>
diff --git a/app/soapbox/features/auth_login/components/__tests__/__snapshots__/login_page-test.js.snap b/app/soapbox/features/auth_login/components/__tests__/__snapshots__/login_page-test.js.snap
index 6ea6b4aed..c6cdc64e3 100644
--- a/app/soapbox/features/auth_login/components/__tests__/__snapshots__/login_page-test.js.snap
+++ b/app/soapbox/features/auth_login/components/__tests__/__snapshots__/login_page-test.js.snap
@@ -13,24 +13,28 @@ exports[`<LoginPage /> renders correctly on load 1`] = `
       className="fields-group"
     >
       <div
-        className="input email optional user_email"
+        className="input email user_email"
       >
         <input
           aria-label="Username"
-          className="string email optional"
+          autoComplete="off"
+          className="string email"
           name="username"
           placeholder="Username"
+          required={true}
           type="text"
         />
       </div>
       <div
-        className="input password optional user_password"
+        className="input password user_password"
       >
         <input
           aria-label="Password"
-          className="password optional"
+          autoComplete="off"
+          className="password"
           name="password"
           placeholder="Password"
+          required={true}
           type="password"
         />
       </div>