quay/static/partials/repo-admin.html

<script src="static/lib/Blob.js"></script>
<script src="static/lib/FileSaver.js"></script>
<script src="static/lib/jquery.base64.min.js"></script>

<div class="loading" ng-show="loading">
  <i class="fa fa-spinner fa-spin fa-3x"></i>
</div>

<div class="container" ng-show="!loading && (!repo || !permissions)">
  No repository found
</div>

<div class="container repo repo-admin" ng-show="!loading && repo && permissions">
  <div class="header">
    <a href="{{ '/repository/' + repo.namespace + '/' + repo.name }}" class="back"><i class="fa fa-chevron-left"></i></a>
    <h3>
      <span class="repo-circle no-background" repo="repo"></span> <span style="color: #aaa;"> {{repo.namespace}}</span> <span style="color: #ccc">/</span> {{repo.name}}
    </h3>
   </div>
  
  <!-- User Access Permissions -->
  <div class="panel panel-default">
    <div class="panel-heading">User <span ng-show="repo.is_organization">and Team</span> Access Permissions

      <i class="info-icon fa fa-info-circle" data-placement="left" data-content="Allow any number of users or teams to read, write or administer this repository"></i>
    </div>
    <div class="panel-body">
        
      <table class="permissions">
        <thead>
          <tr>
            <td>User<span ng-show="repo.is_organization">/Team</span></td>
            <td>Permissions</td>
            <td></td>
          </tr>
        </thead>
        
        <!-- Team Permissions -->
        <tr ng-repeat="(name, permission) in permissions['team']">
          <td class="team entity">
            <i class="fa fa-group"></i> 
            <span><a href="/organization/{{ repo.namespace }}/teams/{{ name }}">{{name}}</a></span>
          </td>
          <td class="user-permissions">
            <div class="btn-group btn-group-sm">
              <button type="button" class="btn btn-default" ng-click="setRole(name, 'read', 'team')" ng-class="{read: 'active', write: '', admin: ''}[permission.role]">Read only</button>
              <button type="button" class="btn btn-default" ng-click="setRole(name, 'write', 'team')" ng-class="{read: '', write: 'active', admin: ''}[permission.role]">Write</button>
              <button type="button" class="btn btn-default" ng-click="setRole(name, 'admin', 'team')" ng-class="{read: '', write: '', admin: 'active'}[permission.role]">Admin</button>
            </div>
          </td>
          <td>
            <span class="delete-ui" tabindex="0" title="Delete Permission">
              <span class="delete-ui-button" ng-click="deleteRole(name, 'team')"><button class="btn btn-danger">Delete</button></span>
              <i class="fa fa-remove"></i>
            </span>
          </td>
        </tr>
        
        <!-- User Permissions -->
        <tr ng-repeat="(name, permission) in permissions['user']">
          <td class="{{ 'user entity ' + (permission.outside_org ? 'outside' : '') }}">
            <i class="fa fa-user"></i> 
            <span>{{name}}</span>
          </td>
          <td class="user-permissions">
            <div class="btn-group btn-group-sm">
              <button type="button" class="btn btn-default" ng-click="setRole(name, 'read', 'user')" ng-class="{read: 'active', write: '', admin: ''}[permission.role]">Read only</button>
              <button type="button" class="btn btn-default" ng-click="setRole(name, 'write', 'user')" ng-class="{read: '', write: 'active', admin: ''}[permission.role]">Write</button>
              <button type="button" class="btn btn-default" ng-click="setRole(name, 'admin', 'user')" ng-class="{read: '', write: '', admin: 'active'}[permission.role]">Admin</button>
            </div>
          </td>
          <td>
            <span class="delete-ui" tabindex="0" title="Delete Permission">
              <span class="delete-ui-button" ng-click="deleteRole(name, 'user')"><button class="btn btn-danger">Delete</button></span>
              <i class="fa fa-remove"></i>
            </span>
          </td>
        </tr>

        <tr>
          <td colspan="2">
            <span class="entity-search" organization="repo.namespace" input-title="'Add a ' + (repo.is_organization ? 'team or ' : '') + 'user...'" entity-selected="addNewPermission"></span>
          </td>
        </tr>
      </table>
    </div>
  </div>

  <!-- Token Permissions -->
  <div class="panel panel-default">
    <div class="panel-heading">Access Token Permissions

      <i class="info-icon fa fa-info-circle" data-placement="left" data-content="Grant permissions to this repository by creating unique tokens that can be used without entering account passwords<br><br>To use in docker:<br><dl class='dl-horizontal'><dt>Username</dt><dd>$token</dd><dt>Password</dt><dd>(token value)</dd><dt>Email</dt><dd>(any value)</dd></dl>"></i>
    </div>
    <div class="panel-body">
      <form name="createTokenForm" ng-submit="createToken()">
        <table class="permissions">
          <thead>
            <tr>
              <td>Token Description</td>
              <td>Permissions</td>
              <td></td>
            </tr>
          </thead>
          
          <tr ng-repeat="(code, token) in tokens">
            <td class="user token">
              <i class="fa fa-key"></i> 
              <a ng-click="showToken(token.code)">{{ token.friendlyName }}</a>
            </td>
            <td class="user-permissions">
              <div class="btn-group btn-group-sm">
                <button type="button" class="btn btn-default" ng-click="changeTokenAccess(token.code, 'read')" ng-class="{read: 'active', write: ''}[token.role]">Read only</button>
                <button type="button" class="btn btn-default" ng-click="changeTokenAccess(token.code, 'write')" ng-class="{read: '', write: 'active'}[token.role]">Write</button>
              </div>
            </td>
            <td>
              <span class="delete-ui" tabindex="0" title="Delete Token">
                <span class="delete-ui-button" ng-click="deleteToken(token.code)"><button class="btn btn-danger" type="button">Delete</button></span>
                <i class="fa fa-remove"></i>
              </span>
            </td>
          </tr>

          <tr>
              <td>
                <input type="text" class="form-control" placeholder="New token description" ng-model="newToken.friendlyName"required>
              </td>
              <td>
                <button type="submit" ng-disabled="createTokenForm.$invalid" class="btn btn-sm btn-default">Create</button>
              </td>
          </tr>
        </table>
      </form>
    </div>
  </div>

  <!-- Public/Private -->
  <div class="panel panel-default">
    <div class="panel-heading">Repository Settings</div>
    <div class="panel-body">
    <div class="repo-access-state" ng-show="!repo.is_public">
    <div class="state-icon"><i class="fa fa-lock"></i></div>

        This repository is currently <b>private</b>. Only users on the above access list may view and interact with it.

        <div class="change-access">
          <button class="btn btn-danger" ng-click="askChangeAccess('public')">Make Public</button>
        </div>
      </div>

      <div class="repo-access-state" ng-show="repo.is_public">
        <div class="state-icon"><i class="fa fa-unlock"></i></div>

        This repository is currently <b>public</b> and is visible to all users, and may be pulled by all users.

        <div class="change-access">
          <button class="btn btn-danger" ng-click="askChangeAccess('private')">Make Private</button>
        </div>
      </div>
    </div>
  </div>
  <br>

  <!-- Delete Repo -->
  <div class="panel panel-default">
    <div class="panel-heading">Delete Repository</div>
    <div class="panel-body">
      <div class="repo-delete">
        <div class="alert alert-danger">Deleting a repository <b>cannot be undone</b>. Here be dragons!</div>
        <button class="btn btn-danger" ng-click="askDelete()">Delete Repository</button>
      </div>
    </div>
  </div>

 <!-- Modal message dialog -->
  <div class="modal fade" id="cannotchangeModal">
    <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">Cannot change</h4>
        </div>
        <div class="modal-body">
          The selected action could not be performed because you do not have that authority.
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

  <!-- Modal message dialog -->
  <div class="modal fade" id="tokenmodal">
    <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"><i class="fa fa-key"></i> {{ shownToken.friendlyName }}</h4>
        </div>
        <div class="modal-body token-dialog-body">
          <div class="alert alert-info">The docker <u>username</u> is <b>$token</b> and the <u>password</u> is the token. You may use any value for email.</div>
          <div class="well well-sm">
            <input id="token-view" class="token-view" type="text" value="{{ shownToken.code }}" onClick="this.select();" readonly>
          </div>
        </div>
        <div class="modal-footer">
           <span class="download-cfg" ng-show="isDownloadSupported()">
             <i class="icon-download"></i>
             <a href="javascript:void(0)" ng-click="downloadCfg(shownToken)">Download .dockercfg file</a>
           </span>
           <div id="clipboardCopied" style="display: none">
                   Copied to clipboard
           </div>
          <button id="copyClipboard" type="button" class="btn btn-primary" data-clipboard-target="token-view">Copy to clipboard</button>
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->
  

 <!-- Modal message dialog -->
  <div class="modal fade" id="makepublicModal">
    <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">Make Repository Public</h4>
        </div>
        <div class="modal-body">
          <div class="alert alert-warning">
            Warning: This will allow <b>anyone</b> to pull from this repository
          </div>
          Are you sure you want to make this repository public?
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" ng-click="changeAccess('public')">Make Public</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="makeprivateModal">
    <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">Make Repository Private</h4>
        </div>
        <div class="modal-body">
          <div class="alert alert-warning">
            Warning: Only users on the permissions list will be able to access this repository.
          </div>
      	  Are you sure you want to make this repository private?
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-success" ng-click="changeAccess('private')">Make Private</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="onlyadminModal">
    <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">Cannot change permissions</h4>
        </div>
        <div class="modal-body">
          The selected permissions could not be changed because the user is the only <b>admin</b> on the repo.
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->
  

  <!-- Modal message dialog -->
  <div class="modal fade" id="confirmdeleteModal">
    <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 Repository?</h4>
        </div>
        <div class="modal-body">
          Are you <b>absolutely, positively</b> sure you would like to delete this repository? This <b>cannot be undone</b>.
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" ng-click="deleteRepo()">Delete Repository</button>
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->


  <!-- Modal message dialog -->
  <div class="modal fade" id="confirmaddoutsideModal">
    <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">Add User?</h4>
        </div>
        <div class="modal-body">
          The selected user is outside of your organization. Are you sure you want to grant the user access to this repository?
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary" ng-click="grantRole()">Yes, I'm sure</button>
          <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

</div>