kongadmin/assets/js/app/connections/partials/create-connection-form.html

Kong admin GUI

<form class="form-horizontal">
    <div class="form-group" ng-class="{'has-error' : errors.name}">
        <label class="col-sm-4 control-label">Name <br><em><small class="help-block">required</small></em></label>
        <div class="col-sm-7">
            <input ng-model="node.name" class="form-control">
            <div class="text-danger" ng-if="errors.name" data-ng-bind="errors.name"></div>
            <p class="help-block">A unique connection name.</p>
        </div>
    </div>
    <div class="form-group" ng-class="{'has-error' : errors.kong_admin_url}">
        <label class="col-sm-4 control-label">Kong Admin URL <br><em><small class="help-block">required</small></em></label>
        <div class="col-sm-7">
            <input ng-model="node.kong_admin_url" class="form-control">
            <div class="text-danger" ng-if="errors.kong_admin_url" data-ng-bind="errors.kong_admin_url"></div>
            <p class="help-block">The URL to Kong's admin api.</p>
        </div>
    </div>
    <div class="form-group" ng-class="{'has-error' : errors.kong_api_key}">
        <label class="col-sm-4 control-label">API KEY</label>
        <div class="col-sm-7">
            <input ng-model="node.kong_api_key" class="form-control">
            <div class="text-danger" ng-if="errors.kong_api_key" data-ng-bind="errors.kong_api_key"></div>
            <p class="help-block">
                The <code>apikey</code> in case you are exposing Kong's admin via a "loop-back" API.
                See <a href="https://getkong.org/docs/latest/secure-admin-api/#kong-api-loopback" target="_blank">here</a> for details.
            </p>
        </div>
    </div>
    <div class="form-group" ng-class="{'has-error' : errors.kong_version}">
        <label class="col-sm-4 control-label">Kong version</label>
        <div class="col-sm-7">
            <select
                    class="form-control" ng-model="node.kong_version" ng-options="item.value as item.name for item in kong_versions">
            </select>
            <div class="text-danger" ng-if="errors.kong_version" data-ng-bind="errors.kong_version"></div>
            <p class="help-block">The version of Kong running on the node.</p>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-4 col-sm-7">
            <button type="submit" data-ng-disabled="busy" class="btn btn-primary btn-block" ng-click="create()">
                <i class="mdi mdi-check" ng-if="!busy"></i>
                <fading-circle-spinner class="spinner spinner-invert pull-left" ng-if="busy"></fading-circle-spinner>
                create connection
            </button>
        </div>
    </div>
</form>