Password elementi, kullanıcıların uygulama içerisinde güvenli bir şekilde şifre girişi yapmasını sağlayan özel bir giriş elementidir. Kullanıcı tarafından girilen karakterler, güvenlik amacıyla varsayılan olarak gizlenir (• / *) ve yetkisiz kişilerin şifreyi görmesi engellenir.
Password elementi, kullanıcı deneyimini iyileştirmek amacıyla şifreyi göster/gizle (Show / Hide) özelliğini destekler. Bu sayede kullanıcılar, isterlerse girdikleri şifreyi geçici olarak normal metin halinde görüntüleyebilir.
Ayrıca Password elementi, Configuration Manager modülü içerisinde tanımlanan Password Policy ayarları ile entegre çalışır. Bu entegrasyon sayesinde minimum uzunluk, büyük–küçük harf, rakam ve özel karakter gibi kurallar uygulanarak güçlü şifreler oluşturulması desteklenir.
Password elementi hem web hem de mobil uygulamalarda desteklenmektedir.
1.1. Sık Kullanım Senaryoları
Kullanıcı kayıt (Sign Up) ekranları
Giriş (Login) formları
Şifre değiştirme ve sıfırlama adımları
Hesap ve güvenlik ayarları
Yetkilendirme ve kimlik doğrulama süreçleri
2. Temel Özellikler
Gizli karakter gösterimi: Girilen şifre karakterleri varsayılan olarak yıldız (*) ile gizlenir.
Şifreyi göster / gizle desteği: Kullanıcılar, gösterme ikonu aracılığıyla girdikleri şifreyi geçici olarak görüntüleyebilir.
Password Policy entegrasyonu: Configuration Manager’da tanımlanan şifre kuralları (uzunluk, karakter türleri vb.) otomatik olarak uygulanır.
Güçlü şifre oluşturmayı destekleyen yapı: Zayıf şifre girişleri engellenerek güvenlik seviyesi artırılır.
Form doğrulama ile uyum: Şifre alanları, form submit ve validation süreçleriyle birlikte sorunsuz çalışır.
Dinamik değer bağlama desteği: Değerler state, değişken veya aksiyon çıktılarıyla yönetilebilir.
2.1. Password Elementi Özellikleri
Properties panelinden aşağıdaki ayarları yapılandırabilirsiniz:
Value: Kullanıcı tarafından girilen şifreyi temsil eder. Şifre girildikçe bu değer elementte saklanır ve uygulama içinde kullanılabilir.
Placeholder: Kullanıcı herhangi bir veri girmediğinde görünen yer tutucu metindir (örn. “Şifrenizi girin”).
2.2. Elemente Eklenebilen Aksiyonlar
Password elementi, kullanıcı etkileşimlerine bağlı olarak aşağıdaki tetikleyicileri (event) destekler. Bu tetikleyiciler, şifre girişine göre aksiyonların kontrollü şekilde çalıştırılmasını sağlar.
onBlur: Kullanıcı şifre alanından odak kaybettiğinde (başka bir alana geçtiğinde) tetiklenir.
Kullanım senaryoları:
Şifre politikalarına uygunluk kontrolü yapmak
Zayıf şifre girişlerinde uyarı mesajı göstermek
Kullanıcı yazmayı tamamladıktan sonra doğrulama çalıştırmak
onPressEnter: Kullanıcı şifre alanında Enter tuşuna bastığında tetiklenir.
Kullanım senaryoları:
Login veya Sign Up işlemini başlatmak
Kullanıcıyı bir sonraki adıma yönlendirmek
3. Password Elementi Nasıl Kullanılır?
Bu bölümde Password elementinin uçtan uca kullanımını örnek senaryolar üzerinden ele alacağız.
Senaryo: Kullanıcı Giriş Ekranı
Bir uygulamada kullanıcılar sisteme erişebilmek için giriş ekranı üzerinden kimlik bilgilerini doğrular. Bu senaryoda Passwordelementi, kullanıcının şifresini güvenli şekilde girmesini sağlayarak giriş işleminin temel adımını oluşturur.
Senaryoda:
Kullanıcı, Kullanıcı adı / e-posta alanına hesabına ait bilgisini girer.
Şifre alanı Password elementi ile oluşturulduğu için girilen karakterler otomatik olarak gizlenir ve şifre bilgisi ekranda açık şekilde görünmez.
Kullanıcı isterse şifre alanının sağındaki göster/gizle (göz) ikonu ile şifreyi kısa süreli görüntüleyerek giriş hatalarını azaltabilir.
Kullanıcı Giriş Yap butonuna tıkladığında, girilen bilgiler doğrulanır ve şifre doğruysa kullanıcı uygulamaya yönlendirilir.
Şifre hatalıysa kullanıcıya uyarı mesajı gösterilir ve güvenlik gereği giriş işlemi tamamlanmaz.
Adım 1 - Elementlerin Eklenmesi ve Ayarlanması
Sayfaya Elements > Display > Label elementini sürükleyip bırakın.
Yazıyı Label > Properties > Value > “Giriş Yap” olarak ayarlayın.
Yazı stilini Label > Styling > Text > Style > Heading 5 olarak ayarlayın.
Sayfaya Elements > Text Input > TextInput elementini sürükleyip bırakın.
Ön yazısını TextInput > Properties > Placeholder > “Kullanıcı Adı” olarak ayarlayın.
Sayfaya Elements > Text Input > Password elementini sürükleyip bırakın.
Ön yazısını Password > Properties > Placeholder > “Şifre” olarak ayarlayın.
Alanın boş bırakılmaması için Password > Properties > Add Validations ekleyin. Koşul otomatik olarak tanımlı gelecektir.
Validasyon içerisindeki Invalid Message alanını “Şifre Alanı Boş” olarak güncelleyin.
Sayfaya Elements > Navigation > Button elementini sürükleyip bırakın.
Button elementine Button > Properties > Add Action > onClick > Authorization > Sign In hazır sistem aksiyonunu ekleyin.
Sign Inaksiyonu içerisindeki username alanına Components > TextInput > value tanımlamasını yapın.
Sign Inaksiyonu içerisindeki password alanına Components > Password > value tanımlamasını yapın.
Sonuçta Sign In aksiyonu aşağıdaki gibi olmalıdır.
Son durumda sayfa beklenen sayfa yapısı aşağıdaki olmalıdır.
Sayfanın giriş ekranında gelmesi için Sayfa içerisindeki boş bir alana tıklayın ve Sayfa > Role > Signin Screen olarak ayarlayın.
Proje içerisinde bir Ana Sayfa tanımlı olduğundan emin olunuz. Çalışmayı HomePage üzerinde uygulayıp test ettiyseniz, yeni bir sayfa oluşturup bu sayfayı Role > Starting Screen olarak ayarlayınız.
Preview:
Uygulama test edildiğinde, kullanıcı giriş ekranında Kullanıcı Adı ve Şifre bilgilerini girerek Giriş Yap butonuna tıklar. Şifre alanı Password elementi ile gizli şekilde görüntülenir ve sağındaki şifreyi göster/gizle ikonu ile kontrol edilebilir.
Şifre alanı boş bırakıldığında kullanıcıya uyarı mesajı gösterilir ve giriş işlemi başlatılmaz. Bilgiler doğru girildiğinde ise giriş işlemi başarıyla tamamlanır ve kullanıcı Ana Sayfa ekranına yönlendirilir.
4. Ortak Özellikler (Properties)
Password elementi üzerinde yer alan bazı alanlar tüm UI elementlerinde ortak olarak kullanılır. Bu nedenle, aşağıdaki özelliklerin detaylı açıklamaları ilgili genel kılavuz sayfalarında yer almaktadır:
