Skip to content

Commit 00916ae

Browse files
backgroundColorbackgroundColor
committed
login
1 parent 409eefa commit 00916ae

File tree

10 files changed

+214
-20
lines changed

10 files changed

+214
-20
lines changed

‎src/components/AddUser/AddUser.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,11 @@ class AddUser extends React.Component {
5959
if (json.code === 0) {
6060
console.info('success!!')
6161
this.showErr('success', '注册成功！！')
62+
} else {
63+
notification['success']({
64+
message: '失败',
65+
description: '登陆失败！！'
66+
})
6267
}
6368
})
6469
.catch((err) => {

‎src/components/Login/Login.css

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
.login {
2+
height: 100%;
3+
background-color: #c0c0c0;
4+
.container {
5+
left: 50%;
6+
position: fixed;
7+
top: 50%;
8+
transform: translate(-50%, -50%);
9+
.login {
10+
width: 400px;
11+
h2 {
12+
background: #5a5a5a;
13+
border-radius: 20px 20px 0 0;
14+
color: #fff;
15+
font-size: 28px;
16+
padding: 20px 26px;
17+
}
18+
.field {
19+
background: #fff;
20+
border-radius: 0 0 20px 20px;
21+
padding: 20px 26px;
22+
}
23+
}
24+
}
25+
.form {
26+
height: 300px;
27+
width: 600px;
28+
padding: 10px;
29+
background-color: #e3e3e3;
30+
border-radius: 5px;
31+
box-shadow: 0px 0px 10px #999;
32+
position: absolute;;
33+
left: 50%;
34+
top: 50%;
35+
margin-left: -300px;
36+
margin-top: -150px;
37+
z-index: 10;
38+
/*display: inline-block;*/
39+
}
40+
}

‎src/components/Login/Login.js

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
import React from 'react'
2+
import styles from './Login.css'
3+
import { Form, Icon, Input, Button, notification } from 'antd'
4+
const FormItem = Form.Item
5+
type Props = {
6+
form: Object
7+
}
8+
class Login extends React.Component {
9+
props: Props
10+
constructor (props) {
11+
super(props)
12+
this.handleSubmit = this.handleSubmit.bind(this)
13+
this.loginFunc = this.loginFunc.bind(this)
14+
}
15+
handleSubmit (e) {
16+
e.preventDefault()
17+
this.props.form.validateFields((err, values) => {
18+
if (!err) {
19+
console.log('Received values of form: ', values)
20+
this.loginFunc(values)
21+
}
22+
})
23+
}
24+
25+
loginFunc (value) {
26+
fetch(`${__TASK_URL__}login`, {
27+
method: 'POST',
28+
header: {
29+
'Accept': 'application/json',
30+
'Content-Type': 'application/json'
31+
},
32+
body: value
33+
})
34+
.then((res) => res.status === 200 && res.json())
35+
.then((json) => {
36+
if (json.code === 0) {
37+
console.info('success!!')
38+
notification['success']({
39+
message: '成功',
40+
description: '登陆成功！！'
41+
})
42+
} else {
43+
notification['error']({
44+
message: '失败',
45+
description: '登陆失败！！'
46+
})
47+
}
48+
})
49+
.catch((err) => {
50+
console.error(err)
51+
notification['error']({
52+
message: '错误',
53+
description: err
54+
})
55+
})
56+
}
57+
render () {
58+
const { getFieldDecorator } = this.props.form
59+
return (
60+
<div className={styles['login']}>
61+
<div className={styles['container']}>
62+
<div className={styles['login']}>
63+
<h2><i className='fa fa-lock' aria-hidden='true'>&nbsp;&nbsp;XXX</i></h2>
64+
<div className={styles['field']}>
65+
<Form onSubmit={this.handleSubmit} className='login-form'>
66+
<FormItem>
67+
{getFieldDecorator('name', {
68+
rules: [{ required: true, message: '请输入用户名' }]
69+
})(
70+
<Input addonBefore={<Icon type='user' />} placeholder='用户名' />
71+
)}
72+
</FormItem>
73+
<FormItem>
74+
{getFieldDecorator('pass', {
75+
rules: [{ required: true, message: '请输入密码!' }]
76+
})(
77+
<Input addonBefore={<Icon type='lock' />} type='password' placeholder='密码' />
78+
)}
79+
</FormItem>
80+
<FormItem>
81+
<Button type='primary' htmlType='submit' style={{ width: '100%' }}>
82+
登陆
83+
</Button>
84+
</FormItem>
85+
</Form>
86+
</div>
87+
</div>
88+
</div>
89+
</div>
90+
)
91+
}
92+
}
93+
export default Form.create()(Login)

‎src/components/Login/index.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import Login from './Login'
2+
3+
export default Login

‎src/components/ModifyUser/ModifyUser.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -237,6 +237,7 @@ class ModifyUser extends React.Component {
237237
if (!err) {
238238
// console.log('Received values of form: ', values)
239239
let userMess = {
240+
'id' : this.state.userMess.id,
240241
'name': values.name,
241242
'pass': values.pass,
242243
'level': values.level,

‎src/layouts/CoreLayout/CoreLayout.js

Lines changed: 43 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -14,28 +14,53 @@ import styles from './CoreLayout.css'
1414
import '../../styles/core.css'
1515
import HeaderBar from 'components/HeaderBar'
1616

17-
function hideNavbar (location) {
18-
return location.query['hide-navbar'] === 'true'
19-
}
17+
class CoreLayout extends React.Component {
2018

21-
export const CoreLayout = ({ children, location }: { children: HTMLElement, location: Object }) => (
22-
<div className={styles['core-layout']}>
23-
<div className={styles['header']}>
24-
<HeaderBar />
25-
</div>
26-
<div className={styles['content']}>
27-
<div className={styles['side-nav']}>
28-
<LeftPanel />
29-
</div>
30-
<div className={styles['viewport']}>
31-
{children}
19+
render () {
20+
const { children, location } = this.props
21+
console.info(this.props)
22+
return (
23+
<div className={styles['core-layout']}>
24+
{
25+
location.pathname === '/login'
26+
? <div style={{ height: '100%' }}>{children}</div>
27+
: <div style={{ height: '100%' }}>
28+
<div className={styles['header']}>
29+
<HeaderBar />
30+
</div>
31+
<div className={styles['content']}>
32+
<div className={styles['side-nav']}>
33+
<LeftPanel />
34+
</div>
35+
<div className={styles['viewport']}>
36+
{children}
37+
</div>
38+
</div>
39+
</div>
40+
}
3241
</div>
33-
</div>
34-
</div>
35-
)
42+
)
43+
}
44+
}
45+
// export const CoreLayout = ({ children, location }: { children: HTMLElement, location: Object }) => (
46+
// <div className={styles['core-layout']}>
47+
// <div className={styles['header']}>
48+
// <HeaderBar />
49+
// </div>
50+
// <div className={styles['content']}>
51+
// <div className={styles['side-nav']}>
52+
// <LeftPanel />
53+
// </div>
54+
// <div className={styles['viewport']}>
55+
// {children}
56+
// </div>
57+
// </div>
58+
// </div>
59+
// )
3660

3761
CoreLayout.propTypes = {
38-
children : React.PropTypes.element.isRequired
62+
children : React.PropTypes.element.isRequired,
63+
location: React.PropTypes.object.isRequired
3964
}
4065

4166
export default CoreLayout

‎src/routes/AddUser/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,6 @@ export default (store: Store<*, *>) => ({
1212
cb(null, AddUser)
1313

1414
/* Webpack named bundle */
15-
}, 'adduser')
15+
}, 'adduser')
1616
}
1717
})

‎src/routes/Login/components/LoginView.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import React from 'react'
2+
import Login from 'components/Login'
3+
export default class LoginView extends React.Component {
4+
5+
render () {
6+
return (
7+
<div style={{ height: '100%' }}>
8+
<Login />
9+
</div>
10+
)
11+
}
12+
}

‎src/routes/Login/index.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
export default (store: Store<*, *>) => ({
2+
path : 'login',
3+
/* Async getComponent is only invoked when route matches */
4+
getComponent (nextState: Object, cb: () => void) {
5+
require.ensure([], (require) => {
6+
const LoginView = require('./components/LoginView.js').default
7+
8+
cb(null, LoginView)
9+
10+
/* Webpack named bundle */
11+
}, 'login')
12+
}
13+
})

‎src/routes/index.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import ModifyUserRoute from './ModifyUser'
1010
import WarnRoute from './Warn'
1111
import RunTimeRoute from './RunTime'
1212
import HistroyRoute from './Histroy'
13+
import LoginViewRoute from './Login'
1314
/* Note: Instead of using JSX, we recommend using react-router
1415
PlainRoute objects to build route definitions. */
1516

@@ -25,7 +26,8 @@ export const createRoutes = (store: Store<*, *>) => ({
2526
ModifyUserRoute(store),
2627
WarnRoute(store),
2728
RunTimeRoute(store),
28-
HistroyRoute(store)
29+
HistroyRoute(store),
30+
LoginViewRoute(store)
2931
]
3032
})
3133

0 commit comments

Comments
 (0)