User registration, login, logout code using gun db

src/App.js

@@ -5,6 +5,10 @@ import './App.css';
 import UserLogin from './components/userlogin';
 import Home from './components/home';
 import UserRegistration from './components/userregistration';
+import UserLogout from './components/userlogout';
+
+import Gun from "gun";
+require('gun/sea');
 
 class App extends Component {
   render() {
@@ -24,13 +28,17 @@ class App extends Component {
                 <li className="nav-item">
                   <Link to={'/'} className="nav-link">Home</Link>
                 </li>
+                <li className="nav-item">
+                  <Link to={'/logout'} className="nav-link">Log out</Link>
+                </li>
               </ul>
             </div>
           </nav> <br/>
           <h2>DGstudio App</h2> <br/>
           <Switch>
               <Route exact path='/newUser' component={ UserRegistration } />
               <Route path='/login' component={ UserLogin } />
+              <Route path='/logout' component={ UserLogout }/>
               <Route path='/' component={ Home } />
           </Switch>
         </div>

src/components/UserProfile.js

@@ -0,0 +1,32 @@
+import React, { Component } from "react";
+import Gun from "gun"
+require('gun/sea');
+
+var UserProfile = (function() {
+  var full_name = "";
+
+  var getName = function() {
+    return full_name;    // Or pull this from cookie/localStorage
+  };
+
+  var setName = function(name) {
+  	console.log('inside setname method for session')
+    full_name = name;     
+    // Also set this in cookie/localStorage
+  };
+
+  return {
+    getName: getName,
+    setName: setName
+  }
+
+})();
+
+export function authHeader() {
+  var gun = Gun()
+  var user = gun.user()
+  var auth = user.auth('') 
+}
+
+export default UserProfile;
+

src/components/home.js

@@ -1,10 +1,13 @@
 import React, { Component } from 'react';
+import UserProfile from './UserProfile';
+import Gun from "gun"
+require('gun/sea');
 
 export default class Home extends Component {
     render() {
         return (
             <div>
-                <p>Welcome to Home Component!!</p>
+                <p>Welcome { UserProfile.getName() }to Home Component !!</p>
             </div>
         )
     }

src/components/userlogin.js

@@ -1,5 +1,7 @@
 import React, { Component } from "react";
 import "bootstrap/dist/css/bootstrap.min.css";
+import Gun from "gun"
+require('gun/sea');
 
 export default class UserLogin extends Component {
 
@@ -8,7 +10,9 @@ export default class UserLogin extends Component {
     this.state ={
                   username:'',
                   email:'',
-                  password: ''
+                  password: '',
+                  submitted: false,
+                  loading: false,
                 };
     this.onChangeUserName = this.onChangeUserName.bind(this);
     this.onChangeEmail = this.onChangeEmail.bind(this);
@@ -31,8 +35,18 @@ export default class UserLogin extends Component {
     })
   }
 
-  onSubmit(e) {
+  onSubmit = e=>   {
     e.preventDefault();
+    var gun = Gun();
+    var user = gun.user();
+    var userthis = this;
+    user.auth(this.state.username, this.state.password, function(ack){ if(ack.err){ alert("wrong"); }
+
+    else {
+
+      userthis.props.history.push("/"); 
+    } })
+
     console.log(`The values are ${this.state.email}, ${this.state.username}, and ${this.state.password}`)
     this.setState({
       email: '',

src/components/userlogout.js

@@ -0,0 +1,27 @@
+import React, { Component } from "react";
+import "bootstrap/dist/css/bootstrap.min.css";
+import Gun from "gun"
+require('gun/sea');
+
+export default class UserLogout extends Component {
+
+  constructor(props){
+    super(props);
+
+
+  }	
+
+  componentDidMount() {
+
+  	var gun = Gun();
+  	var user = gun.user();
+  	user.leave();
+  	this.props.history.push("/login");
+  }
+
+  render(){
+  	return true
+  }
+
+}
+

src/components/userregistration.js

@@ -1,6 +1,8 @@
 import React, { Component } from 'react';
 import '../../node_modules/bootstrap/dist/css/bootstrap.min.css';
 
+import Gun from "gun"
+require('gun/sea');
 
 export default class UserRegistration extends Component {
   constructor(props){
@@ -45,6 +47,9 @@ export default class UserRegistration extends Component {
   }
 
   onSubmit(e) {
+  	var gun = Gun()
+  	var user = gun.user()
+  	user.create(this.state.email,this.state.password)
     e.preventDefault();
     console.log(`The values are ${this.state.email}, ${this.state.username}, and ${this.state.password}`)
     this.setState({