马上认证

This commit is contained in:
caishi 2020-10-16 11:39:12 +08:00
parent aca923fe07
commit 51c2729916
6 changed files with 70 additions and 28 deletions

View File

@ -8,6 +8,10 @@ li.ant-menu-item{
margin:0px!important;
border-bottom: 1px solid #eee;
}
.flags{
border: 1px solid red;
border-radius: 5px;
}
// Cards
.cards{
display: flex;

View File

@ -0,0 +1,45 @@
import React ,{ useState } from 'react';
import { Modal , Input , Spin } from 'antd';
import { AlignCenter } from "./layout";
import axios from 'axios';
import './Component.scss';
function PasswordAuthority({ authorityValBox , successFunc , cancelFunc }){
const [ authorityVal , setAuthorityVal ] = useState(undefined);
const [ authorityValFlag , setAuthorityValFlag ] = useState(false);
const [ isSpin , setIsSpin ] = useState(false);
// -
function cancelAuthority(){
cancelFunc();
}
//
function okAuthority(){
if(!authorityVal){
setAuthorityValFlag(true);
return;
}
setIsSpin(true);
const url = `/users/ci/oauth_grant.json`;
axios.get(url,{
params:{password:authorityVal}
}).then(result=>{
if(result){
setIsSpin(false);
successFunc(result.data.step);
}
}).catch(error=>{});
}
return(
<Modal visible={authorityValBox} centered={true} title="授权" onCancel={cancelAuthority} onOk={okAuthority}>
<Spin spinning={isSpin}>
<p style={{textAlign:"center"}}>请输入您的登录密码确认授权DevOps应用</p>
<AlignCenter style={{justifyContent:"center",marginTop:"20px"}}>
<span>密码</span>
<Input.Password value={authorityVal} className={authorityValFlag===true && "flags"} onChange={(e)=>setAuthorityVal(e.target.value)} style={{width:"220px"}}></Input.Password>
</AlignCenter>
</Spin>
</Modal>
)
}
export default PasswordAuthority;

View File

@ -1,6 +1,7 @@
import React, { forwardRef, useCallback, useState , useEffect } from "react";
import activate from "../Images/activate.png";
import { Blueback , AlignCenter } from "../Component/layout";
import PasswordAuthority from "../Component/PasswordAuthority";
import styled from "styled-components";
import { Form, Input , Spin , Modal } from "antd";
import axios from "axios";
@ -77,7 +78,7 @@ function About(props, ref) {
}else{
setIsSpining(true);
const url = `/${owner}/${projectsId}/cloud_accounts.json`;
axios.post(url, {...values}).then((result) => {
axios.post(url, {...values,ip_num:values.ip}).then((result) => {
setIsSpining(false);
if (result && result.data.redirect_url) {
props.showNotification("服务器信息配置完成!");
@ -116,30 +117,13 @@ function About(props, ref) {
setAuthorityValBox(false);
}
//
function okAuthority(){
if(!authorityVal){
setAuthorityValFlag(true);
return;
}
const url = `/users/ci/oauth_grant.json`;
axios.get(url,{
params:{password:authorityVal}
}).then(result=>{
if(result){
setAuthorityValBox(false);
setStep(result.data.step);
}
}).catch(error=>{});
function okAuthority(step){
setAuthorityValBox(false);
setStep(step);
}
return (
<Spin spinning={isSpining}>
<Modal visible={authorityValBox} centered={true} title="授权" onCancel={cancelAuthority} onOk={okAuthority}>
<p style={{textAlign:"center"}}>请输入您的登录密码确认授权DevOps应用</p>
<AlignCenter style={{justifyContent:"center",marginTop:"20px"}}>
<span>密码</span>
<Input.Password value={authorityVal} className={authorityValFlag===true && "flags"} onChange={(e)=>setAuthorityVal(e.target.value)} style={{width:"220px"}}></Input.Password>
</AlignCenter>
</Modal>
<PasswordAuthority authorityValBox={authorityValBox} successFunc={okAuthority} cancelFunc={cancelAuthority}></PasswordAuthority>
<div className="activatePanel">
<img src={activate} alt="" width="250px" />
<P>定义DevOps工作流帮助您检测bug发布代码</P>

View File

@ -124,10 +124,6 @@
}
}
.flags{
border: 1px solid red;
border-radius: 5px;
}
// ops详情
.opsDetailPanel{
height: 100vh;

View File

@ -505,7 +505,7 @@ class Detail extends Component {
}
<li className={pathname==="devops" ? "active" : ""}>
<Link to={{ pathname: `/projects/${owner}/${projectsId}/devops${open_devops ? `/list`:""}`, state }}>
<i className="iconfont icon-gongzuoliu font-13 mr8"></i>
<i className="iconfont icon-gongzuoliu font-13 mr8"></i>(beta)
{projectDetail && projectDetail.ops_count ? <span>{projectDetail.ops_count}</span> : ""}
</Link>
</li>

View File

@ -3,6 +3,8 @@ import { Button , Modal , Form , Input } from 'antd';
import { AlignCenter } from '../Component/layout';
import axios from 'axios';
import Modals from '../Component/Modal';
import PasswordAuthority from '../Component/PasswordAuthority';
import { func } from 'prop-types';
const TIPS = "解除CI服务器绑定后您所有的项目构建数据将被清空。确定解除绑定";
function CIdispose(props){
@ -13,6 +15,7 @@ function CIdispose(props){
const [ ci_certification, setCi_certification ] = useState(false);
const [ btnLoading , setBtnLoading ] = useState(false);
const [ authorityValBox , setAuthorityValBox] = useState(false);
const { form: { getFieldDecorator, validateFields , setFieldsValue } } = props;
const helper = useCallback(
@ -92,8 +95,18 @@ function CIdispose(props){
})
}
function okAuthority(){
setAuthorityValBox(false);
getInit();
}
function cancelAuthority(){
setAuthorityValBox(false);
}
return(
<div className="disposeInfo">
<PasswordAuthority authorityValBox={authorityValBox} successFunc={okAuthority} cancelFunc={cancelAuthority}></PasswordAuthority>
<Modal
className="modalsStyle"
visible={bindVisible}
@ -146,7 +159,7 @@ function CIdispose(props){
</AlignCenter>
<AlignCenter>
{ step === 0 && <Button type={'primary'} onClick={()=>setBindVisible(true)} >马上绑定</Button> }
{ step > 0 && !ci_certification && <Button type={'primary'} style={{color:"#fff"}} href={CIData && CIData.redirect_url} target="_blank">马上认证</Button> }
{ step > 0 && !ci_certification && <Button type={'primary'} style={{color:"#fff"}} onClick={()=>setAuthorityValBox(true)} target="_blank">马上认证</Button> }
{ step >= 1 && <Button type={'danger'} className="ml20" onClick={()=>setVisible(true)}>解除绑定</Button> }
</AlignCenter>
</div>