Merge pull request #74 from cardosogabriel/master

Adjustements from the "Keycloak Design Fixes" spreadsheet

admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/forms.css

@@ -344,6 +344,7 @@ fieldset.border-top {
   border-style: solid;
   border-color: #e9e8e8;
   padding-top: 2em;
+  clear: both;
 }
 .form-group {
   display: block;

admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/forms.less

@@ -400,6 +400,7 @@ fieldset.border-top {
     border-style: solid;
     border-color: #e9e8e8;
     padding-top: 2em;
+    clear: both;
 }
 
 .form-group {

admin-ui/src/main/resources/META-INF/resources/admin/partials/realm-credentials.html

@@ -4,44 +4,46 @@
         <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}}">Settings</a></li>
+                    <li><a href="#/realms/{{realm.id}}">General</a></li>
                     <li data-ng-show="realm.social"><a href="#">Social</a></li>
                     <li><a href="#/realms/{{realm.id}}/roles">Roles</a></li>
-                    <li class="active"><a href="#/realms/{{realm.id}}/required-credentials">Required Credentials</a></li>
+                    <li class="active"><a href="#/realms/{{realm.id}}/required-credentials">Credentials</a></li>
-                    <li><a href="#/realms/{{realm.id}}/token-settings">Token Settings</a></li>
+                    <li><a href="#/realms/{{realm.id}}/token-settings">Token</a></li>
                 </ul>
             </div>
             <div id="content">
-                <h2 class="pull-left">Realm: <span>{{realm.realm}}</span></h2>
+                <ol class="breadcrumb">
-                <p class="subtitle"></p>
+                    <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>
+                    <fieldset class="border-top">
-                        <legend uncollapsed><span class="text">Required Credentials</span></legend>
+                        <div class="form-group clearfix">
-                        <div class="form-group">
+                            <label for="user" class="control-label">Required User Credentials</label>
-                            <label class="control-label">Required User Credentials</label>
 
                             <div class="controls">
-                                <input style="width:250px" type="text" ui-select2="userCredentialOptions" ng-model="realm.requiredCredentials">
+                                <input id="user" type="text" ui-select2="userCredentialOptions" ng-model="realm.requiredCredentials" class="form-control tokenfield" placeholder="Type a role and enter">
                             </div>
                         </div>
-                        <div class="form-group">
+                        <div class="form-group clearfix">
-                            <label class="control-label">Required Application Credentials</label>
+                            <label for="application" class="control-label">Required Application Credentials</label>
 
                             <div class="controls">
-                                <input style="width:250;height:25" type="text" ui-select2="userCredentialOptions" ng-model="realm.requiredApplicationCredentials">
+                                <input id="application" type="text" ui-select2="userCredentialOptions" ng-model="realm.requiredApplicationCredentials" class="form-control tokenfield" placeholder="Type a role and enter">
                             </div>
                         </div>
-                        <div class="form-group">
+                        <div class="form-group clearfix">
-                            <label class="control-label">Required OAuth Credentials</label>
+                            <label for="oauth" class="control-label">Required OAuth Credentials</label>
 
                             <div class="controls">
-                                <input style="width:250px" type="text" ui-select2="userCredentialOptions" ng-model="realm.requiredOAuthClientCredentials">
+                                <input id="oauth" type="text" ui-select2="userCredentialOptions" ng-model="realm.requiredOAuthClientCredentials" class="form-control tokenfield" placeholder="Type a role and enter">
                             </div>
                         </div>
                     </fieldset>
                    <div class="form-actions">
                         <button type="submit" data-ng-click="save()" class="primary" data-ng-show="changed">Save
-                            changes
                         </button>
                         <button type="submit" data-ng-click="reset()" data-ng-show="changed">Clear changes
                         </button>

admin-ui/src/main/resources/META-INF/resources/admin/partials/realm-detail.html

@@ -32,7 +32,7 @@
                             </div>
                         </div>
                         <div class="form-group">
-                            <label class="control-label">Enabled</label>
+                            <label for="enabled" class="control-label">Enabled</label>
 
                             <div class="onoffswitch">
                                 <input type="checkbox" data-ng-model="realm.enabled" class="onoffswitch-checkbox"
@@ -50,7 +50,7 @@
                     <fieldset>
                         <legend uncollapsed><span class="text">Login Options</span></legend>
                         <div class="form-group clearfix block">
-                            <label class="control-label">Social login</label>
+                            <label for="social" class="control-label">Social login</label>
                             <div class="onoffswitch">
                                 <input type="checkbox" data-ng-model="realm.social" class="onoffswitch-checkbox" name="social" id="social">
                                 <label for="social" class="onoffswitch-label">
@@ -63,7 +63,7 @@
                             </div>
                         </div>
                         <div class="form-group clearfix block">
-                            <label class="control-label">User registration</label>
+                            <label for="registrationAllowed" class="control-label">User registration</label>
                             <div class="onoffswitch">
                                 <input type="checkbox" data-ng-model="realm.registrationAllowed" class="onoffswitch-checkbox" name="registrationAllowed" id="registrationAllowed">
                                 <label for="registrationAllowed" class="onoffswitch-label">
@@ -76,7 +76,7 @@
                             </div>
                         </div>
                         <div class="form-group clearfix block">
-                            <label class="control-label">Require SSL</label>
+                            <label for="requireSsl" class="control-label">Require SSL</label>
                             <div class="onoffswitch">
                                 <input type="checkbox" data-ng-model="realm.requireSsl" class="onoffswitch-checkbox" name="requireSsl" id="requireSsl">
                                 <label for="requireSsl" class="onoffswitch-label">
@@ -89,7 +89,7 @@
                             </div>
                         </div>
                         <div class="form-group">
-                            <label class="control-label">Cookie login allowed</label>
+                            <label for="cookieLoginAllowed" class="control-label">Cookie login allowed</label>
                             <div class="onoffswitch">
                                 <input type="checkbox" data-ng-model="realm.cookieLoginAllowed" class="onoffswitch-checkbox" name="cookieLoginAllowed" id="cookieLoginAllowed">
                                 <label for="cookieLoginAllowed" class="onoffswitch-label">

admin-ui/src/main/resources/META-INF/resources/admin/partials/realm-tokens.html

@@ -4,19 +4,22 @@
         <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}}">Settings</a></li>
+                    <li><a href="#/realms/{{realm.id}}">General</a></li>
                     <li data-ng-show="realm.social"><a href="#">Social</a></li>
                     <li><a href="#/realms/{{realm.id}}/roles">Roles</a></li>
-                    <li><a href="#/realms/{{realm.id}}/required-credentials">Required Credentials</a></li>
+                    <li><a href="#/realms/{{realm.id}}/required-credentials">Credentials</a></li>
-                    <li class="active"><a href="#/realms/{{realm.id}}/token-settings">Token Settings</a></li>
+                    <li class="active"><a href="#/realms/{{realm.id}}/token-settings">Token</a></li>
                 </ul>
             </div>
             <div id="content">
-                <h2 class="pull-left">Realm: <span>{{realm.realm}}</span></h2>
+                <ol class="breadcrumb">
-                <p class="subtitle"></p>
+                    <li><a href="#/realms/{{realm.id}}">{{realm.realm}}</a></li>
+                    <li><a href="#/realms/{{realm.id}}">Settings</a></li>
+                    <li class="active">Token</li>
+                </ol>
+                <h2><span>{{realm.realm}}</span> Token Settings</h2>
                 <form name="realmForm" novalidate>
-                    <fieldset>
+                    <fieldset class="border-top">
-                        <legend uncollapsed><span class="text">Token Settings</span></legend>
                         <div class="form-group input-select">
                             <label for="tokenLifespan">Token lifespan</label>
                             <div class="input-group">
@@ -48,7 +51,6 @@
                      </fieldset>
                     <div class="form-actions">
                         <button type="submit" data-ng-click="save()" class="primary" data-ng-show="changed">Save
-                            changes
                         </button>
                         <button type="submit" data-ng-click="reset()" data-ng-show="changed">Clear changes
                         </button>

admin-ui/src/main/resources/META-INF/resources/admin/partials/role-detail.html

@@ -4,20 +4,33 @@
         <div id="content-area" class="col-md-9" role="main">
             <div class="top-nav">
                 <ul class="rcue-tabs">
-                    <li class="active"><a href="#/create/role/{{realm.id}}">New Realm Role</a></li>
+                    <li><a href="#/realms/{{realm.id}}">General</a></li>
-                    <li><a href="#/realms/{{realm.id}}/roles">Realm Roles</a></li>
+                    <li data-ng-show="realm.social"><a href="#">Social</a></li>
-                    <li><a href="#/realms/{{realm.id}}">Realm Settings</a></li>
+                    <li class="active"><a href="#/realms/{{realm.id}}/roles">Roles</a></li>
+                    <li><a href="#/realms/{{realm.id}}/required-credentials">Credentials</a></li>
+                    <li><a href="#/realms/{{realm.id}}/token-settings">Token</a></li>
                 </ul>
             </div>
             <div id="content">
-                <h2 class="pull-left" data-ng-show="create">New Realm Role</h2>
+                <ol class="breadcrumb" data-ng-hide="create">
-                <h2 class="pull-left" data-ng-hide="create">Realm Role <span>{{role.name}}</span></h2>
+                    <li><a href="#/realms/{{realm.id}}">{{realm.realm}}</a></li>
+                    <li><a href="#/realms/{{realm.id}}">Settings</a></li>
+                    <li><a href="#/realms/{{realm.id}}/roles">Roles</a></li>
+                    <li class="active">{{role.name}}</li>
+                </ol>
+                <h2 class="pull-left" data-ng-hide="create"><span>{{realm.realm}}</span> {{role.name}}</h2>
+                <ol class="breadcrumb" data-ng-show="create">
+                    <li><a href="#/realms/{{realm.id}}">{{realm.realm}}</a></li>
+                    <li><a href="#/realms/{{realm.id}}">Settings</a></li>
+                    <li><a href="#/realms/{{realm.id}}/roles">Roles</a></li>
+                    <li class="active">Add Role</li>
+                </ol>
+                <h2 class="pull-left" data-ng-show="create">Add Realm Role</h2>
                 <p class="subtitle" data-ng-show="create"><span class="required">*</span> Required fields</p>
                 <form name="realmForm" novalidate>
-                    <fieldset>
+                    <fieldset class="border-top">
-                        <legend uncollapsed><span class="text">Details</span> </legend>
                         <div class="form-group">
-                            <label for="name">Role name </label><span class="required" data-ng-show="create">*</span>
+                            <label for="name">Role name <span class="required" data-ng-show="create">*</span></label>
 
                             <div class="controls">
                                 <input type="text" id="name" name="name" data-ng-model="role.name" autofocus
@@ -28,8 +41,8 @@
                             <label for="description">Description </label>
 
                             <div class="controls">
-                                <input type="text" id="description" name="description" data-ng-model="role.description" autofocus
+                                <textarea rows="5" cols="50" id="description" name="description" data-ng-model="role.description" required></textarea>
-                                       required>
+                                <!-- Replaced by the textarea above <input type="text" id="description" name="description" data-ng-model="role.description" required> -->
                             </div>
                         </div>
                     </fieldset>
@@ -43,7 +56,6 @@
 
                     <div class="form-actions" data-ng-show="!create">
                         <button type="submit" data-ng-click="save()" class="primary" data-ng-show="changed">Save
-                            changes
                         </button>
                         <button type="submit" data-ng-click="reset()" data-ng-show="changed">Clear changes
                         </button>

admin-ui/src/main/resources/META-INF/resources/admin/partials/role-list.html

@@ -18,14 +18,16 @@
                     <li class="active">Roles</li>
                 </ol>
                 <h2 class="pull-left"><span>{{realm.realm}}</span> Roles</h2>
+                <div class="feedback info" data-ng-show="!roles || roles.length == 0">
+                    <p><strong>You have not configured realm roles.</strong><br><a class="button" href="#/create/role/{{realm.id}}">Add Role</a></p>
+                </div>
                 <table>
                     <caption class="hidden" data-ng-show="roles && roles.length > 0">Table of realm roles</caption>
-                    <caption data-ng-show="!roles || roles.length == 0">No configured realm roles...</caption>
                     <thead>
                         <tr>
                             <th class="rcue-table-actions" colspan="2">
                                 <div class="actions">
-                                    <a class="button" href="#/create/role/{{realm.id}}">Add</a>
+                                    <a class="button" href="#/create/role/{{realm.id}}">Add Role</a>
                                     <!-- <button class="remove disabled">Remove</button> -->
                                 </div>
                             </th>
@@ -58,7 +60,7 @@
                         </td>
                     </tr>
                     </tfoot>
-                    <tbody class="selectable-rows">
+                    <tbody>
                     <tr ng-repeat="role in roles">
                         <td><a href="#/realms/{{realm.id}}/roles/{{role.id}}">{{role.name}}</a></td>
                         <td>{{role.description}}</td>

admin-ui/src/main/resources/META-INF/resources/admin/partials/role-mappings.html

@@ -19,7 +19,8 @@
                 <h2 class="pull-left"><span>{{user.username}}'s</span> Role Mappings</h2>
                 <p class="subtitle">All fields required</p>
                 <form name="realmForm" novalidate>
-                    <fieldset class="border-top">
+                    <fieldset>
+                        <legend uncollapsed><span class="text">Realm Roles</span> </legend>
                         <div class="form-group">
                             <div class="controls changing-selectors">
                                 <div class="select-title">
@@ -49,7 +50,7 @@
                     <fieldset ng-show="applications.length > 0">
                         <legend collapsed><span class="text">Application Roles</span> </legend>
                         <div class="form-group input-select">
-                            <label for="applications">Application: </label>
+                            <label for="applications">Application</label>
                             <div class="input-group">
                                 <div class="select-rcue">
                                     <select id="applications" name="applications" ng-change="changeApplication()" ng-model="application" ng-options="a.name for a in applications">
@@ -58,21 +59,29 @@
                             </div>
                         </div>
                         <div class="form-group" ng-show="application">
-                            <div class="controls">
+                            <div class="controls changing-selectors">
-                                <select multiple size="5"
+                                <div class="select-title">
+                                    <label for="available-app">Available Roles</label>
+                                    <select id="available-app" class="form-control" multiple size="5"
                                             ng-multiple="true"
                                             ng-model="selectedApplicationRoles"
                                             ng-options="r.name for r in applicationRoles">
                                     </select>
-                                <button type="submit" ng-click="addApplicationRole()">---&gt;</button>
+                                </div>
-                                <button type="submit" ng-click="deleteApplicationRole()">&lt;---</button>
+                                <div class="middle-buttons">
-                                <select multiple size=5
+                                    <button type="submit" ng-click="addApplicationRole()" data-original-title="Move right" class="tooltipRightTrigger"><span class="icon-arrow-right">Move right</span></button>
+                                    <button type="submit" ng-click="deleteApplicationRole()" data-original-title="Move left" class="tooltipRightTrigger"><span class="icon-arrow-left">Move left</span></button>
+                                </div>
+                                <div class="select-title">
+                                    <label for="assigned-app">Assigned Roles</label>
+                                    <select id="assigned-app" class="form-control" multiple size=5
                                         ng-multiple="true"
                                         ng-model="selectedApplicationMappings"
                                         ng-options="r.name for r in applicationMappings">
                                     </select>
                                 </div>
                             </div>
+                        </div>
                     </fieldset>
                 </form>
             </div>

admin-ui/src/main/resources/META-INF/resources/admin/partials/user-detail.html

@@ -4,30 +4,37 @@
         <div id="content-area" class="col-md-9" role="main">
             <div class="top-nav" data-ng-show="create">
                 <ul class="rcue-tabs">
-                    <ul class="rcue-tabs">
+                    <li></li>
-                        <li class="active"><a href="#/create/user/{{realm.id}}">New User</a></li>
-                        <li><a href="#/realms/{{realm.id}}/users">Query Users</a></li>
-                    </ul>
                 </ul>
             </div>
             <div class="top-nav" data-ng-show="!create">
                 <ul class="rcue-tabs" >
-                    <li><a href="#/create/user/{{realm.id}}">New User</a></li>
-                    <li><a href="#/realms/{{realm.id}}/users">Query Users</a></li>
                     <li class="active"><a href="#">Attributes</a></li>
                     <li><a href="#">Credentials</a></li>
                     <li><a href="#/realms/{{realm.id}}/users/{{user.username}}/role-mappings">Role Mappings</a></li>
                 </ul>
             </div>
             <div id="content">
-                <h2 class="pull-left" data-ng-show="create">New User</h2>
+                <ol class="breadcrumb" data-ng-show="create">
-                <h2 class="pull-left" data-ng-hide="create">User <span>{{user.username}}</span></h2>
+                    <li><a href="#/realms/{{realm.id}}">{{realm.realm}}</a></li>
-                <p class="subtitle"><span class="required">*</span> Required fields</p>
+                    <li><a href="#/realms/{{realm.id}}/users">Users</a></li>
+                    <li class="active">Add</li>
+                </ol>
+                <h2 class="pull-left" data-ng-show="create">Add User</h2>
+                <p class="subtitle" data-ng-show="create"><span class="required">*</span> Required fields</p>
+
+                <ol class="breadcrumb" data-ng-hide="create">
+                    <li><a href="#/realms/{{realm.id}}">{{realm.realm}}</a></li>
+                    <li><a href="#/realms/{{realm.id}}/users">Users</a></li>
+                    <li><a href="#/realms/{{realm.id}}/users/{{user.username}}">{{user.username}}</a></li>
+                    <li class="active">Attributes</li>
+                </ol>
+                <h2 class="pull-left" data-ng-hide="create"><span>{{user.username}}'s</span> Attributes</h2>
+                
                 <form name="applicationForm" novalidate>
-                    <fieldset>
+                    <fieldset class="border-top">
-                        <legend uncollapsed><span class="text">Attributes</span></legend>
                         <div class="form-group">
-                            <label for="username">Username </label><span class="required" data-ng-show="create">*</span>
+                            <label for="username">Username <span class="required" data-ng-show="create">*</span></label>
                             <div class="controls">
                                 <input type="text" id="username" name="username" data-ng-model="user.username" autofocus
                                        required data-ng-readonly="!create">
@@ -69,7 +76,6 @@
 
                     <div class="form-actions" data-ng-show="!create">
                         <button type="submit" data-ng-click="save()" class="primary" data-ng-show="changed">Save
-                            changes
                         </button>
                         <button type="submit" data-ng-click="reset()" data-ng-show="changed">Clear changes
                         </button>

admin-ui/src/main/resources/META-INF/resources/admin/partials/user-list.html

@@ -2,16 +2,19 @@
     <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">
+            <div class="top-nav">
                 <ul class="rcue-tabs">
-                    <li><a href="#/create/user/{{realm.id}}">New User</a></li>
+                    <li></li>
-                    <li class="active"><a href="#/realms/{{realm.id}}/users">Query Users</a></li>
                 </ul>
             </div>
             <div id="content">
-                <h2 class="pull-left">Query Users</h2>
+                <ol class="breadcrumb">
+                    <li><a href="#/realms/{{realm.id}}">{{realm.realm}}</a></li>
+                    <li class="active">Users</li>
+                </ol>
+                <h2><span>{{realm.realm}}</span> Users</h2>
                 <table>
-                    <caption data-ng-show="users && search">Table of realm users</caption>
+                    <caption data-ng-show="users && search" class="hidden">Table of realm users</caption>
                     <thead>
                         <tr>
                             <th class="rcue-table-actions" colspan="4">
@@ -23,6 +26,10 @@
                                         Icon: search
                                     </button>
                                 </div>
+                                <div class="actions">
+                                    <a class="button" href="#/create/user/{{realm.id}}">Add User</a>
+                                    <!-- <button class="remove disabled">Remove</button> -->
+                                </div>
                             </th>
                         </tr>
                         <tr>