Implemented login & added tests

scm-ui/src/containers/App.js

@@ -2,15 +2,22 @@ import React, { Component } from "react";
 import Navigation from "./Navigation";
 import Main from "./Main";
 import Login from "./Login";
+import { getIsAuthenticated } from "../modules/login";
+import { connect } from "react-redux";
 import { withRouter } from "react-router-dom";
 
 type Props = {
-  login: boolean
+  login: boolean,
+  username: string,
+  getAuthState: any
 };
 
 class App extends Component {
+  componentWillMount() {
+    this.props.getAuthState();
+  }
   render() {
-    const { login } = this.props;
+    const { login, username } = this.props.login;
 
     if (!login) {
       return (
@@ -21,6 +28,7 @@ class App extends Component {
     } else {
       return (
         <div className="App">
+          <h2>Welcome, {username}!</h2>
           <Navigation />
           <Main />
         </div>
@@ -29,4 +37,19 @@ class App extends Component {
   }
 }
 
-export default withRouter(App);
+const mapDispatchToProps = dispatch => {
+  return {
+    getAuthState: () => dispatch(getIsAuthenticated())
+  };
+};
+
+const mapStateToProps = state => {
+  return { login: state.login };
+};
+
+export default withRouter(
+  connect(
+    mapStateToProps,
+    mapDispatchToProps
+  )(App)
+);

scm-ui/src/containers/Login.js

@@ -74,7 +74,3 @@ const StyledLogin = injectSheet(styles)(
   )(Login)
 );
 export default StyledLogin;
-// export default connect(
-//   mapStateToProps,
-//   mapDispatchToProps
-// )(StyledLogin);

scm-ui/src/modules/login.js

@@ -1,9 +1,60 @@
 //@flow
 
-const LOGIN = "scm/auth/login";
-const LOGIN_REQUEST = "scm/auth/login_request";
-const LOGIN_SUCCESSFUL = "scm/auth/login_successful";
-const LOGIN_FAILED = "scm/auth/login_failed";
+const LOGIN_URL = "/scm/api/rest/v2/auth/access_token";
+const AUTHENTICATION_INFO_URL = "/scm/api/rest/v2/me";
+
+export const LOGIN = "scm/auth/login";
+export const LOGIN_REQUEST = "scm/auth/login_request";
+export const LOGIN_SUCCESSFUL = "scm/auth/login_successful";
+export const LOGIN_FAILED = "scm/auth/login_failed";
+export const GET_IS_AUTHENTICATED_REQUEST = "scm/auth/is_authenticated_request";
+export const GET_IS_AUTHENTICATED = "scm/auth/get_is_authenticated";
+export const IS_AUTHENTICATED = "scm/auth/is_authenticated";
+export const IS_NOT_AUTHENTICATED = "scm/auth/is_not_authenticated";
+
+export function getIsAuthenticatedRequest() {
+  return {
+    type: GET_IS_AUTHENTICATED_REQUEST
+  };
+}
+
+export function getIsAuthenticated() {
+  return function(dispatch) {
+    dispatch(getIsAuthenticatedRequest());
+
+    return fetch(AUTHENTICATION_INFO_URL, {
+      credentials: "same-origin",
+      headers: {
+        Cache: "no-cache"
+      }
+    })
+      .then(response => {
+        if (response.ok) {
+          return response.json();
+        } else {
+          dispatch(isNotAuthenticated());
+        }
+      })
+      .then(data => {
+        if (data) {
+          dispatch(isAuthenticated(data.username));
+        }
+      });
+  };
+}
+
+export function isAuthenticated(username: string) {
+  return {
+    type: IS_AUTHENTICATED,
+    username
+  };
+}
+
+export function isNotAuthenticated() {
+  return {
+    type: IS_NOT_AUTHENTICATED
+  };
+}
 
 export function loginRequest() {
   return {
@@ -18,18 +69,19 @@ export function login(username: string, password: string) {
     password: username,
     username: password
   };
-  console.log(login_data);
   return function(dispatch) {
     dispatch(loginRequest());
-    return fetch("/api/rest/v2/auth/access_token", {
+    return fetch(LOGIN_URL, {
       method: "POST",
       headers: {
         "Content-Type": "application/json; charset=utf-8"
       },
+      credentials: "same-origin",
       body: JSON.stringify(login_data)
     }).then(
       response => {
         if (response.ok) {
+          dispatch(getIsAuthenticated());
           dispatch(loginSuccessful());
         }
       },
@@ -44,7 +96,7 @@ export function loginSuccessful() {
   };
 }
 
-export default function reducer(state = {}, action = {}) {
+export default function reducer(state: any = {}, action: any = {}) {
   switch (action.type) {
     case LOGIN:
       return {
@@ -64,6 +116,19 @@ export default function reducer(state = {}, action = {}) {
         login: false,
         error: action.payload
       };
+    case IS_AUTHENTICATED:
+      return {
+        ...state,
+        login: true,
+        username: action.username
+      };
+    case IS_NOT_AUTHENTICATED:
+      return {
+        ...state,
+        login: false,
+        username: null,
+        error: null
+      };
 
     default:
       return state;

scm-ui/src/modules/login.test.js

@@ -0,0 +1,49 @@
+// @flow
+import reducer, {
+  LOGIN_REQUEST,
+  LOGIN_FAILED,
+  IS_AUTHENTICATED,
+  IS_NOT_AUTHENTICATED
+} from "./login";
+import { LOGIN, LOGIN_SUCCESSFUL } from "./login";
+
+test("login", () => {
+  var newState = reducer({}, { type: LOGIN });
+  expect(newState.login).toBe(false);
+  expect(newState.error).toBe(null);
+});
+
+test("login request", () => {
+  var newState = reducer({}, { type: LOGIN_REQUEST });
+  expect(newState.login).toBe(undefined);
+});
+
+test("login successful", () => {
+  var newState = reducer({ login: false }, { type: LOGIN_SUCCESSFUL });
+  expect(newState.login).toBe(true);
+  expect(newState.error).toBe(null);
+});
+
+test("login failed", () => {
+  var newState = reducer({}, { type: LOGIN_FAILED, payload: "error!" });
+  expect(newState.login).toBe(false);
+  expect(newState.error).toBe("error!");
+});
+
+test("is authenticated", () => {
+  var newState = reducer(
+    { login: false },
+    { type: IS_AUTHENTICATED, username: "test" }
+  );
+  expect(newState.login).toBeTruthy();
+  expect(newState.username).toBe("test");
+});
+
+test("is not authenticated", () => {
+  var newState = reducer(
+    { login: true, username: "foo" },
+    { type: IS_NOT_AUTHENTICATED }
+  );
+  expect(newState.login).toBe(false);
+  expect(newState.username).toBeNull();
+});

scm-ui/src/users/modules/users.js

@@ -1,6 +1,8 @@
-const FETCH_USERS = 'scm/users/FETCH';
-const FETCH_USERS_SUCCESS= 'scm/users/FETCH_SUCCESS';
-const FETCH_USERS_FAILURE = 'scm/users/FETCH_FAILURE';
+// @flow
+
+const FETCH_USERS = "scm/users/FETCH";
+const FETCH_USERS_SUCCESS = "scm/users/FETCH_SUCCESS";
+const FETCH_USERS_FAILURE = "scm/users/FETCH_FAILURE";
 
 function requestUsers() {
   return {
@@ -8,12 +10,11 @@ function requestUsers() {
   };
 }
 
-
 function fetchUsers() {
   return function(dispatch) {
     dispatch(requestUsers());
     return null;
-  }
+  };
 }
 
 export function shouldFetchUsers(state: any): boolean {
@@ -26,10 +27,10 @@ export function fetchUsersIfNeeded() {
     if (shouldFetchUsers(getState())) {
       dispatch(fetchUsers());
     }
-  }
+  };
 }
 
-export default function reducer(state = {}, action = {}) {
+export default function reducer(state: any = {}, action: any = {}) {
   switch (action.type) {
     case FETCH_USERS:
       return {
@@ -53,6 +54,6 @@ export default function reducer(state = {}, action = {}) {
       };
 
     default:
-      return state
+      return state;
   }
 }