quay/static/partials/super-user.html

<div class="container" quay-show="Features.SUPER_USERS && showInterface">
  <div class="alert alert-info">
    This panel provides administrator access to <strong>super users of this installation of the registry</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="#users" ng-click="loadUsers()">Users</a>
        </li>
        <li>
          <a href="javascript:void(0)" data-toggle="tab" data-target="#create-user">Create User</a>
        </li>
        <li>
          <a href="javascript:void(0)" data-toggle="tab" data-target="#usage-counter" ng-click="getUsage()">System Usage</a>
        </li>
        <li>
          <a href="javascript:void(0)" data-toggle="tab" data-target="#logs" ng-click="loadLogs()">System Logs</a>
        </li>
      </ul>
    </div>

    <!-- Content -->
    <div class="col-md-10">
      <div class="tab-content">
        <!-- Logs tab -->
        <div id="logs" class="tab-pane">
          <div class="logsView" makevisible="logsCounter" all-logs="true"></div>
        </div>

        <!-- Usage tab -->
        <div id="usage-counter" class="tab-pane">
          <div class="quay-spinner" ng-show="systemUsage == null"></div>
          <div class="usage-chart" total="systemUsage.allowed" limit="systemUsageLimit"
               current="systemUsage.usage" usage-title="Deployed Repositories"></div>

          <!-- Alerts -->
          <div class="alert alert-danger" ng-show="systemUsageLimit == 'over' && systemUsage">
            You have deployed more repositories than your plan allows. Please
            upgrade your subscription by contacting <a href="mailto:sales@coreos.com">CoreOS Sales</a>.
          </div>
          
          <div class="alert alert-warning" ng-show="systemUsageLimit == 'at' && systemUsage">
            You are at your current plan's number of allowed repositories. It might be time to think about
            upgrading your subscription by contacting <a href="mailto:sales@coreos.com">CoreOS Sales</a>.
          </div>

          <div class="alert alert-success" ng-show="systemUsageLimit == 'near' && systemUsage">
            You are nearing the number of allowed deployed repositories. It might be time to think about
            upgrading your subscription by contacting <a href="mailto:sales@coreos.com">CoreOS Sales</a>.
          </div>      
        </div>

        <!-- Create user tab -->
        <div id="create-user" class="tab-pane">
          <span class="quay-spinner" ng-show="creatingUser"></span>
          <form name="createUserForm" ng-submit="createUser()" ng-show="!creatingUser">
            <div class="form-group">
              <label>Username</label>
              <input class="form-control" type="text" ng-model="newUser.username" ng-pattern="/^[a-z0-9_]{4,30}$/" required>
            </div>

            <div class="form-group">
              <label>Email address</label>
              <input class="form-control" type="email" ng-model="newUser.email" required>
            </div>

            <button class="btn btn-primary" type="submit" ng-disabled="!createUserForm.$valid">Create User</button>
          </form> 

          <div style="margin-top: 20px; padding-top: 20px; border-top: 1px solid #eee;" ng-show="createdUsers.length">
            <table class="table">
              <thead>
                <th>Username</th>
                <th>E-mail address</th>
                <th>Temporary Password</th>
              </thead>

              <tr ng-repeat="created_user in createdUsers"
                  class="user-row">
                  <td>{{ created_user.username }}</td>
                  <td>{{ created_user.email }}</td>
                  <td>{{ created_user.password }}</td>
              </tr>
            </table>            
          </div>  
        </div>

        <!-- Users tab -->
        <div id="users" class="tab-pane active">
          <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 style="width: 24px;"></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 style="text-align: center;">
                  <i class="fa fa-ge fa-lg" ng-if="current_user.super_user" data-title="Super User" bs-tooltip></i>
                  <div class="dropdown" style="text-align: left;" ng-if="user.username != current_user.username && !current_user.super_user">
                    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                      <i class="caret"></i>
                    </button>
                    <ul class="dropdown-menu pull-right">
                      <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="sendRecoveryEmail(current_user)" quay-show="Features.MAILING">
                          <i class="fa fa-envelope"></i> Send Recovery Email
                        </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 the registry 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>