From 23d8d00c0a9298b093fc8791ac977f6491a39c01 Mon Sep 17 00:00:00 2001
From: Ryan Darcey <70971592+ryandarcey@users.noreply.github.com>
Date: Wed, 21 Sep 2022 15:51:00 -0400
Subject: [PATCH 1/6] Update README.md

---
 README.md | 97 -------------------------------------------------------
 1 file changed, 97 deletions(-)

diff --git a/README.md b/README.md
index 1ba2c7a4c..faca591e1 100644
--- a/README.md
+++ b/README.md
@@ -1,100 +1,3 @@
-Assignment 3 - Persistence: Two-tier Web Application with Database, Express server, and CSS template
-===
-
-Due: September 22nd, by 11:59 AM.
-
-This assignnment continues where we left off, extending it to use the most popular Node.js server framework (express), 
-a database (mongodb), and a CSS application framework / template of your choice (Boostrap, Material Design, Semantic UI, Pure etc.)
-
-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 all data associated with a logged in user (except passwords)
-- 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! One of these five middleware 
-can be a custom function that you write yourself; if you choose to do this, make sure to describe what this function is in your README.  
-- Persistent data storage in between server sessions using [mongodb](https://www.mongodb.com/cloud/atlas)
-- 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 (`<textarea>`, `<input>`, checkboxes, radio buttons etc.)
-- HTML that can display all data *for a particular authenticated user*. Note that this is different from the last assignnment, which required the display of all data in memory on the server.
-
-Note that it might make sense to have two pages for this assignment, one that handles login / authentication, and one that contains the rest of your application.
-For example, when visiting the home page for the assignment, users could be presented with a login form. After submitting the login form, if the login is 
-successful, they are taken to the main application. If they fail, they are sent back to the login to try again. For this assignment, it is acceptable to simply create 
-new user accounts upon login if none exist, however, you must alert your users to this fact.  
-
-CSS:  
-- CSS styling should primarily be provided by your chosen template/framework. 
-Oftentimes a great deal of care has been put into designing CSS templates; 
-don't override their stylesheets unless you are extremely confident in your graphic design capabilities. 
-The idea is to use CSS templates that give you a professional looking design aesthetic without requiring you to be a graphic designer yourself.
-
-JavaScript:  
-- At minimum, a small amount of front-end JavaScript to get / fetch data from the server. 
-See the [previous assignment](https://github.com/cs4241-19a/a2-shortstack) for reference.
-
-Node.js:  
-- A server using Express, at least five pieces of Express middleware, and a persistent database (mongodb).
-
-General:  
-- Your site should achieve at least 90% on the `Performance`, `Best Practices`, `Accessibility`, and `SEO` tests 
-using Google [Lighthouse](https://developers.google.com/web/tools/lighthouse) (don't worry about the PWA test, and don't worry about scores for mobile devices).
-Test early and often so that fixing problems doesn't lead to suffering at the end of the assignment. 
-
-Deliverables
----
-
-Do the following to complete this assignment:
-
-1. Implement your project with the above requirements. A good potential starting point is to use the "hello-express" project template inside of Glitch; this appears as an option when you hit the "New Project" button. Use the work you did in the last assignment as a reference to implement functionality.
-2. If you developed your project locally, deploy your project to Glitch (unless completing the alternative server technical acheivement described below), and fill in the appropriate fields in your package.json file.
-3. Test your project to make sure that when someone goes to your main page on Glitch, it displays correctly.
-4. Ensure that your project has the proper naming scheme `a3-yourfirstname-yourlastname` so we can find it.
-5. Fork this repository and modify the README to the specifications below.
-6. Create and submit a Pull Request to the original repo. Name the pull request using the following template: `a3-firstname-lastname`.
-
-Acheivements
----
-
-Below are suggested technical and design achievements. You can use these to help boost your grade up to an A and customize the 
-assignment to your personal interests, for a maximum twenty additional points and a maximum grade of a 100%. 
-These are recommended acheivements, but feel free to create/implement your own... just make sure you thoroughly describe what you did in your README, 
-why it was challenging, and how many points you think the achievement should be worth. 
-ALL ACHIEVEMENTS MUST BE DESCRIBED IN YOUR README IN ORDER TO GET CREDIT FOR THEM.
-
-*Technical*
-- (10 points) Implement OAuth authentication, perhaps with a library like [passport.js](http://www.passportjs.org/). 
-*You must either use Github authenticaion or provide a username/password to access a dummy account*. 
-Course staff cannot be expected, for example, to have a personal Facebook, Google, or Twitter account to use when grading this assignment. 
-Please contact the course staff if you have any questions about this. THIS IS THE HARDEST ACHEIVEMENT OFFERED IN WEBWARE. You have been warned!  
-- (5 points) Instead of Glitch, host your site on a different service like [Heroku](https://www.heroku.com) or [Digital Ocean](https://www.digitalocean.com). Make sure to describe this a bit in your README. What was better about using the service you chose as compared to Glitch? What (if anything) was worse? 
-- (5 points) Get 100% (not 98%, not 99%, but 100%) in all four lighthouse tests required for this assignment.  
-
-*Design/UX*
-- (10 points) Make your site accessible using the [resources and hints available from the W3C](https://www.w3.org/WAI/), Implement/follow twelve tips from their [tips for writing](https://www.w3.org/WAI/tips/writing/), [tips for designing](https://www.w3.org/WAI/tips/designing/), and [tips for development](https://www.w3.org/WAI/tips/developing/). *Note that all twelve must require active work on your part*. 
-For example, even though your page will most likely not have a captcha, you don't get this as one of your twelve tips to follow because you're effectively 
-getting it "for free" without having to actively change anything about your site. 
-Contact the course staff if you have any questions about what qualifies and doesn't qualify in this regard. 
-List each tip that you followed and describe what you did to follow it in your site.
-- (5 points) Describe how your site uses the CRAP principles in the Non-Designer's Design Book readings. 
-Which element received the most emphasis (contrast) on each page? 
-How did you use proximity to organize the visual information on your page? 
-What design elements (colors, fonts, layouts, etc.) did you use repeatedly throughout your site? 
-How did you use alignment to organize information and/or increase contrast for particular elements. 
-Write a paragraph of at least 125 words *for each of four principles* (four paragraphs, 500 words in total). 
-
-Sample Readme (delete the above when you're ready to submit, and modify the below so with your links and descriptions)
----
-
 ## Your Web Application Title
 
 your glitch (or alternative server) link e.g. http://a3-charlie-roberts.glitch.me

From d5bd80a0548106bc70a544f74da4adc65287e83e Mon Sep 17 00:00:00 2001
From: Ryan Darcey <70971592+ryandarcey@users.noreply.github.com>
Date: Wed, 21 Sep 2022 15:51:27 -0400
Subject: [PATCH 2/6] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index faca591e1..d4f0ef1a9 100644
--- a/README.md
+++ b/README.md
@@ -12,7 +12,7 @@ Include a very brief summary of your project here. Images are encouraged, along
 - the five Express middleware packages you used and a short (one sentence) summary of what each one does. If you use a custom function for *one* (and one alone) middleware please 
 add a little more detail about what it does.
 
-## Technical Achievements
+### Technical Achievements
 - **Tech Achievement 1**: I used OAuth authentication via the GitHub strategy
 
 ### Design/Evaluation Achievements

From 2cb49380a55f901d93a5e505568810b335b886b5 Mon Sep 17 00:00:00 2001
From: Ryan Darcey <70971592+ryandarcey@users.noreply.github.com>
Date: Tue, 27 Sep 2022 16:43:42 -0400
Subject: [PATCH 3/6] Update README.md

---
 README.md | 38 ++++++++++++++++++++++++--------------
 1 file changed, 24 insertions(+), 14 deletions(-)

diff --git a/README.md b/README.md
index d4f0ef1a9..ee1e88f7a 100644
--- a/README.md
+++ b/README.md
@@ -1,19 +1,29 @@
-## Your Web Application Title
+# Simple To-do List
 
-your glitch (or alternative server) link e.g. http://a3-charlie-roberts.glitch.me
+### https://a3-ryan-darcey.glitch.me/
 
-Include a very brief summary of your project here. Images are encouraged, along with concise, high-level text. Be sure to include:
+### Existing user:
+- **username:** testuser
+- **password:** password123
+- already has 2 test items associated with it in the database
 
-- the goal of the application
-- challenges you faced in realizing the application
-- what authentication strategy you chose to use and why (choosing one because it seemed the easiest to implement is perfectly acceptable)
-- what CSS framework you used and why
-  - include any modifications to the CSS framework you made via custom CSS you authored
-- the five Express middleware packages you used and a short (one sentence) summary of what each one does. If you use a custom function for *one* (and one alone) middleware please 
-add a little more detail about what it does.
+### Very brief summary of project:
 
-### Technical Achievements
-- **Tech Achievement 1**: I used OAuth authentication via the GitHub strategy
+- Simple to-do list allowing user to login to view, add, edit, and delete items
+- Login using database collection of users
+- Uses the Bulma css framework -- this seemed to be styalistically appropriate for a clean, simple to-do list app
+- [[ the five Express middleware packages you used and a short (one sentence) summary of what each one does. If you use a custom function for *one* (and one alone) middleware please add a little more detail about what it does. ]]
+  - [middleware 1]
+  - [middleware 2]
+  - [middleware 3]
+  - [middleware 4]
+  - [middleware 5]
+- [[ challenges you faced in realizing the application ]]
 
-### Design/Evaluation Achievements
-- **Design Achievement 1**: I followed the following tips from the W3C Web Accessibility Initiative...
+## Technical Achievements
+
+- **Tech Achievement 1**: 
+
+## Design/Evaluation Achievements
+
+- **Design Achievement 1**: 

From f22356b3f2baf2d048aa6f01e32e23f54b45dacd Mon Sep 17 00:00:00 2001
From: Ryan Darcey <70971592+ryandarcey@users.noreply.github.com>
Date: Tue, 27 Sep 2022 16:44:09 -0400
Subject: [PATCH 4/6] Create package.json

---
 package.json | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)
 create mode 100644 package.json

diff --git a/package.json b/package.json
new file mode 100644
index 000000000..41e35089e
--- /dev/null
+++ b/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "a3-ryan-darcey",
+  "version": "0.0.1",
+  "description": "A simple to-do list web app.",
+  "main": "server.js",
+  "scripts": {
+    "start": "node server.js"
+  },
+  "dependencies": {
+    "body-parser": "^1.20.0",
+    "cookie-session": "^2.0.0",
+    "ejs": "^3.1.8",
+    "express": "^4.18.1",
+    "lowdb": "^3.0.0",
+    "mongodb": "^4.10.0",
+    "mongoose": "^6.6.2"
+  },
+  "engines": {
+    "node": "16.x"
+  },
+  "keywords": [
+    "node",
+    "glitch",
+    "express"
+  ]
+}

From 579540f110c5b28248be1755c86cda7f763d2f08 Mon Sep 17 00:00:00 2001
From: Ryan Darcey <70971592+ryandarcey@users.noreply.github.com>
Date: Tue, 27 Sep 2022 16:44:29 -0400
Subject: [PATCH 5/6] Create server.js

---
 server.js | 168 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 168 insertions(+)
 create mode 100644 server.js

diff --git a/server.js b/server.js
new file mode 100644
index 000000000..4bf791345
--- /dev/null
+++ b/server.js
@@ -0,0 +1,168 @@
+const express = require( 'express' ),
+      cookie  = require( 'cookie-session' ),
+      mongodb = require( 'mongodb' ),
+      mongoose  = require( 'mongoose' ),
+      User    = require('./models/user'),
+      ListItem  = require('./models/list-item'),
+      app     = express()
+
+// const user = new User({
+//   username: 'testuser',
+//   password: 'password123'
+// })
+// user.save()
+
+let user_list = null
+let item_list = null
+
+// connect to mongodb using mongoose
+const dbURI = 'mongodb+srv://'+process.env.USER+':'+process.env.PASS+'@'+process.env.HOST
+mongoose.connect(dbURI, { useNewUrlParser: true, useUnifiedTopology: true })
+  .then((result) => {
+    app.listen( 3000 )
+    console.log('connected to mongodb and listening for requests')
+  })
+  .catch((err) => console.log(err))
+
+// using EJS view engine
+app.set( 'view engine', 'ejs' )
+app.set( 'views',       './views' )
+
+app.use( express.static('public') )
+app.use( express.json() )
+
+//const client = new mongodb.MongoClient( uri, { useNewUrlParser: true, useUnifiedTopology:true })
+
+
+// gets users from database
+// client.connect()
+//   .then( () => {
+//     // will only create collection if it doesn't exist
+//     return client.db( 'cs-4241-a3' ).collection( 'users' )
+//   })
+//   .then( __collection => {
+//     // store reference to collection
+//     users_collection = __collection
+//     // blank query returns all documents
+//     //users_array = users_collection.find({ }).toArray()
+//     return users_collection.find({ }).toArray()
+//   })
+//   .then( __array => {
+//     // TODO---------- is this necessary
+//     users_array = __array
+// } )
+
+// // same as above but grabs all the todo list items
+// client.connect()
+//   .then( () => {
+//     return client.db( 'cs-4241-a3' ).collection( 'list-items' )
+//   })
+//   .then( __collection => {
+//     items_collection = __collection
+//     return users_collection.find({ }).toArray()
+//   })
+//   .then( __array => {
+//     items_array = __array
+// })
+
+// use express.urlencoded to get data sent by defaut form actions
+// or GET requests
+app.use( express.urlencoded({ extended:true }) )
+
+// cookie middleware! The keys are used for encryption and should be changed
+app.use( cookie({
+  name: 'session',
+  keys: ['key1', 'key2']
+}))
+
+app.use( (res, req, next) => {
+  // grab collections from db on page request
+  
+  
+  next()
+})
+
+app.post( '/login', (req,res)=> {
+  User.find()
+      .then((result) => {
+        //console.log(result)
+        user_list = result
+    
+    
+        // express.urlencoded will put your key value pairs 
+        // into an object, where the key is the name of each
+        // form field and the value is whatever the user entered
+        console.log( req.body )
+
+        user_list.forEach((user) => {
+          console.log('inside forEach')
+          console.log('checking  against ', user.username)
+          if( req.body.username === user.username ) {
+            // if the username exists
+
+            console.log('checking  against ', user.password)
+            if ( req.body.password === user.password ) {
+              // username + password is correct
+
+              // define a variable that we can check in other middleware
+              // the session object is added to our requests by the cookie-session middleware
+              req.session.login = true
+              req.session.username = user.username
+
+              // since login was successful, send the user to the main content
+              // use redirect to avoid authentication problems when refreshing
+              // the page or using the back button, for details see:
+              // https://stackoverflow.com/questions/10827242/understanding-the-post-redirect-get-pattern 
+              res.redirect( 'main' )
+            }
+            else {
+              // username exists, incorrect password
+
+              // cancel session login in case it was previously set to true
+              req.session.login = false
+              // password incorrect, send back to login page
+              res.render('login', { msg:'Password is incorrect'})
+            }
+          }
+          else {
+            // if the username doesn't exist
+            req.session.login = false
+            res.render('login', { msg:'Please enter a valid username'})
+
+            // TODO------- create user in DB
+          }
+        })
+
+        //req.session.login = true
+        //res.redirect( 'main' )
+  
+    })
+})
+
+app.get( '/', (req,res) => {
+  res.render( 'login', { msg:''})
+})
+
+// add some middleware that always sends unauthenicaetd users to the login page
+app.use( function( req,res,next) {
+  if( req.session.login === true )
+    next()
+  else
+    res.render('login', { msg:'Please log in before accessing a list'})
+})
+
+// TODO: have this also render all current list items
+app.get( '/main', ( req, res) => {
+  
+  ListItem.find()
+      .then((result) => {
+        //console.log(result)
+        item_list = result
+        
+        
+        const username = req.session.username
+        const tasks = item_list
+        res.render( 'main', { username, tasks } )
+    })
+})
+

From cd92d9dbf357acd412f7c391cc51dd88e8601305 Mon Sep 17 00:00:00 2001
From: Ryan Darcey <70971592+ryandarcey@users.noreply.github.com>
Date: Tue, 27 Sep 2022 16:51:09 -0400
Subject: [PATCH 6/6] Add files via upload

---
 models/list-item.js |  17 +++++++
 models/user.js      |  17 +++++++
 public/client.js    |  30 +++++++++++++
 views/login.ejs     |  54 +++++++++++++++++++++++
 views/main.ejs      | 105 ++++++++++++++++++++++++++++++++++++++++++++
 5 files changed, 223 insertions(+)
 create mode 100644 models/list-item.js
 create mode 100644 models/user.js
 create mode 100644 public/client.js
 create mode 100644 views/login.ejs
 create mode 100644 views/main.ejs

diff --git a/models/list-item.js b/models/list-item.js
new file mode 100644
index 000000000..c8c3a81c0
--- /dev/null
+++ b/models/list-item.js
@@ -0,0 +1,17 @@
+const mongoose = require('mongoose')
+const Schema = mongoose.Schema
+
+const listItemSchema = new Schema( {
+  user: {
+    type: String,
+    required: true
+  },
+  text: {
+    type: String,
+    required: true
+  }
+}, { timestamps: true })
+
+const ListItem = mongoose.model('list-item', listItemSchema)
+module.exports = ListItem
+
diff --git a/models/user.js b/models/user.js
new file mode 100644
index 000000000..632bd1237
--- /dev/null
+++ b/models/user.js
@@ -0,0 +1,17 @@
+const mongoose = require('mongoose')
+const Schema = mongoose.Schema
+
+const userSchema = new Schema( {
+  username: {
+    type: String,
+    required: true
+  },
+  password: {
+    type: String,
+    required: true
+  }
+}, { timestamps: true })
+
+const User = mongoose.model('user', userSchema)
+module.exports = User
+
diff --git a/public/client.js b/public/client.js
new file mode 100644
index 000000000..f50f71815
--- /dev/null
+++ b/public/client.js
@@ -0,0 +1,30 @@
+window.addEventListener('load', () => {
+  const form = document.querySelector("#new-task-form")
+  const input = document.querySelector("#new-task-input")
+  const list = document.querySelector("#task-list")
+  
+  form.addEventListener('submit', (e) => {
+    e.preventDefault()
+    
+    const task = input.value
+    
+    // user must type something in form input
+    if (!task) {
+      alert("Please fill out the task")
+      return
+    }
+    
+    // create a new list item with content from 'input'
+    
+    
+    
+    
+    
+    
+    // TODO~~~~~~~~~~~~~~~~~~~~~ POST server with new task
+    //    (may be fine leaving form as POST action)
+    
+  })
+  
+})
+
diff --git a/views/login.ejs b/views/login.ejs
new file mode 100644
index 000000000..b3fadc21f
--- /dev/null
+++ b/views/login.ejs
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>A3 - Login</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
+  </head>
+  
+  <body>
+    <section class="section is-small">
+      <div class="container">
+        <h1 class="title is-2 has-text-primary-dark">
+          Log in
+        </h1>
+        <h2 class="subtitle is-4">
+          If you enter a username that doesn't exist, a new user will be created
+        </h2>
+      </div>
+    </section>
+    
+    <section class="section is-small">
+      <div class="container">
+        <form class="box" action="/login" method="POST">
+          <div class="field">
+            <label class="label">Username</label>
+            <div class="control">
+              <input class="input" type="text" placeholder="username" name="username">
+            </div>
+          </div>
+
+          <div class="field">
+            <label class="label">Password</label>
+            <div class="control">
+              <input class="input" type="password" placeholder="********" name="password">
+            </div>
+          </div>
+
+          <input class="button is-primary" type="submit" value="Login">
+        </form>
+      </div>
+    </section>
+    
+    <section class="section is-small">
+      <div class="container">
+        <p class="has-text-danger">
+          <%= msg %>
+        </p>
+      </div>
+    </section>
+  </body>
+</html>
+
+
diff --git a/views/main.ejs b/views/main.ejs
new file mode 100644
index 000000000..5aa7bd5ae
--- /dev/null
+++ b/views/main.ejs
@@ -0,0 +1,105 @@
+<!DOCTYPE HTML>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>A3 - Todo List</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
+  </head>
+  
+  <body>
+    
+    <!-- Title + info -->
+    <section class="section is-small">
+      <div class="container">
+        <h1 class="title is-2 has-text-primary-dark">
+          To-do List App
+        </h1>
+        <h2 class="subtitle is-4">
+          Hello <b><%= username %></b>! All your to-do items should show up here. You can add, edit, and delete list items.
+        </h2>
+      </div>
+    </section>
+    
+    <!-- form to add new task -->
+    <section>
+      <div class="container">
+        <form class="box" id="new-task-form" action="/add" method="POST">
+          <label class="label">Add a to-do item</label>
+          <div class="field has-addons">
+            <div class="control is-expanded ">
+              <input class="input is-primary" type="text" id="new-task-input" placeholder="Something you have to do">
+            </div>
+            <input class="button is-primary" type="submit" id="new-task-submit" value="Add task">
+          </div>
+          
+        </form>
+      </div>
+    </section>
+    
+    <!-- list section -->
+    <section class="section is-small">
+      <div class="container" id="task-list">
+        
+        <div class="container">
+          <h2 class="title is-4 has-text-primary-dark pb-5">
+            Here is your list:
+          </h2>
+        </div>
+        
+
+        <% if ( tasks.length > 0) { %>
+          <% tasks.forEach(task => { %>
+            <% //console.log(task) %>
+            
+            <% if(task.user === username) { %>
+            
+              <div class="field has-addons">
+                <p class="control is-expanded">
+                  <% console.log(task.text) %>
+                  <input class="input" type="text" value="<%= task.text %>" readonly>
+                </p>
+
+                <p class="control">
+                  <button class="button is-warning">
+                    Edit
+                  </button>
+                </p>
+                <p class="control">
+                  <button class="button is-danger">
+                    Delete
+                  </button>
+                </p>
+              </div>
+            
+        <%  }})} %>
+        
+        
+        
+        <!-- raw HTML template for existing task lists (have to convert to ejs) -->
+<!--         <div class="field has-addons">
+          <p class="control is-expanded">
+            <input class="input" type="text" value="this is a raw html example item" readonly>
+          </p>
+
+          <p class="control">
+            <button class="button is-warning">
+              Edit
+            </button>
+          </p>
+          <p class="control">
+            <button class="button is-danger">
+              Delete
+            </button>
+          </p>
+        </div> -->
+        <!-- -->
+        
+      </div>
+    </section>
+    
+    <script src="client.js"></script>
+    
+  </body>
+</html>
+