sysmocom
/
open5gs
forked from acouzens/open5gs
11
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update it

This commit is contained in:
Sukchan Lee 2017-06-09 12:26:33 +09:00
parent ec2609eafb
commit ab1ac3a95c
7 changed files with 213 additions and 159 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
webui/pages/index.js
View File

@ -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 ? <Component {...props} /> : <Login/>
return props.isLoggedIn ? <Component {...props} /> : <Auth/>
}
return withSession(checkAuth);

5
webui/src/actions/auth.js
View File

@ -7,4 +7,7 @@ export const AUTH = {
LOGOUT: 'auth/LOGOUT'
}
export const loginRequest = createAction(AUTH.LOGIN_REQUEST); // { username, password }
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);

205
webui/src/components/Login.js
View File

@ -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
}) => (
<div>
<Head>
<title>NextEPC - Login</title>
</Head>
<Wrapper width={width}>
<ErrorBar
visible={error !== null}
message={error && error.message}
onClick={onErrorReset} />
<Thumbnail>
<ThumbnailIcon size='8rem' color={oc['blue'][6]} />
</Thumbnail>
<Form>
<InputWrapper>
<Title>Username</Title>
<Input
name="username"
type="text"
placeholder=""
value={form.username}
onChange={onChange}
onKeyPress={onKeyPress}
innerRef={(comp) => {innerRef(comp)}}
/>
</InputWrapper>
<InputWrapper>
<Title>Password</Title>
<Input
name="password"
type="password"
placeholder=""
value={form.password}
onChange={onChange}
onKeyPress={onKeyPress}
/>
</InputWrapper>
<Button color='teal' onClick={onSubmit}>
Login
</Button>
</Form>
</Wrapper>
</div>
);
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 (
<div>
<Head>
<title>NextEPC - Login</title>
</Head>
<Wrapper width={width}>
<ErrorBar
visible={err.status}
message={err.message}
onClick={handleErrorClose} />
<Thumbnail>
<ThumbnailIcon size='8rem' color={oc['blue'][6]} />
</Thumbnail>
<Form>
<InputWrapper>
<Title>Username</Title>
<Input
name="username"
type="text"
placeholder=""
value={username}
onChange={handleChange}
innerRef={(comp) => { this.input = comp }}
/>
</InputWrapper>
<InputWrapper>
<Title>Password</Title>
<Input
name="password"
type="password"
placeholder=""
value={password}
onChange={handleChange}
/>
</InputWrapper>
<Button color='teal' onClick={onAction}>
Log in
</Button>
</Form>
</Wrapper>
</div>
);
}
Login.defaultProps = {
width: '360px'
}
export default Login;

3
webui/src/containers/App.js
View File

@ -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';

128
webui/src/containers/Auth.js Normal file
View File

@ -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 (
<Login
form={form}
error={error}
innerRef={setInnerRef}
onChange={handleChange}
onSubmit={handleSubmit}
onKeyPress={handleKeyPress}
onErrorReset={handleErrorReset}
/>
);
}
}
Auth = connect(
null,
(dispatch) => ({
UIActions: bindActionCreators(uiActions, dispatch)
})
)(Auth);
export default Auth;

6
webui/src/containers/HeaderContainer.js
View File

@ -83,9 +83,11 @@ class HeaderContainer extends Component {
}
}
export default connect(
HeaderContainer = connect(
null,
(dispatch) => ({
UIActions: bindActionCreators(uiActions, dispatch)
})
)(HeaderContainer);
)(HeaderContainer);
export default HeaderContainer;

20
webui/src/reducers/auth.js
View File

@ -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);