add login and register - unfinished

scripts/start.js

@@ -41,7 +41,8 @@ if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
 }
 
 // Tools like Cloud9 rely on this.
-const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
+// const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
+const DEFAULT_PORT = 3999;
 const HOST = process.env.HOST || '0.0.0.0';
 
 if (process.env.HOST) {

src/components/app/App.jsx

@@ -1,21 +1,21 @@
 import React, {Component} from 'react';
 import {Layout, Menu, Input, Button, Spin, Breadcrumb, Icon, Radio, LocaleProvider} from 'antd';
 import {BrowserRouter as Router, Route, Link, Switch, Redirect} from "react-router-dom";
-import gql from "graphql-tag";
-import {Query} from "react-apollo";
+
 import moment from 'moment';
 import 'moment/locale/zh-cn';
 import { FormattedMessage } from 'react-intl';
 
+
 import CloudFunction from '../cloudFunction/CloudFunction';
 import MonitorNotify from '../monitorNotify/MonitorNotify';
 import DataAnalysis from '../dataAnalysis/DataAnalysis';
 import DataStorage from '../dataStorage/DataStorage';
+import TrialCase from "../trialCase/TrialCase";
 
 import zhCN from 'antd/lib/locale-provider/zh_CN';
 import '../common/graphql/index.css';
 import './index.css'
-import TrialCase from "../trialCase/TrialCase";
 
 const {SubMenu} = Menu;
 const {Header, Sider} = Layout;
@@ -28,12 +28,6 @@ class App extends Component {
         this.state = {
             menuLevel1: "trail",
             sideBar: "e-commerce",
-            userID: '',
-            hasLogin: false,
-            user: {
-                nickname: '',
-                avatar: ''
-            },
             collapsed: false,
             inlineCollapsed: false,
             locale: undefined,
@@ -75,58 +69,6 @@ class App extends Component {
         }
     };
 
-    login = (id) => {
-        const GET_USER = gql`
-            query USER($id: ID!) {
-                user_by_id(id: $id) {
-                    avatar,
-                    nickname
-                }
-            }
-        `;
-        return (
-            <Query query={GET_USER} variables={{id}}>
-                {
-                    ({loading, error, data}) => {
-                        if (loading) {
-                            return <Spin style={{marginLeft: 3}}/>
-                        }
-                        if (error) {
-                            return 'error!';
-                        }
-
-                        if (data.user_by_id === null)
-                            return (
-                                <div>
-                                    <span style={{marginRight: '10px'}}>no such person</span>
-                                    <Button onClick={() => {
-                                        this.setState({hasLogin: false})
-                                    }}>relogin</Button>
-                                </div>
-                            );
-                        else {
-                            // 不可使用 this.setState, 会报错。
-                            // Warning: Cannot update during an existing state transition (such as within `render`).
-                            // Render methods should be a pure function of props and state.
-                            this.state.user = {
-                                avatar: data.user_by_id.avatar,
-                                nickname: data.user_by_id.nickname
-                            };
-                            console.log(data);
-                            return (
-                                <div>
-                                    <span style={{marginRight: '10px'}}>welcome, {data.user_by_id.nickname}</span>
-                                    <Button onClick={() => {
-                                        this.setState({hasLogin: false})
-                                    }}>exit</Button>
-                                </div>
-                            );
-                        }
-                    }
-                }
-            </Query>
-        )
-    };
 
     render() {
         const { locale,language } = this.state;
@@ -164,28 +106,6 @@ class App extends Component {
                             <Button size="small" onClick={(e)=>this.changeLocale(e)}>{language}</Button>
                         </div>
 
-                        {/*<div className='login'>*/}
-                            {/*{*/}
-                                {/*this.state.hasLogin ?*/}
-                                    {/*this.login(this.state.userID)*/}
-                                    {/*:*/}
-                                    {/*<div>*/}
-                                        {/*<span style={{marginRight: 20}}>login:</span>*/}
-                                        {/*<Input*/}
-                                            {/*placeholder="id, eg: 'xy_1'"*/}
-                                            {/*onChange={(e) => {*/}
-                                                {/*// antd 获取不到 target，百度来的下面这句代码*/}
-                                                {/*e.persist();*/}
-                                                {/*this.setState({userID: e.target.value});*/}
-                                            {/*}}*/}
-                                            {/*onPressEnter={() => {*/}
-                                                {/*this.setState({hasLogin: true})*/}
-                                            {/*}}*/}
-                                            {/*style={{width: 200}}*/}
-                                        {/*/>*/}
-                                    {/*</div>*/}
-                            {/*}*/}
-                        {/*</div>*/}
                     </Header>
 
                     <Sider
@@ -295,7 +215,6 @@ class App extends Component {
                             </Switch>
                         </Layout>
                     </LocaleProvider>
-
                 </Layout>
             </Router>
         );

src/components/common/graphql/Graphql.jsx

@@ -11,8 +11,10 @@ class Graphql extends Component {
     this.state = {
       // api: 'http://service-ci2tk8iu-1254337200.ap-guangzhou.apigateway.myqcloud.com/release/graphql',
       // 便于开发调试，请删除并换成上面
-      api: 'http://localhost:3000/graphql'
+      api: 'http://123.206.193.98:3000/graphql'
       // api: 'http://service-28dm054z-1254337200.ap-shanghai.apigateway.myqcloud.com/release/graphql'
+      // api: 'http://service-acb8p44v-1254337200.ap-beijing.apigateway.myqcloud.com/release/graphql'
+
     }
   };
 

src/components/gql.js

@@ -1,5 +1,43 @@
 import gql from "graphql-tag";
 
+const GET_USER = gql`
+            query USER($id: ID!) {
+                user_by_id(id: $id) {
+                    avatar,
+                    nickname
+                }
+            }
+        `;
+
+const ADD_USER = gql`
+            mutation USER($email: String, $updatedAt: String, $password: String, $telephone: String, $nickname: String, $username: String, $createdAt: String, $openid: String, $id: ID!, $avatar: String) {
+                create_user(
+                    email: $email 
+                    updatedAt: $updatedAt 
+                    password: $password 
+                    telephone: $telephone 
+                    nickname: $nickname 
+                    username: $username 
+                    createdAt: $createdAt 
+                    openid: $openid 
+                    id: $id 
+                    avatar: $avatar
+                ) {
+                    email
+                    updatedAt
+                    password
+                    telephone
+                    nickname
+                    username
+                    createdAt
+                    openid
+                    id
+                    avatar
+                }
+            }
+
+        `;
+
 const SHOW_SCHEMA = gql`
             query SCHEMA($user_id: ID) {
                 schema_by_props(user_id: $user_id) {
@@ -116,4 +154,4 @@ const SHOW_APIGWPATH = gql`
         `;
 
 
-export {SHOW_SCHEMA, ADD_SCHEMA, DELETE_SCHEMA, UPDATE_SCHEMA, SHOW_TABLE, SHOW_CLOUD, SHOW_DEPLOY, SHOW_APIGWGROUP, SHOW_APIGWPATH}
+export {SHOW_SCHEMA, ADD_SCHEMA, DELETE_SCHEMA, UPDATE_SCHEMA, SHOW_TABLE, SHOW_CLOUD, SHOW_DEPLOY, SHOW_APIGWGROUP, SHOW_APIGWPATH, GET_USER, ADD_USER}

src/components/trialCase/TrialCase.jsx

@@ -1,21 +1,37 @@
 import React, {Component} from 'react';
 import GenerateJs from "../common/generateJs/GenerateJs";
-import {Layout, Menu  } from 'antd';
+import {Layout, Menu, Input, Button, Spin} from 'antd';
 
 import Deploy from '../common/deploy/Deploy';
 import Schema from '../common/schema/Schema';
 import Graphql from "../common/graphql/Graphql";
 import CaseNotification from "../common/caseNotification/CaseNotification";
 import CaseMetabase from "../common/caseMetabase/CaseMetabase";
+import {ADD_USER, GET_USER} from "../gql";
+import {Query, Mutation} from "react-apollo";
+import fetch from "isomorphic-fetch";
 
-const { Content } = Layout;
+const {Content} = Layout;
+const idGen = (kind) => {
+    return kind + '_' + Date.now() + '_' + Math.random().toString().slice(-8);
+};
 
 class TrialCase extends Component {
     constructor() {
         super();
         this.state = {
-            userID: 'xy_1',
             menuLevel2: "schema",
+            shouldShow: false,
+            userID: '',
+            hasLogin: false,
+            hasRegister: false,
+            user: {
+                nickname: '',
+                avatar: ''
+            },
+            username: '',
+            password: '',
+            url: 'http://localhost:8999/resetpassword'
         }
     }
 
@@ -26,6 +42,130 @@ class TrialCase extends Component {
         });
     };
 
+
+    login = () => {
+        let id = this.state.userID;
+        return (
+            <Query query={GET_USER} variables={{id}}>
+                {
+                    ({loading, error, data}) => {
+                        if (loading) {
+                            return <Spin style={{marginLeft: 3}}/>
+                        }
+                        if (error) {
+                            return 'error!';
+                        }
+
+                        if (data.user_by_id === null) {
+
+                            return (
+                                <div>
+                                    <span style={{marginRight: '10px'}}>no such person</span>
+                                    <Button onClick={() => {
+                                        this.setState({hasLogin: false})
+                                    }}>relogin</Button>
+                                </div>
+                            );
+                        }
+
+                        else {
+                            // 不可使用 this.setState, 会报错。
+                            // Warning: Cannot update during an existing state transition (such as within `render`).
+                            // Render methods should be a pure function of props and state.
+                            // this.state.user = {
+                            //     avatar: data.user_by_id.avatar,
+                            //     nickname: data.user_by_id.nickname
+                            // };
+
+                            return (
+                                <div>
+                                    <span style={{marginRight: '10px'}}>welcome, {data.user_by_id.nickname}</span>
+                                    <Button onClick={() => {
+                                        this.setState({hasLogin: false})
+                                    }}>exit</Button>
+                                    <Button onClick={() => {
+                                        this.setState({shouldShow: true})
+                                    }}>go to use</Button>
+                                </div>
+                            );
+                        }
+                    }
+                }
+            </Query>
+        )
+    };
+
+    register = () => {
+        return (
+            <Mutation mutation={ADD_USER}>
+                {(create_user, {loading, error}) => {
+                    if (error)
+                        return 'error';
+                    if (loading)
+                        return <Spin style={{marginLeft: 3}}/>;
+                    return (
+                        <div style={{marginTop: 20}}>
+                            <span style={{marginRight: 20}}><b>register:</b></span>
+                            <div style={{marginTop: 10}}>
+                                <span>username: </span>
+                                <Input
+                                    placeholder=""
+                                    onChange={(e) => {
+                                        // antd 获取不到 target，百度来的下面这句代码
+                                        e.persist();
+                                        this.setState({username: e.target.value});
+                                    }}
+                                    style={{width: 200}}
+                                />
+                            </div>
+                            <div style={{marginTop: 10}}>
+                                <span>password: </span>
+                                <Input
+                                    placeholder=""
+                                    onChange={(e) => {
+                                        // antd 获取不到 target，百度来的下面这句代码
+                                        e.persist();
+                                        this.setState({password: e.target.value});
+                                    }}
+                                    style={{width: 200}}
+                                />
+                            </div>
+                            <Button type='primary' onClick={() => {
+                                let id = idGen('userID');
+                                create_user({
+                                    variables: {
+                                        id,
+                                        email: '',
+                                        updatedAt: '',
+                                        password: '',
+                                        telephone: '',
+                                        nickname: '',
+                                        username: this.state.username,
+                                        createdAt: new Date().getTime(),
+                                        openid: '',
+                                        avatar: ''
+                                    }
+                                });
+                                fetch(this.state.url,{
+                                    method: 'POST',
+                                    mode: 'cors',
+                                    body: {
+                                        'user-id': id,
+                                        'password': this.state.password,
+                                        'token': 'WXgraphql4Io',
+                                    }
+                                }).then(res => res.json())
+                                    .catch(error => console.error('Error:', error))
+                                    .then(response => console.log('Success:', response));
+                            }}>ok</Button>
+                        </div>
+                    );
+                }}
+            </Mutation>
+
+        )
+    };
+
     render() {
         return (
             <div>
@@ -44,26 +184,65 @@ class TrialCase extends Component {
                     <Menu.Item key="notification">notification</Menu.Item>
                 </Menu>
 
-                <Layout style={{ padding: '24px', zIndex: '0'}}>
-                    <Content style={{ padding: '24px', minHeight: 280, background: '#fff',marginTop: '48px'  }}>
-                        {(() => {
-                            switch (this.state.menuLevel2) {
-                                case 'schema':
-                                    return <Schema userID={this.state.userID}/>;
-                                case 'deploy':
-                                    return <Deploy userID={this.state.userID}/>;
-                                case 'graphql':
-                                    return <GenerateJs />;
-                                case 'graphiql':
-                                    return <Graphql />;
-                                case 'metabase':
-                                    return <CaseMetabase />;
-                                case 'notification':
-                                    return <CaseNotification />;
-                                default:
-                                    return <Graphql />
-                            }
-                        })()}
+
+                <Layout style={{padding: '24px', zIndex: '0'}}>
+                    <Content style={{padding: '24px', minHeight: 280, background: '#fff', marginTop: '48px'}}>
+                        {
+                            this.state.shouldShow === false ?
+                                <div>
+                                    <div className='login'>
+                                        {
+                                            this.state.hasLogin ?
+                                                this.login()
+                                                :
+                                                <div>
+                                                    <span style={{marginRight: 20}}><b>login:</b></span>
+                                                    <Input
+                                                        placeholder="id, eg: 'xy_1'"
+                                                        onChange={(e) => {
+                                                            // antd 获取不到 target，百度来的下面这句代码
+                                                            e.persist();
+                                                            this.setState({userID: e.target.value});
+                                                        }}
+                                                        onPressEnter={() => {
+                                                            this.setState({hasLogin: true})
+                                                        }}
+                                                        style={{width: 200}}
+                                                    />
+                                                </div>
+                                        }
+                                    </div>
+                                    <div className='register'>
+                                        {
+                                            this.register()
+                                        }
+                                    </div>
+
+                                </div>
+
+                                :
+
+                                (() => {
+                                    switch (this.state.menuLevel2) {
+                                        case 'schema':
+                                            return <Schema userID={this.state.userID}/>;
+                                        case 'deploy':
+                                            return <Deploy userID={this.state.userID}/>;
+                                        case 'graphql':
+                                            return <GenerateJs/>;
+                                        case 'graphiql':
+                                            return <Graphql/>;
+                                        case 'metabase':
+                                            return <CaseMetabase/>;
+                                        case 'notification':
+                                            return <CaseNotification/>;
+                                        default:
+                                            return <Graphql/>
+                                    }
+
+                                })()
+                        }
+
                     </Content>
                 </Layout>
             </div>
@@ -71,4 +250,5 @@ class TrialCase extends Component {
     }
 }
 
-export default TrialCase;
+export default TrialCase;
+

src/index.css

@@ -26,9 +26,6 @@ code {
 
 .login {
   width: 25%;
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  color: #ffffff;
+  /*color: #ffffff;*/
   line-height: 31px;
 }

src/index.js

@@ -19,7 +19,7 @@ addLocaleData([...en,...zh]);
 
 const client = new ApolloClient({
   // uri: "http://service-eucrnpse-1254337200.ap-guangzhou.apigateway.myqcloud.com/release/graphql"
-  uri: "http://localhost:3000/graphql"
+  uri: "http://123.206.193.98:3000/graphql"
 });
 
 let browserLanguage = (navigator.language || navigator.browserLanguage).toLowerCase().split('-')[0];