kong-dashboard/public/html/consumers/index.html

Web UI for managing Kong gateway

<div class="container" infinite-scroll="loadMore()" infinite-scroll-distance="5" infinite-scroll-use-document-bottom="true">

  <ul ng-show="consumers.length >= 1" class="horizontal right">
    <li class="search" style="width:300px;">
      <div class="search-wrapper card">
        <input class="search" placeholder="Search consumer" value=""
               ng-focus="searchBarFocused = true"
               ng-blur="searchBarFocused = false"
               ng-model="searchInput"
               ng-change="searchConsumers()">
        <i class="material-icons">search</i>
        <div class="search-results collection" ng-show="searchBarFocused || viewingResults" ng-mouseover="viewingResults = true" ng-mouseout="viewingResults = false">
          <p class="collection-item grey-text" ng-if="!searchInput">
            <small>
              Search consumer by ID, custom ID, username, or Oauth2 client_id.
            </small>
          </p>
          <p class="collection-item grey-text" ng-if="searching && Utils.keys(searchResults).length == 0">
            No results found.
          </p>
          <a class="collection-item" ng-repeat="(id, name) in searchResults" href="#/consumers/{{ id }}">
            {{ name }}
          </a>
          <!--
          <a href="#" class="collection-item">Consumer 1</a>
          <a href="#" class="collection-item">Consumer 2</a>
          -->
        </div>
      </div>
    </li>
    <li>
      <a href="#/consumers/add" class="btn-floating btn-large waves-effect waves-light">
        <i class="material-icons">add</i>
      </a>
    </li>
  </ul>

  <h3 class="header">
      Consumers
    </h3>

    <p class="flow-text center" ng-show="total === null" style="margin-top:50px;">
        <app-loader></app-loader>
    </p>

    <div class ng-show="total === 0">
        <p class="flow-text center">
            You haven't defined any Consumers in Kong yet.
        </p>
        <p class="center">
            <a href="#/consumers/add" class="waves-effect waves-light btn">
                <i class="material-icons left">add_box</i>
                Add Consumer
            </a>
        </p>
    </div>

    <table class="bordered" ng-show="total > 0">
        <thead>
        <tr>
            <th>Username</th>
            <th>Custom id</th>
            <th>Created</th>
            <th></th>
        </tr>
        </thead>

        <tbody>
        <tr ng-repeat="consumer in consumers">
            <td>{{consumer.username}} <p ng-show="!consumer.username">nope</p></td>
            <td><a ng-show="gelato" href="https://gelato.io/app/developers/{{consumer.custom_id}}">{{consumer.custom_id}}</a>
                <p ng-show="!gelato">{{consumer.custom_id}}</p>
                <p ng-show="!consumer.custom_id">nope</p></td>
            <td>{{consumer.created_at | date}}</td>
            <td class="right">
                <a class="btn-floating waves-effect waves-light" href="#/consumers/{{consumer.id}}">
                    <i class="material-icons">mode_edit</i>
                </a>
                <a class="btn-floating waves-effect waves-light blue" href="#/consumers/{{consumer.id}}/plugins">
                    <i class="material-icons">extension</i>
                </a>
                <a class="btn-floating waves-effect waves-light red modal-trigger" ng-click="showDeleteModal(consumer.username, consumer.id)">
                    <i class="material-icons">delete</i>
                </a>
            </td>
        </tr>
        </tbody>
    </table>
</div>

<!-- Modal Structure -->
<div id="deleteConsumer" class="modal">
    <div class="modal-content">
        <h5>Do you really want to delete the Consumer "{{current.username}}"?</h5>
    </div>
    <div class="modal-footer">
        <a class="waves-effect waves-green btn" ng-click="abortDelete()">Noooooo!</a>
        <a class="waves-effect waves-red btn red" ng-click="performDelete()" style="margin-right:10px">Yes</a>
    </div>
</div>