webui: improved info msgs on login/token sync/reset pwd pages

- add info icons to distinguish and classify the messages.
- add info text for OTP fields
- fix login instruction inaccuracy related to position of login button

https://fedorahosted.org/freeipa/ticket/4470

Reviewed-By: Endi Sukma Dewata <edewata@redhat.com>

3 files changed, 11 insertions, 3 deletions

diff --git a/install/ui/src/freeipa/widgets/LoginScreen.js b/install/ui/src/freeipa/widgets/LoginScreen.js
index 87938f9c0..13100fa31 100644
--- a/install/ui/src/freeipa/widgets/LoginScreen.js
+++ b/install/ui/src/freeipa/widgets/LoginScreen.js
@@ -50,9 +50,9 @@ define(['dojo/_base/declare',
 
         expired_msg: "Your session has expired. Please re-login.",
 
-        form_auth_msg: "To login with username and password, enter them in the fields below, then click Login.",
+        form_auth_msg: "<i class=\"fa fa-info-circle\"></i> To login with <strong>username and password</strong>, enter them in the corresponding fields, then click Login.",
 
-        kerberos_msg: " To login with Kerberos, please make sure you" +
+        kerberos_msg: "<i class=\"fa fa-info-circle\"></i> To login with <strong>Kerberos</strong>, please make sure you" +
                     " have valid tickets (obtainable via kinit) and " +
                     "<a href='http://${host}/ipa/config/unauthorized.html'>configured</a>" +
                     " the browser correctly, then click Login. ",
@@ -298,7 +298,7 @@ define(['dojo/_base/declare',
         },
 
         set_reset_aside_text: function() {
-            this.set('aside', '');
+            this.set('aside', "<p>"+this.otp_info_msg+"<p/>");
         },
 
         constructor: function(spec) {
diff --git a/install/ui/src/freeipa/widgets/LoginScreenBase.js b/install/ui/src/freeipa/widgets/LoginScreenBase.js
index 819f832a0..2d14bb95a 100644
--- a/install/ui/src/freeipa/widgets/LoginScreenBase.js
+++ b/install/ui/src/freeipa/widgets/LoginScreenBase.js
@@ -60,6 +60,9 @@ define(['dojo/_base/declare',
 
         caps_warning_msg: "Warning: CAPS LOCK key is on",
 
+        otp_info_msg: "<i class=\"fa fa-info-circle\"></i> <strong>One-Time-Password(OTP):</strong> \
+        Generate new OTP code for each OTP field.",
+
         /**
          * Details builder
          * @property {IPA.details_builder}
@@ -331,6 +334,9 @@ define(['dojo/_base/declare',
         constructor: function(spec) {
             spec = spec || {};
             declare.safeMixin(this, spec);
+
+            this.otp_info_msg = text.get(spec.otp_info_msg || '@i18n:password.otp_info',
+                this.otp_info_msg);
         }
     });
     return LoginScreenBase;
diff --git a/install/ui/src/freeipa/widgets/SyncOTPScreen.js b/install/ui/src/freeipa/widgets/SyncOTPScreen.js
index 13c47ae88..f7e4fedab 100644
--- a/install/ui/src/freeipa/widgets/SyncOTPScreen.js
+++ b/install/ui/src/freeipa/widgets/SyncOTPScreen.js
@@ -179,6 +179,8 @@ define(['dojo/_base/declare',
         constructor: function(spec) {
             spec = spec || {};
 
+            this.aside = "<p>" + this.otp_info_msg + "</p>";
+
             this.sync_fail = text.get(spec.sync_fail || '@i18n:password.otp_sync_fail',
                 this.sync_fail);