Some password reset UI fixes. Fixes #955

ui/src/components/comment-form.tsx

@@ -258,7 +258,10 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> {
               <use xlinkHref="#icon-alert-triangle"></use>
             </svg>
             <T i18nKey="must_login" class="d-inline">
-              #<Link to="/login">#</Link>
+              #
+              <Link class="alert-link" to="/login">
+                #
+              </Link>
             </T>
           </div>
         )}

ui/src/components/login.tsx

@@ -120,14 +120,15 @@ export class Login extends Component<any, State> {
                 class="form-control"
                 required
               />
-              <button
+              {validEmail(this.state.loginForm.username_or_email) && (
-                type="button"
+                <button
-                disabled={!validEmail(this.state.loginForm.username_or_email)}
+                  type="button"
-                onClick={linkEvent(this, this.handlePasswordReset)}
+                  onClick={linkEvent(this, this.handlePasswordReset)}
-                className="btn p-0 btn-link d-inline-block float-right text-muted small font-weight-bold"
+                  className="btn p-0 btn-link d-inline-block float-right text-muted small font-weight-bold"
-              >
+                >
-                {i18n.t('forgot_password')}
+                  {i18n.t('forgot_password')}
-              </button>
+                </button>
+              )}
             </div>
           </div>
           <div class="form-group row">
@@ -186,6 +187,14 @@ export class Login extends Component<any, State> {
               onInput={linkEvent(this, this.handleRegisterEmailChange)}
               minLength={3}
             />
+            {!validEmail(this.state.registerForm.email) && (
+              <div class="mt-2 mb-0 alert alert-light" role="alert">
+                <svg class="icon icon-inline mr-2">
+                  <use xlinkHref="#icon-alert-triangle"></use>
+                </svg>
+                {i18n.t('no_password_reset')}
+              </div>
+            )}
           </div>
         </div>
 

ui/translations/en.json

@@ -253,6 +253,7 @@
       "Couldn't find that username or email.",
     "password_incorrect": "Password incorrect.",
     "passwords_dont_match": "Passwords do not match.",
+    "no_password_reset": "You will not be able to reset your password without an email.",
     "invalid_username": "Invalid username.",
     "admin_already_created": "Sorry, there's already an admin.",
     "user_already_exists": "User already exists.",