realm-credentials.html

<div id="wrapper" class="container realm-policy">
    <div class="row">
        <div class="bs-sidebar col-md-3 clearfix" data-ng-include data-src="'partials/realm-menu.html'"></div>
        <div id="content-area" class="col-md-9" role="main">
            <div class="top-nav" data-ng-hide="createRealm">
                <ul class="rcue-tabs">
                    <li><a href="#/realms/{{realm.id}}">General</a></li>
                    <li data-ng-show="realm.social"><a href="#/realms/{{realm.id}}/social-settings">Social</a></li>
                    <li data-ng-show="realm.registrationAllowed"><a href="#/realms/{{realm.id}}/registration-settings">Registration</a></li>
                    <li><a href="#/realms/{{realm.id}}/roles">Roles</a></li>
                    <li class="active"><a href="#/realms/{{realm.id}}/required-credentials">Credentials</a></li>
                    <li><a href="#/realms/{{realm.id}}/token-settings">Token</a></li>
                    <li><a href="#/realms/{{realm.id}}/keys-settings">Keys</a></li>
                    <li><a href="#/realms/{{realm.id}}/smtp-settings">SMTP</a></li>
                </ul>
            </div>
            <div id="content">
                <ol class="breadcrumb">
                    <li><a href="#/realms/{{realm.id}}">{{realm.realm}}</a></li>
                    <li><a href="#/realms/{{realm.id}}">Settings</a></li>
                    <li class="active">Required Credentials</li>
                </ol>
                <h2><span>{{realm.realm}}</span> Credentials</h2>
                <form name="realmForm" novalidate>
                    <fieldset class="border-top">
                        <legend uncollapsed><span class="text">Realm Credentials Settings</span></legend>
                        <div class="form-group clearfix">
                            <label for="user" class="control-label two-lines">Required User Credentials</label>

                            <div class="controls">
                                <input id="user" type="text" ui-select2="userCredentialOptions" ng-model="realm.requiredCredentials" placeholder="Type a role and enter">
                            </div>
                        </div>
                        <div class="form-group clearfix">
                            <label for="application" class="control-label two-lines">Required Application Credentials</label>

                            <div class="controls">
                                <input id="application" type="text" ui-select2="userCredentialOptions" ng-model="realm.requiredApplicationCredentials" placeholder="Type a role and enter">
                            </div>
                        </div>
                        <div class="form-group clearfix">
                            <label for="oauth" class="control-label two-lines">Required OAuth Credentials</label>

                            <div class="controls">
                                <input id="oauth" type="text" ui-select2="userCredentialOptions" ng-model="realm.requiredOAuthClientCredentials" placeholder="Type a role and enter">
                            </div>
                        </div>
                    </fieldset>
                    <fieldset class="border-top">
                        <legend uncollapsed><span class="text">Realm Password Policy</span></legend>
                        <div class="form-group clearfix">
                        <table>
                            <caption class="hidden">Table of Password Policies</caption>
                            <thead>
                            <tr ng-show="availablePolicies.length > 0">
                                <th colspan="5" class="rcue-table-actions">
                                    <div class="actions">
                                        <div class="select-rcue">
                                            <select ng-model="newPolicyId"
                                                    ng-options="name as name for name in availablePolicies"
                                                    placeholder="Please select">
                                            </select>
                                        </div>
                                        <div>
                                            <button ng-click="addPolicy()" ng-disabled="">Add Policy</button>
                                        </div>
                                    </div>
                                </th>
                            </tr>
                            <tr>
                                <th>Policy Type</th>
                                <th>Policy Value</th>
                                <th>Actions</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr ng-repeat="name in configuredPolicies">
                                <td>
                                    <div class="clearfix">
                                        <input class="input-small disabled" type="text" value="{{name}}" readonly>
                                    </div>
                                </td>
                                <td>
                                    <input ng-model="policy[name]" type="number" placeholder="No value assigned" class="input-small">
                                </td>
                                <td>
                                    <div class="action-div"><i class="icon-question" popover="{{policyMessages[name]}}"
                                                               popover-placement="left" popover-trigger="mouseenter"></i></div>
                                    <div class="action-div"><i class="icon-remove" ng-click="removePolicy(name)"></i></div>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                            </div>
                    </fieldset>
                    <div class="form-actions">
                        <button type="submit" kc-save class="primary" data-ng-show="changed">Save
                        </button>
                        <button type="submit" kc-reset data-ng-show="changed">Clear changes
                        </button>
                    </div>
                </form>
            </div>
        </div>
        <div id="container-right-bg"></div>
    </div>
</div>

<!-- TODO remove once this page is properly styled -->
<style type="text/css">
    .realm-policy .actions > div {
        display: inline-block;
        overflow: hidden;
    }

    .realm-policy td {
        font-size: 10px;
    }

    .realm-policy .action-div {
        display: inline-block;
        margin: 5px;
    }

    .realm-policy .icon-remove, .realm-policy .icon-question {
        cursor: pointer;
    }

</style>