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

bitwarden · Nov 19, 2024 · 531b003 · 531b003
1 parent dca88a5
commit 531b003
Showing 1 changed file with 22 additions and 22 deletions.
diff --git a/...ava/com/x8bit/bitwarden/ui/auth/feature/completeregistration/PasswordStrengthIndicator.kt b/...ava/com/x8bit/bitwarden/ui/auth/feature/completeregistration/PasswordStrengthIndicator.kt
@@ -42,14 +42,20 @@ fun PasswordStrengthIndicator(
     currentCharacterCount: Int,
     minimumCharacterCount: Int? = null,
 ) {
+    val minimumRequirementMet = (minimumCharacterCount == null) ||
+        (currentCharacterCount >= minimumCharacterCount)
     val widthPercent by animateFloatAsState(
-        targetValue = when (state) {
-            PasswordStrengthState.NONE -> 0f
-            PasswordStrengthState.WEAK_1 -> .25f
-            PasswordStrengthState.WEAK_2 -> .5f
-            PasswordStrengthState.WEAK_3 -> .66f
-            PasswordStrengthState.GOOD -> .82f
-            PasswordStrengthState.STRONG -> 1f
+        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,11 +113,13 @@ fun PasswordStrengthIndicator(
                     minimumCharacterCount = minCount,
                 )
             }
-            Text(
-                text = label(),
-                style = BitwardenTheme.typography.labelSmall,
-                color = indicatorColor,
-            )
+            if (minimumRequirementMet) {
+                Text(
+                    text = label(),
+                    style = BitwardenTheme.typography.labelSmall,
+                    color = indicatorColor,
+                )
+            }
         }
     }
 }
@@ -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,
         )
     }