mirrors/bitwarden-android
1
0
Fork 0
mirror of https://github.com/bitwarden/android.git synced 2025-02-17 04:19:54 +03:00
Code Issues Projects Releases Packages Wiki Activity

Add visual transformation for password character colors (#337)

Browse source
This commit is contained in:
David Perez 2023-12-06 15:36:42 -06:00 • committed by Álison Fernandes
parent b6c9964b6c
commit 30a9d76d70
2 changed files with 61 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
app/src/main/java/com/x8bit/bitwarden/ui/platform/components/BitwardenPasswordField.kt
View file

@ -27,6 +27,7 @@ import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.text.input.VisualTransformation
import androidx.compose.ui.tooling.preview.Preview
import com.x8bit.bitwarden.R
import com.x8bit.bitwarden.ui.platform.components.util.nonLetterColorVisualTransformation
/**
* Represents a Bitwarden-styled password field that hoists show/hide password state to the caller.
@ -68,10 +69,10 @@ fun BitwardenPasswordField(
label = { Text(text = label) },
value = value,
onValueChange = onValueChange,
visualTransformation = if (showPassword) {
VisualTransformation.None
} else {
PasswordVisualTransformation()
visualTransformation = when {
!showPassword -> PasswordVisualTransformation()
readOnly -> nonLetterColorVisualTransformation()
else -> VisualTransformation.None
},
singleLine = singleLine,
readOnly = readOnly,

56
app/src/main/java/com/x8bit/bitwarden/ui/platform/components/util/NonLetterColorVisualTransformation.kt Normal file
View file

@ -0,0 +1,56 @@
package com.x8bit.bitwarden.ui.platform.components.util
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.AnnotatedString
import androidx.compose.ui.text.SpanStyle
import androidx.compose.ui.text.input.OffsetMapping
import androidx.compose.ui.text.input.TransformedText
import androidx.compose.ui.text.input.VisualTransformation
import androidx.compose.ui.text.withStyle
/**
* Returns the [VisualTransformation] that alters the output of the text in an input field by
* applying different colors to the digits and special characters, letters will remain unaffected.
*/
@Composable
fun nonLetterColorVisualTransformation(): VisualTransformation =
NonLetterColorVisualTransformation(
digitColor = MaterialTheme.colorScheme.primary,
specialCharacterColor = MaterialTheme.colorScheme.error,
)
/**
* Alters the visual output of the text in an input field.
*
* All numbers in the text will have the [digitColor] applied to it and special characters will
* have the [specialCharacterColor] applied.
*/
private class NonLetterColorVisualTransformation(
private val digitColor: Color,
private val specialCharacterColor: Color,
) : VisualTransformation {
override fun filter(text: AnnotatedString): TransformedText =
TransformedText(
buildTransformedAnnotatedString(text.toString()),
OffsetMapping.Identity,
)
private fun buildTransformedAnnotatedString(text: String): AnnotatedString {
val builder = AnnotatedString.Builder()
text.toCharArray().forEach { char ->
when {
char.isDigit() -> builder.withStyle(SpanStyle(color = digitColor)) { append(char) }
!char.isLetter() -> {
builder.withStyle(SpanStyle(color = specialCharacterColor)) { append(char) }
}
else -> builder.append(char)
}
}
return builder.toAnnotatedString()
}
}