signUp -> validation and form added, reducer is done

src/actions/auth/logOut.js

@@ -0,0 +1,3 @@
+export const logOut = () => ({
+    
+})

src/actions/auth/signIn.js

@@ -1,12 +1,9 @@
 import * as actionTypes from './../../constants/auth';
 
-export const signIn = payload => {
-    console.log('Inside the signIn action', payload);
-    return {
-        type: actionTypes.SIGN_IN_REQUEST,
-        payload
-    };
-}
+export const signIn = payload => ({
+    type: actionTypes.SIGN_IN_REQUEST,
+    payload
+});
 export const signInSuccess = payload => ({
     type: actionTypes.SIGN_IN_REQUEST_SUCCESS,
     payload

src/components/common/protectedRoute.js

@@ -23,9 +23,7 @@ export default ({ component: Component, user, tokenAuth, access, ...rest }) => (
             } */}
             const checkedData = user && user.data ? user.data : null;
 
-            console.log('Component', Component);
-            console.log('Access', access);
-            console.log('User Data', user);
+            console.log('\n\nHere goes the route:', '\nUser', user, '\n\n\n')
 
             if (access === 'public') {
                 return <Component {...props} />

src/components/public/SignIn/Form/index.js

@@ -1,7 +1,5 @@
 import React from 'react';
 import { reduxForm, Field } from 'redux-form';
-import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
 
 import validate from './validate';
 import formInput from './../../../common/formInput';
@@ -17,8 +15,7 @@ class Form extends React.Component {
     }
 
     render() {
-        const { handleSubmit, error } = this.props;
-        console.log('Auth error', error);
+        const { handleSubmit, requestError, invalid } = this.props;
 
         return (
             <div className="container">
@@ -27,9 +24,9 @@ class Form extends React.Component {
 
                         <form className="text-center" onSubmit={handleSubmit(this.submit)}>
                             {
-                                error
+                                requestError
                                     ?
-                                    <p className="text-af text-uppercase">{error}</p>
+                                    <p className="text-af text-uppercase">{requestError}</p>
                                     :
                                     null
                             }
@@ -41,10 +38,10 @@ class Form extends React.Component {
 
                             <div className="form-group">
                                 <label className="text-uppercase">Password</label>
-                                <Field type="password" name='password' className="form-control" placeholder="example123" component={formInput} />
+                                <Field type="password" name='password' className="form-control" component={formInput} />
                             </div>
 
-                            <button type="submit" className="btn btn-primary">Sign In!</button>
+                            <button type="submit" className="btn btn-primary" disabled={invalid}>Sign In!</button>
                         </form>
                     </div>
                 </div>

src/components/public/SignIn/index.js

@@ -7,8 +7,8 @@ import { Redirect } from 'react-router-dom'
 import Spinner from './../../common/spinner';
 import { signIn } from './../../../actions/auth/signIn';
 
-const SignIn = ({ signIn, user }) => (
-    user.isFetching
+const SignIn = ({ signIn, user }) => {
+    const someShit = user.isFetching
         ?
         <Spinner />
         : user.data
@@ -16,10 +16,20 @@ const SignIn = ({ signIn, user }) => (
             <Redirect to='/' />
             : user.error
                 ?
-                <Form error={user.error} signIn={signIn} />
+                (
+                    <React.Fragment>
+                        <Form signIn={signIn} requestError={user.error} />
+                    </React.Fragment>
+
+                )
                 :
                 <Form signIn={signIn} />
-)
+
+    return someShit
+
+}
+
+
 
 const mapStateToProps = state => ({
     user: state.signIn

src/components/public/SignUp/Form/index.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import { reduxForm, Field } from 'redux-form';
+
+import validate from './validate';
+import formInput from './../../../common/formInput';
+
+class Form extends React.Component {
+
+    submit = ({ name, email, password }) => {
+        const { signIn } = this.props;
+        signIn({
+            name,
+            email,
+            password
+        })
+    }
+
+
+    render() {
+        const { handleSubmit, requestError, invalid } = this.props;
+
+        return (
+            <div className="container">
+                <div className="row">
+                    <div className="col-md-8 col-10 col-lg-6 m-auto p-4 border rounded">
+
+                        <form className="text-center" onSubmit={handleSubmit(this.submit)}>
+                            {
+                                requestError
+                                    ?
+                                    <p className="text-af text-uppercase">{requestError}</p>
+                                    :
+                                    null
+                            }
+
+                            <div className="form-group border p-4">
+                                <label className="text-uppercase">Name</label>
+                                <Field type="text" name='name' className="form-control" placeholder="example" component={formInput} />
+
+                                <label className="text-uppercase pt-3">Email address</label>
+                                <Field type="email" name='email' className="form-control" placeholder="name@example.com" component={formInput} />
+                            </div>
+
+                            <div className="form-group border p-4">
+                                <label className="text-uppercase">Password</label>
+                                <Field type="password" name='password' className="form-control" component={formInput} />
+
+                                <label className="text-uppercase pt-3">Password Confirmation</label>
+                                <Field type="password" name='passwordConfirmation' className="form-control" component={formInput} />
+                            </div>
+
+                            <button type="submit" className="btn btn-primary" disabled={invalid}>Sign In!</button>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        )
+    }
+}
+
+export default reduxForm({
+    form: "SignUp",
+    validate
+})(Form)

src/components/public/SignUp/Form/validate.js

@@ -0,0 +1,47 @@
+export default function validate(values) {
+    const { name, email, password, passwordConfirmation } = values;
+    const errors = {};
+
+    if (!email) {
+        errors.email = "Required";
+    }
+    else if (email.length < 8 || email.length > 20) {
+        errors.email = "Invalid email length: email should be from 8 to 20 symbols";
+    }
+    else if (
+        !/^(([^<>()\]\\.,;:\s@"]+(\.[^<>()\]\\.,;:\s@"]+)*)|(".+"))@(([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(email)) {
+        errors.email = "Invalid email, try another one";
+    }
+
+    if (!name) {
+        errors.name = "Required";
+    }
+    else if (name.length < 6 || name.length > 10) {
+        errors.name = "Invalid name length: name should be from 6 to 10 symbols";
+    }
+    else if (!/^[_A-z0-9]*((-|\s)*[_A-z0-9])*$/.test(name)) {
+        errors.name = "Invalid name, try another one"
+    }
+    
+    if (!password) {
+        errors.password = "Required"
+    }
+    else if (/[,]/.test(password)) {
+        errors.password = "Invalid symbol: \",\" is not allowed!";
+    }
+    else if (password.length < 8 || password.length > 20) {
+        errors.password = "Invalid password length: password should be from 8 to 20 symbols";
+    }
+    else if (!/^[a-z0-9_-]{8,20}$/i.test(password)) {
+        errors.password = "Invalid password, try another one";
+    }
+
+    if (!passwordConfirmation) {
+        errors.passwordConfirmation = "Required";
+    }
+    else if (password !== passwordConfirmation) {
+        errors.passwordConfirmation = "Passwords don't match each other!";
+    }
+
+    return errors;
+}

src/components/public/SignUp/index.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import Form from './Form';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import { Redirect } from 'react-router-dom'
+
+import Spinner from './../../common/spinner';
+import { signUp } from './../../../actions/auth/signUp';
+
+const SignUp = ({ status, signUp }) => (
+    status.isFetching
+        ?
+        <Spinner />
+        : status.data
+            ?
+            <Redirect to='/' />
+            : status.error
+                ?
+                <Form signUp={signUp} requestError={status.error} />
+                :
+                <Form signUp={signUp} />
+)
+
+const mapStateToProps = state => ({
+    status: state.signUp
+});
+const mapDispatchToProps = dispatch => bindActionCreators({
+    signUp
+}, dispatch);
+
+export default connect(mapStateToProps, mapDispatchToProps)(SignUp);

src/configs/routerConfig.js

@@ -1,10 +1,11 @@
 import React, { lazy } from 'react';
 import * as routes from './../constants/routes';
 
-const ProfilePage =lazy(()=> import('../components/user/ProfilePage'))
+const ProfilePage = lazy(() => import('../components/user/ProfilePage'))
 
 // import SignIn from '../components/public/SignIn';
-const SignIn = lazy(() => import('./../components/public/SignIn'))
+const SignIn = lazy(() => import('./../components/public/SignIn'));
+const SignUp = lazy(() => import('./../components/public/SignUp'));
 
 export default [
     {
@@ -20,7 +21,7 @@ export default [
     {
         path: routes.SIGN_UP,
         access: 'public',
-        component: () => <div>sign up</div>
+        component: SignUp
     },
     {
         path: routes.HOME,

src/reducers/auth/signIn.js

@@ -1,8 +1,9 @@
 import * as actionTypes from './../../constants/auth';
 import initialState from './../initialState';
 
-export default function signInReducer(state = initialState.signIn, { payload, token, type }) {
-    switch (type) {
+export default function signInReducer(state = initialState.signIn, {payload, type, error}) {
+
+    switch (type) { // payload.type -> type
         case actionTypes.SIGN_IN_REQUEST: {
             return {
                 ...state,
@@ -20,7 +21,6 @@ export default function signInReducer(state = initialState.signIn, { payload, to
             }
         }
         case actionTypes.SIGN_IN_REQUEST_FAILURE: {
-            const { error } = payload;
 
             return {
                 ...state,

src/reducers/auth/signUp.js

@@ -9,20 +9,24 @@ export default function signInReducer(state = initialState.signUp, {type, payloa
                 isFetching: true
             }
         }
+        
         case actionTypes.SIGN_IN_REQUEST_SUCCESS: {
             return {
                 ...state,
                 isFetching: false,
-                payload
+                isSuccessful: true
             }
         }
+
         case actionTypes.SIGN_IN_REQUEST_FAILURE: {
             return {
                 ...state,
                 isFetching: false,
+                isSuccessful: false,
                 error
             }
         }
+
         default: {
             return state;
         }

src/reducers/index.js

@@ -1,9 +1,11 @@
 import { combineReducers } from 'redux';
 import { reducer as form } from 'redux-form';
 
-import signIn from './auth/signIn'
+import signIn from './auth/signIn';
+import signUp from './auth/signUp';
 
 export default combineReducers({
     signIn,
+    signUp,
     form
 })

src/reducers/initialState.js

@@ -7,7 +7,7 @@ export default {
     },
     signUp: {
         isFetching: false,
-        data: null,
+        isSuccessful: null,
         error: null
     }
 }

src/router.js

@@ -13,8 +13,6 @@ import { bindActionCreators } from "redux";
 class Router extends React.Component {
     render() {
         const { user, tokenAuth } = this.props;
-        console.log(user);
-
         // TODO: add footer
         return (
             <div className="app">

src/sagas/auth/signIn.js

@@ -2,10 +2,10 @@ import { put, call } from 'redux-saga/effects';
 import axios from 'axios';
 
 import { SIGN_IN_URL } from './../../constants/auth';
+import storageKey from './../../utils/storageKey';
 import { signInSuccess, signInFailure } from './../../actions/auth/signIn'
 
-export default function* ({payload}) {
-    console.log('User inside the worker-saga', payload);
+export default function* ({ payload }) {
     try {
         const config = {
             headers: {
@@ -18,9 +18,15 @@ export default function* ({payload}) {
                 .then(({ data }) => data)
         )
 
+        console.log('\n\n', 'SignIn worker-saga', user, '\n\n\n')
+
+        // yield call(localStorage.setItem, storageKey, user.token);
         yield put(signInSuccess(user));
     }
     catch ({ message }) {
+        window.someError = message;
+        console.warn('\n\n', 'SignIn worker-saga', message, '\n\n\n')
+
         yield put(signInFailure(message));
     }
 }

src/styles/_index.scss

@@ -1,4 +1,5 @@
 @import 'abstracts/variables';
 @import 'abstracts/theme';
+@import 'extended/vh';
 
 @import 'base/typography';

src/styles/extended/_vh.scss

@@ -0,0 +1,14 @@
+.vh {
+    &-100 {
+        height: 100vh;
+    }
+    &-75 {
+        height: 75vh;
+    }
+    &-50 {
+        height: 50vh;
+    }
+    &-25 {
+        height: 25vh;
+    }
+}

src/utils/storageKey.js

@@ -0,0 +1 @@
+export default 'https://test.io';