Fixed validation and added toasts

client/src/install/Setup/Auth.js

@@ -4,8 +4,8 @@ import { Field, reduxForm } from 'redux-form';
 import { withNamespaces, Trans } from 'react-i18next';
 import flow from 'lodash/flow';
 
+import i18n from '../../i18n';
 import Controls from './Controls';
-import validate from './validate';
 import renderField from './renderField';
 
 const required = (value) => {
@@ -15,11 +15,21 @@ const required = (value) => {
     return <Trans>form_error_required</Trans>;
 };
 
+const validate = (values) => {
+    const errors = {};
+
+    if (values.confirm_password !== values.password) {
+        errors.confirm_password = i18n.t('form_error_password');
+    }
+
+    return errors;
+};
+
 const Auth = (props) => {
     const {
         handleSubmit,
-        submitting,
         pristine,
+        invalid,
         t,
     } = props;
 
@@ -75,7 +85,7 @@ const Auth = (props) => {
                     />
                 </div>
             </div>
-            <Controls submitting={submitting} pristine={pristine} />
+            <Controls pristine={pristine} invalid={invalid} />
         </form>
     );
 };
@@ -83,7 +93,7 @@ const Auth = (props) => {
 Auth.propTypes = {
     handleSubmit: PropTypes.func.isRequired,
     pristine: PropTypes.bool.isRequired,
-    submitting: PropTypes.bool.isRequired,
+    invalid: PropTypes.bool.isRequired,
     t: PropTypes.func.isRequired,
 };
 

client/src/install/Setup/Controls.js

@@ -45,7 +45,7 @@ class Controls extends Component {
                         <button
                             type="submit"
                             className="btn btn-success btn-standard btn-lg"
-                            disabled={this.props.submitting || this.props.pristine}
+                            disabled={this.props.invalid || this.props.pristine}
                         >
                             <Trans>next</Trans>
                         </button>
@@ -65,7 +65,6 @@ class Controls extends Component {
                             type="button"
                             className="btn btn-success btn-standard btn-lg"
                             onClick={this.props.nextStep}
-                            disabled={this.props.submitting || this.props.pristine}
                         >
                             <Trans>next</Trans>
                         </button>
@@ -101,6 +100,7 @@ Controls.propTypes = {
     prevStep: PropTypes.func,
     pristine: PropTypes.bool,
     submitting: PropTypes.bool,
+    invalid: PropTypes.bool,
 };
 
 const mapStateToProps = (state) => {

client/src/install/Setup/Devices.js

@@ -18,19 +18,19 @@ const Devices = () => (
             <Tabs>
                 <div label="Router">
                     <div className="tab__title">
-                        <Trans>install_decices_router</Trans>
+                        <Trans>install_devices_router</Trans>
                     </div>
                     <div className="tab__text">
-                        <Trans>install_decices_router_desc</Trans>
+                        <Trans>install_devices_router_desc</Trans>
                         <ol>
                             <li>
-                                <Trans>install_decices_router_list_1</Trans>
+                                <Trans>install_devices_router_list_1</Trans>
                             </li>
                             <li>
-                                <Trans>install_decices_router_list_2</Trans>
+                                <Trans>install_devices_router_list_2</Trans>
                             </li>
                             <li>
-                                <Trans>install_decices_router_list_3</Trans>
+                                <Trans>install_devices_router_list_3</Trans>
                             </li>
                         </ol>
                     </div>

client/src/install/Setup/Settings.js

@@ -36,6 +36,7 @@ let Settings = (props) => {
         handleSubmit,
         interfaceIp,
         dnsIp,
+        invalid,
     } = props;
 
     return (
@@ -122,7 +123,7 @@ let Settings = (props) => {
                     <Trans>install_settings_dns_desc</Trans> <strong>{dnsIp}</strong>
                 </p>
             </div>
-            <Controls />
+            <Controls invalid={invalid} />
         </form>
     );
 };
@@ -131,8 +132,7 @@ Settings.propTypes = {
     handleSubmit: PropTypes.func.isRequired,
     interfaceIp: PropTypes.string.isRequired,
     dnsIp: PropTypes.string.isRequired,
-    pristine: PropTypes.bool.isRequired,
-    submitting: PropTypes.bool.isRequired,
+    invalid: PropTypes.bool.isRequired,
     initialValues: PropTypes.object,
 };
 

client/src/install/Setup/index.js

@@ -13,6 +13,7 @@ import Devices from './Devices';
 import Submit from './Submit';
 import Progress from './Progress';
 
+import Toasts from '../../components/Toasts';
 import Footer from '../../components/ui/Footer';
 import logo from '../../components/ui/svg/logo.svg';
 
@@ -85,6 +86,7 @@ class Setup extends Component {
                             </div>
                         </div>
                         <Footer />
+                        <Toasts />
                     </Fragment>
                 }
             </Fragment>
@@ -104,8 +106,8 @@ Setup.propTypes = {
 };
 
 const mapStateToProps = (state) => {
-    const { install } = state;
-    const props = { install };
+    const { install, toasts } = state;
+    const props = { install, toasts };
     return props;
 };
 

client/src/install/Setup/validate.js

@@ -1,11 +0,0 @@
-const validate = (values) => {
-    const errors = {};
-
-    if (values.confirm_password !== values.password) {
-        errors.confirm_password = 'Password mismatched';
-    }
-
-    return errors;
-};
-
-export default validate;