diff --git a/app/src/main/java/com/example/netwrok_datastore/ui/screen/registration/RegistrationScreen.kt b/app/src/main/java/com/example/netwrok_datastore/ui/screen/registration/RegistrationScreen.kt index 2e7a942..34f3f3e 100644 --- a/app/src/main/java/com/example/netwrok_datastore/ui/screen/registration/RegistrationScreen.kt +++ b/app/src/main/java/com/example/netwrok_datastore/ui/screen/registration/RegistrationScreen.kt @@ -3,10 +3,21 @@ package com.example.netwrok_datastore.ui.screen.registration import android.window.SplashScreen import androidx.compose.foundation.Image import androidx.compose.foundation.background +import androidx.compose.foundation.border import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.fillMaxHeight import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.size +import androidx.compose.foundation.layout.width +import androidx.compose.foundation.text.BasicTextField +import androidx.compose.foundation.text.KeyboardActions +import androidx.compose.foundation.text.KeyboardOptions import androidx.compose.material3.Button import androidx.compose.material3.CircularProgressIndicator import androidx.compose.material3.OutlinedTextField @@ -16,12 +27,19 @@ import androidx.compose.material3.SnackbarHostState import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.LaunchedEffect +import androidx.compose.runtime.getValue +import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Brush import androidx.compose.ui.graphics.Color import androidx.compose.ui.res.colorResource import androidx.compose.ui.res.painterResource +import androidx.compose.ui.text.input.KeyboardType +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.Dp +import androidx.compose.ui.unit.dp import androidx.lifecycle.viewmodel.compose.viewModel import androidx.lifecycle.viewmodel.viewModelFactory import com.example.netwrok_datastore.R @@ -76,4 +94,56 @@ fun RegistrationScreen(viewModel: RegistrationViewModel, onNavigationToProfile: } } } +} +@Preview +@Composable +fun testOtpTextField(){ + val text = remember { mutableStateOf("")} +OtpTextField(text.value, 4){ + text.value = it +} +} + +@Composable +fun OtpTextField( +value: String, +length: Int, +modifier: Modifier = Modifier, +boxWidth: Dp = 50.dp, +boxHeight: Dp = 100.dp, +keyboardOptions: KeyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number), +keyboardActions: KeyboardActions = KeyboardActions(), +onValueChanged: (String) -> Unit +){ + BasicTextField( + value = value, + onValueChange = { + if(it.length <= length){ + onValueChanged(it) + } + }, + modifier = modifier, + keyboardActions = keyboardActions, + keyboardOptions = keyboardOptions, + decorationBox = { + val spaceBoxBetween = 12.dp + Row(modifier = Modifier + .size(width = (boxWidth + spaceBoxBetween) * length, height = boxHeight), + horizontalArrangement = Arrangement.SpaceEvenly + ) { + repeat(length){ + Box( + modifier = Modifier + .width(46.dp) + .fillMaxHeight() + .border(width = 1.dp, color = Color.Blue), + contentAlignment = Alignment.Center + ) { + Text(text = value.getOrNull(it)?.toString() ?: "") + } + } + + } + } + ) } \ No newline at end of file