mirror of https://github.com/openspug/spug
ant migrate v4
vapao
parent
3e274f4992
commit
cbbcbb71fe
|
|
@ -3,9 +3,9 @@
|
|||
* Copyright (c) <spug.dev@gmail.com>
|
||||
* Released under the AGPL-3.0 License.
|
||||
*/
|
||||
import React from 'react';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Form, Input, Button, Tabs, Modal } from 'antd';
|
||||
import { UserOutlined, LockOutlined } from '@ant-design/icons';
|
||||
import { UserOutlined, LockOutlined, CopyrightOutlined, GithubOutlined } from '@ant-design/icons';
|
||||
import styles from './login.module.css';
|
||||
import history from 'libs/history';
|
||||
import { http, updatePermissions } from 'libs';
|
||||
|
|
@ -16,52 +16,45 @@ import requestStore from 'pages/deploy/request/store';
|
|||
import execStore from 'pages/exec/task/store';
|
||||
import hostStore from 'pages/host/store';
|
||||
|
||||
class LoginIndex extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
loading: false,
|
||||
loginType: 'default'
|
||||
}
|
||||
}
|
||||
export default function () {
|
||||
const [form] = Form.useForm();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [loginType, setLoginType] = useState('default');
|
||||
|
||||
componentDidMount() {
|
||||
useEffect(() => {
|
||||
envStore.records = [];
|
||||
appStore.records = [];
|
||||
requestStore.records = [];
|
||||
requestStore.deploys = [];
|
||||
hostStore.records = [];
|
||||
execStore.hosts = [];
|
||||
}, [])
|
||||
|
||||
function handleSubmit() {
|
||||
setLoading(true);
|
||||
const formData = form.getFieldsValue();
|
||||
formData['type'] = loginType;
|
||||
http.post('/api/account/login/', formData)
|
||||
.then(data => {
|
||||
if (!data['has_real_ip']) {
|
||||
Modal.warning({
|
||||
title: '安全警告',
|
||||
className: styles.tips,
|
||||
content: <div>
|
||||
未能获取到访问者的真实IP，无法提供基于请求来源IP的合法性验证，详细信息请参考
|
||||
<a target="_blank"
|
||||
href="https://spug.dev/docs/practice/#%E5%AE%89%E5%85%A8%E6%80%A7%E5%AE%9E%E8%B7%B5%E6%8C%87%E5%8D%97"
|
||||
rel="noopener noreferrer">官方文档</a>。
|
||||
</div>,
|
||||
onOk: () => doLogin(data)
|
||||
})
|
||||
} else {
|
||||
doLogin(data)
|
||||
}
|
||||
}, () => setLoading(false))
|
||||
}
|
||||
|
||||
handleSubmit = () => {
|
||||
this.props.form.validateFields((err, formData) => {
|
||||
if (!err) {
|
||||
this.setState({loading: true});
|
||||
formData['type'] = this.state.loginType;
|
||||
http.post('/api/account/login/', formData)
|
||||
.then(data => {
|
||||
if (!data['has_real_ip']) {
|
||||
Modal.warning({
|
||||
title: '安全警告',
|
||||
className: styles.tips,
|
||||
content: <div>
|
||||
未能获取到访问者的真实IP，无法提供基于请求来源IP的合法性验证，详细信息请参考
|
||||
<a target="_blank"
|
||||
href="https://spug.dev/docs/practice/#%E5%AE%89%E5%85%A8%E6%80%A7%E5%AE%9E%E8%B7%B5%E6%8C%87%E5%8D%97"
|
||||
rel="noopener noreferrer">官方文档</a>。
|
||||
</div>,
|
||||
onOk: () => this.doLogin(data)
|
||||
})
|
||||
} else {
|
||||
this.doLogin(data)
|
||||
}
|
||||
}, () => this.setState({loading: false}))
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
doLogin = (data) => {
|
||||
function doLogin(data) {
|
||||
localStorage.setItem('token', data['access_token']);
|
||||
localStorage.setItem('nickname', data['nickname']);
|
||||
localStorage.setItem('is_supper', data['is_supper']);
|
||||
|
|
@ -73,67 +66,58 @@ class LoginIndex extends React.Component {
|
|||
} else {
|
||||
history.push('/welcome/index')
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const {getFieldDecorator} = this.props.form;
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<div className={styles.titleContainer}>
|
||||
<div><img className={styles.logo} src={logo} alt="logo"/></div>
|
||||
<div className={styles.desc}>灵活、强大、功能全面的开源运维平台</div>
|
||||
</div>
|
||||
<div className={styles.formContainer}>
|
||||
<Tabs className={styles.tabs} onTabClick={e => this.setState({loginType: e})}>
|
||||
<Tabs.TabPane tab="普通登录" key="default"/>
|
||||
<Tabs.TabPane tab="LDAP登录" key="ldap"/>
|
||||
</Tabs>
|
||||
<Form>
|
||||
<Form.Item className={styles.formItem}>
|
||||
{getFieldDecorator('username', {rules: [{required: true, message: '请输入账户'}]})(
|
||||
<Input
|
||||
size="large"
|
||||
autoComplete="off"
|
||||
placeholder="请输入账户"
|
||||
prefix={<UserOutlined className={styles.icon}/>}/>
|
||||
)}
|
||||
</Form.Item>
|
||||
<Form.Item className={styles.formItem}>
|
||||
{getFieldDecorator('password', {rules: [{required: true, message: '请输入密码'}]})(
|
||||
<Input
|
||||
size="large"
|
||||
type="password"
|
||||
autoComplete="off"
|
||||
placeholder="请输入密码"
|
||||
onPressEnter={this.handleSubmit}
|
||||
prefix={<LockOutlined className={styles.icon}/>}/>
|
||||
)}
|
||||
</Form.Item>
|
||||
</Form>
|
||||
|
||||
<Button
|
||||
block
|
||||
size="large"
|
||||
type="primary"
|
||||
className={styles.button}
|
||||
loading={this.state.loading}
|
||||
onClick={this.handleSubmit}>登录</Button>
|
||||
</div>
|
||||
|
||||
<div className={styles.footerZone}>
|
||||
<div className={styles.linksZone}>
|
||||
<a className={styles.links} title="官网" href="https://www.spug.dev" target="_blank"
|
||||
rel="noopener noreferrer">官网</a>
|
||||
<a className={styles.links} title="Github" href="https://github.com/openspug/spug" target="_blank"
|
||||
rel="noopener noreferrer"><Icon type="github"/></a>
|
||||
<a title="文档" href="https://www.spug.dev/docs/about-spug/" target="_blank"
|
||||
rel="noopener noreferrer">文档</a>
|
||||
</div>
|
||||
<div style={{color: 'rgba(0, 0, 0, .45)'}}>Copyright <Icon type="copyright"/> 2020 By OpenSpug</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default Form.create()(LoginIndex)
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<div className={styles.titleContainer}>
|
||||
<div><img className={styles.logo} src={logo} alt="logo"/></div>
|
||||
<div className={styles.desc}>灵活、强大、功能全面的开源运维平台</div>
|
||||
</div>
|
||||
<div className={styles.formContainer}>
|
||||
<Tabs className={styles.tabs} onTabClick={v => setLoginType(v)}>
|
||||
<Tabs.TabPane tab="普通登录" key="default"/>
|
||||
<Tabs.TabPane tab="LDAP登录" key="ldap"/>
|
||||
</Tabs>
|
||||
<Form form={form}>
|
||||
<Form.Item name="username" className={styles.formItem}>
|
||||
<Input
|
||||
size="large"
|
||||
autoComplete="off"
|
||||
placeholder="请输入账户"
|
||||
prefix={<UserOutlined className={styles.icon}/>}/>
|
||||
</Form.Item>
|
||||
<Form.Item name="password" className={styles.formItem}>
|
||||
<Input
|
||||
size="large"
|
||||
type="password"
|
||||
autoComplete="off"
|
||||
placeholder="请输入密码"
|
||||
onPressEnter={handleSubmit}
|
||||
prefix={<LockOutlined className={styles.icon}/>}/>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
|
||||
<Button
|
||||
block
|
||||
size="large"
|
||||
type="primary"
|
||||
className={styles.button}
|
||||
loading={loading}
|
||||
onClick={handleSubmit}>登录</Button>
|
||||
</div>
|
||||
|
||||
<div className={styles.footerZone}>
|
||||
<div className={styles.linksZone}>
|
||||
<a className={styles.links} title="官网" href="https://www.spug.dev" target="_blank"
|
||||
rel="noopener noreferrer">官网</a>
|
||||
<a className={styles.links} title="Github" href="https://github.com/openspug/spug" target="_blank"
|
||||
rel="noopener noreferrer"><GithubOutlined/></a>
|
||||
<a title="文档" href="https://www.spug.dev/docs/about-spug/" target="_blank"
|
||||
rel="noopener noreferrer">文档</a>
|
||||
</div>
|
||||
<div style={{color: 'rgba(0, 0, 0, .45)'}}>Copyright <CopyrightOutlined/> 2020 By OpenSpug</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue