From 29071fb75bb7dffbfd05105696daf472b4030127 Mon Sep 17 00:00:00 2001 From: Ratnadeep Debnath Date: Sun, 24 Jul 2016 18:11:44 +0530 Subject: [PATCH 1/8] Initial work on basic login form using redux-form. --- .../client/app/containers/forms/LoginForm.jsx | 57 +++++++++++++++++++ .../app/containers/login/LoginController.jsx | 8 +++ waartaa/client/app/reducers/index.jsx | 4 +- waartaa/client/package.json | 1 + 4 files changed, 69 insertions(+), 1 deletion(-) create mode 100644 waartaa/client/app/containers/forms/LoginForm.jsx diff --git a/waartaa/client/app/containers/forms/LoginForm.jsx b/waartaa/client/app/containers/forms/LoginForm.jsx new file mode 100644 index 0000000..551a838 --- /dev/null +++ b/waartaa/client/app/containers/forms/LoginForm.jsx @@ -0,0 +1,57 @@ +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" +} + +class LoginForm extends Component { + render() { + const { + fields: { username, password }, + handleSubmit, + submitting + } = this.props + debugger; + return ( +
+ +
+ +
+ +
+ + +
+
+ ) + } +} + +LoginForm.propTypes = { + handleSubmit: PropTypes.func.isRequired, + submitting: PropTypes.bool.isRequired +} + +export default reduxForm({ + form: 'simple', + fields +})(LoginForm); diff --git a/waartaa/client/app/containers/login/LoginController.jsx b/waartaa/client/app/containers/login/LoginController.jsx index e1f1008..1c4fa6f 100644 --- a/waartaa/client/app/containers/login/LoginController.jsx +++ b/waartaa/client/app/containers/login/LoginController.jsx @@ -4,6 +4,7 @@ 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) => { @@ -11,6 +12,12 @@ export default class LoginController extends Component { userManager.signinRedirect(); }; + handleSubmit = (event) => { + debugger; + event.preventDefault(); + console.log('form submitted') + }; + render() { return (
@@ -19,6 +26,7 @@ export default class LoginController extends Component { icon={} onMouseUp={this.onFASLoginButtonClick} /> +
); } diff --git a/waartaa/client/app/reducers/index.jsx b/waartaa/client/app/reducers/index.jsx index 4377a04..fa0ea9f 100644 --- a/waartaa/client/app/reducers/index.jsx +++ b/waartaa/client/app/reducers/index.jsx @@ -1,10 +1,12 @@ 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'; const rootReducer = combineReducers({ oidc: reduxReducer, - routing: routing + routing: routing, + form: formReducer }); export default rootReducer diff --git a/waartaa/client/package.json b/waartaa/client/package.json index 8aa2191..dfff4e8 100644 --- a/waartaa/client/package.json +++ b/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", From 108504dc93c04f491d7b29f7a15699291141408e Mon Sep 17 00:00:00 2001 From: Sayan Chowdhury Date: Sun, 24 Jul 2016 18:24:21 +0530 Subject: [PATCH 2/8] Move the handleSubmit method to the LoginForm --- waartaa/client/app/containers/forms/LoginForm.jsx | 9 ++++++--- waartaa/client/app/containers/login/LoginController.jsx | 8 +------- 2 files changed, 7 insertions(+), 10 deletions(-) diff --git a/waartaa/client/app/containers/forms/LoginForm.jsx b/waartaa/client/app/containers/forms/LoginForm.jsx index 551a838..4e0a339 100644 --- a/waartaa/client/app/containers/forms/LoginForm.jsx +++ b/waartaa/client/app/containers/forms/LoginForm.jsx @@ -14,17 +14,20 @@ const style = { } class LoginForm extends Component { + handleSubmit = (event) => { + event.preventDefault(); + console.log('form submitted') + }; + render() { const { fields: { username, password }, - handleSubmit, submitting } = this.props - debugger; return (
-
+ { - debugger; - event.preventDefault(); - console.log('form submitted') - }; - render() { return (
@@ -26,7 +20,7 @@ export default class LoginController extends Component { icon={} onMouseUp={this.onFASLoginButtonClick} /> - +
); } From 26e7c4887f19b7509012764eaa7803ee896fcb87 Mon Sep 17 00:00:00 2001 From: Sayan Chowdhury Date: Sun, 24 Jul 2016 18:49:58 +0530 Subject: [PATCH 3/8] Revert the earlier commit back and fetch data from form --- .../client/app/containers/forms/LoginForm.jsx | 19 ++++++++++++------- .../app/containers/login/LoginController.jsx | 7 ++++++- 2 files changed, 18 insertions(+), 8 deletions(-) diff --git a/waartaa/client/app/containers/forms/LoginForm.jsx b/waartaa/client/app/containers/forms/LoginForm.jsx index 4e0a339..45d50e5 100644 --- a/waartaa/client/app/containers/forms/LoginForm.jsx +++ b/waartaa/client/app/containers/forms/LoginForm.jsx @@ -13,25 +13,27 @@ const style = { textAlign: "center" } -class LoginForm extends Component { - handleSubmit = (event) => { - event.preventDefault(); - console.log('form submitted') - }; +const submit = (values, dispatch) => { + console.log(values); +}; + +class LoginForm extends Component { render() { const { fields: { username, password }, + handleSubmit, submitting } = this.props return (
- +

@@ -54,7 +57,9 @@ LoginForm.propTypes = { submitting: PropTypes.bool.isRequired } -export default reduxForm({ +LoginForm = reduxForm({ form: 'simple', fields })(LoginForm); + +export default LoginForm; diff --git a/waartaa/client/app/containers/login/LoginController.jsx b/waartaa/client/app/containers/login/LoginController.jsx index 32c71c9..9c7f94d 100644 --- a/waartaa/client/app/containers/login/LoginController.jsx +++ b/waartaa/client/app/containers/login/LoginController.jsx @@ -12,6 +12,11 @@ export default class LoginController extends Component { userManager.signinRedirect(); }; + handleSubmit = (event) => { + event.preventDefault(); + console.log('form submitted') + }; + render() { return (
@@ -20,7 +25,7 @@ export default class LoginController extends Component { icon={} onMouseUp={this.onFASLoginButtonClick} /> - +
); } From 60d9e51df8b9220437fa373e1db46bf76b2144be Mon Sep 17 00:00:00 2001 From: Ratnadeep Debnath Date: Sun, 24 Jul 2016 20:39:30 +0530 Subject: [PATCH 4/8] Log messages dispatched by sockjs redux middleware. --- waartaa/client/app/middlewares/sockjs.jsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/waartaa/client/app/middlewares/sockjs.jsx b/waartaa/client/app/middlewares/sockjs.jsx index b677d47..e4d14f8 100644 --- a/waartaa/client/app/middlewares/sockjs.jsx +++ b/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 => { From c76b6d3529b654b04a084ed16fa4e325c938a457 Mon Sep 17 00:00:00 2001 From: Ratnadeep Debnath Date: Sun, 24 Jul 2016 20:40:01 +0530 Subject: [PATCH 5/8] Send basic user info from backend on login. --- waartaa/websocket/session.py | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/waartaa/websocket/session.py b/waartaa/websocket/session.py index a3bc417..fe164e2 100644 --- a/waartaa/websocket/session.py +++ b/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 From 84c1b5c8deb20ed2b7d3ad62b2b307f5983c5a28 Mon Sep 17 00:00:00 2001 From: Ratnadeep Debnath Date: Sun, 24 Jul 2016 20:40:47 +0530 Subject: [PATCH 6/8] Remove unused FAS login button from login container. --- waartaa/client/app/containers/login/LoginController.jsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/waartaa/client/app/containers/login/LoginController.jsx b/waartaa/client/app/containers/login/LoginController.jsx index 9c7f94d..3c0d4b5 100644 --- a/waartaa/client/app/containers/login/LoginController.jsx +++ b/waartaa/client/app/containers/login/LoginController.jsx @@ -20,11 +20,6 @@ export default class LoginController extends Component { render() { return (
- } - onMouseUp={this.onFASLoginButtonClick} - />
); From 0a54bf54f43fe9b3fb50babfaa4321993c82c5e0 Mon Sep 17 00:00:00 2001 From: Ratnadeep Debnath Date: Sun, 24 Jul 2016 20:41:20 +0530 Subject: [PATCH 7/8] Wire up login with login form. --- .../client/app/containers/forms/LoginForm.jsx | 5 +++++ waartaa/client/app/reducers/authed.jsx | 18 ++++++++++++++++++ waartaa/client/app/reducers/index.jsx | 5 ++++- .../client/app/stores/configureStore.dev.jsx | 11 ----------- 4 files changed, 27 insertions(+), 12 deletions(-) create mode 100644 waartaa/client/app/reducers/authed.jsx diff --git a/waartaa/client/app/containers/forms/LoginForm.jsx b/waartaa/client/app/containers/forms/LoginForm.jsx index 45d50e5..e6485ff 100644 --- a/waartaa/client/app/containers/forms/LoginForm.jsx +++ b/waartaa/client/app/containers/forms/LoginForm.jsx @@ -16,6 +16,11 @@ const style = { const submit = (values, dispatch) => { console.log(values); + dispatch({ + type: 'login', + data: values, + remote: true + }); }; class LoginForm extends Component { diff --git a/waartaa/client/app/reducers/authed.jsx b/waartaa/client/app/reducers/authed.jsx new file mode 100644 index 0000000..033d578 --- /dev/null +++ b/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; diff --git a/waartaa/client/app/reducers/index.jsx b/waartaa/client/app/reducers/index.jsx index fa0ea9f..1794c81 100644 --- a/waartaa/client/app/reducers/index.jsx +++ b/waartaa/client/app/reducers/index.jsx @@ -2,11 +2,14 @@ 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, - form: formReducer + form: formReducer, + authed: authed }); export default rootReducer diff --git a/waartaa/client/app/stores/configureStore.dev.jsx b/waartaa/client/app/stores/configureStore.dev.jsx index 632c12c..e41eeaf 100644 --- a/waartaa/client/app/stores/configureStore.dev.jsx +++ b/waartaa/client/app/stores/configureStore.dev.jsx @@ -44,16 +44,5 @@ export default function configureStore(initialState) { ) ) - sock.onopen = () => { - store.dispatch({ - type: 'login', - data: { - username: 'rtnpro', - password: 'password' - }, - remote: true - }) - } - return store; } From 35dfb0bd46687b483517d3d93f0d5f7cf511326e Mon Sep 17 00:00:00 2001 From: Ratnadeep Debnath Date: Sun, 24 Jul 2016 20:52:36 +0530 Subject: [PATCH 8/8] Add reduced to track socket connection state. --- waartaa/client/app/constants/actionTypes.jsx | 1 + waartaa/client/app/reducers/connection.jsx | 18 ++++++++++++++++++ waartaa/client/app/reducers/index.jsx | 3 ++- .../client/app/stores/configureStore.dev.jsx | 7 +++++++ 4 files changed, 28 insertions(+), 1 deletion(-) create mode 100644 waartaa/client/app/reducers/connection.jsx diff --git a/waartaa/client/app/constants/actionTypes.jsx b/waartaa/client/app/constants/actionTypes.jsx index 3962678..777d3b0 100644 --- a/waartaa/client/app/constants/actionTypes.jsx +++ b/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'; diff --git a/waartaa/client/app/reducers/connection.jsx b/waartaa/client/app/reducers/connection.jsx new file mode 100644 index 0000000..8334b23 --- /dev/null +++ b/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; diff --git a/waartaa/client/app/reducers/index.jsx b/waartaa/client/app/reducers/index.jsx index 1794c81..119c80b 100644 --- a/waartaa/client/app/reducers/index.jsx +++ b/waartaa/client/app/reducers/index.jsx @@ -9,7 +9,8 @@ const rootReducer = combineReducers({ oidc: reduxReducer, routing: routing, form: formReducer, - authed: authed + authed: authed, + connection: connection }); export default rootReducer diff --git a/waartaa/client/app/stores/configureStore.dev.jsx b/waartaa/client/app/stores/configureStore.dev.jsx index e41eeaf..20a3506 100644 --- a/waartaa/client/app/stores/configureStore.dev.jsx +++ b/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); @@ -44,5 +45,11 @@ export default function configureStore(initialState) { ) ) + sock.onopen = () => { + store.dispatch({ + type: types.CONNECTED + }); + } + return store; }