portainer/app/directives/accessControlPanel/porAccessControlPanel.html

<div class="row">
  <div class="col-sm-12" ng-if="$ctrl.state.displayAccessControlPanel">
    <rd-widget>
      <rd-widget-header icon="fa-eye" title="Access control"></rd-widget-header>
      <rd-widget-body classes="no-padding">
        <table class="table">
          <tbody>
            <!-- ownership -->
            <tr>
              <td>Ownership</td>
              <td>
                <i ng-class="$ctrl.resourceControl.Ownership | ownershipicon" aria-hidden="true" style="margin-right: 2px;"></i>
                <span ng-if="!$ctrl.resourceControl">
                  public
                  <portainer-tooltip message="This resource can be managed by any user with access to this endpoint." position="bottom" style="margin-left: -3px;"></portainer-tooltip>
                </span>
                <span ng-if="$ctrl.resourceControl">
                  {{ $ctrl.resourceControl.Ownership }}
                  <portainer-tooltip ng-if="$ctrl.resourceControl.Ownership === 'administrators'" message="This resource can only be managed by administrators." position="bottom" style="margin-left: -3px;"></portainer-tooltip>
                  <portainer-tooltip ng-if="$ctrl.resourceControl.Ownership === 'private'" message="Management of this resource is restricted to a single user." position="bottom" style="margin-left: -3px;"></portainer-tooltip>
                  <portainer-tooltip ng-if="$ctrl.resourceControl.Ownership === 'restricted'" message="This resource can be managed by a restricted set of users and/or teams." position="bottom" style="margin-left: -3px;"></portainer-tooltip>
                </span>
              </td>
            </tr>
            <!-- !ownership -->
            <tr ng-if="$ctrl.resourceControl.Type === 2 && $ctrl.resourceType === 'container'">
              <td colspan="2">
                <i class="fa fa-info-circle" aria-hidden="true" style="margin-right: 2px;"></i>
                Access control on this resource is inherited from the following service: <a ui-sref="service({ id: $ctrl.resourceControl.ResourceId })">{{ $ctrl.resourceControl.ResourceId | truncate }}</a>
                <portainer-tooltip message="Access control applied on a service is also applied on each container of that service." position="bottom" style="margin-left: 2px;"></portainer-tooltip>
              </td>
            </tr>
            <tr ng-if="$ctrl.resourceControl.Type === 1 && $ctrl.resourceType === 'volume'">
              <td colspan="2">
                <i class="fa fa-info-circle" aria-hidden="true" style="margin-right: 2px;"></i>
                Access control on this resource is inherited from the following container: <a ui-sref="container({ id: $ctrl.resourceControl.ResourceId })">{{ $ctrl.resourceControl.ResourceId | truncate }}</a>
                <portainer-tooltip message="Access control applied on a container created using a template is also applied on each volume associated to the container." position="bottom" style="margin-left: 2px;"></portainer-tooltip>
              </td>
            </tr>
            <!-- authorized-users -->
            <tr ng-if="$ctrl.resourceControl.UserAccesses.length > 0">
              <td>Authorized users</td>
              <td>
                <span ng-repeat="user in $ctrl.authorizedUsers">{{user.Username}}{{$last ? '' : ', '}} </span>
              </td>
            </tr>
            <!-- !authorized-users -->
            <!-- authorized-teams -->
            <tr ng-if="$ctrl.resourceControl.TeamAccesses.length > 0">
              <td>Authorized teams</td>
              <td>
                <span ng-repeat="team in $ctrl.authorizedTeams">{{team.Name}}{{$last ? '' : ', '}} </span>
              </td>
            </tr>
            <!-- !authorized-teams -->
            <!-- edit-ownership -->
            <tr ng-if="!($ctrl.resourceControl.Type === 1 && $ctrl.resourceType === 'volume') && !($ctrl.resourceControl.Type === 2 && $ctrl.resourceType === 'container') && !$ctrl.state.editOwnership && ($ctrl.isAdmin || $ctrl.state.canEditOwnership)">
              <td colspan="2">
                <a class="btn-outline-secondary" ng-click="$ctrl.state.editOwnership = true"><i class="fa fa-edit space-right" aria-hidden="true"></i>Change ownership</a>
              </td>
            </tr>
            <!-- !edit-ownership -->
            <!-- edit-ownership-choices -->
            <tr ng-if="$ctrl.state.editOwnership">
              <td colspan="2">
                <div class="boxselector_wrapper">
                  <div ng-if="$ctrl.isAdmin">
                    <input type="radio" id="access_administrators" ng-model="$ctrl.formValues.Ownership" value="administrators">
                    <label for="access_administrators">
                      <div class="boxselector_header">
                        <i ng-class="'administrators' | ownershipicon" aria-hidden="true" style="margin-right: 2px;"></i>
                        Administrators
                      </div>
                      <p>I want to restrict the management of this resource to administrators only</p>
                    </label>
                  </div>
                  <div ng-if="$ctrl.isAdmin">
                    <input type="radio" id="access_restricted" ng-model="$ctrl.formValues.Ownership" value="restricted">
                    <label for="access_restricted">
                      <div class="boxselector_header">
                        <i ng-class="'restricted' | ownershipicon" aria-hidden="true" style="margin-right: 2px;"></i>
                        Restricted
                      </div>
                      <p>
                        I want to restrict the management of this resource to a set of users and/or teams
                      </p>
                    </label>
                  </div>
                  <div ng-if="!$ctrl.isAdmin && $ctrl.state.canChangeOwnershipToTeam && $ctrl.availableTeams.length > 0">
                    <input type="radio" id="access_restricted" ng-model="$ctrl.formValues.Ownership" value="restricted">
                    <label for="access_restricted">
                      <div class="boxselector_header">
                        <i ng-class="'restricted' | ownershipicon" aria-hidden="true" style="margin-right: 2px;"></i>
                        Restricted
                      </div>
                      <p ng-if="$ctrl.availableTeams.length === 1">
                        I want any member of my team (<b>{{ $ctrl.availableTeams[0].Name }}</b>) to be able to manage this resource
                      </p>
                      <p ng-if="$ctrl.availableTeams.length > 1">
                        I want to restrict the management of this resource to one or more of my teams
                      </p>
                    </label>
                  </div>
                  <div>
                    <input type="radio" id="access_public" ng-model="$ctrl.formValues.Ownership" value="public">
                    <label for="access_public">
                      <div class="boxselector_header">
                        <i ng-class="'public' | ownershipicon" aria-hidden="true" style="margin-right: 2px;"></i>
                        Public
                      </div>
                      <p>I want any user with access to this endpoint to be able to manage this resource</p>
                    </label>
                  </div>
                </div>
              </td>
            </tr>
            <!-- edit-ownership-choices -->
            <!-- select-teams -->
            <tr ng-if="$ctrl.state.editOwnership && $ctrl.formValues.Ownership === 'restricted' && ($ctrl.isAdmin || !$ctrl.isAdmin && $ctrl.availableTeams.length > 1)">
              <td colspan="2">
                <span>Teams</span>
                <span ng-if="$ctrl.isAdmin && $ctrl.availableTeams.length === 0" class="small text-muted" style="margin-left: 10px;">
                  You have not yet created any team. Head over the <a ui-sref="teams">teams view</a> to manage user teams.
                </span>
                <span isteven-multi-select
                  ng-if="($ctrl.isAdmin && $ctrl.availableTeams.length > 0) || (!$ctrl.isAdmin && $ctrl.availableTeams.length > 1)"
                  input-model="$ctrl.availableTeams"
                  output-model="$ctrl.formValues.Ownership_Teams"
                  button-label="Name"
                  item-label="Name"
                  tick-property="selected"
                  helper-elements="filter"
                  search-property="Name"
                  max-labels="3"
                  translation="{nothingSelected: 'Select one or more teams', search: 'Search...'}">
                </span>
              </td>
            </tr>
            <!-- !select-teams -->
            <!-- select-users -->
            <tr ng-if="$ctrl.isAdmin && $ctrl.state.editOwnership && $ctrl.formValues.Ownership === 'restricted'">
              <td colspan="2">
                <span>Users</span>
                <span ng-if="$ctrl.availableUsers.length === 0" class="small text-muted" style="margin-left: 10px;">
                  You have not yet created any user. Head over the <a ui-sref="users">users view</a> to manage users.
                </span>
                <span isteven-multi-select
                  ng-if="$ctrl.availableUsers.length > 0"
                  input-model="$ctrl.availableUsers"
                  output-model="$ctrl.formValues.Ownership_Users"
                  button-label="Username"
                  item-label="Username"
                  tick-property="selected"
                  helper-elements="filter"
                  search-property="Username"
                  max-labels="3"
                  translation="{nothingSelected: 'Select one or more users', search: 'Search...'}">
                </span>
              </td>
            </tr>
            <!-- !select-users -->
            <!-- ownership-actions -->
            <tr ng-if="$ctrl.state.editOwnership">
              <td colspan="2">
                <div>
                  <a type="button" class="btn btn-default btn-sm" ng-click="$ctrl.state.editOwnership = false">Cancel</a>
                  <a type="button" class="btn btn-primary btn-sm" ng-click="$ctrl.confirmUpdateOwnership()">Update ownership</a>
                  <span class="text-danger" ng-if="$ctrl.state.formValidationError" style="margin-left: 5px;">{{ $ctrl.state.formValidationError }}</span>
                </div>
              </td>
            </tr>
            <!-- !ownership-actions -->
          </tbody>
        </table>
      </rd-widget-body>
    </rd-widget>
  </div>
</div>