ui: error state for login page

Add some styling and clean up the error text on login page. Contributes to cockroachdb#24939. Release note: None
couchand · Jun 7, 2018 · b966f7c · b966f7c
1 parent a9f74ae
commit b966f7c
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 8 deletions.
diff --git a/pkg/ui/src/redux/login.ts b/pkg/ui/src/redux/login.ts
@@ -119,7 +119,7 @@ export function getLoginPage(location: Location) {
 
 export interface LoginAPIState {
   loggedInUser: string;
-  error: string;
+  error: Error;
   inProgress: boolean;
 }
 
@@ -180,7 +180,7 @@ export function doLogin(username: string, password: string): ThunkAction<Promise
     return userLogin(loginReq)
       .then(
         () => { dispatch(loginSuccess(username)); },
-        (err) => { dispatch(loginFailure(err.toString())); },
+        (err) => { dispatch(loginFailure(err)); },
       );
   };
 }

diff --git a/pkg/ui/src/views/login/loginPage.styl b/pkg/ui/src/views/login/loginPage.styl
@@ -16,7 +16,7 @@
     margin-top 12px
     line-height 24px
     letter-spacing 1px
-    color #666
+    color $body-color
     width 350px
 
   .input-text
@@ -29,6 +29,9 @@
     margin 12px 0
     color $body-color
 
+    &--error
+      border-color $alert-color
+
   .submit-button
     text-transform uppercase
     font-size 14px
@@ -41,3 +44,7 @@
     margin 24px 0
     color $background-color
     background-color $link-color
+
+  &__error
+    color $alert-color
+    margin 12px 0
diff --git a/pkg/ui/src/views/login/loginPage.tsx b/pkg/ui/src/views/login/loginPage.tsx
@@ -1,3 +1,4 @@
+import classNames from "classnames";
 import React from "react";
 import Helmet from "react-helmet";
 import { connect } from "react-redux";
@@ -55,7 +56,27 @@ class LoginPage extends React.Component<LoginPageProps & WithRouterProps, LoginP
         });
   }
 
+  renderError() {
+    const { error } = this.props.loginState;
+
+    if (!error) {
+      return null;
+    }
+
+    let message = "Invalid username or password.";
+    if (error.message !== "Unauthorized") {
+        message = error.message;
+    }
+    return (
+      <div className="login-page__error">Unable to log in: { message }</div>
+    );
+  }
+
   render() {
+    const inputClasses = classNames("input-text", {
+      "input-text--error": !!this.props.loginState.error,
+    });
+
     return (
       <div className="login-page">
         <Helmet>
@@ -66,22 +87,23 @@ class LoginPage extends React.Component<LoginPageProps & WithRouterProps, LoginP
           <p className="aside">
             Please contact your database administrator for
             account access and password restoration.
+
+          </p>
+          <p className="aside">
             For more information, see{" "}
             <a href={docsURL("admin-ui-overview.html")}>the documentation</a>.
           </p>
-          {this.props.loginState.error
-            ? <div className="login-page__error">Login error: {this.props.loginState.error}</div>
-            : null}
+          {this.renderError()}
           <form onSubmit={this.handleSubmit}>
             <input
               type="text"
-              className="input-text"
+              className={inputClasses}
               onChange={this.handleUpdateUsername}
               value={this.state.username}
             /><br />
             <input
               type="password"
-              className="input-text"
+              className={inputClasses}
               onChange={this.handleUpdatePassword}
               value={this.state.password}
             /><br />