Login basic auth ui

waartaa/client/app/constants/actionTypes.jsx

@@ -3,3 +3,4 @@ export const AUTHENTICATION_ERROR = 'AUTHENTICATION_ERROR';
 export const AUTHORIZATION_ERROR = 'AUTHORIZATION_ERROR';
 export const LOGOUT = 'LOGOUT';
 export const LOGGEDIN = 'loggedin';
+export const CONNECTED = 'connected';

waartaa/client/app/containers/forms/LoginForm.jsx

@@ -0,0 +1,70 @@
+import React, { Component, PropTypes } from 'react';
+import { reduxForm } from 'redux-form';
+import TextField from 'material-ui/TextField';
+import Paper from 'material-ui/Paper'
+import RaisedButton from 'material-ui/RaisedButton';
+
+export const fields = [ 'username', 'password' ]
+
+const style = {
+  height: 300,
+  width: 400,
+  padding: 20,
+  textAlign: "center"
+}
+
+
+const submit = (values, dispatch) => {
+  console.log(values);
+  dispatch({
+    type: 'login',
+    data: values,
+    remote: true
+  });
+};
+
+class LoginForm extends Component {
+  render() {
+    const {
+      fields: { username, password },
+      handleSubmit,
+      submitting
+      } = this.props
+    return (
+      <div>
+        <Paper style={style} zDepth={1} rounded={false}>
+          <form onSubmit={handleSubmit(submit)}>
+            <TextField
+              floatingLabelText="Username"
+              floatingLabelFixed={false}
+              fullWidth={true}
+              {...username}
+            />
+            <br />
+            <TextField
+              floatingLabelText="Password"
+              floatingLabelFixed={false}
+              type="password"
+              fullWidth={true}
+              {...password}
+            />
+            <br />
+            <RaisedButton label="Login" type="submit" primary={true} />
+          </form>
+        </Paper>
+      </div>
+    )
+  }
+}
+
+LoginForm.propTypes = {
+  handleSubmit: PropTypes.func.isRequired,
+  submitting: PropTypes.bool.isRequired
+}
+
+LoginForm = reduxForm({
+  form: 'simple',
+  fields
+})(LoginForm);
+
+export default LoginForm;

waartaa/client/app/containers/login/LoginController.jsx

@@ -4,21 +4,23 @@ import ActionAndroid from 'material-ui/svg-icons/action/android';
 import RaisedButton from 'material-ui/RaisedButton';
 
 import userManager from '../../helpers/oidcHelpers.jsx';
+import LoginForm from '../forms/LoginForm';
 
 export default class LoginController extends Component {
   onFASLoginButtonClick = (event) => {
     event.preventDefault();
     userManager.signinRedirect();
   };
 
+  handleSubmit = (event) => {
+    event.preventDefault();
+    console.log('form submitted')
+  };
+
   render() {
     return (
       <div>
-        <RaisedButton
-          label="Login with FAS"
-          icon={<ActionAndroid/>}
-          onMouseUp={this.onFASLoginButtonClick}
-        />
+        <LoginForm handleSubmit={this.handleSubmit} submitting={false} />
       </div>
     );
   }

waartaa/client/app/middlewares/sockjs.jsx

@@ -7,7 +7,9 @@ export default function createSockjsMiddleware(sock) {
   return ({ dispatch }) => {
     // Wire sockjs to dispatch actions sent by the server.
     sock.onmessage = (e) => {
-      dispatch(JSON.parse(e.data))
+      console.log('Message received');
+      console.log(e.data);
+      dispatch(JSON.parse(e.data));
     }
 
     return next => action => {

waartaa/client/app/reducers/authed.jsx

@@ -0,0 +1,18 @@
+import * as types from '../constants/actionTypes';
+
+const initialState = {
+  user: null
+}
+
+var authed = (state = initialState, action) => {
+  switch (action.type) {
+    case types.LOGGEDIN:
+      return Object.assign({}, state, {
+        user: action.data.user
+      });
+    default:
+      return state
+  }
+}
+
+export default authed;

waartaa/client/app/reducers/connection.jsx

@@ -0,0 +1,18 @@
+import * as types from '../constants/actionTypes';
+
+const initialState = {
+  connected: false
+}
+
+var connection = (state = initialState, action) => {
+  switch (action.type) {
+    case types.CONNECTED:
+      return Object.assign({}, state, {
+        connected: true
+      });
+    default:
+      return state
+  }
+}
+
+export default connection;

waartaa/client/app/reducers/index.jsx

@@ -1,10 +1,16 @@
 import { combineReducers } from 'redux';
 import { routerReducer as routing } from 'react-router-redux';
 import { reducer as reduxReducer } from 'redux-oidc';
+import { reducer as formReducer } from 'redux-form';
+import authed from './authed';
+import connection from './connection';
 
 const rootReducer = combineReducers({
   oidc: reduxReducer,
-  routing: routing
+  routing: routing,
+  form: formReducer,
+  authed: authed,
+  connection: connection
 });
 
 export default rootReducer

waartaa/client/app/stores/configureStore.dev.jsx

@@ -4,6 +4,7 @@ import oidcMiddleware from '../middleware/middleware.jsx';
 import DevTools from '../containers/DevTools.jsx';
 import SockJS from 'sockjs-client';
 import createSockjsMiddleware from '../middlewares/sockjs';
+import * as types from '../constants/actionTypes';
 
 var sock = new SockJS('/sockjs');
 var sockjsMiddleware = createSockjsMiddleware(sock);
@@ -46,13 +47,8 @@ export default function configureStore(initialState) {
 
   sock.onopen = () => {
     store.dispatch({
-      type: 'login',
-      data: {
-        username: 'rtnpro',
-        password: 'password'
-      },
-      remote: true
-    })
+      type: types.CONNECTED
+    });
   }
 
   return store;

waartaa/client/package.json

@@ -43,6 +43,7 @@
     "react-tap-event-plugin": "^1.0.0",
     "react-title-component": "^1.0.1",
     "redux": "^3.5.2",
+    "redux-form": "^5.3.1",
     "redux-oidc": "^2.0.0-beta.2",
     "sockjs-client": "^1.0.3",
     "style-loader": "~0.13.1",

waartaa/websocket/session.py

@@ -33,7 +33,16 @@ def on_login(self, data):
         )
         if user:
             self.user = user
-            response = {'type': 'loggedin', 'data': {'status': 'SUCCESS'}}
+            response = {'type': 'loggedin',
+                        'data': {
+                            'status': 'SUCCESS',
+                            'user': {
+                                'id': user.id,
+                                'username': user.username,
+                                'email': user.email
+                            }
+                        }
+                        }
             self.session.send(json.dumps(response))
 
     @asyncio.coroutine