|
@@ -0,0 +1,319 @@
|
|
|
+package com.fastest.pass.forgotpassword.presentation.components
|
|
|
+
|
|
|
+import androidx.compose.foundation.Image
|
|
|
+import androidx.compose.foundation.background
|
|
|
+import androidx.compose.foundation.border
|
|
|
+import androidx.compose.foundation.clickable
|
|
|
+import androidx.compose.foundation.layout.Arrangement
|
|
|
+import androidx.compose.foundation.layout.Box
|
|
|
+import androidx.compose.foundation.layout.Column
|
|
|
+import androidx.compose.foundation.layout.ColumnScope
|
|
|
+import androidx.compose.foundation.layout.Row
|
|
|
+import androidx.compose.foundation.layout.Spacer
|
|
|
+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.statusBarsPadding
|
|
|
+import androidx.compose.foundation.layout.width
|
|
|
+import androidx.compose.foundation.layout.wrapContentHeight
|
|
|
+import androidx.compose.foundation.shape.RoundedCornerShape
|
|
|
+import androidx.compose.foundation.text.ClickableText
|
|
|
+import androidx.compose.foundation.text.KeyboardOptions
|
|
|
+import androidx.compose.material3.Button
|
|
|
+import androidx.compose.material3.ButtonDefaults
|
|
|
+import androidx.compose.material3.IconButton
|
|
|
+import androidx.compose.material3.MaterialTheme
|
|
|
+import androidx.compose.material3.Surface
|
|
|
+import androidx.compose.material3.Text
|
|
|
+import androidx.compose.material3.TextField
|
|
|
+import androidx.compose.material3.TextFieldDefaults
|
|
|
+import androidx.compose.runtime.Composable
|
|
|
+import androidx.compose.runtime.mutableStateListOf
|
|
|
+import androidx.compose.runtime.remember
|
|
|
+import androidx.compose.ui.Alignment
|
|
|
+import androidx.compose.ui.Modifier
|
|
|
+import androidx.compose.ui.draw.clip
|
|
|
+import androidx.compose.ui.focus.FocusDirection
|
|
|
+import androidx.compose.ui.focus.FocusManager
|
|
|
+import androidx.compose.ui.graphics.Color
|
|
|
+import androidx.compose.ui.input.key.Key
|
|
|
+import androidx.compose.ui.input.key.KeyEventType
|
|
|
+import androidx.compose.ui.input.key.key
|
|
|
+import androidx.compose.ui.input.key.onKeyEvent
|
|
|
+import androidx.compose.ui.input.key.type
|
|
|
+import androidx.compose.ui.platform.LocalFocusManager
|
|
|
+import androidx.compose.ui.platform.LocalSoftwareKeyboardController
|
|
|
+import androidx.compose.ui.res.colorResource
|
|
|
+import androidx.compose.ui.res.painterResource
|
|
|
+import androidx.compose.ui.res.stringResource
|
|
|
+import androidx.compose.ui.text.AnnotatedString
|
|
|
+import androidx.compose.ui.text.input.KeyboardType
|
|
|
+import androidx.compose.ui.text.style.TextAlign
|
|
|
+import androidx.compose.ui.unit.dp
|
|
|
+import androidx.compose.ui.unit.sp
|
|
|
+import com.fastest.pass.R
|
|
|
+import com.fastest.pass.login.presentation.components.ClickType
|
|
|
+
|
|
|
+enum class ClickTypeForgotVerify {
|
|
|
+ GO_BACK,
|
|
|
+ GO_TO_CONFIRM_PASSWORD
|
|
|
+}
|
|
|
+
|
|
|
+@Composable
|
|
|
+fun ForgotPasswordVerifyScreen(clickType: (ClickTypeForgotVerify) -> Unit) {
|
|
|
+ Box(
|
|
|
+ modifier = Modifier
|
|
|
+ .background(colorResource(id = R.color.blue_login))
|
|
|
+ .fillMaxSize()
|
|
|
+ .statusBarsPadding()
|
|
|
+ ) {
|
|
|
+ Column(
|
|
|
+ modifier = Modifier
|
|
|
+ .fillMaxSize()
|
|
|
+ .padding(top = 0.dp)
|
|
|
+ .statusBarsPadding()
|
|
|
+ ) {
|
|
|
+ ShowHeaderFPV(text = stringResource(id = R.string.forgot_password)) { clickTypeForgotVerify ->
|
|
|
+ clickType(clickTypeForgotVerify)
|
|
|
+ }
|
|
|
+
|
|
|
+ Column(
|
|
|
+ modifier = Modifier
|
|
|
+ .fillMaxSize()
|
|
|
+ .padding(top = 25.dp)
|
|
|
+ .clip(RoundedCornerShape(topStart = 35.dp, topEnd = 35.dp))
|
|
|
+ .background(
|
|
|
+ colorResource(id = R.color.light_gray_login),
|
|
|
+ )
|
|
|
+ ) {
|
|
|
+ ForgotVerifyText(R.string.enter_verification_code)
|
|
|
+ OTPFields()
|
|
|
+ Spacer(modifier = Modifier.height(25.dp))
|
|
|
+ VerifyButton(buttonText = R.string.verify) { clickTypeForgotVerify ->
|
|
|
+ clickType(clickTypeForgotVerify)
|
|
|
+ }
|
|
|
+ Spacer(modifier = Modifier.height(15.dp))
|
|
|
+ OTPText(stringResource(id = R.string.enter_otp))
|
|
|
+ OTPText("fastestpass@gmail.com")
|
|
|
+ Spacer(modifier = Modifier.height(20.dp))
|
|
|
+ ResendOTPCode()
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@Composable
|
|
|
+fun ColumnScope.ShowHeaderFPV(text: String, clickType: (ClickTypeForgotVerify) -> Unit) {
|
|
|
+ Row(
|
|
|
+ modifier = Modifier
|
|
|
+ .align(Alignment.Start)
|
|
|
+ .padding(top = 30.dp)
|
|
|
+ .fillMaxWidth(),
|
|
|
+ verticalAlignment = Alignment.CenterVertically
|
|
|
+ ) {
|
|
|
+ IconButton(
|
|
|
+ onClick = {
|
|
|
+ clickType.invoke(ClickTypeForgotVerify.GO_BACK)
|
|
|
+ },
|
|
|
+ modifier = Modifier
|
|
|
+ .padding(start = 30.dp)
|
|
|
+ .size(24.dp, 24.dp)
|
|
|
+ ) {
|
|
|
+ Image(
|
|
|
+ painter = painterResource(id = R.drawable.arrow_left),
|
|
|
+ contentDescription = "Arrow-Back",
|
|
|
+ modifier = Modifier.size(24.dp, 24.dp)
|
|
|
+ )
|
|
|
+ }
|
|
|
+ Surface(
|
|
|
+ modifier = Modifier
|
|
|
+ .padding(start = 15.dp),
|
|
|
+ color = colorResource(id = R.color.transparent)
|
|
|
+ ) {
|
|
|
+ Text(
|
|
|
+ text = text,
|
|
|
+ color = colorResource(id = R.color.white),
|
|
|
+ style = MaterialTheme.typography.displayLarge.copy(
|
|
|
+ fontSize = 24.sp
|
|
|
+ ),
|
|
|
+ )
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@Composable
|
|
|
+fun ColumnScope.ForgotVerifyText(
|
|
|
+ forgotText: Int,
|
|
|
+) {
|
|
|
+ Text(
|
|
|
+ text = stringResource(id = R.string.verify_your_email),
|
|
|
+ color = colorResource(id = R.color.gray_splash),
|
|
|
+ style = MaterialTheme.typography.headlineLarge.copy(
|
|
|
+ fontSize = 26.sp
|
|
|
+ ),
|
|
|
+ lineHeight = 20.sp,
|
|
|
+ modifier = Modifier
|
|
|
+ .align(Alignment.Start)
|
|
|
+ .padding(start = 30.dp, top = 35.dp)
|
|
|
+ )
|
|
|
+ Text(
|
|
|
+ text = stringResource(id = forgotText),
|
|
|
+ color = colorResource(id = R.color.gray_splash),
|
|
|
+ style = MaterialTheme.typography.displayLarge.copy(
|
|
|
+ fontSize = 18.sp
|
|
|
+ ),
|
|
|
+ lineHeight = 25.sp,
|
|
|
+ modifier = Modifier
|
|
|
+ .align(Alignment.Start)
|
|
|
+ .padding(start = 30.dp, top = 5.dp, end = 50.dp)
|
|
|
+
|
|
|
+ )
|
|
|
+}
|
|
|
+
|
|
|
+@Composable
|
|
|
+fun ColumnScope.OTPFields() {
|
|
|
+ val otpLength = 4
|
|
|
+ val keyboardController = LocalSoftwareKeyboardController.current
|
|
|
+ val focusManager = LocalFocusManager.current
|
|
|
+ var otpValues = remember { mutableStateListOf(*Array(otpLength) {""}) }
|
|
|
+
|
|
|
+ Row(
|
|
|
+ modifier = Modifier
|
|
|
+ .fillMaxWidth()
|
|
|
+ .padding(top = 50.dp)
|
|
|
+ .align(Alignment.CenterHorizontally),
|
|
|
+ verticalAlignment = Alignment.CenterVertically,
|
|
|
+ horizontalArrangement = Arrangement.Center
|
|
|
+ ) {
|
|
|
+ for (index in 0 until otpLength) {
|
|
|
+ TextField(
|
|
|
+ value = otpValues[index],
|
|
|
+ onValueChange = { newValue ->
|
|
|
+ if (newValue.length <= 1) {
|
|
|
+ otpValues[index] = newValue
|
|
|
+
|
|
|
+ if (newValue.isNotEmpty() && index < otpLength - 1) {
|
|
|
+ focusManager.moveFocus(FocusDirection.Next)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
|
|
|
+ singleLine = true,
|
|
|
+ maxLines = 1,
|
|
|
+ textStyle = MaterialTheme.typography.displaySmall,
|
|
|
+ modifier = Modifier
|
|
|
+ .padding(horizontal = 6.dp)
|
|
|
+ .width(50.dp)
|
|
|
+ .height(60.dp)
|
|
|
+ .border(
|
|
|
+ 1.dp,
|
|
|
+ color = colorResource(id = R.color.gray_border_textfield),
|
|
|
+ shape = RoundedCornerShape(8.dp)
|
|
|
+ ),
|
|
|
+// .onKeyEvent { event ->
|
|
|
+// if (event.type == KeyEventType.KeyDown && event.key == Key.Backspace) {
|
|
|
+// if (otpValues[index].isEmpty() && index > 0) {
|
|
|
+// focusManager.moveFocus(FocusDirection.Previous)
|
|
|
+// otpValues[index - 1] = ""
|
|
|
+// }
|
|
|
+// true
|
|
|
+// } else {
|
|
|
+// false
|
|
|
+// }
|
|
|
+// },
|
|
|
+ colors = TextFieldDefaults.colors(
|
|
|
+ focusedLabelColor = colorResource(id = R.color.gray_splash),
|
|
|
+ unfocusedContainerColor = colorResource(id = R.color.transparent),
|
|
|
+ focusedContainerColor = colorResource(id = R.color.transparent),
|
|
|
+ focusedIndicatorColor = colorResource(id = R.color.transparent),
|
|
|
+ disabledIndicatorColor = colorResource(id = R.color.transparent),
|
|
|
+ unfocusedIndicatorColor = colorResource(id = R.color.transparent),
|
|
|
+ cursorColor = colorResource(id = R.color.gray_splash),
|
|
|
+ ),
|
|
|
+ )
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@Composable
|
|
|
+fun ColumnScope.VerifyButton(buttonText: Int, clickType: (ClickTypeForgotVerify) -> Unit) {
|
|
|
+ Button(
|
|
|
+ modifier = Modifier
|
|
|
+ .padding(start = 30.dp, end = 30.dp,)
|
|
|
+ .background(colorResource(id = R.color.transparent))
|
|
|
+ .fillMaxWidth()
|
|
|
+ .height(60.dp)
|
|
|
+ .clickable() {},
|
|
|
+ onClick = {
|
|
|
+ clickType.invoke(ClickTypeForgotVerify.GO_TO_CONFIRM_PASSWORD)
|
|
|
+ },
|
|
|
+ shape = RoundedCornerShape(15.dp),
|
|
|
+// border = BorderStroke(25.dp, colorResource(id = R.color.black)),
|
|
|
+ colors = ButtonDefaults.buttonColors(
|
|
|
+ contentColor = colorResource(id = R.color.white),
|
|
|
+ containerColor = colorResource(id = R.color.red_login_button),
|
|
|
+ ),
|
|
|
+ )
|
|
|
+ {
|
|
|
+ Text(
|
|
|
+ text = stringResource(id = buttonText),
|
|
|
+ style = MaterialTheme.typography.bodyMedium.copy(
|
|
|
+ fontSize = 20.sp,
|
|
|
+ color = colorResource(id = R.color.white)
|
|
|
+ ),
|
|
|
+ textAlign = TextAlign.Center
|
|
|
+ )
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@Composable
|
|
|
+fun ColumnScope.OTPText(text: String) {
|
|
|
+ Text(
|
|
|
+ text = text,
|
|
|
+ color = colorResource(id = R.color.gray_splash),
|
|
|
+ style = MaterialTheme.typography.displayLarge.copy(
|
|
|
+ fontSize = 18.sp
|
|
|
+ ),
|
|
|
+ lineHeight = 25.sp,
|
|
|
+ modifier = Modifier
|
|
|
+ .align(Alignment.CenterHorizontally)
|
|
|
+ .padding(start = 30.dp, top = 0.dp, end = 50.dp)
|
|
|
+
|
|
|
+ )
|
|
|
+}
|
|
|
+
|
|
|
+@Composable
|
|
|
+fun ColumnScope.ResendOTPCode() {
|
|
|
+ Row(
|
|
|
+ modifier = Modifier
|
|
|
+ .fillMaxWidth()
|
|
|
+ .padding(top = 0.dp)
|
|
|
+ .padding(horizontal = 30.dp),
|
|
|
+ verticalAlignment = Alignment.CenterVertically,
|
|
|
+ horizontalArrangement = Arrangement.Center
|
|
|
+ ) {
|
|
|
+ Text(
|
|
|
+ text = stringResource(id = R.string.need_new_code),
|
|
|
+ color = colorResource(id = R.color.gray_splash),
|
|
|
+ style = MaterialTheme.typography.displayLarge.copy(
|
|
|
+ fontSize = 16.sp
|
|
|
+ ),
|
|
|
+ lineHeight = 25.sp,
|
|
|
+ modifier = Modifier
|
|
|
+ )
|
|
|
+ Spacer(modifier = Modifier.width(3.dp))
|
|
|
+ ClickableText(
|
|
|
+ text = AnnotatedString(stringResource(id = R.string.resend)),
|
|
|
+ onClick = {},
|
|
|
+ style = MaterialTheme.typography.displayLarge.copy(
|
|
|
+ fontSize = 16.sp,
|
|
|
+ lineHeight = 25.sp,
|
|
|
+ color = colorResource(id = R.color.sky_green),
|
|
|
+ ),
|
|
|
+ modifier = Modifier,
|
|
|
+ )
|
|
|
+ }
|
|
|
+}
|