Merge branch 'auth-form-improvements' into 'develop'

Auth form improvements, fixes #454 #373 #67 #177

Closes #177, #67, #373, and #454

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

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>

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>

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;