forked from Gitlink/forgeplus-react
80 lines
2.5 KiB
JavaScript
80 lines
2.5 KiB
JavaScript
import React , { forwardRef , useCallback } from 'react';
|
||
import activate from '../Images/activate.png';
|
||
import { Blueback } from '../Component/layout';
|
||
import styled from 'styled-components';
|
||
import { Link } from 'react-router-dom';
|
||
import { Form , Input } from 'antd';
|
||
import axios from 'axios';
|
||
|
||
const P = styled.p`{
|
||
width:200px;
|
||
line-height:30px;
|
||
font-size:16px;
|
||
color:#333;
|
||
text-align:center;
|
||
margin-top:30px;
|
||
margin-bottom:30px!important;
|
||
}`;
|
||
function About( props , ref){
|
||
const { form: { getFieldDecorator , validateFields } } = props;
|
||
|
||
const helper = useCallback(
|
||
(label, name, rules, widget, isRequired) => (
|
||
<React.Fragment>
|
||
<span className={isRequired?"required":""}>{label}</span>
|
||
<Form.Item>
|
||
{getFieldDecorator(name, { rules, validateFirst: true })(widget)}
|
||
</Form.Item>
|
||
</React.Fragment>
|
||
),
|
||
[]
|
||
);
|
||
|
||
function startActive(){
|
||
let projectsId = props.match.params.projectsId;
|
||
validateFields((error,values)=>{
|
||
if(!error){
|
||
const url = `/dev_ops/cloud_accounts.json`;
|
||
axios.post(url,{
|
||
...values,
|
||
project_id:projectsId
|
||
}).then(result=>{
|
||
if(result && result.data.redirect_url){
|
||
window.location.href = result.data.redirect_url;
|
||
}
|
||
}).catch(error=>{
|
||
console.log(error);
|
||
})
|
||
}
|
||
})
|
||
}
|
||
return(
|
||
<div className="activatePanel">
|
||
<img src={activate} alt="" width="250px"/>
|
||
<P>定义DevOps工作流，帮助您检测bug、发布代码…</P>
|
||
<Link to={""} style={{color:"#5091FF",marginBottom:"20px"}}>了解什么是DevOps？</Link>
|
||
<Form>
|
||
{helper(
|
||
"服务器IP地址：",
|
||
"ip_num",
|
||
[{ required: true, message: "请输入服务器IP地址" }],
|
||
<Input placeholder="请输入服务器IP地址" style={{width:"368px"}} size="large" />,true
|
||
)}
|
||
{helper(
|
||
"服务器用户名：",
|
||
"account",
|
||
[{ required: true, message: "请输入服务器用户名" }],
|
||
<Input placeholder="请输入服务器用户名" size="large" />,true
|
||
)}
|
||
{helper(
|
||
"服务器密码：",
|
||
"secret",
|
||
[{ required: true, message: "请输入服务器密码" }],
|
||
<Input.Password placeholder="请输入服务器密码" size="large" />,true
|
||
)}
|
||
</Form>
|
||
<Blueback onClick={startActive}>开始激活</Blueback>
|
||
</div>
|
||
)
|
||
}
|
||
export default Form.create()(forwardRef(About)); |