addBranch

src/components/signIn.js

@@ -0,0 +1,173 @@
+import React, { Component } from 'react';
+
+import Input from './input';
+import Button from './button';
+
+class SignIn extends Component {
+    state = { 
+        form: {
+            email: {
+                id: 1,
+                name: 'email',
+                type: 'email',
+                label: 'Email',
+                validation: {
+                    required: true
+                },
+                fail: false,
+                touch: false,
+                value: ''
+            },
+            password: {
+                id: 2,
+                name: 'password',
+                type: 'password',
+                label: 'Password',
+                validation: {
+                    required: true,
+                    minL: 6
+                },
+                fail: false,
+                touch: false,
+                value: ''
+            }
+        },
+        validForm: false
+     };
+
+     componentDidMount(){
+        this.loadJS("https://apis.google.com/js/platform.js?onload=init");
+     }
+
+     loadJS = src => {
+		const body = window.document.getElementsByTagName("body")[0];
+		const ref = body.getElementsByTagName("script")[0];
+
+		const script = window.document.createElement("script");
+		script.src = src;
+		script.async = true;
+		script.defer = true;
+		script.onload = () => {
+			window.gapi.load("auth2", () => {
+				console.log("success");
+			});
+		};
+		ref.parentNode.insertBefore(script, ref);
+    };
+    
+    googleAuth = () => {
+		const ga = window.gapi.auth2.init({
+			client_id: '1018884941403-cd6ilegbhitova86k4i7k89eqldpatfj.apps.googleusercontent.com'
+		});
+
+		ga.signIn().then(info => {
+			const { Zi } = info;
+			fetch("http://subdomain.entony.fs.a-level.com.ua/api/auth/google", {
+				method: "POST",
+				headers: {
+					"Content-Type": "application/json"
+				},
+				body: JSON.stringify({ access_token: Zi.access_token })
+			})
+				.then(res => res.json())
+				.then(res => console.log("res", res))
+				.catch(err => console.log(err.response));
+		});
+    };
+    
+    instaAuth = () => {
+        
+    }
+    
+     validator = (rules,value) => {
+         const { required, minL } = rules;
+
+         let valid = true;
+         if(required){
+             valid = value.trim() === '' && valid;
+         }
+
+         if(minL){
+             valid = value.trim().length < minL && valid;
+         }
+
+         return valid
+     };
+
+     submit = e => {
+         e.preventDefault();
+
+         const values = Object.keys(this.state.form).reduce((prev,elem) => {
+             return {...prev, [elem]: this.state.form[elem].value };
+         }, {});
+
+         this.props.submitHandler(values);
+     };
+
+     onChangeHandler = e => {
+         const { name, value } = e.target;
+
+         this.setState(prevState => {
+             const values = Object.keys(prevState.form).reduce((prev, elem) => {
+                 if (elem === name) return prev.concat(value);
+                 return prev.concat(prevState.form[elem].value);
+             },[]);
+
+             return {
+                 ...prevState,
+                 form: {
+                     ...prevState.form,
+                     [name]: {
+                         ...prevState.form[name],
+                         value,
+                         touch: true,
+                         fail: this.validator(prevState.form[name].validation, value)
+                     }
+                 },
+                 validForm: values.some(value => value)
+             };
+         });
+     };
+
+    render() { 
+        const { form, validForm } = this.state;
+        const { error } = this.props;
+        
+        return (
+                <div className="auth__auth-box">
+                    <form onSubmit={this.submit} className="auth__auth-form">
+                        {Object.keys(form).map(input_name => {
+                            return (
+                                <Input 
+                                    key={form[input_name].id}
+                                    id={form[input_name].id}
+                                    value={form[input_name].value}
+                                    name={form[input_name].name}
+                                    type={form[input_name].type}
+                                    fail={form[input_name].fail}
+                                    touch={form[input_name].touch}
+                                    label={form[input_name].label}
+                                    onChange={this.onChangeHandler}
+                                />
+                          );
+                     })}
+                    {error && <p className='auth__error-auth-text'>{error}</p>}
+                     <div className="auth__control-box">
+                         <Button className='auth__submit-btn'
+                            disabled={!validForm}
+                            type='submit'
+                            text='Sign In'/>
+                    </div>
+                 </form>
+                 <div className="auth__google-auth">
+                    <Button 
+                        type="button" 
+                        text='Sign in with Google' 
+                        onClick={this.googleAuth}/>
+                </div>
+             </div> 
+         );
+    }
+}
+ 
+export default SignIn;

src/components/signUp.js

@@ -0,0 +1,173 @@
+import React, { Component } from 'react';
+
+import Input from './input';
+import Button from './button';
+
+class SignUp extends Component {
+    state = {
+        form: {
+            email: {
+                id: 1,
+                name: 'email',
+                type: 'email',
+                label: 'Email',
+                validation: {
+                    required: true
+                },
+                fail: false,
+                touch: false,
+                value: ''
+            },
+            firstName: {
+                id: 2,
+                name: 'firstName',
+                type: 'text',
+                label: 'First Name',
+                validation: {
+                    required: true
+                },
+                fail: false,
+                touch: false,
+                value: ''
+            },
+            lastName: {
+                id: 3,
+                name: 'lastName',
+                type: 'text',
+                label: 'Last Name',
+                validation: {
+                    required: true
+                },
+                fail: false,
+                touch: false,
+                value: ''
+            },
+            // phone: {
+            //     id: 4,
+            //     name: 'phone',
+            //     type: 'phone',
+            //     label: 'Phone',
+            //     validation: {
+            //         required: true
+            //     },
+            //     fail: false,
+            //     touch: false,
+            //     value: ''
+            // },
+            password: {
+                id: 5,
+                name: 'password',
+                type: 'password',
+                label: 'Password',
+                validation: {
+                    required: true,
+                    minL: 6
+                },
+                fail: false,
+                touch: false,
+                value: ''
+            },
+            confirmPassword: {
+                id: 6,
+                name: 'confirmPassword',
+                type: 'password',
+                label: 'Confirm Password',
+                validation: {
+                    required: true,
+                    minL: 6,
+                    match: 'password'
+                },
+                fail: false,
+                touch: false,
+                value: ''
+            }
+        },
+        validForm: false 
+    }
+
+    validator = (rules,value) => {
+        const { required, minL } = rules;
+
+        let valid = true;
+        if(required){
+            valid = value.trim() === '' && valid;
+        }
+
+        if(minL){
+            valid = value.trim().length < minL && valid;
+        }
+
+        return valid
+    };
+
+    submit = e => {
+        e.preventDefault();
+
+        const values = Object.keys(this.state.form).reduce((prev,elem) => {
+            return {...prev, [elem]: this.state.form[elem].value };
+        }, {});
+
+        this.props.submitHandler(values);
+    };
+
+    onChangeHandler = e => {
+        const { name, value } = e.target;
+
+        this.setState(prevState => {
+            const values = Object.keys(prevState.form).reduce((prev, elem) => {
+                if (elem === name) return prev.concat(value);
+                return prev.concat(prevState.form[elem].value);
+            },[]);
+
+            return {
+                ...prevState,
+                form: {
+                    ...prevState.form,
+                    [name]: {
+                        ...prevState.form[name],
+                        value,
+                        touch: true,
+                        fail: this.validator(prevState.form[name].validation, value)
+                    }
+                },
+                validForm: values.some(value => value)
+            };
+        });
+    };
+
+    render() { 
+        const { form, validForm } = this.state;
+        const { error, successRegister } = this.props;
+
+        return ( 
+            <div>
+                <form onSubmit={this.submit} className="auth__auth-form">
+                        {Object.keys(form).map(input_name => {
+                            return (
+                                <Input 
+                                    key={form[input_name].id}
+                                    id={form[input_name].id}
+                                    value={form[input_name].value}
+                                    name={form[input_name].name}
+                                    type={form[input_name].type}
+                                    fail={form[input_name].fail}
+                                    touch={form[input_name].touch}
+                                    label={form[input_name].label}
+                                    onChange={this.onChangeHandler}
+                                />
+                          );
+                     })}
+                    {successRegister && <p className="auth_success-auth-text">{successRegister}</p>}
+                    {error && <p className='auth__error-auth-text'>{error}</p>}
+                     <div className="auth__control-box">
+                         <Button className='auth__submit-btn'
+                            disabled={!validForm}
+                            type='submit'
+                            text='Sign Up'/>
+                    </div>
+                 </form>
+            </div> );
+    }
+}
+ 
+export default SignUp;

src/containers/auth.js

@@ -0,0 +1,74 @@
+import React, { Component } from "react";
+import { connect } from 'react-redux';
+import { Redirect } from 'react-router-dom';
+
+import { auth } from '../actions/auth';
+import { register } from '../actions/signUp'
+
+import SignUpForm from '../components/signUp';
+import SignInForm from '../components/signIn';
+import Loader from '../components/loader';
+
+class Auth extends Component {
+  state = { auth: true };
+
+  toggleAuth = () => this.setState(prevState => ({ auth: !prevState.auth}));
+
+  render() {
+    const { auth } = this.state;
+
+    if(this.props.user) {
+      return <Redirect to='/' />;
+    }
+
+    return (
+      <div className="auth">
+        <div className="auth__content">
+          { auth ? (
+              <Loader flag={this.props.isFetching}>
+                <SignInForm error={this.props.errorFromAuth} submitHandler={this.props.auth} />
+              </Loader>
+          ) : (
+              <Loader flag={this.props.isFetching}>
+                <SignUpForm 
+                  error={this.props.errorFromAuth}
+                  submitHandler={this.props.register}
+                  successRegister={this.props.successRegister}
+                />
+              </Loader>
+          )}
+
+          <div className="auth__additional-content">
+            {auth ? (
+              <p className="auth__text">
+                Do you have account ? {" "}
+                <span className="auth__toggle-span" onClick={this.toggleAuth}>
+									Sing Up
+								</span>
+              </p>
+            ) : (
+              <p className="auth__text">
+								I have account{" "}
+								<span className="auth__toggle-span" onClick={this.toggleAuth}>
+									Sign In
+								</span>
+							</p>
+            )}
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+const mapStateToProps = state => ({
+  user: state.auth.user,
+  isFetching: state.auth.isFetching,
+  errorFromAuth: state.auth.error,
+  successRegister: state.auth.successRegister
+})
+
+export default connect(
+  mapStateToProps,
+  { auth,register }
+)(Auth);