tracking and options added

src/App.js

@@ -3,8 +3,10 @@ import Axios from 'axios';
 import HomePage from "./components/HomePage";
 import PricingPlan from "./components/PricingPlan";
 import LogInContainer from "./components/LogInContainer";
-import { BrowserRouter, Route, Switch } from 'react-router-dom';
+import { Router,BrowserRouter, Route, Switch } from 'react-router-dom';
 import UserContext from "./context/UserContext";
+import Tracking from "./components/Tracking";
+import Options from "./components/Options";
 
 export default function App() {
   const [userData, setUserData ] = useState({
@@ -45,9 +47,11 @@ export default function App() {
         <BrowserRouter>
         <UserContext.Provider value= {{userData, setUserData}}>
           <Switch>
-            <Route exact path="/home" component={HomePage} />
+            <Route exact path="/" component={HomePage} />
             <Route path="/user" component={LogInContainer} />
             <Route path="/pricing" component={PricingPlan} />
+            <Route path="/track" component={Tracking} />
+            <Route path="/options" component={Options} />
           </Switch>
           </UserContext.Provider>
         </BrowserRouter>

src/components/HomePage.js

@@ -17,9 +17,6 @@ class  HomePage extends Component {
       <div className="HomePage">
         < NavBar />
         
-
-        
-        
   <section class="colored-section" id="title">
 
     <div class="container-fluid">

src/components/NavBar.js

@@ -9,8 +9,8 @@ export default function NavBar() {
 
   const history = useHistory();
 
-  const register = () => history.push("/register");
+  const register = () => history.push("/user/register");
-  const login = () => history.push("/login");
+  const login = () => history.push("/home");
   const logout = () => {
     setUserData({
       token: undefined,
@@ -38,11 +38,13 @@ export default function NavBar() {
           <li><a href="#">About</a></li>
           <li><a href="#">Services</a></li>
           <li><a href="#">Contact us</a></li>
-          <li><a href="#">Log In</a></li>
           {userData.user ? (
-            <li><a href="#">Log Out</a></li>
+            <li><a href="#" onClick={logout}>Log Out</a></li>
           ) : (
-              <li><a href="#">Register</a></li>
+              <React.Fragment>
+              <li><a href="#" onclick={register}>Register</a></li>
+              <li><button type="button" onclick={login}>login</button></li>
+              </React.Fragment>
             )}
         </ul>
 

src/components/Options.js

@@ -0,0 +1,79 @@
+import React from 'react';
+import "./options.css";
+
+export default function Options() {
+
+    const previousBtn = document.getElementById('previousBtn');
+    const nextBtn = document.getElementById('nextBtn');
+    const finishBtn = document.getElementById('finishBtn');
+    const content = document.getElementById('content');
+    const bullets = [...document.querySelectorAll('.bullet')];
+
+    const MAX_STEPS = 4;
+    let currentStep = 1;
+    if(nextBtn){
+    nextBtn.addEventListener('click', () => {
+        bullets[currentStep - 1].classList.add('completed');
+        currentStep += 1;
+        previousBtn.disabled = false;
+        if (currentStep === MAX_STEPS) {
+            nextBtn.disabled = true;
+            finishBtn.disabled = false;
+        }
+        content.innerText = `Step Number ${currentStep}`;
+        
+    });
+}
+
+
+    if(previousBtn){
+    previousBtn.addEventListener('click', () => {
+        bullets[currentStep - 2].classList.remove('completed');
+        currentStep -= 1;
+        nextBtn.disabled = false;
+        finishBtn.disabled = true;
+        if (currentStep === 1) {
+            previousBtn.disabled = true;
+        }
+        content.innerText = `Step Number ${currentStep}`;
+    });
+}
+
+    if(finishBtn){
+    finishBtn.addEventListener('click', () => {
+        window.location.reload();
+    });
+}
+
+    return (
+
+        <div class="container">
+            <div id="stepProgressBar">
+                <div class="step">
+                    <p class="step-text">About</p>
+                    <div class="bullet">1</div>
+                </div>
+                <div class="step">
+                    <p class="step-text">Contact</p>
+                    <div class="bullet">2</div>
+                </div>
+                <div class="step">
+                    <p class="step-text">Step 3</p>
+                    <div class="bullet">3</div>
+                </div>
+                <div class="step">
+                    <p class="step-text">Step 4</p>
+                    <div class="bullet ">4</div>
+                </div>
+            </div>
+            <div id="main">
+                <p id="content" class="text-center">Step Number 1</p>
+                <button id="previousBtn" >Previous</button>
+                <button id="nextBtn">Next</button>
+                <button id="finishBtn" >Finish</button>
+            </div>
+        </div>
+    )
+
+
+}

src/components/Register.js

@@ -30,9 +30,9 @@ import ErrorNotice from "./ErrorNotice";
         user: loginRes.data.user,
       });
       localStorage.setItem("auth-token", loginRes.data.token);
-      history.push("/");
+      history.push("/home");
     } catch (err) {
-      err.response.data.msg && setError(err.response.data.msg);
+      return err.response.data.msg && setError(err.response.data.msg);
     }
   };
 
@@ -81,7 +81,7 @@ import ErrorNotice from "./ErrorNotice";
           id="phonenumber" 
           className="FormField__Input" 
           placeholder="Enter your Phone no. (+91)"
-          onChange= { (e) => setPhonenumber(e.target.value)}
+          onChange= { (e) => setPhonenumber(parseInt( e.target.value,10))}
             />
         </div>
 
@@ -92,7 +92,7 @@ import ErrorNotice from "./ErrorNotice";
         </div>
 
         <div className="FormField">
-          <button className="FormField__Button mr-20">Sign Up</button> <Link to="/sign-in" className="FormField__Link">already a member?</Link>
+          <button className="FormField__Button mr-20" type="submit">Sign Up</button> <Link to="/sign-in" className="FormField__Link">already a member?</Link>
         </div>
       </form>
     </div>

src/components/Tracking.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import "./tracking.css";
+
+export default function Tracking() {
+    return (
+        <div class="wrapper">
+            <ul class="StepProgress">
+                <li class="StepProgress-item is-done"><strong>Post a contest</strong></li>
+                <li class="StepProgress-item is-done"><strong>Award an entry</strong>
+    Got more entries that you love? Buy more entries anytime! Just hover on your favorite entry and click the Buy button
+  </li>
+                <li class="StepProgress-item current"><strong>Post a contest</strong></li>
+                <li class="StepProgress-item"><strong>Handover</strong></li>
+                <li class="StepProgress-item"><strong>Provide feedback</strong></li>
+            </ul>
+        </div>
+    )
+}

src/components/options.css

@@ -0,0 +1,82 @@
+#stepProgressBar  {
+	display:  flex;
+	justify-content:  space-between;
+	align-items:  flex-end;
+	width:  300px;
+	margin:  0  auto;
+	margin-bottom:  40px;
+}
+
+.step  {
+text-align:  center;
+}
+
+.step-text  {
+margin-bottom:  10px;
+color:  #28a745;
+}
+
+
+.bullet {
+	border: 1px solid #28a745;
+	height: 20px;
+	width: 20px;
+	border-radius: 100%;
+	color: #28a745;
+	display: inline-block;
+	position: relative;
+	transition: background-color 500ms;
+  line-height:20px;
+}
+
+
+.bullet.completed  {
+	color:  white;
+	background-color:  #28a745;
+}
+
+
+
+.bullet.completed::after {
+	content: '';
+	position: absolute;
+	right: -60px;
+	bottom: 10px;
+	height: 1px;
+	width: 54px;
+	background-color: #28a745;
+}
+
+/* Base styles and helper stuff */
+.hidden  {
+	display:  none;
+}
+ 
+button  {
+	padding:  5px  10px;
+	border:  1px  solid  black;
+	transition:  250ms background-color;
+}
+
+button:hover  {
+	cursor:  pointer;
+	background-color:  black;
+	color:  white;
+}
+
+button:disabled:hover  {
+	opacity:  0.6;
+	cursor:  not-allowed;
+}
+
+.text-center  {
+	text-align:  center;
+}
+  
+.container  {
+	max-width:  400px;
+	margin:  0  auto;
+	margin-top:  20px;
+	padding:  40px;
+}
+

src/components/tracking.css

@@ -0,0 +1,79 @@
+.wrapper {
+  width: 100vw;
+  font-family: 'Helvetica';
+  font-size: 14px;
+  border: 1px solid #CCC;
+  height: 100vh;
+}
+.StepProgress {
+  position: relative;
+  padding-left: 45px;
+  list-style: none;
+}
+.StepProgress::before {
+  display: inline-block;
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 15px;
+  width: 10px;
+  height: 100%;
+  border-left: 2px solid #CCC;
+}
+.StepProgress-item {
+  position: relative;
+  counter-increment: list;
+}
+.StepProgress-item:not(:last-child) {
+  padding-bottom: 20px;
+}
+.StepProgress-item::before {
+  display: inline-block;
+  content: '';
+  position: absolute;
+  left: -30px;
+  height: 100%;
+  width: 10px;
+}
+.StepProgress-item::after {
+  content: '';
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  left: -37px;
+  width: 12px;
+  height: 12px;
+  border: 2px solid #CCC;
+  border-radius: 50%;
+  background-color: #FFF;
+}
+.StepProgress-item.is-done::before {
+  border-left: 5px solid green;
+}
+.StepProgress-item.is-done::after {
+  content: "✔";
+  font-size: 10px;
+  color: #FFF;
+  text-align: center;
+  border: 10px solid green;
+  background-color: green;
+}
+.StepProgress-item.current::before {
+  border-left: 2px solid green;
+}
+.StepProgress-item.current::after {
+  content: counter(list);
+  padding-top: 1px;
+  width: 19px;
+  height: 18px;
+  top: -4px;
+  left: -40px;
+  font-size: 14px;
+  text-align: center;
+  color: green;
+  border: 2px solid green;
+  background-color: white;
+}
+.StepProgress strong {
+  display: block;
+}

src/navbar.css

@@ -69,24 +69,16 @@ header ul li a {
 
 
 }
-header ul li a:before{
+header ul li a button:before{
   position: absolute;
   content: '';
   left:0;
   bottom: 0;
   height: 5px;
   text-decoration: none;
-  width:100%;
-  background: #ffffff;
-  transform: scaleX(0);
-  transform-origin: right;
-  transition: transform .4s linear;
-}
-header ul li a:hover:before{
   
-  transform: scaleX(1);
-  transform-origin: left;
 }
+
 header.sticky ul li a{
   color: #fff;
   
@@ -129,7 +121,6 @@ header.sticky ul li a{
     height: 100vh;
     background: #66bfbf;
     text-align: center;
-    transition: all .5s;
   }
   header ul li{