diff --git a/webui/pages/index.js b/webui/pages/index.js
index a2a574a58..695aa33d2 100644
--- a/webui/pages/index.js
+++ b/webui/pages/index.js
@@ -3,12 +3,13 @@ import withRedux from 'next-redux-wrapper';
import { initStore } from '../src/store.js';
import withSession from '../src/lib/with-session';
-import Login from '../src/components/Login';
+
+import Auth from '../src/containers/Auth';
import App from '../src/containers/App';
const Restricted = (Component) => {
const checkAuth = (props) => {
- return props.isLoggedIn ? :
+ return props.isLoggedIn ? :
}
return withSession(checkAuth);
diff --git a/webui/src/actions/auth.js b/webui/src/actions/auth.js
index b8ac4a12e..da79658d7 100644
--- a/webui/src/actions/auth.js
+++ b/webui/src/actions/auth.js
@@ -7,4 +7,7 @@ export const AUTH = {
LOGOUT: 'auth/LOGOUT'
}
-export const loginRequest = createAction(AUTH.LOGIN_REQUEST); // { username, password }
\ No newline at end of file
+export const loginRequest = createAction(AUTH.LOGIN_REQUEST); // { username, password }
+export const loginSuccess = createAction(AUTH.LOGIN_SUCCESS);
+export const loginFailure = createAction(AUTH.LOGIN_FAILURE);
+export const logout = createAction(AUTH.LOGOUT);
\ No newline at end of file
diff --git a/webui/src/components/Login.js b/webui/src/components/Login.js
index c13cddeb3..176692b03 100644
--- a/webui/src/components/Login.js
+++ b/webui/src/components/Login.js
@@ -1,16 +1,10 @@
-import Session from '../lib/session';
-
import { Component } from 'react';
-import Link from 'next/link';
import Head from 'next/head';
-import Router from 'next/router';
import PropTypes from 'prop-types';
-import NProgress from 'nprogress';
-
import styled from 'styled-components';
import oc from 'open-color';
-import { media, transitions} from '../lib/style-utils';
+import { media } from '../lib/style-utils';
import ThumbnailIcon from './Thumbnail';
import CloseIcon from 'react-icons/lib/md/close';
@@ -161,147 +155,66 @@ Button.propTypes = {
onClick: PropTypes.func
};
-class Login extends Component {
- state = {
- error: {
- status: false,
- message: ''
- },
- account: {
- username: '',
- password: ''
- },
- session: {}
- };
+const Login = ({
+ width,
+ form,
+ error,
+ innerRef,
+ onChange,
+ onSubmit,
+ onKeyPress,
+ onErrorReset
+}) => (
+
+
+
NextEPC - Login
+
+
+
+
+
+
+
+
+
+);
- static propTypes = {
- width: PropTypes.string
- }
+Login.propTypes = {
+ width: PropTypes.string
+}
- static defaultProps = {
- width: '360px'
- }
-
- static async getInitialProps({req}) {
- const session = new Session({req})
- return {session: await session.getSession(true)}
- }
-
- async componentDidMount() {
- const session = new Session()
- this.setState({
- session: await session.getSession(true)
- });
-
- this.input.focus();
- }
-
- onAction = (e) => {
- const {
- username,
- password
- } = this.state.account;
-
- NProgress.configure({ showSpinner: false });
- NProgress.start();
-
- const session = new Session()
- session.signin(username, password)
- .then(() => {
- NProgress.done();
-
- Router.push('/');
- })
- .catch(err => {
- NProgress.done();
-
- this.input.focus();
-
- this.setState({
- error: {
- status: true,
- message: err.message
- }
- });
- })
- }
-
- handleChange = (e) => {
- this.setState({
- account: {
- ...this.state.account,
- [e.target.name]: e.target.value
- }
- });
- }
-
- handleErrorClose = (e) => {
- this.setState({
- error: {
- status: false
- }
- });
- }
-
- render() {
- const {
- handleChange,
- onAction,
- handleErrorClose
- } = this;
-
- const {
- username,
- password
- } = this.state.account;
-
- const err = this.state.error;
-
- const {width} = this.props;
-
- return (
-
-
-
NextEPC - Login
-
-
-
-
-
-
-
-
-
- );
- }
+Login.defaultProps = {
+ width: '360px'
}
export default Login;
diff --git a/webui/src/containers/App.js b/webui/src/containers/App.js
index 0217f7f71..0d0a8c78f 100644
--- a/webui/src/containers/App.js
+++ b/webui/src/containers/App.js
@@ -1,11 +1,10 @@
import { Component } from 'react';
import PropTypes from 'prop-types';
-
import { connect } from 'react-redux';
import { bindActionCreators, compose } from 'redux';
-import withWidth, { SMALL } from '../lib/with-width';
import * as uiActions from '../actions/ui';
+import withWidth, { SMALL } from '../lib/with-width';
import Layout from '../components/Layout';
import PdnContainer from '../containers/PdnContainer';
diff --git a/webui/src/containers/Auth.js b/webui/src/containers/Auth.js
new file mode 100644
index 000000000..019f41886
--- /dev/null
+++ b/webui/src/containers/Auth.js
@@ -0,0 +1,128 @@
+import { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import Router from 'next/router';
+import NProgress from 'nprogress';
+
+import Session from '../lib/session';
+
+import * as authActions from '../actions/auth';
+import * as uiActions from '../actions/ui';
+
+import Login from '../components/Login';
+
+class Auth extends Component {
+ state = {
+ error: null,
+ form: {
+ username: '',
+ password: ''
+ },
+ session: {}
+ };
+
+ static async getInitialProps({req}) {
+ const session = new Session({req})
+ return {session: await session.getSession(true)}
+ }
+
+ async componentDidMount() {
+ const session = new Session()
+ this.setState({
+ session: await session.getSession(true)
+ });
+
+ this.input.focus();
+ }
+
+ setInnerRef = (comp) => {
+ this.input = comp;
+ }
+
+ handleChange = (e) => {
+ this.setState({
+ form: {
+ ...this.state.form,
+ [e.target.name]: e.target.value
+ }
+ });
+ }
+
+ handleKeyPress = (e) => {
+ if (e.charCode === 13) {
+ this.handleSubmit();
+ }
+ }
+
+ handleSubmit = (e) => {
+ const {
+ username,
+ password
+ } = this.state.form;
+
+ NProgress.configure({ showSpinner: false });
+ NProgress.start();
+
+ const session = new Session()
+ session.signin(username, password)
+ .then(() => {
+ NProgress.done();
+
+ Router.push('/');
+ })
+ .catch(err => {
+ NProgress.done();
+
+ this.setState({
+ error: {
+ message: err.message
+ }
+ });
+
+ this.input.focus();
+ })
+ }
+
+ handleErrorReset = (e) => {
+ this.setState({
+ error: null
+ });
+ }
+
+ render() {
+ const {
+ form,
+ error
+ } = this.state;
+
+ const {
+ setInnerRef,
+ handleChange,
+ handleSubmit,
+ handleKeyPress,
+ handleErrorReset
+ } = this;
+
+ return (
+
+ );
+ }
+}
+
+Auth = connect(
+ null,
+ (dispatch) => ({
+ UIActions: bindActionCreators(uiActions, dispatch)
+ })
+)(Auth);
+
+export default Auth;
\ No newline at end of file
diff --git a/webui/src/containers/HeaderContainer.js b/webui/src/containers/HeaderContainer.js
index b4d518d7d..7aa50ce69 100644
--- a/webui/src/containers/HeaderContainer.js
+++ b/webui/src/containers/HeaderContainer.js
@@ -83,9 +83,11 @@ class HeaderContainer extends Component {
}
}
-export default connect(
+HeaderContainer = connect(
null,
(dispatch) => ({
UIActions: bindActionCreators(uiActions, dispatch)
})
-)(HeaderContainer);
\ No newline at end of file
+)(HeaderContainer);
+
+export default HeaderContainer;
\ No newline at end of file
diff --git a/webui/src/reducers/auth.js b/webui/src/reducers/auth.js
index a446a9b5e..60b76f5a0 100644
--- a/webui/src/reducers/auth.js
+++ b/webui/src/reducers/auth.js
@@ -2,13 +2,21 @@ import { handleActions } from 'redux-actions';
import { AUTH } from '../actions/auth';
const initialState = {
- username: '',
- password: ''
+ isLoggedIn: false,
+ session : {
+ username : '',
+ role: ''
+ }
}
export default handleActions({
- [AUTH.LOGIN_REQUEST]: (state, action) => ({
- username: action.payload.username,
- password: action.payload.password
- })
+ [AUTH.LOGIN_SUCCESS]: (state, action) => ({
+ ...state,
+ isLoggedIn: true,
+ session : {
+ ...state.session,
+ username: action.payload.username,
+ role: action.payload.role
+ }
+ }),
}, initialState);
\ No newline at end of file