Refactor password generation workflow

mobile/android/app/build.gradle

@@ -155,7 +155,6 @@ dependencies {
     compile fileTree(dir: "libs", include: ["*.jar"])
     compile "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
     compile "com.facebook.react:react-native:+"  // From node_modules
-    compile "com.madgag.spongycastle:prov:1.58.0.0"
     testCompile "junit:junit:4.12"
 }
 

mobile/android/app/src/main/java/com/lesspass/Crypto.java

@@ -13,11 +13,6 @@ import javax.crypto.Mac;
 import javax.crypto.spec.PBEKeySpec;
 import javax.crypto.spec.SecretKeySpec;
 
-import org.spongycastle.jce.provider.BouncyCastleProvider;
-import org.spongycastle.crypto.PBEParametersGenerator;
-import org.spongycastle.crypto.generators.PKCS5S2ParametersGenerator;
-import org.spongycastle.crypto.digests.SHA256Digest;
-import org.spongycastle.crypto.params.KeyParameter;
 
 public class Crypto {
     public String pbkdf2(String secret, String salt, int iterations, int keyLength) {

mobile/android/app/src/main/java/com/lesspass/LessPassModule.java

@@ -6,10 +6,7 @@ import com.facebook.react.bridge.ReactContext;
 import com.facebook.react.bridge.ReactContextBaseJavaModule;
 import com.facebook.react.bridge.ReactMethod;
 import com.facebook.react.bridge.Promise;
-import org.spongycastle.crypto.PBEParametersGenerator;
-import org.spongycastle.crypto.generators.PKCS5S2ParametersGenerator;
-import org.spongycastle.crypto.digests.SHA256Digest;
-import org.spongycastle.crypto.params.KeyParameter;
+
 
 import java.math.BigInteger;
 import java.nio.charset.StandardCharsets;

mobile/package.json

@@ -10,15 +10,16 @@
     "debounce": "^1.2.0",
     "lesspass-master-password": "^0.1.0",
     "lesspass-render-password": "^0.1.0",
+    "lodash": "^4.17.11",
     "native-base": "^2.8.0",
-    "react": "16.4.1",
-    "react-native": "0.56.0",
+    "react": "^16.5.2",
+    "react-native": "^0.56.0",
     "react-native-keychain": "^3.0.0",
     "react-native-paper": "^2.0.1",
     "react-native-slider": "^0.11.0",
-    "react-native-touch-id": "^4.0.4",
+    "react-native-touch-id": "^4.1.0",
     "react-native-vector-icons": "^5.0.0",
-    "react-navigation": "^2.12.1",
+    "react-navigation": "^2.16.0",
     "react-navigation-material-bottom-tabs": "^0.4.0",
     "react-redux": "^5.0.7",
     "redux": "^4.0.0",
@@ -26,10 +27,10 @@
     "redux-thunk": "^2.3.0"
   },
   "devDependencies": {
-    "babel-jest": "23.4.2",
+    "babel-jest": "^23.6.0",
     "babel-preset-react-native": "^5",
-    "jest": "23.5.0",
-    "react-test-renderer": "16.4.1"
+    "jest": "^23.6.0",
+    "react-test-renderer": "^16.5.2"
   },
   "jest": {
     "preset": "react-native"

mobile/src/PasswordGeneratorScreen.js

@@ -8,7 +8,7 @@ import {
   Clipboard,
   Text
 } from "react-native";
-import { Paragraph, Button, IconButton } from "react-native-paper";
+import { Paragraph, Button } from "react-native-paper";
 import Switch from "./Switch";
 import renderLessPassPassword from "lesspass-render-password";
 import Slider from "react-native-slider";
@@ -22,6 +22,12 @@ export default class PasswordGeneratorScreen extends Component {
   constructor(props) {
     super(props);
     this.state = {
+      ...this._getInitialState()
+    };
+  }
+
+  _getInitialState = () => {
+    return {
       showOptions: false,
       site: "",
       login: "",
@@ -32,11 +38,20 @@ export default class PasswordGeneratorScreen extends Component {
       symbols: true,
       length: "16",
       counter: "1",
-      generatedPassword: null,
+      password: null,
       seePassword: false,
       copied: false
     };
-  }
+  };
+
+  copyPassword = () => {
+    const { password } = this.state;
+    Clipboard.setString(password);
+    this.setState({ copied: true });
+    setTimeout(() => {
+      this.setState({ copied: false });
+    }, 3000);
+  };
 
   generatePassword() {
     const {
@@ -64,14 +79,18 @@ export default class PasswordGeneratorScreen extends Component {
         symbols
       };
       var password = renderLessPassPassword(entropy, options);
-      Clipboard.setString(password);
-      this.setState({ generatedPassword: password, copied: true });
-      setTimeout(() => {
-        this.setState({ copied: false });
-      }, 3000);
+      this.setState({ password });
     });
+    setTimeout(() => {
+      this.clear();
+    }, 30000);
   }
 
+  clear = () => {
+    this.setState({ ...this._getInitialState() });
+    Clipboard.setString("");
+  };
+
   render() {
     const {
       showOptions,
@@ -86,7 +105,7 @@ export default class PasswordGeneratorScreen extends Component {
       counter,
       seePassword,
       copied,
-      generatedPassword
+      password
     } = this.state;
     return (
       <ScrollView style={{ flex: 1 }}>
@@ -112,6 +131,32 @@ export default class PasswordGeneratorScreen extends Component {
             masterPassword={masterPassword}
             onChangeText={masterPassword => this.setState({ masterPassword })}
           />
+          {password ? (
+            <View
+              style={{
+                width: "100%",
+                paddingTop: 10
+              }}
+            >
+              <Button
+                mode="contained"
+                onPress={() => this.copyPassword()}
+                style={{ alignSelf: "stretch" }}
+              >
+                {copied ? (
+                  "Copied"
+                ) : seePassword ? (
+                  <Text style={{ fontSize: 16, fontFamily: "monospace" }}>
+                    {password}
+                  </Text>
+                ) : (
+                  <Text style={{ fontSize: 16, fontFamily: "monospace" }}>
+                    ********************
+                  </Text>
+                )}
+              </Button>
+            </View>
+          ) : null}
           <View
             style={{
               flexDirection: "row",
@@ -120,55 +165,60 @@ export default class PasswordGeneratorScreen extends Component {
               paddingVertical: 10
             }}
           >
-            {generatedPassword ? (
-              <Button
-                icon={copied ? null : "remove-red-eye"}
-                mode="contained"
-                onPress={() => {
-                  if (!copied) {
+            {password ? (
+              <React.Fragment>
+                <Button
+                  compact
+                  icon="content-copy"
+                  mode="text"
+                  onPress={() => this.copyPassword()}
+                >
+                  Copy
+                </Button>
+                <Button
+                  compact
+                  icon="remove-red-eye"
+                  mode="text"
+                  onPress={() =>
                     this.setState(prevState => ({
                       seePassword: !prevState.seePassword
-                    }));
+                    }))
                   }
-                }}
-                style={{
-                  height: 50,
-                  alignItems: "center",
-                  justifyContent: "center"
-                }}
-              >
-                <Text uppercase={false}>
-                  {copied
-                    ? "Copied !"
-                    : seePassword
-                      ? generatedPassword
-                      : "****************"}
-                </Text>
-              </Button>
+                >
+                  {seePassword ? "hide" : "show"}
+                </Button>
+                <Button
+                  compact
+                  icon="refresh"
+                  mode="text"
+                  onPress={() => this.clear()}
+                >
+                  clear
+                </Button>
+              </React.Fragment>
             ) : (
               <Button
+                compact
                 mode="contained"
+                disabled={!masterPassword}
                 onPress={() => this.generatePassword()}
-                style={{
-                  height: 50,
-                  alignItems: "center",
-                  justifyContent: "center"
-                }}
               >
-                Generate password
+                Generate Password
               </Button>
             )}
-            <IconButton
+
+            <Button
+              compact
               icon="settings"
-              color={
-                showOptions ? Theme.colors.primary : Theme.colors.placeholder
-              }
+              mode="text"
               onPress={() =>
                 this.setState(prevState => ({
                   showOptions: !prevState.showOptions
                 }))
               }
-            />
+            >
+              Options
+            </Button>
           </View>
           {showOptions ? (
             <React.Fragment>