Redo settings, now has SSL mode

lib/App.jsx

@@ -31,7 +31,8 @@ var App = React.createClass({
       var store = DomainStore.find(domain);
       if(store) {
         if(settings) {
-          content.push(<Settings key="settings" domain={domain} settings={store} />);
+          DomainStore.loadSettings(domain);
+          content.push(<Settings key="settings" domain={domain} settings={store.settings} />);
         }
         else {
           DomainStore.loadRecords(domain);

lib/cloudflare.js

@@ -33,6 +33,7 @@ module.exports = {
   recordAdd: makeCall('POST', '/zones/:zoneId/dns_records'),
   recordEdit: makeCall('PUT', '/zones/:zoneId/dns_records/:recId'),
   recordDelete: makeCall('DELETE', '/zones/:zoneId/dns_records/:recId'),
-  setDevelopmentMode: makeCall('PATCH', '/zones/:zoneId/settings/development_mode'),
+  settings: makeCall('GET', '/zones/:zoneId/settings'),
+  settingChange: makeCall('PATCH', '/zones/:zoneId/settings/:setting'),
   purgeCache: makeCall('DELETE', '/zones/:zoneId/purge_cache')
 };

lib/stores.js

@@ -19,6 +19,21 @@ function loadRecords(name) {
   });
 }
 
+function loadSettings(name) {
+  var domain = findDomain(name);
+  if(domain.settings.count() > 0) {
+    return;
+  }
+  cloudflare.settings(domain.id.val()).then(function(data) {
+    data.result.forEach(function(setting) {
+      if(setting.id == 'development_mode') {
+        setting.timestamp = Date.now() / 1000 + setting.time_remaining;
+      }
+    });
+    domain.settings.set(data.result);
+  });
+}
+
 function recordAdd(name, record) {
   var domain = findDomain(name);
   return cloudflare.recordAdd(domain.id.val(), record).then(function(data) {
@@ -52,12 +67,15 @@ function recordDelete(name, id) {
   });
 }
 
-function setDevelopmentMode(name, value) {
+function settingChange(name, setting, value) {
   var domain = findDomain(name);
-  return cloudflare.setDevelopmentMode(domain.id.val(), {value: value ? 'on' : 'off'}).then(function(data) {
+  var params = {zoneId: domain.id.val(), setting: setting};
+  return cloudflare.settingChange(params, {value: value}).then(function(data) {
     if(data.success) {
-      var time = Date.now() / 1000 + (data.result.time_remaining || 0);
-      domain.development_mode.set(time);
+      if(data.result.id == 'development_mode') {
+        data.result.timestamp = Date.now() / 1000 + data.result.time_remaining;
+      }
+      domain.settings.find(function(s) { return s.id.val() == setting }).set(data.result);
     }
   });
 }
@@ -68,8 +86,8 @@ function purgeCache(name) {
 
 cloudflare.domains().then(function(data) {
   data.result.forEach(function(domain) {
-    domain.development_mode = Date.now() / 1000 + domain.development_mode;
     domain.records = [];
+    domain.settings = [];
   });
   DomainCortex.set(data.result);
 });
@@ -80,9 +98,10 @@ module.exports = {
     recordAdd: recordAdd,
     recordEdit: recordEdit,
     recordDelete: recordDelete,
-    setDevelopmentMode: setDevelopmentMode,
+    settingChange: settingChange,
     purgeCache: purgeCache,
     loadRecords: loadRecords,
+    loadSettings: loadSettings,
     cortex: DomainCortex
   }
 };

lib/ui/Settings.jsx

@@ -11,15 +11,16 @@ var DevModeToggle = React.createClass({
   },
   toggleDevMode: function() {
     this.setState({toggling: true});
-    DomainStore.setDevelopmentMode(this.props.domain, this.props.devMode * 1000 <= Date.now());
+    var newValue = this.props.setting.timestamp * 1000 <= Date.now();
+    DomainStore.settingChange(this.props.domain, 'development_mode', newValue ? 'on' : 'off');
   },
   render: function() {
-    var active = this.props.devMode * 1000 > Date.now();
+    var active = this.props.setting.timestamp * 1000 > Date.now();
     if(this.state.toggling) {
       return <button className="btn btn-warning" disabled>{active ? 'Disabling...' : 'Enabling...'}</button>
     }
     else if(active) {
-      var date = new Date(this.props.devMode*1000);
+      var date = new Date(this.props.setting.timestamp*1000);
       return (
         <div>
           <button className='btn btn-success' onClick={this.toggleDevMode}>On</button>
@@ -32,6 +33,45 @@ var DevModeToggle = React.createClass({
     }
   }
 });
+
+var SSLToggle = React.createClass({
+  options: [
+    {value: 'off', name: 'Off'},
+    {value: 'flexible', name: 'Flexible'},
+    {value: 'full', name: 'Full'},
+    {value: 'full_strict', name: 'Full (Strict)'}
+  ],
+  getInitialState: function() {
+    return {toggling: false};
+  },
+  componentWillReceiveProps: function() {
+    this.setState({toggling: false});
+  },
+  setSSLMode: function(event) {
+    this.setState({toggling: true});
+    var unToggle = function() {
+      this.setState({toggling: false});
+    }.bind(this);
+    DomainStore.settingChange(this.props.domain, 'ssl', event.target.value).then(unToggle, unToggle);
+  },
+  render: function() {
+    var options = this.options.map(function(opt) {
+      return <option key={opt.value} value={opt.value}>{opt.name}</option>
+    });
+    var updating = <option>Updating...</option>
+    return (
+      <select
+        className="form-control ssl"
+        disabled={this.state.toggling}
+        onChange={this.setSSLMode}
+        value={this.props.setting.value}
+      >
+        {this.state.toggling ? updating : options}
+      </select>
+    )
+  }
+});
+
 var PurgeButton = React.createClass({
   getInitialState: function() {
     return {purging: false, failed: false};
@@ -62,22 +102,44 @@ var PurgeButton = React.createClass({
   }
 });
 var Settings = React.createClass({
+  settingMap: {
+    'development_mode': {
+      title: 'Development Mode',
+      component: DevModeToggle
+    },
+    'ssl': {
+      title: 'SSL Mode',
+      component: SSLToggle
+    }
+  },
   render: function() {
-    if(!this.props.settings.val()) {
+    if(this.props.settings.count() == 0) {
       return <div className="alert alert-info">Loading...</div>
     }
 
+    var settings = this.props.settings.map(function(setting) {
+      var opts = this.settingMap[setting.id.val()];
+      if(opts != undefined) {
+        return (
+          <tr key={setting.id.val()}>
+            <td>{opts.title}</td>
+            <td><opts.component domain={this.props.domain} setting={setting.val()} /></td>
+          </tr>
+        )
+      }
+      return null;
+    }.bind(this));
+
     return (
       <div>
         <table className="table">
-          <tr>
-            <td>Development Mode</td>
-            <td><DevModeToggle domain={this.props.domain} devMode={this.props.settings.development_mode.val()} /></td>
-          </tr>
-          <tr>
-            <td>Purge Cache</td>
-            <td><PurgeButton domain={this.props.domain} /></td>
-          </tr>
+          <tbody>
+            <tr>
+              <td>Purge Cache</td>
+              <td><PurgeButton domain={this.props.domain} /></td>
+            </tr>
+            {settings}
+          </tbody>
         </table>
       </div>
     );

main.css

@@ -53,3 +53,7 @@
 .nav.nav-tabs {
 	margin-bottom: 10px;
 }
+
+.form-control.ssl {
+	width: 10em;
+}