online/src/login/CloudConfig.js

import React, {Component} from 'react';
import {FormattedMessage} from 'react-intl';
import {Button, Input, Spin, Icon, Row, Col} from 'antd';

import {SHOW_CLOUD, ADD_CLOUD, UPDATE_CLOUD} from "../gql";
import {request} from 'graphql-request'
import {getCookie} from '../cookie';
import {idGen} from "../func";
import {graphqlUrl, storeFile} from "../config";
import axios from 'axios';

class CloudConfig extends Component {
    constructor(props) {
        super(props);
        this.state = {
            show: false,
            showOK: '',
            showNotOK: '',
            tencentCLoudID: '',
            tenAppID: '',
            tenID: '',
            tenKey: '',
            aliyunCLoudID: '',
            aliAppID: '',
            aliID: '',
            aliKey: '',
            awsCLoudID: '',
            awsAppID: '',
            awsID: '',
            awsKey: '',
            userID: getCookie('user_id'),
        };
        request(graphqlUrl, SHOW_CLOUD, {user_id: this.state.userID}).then(
            data => {
                let tencent = data.cloud_by_props.find(cloud => cloud.cloudName === 'tencent');
                let aliyun = data.cloud_by_props.find(cloud => cloud.cloudName === 'aliyun');
                let amazon = data.cloud_by_props.find(cloud => cloud.cloudName === 'amazon');
                this.setState({
                    show: true,
                    tencentCLoudID: tencent ? tencent.id : '',
                    tenAppID: tencent ? tencent.appId : '',
                    tenID: tencent ? tencent.secretId : '',
                    tenKey: tencent ? tencent.secretKey : '',
                    aliyunCLoudID: aliyun ? aliyun.id : '',
                    aliAppID: aliyun ? aliyun.appId : '',
                    aliID: aliyun ? aliyun.secretId : '',
                    aliKey: aliyun ? aliyun.secretKey : '',
                    awsCLoudID: amazon ? amazon.id : '',
                    awsAppID: amazon ? amazon.appId : '',
                    awsID: amazon ? amazon.secretId : '',
                    awsKey: amazon ? amazon.secretKey : ''
                });
            }
        );
    }


    inputChange = (kind) => {
        return (e) => {
            this.setState({
                [kind]: e.target.value
            })
        }
    };

    submit = (id, cloudName, secretId, secretKey, appId) => {
        return () => {
            if (id === '') {
                let varObj = {
                    id: idGen('cloud'),
                    user_id: this.state.userID,
                    appId,
                    cloudName,
                    secretId,
                    secretKey,
                    createdAt: new Date().getTime(),
                    updatedAt: ''
                };

                // store data to database
                request(graphqlUrl, ADD_CLOUD, varObj).then(
                    data => {
                        if (data.create_cloud.length !== null) {
                            this.setState({
                                showOK: cloudName
                            });
                            setTimeout(() => {
                                this.setState({
                                    showOK: ''
                                });
                                this.props.history.push({
                                    pathname: '/'
                                })
                            }, 1500)
                        } else {
                            this.setState({
                                showNotOK: cloudName
                            });
                            setTimeout(() => {
                                this.setState({
                                    showNotOK: ''
                                });
                            }, 1500)
                        }
                    }
                );
            } else {
                let varObj = {
                    id,
                    secretId,
                    secretKey,
                    appId,
                    updatedAt: new Date().getTime()
                };
                request(graphqlUrl, UPDATE_CLOUD, varObj).then(
                    data => {
                        if (data.update_cloud !== null) {
                            this.setState({
                                showOK: cloudName
                            });
                            setTimeout(() => {
                                this.setState({
                                    showOK: ''
                                });
                            }, 1500)
                        } else {
                            this.setState({
                                showNotOK: cloudName
                            });
                            setTimeout(() => {
                                this.setState({
                                    showNotOK: ''
                                });
                            }, 1500)
                        }
                    }
                );
            }
        }
    };

    render() {
        return (
            this.state.userID !== '' ?

                this.state.show ?
                    <div>
                        <div className="column-menu" onClick={() => {
                            this.props.history.push({
                                pathname: '/login',
                            })
                        }}>
                            <Icon type="left" style={{color: '#3187FA'}}/> <FormattedMessage id="login"/>
                        </div>

                        <div style={{marginTop: 15}}>
                            <span className='cloud-name'><FormattedMessage id="Tencent"/>: </span>
                            <div style={{marginBottom: 15}}>
                                <div>
                                    <div style={{marginBottom: 20}}>
                                        <span className='item-title-cloud'>APPID:</span>
                                        <Input style={{width: 250}} value={this.state.tenAppID}
                                               onChange={this.inputChange('tenAppID')}/>
                                    </div>
                                    <div style={{marginBottom: 20}}>
                                        <span className='item-title-cloud'>SecretId:</span>
                                        <Input style={{width: 250}} value={this.state.tenID}
                                               onChange={this.inputChange('tenID')}/>
                                    </div>
                                    <div style={{marginBottom: 20}}>
                                        <span className='item-title-cloud'>SecretKey:</span>
                                        <Input style={{width: 250}} value={this.state.tenKey}
                                               onChange={this.inputChange('tenKey')}/>
                                    </div>
                                    {
                                        this.state.showOK === 'tencent' ?
                                            <Icon type="check-circle" theme="twoTone" twoToneColor="#52c41a"/>
                                            :
                                            this.state.showNotOK === 'tencent' ?
                                                <span>not ok</span>
                                                :
                                                ""
                                    }
                                </div>
                                <Button type='primary'
                                        onClick={this.submit(this.state.tencentCLoudID, 'tencent', this.state.tenID, this.state.tenKey, this.state.tenAppID)}>
                                    <FormattedMessage id="save"/>
                                </Button>
                            </div>
                        </div>

                        {/*<div>*/}
                        {/*<span className='cloud-name'><FormattedMessage id="Aliyun"/>: </span>*/}
                        {/*<div style={{marginBottom: 15}}>*/}
                        {/*<div>*/}
                        {/*<div style={{marginBottom: 10}}>*/}
                        {/*<span className='item-title-cloud'>ID:</span>*/}
                        {/*<Input style={{width: 250}} value={this.state.aliID} onChange={this.inputChange('aliID')}/>*/}
                        {/*</div>*/}
                        {/*<div style={{marginBottom: 10}}>*/}
                        {/*<span className='item-title-cloud'>Key:</span>*/}
                        {/*<Input style={{width: 250}} value={this.state.aliKey} onChange={this.inputChange('aliKey')}/>*/}
                        {/*</div>*/}

                        {/*{*/}
                        {/*this.state.showOK === 'aliyun' ?*/}
                        {/*<Icon type="check-circle" theme="twoTone" twoToneColor="#52c41a"/>*/}
                        {/*:*/}
                        {/*this.state.showNotOK === 'aliyun' ?*/}
                        {/*<span>not ok</span>*/}
                        {/*:*/}
                        {/*""*/}
                        {/*}*/}
                        {/*</div>*/}
                        {/*<Button type='primary'*/}
                        {/*onClick={this.submit(this.state.aliyunCLoudID, 'aliyun', this.state.aliID, this.state.aliKey)}>*/}
                        {/*<FormattedMessage id="save"/>*/}
                        {/*</Button>*/}
                        {/*</div>*/}
                        {/*</div>*/}

                        {/*<div>*/}
                        {/*<span className='cloud-name'><FormattedMessage id="AWS"/>: </span>*/}
                        {/*<div style={{marginBottom: 15}}>*/}
                        {/*<div>*/}
                        {/*<div style={{marginBottom: 10}}>*/}
                        {/*<span className='item-title-cloud'>ID:</span>*/}
                        {/*<Input style={{width: 250}} value={this.state.aliID} onChange={this.inputChange('awsID')}/>*/}
                        {/*</div>*/}
                        {/*<div style={{marginBottom: 10}}>*/}
                        {/*<span className='item-title-cloud'>Key:</span>*/}
                        {/*<Input style={{width: 250}} value={this.state.aliKey} onChange={this.inputChange('awsKey')}/>*/}
                        {/*</div>*/}
                        {/*{*/}
                        {/*this.state.showOK === 'amazon' ?*/}
                        {/*<Icon type="check-circle" theme="twoTone" twoToneColor="#52c41a"/>*/}
                        {/*:*/}
                        {/*this.state.showNotOK === 'amazon' ?*/}
                        {/*<span>not ok</span>*/}
                        {/*:*/}
                        {/*""*/}
                        {/*}*/}
                        {/*</div>*/}
                        {/*<Button type='primary'*/}
                        {/*onClick={this.submit(this.state.awsCLoudID, 'amazon', this.state.awsID, this.state.awsKey)}>*/}
                        {/*<FormattedMessage id="save"/>*/}
                        {/*</Button>*/}
                        {/*</div>*/}
                        {/*</div>*/}

                    </div>
                    :
                    <Spin style={{marginLeft: 3}}/>
                :
                <Row style={{marginTop: 100}}>
                    <Col span={12} offset={6} className={'cloud-wrapper'}>
                        <Row>
                            <Col span={4} offset={20}>
                                <div className="back-to-login" onClick={() => {
                                    this.props.history.push({
                                        pathname: '/login',
                                    })
                                }}>
                                    <FormattedMessage id="login"/> <Icon type="right"
                                                                         style={{color: '#848fa6'}}/>
                                </div>
                            </Col>
                        </Row>
                        <div className={'no-login-tip'}>
                            <span>你还没有登录</span>
                        </div>
                    </Col>
                </Row>
        )
    }
}

export default CloudConfig;