https://www.coaa.es/personal/javascript/pwdwidget.js

1/* 
2*
3* Password Widget 
4*
5* Comprobación de clave fuerte al introducir la contraseña
6*/
7
8function PasswordWidget(divid,pwdname,txt1,txt2,txt3,txt4){
9	this.maindivobj = document.getElementById(divid);
10	this.pwdobjname = pwdname;
11
12	this.MakePWD=_MakePWD;
13
14	this.showing_pwd=1;
15  this.txtVweak=txt1; // Muy baja
16	this.txtWeak=txt2; // Baja
17	this.txtMedium=txt3; // Media
18	this.txtGood=txt4; // Alta
19	this.txtShow = 'Show';
20	this.txtMask = 'Mask';
21	this.txtGenerate = 'Generate';
22	
23	this.enableShowMask=false;
24	this.enableGenerate=false;
25	this.enableShowStrength=true;
26	this.enableShowStrengthStr=true;
27}
28
29function _MakePWD()
30{
31	var code="";
32  var pwdname = this.pwdobjname;
33
34	this.pwdfieldid = pwdname;
35
36	code += "<input type='password' class='cajaf t90' name='"+pwdname+"' id='"+this.pwdfieldid+"' onblur='limpiarPass();' tabindex='220'>";
37
38	this.pwdtxtfield=pwdname+"_text";
39
40	this.pwdtxtfieldid = this.pwdtxtfield+"_id";
41
42	code += "<input type='text' class='pwdfield' name='"+this.pwdtxtfield+"' id='"+this.pwdtxtfieldid+"' style='display: none;'>";
43
44	this.pwdshowdiv = pwdname+"_showdiv";
45
46	this.pwdshow_anch = pwdname + "_show_anch";
47
48	code += "<span class='pwdopsdiv' id='"+this.pwdshowdiv+"'><a href='#' id='"+this.pwdshow_anch+"'>"+this.txtShow+"</a></span>";
49
50	this.pwdgendiv = pwdname+"_gendiv";
51
52	this.pwdgenerate_anch = pwdname + "_gen_anch";
53
54	code += "<span class='pwdopsdiv'id='"+this.pwdgendiv+"'><a href='#' id='"+this.pwdgenerate_anch+"'>"+this.txtGenerate+"</a></span>";
55
56	this.pwdstrengthdiv = pwdname + "_strength_div";
57
58	code += "<span class='blq t90' id='"+ this.pwdstrengthdiv+"'>";
59
60	this.pwdstrengthbar = pwdname + "_strength_bar";
61
62	code += "<span class='bl_der mart4 pwdbar' id='"+this.pwdstrengthbar+"'></span>";
63
64	this.pwdstrengthstr = pwdname + "_strength_str";
65
66	code += "<span class='v_pq bl_der padr8' id='"+this.pwdstrengthstr+"'></span>";
67
68	code += "</span>";
69
70	this.maindivobj.innerHTML = code;
71
72	this.pwdfieldobj = document.getElementById(this.pwdfieldid);
73	
74	this.pwdfieldobj.pwdwidget=this;
75
76	this.pwdstrengthbar_obj = document.getElementById(this.pwdstrengthbar);
77	
78	this.pwdstrengthstr_obj = document.getElementById(this.pwdstrengthstr);
79
80	this._showPasswordStrength = passwordStrength;
81
82	this.pwdfieldobj.onkeyup=function(){ this.pwdwidget._onKeyUpPwdFields(); }
83
84	this._showGeneatedPwd = showGeneatedPwd;
85
86	this.generate_anch_obj = document.getElementById(this.pwdgenerate_anch);
87	
88	this.generate_anch_obj.pwdwidget=this;
89
90	this.generate_anch_obj.onclick = function(){ this.pwdwidget._showGeneatedPwd(); }
91
92	this._showpwdchars = showpwdchars;
93
94	this.show_anch_obj = document.getElementById(this.pwdshow_anch);
95
96	this.show_anch_obj.pwdwidget = this;
97
98	this.show_anch_obj.onclick = function(){ this.pwdwidget._showpwdchars();}
99
100	this.pwdtxtfield_obj = document.getElementById(this.pwdtxtfieldid);
101
102	this.pwdtxtfield_obj.pwdwidget=this;
103
104	this.pwdtxtfield_obj.onkeyup=function(){ this.pwdwidget._onKeyUpPwdFields(); }
105	
106
107	this._updatePwdFieldValues = updatePwdFieldValues;
108
109	this._onKeyUpPwdFields=onKeyUpPwdFields;
110
111	if(!this.enableShowMask)
112	{ document.getElementById(this.pwdshowdiv).style.display='none';}
113
114	if(!this.enableGenerate)
115	{ document.getElementById(this.pwdgendiv).style.display='none';}
116
117	if(!this.enableShowStrength)
118	{ document.getElementById(this.pwdstrengthdiv).style.display='none';}
119
120	if(!this.enableShowStrengthStr)
121	{ document.getElementById(this.pwdstrengthstr).style.display='none';}
122}
123
124
125
126function onKeyUpPwdFields(){
127	this._updatePwdFieldValues(); 
128	this._showPasswordStrength();
129}
130
131function updatePwdFieldValues(){
132	if(1 == this.showing_pwd){
133		this.pwdtxtfield_obj.value = this.pwdfieldobj.value;	
134	}
135	else{
136		this.pwdfieldobj.value = this.pwdtxtfield_obj.value;
137	}
138}
139
140function showpwdchars(){
141	var innerText='';
142	var pwdfield = this.pwdfieldobj;
143	var pwdtxt = this.pwdtxtfield_obj;
144	var field;
145	if(1 == this.showing_pwd){
146		this.showing_pwd=0;
147		innerText = this.txtMask;
148
149		pwdtxt.value = pwdfield.value;
150		pwdfield.style.display='none';
151		pwdtxt.style.display='';
152		pwdtxt.focus();
153	}
154	else{
155		this.showing_pwd=1;
156		innerText = this.txtShow;	
157		pwdfield.value = pwdtxt.value;
158		pwdtxt.style.display='none';
159		pwdfield.style.display='';
160		pwdfield.focus();
161			
162	}
163	this.show_anch_obj.innerHTML = innerText;
164}
165
166function passwordStrength(){
167	var colors = new Array();
168	colors[0] = "#8A0808";
169	colors[1] = "#8A0808"; //muy baja
170	colors[2] = "#FF0000"; //baja
171	colors[3] = "#FF8000"; // media
172	colors[4] = "#40FF00"; //Alta
173
174	var pwdfield = this.pwdfieldobj;
175	var password = pwdfield.value;
176
177	var score=0;
178	
179	if (password.length > 3) {score++;}
180	
181	if ((password.match(/[a-z]/)) && (password.match(/[A-Z]/))) { score++;}
182	
183	if (password.match(/\d+/)){ score++;}
184		
185	if (password.length >= 8){score++;}
186		
187	var color=colors[score];
188	var strengthdiv = this.pwdstrengthbar_obj;
189	
190	strengthdiv.style.background=colors[score];
191	
192	if (password.length <= 0){ 
193		strengthdiv.style.width=0; 
194	}
195	else {
196		strengthdiv.style.width=(score+1)*10+'px';
197	}
198
199	var desc='';

200	if(password.length < 1){desc='';}
201	else if(score<2){ desc = this.txtVweak; }
202	else if(score<3){ desc = this.txtWeak; }
203	else if(score<4){ desc = this.txtMedium; }
204	else if(score>=4){ desc= this.txtGood; }
205
206	var strengthstrdiv = this.pwdstrengthstr_obj;
207	strengthstrdiv.innerHTML = desc;
208}
209
210function limpiarPass(){
211  if ($('#password1').val()==''){
212    $('#password2').val('');
213    $('#pass_ok').hide();
214		$('#passX').hide();
215  }
216}
217
218
219function comparaPass(password1,password2){
220	
221	if($('#'+password2).val()==''){
222		$('#pass_ok').hide();
223		$('#passX').hide();
224	}
225	else if($('#'+password1).val()==$('#'+password2).val()){
226		$('#passX').hide();
227		$('#pass_ok').show();
228  }
229  else if (($('#'+password1).val()!='') && ($('#'+password2).val()!='')){
230		$('#pass_ok').hide();
231		$('#passX').show();
232	}	
233}
234
235function getRand(max) {
236	return (Math.floor(Math.random() * max));
237}
238
239function shuffleString(mystr){
240	var arrPwd=mystr.split('');
241
242	for(i=0;i< mystr.length;i++)
243	{
244		var r1= i;
245		var r2=getRand(mystr.length);
246
247		var tmp = arrPwd[r1];
248		arrPwd[r1] = arrPwd[r2];
249		arrPwd[r2] = tmp;
250	}
251
252	return arrPwd.join("");
253}
254
255function showGeneatedPwd(){
256	var pwd = generatePWD();
257	this.pwdfieldobj.value= pwd;
258	this.pwdtxtfield_obj.value =pwd;
259
260	this._showPasswordStrength();
261}
262
263function generatePWD(){
264    var maxAlpha = 26;
265	var strSymbols="~!@#$%^&*(){}?><`=-|][";
266	var password='';
267	for(i=0;i<3;i++){
268		password += String.fromCharCode("a".charCodeAt(0) + getRand(maxAlpha));
269	}
270	for(i=0;i<3;i++){
271		password += String.fromCharCode("A".charCodeAt(0) + getRand(maxAlpha));
272	}
273	for(i=0;i<3;i++){
274		password += String.fromCharCode("0".charCodeAt(0) + getRand(10));
275	}
276	for(i=0;i<4;i++){
277		password += strSymbols.charAt(getRand(strSymbols.length));
278	}
279	
280	password = shuffleString(password);
281	password = shuffleString(password);
282	password = shuffleString(password);
283
284	return password;
285}