login 样式

src/components/common/schema/Table.js

@@ -26,7 +26,6 @@ class Table extends Component {
         }
     }
 
-
     // 下面的 handlexxxx 全是 state 内部方法，用于操作视图
     // cache 仅在提交删除整体使用
 
@@ -42,7 +41,7 @@ class Table extends Component {
 
     handleNameNew = (e) => {
         let r = /^[^\u4e00-\u9fa5]*$/;
-        if(r.test(e.target.value)){
+        if (r.test(e.target.value)) {
             this.setState({
                 newColName: e.target.value,
             })
@@ -50,7 +49,7 @@ class Table extends Component {
             this.setState({
                 characterTips: true
             });
-            setTimeout(()=>{
+            setTimeout(() => {
                 this.setState({
                     characterTips: false
                 })
@@ -114,19 +113,14 @@ class Table extends Component {
     };
 
     render() {
-        // console.log('columns',this.state.columns);
-        // console.log('this.props',this.props);
         let schemaID = this.props.schemaID || this.props.history.location.state.schemaID;
         let schemaName = this.props.schemaName || this.props.history.location.state.schemaName;
-        // console.log('schemaID',schemaID,'schemaName',schemaName);
         let userID = this.props.userID || getCookie('user_id');
-        // console.log('schemaID',schemaID,'userID',userID);
         let trialcase = this.props.trialcase;
 
         return (
             <div>
                 <div className="column-menu" onClick={this.props.goBack}>
-                    {/*()=>this.props.history.goBack()*/}
                     <Icon type="left" style={{color: '#3187FA'}}/> {schemaName}
                 </div>
 
@@ -262,18 +256,18 @@ class UpdateTableButton extends Component {
 
     }
 
-    showConfirm = (schemaName,schemaID) => {
+    showConfirm = (schemaName, schemaID) => {
         let _this = this;
 
-        if(this.props.add !== 'add') {
+        if (this.props.add !== 'add') {
             this.props.history.push({
                 pathname: `/graphql-service/my-create/${schemaName}`,
-                state:{
+                state: {
                     schemaName,
                     schemaID
                 }
             });
-        }else{
+        } else {
             confirm({
                 title: '添加成功',
                 content: '继续添加数据表？',
@@ -283,7 +277,7 @@ class UpdateTableButton extends Component {
                 onCancel() {
                     _this.props.history.push({
                         pathname: `/graphql-service/my-create/${schemaName}`,
-                        state:{
+                        state: {
                             schemaName,
                             schemaID
                         }
@@ -316,13 +310,13 @@ class UpdateTableButton extends Component {
 
                         let schemaData = data;
                         let referenceID = '';
-                        if(data.schema_by_id)
+                        if (data.schema_by_id)
                             referenceID = data.schema_by_id.reference;
 
                         return (
                             <Mutation
                                 mutation={gql(UPDATE_SCHEMA)}
-                                onCompleted={()=>this.showConfirm(schemaName,schemaID)}
+                                onCompleted={() => this.showConfirm(schemaName, schemaID)}
                                 refetchQueries={[{query: gql(SHOW_TABLE), variables: {schema_id: schemaID}}]}
                             >
 
@@ -354,7 +348,7 @@ class UpdateTableButton extends Component {
 
                                     const index = this.state.originTableName === '' ? -2 : this.props.schemaData.findIndex(obj => obj.name === this.state.originTableName);
                                     if (index === -2) {
-                                        if(referenceID !== '' && schemaCols.length === 0) {
+                                        if (referenceID !== '' && schemaCols.length === 0) {
                                             this.props.fetchData(referenceID).then(value => {
                                                 schemaCols = JSON.parse(value);
                                                 schemaCols.push(newTable);
@@ -384,15 +378,6 @@ class UpdateTableButton extends Component {
                                                     }
                                                 });
                                                 this.props.showTablePagination(this.props.page, this.props.pageSize, schemaCols);
-                                                // if(this.props.add !== 'add') {
-                                                //     this.props.history.push({
-                                                //         pathname: `/graphql-service/my-create/${this.props.schemaName}`,
-                                                //         state:{
-                                                //             schemaName:this.props.schemaName,
-                                                //             schemaID:this.props.schemaID
-                                                //         }
-                                                //     });
-                                                // }
                                             }}>
                                                 save
                                             </Button>

src/components/login/AccountConfig.js

@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-import {Button} from 'antd';
+import {Icon} from 'antd';
 
 
 
@@ -16,11 +16,13 @@ class AccountConfig extends Component {
     render() {
         return (
             <div>
-                <Button type={'primary'} onClick={()=>{
+                <div className="column-menu" onClick={()=>{
                     this.props.history.push({
                         pathname: '/login',
                     })
-                }}>back</Button>
+                }}>
+                    <Icon type="left" style={{color: '#3187FA'}}/> login
+                </div>
             </div>
         )
     }

src/components/login/CloudConfig.js

@@ -72,11 +72,11 @@ class CloudConfig extends Component {
                 };
                 request('http://123.206.193.98:3000/graphql', ADD_CLOUD, varObj).then(
                     data => {
-                        if(data.create_cloud.length !== null) {
+                        if (data.create_cloud.length !== null) {
                             this.setState({
                                 showOK: cloudName
                             });
-                            setTimeout(()=>{
+                            setTimeout(() => {
                                 this.setState({
                                     showOK: ''
                                 });
@@ -85,7 +85,7 @@ class CloudConfig extends Component {
                             this.setState({
                                 showNotOK: cloudName
                             });
-                            setTimeout(()=>{
+                            setTimeout(() => {
                                 this.setState({
                                     showNotOK: ''
                                 });
@@ -102,11 +102,11 @@ class CloudConfig extends Component {
                 };
                 request('http://123.206.193.98:3000/graphql', UPDATE_CLOUD, varObj).then(
                     data => {
-                        if(data.update_cloud !== null) {
+                        if (data.update_cloud !== null) {
                             this.setState({
                                 showOK: cloudName
                             });
-                            setTimeout(()=>{
+                            setTimeout(() => {
                                 this.setState({
                                     showOK: ''
                                 });
@@ -115,7 +115,7 @@ class CloudConfig extends Component {
                             this.setState({
                                 showNotOK: cloudName
                             });
-                            setTimeout(()=>{
+                            setTimeout(() => {
                                 this.setState({
                                     showNotOK: ''
                                 });
@@ -131,14 +131,14 @@ class CloudConfig extends Component {
         return (
             this.state.show ?
                 <div>
-                    <div>
-                        <Button type={'primary'} onClick={()=>{
-                            this.props.history.push({
-                                pathname: '/login',
-                            })
-                        }}>back</Button>
+                    <div className="column-menu" onClick={()=>{
+                        this.props.history.push({
+                            pathname: '/login',
+                        })
+                    }}>
+                        <Icon type="left" style={{color: '#3187FA'}}/> login
                     </div>
-                    <div>
+                    <div style={{marginTop: 15}}>
                         <span className='cloud-name'>Tencent: </span>
                         <div style={{marginBottom: 15}}>
                             <div>
@@ -151,16 +151,17 @@ class CloudConfig extends Component {
                                                 onChange={this.inputChange('tenKey')}/>
                                 </div>
                                 {
-                                    this.state.showOK === 'tencent'?
-                                        <Icon type="check-circle" theme="twoTone" twoToneColor="#52c41a" />
+                                    this.state.showOK === 'tencent' ?
+                                        <Icon type="check-circle" theme="twoTone" twoToneColor="#52c41a"/>
                                         :
-                                        this.state.showNotOK === 'tencent'?
+                                        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)}>ok</Button>
+                            <Button type='primary'
+                                    onClick={this.submit(this.state.tencentCLoudID, 'tencent', this.state.tenID, this.state.tenKey)}>ok</Button>
                         </div>
                     </div>
                     <div>
@@ -176,16 +177,17 @@ class CloudConfig extends Component {
                                                 onChange={this.inputChange('aliKey')}/>
                                 </div>
                                 {
-                                    this.state.showOK === 'aliyun'?
-                                        <Icon type="check-circle" theme="twoTone" twoToneColor="#52c41a" />
+                                    this.state.showOK === 'aliyun' ?
+                                        <Icon type="check-circle" theme="twoTone" twoToneColor="#52c41a"/>
                                         :
-                                        this.state.showNotOK === 'aliyun'?
+                                        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)}>ok</Button>
+                            <Button type='primary'
+                                    onClick={this.submit(this.state.aliyunCLoudID, 'aliyun', this.state.aliID, this.state.aliKey)}>ok</Button>
                         </div>
                     </div>
                     <div>
@@ -201,16 +203,17 @@ class CloudConfig extends Component {
                                                 onChange={this.inputChange('awsKey')}/>
                                 </div>
                                 {
-                                    this.state.showOK === 'amazon'?
-                                        <Icon type="check-circle" theme="twoTone" twoToneColor="#52c41a" />
+                                    this.state.showOK === 'amazon' ?
+                                        <Icon type="check-circle" theme="twoTone" twoToneColor="#52c41a"/>
                                         :
-                                        this.state.showNotOK === 'amazon'?
+                                        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)}>ok</Button>
+                            <Button type='primary'
+                                    onClick={this.submit(this.state.awsCLoudID, 'amazon', this.state.awsID, this.state.awsKey)}>ok</Button>
                         </div>
                     </div>
                 </div>

src/components/login/Login.js

@@ -3,7 +3,9 @@ import LoginInput from './LoginInput';
 import CloudConfig from "./CloudConfig";
 import AccountConfig from "./AccountConfig";
 
+import {Layout} from 'antd';
 
+const {Content} = Layout;
 class Login extends Component {
     constructor() {
         super();
@@ -21,17 +23,21 @@ class Login extends Component {
 
     render() {
         return (
-            <div>
-                {
-                    this.props.match.params.setting ?
-                        this.props.match.params.setting === 'account'?
-                            <AccountConfig history={this.props.history}/>
-                            :
-                            <CloudConfig userID={this.state.userID} history={this.props.history}/>
-                        :
-                        <LoginInput history={this.props.history} getUserId={this.getUserId}/>
-                }
-            </div>
+            <Layout style={{padding: '24px', zIndex: '0'}}>
+                <Content style={{padding: '24px', minHeight: 280, background: '#fff'}}>
+                    <div>
+                        {
+                            this.props.match.params.setting ?
+                                this.props.match.params.setting === 'account' ?
+                                    <AccountConfig history={this.props.history}/>
+                                    :
+                                    <CloudConfig userID={this.state.userID} history={this.props.history}/>
+                                :
+                                <LoginInput history={this.props.history} getUserId={this.getUserId}/>
+                        }
+                    </div>
+                </Content>
+            </Layout>
         )
     }
 }

src/components/login/LoginInput.js

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 
-import {Layout, Input, Button, Spin} from 'antd';
+import {Input, Button, Spin, Icon} from 'antd';
 import {ADD_USER, GET_USER, SEARCH_USER} from "../gql";
 import {Mutation} from "react-apollo";
 import axios from 'axios';
@@ -13,7 +13,7 @@ import {setCookie} from "../cookie";
 
 axios.defaults.withCredentials = true;
 
-const {Content} = Layout;
+
 const idGen = (kind) => {
     return kind + '_' + Date.now() + '_' + Math.random().toString().slice(-8);
 };
@@ -212,108 +212,100 @@ class LoginInput extends Component {
     render() {
         return (
             <div>
-                <Layout style={{padding: '24px', zIndex: '0'}}>
-                    <Content style={{padding: '24px', minHeight: 280, background: '#fff'}}>
-                        {
+                <div className='login'>
+                    {
+                        this.state.hasLogin ?
+                            this.state.loginOnce ?
+                                this.login()
+                                :
+                                ''
+                            :
+                            <div>
+                                <span style={{marginRight: 20}}><b>login:</b></span>
+                                <div style={{marginTop: 10}}>
+                                    <span>username: </span>
+                                    <Input
+                                        placeholder=""
+                                        onChange={(e) => {
+                                            e.persist();
+                                            this.setState({login_username: e.target.value});
+                                        }}
+                                        style={{width: 200}}
+                                    />
+                                </div>
+                                <div style={{marginTop: 10}}>
+                                    <span>password: </span>
+                                    <Input
+                                        placeholder=""
+                                        onChange={(e) => {
+                                            e.persist();
+                                            this.setState({login_password: e.target.value});
+                                        }}
+                                        style={{width: 200}}
+                                    />
+                                </div>
+                                <Button type='primary' onClick={() => {
+                                    this.setState({
+                                        hasLogin: true
+                                    })
+                                }}>ok</Button>
+                            </div>
+                    }
+                    {
+                        this.state.loginStatus === 'logined' ?
                             <div>
-                                <div className='login'>
-                                    {
-                                        this.state.hasLogin ?
-                                            this.state.loginOnce ?
-                                                this.login()
-                                                :
-                                                ''
-                                            :
-                                            <div>
-                                                <span style={{marginRight: 20}}><b>login:</b></span>
-                                                <div style={{marginTop: 10}}>
-                                                    <span>username: </span>
-                                                    <Input
-                                                        placeholder=""
-                                                        onChange={(e) => {
-                                                            e.persist();
-                                                            this.setState({login_username: e.target.value});
-                                                        }}
-                                                        style={{width: 200}}
-                                                    />
-                                                </div>
-                                                <div style={{marginTop: 10}}>
-                                                    <span>password: </span>
-                                                    <Input
-                                                        placeholder=""
-                                                        onChange={(e) => {
-                                                            e.persist();
-                                                            this.setState({login_password: e.target.value});
-                                                        }}
-                                                        style={{width: 200}}
-                                                    />
-                                                </div>
-                                                <Button type='primary' onClick={() => {
-                                                    this.setState({
-                                                        hasLogin: true
-                                                    })
-                                                }}>ok</Button>
-                                            </div>
-                                    }
-                                    {
-                                        this.state.loginStatus === 'logined' ?
-                                            <div>
                                                 <span
                                                     style={{marginRight: '10px'}}>welcome, {this.state.nickname}</span>
-                                                <Button onClick={() => {
-                                                    this.setState({
-                                                        hasLogin: false,
-                                                        loginStatus: '',
-                                                        loginOnce: true
-                                                    });
-                                                    // cookie.remove('ring-session')
-                                                }}>exit</Button>
-                                                <div style={{marginTop: 20}}>
-                                                    <Button type="primary" style={{marginRight: 10}} onClick={() => {
-                                                        this.props.history.push({
-                                                            pathname: '/login/account',
-                                                        })
-                                                    }}>user setting</Button>
-                                                    <Button type="primary" onClick={() => {
-                                                        this.props.history.push({
-                                                            pathname: '/login/cloud',
-                                                        })
-                                                    }}>cloud setting</Button>
-                                                </div>
-                                            </div>
-                                            :
-                                            this.state.loginStatus === 'failed' ?
-                                                <div>
-                                                    <span style={{marginRight: '10px'}}>login failed</span>
-                                                    <Button onClick={() => {
-                                                        this.setState({
-                                                            hasLogin: false,
-                                                            loginStatus: '',
-                                                            loginOnce: true
-                                                        })
-                                                    }}>relogin</Button>
-                                                </div>
-                                                :
-                                                ''
-                                    }
-                                </div>
-                                <div className='register' style={{marginTop: 20}}>
-                                    {
-                                        this.state.hasRegister ?
-                                            <div>ok, login please</div>
-                                            :
-                                            this.state.loginStatus === 'logined' ?
-                                                ''
-                                                :
-                                                this.register()
-                                    }
+                                <Button onClick={() => {
+                                    this.setState({
+                                        hasLogin: false,
+                                        loginStatus: '',
+                                        loginOnce: true
+                                    });
+                                    // cookie.remove('ring-session')
+                                }}>exit</Button>
+                                <div style={{marginTop: 20}}>
+                                    <Button type="primary" style={{marginRight: 10}} onClick={() => {
+                                        this.props.history.push({
+                                            pathname: '/login/account',
+                                        })
+                                    }}>user setting</Button>
+                                    <Button type="primary" onClick={() => {
+                                        this.props.history.push({
+                                            pathname: '/login/cloud',
+                                        })
+                                    }}>cloud setting</Button>
                                 </div>
-
                             </div>
-                        }
-                    </Content>
-                </Layout>
+                            :
+                            this.state.loginStatus === 'failed' ?
+                                <div>
+                                    <span style={{marginRight: '10px'}}>login failed</span>
+                                    <Button onClick={() => {
+                                        this.setState({
+                                            hasLogin: false,
+                                            loginStatus: '',
+                                            loginOnce: true
+                                        })
+                                    }}>relogin</Button>
+                                </div>
+                                :
+                                ''
+                    }
+                </div>
+                <div className='register' style={{marginTop: 20}}>
+                    {
+                        this.state.hasRegister ?
+                            <div>ok, login please</div>
+                            :
+                            this.state.loginStatus === 'logined' ?
+                                ''
+                                :
+                                this.register()
+                    }
+                </div>
             </div>
+
         )
     }
 }