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,6 +7,8 @@
7		7
8	<% @profile_data = @person %>	8	<% @profile_data = @person %>
9		9
		10	+<%= javascript_include_tag('sign_up_password_rate') %>
		11	+
10	<%= error_messages_for :user, :person, :header_message => _('The account could not be created') %>	12	<%= error_messages_for :user, :person, :header_message => _('The account could not be created') %>
11		13
12	<% labelled_form_for :user, @user, :html => { :multipart => true, :id => 'signup-form', :honeypot => true } do \|f\| %>	14	<% labelled_form_for :user, @user, :html => { :multipart => true, :id => 'signup-form', :honeypot => true } do \|f\| %>
	@@ -52,7 +54,20 @@		@@ -52,7 +54,20 @@
52	<div id='signup-password'>	54	<div id='signup-password'>
53	<%= required f.password_field(:password, :id => 'user_pw') %>	55	<%= required f.password_field(:password, :id => 'user_pw') %>
54	<%= content_tag(:small,_('Choose a password that you can remember easily. It must have at least 4 characters.'), :id => 'password-balloon') %>	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	</div>	71	</div>
57		72
58	<div id='signup-password-confirmation'>	73	<div id='signup-password-confirmation'>
	@@ -182,4 +197,5 @@ jQuery(function($) {		@@ -182,4 +197,5 @@ jQuery(function($) {
182	else $(this).addClass('validated');	197	else $(this).addClass('validated');
183	});	198	});
184	});	199	});
		200	+
185	</script>	201	</script>
	@@ -0,0 +1,113 @@		@@ -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	\ No newline at end of file	114	\ No newline at end of file