Add password criteria (#555)

* feat: add pw criteria

* fix: not applicable for JSON import

packages/fether-react/src/Accounts/CreateAccount/AccountPassword/AccountPassword.js

@@ -14,9 +14,10 @@ import i18n, { packageNS } from '../../../i18n';
 class AccountPassword extends Component {
   state = {
     confirm: '',
+    error: '',
+    passwordMatchCriteria: true,
     isLoading: false,
-    password: '',
-    error: ''
+    password: ''
   };
 
   handleConfirmChange = ({ target: { value } }) => {
@@ -24,7 +25,12 @@ class AccountPassword extends Component {
   };
 
   handlePasswordChange = ({ target: { value } }) => {
-    this.setState({ password: value });
+    // at leat 8 characters, at least one of them being a number
+    const PASSWORD_CRITERIA = /^(?=.*\d).{8,}$/;
+    const regex = new RegExp(PASSWORD_CRITERIA);
+    const passwordMatchCriteria = regex.test(value);
+
+    this.setState({ password: value, passwordMatchCriteria });
   };
 
   handleSubmit = event => {
@@ -67,7 +73,13 @@ class AccountPassword extends Component {
       history,
       location: { pathname }
     } = this.props;
-    const { confirm, error, isLoading, password } = this.state;
+    const {
+      confirm,
+      error,
+      isLoading,
+      password,
+      passwordMatchCriteria
+    } = this.state;
     const currentStep = pathname.slice(-1);
 
     return (
@@ -101,15 +113,25 @@ class AccountPassword extends Component {
             />
 
             {!jsonString && (
-              <FetherForm.Field
-                label={i18n.t(
-                  `${packageNS}:account.password.common.label_password_confirm`
+              <>
+                {!passwordMatchCriteria && (
+                  <p>
+                    {i18n.t(
+                      `${packageNS}:account.password.common.error_msg_password_insecure`
+                    )}
+                  </p>
                 )}
-                onChange={this.handleConfirmChange}
-                required
-                type='password'
-                value={confirm}
-              />
+
+                <FetherForm.Field
+                  label={i18n.t(
+                    `${packageNS}:account.password.common.label_password_confirm`
+                  )}
+                  onChange={this.handleConfirmChange}
+                  required
+                  type='password'
+                  value={confirm}
+                />
+              </>
             )}
 
             <p>
@@ -137,7 +159,8 @@ class AccountPassword extends Component {
                 disabled={
                   !password ||
                   (!jsonString && confirm !== password) ||
-                  isLoading
+                  isLoading ||
+                  !passwordMatchCriteria
                 }
               >
                 {i18n.t(`${packageNS}:account.password.common.button_confirm`, {

packages/fether-react/src/i18n/locales/de.json

@@ -54,6 +54,7 @@
         "label_password": "Passwort",
         "label_password_confirm": "Bestätigen",
         "error_msg_password_incorrect": "Bitte überprüfen Sie Ihr Passwort und versuchen Sie es erneut.",
+        "error_msg_password_insecure": "Passwort muss mindestens 8 Zeichen lang sein und mindestens eine Zahl enthalten.",
         "button_confirm": "Konto bestätigen {{postfix}}",
         "button_confirm_opt1": "einführen",
         "button_confirm_opt2": "Schaffung"

packages/fether-react/src/i18n/locales/en.json

@@ -54,6 +54,7 @@
         "label_password": "Password",
         "label_password_confirm": "Confirm",
         "error_msg_password_incorrect": "Please check your password and try again.",
+        "error_msg_password_insecure": "Password must contain at least 8 characters and a number.",
         "button_confirm": "Confirm account {{postfix}}",
         "button_confirm_opt1": "import",
         "button_confirm_opt2": "creation"