From 5f5583e2cb8fce0dfeafa5e7c7c048377a44dc3e Mon Sep 17 00:00:00 2001
From: Neil Schelly <neil@neilschelly.com>
Date: Thu, 16 Feb 2017 16:26:56 -0500
Subject: [PATCH] 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                        |  3 +++
 .../authorities/authority/extensions.tpl.html | 22 ++++++++--------
 .../app/angular/authorities/services.js       | 26 +++++++++++++++++++
 .../certificates/certificate/options.tpl.html |  8 +++---
 .../app/angular/certificates/services.js      | 26 +++++++++++++++++++
 5 files changed, 70 insertions(+), 15 deletions(-)

diff --git a/lemur/common/fields.py b/lemur/common/fields.py
index b2fecf4e..90fc538b 100644
--- a/lemur/common/fields.py
+++ b/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
diff --git a/lemur/static/app/angular/authorities/authority/extensions.tpl.html b/lemur/static/app/angular/authorities/authority/extensions.tpl.html
index d5f65ee4..ac815b07 100644
--- a/lemur/static/app/angular/authorities/authority/extensions.tpl.html
+++ b/lemur/static/app/angular/authorities/authority/extensions.tpl.html
@@ -68,18 +68,18 @@
       <div class="checkbox">
         <label>
           <input type="checkbox" ng-model="authority.extensions.keyUsage.useKeyAgreement">Key Agreement
-         </label>
+        </label>
+      </div>
+      <div class="radio">
+        <label>
+          <input type="radio" name="encipherOrDecipher" ng-model="authority.encipherOrDecipher" value="useEncipherOnly" ng-click="authority.setEncipherOrDecipher('useEncipherOnly')">Encipher Only
+        </label>
+      </div>
+      <div class="radio">
+        <label>
+          <input type="radio" name="encipherOrDecipher" ng-model="authority.encipherOrDecipher" value="useDecipherOnly" ng-click="authority.setEncipherOrDecipher('useDecipherOnly')">Decipher Only
+        </label>
       </div>
-       <div class="checkbox">
-         <label>
-          <input type="checkbox" ng-model="authority.extensions.keyUsage.useEncipherOnly">Encipher Only
-         </label>
-       </div>
-       <div class="checkbox">
-         <label>
-          <input type="checkbox" ng-model="authority.extensions.keyUsage.useDecipherOnly">Decipher Only
-         </label>
-       </div>
     </div>
   </div>
   <div class="form-group">
diff --git a/lemur/static/app/angular/authorities/services.js b/lemur/static/app/angular/authorities/services.js
index 7d61798d..ea86070c 100644
--- a/lemur/static/app/angular/authorities/services.js
+++ b/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;
+            }
+          }
         }
       });
     });
diff --git a/lemur/static/app/angular/certificates/certificate/options.tpl.html b/lemur/static/app/angular/certificates/certificate/options.tpl.html
index b4cfb8d7..31c31f96 100644
--- a/lemur/static/app/angular/certificates/certificate/options.tpl.html
+++ b/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>
diff --git a/lemur/static/app/angular/certificates/services.js b/lemur/static/app/angular/certificates/services.js
index 90b5f912..b5ccd75e 100644
--- a/lemur/static/app/angular/certificates/services.js
+++ b/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;
+            }
+          }
         }
       });
     });