diff --git a/consumerWebsite/modules/app.js b/consumerWebsite/modules/app.js index 069240b..bd5f1e4 100644 --- a/consumerWebsite/modules/app.js +++ b/consumerWebsite/modules/app.js @@ -4,10 +4,6 @@ const app = express(); const port = 3000; const ejs = require("ejs"); -const bodyParser = require("body-parser"); // Middleware - -app.use(bodyParser.urlencoded({ extended: false })); - app.use(express.json()); app.set("json spaces", 2); diff --git a/consumerWebsite/public/css/sp.css b/consumerWebsite/public/css/sp.css index 0a58704..8c01b06 100644 --- a/consumerWebsite/public/css/sp.css +++ b/consumerWebsite/public/css/sp.css @@ -203,3 +203,51 @@ form .form.login .back-to-login:hover { text-decoration: underline; } + +.top-nav{ + background-color: #ffffff !important; +} +.navbar-expand-lg.top-nav .navbar-nav .nav-link{ + padding: 10px 15px; + color: #4e3914; + font-size: 14px; + font-weight: 300; + text-transform: uppercase; +} +.navbar-expand-lg.top-nav .navbar-nav .nav-link:hover{ + background: #4eae3a; + color: #ffffff; + border-radius: 4.8px; +} +.navbar-expand-lg.top-nav .navbar-nav .nav-link.active{ + background: #4eae3a; + color: #ffffff; + border-radius: 4.8px; +} +.navbar-expand-lg.top-nav .navbar-nav .dropdown-menu{ + margin: 0px; + box-shadow: 3px 5px 15px rgba(0,0,0, .15); + border: none; + padding: 20px; +} +.navbar-expand-lg.top-nav .navbar-nav .dropdown-menu .dropdown-item{ + font-size: 14px; + padding: 0px; + padding-bottom: 15px; + font-weight: 300; +} +.navbar-expand-lg.top-nav .navbar-nav .dropdown-menu .dropdown-item:last-child{ + padding: 0px; +} +.navbar-expand-lg.top-nav .navbar-nav .dropdown-menu .dropdown-item:hover{ + background: none; + color: #4eae3a; +} +.top-nav .navbar-toggler{ + color: #4e3914; + border-color: #4e3914; +} +.top-nav .navbar-toggler:hover{ + color: #4eae3a; + border-color: #4eae3a; +} \ No newline at end of file diff --git a/consumerWebsite/public/js/app.js b/consumerWebsite/public/js/app.js index 3fb3560..e7dd68b 100644 --- a/consumerWebsite/public/js/app.js +++ b/consumerWebsite/public/js/app.js @@ -1,140 +1,202 @@ var app = {}; +app.util = (function (app) { + function getUrlParameter(name) { + name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]"); + var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"); + var results = regex.exec(location.search); + return results === null + ? "" + : decodeURIComponent(results[1].replace(/\+/g, " ")); + } -app.api = (function(app){ - var baseURL = '/api/v0/' + function actionMessage(message, $target, type, callback) { + message = message || ""; + $target = $target.closest("div.card").find(".actionMessage"); + type = type || "info"; + callback = callback || function () {}; - function post(url, data, callback){ + if ($target.html() === message) return; + + if ($target.html()) { + $target.slideUp("fast", function () { + $target.html(""); + $target.removeClass(function (index, className) { + return (className.match(/(^|\s)bg-\S+/g) || []).join(" "); + }); + if (message) return actionMessage(message, $target, type, callback); + $target.hide(); + }); + } else { + if (type) $target.addClass("bg-" + type); + message = + '' + + message; + $target.html(message).slideDown("fast"); + } + setTimeout(callback, 10); + } + + $.fn.serializeObject = function () { + var arr = $(this).serializeArray(), + obj = {}; + + for (var i = 0; i < arr.length; i++) { + if (obj[arr[i].name] === undefined) { + obj[arr[i].name] = arr[i].value; + } else { + if (!(obj[arr[i].name] instanceof Array)) { + obj[arr[i].name] = [obj[arr[i].name]]; + } + obj[arr[i].name].push(arr[i].value); + } + } + return obj; + }; + + return { + getUrlParameter: getUrlParameter, + actionMessage: actionMessage, + }; +})(app); + +app.api = (function (app) { + var baseURL = "/api/v0/"; + + function post(url, data, callback) { $.ajax({ - type: 'POST', - url: baseURL+url, - headers:{ - 'auth-token': app.auth.getToken() + type: "POST", + url: baseURL + url, + headers: { + //register will getr undefined token + //login will get valid token + "auth-token": app.auth.getToken(), }, data: JSON.stringify(data), contentType: "application/json; charset=utf-8", dataType: "json", - complete: function(res, text){ + complete: function (res, text) { callback( - text !== 'success' ? res.statusText : null, + text !== "success" ? res.statusText : null, JSON.parse(res.responseText), res.status - ) - } + ); + }, }); } - function put(url, data, callback){ + function put(url, data, callback) { $.ajax({ - type: 'PUT', - url: baseURL+url, - headers:{ - 'auth-token': app.auth.getToken() + type: "PUT", + url: baseURL + url, + headers: { + "auth-token": app.auth.getToken(), }, data: JSON.stringify(data), contentType: "application/json; charset=utf-8", dataType: "json", - complete: function(res, text){ + complete: function (res, text) { callback( - text !== 'success' ? res.statusText : null, + text !== "success" ? res.statusText : null, JSON.parse(res.responseText), res.status - ) - } + ); + }, }); } - function remove(url, callback, callback2){ - if(!$.isFunction(callback)) callback = callback2; + function remove(url, callback, callback2) { + if (!$.isFunction(callback)) callback = callback2; $.ajax({ - type: 'delete', - url: baseURL+url, - headers:{ - 'auth-token': app.auth.getToken() + type: "delete", + url: baseURL + url, + headers: { + "auth-token": app.auth.getToken(), }, contentType: "application/json; charset=utf-8", dataType: "json", - complete: function(res, text){ + complete: function (res, text) { callback( - text !== 'success' ? res.statusText : null, + text !== "success" ? res.statusText : null, JSON.parse(res.responseText), res.status - ) - } + ); + }, }); } - function get(url, callback){ + function get(url, callback) { $.ajax({ - type: 'GET', - url: baseURL+url, - headers:{ - 'auth-token': app.auth.getToken() + type: "GET", + url: baseURL + url, + headers: { + "auth-token": app.auth.getToken(), }, contentType: "application/json; charset=utf-8", dataType: "json", - complete: function(res, text){ + complete: function (res, text) { callback( - text !== 'success' ? res.statusText : null, + text !== "success" ? res.statusText : null, JSON.parse(res.responseText), res.status - ) - } + ); + }, }); } - return {post: post, get: get, put: put, delete: remove} -})(app) + return { post: post, get: get, put: put, delete: remove }; +})(app); -app.auth = (function(app) { - var user = {} - function setToken(token){ - localStorage.setItem('APIToken', token); +app.auth = (function (app) { + var user = {}; + function setToken(token) { + localStorage.setItem("APIToken", token); } - function getToken(){ - return localStorage.getItem('APIToken'); + function getToken() { + return localStorage.getItem("APIToken"); } - function isLoggedIn(callback){ - if(getToken()){ - return app.api.get('user/me', function(error, data){ - if(!error) app.auth.user = data; + function isLoggedIn(callback) { + if (getToken()) { + return app.api.get("user/me", function (error, data) { + if (!error) app.auth.user = data; return callback(error, data); }); - }else{ + } else { callback(null, false); } } - function logIn(args, callback){ - app.api.post('auth/login', args, function(error, data){ - if(data.login){ + function logIn(args, callback) { + app.api.post("auth/login", args, function (error, data) { + if (data.login) { setToken(data.token); } callback(error, !!data.token); }); } - function logOut(callback){ - localStorage.removeItem('APIToken'); + function logOut(callback) { + localStorage.removeItem("APIToken"); callback(); } - function forceLogin(){ - $.holdReady( true ); - app.auth.isLoggedIn(function(error, isLoggedIn){ - if(error || !isLoggedIn){ - app.auth.logOut(function(){}) - location.replace(`/login${location.href.replace(location.origin, '')}`); - }else{ - $.holdReady( false ); + function forceLogin() { + $.holdReady(true); + app.auth.isLoggedIn(function (error, isLoggedIn) { + if (error || !isLoggedIn) { + app.auth.logOut(function () {}); + location.replace(`/login`); + } else { + $.holdReady(false); } }); } - function logInRedirect(){ - window.location.href = location.href.replace(location.origin+'/login', '') || '/' + function logInRedirect() { + window.location.href = + location.href.replace(location.replace(`/login`)) || "/"; } return { @@ -145,34 +207,35 @@ app.auth = (function(app) { logOut: logOut, forceLogin, logInRedirect, - } - + }; })(app); //ajax form submit function formAJAX( btn, del ) { - event.preventDefault(); // avoid to execute the actual submit of the form. - var $form = $(btn).closest( '[action]' ); // gets the 'form' parent - var formData = $form.find( '[name]' ).serializeObject(); // builds query formDataing - var method = $form.attr('method') || 'post'; + event.preventDefault(); // avoid to execute the actual submit of the form. + var $form = $(btn).closest( '[action]' ); // gets the 'form' parent + var formData = $form.find( '[name]' ).serializeObject(); // builds query formDataing + var method = $form.attr('method') || 'post'; - // if( !$form.validate()) { - // app.util.actionMessage('Please fix the form errors.', $form, 'danger') - // return false; - // } - - app.util.actionMessage( - '', - $form, - 'info' - ); + // if( !$form.validate()) { + // app.util.actionMessage('Please fix the form errors.', $form, 'danger') + // return false; + // } + + app.util.actionMessage( + '', + $form, + 'info' + ); - app.api[method]($form.attr('action'), formData, function(error, data){ - app.util.actionMessage(data.message, $form, error ? 'danger' : 'success'); //re-populate table - if(!error){ - $form.trigger("reset"); - eval($form.attr('evalAJAX')); //gets JS to run after completion - } - }); + //console.log('Data being sent to', $form.attr('action'), formData) + app.api[method]($form.attr('action'), formData, function(error, data){ + //console.log('Data back from the server', error, data) + app.util.actionMessage(data.message, $form, error ? 'danger' : 'success'); //re-populate table + if(!error){ + $form.trigger("reset"); + eval($form.attr('evalAJAX')); //gets JS to run after completion + } + }); } \ No newline at end of file diff --git a/consumerWebsite/public/signuplogin.html b/consumerWebsite/public/signuplogin.html deleted file mode 100644 index cc764c6..0000000 --- a/consumerWebsite/public/signuplogin.html +++ /dev/null @@ -1,58 +0,0 @@ - - - - - - - - Login & Signup Form - - - - -
-
-
Signup
-
- - - - - - -
- - -
- -
-
- -
-
Login
-
- - - Forgot password? - -
-
- - -
- - - - - \ No newline at end of file diff --git a/consumerWebsite/routes/render.js b/consumerWebsite/routes/render.js index 356c63b..471df93 100644 --- a/consumerWebsite/routes/render.js +++ b/consumerWebsite/routes/render.js @@ -51,6 +51,11 @@ router.get('/news', function(req, res, next) { res.render('news'); }); +//login / register page +router.get('/login', function(req, res, next) { + res.render('signuplogin'); +}); + //404 page router.get('*', function(req, res, next) { res.render('404'); diff --git a/consumerWebsite/routes/user.js b/consumerWebsite/routes/user.js index c5bf23a..1471fbe 100644 --- a/consumerWebsite/routes/user.js +++ b/consumerWebsite/routes/user.js @@ -18,8 +18,9 @@ router.get("/", async (req, res, next) => { // /user/register router.post("/register", async (req, res, next) => { try { - //await addUser(req.body); - res.sendStatus(200); + console.log("this is " , req.body); + await addUser(req.body); + res.status(200).json({ register: true }); } catch (error) { console.error(error); next(error); @@ -33,3 +34,48 @@ router.post("/register", async (req, res, next) => { //getbyid module.exports = router; + + +/* + +curl localhost/api/v0/user/register -H "Content-Type: application/json" -X POST -d '{"username": +"testuser123", "password": "thisisthesystemuserpasswordnoob", "email": "testuser123@ecosaver.com", "address": +"Nanyang Polytechnic 180 Ang Mo Kio Avenue 8 Singapore 569830", "phone": "12345678"}' +'use strict'; + +const router = require('express').Router(); +const {User} = require('../models/user'); + +router.get('/', async function(req, res, next){ + try{ + return res.json({ + results: await User[req.query.detail ? "listDetail" : "list"]() + }); + }catch(error){ + next(error); + } +}); + +router.get('/me', async function(req, res, next){ + try{ + + return res.json(await User.get({uid: req.user.uid})); + }catch(error){ + next(error); + } +}); + +router.get('/:uid', async function(req, res, next){ + try{ + return res.json({ + results: await User.get(req.params.uid), + }); + }catch(error){ + next(error); + } +}); + +module.exports = router; + + +*/ \ No newline at end of file diff --git a/consumerWebsite/views/logintop.ejs b/consumerWebsite/views/logintop.ejs new file mode 100644 index 0000000..9bbc946 --- /dev/null +++ b/consumerWebsite/views/logintop.ejs @@ -0,0 +1,96 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/consumerWebsite/views/signuplogin.ejs b/consumerWebsite/views/signuplogin.ejs new file mode 100644 index 0000000..0eda68c --- /dev/null +++ b/consumerWebsite/views/signuplogin.ejs @@ -0,0 +1,53 @@ +<%- include('logintop') %> + + +
+
+ +
Signup
+ + + + + +
+ + + + + + + +
+
+ +
+
Login
+ + +
+ + + Forgot password? + +
+
+ + +
+ + + + + diff --git a/consumerWebsite/views/top.ejs b/consumerWebsite/views/top.ejs index 30f2ebf..16440bc 100644 --- a/consumerWebsite/views/top.ejs +++ b/consumerWebsite/views/top.ejs @@ -8,7 +8,8 @@ - + @@ -17,11 +18,15 @@ + + - + @@ -38,6 +43,7 @@ app.auth.isLoggedIn(function (error, data) { if (data) { $('#cl-logout-button').show(); + $('#cl-profile-button').show(); $('#cl-login-button').hide(); } else { $('#cl-login-button').show(); @@ -67,16 +73,18 @@
  • Contact
    • -
  • - Profile -
    • +
    + -