fix validation

src/components/hooks/useForm.js

@@ -4,19 +4,13 @@ export const useForm = initialValues => {
 	const [form, setFormProp] = useState(initialValues);
 
 	const validator = (rules, value, allForm) => {
-		const { requred, minL, match } = rules;
+		const valid = Object.keys(rules).reduce((prev, elem) => {
+			if (prev) return true
+			const check = rules[elem].cb(value, allForm[rules[elem].match])
+			if (!prev && check) return check
 
-		let valid = true;
-		if (requred) {
-			valid = value.trim() !== "" && valid;
-		}
-
-		if (minL) {
-			valid = value.trim().length < minL && valid;
-		}
-		if (match) {
-			valid = value.trim() !== allForm[match] && valid;
-		}
+			return false
+		}, false)
 
 		return valid;
 	};
@@ -67,15 +61,14 @@ export const useForm = initialValues => {
 		}, {});
 
 		setFormProp(prevState => {
-			const lll = validator(prevState.form[name].validation, value, prevValues);
-			console.log("lll", lll);
+			const valid = validator(prevState.form[name].validation, value, prevValues);
 			return {
 				...prevState,
 				form: {
 					...prevState.form,
 					[name]: {
 						...prevState.form[name],
-						fail: value ? lll : true
+						fail: value ? valid : true
 					}
 				}
 			};

src/containers/auth.js

@@ -1,7 +1,6 @@
 import React, { Component } from "react";
 import { connect } from "react-redux";
 import { Redirect } from "react-router-dom";
-import axios from "axios";
 
 import { auth, register } from "../actions/auth";
 
@@ -12,16 +11,6 @@ import Loader from "../components/HOC/loader";
 export class AuthContainer extends Component {
 	state = { auth: true };
 
-	async componentDidMount() {
-		const response = await axios({
-			method: "GET",
-			url: "http://localhost:5000/api/v1/",
-			withCredentials: true
-		});
-
-		console.log("response", response);
-	}
-
 	toggleAuth = () => this.setState(prevState => ({ auth: !prevState.auth }));
 
 	render() {

src/styles/pages/_auth.scss

@@ -23,6 +23,7 @@
 		font-size: 1.6rem;
 		font-weight: bold;
 		color: rgb(102, 104, 223);
+		cursor: pointer;
 	}
 
 	&__auth-box {

src/utils/formFields.js

@@ -6,7 +6,9 @@ export const logInForm = {
 			type: "email",
 			label: "Email",
 			validation: {
-				requred: true
+				requred: {
+					cb: (v) => v.trim() === ''
+				} 
 			},
 			fail: false,
 			touch: false,
@@ -18,8 +20,12 @@ export const logInForm = {
 			type: "password",
 			label: "Password",
 			validation: {
-				requred: true,
-				minL: 6
+				requred: {
+					cb: (v) => v.trim() === '',
+				},
+				minL: {
+					cb: (v) => v.trim().length < 6
+				}
 			},
 			fail: false,
 			touch: false,
@@ -37,7 +43,9 @@ export const signUpForm = {
 			type: "email",
 			label: "Email",
 			validation: {
-				requred: true
+				requred: {
+					cb: (v) => v.trim() === ''
+				}
 			},
 			fail: false,
 			touch: false,
@@ -49,7 +57,9 @@ export const signUpForm = {
 			name: "firstName",
 			label: "First Name",
 			validation: {
-				requred: true
+				requred: {
+					cb: (v) => v.trim() === ''
+				}
 			},
 			fail: false,
 			touch: false,
@@ -61,7 +71,9 @@ export const signUpForm = {
 			name: "lastName",
 			label: "First Name",
 			validation: {
-				requred: true
+				requred: {
+					cb: (v) => v.trim() === ''
+				}
 			},
 			fail: false,
 			touch: false,
@@ -73,8 +85,12 @@ export const signUpForm = {
 			type: "password",
 			label: "Password",
 			validation: {
-				requred: true,
-				minL: 6
+				requred: {
+					cb: (v) => v.trim() === '',
+				},
+				minL: {
+					cb: (v) => v.trim().length < 6
+				}
 			},
 			fail: false,
 			touch: false,
@@ -86,9 +102,16 @@ export const signUpForm = {
 			type: "password",
 			label: "Confirm Password",
 			validation: {
-				requred: true,
-				minL: 6,
-				match: "password"
+				requred: {
+					cb: (v) => v.trim() === '',
+				},
+				minL: {
+					cb: (v) => v.trim().length < 6
+				},
+				match: {
+					match: "password",
+					cb: (v, m) => v !== m,
+				}
 			},
 			fail: false,
 			touch: false,