keycloak-uncached

Merge pull request #85 from cardosogabriel/master Modal

10/31/2013 5:40:29 PM

Changes

admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/login-register.css 284(+0 -284)

admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/login-register.less 322(+0 -322)

forms/src/main/resources/META-INF/resources/forms/theme/default/css/img/login-register-separators.png 0(+0 -0)

forms/src/main/resources/META-INF/resources/forms/theme/default/css/img/login-register-social-separators.png 0(+0 -0)

Details

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 b953e92..9487218 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
@@ -5,12 +5,6 @@
     <meta charset="utf-8">
     <title>Keycloak</title>
 
-    <style type="text/css">
-        #idletimeout { background:#CC5100; border:3px solid #FF6500; color:#fff; font-family:arial, sans-serif; text-align:center; font-size:12px; padding:10px; position:relative; top:0px; left:0; right:0; z-index:100000; display:none; }
-        #idletimeout a { color:#fff; font-weight:bold }
-        #idletimeout span { font-weight:bold }
-    </style>
-
     <link rel="icon" href="/auth-server/admin-ui/img/favicon.ico">
 
     <!-- Frameworks -->
@@ -59,7 +53,7 @@
 
 <body class="admin-console" data-ng-controller="GlobalCtrl">
 <div id="idletimeout">
-    You will be logged off in <span></span>&nbsp;seconds due to inactivity.
+    You will be logged off in <strong><span></span> seconds</strong> due to inactivity.
     <a id="idletimeout-resume" href="#">Click here to continue using this web page</a>.
 </div>
 
diff --git a/admin-ui/src/main/resources/META-INF/resources/admin/js/services.js b/admin-ui/src/main/resources/META-INF/resources/admin/js/services.js
index 043e686..bc17b97 100755
--- a/admin-ui/src/main/resources/META-INF/resources/admin/js/services.js
+++ b/admin-ui/src/main/resources/META-INF/resources/admin/js/services.js
@@ -24,7 +24,7 @@ module.service('Dialog', function($dialog) {
 		}, {
 			result : 'ok',
 			label : 'Delete this ' + type,
-			cssClass : 'btn-primary'
+			cssClass : 'destructive'
 		} ];
 
 		$dialog.messageBox(title, msg, btns).open().then(function(result) {
diff --git a/admin-ui/src/main/resources/META-INF/resources/admin/partials/menu.html b/admin-ui/src/main/resources/META-INF/resources/admin/partials/menu.html
index 4ae72a7..d62d21d 100755
--- a/admin-ui/src/main/resources/META-INF/resources/admin/partials/menu.html
+++ b/admin-ui/src/main/resources/META-INF/resources/admin/partials/menu.html
@@ -1,7 +1,7 @@
 <div class="header rcue">
     <div class="navbar utility">
         <div class="navbar-inner clearfix container">
-            <h1><a href="#"><strong>Keycloak</strong> Central Login</a></h1>
+            <h1><a href="#/realms/{{realm.id}}"><strong>Keycloak</strong> Central Login</a></h1>
             <ul class="nav pull-right" data-ng-hide="auth.loggedIn">
                 <li><a href="/auth-server/rest/saas/login">Login</a></li>
                 <li><a href="/auth-server/rest/saas/registrations">Register</a></li>
diff --git a/admin-ui/src/main/resources/META-INF/resources/admin/partials/realm-social.html b/admin-ui/src/main/resources/META-INF/resources/admin/partials/realm-social.html
index a102740..3844c6b 100755
--- a/admin-ui/src/main/resources/META-INF/resources/admin/partials/realm-social.html
+++ b/admin-ui/src/main/resources/META-INF/resources/admin/partials/realm-social.html
@@ -92,7 +92,7 @@
                 <div ng-include src="'partials/provider/'+ helpPId +'-help.html'"></div>
             </div>
             <div class="modal-footer">
-                <button class="btn" ng-click="closeHelp()">Close</button>
+                <button ng-click="closeHelp()">Close</button>
             </div>
         </div>
     </div>
diff --git a/admin-ui/src/main/resources/META-INF/resources/admin/partials/realm-tokens.html b/admin-ui/src/main/resources/META-INF/resources/admin/partials/realm-tokens.html
index b87cf6d..53b405e 100755
--- a/admin-ui/src/main/resources/META-INF/resources/admin/partials/realm-tokens.html
+++ b/admin-ui/src/main/resources/META-INF/resources/admin/partials/realm-tokens.html
@@ -49,7 +49,7 @@
                             </div>
                         </div>
                         <div class="form-group input-select">
-                            <label for="accessCodeLifespanUserAction">Access code user action lifespan</label>
+                            <label for="accessCodeLifespanUserAction" class="two-lines">Access code user action lifespan</label>
                             <div class="input-group">
                                 <input type="text" data-ng-model="realm.accessCodeLifespanUserAction" id="accessCodeLifespanUserAction" name="accessCodeLifespanUserAction" class="tiny">
                                 <div class="select-rcue">
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 c339f2f..ac7c867 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
@@ -43,7 +43,22 @@ body {
   background-image: url(img/feedback-info-sign.png);
   background-color: #e4f3fa;
 }
+#idletimeout {
+  background: #CC5100;
+  color: #FFFFFF;
+  font-size: 1.1em;
+  padding: 0.90909090909091em;
+  text-align: center;
+  display: none;
+}
+#idletimeout a {
+  color: #fff;
+  font-weight: bold;
+}
 /* Header */
+.header.rcue {
+  z-index: 50;
+}
 .header.rcue .navbar.utility {
   background-color: #393F45;
   border-bottom: 1px solid #53565B;
@@ -65,36 +80,6 @@ body {
   min-height: 42px;
   max-width: 1170px;
 }
-.header.rcue .navbar.primary .select-rcue {
-  font-size: 0.76923076923077em;
-  margin-left: 1em;
-  margin-top: 0.7em;
-  display: inline-block;
-  vertical-align: middle;
-  background-color: #555a5e;
-  background-image: none;
-  background-image: url(img/sprite-arrow-down.png);
-  background-repeat: no-repeat;
-  background-position: right -26px;
-  border: 1px solid #676c6e;
-  border-radius: 2px;
-  padding-left: 0;
-}
-.header.rcue .navbar.primary .select-rcue:hover {
-  border-color: #7e8385;
-}
-.header.rcue .navbar.primary .select-rcue select {
-  color: #fff;
-}
-.header.rcue .navbar.primary .select-rcue select:-moz-focusring {
-  color: transparent;
-  text-shadow: 0 0 0 #fff;
-}
-.header.rcue .navbar.primary .select-rcue select option {
-  background-color: #fff;
-  color: #333;
-  padding: 0.36363636363636em 0.90909090909091em;
-}
 .header.rcue .navbar.primary .nav > li {
   /*
             .dropdown { 
@@ -215,7 +200,6 @@ body {
 .header.rcue .navbar.primary .nav > li .select-rcue select option {
   background-color: #fff;
   color: #333;
-  padding: 0.36363636363636em 0.90909090909091em;
 }
 .header.rcue .navbar.primary .nav > li a#refresh {
   border: none;
@@ -469,6 +453,42 @@ table + .feedback.inline.warning {
 td.token-cell button {
   margin-top: -1px;
 }
+/* Modal boxes */
+.modal .modal-dialog {
+  padding-top: 10em;
+}
+.modal .modal-content {
+  box-shadow: none;
+  border-radius: 0;
+  border: 1px solid #666;
+}
+.modal .modal-header {
+  background-color: #f8f8f8;
+  padding: 1.5em 2em;
+  border-bottom: none;
+}
+.modal .modal-header h3 {
+  font-size: 1.3em;
+  font-weight: bold;
+  font-family: "Open Sans", sans-serif;
+  margin: 0;
+}
+.modal .modal-body p {
+  font-size: 1.1em;
+}
+.modal .modal-body p.primary {
+  font-size: 1.1em;
+  font-weight: bold;
+  margin-bottom: 0.45454545454545em;
+}
+.modal .modal-footer {
+  border-top: 0;
+}
+.modal .modal-footer .primary,
+.modal .modal-footer .destructive {
+  float: right;
+  margin-left: 0.90909090909091em;
+}
 /* Page: User Account */
 .user form fieldset div:first-child {
   margin-top: 1em;
diff --git a/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/admin-console.less b/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/admin-console.less
index 4cca051..d9b3d79 100644
--- a/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/admin-console.less
+++ b/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/admin-console.less
@@ -60,11 +60,27 @@ body {
     }
 }
 
+#idletimeout {
+    background: #CC5100;
+    color: #FFFFFF;
+    font-size: 1.1em;
+    padding: 0.90909090909091em;
+    text-align: center;
+    display: none;
+    
+    a {
+        color: #fff;
+        font-weight: bold;
+    }
+}
+
 
 /* Header */
 
 .header.rcue {
 
+    z-index: 50;
+
     .navbar.utility {
         background-color: #393F45;
         border-bottom: 1px solid #53565B;
@@ -88,41 +104,6 @@ body {
             min-height: 42px;
             max-width: 1170px;
         }
-
-        .select-rcue {
-            font-size: 0.76923076923077em;
-            margin-left: 1em;
-            margin-top: 0.7em;
-            display: inline-block;
-            vertical-align: middle;
-            background-color: #555a5e;
-            background-image: none;
-            background-image: url(img/sprite-arrow-down.png);
-            background-repeat: no-repeat;
-            background-position: right -26px;
-            border: 1px solid #676c6e;
-            border-radius: 2px;
-            padding-left: 0;
-            
-            &:hover {
-                border-color: #7e8385;
-            }
-            
-            select {
-                color: #fff;
-                
-                &:-moz-focusring {
-                    color: transparent;
-                    text-shadow: 0 0 0 #fff;
-                }
-                
-                option {
-                    background-color: #fff;
-                    color: #333;
-                    padding: 0.36363636363636em 0.90909090909091em;
-                }
-            }
-        }
         
         .nav > li {
         
@@ -165,7 +146,6 @@ body {
                     option {
                         background-color: #fff;
                         color: #333;
-                        padding: 0.36363636363636em 0.90909090909091em;
                     }
                 }
             }
@@ -567,6 +547,59 @@ td.token-cell button {
 }
 
 
+/* Modal boxes */
+
+.modal {
+    
+    .modal-dialog {
+        padding-top: 10em;
+    }
+    
+    .modal-content {
+        box-shadow: none;
+        border-radius: 0;
+        border: 1px solid #666;
+    }
+    
+    .modal-header {
+        background-color: #f8f8f8;
+        padding: 1.5em 2em;
+        border-bottom: none;
+        
+        h3 {
+            font-size: 1.3em;
+            font-weight: bold;
+            font-family: @open-sans;
+            margin: 0;
+        }
+    }
+    
+    .modal-body {
+        
+        p {
+            font-size: 1.1em;
+            
+            &.primary {
+                font-size: 1.1em;
+                font-weight: bold;
+                margin-bottom: 0.45454545454545em;
+            }
+        }
+    }
+    
+    .modal-footer {
+        border-top: 0;
+        
+        .primary,
+        .destructive {
+            float: right;
+            margin-left: 0.90909090909091em;
+        }
+        
+    }
+}
+
+
 /* Page: User Account */
 
 .user {
diff --git a/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/forms.css b/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/forms.css
index 8d99830..6587d91 100644
--- a/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/forms.css
+++ b/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/forms.css
@@ -18,6 +18,8 @@ textarea {
   padding: 0 0.545454545454545em;
   min-width: 18.1818181818182em;
   height: 2.36363636363636em;
+  /* 26px */
+
   border: 1px #b6b6b6 solid;
   border-radius: 2px;
   box-shadow: inset 0px 2px 2px rgba(0, 0, 0, 0.1);
@@ -550,7 +552,7 @@ input[type="email"].tiny {
 }
 .select-rcue,
 .select2-container .select2-choice {
-  height: 26px;
+  height: 2.6em;
   border: 1px #b6b6b6 solid;
   border-radius: 2px;
   box-shadow: inset 0px 2px 2px rgba(0, 0, 0, 0.1);
@@ -593,7 +595,7 @@ input[type="email"].tiny {
 }
 .select-rcue option {
   line-height: 2em;
-  padding-left: 0.90909090909091em;
+  padding: 0.363636em 0.909091em;
 }
 .select-rcue option:hover {
   background-color: #d5ecf9;
@@ -788,7 +790,8 @@ input[type="email"].tiny {
   margin-top: 3em;
   margin-bottom: 5em;
 }
-.form-actions .primary {
+.form-actions .primary,
+.form-actions .destructive {
   float: right;
   margin-left: 0.90909090909091em;
 }
diff --git a/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/forms.less b/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/forms.less
index c965f0e..a29e5f3 100644
--- a/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/forms.less
+++ b/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/forms.less
@@ -24,7 +24,7 @@ textarea {
     font-size: 1.1em;
     padding: 0 0.545454545454545em;
     min-width: 18.1818181818182em;
-    height: 2.36363636363636em;
+    height: 2.36363636363636em; /* 26px */
     border: 1px #b6b6b6 solid;
     border-radius: 2px;
     box-shadow: inset 0px 2px 2px rgba(0,0,0,0.1);
@@ -656,7 +656,7 @@ input[type="email"] {
 
 .select-rcue,
 .select2-container .select2-choice {
-    height: 26px;
+    height: 2.6em;
     border: 1px #b6b6b6 solid;
     border-radius: 2px;
     box-shadow: inset 0px 2px 2px rgba(0,0,0,0.1);
@@ -707,7 +707,7 @@ input[type="email"] {
     
     option {
         line-height: 2em;
-        padding-left: 0.90909090909091em;
+        padding: 0.363636em 0.909091em;
         
         &:hover {
             background-color: #d5ecf9;
@@ -940,7 +940,8 @@ input[type="email"] {
     margin-top: 3em;
     margin-bottom: 5em;
     
-    .primary {
+    .primary,
+    .destructive {
         float: right;
         margin-left: 0.90909090909091em;
     }
diff --git a/forms/src/main/resources/META-INF/resources/forms/theme/default/css/img/login-register-separator.png b/forms/src/main/resources/META-INF/resources/forms/theme/default/css/img/login-register-separator.png
index 5ea210c..d626a45 100644
Binary files a/forms/src/main/resources/META-INF/resources/forms/theme/default/css/img/login-register-separator.png and b/forms/src/main/resources/META-INF/resources/forms/theme/default/css/img/login-register-separator.png differ
diff --git a/forms/src/main/resources/META-INF/resources/forms/theme/default/css/img/login-register-social.png b/forms/src/main/resources/META-INF/resources/forms/theme/default/css/img/login-register-social.png
new file mode 100644
index 0000000..e86d738
Binary files /dev/null and b/forms/src/main/resources/META-INF/resources/forms/theme/default/css/img/login-register-social.png differ
diff --git a/forms/src/main/resources/META-INF/resources/forms/theme/default/css/img/login-register-social-separator.png b/forms/src/main/resources/META-INF/resources/forms/theme/default/css/img/login-register-social-separator.png
new file mode 100644
index 0000000..3f08929
Binary files /dev/null and b/forms/src/main/resources/META-INF/resources/forms/theme/default/css/img/login-register-social-separator.png differ
diff --git a/forms/src/main/resources/META-INF/resources/forms/theme/default/css/login-register.css b/forms/src/main/resources/META-INF/resources/forms/theme/default/css/login-register.css
index 8fa9b44..bc25029 100644
--- a/forms/src/main/resources/META-INF/resources/forms/theme/default/css/login-register.css
+++ b/forms/src/main/resources/META-INF/resources/forms/theme/default/css/login-register.css
@@ -49,13 +49,30 @@ body {
   width: 100%;
   min-width: 120em;
 }
+.rcue-login-register .form-area.separator,
+.rcue-login-register .form-area.social,
+.rcue-login-register .form-area.social.separator {
+  background-repeat: no-repeat;
+  background-position: 42.7em center;
+}
+.rcue-login-register .form-area.separator {
+  background-image: url(img/login-register-separator.png);
+  background-position: 43.2em center;
+}
+.rcue-login-register .form-area.social {
+  background-image: url(img/login-register-social.png);
+}
+.rcue-login-register .form-area.social.separator {
+  background-image: url(img/login-register-social-separator.png);
+}
 .rcue-login-register .background-area .section {
   float: left;
   padding: 0 4.5em 0 4.6em;
   width: auto;
   position: relative;
 }
-.rcue-login-register .background-area .separator .section {
+.rcue-login-register .background-area .separator .section,
+.rcue-login-register .background-area .social .section {
   padding-top: 1.5em;
   padding-bottom: 1.5em;
 }
@@ -65,15 +82,6 @@ body {
 .rcue-login-register .background-area .section:first-child {
   padding-right: 4.5em;
 }
-.rcue-login-register .form-area.separator {
-  background-image: url(img/login-register-separator.png);
-  background-repeat: no-repeat;
-  background-position: 43.2em center;
-}
-.rcue-login-register .form-area.social {
-  background-image: url(img/login-register-social-separators.png);
-  background-position: 39.6em center;
-}
 .rcue-login-register .section > p {
   font-size: 1.3em;
   margin-bottom: 1.53846153846154em;
@@ -120,7 +128,6 @@ body {
 .rcue-login-register form > div.aside-btn input[type="checkbox"] {
   margin-bottom: 0.54545454545455em;
   /* 6px */
-
 }
 .rcue-login-register form > input[type="button"],
 .rcue-login-register form > input[type="submit"]{
@@ -137,13 +144,10 @@ body {
   top: -0.636363636363636em;
 }
 .rcue-login-register .feedback.bottom-left {
-  left: 32.7em;
+  left: 35.7em;
   top: -9.2em;
   min-width: 35em;
 }
-.rcue-login-register.reset .feedback.bottom-left {
-  left: 35.7em;  
-}
 .rcue-login-register input.error[type="text"],
 .rcue-login-register input.error[type="password"],
 .rcue-login-register input.error[type="email"] {
diff --git a/forms/src/main/resources/META-INF/resources/forms/theme/default/login.ftl b/forms/src/main/resources/META-INF/resources/forms/theme/default/login.ftl
index 2b24b4c..5ea577f 100755
--- a/forms/src/main/resources/META-INF/resources/forms/theme/default/login.ftl
+++ b/forms/src/main/resources/META-INF/resources/forms/theme/default/login.ftl
@@ -34,7 +34,7 @@
 
     <div id="info">
         <#if realm.registrationAllowed>
-            <p>${rb.getString('noAccount')} <a href="${url.registrationUrl}">${rb.getString('register')}</a>.</p>
+            <p>${rb.getString('noAccount')} <a href="#">${rb.getString('register')}</a>.</p>
         </#if>
     </div>