Lavender-Lions Final Project Report
==========
## Table of Contents
[toc]

## Our Webapp - An Introduction
Welcome to the blogging system set up by the Lavender Lions. With this blogging system you are able to create an account and compose blog articles. Composed blog articles can then be viewed by everyone whether they are logged in or not. Logged in users also have the ability to edit or delete their own content. They are also able to edit the details of their profile.

## Compulsory Features - What's Done
### New Accounts
Created a handlebars view with a an html form. Form is rendered on the server side using a GET request. When form is submitted a POST request is sent with the data from the submission. This data is then sent to the SQL database via a Data Acces Object(DAO) template.

### Live Username Checks
The username field when creating an account needs to check the database for whether the username entered exists or not. This required client side JavaScript code to retrieve data entered into the text field on 'keyup'. This sent a GET request to the server side. The server side route then fetched data from the SQL database via a DAO template. If the username exists then an error message is displayed and the user is unable to submit the form. If the username doesn't exist then the user is able to submit the form.

### Confirm Password
There are two text fields for password input. The password field and the confirm password field. Client side JavaScript code was used to check whether data entered in the confirm password field matched data entered in the password field. If the data inputs did not match then an error message is displayed and the user is unable to submit the form. If the passwords match then a message is displayed stating that the passwords match and the user is able to submit the form.

### User Avatar Choice
When the user makes their account, radio buttons give the user 5 avatar options. Once selected and submitted this infomation is stored in the database, associated with their unique ID. Whenever the user is logged on, this avatar is rendered in the navbar. The user can change their selected avatar by navigating to the 'change user details' page located under 'profile'.

### Login/Logout Capability
Registered users are able to login/logout via the buttons presented in the navigation bar. While logged in, the pages will update accordingly, e.g. navbar will show "my profiles", "my articles" and "compose article"; commenting functions are activated, and users can delete articles from the "authors" page.

### Encrypted Passwords
We were required to encrypt passwords and not store them as plain text inputs in the database. The encryption was achieved using the bcrypt package. Passwords entered as plain text by the user is hashed using bcrypt. Hashing turns the enterd password into a short string of letters and/or numbers using an encryption algorithm.

Then using another bcrypt function we compare the enterd plain text password and hashed password to ensure that the user can still log in with the plain text password.

### Browsing All Articles & Authored Articles
All visitors are able to view the full list of articles in the "articles" page. There is also a separate page that groups the articles written by all authors in the "authors" page.

While logged in, authors can also view their own articles through the "my articles" link in the navbar.

### Add, Edit and Delete Articles
While logged in, the user can compose articles. When a user is editing a article they composed, the articles will be loaded into the "edit article" page, and the user can easily modify them; if the user wants to delete an article, they can do so in the "my articles" page, which will prompt the users on whether they're *sure* they want to delete it.

### WYSIWYG Article Composition & Image storage
Implemented a rich text editor called TinyMCE. This allows users to edit their responses in a textarea input field. They can add images and format their text input. This is initialised by adding a script in the head tag of the main handlebars layout.

### Editable Account Info
When the user navigates to the 'My Account' page, they can change all of their personal infomation provided when they made their account. All of their information is rendered onto the page. If they change their username, the browser will inform the user if their selected username is available. If the username is taken, the user will not be able to submit the form because the submit button will be disabled.

### Consistent and Responsive Website Feel
The use of handlebars layout allows a consistent navbar/footer in all the pages rendered. For repeated sections, the use of handlebar partials (or pieces) has been implemented.

Certain minor repeated objects (e.g. submit buttons) has been made into a generic class in CSS and styled that way.

"Flex" was used in many elements to allow automatic reshuffling of content. In other cases, a completely different layout has been used for smaller screens, e.g. Navbar adds a dropdown menu on screen sizes < 960px.

## Optional Features - What To Look Out For

### Forgot Password Feature
The user can reset their password by clicking on the forgot password link on the login page. The password reset has three steps:
1. User inputs their username, which is automatically checked against the database.
2. User is prompted to input the answer to their security question
3. User enters a new password and confirms it. Client side js ensure that the passwords matches, and upon submitting the password will be updated.

### Random Article Cards
At the end of each articles, as well as home page, there are cards of randomly chosen, non-repeating articles. The implementation of these cards were through the use of "partials" in Handlebars.

### Upload Image Functionality
To supplement the articles card display, image upload functionality was implemented using the multer package.

### Content Warning
Articles can be tagged with "contains sensitive content". When the page is opened, a content warning will placed over the content of the page (not affecting the navbar), and the content of the page will be blurred. This effect stays until the user clicks on a button or click on the blurred sections to dismiss it.

As an additonal challenge, this modal was done purely on CSS.

### Commenting Functionality
Commenting is available for any users that are logged in. Users may submit in similar fashion as composing articles (using tinymce). The comments are tied to each articles and the user who submitted it. Extra effort was made to add the user's avatar, comment date/time and user's name above the relevant comment.

### Confirmation for Deleting of Account & Messages
Upon clicking on "delete account" or "delete article", a transition would occur where a second confirmation will show up to confirm that the deletion of the account/article was deliberate.

As an additional challenge, this was done on purely CSS.

### Scrapped Optional Features:
- Admin page
- Tagging articles & filtering based on tags
- Upvotes/likes on articles
- User's favorite articles
## How to Setup

### Database File Instructions
File should be named **"blogDB.db"**

### To-dos Before Running Our Webapp
Simply run `npm install`, then `npm start` in the terminal.

### Example User Logins

| Username | Password |
| ---------- | -------- |
| andrewMead | admin |
| hviv036 | test |
| nyel451 | test |
| jsam970 | test |

## Other Comments

Lavender Lion Team Members

- Nicholas Kam
- Rachel MacLachlan
- Sunita Tharani
- Noel Yeldos