Password Strength Meter

This is an example of a password strenght meter.. It’s very simple and easy to use…

JavaScript Code:

function passwordStrength(password)
{        
var desc = new Array(); 
desc[0] = "Very Weak";
desc[1] = "Weak";
desc[2] = "Better";
desc[3] = "Medium";
desc[4] = "Strong";
desc[5] = "Strongest";
var score   = 0;

 //if password bigger than 6 give 1 point
 if (password.length > 6) score++;
 //if password has both lower and uppercase characters give 1 point
 if ( ( password.match(/[a-z]/) ) && ( password.match(/[A-Z]/) ) ) score++;
 //if password has at least one number give 1 point
 if (password.match(/\d+/)) score++;
 //if password has at least one special caracther give 1 point
 if ( password.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/) ) score++;
 //if password bigger than 12 give another 1 point
 if (password.length > 12) score++;
 document.getElementById("passwordDescription").innerHTML = desc[score];
 document.getElementById("passwordStrength").className = "strength" + score;
}

CSS Code:

#passwordStrength
{
        height:10px;
        display:block;
        float:left;
}

.strength0
{
        width:250px;
        background:#cccccc;
}

.strength1
{
        width:50px;
        background:#ff0000;
}

.strength2
{
        width:100px;    
        background:#ff5f5f;
}

.strength3
{
        width:150px;
        background:#56e500;
}

.strength4
{
        background:#4dcd00;
        width:200px;
}

.strength5
{
        background:#399800;
        width:250px;
}

HTML Use:

<label for="pass">Password</label>
<input type="password" name="pass" id="pass" onkeyup="passwordStrength(this.value)" />
<p>
      <label for="passwordStrength">Password strength</label>
      <div id="passwordDescription">Password not entered</div>
      <div id="passwordStrength" class="strength0"></div>
</p>

In some cases, the onkeyup won’t work.. I use: onkeypress…
Later…

Original Source:

How to make a password strength meter for your register form

Rich Editor

Here’s a quick tutorial on how to use the new Editor in RichFaces…

First of all, download the newest version of RichFaces.. here

Add the jars to your project…

jars: richfaces-api-3.3.2.SR1, richfaces-impl-3.3.2.SR1, richfaces-ui-3.3.2.SR1.. there are some extra jars you might need… they’re all listed in the download area of rich faces…

Now… let’s configure our web.xml..

Add the next lines:

<context-param>
<param-name>org.richfaces.SKIN</param-name>
<param-value>glassX</param-value>
</context-param>
<!-- Defining and mapping the RichFaces filter -->
<filter>
<display-name>RichFaces Filter</display-name>
<filter-name>richfaces</filter-name>
<filter-class>org.ajax4jsf.Filter</filter-class>
</filter>
<filter-mapping>
<filter-name>richfaces</filter-name>
<servlet-name>Faces Servlet</servlet-name>
<dispatcher>REQUEST</dispatcher>
<dispatcher>FORWARD</dispatcher>
<dispatcher>INCLUDE</dispatcher>
</filter-mapping>

If you’re using facelets.. you should also add these lines to your faces-config.xml

<application>
<view-handler>com.sun.facelets.FaceletViewHandler</view-handler>
</application>

These lines tells to the JSF engine that we’ll use the Facelets View Handler to render our pages..
Now.. in our page.. let’s add the tags we need to use RichFaces Editor.. on the top our page:

xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"

Now, let’s add our control..

<rich:editor width="800" height="400" value="#{Bean.content}" theme="advanced" plugins="safari,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template" viewMode="visual" >
<f:param name="theme_advanced_buttons1" value="save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect" />
<f:param name="theme_advanced_buttons2" value="cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code" />
<f:param name="theme_advanced_buttons3" value="insertdate,inserttime,preview,|,forecolor,backcolor,tablecontrols,|,hr,removeformat,visualaid,|"/>
<f:param name="theme_advanced_buttons4" value="sub,sup,|,charmap,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen,|, insertlayer,moveforward,movebackwaard,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage" />
<f:param name="theme_advanced_statusbar_location" value="none"/>
<f:param name="theme_advanced_toolbar_align" value="left"/>
<f:param name="theme_advanced_toolbar_location" value="top"/>
<f:param name="verify_html" value="true"/>
</rich:editor>

This will give us an output like this one:

rich-faces-editor

I will explain later how to use templates with this editor…
Hope this will be usefull…
Later…