fix merge conflicts

package.json

@@ -14,8 +14,8 @@
       "^<molecules>/(.*)$": "<rootDir>/src/components/UI/molecules/$1",
       "^<helpers>/(.*)$": "<rootDir>/src/helpers/$1",
       "^<organisms>/(.*)$": "<rootDir>/src/components/UI/organisms/$1",
-      "^<hooks>/(.*)$": "<rootDir>/src/hooks/$1",
-      "^<api>/(.*)$": "<rootDir>/src/api/$1"
+      "^<api>/(.*)$": "<rootDir>/src/api/$1",
+      "^<HOC>/(.*)$": "<rootDir>/src/HOC/$1"
     },
     "coverageReporters": [
       "json-summary",
@@ -108,6 +108,7 @@
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-router-dom": "^5.0.1",
+    "react-toastify": "^5.3.2",
     "styled-components": "^4.3.2",
     "styled-icons": "^8.1.0",
     "validatorjs": "^3.15.1",

src/HOC/withCheckAuth.js

@@ -0,0 +1,36 @@
+/* eslint-disable react/display-name */
+import React from 'react';
+import { toast } from 'react-toastify';
+// import requestApi from '<helpers>/requestApi';
+import useApiData from '<hooks>/useApiData';
+import 'react-toastify/dist/ReactToastify.css';
+
+const withCheckAuth = (WrappedComponent, path) => (props) => {
+  const handleSubmit = async (values) => {
+    // const { data, error } = await requestApi('post', `auth/${path}`, values);
+    const {
+      fetchedData,
+      loading,
+      error,
+    } = await useApiData('post', `auth/${path}`, values);
+    if (loading) {
+      toast.warn('Loading.....');
+      return error;
+    }
+    if (error) {
+      toast.error('Error! User with the same data already exist');
+      return error;
+    }
+    toast.success('Success Notification!');
+    return fetchedData;
+  };
+
+  return (
+    <WrappedComponent
+      {...props}
+      handleSubmit={handleSubmit}
+    />
+  );
+};
+
+export default withCheckAuth;

src/api/api.js

@@ -1,11 +1,6 @@
 import axios from 'axios';
-<<<<<<< HEAD
 import baseUrl from '../constants/constants';
 
-=======
-
-const baseUrl = 'https://king-kong-ah-backend-staging.herokuapp.com/api/v1';
->>>>>>> chore(api): create usedatafromapi hook
 const api = axios.create({
   baseURL: baseUrl,
 });

src/components/UI/atoms/InputField/InputField.jsx

@@ -99,16 +99,9 @@ InputField.Container = styled.input`
     transparentHover,
   }) => `
     color: ${theme.textColors[color]};
-<<<<<<< HEAD
-    ::placeholder {
-    color: ${theme.textColors.pink};
-  }
-=======
-
     ::placeholder {
       color: ${theme.textColors.pink};
     }
->>>>>>> feat(AuthForm): add form feature
     padding: ${theme.spacing[padding]};
     width: ${theme.width[inputWidth]};
     font-size: ${theme.fontSizes[fontSize]};

src/components/UI/molecules/Form/Form.jsx

@@ -14,7 +14,11 @@ const Form = ({
   const { values, handleChange, handleSubmit } = useForm(callback, rules);
   inputData.forEach((input) => {
     input.onChange = handleChange;
-    input.value = values[input.name.value];
+    if (values[input.name]) {
+      const { value, err } = values[input.name];
+      input.value = value;
+      input.errorMessage = err;
+    }
   });
   return (
     <form>

src/components/UI/molecules/InputTextField/InputTextField.jsx

@@ -56,7 +56,7 @@ const InputTextField = ({
         error={errorMessage}
         onChange={onChange} />
       {errorMessage
-        && <span><Text color='red' fontSize='small' display='block'>
+        && <span><Text color='red' fontSize='normal' display='block'>
           {errorMessage}
         </Text></span>}
     </FlexContainer>

src/components/pages/authPages/login.jsx

@@ -0,0 +1,56 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { ToastContainer } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+import AuthForm from '<organisms>/AuthForm/AuthForm';
+import withCheckAuth from '<HOC>/withCheckAuth';
+import Text from '<atoms>/Text/Text';
+import { loginData, loginRules } from './loginItem';
+import FlexContainer from '<atoms>/layouts/FlexContainer/FlexContainer';
+import Image from '<atoms>/Image/Image';
+import ImageUrl from '<image>/home.png';
+
+const Login = (props) => {
+  return (
+    <Fragment>
+      <FlexContainer>
+        <Text
+          content="true"
+          textTransform="uppercase"
+          padding="md"
+          fontWeight="normal"
+          display="inline"
+          fontSize="normal"
+          textAlign="center"
+          color="primary"
+        >
+        Welcome to Authors Haven
+        </Text>
+        <FlexContainer flexDirection='row'>
+          <FlexContainer>
+            <Image
+              imageUrl={ImageUrl}
+              boxShadow='none'
+              altText='welcome'
+            />
+          </FlexContainer>
+          <FlexContainer>
+            <AuthForm
+              title="Sign In"
+              dividerText="Or Sign In With"
+              rules={loginRules}
+              inputData={loginData}
+              callback={props.handleSubmit}
+            />
+            <ToastContainer />
+          </FlexContainer>
+        </FlexContainer>
+      </FlexContainer>
+    </Fragment>
+  );
+};
+
+Login.propTypes = {
+  handleSubmit: PropTypes.func.isRequired,
+};
+export default withCheckAuth(Login, 'login');

src/components/pages/authPages/loginItem.js

@@ -0,0 +1,18 @@
+const passwordFormat = 'regex:/S*(S*([a-zA-Z]S*[0-9])|([0-9]S*[a-zA-Z]))S*/';
+export const loginRules = {
+  email: 'required|email',
+  password: ['required', 'min:8', passwordFormat],
+};
+
+export const loginData = [
+  {
+    label: 'Email',
+    type: 'text',
+    name: 'email',
+  },
+  {
+    label: 'Password',
+    type: 'password',
+    name: 'password',
+  },
+];

src/components/pages/authPages/signUpItem.js

@@ -0,0 +1,36 @@
+const passwordFormat = 'regex:/S*(S*([a-zA-Z]S*[0-9])|([0-9]S*[a-zA-Z]))S*/';
+export const SignUpRules = {
+  email: 'required|email',
+  username: 'required|string|alpha|min:6',
+  firstName: 'required|string|alpha|min:2',
+  lastName: 'required|string|alpha|min:2',
+  password: ['required', 'min:8', passwordFormat],
+};
+
+export const SignUpData = [
+  {
+    label: 'First Name',
+    type: 'text',
+    name: 'firstName',
+  },
+  {
+    label: 'Last Name',
+    type: 'text',
+    name: 'lastName',
+  },
+  {
+    label: 'User Name',
+    type: 'text',
+    name: 'username',
+  },
+  {
+    label: 'Email',
+    type: 'text',
+    name: 'email',
+  },
+  {
+    label: 'Password',
+    type: 'password',
+    name: 'password',
+  },
+];