Merge pull request #14 from shredx/himanshu

statrted login page changes
shredx · Apr 11, 2019 · 23667c9 · 23667c9
2 parents cbc9010 + 739c506
commit 23667c9
Show file tree

Hide file tree

Showing 8 changed files with 119 additions and 19 deletions.
diff --git a/assets/config.js b/assets/config.js
@@ -1,3 +1,15 @@
 export const config = {
-    "BASE_URL": "http://akshay.test1.exlmia.io/graphql"
-}
+    "BASE_URL": "http://akshay.test1.exlmia.io/graphql",
+    "ORDER_ROUTE": "My Order",
+    "CART_ROUTE": "My Cart",
+    "CATALOG_ROUTE": "Catalog",
+}
+
+export const label = {
+    "NAME": "Name",
+    "NUMBER": "Number",
+    "PASSWORD": "PASSWORD",
+    "LOGIN": "LOGIN",
+    "SIGNUP": "SIGNUP"
+}
+
diff --git a/pages/components/catalogMenu/catalogMenu.js b/pages/components/catalogMenu/catalogMenu.js
@@ -1,6 +1,7 @@
 import React, {Component} from 'react';
 import CatalogMenuItemComponent from './catalogMenuItem/catalogMenuItem';
 import { fetchCatalogList } from '../../../services/graphqlAddSchema';
+import { config } from '../../../assets/config';
 /**
  * This Component is the fixed side component of shredCom App
  */
@@ -26,7 +27,7 @@ export default class CatalogMenuComponent extends React.Component {
      */
     render(){
         return( <React.Fragment>
-            {this.state.categoryDetails.map(cat => <CatalogMenuItemComponent category={cat} updateId={Id => this.props.update('Catalog',Id)} key={cat.ID}/>)}
+            {this.state.categoryDetails.map(cat => <CatalogMenuItemComponent category={cat} updateId={Id => this.props.update(config.CATALOG_ROUTE,Id)} key={cat.ID}/>)}
             </React.Fragment>
             ) 
     }

diff --git a/pages/components/header/header.js b/pages/components/header/header.js
@@ -3,6 +3,7 @@ import './header.css'
 import MyOrderComponent from '../view/myOrders/myOrders';
 import MyCartComponent from '../view/myCarts/myCarts';
 import HomeComponent from '../../container/home';
+import { config } from '../../../assets/config';
 /**
  * This Component is the fixed header component of shredCom App
  */
@@ -29,10 +30,10 @@ export default class HeaderComponent extends React.Component {
           <ul className="navbar-nav mr-auto" onClick={this.contentChange}>
 
             <li className="nav-item">
-              <a className="nav-link" to="#">My Cart</a>
+              <a className="nav-link" to="#">{config.CART_ROUTE}</a>
             </li>
             <li className="nav-item">
-              <a className="nav-link" to="#">My Orders</a>
+              <a className="nav-link" to="#">{config.ORDER_ROUTE}</a>
             </li>
           </ul>        
         </div>

diff --git a/pages/components/login/login.css b/pages/components/login/login.css
@@ -0,0 +1,5 @@
+/*this styling is for login btn div*/
+.loginBtnDiv{
+    display:flex;
+    flex-direction: row;
+}
diff --git a/pages/components/login/login.js b/pages/components/login/login.js
@@ -0,0 +1,48 @@
+import React, {Component} from 'react';
+import './login.css'
+import { label } from '../../../assets/config';
+/**
+ * This Component is the fixed Login component of shredCom App
+ */
+export default class LoginComponent extends React.Component {
+    constructor() {
+        super()
+        this.state={
+            formDetails: [{
+                Name: label.NAME,
+                Type: "Text",
+            },{
+                Name: label.PASSWORD,
+                Type: "Password",
+            }],
+        }
+    }
+    /**
+     * this function would update the state when login clicked 
+     */
+    onLogin = () => {
+        //update the state
+    }
+    /**
+     * this function would update the state when signin clicked 
+     */
+    onSign = () => {
+        //update the state
+    }    
+    render(){
+        return( <React.Fragment>
+            <div>
+                <div className='loginBtnDiv'>
+                <a to="#" onClick={this.onLogin}>{label.LOGIN}</a>
+                <a to="#" onClick={this.onSign}>{label.SIGNUP}</a>
+                </div>
+                {this.state.formDetails.map(f => {
+                    return (<div>
+                        cghfhgf
+                        </div>)
+                })}
+                </div>
+            </React.Fragment>
+            ) 
+    }
+}
diff --git a/pages/components/view/view.js b/pages/components/view/view.js
@@ -2,7 +2,7 @@ import React, {Component} from 'react';
 import CatalogDetailsComponent from './catalogDetails/catalogDetails';
 import MyOrderComponent from './myOrders/myOrders';
 import MyCartComponent from './myCarts/myCarts';
-import '../../../services/fetchData'
+import { config } from '../../../assets/config';
 
 /**
  * This Component is the view component of shredCom App
@@ -13,13 +13,13 @@ export default class ViewComponent extends React.Component {
     }
 /**this function will render the respective component called after routing**/
    componentRendered = ()=> {
-	    if(this.props.url == "My Orders"){
+	    if(this.props.url == config.ORDER_ROUTE){
 		return <MyOrderComponent/>
 	    }
-	    if(this.props.url == "My Cart"){
+	    if(this.props.url == config.CART_ROUTE){
 		return <MyCartComponent/>
 	    }
-	    if(this.props.url == "Catalog"){
+	    if(this.props.url == config.CATALOG_ROUTE){
 		return <CatalogDetailsComponent Id = {this.props.Id}/>
 	    }
     }

diff --git a/pages/container/home.css b/pages/container/home.css
@@ -27,7 +27,23 @@
     position:fixed;
     background-color: #e2e0cd;
 }
-
+/*this sstyle is for login component container*/
+.login-container{
+    height:100%;
+    width: 100%;
+    position: fixed;
+    display: flex;
+    background-color: #e2e0cd;
+}
+/*this sstyle is for login main container*/
+.login-container div{
+    height:30vw;
+    width: 40vw;
+    display:flex;
+    flex-direction: column;
+    background-color: #fff;
+    margin: auto;
+}
 .side-container span {
     padding: 0.5vw;
     border: 0.2vw solid grey

diff --git a/pages/container/home.js b/pages/container/home.js
@@ -5,6 +5,7 @@ import CatalogMenuComponent from '../components/catalogMenu/catalogMenu';
 import ViewComponent from '../components/view/view';
 import MyOrderComponent from '../components/view/myOrders/myOrders';
 import MyCartComponent from '../components/view/myCarts/myCarts';
+import LoginComponent from '../components/login/login';
 /**
  * This component is the home page of shredCom App
  */
@@ -26,19 +27,35 @@ export default class HomeComponent extends React.Component {
             viewPage:val,
             Id: id ? id:1
         })
+
+    }
+    /**
+     * This function decides whether user login page is to be rendered or not
+     */
+    authUser = () => {
+        if(localStorage.getItem('user')){
+            return (<div>
+                <div className="header-container" ><HeaderComponent update={(val)=>this.updateContent(val)}/>
+                </div>
+                <div className="side-container"><CatalogMenuComponent update={(val,id)=>this.updateContent(val,id)}/>
+                </div>
+                <div className="view-container" ><ViewComponent Id={this.state.Id} url={this.state.viewPage} />
+                </div>
+                </div>
+            )
+        }else{
+            return (
+                <div className='login-container'>
+                    <LoginComponent/>
+                    </div>
+            )
+        }
     }
 
     render(){
+
         return( <React.Fragment>
-
-
-            <div className="header-container" ><HeaderComponent update={(val)=>this.updateContent(val)}/>
-            </div>
-            <div className="side-container"><CatalogMenuComponent update={(val,id)=>this.updateContent(val,id)}/>
-            </div>
-            <div className="view-container" ><ViewComponent Id={this.state.Id} url={this.state.viewPage} />
-            </div>
-
+           {this.authUser()}
             </React.Fragment>
             ) 
     }