HT1

admin-panel/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "dependencies": {
     "email-validator": "^1.1.1",
-    "firebase": "^4.7.0",
+    "firebase": "^4.8.0",
     "history": "^4.7.2",
     "immutable": "^3.8.2",
     "logger": "^0.0.1",

admin-panel/src/components/auth/SignInForm.js

@@ -1,6 +1,9 @@
 import React, { Component } from 'react'
 import {reduxForm, Field} from 'redux-form'
 
+import validator from 'email-validator'
+import ErrorField from '../common/ErrorField'
+
 class SignInForm extends Component {
     static propTypes = {
 
@@ -12,10 +15,10 @@ class SignInForm extends Component {
                 <h3>Sign In</h3>
                 <form onSubmit={this.props.handleSubmit}>
                     <div>
-                        email: <Field name='email' component='input'/>
+                        email: <Field name='email' component={ErrorField} />
                     </div>
                     <div>
-                        password: <Field name='password' component='input' type='password'/>
+                        password: <Field name='password' component={ErrorField} type='password'/>
                     </div>
                     <input type='submit' />
                 </form>
@@ -25,6 +28,19 @@ class SignInForm extends Component {
     }
 }
 
+const validate = ({ email, password }) => {
+    const errors = {}
+
+    if (!email) errors.email = 'email is a required field'
+    if (email && !validator.validate(email)) errors.email = 'incorrect email format'
+
+    if (!password) errors.password = 'password is a required field'
+    if (password && password.length < 8) errors.password = 'password is to short'
+
+    return errors
+}
+
 export default reduxForm({
-    form: 'auth'
+    form: 'auth',
+    validate
 })(SignInForm)

admin-panel/src/components/common/Loader.js

@@ -0,0 +1,13 @@
+import React, {Component} from 'react';
+
+class Loader extends Component {
+  render() {
+    return (
+      <div>
+        <h2>Loading...</h2>
+      </div>
+    );
+  }
+}
+
+export default Loader;

admin-panel/src/components/people/AddPeopleForm.js

@@ -0,0 +1,30 @@
+import React, { Component } from 'react';
+import {reduxForm, Field} from 'redux-form'
+
+class AddPeopleForm extends Component {
+    render() {
+        return (
+            <div>
+                <h3>Add people</h3>
+                <form>
+                    <div>
+                        FirstName: <Field name='firstname' component='input'/>
+                    </div>
+                    <div>
+                        LastName: <Field name='lastname' component='input'/>
+                    </div>
+                    <div>
+                        Email: <Field name='email' component='input'/>
+                    </div>
+                    <div>
+                        <input type='submit' />
+                    </div>
+                </form>
+            </div>
+        );
+    }
+}
+
+export default reduxForm({
+    form: 'addPeopleForm' 
+})(AddPeopleForm);

admin-panel/src/components/people/People.js

@@ -0,0 +1,14 @@
+import React, { Component } from 'react';
+import AddPeopleForm from './AddPeopleForm';
+
+class People extends Component {
+    render() {
+        return (
+            <div>
+                <AddPeopleForm />
+            </div>
+        );
+    }
+}
+
+export default People;

admin-panel/src/components/routes/Admin.js

@@ -1,4 +1,7 @@
 import React, { Component } from 'react'
+import {NavLink} from 'react-router-dom';
+import ProtectedRoute from '../common/ProtectedRoute';
+import People from '../people/People';
 
 class Admin extends Component {
     static propTypes = {
@@ -9,6 +12,8 @@ class Admin extends Component {
         return (
             <div>
                 <h2>Admin Page</h2>
+                <li><NavLink to = '/admin/people' activeStyle={{color: 'red'}}>Add People</NavLink></li>
+                <ProtectedRoute path='/admin/people' component={People}/>
             </div>
         )
     }

admin-panel/src/components/routes/auth/index.js

@@ -4,6 +4,7 @@ import {connect} from 'react-redux'
 import {signIn, signUp} from '../../../ducks/auth'
 import SignInForm from '../../auth/SignInForm'
 import SignUpForm from '../../auth/SignUpForm'
+import Loader from '../../common/Loader'
 
 class Auth extends Component {
     static propTypes = {
@@ -14,13 +15,22 @@ class Auth extends Component {
         return (
             <div>
                 <h2>Auth page</h2>
-                <ul>
-                    <li><NavLink to = '/auth/sign-in' activeStyle={{color: 'red'}}>Sign In</NavLink></li>
-                    <li><NavLink to = '/auth/sign-up' activeStyle={{color: 'red'}}>Sign Up</NavLink></li>
-                </ul>
+                {this.renderBody()}
+            </div>
+        )
+    }
+
+    renderBody = () => {
+        const {auth} = this.props
+        if (this.props.auth.loading) return <Loader />;
+
+        return (
+            <ul>
+                <li><NavLink to = '/auth/sign-in' activeStyle={{color: 'red'}}>Sign In</NavLink></li>
+                <li><NavLink to = '/auth/sign-up' activeStyle={{color: 'red'}}>Sign Up</NavLink></li>
                 <Route path='/auth/sign-in' render={() => <SignInForm onSubmit={this.onSignIn}/>} />
                 <Route path='/auth/sign-up' render={() => <SignUpForm onSubmit={this.onSignUp}/>} />
-            </div>
+            </ul>
         )
     }
 
@@ -29,4 +39,8 @@ class Auth extends Component {
 
 }
 
-export default connect(null, { signIn, signUp })(Auth)
+export default connect(
+    state => ({
+        auth: state.auth
+    }),
+    { signIn, signUp })(Auth)

admin-panel/src/config.js

@@ -1,14 +1,14 @@
 import firebase from 'firebase'
 
-export const appName = 'advreact-04-12'
+export const appName = 'advreact0412'
 
 const config = {
-    apiKey: "AIzaSyCmDWlgYIhtEr1pWjgKYds3iXKWBl9wbjE",
+    apiKey: "AIzaSyCFY57-ViC6JCloWtC_2w5cIUIGcPiwhG0",
     authDomain: `${appName}.firebaseapp.com`,
     databaseURL: `https://${appName}.firebaseio.com`,
-    projectId: appName,
+    projectId: "advreact0412",
     storageBucket: "",
-    messagingSenderId: "95255462276"
+    messagingSenderId: "513427030560"
 }
 
 firebase.initializeApp(config)