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,34 +1,67 @@
 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
 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.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
+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
 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){
@@ -76,4 +109,111 @@ fun RegistrationScreen(viewModel: RegistrationViewModel, onNavigationToProfile:
             }
         }
     }
+}
+@Preview
+@Composable
+fun testOtpTextField(){
+    val text =  remember { mutableStateOf("")}
+OtpTextField(text.value, 6, hasError = false){
+    text.value = it
+}
+}
+
+@Composable
+fun OtpTextField(
+value: String,
+length: Int,
+hasError: Boolean = false,
+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
+            ) {
+                val border = BorderStroke(
+                    width = 1.dp,
+                    color = if(hasError) Color.Red else Color.Unspecified
+                )
+                repeat(length){
+                    Box(
+                        modifier = Modifier
+                            .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() ?: "")
+                    }
+                }
+
+            }
+        }
+    )
+}
+
+@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)
 }