- Add support for super users

- Add a super user API
- Add a super user interface

static/css/quay.css

@@ -2316,11 +2316,6 @@ p.editable:hover i {
   margin-bottom: 10px;
 }
 
-.user-admin .form-change input {
-  margin-top: 12px;
-  margin-bottom: 12px;
-}
-
 .user-admin .convert-form h3 {
   margin-bottom: 20px;
 }
@@ -2457,42 +2452,42 @@ p.editable:hover i {
   stroke-width: 1.5px;
 }
 
-#repository-usage-chart {
+.usage-chart {
   display: inline-block;
   vertical-align: middle;
   width: 200px;
   height: 200px;
 }
 
-#repository-usage-chart .count-text {
+.usage-chart .count-text {
   font-size: 22px;
 }
 
-#repository-usage-chart.limit-at path.arc-0 {
+.usage-chart.limit-at path.arc-0 {
   fill: #c09853;
 }
 
-#repository-usage-chart.limit-over path.arc-0 {
+.usage-chart.limit-over path.arc-0 {
   fill: #b94a48;
 }
 
-#repository-usage-chart.limit-near path.arc-0 {
+.usage-chart.limit-near path.arc-0 {
   fill: #468847;
 }
 
-#repository-usage-chart.limit-over path.arc-1 {
+.usage-chart.limit-over path.arc-1 {
   fill: #fcf8e3;
 }
 
-#repository-usage-chart.limit-at path.arc-1 {
+.usage-chart.limit-at path.arc-1 {
   fill: #f2dede;
 }
 
-#repository-usage-chart.limit-near path.arc-1 {
+.usage-chart.limit-near path.arc-1 {
   fill: #dff0d8;
 }
 
-.plan-manager-element .usage-caption {
+.usage-caption {
   display: inline-block; 
   color: #aaa;
   font-size: 26px;
@@ -3623,4 +3618,17 @@ pre.command:before {
 
 .trigger-option-section table td {
   padding: 6px;
+}
+
+.user-row.super-user td {
+  background-color: #d9edf7;
+}
+
+.user-row .user-class {
+  text-transform: uppercase;
+}
+
+.form-change input {
+  margin-top: 12px;
+  margin-bottom: 12px;
 }

static/directives/header-bar.html

@@ -65,6 +65,7 @@
           </a>
         </li>
         <li><a ng-href="/organizations/" target="{{ appLinkTarget() }}">Organizations</a></li>
+        <li ng-if="user.super_user"><a href="/superuser/"><strong>Super User Admin Panel</strong></a></li>
         <li><a href="javascript:void(0)" ng-click="signout()">Sign out</a></li>
       </ul>
     </li>

static/directives/plan-manager.html

@@ -20,7 +20,7 @@
   
   <!-- Chart -->
   <div>
-    <div id="repository-usage-chart" class="limit-{{limit}}"></div>
+    <div id="repository-usage-chart" class="usage-chart limit-{{limit}}"></div>
     <span class="usage-caption" ng-show="chart">Repository Usage</span>
   </div>
 

static/js/app.js

@@ -1283,6 +1283,8 @@ quayApp = angular.module('quay', quayDependencies, function($provide, cfpLoading
                             templateUrl: '/static/partials/repo-list.html', controller: RepoListCtrl}).
       when('/user/', {title: 'Account Settings', description:'Account settings for Quay.io', templateUrl: '/static/partials/user-admin.html',
                       reloadOnSearch: false, controller: UserAdminCtrl}).
+      when('/superuser/', {title: 'Superuser Admin Panel', description:'Admin panel for Quay.io', templateUrl: '/static/partials/super-user.html',
+                           reloadOnSearch: false, controller: SuperUserAdminCtrl}).
       when('/guide/', {title: 'Guide', description:'Guide to using private docker repositories on Quay.io', templateUrl: '/static/partials/guide.html',
                        controller: GuideCtrl}).
       when('/tutorial/', {title: 'Tutorial', description:'Interactive tutorial for using Quay.io', templateUrl: '/static/partials/tutorial.html',
@@ -3333,7 +3335,7 @@ quayApp.directive('planManager', function () {
           }
 
           if (!$scope.chart) {
-            $scope.chart = new RepositoryUsageChart();
+            $scope.chart = new UsageChart();
             $scope.chart.draw('repository-usage-chart');
           }
 

static/js/controllers.js

@@ -2638,4 +2638,135 @@ function ManageApplicationCtrl($scope, $routeParams, $rootScope, $location, $tim
   // Load the organization and application info.
   loadOrganization();
   loadApplicationInfo();
+}
+
+
+function SuperUserAdminCtrl($scope, ApiService, Features, UserService) {
+  if (!Features.SUPER_USERS) {
+    return;
+  }
+
+  // Monitor any user changes and place the current user into the scope.
+  UserService.updateUserIn($scope);
+
+  $scope.loadUsers = function() {
+    if ($scope.users) {
+      return;
+    }
+
+    $scope.loadUsersInternal();
+  };
+
+  $scope.loadUsersInternal = function() {
+    ApiService.listAllUsers().then(function(resp) {
+      $scope.users = resp['users'];
+    }, function(resp) {
+      $scope.users = [];
+      $scope.usersError = resp['data']['message'] || resp['data']['error_description'];
+    });
+  };
+
+  $scope.showChangePassword = function(user) {
+    $scope.userToChange = user;
+    $('#changePasswordModal').modal({});
+  };
+
+  $scope.showDeleteUser = function(user) {
+    if (user.username == UserService.currentUser().username) {
+      bootbox.dialog({
+        "message": 'Cannot delete yourself!',
+        "title": "Cannot delete user",
+        "buttons": {
+          "close": {
+            "label": "Close",
+            "className": "btn-primary"
+          }
+        }
+      });
+      return;
+    }
+
+    $scope.userToDelete = user;
+    $('#confirmDeleteUserModal').modal({});
+  };
+
+  $scope.changeUserPassword = function(user) {
+    $('#changePasswordModal').modal('hide');
+
+    var params = {
+      'username': user.username
+    };
+
+    var data = {
+      'password': user.password
+    };
+
+    ApiService.changeInstallUser(data, params).then(function(resp) {
+      $scope.loadUsersInternal();
+    }, function(resp) {
+      bootbox.dialog({
+        "message": resp.data ? resp.data.message : 'Could not change user',
+        "title": "Cannot change user",
+        "buttons": {
+          "close": {
+            "label": "Close",
+            "className": "btn-primary"
+          }
+        }
+      });
+    });
+  };
+
+  $scope.deleteUser = function(user) {
+    $('#confirmDeleteUserModal').modal('hide');
+
+    var params = {
+      'username': user.username
+    };
+
+    ApiService.deleteInstallUser(null, params).then(function(resp) {
+      $scope.loadUsersInternal();
+    }, function(resp) {
+      bootbox.dialog({
+        "message": resp.data ? resp.data.message : 'Could not delete user',
+        "title": "Cannot delete user",
+        "buttons": {
+          "close": {
+            "label": "Close",
+            "className": "btn-primary"
+          }
+        }
+      });
+    });
+  };
+
+  var seatUsageLoaded = function(usage) {
+    $scope.usageLoading = false;
+
+    if (usage.count > usage.allowed) {
+      $scope.limit = 'over';
+    } else if (usage.count == usage.allowed) {
+      $scope.limit = 'at';
+    } else if (usage.count >= usage.allowed * 0.7) {
+      $scope.limit = 'near';
+    } else {
+      $scope.limit = 'none';
+    }
+    
+    if (!$scope.chart) {
+      $scope.chart = new UsageChart();
+      $scope.chart.draw('seat-usage-chart');
+    }
+
+    $scope.chart.update(usage.count, usage.allowed);
+  };
+
+  var loadSeatUsage = function() {
+    $scope.usageLoading = true;
+    ApiService.getSeatCount().then(function(resp) {
+      seatUsageLoaded(resp);
+    });
+  };
+
+  loadSeatUsage();
 }

static/js/graphing.js

@@ -1329,7 +1329,7 @@ FileTree.prototype.getNodesHeight = function() {
 /**
  * Based off of http://bl.ocks.org/mbostock/1346410
  */
-function RepositoryUsageChart() {
+function UsageChart() {
   this.total_ = null;
   this.count_ = null;
   this.drawn_ = false;
@@ -1339,7 +1339,7 @@ function RepositoryUsageChart() {
 /**
  * Updates the chart with the given count and total of number of repositories.
  */
-RepositoryUsageChart.prototype.update = function(count, total) {
+UsageChart.prototype.update = function(count, total) {
   if (!this.g_) { return; }
   this.total_ = total;
   this.count_ = count;
@@ -1350,7 +1350,7 @@ RepositoryUsageChart.prototype.update = function(count, total) {
 /**
  * Conducts the actual draw or update (if applicable).
  */
-RepositoryUsageChart.prototype.drawInternal_ = function() {
+UsageChart.prototype.drawInternal_ = function() {
   // If the total is null, then we have not yet set the proper counts.
   if (this.total_ === null) { return; }
 
@@ -1409,7 +1409,7 @@ RepositoryUsageChart.prototype.drawInternal_ = function() {
 /**
  * Draws the chart in the given container.
  */
-RepositoryUsageChart.prototype.draw = function(container) {
+UsageChart.prototype.draw = function(container) {
   var cw = 200;
   var ch = 200;
   var radius = Math.min(cw, ch) / 2;

static/partials/super-user.html

@@ -0,0 +1,149 @@
+<div class="container" quay-show="Features.SUPER_USERS">
+  <div class="alert alert-info">
+    This panel provides administrator access to <strong>super users of this installation of Quay.io</strong>. Super users can be managed in the configuration for this installation.
+  </div>
+
+  <div class="row">
+    <!-- Side tabs -->
+    <div class="col-md-2">
+      <ul class="nav nav-pills nav-stacked">
+        <li class="active">
+          <a href="javascript:void(0)" data-toggle="tab" data-target="#license">License and Usage</a>
+        </li>
+        <li>
+          <a href="javascript:void(0)" data-toggle="tab" data-target="#users" ng-click="loadUsers()">Users</a>
+        </li>
+      </ul>
+    </div>
+
+    <!-- Content -->
+    <div class="col-md-10">
+      <div class="tab-content">
+        <!-- License tab -->
+        <div id="license" class="tab-pane active">
+          <div class="quay-spinner 3x" ng-show="usageLoading"></div>
+           <!-- Chart -->
+           <div>
+             <div id="seat-usage-chart" class="usage-chart limit-{{limit}}"></div>
+             <span class="usage-caption" ng-show="chart">Seat Usage</span>
+           </div>
+
+        </div>
+
+        <!-- Users tab -->
+        <div id="users" class="tab-pane">
+          <div class="quay-spinner" ng-show="!users"></div>
+          <div class="alert alert-error" ng-show="usersError">
+            {{ usersError }}
+          </div>
+          <div ng-show="users">
+            <div class="side-controls">      
+              <div class="result-count">
+                Showing {{(users | filter:search | limitTo:100).length}} of
+                {{(users | filter:search).length}} matching users
+              </div>
+              <div class="filter-input">        
+                <input id="log-filter" class="form-control" placeholder="Filter Users" type="text" ng-model="search.$">
+              </div>
+            </div> 
+
+            <table class="table">
+              <thead>
+                <th>Username</th>
+                <th>E-mail address</th>
+                <th></th>
+                <th></th>
+              </thead>
+              
+              <tr ng-repeat="current_user in (users | filter:search | orderBy:'username' | limitTo:100)"
+                  class="user-row"
+                  ng-class="current_user.super_user ? 'super-user' : ''">
+                <td>
+                  <i class="fa fa-user" style="margin-right: 6px"></i>
+                  {{ current_user.username }}
+                </td>                
+                <td>
+                  <a href="mailto:{{ current_user.email }}">{{ current_user.email }}</a>
+                </td>
+                <td class="user-class">
+                  <span ng-if="current_user.super_user">Super user</span>
+                </td>
+                <td>
+                  <div class="dropdown" ng-if="user.username != current_user.username && !user.super_user">
+                    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+                      <i class="fa fa-ellipsis-h"></i>
+                    </button>
+                    <ul class="dropdown-menu">
+                      <li>
+                        <a href="javascript:void(0)" ng-click="showChangePassword(current_user)">
+                          <i class="fa fa-key"></i> Change Password
+                        </a>
+                        <a href="javascript:void(0)" ng-click="showDeleteUser(current_user)">
+                          <i class="fa fa-times"></i> Delete User
+                        </a>
+                      </li>
+                    </ul>
+                  </div>
+                </td>
+              </tr>
+            </table>
+
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  
+  <!-- Modal message dialog -->
+  <div class="modal fade" id="confirmDeleteUserModal">
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+          <h4 class="modal-title">Delete User?</h4>
+        </div>
+        <div class="modal-body">
+          <div class="alert alert-danger">           
+            This operation <strong>cannot be undone</strong> and will <strong>delete any repositories owned by the user</strong>.
+          </div>
+          Are you <strong>sure</strong> you want to delete user <strong>{{ userToDelete.username }}</strong>?
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-danger" ng-click="deleteUser(userToDelete)">Delete User</button>
+          <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
+        </div>
+      </div><!-- /.modal-content -->
+    </div><!-- /.modal-dialog -->
+  </div><!-- /.modal -->
+
+
+ <!-- Modal message dialog -->
+  <div class="modal fade" id="changePasswordModal">
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+          <h4 class="modal-title">Change User Password</h4>
+        </div>
+        <div class="modal-body">
+          <div class="alert alert-warning">           
+            The user will no longer be able to access Quay.io with their current password
+          </div>
+         
+          <form class="form-change" id="changePasswordForm" name="changePasswordForm" data-trigger="manual">
+            <input type="password" class="form-control" placeholder="User's new password" ng-model="userToChange.password" required ng-pattern="/^.{8,}$/">
+            <input type="password" class="form-control" placeholder="Verify the new password" ng-model="userToChange.repeatPassword"
+                   match="userToChange.password" required ng-pattern="/^.{8,}$/">
+          </form>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-primary" ng-click="changeUserPassword(userToChange)"
+                  ng-disabled="changePasswordForm.$invalid">Change User Password</button>
+          <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
+        </div>
+      </div><!-- /.modal-content -->
+    </div><!-- /.modal-dialog -->
+  </div><!-- /.modal -->
+
+</div>