Secure Text Field

Omuz üstünden okunmaması gerekenler için metin alanı: bir şifre, bir PIN, bir kartın güvenlik kodu.

import com.pantrixui.components.inputs.securetextfield.PantrixSecureTextField

• 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. Kutunun sonundaki göz metni gösterir ve yeniden gizler. Fareyle basmak imleci yerinden oynatmaz. Klavyede alandan sonraki kendi Tab durağıdır; klavyenin "İleri" tuşu ise onu atlayıp sonraki alana geçer. showRevealButton = false düğmeyi kaldırır.
• Gösterilen metin kaydedilmez. Alan yeniden kurulduğunda, ekran dönünce olduğu gibi, metin yine gizlidir.
• Gizleme biçimi. textObfuscationMode gizli metnin nasıl çizildiğini söyler: platformun yaptığı gibi, son yazılan karakter bir an görünerek, ya da hiçbir şey görünmeden. textObfuscationCharacter noktanın yerine çizilen karakterdir.
• Otomatik doldurma. contentType verilmezse alan ContentType.Password tutar; ContentType.NewPassword seçilmekte olan bir şifredir.
• Metni almak. Metin durumdan okunur: kullanılacağı anda state.text, yazıldıkça izlemek için snapshotFlow. Metni String olarak tutan bir çağırana her değişiklik o yolla verilir.
• Form. field alan biçim değerini, hatasını ve adını formdaki alanından alır. Odak alandan ve düğmelerinden çıkınca alan denetlenir; form verilirse klavyenin eylem tuşu formu gönderir.
• Metin alanından gelenler. label, placeholder, supportingText, error, leadingIcon, showClearButton ve maxLength metin alanındaki gibidir. trailingIcon temizleme ve gösterme düğmelerinden sonra durur.
• Otomasyon. tagKey ile alan SecureTextField_<tagKey>, temizleme düğmesi SecureTextFieldClear_<tagKey>, gösterme düğmesi SecureTextFieldReveal_<tagKey> adını alır. Alan odağı aldığını, temizlendiğini ve metninin gösterilip gizlendiğini bildirir; metnini asla.

Örnekler

En yalın hâli

En az yazılan: bir TextFieldState ve bir etiket. Yazılan nokta nokta çizilir; kesilemez ve kopyalanamaz. Metin durumdadır: alttaki satır password.text'in yalnızca uzunluğunu okur.

Kutunun sonundaki göz düğmesi metni gösterir ve yeniden gizler. Fareyle basmak imleci alandan çıkarmaz. Klavyede Tab alandan sonra düğmeye uğrar; klavyenin "İleri" tuşu ise düğmeyi atlar. Metnin gösterildiği kaydedilmez: alan yeniden kurulduğunda yine gizlidir.

val password = rememberTextFieldState()
PantrixSecureTextField(
    state = password,
    modifier = Modifier.fillMaxWidth(),
    label = "Wi-Fi şifresi",
    tagKey = "wifi_password"
)
PantrixText(text = "${password.text.length} karakter yazıldı", color = PantrixTheme.colors.textSecondary)

Gizleme biçimi ve karakteri

textObfuscationMode metnin gizliyken nasıl çizildiğini söyler. Varsayılan System platformun yaptığını yapar: Android'de, sistemin kendi ayarı öyle diyorsa, son yazılan karakter bir an görünür; başka hiçbir yerde bir şey görünmez. RevealLastTyped son yazılan karakteri her platformda bir an gösterir, Hidden hiçbirinde göstermez. İlk iki alana bir şeyler yaz ve farkı gör.

textObfuscationCharacter gizli bir karakterin yerine çizilendir: üçüncü alanda nokta yerine yıldız.

PantrixSecureTextField(
    state = rememberTextFieldState(),
    modifier = Modifier.fillMaxWidth(),
    label = "Son yazılan görünür",
    textObfuscationMode = TextObfuscationMode.RevealLastTyped,
    tagKey = "reveal_last"
)
PantrixSecureTextField(
    state = rememberTextFieldState(),
    modifier = Modifier.fillMaxWidth(),
    label = "Hiçbir şey görünmez",
    textObfuscationMode = TextObfuscationMode.Hidden,
    tagKey = "hidden"
)
PantrixSecureTextField(
    state = rememberTextFieldState("yildiz"),
    modifier = Modifier.fillMaxWidth(),
    label = "Nokta yerine yıldız",
    textObfuscationCharacter = '*',
    tagKey = "stars"
)

Yardım metni ve hata

supportingText kutunun altında durur. error = true kenarlığı, etiketi, yardım metnini ve imleci danger rolüne çevirir ve mesaj ekran okuyucuya hata olarak bildirilir. İki alana farklı şeyler yaz: ikincisi hataya geçer ve neyin yanlış olduğunu söyler.

İki alanın metni de kendi durumundadır; karşılaştırma ikisini oradan okur. İlk alanda yalnızca eylem tuşu verildi: klavyenin "İleri" tuşu göz düğmesinde durmaz, ikinci alana geçer. Klavyenin geri kalanı verilmediği için bir şifreninkidir: şifre klavyesi, düzeltme yok.

val password = rememberTextFieldState()
val repeated = rememberTextFieldState()
val differs = repeated.text.isNotEmpty() && repeated.text.toString() != password.text.toString()
PantrixSecureTextField(
    state = password,
    modifier = Modifier.fillMaxWidth(),
    label = "Hesap şifresi",
    supportingText = "Harf ve rakam içersin",
    keyboardOptions = KeyboardOptions(imeAction = ImeAction.Next),
    contentType = ContentType.NewPassword,
    tagKey = "chosen_password"
)
PantrixSecureTextField(
    state = repeated,
    modifier = Modifier.fillMaxWidth(),
    label = "Hesap şifresi (tekrar)",
    supportingText = if (differs) "İki şifre aynı değil" else "Aynı şifreyi bir kez daha yazın",
    error = differs,
    contentType = ContentType.NewPassword,
    tagKey = "repeated_password"
)

Temizleme düğmesi, sayaç ve ikon

Kutunun sonunda üç şey yan yana durabilir, hep aynı sırada: temizleme düğmesi, metni gösteren düğme ve trailingIcon. Buradaki ikon şifrenin yeterince uzun olup olmadığını söyler; süs olmadığı için bir contentDescription'ı vardır.

showClearButton alan boş değilken görünür ve imleci alanda bırakır. maxLength = 32 daha uzun bir şifreyi almaz; sayaç kutunun altında, yardım metninin karşısında yazar. placeholder yalnızca alan boşken görünür.

val password = rememberTextFieldState()
val longEnough = password.text.length >= 12
PantrixSecureTextField(
    state = password,
    modifier = Modifier.fillMaxWidth(),
    label = "Ana şifre",
    placeholder = "Bir cümle de olabilir",
    supportingText = "En az 12 karakter",
    trailingIcon = {
        PantrixIcon(
            imageVector = if (longEnough) PantrixIcons.Success else PantrixIcons.Warning,
            contentDescription = if (longEnough) "Yeterince uzun" else "Henüz kısa",
            size = PantrixTheme.style(TextFieldStyle).iconSize
        )
    },
    showClearButton = true,
    maxLength = 32,
    tagKey = "master_password"
)

Forma bağlı bir giriş

field alan PantrixSecureTextField değerini, hatasını ve adını formdaki alanından alır: şifre kısa bırakılıp çıkılırsa kuralın mesajı yardım metninin yerine geçer. Odak göz düğmesine geçince alandan çıkılmış sayılmaz, hata o zaman görünmez. Forma bağlı bir alanın metni formdaki alanın değeridir: ayrıca alınması gerekmez.

form verilen alanda klavyenin eylem tuşu formu "Giriş yap" düğmesi üzerinden gönderir; e-posta alanında "İleri" tuşu odağı şifreye taşır. E-posta bir PantrixTextField'dır: iki bileşen aynı etiketi ve aynı kutuyu çizer.

val snackbars = LocalPantrixSnackbars.current
val scope = rememberCoroutineScope()
val form = rememberFormState()
PantrixTextField(
    field = form.field("login_email", initial = "", Rules.matches(EMAIL, "Geçerli bir e-posta adresi yazın")),
    modifier = Modifier.fillMaxWidth(),
    form = form,
    label = "E-posta",
    placeholder = "ad@ornek.com",
    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Email, imeAction = ImeAction.Next),
    contentType = ContentType.EmailAddress
)
PantrixSecureTextField(
    field = form.field("login_password", initial = "", Rules.minLength(8, "Şifre en az 8 karakter olmalı")),
    modifier = Modifier.fillMaxWidth(),
    form = form,
    label = "Şifre",
    supportingText = "En az 8 karakter",
    showClearButton = true
)
PantrixButton(
    text = "Giriş yap",
    onClick = {
        scope.launch { form.submit { snackbars?.show(message = "Giriş yapıldı", tagKey = "signed_in") } }
    },
    form = form,
    tagKey = "sign_in"
)

private val EMAIL = Regex("""\S+@\S+\.\S+""")

Metnini bir ViewModel'e taşıyan form

Her alan durumunu rememberTextFieldState ile, ViewModel'in o an tuttuğu değerden kurar; durumdaki metni snapshotFlow ile izler ve her değişikliği ViewModel'e bildirir. Metin alanın durumundan böyle alınır: düz metin alanında da, güvenli alanda da aynı yolla.

ViewModel'deki ilk değer bir kez okunur. Sonrası tek yönlüdür: metin alandan ViewModel'e akar, ViewModel'de yapılan bir değişiklik alana dönmez. Ekran yeniden kurulduğunda ViewModel yerinde kalır ve alanlar onun değeriyle başlar.

Alttaki satır ViewModel'in tuttuğunu gösterir: kullanıcı adını, ve şifrenin kendisini değil uzunluğunu. Düğme de ondan okur: kullanıcı adı ve yeterince uzun bir şifre gelmeden basılamaz.

val viewModel = viewModel(key = "account") { AccountViewModel() }
val snackbars = LocalPantrixSnackbars.current
val scope = rememberCoroutineScope()
val initialUiState = remember(viewModel) { viewModel.uiState.value }
val uiState by viewModel.uiState.collectAsStateWithLifecycle()

val username = rememberTextFieldState(initialUiState.username)
LaunchedEffect(username) {
    snapshotFlow { username.text.toString() }.collectLatest { viewModel.updateUsername(it) }
}
PantrixTextField(
    state = username,
    modifier = Modifier.fillMaxWidth(),
    label = "Kullanıcı adı",
    keyboardOptions = KeyboardOptions(imeAction = ImeAction.Next),
    contentType = ContentType.NewUsername,
    tagKey = "account_username"
)

val password = rememberTextFieldState(initialUiState.password)
LaunchedEffect(password) {
    snapshotFlow { password.text.toString() }.collectLatest { viewModel.updatePassword(it) }
}
PantrixSecureTextField(
    state = password,
    modifier = Modifier.fillMaxWidth(),
    label = "Yeni şifre",
    supportingText = "En az 8 karakter",
    contentType = ContentType.NewPassword,
    tagKey = "account_password"
)

PantrixText(
    text = "ViewModel: kullanıcı adı \"${uiState.username}\", şifre ${uiState.password.length} karakter",
    style = PantrixTheme.typography.footnote,
    color = PantrixTheme.colors.textSecondary,
    tagKey = "account_state"
)
PantrixButton(
    text = "Hesap oluştur",
    onClick = {
        scope.launch {
            snackbars?.show(message = "${uiState.username} için hesap oluşturuldu", tagKey = "account_created")
        }
    },
    enabled = uiState.isComplete,
    tagKey = "create_account"
)

private class AccountViewModel : ViewModel() {
    private val state = MutableStateFlow(AccountUiState())
    val uiState: StateFlow<AccountUiState> = state.asStateFlow()

    fun updateUsername(username: String) {
        state.update { it.copy(username = username) }
    }

    fun updatePassword(password: String) {
        state.update { it.copy(password = password) }
    }
}

private data class AccountUiState(
    val username: String = "",
    val password: String = ""
) {
    val isComplete: Boolean get() = username.isNotBlank() && password.length >= 8
}

Metnini String olarak veren PIN

Güvenli alanın value ve onValueChange alan bir biçimi yoktur; metnini String olarak tutan bir çağıran için durumun üstüne kurulur. PinInput alanı value ile başlatır, durumdaki metni snapshotFlow ile izler ve her değişikliği onValueChange ile bildirir. Akış tek yönlüdür: value ilk değerdir, sonradan dışarıdan değişirse alana yansımaz. Yardım metni çağıranın tuttuğu String'ten üretilir ve kaç rakamın eksik olduğunu söyler.

Bu bir PIN'dir: showRevealButton = false ile metnini gösteren düğmesi yoktur, TextObfuscationMode.Hidden ile son yazılan rakam da gösterilmez. Klavyesi rakam klavyesidir (KeyboardType.NumberPassword); rakam olmayanı bir giriş dönüşümü geri çevirir.

var pin by remember { mutableStateOf("") }
PinInput(
    value = pin,
    onValueChange = { pin = it },
    label = "PIN",
    supportingText = if (pin.length == 6) "PIN tamam" else "${6 - pin.length} rakam daha",
    modifier = Modifier.fillMaxWidth()
)

@Composable
private fun PinInput(
    value: String,
    onValueChange: (String) -> Unit,
    label: String,
    supportingText: String,
    modifier: Modifier = Modifier
) {
    val state = rememberTextFieldState(value)
    val latestOnValueChange by rememberUpdatedState(onValueChange)
    LaunchedEffect(state) {
        snapshotFlow { state.text.toString() }.collect { latestOnValueChange(it) }
    }
    PantrixSecureTextField(
        state = state,
        modifier = modifier,
        label = label,
        supportingText = supportingText,
        showRevealButton = false,
        maxLength = 6,
        textObfuscationMode = TextObfuscationMode.Hidden,
        keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.NumberPassword),
        inputTransformation = DigitsOnly,
        tagKey = "pin"
    )
}

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

Devre dışı ve salt okunur

enabled = false alan odak almaz, temanın devre dışı renkleriyle çizilir ve metnini gösteren düğmesi yoktur.

readOnly = true alan odaklanır ve metni düğmeyle gösterilebilir, ama değiştirilemez: bir kez verilen bir kurtarma kodu gibi.

PantrixSecureTextField(
    state = rememberTextFieldState("degismez"),
    modifier = Modifier.fillMaxWidth(),
    enabled = false,
    label = "Devre dışı",
    supportingText = "Metnini gösteren düğmesi yoktur",
    tagKey = "locked_password"
)
PantrixSecureTextField(
    state = rememberTextFieldState("PX-4821-9930"),
    modifier = Modifier.fillMaxWidth(),
    readOnly = true,
    label = "Kurtarma kodu",
    supportingText = "Salt okunur: gösterilebilir, değiştirilemez",
    tagKey = "recovery_code"
)

Kendi renkleri ve stili

Güvenli alanın kendi stil ve renk sınıfı yoktur: PantrixTextField'ın TextFieldColors'ını ve TextFieldStyle'ını alır. Temada metin alanlarını yeniden biçimleyen bir ürün şifre alanlarını da biçimlemiş olur.

İlk alanda odaktaki kenarlık, imleç ve ikon rengi uygulamanın kendi morudur: göz düğmesi de ikon rengiyle çizilir. Verilmeyen renkler temadaki rolünde kalır. İkincinin kutusu tam yuvarlaktır: TextFieldStyle(shape = ShapeRole.Full).

val own = ownColors()
PantrixSecureTextField(
    state = rememberTextFieldState(),
    modifier = Modifier.fillMaxWidth(),
    label = "Cüzdan şifresi",
    colors = TextFieldColors(focusedBorder = own.color, icon = own.color, cursor = own.color),
    tagKey = "own_colors"
)
PantrixSecureTextField(
    state = rememberTextFieldState(),
    modifier = Modifier.fillMaxWidth(),
    label = "Kasa şifresi",
    style = TextFieldStyle(shape = ShapeRole.Full),
    tagKey = "pill"
)

API

state

Omuz üstünden okunmaması gerekenler için metin alanı: bir şifre, bir PIN, bir kartın güvenlik kodu.

field

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

TextFieldStyle

PantrixTextField'ın kutusu: şekli, en az yüksekliği ve genişliği, metninin çevresindeki boşluk, ikonları ve kenarlığı.

TextFieldColors

Temanın renklerini almayan bir alan için PantrixTextField'ı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. keyboardOptions'ın söylemedikleri bir şifreninkidir: şifre klavyesi, düzeltme yok. Yalnızca bir eylem tuşu adlandırmak, yazılanı öğrenen klavyeyi geri getirmez. KeyboardType.NumberPassword bir PIN'inkidir.