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(){
    setAuthorityVal(undefined);
    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=>{
      setIsSpin(false);
      if(result){
        successFunc(result.data.step);
      }
    }).catch(error=>{setIsSpin(false);});
  }
  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;