feat(general): add custom label to signup and forgot pass

.eslintrc

@@ -1,4 +1,7 @@
 {
   "parser": "babel-eslint",
-  "extends": "airbnb"
+  "extends": "airbnb",
+  "rules": {
+    "react/jsx-filename-extension": "off"
+  }
 }

dist/Login.js

@@ -58,7 +58,7 @@ var Login = function Login(_ref) {
       usernameCustomLabel = _ref.usernameCustomLabel,
       passwordCustomLabel = _ref.passwordCustomLabel,
       recoverPasswordCustomLabel = _ref.recoverPasswordCustomLabel,
-      signupCustomLabel = _ref.signupCustomLabel,
+      goToSignupCustomLabel = _ref.goToSignupCustomLabel,
       submitLoginCustomLabel = _ref.submitLoginCustomLabel;
   return React.createElement(
     'section',
@@ -69,9 +69,9 @@ var Login = function Login(_ref) {
       React.createElement('input', {
         style: Object.assign({}, localStyles.input, styles.input),
         type: 'text',
-        id: usernameCustomLabel || "username",
-        name: usernameCustomLabel || "username",
-        placeholder: usernameCustomLabel || "Username",
+        id: 'username',
+        name: 'username',
+        placeholder: usernameCustomLabel,
         onChange: function onChange(e) {
           return handleChange(e.target.name, e.target.value);
         },
@@ -80,9 +80,9 @@ var Login = function Login(_ref) {
       React.createElement('input', {
         style: Object.assign({}, localStyles.input, styles.input),
         type: 'password',
-        id: passwordCustomLabel || "password",
-        name: passwordCustomLabel || "password",
-        placeholder: passwordCustomLabel || "Password",
+        id: 'password',
+        name: 'password',
+        placeholder: passwordCustomLabel,
         onChange: function onChange(e) {
           return handleChange(e.target.name, e.target.value);
         },
@@ -101,29 +101,31 @@ var Login = function Login(_ref) {
           'button',
           {
             id: 'recorver-password',
+            type: 'button',
             style: Object.assign({}, localStyles.recoverPassword, styles.recoverPasswordButton),
             onClick: function onClick() {
               handleShowRecover('isRecoveringPassword', true);
             }
           },
-          recoverPasswordCustomLabel || 'Recover Password'
+          recoverPasswordCustomLabel
         )
       ),
       React.createElement(
         'button',
         {
           id: 'signup-button',
+          type: 'button',
           style: Object.assign({}, localStyles.button, styles.button),
           onClick: function onClick() {
             handleShowSignup('isLogin', false);
           }
         },
-        signupCustomLabel || 'Signup'
+        goToSignupCustomLabel
       ),
       React.createElement('input', {
-        id: submitLoginCustomLabel || "submit-login",
-        name: submitLoginCustomLabel || "submit-login",
-        value: submitLoginCustomLabel || "Login",
+        id: 'submit-login',
+        name: 'submit-login',
+        value: submitLoginCustomLabel,
         type: 'submit',
         style: Object.assign({}, localStyles.button, styles.button),
         onClick: handleLogin
@@ -148,11 +150,11 @@ Login.propTypes = {
     recoverPasswordButton: PropTypes.object,
     button: PropTypes.object
   }),
-  usernameCustomLabel: PropTypes.string,
-  passwordCustomLabel: PropTypes.string,
-  recoverPasswordCustomLabel: PropTypes.string,
-  signupCustomLabel: PropTypes.string,
-  submitLoginCustomLabel: PropTypes.string
+  usernameCustomLabel: PropTypes.string.isRequired,
+  passwordCustomLabel: PropTypes.string.isRequired,
+  recoverPasswordCustomLabel: PropTypes.string.isRequired,
+  goToSignupCustomLabel: PropTypes.string.isRequired,
+  submitLoginCustomLabel: PropTypes.string.isRequired
 };
 
 Login.defaultProps = {

dist/Login.test.js

@@ -11,7 +11,13 @@ describe('the login form', function () {
     handleLogin: jest.fn(),
     handleChange: jest.fn(),
     username: '',
-    password: ''
+    password: '',
+    usernameCustomLabel: 'Username',
+    passwordCustomLabel: 'Password',
+    passwordConfirmationCustomLabel: 'Confirm password',
+    recoverPasswordCustomLabel: 'Recover Password',
+    goToSignupCustomLabel: 'Signup',
+    submitLoginCustomLabel: 'Signup'
   };
   it('renders without crashing', function () {
     shallow(React.createElement(Login, requiredMockProps));
@@ -37,52 +43,36 @@ describe('the login form', function () {
 
   it('should call handle login when submit-login clicked', function () {
     var loginCallback = jest.fn();
-    var wrapper = shallow(React.createElement(Login, {
-      handleShowSignup: jest.fn(),
+    var wrapper = shallow(React.createElement(Login, Object.assign({}, requiredMockProps, {
       handleLogin: loginCallback,
-      handleShowRecover: jest.fn(),
-      handleChange: jest.fn(),
       username: '',
       password: ''
-    }));
+    })));
     wrapper.find('#submit-login').simulate('click');
     expect(loginCallback.mock.calls.length).toEqual(1);
   });
 
-  describe('custom labels', function () {
+  describe('with custom labels', function () {
     var customLabelUsername = 'email';
     var customLabelPassword = 'your secure pass';
     var customRecoverPass = 'lost your pass?';
     var customSignup = 'Join us';
     var customSubmit = 'Send';
-    var wrapper = shallow(React.createElement(Login, {
-      handleShowSignup: jest.fn(),
-      handleLogin: jest.fn(),
-      handleShowRecover: jest.fn(),
-      handleChange: jest.fn(),
-      username: '',
-      password: '',
+    var wrapper = shallow(React.createElement(Login, Object.assign({}, requiredMockProps, {
       usernameCustomLabel: customLabelUsername,
       passwordCustomLabel: customLabelPassword,
       recoverPasswordCustomLabel: customRecoverPass,
-      signupCustomLabel: customSignup,
+      goToSignupCustomLabel: customSignup,
       submitLoginCustomLabel: customSubmit
-    }));
+    })));
     it('should render custom labels if provided', function () {
-      expect(wrapper.find('input[name="' + customLabelUsername + '"]').prop('placeholder')).toEqual(customLabelUsername);
-      expect(wrapper.find('input[name="' + customLabelUsername + '"]').prop('id')).toEqual(customLabelUsername);
-      expect(wrapper.find('input[name="' + customLabelUsername + '"]').prop('name')).toEqual(customLabelUsername);
-
-      expect(wrapper.find('input[name="' + customLabelPassword + '"]').prop('placeholder')).toEqual(customLabelPassword);
-      expect(wrapper.find('input[name="' + customLabelPassword + '"]').prop('id')).toEqual(customLabelPassword);
-      expect(wrapper.find('input[name="' + customLabelPassword + '"]').prop('name')).toEqual(customLabelPassword);
+      expect(wrapper.find("input[name='username']").prop('placeholder')).toEqual(customLabelUsername);
+      expect(wrapper.find("input[name='password']").prop('placeholder')).toEqual(customLabelPassword);
 
       expect(wrapper.find('#recorver-password').text()).toEqual(customRecoverPass);
       expect(wrapper.find('#signup-button').text()).toEqual(customSignup);
 
-      expect(wrapper.find('input[name="' + customSubmit + '"]').prop('value')).toEqual(customSubmit);
-      expect(wrapper.find('input[name="' + customSubmit + '"]').prop('id')).toEqual(customSubmit);
-      expect(wrapper.find('input[name="' + customSubmit + '"]').prop('name')).toEqual(customSubmit);
+      expect(wrapper.find("input[name='submit-login']").prop('value')).toEqual(customSubmit);
     });
   });
 });

dist/ReactSignupLoginComponent.js

@@ -114,7 +114,7 @@ var ReactSignupLoginComponent = function (_React$Component) {
             usernameCustomLabel: _this2.props.usernameCustomLabel,
             passwordCustomLabel: _this2.props.passwordCustomLabel,
             recoverPasswordCustomLabel: _this2.props.recoverPasswordCustomLabel,
-            signupCustomLabel: _this2.props.signupCustomLabel,
+            goToSignupCustomLabel: _this2.props.goToSignupCustomLabel,
             submitLoginCustomLabel: _this2.props.submitLoginCustomLabel
           });
         } else if (!_this2.state.isLogin && !_this2.state.isRecoveringPassword) {
@@ -126,15 +126,22 @@ var ReactSignupLoginComponent = function (_React$Component) {
             handleChange: _this2.updateState,
             username: _this2.state.username,
             password: _this2.state.password,
-            passwordConfirmation: _this2.state.passwordConfirmation
+            passwordConfirmation: _this2.state.passwordConfirmation,
+            usernameCustomLabel: _this2.props.usernameCustomLabel,
+            passwordCustomLabel: _this2.props.passwordCustomLabel,
+            passwordConfirmationCustomLabel: _this2.props.passwordConfirmationCustomLabel,
+            goToLoginCustomLabel: _this2.props.goToLoginCustomLabel,
+            submitSignupCustomLabel: _this2.props.submitSignupCustomLabel
           });
         }
         return React.createElement(RecoverPassword, {
           handleShowLogin: _this2.updateState,
           handleRecoverPassword: _this2.bubleUpRecoverPassword,
           handleChange: _this2.updateState,
           styles: _this2.props.styles.recoverPassword,
-          username: _this2.state.username
+          username: _this2.state.username,
+          usernameCustomLabel: _this2.props.usernameCustomLabel,
+          goToLoginCustomLabel: _this2.props.goToLoginCustomLabel
         });
       };
       return React.createElement(
@@ -198,21 +205,27 @@ ReactSignupLoginComponent.propTypes = {
   handleRecoverPassword: PropTypes.func.isRequired,
   usernameCustomLabel: PropTypes.string,
   passwordCustomLabel: PropTypes.string,
+  passwordConfirmationCustomLabel: PropTypes.string,
   recoverPasswordCustomLabel: PropTypes.string,
-  signupCustomLabel: PropTypes.string,
-  submitLoginCustomLabel: PropTypes.string
+  goToSignupCustomLabel: PropTypes.string,
+  submitLoginCustomLabel: PropTypes.string,
+  goToLoginCustomLabel: PropTypes.string,
+  submitSignupCustomLabel: PropTypes.string
 };
 
 ReactSignupLoginComponent.defaultProps = {
   title: 'Company Name',
   isLogin: true,
   isRecoveringPassword: false,
   styles: {},
-  usernameCustomLabel: null,
-  passwordCustomLabel: null,
-  recoverPasswordCustomLabel: null,
-  signupCustomLabel: null,
-  submitLoginCustomLabel: null
+  usernameCustomLabel: 'Username',
+  passwordCustomLabel: 'Password',
+  passwordConfirmationCustomLabel: 'Confirm password',
+  recoverPasswordCustomLabel: 'Recover Password',
+  goToSignupCustomLabel: 'Signup',
+  goToLoginCustomLabel: 'Login',
+  submitLoginCustomLabel: 'Signup',
+  submitSignupCustomLabel: 'Signup'
 };
 
 export default ReactSignupLoginComponent;

dist/RecoverPassword.js

@@ -38,7 +38,9 @@ var RecoverPassword = function RecoverPassword(_ref) {
       styles = _ref.styles,
       handleChange = _ref.handleChange,
       handleRecoverPassword = _ref.handleRecoverPassword,
-      username = _ref.username;
+      username = _ref.username,
+      usernameCustomLabel = _ref.usernameCustomLabel,
+      goToLoginCustomLabel = _ref.goToLoginCustomLabel;
   return React.createElement(
     'section',
     {
@@ -53,7 +55,7 @@ var RecoverPassword = function RecoverPassword(_ref) {
         type: 'text',
         id: 'username',
         name: 'username',
-        placeholder: 'Username',
+        placeholder: usernameCustomLabel,
         onChange: function onChange(e) {
           return handleChange(e.target.name, e.target.value);
         },
@@ -67,12 +69,13 @@ var RecoverPassword = function RecoverPassword(_ref) {
         'button',
         {
           id: 'login-button',
+          type: 'button',
           style: Object.assign({}, localStyles.button, styles.button),
           onClick: function onClick() {
             handleShowLogin('isRecoveringPassword', false);
           }
         },
-        'Login'
+        goToLoginCustomLabel
       ),
       React.createElement('input', {
         id: 'submit-recover-password',
@@ -97,7 +100,9 @@ RecoverPassword.propTypes = {
     buttonsWrapper: PropTypes.object,
     input: PropTypes.object,
     button: PropTypes.object
-  })
+  }),
+  usernameCustomLabel: PropTypes.string.isRequired,
+  goToLoginCustomLabel: PropTypes.string.isRequired
 };
 
 RecoverPassword.defaultProps = {

dist/RecoverPassword.test.js

@@ -3,14 +3,15 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import RecoverPassword from './RecoverPassword';
-import Login from './Login';
 
 describe('the main wrapper', function () {
   var requiredMockProps = {
     handleShowLogin: jest.fn(),
     handleChange: jest.fn(),
     handleRecoverPassword: jest.fn(),
-    username: ''
+    username: '',
+    usernameCustomLabel: 'Username',
+    goToLoginCustomLabel: 'Login'
   };
   it('renders without crashing', function () {
     shallow(React.createElement(RecoverPassword, requiredMockProps));
@@ -21,4 +22,17 @@ describe('the main wrapper', function () {
     expect(wrapper.find('input[name="username"]')).toHaveLength(1);
     expect(wrapper.find('#login-button')).toHaveLength(1);
   });
+
+  describe('with custom labels', function () {
+    var customLabelUsername = 'email?';
+    var customGoToLogin = 'Back to login';
+    var wrapper = shallow(React.createElement(RecoverPassword, Object.assign({}, requiredMockProps, {
+      usernameCustomLabel: customLabelUsername,
+      goToLoginCustomLabel: customGoToLogin
+    })));
+    it('should render custom labels if provided', function () {
+      expect(wrapper.find('input[name="username"]').prop('placeholder')).toEqual(customLabelUsername);
+      expect(wrapper.find('#login-button').text()).toEqual(customGoToLogin);
+    });
+  });
 });