Add a User Registration Login and Logout : Feature/register and login

README.md

@@ -17,23 +17,46 @@ These instructions will get you a copy of the project up and running on your loc
 2. `cd wp-decoupled`
 3. `npm install`
 
-## Add GraphQl support on WordPress
+## Configure Backend( WordPress site ) :wrench:
 
-1. Clone and activate the following plugins , in your WordPress plugin directory:
+### 1. Add GraphQl support on WordPress
+
+1. Clone and activate the following plugins, in your WordPress plugin directory:
 	* [wp-graphql](https://github.com/wp-graphql/wp-graphql) Exposes graphql for WordPress
+	* [wp-graphql-jwt-authentication](https://github.com/wp-graphql/wp-graphql-jwt-authentication) This plugin extends the [wp-graphql](https://github.com/wp-graphql/wp-graphql) plugin to provide authentication using JWT.
 	* [wp-graphiql](https://github.com/wp-graphql/wp-graphiql) Provides GraphiQL IDE (playground) to the WP-Admin
+	* [wp-graphql-woocommerce](https://github.com/wp-graphql/wp-graphql-woocommerce) Adds Woocommerce functionality to a WPGraphQL schema.
+
 
 2. You can also import default wooCommerce products that come with wooCommerce Plugin for development ( if you don't have any products in your WordPress install )
    WP Dashboard > Tools > WooCommerce products(CSV) : The WooCommerce default products csv file is available at `wp-content/plugins/woocommerce/sample-data/sample_products.csv`   	
+
+### 2. For Authentication.
+
+a. You can use any secret token of your choice, however it would be best if you generate one using WordPress Salt generator (https://api.wordpress.org/secret-key/1.1/salt/) to generate a Secret.
+And just pick up any one of the token and add it in place of 'your-secret-token' below:
+
+   Define a Secret in `wp-config.php` of your WordPress directory:
+   ```
+   define( 'GRAPHQL_JWT_AUTH_SECRET_KEY', 'your-secret-token' );
+   ```  
+
+b. Depending on your particular environment, you may have to research how to enable these headers, but in Apache, you can do the following in your `.htaccess`:
+
+   ```
+   SetEnvIf Authorization "(.*)" HTTP_AUTHORIZATION=$1
+   ```
 
-## Configure :wrench:
+## Configure Front end:wrench:
 
 * Rename `client-config-example.js` to `client-config.js` and update your React Site URL
 
 ```ruby
 const config = {
 	siteUrl: 'http://localhost:3000',
-	graphqlUrl: 'http://wordpressSiteUrl/graphql'
+	graphqlUrl: 'http://wordpressSiteUrl/graphql',
+	postCodeLocale: 'IN',
+	authTokenName: 'wp-decoupled/AUTH_TOKEN' ,
 };
 ```
 

components/cart/AddToCartButton.js

@@ -1,6 +1,6 @@
 import { useState, useContext } from 'react';
 import { AppContext } from "../context/AppContext";
-import { addFirstProduct, updateCart } from "../../utils/functions";
+import { addFirstProduct, updateCart } from "../../utils/cart-functions";
 import Link from 'next/link';
 
 const AddToCartButton = ( props ) => {

components/cart/cart-page/CartBlocks.js

@@ -1,7 +1,7 @@
 import Link from 'next/link';
 import { useContext } from 'react';
 import { AppContext } from "../../context/AppContext";
-import { removeItemFromCart } from '../../../utils/functions';
+import { removeItemFromCart } from '../../../utils/cart-functions';
 import CartItem from "./CartItem";
 
 const CartBlocks = () => {

components/cart/cart-page/CartItem.js

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { updateCart } from "../../../utils/functions";
+import { updateCart } from "../../../utils/cart-functions";
 
 const CartItem = ( { item, handleRemoveProductClick, setCart } ) => {
 

components/layouts/Header.js

@@ -1,7 +1,6 @@
-import Link from 'next/link';
 import Router from "next/router";
 import NProgress from "nprogress";
-import CartIcon from "../cart/CartIcon";
+import Nav from "./Nav";
 
 Router.onRouteChangeStart = () => {
 	NProgress.start();
@@ -15,19 +14,7 @@ Router.onRouteChangeError = () => {
 };
 
 const Header = () => (
-	<nav className="wd-navbar navbar navbar-expand-lg navbar-dark bg-primary">
-		<Link href="/"><a className="navbar-brand">WP Decoupled</a></Link>
-		<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01"
-			aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
-		</button>
-
-		<div className="collapse navbar-collapse" id="navbarColor01">
-
-		</div>
-		<div className="cart">
-			<CartIcon />
-		</div>
-	</nav>
+	<Nav/>
 );
 
 export default Header;

components/layouts/Menu.js

@@ -0,0 +1,50 @@
+import Link from "next/link";
+import { isUserValidated, logoutUser } from "../../utils/auth-functions";
+import { useEffect, useState } from 'react';
+import isEmpty from "../../validator/isEmpty";
+
+const Menu = () => {
+
+	const [ loggedIn, setLoggedIn ] = useState( false );
+
+
+	const handleLogout = () => {
+
+		if ( process.browser ) {
+
+			logoutUser( '/login' );
+		}
+
+	};
+
+	useEffect( () => {
+
+		if ( process.browser ) {
+
+			const userValidated = isUserValidated();
+
+			// If user is not validated, then logout button should be shown.
+			if ( ! isEmpty( userValidated ) ) {
+				setLoggedIn( true );
+			}
+		}
+	} );
+
+	return (
+		<ul className="wpd-main-nav">
+			<li className="wpd-main-nav__list">
+				<Link href="/login"><a className="wpd-main-nav__link">Login</a></Link>
+			</li>
+			<li className="wpd-main-nav__list">
+				<Link href="/register"><a className="wpd-main-nav__link">Register</a></Link>
+			</li>
+			{ loggedIn ? (
+				<li className="wpd-main-nav__list">
+					<a className="wpd-main-nav__link" onClick={ handleLogout }>Logout</a>
+				</li>
+			) : '' }
+		</ul>
+	)
+};
+
+export default Menu;

components/layouts/Nav.js

@@ -0,0 +1,26 @@
+import Link from "next/link";
+import CartIcon from "../cart/CartIcon";
+import Menu from "./Menu";
+
+const Nav = () => {
+	return (
+		<nav className="wd-navbar navbar navbar-expand-lg navbar-dark bg-primary">
+
+			<Link href="/"><a className="navbar-brand">WP Decoupled</a></Link>
+			<Menu/>
+			<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01"
+			        aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
+			</button>
+
+			<div className="collapse navbar-collapse" id="navbarColor01">
+
+			</div>
+			<div className="cart">
+				<CartIcon />
+			</div>
+
+		</nav>
+	)
+};
+
+export default Nav;

components/message-alert/Loading.js

@@ -0,0 +1,5 @@
+const Loading = ( { message } ) => (
+	<div className="mt-2 mb-2 text-info">{ message }</div>
+);
+
+export default Loading;

components/message-alert/MessageAlert.js

@@ -0,0 +1,22 @@
+
+import DOMPurify from 'dompurify';
+import { wpdDecodeHtml } from "../../utils/commmon-functions";
+
+const MessageAlert = ( { message, success, onCloseButtonClick } ) => {
+
+	return (
+
+		<div className="alert alert-dismissible mt-3" style={ { border: '1px solid #cecdcd' } }>
+			<button type="button" onClick={ onCloseButtonClick } className="close text-muted" data-dismiss="alert">
+				<small>&times;</small>
+			</button>
+			<span
+				className={ success ? 'text-success' : 'text-danger' }
+				dangerouslySetInnerHTML={ { __html: DOMPurify.sanitize( wpdDecodeHtml( message ) ) } }
+			/>
+		</div>
+
+	);
+};
+
+export default MessageAlert;

package.json

@@ -34,6 +34,7 @@
     "apollo-cache-inmemory": "^1.6.2",
     "apollo-link-http": "^1.5.14",
     "cookie-parser": "^1.4.4",
+    "dompurify": "^2.0.3",
     "dotenv": "^8.0.0",
     "express": "^4.17.1",
     "graphql": "^14.3.1",