Password rate implemented

-Added javascript for password-rate -Added span fields for password rate display The password is automatically considered short if length is fewer than four and considered bad if its the same as the username. It'll be considered good or strong depending on the score, which is calculated based on characters, numbers, and special characters presented in the password. (ActionItem3008) Signed-off-by: Alex Campelo <campelo.al1@gmail.com> Signed-off-by: Gustavo Jaruga <darksshades@gmail.com>

Password rate implemented
-Added javascript for password-rate -Added span fields for password rate display The password is automatically considered short if length is fewer than four and considered bad if its the same as the username. It'll be considered good or strong depending on the score, which is calculated based on characters, numbers, and special characters presented in the password. (ActionItem3008) Signed-off-by: Alex Campelo <campelo.al1@gmail.com> Signed-off-by: Gustavo Jaruga <darksshades@gmail.com>
Gust · Luciano Prestes
1 parent 8f30e7a2
Showing 3 changed files with 142 additions and 1 deletions Show diff stats
app/views/account/_signup_form.rhtml
public/javascripts/sign_up_password_rate.js
public/stylesheets/application.css
@@ -7,6 +7,8 @@
  
 <% @profile_data = @person %>
  
+<%= javascript_include_tag('sign_up_password_rate') %>
+
 <%= error_messages_for :user, :person, :header_message => _('The account could not be created') %>
  
 <% labelled_form_for :user, @user, :html => { :multipart => true, :id => 'signup-form', :honeypot => true } do |f| %>
@@ -52,7 +54,20 @@
   <div id='signup-password'>
     <%= required f.password_field(:password, :id => 'user_pw') %>
     <%= content_tag(:small,_('Choose a password that you can remember easily. It must have at least 4 characters.'), :id => 'password-balloon') %>
-    <div id='fake-check'><p>&nbsp;</p></div>
+    <div id='password-rate'>
+      <p><span class="invalid hidden" style="color:red" id='result-short'>
+        <%=_('Short') %>
+      </span></p>
+      <p><span class="invalid hidden" style="color:brown" id='result-bad'>
+        <%=_('Bad') %>
+      </span></p>
+      <p><span class="invalid hidden" style="color:green" id='result-good'>
+        <%=_('Good') %>
+      </span></p>
+      <p><span class="invalid hidden" style="color:limegreen" id='result-strong'>
+        <%=_('Strong') %>
+      </span></p>
+    </div>
   </div>
  
   <div id='signup-password-confirmation'>
@@ -182,4 +197,5 @@ jQuery(function($) {
     else $(this).addClass('validated');
   });
 });
+
 </script>
@@ -0,0 +1,113 @@
+// This jQuery plugin is written by firas kassem [2007.04.05] and was modified to fit noosfero
+// Firas Kassem  phiras.wordpress.com || phiras at gmail {dot} com
+// for more information : http://phiras.wordpress.com/2007/04/08/password-strength-meter-a-jquery-plugin/
+
+var shortPass   = 0
+var badPass     = 1
+var goodPass    = 2
+var strongPass  = 3
+
+
+function passwordStrength(password,username)
+{
+  score = 0
+
+  //password < 4
+  if (password.length < 4 ) { return shortPass }
+
+  //password == username
+  if (password.toLowerCase()==username.toLowerCase()) badPass
+
+  //password length
+  score += password.length * 4
+  score += ( checkRepetition(1,password).length - password.length ) * 1
+  score += ( checkRepetition(2,password).length - password.length ) * 1
+  score += ( checkRepetition(3,password).length - password.length ) * 1
+  score += ( checkRepetition(4,password).length - password.length ) * 1
+
+  //password has 3 numbers
+  if (password.match(/(.*[0-9].*[0-9].*[0-9])/))  score += 5
+
+  //password has 2 sybols
+  if (password.match(/(.*[!,@,#,$,%,^,&,*,?,_,~].*[!,@,#,$,%,^,&,*,?,_,~])/)) score += 5
+
+  //password has Upper and Lower chars
+  if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/))  score += 10
+
+  //password has number and chars
+  if (password.match(/([a-zA-Z])/) && password.match(/([0-9])/))  score += 15
+  //
+  //password has number and symbol
+  if (password.match(/([!,@,#,$,%,^,&,*,?,_,~])/) && password.match(/([0-9])/))  score += 15
+
+  //password has char and symbol
+  if (password.match(/([!,@,#,$,%,^,&,*,?,_,~])/) && password.match(/([a-zA-Z])/))  score += 15
+
+  //password is just a nubers or chars
+  if (password.match(/^\w+$/) || password.match(/^\d+$/) )  score -= 10
+
+  //verifing 0 < score < 100
+  if ( score < 0 )  score = 0
+  if ( score > 100 )  score = 100
+
+  if (score < 34 )  return badPass
+  if (score < 68 )  return goodPass
+  return strongPass
+}
+
+function checkRepetition(pLen,str)
+{
+  res = ""
+  for ( i=0; i<str.length ; i++ )
+  {
+      repeated=true
+      for (j=0;j < pLen && (j+i+pLen) < str.length;j++)
+          repeated=repeated && (str.charAt(j+i)==str.charAt(j+i+pLen))
+      if (j<pLen) repeated=false
+      if (repeated)
+      {
+          i+=pLen-1
+          repeated=false
+      }
+      else
+      {
+          res+=str.charAt(i)
+      }
+  }
+  return res
+}
+
+jQuery(document).ready(function() {
+    jQuery('#user_pw').keyup(function()
+    {
+      var result = passwordStrength(jQuery('#user_pw').val(),jQuery('#user_login').val())
+      if(result == shortPass)
+      {
+        showRateField('#result-short')
+      } else
+      if( result == badPass )
+      {
+        showRateField('#result-bad')
+      } else
+      if( result == goodPass )
+      {
+        showRateField('#result-good')
+      } else
+      if( result == strongPass )
+      {
+        showRateField('#result-strong')
+      }
+
+    })
+})
+
+function showRateField(validation)
+{
+  jQuery('#result-short').addClass('hidden')
+  jQuery('#result-bad').addClass('hidden')
+  jQuery('#result-good').addClass('hidden')
+  jQuery('#result-strong').addClass('hidden')
+
+  jQuery(validation).removeClass('hidden')
+
+}
 \ No newline at end of file
@@ -5989,6 +5989,7 @@ li.profile-activity-item.upload_image .activity-gallery-images-count-1 img {
  
 #email-check,
 #fake-check,
+#password-rate,
 #password-check {
   margin: -2px 16px -5px 13px;
   text-align: right;
@@ -5997,10 +5998,20 @@ li.profile-activity-item.upload_image .activity-gallery-images-count-1 img {
  
 #email-check p,
 #fake-check p,
+#password-rate p,
 #password-check p {
   margin: 0;
 }
  
+#password-rate {
+  font-weight:bold;
+}
+
+.hidden {
+  visibility: hidden;
+  display: none;
+}
+
 .available {
   color: #88BD00;
 }
@@ -6014,6 +6025,7 @@ li.profile-activity-item.upload_image .activity-gallery-images-count-1 img {
 }
  
 #email-check p,
+#password-rate p,
 #password-check p,
 #url-check p {
   margin: 0;
...	...	@@ -7,6 +7,8 @@
7	7
8	8	<% @profile_data = @person %>
9	9
	10	+<%= javascript_include_tag('sign_up_password_rate') %>
	11	+
10	12	<%= error_messages_for :user, :person, :header_message => _('The account could not be created') %>
11	13
12	14	<% labelled_form_for :user, @user, :html => { :multipart => true, :id => 'signup-form', :honeypot => true } do \|f\| %>
...	...	@@ -52,7 +54,20 @@
52	54	<div id='signup-password'>
53	55	<%= required f.password_field(:password, :id => 'user_pw') %>
54	56	<%= content_tag(:small,_('Choose a password that you can remember easily. It must have at least 4 characters.'), :id => 'password-balloon') %>
55		- <div id='fake-check'><p> </p></div>
	57	+ <div id='password-rate'>
	58	+ <p><span class="invalid hidden" style="color:red" id='result-short'>
	59	+ <%=_('Short') %>
	60	+ </span></p>
	61	+ <p><span class="invalid hidden" style="color:brown" id='result-bad'>
	62	+ <%=_('Bad') %>
	63	+ </span></p>
	64	+ <p><span class="invalid hidden" style="color:green" id='result-good'>
	65	+ <%=_('Good') %>
	66	+ </span></p>
	67	+ <p><span class="invalid hidden" style="color:limegreen" id='result-strong'>
	68	+ <%=_('Strong') %>
	69	+ </span></p>
	70	+ </div>
56	71	</div>
57	72
58	73	<div id='signup-password-confirmation'>
...	...	@@ -182,4 +197,5 @@ jQuery(function($) {
182	197	else $(this).addClass('validated');
183	198	});
184	199	});
	200	+
185	201	</script>
...	...
...	...	@@ -0,0 +1,113 @@
	1	+// This jQuery plugin is written by firas kassem [2007.04.05] and was modified to fit noosfero
	2	+// Firas Kassem phiras.wordpress.com \|\| phiras at gmail {dot} com
	3	+// for more information : http://phiras.wordpress.com/2007/04/08/password-strength-meter-a-jquery-plugin/
	4	+
	5	+var shortPass = 0
	6	+var badPass = 1
	7	+var goodPass = 2
	8	+var strongPass = 3
	9	+
	10	+
	11	+function passwordStrength(password,username)
	12	+{
	13	+ score = 0
	14	+
	15	+ //password < 4
	16	+ if (password.length < 4 ) { return shortPass }
	17	+
	18	+ //password == username
	19	+ if (password.toLowerCase()==username.toLowerCase()) badPass
	20	+
	21	+ //password length
	22	+ score += password.length * 4
	23	+ score += ( checkRepetition(1,password).length - password.length ) * 1
	24	+ score += ( checkRepetition(2,password).length - password.length ) * 1
	25	+ score += ( checkRepetition(3,password).length - password.length ) * 1
	26	+ score += ( checkRepetition(4,password).length - password.length ) * 1
	27	+
	28	+ //password has 3 numbers
	29	+ if (password.match(/(.[0-9].[0-9].*[0-9])/)) score += 5
	30	+
	31	+ //password has 2 sybols
	32	+ if (password.match(/(.[!,@,#,$,%,^,&,,?,_,~].[!,@,#,$,%,^,&,,?,_,~])/)) score += 5
	33	+
	34	+ //password has Upper and Lower chars
	35	+ if (password.match(/([a-z].[A-Z])\|([A-Z].[a-z])/)) score += 10
	36	+
	37	+ //password has number and chars
	38	+ if (password.match(/([a-zA-Z])/) && password.match(/([0-9])/)) score += 15
	39	+ //
	40	+ //password has number and symbol
	41	+ if (password.match(/([!,@,#,$,%,^,&,*,?,_,~])/) && password.match(/([0-9])/)) score += 15
	42	+
	43	+ //password has char and symbol
	44	+ if (password.match(/([!,@,#,$,%,^,&,*,?,_,~])/) && password.match(/([a-zA-Z])/)) score += 15
	45	+
	46	+ //password is just a nubers or chars
	47	+ if (password.match(/^\w+$/) \|\| password.match(/^\d+$/) ) score -= 10
	48	+
	49	+ //verifing 0 < score < 100
	50	+ if ( score < 0 ) score = 0
	51	+ if ( score > 100 ) score = 100
	52	+
	53	+ if (score < 34 ) return badPass
	54	+ if (score < 68 ) return goodPass
	55	+ return strongPass
	56	+}
	57	+
	58	+function checkRepetition(pLen,str)
	59	+{
	60	+ res = ""
	61	+ for ( i=0; i<str.length ; i++ )
	62	+ {
	63	+ repeated=true
	64	+ for (j=0;j < pLen && (j+i+pLen) < str.length;j++)
	65	+ repeated=repeated && (str.charAt(j+i)==str.charAt(j+i+pLen))
	66	+ if (j<pLen) repeated=false
	67	+ if (repeated)
	68	+ {
	69	+ i+=pLen-1
	70	+ repeated=false
	71	+ }
	72	+ else
	73	+ {
	74	+ res+=str.charAt(i)
	75	+ }
	76	+ }
	77	+ return res
	78	+}
	79	+
	80	+jQuery(document).ready(function() {
	81	+ jQuery('#user_pw').keyup(function()
	82	+ {
	83	+ var result = passwordStrength(jQuery('#user_pw').val(),jQuery('#user_login').val())
	84	+ if(result == shortPass)
	85	+ {
	86	+ showRateField('#result-short')
	87	+ } else
	88	+ if( result == badPass )
	89	+ {
	90	+ showRateField('#result-bad')
	91	+ } else
	92	+ if( result == goodPass )
	93	+ {
	94	+ showRateField('#result-good')
	95	+ } else
	96	+ if( result == strongPass )
	97	+ {
	98	+ showRateField('#result-strong')
	99	+ }
	100	+
	101	+ })
	102	+})
	103	+
	104	+function showRateField(validation)
	105	+{
	106	+ jQuery('#result-short').addClass('hidden')
	107	+ jQuery('#result-bad').addClass('hidden')
	108	+ jQuery('#result-good').addClass('hidden')
	109	+ jQuery('#result-strong').addClass('hidden')
	110	+
	111	+ jQuery(validation).removeClass('hidden')
	112	+
	113	+}
0	114	\ No newline at end of file
...	...
...	...	@@ -5989,6 +5989,7 @@ li.profile-activity-item.upload_image .activity-gallery-images-count-1 img {
5989	5989
5990	5990	#email-check,
5991	5991	#fake-check,
	5992	+#password-rate,
5992	5993	#password-check {
5993	5994	margin: -2px 16px -5px 13px;
5994	5995	text-align: right;
...	...	@@ -5997,10 +5998,20 @@ li.profile-activity-item.upload_image .activity-gallery-images-count-1 img {
5997	5998
5998	5999	#email-check p,
5999	6000	#fake-check p,
	6001	+#password-rate p,
6000	6002	#password-check p {
6001	6003	margin: 0;
6002	6004	}
6003	6005
	6006	+#password-rate {
	6007	+ font-weight:bold;
	6008	+}
	6009	+
	6010	+.hidden {
	6011	+ visibility: hidden;
	6012	+ display: none;
	6013	+}
	6014	+
6004	6015	.available {
6005	6016	color: #88BD00;
6006	6017	}
...	...	@@ -6014,6 +6025,7 @@ li.profile-activity-item.upload_image .activity-gallery-images-count-1 img {
6014	6025	}
6015	6026
6016	6027	#email-check p,
	6028	+#password-rate p,
6017	6029	#password-check p,
6018	6030	#url-check p {
6019	6031	margin: 0;
...	...