From 05080e79483972652e00f142d5245534094cff82 Mon Sep 17 00:00:00 2001
From: caishi <1149225589@qq.com>
Date: Thu, 31 Dec 2020 13:58:44 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B7=A5=E4=BD=9C=E6=B5=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/AppConfig.js                  |   2 +-
 src/forge/Component/Handbook.jsx  |   2 +-
 src/forge/DevOps/About.jsx        | 184 +++++++++++++++++++++---------
 src/forge/DevOps/ServiceModal.jsx |  21 ++++
 src/forge/users/CIdispose.jsx     |  30 ++++-
 src/forge/users/Service.jsx       |  15 +++
 6 files changed, 192 insertions(+), 62 deletions(-)
 create mode 100644 src/forge/DevOps/ServiceModal.jsx
 create mode 100644 src/forge/users/Service.jsx

diff --git a/src/AppConfig.js b/src/AppConfig.js
index a369d843..a212448f 100644
--- a/src/AppConfig.js
+++ b/src/AppConfig.js
@@ -27,7 +27,7 @@ if (isDev) {
   }
   debugType = window.location.search.indexOf('debug=t') !== -1 ? 'teacher' :
     window.location.search.indexOf('debug=s') !== -1 ? 'student' :
-      window.location.search.indexOf('debug=a') !== -1 ? 'admin' : parsed.debug || 'admin'
+      window.location.search.indexOf('debug=a') !== -1 ? 'admin' : parsed.debug || 'student'
 }                 
 function clearAllCookie() {
   cookie.remove('_educoder_session', { path: '/' });
diff --git a/src/forge/Component/Handbook.jsx b/src/forge/Component/Handbook.jsx
index bcb38187..d26c0a8f 100644
--- a/src/forge/Component/Handbook.jsx
+++ b/src/forge/Component/Handbook.jsx
@@ -5,7 +5,7 @@ import './Component.scss';
 export default (()=>{
   return(
     <div className="handleBox">
-      <a href="https://www.trustie.net/forums/82/memos/3075" target="_blank" >
+      <a href="https://forum.trustie.net/forums/3075/detail" target="_blank" >
         <img src={Handbook} alt=""/>
       </a>
     </div>
diff --git a/src/forge/DevOps/About.jsx b/src/forge/DevOps/About.jsx
index d3e5c184..ba4c7667 100644
--- a/src/forge/DevOps/About.jsx
+++ b/src/forge/DevOps/About.jsx
@@ -1,9 +1,10 @@
 import React, { forwardRef, useCallback, useState , useEffect } from "react";
 import activate from "../Images/activate.png";
-import { Blueback , AlignCenter } from "../Component/layout";
+import { AlignCenter, Blueback } from "../Component/layout";
 import PasswordAuthority from "../Component/PasswordAuthority";
 import styled from "styled-components";
-import { Form, Input , Spin , Modal } from "antd";
+import { Form, Input , Spin , Button } from "antd";
+import ServiceModal from './ServiceModal';
 import axios from "axios";
 
 const P = styled.p`
@@ -20,15 +21,20 @@ const P = styled.p`
 function About(props, ref) {
   const { form: { getFieldDecorator, validateFields , setFieldsValue } } = props;
   const [isSpining, setIsSpining] = useState(true);
-  const [ authorityValBox , setAuthorityValBox ] = useState(false);
+
+  // 认证密码
   const [ authorityVal , setAuthorityVal ] = useState(undefined);
   const [ authorityValFlag , setAuthorityValFlag ] = useState(false);
+
   //0: 标识未开启devops
   //1: 标识用户已填写了云服务器相关信息，但并未开启认证
-  const [step, setStep] = useState(undefined);
-  // step大于1时：为true，不能再修改服务器信息
+  const [step, setStep] = useState(0);
+  
   const owner = props.match.params.owner;
+  const { user } = props;
   const projectsId = props.match.params.projectsId;
+  const [ disabled, setDisabled ] = useState(false);
+  const [ typeFlag, setTypeFlag] = useState(false);
 
 
   const AuthorLogin = props.author && props.author.login;
@@ -47,12 +53,17 @@ function About(props, ref) {
       method:`${type}`,
       url
     }).then(result=>{
+      setIsSpining(false);
       if(result && result.data ){
-        setIsSpining(false);
         setStep(result.data.step);
-        setFieldsValue({...result.data.cloud_account});
+        // setStep(0);
+        // setFieldsValue({...result.data.cloud_account});
+        // if(result.data.cloud_account){
+        //   setDisabled(true);
+        // }
       }
     }).catch(error=>{
+      setIsSpining(false);
       console.log(error);
     })
   }
@@ -72,8 +83,8 @@ function About(props, ref) {
   function goStep() {
     validateFields((error, values) => {
       if (!error) {
-        if(step > 0){
-          setAuthorityValBox(true);
+        if(disabled){
+          setStep(1);
         }else{
           setIsSpining(true);
           const url = `/${owner}/${projectsId}/cloud_accounts.json`;
@@ -82,7 +93,6 @@ function About(props, ref) {
             if (result && result.data.redirect_url) {
               props.showNotification("服务器信息配置完成！");
               setStep(1);
-              setAuthorityValBox(true);
             }
           })
           .catch((error) => {
@@ -94,6 +104,50 @@ function About(props, ref) {
     });
   }
 
+  // 选择服务器后调用接口，点击下一步（1是自有服务器，2是trustie服务器）
+  function sureModal(type){
+    if(type === 2){
+      setTypeFlag(false);
+      setIsSpining(true);
+      const url = `/users/ci/cloud_account/trustie_bind.json`;
+      axios.post(url,{
+        account:user && user.login
+      }).then(result=>{
+        setIsSpining(false);
+        if(result && result.data){
+          setStep(result.data.step);
+        }
+      }).catch(error=>{setIsSpining(false)})
+    }else{
+      setTypeFlag(true);
+    }
+  }
+
+  // 上一步
+  function goUpStep(step){
+    setTypeFlag(false);
+    setStep(step);
+  }
+
+  // 输入用户密码后下一步
+  function authStep(){
+    if(!authorityVal){
+      setAuthorityValFlag(true);
+      return;
+    }
+    setAuthorityValFlag(false);
+    setIsSpining(true);
+    const url = `/users/ci/oauth_grant.json`;
+    axios.get(url,{
+      params:{password:authorityVal}
+    }).then(result=>{
+      setIsSpining(false);
+      if(result){
+        setStep(result.data.step);
+      }
+    }).catch(error=>{setIsSpining(false)});
+  }
+
   // 开始激活
   function startActive(){
     setIsSpining(true);
@@ -111,18 +165,10 @@ function About(props, ref) {
       setIsSpining(false);
     })
   }
-  // 取消授权-登录密码的输入
-  function cancelAuthority(){
-    setAuthorityValBox(false);
-  }
-  // 确认授权
-  function okAuthority(step){
-    setAuthorityValBox(false);
-    setStep(step);
-  }
+
   return (
     <Spin spinning={isSpining}>
-      <PasswordAuthority authorityValBox={authorityValBox} successFunc={okAuthority} cancelFunc={cancelAuthority}></PasswordAuthority>
+      {/* <PasswordAuthority authorityValBox={authorityValBox} successFunc={okAuthority} cancelFunc={cancelAuthority}></PasswordAuthority> */}
       <div className="activatePanel">
         <img src={activate} alt="" width="250px" />
         <P>定义DevOps工作流，帮助您检测bug、发布代码…</P>
@@ -139,45 +185,69 @@ function About(props, ref) {
         {
           AuthorLogin === CurrentLogin ?
           <React.Fragment>
-            { step <=1 ?
-            <React.Fragment>
-              <Input.Password style={{display:'none'}} size="large" />
-              <Form style={{marginTop:"20px"}}>
-                <p className="mb20" style={{width:"370px"}}>请仔细核对您的服务器信息，一旦确认提交将无法修改</p>
-                {helper(
-                  "服务器IP地址：",
-                  "ip",
-                  [{ required: true, message: "请输入服务器IP地址" }],
-                  <Input
-                    placeholder="请输入服务器IP地址"
-                    style={{ width: "368px" }}
-                    size="large"
-                    disabled={step > 0}
-                  />,
-                  true
-                )}
-                {helper(
-                  "服务器用户名：",
-                  "account",
-                  [{ required: true, message: "请输入服务器用户名" }],
-                  <Input placeholder="请输入服务器用户名" size="large" disabled={step > 0}/>,
-                  true
-                )}
-                {helper(
-                  "服务器密码：",
-                  "secret",
-                  [{ required: true, message: "请输入服务器密码" }],
-                  <Input.Password placeholder="请输入服务器密码" size="large" disabled={step > 0}/>,
-                  true
-                )}
-              </Form>
-              <Blueback onClick={goStep}>下一步</Blueback>
-            </React.Fragment>
-            :""}
-            {step > 1 &&
+            {
+              step === 0 && !typeFlag ?
+                <ServiceModal sureModal={sureModal}></ServiceModal>
+              :""
+            }
+            { typeFlag ?
+              <React.Fragment>
+                <Input.Password style={{display:'none'}} size="large" />
+                <Form style={{marginTop:"20px"}}>
+                  <p className="mb20" style={{width:"370px"}}>请仔细核对您的服务器信息，一旦确认提交将无法修改</p>
+                  {helper(
+                    "服务器IP地址：",
+                    "ip",
+                    [{ required: true, message: "请输入服务器IP地址" }],
+                    <Input
+                      placeholder="请输入服务器IP地址"
+                      style={{ width: "368px" }}
+                      size="large"
+                      disabled={disabled}
+                    />,
+                    true
+                  )}
+                  {helper(
+                    "服务器用户名：",
+                    "account",
+                    [{ required: true, message: "请输入服务器用户名" }],
+                    <Input placeholder="请输入服务器用户名" size="large" disabled={disabled}/>,
+                    true
+                  )}
+                  {helper(
+                    "服务器密码：",
+                    "secret",
+                    [{ required: true, message: "请输入服务器密码" }],
+                    <Input.Password placeholder="请输入服务器密码" size="large" disabled={disabled}/>,
+                    true
+                  )}
+                </Form>
+                <AlignCenter>
+                  { !disabled && <Button className="mr20" onClick={()=>goUpStep(0)}>上一步</Button>}
+                  <Blueback onClick={goStep}>下一步</Blueback>
+                </AlignCenter>
+              </React.Fragment>
+              :""
+            }
+            {
+              step === 1 ?
+              <div>
+                <AlignCenter style={{justifyContent:"center",marginTop:"20px"}}>
+                  <span style={{marginBottom:"42px"}}>密码：</span>
+                  <div>
+                    <Input.Password value={authorityVal} className={authorityValFlag===true && "flags"} onChange={(e)=>setAuthorityVal(e.target.value)} style={{width:"220px"}}></Input.Password>
+                    <p className="color-grey-9" style={{textAlign:"left",lineHeight:'21px'}}>您已保存相关服务器信息，请输入密码，<br/>确认授权DevOps应用</p>
+                  </div>
+                </AlignCenter>
+                <AlignCenter style={{justifyContent:'center'}}>
+                  <Blueback onClick={authStep} className="mt20">下一步</Blueback>
+                </AlignCenter>
+              </div>:""
+            }
+            { step === 2 ?
               <div style={{textAlign:'center',marginTop:"20px"}}>
                 <Blueback onClick={startActive} className="mt20">开始激活</Blueback>
-              </div>
+              </div>:""
             }
           </React.Fragment>
           :""
diff --git a/src/forge/DevOps/ServiceModal.jsx b/src/forge/DevOps/ServiceModal.jsx
new file mode 100644
index 00000000..3fac8bc9
--- /dev/null
+++ b/src/forge/DevOps/ServiceModal.jsx
@@ -0,0 +1,21 @@
+import React, { useState } from 'react';
+import { Radio , Button } from 'antd';
+
+function ServiceModal({sureModal}){
+  const [ type , setType ] = useState(1);
+
+  function changeType(e){
+    setType(e.target.value);
+  }
+
+  return(
+    <div className="mt30" style={{textAlign:"center"}}>
+      <Radio.Group value={type} onChange={changeType}>
+        <Radio value={1}>自有服务器</Radio>
+        <Radio value={2}>Trustie服务器</Radio>
+      </Radio.Group>
+      <p className="mt30"><Button type="primary" onClick={()=>sureModal(type)}>下一步</Button></p>
+    </div>
+  )
+}
+export default ServiceModal;
\ No newline at end of file
diff --git a/src/forge/users/CIdispose.jsx b/src/forge/users/CIdispose.jsx
index a0692de7..03c841f5 100644
--- a/src/forge/users/CIdispose.jsx
+++ b/src/forge/users/CIdispose.jsx
@@ -4,17 +4,20 @@ import { AlignCenter } from '../Component/layout';
 import axios from 'axios';
 import Modals from '../Component/Modal';
 import PasswordAuthority from '../Component/PasswordAuthority';
+import Service from './Service';
 
 const TIPS = "解除CI服务器绑定后，您所有的项目构建数据将被清空。确定解除绑定？";
 function CIdispose(props){
   const [ CIData , setCIData ] = useState(undefined);
   const [ step , setStep ] = useState(0);
   const [ visible, setVisible ] = useState(false);
+  const [ serviceVisible , setServiceVisible ] = useState(false);
   const [ bindVisible, setBindVisible ] = useState(false);
   const [ ci_certification, setCi_certification ] = useState(false);
   const [ btnLoading , setBtnLoading ] = useState(false);
 
   const [ authorityValBox , setAuthorityValBox] = useState(false);
+  const { user } = props;
 
   const { form: { getFieldDecorator, validateFields , setFieldsValue } } = props;
   const helper = useCallback(
@@ -105,8 +108,28 @@ function CIdispose(props){
     setAuthorityValBox(false);
   }
 
+  // 确认选择服务器
+  function SureBtn(type){
+    if(type === 1){
+      setServiceVisible(false);
+      setBindVisible(true);
+    }else{
+      const url = `/users/ci/cloud_account/trustie_bind.json`;
+      axios.post(url,{
+        account:user && user.login
+      }).then(result=>{
+        if(result && result.data){
+          setServiceVisible(false);
+          setAuthorityValBox(true);
+          getInit();
+        }
+      }).catch(error=>{setServiceVisible(false)})
+    }
+  }
+
   return(
     <div className="disposeInfo">
+      <Service visible={serviceVisible} SureBtn={SureBtn} CancelBtn={()=>{setServiceVisible(false)}}></Service>
       <PasswordAuthority authorityValBox={authorityValBox} successFunc={okAuthority} cancelFunc={cancelAuthority}></PasswordAuthority>
       <Modal
         className="modalsStyle"
@@ -114,6 +137,7 @@ function CIdispose(props){
         title={"绑定CI服务器地址"}
         onCancel={cancelBindInfo}
         closable={true}
+        centered={true}
         footer={
           <div>
             <Button onClick={cancelBindInfo}>取消</Button>
@@ -155,12 +179,12 @@ function CIdispose(props){
           <span>CI服务器地址</span>
           {CIData && step >= 1 && <span className="ml10">{CIData.ip}</span>}
           { step === 0 && <span className="ml10 authTag red">未绑定</span> }
-          { step > 0 && !ci_certification && <span className="ml10 authTag red">未认证</span> }
+          { step === 1 && !ci_certification && <span className="ml10 authTag red">未认证</span> }
           { ci_certification && <span className="ml10 authTag green">已认证</span> }
         </AlignCenter>
         <AlignCenter>
-          { step === 0 && <Button type={'primary'} onClick={()=>setBindVisible(true)} >马上绑定</Button> }
-          { step > 0 && !ci_certification && <Button type={'primary'} style={{color:"#fff"}} onClick={()=>setAuthorityValBox(true)} target="_blank">马上认证</Button> }
+          { step === 0 && <Button type={'primary'} onClick={()=>setServiceVisible(true)} >马上绑定</Button> }
+          { step === 1 && !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>
diff --git a/src/forge/users/Service.jsx b/src/forge/users/Service.jsx
new file mode 100644
index 00000000..a3a2fcc3
--- /dev/null
+++ b/src/forge/users/Service.jsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import ServiceModal from '../DevOps/ServiceModal';
+import { Modal } from 'antd';
+
+function Service ({visible, SureBtn , CancelBtn }){
+  function SureModal(type){
+    SureBtn(type);
+  }
+  return(
+    <Modal title={"请选择服务器类型"} centered={true} visible={visible} footer={false} onCancel={CancelBtn}>
+      <ServiceModal sureModal={SureModal}></ServiceModal>
+    </Modal>
+  )
+}
+export default Service;
\ No newline at end of file