[PATCH] 730 webui: display expired session notification in a more visible
area
The notification is a primary information of the page. It should be more
highlighted.
https://fedorahosted.org/freeipa/ticket/4470
[PATCH] 731 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
[PATCH] 732 webui: login screen - improved button switching
- added cancel button to reset password view of login screen
- re-implemented buttons hiding mechanism
- switching between 'Reset Password' and 'Reset Password and Login'
according to presence of value in OTP field
https://fedorahosted.org/freeipa/ticket/4470
--
Petr Vobornik
From 8c0afe1848a836c3aaa2be1a016e0ad3739b6009 Mon Sep 17 00:00:00 2001
From: Petr Vobornik <pvobo...@redhat.com>
Date: Fri, 25 Jul 2014 18:26:47 +0200
Subject: [PATCH] webui: login screen - improved button switching
- added cancel button to reset password view of login screen
- re-implemented buttons hiding mechanism
- switching between 'Reset Password' and 'Reset Password and Login' according to presence of value in OTP field
https://fedorahosted.org/freeipa/ticket/4470
---
install/ui/src/freeipa/widgets/LoginScreen.js | 68 +++++++++++++++++------
install/ui/src/freeipa/widgets/LoginScreenBase.js | 2 +
2 files changed, 54 insertions(+), 16 deletions(-)
diff --git a/install/ui/src/freeipa/widgets/LoginScreen.js b/install/ui/src/freeipa/widgets/LoginScreen.js
index be5cc7788f315990b6c17c8ddb2ff972513f412e..c6e14bfdb5e7d7bdec2bb5860996c1cc3b62520e 100644
--- a/install/ui/src/freeipa/widgets/LoginScreen.js
+++ b/install/ui/src/freeipa/widgets/LoginScreen.js
@@ -83,32 +83,69 @@ define(['dojo/_base/declare',
render_buttons: function(container) {
this.sync_btn_node = IPA.button({
+ name: 'sync',
label: text.get('@i18n:login.sync_otp_token', "Sync OTP Token"),
button_class: 'btn btn-link',
click: lang.hitch(this, this.on_sync)
})[0];
construct.place(this.sync_btn_node, container);
+ construct.place(document.createTextNode(" "), container);
this.login_btn_node = IPA.button({
+ name: 'login',
label: text.get('@i18n:login.login', "Login"),
'class': 'btn-primary btn-lg',
click: lang.hitch(this, this.on_confirm)
})[0];
construct.place(this.login_btn_node, container);
+ construct.place(document.createTextNode(" "), container);
+
+ this.cancel_btn_node = IPA.button({
+ name: 'cancel',
+ label: text.get('@i18n:buttons.cancel', "Cancel"),
+ 'class': 'btn-default',
+ click: lang.hitch(this, this.on_cancel)
+ })[0];
+ construct.place(this.cancel_btn_node, container);
+ construct.place(document.createTextNode(" "), container);
this.reset_btn_node = IPA.button({
+ name: 'reset',
+ label: text.get('@i18n:buttons.reset_password', "Reset Password"),
+ 'class': 'btn-primary btn-lg',
+ click: lang.hitch(this, this.on_confirm)
+ })[0];
+ construct.place(this.reset_btn_node, container);
+ construct.place(document.createTextNode(" "), container);
+
+ this.reset_and_login_btn_node = IPA.button({
+ name: 'reset_and_login',
label: text.get('@i18n:buttons.reset_password_and_login', "Reset Password and Login"),
'class': 'btn-primary btn-lg',
click: lang.hitch(this, this.on_confirm)
})[0];
+ construct.place(this.reset_and_login_btn_node, container);
+ },
+
+ set_visible_buttons: function(buttons) {
+ if (!this.buttons_node) return;
+ query('button', this.buttons_node).forEach(function(el) {
+ if (buttons.indexOf(el.name) > -1) {
+ dom_style.set(el, 'display', '');
+ } else {
+ dom_style.set(el, 'display', 'none');
+ }
+ });
},
post_create_fields: function() {
var u_f = this.get_field('username');
var p_f = this.get_field('password');
+ var otp_f = this.get_field('otp');
u_f.on('value-change', lang.hitch(this, this.on_form_change));
p_f.on('value-change', lang.hitch(this, this.on_form_change));
+ otp_f.on('value-change', lang.hitch(this, this.on_otp_change));
this.on_form_change();
},
@@ -122,6 +159,15 @@ define(['dojo/_base/declare',
p_f.set_required(required);
},
+ on_otp_change: function(event) {
+ if (this.view === 'login') return;
+ if (!event.value[0]) {
+ this.set_visible_buttons(['cancel', 'reset_and_login']);
+ } else {
+ this.set_visible_buttons(['cancel', 'reset']);
+ }
+ },
+
on_sync: function() {
var user = this.get_field('username').get_value()[0];
this.emit('require-otp-sync', { source: this, user: user });
@@ -135,6 +181,10 @@ define(['dojo/_base/declare',
}
},
+ on_cancel: function() {
+ this.set('view', 'login');
+ },
+
login: function() {
var val_summary = this.get_widget('validation');
@@ -230,15 +280,6 @@ define(['dojo/_base/declare',
},
refresh: function() {
- if (this.buttons_node) {
- // detach button nodes politely
- // hard methods like `innerHTML=''` might have undesired
- // consequences, e.g., removal of children's content in IE
- var bn = this.buttons_node;
- while (bn.firstChild) {
- bn.removeChild(bn.firstChild);
- }
- }
if (this.view === 'reset') {
this.show_reset_view();
} else {
@@ -252,10 +293,7 @@ define(['dojo/_base/declare',
var val_summary = this.get_widget('validation');
val_summary.add_info('expired', this.expired_msg);
}
- if (this.buttons_node) {
- construct.place(this.sync_btn_node, this.buttons_node);
- construct.place(this.login_btn_node, this.buttons_node);
- }
+ this.set_visible_buttons(['sync', 'login']);
if (this.password_enabled()) {
this.use_fields(['username', 'password']);
var username_f = this.get_field('username');
@@ -273,9 +311,7 @@ define(['dojo/_base/declare',
show_reset_view: function() {
this.set_reset_aside_text();
- if (this.buttons_node) {
- construct.place(this.reset_btn_node, this.buttons_node);
- }
+ this.set_visible_buttons(['cancel', 'reset_and_login']);
this.use_fields(['username_r', 'current_password', 'otp', 'new_password', 'verify_password']);
var val_summary = this.get_widget('validation');
diff --git a/install/ui/src/freeipa/widgets/LoginScreenBase.js b/install/ui/src/freeipa/widgets/LoginScreenBase.js
index 2d14bb95a338ecf76e909ccb2d800ea85407d25e..a5de44bd4c2e10eaa113bd1f53e30266459241ee 100644
--- a/install/ui/src/freeipa/widgets/LoginScreenBase.js
+++ b/install/ui/src/freeipa/widgets/LoginScreenBase.js
@@ -226,6 +226,8 @@ define(['dojo/_base/declare',
new FieldBinder(f, w).bind(true);
this.bind_validation(val_w, f);
}
+
+ this.post_create_fields();
},
post_create_fields: function() {
--
1.9.3
From a9bc885367e043b8994bf55a34c4c17ef6153a95 Mon Sep 17 00:00:00 2001
From: Petr Vobornik <pvobo...@redhat.com>
Date: Thu, 24 Jul 2014 18:32:25 +0200
Subject: [PATCH] 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
---
install/ui/src/freeipa/widgets/LoginScreen.js | 6 +++---
install/ui/src/freeipa/widgets/LoginScreenBase.js | 6 ++++++
install/ui/src/freeipa/widgets/SyncOTPScreen.js | 2 ++
install/ui/test/data/ipa_init.json | 5 +++--
ipalib/plugins/internal.py | 5 +++--
5 files changed, 17 insertions(+), 7 deletions(-)
diff --git a/install/ui/src/freeipa/widgets/LoginScreen.js b/install/ui/src/freeipa/widgets/LoginScreen.js
index 87938f9c0225bcbc31e4755beca6cb7da9876aed..be5cc7788f315990b6c17c8ddb2ff972513f412e 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 fields nearby, 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 819f832a02d5369d5ccd754cb2e5c9740bd0c1f6..2d14bb95a338ecf76e909ccb2d800ea85407d25e 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 13c47ae88d73f07b8101fd75841babb10778b6cd..f7e4fedabf0c2e68ded4221a41e516635200a3cd 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 8a482134d70976ecfe4748dd102351a64dbd4dd6..f42b46efe02e2a768d37c3efc7b8ca7a16d77749 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 fields nearby, 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",
diff --git a/ipalib/plugins/internal.py b/ipalib/plugins/internal.py
index 1a8d9cad3427ee75e7774f67c2b4c08eaba8479e..b698c32f054086e371e2e8d83f37b63b099b27e4 100644
--- a/ipalib/plugins/internal.py
+++ b/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 fields nearby, 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"),
--
1.9.3
From 45b410d490d6e351d7ba6ad6ca07831e9c312add Mon Sep 17 00:00:00 2001
From: Petr Vobornik <pvobo...@redhat.com>
Date: Thu, 24 Jul 2014 17:33:15 +0200
Subject: [PATCH] webui: display expired session notification in a more visible
area
The notification is a primary information of the page. It should be more highlighted.
https://fedorahosted.org/freeipa/ticket/4470
---
install/ui/src/freeipa/widgets/LoginScreen.js | 7 ++++---
1 file changed, 4 insertions(+), 3 deletions(-)
diff --git a/install/ui/src/freeipa/widgets/LoginScreen.js b/install/ui/src/freeipa/widgets/LoginScreen.js
index e7e1b029e890469874ba040e6d4142f50afcdd3a..87938f9c0225bcbc31e4755beca6cb7da9876aed 100644
--- a/install/ui/src/freeipa/widgets/LoginScreen.js
+++ b/install/ui/src/freeipa/widgets/LoginScreen.js
@@ -248,6 +248,10 @@ define(['dojo/_base/declare',
show_login_view: function() {
this.set_login_aside_text();
+ if (auth.current.expired) {
+ var val_summary = this.get_widget('validation');
+ val_summary.add_info('expired', this.expired_msg);
+ }
if (this.buttons_node) {
construct.place(this.sync_btn_node, this.buttons_node);
construct.place(this.login_btn_node, this.buttons_node);
@@ -284,9 +288,6 @@ define(['dojo/_base/declare',
set_login_aside_text: function() {
var aside = "";
- if (auth.current.expired) {
- aside += "<p>"+this.expired_msg;+"<p/>";
- }
if (this.password_enabled()) {
aside += "<p>"+this.form_auth_msg;+"<p/>";
}
--
1.9.3
_______________________________________________
Freeipa-devel mailing list
Freeipa-devel@redhat.com
https://www.redhat.com/mailman/listinfo/freeipa-devel
