Add superuser config panel support for OIDC login

static/css/core-ui.css

@@ -431,6 +431,18 @@ a:focus {
   border-top: 1px solid #eee;
 }
 
+.co-panel-body .co-panel-heading {
+  font-size: 120%;
+  border-bottom: 0px;
+  margin: 0px;
+  margin-bottom: -6px;
+}
+
+.co-panel-body .co-panel-body {
+  padding-left: 38px;
+}
+
+
 .config-bool-field-element input {
   margin-right: 6px;
   font-size: 24px;

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

@@ -525,17 +525,18 @@
       </div>
     </div> <!-- /E-mail -->
 
-    <!-- Authentication -->
+    <!-- Internal Authentication -->
     <div class="co-panel">
       <div class="co-panel-heading">
-        <i class="fa fa-users"></i> Authentication
+        <i class="fa fa-users"></i> Internal Authentication
       </div>
       <div class="co-panel-body">
         <div class="description">
           <p>
             Authentication for the registry can be handled by either the registry itself, LDAP or external JWT endpoint.
-            <br>
+          </p>
-            Additional external authentication providers (such as GitHub) can be used on top of this choice.
+          <p>
+            Additional <strong>external</strong> authentication providers (such as GitHub) can be used in addition for <strong>login into the UI</strong>.
           </p>
         </div>
 
@@ -807,8 +808,13 @@
           </tr>
         </table>
       </div>
-    </div> <!-- /Authentication -->
+    </div> <!-- / Internal Authentication -->
 
+    <div class="co-panel"> <!-- External Authentication -->
+      <div class="co-panel-heading">
+        <i class="fa fa-id-card"></i> External Authorization (OAuth)
+      </div>
+      <div class="co-panel-body">
         <!-- GitHub Authentication -->
         <div class="co-panel">
           <div class="co-panel-heading">
@@ -936,6 +942,71 @@
           </div>
         </div> <!-- /Google Authentication -->
 
+        <!-- Custom OIDC providers -->
+        <div class="co-panel" ng-repeat="provider in getOIDCProviders(config)">
+          <div class="co-panel-heading">
+            <span class="icon-image-view" value="{{ config[provider]['SERVICE_ICON'] || 'fa-user-circle' }}" style="margin-right: 6px;"></span>
+            {{ config[provider]['SERVICE_NAME'] || (getOIDCProviderId(provider) + ' Authentication') }}
+            <span style="display: inline-block; margin-left: 10px">(<a href="javascript:void(0)" ng-click="removeOIDCProvider(provider)">Delete</a>)</span>
+          </div>
+          <div class="co-panel-body">
+            <table class="config-table">
+              <tr>
+                <td class="non-input">Service ID:</td>
+                <td>
+                  <code>{{ getOIDCProviderId(provider) }}</code>
+                </td>
+              </tr>
+              <tr>
+                <td>OIDC Server:</td>
+                <td>
+                  <span class="config-string-field"
+                        binding="config[provider].OIDC_SERVER"
+                        placeholder="https://path/to/oidc/compliant/server"
+                        pattern="https://.+">
+                  </span>
+                  <div class="help-text">
+                    The URL of an OIDC-compliant server.
+                  </div>
+                </td>
+              </tr>
+              <tr>
+                <td>Service Name:</td>
+                <td>
+                  <span class="config-string-field"
+                        binding="config[provider].SERVICE_NAME"
+                        placeholder="My Authentication Service">
+                  </span>
+                  <div class="help-text">
+                    The user friendly name to display for the service on the login page.
+                  </div>
+                </td>
+              </tr>
+              <tr>
+                <td>Service Icon (optional):</td>
+                <td>
+                  <span class="config-string-field"
+                        binding="config[provider].SERVICE_ICON"
+                        placeholder="URL of the icon to use for this service OR a font awesome CSS name"
+                        is-optional="true">
+                  </span>
+                  <div class="help-text">
+                    If specified, the icon to display for this login service on the login page. Can be either a URL to an icon or a CSS class name from <a href="http://fontawesome.io" ng-safenewtab>Font Awesome</a>
+                  </div>
+                </td>
+              </tr>
+            </table>
+
+          </div>
+        </div>
+
+        <!-- Add Provider -->
+        <a class="btn btn-default" ng-click="addOIDCProvider()" style="margin-right: 6px;">Add OIDC Provider</a>
+        <a href="http://openid.net/connect/" ng-safenewtab>What is OIDC?</a>
+      </div>
+    </div> <!-- /External Authentication -->
+
+
     <!-- Build Support -->
     <div class="co-panel">
       <div class="co-panel-heading">

static/js/core-config-setup.js

@@ -71,7 +71,11 @@ angular.module("core-config-setup", ['angularFileUpload'])
 
           {'id': 'bittorrent', 'title': 'BitTorrent downloads', 'condition': function(config) {
             return config.FEATURE_BITTORRENT;
-          }}
+          }},
+
+          {'id': 'oidc-login', 'title': 'OIDC Login(s)', 'condition': function(config) {
+            return $scope.getOIDCProviders(config).length > 0;
+          }},
         ];
 
         $scope.STORAGE_CONFIG_FIELDS = {
@@ -147,6 +151,59 @@ angular.module("core-config-setup", ['angularFileUpload'])
         $scope.validating = null;
         $scope.savingConfiguration = false;
 
+        $scope.removeOIDCProvider = function(provider) {
+          delete $scope.config[provider];
+        };
+
+        $scope.addOIDCProvider = function() {
+          bootbox.prompt('Enter an ID for the OIDC provider', function(result) {
+            if (!result) {
+              return;
+            }
+
+            result = result.toUpperCase();
+
+            if (!result.match(/^[A-Z0-9]+$/)) {
+              bootbox.alert('Invalid ID for OIDC provider: must be alphanumeric');
+              return;
+            }
+
+            if (result == 'GITHUB' || result == 'GOOGLE') {
+              bootbox.alert('Invalid ID for OIDC provider: cannot be a reserved name');
+              return;
+            }
+
+            var key = result + '_LOGIN_CONFIG';
+            if ($scope.config[key]) {
+              bootbox.alert('Invalid ID for OIDC provider: already exists');
+              return;
+            }
+
+            $scope.config[key] = {};
+          });
+        };
+
+        $scope.getOIDCProviderId = function(key) {
+          var index = key.indexOf('_LOGIN_CONFIG');
+          if (index <= 0) {
+            return null;
+          }
+
+          return key.substr(0, index);
+        };
+
+        $scope.getOIDCProviders = function(config) {
+          var keys = Object.keys(config || {});
+          return keys.filter(function(key) {
+            if (key == 'GITHUB_LOGIN_CONFIG' || key == 'GOOGLE_LOGIN_CONFIG') {
+              // Has custom UI and config.
+              return false;
+            }
+
+            return !!$scope.getOIDCProviderId(key);
+          });
+        };
+
         $scope.getServices = function(config) {
           var services = [];
           if (!config) { return services; }