forked from acouzens/open5gs
update it
This commit is contained in:
Sukchan Lee
parent
ec2609eafb
commit
ab1ac3a95c
|
|
@ -3,12 +3,13 @@ import withRedux from 'next-redux-wrapper';
|
||||||
|
|
||||||
import { initStore } from '../src/store.js';
|
import { initStore } from '../src/store.js';
|
||||||
import withSession from '../src/lib/with-session';
|
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';
|
import App from '../src/containers/App';
|
||||||
|
|
||||||
const Restricted = (Component) => {
|
const Restricted = (Component) => {
|
||||||
const checkAuth = (props) => {
|
const checkAuth = (props) => {
|
||||||
return props.isLoggedIn ? <Component {...props} /> : <Login/>
|
return props.isLoggedIn ? <Component {...props} /> : <Auth/>
|
||||||
}
|
}
|
||||||
|
|
||||||
return withSession(checkAuth);
|
return withSession(checkAuth);
|
||||||
|
|
|
||||||
|
|
@ -7,4 +7,7 @@ export const AUTH = {
|
||||||
LOGOUT: 'auth/LOGOUT'
|
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);
|
||||||
|
|
@ -1,16 +1,10 @@
|
||||||
import Session from '../lib/session';
|
|
||||||
|
|
||||||
import { Component } from 'react';
|
import { Component } from 'react';
|
||||||
import Link from 'next/link';
|
|
||||||
import Head from 'next/head';
|
import Head from 'next/head';
|
||||||
import Router from 'next/router';
|
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
|
|
||||||
import NProgress from 'nprogress';
|
|
||||||
|
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import oc from 'open-color';
|
import oc from 'open-color';
|
||||||
import { media, transitions} from '../lib/style-utils';
|
import { media } from '../lib/style-utils';
|
||||||
|
|
||||||
import ThumbnailIcon from './Thumbnail';
|
import ThumbnailIcon from './Thumbnail';
|
||||||
import CloseIcon from 'react-icons/lib/md/close';
|
import CloseIcon from 'react-icons/lib/md/close';
|
||||||
|
|
@ -161,147 +155,66 @@ Button.propTypes = {
|
||||||
onClick: PropTypes.func
|
onClick: PropTypes.func
|
||||||
};
|
};
|
||||||
|
|
||||||
class Login extends Component {
|
const Login = ({
|
||||||
state = {
|
width,
|
||||||
error: {
|
form,
|
||||||
status: false,
|
error,
|
||||||
message: ''
|
innerRef,
|
||||||
},
|
onChange,
|
||||||
account: {
|
onSubmit,
|
||||||
username: '',
|
onKeyPress,
|
||||||
password: ''
|
onErrorReset
|
||||||
},
|
}) => (
|
||||||
session: {}
|
<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 = {
|
Login.propTypes = {
|
||||||
width: PropTypes.string
|
width: PropTypes.string
|
||||||
}
|
}
|
||||||
|
|
||||||
static defaultProps = {
|
Login.defaultProps = {
|
||||||
width: '360px'
|
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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Login;
|
export default Login;
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,10 @@
|
||||||
import { Component } from 'react';
|
import { Component } from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
|
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
import { bindActionCreators, compose } from 'redux';
|
import { bindActionCreators, compose } from 'redux';
|
||||||
|
|
||||||
import withWidth, { SMALL } from '../lib/with-width';
|
|
||||||
import * as uiActions from '../actions/ui';
|
import * as uiActions from '../actions/ui';
|
||||||
|
import withWidth, { SMALL } from '../lib/with-width';
|
||||||
|
|
||||||
import Layout from '../components/Layout';
|
import Layout from '../components/Layout';
|
||||||
import PdnContainer from '../containers/PdnContainer';
|
import PdnContainer from '../containers/PdnContainer';
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -83,9 +83,11 @@ class HeaderContainer extends Component {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default connect(
|
HeaderContainer = connect(
|
||||||
null,
|
null,
|
||||||
(dispatch) => ({
|
(dispatch) => ({
|
||||||
UIActions: bindActionCreators(uiActions, dispatch)
|
UIActions: bindActionCreators(uiActions, dispatch)
|
||||||
})
|
})
|
||||||
)(HeaderContainer);
|
)(HeaderContainer);
|
||||||
|
|
||||||
|
export default HeaderContainer;
|
||||||
|
|
@ -2,13 +2,21 @@ import { handleActions } from 'redux-actions';
|
||||||
import { AUTH } from '../actions/auth';
|
import { AUTH } from '../actions/auth';
|
||||||
|
|
||||||
const initialState = {
|
const initialState = {
|
||||||
username: '',
|
isLoggedIn: false,
|
||||||
password: ''
|
session : {
|
||||||
|
username : '',
|
||||||
|
role: ''
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default handleActions({
|
export default handleActions({
|
||||||
[AUTH.LOGIN_REQUEST]: (state, action) => ({
|
[AUTH.LOGIN_SUCCESS]: (state, action) => ({
|
||||||
username: action.payload.username,
|
...state,
|
||||||
password: action.payload.password
|
isLoggedIn: true,
|
||||||
})
|
session : {
|
||||||
|
...state.session,
|
||||||
|
username: action.payload.username,
|
||||||
|
role: action.payload.role
|
||||||
|
}
|
||||||
|
}),
|
||||||
}, initialState);
|
}, initialState);
|
||||||
Loading…
Reference in New Issue