How to Run

Start the application by running app.py.

Instructions for Testing

1. Hover over the profile and log in as an existing user.
   • Existing users with example data:
     • Username: elza, Password: 12345
     • Username: nora, Password: 12345
2. Enable dark mode by clicking the toggle in the header.
3. From the search bar in the header, search for "chair" or any other item you would like to buy.
4. Select a desired quantity and click "Add to Cart".
5. Click on the icon in the top left corner, click on another item, and add it to cart.
6. Go to your cart and remove the sofa item.
7. Click "Checkout" then "Purchase".
8. Go to your profile and observe your transactions displayed, as well as your bio, address, and phone details.
9. Click "Edit profile" and edit the respective fields as you wish.
10. Go to the order history and search for an item you ordered.
11. From the header, click "New AD".
12. Insert the desired title, description, price, and image. Title and price are required. Click "Upload" when done.
13. Sort by "Yours" to see all your ADs.
14. Put the sort back to "All".
15. Log out and register a new user. This is done by clicking "register here" from the login page.
16. Search for the title of the AD you posted on the elza account and click it.
17. At the bottom of the AD, click on the seller.
18. Observe their profile info and transaction history.
19. From the index page, sort by "Yours" and observe your example ADs.
20. Go to your own profile and click "Delete Account" at the bottom.
21. Log back in as elza and observe that everything from the other account is deleted.
    
    

---

List of all functionality

Login/register

• The database table "users" stores user_id, username, password hash, time of creation, and adds bio, adress, phone number on profile edit.

Register as a new user

• Username and password require atleast 4 and 5 characters respectivly. This is validated by JS and the server. Using AJAX it checks if the username is already taken, if it is not, then green text stating that the name is available will appear. If the validation fails, an error in red text appears and tells you what is wrong. Once the user tries to register, the server does a last validation before creating the user. The username, password in hash-form, the time the user is created at and the user-id is then saved in the database.
• When creating a password, the user has to write it two times, and if the passwords dont match, there is red text telling the user that they dont match.
• The user is automatically logged in when the user is created.
• AJAX request on submit (with loading gif)
  
  

Login as an existing user

• Error is displayed when there are empty fields, and if they are empty then the button for login is disabled and a error-message appears. The username and password is validated on the server-side, and if everything is correct, then it adds the user-id to the session. If not, an error message that says "Invalid login credentials"
• AJAX request on submit (with loading gif)

Products

• The database table "items" stores item_id, title, description, price and owner_id. The table "images" stores the image path, display order and the product-id the images are for.

Viewing listed products

• You can view products through the index-page and through searching for products using the search feature.
• The index-page shows a grid of products where each product has an image of the product (or a placeholder image if there is no images for the product), the title and the price of the product. The search-bar shows the same information.
• The search bar uses ajax to show the user products that match with the search, which show up in a drop-down with clickable elements.
• On the product page the user can cycle through pictures using the arrows on the sides, view the amount of pictures, see all the information about the products and add a choosen amount of the product to the cart. This can only be done if the user is logged in.
  
  

Creating new product

• Only logged-in users can access this page.
• There are three input boxes, one for title, one for description and one for price. There is also a "add image button" and a upload button to submit the form
• The title has a maximum character limit of 22 characters
• The description input is a span-element with the role "textbox". This has a maximum character limit of 500 characters. Error will be displayed if the user has too many characters. The textvalue is fetched through JS.
• The price input is a numerical input
• The image input button works as a input element where you can add multiple images at a time. When uploading images, the images get appended to an array in JS with all the imagefiles so that we can append them to the formData when uploading the product. This enables the user to use the button multiple times without loosing the old files.
• When images are uploaded, they show up in a grid-like manner, where the image-file is turned into a URL. The order that the images are shown, determine the order of the images in the final product where the first image is the one the user sees in the index. The image-previews have arrows to choose the order, and a button to remove the image.
• The upload button is disabled until the product has a title and a price. If there is no image, it will use a stock-image for the product.
• When the product is being uploaded, a new formData is created in JS. The images and the text all get appended to this formData for further validation on the backend This is done through AJAX.
• When the formData is sent to the backend, the text-inputs get validated and the images are handled. The image-path, and the image file is created, where the image-path and order is saved to the database, and the image is saved in the images folder. The item's creator is determined by the current logged in users id.
  
  

Deleting product

• When on a product-page the current user has created, the button "delete-product" appears. This prompts a confirmation pop-up that asks if the user wants to delete the product. If the user presses yes, and everything works, the product gets permanently deleted and the message "product successfully deleted" is shown on the screen with a time-out that redirects to the index after 3 seconds.
• The backend gets the current logged in user, (which in itself protects products being deleted by users who shouldnt be able to delete the product), and gets the item from the database. This deletes the item, and also the images from the image table. The image-files also get deleted from the server.

Header

• Logo for the website redirects to index when clicked
• Enable or disable dark mode through the toggle slider button. Preference stored in local storage
• Search using AJAX
• New AD lets you create a new AD, but will redirect you to login if not logged in
• Click on or hover over Cart or "View Cart" to view your cart. Checkout redirects to the checkout. This only works when logged in
• Username displayed under profile icon if user is logged in. If not, it says "Profile"
• Click on or hover over Profile or "Profile" to view your profile. Redirects to log in if not logged in
• Hover over profile and click "Order history" to view order history. Redirects to log in if not logged in

Profile

• Default init data for bio, address, and phone number
• Edit profile with all changes stored in the database using AJAX
• Success message on submit with a timeout (within the same AJAX call)
• Delete account with popup using AJAX on delete
• Transaction history for all purchases made by the user
• Scrollbar appears if the transaction history is too long

Cart

• View items added to cart
• Total cost of cart items updated with AJAX
• Delete individual cart items with AJAX
• Checkout button redirecting to checkout
• Purchase button with AJAX giving a success message with a timeout and inserting cart items into the "orders" table. Redirects to index after timeout

Order History

• View orders made by the user
• Search for orders by title using AJAX (with loading gif)

Sort

• View all advertisements (sorted by "All")
• View user-specific advertisements (sorted by "Yours")

Database tables used:

User table

User_id	username	password	created_at	bio	adress	phone
293565	test	2:sha256:2600...	31 May 2023	Funny guy		90957421
431988	asdf	73faa39965639...	30 May 2023		Stavanger 29
915324	woop	CPuMItKEKdqBd...	29 May 2023	dsfsdfsdfsfsf	Hell	666 66 666

Items table

item_id	title	description	price	owner_id
1	Fancy sofa	Beautiful sofa for the whole family	1000	293565
2	Cool chair	Used as a stool as i have no butt	500	293565
3	Table	A table for two or just for you my friend	2000	653129

Orders table

order_id	order_date	user_id	product_id	quantity	total_amount
1	2023-06-09	531596	2	1	500
2	2023-06-09	531596	3	14	28000
3	2023-06-09	531596	1	4	4000

Images table

path	displayOrder	product_id
/static/Images/ProductImages/stol.jpg	1	1
/static/Images/ProductImages/sofa.jpeg	1	2
/static/Images/ProductImages/sofa2.jpeg	2	2

Cart table

user_id	item_id	title	description	price	image_path	quantity
531596	2	Cool chair	Used as a stool as i have no butt	2000	/static/Images/ProductImages/stol.jpg	4
531596	1	Fancy sofa	Beautiful sofa for the whole family	3000	/static/Images/ProductImages/sofa.jpg	3
531596	3	Table	A table for two or just for you my friend	34000	/static/Images/ProductImages/bord.jpg	17