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>

4 files changed, 14 insertions, 5 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);
 
diff --git a/install/ui/test/data/ipa_init.json b/install/ui/test/data/ipa_init.json
index 8a482134d..28ec80b24 100644
--- a/install/ui/test/data/ipa_init.json
+++ b/install/ui/test/data/ipa_init.json
@@ -141,9 +141,9 @@
                         "pad": "PAD"
                     },
                     "login": {
-                        "form_auth": "To login with username and password, enter them in the fields below then click Login.",
+                        "form_auth": "<i class=\"fa fa-info-circle\"></i> To login with <strong>username and password</strong>, enter them in the corresponding fields, then click Login.",
                         "header": "Logged In As",
-                        "krb_auth_msg": "To login with Kerberos, 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.",
+                        "krb_auth_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.",
                         "login": "Login",
                         "logout": "Logout",
                         "logout_error": "Logout error",
@@ -517,6 +517,7 @@
                         "new_password": "New Password",
                         "new_password_required": "New password is required",
                         "otp": "OTP",
+                        "otp_info": "<i class=\"fa fa-info-circle\"></i> <strong>One-Time-Password(OTP):</strong> Generate new OTP code for each OTP field.",
                         "otp_long": "One-Time-Password",
                         "otp_sync_fail": "Token synchronization failed",
                         "otp_sync_invalid": "The username, password or token codes are not correct",