Skip to content

P
PERFORMA_REPLICA
Commit d5e7a1ea by Nilu
Options

adding password tips popup to company user verification page

parent 8d7498af
Showing with 342 additions and 12 deletions
cmsWebApp/webroot/css/common.css
......@@ -5600,3 +5600,165 @@ input{
padding: 0px 35px 0px 35px;
margin-top: 10px
}
/*password popup*/
.strength_wrapper {
position: relative;
text-align: left;
}
.strength_meter {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
z-index: -1;
overflow: hidden;
}
.button_strength {
text-decoration: none;
color: #4d4d4d;
font-size: 13px;
display: block;
}
.strength_meter div {
width: 0%;
height: 34px;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.strength_meter div p {
position: absolute;
right: 10px;
color: #4d4d4d;
font-size: 13px;
padding-right: 30px;
}
.veryweak {
background-color: #FF7979;
width: 25% !important;
}
.weak {
background-color: #FDA068;
width: 50% !important;
}
.medium {
background-color: #FFE560;
width: 75% !important;
}
.strong {
background-color: #9BF47D;
width: 100% !important;
}
.info_box {
position: relative;
background: #fff;
border: 1px solid #ccc;
padding: 15px;
}
.info_box:after, .info_box:before{
right:100%;
top:50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.info_box:after{
border-color: rgba(255,255,255,0);
border-right-color: #fff;
border-width: 15px;
margin-top: -15px;
}
.info_box:before{
border-color: rgba(204,204,204,0);
border-right-color: #ccc;
border-width: 16px;
margin-top: -16px;
}
/* Styles for verification */
.pswd_info {
position:absolute;
width: 230px;
padding:0;
/* background:#fefefe; */
font-size:20px;
/* border-radius:15px;
box-shadow:0 1px 3px #ccc;
border:1px solid #ddd;*/
display:none;
z-index: 1000;
top: -20px;
right: -255px;
/* background-color: rgb(238,238,238);*/
/*box-shadow: 5px 5px 5px #888888;*/
}
/*
.pswd_info:before,
.pswd_info:after {
position: absolute;
bottom: 100%;
content: '';
}
.pswd_info:before {
right: 52px;
border-right: 17px solid transparent;
border-bottom: 17px solid #ddd;
border-left: 17px solid transparent;
}
.pswd_info:after {
right: 53px;
border-right: 16px solid transparent;
border-bottom: 16px solid rgb(238,238,238);
border-left: 16px solid transparent;
}*/
.pswd_info h4 {
margin:0 0 10px 0;
padding:0;
font-weight:normal;
font-size: 1em;
font-size: 0.7em;
}
.pswd_info ul {
padding: 0;
margin: 0;
list-style-type: none;
}
.pswd_info ul li {
visibility: visible !important;
height: 20px !important;
min-height: 20px !important;
line-height:24px;
font-size: 0.7em;
padding-left: 24px !important;
}
.pswd_info .invalid {
background:url(../images/invalid.png) no-repeat 0 50%;
color:#ec3f41;
}
.pswd_info .valid {
background:url(../images/valid.png) no-repeat 0 50%;
color:#3a7d34;
}
cmsWebApp/webroot/extensions/adminportal/verify_company.jsp
......@@ -56,6 +56,20 @@
process.setAttribute("Company", companyUser.getCompany());
%>
<oneit:script>
<oneit:script src="/scripts/password_strength_lightweight.js"/>
</oneit:script>
<style>
button[disabled] {
opacity: 0.6;
background-color: #0582ba;
}
</style>
<oneit:form name="verify" method="post">
<%
String key = Utils.getPwdKeyOfSecUser(request, secUser, true);
%>
<script type="text/javascript">
$(document.body).addClass('bg-color');
......@@ -63,6 +77,11 @@
validate();
$('input').on('change keyup', function() { validate() });
interval = setInterval(function() { validate(); }, 500);
$('#myPassword').strength_meter({
"inputName" : "<%= key %>"
});
});
function validate() {
......@@ -84,15 +103,6 @@
}
}
</script>
<style>
button[disabled] {
opacity: 0.6;
background-color: #0582ba;
}
</style>
<oneit:form name="verify" method="post">
<oneit:dynInclude page="/extensions/applicantportal/inc/multifieldtext.jsp" data="<%= CollectionUtils.EMPTY_MAP%>"/>
<div class="main-box-layout login-box">
......@@ -101,11 +111,9 @@
<%
if(!socialLogin)
{
String key = Utils.getPwdKeyOfSecUser(request, secUser, true);
%>
<div class="form-group text-left">
<div class="form-group text-left" id="myPassword">
<label>Password</label>
<oneit:input type="password" name="<%= key %>" class="form-control second-style reset-pw"/>
</div>
<div class="form-group text-left">
<label>Confirm password</label>
......
cmsWebApp/webroot/scripts/password_strength_lightweight.js 0 → 100644
/*
This is a simple implementation of the password_strength.js plugin, that does not use jQuery Widget Factory.
If you a going to extend plugin with addition functionality it will be better to use password_strength.js
because jQuery Widget Factory allows to build complex, stateful plugins based on object-oriented principles.
Dependencies:
1. jQuery
*/
;(function ( $, window, document, undefined ) {
var upperCase = new RegExp('[A-Z]');
var lowerCase = new RegExp('[a-z]');
var numbers = new RegExp('[0-9]');
var pluginName = 'strength_meter',
defaults = {
strengthWrapperClass: 'strength_wrapper',
inputClass: 'form-control',
strengthMeterClass: 'strength_meter',
toggleButtonClass: 'button_strength',
inputName : 'password'
// showPasswordText: 'Show Password',
// hidePasswordText: 'Hide Password'
};
function Plugin( element, options ) {
this.element = $(element);
this.options = $.extend( {}, defaults, options) ;
this._create();
}
Plugin.prototype._create = function () {
var
options = this.options;
//Note. Instead of this you can use templating. I did not want to have addition dependencies.
this.element.addClass(options.strengthWrapperClass);
this.element.append('<input type="password" name="'+ options.inputName +'" class="' + options.inputClass + '" "/>');
this.element.append('<input type="text" class="' + options.inputClass + '" style="display:none"/>');
// this.element.append('<a href="" class="' + options.toggleButtonClass + '">' + options.showPasswordText + '</a>');
this.element.append('<div class="' + options.strengthMeterClass + '"><div><p></p></div></div>');
this.element.append(
'<div class="pswd_info" style="display: none;"> \
<div class="info_box"><h4>Password must include:</h4> \
<ul> \
<li data-criterion="length" class="valid">8-20 <strong>Characters</strong></li> \
<li data-criterion="number" class="valid">At least <strong>one number</strong></li> \
<li data-criterion="letter" class="valid">No spaces</li> \
</ul> \
</div></div>');
//this object contain all main inner elements which will be used in strength meter.
this.content = {};
this.content.$textInput = this.element.find('input[type="text"]');
this.content.$passwordInput = this.element.find('input[type="password"]');
this.content.$toggleButton = this.element.find('a');
this.content.$pswdInfo = this.element.find('.pswd_info');
this.content.$strengthMeter = this.element.find("." + options.strengthMeterClass);
this.content.$dataMeter = this.content.$strengthMeter.find("div");
this._sync_inputs(this.content.$passwordInput, this.content.$textInput);
this._sync_inputs(this.content.$textInput, this.content.$passwordInput);
this._bind_input_events(this.content.$passwordInput);
this._bind_input_events(this.content.$textInput);
var that = this;
this.content.$toggleButton.bind("click", function(e){
e.preventDefault();
that._toggle_input(that.content.$textInput);
that._toggle_input(that.content.$passwordInput);
// var text = that.content.$passwordInput.is(":visible") ? that.options.showPasswordText: that.options.hidePasswordText;
// $(event.target).text(text);
});
},
//Toggle active inputs.
Plugin.prototype._toggle_input = function($element){
$element.toggle();
if($element.is(":visible")){
$element.focus();
}
},
//Copy value from active input inside hidden.
Plugin.prototype._sync_inputs = function($s, $t){
$s.bind('keyup', function () {
var password = $s.val();
$t.val(password);
});
},
Plugin.prototype._bind_input_events = function($s) {
var that = this;
$s.bind('keyup', function () {
var password = $s.val();
var characters = (password.length >= 8);
var loweletters = password.match(lowerCase) ? 1 : 0;
var number = password.match(numbers) ? 1 : 0;
var containWhiteSpace = password.indexOf(' ') >= 0 ? 1 : 0;
var total = characters + loweletters + number;
that._update_indicator(total);
that._update_info('length', password.length >= 8 && password.length <= 20);
that._update_info('number', number);
that._update_info('letter', !containWhiteSpace);
}).focus(function () {
that.content.$pswdInfo.show();
}).blur(function () {
that.content.$pswdInfo.hide();
});
},
Plugin.prototype._update_indicator = function(total) {
var meter = this.content.$dataMeter;
meter.removeClass();
if (total === 0) {
meter.html('');
} else if (total === 1) {
meter.addClass('veryweak').html('<p>very weak</p>');
} else if (total === 2) {
meter.addClass('weak').html('<p>weak</p>');
} else if (total === 3) {
meter.addClass('medium').html('<p>medium</p>');
} else {
meter.addClass('strong').html('<p>strong</p>');
}
},
Plugin.prototype._update_info = function(criterion, isValid) {
var $passwordCriteria = this.element.find('li[data-criterion="' + criterion + '"]');
if (isValid) {
$passwordCriteria.removeClass('invalid').addClass('valid');
} else {
$passwordCriteria.removeClass('valid').addClass('invalid');
}
},
// A really lightweight plugin wrapper around the constructor,
// preventing against multiple instantiations
$.fn[pluginName] = function ( options ) {
return this.each(function () {
if (!$.data(this, 'plugin_' + pluginName)) {
$.data(this, 'plugin_' + pluginName,
new Plugin( this, options ));
}
});
}
})( jQuery, window, document );
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment