branding/css/spacewalk-tools.less | 8
branding/css/spacewalk.less | 2
java/code/webapp/WEB-INF/pages/admin/multiorg/orgcreate.jsp | 40
+++-
java/code/webapp/WEB-INF/pages/common/fragments/user/edit_user_table_rows.jspf | 25 ++
java/code/webapp/WEB-INF/pages/user/create/usercreate.jsp | 26
++-
spec-tree/pwstrength/pwstrength-bootstrap-1.0.2.patch | 84
+++++++++
spec-tree/pwstrength/pwstrength-bootstrap.spec | 41
++++
web/html/javascript/spacewalk-pwstrength-handler.js | 86
++++++++++
8 files changed, 296 insertions(+), 16 deletions(-)
New commits:
commit 201b52db45f9c7f10b159bbbcb8d41b1b9fc6f2d
Author: Maximilian Meister <mmeister(a)suse.de>
Date: Tue Jan 28 11:26:26 2014 +0100
adding custom styles
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 ea5d16b..78406b9 100644
--- a/branding/css/spacewalk.less
+++ b/branding/css/spacewalk.less
@@ -13,6 +13,8 @@
@import url(spacewalk-inputs.less);
/*Import of Tables style*/
@import url(spacewalk-tables.less);
+/* Import of spacewalk tools */
+@import url(spacewalk-tools.less);
/* Import of the Theme */
@import url(spacewalk-theme.less);
commit 3df372d37b815501a5448c5a6b0827f97df0bbf6
Author: Maximilian Meister <mmeister(a)suse.de>
Date: Tue Jan 28 11:26:01 2014 +0100
rendering the password strength meter
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..e78f542 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/>
@@ -53,11 +53,16 @@
<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 +72,24 @@
<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>
+
+ <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">Password
strength:</label>
+ <div class="col-lg-6" id="pwstrenghtfield">
+ <!-- progress-bar will attach to this container -->
</div>
</div>
@@ -168,6 +188,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..e00b70b 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">
@@ -47,14 +47,33 @@
<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>
+
+<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">Password
strength:</label>
+ <div class="col-lg-6" id="pwstrenghtfield">
+ <!-- progress-bar will attach to this container -->
</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..017e827 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,41 @@
<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}"/>
+ <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>
+ <script type="text/javascript"
src="/javascript/pwstrength-bootstrap-1.0.2.js"></script>
+ <script type="text/javascript"
src="/javascript/spacewalk-pwstrength-handler.js"></script>
+ <tr>
+ <td><label>Password strength:</label></td>
+ <td>
+ <div id="pwstrenghtfield">
+ <!-- progress-bar will attach to this container -->
+ </div>
</td>
</tr>
<c:if test="${displaypam == 'true' && account_type
!= 'create_sat'}">
commit dbe134ad56b7d9399b1480f5031852dc0371540e
Author: Maximilian Meister <mmeister(a)suse.de>
Date: Tue Jan 28 11:25:43 2014 +0100
adding caller script and tick icon function
diff --git a/web/html/javascript/spacewalk-pwstrength-handler.js
b/web/html/javascript/spacewalk-pwstrength-handler.js
new file mode 100644
index 0000000..220e107
--- /dev/null
+++ b/web/html/javascript/spacewalk-pwstrength-handler.js
@@ -0,0 +1,86 @@
+// 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,
+ container: '#pwstrenghtfield',
+ viewports: {
+ progress: '#pwstrenghtfield'
+ }
+ };
+ $('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();
+});
commit 801847bde50f81075f81336dd9ba05f86fbc9fcc
Author: Maximilian Meister <mmeister(a)suse.de>
Date: Tue Jan 28 11:24:47 2014 +0100
adding spec and patch to spec-tree
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..f32efe5
--- /dev/null
+++ b/spec-tree/pwstrength/pwstrength-bootstrap-1.0.2.patch
@@ -0,0 +1,84 @@
+--- dist/pwstrength-bootstrap-1.0.2.js 2014-01-27 10:20:54.927264579 +0100
++++ dist/pwstrength-bootstrap-1.0.2.js 2014-01-28 09:47:16.720675185 +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-";
+@@ -296,9 +296,9 @@ var ui = {};
+ progressbar += "bar'></div></div>";
+
+ if (options.ui.viewports.progress) {
+- $container.find(options.ui.viewports.progress).append(progressbar);
++ $container.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);
+ };
+@@ -542,4 +542,4 @@ var methods = {};
+ return result;
+ };
+ }(jQuery, methods));
+-}(jQuery));
+\ No newline at end of file
++}(jQuery));
diff --git a/spec-tree/pwstrength/pwstrength-bootstrap.spec
b/spec-tree/pwstrength/pwstrength-bootstrap.spec
new file mode 100644
index 0000000..edffefe
--- /dev/null
+++ b/spec-tree/pwstrength/pwstrength-bootstrap.spec
@@ -0,0 +1,41 @@
+Name: 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/%{version}...
+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 jquery.pwstrength.bootstrap-%{version}
+%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
+%{_var}/www/html/javascript/*
+
+%changelog
+* Tue Jan 28 2014 Maximilian Meister <mmeister(a)suse.de> 1.0.2-1
+- initial packaging of pwstrength bootstrap plugin