Kyle

.gitignore

@@ -22,5 +22,7 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
+
 /.vs
-*.orig
+*.orig
+

src/App.js

@@ -8,22 +8,23 @@ import Books from "./js/components/Books/Books";
 import Login from "./js/components/LoginPage/Login";
 import SignUp from "./js/components/RegisterPage/SignUp";
 import ForgotSignIn from "./js/components/ForgotSignIn/ForgotSignIn";
+import resetPassword from "./js/components/resetPassword/resetPassword";
 import AdminMembershipDisplay from "./js/components/AdminMembershipPage/AdminMembershipDisplay";
 import main from "./js/components/Main_Menu/Main";
 import collection from "./js/components/CollectionsPage/Collection";
 class App extends Component {
   render() {
     var loc_navBarTitle = "KnowYourNation";
     var loc_navbarItems = [true, true, true, true];
-  render() {
     return (
       <div className="App">
         <BrowserRouter>
           <div>
             <Switch>
               <Route path="/login" component={Login} />
               <Route path="/register" component={SignUp} />
-              <Route path="/resetpassword" component={ForgotSignIn} />
+              <Route path="/forgotpassword" component={ForgotSignIn} />
+	            <Route path="/resetpassword" component={resetPassword} />
                <Route path="/collection" component={collection} />
               <Route path="/main" component={main}/>
               <Route path="/books" component={Books} />
@@ -37,6 +38,4 @@ class App extends Component {
     );
   }
 }
-
 export default App;
-

src/js/components/ForgotSignIn/ForgotSignIn.js

@@ -1,10 +1,36 @@
 import React, { Component } from "react";
+import Form from "react-bootstrap/Form";
+import Button from "react-bootstrap/Button";
+import { ForgotPassword } from "../../services/apiservice";
+
 
 class ForgotSignIn extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+        email: '',
+    };
+}
+
+GetEmail(evt) {
+    this.setState({email: evt.target.value});
+}
+
+handleClick() {
+   let result = ForgotPassword(this.state.email);
+   console.log(result);
+}
   render() {
     return (
       <div className="ForgotSign">
-        <h1> ForgotSign Page </h1>
+          <div className="col-12 marginTop20px">
+              <label >Name</label>
+              <span><input className="formInput" type="text" value={this.state.GetEmail} onChange={evt => this.GetEmail(evt)}/></span>
+          </div>
+          <div className="col-12">
+              <button className="reg-circle" onClick={this.handleClick.bind(this)}> Complete Registration</button>
+            </div>
       </div>
     );
   }

src/js/components/Home/Home.js

@@ -13,23 +13,15 @@ class Home extends Component {
     super();
     this.state = { center: [0, 0] };
   }
-
   state={isSignedIn:false}
-
   componentDidMount = () =>{
     firebase.auth().onAuthStateChanged(user => {
       this.setState({ isSignedIn: !!user })     
     })
   }
-
-
-
-
   render() {
     let loc_navBarTitle = "KnowYourNation";
     let loc_navbarItems = [false, true, true, false];
-
-
     return (
       <div className="home">
         <Navbar titleFromParent={loc_navBarTitle} navbarItems={loc_navbarItems}/>
@@ -50,5 +42,4 @@ class Home extends Component {
     );
   }
 }
-
 export default Home;

src/js/components/Navbar/Navbar.js

@@ -1,10 +1,6 @@
 import React, { Component } from 'react';
 import { BrowserRouter, Route, Switch, NavLink } from "react-router-dom";
 import "./Navbar.scss";
-/*
-  loc_navBarTitle: String passed to object for the title
-navbarItems: Visibility of the search, user and (bars / cross) icons.
-*/
 class Navbar extends Component {
   render() {
     return (

src/js/components/RegisterPage/SignUp.js

@@ -11,7 +11,7 @@ firebase.initializeApp({
     apiKey: "AIzaSyBB0W3EuMqoeQLVuczRUCQmaWQV0HOHZQQ",
     authDomain: "knowyournation-6daac.firebaseapp.com"
   })
-
+  
 class SignUp extends Component {
 
    state = { isSignedIn: false }
@@ -72,66 +72,62 @@ class SignUp extends Component {
 
     render()
     {
-
         let loc_navBarTitle = "MEMBER REGISTRATION";
         let loc_navbarItems = [true, true, true, true];
         return (
-            <div className="signup">
+            <div className="SignUp">
                 <Navbar titleFromParent={loc_navBarTitle} navbarItems={loc_navbarItems}/>
                 <div className="container ">
-                    <div className="row margin-top-20 ">
-                            <h3 className="margin-left-20">Register</h3>
+                    <div className="row marginTop20px ">
+                            <h3 className="marginLeft20px">Register</h3>
                     </div>
                     <div className="row ">
-                        <div className="col-12 margin-top-20">
+                        <div className="col-12 marginTop20px">
                             <label >Name</label>
-                            <span><input className="form-input" type="text" value={this.state.inputValue} onChange={evt => this.updateNameValue(evt)}/></span>
+                            <span><input className="formInput" type="text" value={this.state.inputValue} onChange={evt => this.updateNameValue(evt)}/></span>
                         </div>
-                        <div className="col-12 margin-top-20">
+                        <div className="col-12 marginTop20px">
                             <label >Surname</label>
-                            <span><input className="form-input" type="text" value={this.state.inputValue} onChange={evt => this.updateSurnameValue(evt)}/></span>
+                            <span><input className="formInput" type="text" value={this.state.inputValue} onChange={evt => this.updateSurnameValue(evt)}/></span>
                         </div>
-                        <div className="col-12 margin-top-20">
+                        <div className="col-12 marginTop20px">
                             <label >E-mail</label>
-                            <span><input className="form-input" type="text" value={this.state.inputValue} onChange={evt => this.updateEmailValue(evt)}/></span>
+                            <span><input className="formInput" type="text" value={this.state.inputValue} onChange={evt => this.updateEmailValue(evt)}/></span>
                         </div>
-                        <div className="col-12 margin-top-20">
+                        <div className="col-12 marginTop20px">
                             <label >Phone no</label>
-                            <span><input className="form-input" type="phone" value={this.state.inputValue} onChange={evt => this.updatePhoneValue(evt)}/></span>
+                            <span><input className="formInput" type="phone" value={this.state.inputValue} onChange={evt => this.updatePhoneValue(evt)}/></span>
                         </div>
-                        <div className="col-12 margin-top-20">
+                        <div className="col-12 marginTop20px">
                             <label >Password</label>
                             <span>
-                                <input className="form-input" type="password" value={this.state.inputValue} onChange={evt => this.updatePasswordValue(evt)}/>
+                                <input className="formInput" type="password" value={this.state.inputValue} onChange={evt => this.updatePasswordValue(evt)}/>
                             </span>
                         </div>
-                        <div className="col-12 margin-top-20">
+                        <div className="col-12 marginTop20px">
                             <label >Organisation</label>
-                            <span><input className="form-input" type="text" value={this.state.inputValue} onChange={evt => this.updateOrganisationValue(evt)}/></span>
+                            <span><input className="formInput" type="text" value={this.state.inputValue} onChange={evt => this.updateOrganisationValue(evt)}/></span>
                         </div>
-                        <div className="col-12 margin-top-30">
+                         <div className="col-12 marginTop20px">
                             <label >Or Register with </label>
                             <span>
-                                {this.state.isSignedIn ?(
-                                 <Redirect to='/home' />
-
-                                ) :(
+                                {this.state.isSignedIn ?(  
+                                    RegisterUser(firebase.auth().currentUser.displayName," ",firebase.auth().currentUser.uid,firebase.auth().currentUser.email,firebase.auth().currentUser.phoneNumber," "),                                    
+                                    <Redirect to='/home'/>
+                                    ) :(
                                 <StyledFirebaseAuth
                                     uiConfig={this.uiConfig}
                                     firebaseAuth={firebase.auth()}
                                 />
-                                )}
-                                <button className="btn-login-options facebook"><i className="fab fa-facebook-f"></i></button>
-                                <button className="btn-login-options google"><i className="fab fa-google"></i></button>
-                                <button className="btn-login-options twitter"><i className="fab fa-twitter"></i></button>
+                                )}                               
                             </span>
                         </div>
                         <div className="col-12 margin-top-30">
                             <span><label> Membership type</label></span>
-                            <div className="div-membershiptype">
+                            <div className="divMembershipType">
                                 <ul className="nav nav-tabs">
                                     <li className="nav-item  ">
-                                        <a className="no-background nav-link active border-0 " data-toggle="tab" href="#home"><b>Free</b><br/> 0/month</a>
+                                        <a className="noBackground nav-link active border-0 " data-toggle="tab" href="#home"><b>Free</b><br/> 0/month</a>
                                     </li>
                                     <li className="nav-item">
                                         <a className="nav-link" data-toggle="tab" href="#menu1"><b>Speedy</b><br/> R20/month</a>

src/js/components/resetPassword/resetPassword.js

@@ -0,0 +1,60 @@
+import React, { Component } from 'react';
+import Navbar from "../Navbar/Navbar";
+import {Redirect} from "react-router-dom";
+import StyledFirebaseAuth from "../RegisterPage/SignUp";
+import {RegisterUser} from "../../services/apiservice";
+import { BrowserRouter, Route, Switch, NavLink } from "react-router-dom";
+
+class  ResetPassword extends Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+          email: '',
+          password: ''
+        };    
+      }    
+      updateEmailValue(evt) {
+        this.setState({email: evt.target.value});
+      }
+      updatePasswordValue(evt) {
+        this.setState({password: evt.target.value});
+      }    
+      handleClick() {
+        let result = RegisterUser(this.state.password, this.state.email);
+        console.log(result);
+      }    
+      render() {
+        let loc_navBarTitle = "Reset Password";
+        let loc_navbarItems = [true, true, true, true];
+        return (
+          <div className="login">
+            <Navbar titleFromParent={loc_navBarTitle} navbarItems={loc_navbarItems}/>
+            <div className="container-fluid ">
+              <div className="row margin-top-20 ">
+                <h4 className="margin-left-20">Login</h4>
+              </div>
+              <div className="row ">
+                <div className="col-12 margin-top-20">
+                  <label >Password</label>
+                  <span><input className="form-input" type="text" /></span>
+                </div>
+                <div className="col-12 margin-top-20">
+                  <label >Password</label>
+                  <span>
+                      <input className="form-input" type="password" value={this.state.inputValue} onChange={evt => this.updatePasswordValue(evt)}/>
+                  </span>
+                </div>
+              </div>
+                <div className="row display-flow-root border-danger">
+                  <NavLink to="/home">
+                    <button className="btn-login" onClick={this.handleClick.bind(this)}>Reset Password</button>
+                  </NavLink>
+                </div>
+            </div>
+          </div>
+        );
+      }    
+}
+
+export default ResetPassword;