add otp box styles && base timer

.idea/deploymentTargetSelector.xml

@@ -5,6 +5,15 @@
       <SelectionState runConfigName="app">
         <option name="selectionMode" value="DROPDOWN" />
       </SelectionState>
+      <SelectionState runConfigName="testOtpTextField">
+        <option name="selectionMode" value="DROPDOWN" />
+      </SelectionState>
+      <SelectionState runConfigName="preivewTimerText">
+        <option name="selectionMode" value="DROPDOWN" />
+      </SelectionState>
+      <SelectionState runConfigName="PreviewBaseTimerText">
+        <option name="selectionMode" value="DROPDOWN" />
+      </SelectionState>
     </selectionStates>
   </component>
 </project>

.idea/gradle.xml

@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
+  <component name="GradleMigrationSettings" migrationVersion="1" />
   <component name="GradleSettings">
     <option name="linkedExternalProjectsSettings">
       <GradleProjectSettings>
@@ -12,7 +13,6 @@
             <option value="$PROJECT_DIR$/app" />
           </set>
         </option>
-        <option name="resolveExternalAnnotations" value="false" />
       </GradleProjectSettings>
     </option>
   </component>

app/src/main/java/com/example/netwrok_datastore/ui/screen/registration/RegistrationScreen.kt

@@ -1,6 +1,8 @@
 package com.example.netwrok_datastore.ui.screen.registration
 
+import android.os.CountDownTimer
 import android.window.SplashScreen
+import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
@@ -15,25 +17,33 @@ 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.shape.RoundedCornerShape
 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.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
 import androidx.compose.material3.OutlinedTextField
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.SnackbarHost
 import androidx.compose.material3.SnackbarHostState
 import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBar
 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.runtime.rememberCoroutineScope
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.RectangleShape
 import androidx.compose.ui.res.colorResource
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.input.KeyboardType
@@ -45,8 +55,13 @@ import androidx.lifecycle.viewmodel.viewModelFactory
 import com.example.netwrok_datastore.R
 import com.example.netwrok_datastore.Registration
 import com.example.netwrok_datastore.domain.usecase.AuthUseCase
+import kotlinx.coroutines.CoroutineScope
 import kotlinx.coroutines.delay
+import kotlinx.coroutines.launch
 import kotlinx.coroutines.runBlocking
+import kotlin.concurrent.timer
+import kotlin.math.truncate
+import kotlin.time.Duration.Companion.seconds
 
 @Composable
 fun RegistrationScreen(viewModel: RegistrationViewModel, onNavigationToProfile: ()-> Unit){
@@ -99,7 +114,7 @@ fun RegistrationScreen(viewModel: RegistrationViewModel, onNavigationToProfile:
 @Composable
 fun testOtpTextField(){
     val text =  remember { mutableStateOf("")}
-OtpTextField(text.value, 4){
+OtpTextField(text.value, 6, hasError = false){
     text.value = it
 }
 }
@@ -108,6 +123,7 @@ OtpTextField(text.value, 4){
 fun OtpTextField(
 value: String,
 length: Int,
+hasError: Boolean = false,
 modifier: Modifier = Modifier,
 boxWidth: Dp = 50.dp,
 boxHeight: Dp = 100.dp,
@@ -115,6 +131,7 @@ keyboardOptions: KeyboardOptions = KeyboardOptions(keyboardType = KeyboardType.N
 keyboardActions: KeyboardActions = KeyboardActions(),
 onValueChanged: (String) -> Unit
 ){
+
     BasicTextField(
         value = value,
         onValueChange = {
@@ -131,12 +148,19 @@ onValueChanged: (String) -> Unit
                 .size(width = (boxWidth + spaceBoxBetween) * length, height = boxHeight),
                 horizontalArrangement = Arrangement.SpaceEvenly
             ) {
+                val border = BorderStroke(
+                    width = 1.dp,
+                    color = if(hasError) Color.Red else Color.Unspecified
+                )
                 repeat(length){
                     Box(
                         modifier = Modifier
-                            .width(46.dp)
-                            .fillMaxHeight()
-                            .border(width = 1.dp, color = Color.Blue),
+                            .width(boxWidth)
+                            .height(boxHeight)
+                            .clip(shape = RoundedCornerShape(12.dp))
+                            .background(Color.LightGray)
+                            .border(border, shape =  RoundedCornerShape(size = 12.dp))
+                        ,
                         contentAlignment = Alignment.Center
                     ) {
                         Text(text = value.getOrNull(it)?.toString() ?: "")
@@ -146,4 +170,50 @@ onValueChanged: (String) -> Unit
             }
         }
     )
+}
+
+@Preview
+@Composable
+fun previewAuthTopBar(){
+    AuthorizeTopBar {  }
+}
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun AuthorizeTopBar(title: String = "", onNavigationToProfile: () -> Unit){
+    TopAppBar(title =  {
+        Text(text = title)
+    }, navigationIcon = {
+        IconButton(
+            onNavigationToProfile,
+        ) {
+            Icon(painterResource(R.drawable.ic_launcher_foreground), contentDescription = null)
+        }
+    }
+    )
+}
+
+
+
+
+@Composable
+fun BaseTimerText(text: @Composable (text: String) -> Unit,
+                  period: Long,
+                  action: () -> Unit )
+{
+    val displayText = remember { mutableStateOf("") }
+    val counter = object : CountDownTimer(period * 1000, 1 * 1000){
+        override fun onTick(millisUntilFinished: Long) {
+            (millisUntilFinished / 1000).seconds.toComponents { minutes, seconds, nanoseconds ->
+                displayText.value = "$minutes:$seconds"
+            }
+        }
+        override fun onFinish() {
+            action()
+        }
+    }
+    LaunchedEffect(Unit) {
+        counter.start()
+    }
+    text(displayText.value)
 }