From 707a4dbf1fb60648c48fe5ad9218a2b0ac3ea011 Mon Sep 17 00:00:00 2001
From: Farmin Farzin <farmin.f@gmail.com>
Date: Thu, 11 Jan 2018 17:45:00 +0100
Subject: [PATCH] add recaptcha and formatting fixes

---
 package.json                   |  1 +
 public/index.html              |  2 ++
 src/components/Login.js        |  1 +
 src/components/LoginGoogle.js  |  8 ++++++++
 src/components/SignUp.js       | 25 +++++++++++++++++--------
 src/containers/Accounts.js     |  8 ++++----
 src/containers/Categories.js   |  2 +-
 src/containers/Dashboard.js    |  3 +--
 src/containers/HomePage.js     |  1 +
 src/containers/Transactions.js |  8 ++++----
 src/utils/constants.js         |  2 +-
 11 files changed, 41 insertions(+), 20 deletions(-)

diff --git a/package.json b/package.json
index f5cf1e8..8cc1f37 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "react": "^16.2.0",
     "react-dates": "^16.0.1",
     "react-dom": "^16.2.0",
+    "react-icons": "^2.2.7",
     "react-recaptcha": "^2.3.5",
     "react-redux": "^5.0.6",
     "react-router": "^4.2.0",
diff --git a/public/index.html b/public/index.html
index 65b68ae..bd050a4 100644
--- a/public/index.html
+++ b/public/index.html
@@ -10,6 +10,8 @@
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
+
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
diff --git a/src/components/Login.js b/src/components/Login.js
index 6bcda62..2afd3d8 100644
--- a/src/components/Login.js
+++ b/src/components/Login.js
@@ -101,6 +101,7 @@ class LoginUserNamePassword extends React.Component {
                     <Button onClick={this.onLoginWithEmail} raised className={classes.button}>
                         Login
                     </Button>
+                    {this.state.error && <p>{this.state.error}</p>}
                 </form>
             </Paper>
         )
diff --git a/src/components/LoginGoogle.js b/src/components/LoginGoogle.js
index 19d1341..7809239 100644
--- a/src/components/LoginGoogle.js
+++ b/src/components/LoginGoogle.js
@@ -4,6 +4,8 @@ import {withStyles} from 'material-ui/styles';
 import Constants from '../utils/constants'
 import Paper from 'material-ui/Paper';
 import Typography from 'material-ui/Typography';
+import FaGoogle from 'react-icons/lib/fa/google-plus-square';
+
 
 const styles = theme => ({
 
@@ -24,6 +26,10 @@ const styles = theme => ({
             marginLeft: 20,
             marginRight: 20
         })
+    ,
+    googleicon:{
+        marginRight : 5
+    }
 });
 
 const LoginGoogle = (props) => {
@@ -41,7 +47,9 @@ const LoginGoogle = (props) => {
                 Login With Google
             </Typography>
             <Button onClick={props.onLoginGoogle} raised className={classes.button}>
+                <FaGoogle size={30} color='red' className={classes.googleicon}/>
                 {Constants.ASSIGNS_LOGIN}
+                
             </Button>
 
         </Paper>
diff --git a/src/components/SignUp.js b/src/components/SignUp.js
index 3456a18..58ff2f3 100644
--- a/src/components/SignUp.js
+++ b/src/components/SignUp.js
@@ -4,6 +4,7 @@ import {withStyles} from 'material-ui/styles';
 import Paper from 'material-ui/Paper';
 import Typography from 'material-ui/Typography';
 import TextField from 'material-ui/TextField';
+import Recaptcha from 'react-recaptcha';
 
 const styles = theme => ({
 
@@ -51,11 +52,8 @@ class SignUp extends React.Component {
 
     onSignup = (e) => {
         e.preventDefault();
-        if (!this.state.email || !this.state.password || !this.state.confirmpassword || 
-            !this.state.email.match(/^(([^<>()\\.,;:\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,}))$/)) {
-            this.setState(() => ({
-                error : 'All field should be filled'
-            }));
+        if (!this.state.email || !this.state.password || !this.state.confirmpassword || !this.state.email.match(/^(([^<>()\\.,;:\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,}))$/)) {
+            this.setState(() => ({error: 'All field should be filled in the correct way'}));
         } else {
             this.setState(() => ({error: ''}));
             this
@@ -66,8 +64,14 @@ class SignUp extends React.Component {
 
     onEmailChange = (e) => {
         const email = e.target.value;
-        //if (!email || email.match(/^(([^<>()\[\]\\.,;:\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,}))$/)) {
-            this.setState(() => ({email}));
+        // if (!email ||
+        // email.match(/^(([^<>()\[\]\\.,;:\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,}))$/)) {
+        this.setState(() => ({email}));
         //}
 
     };
@@ -87,7 +91,7 @@ class SignUp extends React.Component {
         return (
 
             <Paper className={classes.paper} elevation={4}>
-                {this.state.error && <p>{this.state.error}</p>}
+
                 <Typography type="body1" component="p">
                     Create New Account
                 </Typography>
@@ -115,9 +119,14 @@ class SignUp extends React.Component {
                         alue={this.state.confirmpassword}
                         onChange={this.onConfirmPasswordChange}/>
 
+                    <Recaptcha
+                        className={classes.textField}
+                        sitekey="6Lc1_j8UAAAAAH5zKYdv055fpSrIDghc3J6xZF02"
+                       />
                     <Button onClick={this.onSignup} raised className={classes.button}>
                         Register
                     </Button>
+                    {this.state.error && <p>{this.state.error}</p>}
                 </form>
             </Paper>
         )
diff --git a/src/containers/Accounts.js b/src/containers/Accounts.js
index 73c75d0..dbcb2fe 100644
--- a/src/containers/Accounts.js
+++ b/src/containers/Accounts.js
@@ -19,9 +19,9 @@ const styles = theme => ({
     },
     root: {
         flexGrow: 1,
-        marginTop: 30,
-        marginRight: 30,
-        marginLeft: 30,
+        marginTop: theme.spacing.unit,
+        marginRight: theme.spacing.unit,
+        marginLeft: theme.spacing.unit,
         textAlign: 'center'
     },
     paper: {
@@ -53,7 +53,7 @@ class AddAccountContainer extends React.Component {
             <div>
 
                 <div className={classes.root}>
-                    <h1>{Constants.ADD_ACCOUNT_PAGE_TITLE}</h1>
+                    <h2>{Constants.ADD_ACCOUNT_PAGE_TITLE}</h2>
                     <Grid container spacing={8}>
 
                         <Grid item md={4} xs={10} sm={5}>
diff --git a/src/containers/Categories.js b/src/containers/Categories.js
index 6e7da61..47092a4 100644
--- a/src/containers/Categories.js
+++ b/src/containers/Categories.js
@@ -54,7 +54,7 @@ class CategoriesContainer extends React.Component {
             <div>
 
                 <div className={classes.root}>
-                    <h1>{Constants.ADD_CATEGORY_PAGE_TITLE}</h1>
+                    <h2>{Constants.ADD_CATEGORY_PAGE_TITLE}</h2>
                     <Grid container spacing={8} className={classes.rootgrid}>
 
                         <Grid item md={4} xs={10} sm={5}>
diff --git a/src/containers/Dashboard.js b/src/containers/Dashboard.js
index 57937d3..7f24742 100644
--- a/src/containers/Dashboard.js
+++ b/src/containers/Dashboard.js
@@ -2,7 +2,6 @@ import React from 'react';
 import {withStyles} from 'material-ui/styles';
 import Paper from 'material-ui/Paper';
 import Grid from 'material-ui/Grid';
-import Constants from '../utils/constants';
 import AccountList from '../components/AccountList';
 import TransactionList from '../components/TransactionList';
 import CategoryList from '../components/CategoryList';
@@ -61,7 +60,7 @@ class Dashboard extends React.Component {
         const {classes} = this.props;
         return (
             <div>
-                <h1>{Constants.DASHBOARD_PAGE_TITLE}</h1>
+                {/*<h2>{Constants.DASHBOARD_PAGE_TITLE}</h2>*/}
                 <div className={classes.root}>
                     <Grid container spacing={8} className={classes.rootgrid}>
 
diff --git a/src/containers/HomePage.js b/src/containers/HomePage.js
index 37657f5..d9c470d 100644
--- a/src/containers/HomePage.js
+++ b/src/containers/HomePage.js
@@ -10,6 +10,7 @@ import LoginGoogle from '../components/LoginGoogle';
 import SignUp from '../components/SignUp';
 import LoginUserNamePassword from '../components/Login';
 
+
 const styles = theme => ({
 
     button: {
diff --git a/src/containers/Transactions.js b/src/containers/Transactions.js
index 551f6c0..7467548 100644
--- a/src/containers/Transactions.js
+++ b/src/containers/Transactions.js
@@ -21,9 +21,9 @@ const styles = theme => ({
     },
     root: {
         flexGrow: 1,
-        marginTop: 30,
-        marginRight: 30,
-        marginLeft: 30,
+        marginTop: theme.spacing.unit,
+        marginRight: theme.spacing.unit,
+        marginLeft: theme.spacing.unit,
         textAlign: 'center',
     },
     paper: {
@@ -52,7 +52,7 @@ class AddTransactionContainer extends React.Component {
             <div>
 
                 <div className={classes.root}>
-                    <h1>{Constants.ADD_TRANSACTION_PAGE_TITLE}</h1>
+                    <h2>{Constants.ADD_TRANSACTION_PAGE_TITLE}</h2>
                     <Grid container spacing={8}>
 
                         <Grid item md={4} xs={10} sm={11}>
diff --git a/src/utils/constants.js b/src/utils/constants.js
index 7617f51..4bce80c 100644
--- a/src/utils/constants.js
+++ b/src/utils/constants.js
@@ -11,7 +11,7 @@ const Constants = {
     ASSIGNS_LOGOUT : "Logout",
     TEXT_LOGIN_CARD_HEADER : 'Welcome to Family Finance',
     TEXT_LOGIN_CARD_BODY : 'Login to your area',
-    ADD_ACCOUNT_PAGE_TITLE : 'Account',
+    ADD_ACCOUNT_PAGE_TITLE : 'Accounts',
     ADD_TRANSACTION_PAGE_TITLE : 'Transactions',
     ADD_CATEGORY_PAGE_TITLE: 'Categories',