Kuika’nın Email elementi, kullanıcıların geçerli bir e-posta adresi formatında veri girmesini sağlar. Standart bir Text Input elementinden farklı olarak, Email elementi girilen değerde “@” ve “.” karakterlerinin kontrolünü yaparak geçerli bir formatta e-posta yazılmasını garanti eder. Bu sayede kullanıcıdan alınan veriler doğruluk açısından güvenilir olur.

Hem web hem de mobil uygulamalarda desteklenir.

Kullanım Alanları

• Giriş (Login) ve kayıt (Sign Up) ekranlarında e-posta girişi
• Şifre sıfırlama (Forgot Password) ekranları
• İletişim formları
• E-posta doğrulama adımları
• Bildirim tercihleri veya haber bülteni kayıtları

Kullanım Senaryosu – Giriş (Login) Ekranı

Bir giriş (login) ekranında kullanıcıların uygulamaya erişim sağlayabilmeleri için geçerli bir e-posta adresi girmeleri gerekir. Email elementi, kullanıcı tarafından hatalı formatta girilen e-postaları tespit eder ve uyarı verir.

Senaryoda:

• Kullanıcı “Welcome Back” ekranına gelir.
• “Email Address” alanına e-posta adresini yazar.
• Email elementi, format doğrulaması yapar (örnek: name@domainname.com).
• Eğer e-posta doğru formatta girilmişse kullanıcı parolasını yazar ve “Login” butonuna basar.
• Format hatalıysa uyarı mesajı gösterilir ve giriş işlemi durdurulur.

Veri Kaynağı Bağlama

1. Datasources modülüne gidin.
2. Tables alanından + Add New Table seçeneğiyle yeni bir tablo oluşturun ve adına UserAccountsEmail yazın.
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 PasswordUser = @PasswordUser;

Bu sorgu, girilen e-posta ve şifreyle eşleşen kullanıcıyı kontrol eder.

UI Design Modülü İşlemleri

1. UI Design modülüne gidin.
2. Sol kenardaki Elements → Text Input → Email kategorisinden Email elementini seçin.
3. Email elementini ekranınıza sürükleyip bırakın.
4. Properties panelinden şu ayarları yapılandırın:

• Placeholder: “name@domainname.com”
• Allow Clear: Aktif
• Value: userEmail (isteğe bağlı dinamik bağlama)

5. Altına bir Password elementi ekleyin.
6. Ardından bir Button elementi ekleyin (Label: “Login”).
7. Buton için aşağıdaki aksiyonu tanımlayın:

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

8. Eğer sorgudan sonuç dönmezse, kullanıcıya “Invalid email or password” mesajı gösterin.

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

• Value: Email elementine girilen veya veri kaynağından gelen değeri temsil eder.
• Placeholder: Kullanıcıya örnek bir format gösterir (örn. “name@domainname.com”).
• Allow Clear: Kullanıcının girdiği değeri kolayca temizlemesini sağlar.

Senaryo Adımı Tamamlandığında

• Kullanıcı e-posta adresini ve parolasını girer.
• E-posta formatı otomatik kontrol edilir.
• Format geçerli ve bilgiler doğruysa kullanıcı sisteme giriş yapar.
• Yanlış e-posta formatı girildiyse hata mesajı gösterilir.

Kısıtlamalar

• Email elementinde format kontrolü yalnızca “@” ve “.” karakterleri üzerinden yapılır.
• Gelişmiş alan doğrulamaları (örneğin domain kontrolü) için ek JavaScript veya Regex doğrulama gerekir.
• E-posta alanı boşsa form gönderimi yapılmaz.
• Aynı tabloya kayıtlı birden fazla e-posta adresine izin verilmemelidir.

İpuçları ve Best Practices

• Placeholder kısmında geçerli format örneği kullanın: name@domainname.com
• Allow Clear özelliğini aktif tutarak kullanıcı deneyimini artırın.
• Mobil cihazlarda e-posta klavyesi otomatik olarak açılır; bu, form doldurmayı hızlandırır.
• Kullanıcılara “Şifremi Unuttum?” bağlantısı sunarak alternatif erişim kolaylığı sağlayın.
• E-posta adresi büyük/küçük harf duyarsız olmalıdır (örn. KUİKA@domain.com ≈ kuika@domain.com).