Add InputPassword

src/components/base/InputPassword/index.js

@@ -84,9 +84,11 @@ class InputPassword extends PureComponent<Props, State> {
   }
 
   render() {
-    const { t, maxLength } = this.props
+    const { t, value, maxLength } = this.props
     const { passwordStrength, inputType } = this.state
 
+    const hasValue = value.trim() !== ''
+
     return (
       <Box flow={1}>
         <Input
@@ -101,11 +103,15 @@ class InputPassword extends PureComponent<Props, State> {
           }
         />
         <Box flow={1} horizontal>
-          {[1, 2, 3, 4].map(v => (
-            <Strength key={v} warning={passwordStrength <= 1} activated={passwordStrength >= v} />
+          {[0, 1, 2, 3, 4].map(v => (
+            <Strength
+              key={v}
+              warning={passwordStrength <= 1}
+              activated={hasValue && passwordStrength >= v}
+            />
           ))}
         </Box>
-        {passwordStrength > 0 && (
+        {hasValue && (
           <Warning passwordStrength={passwordStrength}>
             {t(`password:warning_${passwordStrength}`)}
           </Warning>

static/i18n/en/password.yml

@@ -1,3 +1,4 @@
+warning_0: Warning 0
 warning_1: Warning 1
 warning_2: Warning 2
 warning_3: Warning 3