Merge pull request #40 from Newtbot/Dev-branch

login WIP

consumerWebsite/functions/apiDatabase.js

@@ -2,10 +2,11 @@ const { sequelize } = require("../database/mySql.js");
 const { apikeyModel } = require("../database/model/apikeyModel.js");
 const { userModel } = require("../database/model/userModel.js");
 const { Op, Sequelize } = require("sequelize");
-const { hashAPIKey } = require("../functions/bcrypt.js");
 const { generateUUID } = require("../functions/generateUUID.js");
 const { hashPassword , comparePassword , hashAPIKey } = require("../functions/bcrypt.js");
 
+//helper function
+
 
 //api/v0/user/register
 
@@ -19,15 +20,76 @@ async function addUser(user) {
 	//hash password
 	let hash = await hashPassword(user.password);
 
-	await userModel.create({
+    const addRes = await userModel.create({
 		username: user.username,
 		password: hash,
 		email: user.email,
 		address: user.address,
 		phone: user.phone,
 	});
+    if (addRes){
+        return true;
+    }
+    else{
+        return false;
+    }
 }
 
+//add token to db 
+async function addToken(userid , token) {
+    console.log(userid);
+    console.log(token);
+
+}
+
+async function loginUser(user) {
+    //look up username or email in db
+    const userRes = await userModel.findOne({
+        where: {
+            [Op.or]: [
+                {
+                    username: user.userInfo,
+                },
+                {
+                    email: user.userInfo,
+                },
+            ],
+        },
+        })
+	//if user exists
+    if (userRes){
+        //compare password
+        let match = await comparePassword(user.password, userRes.password);
+        if (match){
+            console.log(userRes.id);
+            console.log(userRes.username);
+
+			//generate token
+			let token = await generateUUID();
+
+            //add to db 
+            addToken(userRes.id, token);
+			
+
+            //sucessful login
+            /*
+            1) generate token
+            2) store in db and localstorage (maybe hash it?)
+            3) return userid and username and token and store in localstorage
+            */
+			return { token: token, userid: userRes.id, username: userRes.username };
+		}		
+		else {
+			return false;
+		}
+    }
+
+    else{
+        return false;
+    }
+}
+
+
 async function getAPIKey() {
 	const apikey = await apikeyModel.findAll();
 	return apikey;

consumerWebsite/modules/app.js

@@ -28,12 +28,19 @@ app.use("/", require("../routes/render")); //consumerWebsite\routes\render.js
 // Catch 404 and forward to error handler. If none of the above routes are
 // used, this is what will be called.
 app.use(function (req, res, next) {
+	if (req.is("application/json")) {
 	var err = new Error("Not Found");
 	err.message = "Page not found";
 	err.status = 404;
 	next(err);
+	}
+	else{
+		res.status(404).render("404");
+	}
 });
 
+
+
 // Error handler. This is where `next()` will go on error
 app.use(function (err, req, res, next) {
 	console.error(err.status || res.status, err.name, req.method, req.url);

consumerWebsite/public/css/sp.css

@@ -65,7 +65,7 @@ body {
   header {
   font-size: 30px;
   text-align: center;
-  color: #fff;
+  color: #000000;
   font-weight: 600;
   cursor: pointer;
 }
@@ -92,6 +92,7 @@ body {
   margin-top: 50px;
 }
 
+
 form
   input {
   height: 60px;
@@ -105,6 +106,7 @@ form
   border-radius: 8px;
   background: #fff;
 }
+
 .form.login
   input {
   border: 1px

consumerWebsite/public/js/app.js

@@ -12,7 +12,7 @@ app.util = (function (app) {
 
 	function actionMessage(message, $target, type, callback) {
 		message = message || "";
-		$target = $target.closest("div.card").find(".actionMessage");
+		$target = $target.closest("div.iot-card").find(".actionMessage");
 		type = type || "info";
 		callback = callback || function () {};
 
@@ -29,9 +29,6 @@ app.util = (function (app) {
 			});
 		} else {
 			if (type) $target.addClass("bg-" + type);
-			message =
-				'<button class="action-close btn btn-sm btn-outline-dark float-right"><i class="fa-solid fa-xmark"></i></button>' +
-				message;
 			$target.html(message).slideDown("fast");
 		}
 		setTimeout(callback, 10);
@@ -137,6 +134,7 @@ app.api = (function (app) {
 			complete: function (res, text) {
 				callback(
 					text !== "success" ? res.statusText : null,
+					//console.log(res.responseText),
 					JSON.parse(res.responseText),
 					res.status
 				);
@@ -213,14 +211,15 @@ app.auth = (function (app) {
 			location.href.replace(location.replace(`/login`)) || "/";
 	}
 
-	function homeRedirect(){
+	function homeRedirect() {
-		window.location.href = 
+		window.location.href = location.href.replace(location.replace(`/`)) || "/";
-		location.href.replace(location.replace(`/`)) || "/";
 	}
 
 	return {
 		getToken: getToken,
 		setToken: setToken,
+		setUserId: setUserId,
+		setUsername: setUsername,
 		isLoggedIn: isLoggedIn,
 		//logIn: logIn,
 		logOut: logOut,
@@ -231,31 +230,27 @@ app.auth = (function (app) {
 })(app);
 
 //ajax form submit
-function formAJAX( btn, del ) {
+function formAJAX(btn, del) {
-    event.preventDefault(); // avoid to execute the actual submit of the form.
+	event.preventDefault(); // avoid to execute the actual submit of the form.
-    var $form = $(btn).closest( '[action]' ); // gets the 'form' parent
+	var $form = $(btn).closest("[action]"); // gets the 'form' parent
-    var formData = $form.find( '[name]' ).serializeObject(); // builds query formDataing
+	var formData = $form.find("[name]").serializeObject(); // builds query formDataing
-    var method = $form.attr('method') || 'post';
+	var method = $form.attr("method") || "post";
 
-    // if( !$form.validate()) {
+	// if( !$form.validate()) {
-    //     app.util.actionMessage('Please fix the form errors.', $form, 'danger')
+	//     app.util.actionMessage('Please fix the form errors.', $form, 'danger')
-    //     return false;
+	//     return false;
-    // }
+	// }
 
-    app.util.actionMessage( 
+	app.util.actionMessage("Loading...", $form, "info");
-        '<div class="spinner-border" role="status"><span class="sr-only">Loading...</span></div>',
-        $form,
-        'info'
-    );
 
-        //console.log('Data being sent to', $form.attr('action'), formData)
+	//console.log('Data being sent to', $form.attr('action'), formData)
 
-    app.api[method]($form.attr('action'), formData, function(error, data){
+	app.api[method]($form.attr("action"), formData, function (error, data) {
-                //console.log('Data back from the server', error, data)
+		//console.log('Data back from the server', error, data)
-        app.util.actionMessage(data.message, $form, error ? 'danger' : 'success'); //re-populate table
+		app.util.actionMessage(data.message, $form, error ? "danger" : "success"); //re-populate table
-        if(!error){
+		if (!error) {
-            $form.trigger("reset");
+			$form.trigger("reset");
-            eval($form.attr('evalAJAX')); //gets JS to run after completion
+			eval($form.attr("evalAJAX")); //gets JS to run after completion
-        }
+		}
-    });
+	});
 }

consumerWebsite/routes/render.js

@@ -56,10 +56,7 @@ router.get('/login', function(req, res, next) {
     res.render('signuplogin'); 
 });
 
-//404  page
+
-router.get('*', function(req, res, next) {
-    res.render('404'); 
-});
 
 
 module.exports = router;

consumerWebsite/routes/user.js

@@ -1,15 +1,23 @@
-const { addUser , loginUser } = require("../functions/apiDatabase.js");
+const { addUser, loginUser } = require("../functions/apiDatabase.js");
 
 const express = require("express");
 const router = express.Router();
 
-
 // /user/register
 router.post("/register", async (req, res, next) => {
 	try {
-		console.log("this is " , req.body);
+		let Res = await addUser(req.body);
-		await addUser(req.body);
+		if (Res == false) {
-		res.status(200).json({ register: true });
+			let error = new Error("UserRegFailed");
+			error.message = "The user failed to be craated";
+			error.status = 400;
+			return next(error);
+		}
+    else{
+      return res.json({
+        message: "User created successfully",
+      });
+    }
 	} catch (error) {
 		console.error(error);
 		next(error);
@@ -19,11 +27,23 @@ router.post("/register", async (req, res, next) => {
 //login
 router.post("/login", async (req, res, next) => {
 	try {
-		console.log("this is " , req.body);
+		let Res = await loginUser(req.body);
-		let res = await loginUser(req.body);
+		if (Res == false) {
-		if (res == false){
+      let error = new Error("User Login Failed");
-			console.log("user not found");
+			error.status = 400;
+			return next(error);
 		}
+    else{
+      //pass res back to form to be set in local storage
+      console.log(Res);
+      return res.json({
+        message: "User login successfully",
+        token: Res.token,
+        userId: Res.userid,
+        username: Res.username,
+      }); 
+
+    }
 	} catch (error) {
 		console.error(error);
 		next(error);
@@ -35,7 +55,6 @@ router.post("/login", async (req, res, next) => {
 
 module.exports = router;
 
-
 /*
 
 curl localhost/api/v0/user/register -H "Content-Type: application/json" -X POST -d '{"username": 

consumerWebsite/views/signuplogin.ejs

@@ -2,7 +2,7 @@
 
 <body>
     <section class="wrapper">
-        <div class="form signup" >
+        <div class="form signup iot-card">
             <!--<div class="form signup card" -->
             <header>Signup</header>
             <!-- localhost/api/v0/user/register -->
@@ -18,12 +18,17 @@
             </form>
         </div>
 
-        <div class="form login">
+        <div class="form login iot-card">
             <header>Login</header>
+            <div class="card-header shadow actionMessage" style="display:none"></div>
             <!-- evalAjax Fires when status 200 is returned  -->
             <form action="user/login" onsubmit="formAJAX(this)" 
-            evalAJAX="app.auth.homeRedirect();"
+            evalAJAX="app.auth.homeRedirect();
-            >
+            app.auth.setToken(data.token);
+            app.auth.setUserId(data.userId);
+            app.auth.setUsername(data.username);
+            ">
+            
                 <input type="text" name="userInfo" placeholder="Email address | Username" required />
                 <input type="password" name="password" placeholder="Password" required />
                 <a href="/resetPassword">Forgot password?</a>