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

Web UI for managing Kong gateway

<div class="container">
    <h3 class="header">{{title}}</h3>

    <div class="row">
        <div class="col s5">
            <div class="card-panel teal">
                <p class="white-text">
                    The Consumer object represents a consumer (aka "client", aka "user") of an API.
                </p>

                <p class="white-text">
                    Checkout <a href="https://getkong.org/docs/latest/admin-api/#create-consumer" target="_blank">Kong documentation</a> for the meaning of the form parameters.
                </p>
                <p class="white-text" ng-show="location">
                    Check the <a href=/#{{location.path()}}/plugins>Plugins</a> for this Consumer
                </p>
            </div>
        </div>
        <form name="addConsumer" class="col s7" novalidate ng-submit="save()">
            <div class="row">
                <div class="input-field col s12">
                    <input id="username" ng-model="consumer.username" type="text" class="validate"
                           ng-class="{invalid: error.username}">
                    <label for="username" ng-class="{active:consumer.username}">Username</label>
                    <app-field-error error="error.username"></app-field-error>
                </div>
                <div class="input-field col s12" ng-show="consumer.id">
                    <input id="consumer_id" type="text" value="{{consumer.id}}" disabled>
                    <label for="consumer_id" class="active">Id</label>
                </div>
                <div class="input-field col s12">
                    <input id="custom_id" ng-model="consumer.custom_id" type="text" class="validate"
                           ng-class="{invalid: error.custom_id}">
                    <label for="custom_id" ng-class="{active:consumer.custom_id}">Custom id</label>
                    <app-field-error error="error.custom_id"></app-field-error>
                </div>
                <div class="input-field col s12">
                    <button type="submit" class="waves-effect waves-light btn right">
                        {{action}}
                    </button>
                </div>
            </div>
            <input type="hidden" ng-model="consumer.id" value="{{consumer.id}}"/>
        </form>
    </div>

    <div ng-if="consumer.id">

        <div class="row">
            <div class="col s12">
                <ul materialize-tabs class="tabs">
                    <li class="tab"><a href="#key-auth">Key Auth</a></li>
                    <li class="tab"><a href="#basic-auth">Basic Auth</a></li>
                    <li class="tab"><a href="#oauth2">Oauth2</a></li>
                    <li class="tab"><a href="#hmac-auth">Hmac Auth</a></li>
                    <li class="tab"><a href="#jwt">Jwt</a></li>
                    <li class="tab"><a href="#acls">ACLs</a></li>
                </ul>
            </div>
            <div id="key-auth" class="col s12" style="padding-top:30px;">
                <app-loader ng-hide="key_auth"></app-loader>
                <p ng-if="key_auth.data.length==0 && !keyAuthFormDisplayed" class="center-align">
                    This consumer doesn't have any key auth credentials.
                </p>
                <table ng-show="key_auth.data.length >= 1 && !keyAuthFormDisplayed">
                    <thead>
                    <tr>
                        <th>Key</th>
                        <th>Created at</th>
                        <th></th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-repeat="c in key_auth.data">
                        <td>{{c.key}}</td>
                        <td>{{c.created_at | date}}</td>
                        <td>
                            <a class="btn-floating waves-effect waves-light red modal-trigger"
                               ng-click="showDeleteModal('key_auth',c.id)">
                                <i class="material-icons">delete</i>
                            </a>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <form name="newKeyAuth" ng-if="keyAuthFormDisplayed" ng-submit="postNewExtension('key_auth')">
                    <div class="row">
                        <p class="col s6 offset-s3">
                            Leave empty to have Kong auto-generate the key.
                        </p>
                        <div class="input-field col s6 offset-s3">
                            <input id="key" ng-model="new_key_auth.key" type="text" class="validate"
                                   ng-class="{invalid: error.new_key_auth.key}">
                            <label for="key">Key</label>
                            <app-field-error error="error.new_key_auth.key"></app-field-error>
                        </div>
                        <div class="input-field col s6 offset-s3 right">
                            <a class="waves-effect waves-teal btn-flat" ng-click="hideForm('keyAuth')">Cancel</a>
                            <button class="waves-effect waves-light btn">Create</button>
                        </div>
                    </div>
                </form>
                <p class="center-align" ng-hide="keyAuthFormDisplayed">
                    <a ng-click="displayForm('key_auth')" class="waves-effect waves-light btn center-align">New</a>
                </p>
            </div>
            <div id="basic-auth" class="col s12" style="padding-top:30px;">
                <app-loader ng-hide="basic_auth"></app-loader>
                <p ng-if="basic_auth.data.length==0 && !basicAuthFormDisplayed" class="center-align">
                    This consumer doesn't have any basic auth credentials.
                </p>
                <table ng-show="basic_auth.data.length >= 1 && !basicAuthFormDisplayed">
                    <thead>
                    <tr>
                        <th>Username</th>
                        <th>Password</th>
                        <th>Created at</th>
                        <th></th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-repeat="c in basic_auth.data">
                        <td>{{c.username}}</td>
                        <td>********</td>
                        <td>{{c.created_at | date}}</td>
                        <td>
                            <a class="btn-floating waves-effect waves-light red modal-trigger"
                               ng-click="showDeleteModal('basic_auth',c.id)">
                                <i class="material-icons">delete</i>
                            </a>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <form name="newBasicAuth" ng-if="basicAuthFormDisplayed" ng-submit="postNewExtension('basic_auth')">
                    <div class="row">
                        <div class="input-field col s6 offset-s3">
                            <input id="username" ng-model="new_basic_auth.username" type="text" class="validate"
                                   ng-class="{invalid: error.new_basic_auth.username}">
                            <label for="username">Username</label>
                            <app-field-error error="error.new_basic_auth.username"></app-field-error>
                        </div>
                        <div class="input-field col s6 offset-s3">
                            <input id="password" ng-model="new_basic_auth.password" type="password" class="validate"
                                   ng-class="{invalid: error.new_basic_auth.password}">
                            <label for="password">Password</label>
                            <app-field-error error="error.new_basic_auth.password"></app-field-error>
                        </div>
                        <div class="input-field col s6 offset-s3 right">
                            <a class="waves-effect waves-teal btn-flat" ng-click="hideForm('basic_auth')">Cancel</a>
                            <button class="waves-effect waves-light btn">Create</button>
                        </div>
                    </div>
                </form>
                <p class="center-align" ng-hide="basicAuthFormDisplayed">
                    <a ng-click="displayForm('basic_auth')" class="waves-effect waves-light btn center-align">New</a>
                </p>
            </div>
            <div id="oauth2" class="col s12" style="padding-top:30px;">
                <app-loader ng-hide="oauth2"></app-loader>
                <p ng-if="oauth2.data.length==0 && !oauth2FormDisplayed" class="center-align">
                    This consumer doesn't have any oauth2 credentials.
                </p>
                <table ng-show="oauth2.data.length >= 1 && !oauth2FormDisplayed">
                    <thead>
                    <tr>
                        <th>Name</th>
                        <th>Client ID</th>
                        <th>Client Secret</th>
                        <th>Redirect URI(s)</th>
                        <th>Created at</th>
                        <th></th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-repeat="c in oauth2.data">
                        <td>{{c.name}}</td>
                        <td>{{c.client_id}}</td>
                        <td>{{c.client_secret}}</td>
                        <td ng-if="c.redirect_uri.length == 1">
                            {{ c.redirect_uri[0] }}
                        </td>
                        <td ng-if="c.redirect_uri.length != 1">
                            <ul class="browser-default">
                                <li ng-repeat="uri in c.redirect_uri">
                                    {{ uri }}
                                </li>
                            </ul>
                        </td>
                        <td>{{c.created_at | date}}</td>
                        <td>
                            <a class="btn-floating waves-effect waves-light red modal-trigger"
                               ng-click="showDeleteModal('oauth2',c.id)">
                                <i class="material-icons">delete</i>
                            </a>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <form name="newOauth2Form" ng-if="oauth2FormDisplayed" ng-submit="postNewExtension('oauth2')">
                    <div class="row">
                        <p class="col s6 offset-s3">
                            If you leave client id and client secret empty, Kong will auto-generate them.
                        </p>
                        <div class="input-field col s6 offset-s3">
                            <input id="name" ng-model="new_oauth2.name" type="text" class="validate"
                                   ng-class="{invalid: error.new_oauth2.name}">
                            <label for="name">Username</label>
                            <app-field-error error="error.new_oauth2.name"></app-field-error>
                        </div>
                        <div class="input-field col s6 offset-s3">
                            <input id="client_id" ng-model="new_oauth2.client_id" type="text" class="validate"
                                   ng-class="{invalid: error.new_oauth2.client_id}">
                            <label for="client_id">Client Id</label>
                            <app-field-error error="error.new_oauth2.client_id"></app-field-error>
                        </div>
                        <div class="input-field col s6 offset-s3">
                            <input id="client_secret" ng-model="new_oauth2.client_secret" type="text" class="validate"
                                   ng-class="{invalid: error.new_oauth2.client_secret}">
                            <label for="client_secret">Client Secret</label>
                            <app-field-error error="error.new_oauth2.client_secret"></app-field-error>
                        </div>
                        <div class="input-field col s6 offset-s3">
                            <input id="redirect_uri" ng-model="new_oauth2.redirect_uri" type="text" class="validate"
                                   ng-class="{invalid: error.new_oauth2.redirect_uri}">
                            <label for="redirect_uri">Redirect URI</label>
                            <app-field-error error="error.new_oauth2.redirect_uri"></app-field-error>
                        </div>
                        <div class="input-field col s6 offset-s3 right">
                            <a class="waves-effect waves-teal btn-flat" ng-click="hideForm('oauth2')">Cancel</a>
                            <button class="waves-effect waves-light btn">Create</button>
                        </div>
                    </div>
                </form>
                <p class="center-align" ng-hide="oauth2FormDisplayed">
                    <a ng-click="displayForm('oauth2')" class="waves-effect waves-light btn center-align">New</a>
                </p>
            </div>
            <div id="hmac-auth" class="col s12" style="padding-top:30px;">
                <app-loader ng-hide="hmac_auth"></app-loader>
                <p ng-if="hmac_auth.data.length==0 && !hmacAuthFormDisplayed" class="center-align">
                    This consumer doesn't have any hmac auth credentials.
                </p>
                <table ng-show="hmac_auth.data.length >= 1 && !hmacAuthFormDisplayed">
                    <thead>
                    <tr>
                        <th>Username</th>
                        <th>Created at</th>
                        <th></th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-repeat="c in hmac_auth.data">
                        <td>{{c.username}}</td>
                        <td>{{c.created_at | date}}</td>
                        <td>
                            <a class="btn-floating waves-effect waves-light red modal-trigger"
                               ng-click="showDeleteModal('hmac_auth',c.id)">
                                <i class="material-icons">delete</i>
                            </a>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <form name="newHmacAuth" ng-if="hmacAuthFormDisplayed" ng-submit="postNewExtension('hmac_auth')">
                    <div class="row">
                        <div class="input-field col s6 offset-s3">
                            <input id="username" ng-model="new_hmac_auth.username" type="text" class="validate"
                                   ng-class="{invalid: error.new_hmac_auth.username}">
                            <label for="username">Username</label>
                            <app-field-error error="error.new_hmac_auth.username"></app-field-error>
                        </div>
                        <div class="input-field col s6 offset-s3">
                            <input id="secret" ng-model="new_hmac_auth.secret" type="text" class="validate"
                                   ng-class="{invalid: error.new_hmac_auth.secret}">
                            <label for="secret">Secret</label>
                            <app-field-error error="error.new_hmac_auth.secret"></app-field-error>
                        </div>
                        <div class="input-field col s6 offset-s3 right">
                            <a class="waves-effect waves-teal btn-flat" ng-click="hideForm('hmac_auth')">Cancel</a>
                            <button class="waves-effect waves-light btn">Create</button>
                        </div>
                    </div>
                </form>
                <p class="center-align" ng-hide="hmacAuthFormDisplayed">
                    <a ng-click="displayForm('hmac_auth')" class="waves-effect waves-light btn center-align">New</a>
                </p>
            </div>
            <div id="jwt" class="col s12" style="padding-top:30px;">
                <app-loader ng-hide="jwt"></app-loader>
                <p ng-if="jwt.data.length==0 && !jwtFormDisplayed" class="center-align">
                    This consumer doesn't have any JSON web token.
                </p>
                <table ng-show="jwt.data.length >= 1 && !jwtFormDisplayed">
                    <thead>
                    <tr>
                        <th>Key</th>
                        <th>Secret</th>
                        <th>Created at</th>
                        <th></th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-repeat="c in jwt.data">
                        <td>{{c.key}}</td>
                        <td>{{c.secret}}</td>
                        <td>{{c.created_at | date}}</td>
                        <td>
                            <a class="btn-floating waves-effect waves-light red modal-trigger"
                               ng-click="showDeleteModal('jwt',c.id)">
                                <i class="material-icons">delete</i>
                            </a>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <form name="newJwt" ng-if="jwtFormDisplayed" ng-submit="postNewExtension('jwt')">
                    <div class="row">
                        <p class="col s6 offset-s3">
                            Leave those values empty to let Kong auto-generate them.
                        </p>
                        <div class="input-field col s6 offset-s3">
                            <input id="key" ng-model="new_jwt.key" type="text" class="validate"
                                   ng-class="{invalid: error.new_jwt.key}">
                            <label for="key">Key</label>
                            <app-field-error error="error.new_jwt.key"></app-field-error>
                        </div>
                        <div class="input-field col s6 offset-s3">
                            <input id="secret" ng-model="new_jwt.secret" type="text" class="validate"
                                   ng-class="{invalid: error.new_jwt.secret}">
                            <label for="secret">Secret</label>
                            <app-field-error error="error.new_jwt.secret"></app-field-error>
                        </div>
                        <div class="input-field col s6 offset-s3 right">
                            <a class="waves-effect waves-teal btn-flat" ng-click="hideForm('jwt')">Cancel</a>
                            <button class="waves-effect waves-light btn">Create</button>
                        </div>
                    </div>
                </form>
                <p class="center-align" ng-hide="jwtFormDisplayed">
                    <a ng-click="displayForm('jwt')" class="waves-effect waves-light btn center-align">New</a>
                </p>
            </div>
            <div id="acls" class="col s12" style="padding-top:30px;">
                <app-loader ng-hide="acls"></app-loader>
                <p ng-if="acls.data.length==0 && !aclsFormDisplayed" class="center-align">
                    This consumer doesn't not belong to any group.
                </p>
                <div class="row">
                    <table ng-show="acls.data.length >= 1 && !aclsFormDisplayed" class="col s8 offset-s2">
                        <thead>
                        <tr>
                            <th>Groups this consumer belongs to</th>
                            <th>Created at</th>
                            <th></th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr ng-repeat="c in acls.data">
                            <td>{{c.group}}</td>
                            <td>{{c.created_at | date}}</td>
                            <td>
                                <a class="btn-floating waves-effect waves-light red modal-trigger"
                                   ng-click="showDeleteModal('acls',c.id)">
                                    <i class="material-icons">delete</i>
                                </a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <form name="newAcls" ng-if="aclsFormDisplayed" ng-submit="postNewExtension('acls')">
                    <div class="row">
                        <div class="input-field col s6 offset-s3">
                            <input id="group" ng-model="new_acls.group" type="text" class="validate"
                                   ng-class="{invalid: error.new_acls.group}">
                            <label for="group">Group</label>
                            <app-field-error error="error.new_acls.group"></app-field-error>
                        </div>
                        <div class="input-field col s6 offset-s3 right">
                            <a class="waves-effect waves-teal btn-flat" ng-click="hideForm('acls')">Cancel</a>
                            <button class="waves-effect waves-light btn">Add to</button>
                        </div>
                    </div>
                </form>
                <p class="center-align" ng-hide="aclsFormDisplayed">
                    <a ng-click="displayForm('acls')" class="waves-effect waves-light btn center-align">Add group</a>
                </p>
            </div>
        </div>
    </div>

    <!-- Modal Structure -->
    <div id="deleteCredentials" class="modal">
        <div class="modal-content">
            <h5>Do you really want to delete this record?</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>

</div>