From c2abdd1cb9336df3330e91d631d83e1612a7e524 Mon Sep 17 00:00:00 2001 From: "Glitch (a3-brandon-m-navarro-brandon-navarro)" Date: Thu, 19 Sep 2019 15:48:36 +0000 Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=87=F0=9F=8D=84=20Updated=20with=20Gli?= =?UTF-8?q?tch?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 4 + .glitch-assets | 2 + README.md | 94 ++-- package.json | 21 + public/css/style.css | 166 ++++++++ public/js/app.js | 66 +++ public/js/scripts.js | 66 +++ public/views/index.ejs | 60 +++ public/views/login.ejs | 63 +++ public/views/register.ejs | 71 +++ server.improved.js | 137 ++++++ shrinkwrap.yaml | 876 ++++++++++++++++++++++++++++++++++++++ 12 files changed, 1559 insertions(+), 67 deletions(-) create mode 100755 .gitignore create mode 100644 .glitch-assets create mode 100755 package.json create mode 100755 public/css/style.css create mode 100644 public/js/app.js create mode 100755 public/js/scripts.js create mode 100644 public/views/index.ejs create mode 100644 public/views/login.ejs create mode 100644 public/views/register.ejs create mode 100644 server.improved.js create mode 100644 shrinkwrap.yaml diff --git a/.gitignore b/.gitignore new file mode 100755 index 00000000..28a28ad3 --- /dev/null +++ b/.gitignore @@ -0,0 +1,4 @@ +*.DS_Store +node_modules/ +package-lock.json +.env \ No newline at end of file diff --git a/.glitch-assets b/.glitch-assets new file mode 100644 index 00000000..e8b5227d --- /dev/null +++ b/.glitch-assets @@ -0,0 +1,2 @@ +{"name":"note.png","date":"2019-09-08T18:06:02.393Z","url":"https://cdn.glitch.com/09702f7f-027b-4e86-9f4b-f9ccc2e7c95b%2Fnote.png","type":"image/png","size":541,"imageWidth":144,"imageHeight":144,"thumbnail":"https://cdn.glitch.com/09702f7f-027b-4e86-9f4b-f9ccc2e7c95b%2Fnote.png","thumbnailWidth":144,"thumbnailHeight":144,"uuid":"M2RtdG9s9CurK33M"} +{"name":"note_small.png","date":"2019-09-08T18:07:51.032Z","url":"https://cdn.glitch.com/09702f7f-027b-4e86-9f4b-f9ccc2e7c95b%2Fnote_small.png","type":"image/png","size":182,"imageWidth":36,"imageHeight":36,"thumbnail":"https://cdn.glitch.com/09702f7f-027b-4e86-9f4b-f9ccc2e7c95b%2Fnote_small.png","thumbnailWidth":36,"thumbnailHeight":36,"uuid":"5d44FfNEMC6i0xgz"} diff --git a/README.md b/README.md index afcca619..87acb8d5 100755 --- a/README.md +++ b/README.md @@ -1,74 +1,34 @@ -Assignment 3 - Persistence: Two-tier Web Application with Flat File Database, Express server, and CSS template -=== +## Broken ToDo List with Awesome Authentication -Due: September 16th, by 11:59 AM. +your glitch link e.g. https://a3-brandon-m-navarro-brandon-navarro.glitch.me/login -This assignnment continues where we left off, extending it to use the most popular Node.js server framework (express), a flat file database suitable for small applications (lowdb), and a CSS application framework / template of your choice (Boostrap, Material Design, Semantic UI, Pure etc.) +For my project, I wasn't able to completely implement all the required concepts. My project doesn't make use of a database, +so it is unable to persist users through different sessions, but users are able to create an account and log in. The design +for the login and register page were done using bootstrap, while I tried to implement my own CSS on the task creation page. +I think this is where I went wrong, because I spent way too much time playing around with my CSS and not implementing all +the server requirements. For user authentication, I was able to successfully implement passport, along with encrypting users +passwords. Although I wasn't able to complete the server, I was still able to use a number of middleware packages. The first +of which is 'morgan', which allowed me to generate log files about the users requests. +I also used 'passport' with the 'passport-local' strategy as another middleware, and that was for user authentication +with an email and password. The third middleware I used was 'express-flash'. Express-flash allowed me to define a flash message +and render it without redirecting the request. This was used for alerting the user that either an account didn't exist, or if the +password was incorrect. The fourth middleware used was bcrypt. This was used for hashing users passwords for added security. +Also, I used 'express-session' to create a session and 'dotenv' store the SESSION_SECRET key. Finally, I used helmet to set various HTTP headers to help protect my app. Please note the add/remove/edit functionality does +not work. -Baseline Requirements ---- - -Your application is required to implement the following functionalities: - -- a `Server`, created using Express (no alternatives will be accepted for this assignment) -- a `Results` functionality which shows the entire dataset residing in the server's memory -- a `Form/Entry` functionality which allows users to add, modify, and delete data items (must be all three!) associated with their user name / account. -- Use of at least five [Express middleware packages](https://expressjs.com/en/resources/middleware.html). Explore! -- Basic authentication using the [Passport middleware](http://www.passportjs.org) for Express (this counts as one of your five middleware packages). We encourage using the Local strategy, but OAuth (Open Authentication) can also be used for additional technical achievement. The course staff cannot help you with the various flavors of OAuth strategies. YOU MUST PROVIDE US WITH ACCOUNT CREDENTIALS TO LOGIN TO YOUR APPLICATION IF YOU USE OAUTH. The course staff cannot be expected to have credentials for any particular OAuth service. -- Persistent data storage in between server sessions. [lowdb](https://github.com/typicode/lowdb) is a suitable database package for this assignment and will be discussed in class. -- Use of a [CSS framework or template](https://github.com/troxler/awesome-css-frameworks). This should do the bulk of your styling/CSS for you and be appropriate to your application. For example, don't use [NES.css](https://nostalgic-css.github.io/NES.css/) (which is awesome!) unless you're creating a game or some type of retro 80s site. - -Your application is required to demonstrate the use of the following concepts: - -HTML: -- HTML input tags and form fields of various flavors (`