|
|
@ -4,92 +4,94 @@ import { connect } from 'react-redux'; |
|
|
|
import { push } from 'react-router-redux'; |
|
|
|
import { Form, Button, Toast } from '@douyinfe/semi-ui'; |
|
|
|
import { login, LOGIN_SUCCESS } from '../actions/auth'; |
|
|
|
import { IconLock,IconUser } from '@douyinfe/semi-icons'; |
|
|
|
import { IconLock, IconUser } from '@douyinfe/semi-icons'; |
|
|
|
import '../style.less' |
|
|
|
|
|
|
|
const Login = props => { |
|
|
|
const { dispatch, user, error, actions, apiRoot, isRequesting } = props |
|
|
|
const form = useRef(); |
|
|
|
const { dispatch, user, error, actions, apiRoot, isRequesting } = props |
|
|
|
const form = useRef(); |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
if (error) { |
|
|
|
Toast.error(error); |
|
|
|
form.current.setValue('password', '') |
|
|
|
} |
|
|
|
}, [error]) |
|
|
|
useEffect(() => { |
|
|
|
if (error) { |
|
|
|
Toast.error(error); |
|
|
|
form.current.setValue('password', '') |
|
|
|
} |
|
|
|
}, [error]) |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
if (user && user.authorized) { |
|
|
|
dispatch(push('/equipmentWarehouse/nvr')); |
|
|
|
} |
|
|
|
}, [user]) |
|
|
|
useEffect(() => { |
|
|
|
if (user && user.authorized) { |
|
|
|
dispatch(push('/equipmentWarehouse/nvr')); |
|
|
|
localStorage.setItem('vcmp_selected_sider', JSON.stringify(['nvr'])) |
|
|
|
localStorage.setItem('vcmp_open_sider', JSON.stringify(['equipmentWarehouse'])) |
|
|
|
} |
|
|
|
}, [user]) |
|
|
|
|
|
|
|
return ( |
|
|
|
<div style={{ |
|
|
|
height: '100vh', |
|
|
|
backgroundImage:"url('/assets/images/background/loginBackground.png')", |
|
|
|
backgroundSize: 'cover', |
|
|
|
return ( |
|
|
|
<div style={{ |
|
|
|
height: '100vh', |
|
|
|
backgroundImage: "url('/assets/images/background/loginBackground.png')", |
|
|
|
backgroundSize: 'cover', |
|
|
|
backgroundRepeat: 'no-repeat', |
|
|
|
position: 'relative', |
|
|
|
}}> |
|
|
|
<div style={{ |
|
|
|
width: 446, |
|
|
|
height: 348, |
|
|
|
padding: '45px 60px', |
|
|
|
backgroundImage: "url('/assets/images/background/loginbg.png')", |
|
|
|
backgroundSize: '100% 100%', |
|
|
|
backgroundRepeat: 'no-repeat', |
|
|
|
position: 'relative', |
|
|
|
}}> |
|
|
|
<div style={{ |
|
|
|
width: 446, |
|
|
|
height: 348, |
|
|
|
padding: '45px 60px', |
|
|
|
backgroundImage:"url('/assets/images/background/loginbg.png')", |
|
|
|
backgroundSize: '100% 100%', |
|
|
|
backgroundRepeat: 'no-repeat', |
|
|
|
position: 'absolute', |
|
|
|
top: '33.89%', |
|
|
|
right: '16.43%', |
|
|
|
}}> |
|
|
|
<div style={{width:113,height:24,marginTop:3,marginLeft:5}}> |
|
|
|
<img src="/assets/images/background/user_login.png" alt="" style={{width:'100%',height:'100%'}}/> |
|
|
|
</div> |
|
|
|
<Form |
|
|
|
onSubmit={values => { |
|
|
|
dispatch(login(values.username, values.password)).then(res => { |
|
|
|
const data = res.payload.user |
|
|
|
dispatch(actions.layout.initWebSocket({ ioUrl: apiRoot, token: data.token })) |
|
|
|
}) |
|
|
|
}} |
|
|
|
getFormApi={formApi => form.current = formApi} |
|
|
|
> |
|
|
|
<Form.Input |
|
|
|
className='inputbgc' |
|
|
|
field='username' |
|
|
|
noLabel={true} |
|
|
|
label='用户名' |
|
|
|
placeholder='请输入账号' |
|
|
|
prefix={<IconUser style={{color:'#1859C1',marginRight:14,marginLeft:8}}/>} |
|
|
|
style={{background:'rgba(24, 89, 193, 0.08)',height:40,marginTop:26}} |
|
|
|
/> |
|
|
|
<Form.Input |
|
|
|
field='password' |
|
|
|
noLabel={true} |
|
|
|
mode="password" |
|
|
|
autoComplete="" |
|
|
|
placeholder='请输入密码' |
|
|
|
label='密码' |
|
|
|
prefix={<IconLock style={{color:'#1859C1',marginRight:14,marginLeft:8}}/>} |
|
|
|
style={{background:'rgba(24, 89, 193, 0.08)',height:40}} |
|
|
|
/> |
|
|
|
<Button htmlType='submit' block theme="solid" style={{marginTop:17,height:40,backgroundColor:'#1859C1'}}>立即登录</Button> |
|
|
|
</Form> |
|
|
|
position: 'absolute', |
|
|
|
top: '33.89%', |
|
|
|
right: '16.43%', |
|
|
|
}}> |
|
|
|
<div style={{ width: 113, height: 24, marginTop: 3, marginLeft: 5 }}> |
|
|
|
<img src="/assets/images/background/user_login.png" alt="" style={{ width: '100%', height: '100%' }} /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
); |
|
|
|
<Form |
|
|
|
onSubmit={values => { |
|
|
|
dispatch(login(values.username, values.password)).then(res => { |
|
|
|
const data = res.payload.user |
|
|
|
dispatch(actions.layout.initWebSocket({ ioUrl: apiRoot, token: data.token })) |
|
|
|
}) |
|
|
|
}} |
|
|
|
getFormApi={formApi => form.current = formApi} |
|
|
|
> |
|
|
|
<Form.Input |
|
|
|
className='inputbgc' |
|
|
|
field='username' |
|
|
|
noLabel={true} |
|
|
|
label='用户名' |
|
|
|
placeholder='请输入账号' |
|
|
|
prefix={<IconUser style={{ color: '#1859C1', marginRight: 14, marginLeft: 8 }} />} |
|
|
|
style={{ background: 'rgba(24, 89, 193, 0.08)', height: 40, marginTop: 26 }} |
|
|
|
/> |
|
|
|
<Form.Input |
|
|
|
field='password' |
|
|
|
noLabel={true} |
|
|
|
mode="password" |
|
|
|
autoComplete="" |
|
|
|
placeholder='请输入密码' |
|
|
|
label='密码' |
|
|
|
prefix={<IconLock style={{ color: '#1859C1', marginRight: 14, marginLeft: 8 }} />} |
|
|
|
style={{ background: 'rgba(24, 89, 193, 0.08)', height: 40 }} |
|
|
|
/> |
|
|
|
<Button htmlType='submit' block theme="solid" style={{ marginTop: 17, height: 40, backgroundColor: '#1859C1' }}>立即登录</Button> |
|
|
|
</Form> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
); |
|
|
|
} |
|
|
|
|
|
|
|
function mapStateToProps (state) { |
|
|
|
const { auth, global } = state; |
|
|
|
return { |
|
|
|
user: auth.user, |
|
|
|
error: auth.error, |
|
|
|
actions: global.actions, |
|
|
|
apiRoot: global.apiRoot, |
|
|
|
isRequesting: auth.isRequesting |
|
|
|
} |
|
|
|
const { auth, global } = state; |
|
|
|
return { |
|
|
|
user: auth.user, |
|
|
|
error: auth.error, |
|
|
|
actions: global.actions, |
|
|
|
apiRoot: global.apiRoot, |
|
|
|
isRequesting: auth.isRequesting |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
export default connect(mapStateToProps)(Login); |