Advanced settings!

SSL and branch

UI/Config.js

@@ -12,6 +12,10 @@ define(
                 DefaultRootFolderId: 'DefaultRootFolderId'
             },
 
+            getValueBoolean: function (key, defaultValue) {
+                return this.getValue(key, defaultValue) === 'true';
+            },
+
             getValue: function (key, defaultValue) {
 
                 var storeValue = localStorage.getItem(key);
@@ -35,6 +39,5 @@ define(
                 App.vent.trigger(this.Events.ConfigUpdatedEvent, {key: key, value: value});
 
             }
-
         };
     });

UI/Content/Overrides/bootstrap.toggle-switch.less

@@ -5,7 +5,7 @@
   .slide-button {
     .buttonBackground(@btnDangerBackground, @btnDangerBackgroundHighlight);
 
-    &.btn-danger {
+    &.btn-danger, &.btn-warning {
       .buttonBackground(@btnInverseBackground, @btnInverseBackgroundHighlight);
     }
   }
@@ -16,5 +16,9 @@
     &.btn-danger {
       .buttonBackground(@btnDangerBackground, @btnDangerBackgroundHighlight);
     }
+
+    &.btn-warning {
+      .buttonBackground(@btnWarningBackground, @btnWarningBackgroundHighlight);
+    }
   }
 }

UI/Settings/General/GeneralTemplate.html

@@ -7,11 +7,49 @@
 
             <div class="controls">
                 <input type="number" placeholder="8989" name="port"/>
-                    <span>
+                <span>
-                <i class="icon-nd-form-warning" title="Requires restart to take effect"/>
+                    <i class="icon-nd-form-warning" title="Requires restart to take effect"/>
-            </span>
+                </span>
             </div>
+        </div>
+
+        <div class="control-group advanced-setting">
+            <label class="control-label">Enable SSL</label>
 
+            <div class="controls">
+                <label class="checkbox toggle well">
+                    <input type="checkbox" name="enableSsl" class="x-ssl"/>
+
+                    <p>
+                        <span>Yes</span>
+                        <span>No</span>
+                    </p>
+
+                    <div class="btn btn-primary slide-button"/>
+                </label>
+
+                <span class="help-inline-checkbox">
+                    <i class="icon-nd-form-warning" title="Requires restart running as administrator to take effect"/>
+                </span>
+            </div>
+        </div>
+
+        <div class="x-ssl-options">
+            <div class="control-group advanced-setting">
+                <label class="control-label">SSL Port Number</label>
+
+                <div class="controls">
+                    <input type="number" placeholder="8989" name="sslPort"/>
+                </div>
+            </div>
+
+            <div class="control-group advanced-setting">
+                <label class="control-label">SSL Cert Hash</label>
+
+                <div class="controls">
+                    <input type="number" name="sslCertHash"/>
+                </div>
+            </div>
         </div>
 
         <div class="control-group">
@@ -29,9 +67,9 @@
                     <div class="btn btn-primary slide-button"/>
                 </label>
 
-            <span class="help-inline-checkbox">
+                <span class="help-inline-checkbox">
-                <i class="icon-question-sign" title="Open a web browser and navigate to NzbDrone homepage on app start. Has no effect if installed as a windows service"/>
+                    <i class="icon-nd-form-info" title="Open a web browser and navigate to NzbDrone homepage on app start. Has no effect if installed as a windows service"/>
-            </span>
+                </span>
             </div>
         </div>
     </fieldset>
@@ -51,7 +89,7 @@
                 </label>
 
             <span class="help-inline-checkbox">
-                <i class="icon-question-sign" title="Require Username and Password to access Nzbdrone"/>
+                <i class="icon-nd-form-info" title="Require Username and Password to access Nzbdrone"/>
             </span>
             </div>
         </div>
@@ -91,8 +129,7 @@
         </div>
     </fieldset>
 
-    {{#unless_eq branch compare="master"}}
+    <fieldset class="advanced-setting">
-    <fieldset>
         <legend>Development</legend>
         <div class="alert">
             <i class="icon-nd-warning"></i>
@@ -106,5 +143,4 @@
             </div>
         </div>
     </fieldset>
-    {{/unless_eq}}
 </div>

UI/Settings/General/GeneralView.js

@@ -5,38 +5,56 @@ define(
         'Mixins/AsModelBoundView'
     ], function (Marionette, AsModelBoundView) {
         var view = Marionette.ItemView.extend({
-                template: 'Settings/General/GeneralTemplate',
+            template: 'Settings/General/GeneralTemplate',
+
+            events: {
+                'change .x-auth': '_setAuthOptionsVisibility',
+                'change .x-ssl': '_setSslOptionsVisibility'
+            },
+
+            ui: {
+                authToggle : '.x-auth',
+                authOptions: '.x-auth-options',
+                sslToggle : '.x-ssl',
+                sslOptions: '.x-ssl-options'
+            },
+
+            onRender: function(){
+                if(!this.ui.authToggle.prop('checked')){
+                    this.ui.authOptions.hide();
+                }
 
-                events: {
+                if(!this.ui.sslToggle.prop('checked')){
-                    'change .x-auth': '_setAuthOptionsVisibility'
+                    this.ui.sslOptions.hide();
-                },
+                }
+            },
 
-                ui: {
+            _setAuthOptionsVisibility: function () {
-                    authToggle : '.x-auth',
-                    authOptions: '.x-auth-options'
-                },
 
+                var showAuthOptions = this.ui.authToggle.prop('checked');
 
-                onRender: function(){
+                if (showAuthOptions) {
-                    if(!this.ui.authToggle.prop('checked')){
+                    this.ui.authOptions.slideDown();
-                        this.ui.authOptions.hide();
+                }
-                    }
-                },
 
-                _setAuthOptionsVisibility: function () {
+                else {
+                    this.ui.authOptions.slideUp();
+                }
+            },
 
-                    var showAuthOptions = this.ui.authToggle.prop('checked');
+            _setSslOptionsVisibility: function () {
 
-                    if (showAuthOptions) {
+                var showSslOptions = this.ui.sslToggle.prop('checked');
-                        this.ui.authOptions.slideDown();
-                    }
 
-                    else {
+                if (showSslOptions) {
-                        this.ui.authOptions.slideUp();
+                    this.ui.sslOptions.slideDown();
-                    }
                 }
 
-            });
+                else {
+                    this.ui.sslOptions.slideUp();
+                }
+            }
+        });
 
         return AsModelBoundView.call(view);
     });

UI/Settings/SettingsLayout.js

@@ -14,7 +14,8 @@ define(
         'Settings/Notifications/CollectionView',
         'Settings/Notifications/Collection',
         'Settings/General/GeneralView',
-        'Shared/LoadingView'
+        'Shared/LoadingView',
+        'Config'
     ], function (App,
                  Marionette,
                  SettingsModel,
@@ -28,7 +29,8 @@ define(
                  NotificationCollectionView,
                  NotificationCollection,
                  GeneralView,
-                 LoadingView) {
+                 LoadingView,
+                 Config) {
         return Marionette.Layout.extend({
             template: 'Settings/SettingsLayoutTemplate',
 
@@ -48,7 +50,8 @@ define(
                 indexersTab        : '.x-indexers-tab',
                 downloadClientTab  : '.x-download-client-tab',
                 notificationsTab   : '.x-notifications-tab',
-                generalTab         : '.x-general-tab'
+                generalTab         : '.x-general-tab',
+                advancedSettings    : '.x-advanced-settings'
             },
 
             events: {
@@ -58,7 +61,67 @@ define(
                 'click .x-download-client-tab'  : '_showDownloadClient',
                 'click .x-notifications-tab'    : '_showNotifications',
                 'click .x-general-tab'          : '_showGeneral',
-                'click .x-save-settings'        : '_save'
+                'click .x-save-settings'        : '_save',
+                'change .x-advanced-settings'     : '_toggleAdvancedSettings'
+            },
+
+            initialize: function (options) {
+                if (options.action) {
+                    this.action = options.action.toLowerCase();
+                }
+            },
+
+            onRender: function () {
+                this.loading.show(new LoadingView());
+                var self = this;
+
+                this.settings = new SettingsModel();
+                this.generalSettings = new GeneralSettingsModel();
+                this.namingSettings = new NamingModel();
+                this.indexerSettings = new IndexerCollection();
+                this.notificationSettings = new NotificationCollection();
+
+                $.when(this.settings.fetch(),
+                        this.generalSettings.fetch(),
+                        this.namingSettings.fetch(),
+                        this.indexerSettings.fetch(),
+                        this.notificationSettings.fetch()
+                    ).done(function () {
+                        self.loading.$el.hide();
+                        self.mediaManagement.show(new MediaManagementLayout({ settings: self.settings, namingSettings: self.namingSettings }));
+                        self.quality.show(new QualityLayout({ settings: self.settings }));
+                        self.indexers.show(new IndexerLayout({ settings: self.settings, indexersCollection: self.indexerSettings }));
+                        self.downloadClient.show(new DownloadClientLayout({ model: self.settings }));
+                        self.notifications.show(new NotificationCollectionView({ collection: self.notificationSettings }));
+                        self.general.show(new GeneralView({ model: self.generalSettings }));
+                    });
+
+                this._setAdvancedSettingsState();
+            },
+
+            onShow: function () {
+                switch (this.action) {
+                    case 'quality':
+                        this._showQuality();
+                        break;
+                    case 'indexers':
+                        this._showIndexers();
+                        break;
+                    case 'downloadclient':
+                        this._showDownloadClient();
+                        break;
+                    case 'connect':
+                        this._showNotifications();
+                        break;
+                    case 'notifications':
+                        this._showNotifications();
+                        break;
+                    case 'general':
+                        this._showGeneral();
+                        break;
+                    default:
+                        this._showMediaManagement();
+                }
             },
 
             _showMediaManagement: function (e) {
@@ -121,65 +184,30 @@ define(
                 });
             },
 
-            initialize: function (options) {
+            _save: function () {
-                if (options.action) {
+                App.vent.trigger(App.Commands.SaveSettings);
-                    this.action = options.action.toLowerCase();
-                }
             },
 
-            onRender: function () {
+            _setAdvancedSettingsState: function () {
-                this.loading.show(new LoadingView());
+                var checked = Config.getValueBoolean('advancedSettings');
-                var self = this;
+                this.ui.advancedSettings.prop('checked', checked);
-
-                this.settings = new SettingsModel();
-                this.generalSettings = new GeneralSettingsModel();
-                this.namingSettings = new NamingModel();
-                this.indexerSettings = new IndexerCollection();
-                this.notificationSettings = new NotificationCollection();
 
-                $.when(this.settings.fetch(),
+                if (checked) {
-                       this.generalSettings.fetch(),
+                    this.$el.addClass('show-advanced-settings');
-                       this.namingSettings.fetch(),
+                }
-                       this.indexerSettings.fetch(),
-                       this.notificationSettings.fetch()
-                      ).done(function () {
-                        self.loading.$el.hide();
-                        self.mediaManagement.show(new MediaManagementLayout({ settings: self.settings, namingSettings: self.namingSettings }));
-                        self.quality.show(new QualityLayout({settings: self.settings}));
-                        self.indexers.show(new IndexerLayout({ settings: self.settings, indexersCollection: self.indexerSettings }));
-                        self.downloadClient.show(new DownloadClientLayout({model: self.settings}));
-                        self.notifications.show(new NotificationCollectionView({collection: self.notificationSettings}));
-                        self.general.show(new GeneralView({model: self.generalSettings}));
-                });
             },
 
-            onShow: function () {
+            _toggleAdvancedSettings: function () {
-                switch (this.action) {
+                var checked = this.ui.advancedSettings.prop('checked');
-                    case 'quality':
+                Config.setValue('advancedSettings', checked);
-                        this._showQuality();
+
-                        break;
+                if (checked) {
-                    case 'indexers':
+                    this.$el.addClass('show-advanced-settings');
-                        this._showIndexers();
-                        break;
-                    case 'downloadclient':
-                        this._showDownloadClient();
-                        break;
-                    case 'connect':
-                        this._showNotifications();
-                        break;
-                    case 'notifications':
-                        this._showNotifications();
-                        break;
-                    case 'general':
-                        this._showGeneral();
-                        break;
-                    default:
-                        this._showMediaManagement();
                 }
-            },
 
-            _save: function () {
+                else {
-                App.vent.trigger(App.Commands.SaveSettings);
+                    this.$el.removeClass('show-advanced-settings');
+                }
             }
         });
     });

UI/Settings/SettingsLayoutTemplate.html

@@ -6,6 +6,19 @@
     <li><a href="#notifications" class="x-notifications-tab no-router">Connect</a></li>
     <li><a href="#general" class="x-general-tab no-router">General</a></li>
     <li class="pull-right"><button class="btn btn-primary x-save-settings">Save</button></li>
+    <li class="pull-right advanced-settings-toggle">
+        <label class="checkbox toggle well">
+            <input type="checkbox" class="x-advanced-settings"/>
+            <p>
+                <span>Show</span>
+                <span>Hide</span>
+            </p>
+            <div class="btn btn-warning slide-button"/>
+        </label>
+        <span class="help-inline-checkbox">
+            <i class="icon-nd-form-info" title="Show advanced options"/>
+        </span>
+    </li>
 </ul>
 
 <div class="tab-content">

UI/Settings/settings.less

@@ -1,5 +1,5 @@
+@import "../Content/Bootstrap/variables";
 @import "../Shared/Styles/clickable.less";
-
 @import "Indexers/indexers";
 @import "Quality/quality";
 @import "Notifications/notifications";
@@ -44,3 +44,37 @@ li.save-and-add:hover {
   display: inline-block;
   margin-top: 5px;
 }
+
+.advanced-settings-toggle {
+  margin-right: 40px;
+
+  .checkbox {
+    width         : 100px;
+    margin-left   : 0px;
+    display       : inline-block;
+    padding-top   : 0px;
+    margin-bottom : 0px;
+    margin-top    : -1px;
+  }
+
+  .help-inline-checkbox {
+    display        : inline-block;
+    margin-top     : -23px;
+    margin-bottom  : 0;
+    vertical-align : middle;
+  }
+}
+
+.advanced-setting {
+  display: none;
+
+  .control-label {
+    color: @warningText;
+  }
+}
+
+.show-advanced-settings {
+  .advanced-setting {
+    display: block;
+  }
+}