page view fixed

Waffelz · Aug 9, 2017 · 9d6dbec · 9d6dbec
1 parent 57705ba
commit 9d6dbec
Show file tree

Hide file tree

Showing 7 changed files with 89 additions and 80 deletions.
diff --git a/models.js → backend/models.js b/models.js → backend/models.js
diff --git a/backend/routes/auth.js b/backend/routes/auth.js
@@ -1,33 +1,35 @@
 var express = require('express');
 var router = express.Router();
-var models = require('.../models');
+var models = require('../models');
 
 module.exports = function(passport) {
 
   // GET registration page
-  router.get('/signup', function(req, res) {
+  router.get('/register', function(req, res) {
     console.log('SINGUP');
   });
 
-  router.post('/signup', function(req, res) {
+  router.post('/register', function(req, res) {
     // validation step
     if (req.body.password!==req.body.passwordRepeat) {
       //how to alert
       // return res.render('signup', {
       //   error: "Passwords don't match."
       // });
     }
+    console.log(req.body)
     var u = new models.User({
       username: req.body.username,
-      password: req.body.password
+      password: req.body.password,
+      email: req.body.email,
     });
     u.save(function(err, user) {
       if (err) {
         console.log(err);
         res.status(500).redirect('/register');
         return;
       }
-      console.log(user);
+      console.log('USER SAVED', user);
       res.redirect('/login');
     });
   });

diff --git a/backend/routes/routes.js b/backend/routes/routes.js
@@ -1,6 +1,6 @@
 var express = require('express');
 var router = express.Router();
-var models = require('.../models');
+var models = require('../models');
 var User = models.User;
 
 // Users who are not logged in can see these routes

diff --git a/backend/server.js b/backend/server.js
@@ -3,7 +3,7 @@ const express = require('express')
 var session = require('express-session');
 var MongoStore = require('connect-mongo')(session);
 var path = require('path');
-var logger = require('morgan');
+
 var cookieParser = require('cookie-parser');
 var bodyParser = require('body-parser');
 var passport = require('passport');
@@ -22,7 +22,7 @@ REQUIRED_ENV.forEach(function(el) {
 
 mongoose.connect(connect);
 //importing other local files
-var models = require('.../models');
+var models = require('./models');
 var routes = require('./routes/routes');
 var auth = require('./routes/auth');
 //starting express

diff --git a/package.json b/package.json
@@ -34,12 +34,16 @@
   },
   "dependencies": {
     "axios": "^0.16.2",
+    "body-parser": "^1.17.2",
     "bulma": "^0.5.0",
     "connect-mongo": "^1.3.2",
+    "cookie-parser": "^1.4.3",
     "draft-js": "^0.10.1",
     "express": "^4.15.3",
     "express-session": "^1.15.5",
     "mongoose": "^4.11.6",
+    "passport": "^0.3.2",
+    "passport-local": "^1.0.0",
     "react": "^15.6.1",
     "react-dom": "^15.6.1",
     "react-router-dom": "^4.1.2"

diff --git a/reactApp/components/Login.js b/reactApp/components/Login.js
@@ -44,7 +44,7 @@ submit(){
             <div className={"control has-icons-left has-icons-right"}>
               <input className={"input is-danger"} type="password" onChange={(e)=>this.setState({password: e.target.value})} placeholder="Password" value={this.state.password}/>
               <span className={"icon is-small is-left"}>
-                <i className={"fa fa-envelope"}></i>
+                <i className={"fa fa-key"}></i>
               </span>
             </div>
           </div>

diff --git a/reactApp/components/Register.js b/reactApp/components/Register.js
@@ -1,93 +1,96 @@
 var React = require('react');
 import ReactDOM from 'react-dom';
 import { HashRouter, Link, Redirect } from 'react-router-dom';
-
+var axios = require('axios');
 
 class Register extends React.Component{
   constructor(props) {
      super(props);
-
     this.state = {
      username: '',
-     password: ''
+     password: '',
+     rppassword:'',
+     email: '',
   };
 }
+
+verify(){
+  if(this.state.username===''){
+    alert('Username cannot be empty')
+  } else if(this.state.email===''){
+    alert('Email cannot be empty')
+  } else if(this.state.password===''){
+    alert('Password cannot be empty')
+  } else if(this.state.rppassword===''){
+    alert('Please confirm password')
+  } else if(this.state.password!==this.state.rppassword){
+    alert('Passwords do not match')
+  } else {
+    this.submit()
+  }
+}
+
+submit(){
+  axios.post('/register', {
+    username: this.state.username,
+    password: this.state.password,
+    email: this.state.email
+  })
+  .then(function (response) {
+    console.log(response);
+  })
+  .catch(function (error) {
+    console.log(error);
+  });
+}
+
 render(){
   return(
     <div>
       <div className={'has-text-centered'}><h1>Register</h1></div>
-      <div className={"field"}>
-        <label className={"label"}>Name</label>
-        <div className={"control"}>
-          <input className={"input"} type="text" placeholder="Text input"/>
-        </div>
-      </div>
+        <form className='container'>
+          <div className={"field"}>
+            <div className={"control has-icons-left has-icons-right"}>
+              <input className={"input is-danger"} type="text" onChange={(e)=>this.setState({username: e.target.value})} placeholder="Username" value={this.state.username}/>
+              <span className={"icon is-small is-left"}>
+                <i className={"fa fa-user"}></i>
+              </span>
+            </div>
+          </div>
+          <div className={"field"}>
+            <div className={"control has-icons-left has-icons-right"}>
+              <input className={"input is-danger"} type="text" onChange={(e)=>this.setState({email: e.target.value})} placeholder="Email" value={this.state.email}/>
+              <span className={"icon is-small is-left"}>
+                <i className={"fa fa-envelope"}></i>
+              </span>
+            </div>
+          </div>
+          <div className={"field"}>
+            <div className={"control has-icons-left has-icons-right"}>
+              <input className={"input is-danger"} type="password" onChange={(e)=>this.setState({password: e.target.value})} placeholder="Password" value={this.state.password}/>
+              <span className={"icon is-small is-left"}>
+                <i className={"fa fa-key"}></i>
+              </span>
+            </div>
+          </div>
+          <div className={"field"}>
+            <div className={"control has-icons-left has-icons-right"}>
+              <input className={"input is-danger"} type="password" onChange={(e)=>this.setState({rppassword: e.target.value})} placeholder="Confirm Password" value={this.state.rppassword}/>
+              <span className={"icon is-small is-left"}>
+                <i className={"fa fa-key"}></i>
+              </span>
+            </div>
+          </div>
+          <div className={"field is-grouped"}>
+            <div className={"control"}>
+              <button className={"button is-primary"} onClick={()=>this.verify()}>Submit</button>
+            </div>
+          </div>
 
-      <div className={"field"}>
-        <label className={"label"}>Username</label>
-        <div className={"control has-icons-left has-icons-right"}>
-          <input className={"input is-success"} type="text" placeholder="Text input" value="bulma"/>
-          <span className={"icon is-small is-left"}>
-            <i className={"fa fa-user"}></i>
-          </span>
-          <span className={"icon is-small is-right"}>
-            <i className={"fa fa-check"}></i>
-          </span>
-        </div>
-        <p className={"help is-success"}>This username is available</p>
-      </div>
+        </form>
 
-      <div className={"field"}>
-        <label className={"label"}>Email</label>
-        <div className={"control has-icons-left has-icons-right"}>
-          <input className={"input is-danger"} type="text" placeholder="Email input" value=""/>
-          <span className={"icon is-small is-left"}>
-            <i className={"fa fa-envelope"}></i>
-          </span>
-          <span className={"icon is-small is-right"}>
-            <i className={"fa fa-warning"}></i>
-          </span>
-        </div>
-        <p className={"help is-danger"}>This email is invalid</p>
-      </div>
-
-      <div className={"field"}>
-        <label className={"label"}>Password</label>
-        <div className={"control has-icons-left has-icons-right"}>
-          <input className={"input is-danger"} type="text" placeholder="Password" value=""/>
-          <span className={"icon is-small is-left"}>
-            <i className={"fa fa-envelope"}></i>
-          </span>
-          <span className={"icon is-small is-right"}>
-            <i className={"fa fa-warning"}></i>
-          </span>
-        </div>
-      </div>
-
-      <div className={"field"}>
-        <label className={"label"}>Confirm Password</label>
-        <div className={"control has-icons-left has-icons-right"}>
-          <input className={"input is-danger"} type="text" placeholder="Confirm Password" value=""/>
-          <span className={"icon is-small is-left"}>
-            <i className={"fa fa-envelope"}></i>
-          </span>
-          <span className={"icon is-small is-right"}>
-            <i className={"fa fa-warning"}></i>
-          </span>
-        </div>
-      </div>
-      <div className={"field is-grouped"}>
-        <div className={"control"}>
-          <button className={"button is-primary"}>Submit</button>
-        </div>
-        <div className={"control"}>
-          <button className={"button is-link"}>Cancel</button>
-        </div>
-      </div>
       <div className={"control"}>
-
         <button className={"button "} onClick={() => this.props.history.push('/')}>Login</button>
-
       </div>
     </div>
   )