From ca29384e1e24a2eb7b6750cb390dc4c03782205b Mon Sep 17 00:00:00 2001
From: luin <i@zihua.li>
Date: Sun, 4 Dec 2016 12:22:57 +0800
Subject: [PATCH] feat: add support for SSL connection.

Close #41
---
 client/actions.js                             |  3 ++
 .../main/Main/ConnectionSelector/Config.jsx   | 44 ++++++++++++++++---
 package.json                                  |  2 +-
 3 files changed, 42 insertions(+), 7 deletions(-)

diff --git a/client/actions.js b/client/actions.js
index 2d34bf4b..582e8b4c 100644
--- a/client/actions.js
+++ b/client/actions.js
@@ -61,6 +61,9 @@ const actions = {
         dispatch({ type: 'updateConnectStatus', data: 'Redis connecting...' });
         if (config.ssl) {
           config.tls = {
+            ca: config.ca,
+            key: config.key,
+            cert: config.cert
           }
         }
         const redis = new Redis(_.assign({}, config, override, {
diff --git a/client/components/main/Main/ConnectionSelector/Config.jsx b/client/components/main/Main/ConnectionSelector/Config.jsx
index f1c62042..61ce2ab0 100644
--- a/client/components/main/Main/ConnectionSelector/Config.jsx
+++ b/client/components/main/Main/ConnectionSelector/Config.jsx
@@ -35,12 +35,12 @@ class Config extends React.Component {
     if (!this.props.connect && nextProps.connect) {
       this.connect();
     }
-    const leaving =
-      (!this.props.favorite && nextProps.favorite) ||
-      (this.props.favorite && !nextProps.favorite) ||
-      (this.props.favorite.get('key') !== nextProps.favorite.get('key'));
-    if (leaving) {
-      this.setState({ changed: false, data: new Immutable.Map() });
+    if (this.props.favorite || nextProps.favorite) {
+      const leaving = !this.props.favorite || !nextProps.favorite ||
+        (this.props.favorite.get('key') !== nextProps.favorite.get('key'));
+      if (leaving) {
+        this.setState({ changed: false, data: new Immutable.Map() });
+      }
     }
   }
 
@@ -81,6 +81,33 @@ class Config extends React.Component {
     }
   }
 
+  renderCertInput(label, id) {
+    return <div className="nt-form-row">
+      <label htmlFor="cert">{label}:</label>
+      <input
+        type="text"
+        id={id}
+        readOnly={true}
+        value={this.getProp(`${id}File`)}
+        placeholder={`Select ${label} File (PEM)`}
+      />
+      <button
+        className={'icon icon-dot-3 ssh-key'}
+        onClick={() => {
+          const win = remote.getCurrentWindow();
+          const files = remote.require('dialog').showOpenDialog(win, {
+            properties: ['openFile']
+          });
+          if (files && files.length) {
+            const file = files[0];
+            const content = fs.readFileSync(file, 'utf8');
+            this.setProp({ [id]: content, [`${id}File`]: file });
+          }
+        }}
+      ></button>
+    </div>
+  }
+
   render() {
     return <div>
       <div className="nt-box" style={ { width: 500, margin: '60px auto 0' } }>
@@ -104,6 +131,11 @@ class Config extends React.Component {
           <label htmlFor="ssh">SSL:</label>
           <input type="checkbox" id="ssl" onChange={this.handleChange.bind(this, 'ssl')} checked={this.getProp('ssl')} />
         </div>
+        <div style={ { display: this.getProp('ssl') ? 'block' : 'none' } }>
+          {this.renderCertInput('Private Key', 'key')}
+          {this.renderCertInput('Certificate', 'cert')}
+          {this.renderCertInput('CA', 'ca')}
+        </div>
         <div className="nt-form-row">
           <label htmlFor="ssh">SSH Tunnel:</label>
           <input type="checkbox" id="ssh" onChange={this.handleChange.bind(this, 'ssh')} checked={this.getProp('ssh')} />
diff --git a/package.json b/package.json
index b01aedd7..78583397 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,7 @@
     "form-generator-react": "^1.0.5",
     "human-format": "^0.5.0",
     "immutable": "^3.8.1",
-    "ioredis": "^1.11.1",
+    "ioredis": "^2.4.2",
     "jquery": "^2.1.4",
     "json-editor": "^0.7.23",
     "jsonlint": "^1.6.2",