Show a warning about weak password on the new register form

res/locale/en.json

@@ -23,7 +23,7 @@
   "signup.errors.password_repeat_req": "enter the password again",
   "signup.errors.password_match": "passwords don't match",
   "signup.errors.agree_req": "you have to agree to the Terms",
-  "signup.warn.password": "password is weak - consider adding more symbols",
+  "signup.warn.password_weak": "password is weak - consider adding more symbols",
   "signup.labels.username": "Username:",
   "signup.labels.email": "Email:",
   "signup.labels.password_repeat": "Repeat password:",

res/locale/he.json

@@ -21,6 +21,7 @@
   "signup.errors.password_repeat_req": "הזן שוב את הסיסמה",
   "signup.errors.password_match": "הסיסמאות לא תואמות",
   "signup.errors.agree_req": "עליך להסכים לתנאים",
+  "signup.warn.password_weak": "הסיסמה חלשה - שקול להוסיף עוד סמלים",
   "signup.labels.username": "שם משתמש",
   "signup.labels.email": "אֶלֶקטרוֹנִי",
   "signup.labels.password_repeat": "חזור על הסיסמה",

src/components/form/field/index.js

@@ -48,7 +48,8 @@ export default class FormField extends React.Component {
     value: PropTypes.oneOfType([
       PropTypes.bool,
       PropTypes.string
-    ])
+    ]),
+    warn: PropTypes.shape()
   };
 
   static defaultProps = {
@@ -61,7 +62,7 @@ export default class FormField extends React.Component {
   }
 
   render() {
-    const { error, name, type, value } = this.props;
+    const { error, name, type, value, warn } = this.props;
 
     let dotColor = 'gray', icon;
     if (error) {
@@ -154,6 +155,11 @@ export default class FormField extends React.Component {
             {error}
           </div>
         }
+        {warn &&
+          <div className="form__field-message form__field-message--type_info">
+            {warn}
+          </div>
+        }
       </div>
     );
   }

src/components/register/form.js

@@ -21,6 +21,7 @@ import debounce from 'debounce-promise';
 import { form as inform, from } from 'react-inform';
 import { Link } from 'react-router';
 import { noop, omit, reduce, transform } from 'lodash';
+import { Map as ImmutableMap } from 'immutable';
 import zxcvbn from 'zxcvbn';
 
 import { API_HOST } from '../../config';
@@ -122,7 +123,7 @@ export class SignupFormV2 extends React.Component {
     this.listenersRemoved = false;
     this.touched = {};
     this.state = {
-      passwordWarning: ''
+      warn: ImmutableMap()
     };
   }
 
@@ -186,14 +187,16 @@ export class SignupFormV2 extends React.Component {
     if (name === 'password') {
       if (value) {
         if (zxcvbn(value).score <= 1) {
-          this.setState({
-            passwordWarning: 'Password is weak. Consider adding more words or symbols'
-          });
+          this.setState(state => ({
+            warn: state.warn.set('password', 'signup.warn.password_weak')
+          }));
           return;
         }
       }
 
-      this.setState({ passwordWarning: '' });
+      this.setState(state => ({
+        warn: state.warn.set('password', undefined)
+      }));
     }
   }
 
@@ -312,6 +315,7 @@ export class SignupFormV2 extends React.Component {
                 name={fieldName}
                 refFn={refFn}
                 title={t(predefProps.label)}
+                warn={t(this.state.warn.get(fieldName))}
                 {...fieldValue}
                 {...omit(predefProps, KNOWN_PREDEF_PROPS)}
                 error={error && t(error)}

src/less/blocks/form.less

@@ -142,6 +142,10 @@
     @media (min-width: 768px) {
       margin-right: 137px;
     }
+
+    &--type_info {
+      color: @color__text;
+    }
   }
 
   &__label {