application-detail.html

<div id="wrapper" class="container">
    <div class="row">
        <aside class="span3" ng-include src="'partials/application-menu.html'"></aside>
        <div id="actions-bg"></div>

        <div id="container-right" class="span9">
            <h1>
                <span class="gray" ng-show="create">New Application</span> <span class="gray" ng-hide="create">{{application.name}}</span>
                configuration
            </h1>

            <div ng-show="applicationForm.showErrors && applicationForm.$error.required" class="alert alert-error">Please fill in all required fields</div>
            <p class="subtitle subtitle-right"><span class="required">*</span> Required fields</p>

            <form class="form-horizontal" name="applicationForm" novalidate>
                <fieldset>
                    <legend>Settings</legend>
                    <div>
                        <div class="control-group">
                            <label class="control-label" for="name">Name <span class="required">*</span></label>
                            <div class="controls">
                                <input type="text" class="input-xlarge" id="name" name="name" ng-model="application.name" autofocus required>
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label" for="callbackUrl">Callback URL <span class="required">*</span></label>
                            <div class="controls">
                                <input type="text" class="input-xxlarge" id="callbackUrl" name="callbackUrl" ng-model="application.callbackUrl"
                                    required>
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label" for="javaScriptOrigin">JavaScript Origin </label>
                            <div class="controls">
                                <input type="text" class="input-xxlarge" id="javaScriptOrigin" ng-model="application.javaScriptOrigin">
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label" for="key">Key </label>
                            <div class="controls">
                                <input class="input-xxlarge" type="text" id="key" ng-model="application.key" ng-readonly="!(auth.root && create)">
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label" for="secret">Secret </label>
                            <div class="controls">
                                <input class="input-xxlarge" type="text" id="secret" ng-model="application.secret" ng-readonly="!(auth.root && create)">
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label" for="realm">Realm <span class="required">*</span></label>
                            <div class="controls">
                                <select ng-model="application.realm" id="realm" name="realm" required>
                                    <option ng-repeat="r in realms" value="{{r.key}}" ng-selected="r.key == application.realm">{{r.name}}</option>
                                </select>
                            </div>
                        </div>
                        <div class="control-group" ng-show="auth.root">
                            <label class="control-label" for="owner">Owner </label>
                            <div class="controls">
                                <input class="input-xxlarge" type="text" id="owner" ng-model="application.owner">
                            </div>
                        </div>
                    </div>
                </fieldset>
                <fieldset>
                    <legend>Identity Providers</legend>
                    <div>
                        <div class="input-append">
                            <select ng-model="newProviderId">
                                <option ng-repeat="p in availableProviders" value="{{p.id}}">{{p.name}}</option>
                            </select>
                            <button class="btn" ng-click="addProvider()" ng-disabled="!newProviderId">Add Provider</button>
                        </div>

                        <table class="table table-striped table-bordered margin-top" ng-show="application.providers.length > 0">
                            <thead>
                                <tr>
                                    <th>Provider</th>
                                    <th>Key <span class="required">*</span></th>
                                    <th>Secret <span class="required">*</span></th>
                                    <th>&nbsp;</th>
                                </tr>
                            </thead>
                            <tr ng-repeat="provider in application.providers">
                                    <td><input type="text" placeholder="Key" value="{{getProviderDescription(provider.providerId).name}}" readonly></td>
                                    <td>
                                        <input type="text" placeholder="Key" ng-model="provider.key" required>
                                    </td>
                                    <td>
                                        <input type="text" placeholder="Secret" ng-model="provider.secret" required>
                                    </td>
                                    <td><i class="icon-question-sign" ng-click="openHelp($index)"></i></td>
                                    <td><i class="icon-trash" ng-click="removeProvider($index)"></i></td>
                            </tr>
                        </table>
                    </div>
                </fieldset>

                <div class="form-actions" ng-show="create">
                    <button type="submit" ng-click="save()" class="btn btn-primary" ng-show="changed">Save</button>
                    <button type="submit" ng-click="cancel()" class="btn" ng-click="cancel()" ng-show="changed">Cancel</button>
                </div>

                <div class="form-actions" ng-show="!create">
                    <button type="submit" ng-click="save()" class="btn btn-primary" ng-show="changed">Save changes</button>
                    <button type="submit" ng-click="reset()" class="btn" ng-show="changed">Clear changes</button>
                    <a href="#/applications" ng-hide="changed">View applications &#187;</a>
                    <button type="submit" ng-click="remove()" class="btn btn-danger" ng-hide="changed">Delete</button>
                </div>
            </form>
        </div>

        <div id="container-right-bg"></div>
    </div>
</div>

<div modal="providerHelpModal" close="closeHelp()" options="opts">
    <div class="modal-header">
        <h3>Configure {{providerHelp.description.name}}</h3>
    </div>
    <div class="modal-body">
        <div ng-include src="providerHelp && 'partials/provider/' + providerHelp.description.id + '-help.html'"></div>
    </div>
    <div class="modal-footer">
        <button class="btn" ng-click="closeHelp()">Close</button>
    </div>
</div>