implemented logout and rename login module to auth

scm-ui/src/components/PrimaryNavigation.js

@@ -1,15 +1,22 @@
 //@flow
 import React from "react";
 import PrimaryNavigationLink from "./PrimaryNavigationLink";
+import PrimaryNavigationAction from "./PrimaryNavigationAction";
 
-type Props = {};
+type Props = {
+  onLogout: () => void
+};
 
 class PrimaryNavigation extends React.Component<Props> {
   render() {
     return (
       <nav className="tabs is-boxed">
         <ul>
-          <PrimaryNavigationLink to="/users">Users</PrimaryNavigationLink>
+          <PrimaryNavigationLink to="/users" label="Users" />
+          <PrimaryNavigationAction
+            onClick={this.props.onLogout}
+            label="Logout"
+          />
         </ul>
       </nav>
     );

scm-ui/src/components/PrimaryNavigationAction.js

@@ -0,0 +1,20 @@
+//@flow
+import * as React from "react";
+
+type Props = {
+  label: string,
+  onClick: () => void
+};
+
+class PrimaryNavigationAction extends React.Component<Props> {
+  render() {
+    const { label, onClick } = this.props;
+    return (
+      <li>
+        <a onClick={onClick}>{label}</a>
+      </li>
+    );
+  }
+}
+
+export default PrimaryNavigationAction;

scm-ui/src/components/PrimaryNavigationLink.js

@@ -4,16 +4,16 @@ import { Route, Link } from "react-router-dom";
 
 type Props = {
   to: string,
-  activeOnlyWhenExact?: boolean,
-  children?: React.Node
+  label: string,
+  activeOnlyWhenExact?: boolean
 };
 
 class PrimaryNavigationLink extends React.Component<Props> {
   renderLink = (route: any) => {
-    const { to, children } = this.props;
+    const { to, label } = this.props;
     return (
       <li className={route.match ? "is-active" : ""}>
-        <Link to={to}>{children}</Link>
+        <Link to={to}>{label}</Link>
       </li>
     );
   };

scm-ui/src/containers/App.js

@@ -5,25 +5,31 @@ import Login from "./Login";
 import { connect } from "react-redux";
 import { withRouter } from "react-router-dom";
 import { fetchMe } from "../modules/me";
+import { logout } from "../modules/auth";
 
 import "./App.css";
 import Header from "../components/Header";
 import PrimaryNavigation from "../components/PrimaryNavigation";
 import Loading from "../components/Loading";
-import Footer from "../components/Footer";
 import ErrorNotification from "../components/ErrorNotification";
 
 type Props = {
   me: any,
   error: Error,
   loading: boolean,
-  fetchMe: () => void
+  fetchMe: () => void,
+  logout: () => void
 };
 
 class App extends Component<Props> {
   componentDidMount() {
     this.props.fetchMe();
   }
+
+  logout = () => {
+    this.props.logout();
+  };
+
   render() {
     const { me, loading, error } = this.props;
 
@@ -39,7 +45,7 @@ class App extends Component<Props> {
       content = <Login />;
     } else {
       content = <Main me={me} />;
-      navigation = <PrimaryNavigation />;
+      navigation = <PrimaryNavigation onLogout={this.logout} />;
     }
 
     return (
@@ -53,7 +59,8 @@ class App extends Component<Props> {
 
 const mapDispatchToProps = (dispatch: ThunkDispatch) => {
   return {
-    fetchMe: () => dispatch(fetchMe())
+    fetchMe: () => dispatch(fetchMe()),
+    logout: () => dispatch(logout())
   };
 };
 

scm-ui/src/containers/Login.js

@@ -1,7 +1,7 @@
 //@flow
 import React from "react";
 import injectSheet from "react-jss";
-import { login } from "../modules/login";
+import { login } from "../modules/auth";
 import { connect } from "react-redux";
 
 import InputField from "../components/InputField";

scm-ui/src/createReduxStore.js

@@ -6,7 +6,7 @@ import { routerReducer, routerMiddleware } from "react-router-redux";
 
 import repositories from "./repositories/modules/repositories";
 import users from "./users/modules/users";
-import login from "./modules/login";
+import auth from "./modules/auth";
 import me from "./modules/me";
 
 import type { BrowserHistory } from "history/createBrowserHistory";
@@ -19,7 +19,7 @@ function createReduxStore(history: BrowserHistory) {
     router: routerReducer,
     repositories,
     users,
-    login,
+    auth,
     me
   });
 

scm-ui/src/modules/auth.js

@@ -1,6 +1,6 @@
 //@flow
 
-import { apiClient, NOT_AUTHENTICATED_ERROR } from "../apiclient";
+import { apiClient } from "../apiclient";
 import { fetchMe } from "./me";
 
 const LOGIN_URL = "/auth/access_token";
@@ -9,6 +9,10 @@ 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 LOGOUT_REQUEST = "scm/auth/logout_request";
+export const LOGOUT_SUCCESSFUL = "scm/auth/logout_successful";
+export const LOGOUT_FAILED = "scm/auth/logout_failed";
+
 export function login(username: string, password: string) {
   const login_data = {
     cookie: true,
@@ -50,6 +54,41 @@ export function loginFailed(error: Error) {
   };
 }
 
+export function logout() {
+  return function(dispatch: any) {
+    dispatch(logoutRequest());
+    return apiClient
+      .delete(LOGIN_URL)
+      .then(() => {
+        dispatch(logoutSuccess());
+        // not the best way or?
+        dispatch(fetchMe());
+      })
+      .catch(error => {
+        dispatch(logoutFailed(error));
+      });
+  };
+}
+
+export function logoutRequest() {
+  return {
+    type: LOGOUT_REQUEST
+  };
+}
+
+export function logoutSuccess() {
+  return {
+    type: LOGOUT_SUCCESSFUL
+  };
+}
+
+export function logoutFailed(error: Error) {
+  return {
+    type: LOGOUT_FAILED,
+    payload: error
+  };
+}
+
 export default function reducer(state: any = {}, action: any = {}) {
   switch (action.type) {
     case LOGIN_REQUEST:
@@ -74,6 +113,26 @@ export default function reducer(state: any = {}, action: any = {}) {
         error: action.payload
       };
 
+    case LOGOUT_REQUEST:
+      return {
+        ...state,
+        loading: true,
+        error: null
+      };
+    case LOGOUT_SUCCESSFUL:
+      return {
+        ...state,
+        loading: false,
+        login: false,
+        error: null
+      };
+    case LOGOUT_FAILED:
+      return {
+        ...state,
+        loading: false,
+        error: action.payload
+      };
+
     default:
       return state;
   }

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

@@ -1,10 +1,14 @@
 // @flow
 import reducer, {
   login,
+  logout,
   LOGIN_REQUEST,
   LOGIN_FAILED,
-  LOGIN_SUCCESSFUL
-} from "./login";
+  LOGIN_SUCCESSFUL,
+  LOGOUT_REQUEST,
+  LOGOUT_SUCCESSFUL,
+  LOGOUT_FAILED
+} from "./auth";
 
 import { ME_AUTHENTICATED_REQUEST, ME_AUTHENTICATED_SUCCESS } from "./me";
 
@@ -66,6 +70,44 @@ describe("action tests", () => {
       expect(actions[1].payload).toBeDefined();
     });
   });
+
+  test("logout success", () => {
+    fetchMock.deleteOnce("/scm/api/rest/v2/auth/access_token", {
+      status: 204
+    });
+
+    fetchMock.getOnce("/scm/api/rest/v2/me", {
+      status: 401
+    });
+
+    const expectedActions = [
+      { type: LOGOUT_REQUEST },
+      { type: LOGOUT_SUCCESSFUL },
+      { type: ME_AUTHENTICATED_REQUEST }
+    ];
+
+    const store = mockStore({});
+
+    return store.dispatch(logout()).then(() => {
+      expect(store.getActions()).toEqual(expectedActions);
+    });
+  });
+
+  test("logout failed", () => {
+    fetchMock.deleteOnce("/scm/api/rest/v2/auth/access_token", {
+      status: 500
+    });
+
+    const expectedActions = [{ type: LOGOUT_REQUEST }, { type: LOGOUT_FAILED }];
+
+    const store = mockStore({});
+    return store.dispatch(logout()).then(() => {
+      const actions = store.getActions();
+      expect(actions[0].type).toEqual(LOGOUT_REQUEST);
+      expect(actions[1].type).toEqual(LOGOUT_FAILED);
+      expect(actions[1].payload).toBeDefined();
+    });
+  });
 });
 
 describe("reducer tests", () => {
@@ -90,4 +132,29 @@ describe("reducer tests", () => {
     expect(newState.login).toBeFalsy();
     expect(newState.error).toBe(err);
   });
+
+  test("logout request", () => {
+    var newState = reducer({ login: true }, { type: LOGOUT_REQUEST });
+    expect(newState.loading).toBeTruthy();
+    expect(newState.login).toBeTruthy();
+    expect(newState.error).toBeNull();
+  });
+
+  test("logout successful", () => {
+    var newState = reducer({ login: true }, { type: LOGOUT_SUCCESSFUL });
+    expect(newState.loading).toBeFalsy();
+    expect(newState.login).toBeFalsy();
+    expect(newState.error).toBeNull();
+  });
+
+  test("logout failed", () => {
+    const err = new Error("error!");
+    var newState = reducer(
+      { login: true },
+      { type: LOGOUT_FAILED, payload: err }
+    );
+    expect(newState.loading).toBeFalsy();
+    expect(newState.login).toBeTruthy();
+    expect(newState.error).toBe(err);
+  });
 });