From c78e06bf217a866d7772b81782bacb9803d1d41f Mon Sep 17 00:00:00 2001
From: "Chen.Zhidong" <zhidong.chen@jimeng.io>
Date: Fri, 18 Jan 2019 01:05:49 +0800
Subject: [PATCH] Add Username and Password support

---
 src/components/Main.js     |  4 ++--
 src/components/Settings.js | 34 ++++++++++++++++++++++++++++++----
 src/utils/InfluxAPI.js     | 22 +++++++++++++++++-----
 src/utils/SettingsAPI.js   |  6 ++++--
 4 files changed, 53 insertions(+), 13 deletions(-)

diff --git a/src/components/Main.js b/src/components/Main.js
index c68163e..ae01199 100644
--- a/src/components/Main.js
+++ b/src/components/Main.js
@@ -285,7 +285,7 @@ class Main extends Component {
   _onQuerySubmit= (e) => {
     e.preventDefault();
 
-    InfluxAPI.getQueryResults(this.state.server.url, this.state.database, this.state.queryText);
+    InfluxAPI.getQueryResults(this.state.server.url,this.state.server.username, this.state.server.password, this.state.database, this.state.queryText);
   }
 
   //  Data changed:
@@ -307,4 +307,4 @@ class Main extends Component {
   };
 }
 
-export default Main;
\ No newline at end of file
+export default Main;
diff --git a/src/components/Settings.js b/src/components/Settings.js
index e75cec2..e0f244b 100644
--- a/src/components/Settings.js
+++ b/src/components/Settings.js
@@ -55,12 +55,14 @@ class Settings extends Component {
                       <tr>
                         <th>Name</th>
                         <th>Url</th>
+                        <th>Username</th>
+                        <th>Password</th>
                         <th>Actions</th>
                       </tr>
                     </thead>
                     <tbody>
                       {this.state.Servers.map(function(server, index) {
-                          return <tr key={index}><td>{server.name}</td><td>{server.url}</td><td><DeleteButton name={server.name} onDelete={this._onRemoveServerClick} /></td></tr>;
+                          return <tr key={index}><td>{server.name}</td><td>{server.url}</td><td>{server.username}</td><td>{server.password && "*"}</td><td><DeleteButton name={server.name} onDelete={this._onRemoveServerClick} /></td></tr>;
                       }, this)}
                     </tbody>
                   </table>
@@ -78,6 +80,16 @@ class Settings extends Component {
                         <input type="url" className="form-control" id="txtAddUrl" value={this.state.AddServerUrl} onChange={this._onAddServerUrlChange} placeholder="http://dev.server:8086" required/>
                       </div>
 
+                      <div className="col">
+                        <label className="sr-only" htmlFor="txtAddUsername">Username</label>
+                        <input type="text" className="form-control" id="txtAddUsername" value={this.state.AddServerUsername} onChange={this._onAddServerUsernameChange} placeholder="username" autoComplete="off"/>
+                      </div>
+
+                      <div className="col">
+                        <label className="sr-only" htmlFor="txtAddPassword">Password</label>
+                        <input type="password" className="form-control" id="txtAddPassword" value={this.state.AddServerPassword} onChange={this._onAddServerPasswordChange} placeholder="password" autoComplete="off"/>
+                      </div>
+
                       <div className="col">
                         <button type="submit" className="btn btn-secondary">Add</button>
                       </div>
@@ -107,6 +119,18 @@ class Settings extends Component {
     });
   }
 
+  _onAddServerUsernameChange = (e) => {
+    this.setState({
+      AddServerUsername: e.target.value
+    });
+  }
+
+  _onAddServerPasswordChange = (e) => {
+    this.setState({
+      AddServerPassword: e.target.value
+    });
+  }
+
   _onAddServerClick = (e) => {
     e.preventDefault();
 
@@ -126,7 +150,7 @@ class Settings extends Component {
 
     //  Add the server
     console.log("Adding server..." + this.state.AddServerName);
-    SettingsAPI.addServer(this.state.AddServerName, serverUrl);
+    SettingsAPI.addServer(this.state.AddServerName, serverUrl, this.state.AddServerUsername, this.state.AddServerPassword);
     
     //  If we have a current server:
     if(SettingsStore.haveCurrentServer()){
@@ -134,14 +158,16 @@ class Settings extends Component {
       let currentServer = SettingsStore.getCurrentServer();
 
       //  Reset the database list:
-      InfluxAPI.getDatabaseList(currentServer.url);
+      InfluxAPI.getDatabaseList(currentServer.url, currentServer.username, currentServer.password);
     }
 
     //  Clear the add server fields:
     this.setState(
       {
         AddServerName: "",
-        AddServerUrl: ""
+        AddServerUrl: "",
+        AddServerUsername: "",
+        AddServerPassword: "",
       }
     );
 
diff --git a/src/utils/InfluxAPI.js b/src/utils/InfluxAPI.js
index d03dc76..5e7313b 100644
--- a/src/utils/InfluxAPI.js
+++ b/src/utils/InfluxAPI.js
@@ -5,7 +5,7 @@ import SettingsActions from '../actions/SettingsActions';
 class InfluxAPI {
     
         // Executes a query and gets the results
-        getQueryResults(serverurl, database, query){
+        getQueryResults(serverurl,username, password, database, query){
 
             if(serverurl === "" || database === "")
             {
@@ -16,8 +16,14 @@ class InfluxAPI {
             //  Set the request
             QueryActions.receiveQueryRequest(query, serverurl, database);
             
+            // build auth query params
+            let auth = ""
+            if (username !== undefined && username !== "" && password !== undefined && username !== "") {
+                auth = "&u=" + username + "&p=" + password
+            }
+
             //  Encode and Interpolate the values
-            let url = `${serverurl}/query?q=${encodeURIComponent(query)}&db=${database}`;
+            let url = `${serverurl}/query?q=${encodeURIComponent(query)}`+auth+`&db=${database}`;
             url = url.replace(/%20/g, "+");
 
             fetch(url, 
@@ -40,16 +46,22 @@ class InfluxAPI {
         }
 
         //  Gets the list of databases for the given server
-        getDatabaseList(serverurl) {
+        getDatabaseList(serverurl, username, password) {
 
             if(!serverurl)
             {
                 console.log("Can't execute query: server is blank"); 
                 return; 
             }
+
+            // build auth query params
+            let auth = ""
+            if(username !== undefined && password !== undefined){
+                auth = "&u="+username+"&p="+password
+            }
             
             //  Encode and Interpolate the values
-            let url = `${serverurl}/query?q=SHOW+DATABASES&db=`;
+            let url = `${serverurl}/query?q=SHOW+DATABASES`+auth+`&db=`;
             url = url.replace(/%20/g, "+");
 
             fetch(url, 
@@ -75,4 +87,4 @@ class InfluxAPI {
     
     }
     
-    export default new InfluxAPI();
\ No newline at end of file
+    export default new InfluxAPI();
diff --git a/src/utils/SettingsAPI.js b/src/utils/SettingsAPI.js
index 2913fdd..eb89c02 100644
--- a/src/utils/SettingsAPI.js
+++ b/src/utils/SettingsAPI.js
@@ -19,7 +19,7 @@ class SettingsAPI {
         }
 
         //  Adds a server to the list
-        addServer(name, url) {
+        addServer(name, url, username, password) {
             //  First, get the current list of servers
             let servers = store.get('servers') || [];
 
@@ -29,6 +29,8 @@ class SettingsAPI {
                 let newServer = {};
                 newServer.name = name;
                 newServer.url = url;
+                newServer.username = username;
+                newServer.password = password;
                 servers.push(newServer);
             }
 
@@ -72,4 +74,4 @@ class SettingsAPI {
     
     }
     
-    export default new SettingsAPI();
\ No newline at end of file
+    export default new SettingsAPI();