kongadmin/assets/js/app/users/user.html

Kong admin GUI

<div data-ng-show="!user">
    <h3>Requested user not found</h3>
</div>

<div data-ng-show="user">

    <form role="form"
          data-editable-form
          name="editableForm"
          data-onaftersave="saveUser()"
    >
        <div class="row margin-bottom">
            <div class="col-md-12">
                <h3 class="pull-left margin-top">
                    {{user.username}}
                </h3>
                <div class="margin-top">
                    <div class="pull-right" data-ng-show="editableForm.$visible">
                        <button type="submit" class="btn btn-primary"
                                data-ng-disabled="editableForm.$waiting"
                        >
                            <i class="mdi mdi-check"></i>
                            Save
                        </button>
                        <button type="button" class="btn btn-danger"
                                data-ng-disabled="editableForm.$waiting"
                                data-ng-click="cancelEditing()"
                        >
                            <i class="mdi mdi-close"></i>
                            Cancel
                        </button>
                    </div>
                    <div class="pull-right" data-ng-show="!editableForm.$visible ">
                        <a
                                data-ng-click="editableForm.$show()"
                                data-uib-tooltip="Toggle edit mode"
                                class="btn btn-warning">
                            <i class="mdi mdi-pencil"></i>
                            Edit
                        </a>
                        <button type="button" class="btn btn-danger"
                                data-ng-bootbox-title="Delete {{user.username}}"
                                data-ng-bootbox-custom-dialog="Really want to delete the user?"

                                data-ng-bootbox-buttons="confirmButtonsDelete">
                            <i class="mdi mdi-delete"></i>
                            Delete
                        </button>

                    </div>
                </div>

            </div>
        </div>

        <div class="row">
            <div class="col-md-3 col-lg-3 " align="center"> <img ng-src="images/user-profile.png" class="img-circle img-responsive profile-user-icon"> </div>

            <div class=" col-md-9 col-lg-9 ">
                <table class="table table-clean">
                    <tbody>
                    <tr data-ng-show="editableForm.$visible">
                        <th colspan="2" class="bg-light-grey">
                            <i class="mdi mdi-information-outline"></i>
                            Info
                        </th>
                    </tr>
                    <tr>
                        <th>Username</th>
                        <td>
                                    <span
                                            data-editable-text="user.username"
                                            data-e-name="user.username"
                                            data-e-required>
                                        {{user.username}}
                                    </span>
                        </td>
                    </tr>
                    <tr>
                        <th>First Name</th>
                        <td>
                                    <span
                                            data-editable-text="user.firstName"
                                            data-e-name="user.firstName"
                                    >
                                        {{user.firstName}}
                                    </span>
                        </td>
                    </tr>
                    <tr>
                        <th>Last Name</th>
                        <td>
                                    <span
                                            data-editable-text="user.lastName"
                                            data-e-name="user.lastName"
                                    >
                                        {{user.lastName}}
                                    </span>
                        </td>
                    </tr>
                    <tr ng-class="{'danger' : errors.email}">
                        <th>Email</th>
                        <td>
                                    <span
                                            data-editable-text="user.email"
                                            data-e-name="user.email"
                                            data-e-required>
                                        <span data-ng-show="!user.email">-</span>
                                        <a data-ng-show="user.email" href="mailto:{{user.email}}">{{user.email}}</a>
                                    </span>
                            <p class="text-danger" ng-if="errors.email" data-ng-bind="errors.email"></p>

                        </td>
                    </tr>
                    <tr ng-if="editableForm.$visible && authUser.admin">
                        <td colspan="2">
                            <div class="form-group well">
                                <label class="col-md-8 control-label no-margin">Is this user active?</label>
                                <div class="col-md-4 text-right">
                                    <input
                                            bs-switch
                                            ng-model="user.active"
                                            switch-size="mini"
                                            type="checkbox"
                                            switch-on-text="YES"
                                            switch-off-text="NO"
                                    >
                                </div>
                                <div class="clearfix"></div>
                            </div>
                        </td>
                    </tr>
                    <tr ng-if="editableForm.$visible && authUser.admin">
                        <td colspan="2">
                            <div class="form-group well">
                                <label class="col-md-8 control-label no-margin">Is this user an administrator?</label>
                                <div class="col-md-4 text-right">
                                    <input
                                            bs-switch
                                            ng-model="user.admin"
                                            switch-size="mini"
                                            type="checkbox"
                                            switch-on-text="YES"
                                            switch-off-text="NO"
                                    >
                                </div>
                                <div class="clearfix"></div>
                            </div>
                        </td>
                    </tr>
                    <tr data-ng-show="editableForm.$visible">
                        <th colspan="2" class="bg-light-grey">
                            <i class="mdi mdi-security"></i>
                            Security
                        </th>
                    </tr>
                    <tr data-ng-show="editableForm.$visible" ng-class="{'danger' : errors.password}">
                        <th>Password</th>
                        <td>
                                    <span
                                            data-editable-text="user.passports.password"
                                            data-e-type="password"
                                            data-e-name="user.passports.password">

                                    </span>
                            <p class="text-danger" ng-if="errors.password" data-ng-bind="errors.password"></p>

                        </td>
                    </tr>
                    <tr data-ng-show="editableForm.$visible" ng-class="{'danger' : errors.password_confirmation}">
                        <th>Password Confirmation</th>
                        <td>
                                    <span
                                            data-editable-text="user.password_confirmation"
                                            data-e-type="password"
                                            data-e-name="user.password_confirmation">

                                    </span>
                            <p class="text-danger" ng-if="errors.password_confirmation" data-ng-bind="errors.password_confirmation"></p>

                        </td>
                    </tr>
                    <tr data-ng-show="!editableForm.$visible">
                        <th>Created at</th>
                        <td>{{user.createdAt | date : "MMM d, y"}}</td>
                    </tr>
                    <tr data-ng-show="!editableForm.$visible">
                        <th>Last update</th>
                        <td>{{user.updatedAt | date : "MMM d, y"}}</td>
                    </tr>

                    </tbody>
                </table>

            </div>
        </div>

    </form>
</div>