diff --git a/core/designsystem/src/main/kotlin/org/mifospay/core/designsystem/component/TextField.kt b/core/designsystem/src/main/kotlin/org/mifospay/core/designsystem/component/TextField.kt index a7b692f23..ecb46bcc3 100644 --- a/core/designsystem/src/main/kotlin/org/mifospay/core/designsystem/component/TextField.kt +++ b/core/designsystem/src/main/kotlin/org/mifospay/core/designsystem/component/TextField.kt @@ -84,18 +84,15 @@ fun MfOutlinedTextField( }, singleLine = singleLine, trailingIcon = trailingIcon, - keyboardActions = - KeyboardActions { + keyboardActions = KeyboardActions { onKeyboardActions?.invoke() }, keyboardOptions = keyboardOptions, - colors = - OutlinedTextFieldDefaults.colors( + colors = OutlinedTextFieldDefaults.colors( focusedBorderColor = MaterialTheme.colorScheme.onSurface, focusedLabelColor = MaterialTheme.colorScheme.onSurface, ), - textStyle = - LocalDensity.current.run { + textStyle = LocalDensity.current.run { TextStyle(fontSize = 18.sp, color = MaterialTheme.colorScheme.onSurface) }, ) @@ -112,27 +109,72 @@ fun MfPasswordTextField( modifier: Modifier = Modifier, errorMessage: String? = null, ) { - OutlinedTextField( - modifier = modifier, + var isFocused by rememberSaveable { mutableStateOf(false) } + + BasicTextField( value = password, onValueChange = onPasswordChange, - label = { Text(label) }, - isError = isError, - visualTransformation = - if (isPasswordVisible) { - VisualTransformation.None - } else { - PasswordVisualTransformation() - }, - supportingText = { - errorMessage?.let { Text(text = it) } - }, - trailingIcon = { - IconButton(onClick = onTogglePasswordVisibility) { - Icon( - if (isPasswordVisible) Icons.Filled.Visibility else Icons.Filled.VisibilityOff, - contentDescription = "Show password", + textStyle = LocalTextStyle.current.copy(color = Color.Black), + modifier = modifier + .fillMaxWidth() + .padding(horizontal = 20.dp) + .padding(top = 10.dp) + .onFocusChanged { focusState -> isFocused = focusState.isFocused } + .semantics(mergeDescendants = true) {}, + enabled = true, + readOnly = false, + visualTransformation = if (isPasswordVisible) VisualTransformation.None else PasswordVisualTransformation(), + keyboardOptions = KeyboardOptions(imeAction = ImeAction.Next), + keyboardActions = KeyboardActions.Default, + singleLine = true, + maxLines = 1, + minLines = 1, + cursorBrush = SolidColor(NewUi.primaryColor), + decorationBox = { innerTextField -> + Column { + Text( + text = label, + color = NewUi.primaryColor, + style = MaterialTheme.typography.labelLarge, + modifier = Modifier.align(alignment = Alignment.Start), + ) + + Spacer(modifier = Modifier.height(5.dp)) + + Box( + modifier = Modifier + .fillMaxWidth() + .background(Color.Transparent), + contentAlignment = Alignment.CenterStart, + ) { + innerTextField() + + IconButton( + onClick = onTogglePasswordVisibility, + modifier = Modifier.align(Alignment.CenterEnd), + ) { + Icon( + if (isPasswordVisible) Icons.Filled.Visibility else Icons.Filled.VisibilityOff, + contentDescription = "Toggle password visibility", + tint = Color.Black, + ) + } + } + + Spacer(modifier = Modifier.height(5.dp)) + HorizontalDivider( + thickness = 1.dp, + color = if (isFocused) NewUi.secondaryColor else NewUi.onSurface.copy(alpha = 0.05f), ) + + if (isError && errorMessage != null) { + Text( + text = errorMessage, + color = MaterialTheme.colorScheme.error, + style = MaterialTheme.typography.bodySmall, + modifier = Modifier.padding(top = 4.dp), + ) + } } }, ) @@ -157,14 +199,12 @@ fun MifosOutlinedTextField( onValueChange = onValueChange, label = { Text(stringResource(id = label)) }, modifier = modifier, - leadingIcon = - if (icon != null) { + leadingIcon = if (icon != null) { { Image( painter = painterResource(id = icon), contentDescription = null, - colorFilter = - ColorFilter.tint( + colorFilter = ColorFilter.tint( MaterialTheme.colorScheme.onSurface, ), ) @@ -175,13 +215,11 @@ fun MifosOutlinedTextField( trailingIcon = trailingIcon, maxLines = maxLines, singleLine = singleLine, - colors = - OutlinedTextFieldDefaults.colors( + colors = OutlinedTextFieldDefaults.colors( focusedBorderColor = MaterialTheme.colorScheme.onSurface, focusedLabelColor = MaterialTheme.colorScheme.onSurface, ), - textStyle = - LocalDensity.current.run { + textStyle = LocalDensity.current.run { TextStyle(fontSize = 18.sp, color = MaterialTheme.colorScheme.onSurface) }, keyboardOptions = KeyboardOptions(imeAction = ImeAction.Next), @@ -301,8 +339,11 @@ fun MfOutlinedTextFieldPreview() { fun MfPasswordTextFieldPreview() { MifosTheme { val password = " " + Box( + modifier = Modifier.background(color = Color.White), + ) { MfPasswordTextField( password = password, @@ -313,6 +354,7 @@ fun MfPasswordTextFieldPreview() { onPasswordChange = { }, modifier = Modifier.fillMaxWidth(), errorMessage = "Password must be at least 6 characters", + ) } } diff --git a/feature/editpassword/src/main/kotlin/org/mifospay/feature/editpassword/EditPasswordScreen.kt b/feature/editpassword/src/main/kotlin/org/mifospay/feature/editpassword/EditPasswordScreen.kt index e49c4ede1..d971ca1d7 100644 --- a/feature/editpassword/src/main/kotlin/org/mifospay/feature/editpassword/EditPasswordScreen.kt +++ b/feature/editpassword/src/main/kotlin/org/mifospay/feature/editpassword/EditPasswordScreen.kt @@ -9,11 +9,13 @@ */ package org.mifospay.feature.editpassword +import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.PaddingValues -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.material3.SnackbarHost import androidx.compose.material3.SnackbarHostState @@ -41,7 +43,9 @@ import org.koin.androidx.compose.koinViewModel import org.mifospay.core.designsystem.component.MfPasswordTextField import org.mifospay.core.designsystem.component.MifosButton import org.mifospay.core.designsystem.component.MifosScaffold +import org.mifospay.core.designsystem.theme.MifosBlue import org.mifospay.core.designsystem.theme.MifosTheme +import org.mifospay.core.designsystem.theme.NewUi.gradientOne @Composable internal fun EditPasswordScreen( @@ -119,6 +123,8 @@ private fun EditPasswordScreen( modifier = Modifier .fillMaxSize() .padding(paddingValues), + horizontalAlignment = Alignment.CenterHorizontally, + verticalArrangement = Arrangement.Center, ) { MfPasswordTextField( password = currentPassword, @@ -130,8 +136,9 @@ private fun EditPasswordScreen( }, onPasswordChange = { currentPassword = it }, modifier = Modifier - .fillMaxWidth() - .padding(horizontal = 16.dp), + .fillMaxWidth(0.9f) + .padding(vertical = 8.dp), + ) MfPasswordTextField( password = newPassword, @@ -142,8 +149,8 @@ private fun EditPasswordScreen( onTogglePasswordVisibility = { isNewPasswordVisible = !isNewPasswordVisible }, onPasswordChange = { newPassword = it }, modifier = Modifier - .fillMaxWidth() - .padding(horizontal = 16.dp), + .fillMaxWidth(0.9f) + .padding(vertical = 8.dp), errorMessage = if (newPassword.isNotEmpty() && newPassword.length < 6) { stringResource( id = R.string.feature_editpassword_password_length_error, @@ -162,8 +169,9 @@ private fun EditPasswordScreen( }, onPasswordChange = { confirmNewPassword = it }, modifier = Modifier - .fillMaxWidth() - .padding(horizontal = 16.dp), + .fillMaxWidth(0.9f) + .padding(vertical = 8.dp), + errorMessage = if (newPassword != confirmNewPassword && confirmNewPassword.isNotEmpty() ) { @@ -175,29 +183,45 @@ private fun EditPasswordScreen( }, ) - Row( + Column( modifier = Modifier .fillMaxWidth() .padding(top = 20.dp, start = 16.dp, end = 16.dp), - verticalAlignment = Alignment.CenterVertically, + horizontalAlignment = Alignment.CenterHorizontally, ) { + Spacer(Modifier.weight(1f)) + MifosButton( - onClick = { onCancelChanges.invoke() }, modifier = Modifier - .weight(1f) - .padding(8.dp), + .fillMaxWidth() + .padding(horizontal = 20.dp) + .height(54.dp), + color = MifosBlue, + onClick = { + onSave.invoke(currentPassword, newPassword, confirmNewPassword) + }, contentPadding = PaddingValues(16.dp), - content = { Text(text = stringResource(id = R.string.feature_editpassword_cancel)) }, + content = { Text(text = stringResource(id = R.string.feature_editpassword_save)) }, ) + Spacer(modifier = Modifier.height(8.dp)) + MifosButton( modifier = Modifier - .weight(1f) - .padding(8.dp), + .fillMaxWidth() + .padding(horizontal = 20.dp) + .height(54.dp), + color = gradientOne, + onClick = { - onSave.invoke(currentPassword, newPassword, confirmNewPassword) + onCancelChanges.invoke() }, contentPadding = PaddingValues(16.dp), - content = { Text(text = stringResource(id = R.string.feature_editpassword_save)) }, + content = { + Text( + text = stringResource(id = R.string.feature_editpassword_cancel), + color = MifosBlue, + ) + }, ) } } diff --git a/feature/editpassword/src/main/res/values/strings.xml b/feature/editpassword/src/main/res/values/strings.xml index c1625d1fa..e2e34c3ae 100644 --- a/feature/editpassword/src/main/res/values/strings.xml +++ b/feature/editpassword/src/main/res/values/strings.xml @@ -9,7 +9,7 @@ See https://github.com/openMF/mobile-wallet/blob/master/LICENSE.md --> - Password changed successfull + Password changed successful Change Password Current Password New Password @@ -18,5 +18,5 @@ Password too short Password mismatch Cancel - Save + Save Password \ No newline at end of file