PM-15049 PW strength indicator design audit (#4334)

This commit is contained in:
Dave Severns 2024-11-19 10:16:27 -05:00 committed by GitHub
parent dca88a58e7
commit 531b003347
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -42,14 +42,20 @@ fun PasswordStrengthIndicator(
currentCharacterCount: Int,
minimumCharacterCount: Int? = null,
) {
val minimumRequirementMet = (minimumCharacterCount == null) ||
(currentCharacterCount >= minimumCharacterCount)
val widthPercent by animateFloatAsState(
targetValue = when (state) {
targetValue = if (minimumRequirementMet) {
when (state) {
PasswordStrengthState.NONE -> 0f
PasswordStrengthState.WEAK_1 -> .25f
PasswordStrengthState.WEAK_2 -> .5f
PasswordStrengthState.WEAK_3 -> .66f
PasswordStrengthState.GOOD -> .82f
PasswordStrengthState.STRONG -> 1f
}
} else {
0f
},
label = "Width Percent State",
)
@ -107,6 +113,7 @@ fun PasswordStrengthIndicator(
minimumCharacterCount = minCount,
)
}
if (minimumRequirementMet) {
Text(
text = label(),
style = BitwardenTheme.typography.labelSmall,
@ -114,6 +121,7 @@ fun PasswordStrengthIndicator(
)
}
}
}
}
@Composable
@ -122,14 +130,6 @@ private fun MinimumCharacterCount(
minimumRequirementMet: Boolean,
minimumCharacterCount: Int,
) {
val characterCountColor by animateColorAsState(
targetValue = if (minimumRequirementMet) {
BitwardenTheme.colorScheme.status.strong
} else {
BitwardenTheme.colorScheme.text.secondary
},
label = "minmumCharacterCountColor",
)
Row(
modifier = modifier,
verticalAlignment = Alignment.CenterVertically,
@ -145,14 +145,14 @@ private fun MinimumCharacterCount(
Icon(
painter = rememberVectorPainter(id = it),
contentDescription = null,
tint = characterCountColor,
tint = BitwardenTheme.colorScheme.text.secondary,
modifier = Modifier.size(12.dp),
)
}
Spacer(modifier = Modifier.width(2.dp))
Text(
text = stringResource(R.string.minimum_characters, minimumCharacterCount),
color = characterCountColor,
color = BitwardenTheme.colorScheme.text.secondary,
style = BitwardenTheme.typography.labelSmall,
)
}