Cara Membuat Password Strength Dengan Java Script

Unknown   January 23, 2018   Java Script   Comment  

Pada tutorial kali ini kita akan belajar membuat Password Strength dengan Java Script, Password Strength merupakan cara dimana kita bisa mengukur sejauh mana strength/kekuatan password yang dimasukkan oleh user ketika mendaftar atau membuat password. Jadi kalau kalian pernah mendaftar menjadi member pada website, ketika akan membuat password, akan muncul sebuah status kemanan password yang kita buat, kita akan belajar mirip seperti itu pada tutorial kali ini, mau tau cara buatnya ?, Silahkan simak tutorial berikut cara membuat Password Strength dengan Java Script.

Membuat File Dan Folder

Sebelum menulis syntaxnya, buatlah folder bernama password-strength pada htdocs (XAMPP)  atau pada folder html (LAMP). Setelah itu pada folder password-strength buatlah file bernama index.html.

Menulis Synatx

Buka file index.html, kemudian tulis syntax HTML seperti dibawah ini.

<div class="container">
 <h1>Password Strength</h1>
 <p>Mengecek Kekuatan Password</p>
 <span style="float:right;" id="status"></span>
 <input type="password" id="pass" placeholder="Buat Kata Sandi Baru" onkeyup="passwordStrength(this.value)">
 <a href="#" onclick="passToggle()" id="show">Lihat Password</a><br>
 <button type="button">Mendaftar</button>
</div>

Setelah menulis syntax HTML diatas, tambahkan syntax CSS seperti dibawah ini.

.container{width: 40%;margin: auto;}
input{
 width: 100%;
 padding: 10px;
 margin-bottom: 5px;
 box-sizing: border-box;
}
button{
 padding: 15px;
 color: #fff;
 margin-top: 10px;
 border: none;
 background-color: #FF5252;
 cursor: pointer;
}
#status{ font-weight: bold;}

Setelah itu buka web browser kalian, kemudian ketikan

localhost/password-strength

Tampilannya dapat dilihat pada gambar dibawah ini.

Setelah kita membuat tampilannya yang cukup sederhana, selanjutnya tambahkan syntax Java Script seperti dibawah ini.

// fungsi untuk mengecek kekuatan password
function passwordStrength(p){
 var status = document.getElementById('status');

 var regex = new Array();
 regex.push("[A-Z]");
 regex.push("[a-z]");
 regex.push("[0-9]");
 regex.push("[!@#$%^&*]");

 var passed = 0;
  for(var x = 0; x < regex.length;x++){
  if(new RegExp(regex[x]).test(p)){
   console.log(passed++);
  }
 }

 var strength = null;
 var color = null;

 switch(passed){
  case 0:
  case 1:
  case 2:
   strength = "Tidak Aman";
   color = "#FF3232";
  break;
  case 3:
   strength = "Cukup Aman";
   color = "#E1D441";
  break;
  case 4:
   strength = "Sangat Aman";
   color = "#27D644";
 }

 status.innerHTML = strength;
 status.style.color = color;
}
// fungsi untuk menampilkan dan menyembunyikan password
function passToggle(){
 var pass = document.getElementById('pass');
 var showbtn = document.getElementById('show');
 // kalau type inputnya password
 if(pass.type == 'password'){
  pass.type = 'text';
  showbtn.innerHTML = 'Sembunyikan';
 }else{
  pass.type = 'password';
  showbtn.innerHTML = 'Lihat Password'; 
 }
}

Jadi, cara kerjanya begini....

Misalkan kita hanya memasukkan symbol seperti !@#$ pada input passwordnya, maka status yang akan ditampilkan adalah Tidak Aman, contohnya dapat dilihat pada gambar dibawah ini.

Selanjutnya, ketika kita memasukkan angka dan huruf misalnya 4321siapa, maka status yang ditampilkan adalah Cukup Aman, dapat dilihat pada gambar dibawah ini.

Selanjutnya, ketika kita memasukkan huruf besar pada akhir kata “siapa” misalnya kita memasukan huruf besar YA, maka status yang ditampilkan adalah Sangat Aman, dapat dilihat pada gambar dibawah ini.

Atau kita dapat membuat password seperti !k4mu$1apA, maka status yang akan ditampilkan juga Sangat Aman dapat dilihat pada gambar dibawah ini.

Jadi, password akan menjadi Sangat Aman, jika kita memasukkan salah satu karakter regex seperti huruf besar, huruf kecil, angka dan symbol yang mewakili dari 4 karakter regex yang telah dideklarasikan sebelumnya, akan menjadi Cukup Aman bila memasukkan 3 karakter seperti huruf besar, huruf kecil dan angka yang mewakili, akan menjadi Tidak Aman bila memasukkan 1 atau 2 karakter regex seperti huruf besar dan huruf kecil yang mewakili.

Bagaimana, paham atau tidak ?

Selain itu juga kita juga dapat menampilkan dan menyembunyikan passwordnya, jadi ketika kita mengklik Lihat Password, maka akan menampilkan password yang telah dimasukkan, sebaliknya jika mengklik Sembunyikan, maka akan menyembunyikan password yang telah dimasukkan.

Demikian tutorial membuat password strength, jika ada kesalahan, kekurangan atau hal hal lainnya silahkan tulis komentar anda pada kolom komentar dibawah ya, Terima Kasih.

Semoga Bermanfaat.