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>

ipalib/plugins/internal.py

@@ -283,9 +283,9 @@ class i18n_messages(Command):
             "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"),
@@ -662,6 +662,7 @@ class i18n_messages(Command):
             "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"),