From 9ecdec3f452bea55073b09beba2731092bf68657 Mon Sep 17 00:00:00 2001
From: Stian Thorgersen <stianst@gmail.com>
Date: Thu, 23 Jul 2015 10:40:32 +0200
Subject: [PATCH] KEYCLOAK-1591 Issues with token settings page

---
 .../admin/resources/partials/brute-force.html |  20 +-
 .../resources/partials/realm-detail.html      |   2 +-
 .../resources/partials/realm-tokens.html      | 202 +++++++++---------
 .../keycloak/admin/resources/css/styles.css   |  17 ++
 4 files changed, 126 insertions(+), 115 deletions(-)

diff --git a/forms/common-themes/src/main/resources/theme/base/admin/resources/partials/brute-force.html b/forms/common-themes/src/main/resources/theme/base/admin/resources/partials/brute-force.html
index 5ea711e57b..e26e126c70 100755
--- a/forms/common-themes/src/main/resources/theme/base/admin/resources/partials/brute-force.html
+++ b/forms/common-themes/src/main/resources/theme/base/admin/resources/partials/brute-force.html
@@ -17,15 +17,15 @@
             <div class="form-group" data-ng-show="realm.bruteForceProtected">
                 <label class="col-md-2 control-label" for="failureFactor">Max Login Failures</label>
 
-                <div class="col-md-2">
+                <div class="col-md-6">
                     <input class="form-control" type="number" min="1" max="31536000" id="failureFactor" name="failureFactor" data-ng-model="realm.failureFactor" autofocus
                            required>
                 </div>
                 <kc-tooltip>How many failures before wait is triggered.</kc-tooltip>
             </div>
-            <div class="form-group input-select" data-ng-show="realm.bruteForceProtected">
+            <div class="form-group" data-ng-show="realm.bruteForceProtected">
                 <label class="col-md-2 control-label" for="waitIncrement">Wait Increment</label>
-                <div class="col-md-6 form-inline">
+                <div class="col-md-6 time-selector">
                     <input class="form-control" type="number" required min="1"
                            max="31536000" data-ng-model="realm.waitIncrement"
                            id="waitIncrement" name="waitIncrement"/>
@@ -41,15 +41,15 @@
             <div class="form-group" data-ng-show="realm.bruteForceProtected">
                 <label class="col-md-2 control-label" for="quickLoginCheckMilliSeconds">Quick Login Check Milli Seconds</label>
 
-                <div class="col-md-2">
+                <div class="col-md-6">
                     <input class="form-control" type="number" min="1" max="31536000" id="quickLoginCheckMilliSeconds" name="quickLoginCheckMilliSeconds" data-ng-model="realm.quickLoginCheckMilliSeconds" autofocus
                            required>
                 </div>
                 <kc-tooltip>If a failure happens concurrently too quickly, lock out the user.</kc-tooltip>
             </div>
-            <div class="form-group input-select" data-ng-show="realm.bruteForceProtected">
+            <div class="form-group" data-ng-show="realm.bruteForceProtected">
                 <label class="col-md-2 control-label" for="minimumQuickLoginWait">Minimum Quick Login Wait</label>
-                <div class="col-md-6 form-inline">
+                <div class="col-md-6 time-selector">
                     <input class="form-control" type="number" required min="1"
                            max="31536000" data-ng-model="realm.minimumQuickLoginWait"
                            id="minimumQuickLoginWait" name="minimumQuickLoginWait"/>
@@ -62,9 +62,9 @@
                 </div>
                 <kc-tooltip>How long to wait after a quick login failure.</kc-tooltip>
             </div>
-            <div class="form-group input-select" data-ng-show="realm.bruteForceProtected">
+            <div class="form-group" data-ng-show="realm.bruteForceProtected">
                 <label class="col-md-2 control-label" for="maxFailureWait">Max Wait</label>
-                <div class="col-md-6 form-inline">
+                <div class="col-md-6 time-selector">
                     <input class="form-control" type="number" required min="1"
                                    max="31536000" data-ng-model="realm.maxFailureWait"
                                    id="maxFailureWait" name="maxFailureWait"/>
@@ -77,9 +77,9 @@
                 </div>
                 <kc-tooltip>Max time a user will be locked out.</kc-tooltip>
             </div>
-            <div class="form-group input-select" data-ng-show="realm.bruteForceProtected">
+            <div class="form-group" data-ng-show="realm.bruteForceProtected">
                 <label class="col-md-2 control-label" for="maxDeltaTime">Failure Reset Time</label>
-                <div class="col-md-6 form-inline">
+                <div class="col-md-6 time-selector">
                     <input class="form-control" type="number" required min="1"
                            max="31536000" data-ng-model="realm.maxDeltaTime"
                            id="maxDeltaTime" name="maxDeltaTime"/>
diff --git a/forms/common-themes/src/main/resources/theme/base/admin/resources/partials/realm-detail.html b/forms/common-themes/src/main/resources/theme/base/admin/resources/partials/realm-detail.html
index e1ff6834a6..469e8c62d2 100755
--- a/forms/common-themes/src/main/resources/theme/base/admin/resources/partials/realm-detail.html
+++ b/forms/common-themes/src/main/resources/theme/base/admin/resources/partials/realm-detail.html
@@ -1,7 +1,7 @@
 <div class="col-sm-9 col-md-10 col-sm-push-3 col-md-push-2">
     <kc-tabs-realm></kc-tabs-realm>
 
-    <form class="form-horizontal " name="realmForm" novalidate kc-read-only="!access.manageRealm">
+    <form class="form-horizontal" name="realmForm" novalidate kc-read-only="!access.manageRealm">
             <div class="form-group">
                 <label class="col-md-2 control-label" for="name"><span class="required">*</span> Name</label>
                 <div class="col-md-6">
diff --git a/forms/common-themes/src/main/resources/theme/base/admin/resources/partials/realm-tokens.html b/forms/common-themes/src/main/resources/theme/base/admin/resources/partials/realm-tokens.html
index 4f5518de23..56ed0d74fb 100755
--- a/forms/common-themes/src/main/resources/theme/base/admin/resources/partials/realm-tokens.html
+++ b/forms/common-themes/src/main/resources/theme/base/admin/resources/partials/realm-tokens.html
@@ -2,115 +2,107 @@
     <kc-tabs-realm></kc-tabs-realm>
 
     <form class="form-horizontal" name="realmForm" novalidate kc-read-only="!access.manageRealm">
-        <fieldset class="border-top">
-            <div class="form-group input-select">
-                <label class="col-md-2 control-label" for="ssoSessionIdleTimeout">SSO Session Idle Timeout</label>
-                <div class="col-sm-5">
-                    <div class="row">
-                        <div class="col-md-6 form-inline">
-                            <input class="form-control" type="number" required min="1"
-                                   max="31536000" data-ng-model="realm.ssoSessionIdleTimeout"
-                                   id="ssoSessionIdleTimeout" name="ssoSessionIdleTimeout"/>
-                            <select class="form-control" name="ssoSessionIdleTimeoutUnit" data-ng-model="realm.ssoSessionIdleTimeoutUnit" >
-                                <option data-ng-selected="!realm.ssoSessionIdleTimeoutUnit">Seconds</option>
-                                <option>Minutes</option>
-                                <option>Hours</option>
-                                <option>Days</option>
-                            </select>
-                        </div>
-                    </div>
-                </div>
-                <kc-tooltip>Time a session is allowed to be idle before it expires.  Tokens and browser sessions are invalidated when a session is expired.</kc-tooltip>
+
+        <div class="form-group">
+            <label class="col-md-2 control-label" for="ssoSessionIdleTimeout">SSO Session Idle</label>
+
+            <div class="col-md-6 time-selector">
+                <input class="form-control" type="number" required min="1" max="31536000" data-ng-model="realm.ssoSessionIdleTimeout" id="ssoSessionIdleTimeout"
+                       name="ssoSessionIdleTimeout"/>
+                <select class="form-control" name="ssoSessionIdleTimeoutUnit" data-ng-model="realm.ssoSessionIdleTimeoutUnit">
+                    <option data-ng-selected="!realm.ssoSessionIdleTimeoutUnit">Seconds</option>
+                    <option>Minutes</option>
+                    <option>Hours</option>
+                    <option>Days</option>
+                </select>
             </div>
-            <div class="form-group input-select">
-                <label class="col-md-2 control-label" for="ssoSessionMaxLifespan">SSO Session Max Lifespan</label>
-                <div class="col-sm-5">
-                    <div class="row">
-                        <div class="col-md-6 form-inline">
-                            <input class="form-control" type="number" required min="1"
-                                   max="31536000" data-ng-model="realm.ssoSessionMaxLifespan"
-                                   id="ssoSessionMaxLifespan" name="ssoSessionMaxLifespan"/>
-                            <select class="form-control" name="ssoSessionMaxLifespanUnit" data-ng-model="realm.ssoSessionMaxLifespanUnit" >
-                                <option data-ng-selected="!realm.ssoSessionMaxLifespanUnit">Seconds</option>
-                                <option>Minutes</option>
-                                <option>Hours</option>
-                                <option>Days</option>
-                            </select>
-                        </div>
-                    </div>
-                </div>
-                <kc-tooltip>Max time before a session is expired.  Tokens and browser sessions are invalidated when a session is expired.</kc-tooltip>
+            <kc-tooltip>Time a session is allowed to be idle before it expires. Tokens and browser sessions are invalidated when a session is expired.
+            </kc-tooltip>
+        </div>
+
+        <div class="form-group">
+            <label class="col-md-2 control-label" for="ssoSessionMaxLifespan">SSO Session Max</label>
+
+            <div class="col-md-6 time-selector">
+                <input class="form-control" type="number" required min="1"
+                       max="31536000" data-ng-model="realm.ssoSessionMaxLifespan"
+                       id="ssoSessionMaxLifespan" name="ssoSessionMaxLifespan"/>
+                <select class="form-control" name="ssoSessionMaxLifespanUnit" data-ng-model="realm.ssoSessionMaxLifespanUnit">
+                    <option data-ng-selected="!realm.ssoSessionMaxLifespanUnit">Seconds</option>
+                    <option>Minutes</option>
+                    <option>Hours</option>
+                    <option>Days</option>
+                </select>
             </div>
-            <div class="form-group input-select">
-                <label class="col-md-2 control-label" for="accessTokenLifespan">Access Token Lifespan</label>
-                <div class="col-sm-5">
-                    <div class="row">
-                        <div class="col-md-6 form-inline">
-                            <input class="form-control" type="number" required min="1"
-                                   max="31536000" data-ng-model="realm.accessTokenLifespan"
-                                   id="accessTokenLifespan" name="accessTokenLifespan"/>
-                            <select class="form-control" name="accessTokenLifespanUnit" data-ng-model="realm.accessTokenLifespanUnit" >
-                                <option data-ng-selected="!realm.accessTokenLifespanUnit">Seconds</option>
-                                <option>Minutes</option>
-                                <option>Hours</option>
-                                <option>Days</option>
-                            </select>
-                        </div>
-                    </div>
-                </div>
-                <kc-tooltip>Max time before an access token is expired.  This value is recommended to be short relative to the SSO timeout.</kc-tooltip>
+            <kc-tooltip>Max time before a session is expired. Tokens and browser sessions are invalidated when a session is expired.</kc-tooltip>
+        </div>
+
+        <div class="form-group">
+            <label class="col-md-2 control-label" for="accessTokenLifespan">Access Token Lifespan</label>
+
+            <div class="col-md-6 time-selector">
+                <input class="form-control" type="number" required min="1"
+                       max="31536000" data-ng-model="realm.accessTokenLifespan"
+                       id="accessTokenLifespan" name="accessTokenLifespan"/>
+                <select class="form-control" name="accessTokenLifespanUnit" data-ng-model="realm.accessTokenLifespanUnit">
+                    <option data-ng-selected="!realm.accessTokenLifespanUnit">Seconds</option>
+                    <option>Minutes</option>
+                    <option>Hours</option>
+                    <option>Days</option>
+                </select>
             </div>
-            <div class="form-group">
-                <label class="col-md-2 control-label" for="accessCodeLifespan">Client login timeout</label>
-                <div class="col-sm-5">
-                    <div class="row">
-                        <div class="col-md-6 form-inline">
-                            <input class="form-control" type="number" required min="1" max="31536000" data-ng-model="realm.accessCodeLifespan" id="accessCodeLifespan" name="accessCodeLifespan">
-                            <select class="form-control" name="accessCodeLifespanUnit" data-ng-model="realm.accessCodeLifespanUnit">
-                                <option data-ng-selected="!realm.accessCodeLifespanUnit">Seconds</option>
-                                <option>Minutes</option>
-                                <option>Hours</option>
-                                <option>Days</option>
-                            </select>
-                        </div>
-                    </div>
-                </div>
-                <kc-tooltip>Max time an client has to finish the access token protocol.  This should normally be 1 minute.</kc-tooltip>                </div>
-            <div class="form-group input-select">
-                <label class="col-md-2 control-label" for="accessCodeLifespanLogin" class="two-lines">Login lifespan</label>
-                <div class="col-sm-5">
-                    <div class="row">
-                        <div class="col-md-6 form-inline">
-                            <input class="form-control" type="number" required min="1" max="31536000" data-ng-model="realm.accessCodeLifespanLogin" id="accessCodeLifespanLogin" name="accessCodeLifespanLogin">
-                            <select class="form-control" name="accessCodeLifespanLoginUnit" data-ng-model="realm.accessCodeLifespanLoginUnit">
-                                <option data-ng-selected="!realm.accessCodeLifespanLoginUnit">Seconds</option>
-                                <option>Minutes</option>
-                                <option>Hours</option>
-                                <option>Days</option>
-                            </select>
-                        </div>
-                    </div>
-                </div>
-                <kc-tooltip>Max time a user has to complete a login.  This is recommended to be relatively long.  30 minutes or more.</kc-tooltip>
+            <kc-tooltip>Max time before an access token is expired. This value is recommended to be short relative to the SSO timeout.</kc-tooltip>
+        </div>
+
+        <div class="form-group">
+            <label class="col-md-2 control-label" for="accessCodeLifespan">Client login timeout</label>
+
+            <div class="col-md-6 time-selector">
+                <input class="form-control" type="number" required min="1" max="31536000" data-ng-model="realm.accessCodeLifespan" id="accessCodeLifespan"
+                       name="accessCodeLifespan">
+                <select class="form-control" name="accessCodeLifespanUnit" data-ng-model="realm.accessCodeLifespanUnit">
+                    <option data-ng-selected="!realm.accessCodeLifespanUnit">Seconds</option>
+                    <option>Minutes</option>
+                    <option>Hours</option>
+                    <option>Days</option>
+                </select>
             </div>
-            <div class="form-group input-select">
-                <label class="col-md-2 control-label" for="accessCodeLifespanUserAction" class="two-lines">Login user action lifespan</label>
-                <div class="col-sm-5">
-                    <div class="row">
-                        <div class="col-md-6 form-inline">
-                            <input class="form-control" type="number" required min="1" max="31536000" data-ng-model="realm.accessCodeLifespanUserAction" id="accessCodeLifespanUserAction" name="accessCodeLifespanUserAction">
-                            <select class="form-control" name="accessCodeLifespanUserActionUnit" data-ng-model="realm.accessCodeLifespanUserActionUnit">
-                                <option data-ng-selected="!realm.accessCodeLifespanUserActionUnit">Seconds</option>
-                                <option>Minutes</option>
-                                <option>Hours</option>
-                                <option>Days</option>
-                            </select>
-                        </div>
-                    </div>
-                </div>
-                <kc-tooltip>Max time a user has to complete login related actions like update password or configure totp.  This is recommended to be relatively long.  5 minutes or more.</kc-tooltip>
+            <kc-tooltip>Max time an client has to finish the access token protocol. This should normally be 1 minute.</kc-tooltip>
+        </div>
+
+        <div class="form-group">
+            <label class="col-md-2 control-label" for="accessCodeLifespanLogin" class="two-lines">Login timeout</label>
+
+            <div class="col-md-6 time-selector">
+                <input class="form-control" type="number" required min="1" max="31536000" data-ng-model="realm.accessCodeLifespanLogin"
+                       id="accessCodeLifespanLogin" name="accessCodeLifespanLogin">
+                <select class="form-control" name="accessCodeLifespanLoginUnit" data-ng-model="realm.accessCodeLifespanLoginUnit">
+                    <option data-ng-selected="!realm.accessCodeLifespanLoginUnit">Seconds</option>
+                    <option>Minutes</option>
+                    <option>Hours</option>
+                    <option>Days</option>
+                </select>
             </div>
-        </fieldset>
+            <kc-tooltip>Max time a user has to complete a login. This is recommended to be relatively long. 30 minutes or more.</kc-tooltip>
+        </div>
+
+        <div class="form-group">
+            <label class="col-md-2 control-label" for="accessCodeLifespanUserAction" class="two-lines">Login action timeout</label>
+
+            <div class="col-md-6 time-selector">
+                <input class="form-control" type="number" required min="1" max="31536000" data-ng-model="realm.accessCodeLifespanUserAction"
+                       id="accessCodeLifespanUserAction" name="accessCodeLifespanUserAction">
+                <select class="form-control" name="accessCodeLifespanUserActionUnit" data-ng-model="realm.accessCodeLifespanUserActionUnit">
+                    <option data-ng-selected="!realm.accessCodeLifespanUserActionUnit">Seconds</option>
+                    <option>Minutes</option>
+                    <option>Hours</option>
+                    <option>Days</option>
+                </select>
+            </div>
+            <kc-tooltip>
+                Max time a user has to complete login related actions like update password or configure totp. This is recommended to be relatively long. 5 minutes or more.
+            </kc-tooltip>
+        </div>
 
         <div class="form-group">
             <div class="col-md-10 col-md-offset-2" data-ng-show="access.manageRealm">
@@ -118,7 +110,9 @@
                 <button kc-reset data-ng-disabled="!changed">Cancel</button>
             </div>
         </div>
+
     </form>
+
 </div>
 
 <kc-menu></kc-menu>
\ No newline at end of file
diff --git a/forms/common-themes/src/main/resources/theme/keycloak/admin/resources/css/styles.css b/forms/common-themes/src/main/resources/theme/keycloak/admin/resources/css/styles.css
index 83f09293f1..30fb25a8b4 100644
--- a/forms/common-themes/src/main/resources/theme/keycloak/admin/resources/css/styles.css
+++ b/forms/common-themes/src/main/resources/theme/keycloak/admin/resources/css/styles.css
@@ -312,4 +312,21 @@ h1 i {
     left: 0;
     right: 0;
     bottom: 0;
+}
+
+
+/* Time selector */
+
+.time-selector input {
+    display: inline-block;
+    width: 120px;
+    padding-right: 0;
+    margin-right: 0;
+}
+
+.time-selector select {
+    display: inline-block;
+    width: 80px;
+    margin-left: 0;
+    padding-left: 0;
 }
\ No newline at end of file