accountConfig great

src/login/CloudConfig.js

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import {FormattedMessage} from 'react-intl';
-import {Button, Input, Spin, Icon} from 'antd';
+import {Button, Input, Spin, Icon, Row, Col} from 'antd';
 
 import {SHOW_CLOUD, ADD_CLOUD, UPDATE_CLOUD} from "../gql";
 import {request} from 'graphql-request'
@@ -135,111 +135,133 @@ class CloudConfig extends Component {
 
     render() {
         return (
-            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>
+            this.state.userID !== '' ?
 
-                    <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'>APP ID:</span>
-                                    <Input style={{width: 250}} value={this.state.tenAppID} onChange={this.inputChange('tenAppID')}/>
-                                </div>
-                                <div style={{marginBottom: 20}}>
-                                    <span className='item-title-cloud'>secret ID:</span>
-                                    <Input style={{width: 250}} value={this.state.tenID} onChange={this.inputChange('tenID')}/>
-                                </div>
-                                <div style={{marginBottom: 20}}>
-                                    <span className='item-title-cloud'>secret Key:</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>
+                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'>APP ID:</span>
+                                        <Input style={{width: 250}} value={this.state.tenAppID} onChange={this.inputChange('tenAppID')}/>
+                                    </div>
+                                    <div style={{marginBottom: 20}}>
+                                        <span className='item-title-cloud'>secret ID:</span>
+                                        <Input style={{width: 250}} value={this.state.tenID} onChange={this.inputChange('tenID')}/>
+                                    </div>
+                                    <div style={{marginBottom: 20}}>
+                                        <span className='item-title-cloud'>secret Key:</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>
-                            <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>*/}
+                        {/*<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>*/}
+                                    {/*{*/}
+                                        {/*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>*/}
-                            {/*<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>*/}
+                            {/*<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>*/}
-                            {/*<Button type='primary'*/}
-                                    {/*onClick={this.submit(this.state.awsCLoudID, 'amazon', this.state.awsID, this.state.awsKey)}>*/}
-                                {/*<FormattedMessage id="save"/>*/}
-                            {/*</Button>*/}
                         {/*</div>*/}
-                    {/*</div>*/}
 
-                </div>
+                    </div>
+                    :
+                    <Spin style={{marginLeft: 3}}/>
                 :
-                <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>
         )
     }
 }

src/login/index.css

@@ -122,4 +122,14 @@
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
+}
+
+.cloud-wrapper {
+  background-color: #f0f2f5;
+  height: 500px;
+  border: 1px solid #e6e8ed;
+  border-radius: 2px;
+  box-shadow: 0 1px 10px rgba(26,26,26,.1);
+  box-sizing: border-box;
+  position: relative;
 }