Feature: import from seed password strength (#639)

* add password strength to import from seed * snapshots * padding and jump to password
MetaMask · May 7, 2019 · e89984d · e89984d
1 parent 23d50a3
commit e89984d
Show file tree

Hide file tree

Showing 4 changed files with 407 additions and 111 deletions.
diff --git a/app/components/Views/ImportFromSeed/__snapshots__/index.test.js.snap b/app/components/Views/ImportFromSeed/__snapshots__/index.test.js.snap
@@ -25,7 +25,7 @@ exports[`ImportFromSeed should render correctly 1`] = `
     style={
       Object {
         "flex": 1,
-        "padding": 20,
+        "paddingHorizontal": 20,
       }
     }
     viewIsInsideTabBar={false}
@@ -90,95 +90,208 @@ exports[`ImportFromSeed should render correctly 1`] = `
         style={
           Object {
             "marginBottom": 10,
+            "marginTop": 20,
           }
         }
       >
-        <Text
+        <AnimatedComponent
           style={
-            Object {
-              "fontSize": 16,
-              "marginBottom": 10,
-              "marginTop": 10,
-            }
+            Array [
+              Object {
+                "color": "#999999",
+                "fontFamily": "Roboto",
+                "fontSize": 16,
+                "fontWeight": "400",
+                "marginLeft": 5,
+                "marginTop": -35,
+                "position": "absolute",
+                "textAlign": "left",
+              },
+              Object {
+                "transform": Array [
+                  Object {
+                    "scale": 1,
+                  },
+                  Object {
+                    "translateX": 0,
+                  },
+                  Object {
+                    "translateY": 50,
+                  },
+                ],
+              },
+            ]
           }
         >
-          New Password (min. 8 characters)
-        </Text>
+          New Password
+        </AnimatedComponent>
         <TextInput
           allowFontScaling={true}
           autoCapitalize="none"
+          onBlur={[Function]}
           onChangeText={[Function]}
+          onFocus={[Function]}
           onSubmitEditing={[Function]}
           placeholder=""
           rejectResponderTermination={true}
           returnKeyType="next"
           secureTextEntry={true}
           style={
             Object {
-              "borderColor": "#d6d9dc",
+              "borderBottomColor": "#d6d9dc",
+              "borderBottomWidth": 1,
               "borderRadius": 4,
-              "borderWidth": 1,
               "fontFamily": "Roboto",
               "fontSize": 20,
               "fontWeight": "400",
-              "padding": 10,
+              "paddingLeft": 0,
+              "paddingVertical": 10,
             }
           }
-          testID="input-password"
           underlineColorAndroid="#d6d9dc"
           value=""
         />
+        <TouchableOpacity
+          activeOpacity={0.2}
+          onPress={[Function]}
+          style={
+            Object {
+              "alignSelf": "flex-end",
+              "backgroundColor": "#FFFFFF",
+              "marginTop": 8,
+              "position": "absolute",
+            }
+          }
+        >
+          <Text
+            style={
+              Object {
+                "color": "#999999",
+                "fontFamily": "Roboto",
+                "fontSize": 12,
+                "fontWeight": "400",
+                "height": 20,
+                "marginLeft": 5,
+                "marginTop": 10,
+                "textAlign": "left",
+              }
+            }
+          >
+            Show
+          </Text>
+        </TouchableOpacity>
+        <Text
+          style={
+            Object {
+              "color": "#999999",
+              "fontFamily": "Roboto",
+              "fontSize": 12,
+              "fontWeight": "400",
+              "height": 20,
+              "marginLeft": 5,
+              "marginTop": 10,
+              "textAlign": "left",
+            }
+          }
+        />
       </View>
       <View
         style={
           Object {
             "marginBottom": 10,
+            "marginTop": 20,
           }
         }
       >
-        <Text
+        <AnimatedComponent
           style={
-            Object {
-              "fontSize": 16,
-              "marginBottom": 10,
-              "marginTop": 10,
-            }
+            Array [
+              Object {
+                "color": "#999999",
+                "fontFamily": "Roboto",
+                "fontSize": 16,
+                "fontWeight": "400",
+                "marginLeft": 5,
+                "marginTop": -35,
+                "position": "absolute",
+                "textAlign": "left",
+              },
+              Object {
+                "transform": Array [
+                  Object {
+                    "scale": 1,
+                  },
+                  Object {
+                    "translateX": 0,
+                  },
+                  Object {
+                    "translateY": 50,
+                  },
+                ],
+              },
+            ]
           }
         >
           Confirm Password
-        </Text>
+        </AnimatedComponent>
         <TextInput
           allowFontScaling={true}
           autoCapitalize="none"
+          onBlur={[Function]}
           onChangeText={[Function]}
+          onFocus={[Function]}
           onSubmitEditing={[Function]}
           placeholder=""
           rejectResponderTermination={true}
           returnKeyType="done"
           secureTextEntry={true}
           style={
             Object {
-              "borderColor": "#d6d9dc",
+              "borderBottomColor": "#d6d9dc",
+              "borderBottomWidth": 1,
               "borderRadius": 4,
-              "borderWidth": 1,
               "fontFamily": "Roboto",
               "fontSize": 20,
               "fontWeight": "400",
-              "padding": 10,
+              "paddingLeft": 0,
+              "paddingVertical": 10,
             }
           }
-          testID="input-password-confirm"
           underlineColorAndroid="#d6d9dc"
           value=""
         />
+        <View
+          style={
+            Object {
+              "alignSelf": "flex-end",
+              "marginTop": 8,
+              "position": "absolute",
+            }
+          }
+        />
+        <Text
+          style={
+            Object {
+              "color": "#999999",
+              "fontFamily": "Roboto",
+              "fontSize": 12,
+              "fontWeight": "400",
+              "height": 20,
+              "marginLeft": 5,
+              "marginTop": 10,
+              "textAlign": "left",
+            }
+          }
+        >
+          Must be at least 8 characters
+        </Text>
       </View>
       <View
         style={
           Object {
-            "alignItems": "center",
-            "flexDirection": "row",
+            "alignItems": "flex-start",
             "marginBottom": 30,
-            "marginTop": 20,
+            "marginTop": 30,
           }
         }
       >
@@ -200,6 +313,7 @@ exports[`ImportFromSeed should render correctly 1`] = `
           style={
             Object {
               "flex": 0,
+              "marginTop": 10,
             }
           }
           trackColor={
@@ -219,6 +333,7 @@ exports[`ImportFromSeed should render correctly 1`] = `
         }
       >
         <StyledButton
+          disabled={true}
           disabledContainerStyle={
             Object {
               "opacity": 0.6,
@@ -239,7 +354,7 @@ exports[`ImportFromSeed should render correctly 1`] = `
       <View
         style={
           Object {
-            "paddingTop": 30,
+            "paddingVertical": 30,
           }
         }
       >