ui: style login page

pkg/server/server.go

@@ -1928,6 +1928,7 @@ func serveUIAssets(fileServer http.Handler, cfg Config) http.Handler {
 		tmplArgs := ui.IndexHTMLArgs{
 			ExperimentalUseLogin: cfg.EnableWebSessionAuthentication,
 			LoginEnabled:         cfg.RequireWebSession(),
+			Tag:                  build.GetInfo().Tag,
 			Version:              build.VersionPrefix(),
 		}
 		loggedInUser, ok := request.Context().Value(webSessionUserKey{}).(string)

pkg/server/server_test.go

@@ -998,7 +998,8 @@ func TestServeIndexHTML(t *testing.T) {
 		expected := fmt.Sprintf(
 			htmlTemplate,
 			fmt.Sprintf(
-				`{"ExperimentalUseLogin":false,"LoginEnabled":false,"LoggedInUser":null,"Version":"%s"}`,
+				`{"ExperimentalUseLogin":false,"LoginEnabled":false,"LoggedInUser":null,"Tag":"%s","Version":"%s"}`,
+				build.GetInfo().Tag,
 				build.VersionPrefix(),
 			),
 		)
@@ -1028,14 +1029,16 @@ func TestServeIndexHTML(t *testing.T) {
 			{
 				loggedInClient,
 				fmt.Sprintf(
-					`{"ExperimentalUseLogin":true,"LoginEnabled":true,"LoggedInUser":"authentic_user","Version":"%s"}`,
+					`{"ExperimentalUseLogin":true,"LoginEnabled":true,"LoggedInUser":"authentic_user","Tag":"%s","Version":"%s"}`,
+					build.GetInfo().Tag,
 					build.VersionPrefix(),
 				),
 			},
 			{
 				loggedOutClient,
 				fmt.Sprintf(
-					`{"ExperimentalUseLogin":true,"LoginEnabled":true,"LoggedInUser":null,"Version":"%s"}`,
+					`{"ExperimentalUseLogin":true,"LoginEnabled":true,"LoggedInUser":null,"Tag":"%s","Version":"%s"}`,
+					build.GetInfo().Tag,
 					build.VersionPrefix(),
 				),
 			},

pkg/ui/ccl/src/routes/visualization.tsx

@@ -13,7 +13,7 @@ import ClusterOverview from "src/views/cluster/containers/clusterOverview";
 
 export const CLUSTERVIZ_ROOT = "/overview/map";
 
-export default function(): JSX.Element {
+export default function createNodeMapRoutes(): JSX.Element {
   return (
     <Route path="overview" component={ ClusterOverview } >
       <IndexRedirect to="list" />

pkg/ui/src/index.tsx

@@ -66,7 +66,7 @@ ReactDOM.render(
   <Provider store={store}>
     <Router history={history}>
       { /* login */}
-      { loginRoutes() }
+      { loginRoutes(store) }
 
       <Route path="/" component={Layout}>
         <IndexRedirect to="overview" />

pkg/ui/src/redux/login.ts

@@ -6,7 +6,7 @@ import { createSelector } from "reselect";
 import { createPath } from "src/hacks/createPath";
 import { userLogin, userLogout } from "src/util/api";
 import { AdminUIState } from "src/redux/state";
-import { LOGIN_PAGE } from "src/routes/login";
+import { LOGIN_PAGE, LOGOUT_PAGE } from "src/routes/login";
 import { cockroach } from "src/js/protos";
 import { getDataFromServer } from "src/util/dataFromServer";
 
@@ -100,8 +100,20 @@ export const selectLoginState = createSelector(
     },
 );
 
+function shouldRedirect(location: Location) {
+  if (!location) {
+    return false;
+  }
+
+  if (location.pathname === LOGOUT_PAGE) {
+    return false;
+  }
+
+  return true;
+}
+
 export function getLoginPage(location: Location) {
-  const query = !location ? undefined : {
+  const query = !shouldRedirect(location) ? undefined : {
     redirectTo: createPath({
       pathname: location.pathname,
       search: location.search,
@@ -119,7 +131,7 @@ export function getLoginPage(location: Location) {
 
 export interface LoginAPIState {
   loggedInUser: string;
-  error: string;
+  error: Error;
   inProgress: boolean;
 }
 
@@ -153,10 +165,10 @@ function loginSuccess(loggedInUser: string): LoginSuccessAction {
 
 interface LoginFailureAction extends Action {
   type: typeof LOGIN_FAILURE;
-  error: string;
+  error: Error;
 }
 
-function loginFailure(error: string): LoginFailureAction {
+function loginFailure(error: Error): LoginFailureAction {
   return {
     type: LOGIN_FAILURE,
     error,
@@ -180,7 +192,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)); },
       );
   };
 }

pkg/ui/src/routes/login.tsx

@@ -1,12 +1,29 @@
 import React from "react";
 import { Route } from "react-router";
+import { Store } from "redux";
 
+import { doLogout, selectLoginState } from "src/redux/login";
+import { AdminUIState } from "src/redux/state";
 import LoginPage from "src/views/login/loginPage";
 
 export const LOGIN_PAGE = "/login";
+export const LOGOUT_PAGE = "/logout";
+
+export default function createLoginRoutes(store: Store<AdminUIState>): JSX.Element {
+  function handleLogout(_nextState: any, replace: (route: string) => {}) {
+    const loginState = selectLoginState(store.getState());
+
+    if (!loginState.loggedInUser()) {
+      return replace(LOGIN_PAGE);
+    }
+
+    store.dispatch(doLogout());
+  }
 
-export default function(): JSX.Element {
   return (
-    <Route path={LOGIN_PAGE} component={ LoginPage } />
+    <React.Fragment>
+      <Route path={LOGIN_PAGE} component={ LoginPage } />
+      <Route path={LOGOUT_PAGE} onEnter={ handleLogout } />
+    </React.Fragment>
   );
 }

pkg/ui/src/routes/visualization.tsx

@@ -19,7 +19,7 @@ class NodesWrapper extends React.Component<{}, {}> {
   }
 }
 
-export default function(): JSX.Element {
+export default function createClusterOverviewRoutes(): JSX.Element {
   return (
     <Route path="overview" component={ ClusterOverview } >
       <IndexRedirect to="list" />

pkg/ui/src/util/dataFromServer.ts

@@ -2,6 +2,7 @@ export interface DataFromServer {
   ExperimentalUseLogin: boolean;
   LoginEnabled: boolean;
   LoggedInUser: string;
+  Tag: string;
   Version: string;
 }
 

pkg/ui/src/views/app/components/layoutSidebar/index.tsx

@@ -7,13 +7,15 @@ import { Link } from "react-router";
 
 import { AdminUIState } from "src/redux/state";
 import { selectLoginState, LoginState, doLogout } from "src/redux/login";
+import { LOGOUT_PAGE } from "src/routes/login";
 import { cockroachIcon } from "src/views/shared/components/icons";
 import { trustIcon } from "src/util/trust";
 
 import homeIcon from "!!raw-loader!assets/home.svg";
 import metricsIcon from "!!raw-loader!assets/metrics.svg";
 import databasesIcon from "!!raw-loader!assets/databases.svg";
 import jobsIcon from "!!raw-loader!assets/jobs.svg";
+import unlockedIcon from "!!raw-loader!assets/unlocked.svg";
 
 interface IconLinkProps {
   icon: string;
@@ -69,7 +71,13 @@ function LoginIndicator({ loginState, handleLogout }: LoginIndicatorProps) {
   }
 
   if (!loginState.loginEnabled()) {
-    return (<div className="login-indicator">Insecure mode</div>);
+    return (
+      <li className="login-indicator login-indicator--insecure">
+        <div className="image-container"
+             dangerouslySetInnerHTML={trustIcon(unlockedIcon)}/>
+        <div>Insecure mode</div>
+      </li>
+    );
   }
 
   const user = loginState.loggedInUser();
@@ -78,11 +86,15 @@ function LoginIndicator({ loginState, handleLogout }: LoginIndicatorProps) {
   }
 
   return (
-    <div className="login-indicator">
-        Logged in as {user}
-        <br />
-        <button onClick={handleLogout}>Logout</button>
-    </div>
+    <li className="login-indicator">
+        <div
+          className="login-indicator__initial"
+          title={`Signed in as ${user}`}
+        >
+          { user[0] }
+        </div>
+        <Link to={LOGOUT_PAGE} onClick={handleLogout}>Sign Out</Link>
+    </li>
   );
 }
 
@@ -113,10 +125,8 @@ export default class Sidebar extends React.Component {
           <IconLink to="/databases" icon={databasesIcon} title="Databases" activeFor="/database" />
           <IconLink to="/jobs" icon={jobsIcon} title="Jobs" />
         </ul>
-        <div className="logged-in-user">
-          <LoginIndicatorConnected />
-        </div>
         <ul className="navigation-bar__list navigation-bar__list--bottom">
+          <LoginIndicatorConnected />
           <IconLink to="/" icon={cockroachIcon} className="cockroach" />
         </ul>
       </nav>

pkg/ui/src/views/login/loginPage.styl

@@ -0,0 +1,102 @@
+@require "~styl/base/palette.styl"
+
+.login-page
+  display flex
+  align-items center
+  justify-content center
+  height 100%
+  width 100%
+  position absolute
+  background-color white
+
+  .content
+    border thin solid $table-border-color
+    position relative
+
+  &__info.section
+    width 486px
+    display inline-block
+    padding 24px
+
+  &__form.section
+    background-color $table-border-color
+    width 486px
+    display inline-block
+    padding 108px 53px 138px
+
+  .heading
+    text-transform none
+    letter-spacing 1px
+    margin-bottom 24px
+
+  .aside
+    margin-top 12px
+    line-height 24px
+    letter-spacing 1px
+    color $body-color
+    width 350px
+
+  .version
+    color $body-color
+    position absolute
+    left 12px
+    top 12px
+
+  .version-tag
+    color #54b30e
+
+  .logo
+    height 32px
+
+  .docs-link
+    display block
+    margin-top 32px
+    text-decoration none
+    color $link-color
+
+    &__icon
+      position relative
+      top 6px
+
+    &__text
+      font-size 17px
+      line-height 30px
+      margin-left 6px
+
+  .input-text
+    width 100%
+    font-size 14px
+    line-height 17px
+    padding 12px 18px
+    vertical-align middle
+    border 1px solid $button-border-color
+    border-radius 3px
+    margin 12px 0
+    color $body-color
+    display block
+
+    &--error
+      border-color $alert-color
+
+  .submit-button
+    width 100%
+    text-transform uppercase
+    font-size 14px
+    letter-spacing 2px
+    line-height 17px
+    padding 12px 24px
+    vertical-align middle
+    border 0px none
+    border-radius 3px
+    margin 24px 0
+    color $background-color
+    background-color $link-color
+    cursor pointer
+    display block
+
+    &:disabled
+      background-color #90b8ef
+
+  &__error
+    color $alert-color
+    margin 12px 0