On 01/23/2014 11:04 AM, Michael Mraka wrote:
Hi Maximilian,
that sounds great.
% Question is now do I need to package the second .js as well? Or can
% i simply add it to the git tree
% in web/html/javascript?
If it's spacewalk specific (I think so) then just put it to web/html/javascript
next to other spacewalk-*.js.
Hi,
here is the new patch with the
* recent release of jquery.pwstrength.bootstrap
* a spec file to build a package from it
* the patch to the sources during rpmbuild
* the customization/caller script + a function to generate the tick icon
* custom styles for the password strength meter
please have a look.
Thanks
--
--
Mit freundlichen Grüßen,
Maximilian Meister
Systems Management Department
SUSE LINUX Products GmbH
Maxfeldstr. 5
D-90409 Nuremberg, Germany
http://www.suse.com
GF: Jeff Hawn, Jennifer Guild, Felix Imendoerffer, HRB 21284 (AG Nuremberg)
>From 22b17b0cd96742dec6bc6488f95049fcf9a4c21a Mon Sep 17 00:00:00 2001
From: Maximilian Meister <mmeis...@suse.de>
Date: Thu, 23 Jan 2014 13:38:11 +0100
Subject: [PATCH 1/4] adding spec file for the spec tree and patch to the
original source
---
.../pwstrength/pwstrength-bootstrap-1.0.2.patch | 74 ++++++++++++++++++++++
spec-tree/pwstrength/pwstrength-bootstrap.spec | 43 +++++++++++++
2 files changed, 117 insertions(+)
create mode 100644 spec-tree/pwstrength/pwstrength-bootstrap-1.0.2.patch
create mode 100644 spec-tree/pwstrength/pwstrength-bootstrap.spec
diff --git a/spec-tree/pwstrength/pwstrength-bootstrap-1.0.2.patch b/spec-tree/pwstrength/pwstrength-bootstrap-1.0.2.patch
new file mode 100644
index 0000000..5867a97
--- /dev/null
+++ b/spec-tree/pwstrength/pwstrength-bootstrap-1.0.2.patch
@@ -0,0 +1,74 @@
+--- dist/pwstrength-bootstrap-1.0.2.js 2014-01-20 09:52:14.488289101 +0100
++++ dist/pwstrength-bootstrap-1.0.2.js 2014-01-20 16:37:02.799052847 +0100
+@@ -47,7 +47,7 @@ try {
+ };
+
+ validation.wordSimilarToUsername = function (options, word, score) {
+- var username = $(options.common.usernameField).val();
++ var username = $(options.common.usernameField).val() || $(options.common.usernameField).text();
+ if (username && word.toLowerCase().match(username.toLowerCase())) {
+ options.instances.errors.push(options.ui.spanError(options, "same_as_username"));
+ return score;
+@@ -288,7 +288,7 @@ var ui = {};
+
+ ui.initProgressBar = function (options, $el) {
+ var $container = ui.getContainer(options, $el),
+- progressbar = "<div class='progress'><div class='";
++ progressbar = "<div class='progress progress-pwstrength'><div class='";
+
+ if (!options.ui.bootstrap2) {
+ progressbar += "progress-";
+@@ -298,7 +298,7 @@ var ui = {};
+ if (options.ui.viewports.progress) {
+ $container.find(options.ui.viewports.progress).append(progressbar);
+ } else {
+- $(progressbar).insertAfter($el);
++ $(progressbar).insertAfter('#desiredpassword-input-group');
+ }
+ };
+
+@@ -312,7 +312,7 @@ var ui = {};
+ };
+
+ ui.initVerdict = function (options, $el) {
+- ui.initHelper(options, $el, "<span class='password-verdict'></span>",
++ ui.initHelper(options, $el, "<span class='password-verdict' style='display:none'></span>",
+ options.ui.viewports.verdict);
+ };
+
+@@ -334,7 +334,7 @@ var ui = {};
+ if (options.ui.showErrors) {
+ html += "<div><ul class='error-list'>";
+ $.each(options.instances.errors, function (idx, err) {
+- html += "<li>" + err + "</li>";
++ html += err;
+ });
+ html += "</ul></div>";
+ }
+@@ -343,7 +343,7 @@ var ui = {};
+ $el.popover({
+ html: true,
+ placement: placement,
+- trigger: "manual",
++ trigger: "focus",
+ content: html
+ });
+ $el.popover("show");
+@@ -364,7 +364,7 @@ var ui = {};
+
+ ui.updateProgressBar = function (options, $el, cssClass, percentage) {
+ var $progressbar = ui.getUIElements(options, $el).$progressbar,
+- $bar = $progressbar.find(".progress-bar"),
++ $bar = $(".progress-bar"),
+ cssPrefix = "progress-";
+
+ if (options.ui.bootstrap2) {
+@@ -388,7 +388,7 @@ var ui = {};
+ var $errors = ui.getUIElements(options, $el).$errors,
+ html = "";
+ $.each(options.instances.errors, function (idx, err) {
+- html += "<li>" + err + "</li>";
++ html += err;
+ });
+ $errors.html(html);
+ };
diff --git a/spec-tree/pwstrength/pwstrength-bootstrap.spec b/spec-tree/pwstrength/pwstrength-bootstrap.spec
new file mode 100644
index 0000000..8dd6546
--- /dev/null
+++ b/spec-tree/pwstrength/pwstrength-bootstrap.spec
@@ -0,0 +1,43 @@
+%global commit 97fbed14287890e55425eba0f557381334af5681
+%global shortcommit %(c=%{commit}; echo ${c:0:7})
+
+Name: jquery.pwstrength.bootstrap
+Version: 1.0.2
+Release: 0
+License: MIT and GPLv3
+Summary: Password quality Twitter Bootstrap Plugin
+Url: https://github.com/ablanco/jquery.pwstrength.bootstrap
+Group: Applications/Internet
+Source0: https://github.com/ablanco/jquery.pwstrength.bootstrap/archive/%{commit}/%{name}-%{version}-%{shortcommit}.tar.gz
+Patch1: pwstrength-bootstrap-%{version}.patch
+BuildArch: noarch
+BuildRoot: %(mktemp -ud %{_tmppath}/%{name}-%{version}-%{release}-XXXXXX)
+
+%description
+The jQuery Password Strength Meter is a plugin for Twitter Bootstrap that provides rulesets for visualy displaying the quality of a users typed in password.
+
+%prep
+%setup -qn %{name}-%{commit}
+%patch1
+
+%build
+
+%install
+rm -rf %{buildroot}
+install -d -m 755 %{buildroot}%{_var}/www/html/javascript
+install -m 644 dist/pwstrength-bootstrap-%{version}.js %{buildroot}%{_var}/www/html/javascript
+
+%clean
+rm -rf %{buildroot}
+
+%post
+
+%postun
+
+%files
+%defattr(-,root,root,-)
+%{_var}/www/html/javascript/*
+
+%changelog
+* Tue Jan 21 2014 Maximilian Meister <mmeis...@suse.de> 1.0.2-1
+- initial packaging of pwstrength bootstrap plugin
--
1.8.4
>From 9ca32726eb5f62ddf9207613c1784149d024b51e Mon Sep 17 00:00:00 2001
From: Maximilian Meister <mmeis...@suse.de>
Date: Thu, 23 Jan 2014 13:43:18 +0100
Subject: [PATCH 2/4] adding caller(customization) script with tick icon
function
---
.../javascript/spacewalk-pwstrength_handler.js | 82 ++++++++++++++++++++++
1 file changed, 82 insertions(+)
create mode 100644 web/html/javascript/spacewalk-pwstrength_handler.js
diff --git a/web/html/javascript/spacewalk-pwstrength_handler.js b/web/html/javascript/spacewalk-pwstrength_handler.js
new file mode 100644
index 0000000..6dae146
--- /dev/null
+++ b/web/html/javascript/spacewalk-pwstrength_handler.js
@@ -0,0 +1,82 @@
+// Setup the password strength meter
+function setupPasswordStrengthMeter() {
+ "use strict";
+ var options = {};
+ options.common = {
+ minChar: 5,
+ usernameField: "#loginname",
+ onKeyUp: function (evt) {
+ $('input[name="desiredpassword"]').popover('show');
+ //when there are no errors the popover disappears
+ var desiredpassval = $.trim($('input[name="desiredpassword"]').val());
+ if ($('ul.error-list').is(':empty')) {
+ $('input[name="desiredpassword"]').popover('destroy');
+ }
+ //update the tick next to the desiredpassword input field
+ updateTickIcon();
+ }
+ };
+ options.rules = {
+ activated:
+ {
+ wordTwoCharacterClasses: true,
+ wordRepetitions: true
+ },
+ scores:
+ {
+ wordRepetitions: -20,
+ wordSequences: -20
+ }
+ };
+ options.ui = {
+ showPopover: true,
+ showErrors: true,
+ spanError: function (options, key) {
+ var text = options.ui.errorMessages[key];
+ return text;
+ },
+ errorMessages:
+ {
+ password_too_short: '<dl><dt><i class="fa fa-exclamation-circle fa-1-5x text-danger"></i>The Password is too short.</dt><dd>must be at least 5 characters</dd></dl>',
+ same_as_username: '<dl><dt><i class="fa fa-exclamation-triangle fa-1-5x text-warning"></i>Password contains username</dt></dl>',
+ email_as_password: '<dl><dt><i class="fa fa-exclamation-triangle fa-1-5x text-warning"></i>Password contains email address</dt></dl>',
+ repeated_character: '<dl><dt><i class="fa fa-exclamation-triangle fa-1-5x text-warning"></i>Try to avoid repetitions</dt></dl>',
+ sequence_found: '<dl><dt><i class="fa fa-exclamation-triangle fa-1-5x text-warning"></i>Your Password contains sequences</dt></dl>',
+ two_character_classes: '<dl><dt><i class="fa fa-exclamation-triangle fa-1-5x text-warning"></i>Use different character classes</dt></dl>'
+ },
+ showVerdicts: false
+ };
+ $('input[name="desiredpassword"]').pwstrength(options);
+}
+
+// check if password >= 5 characters
+// check if confirm password input field matches with password input field
+// swap icons in the input-group-addon
+function updateTickIcon() {
+ var desiredpassval = $.trim($('input[name="desiredpassword"]').val());
+ function success(element) {
+ element.removeClass("fa-times-circle text-danger");
+ element.addClass("fa-check-circle text-success");
+ }
+ function danger(element) {
+ element.removeClass("fa-check-circle text-success");
+ element.addClass("fa-times-circle text-danger");
+ }
+ if (desiredpassval.length < 5 && $("#desiredtick").hasClass("text-success")) {
+ danger($("#desiredtick"));
+ }
+ else if (desiredpassval.length >= 5 && $("#desiredtick").hasClass("text-danger")) {
+ success($("#desiredtick"));
+ }
+ if ($("#confirmpass").val() == desiredpassval && desiredpassval.length >= 5) {
+ success($("#confirmtick"));
+ }
+ else if ($("#confirmtick").hasClass("text-success")) {
+ danger($("#confirmtick"));
+ }
+}
+
+// document ready handler
+$(document).ready(function() {
+ setupPasswordStrengthMeter();
+});
--
1.8.4
>From 22e897e54717849e10968fa9cd563c0233860f4e Mon Sep 17 00:00:00 2001
From: Maximilian Meister <mmeis...@suse.de>
Date: Thu, 23 Jan 2014 13:43:52 +0100
Subject: [PATCH 3/4] rendering the password strength meter
---
.../WEB-INF/pages/admin/multiorg/orgcreate.jsp | 33 +++++++++++++++-------
.../fragments/user/edit_user_table_rows.jspf | 18 ++++++++++--
.../WEB-INF/pages/user/create/usercreate.jsp | 18 ++++++++++--
3 files changed, 53 insertions(+), 16 deletions(-)
diff --git a/java/code/webapp/WEB-INF/pages/admin/multiorg/orgcreate.jsp b/java/code/webapp/WEB-INF/pages/admin/multiorg/orgcreate.jsp
index 0fa4bd5..4ee0d0c 100644
--- a/java/code/webapp/WEB-INF/pages/admin/multiorg/orgcreate.jsp
+++ b/java/code/webapp/WEB-INF/pages/admin/multiorg/orgcreate.jsp
@@ -38,7 +38,7 @@
<div class="col-lg-6">
<html:text property="login" size="15"
styleClass="form-control"
- maxlength="45" styleId="login" />
+ maxlength="45" styleId="loginname" />
<span class="help-block">
<strong><bean:message key="tip" /></strong>
<bean:message key="org.login.tip" arg0="${rhn:getConfig('java.min_user_len')}" /><br/>
@@ -47,17 +47,24 @@
</div>
</div>
+ <script type="text/javascript" src="/javascript/pwstrength-bootstrap-1.0.2.js"></script>
+ <script type="text/javascript" src="/javascript/spacewalk-pwstrength_handler.js"></script>
<div class="form-group">
<label class="col-lg-3 control-label" for="desiredpass">
<bean:message key="desiredpass" />
<span name="password-asterisk" class="required-form-field">*</span>:
</label>
<div class="col-lg-6">
- <html:password property="desiredpassword"
- size="15"
- styleClass="form-control"
- maxlength="32"
- styleId="desiredpass" />
+ <div id="desiredpassword-input-group" class="input-group">
+ <html:password property="desiredpassword"
+ size="15"
+ styleClass="form-control"
+ maxlength="32"
+ styleId="desiredpass" />
+ <span class="input-group-addon">
+ <i class="fa fa-times-circle text-danger fa-1-5x" id="desiredtick"></i>
+ </span>
+ </div>
</div>
</div>
@@ -67,9 +74,15 @@
<span name="password-asterisk" class="required-form-field">*</span>:
</label>
<div class="col-lg-6">
- <html:password property="desiredpasswordConfirm" size="15"
- styleClass="form-control"
- maxlength="32" styleId="confirmpass"/>
+ <div class="input-group">
+ <html:password property="desiredpasswordConfirm" size="15"
+ styleClass="form-control"
+ onkeyup="updateTickIcon()"
+ maxlength="32" styleId="confirmpass"/>
+ <span class="input-group-addon">
+ <i class="fa fa-times-circle text-danger fa-1-5x" id="confirmtick"></i>
+ </span>
+ </div>
</div>
</div>
@@ -168,6 +181,6 @@
}
}
</script>
+
</body>
</html>
-
diff --git a/java/code/webapp/WEB-INF/pages/common/fragments/user/edit_user_table_rows.jspf b/java/code/webapp/WEB-INF/pages/common/fragments/user/edit_user_table_rows.jspf
index 60844c6..c1c9e8d 100644
--- a/java/code/webapp/WEB-INF/pages/common/fragments/user/edit_user_table_rows.jspf
+++ b/java/code/webapp/WEB-INF/pages/common/fragments/user/edit_user_table_rows.jspf
@@ -2,7 +2,7 @@
<div class="form-group">
<label class="col-lg-3 control-label"><bean:message key="username.displayname"/></label>
- <div class="col-lg-6"><c:out escapeXml="true" value="${user.login}" /></div>
+ <div id="loginname" class="col-lg-6 form-control-static"><c:out escapeXml="true" value="${user.login}" /></div>
</div>
<div class="form-group">
@@ -44,17 +44,29 @@
</c:if>
</rhn:require>
+<script type="text/javascript" src="/javascript/pwstrength-bootstrap-1.0.2.js"></script>
+<script type="text/javascript" src="/javascript/spacewalk-pwstrength_handler.js"></script>
<div class="form-group">
<label class="col-lg-3 control-label"><bean:message key="password.displayname"/></label>
<div class="col-lg-6">
- <html:password property="desiredpassword" styleClass="form-control" maxlength="${passwordLength}"/>
+ <div id="desiredpassword-input-group" class="input-group">
+ <html:password property="desiredpassword" styleClass="form-control" maxlength="${passwordLength}"/>
+ <span class="input-group-addon">
+ <i class="fa fa-check-circle text-success fa-1-5x" id="desiredtick"></i>
+ </span>
+ </div>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label"><bean:message key="confirmpass.displayname"/></label>
<div class="col-lg-6">
- <html:password property="desiredpasswordConfirm" styleClass="form-control" maxlength="${passwordLength}"/>
+ <div class="input-group">
+ <html:password property="desiredpasswordConfirm" styleClass="form-control" onkeyup="updateTickIcon()" maxlength="${passwordLength}" styleId="confirmpass"/>
+ <span class="input-group-addon">
+ <i class="fa fa-check-circle text-success fa-1-5x" id="confirmtick"></i>
+ </span>
+ </div>
</div>
</div>
diff --git a/java/code/webapp/WEB-INF/pages/user/create/usercreate.jsp b/java/code/webapp/WEB-INF/pages/user/create/usercreate.jsp
index c673477..62c1f45 100644
--- a/java/code/webapp/WEB-INF/pages/user/create/usercreate.jsp
+++ b/java/code/webapp/WEB-INF/pages/user/create/usercreate.jsp
@@ -43,21 +43,33 @@
<tr>
<td><label for="login"><rhn:required-field key="desiredlogin"/>:</label></td>
<td>
- <html:text property="login" styleClass="form-control" maxlength="${loginLength}" styleId="login"/>
+ <html:text property="login" styleClass="form-control" maxlength="${loginLength}" styleId="loginname"/>
</td>
</tr>
<tr>
<td><label for="desiredpass"><bean:message key="desiredpass" /><span name="password-asterisk"
class="required-form-field">*</span>:</td></label>
<td>
- <html:password property="desiredpassword" styleClass="form-control" size="15" maxlength="${passwordLength}"/>
+ <script type="text/javascript" src="/javascript/pwstrength-bootstrap-1.0.2.js"></script>
+ <script type="text/javascript" src="/javascript/spacewalk-pwstrength_handler.js"></script>
+ <div id="desiredpassword-input-group" class="input-group">
+ <html:password property="desiredpassword" styleClass="form-control" size="15" maxlength="${passwordLength}"/>
+ <span class="input-group-addon">
+ <i class="fa fa-times-circle text-danger fa-1-5x" id="desiredtick"></i>
+ </span>
+ </div>
</td>
</tr>
<tr>
<td><label for="confirmpass"><bean:message key="confirmpass" /><span name="password-asterisk"
class="required-form-field">*</span>:</label></td>
<td>
- <html:password styleClass="form-control" property="desiredpasswordConfirm" size="15" maxlength="${passwordLength}" styleId="confirmpass"/>
+ <div class="input-group">
+ <html:password styleClass="form-control" property="desiredpasswordConfirm" onkeyup="updateTickIcon()" size="15" maxlength="${passwordLength}" styleId="confirmpass"/>
+ <span class="input-group-addon">
+ <i class="fa fa-times-circle text-danger fa-1-5x" id="confirmtick"></i>
+ </span>
+ </div>
</td>
</tr>
<c:if test="${displaypam == 'true' && account_type != 'create_sat'}">
--
1.8.4
>From d36ff3239433945081026a4beff76af48ed3412a Mon Sep 17 00:00:00 2001
From: Maximilian Meister <mmeis...@suse.de>
Date: Thu, 23 Jan 2014 13:44:26 +0100
Subject: [PATCH 4/4] adding custom styles to the password strength meter
---
branding/css/spacewalk-tools.less | 8 ++++++++
branding/css/spacewalk.less | 2 ++
2 files changed, 10 insertions(+)
create mode 100644 branding/css/spacewalk-tools.less
diff --git a/branding/css/spacewalk-tools.less b/branding/css/spacewalk-tools.less
new file mode 100644
index 0000000..4694945
--- /dev/null
+++ b/branding/css/spacewalk-tools.less
@@ -0,0 +1,8 @@
+/* Progress Bar for the password strength check */
+.progress-pwstrength {
+ margin-bottom: 0;
+ margin-top: 4px;
+}
+.error-list {
+ padding-left: 1px;
+}
diff --git a/branding/css/spacewalk.less b/branding/css/spacewalk.less
index 3afa2f0..fef7b2a 100644
--- a/branding/css/spacewalk.less
+++ b/branding/css/spacewalk.less
@@ -11,6 +11,8 @@
@import url(spacewalk-mixins.less);
/*Import of Tables style*/
@import url(spacewalk-tables.less);
+/* Spacewalk Tools */
+@import url(spacewalk-tools.less);
/* Import of the Theme */
@import url(spacewalk-theme.less);
--
1.8.4
_______________________________________________
Spacewalk-devel mailing list
Spacewalk-devel@redhat.com
https://www.redhat.com/mailman/listinfo/spacewalk-devel
