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