diff --git a/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/admin-console.css b/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/admin-console.css index 377ce2b281..220ddbabf6 100644 --- a/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/admin-console.css +++ b/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/admin-console.css @@ -2,6 +2,37 @@ html, body, body > .container, #view, #content-area{ height: 100%; } +#content .glyphicon { + color: #555; +} + +#content .glyphicon > span { + display: none; +} + +.kc-button { + background-image: -moz-linear-gradient(center top , #FAFAFA 0%, #EDEDED 100%); + border: 1px solid #BBBBBB; + border-radius: 2px; + color: #555; + cursor: pointer; + font-size: 1em; + font-weight: bold; + line-height: 2.18182em; + border-radius: 2px; + box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15); + font-weight: bold; + letter-spacing: 0.04em; + padding: 0.307692em 1.07692em; + margin: 0.5em; + display: inline-block; +} + +p.subtitle { + position: absolute; + right: 2.5em; +} + #content-area { border-color: #CECECE; border-style: solid; @@ -266,6 +297,8 @@ legend .kc-icon-collapse { vertical-align: middle; } + + /* Relam selector from the top menu */ .header .navbar-primary li > .select-rcue { @@ -365,3 +398,60 @@ legend .kc-icon-collapse { .select-rcue option:hover { background-color: #D5ECF9; } + +/* Left-Rigth selector form */ +.changing-selectors.application { + padding-left: 12em; +} +.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; +} \ No newline at end of file diff --git a/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/tables.css b/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/tables.css new file mode 100644 index 0000000000..a5f44fe889 --- /dev/null +++ b/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/tables.css @@ -0,0 +1,189 @@ +table { + width: 100%; + border: 1px #dcdcdc solid; + border-spacing: 0; +} +table caption { + text-align: left; + font-weight: bold; + padding: 11.5px; +} +table tbody tr:nth-child(even) { + background-color: #f6f6f6; +} +table tbody tr td, +table thead tr th { + font-weight: normal; + padding: 6px 15px; + font-size: 11.5px; + border-top: 1px #ebebeb; + border-right: 1px #dcdcdc solid; + text-align: left; +} +.rcue-table-actions { + padding: 1px; + border-top: none; +} +/* +.rcue-table-actions span:last-child { + float: right; +} +*/ +.rcue-table-actions { + padding: 1px; +} +/* +.rcue-table-actions button { + padding: 3px 8px; + font-size: 11px; + box-shadow: 1px 2px 2px #e3e3e3; + margin: 4px; +} +*/ +.rcue-table-number { + text-align: right; + width: 100px; +} +table thead tr th { + font-weight: bold; + border: none; + border-right: 1px #dcdcdc solid; + background-image: linear-gradient(top, #fafafa 0%, #eeeeee 100%); + background-image: -o-linear-gradient(top, #fafafa 0%, #eeeeee 100%); + background-image: -moz-linear-gradient(top, #fafafa 0%, #eeeeee 100%); + background-image: -webkit-linear-gradient(top, #fafafa 0%, #eeeeee 100%); + background-image: -ms-linear-gradient(top, #fafafa 0%, #eeeeee 100%); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fafafa), color-stop(1, 0, #eeeeee)); + border-bottom: 1px #cedede solid; +} +/* +table tbody tr td:first-child { + color: #0099d3; +} +*/ +table thead tr th:last-child { + border-right: none; +} +table thead tr th button, +table thead tr th .button { + margin-left: 0.72727272727273em; +} +table tbody tr:first-child td { + border-top: 1px solid #f2f2f2; + /* padding-top: 9px; */ + +} +table tbody tr td:last-child { + border-right: none; +} +/* +table tbody tr:hover { + cursor: pointer; + background-color: #ebebeb; +} +*/ +/* Styles from Gabriel */ +.rcue-table-actions button + button, +.rcue-table-actions .button + button { + margin-left: 5px; +} +.rcue-table-actions div.actions { + float: right; + font-size: 0.90909090909091em; +} +table tbody tr { + border-top: 1px solid #ededed; +} +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: 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; + background-color: #ebebeb; +} +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; +} +table tfoot tr .table-nav { + float: right; +} +table tfoot tr .table-nav a { + display: inline-block; + line-height: 2.4em; + border-left: 1px solid #d9d9d9; + width: 3.5em; + background-color: #f3f3f3; + background-image: linear-gradient(top, #fafafa 0%, #ededed 100%); + background-image: -o-linear-gradient(top, #fafafa 0%, #ededed 100%); + background-image: -moz-linear-gradient(top, #fafafa 0%, #ededed 100%); + background-image: -webkit-linear-gradient(top, #fafafa 0%, #ededed 100%); + background-image: -ms-linear-gradient(top, #fafafa 0%, #ededed 100%); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fafafa), color-stop(1, 0, #ededed)); + text-indent: -99999em; + background-image: url(img/sprite-table-nav.png); + background-repeat: no-repeat; + background-position: left top; + vertical-align: top; +} +table tfoot tr .table-nav a.last { + background-position: top right; +} +table tfoot tr .table-nav a.prev { + background-position: bottom left; +} +table tfoot tr .table-nav a.next { + background-position: bottom right; +} +table tfoot tr .table-nav a:hover { + background-image: url(img/sprite-table-nav.png); + background-color: #eeeeee; +} +table tfoot tr .table-nav a:active { + box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.25) inset; +} +table tfoot tr .table-nav a.disabled { + opacity: 0.5; + filter: alpha(opacity=50); + cursor: default; +} +table tfoot tr .table-nav a.disabled:active { + box-shadow: none; +} +table tfoot tr .table-nav span { + font-size: 1.1em; + border-left: 1px solid #d9d9d9; + line-height: 2.18181818181818em; + display: inline-block; + padding: 0 1.36363636363636em; +} diff --git a/admin-ui/src/main/resources/META-INF/resources/admin/index.html b/admin-ui/src/main/resources/META-INF/resources/admin/index.html index df78ccf432..60b31c1fd1 100755 --- a/admin-ui/src/main/resources/META-INF/resources/admin/index.html +++ b/admin-ui/src/main/resources/META-INF/resources/admin/index.html @@ -13,6 +13,7 @@ + @@ -28,9 +29,11 @@ + + diff --git a/admin-ui/src/main/resources/META-INF/resources/admin/index_mock.html b/admin-ui/src/main/resources/META-INF/resources/admin/index_mock.html new file mode 100755 index 0000000000..8bce83dfd0 --- /dev/null +++ b/admin-ui/src/main/resources/META-INF/resources/admin/index_mock.html @@ -0,0 +1,305 @@ + + + + + + + + Keycloak Admin Console + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ You will be logged off in seconds due to inactivity. + Click here to continue using this web page. +
+ + +
+
{{notification.header}} {{notification.message}}
+
+ +
+
+ + +
+
+ +
+
+
+
+ Loading... +
+
+
+ + + + + diff --git a/admin-ui/src/main/resources/META-INF/resources/admin/js/app.js b/admin-ui/src/main/resources/META-INF/resources/admin/js/app.js index fe1aa45cdc..0e586d2ce0 100755 --- a/admin-ui/src/main/resources/META-INF/resources/admin/js/app.js +++ b/admin-ui/src/main/resources/META-INF/resources/admin/js/app.js @@ -482,6 +482,18 @@ module.config([ '$routeProvider', function($routeProvider) { templateUrl : 'partials/home.html', controller : 'HomeCtrl' }) + .when('/mocks/:realm', { + templateUrl : 'partials/realm-detail_mock.html', + resolve : { + realm : function(RealmLoader) { + return RealmLoader(); + }, + serverInfo : function(ServerInfoLoader) { + return ServerInfoLoader(); + } + }, + controller : 'RealmDetailCtrl' + }) .otherwise({ templateUrl : 'partials/notfound.html' }); @@ -684,6 +696,8 @@ module.directive('kcSave', function ($compile, Notifications) { return { restrict: 'A', link: function ($scope, elem, attr, ctrl) { + elem.addClass("btn btn-primary btn-lg"); + elem.attr("type","submit"); elem.bind('click', function() { $scope.$apply(function() { var form = elem.closest('form'); @@ -707,6 +721,8 @@ module.directive('kcReset', function ($compile, Notifications) { return { restrict: 'A', link: function ($scope, elem, attr, ctrl) { + elem.addClass("btn btn-default btn-lg"); + elem.attr("type","submit"); elem.bind('click', function() { $scope.$apply(function() { var form = elem.closest('form'); @@ -721,6 +737,45 @@ module.directive('kcReset', function ($compile, Notifications) { } }); +module.directive('kcCancel', function ($compile, Notifications) { + return { + restrict: 'A', + link: function ($scope, elem, attr, ctrl) { + elem.addClass("btn btn-default btn-lg"); + elem.attr("type","submit"); + } + } +}); + +module.directive('kcDelete', function ($compile, Notifications) { + return { + restrict: 'A', + link: function ($scope, elem, attr, ctrl) { + elem.addClass("btn btn-danger btn-lg"); + elem.attr("type","submit"); + } + } +}); + + +module.directive('kcSelect', function ($compile, Notifications) { + return { + scope: { + kcOptions: '=', + kcModel: '=', + id: "=" + }, + restrict: 'E', + replace: true, + templateUrl: 'templates/kc-select.html', + link: function(scope, element, attr) { + scope.updateModel = function(item) { + scope.kcModel = item; + }; + } + } +}); + /* * Used to select the element (invoke $(elem).select()) on specified action list. * Usages kc-select-action="click mouseover" diff --git a/admin-ui/src/main/resources/META-INF/resources/admin/partials/oauth-client-credentials.html b/admin-ui/src/main/resources/META-INF/resources/admin/partials/oauth-client-credentials.html index 8ce6073082..8676a8c8a4 100755 --- a/admin-ui/src/main/resources/META-INF/resources/admin/partials/oauth-client-credentials.html +++ b/admin-ui/src/main/resources/META-INF/resources/admin/partials/oauth-client-credentials.html @@ -1,15 +1,13 @@ -
-
-
-
-
-
    +
    +
    +
    + -
    +
    1. {{realm.realm}}
      2. @@ -22,16 +20,16 @@
      Change Password
      - -
      - New Password +
      +
      - -
      - New Password Confirmation +
      +
      @@ -43,15 +41,15 @@
      Change TOTP Key
      - -
      - New Key +
      +
      -
      +
      @@ -59,7 +57,5 @@
      -
      -
    diff --git a/admin-ui/src/main/resources/META-INF/resources/admin/partials/realm-credentials.html b/admin-ui/src/main/resources/META-INF/resources/admin/partials/realm-credentials.html index b8352c0aaf..8bc491a301 100755 --- a/admin-ui/src/main/resources/META-INF/resources/admin/partials/realm-credentials.html +++ b/admin-ui/src/main/resources/META-INF/resources/admin/partials/realm-credentials.html @@ -1,109 +1,102 @@ -
    -
    -
    -
    -
    - -
    -
    -
      -
    1. {{realm.realm}}
      2. -
    2. Settings
      3. -
    3. Required Credentials
      4. -
    -

    {{realm.realm}} Credentials

    -
    -
    - Realm Credentials Settings -
    - +
    +
    + -
    - -
    -
    -
    - +
    +
      +
    1. {{realm.realm}}
      2. +
    2. Settings
      3. +
    3. Required Credentials
      4. +
    +

    {{realm.realm}} Credentials

    + +
    + Realm Credentials Settings +
    + -
    - -
    -
    -
    - - -
    - -
    -
    -
    -
    - Realm Password Policy -
    - - - - - - - - - - - - - - - - - - - -
    -
    -
    - -
    -
    -
    Policy TypePolicy ValueActions
    -
    - -
    -     		- - -
    -
    -
    -
    -
    -
    - - +
    +
    - +
    +
    + + +
    + +
    +
    +
    + + +
    + +
    +
    +
    +
    + Realm Password Policy +
    + + + + + + + + + + + + + + + + + + + +
    +
    +
    + +
    +
    +
    Policy TypePolicy ValueActions
    +
    + +
    +     		+ + +
    +
    +
    +
    +
    +
    + +
    -
    -
    +
    +