Bootstrapped login in UI

scm-ui/src/containers/App.js

@@ -6,22 +6,19 @@ import { withRouter } from "react-router-dom";
 
 type Props = {
   login: boolean
-}
+};
 
 class App extends Component {
-
   render() {
-
     const { login } = this.props;
 
-    if(login) {
+    if (!login) {
       return (
         <div>
           <Login />
         </div>
       );
-    }
-    else {
+    } else {
       return (
         <div className="App">
           <Navigation />

scm-ui/src/containers/Login.js

@@ -1,24 +1,35 @@
 //@flow
-import React from 'react';
-import injectSheet from 'react-jss';
+import React from "react";
+import injectSheet from "react-jss";
+import { login } from "../modules/login";
+import { connect } from "react-redux";
 
 const styles = {
   wrapper: {
-    width: '100%',
-    display: 'flex',
-    height: '10em'
+    width: "100%",
+    display: "flex",
+    height: "10em"
   },
   login: {
-    margin: 'auto',
-    textAlign: 'center'
+    margin: "auto",
+    textAlign: "center"
   }
 };
 
-type Props = {
-  classes: any;
+class Login extends React.Component<Props> {
+  state = {};
+  handleUsernameChange(event) {
+    this.setState({ username: event.target.value });
   }
 
-class Login extends React.Component<Props> {
+  handlePasswordChange(event) {
+    this.setState({ password: event.target.value });
+  }
+
+  handleSubmit(event) {
+    event.preventDefault();
+    this.props.login(this.state.username, this.state.password);
+  }
 
   render() {
     const { classes } = this.props;
@@ -26,11 +37,44 @@ class Login extends React.Component<Props> {
       <div className={classes.wrapper}>
         <div className={classes.login}>
           You need to log in! ...
+          <form onSubmit={this.handleSubmit.bind(this)}>
+            <input
+              type="text"
+              defaultValue="Username"
+              onChange={this.handleUsernameChange.bind(this)}
+            />
+            <input
+              type="password"
+              defaultValue="Password"
+              onChange={this.handlePasswordChange.bind(this)}
+            />
+            <input type="submit" value="Login" />
+          </form>
         </div>
       </div>
     );
   }
-
 }
 
-export default injectSheet(styles)(Login);
+const mapStateToProps = state => {
+  return {};
+};
+
+const mapDispatchToProps = dispatch => {
+  return {
+    login: (username: string, password: string) =>
+      dispatch(login(username, password))
+  };
+};
+
+const StyledLogin = injectSheet(styles)(
+  connect(
+    mapStateToProps,
+    mapDispatchToProps
+  )(Login)
+);
+export default StyledLogin;
+// export default connect(
+//   mapStateToProps,
+//   mapDispatchToProps
+// )(StyledLogin);

scm-ui/src/createReduxStore.js

@@ -6,16 +6,19 @@ 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 type { BrowserHistory } from "history/createBrowserHistory";
 
 function createReduxStore(history: BrowserHistory) {
-  const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+  const composeEnhancers =
+    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
 
   const reducer = combineReducers({
     router: routerReducer,
     repositories,
-    users
+    users,
+    login
   });
 
   return createStore(

scm-ui/src/modules/login.js

@@ -0,0 +1,71 @@
+//@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";
+
+export function loginRequest() {
+  return {
+    type: LOGIN_REQUEST
+  };
+}
+
+export function login(username: string, password: string) {
+  var login_data = {
+    cookie: true,
+    grant_type: "password",
+    password: username,
+    username: password
+  };
+  console.log(login_data);
+  return function(dispatch) {
+    dispatch(loginRequest());
+    return fetch("/api/rest/v2/auth/access_token", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json; charset=utf-8"
+      },
+      body: JSON.stringify(login_data)
+    }).then(
+      response => {
+        if (response.ok) {
+          dispatch(loginSuccessful());
+        }
+      },
+      error => console.log("error logging in: " + error)
+    );
+  };
+}
+
+export function loginSuccessful() {
+  return {
+    type: LOGIN_SUCCESSFUL
+  };
+}
+
+export default function reducer(state = {}, action = {}) {
+  switch (action.type) {
+    case LOGIN:
+      return {
+        ...state,
+        login: false,
+        error: null
+      };
+    case LOGIN_SUCCESSFUL:
+      return {
+        ...state,
+        login: true,
+        error: null
+      };
+    case LOGIN_FAILED:
+      return {
+        ...state,
+        login: false,
+        error: action.payload
+      };
+
+    default:
+      return state;
+  }
+}