Membuat Password Meter

Dalam tutorial kita ini akan membahas tentang cara membuat indikator kekuatan password yang indah. Ini akan menentukan kompleksitas password dan bergerak sesuai dengan kekuatan password tersebut dengan bantuan plugin Complexify jQuery. Hanya ketika password cukup kompleks dimasukan, pengguna dapat melanjutkan dengan registrasinya.

HTML

Kita mulai dengan dokumen HTML5 standar yang akan mencakup sebuah form registrasi. Form yang hanya akan berfungsi sebagai contoh dari password meter – jika anda memerlukan dukungan untuk pendaftaran sebenarnya, Anda akan perlu untuk menuliskan kode server-side yang dibutuhkan.

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>How to Make a Beautiful Password Strength Indicator</title>
        <!-- The stylesheet -->
        <link rel="stylesheet" href="assets/css/styles.css" />
        <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>
    <body>
        <div id="main">
        	<h1>Sign up, it's FREE!</h1>
        	<form class="" method="post" action="">
        		<div class="row email">
      			       <input type="text" id="email" name="email" placeholder="Email" />
        		</div>
        		<div class="row pass">
        			<input type="password" id="password1" name="password1" placeholder="Password" />
        		</div>
        		<div class="row pass">
        			<input type="password" id="password2" name="password2" placeholder="Password (repeat)" disabled="true" />
        		</div>
        		<!-- The rotating arrow -->
        		<div class="arrowCap"></div>
        		<div class="arrow"></div>
        		<p class="meterText">Password Meter</p>
        		<input type="submit" value="Register" />
        	</form>
        </div>
    <!-- JavaScript includes - jQuery, the complexify plugin and our own script.js -->
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script src="assets/js/jquery.complexify.js"></script>
    <script src="assets/js/script.js"></script>

    </body>
</html>

Kita masukan versi terbaru dari jQUery, plugin Complexify dan script.js sebelum tag penutup body </body> untuk kinerja yang lebih baik.

password-strength-css3

jQuery

Kode jquery dibawah ini cukup mudah. Kami menghubungkan sejumlah event untuk elemen form dan memvalidasinya. Jika kesalahan ditemui, kami menambahkan “error” ke class div .row yang berisi input. Yang akan menampilkan tanda silang merah. Dan juga “success” di class lain dan akan menampilkan tanda centang hijau. Ketika formulir dikirimkan, akan memeriksa apakah semua baris ditandai sebagai sukses untuk memungkinkan pengirimannya.

assets/js/script.js

$(function(){
  // Form items
    var pass1 = $('#password1'),
    pass2 = $('#password2'),
    email = $('#email'),
    form = $('#main form'),
    arrow = $('#main .arrow');
  // Empty the fields on load
  $('#main .row input').val('');
  // Handle form submissions
    form.on('submit',function(e){
    // Is everything entered correctly?
    if($('#main .row.success').length == $('#main .row').length){
      // Yes!
      alert("Thank you for trying out this demo!");
      e.preventDefault(); // Remove this to allow actual submission
    }else{
      // No. Prevent form submission
      e.preventDefault();
    }
  });
  // Validate the email field
  email.on('blur',function(){
    // Very simple email validation
    if (!/^\S+@\S+\.\S+$/.test(email.val())){
      email.parent().addClass('error').removeClass('success');
    }else{
      email.parent().removeClass('error').addClass('success');
    }
  });
  /* The Complexify code will go here */
  // Validate the second password field
  pass2.on('keydown input',function(){
    // Make sure it equals the first
    if(pass2.val() == pass1.val()){
      pass2.parent()
          .removeClass('error')
          .addClass('success');
    }else{
      pass2.parent()
          .removeClass('success')
          .addClass('error');
    }
  });
});

Dengan keluar dari jalur, kita bisa melanjutkan dengan plugin Complexify yang akan memvalidasi password. Plugin mengambil fungsi callback dengan dua argumen – nilai presentase dari 0 sampai 100 tergantung pada kerumitan password, dan bendera valid yang memperhitungkan kebutuhan panjang minimum, yang didefinisikan oleh properti minimumChars.

Dengan mengutak-atik properti strengthScaleFactor Anda dapat mengizinkan password sederhana untuk digunakan. Skala default adalah 1 yang membutuhkan campuran huruf besar dan huruf kecil, angka dan karakter khusus, tapi jika merasa ketat bisa diturunkan ke 0,7. Anda dapat menurunkannya lagi jika membutuhkan password yang lebih sederhana.

pass1.complexify({minimumChars:6, strengthScaleFactor:0.7}, function(valid, complexity){
  if(valid){
    pass2.removeAttr('disabled');
    pass1.parent()
        .removeClass('error')
        .addClass('success');
  }else{
    pass2.attr('disabled','true');
    pass1.parent()
        .removeClass('success')
        .addClass('error');
  }
  var calculated = (complexity/100)*268 - 134;
  var prop = 'rotate('+(calculated)+'deg)';

  // Rotate the arrow. Additional rules for different browser engines.
  arrow.css({
    '-moz-transform':prop,
    '-webkit-transform':prop,
    '-o-transform':prop,
    '-ms-transform':prop,
    'transform':prop
  });
});

Jika nilai yang valid telah dilalui, kita akan mengaktifkan kolom password kedua (dinonaktifkan secara default). Kita juga akan menggunakan CSS3 transformasi untuk memutar panah.transformasi akan bersifat animasi berkat adanya properti yang transisi yang dapat Anda lihat dibagian CSS. Panah bergerak dari -134 ke 134 derajat (default 0 derajat sesuai dengan tanda panah menunjuk vertikal ke atas), sehingga kode mengkompensasi untuk itu.

CSS

Kita hanya menyertakan bagian yang menarik dari stylesheet ini. Kode yang mengikuti gaya panah dan mendefinisikan transisi.

assets/css/styles.css

#main form .arrow{
    background: url("../img/arrow.png") no-repeat -10px 0;
    height: 120px;
    left: 214px;
    position: absolute;
    top: 392px;
    width: 11px;

   /* Defining a smooth CSS3 animation for turning the arrow */

    -moz-transition:0.3s;
    -webkit-transition:0.3s;
    -o-transition:0.3s;
    -ms-transition:0.3s;
    transition:0.3s;

    /* Putting the arrow in its initial position */

  -moz-transform: rotate(-134deg);
  -webkit-transform: rotate(-134deg);
  -o-transform: rotate(-134deg);
  -ms-transform: rotate(-134deg);
  transform: rotate(-134deg);
}

/* The small piece that goes over the arrow */
#main form .arrowCap{
  background: url("../img/arrow.png") no-repeat -43px 0;
  height: 20px;
  left: 208px;
  position: absolute;
  top: 443px;
  width: 20px;
  z-index: 10;
}

Anda dapat menemukan seluruh kode assets/css/style.css cara terbaik untuk belajar bagaimana semuanya bekerja dengan memeriksa demi bekerja dengan Firebug atau Chrome Developer tools dan bermain dengan style.

Demo

Anda dapat membangun contoh ini dan menggunakannya untuk menyajikan pilihan validasi. Sekian artikel ini semoga bermanfaat

Comments

comments