Kuika’nın Password elementi, kullanıcıların uygulamalarda güvenli bir şekilde şifre girmelerini sağlar. Girilen karakterler güvenlik amacıyla yıldız (*) veya nokta (•) simgeleriyle gizlenir. Kullanıcılar, “Göster” (eye) ikonu aracılığıyla şifreyi görünür hale getirebilir. Password elementi ayrıca Configuration Manager → Password Policy ayarlarıyla entegre çalışarak güçlü şifre oluşturma kurallarını destekler.

Password elementi hem web hem de mobil uygulamalarda kullanılabilir.

Kullanım Alanları

• Giriş (Login) ekranları
• Kayıt (Sign Up) veya Şifre Oluşturma ekranları
• Şifre değiştirme (Change Password) akışları
• Şifre yenileme (Reset Password) formları
• Güvenli alanlara erişim (örneğin, yönetici paneli)

Kullanım Senaryosu – Kullanıcı Girişi (Login Screen)

Bir uygulamada kullanıcıların güvenli bir şekilde giriş yapabilmesi için Email ve Password elementleri birlikte kullanılır. Password elementi, girilen şifrenin gizli kalmasını sağlar ve kullanıcı isteğine bağlı olarak görüntülenebilir.

Senaryoda:

• Kullanıcı “Welcome Back” ekranına gelir.
• “Email Address” alanına e-posta adresini, “Password” alanına şifresini girer.
• Password alanı girilen karakterleri gizler.
• Kullanıcı isterse “eye” ikonuna tıklayarak şifreyi görünür hale getirir.
• “Stay Logged In” seçeneği aktifse, kullanıcı bilgileri oturum süresince saklanır.
• “Login” butonuna bastığında, sistem girilen bilgileri veri tabanındaki kayıtla karşılaştırır.

Veri Kaynağı Bağlama

1. Datasources modülüne gidin.
2. Tables sekmesinde yeni bir tablo oluşturun ve adını UserAccountsPassword olarak belirleyin.
3. Aşağıdaki alanları ekleyin:

4. Ardından SQL Actions sekmesine gidin.
5. Yeni bir aksiyon oluşturun: LoginUser
6. Aşağıdaki SQL sorgusunu girin:

SELECT * FROM UserAccountsWHERE Email = @Email AND Password = @Password;

Bu sorgu, kullanıcıdan alınan e-posta ve şifre kombinasyonunu kontrol eder.

UI Design Modülü İşlemleri

1. UI Design modülüne gidin.
2. Sol kenardaki Elements → Text Input → Password kategorisinden Password elementini seçin.
3. Ekrana sürükleyip bırakın.
4. Properties Panel üzerinden aşağıdaki ayarları yapılandırın:

• Placeholder: “***********”
• Value: userPassword

5. Email elementinin altına yerleştirin.
6. Altına bir Checkbox ekleyin → Label: “Stay Logged In”
7. Hemen yanına bir URL elementi ekleyin → Label: “Forgot Password?”
8. En altta bir Button (Login) elementi ekleyin.
9. Button için şu aksiyonu tanımlayın:

• onClick → Managed DB → Custom SQL Action (LoginUser)
• Parametreler:
  
  • Email → EmailInput.value
  • Password → PasswordInput.value

10. Aksiyon sonucu kullanıcı doğrulanırsa “Home” ekranına yönlendirme yapılır.

Özelliklerin Senaryo Bağlamında Kullanılması

• Value: Kullanıcı tarafından girilen şifreyi temsil eder.
• Placeholder: Kullanıcı veri girmediğinde gösterilen bilgilendirme metnidir. Örnek: “Şifrenizi girin”

Senaryo Adımı Tamamlandığında

• Kullanıcı e-posta ve şifresini girer.
• Şifre güvenli biçimde gizlenir.
• “Login” butonuna basıldığında sistem bilgileri kontrol eder.
• Doğruysa kullanıcı giriş yapar, yanlışsa hata mesajı gösterilir.
• “Stay Logged In” seçiliyse, kullanıcı oturum süresince giriş yapmadan sisteme erişebilir.

Kısıtlamalar

• Password alanı boşsa form gönderimi yapılmaz.
• Şifre kontrolü backend doğrulaması olmadan yapılmamalıdır.
• Çok kısa veya zayıf şifrelerin kabul edilmesini önlemek için Configuration Manager → Password Policy ayarları etkinleştirilmelidir.

İpuçları ve Best Practices

• Kullanıcıya şifre gereksinimlerini (örneğin: minimum uzunluk, büyük harf, rakam vb.) önceden gösterin.
• Forgot Password akışı için ayrı bir ekran tasarlayın.
• Mobil cihazlarda sanal klavyenin otomatik “password mode”’da açıldığından emin olun.