Add superuser config section for updating license

static/css/core-ui.css

@@ -567,6 +567,33 @@ a:focus {
   margin-right: 4px;
 }
 
+.config-license-field-element textarea {
+  padding: 10px;
+  margin-bottom: 10px;
+  height: 250px;
+}
+
+.config-license-field-element .license-status {
+  margin-bottom: 26px;
+}
+
+.config-license-field-element table td:first-child {
+  width: 150px;
+  font-weight: bold;
+}
+
+.config-license-field-element .fa {
+    margin-right: 6px;
+}
+
+.config-license-field-element .license-valid h4 {
+  color: #2FC98E;
+}
+
+.config-license-field-element .license-invalid h4 {
+  color: #D64456;
+}
+
 .co-checkbox {
   position: relative;
 }

static/directives/config/config-license-field.html

@@ -0,0 +1,40 @@
+<div class="config-license-field-element">
+  <!-- Note: This hidden input will only have a value if there is a valid license, ensuring that the user cannot save
+      config if the license is invalid (since this box will be empty and therefore "required") -->
+  <input type="text" name="licenseRequiredBox" ng-model="requiredBox" style="visibility: hidden; height: 1px; position: absolute;" required>
+
+  <div class="cor-loader-inline" ng-show="state == 'loading-license'"></div>
+
+  <div class="license-valid license-status" ng-show="state == 'license-valid'">
+    <h4><i class="fa fa-check-circle"></i>License Valid</h4>
+    <table class="co-table">
+      <tr><td>Product:</td><td>{{ licenseDecoded.publicProductName || licenseDecoded.productName }}</td></tr>
+      <tr><td>Plan:</td><td>{{ licenseDecoded.publicPlanName || licenseDecoded.planName }}</td></tr>
+    </table>
+  </div>
+
+  <div class="license-invalid license-status" ng-show="state == 'license-error'">
+    <h4><i class="fa fa-times-circle"></i> Validation Failed</h4>
+    <h5>{{ licenseError }}</h5>
+  </div>
+
+  <button class="btn btn-default" ng-show="!showingEditor" ng-click="showEditor($event)"><i class="fa fa-pencil"></i> Update License</button>
+
+  <div class="license-editor" ng-show="showingEditor">
+    <p>
+      Your license  can be found under the "Raw Format" tab of your Quay Enterprise
+      subscription in the <a href="https://account.tectonic.com" target="_blank">Tectonic Account</a>.
+    </p>
+
+    <textarea id="enterLicenseBox" ng-model="licenseContents" class="form-control"
+              placeholder="Paste your raw license here, which should already be in base64 format: GtqMjMwNDgyM3Vq..."
+              ng-readonly="state == 'validating-license'"></textarea>
+
+    <button class="btn btn-primary" ng-show="state != 'validating-license'"
+            ng-click="validateAndUpdate($event)" ng-disabled="!licenseContents">Update License</button>
+
+    <div class="license-validating" ng-show="state == 'validating-license'">
+      <span class="cor-loader-inline"></span> Validating License
+    </div>
+  </div>
+</div>

static/directives/config/config-setup-tool.html

@@ -3,6 +3,16 @@
   <div ng-show="config && config['SUPER_USERS']">
     <form id="configform" name="configform">
 
+    <!-- License -->
+    <div class="co-panel">
+      <div class="co-panel-heading">
+        <i class="fa fa-credit-card-alt"></i> License
+      </div>
+      <div class="co-panel-body">
+        <div class="config-license-field"></div>
+      </div>
+    </div>
+
     <!-- Basic Configuration -->
     <div class="co-panel">
       <div class="co-panel-heading">

static/js/core-config-setup.js

@@ -1246,5 +1246,69 @@ angular.module("core-config-setup", ['angularFileUpload'])
       }
     };
     return directiveDefinitionObject;
+  })
+
+ .directive('configLicenseField', function () {
+    var directiveDefinitionObject = {
+      priority: 0,
+      templateUrl: '/static/directives/config/config-license-field.html',
+      replace: false,
+      transclude: false,
+      restrict: 'C',
+      scope: {
+      },
+      controller: function($scope, $element, ApiService) {
+        $scope.state = 'loading-license';
+        $scope.showingEditor = false;
+        $scope.requiredBox = '';
+
+        var loadLicense = function() {
+          ApiService.getLicense().then(function(resp) {
+            $scope.state = 'license-valid';
+            $scope.showingEditor = false;
+            $scope.licenseDecoded = resp['decoded'];
+            $scope.requiredBox = 'filled';
+          }, function(resp) {
+            $scope.licenseError = ApiService.getErrorMessage(resp);
+            $scope.state = 'license-error';
+            $scope.showingEditor = true;
+            $scope.requiredBox = '';
+          });
+        };
+
+        loadLicense();
+
+        $scope.showEditor = function($event) {
+          $event.preventDefault();
+          $event.stopPropagation();
+
+          $scope.showingEditor = true;
+        };
+
+        $scope.validateAndUpdate = function($event) {
+          $event.preventDefault();
+          $event.stopPropagation();
+
+          $scope.state = 'validating-license';
+
+          var data = {
+            'license': $scope.licenseContents
+          };
+
+          ApiService.updateLicense(data).then(function(resp) {
+            $scope.state = 'license-valid';
+            $scope.showingEditor = false;
+            $scope.licenseDecoded = resp['decoded'];
+            $scope.requiredBox = 'filled';
+          }, function(resp) {
+            $scope.licenseError = ApiService.getErrorMessage(resp);
+            $scope.state = 'license-error';
+            $scope.showingEditor = true;
+            $scope.requiredBox = '';
+          });
+        };
+      }
+    };
+    return directiveDefinitionObject;
   });
 

static/js/pages/setup.js

@@ -107,7 +107,7 @@
       'hasDatabaseSSLCert': false,
       'licenseContents': '',
       'licenseError': null,
-      'licenseDecoded': null,
+      'licenseDecoded': null
     };
 
     $scope.$watch('currentStep', function(currentStep) {