Filled Secure Text Field

Etiketi kutusunun içinde duran güvenli metin alanı: bir şifre, bir PIN ya da bir kartın güvenlik kodu, PantrixFilledTextField'ın dolgulu kutusunda.

import com.pantrixui.components.inputs.filledsecuretextfield.PantrixFilledSecureTextField

• Kutunun içindeki etiket. label alan boşken ve odakta değilken yazının yerinde durur; odakta ya da bir metin varken yazının üstündeki satırına çıkar. placeholder etiket yerinden çıkmışken, alan boş ve odaktayken görünür.
• Dolgu ve çerçeve. Kutu dinlenirken dolgulu ve çerçevesizdir; odakta ve hatada çerçevelenir. Devre dışı alanın dolgusu yoktur.
• Gizli metin. Platforma alanın bir şifre tuttuğu söylenir ve metin gizliyken ona metnin yerine noktalar verilir: ekran okuyucu şifreyi okumaz, şifre yöneticisi ise alanı yine doldurur ve kaydeder.
• Gösterme düğmesi. Göz düğmesine fareyle basmak imleci yerinden oynatmaz. Klavyede alandan sonraki kendi Tab durağıdır; klavyenin "İleri" tuşu onu atlar. Metnin gösterildiği kaydedilmez. showRevealButton = false düğmeyi kaldırır.
• Gizleme biçimi. textObfuscationMode gizli metnin nasıl çizildiğini, textObfuscationCharacter noktanın yerine hangi karakterin çizildiğini söyler.
• Metni almak. Metin durumdan okunur: kullanılacağı anda state.text, yazıldıkça izlemek için snapshotFlow. value ve onValueChange alan bir biçimi yoktur.
• Form. field alan biçim değerini, hatasını ve adını formdaki alanından alır; form verilirse klavyenin eylem tuşu formu gönderir.
• Dolgulu alandan gelenler. supportingText, error, leadingIcon, showClearButton ve maxLength dolgulu metin alanındaki gibidir. trailingIcon temizleme ve gösterme düğmelerinden sonra durur.
• Otomasyon. tagKey ile alan FilledSecureTextField_<tagKey>, temizleme düğmesi FilledSecureTextFieldClear_<tagKey>, gösterme düğmesi FilledSecureTextFieldReveal_<tagKey> adını alır. Alan metnini asla bildirmez.

Örnekler

En yalın hâli

En az yazılan: bir TextFieldState ve bir etiket. Etiket kutunun içindedir: alan boşken yazının yerinde durur, alana basınca yazının üstündeki satırına çıkar. Yazılan nokta nokta çizilir; kesilemez ve kopyalanamaz.

Bir şey yazıp kutunun sonundaki göz düğmesine bas: metin görünür, bir daha basınca yeniden gizlenir. Fareyle basmak imleci alandan çıkarmaz; klavyede Tab alandan sonra düğmeye uğrar. Metnin gösterildiği kaydedilmez.

PantrixFilledSecureTextField(
    state = rememberTextFieldState(),
    modifier = Modifier.fillMaxWidth(),
    label = "Kasa şifresi",
    tagKey = "safe_password"
)

Yardım metni ve hata

supportingText kutunun altında durur. error = true kutuyu danger rengiyle çerçeveler; yardım metni ve imleç de o renge döner ve mesaj ekran okuyucuya hata olarak bildirilir. Etiket kendi renginde kalır.

Alan hatada başlar: metninde bir boşluk var. Göz düğmesine basıp metni gör ve boşluğu sil: hata kalkar. Hatayı alan değil çağıran hesaplar; burada password.text'i okuyarak.

val password = rememberTextFieldState("gizli sifre")
val hasSpace = password.text.contains(' ')
PantrixFilledSecureTextField(
    state = password,
    modifier = Modifier.fillMaxWidth(),
    label = "Uygulama kilidi",
    supportingText = if (hasSpace) "Şifrede boşluk olamaz" else "Boşluk içermeyen bir şifre",
    error = hasSpace,
    showClearButton = true,
    tagKey = "app_lock"
)

İkon, temizleme düğmesi ve sayaç

leadingIcon etiketin ve metnin önünde durur. Yuva içine konanı boyutlandırmaz: buradaki ikona dolgulu alanın stilindeki boyutu örnek kendisi verir, PantrixTheme.style(FilledTextFieldStyle).iconSize. Kutunun sonundakiler hep aynı sıradadır: önce temizleme düğmesi, sonra metni gösteren düğme, verilmişse en sonda trailingIcon.

Temizleme düğmesi alan boş değilken görünür, imleci alanda bırakır ve Tab durağı değildir; göz düğmesi ise bir Tab durağıdır. maxLength = 16 daha uzun bir şifreyi almaz ve sayacı kutunun altına yazar.

PantrixFilledSecureTextField(
    state = rememberTextFieldState(),
    modifier = Modifier.fillMaxWidth(),
    label = "Yönetici şifresi",
    leadingIcon = {
        PantrixIcon(
            imageVector = PantrixIcons.Person,
            contentDescription = null,
            size = PantrixTheme.style(FilledTextFieldStyle).iconSize
        )
    },
    showClearButton = true,
    maxLength = 16,
    tagKey = "admin_password"
)

Forma bağlı bir şifre değişikliği

İki alan da değerini, hatasını ve adını formdaki alanından alır. Mevcut şifrede klavyenin "İleri" tuşu odağı yeni şifreye taşır; yeni şifrede eylem tuşu formu "Şifreyi değiştir" düğmesi üzerinden gönderir. İki alanı boş bırakıp düğmeye bas: form gönderilmez, hatalı ilk alan odağı alır.

Yeni şifre platforma seçilmekte olan bir şifre olarak bildirilir (ContentType.NewPassword): bir şifre yöneticisi buraya kayıtlı olanı doldurmayı değil, yenisini önermeyi teklif eder. Mevcut şifrede contentType verilmedi: alan ContentType.Password tutar.

val snackbars = LocalPantrixSnackbars.current
val scope = rememberCoroutineScope()
val form = rememberFormState()
PantrixFilledSecureTextField(
    field = form.field("current_password", initial = "", Rules.notBlank("Mevcut şifrenizi yazın")),
    modifier = Modifier.fillMaxWidth(),
    form = form,
    label = "Mevcut şifre",
    keyboardOptions = KeyboardOptions(imeAction = ImeAction.Next)
)
PantrixFilledSecureTextField(
    field = form.field("new_password", initial = "", Rules.minLength(8, "Yeni şifre en az 8 karakter olmalı")),
    modifier = Modifier.fillMaxWidth(),
    form = form,
    label = "Yeni şifre",
    supportingText = "En az 8 karakter",
    showClearButton = true,
    contentType = ContentType.NewPassword
)
PantrixButton(
    text = "Şifreyi değiştir",
    onClick = {
        scope.launch {
            form.submit { snackbars?.show(message = "Şifre değiştirildi", tagKey = "password_changed") }
        }
    },
    form = form,
    tagKey = "change_password"
)

Kullanılacağı anda okunan güvenlik kodu

Kartın arkasındaki üç rakamlı güvenlik kodu: klavyesi rakam klavyesidir, rakam olmayanı bir giriş dönüşümü geri çevirir ve sayacı gösterilmez. Göz düğmesi durur: kullanıcı yazdığı kodu karttakiyle karşılaştırabilsin diye.

Metin kullanılacağı anda durumdan okunur: düğmeye basılınca code.text. Arada bir yere taşınmaz, alanın durumu tek kaynağıdır. Bildirim kodun kendisini değil, kaç rakam alındığını söyler.

val snackbars = LocalPantrixSnackbars.current
val scope = rememberCoroutineScope()
val code = rememberTextFieldState()
PantrixFilledSecureTextField(
    state = code,
    modifier = Modifier.fillMaxWidth(),
    label = "Güvenlik kodu",
    placeholder = "000",
    supportingText = "Kartın arkasındaki üç rakam",
    maxLength = 3,
    showCharacterCount = false,
    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.NumberPassword),
    inputTransformation = DigitsOnly,
    contentType = ContentType.CreditCardSecurityCode,
    tagKey = "card_code"
)
PantrixButton(
    text = "Kartı doğrula",
    onClick = {
        val entered = code.text.toString()
        val message = when (entered.length) {
            3 -> "Kod alındı: ${entered.length} rakam"
            else -> "Kod 3 rakam olmalı, ${entered.length} rakam yazıldı"
        }
        scope.launch { snackbars?.show(message = message, tagKey = "card_code_read") }
    },
    tagKey = "verify_card"
)

private val DigitsOnly = InputTransformation {
    if (!asCharSequence().all(Char::isDigit)) revertAllChanges()
}

Yazıldıkça izlenen metin

Metni yazıldıkça isteyen bir çağıran onu durumdan izler: snapshotFlow { state.text.toString() } her değişikliği verir, burada çağıranın tuttuğu bir String'e. Yardım metni o String'ten üretilir ve şifrede neyin eksik olduğunu söyler.

Akış tek yönlüdür: metin alandan çağırana akar. Bir ViewModel'e taşımak da aynı biçimde yazılır: her değişiklik collect içinde ViewModel'e bildirilir.

var password by remember { mutableStateOf("") }
val state = rememberTextFieldState(password)
LaunchedEffect(state) {
    snapshotFlow { state.text.toString() }.collect { password = it }
}
PantrixFilledSecureTextField(
    state = state,
    modifier = Modifier.fillMaxWidth(),
    label = "Yeni hesap şifresi",
    supportingText = when {
        password.isEmpty() -> "En az 10 karakter, içinde bir rakam"
        password.length < 10 -> "${10 - password.length} karakter daha"
        password.none(Char::isDigit) -> "Bir rakam ekleyin"
        else -> "Şifre yeterli"
    },
    contentType = ContentType.NewPassword,
    tagKey = "followed_password"
)

Hiç gösterilmeyen bir PIN

showRevealButton = false göz düğmesini kaldırır: metin textObfuscationMode'un çizdiği gibi kalır. TextObfuscationMode.Hidden ile son yazılan rakam hiçbir platformda görünmez; varsayılan System, Android'de sistemin kendi ayarı öyle diyorsa son yazılan karakteri bir an gösterirdi. textObfuscationCharacter noktanın yerine yıldız çizer.

Klavyesi bir PIN'inkidir: KeyboardType.NumberPassword. maxLength = 4 beşinci rakamı almaz ve sayacı kutunun altına yazar.

PantrixFilledSecureTextField(
    state = rememberTextFieldState(),
    modifier = Modifier.fillMaxWidth(),
    label = "Kart şifresi",
    supportingText = "Dört rakam",
    showRevealButton = false,
    maxLength = 4,
    textObfuscationMode = TextObfuscationMode.Hidden,
    textObfuscationCharacter = '*',
    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.NumberPassword),
    inputTransformation = DigitsOnly,
    tagKey = "card_pin"
)

private val DigitsOnly = InputTransformation {
    if (!asCharSequence().all(Char::isDigit)) revertAllChanges()
}

Devre dışı ve salt okunur

enabled = false alanın dolgusunu kaldırır: alan temanın devre dışı yazı rengiyle çizilir, odak almaz ve metnini gösteren düğmesi yoktur.

readOnly = true alanın dolgusu yerindedir: alan odaklanır ve metni göz düğmesiyle gösterilebilir, ama değiştirilemez.

PantrixFilledSecureTextField(
    state = rememberTextFieldState("degismez"),
    modifier = Modifier.fillMaxWidth(),
    enabled = false,
    label = "Uygulama şifresi",
    supportingText = "Kuruluşunuz belirler",
    tagKey = "managed_password"
)
PantrixFilledSecureTextField(
    state = rememberTextFieldState("PX-7730-1184"),
    modifier = Modifier.fillMaxWidth(),
    readOnly = true,
    label = "Yedek kod",
    supportingText = "Göz düğmesiyle gösterilir, değiştirilemez",
    tagKey = "backup_code"
)

Kendi renkleri ve stili

Dolgulu güvenli alan, dolgulu metin alanının FilledTextFieldColors'ını ve FilledTextFieldStyle'ını alır: iki dolgulu alan birlikte biçimlenir.

İlk alanın dolgusu, etiketi, yazısı, ikonu, çerçevesi ve imleci uygulamanın kendi morundandır; göz düğmesi ikon rengiyle çizilir. Verilmeyenler, odaktaki dolgu gibi, temadaki rolünde kalır. İkincinin kutusu tam yuvarlaktır: FilledTextFieldStyle(shape = ShapeRole.Full).

val own = ownColors()
PantrixFilledSecureTextField(
    state = rememberTextFieldState(),
    modifier = Modifier.fillMaxWidth(),
    label = "Üyelik şifresi",
    colors = FilledTextFieldColors(
        container = own.container,
        focusedOutline = own.color,
        text = own.onContainer,
        label = own.onContainer,
        icon = own.onContainer,
        cursor = own.color
    ),
    tagKey = "own_colors"
)
PantrixFilledSecureTextField(
    state = rememberTextFieldState(),
    modifier = Modifier.fillMaxWidth(),
    label = "Arşiv şifresi",
    style = FilledTextFieldStyle(shape = ShapeRole.Full),
    tagKey = "pill"
)

API

state

Etiketi kutusunun içinde duran güvenli metin alanı: bir şifre, bir PIN ya da bir kartın güvenlik kodu, PantrixFilledTextField'ın dolgulu kutusunda.

field

Bir formun alanına bağlı dolgulu güvenli metin alanı: metni, hatası ve adı field'dan gelir.

FilledTextFieldStyle

PantrixFilledTextField'ın kutusu: şekli, en az yüksekliği ve genişliği, içindekilerin çevresindeki boşluk, ikonları ve çerçevesi.

FilledTextFieldColors

Temanın renklerini almayan bir alan için PantrixFilledTextField'ın boyandığı renkler: verilen renk kullanılır, verilmeyen temadaki rolünde kalır. Bir ürün yalnızca değiştirdiği renkleri verir, başkasını vermez:

Erişilebilirlik

• Klavye ve otomatik doldurma. keyboardOptions'ın söylemedikleri bir şifreninkidir: şifre klavyesi, düzeltme yok. contentType verilmezse alan ContentType.Password tutar.