Merge pull request #70 from cardosogabriel/master

Breadcrumbs, User roles and changes in realms

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

@@ -29,12 +29,19 @@ a:hover {
   text-decoration: underline;
 }
 /* Styles from Gabriel */
+a:hover,
+a:focus {
+  color: #0099d3;
+}
 strong {
   font-weight: bold;
 }
 .hidden {
   display: none;
 }
+.feedback.show {
+  display: inline-block !important;
+}
 .pull-right {
   float: right;
 }

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

@@ -33,6 +33,11 @@ a:hover {
 
 /* Styles from Gabriel */
 
+a:hover,
+a:focus {
+    color: #0099d3;
+}
+
 strong {
     font-weight: bold;
 }
@@ -41,6 +46,10 @@ strong {
     display: none;
 }
 
+.feedback.show {
+    display: inline-block!important;
+}
+
 .pull-right {
     float: right;
 }

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

@@ -712,3 +712,66 @@ input[type="email"].tiny {
   font-size: 1.1em;
   margin-right: 0.90909090909091em;
 }
+.changing-selectors .select-title {
+  display: inline-block;
+}
+.changing-selectors .select-title label {
+  font-size: 1.1em;
+  margin-left: 0.2em;
+  margin-bottom: 0.3em;
+  margin-top: 0.5em;
+  display: block;
+  font-weight: normal;
+}
+.changing-selectors select {
+  min-height: 150px;
+  font-size: 1.1em;
+  padding: 0.545454545454545em;
+  min-width: 18.1818181818182em;
+  border: 1px #b6b6b6 solid;
+  border-radius: 2px;
+  box-shadow: inset 0px 2px 2px rgba(0, 0, 0, 0.1);
+  color: #333;
+  max-width: 200px;
+  width: auto;
+  min-width: 150px;
+  display: inline-block;
+}
+.changing-selectors select:hover {
+  border-color: #62afdb;
+}
+.changing-selectors select option {
+  padding: 0.36363636363636em 0.45454545454545em;
+  display: block;
+}
+.changing-selectors select option[disabled="disabled"] {
+  color: #aaa;
+}
+.changing-selectors .middle-buttons {
+  display: inline-block;
+  width: 4.5em;
+  margin-left: 0.8em;
+  margin-right: 0.8em;
+  vertical-align: middle;
+}
+.changing-selectors .middle-buttons button:first-child {
+  margin-bottom: 0.5em;
+}
+.changing-selectors .middle-buttons button.disabled span {
+  opacity: 0.4;
+  filter: alpha(opacity=40);
+}
+.changing-selectors .middle-buttons button span {
+  margin-right: 0;
+}
+.breadcrumb {
+  background: none;
+  margin: 5px 0 5px 0;
+  padding: 0;
+}
+.breadcrumb li a {
+  font-size: 1.1em;
+}
+.breadcrumb > li + li:before {
+  content: "» ";
+}

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

@@ -851,5 +851,92 @@ input[type="email"] {
         font-size: 1.1em;
         margin-right: 0.90909090909091em;
     }
+}
+
+.changing-selectors {
+
+    .select-title {
+    
+        display: inline-block;
+        
+        label {
+            font-size: 1.1em;
+            margin-left: 0.2em;
+            margin-bottom: 0.3em;
+            margin-top: 0.5em;
+            display: block;
+            font-weight: normal;
+        }
         
     }
+    
+    select {
+        min-height: 150px;
+        font-size: 1.1em;
+        padding: 0.545454545454545em;
+        min-width: 18.1818181818182em;
+        border: 1px #b6b6b6 solid;
+        border-radius: 2px;
+        box-shadow: inset 0px 2px 2px rgba(0,0,0,0.1);
+        color: #333;
+        max-width: 200px;
+        width: auto;
+        min-width: 150px;
+        display: inline-block;
+        
+        &:hover {
+            border-color: #62afdb;
+        }
+                
+        option {
+            padding: 0.36363636363636em 0.45454545454545em;
+            display: block;
+            
+            &[disabled="disabled"] {
+                color: #aaa;
+            }
+        }
+    }
+    
+    .middle-buttons {
+        display: inline-block;
+        width: 4.5em;
+        margin-left: 0.8em;
+        margin-right: 0.8em;
+        vertical-align: middle;
+        
+        button {
+            
+            &:first-child {
+                margin-bottom: 0.5em;
+            }
+            
+            &.disabled span {
+                opacity: 0.4;
+                filter: alpha(opacity=40);
+            }
+            
+            span {
+                margin-right: 0;
+            }
+        }
+    }
+}
+
+.breadcrumb {
+    
+    background: none;
+    margin: 5px 0 5px 0;
+    padding: 0;
+    
+    li {
+        
+        a {
+            font-size: 1.1em;
+        }
+    }
+    
+    > li + li:before {
+        content: "» ";
+    }
+}

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

@@ -88,25 +88,26 @@ table tbody tr:hover {
 table tbody tr {
   border-top: 1px solid #ededed;
 }
-table tbody tr.selected {
-  background-color: #eaf5fb;
-}
-table tbody tr.selected td:first-child {
-  background-image: url(img/icon-row-selected.svg);
-  background-position: 0.2em center;
-  background-repeat: no-repeat;
-}
 table tbody tr:hover {
   cursor: default;
 }
+table tbody tr td {
+  vertical-align: middle;
+}
 table tbody tr td.token-cell {
   padding: 0 0.7em;
+  line-height: 0;
 }
 table tbody tr td.token-cell .token {
   padding-top: 0.18181818181818em;
   padding-bottom: 0.18181818181818em;
-  margin-top: 7px;
+  margin-top: 6px;
+  margin-bottom: 5px;
+}
+table tbody tr td.token-cell button {
+  float: left;
   margin-bottom: 7px;
+  margin-top: 8px;
 }
 table tbody.selectable-rows tr:hover {
   cursor: pointer;
@@ -115,6 +116,16 @@ table tbody.selectable-rows tr:hover {
 table tbody.selectable-rows tr:first-child td {
   padding-top: 9px;
 }
+table tbody.selectable-rows tr.selected,
+table tbody.selectable-rows tr.selected:hover {
+  background-color: #eaf5fb;
+}
+table tbody.selectable-rows tr.selected td:first-child,
+table tbody.selectable-rows tr.selected:hover td:first-child {
+  background-image: url(img/icon-row-selected.svg);
+  background-position: 0.2em center;
+  background-repeat: no-repeat;
+}
 table tfoot tr {
   border-top: 1px solid #cecece;
 }

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

@@ -120,28 +120,29 @@ table {
         
             border-top: 1px solid #ededed;
                     
-            &.selected {
-                background-color: #eaf5fb;
-                
-                td:first-child {
-                    background-image: url(img/icon-row-selected.svg);
-                    background-position: 0.2em center;
-                    background-repeat: no-repeat;
-                }
-            }
-            
             &:hover {
                 cursor: default;
             }
             
+            td {
+                vertical-align: middle;
+            }
+            
             td.token-cell {
                 padding: 0 0.7em;
+                line-height: 0;
                 
                 .token {
                     padding-top: 0.18181818181818em;
                     padding-bottom: 0.18181818181818em;
-                    margin-top: 7px;
+                    margin-top: 6px;
+                    margin-bottom: 5px;
+                }
+                
+                button {
+                    float: left;
                     margin-bottom: 7px;
+                    margin-top: 8px;
                 }
             }
         }
@@ -156,6 +157,17 @@ table {
             tr:first-child td {
                 padding-top: 9px;
             }
+            
+            tr.selected,
+            tr.selected:hover {
+                background-color: #eaf5fb;
+                
+                td:first-child {
+                    background-image: url(img/icon-row-selected.svg);
+                    background-position: 0.2em center;
+                    background-repeat: no-repeat;
+                }
+            }
         }
     }    
     

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

@@ -4,22 +4,27 @@
         <div id="content-area" class="col-md-9" role="main">
             <div class="top-nav" data-ng-hide="createRealm">
                 <ul class="rcue-tabs">
-                    <li class="active"><a href="#/realms/{{realm.id}}">Settings</a></li>
+                    <li class="active"><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><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" data-ng-show="createRealm">New Realm</h2>
+                <ol class="breadcrumb" data-ng-hide="createRealm">
-                <h2 class="pull-left" data-ng-hide="createRealm">Realm: <span>{{realm.realm}}</span></h2>
+                    <li><a href="#/realms/{{realm.id}}">{{realm.realm}}</a></li>
+                    <li><a href="#/realms/{{realm.id}}">Settings</a></li>
+                    <li class="active">General</li>
+                </ol>
+                <h2 class="pull-left" data-ng-show="createRealm">Add Realm</h2>
+                <h2 class="pull-left" data-ng-hide="createRealm"><span>{{realm.realm}}</span> General Settings</h2>
                 <p class="subtitle" data-ng-show="createRealm"><span class="required">*</span> Required fields</p>
                 <form name="realmForm" novalidate>
                     <fieldset>
                         <legend uncollapsed><span class="text">Required Settings</span></legend>
                         <div class="form-group">
-                            <label for="name">Name </label><span class="required" data-ng-show="createRealm">*</span>
+                            <label for="name">Name <span class="required" data-ng-show="createRealm">*</span></label>
 
                             <div class="controls">
                                 <input type="text" id="name" name="name" data-ng-model="realm.realm" autofocus
@@ -107,7 +112,6 @@
 
                     <div class="form-actions" data-ng-show="!createRealm">
                         <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-menu.html

@@ -1,5 +1,5 @@
 <ul data-ng-hide="createRealm">
-    <li data-ng-class="(!path[2] || path[1] == 'role' || path[2] == 'roles' || path[2] == 'token-settings' || path[2] == 'required-credentials') && 'active'"><a href="#/realms/{{realm.id}}">Realm Settings</a></li>
+    <li data-ng-class="(!path[2] || path[1] == 'role' || path[2] == 'roles' || path[2] == 'token-settings' || path[2] == 'required-credentials') && 'active'"><a href="#/realms/{{realm.id}}">Settings</a></li>
     <li data-ng-class="(path[2] == 'users' || path[1] == 'user') && 'active'"><a href="#/realms/{{realm.id}}/users">Users</a>
     </li>
     <li data-ng-class="(path[2] == 'applications' || path[1] == 'application') && 'active'"><a href="#/realms/{{realm.id}}/applications">Applications</a></li>

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

@@ -4,17 +4,32 @@
         <div id="content-area" class="col-md-9" role="main">
             <div class="top-nav">
                 <ul class="rcue-tabs">
-                    <li><a href="#/create/role/{{realm.id}}">New Realm Role</a></li>
+                    <li><a href="#/realms/{{realm.id}}">General</a></li>
-                    <li class="active"><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">Realm Roles</h2>
+                <ol class="breadcrumb" data-ng-hide="createRealm">
+                    <li><a href="#/realms/{{realm.id}}">{{realm.realm}}</a></li>
+                    <li><a href="#/realms/{{realm.id}}">Settings</a></li>
+                    <li class="active">Roles</li>
+                </ol>
+                <h2 class="pull-left"><span>{{realm.realm}}</span> Roles</h2>
                 <table>
-                    <caption data-ng-show="roles && roles.length > 0">Table of realm roles</caption>
+                    <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>
+                                    <!-- <button class="remove disabled">Remove</button> -->
+                                </div>
+                            </th>
+                        </tr>
                         <tr data-ng-show="roles && roles.length > 5">
                             <th class="rcue-table-actions" colspan="2">
                                 <div class="search-comp clearfix">

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

@@ -4,36 +4,48 @@
         <div id="content-area" class="col-md-9" role="main">
             <div class="top-nav">
                 <ul class="rcue-tabs" >
-                    <li><a href="#/create/user/{{realm.id}}">New User</a></li>
+                    <li><a href="#/realms/{{realm.id}}/users/{{user.username}}">Attributes</a></li>
-                    <li><a href="#/realms/{{realm.id}}/users">Query Users</a></li>
+                    <li><a href="#">Credentials</a></li>
-                    <li><a href="#/realms/{{realm.id}}/users/{{user.username}}">{{user.username}} Attributes</a></li>
+                    <li class="active"><a href="#">Role Mappings</a></li>
-                    <li><a href="#">{{user.username}} Credentials</a></li>
-                    <li class="active"><a href="#">{{user.username}} Role Mappings</a></li>
                 </ul>
             </div>
             <div id="content">
-                <h2 class="pull-left">User Role Mappings for <span>{{user.username}}</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}}/users">Users</a></li>
+                    <li><a href="#/realms/{{realm.id}}/users/{{user.username}}">{{user.username}}</a></li>
+                    <li class="active">Role Mappings</li>
+                </ol>
+                <h2 class="pull-left"><span>{{user.username}}'s</span> Role Mappings</h2>
+                <p class="subtitle">All fields required</p>
                 <form name="realmForm" novalidate>
-                    <fieldset>
+                    <fieldset class="border-top">
-                        <legend uncollapsed><span class="text">Realm Roles</span> </legend>
                         <div class="form-group">
-                            <div class="controls">
+                            <div class="controls changing-selectors">
-                                <select multiple size="5"
+                                <div class="select-title">
+                                    <label for="available">Available Roles</label>
+                                    <select id="available" class="form-control" multiple size="5"
                                             ng-multiple="true"
                                             ng-model="selectedRealmRoles"
                                             ng-options="r.name for r in realmRoles">
                                     </select>
-                                <button type="submit" ng-click="addRealmRole()">---&gt;</button>
+                                </div>
-                                <button type="submit" ng-click="deleteRealmRole()">&lt;---</button>
+                                <div class="middle-buttons">
-                                <select multiple size=5
+                                    <button type="submit" ng-click="addRealmRole()" data-original-title="Move right" class="tooltipRightTrigger"><span class="icon-arrow-right">Move right</span></button>
+                                    <button type="submit" ng-click="deleteRealmRole()" data-original-title="Move left" class="tooltipRightTrigger"><span class="icon-arrow-left">Move left</span></button>
+                                </div>
+                                <div class="select-title">
+                                    <label for="assigned">Assigned Roles</label>
+                                    <select id="assigned" class="form-control" multiple size=5
                                         ng-multiple="true"
                                         ng-model="selectedRealmMappings"
                                         ng-options="r.name for r in realmMappings">
                                     </select>
                                 </div>
                             </div>
+                        </div>
                     </fieldset>
+                    
                     <fieldset ng-show="applications.length > 0">
                         <legend collapsed><span class="text">Application Roles</span> </legend>
                         <div class="form-group input-select">

forms/src/main/resources/META-INF/resources/forms/theme/default/css/forms.css

@@ -625,7 +625,7 @@ input[type="email"].tiny {
   line-height: 1.45454545454545em;
 }
 .tokenfield.form-control .token .close {
-  text-indent: -9999999em;
+  text-indent: -99999em;
   width: 1.6em;
   height: 1.6em;
   line-height: 1.6em;

forms/src/main/resources/META-INF/resources/forms/theme/default/css/sprites.css

@@ -5,7 +5,7 @@
 	height: 16px;
 	background-image: url(img/sprites.png); /* Modified by Gabriel */
 	background-repeat: no-repeat;
-	text-indent: -9999999em;
+	text-indent: -99999em;
 	margin-right: 0.5em;
 	vertical-align: text-top;
 }