Bu makalede ‘Bir Angular projesinin üyelik formunda şifrenin yeteri kadar güçlü girildiğinden nasıl emin olabilirim?’ sorusunu cevaplayacağız.

Önce bir Angular projesi oluşturacağız, Bootstrap 4 ile stillendireceğimiz üyelik formu yapacağız ve şifre giriş alanının altına, girilen şifrenin güçlülük derecesine göre kırmızıdan-yeşile doğru hareket eden bir bar ekleyeceğiz.

Hemen projeyi oluşturmak istediğimiz dizine Command Prompt (Windows) veya Terminal (MacOS, Linux) içerisinden gidelim ve aşağıdaki komutu çalıştıralım;

Angular CLI, projeyi oluşturduktan sonra npm aracılığıya gerekli tüm dependency‘leri download edecek.

Projeyi oluşturduğumuz dizinde aşağıdaki komutu çalıştıralım, böylece Angular CLI projeyi http://localhost:4200 adresi üzerinden yayınlamaya başlayacak;

Projenin src dizininde yer alan index.html dosyasının head taglarının arasına aşağıdaki satırı ekleyelim ve projede Bootstrap 4 css framework‘ünü kullanmaya başlayalım;

Projenin src/app/app.component.html dosyasını açalım ve aşağıdaki kodlar ile değiştirelim;

Yukarıdaki kodlarda bootstrap‘in stillerini kullanarak bir üyelik formu oluşturduk. Şifre giriş alanının altında .strength-meter css class‘ına sahip olan div, şifrenin ne kadar güçlü olduğunu göstereceğimiz alan olacak.

Formun input elementlerine yazdığımız [(ngModel)] attribute'lerine dikkat! Bu attribute'lerin değeri, sayfanın Typescript kodlarında oluşturacağımız değişkenlerin isimleri ile aynı olmalı. Son olarak, button elementine yazdığımız (click) attribute'ü, button'a tıklandığında çalıştırılacak Typescript method'unun ismini içermeli!

Projenin src/app/app.component.css dosyasını açalım ve aşağıdaki kodlar ile değiştirelim;

Böylece ekranda ihtiyaç duyduğumuz tüm css‘leri de yazmış olduk.

Eğer sayfaya bu haline bakacak olursak, aşağıdaki gibi bir sonuç görmemiz lazım;

Şimdi gelelim src/app/app.component.ts dosyasına ve aşağıdaki kodları yazalım;

Öncelikle form elemanlarının değerlerini alabilmek için fullName, email ve password değişkenlerini string olarak tanımlıyoruz.

Ayrıca Kaydol butonuna tıklandığında yapılacak işleri yazacağımız signup() methodunu da tanımlıyoruz.

Şifre alanında keyup event‘i tetiklendikçe (yani şifre belirlenirken) çağırılan updateMeter() methodunda şifrenin karmaşıklık seviyesini hesaplayacağımız kodları yazıyoruz.

Şifrenin karmaşıklık seviyesini belirlemek için internetten yardım aldım, stackoverflow'daki çeşitli örnek kodları inceledim ve birkaç tanesini birleştirerek bu makaledeki kodu yazdım. Sizler kendiniz de bir kod geliştirebilir veya benim yaptığım gibi hazır yazılmışlardan faydalanabilirsiniz ;)

Eğer sayfayı yenileyecek ve sonuca bakacak olursak, aşağıdaki ekranı görmemiz lazım;

Bu makalenin kodlarına Github üzerinde polatengin hesabımda yer alan Password-Strength-Meter aracılığıyla erişebilirsiniz.