UI adjustments for mutually exclusive (radio button version) encipher/decipher-only Key Usage #664 (#692)

* UI adjustments to make Key Agreement, Encipher Only, and Decipher Only relationship more user-friendly

* whitespace typo

* Issue #663 switching Encipher/Decipher Only options to be mutually exclusive and un-checkable radio buttons.

* Found a bug in the fields schema that was dropping Key Agreement bit if encipher/decipher only weren't checked

lemur/common/fields.py

@@ -162,6 +162,9 @@ class KeyUsageExtension(Field):
             elif k == 'useCRLSign':
                 keyusages['crl_sign'] = v
 
+            elif k == 'useKeyAgreement':
+                keyusages['key_agreement'] = v
+
             elif k == 'useEncipherOnly' and v:
                 keyusages['encipher_only'] = True
                 keyusages['key_agreement'] = True

lemur/static/app/angular/authorities/authority/extensions.tpl.html

@@ -70,14 +70,14 @@
           <input type="checkbox" ng-model="authority.extensions.keyUsage.useKeyAgreement">Key Agreement
         </label>
       </div>
-       <div class="checkbox">
+      <div class="radio">
         <label>
-          <input type="checkbox" ng-model="authority.extensions.keyUsage.useEncipherOnly">Encipher Only
+          <input type="radio" name="encipherOrDecipher" ng-model="authority.encipherOrDecipher" value="useEncipherOnly" ng-click="authority.setEncipherOrDecipher('useEncipherOnly')">Encipher Only
         </label>
       </div>
-       <div class="checkbox">
+      <div class="radio">
         <label>
-          <input type="checkbox" ng-model="authority.extensions.keyUsage.useDecipherOnly">Decipher Only
+          <input type="radio" name="encipherOrDecipher" ng-model="authority.encipherOrDecipher" value="useDecipherOnly" ng-click="authority.setEncipherOrDecipher('useDecipherOnly')">Decipher Only
         </label>
       </div>
     </div>

lemur/static/app/angular/authorities/services.js

@@ -64,6 +64,32 @@ angular.module('lemur')
         },
         removeCustom: function (index) {
           this.extensions.custom.splice(index, 1);
+        },
+        setEncipherOrDecipher: function (value) {
+          if (this.extensions === undefined) {
+            this.extensions = {};
+          }
+          if (this.extensions.keyUsage === undefined) {
+            this.extensions.keyUsage = {};
+          }
+          var existingValue = this.extensions.keyUsage[value];
+          if (existingValue) {
+            // Clicked on the already-selected value
+            this.extensions.keyUsage.useDecipherOnly = false;
+            this.extensions.keyUsage.useEncipherOnly = false;
+            // Uncheck both radio buttons
+            this.encipherOrDecipher = false;
+          } else {
+            // Clicked a different value
+            this.extensions.keyUsage.useKeyAgreement = true;
+            if (value === 'useEncipherOnly') {
+              this.extensions.keyUsage.useDecipherOnly = false;
+              this.extensions.keyUsage.useEncipherOnly = true;
+            } else {
+              this.extensions.keyUsage.useEncipherOnly = false;
+              this.extensions.keyUsage.useDecipherOnly = true;
+            }
+          }
         }
       });
     });

lemur/static/app/angular/certificates/certificate/options.tpl.html

@@ -78,14 +78,14 @@
               <input type="checkbox" ng-model="certificate.extensions.keyUsage.useKeyAgreement">Key Agreement
             </label>
           </div>
-          <div class="checkbox">
+          <div class="radio">
             <label>
-              <input type="checkbox" ng-model="certificate.extensions.keyUsage.useEncipherOnly">Encipher Only
+              <input type="radio" name="encipherOrDecipher" ng-model="certificate.encipherOrDecipher" value="useEncipherOnly" ng-click="certificate.setEncipherOrDecipher('useEncipherOnly')">Encipher Only
             </label>
           </div>
-          <div class="checkbox">
+          <div class="radio">
             <label>
-              <input type="checkbox" ng-model="certificate.extensions.keyUsage.useDecipherOnly">Decipher Only
+              <input type="radio" name="encipherOrDecipher" ng-model="certificate.encipherOrDecipher" value="useDecipherOnly" ng-click="certificate.setEncipherOrDecipher('useDecipherOnly')">Decipher Only
             </label>
           </div>
         </div>

lemur/static/app/angular/certificates/services.js

@@ -113,6 +113,32 @@ angular.module('lemur')
           }
           this.extensions = this.template.extensions;
           this.extensions.subAltNames = saveSubAltNames;
+        },
+        setEncipherOrDecipher: function (value) {
+          if (this.extensions === undefined) {
+            this.extensions = {};
+          }
+          if (this.extensions.keyUsage === undefined) {
+            this.extensions.keyUsage = {};
+          }
+          var existingValue = this.extensions.keyUsage[value];
+          if (existingValue) {
+            // Clicked on the already-selected value
+            this.extensions.keyUsage.useDecipherOnly = false;
+            this.extensions.keyUsage.useEncipherOnly = false;
+            // Uncheck both radio buttons
+            this.encipherOrDecipher = false;
+          } else {
+            // Clicked a different value
+            this.extensions.keyUsage.useKeyAgreement = true;
+            if (value === 'useEncipherOnly') {
+              this.extensions.keyUsage.useDecipherOnly = false;
+              this.extensions.keyUsage.useEncipherOnly = true;
+            } else {
+              this.extensions.keyUsage.useEncipherOnly = false;
+              this.extensions.keyUsage.useDecipherOnly = true;
+            }
+          }
         }
       });
     });