Complexify

Web sitenize  üye olan kişilerin güvenli şifre belirlemeleri için kullanabileceğiniz bir tane uygulama. Çoğu kişi genelde unutmamak için aynı şifreler veya 123456 gibi basit şifreler kullanırlar ve bu tarz şifrelerin çalınması da oldukça kolaydır. Sadece tesadüf eseri birisinin denk gelip denemesine kalmıştır şifrenin çalınıp çalınmaması. Ya umursamamazlıktan yada çalınabileceğine ihtimal vermediklerinden dolayı çoğu kişi basit şifreler kullanır. Complexify uygulaması şifrelerin çalınabilme ihtimalini güvenlik seviyesi belirleyerek kullanıcılara gösterir. Bir yandan bilgilendirme amaçlı ve bir yandan da zorluk seviyesi ölçme amaçlı kullanılabilir diyebiliriz. Resimde de gördüğünüz gibi  Dan Palmer  tarafından hazırlanmış olan Complexify  uygulamasının nasıl çalıştığını konu resminde de görebiliyorsunuz zaten. İsterseniz demo butonuna tıklayarak canlı ön izlemesini de inceleyebilirsiniz.

Kullanım
  • Head  etiketleri  arasına eklenmesi  gereken bölümler.
Js dosya adresleri :
<script type="text/javascript" src="https://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="jquery.complexify.min.js"></script>

Javascript :

<script type="text/javascript">
  $(function () {
   $("#password").complexify({}, function (valid, complexity) {
     if (!valid) {
      $('#progress').css({'width':complexity + '%'}).removeClass('progressbarValid').addClass('progressbarInvalid');
     } else {
     $('#progress').css({'width':complexity + '%'}).removeClass('progressbarInvalid').addClass('progressbarValid');
     }
   $('#complexity').html(Math.round(complexity) + '%');
  });
 });
</script>

Css :

<style type="text/css">
					#demo {
						width:380px;
						margin-right:auto;
						margin-left:auto;
					}

					#progressbar {
						width:388px;
						height:48px;
						display:block;
						border-left:1px solid #ccc;
						border-right:1px solid #ccc;
						border-top:1px solid #ccc;
						border-top-right-radius: 8px;
						border-top-left-radius: 8px;
						overflow:hidden;
					}

					#progress {
						display:block;
						height:100px;
						width:0%;
					}

					.progressbarValid {
						background-color:green;
						background-image: -o-linear-gradient(-90deg, #8AD702 0%, #389100 100%);
					  background-image: -moz-linear-gradient(-90deg, #8AD702 0%, #389100 100%);
					  background-image: -webkit-linear-gradient(-90deg, #8AD702 0%, #389100 100%);
					  background-image: -ms-linear-gradient(-90deg, #8AD702 0%, #389100 100%);
					  background-image: linear-gradient(-90deg, #8AD702 0%, #389100 100%);
					}

					.progressbarInvalid {
						background-color:red;
						background-image: -o-linear-gradient(-90deg, #F94046 0%, #92080B 100%);
					  background-image: -moz-linear-gradient(-90deg, #F94046 0%, #92080B 100%);
					  background-image: -webkit-linear-gradient(-90deg, #F94046 0%, #92080B 100%);
					  background-image: -ms-linear-gradient(-90deg, #F94046 0%, #92080B 100%);
					  background-image: linear-gradient(-90deg, #F94046 0%, #92080B 100%);
					}

					#status {
						height:150px;
						width:388px;
						border:1px solid #ccc;
						border-bottom-right-radius: 8px;
						border-bottom-left-radius: 8px;
					}

					#password {
						width:100%;
						height:40px;
						font-size:30px;
						line-height:40px;
						border-radius: 8px;
					}

					#complexityLabel {
						width:100%;
						text-align:center;
						margin-top:10px;
						font-size:20px;
						line-height:30px;
					}

					#complexity {
						width:100%;
						text-align:center;
						font-family:"Helvetica Neue", "Helvetica", Arial, sans-serif;
						font-weight:bold;
						font-size:70px;
						line-height:80px;
						margin-top:10px;
					}

				</style>
  • Body etiketleri  arasına eklenmesi greken bölümler.

Html :

<div id="demo">
<input type="password" id="password" placeholder="Password">
<div id="progressbar"><div id="progress"></div></div>
<div id="status">
<div id="complexity">0%</div>
<div id="complexityLabel">Complexity</div>
</div>

Ali senin düşüncelerini merak ediyor. Bir yorum yaz