add login

.idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,6 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="Eslint" enabled="true" level="ERROR" enabled_by_default="true" />
+  </profile>
+</component>

.idea/misc.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="JavaScriptSettings">
+    <option name="languageLevel" value="JSX" />
+  </component>
+</project>

.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/online.iml" filepath="$PROJECT_DIR$/.idea/online.iml" />
+    </modules>
+  </component>
+</project>

.idea/online.iml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>

.idea/workspace.xml

@@ -2,12 +2,14 @@
 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="93d86d6a-0860-401c-996e-30fc26553ffc" name="Default Changelist" comment="">
+      <change afterPath="$PROJECT_DIR$/.idea/inspectionProfiles/Project_Default.xml" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/.idea/misc.xml" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/.idea/vcs.xml" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/package-lock.json" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/public/logo.png" beforeDir="false" afterPath="$PROJECT_DIR$/src/app/logo.png" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/app/index.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/app/index.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/index.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/index.css" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/index.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/index.js" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/yarn.lock" beforeDir="false" afterPath="$PROJECT_DIR$/yarn.lock" afterDir="false" />
     </list>
     <ignored path="$PROJECT_DIR$/.tmp/" />
     <ignored path="$PROJECT_DIR$/temp/" />
@@ -22,8 +24,11 @@
     <session id="-929094854">
       <usages-collector id="statistics.lifecycle.project">
         <counts>
+          <entry key="project.closed" value="1" />
+          <entry key="project.open.time.317" value="1" />
           <entry key="project.open.time.4" value="1" />
-          <entry key="project.opened" value="1" />
+          <entry key="project.open.time.92" value="1" />
+          <entry key="project.opened" value="3" />
         </counts>
       </usages-collector>
       <usages-collector id="statistics.file.extensions.open">
@@ -31,114 +36,100 @@
           <entry key="css" value="11" />
           <entry key="html" value="1" />
           <entry key="ico" value="1" />
-          <entry key="js" value="22" />
+          <entry key="js" value="23" />
           <entry key="json" value="5" />
-          <entry key="lock" value="2" />
-          <entry key="png" value="2" />
+          <entry key="lock" value="3" />
+          <entry key="png" value="3" />
+          <entry key="ts" value="1" />
         </counts>
       </usages-collector>
       <usages-collector id="statistics.file.types.open">
         <counts>
           <entry key="CSS" value="11" />
           <entry key="HTML" value="1" />
-          <entry key="Image" value="3" />
+          <entry key="Image" value="4" />
           <entry key="JSON" value="5" />
-          <entry key="JavaScript" value="22" />
-          <entry key="yarn.lock" value="2" />
+          <entry key="JavaScript" value="23" />
+          <entry key="TypeScript" value="1" />
+          <entry key="yarn.lock" value="3" />
         </counts>
       </usages-collector>
       <usages-collector id="statistics.js.language.service.starts">
         <counts>
-          <entry key="ESLintLanguageService" value="1" />
+          <entry key="ESLintLanguageService" value="3" />
+          <entry key="TypeScriptServerServiceImpl" value="1" />
         </counts>
       </usages-collector>
       <usages-collector id="statistics.file.extensions.edit">
         <counts>
-          <entry key="css" value="309" />
-          <entry key="js" value="13868" />
+          <entry key="css" value="482" />
+          <entry key="js" value="15570" />
+          <entry key="ts" value="14" />
         </counts>
       </usages-collector>
       <usages-collector id="statistics.file.types.edit">
         <counts>
-          <entry key="CSS" value="309" />
-          <entry key="JavaScript" value="13868" />
+          <entry key="CSS" value="482" />
+          <entry key="JavaScript" value="15570" />
+          <entry key="TypeScript" value="14" />
         </counts>
       </usages-collector>
     </session>
   </component>
   <component name="FileEditorManager">
-    <leaf>
+    <leaf SIDE_TABS_SIZE_LIMIT_KEY="300">
       <file pinned="false" current-in-tab="true">
         <entry file="file://$PROJECT_DIR$/src/app/index.js">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="2565">
-              <caret line="239" column="4" lean-forward="true" selection-start-line="239" selection-start-column="4" selection-end-line="239" selection-end-column="4" />
+            <state relative-caret-position="555">
+              <caret line="297" column="43" selection-start-line="297" selection-start-column="43" selection-end-line="297" selection-end-column="43" />
               <folding>
                 <element signature="e#0#39#0" expanded="true" />
-                <element signature="e#641#756#0" />
-                <element signature="e#779#911#0" />
-                <element signature="e#928#1053#0" />
-                <element signature="e#1072#1203#0" />
-                <element signature="e#1222#1349#0" />
-                <element signature="e#1367#1485#0" />
-                <element signature="e#1602#1711#0" />
-                <element signature="e#1729#1767#0" />
-                <element signature="e#1876#2002#0" />
-                <element signature="e#967#1544#0" />
-                <element signature="e#1058#1636#0" />
-                <element signature="e#1114#1636#0" />
+                <element signature="e#501#3915#0" />
+                <element signature="e#648#757#0" />
+                <element signature="e#775#895#0" />
+                <element signature="e#913#1044#0" />
+                <element signature="e#1062#1188#0" />
+                <element signature="e#1206#1338#0" />
+                <element signature="e#1356#1483#0" />
+                <element signature="e#1501#1619#0" />
+                <element signature="e#1736#1845#0" />
+                <element signature="e#1863#1992#0" />
+                <element signature="e#2010#2136#0" />
+                <element signature="e#2243#2622#0" />
+                <element signature="e#2688#3897#0" />
+                <element signature="e#3932#4726#0" />
               </folding>
             </state>
           </provider>
         </entry>
       </file>
       <file pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/package.json">
+        <entry file="file://$PROJECT_DIR$/node_modules/react-apollo/Query.d.ts">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="627">
-              <caret line="33" column="23" selection-start-line="33" selection-start-column="23" selection-end-line="33" selection-end-column="23" />
-            </state>
-          </provider>
-        </entry>
-      </file>
-      <file pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/src/serviceWorker.js">
-          <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="418">
-              <caret line="22" column="34" selection-start-line="22" selection-start-column="34" selection-end-line="22" selection-end-column="34" />
+            <state relative-caret-position="1045">
+              <caret line="55" column="28" selection-start-line="55" selection-start-column="19" selection-end-line="55" selection-end-column="28" />
               <folding>
-                <element signature="n#!!doc" expanded="true" />
+                <element signature="e#0#31#0" expanded="true" />
               </folding>
             </state>
           </provider>
         </entry>
       </file>
       <file pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/src/graphiql/index.css">
+        <entry file="file://$PROJECT_DIR$/yarn.lock">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="124">
-              <caret line="16" column="23" selection-start-line="16" selection-start-column="23" selection-end-line="16" selection-end-column="23" />
-            </state>
-          </provider>
-        </entry>
-      </file>
-      <file pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/src/config/diff/index.js">
-          <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="285">
-              <caret line="15" column="23" selection-start-line="15" selection-start-column="23" selection-end-line="15" selection-end-column="23" />
-              <folding>
-                <element signature="e#0#39#0" expanded="true" />
-              </folding>
+            <state relative-caret-position="589">
+              <caret line="31" column="29" lean-forward="true" selection-start-line="31" selection-start-column="29" selection-end-line="31" selection-end-column="29" />
             </state>
           </provider>
         </entry>
       </file>
       <file pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/src/config/index.css">
+        <entry file="file://$PROJECT_DIR$/src/graphiql/index.css">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="361">
-              <caret line="19" selection-start-line="19" selection-end-line="19" />
+            <state relative-caret-position="304">
+              <caret line="16" column="23" selection-start-line="16" selection-start-column="23" selection-end-line="16" selection-end-column="23" />
             </state>
           </provider>
         </entry>
@@ -155,8 +146,8 @@
       <file pinned="false" current-in-tab="false">
         <entry file="file://$PROJECT_DIR$/src/schema/change/index.js">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="1064">
-              <caret line="56" column="31" selection-start-line="56" selection-start-column="31" selection-end-line="56" selection-end-column="31" />
+            <state relative-caret-position="508">
+              <caret line="108" column="38" lean-forward="true" selection-start-line="108" selection-start-column="38" selection-end-line="108" selection-end-column="38" />
               <folding>
                 <element signature="e#0#39#0" expanded="true" />
               </folding>
@@ -167,8 +158,8 @@
       <file pinned="false" current-in-tab="false">
         <entry file="file://$PROJECT_DIR$/src/index.js">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="285">
-              <caret line="15" lean-forward="true" selection-start-line="15" selection-end-line="15" />
+            <state relative-caret-position="323">
+              <caret line="17" lean-forward="true" selection-start-line="17" selection-end-line="17" />
               <folding>
                 <element signature="e#0#26#0" expanded="true" />
               </folding>
@@ -176,11 +167,28 @@
           </provider>
         </entry>
       </file>
+      <file pinned="false" current-in-tab="false">
+        <entry file="file://$PROJECT_DIR$/src/app/logo.png">
+          <provider selected="true" editor-type-id="images" />
+        </entry>
+      </file>
       <file pinned="false" current-in-tab="false">
         <entry file="file://$PROJECT_DIR$/src/index.css">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="266">
-              <caret line="14" selection-start-line="14" selection-end-line="14" />
+            <state relative-caret-position="608">
+              <caret line="32" column="19" selection-start-line="32" selection-start-column="19" selection-end-line="32" selection-end-column="19" />
+            </state>
+          </provider>
+        </entry>
+      </file>
+      <file pinned="false" current-in-tab="false">
+        <entry file="file://$PROJECT_DIR$/src/schema/index.js">
+          <provider selected="true" editor-type-id="text-editor">
+            <state relative-caret-position="145">
+              <caret line="69" column="22" lean-forward="true" selection-start-line="69" selection-start-column="22" selection-end-line="69" selection-end-column="22" />
+              <folding>
+                <element signature="e#0#39#0" expanded="true" />
+              </folding>
             </state>
           </provider>
         </entry>
@@ -216,6 +224,8 @@
       <find>ADD SC</find>
       <find>add</find>
       <find>console.log</find>
+      <find>api</find>
+      <find>style</find>
     </findStrings>
   </component>
   <component name="Git.Settings">
@@ -244,8 +254,10 @@
         <option value="$PROJECT_DIR$/src/config/index.js" />
         <option value="$PROJECT_DIR$/src/config/diff/index.js" />
         <option value="$PROJECT_DIR$/package.json" />
-        <option value="$PROJECT_DIR$/src/app/index.js" />
         <option value="$PROJECT_DIR$/src/index.js" />
+        <option value="$PROJECT_DIR$/src/index.css" />
+        <option value="$PROJECT_DIR$/node_modules/react-apollo/Query.d.ts" />
+        <option value="$PROJECT_DIR$/src/app/index.js" />
       </list>
     </option>
   </component>
@@ -266,12 +278,12 @@
     </packageJsonPaths>
   </component>
   <component name="ProjectFrameBounds">
-    <option name="x" value="973" />
-    <option name="y" value="17" />
+    <option name="x" value="469" />
+    <option name="y" value="76" />
     <option name="width" value="2063" />
     <option name="height" value="1341" />
   </component>
-  <component name="ProjectLevelVcsManager">
+  <component name="ProjectLevelVcsManager" settingsEditedManually="true">
     <ConfirmationsSetting value="2" id="Add" />
   </component>
   <component name="ProjectView">
@@ -303,6 +315,19 @@
               <item name="src" type="462c0819:PsiDirectoryNode" />
               <item name="app" type="462c0819:PsiDirectoryNode" />
             </path>
+            <path>
+              <item name="online" type="b2602c69:ProjectViewProjectNode" />
+              <item name="online" type="462c0819:PsiDirectoryNode" />
+              <item name="src" type="462c0819:PsiDirectoryNode" />
+              <item name="schema" type="462c0819:PsiDirectoryNode" />
+            </path>
+            <path>
+              <item name="online" type="b2602c69:ProjectViewProjectNode" />
+              <item name="online" type="462c0819:PsiDirectoryNode" />
+              <item name="src" type="462c0819:PsiDirectoryNode" />
+              <item name="schema" type="462c0819:PsiDirectoryNode" />
+              <item name="change" type="462c0819:PsiDirectoryNode" />
+            </path>
           </expand>
           <select />
         </subPane>
@@ -321,14 +346,15 @@
     <property name="nodejs_package_manager_path" value="yarn" />
     <property name="prettierjs.PrettierConfiguration.Package" value="$PROJECT_DIR$/node_modules/prettier" />
     <property name="settings.editor.selected.configurable" value="preferences.sourceCode.JavaScript" />
+    <property name="ts.external.directory.path" value="$APPLICATION_HOME_DIR$/plugins/JavaScriptLanguage/jsLanguageServicesImpl/external" />
   </component>
   <component name="RecentsManager">
     <key name="MoveFile.RECENT_KEYS">
+      <recent name="$PROJECT_DIR$/src/app" />
       <recent name="$PROJECT_DIR$/src/config" />
       <recent name="$PROJECT_DIR$/public" />
       <recent name="$PROJECT_DIR$/src/schema" />
       <recent name="$PROJECT_DIR$/src/graphiql" />
-      <recent name="$PROJECT_DIR$/src/app" />
     </key>
   </component>
   <component name="RunDashboard">
@@ -353,25 +379,24 @@
       <option name="number" value="Default" />
       <option name="presentableId" value="Default" />
       <updated>1540954591627</updated>
-      <workItem from="1540954593719" duration="75728000" />
+      <workItem from="1540954593719" duration="75927000" />
+      <workItem from="1541378899580" duration="1667000" />
+      <workItem from="1541395110197" duration="14427000" />
     </task>
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="75728000" />
+    <option name="totallyTimeSpent" value="92021000" />
   </component>
   <component name="ToolWindowManager">
-    <frame x="973" y="17" width="2063" height="1341" extended-state="0" />
+    <frame x="469" y="76" width="2063" height="1341" extended-state="0" />
     <editor active="true" />
     <layout>
-      <window_info id="npm" side_tool="true" />
-      <window_info id="Favorites" side_tool="true" />
       <window_info content_ui="combo" id="Project" order="0" visible="true" weight="0.12340842" />
       <window_info id="Structure" order="1" side_tool="true" weight="0.25" />
-      <window_info anchor="bottom" id="Docker" show_stripe_button="false" />
-      <window_info anchor="bottom" id="Version Control" show_stripe_button="false" />
-      <window_info active="true" anchor="bottom" id="Terminal" visible="true" weight="0.26581264" />
-      <window_info anchor="bottom" id="Event Log" side_tool="true" />
+      <window_info id="npm" order="2" side_tool="true" />
+      <window_info id="Favorites" order="3" side_tool="true" />
+      <window_info anchor="bottom" id="TypeScript" />
       <window_info anchor="bottom" id="Message" order="0" />
       <window_info anchor="bottom" id="Find" order="1" weight="0.47317854" />
       <window_info anchor="bottom" id="Run" order="2" />
@@ -379,6 +404,10 @@
       <window_info anchor="bottom" id="Cvs" order="4" weight="0.25" />
       <window_info anchor="bottom" id="Inspection" order="5" weight="0.4" />
       <window_info anchor="bottom" id="TODO" order="6" />
+      <window_info anchor="bottom" id="Docker" order="7" show_stripe_button="false" />
+      <window_info anchor="bottom" id="Version Control" order="8" show_stripe_button="false" />
+      <window_info anchor="bottom" id="Event Log" order="9" side_tool="true" />
+      <window_info active="true" anchor="bottom" id="Terminal" order="10" visible="true" weight="0.26421136" />
       <window_info anchor="right" id="Commander" internal_type="SLIDING" order="0" type="SLIDING" weight="0.4" />
       <window_info anchor="right" id="Ant Build" order="1" weight="0.25" />
       <window_info anchor="right" content_ui="combo" id="Hierarchy" order="2" weight="0.25" />
@@ -408,25 +437,9 @@
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/App.test.js">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="95">
-          <caret line="5" column="41" selection-start-line="5" selection-start-column="41" selection-end-line="5" selection-end-column="41" />
-          <folding>
-            <element signature="e#0#26#0" expanded="true" />
-          </folding>
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/src/app.css">
-      <provider selected="true" editor-type-id="text-editor" />
-    </entry>
-    <entry file="file://$PROJECT_DIR$/yarn.lock">
-      <provider selected="true" editor-type-id="text-editor" />
-    </entry>
-    <entry file="file://$PROJECT_DIR$/package-lock.json">
-      <provider selected="true" editor-type-id="text-editor" />
-    </entry>
+    <entry file="file://$PROJECT_DIR$/src/App.test.js" />
+    <entry file="file://$PROJECT_DIR$/src/app.css" />
+    <entry file="file://$PROJECT_DIR$/package-lock.json" />
     <entry file="file://$PROJECT_DIR$/public/favicon.ico">
       <provider selected="true" editor-type-id="images" />
     </entry>
@@ -436,38 +449,27 @@
     <entry file="file://$PROJECT_DIR$/public/manifest.json">
       <provider selected="true" editor-type-id="text-editor" />
     </entry>
+    <entry file="file://$PROJECT_DIR$/src/graphiql/index.js" />
     <entry file="file://$PROJECT_DIR$/src/config/index.js">
-      <provider selected="true" editor-type-id="text-editor" />
-    </entry>
-    <entry file="file://$PROJECT_DIR$/src/graphiql/index.js">
-      <provider selected="true" editor-type-id="text-editor" />
-    </entry>
-    <entry file="file://$PROJECT_DIR$/src/schema/index.js">
-      <provider selected="true" editor-type-id="text-editor" />
-    </entry>
-    <entry file="file://$PROJECT_DIR$/public/logo.png">
-      <provider selected="true" editor-type-id="images" />
-    </entry>
-    <entry file="file://$PROJECT_DIR$/src/schema/index.css">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="380">
-          <caret line="20" column="10" selection-start-line="20" selection-start-column="10" selection-end-line="20" selection-end-column="10" />
+        <state relative-caret-position="260">
+          <caret line="58" column="44" selection-start-line="58" selection-start-column="33" selection-end-line="58" selection-end-column="44" />
+          <folding>
+            <element signature="e#0#39#0" expanded="true" />
+          </folding>
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/schema/change/index.js">
+    <entry file="file://$PROJECT_DIR$/package.json">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="1064">
-          <caret line="56" column="31" selection-start-line="56" selection-start-column="31" selection-end-line="56" selection-end-column="31" />
-          <folding>
-            <element signature="e#0#39#0" expanded="true" />
-          </folding>
+        <state relative-caret-position="627">
+          <caret line="33" column="23" selection-start-line="33" selection-start-column="23" selection-end-line="33" selection-end-column="23" />
         </state>
       </provider>
     </entry>
     <entry file="file://$PROJECT_DIR$/src/serviceWorker.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="418">
+        <state relative-caret-position="399">
           <caret line="22" column="34" selection-start-line="22" selection-start-column="34" selection-end-line="22" selection-end-column="34" />
           <folding>
             <element signature="n#!!doc" expanded="true" />
@@ -475,17 +477,10 @@
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/index.css">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="266">
-          <caret line="14" selection-start-line="14" selection-end-line="14" />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/src/schema/index.js">
+    <entry file="file://$PROJECT_DIR$/src/config/diff/index.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="145">
-          <caret line="69" column="22" lean-forward="true" selection-start-line="69" selection-start-column="22" selection-end-line="69" selection-end-column="22" />
+        <state relative-caret-position="247">
+          <caret line="15" column="23" selection-start-line="15" selection-start-column="23" selection-end-line="15" selection-end-column="23" />
           <folding>
             <element signature="e#0#39#0" expanded="true" />
           </folding>
@@ -499,68 +494,97 @@
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/config/index.js">
+    <entry file="file://$PROJECT_DIR$/yarn.lock">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="260">
-          <caret line="58" column="44" selection-start-line="58" selection-start-column="33" selection-end-line="58" selection-end-column="44" />
-          <folding>
-            <element signature="e#0#39#0" expanded="true" />
-          </folding>
+        <state relative-caret-position="589">
+          <caret line="31" column="29" lean-forward="true" selection-start-line="31" selection-start-column="29" selection-end-line="31" selection-end-column="29" />
         </state>
       </provider>
     </entry>
     <entry file="file://$PROJECT_DIR$/src/graphiql/index.css">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="124">
+        <state relative-caret-position="304">
           <caret line="16" column="23" selection-start-line="16" selection-start-column="23" selection-end-line="16" selection-end-column="23" />
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/config/diff/index.js">
+    <entry file="file://$PROJECT_DIR$/src/app/logo.png">
+      <provider selected="true" editor-type-id="images" />
+    </entry>
+    <entry file="file://$PROJECT_DIR$/node_modules/react-apollo/Query.d.ts">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="285">
-          <caret line="15" column="23" selection-start-line="15" selection-start-column="23" selection-end-line="15" selection-end-column="23" />
+        <state relative-caret-position="1045">
+          <caret line="55" column="28" selection-start-line="55" selection-start-column="19" selection-end-line="55" selection-end-column="28" />
           <folding>
-            <element signature="e#0#39#0" expanded="true" />
+            <element signature="e#0#31#0" expanded="true" />
           </folding>
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/package.json">
+    <entry file="file://$PROJECT_DIR$/src/schema/index.css">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="627">
-          <caret line="33" column="23" selection-start-line="33" selection-start-column="23" selection-end-line="33" selection-end-column="23" />
+        <state relative-caret-position="380">
+          <caret line="20" column="10" selection-start-line="20" selection-start-column="10" selection-end-line="20" selection-end-column="10" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/index.css">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="608">
+          <caret line="32" column="19" selection-start-line="32" selection-start-column="19" selection-end-line="32" selection-end-column="19" />
         </state>
       </provider>
     </entry>
     <entry file="file://$PROJECT_DIR$/src/index.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="285">
-          <caret line="15" lean-forward="true" selection-start-line="15" selection-end-line="15" />
+        <state relative-caret-position="323">
+          <caret line="17" lean-forward="true" selection-start-line="17" selection-end-line="17" />
           <folding>
             <element signature="e#0#26#0" expanded="true" />
           </folding>
         </state>
       </provider>
     </entry>
+    <entry file="file://$PROJECT_DIR$/src/schema/index.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="145">
+          <caret line="69" column="22" lean-forward="true" selection-start-line="69" selection-start-column="22" selection-end-line="69" selection-end-column="22" />
+          <folding>
+            <element signature="e#0#39#0" expanded="true" />
+          </folding>
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/schema/change/index.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="508">
+          <caret line="108" column="38" lean-forward="true" selection-start-line="108" selection-start-column="38" selection-end-line="108" selection-end-column="38" />
+          <folding>
+            <element signature="e#0#39#0" expanded="true" />
+          </folding>
+        </state>
+      </provider>
+    </entry>
     <entry file="file://$PROJECT_DIR$/src/app/index.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="2565">
-          <caret line="239" column="4" lean-forward="true" selection-start-line="239" selection-start-column="4" selection-end-line="239" selection-end-column="4" />
+        <state relative-caret-position="555">
+          <caret line="297" column="43" selection-start-line="297" selection-start-column="43" selection-end-line="297" selection-end-column="43" />
           <folding>
             <element signature="e#0#39#0" expanded="true" />
-            <element signature="e#641#756#0" />
-            <element signature="e#779#911#0" />
-            <element signature="e#928#1053#0" />
-            <element signature="e#1072#1203#0" />
-            <element signature="e#1222#1349#0" />
-            <element signature="e#1367#1485#0" />
-            <element signature="e#1602#1711#0" />
-            <element signature="e#1729#1767#0" />
-            <element signature="e#1876#2002#0" />
-            <element signature="e#967#1544#0" />
-            <element signature="e#1058#1636#0" />
-            <element signature="e#1114#1636#0" />
+            <element signature="e#501#3915#0" />
+            <element signature="e#648#757#0" />
+            <element signature="e#775#895#0" />
+            <element signature="e#913#1044#0" />
+            <element signature="e#1062#1188#0" />
+            <element signature="e#1206#1338#0" />
+            <element signature="e#1356#1483#0" />
+            <element signature="e#1501#1619#0" />
+            <element signature="e#1736#1845#0" />
+            <element signature="e#1863#1992#0" />
+            <element signature="e#2010#2136#0" />
+            <element signature="e#2243#2622#0" />
+            <element signature="e#2688#3897#0" />
+            <element signature="e#3932#4726#0" />
           </folding>
         </state>
       </provider>

src/app/index.js

@@ -1,23 +1,29 @@
 import React, {Component} from 'react';
 import Config from '../config';
 import Schema from '../schema';
-import {Menu, Row, Col} from 'antd';
+import {Layout, Menu, Input, Button} from 'antd';
 
 import '../graphiql/index.css';
+import logo from './logo.png';
 
 import GraphiQL from 'graphiql';
 import fetch from 'isomorphic-fetch';
+import gql from "graphql-tag";
+import {Query} from "react-apollo";
+
+const {Header, Content} = Layout;
+
 
 class App extends Component {
   constructor() {
     super();
     this.state = {
       current: 'schema',
+      userID: '',
+      hasLogin: false,
       user: {
-        username: 'ioobot',
-        password: 'ioo123',
-        nickname: 'xy',
-        email: 'xy@ioobot.com'
+        nickname: '',
+        avatar: ''
       },
       schemas: [
         {
@@ -159,12 +165,12 @@ class App extends Component {
       configs: [
         {
           name: 'Tenc and Mongo',
-          schemas: ['magazine', 'store'],
+          schemas: ['magazineApp', 'store'],
           cloudServer: 'tencent',
           database: 'mongodb',
           configLocal: {
             SCF_secretID: 'scfscfscfididididiid',
-            SCF_secretKey: 'scfscfscfkeykeykeykeykey',
+            SCF_secretKey: 'i_am_a_key',
             API_secretID: 'apiapiapiididididiid',
             API_secretKey: 'apiapipaikeykeykey'
           }
@@ -182,8 +188,11 @@ class App extends Component {
           }
         }
       ],
-      api: 'http://service-ci2tk8iu-1254337200.ap-guangzhou.apigateway.myqcloud.com/release/graphql'
-    }
+      //api: 'http://service-ci2tk8iu-1254337200.ap-guangzhou.apigateway.myqcloud.com/release/graphql',
+      // 便于开发调试，请删除并换成上面
+      api: 'http://service-eucrnpse-1254337200.ap-guangzhou.apigateway.myqcloud.com/release/graphql'
+    };
+
   }
 
   addSchema = (name) => {
@@ -199,7 +208,7 @@ class App extends Component {
     let schemas = this.state.schemas;
     let targetSchema = schemas.find(obj => obj.name === schemaName);
     let targetTable = targetSchema.tables.find(obj => obj.name === tableName);
-    if(targetTable === undefined) {
+    if (targetTable === undefined) {
       targetSchema.tables.push({name: tableName, cols: columns})
     } else {
       targetTable.cols = columns
@@ -220,7 +229,7 @@ class App extends Component {
   };
 
   addConfig = (content, name) => {
-    if(content === 'new') {
+    if (content === 'new') {
       this.setState({
         configs: [...this.state.configs, {
           name,
@@ -262,46 +271,122 @@ class App extends Component {
     }).then(response => response.json());
   };
 
-  render() {
+  login = (id) => {
+    const GET_USER = gql`
+        query USER($id: ID!) {
+          user_by_id(id: $id) {
+            avatar,
+            nickname
+          }
+        }
+      `;
     return (
-      <div>
-        <Row>
-          <Col span={6}>
-            <div className='logo'>ioobot</div>
-          </Col>
-          <Col span={18}>
-            <Menu
-              onClick={this.handleClick}
-              selectedKeys={[this.state.current]}
-              mode="horizontal"
-            >
-              <Menu.Item key="schema">
-                SCHEMA
-              </Menu.Item>
-              <Menu.Item key="config">
-                CONFIG
-              </Menu.Item>
-              <Menu.Item key="graphiql">
-                GRAPHIQL
-              </Menu.Item>
-            </Menu>
-          </Col>
-        </Row>
-        <div>
-          {
-            (() => {
-              switch (this.state.current) {
-                case 'schema':
-                  return <Schema addSchema={this.addSchema} addTable={this.addTable} deleteTable={this.deleteTable} schemas={this.state.schemas}/>;
-                case 'config':
-                  return <Config addConfig={this.addConfig} deleteConfig={this.deleteConfig} schemas={this.state.schemas} configs={this.state.configs}/>;
-                default:
-                  return <GraphiQL fetcher={this.graphQLFetcher}/>
-              }
-            })()
+      <Query query={GET_USER} variables={{id}}>
+        {
+          ({loading, error, data}) => {
+            if (loading) {
+              console.log('loading');
+              return 'loading';
+            }
+            if (error) {
+              console.log('error');
+              return 'error';
+            }
+
+            // 不可使用 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);
+            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
+              return (
+                <div>
+                  <span style={{marginRight: '10px'}}>welcome, {data.user_by_id.nickname}</span>
+                  <Button onClick={()=> {this.setState({hasLogin: false})}}>exit</Button>
+                </div>
+              );
           }
-        </div>
-      </div>
+        }
+      </Query>
+    )
+  };
+
+  render() {
+    return (
+      <Layout>
+        <Header className="header">
+          <div className='logo'><img src={logo} alt="logo"/></div>
+          <Menu
+            onClick={this.handleClick}
+            selectedKeys={[this.state.current]}
+            mode="horizontal"
+            style={{lineHeight: '64px'}}
+            theme="dark"
+          >
+            <Menu.Item key="schema">
+              SCHEMA
+            </Menu.Item>
+            <Menu.Item key="config">
+              CONFIG
+            </Menu.Item>
+            <Menu.Item key="graphiql">
+              GRAPHIQL
+            </Menu.Item>
+          </Menu>
+          <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>
+        <Content style={{padding: '0 50px'}}>
+
+          <div>
+            {
+              (() => {
+                switch (this.state.current) {
+                  case 'schema':
+                    return <Schema addSchema={this.addSchema} addTable={this.addTable} deleteTable={this.deleteTable}
+                                   schemas={this.state.schemas}/>;
+                  case 'config':
+                    return <Config addConfig={this.addConfig} deleteConfig={this.deleteConfig}
+                                   schemas={this.state.schemas} configs={this.state.configs}/>;
+                  default:
+                    return <GraphiQL fetcher={this.graphQLFetcher}/>
+                }
+              })()
+            }
+          </div>
+        </Content>
+      </Layout>
+
     );
   }
 }

src/index.css

@@ -12,3 +12,23 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
+
+.logo {
+  width: 25%;
+  height: 31px;
+  padding: 16px 24px 16px 70px;
+  float: left;
+}
+.logo img {
+  width: 25%;
+  padding: 0 0 40px 20px
+}
+
+.login {
+  width: 25%;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  color: #ffffff;
+  line-height: 31px;
+}

src/index.js

@@ -9,7 +9,7 @@ import { ApolloProvider } from "react-apollo";
 
 const client = new ApolloClient({
   // xySchema api
-  uri: "http://service-fi3bl4hs-1254337200.ap-guangzhou.apigateway.myqcloud.com/release/graphql"
+  uri: "http://service-eucrnpse-1254337200.ap-guangzhou.apigateway.myqcloud.com/release/graphql"
 });
 
 ReactDOM.render(<ApolloProvider client={client}><App /></ApolloProvider>, document.getElementById('root'));