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="http://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>

Bu Yazıyı Paylaş

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

ÜYE GİRİŞİ

Arkadaş ekleme, özel mesaj, kişisel yazı paylaşmak için siteye giriş yapın

Şifremi unuttum? Kayıt Ol!
  • Ali:

    Pardon Yuyyu olacaktı...

  • Ali:

    Tamam yuyu da olsun :)...

  • Arkadaşlık Uygulaması:

    Yuyyu Online Arkadaşlık Sitesi – Sohbet Et ve Yeni İnsanlarla Tanış Yuy...

  • Ali:

    Üşenmeden web arşivi linkini arayıp bulmuşsun teşekkürler :)...

  • ibrahim:

    türkiyeden de bırakan olmuş oyunu. dünya geneli de bırakan epey olmuş. wi...

  • Araç çubuğuna atla