Merge pull request #1837 from ameliagoodman/sslRadio

switched ssl button to radio

Author: jjeffryes

css/obBase.css

@@ -6401,7 +6401,6 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
   display: none; /* hide in production */
 }
 
-
 .peersList {
   margin-top: 10px;
   padding-right: 30px;
@@ -6419,3 +6418,12 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
 .peersList>ul>li {
   padding-bottom: 5px;
 }
+
+.sslSwitch-radio {
+  margin: auto;
+  padding: 15px;
+}
+
+.sslSwitch-radio>input[type="radio"].fieldItem + label {
+  padding: 0 0px 0 35px
+}

js/templates/serverConfigForm.html

@@ -26,7 +26,7 @@
 
             <div class="flexCol-8 borderRight0 custCol-border <% ob.errors.name && print('invalid') %>">
               <input name="name" type="text" id="fld_name" class="fieldItem" value="<%= ob.name %>">
-            </div>            
+            </div>
           </div>
 
           <div class="flexRow">
@@ -46,21 +46,15 @@
               </div>
             </div>
 
-            <div class="flexCol-8 borderRight0 custCol-border <% ob.errors.server_ip && print('invalid') %>">
+            <div class="flexCol-3 borderRight0 custCol-border <% ob.errors.server_ip && print('invalid') %>">
               <input name="server_ip" type="text" id="fld_server" placeholder="" class="fieldItem" required="" value="<%= ob.server_ip %>">
-              <div class="btn btn-txt btn-corner btn-cornerTR custCol-secondary ion-locked
-                          positionAbsolute tooltip <% if(!ob.SSL){ %> hide <% } %>  js-sslOn"
-                   data-tooltip="<%= polyglot.t('SSLIsOn') %>">
-                <%= polyglot.t('SSLOn') %>
-              </div>
-              <div class="btn btn-txt btn-corner btn-cornerTR custCol-secondary ion-unlocked
-                          positionAbsolute tooltip <% if(ob.SSL){ %> hide <% } %>  js-sslOff"
-                   data-tooltip="<%= polyglot.t('SSLIsOff') %>">
-                <%= polyglot.t('SSLOff') %>
-              </div>
             </div>
-          </div>
+            <div class="flexCol-5 sslSwitch-radio ustCol-border <% ob.errors.server_ip && print('invalid') %>">
+              <input type="radio" class="fieldItem" id="js-sslOn" name="sslSwitch" value="true" <% if(ob.SSL) { print("checked") } %> /><label for="js-sslOn" class="radioLabel"><%= polyglot.t('SSLOn') %></label>
+              <input type="radio" class="fieldItem" id="js-sslOff" name="sslSwitch" value="false" <% if(!ob.SSL) { print("checked") } %>/><label for="js-sslOff" class="radioLabel"><%= polyglot.t('SSLOff') %></label>
 
+            </div>
+          </div>
           <div class="flexRow">
             <% if (ob.errors.username) { %>
             <div class="flexCol-12">
@@ -169,7 +163,7 @@
             <div class="flexCol-8 borderRight0 custCol-border <% ob.errors.heartbeat_socket_port && print('invalid') %>">
               <input name="heartbeat_socket_port" type="text" id="fld_heartbeat_socket_port" placeholder="" class="fieldItem" value="<%= ob.heartbeat_socket_port %>">
             </div>
-          </div>            
+          </div>
 
          </div>
       </form>

js/views/serverConfigFormVw.js

@@ -11,8 +11,8 @@ module.exports = BaseVw.extend({
     'click .js-save': 'saveForm',
     'keyup': 'processKey',
     'input input': 'inputEntered',
-    'click .js-sslOn': 'sslOn',
-    'click .js-sslOff': 'sslOff'
+    'click #js-sslOn': 'sslOn',
+    'click #js-sslOff': 'sslOff'
   },
 
   initialize: function(options) {
@@ -25,10 +25,6 @@ module.exports = BaseVw.extend({
     this.listenTo(this.model, 'invalid sync', function() {
       this.render();
     });
-
-    this.listenTo(this.model, 'change:SSL', function() {
-      this.render();
-    });
   },
 
   processKey: function(e) {
@@ -54,11 +50,11 @@ module.exports = BaseVw.extend({
   },
 
   sslOn: function(){
-    this.model.set('SSL', false);
+    this.model.set('SSL', true);
   },
 
   sslOff: function(){
-    this.model.set('SSL', true);
+    this.model.set('SSL', false);
   },
 
   render: function() {