Griffin‐Final‐Project‐Diary - TheEvergreenStateCollege/upper-division-cs-23-24 GitHub Wiki

Goal:

  • Allow user to add songs to a list of songs, and also to the database

I'm going to follow the list in order, so first I'll start with making a form: I made a form in html with text inputs and a submit button. Each input has a label. image Here is what it looks like on the website: image Next I need an unordered list of songs: image Now I need a script to add songs to the list when they are created. Songs are created when the form is submitted, i.e. when the button is clicked or the user presses enter while selecting an input field; so I'll use a "submit" event to listen. This will call the function/functions for the next two parts.

When "submit" event occurs:

  1. create list item element and append to list: "songs-list"
  2. new element text = nameInput.innerText?

image Both the html file and the javascript file are in the same directory. Here is the script tag in my html page: image I put the script tag in the line before the closing body tag. I'm going to go grab a Pepsi, and I'll be back..

I'm pivoting to work on something else. Instead I'm going to work on connecting my login form and create user form with my login and create new user routes/handlers. -I realized that my JavaScript files are getting 404 errors in all of my html pages, so it might be something global? Or my assumptions about paths are completely off. For now I'll just work in-line.

How it's going to work:

  • When you submit the form

I already have a function to create new users... image

I am working on the form to login: When I submit the form I want it to post the username and password to the /signin route. I'm encountering an issue where the form auto submits when I load the page? Here is the problem: image .. I realized that I was just refreshing the browser, and the browser URL was set to the IP:port/signin, instead of just being IP:port, so i.e. I was using the get method on the /signin route. I still am encountering the error from the picture, however, the page does load.

So it seems that the problem is that nothing is submitted in the body for the username. If I add stuff to the input maybe it'll work. It did not work...

Here is a pic of model User: image

and here is a pic of user.ts, specifically the signin function: image I think I figured it out! So I need a username field in the body of my POST request. I realized that the input field in the form was named userNameInput instead of username. This name is used as the name for the body field too, so I changed it to username. I'm not sure if it fixed the problem, but now I'm getting a new error: image This error seems to be related to password, so I adjusted the name of the password input to password, and oila, it works! image This is a major win, I'm going to celebrate by eating breakfast.

Alright, I've gotta keep moving.. next lets setup create new user. I need to set the form attributes: method and action, then I need to change the names of the inputs to username and password. Will this conflict with the other form? Also to note, I'm not handling errors yet, so if someone creates a duplicate user then the server crashes.

Now that I have the tokens let me check if any of the protected paths work. I hopefully should be able to create a song now. Here is an example request using thunderclient: image and here is a picture of the authorization header: image When someone signs in or creates a new user, they should be redirected to index.html, and should be given a token. I'm going to use res.json({token}) res.sendfile("index.html") to redirect the user to the homepage.

how do I set request.headers.authorization in a post request? I commented out the line image

When I call the route /api, it first calls the protect function, which checks for a token within the authorization header field. So when I send the request, I need to make sure I include the token in the authorization header field. Where do I make the call?

Today I'm working on setting up a domain and TLS certificate. I've run into this error: image image I had to rerun the curl command to setup a domain specifically for www.moodmusic.arcology.builders. I only had run this command for moodmusic.arcology.builders. Then I reran the certbot command: image