Lab 9: User Registration and Sign-In

Overview

In this lab, you will be implementing the registration portion of the final project. In the first part, you will be creating a simple page with a button on it that lets the user register an account in the Secret Notes server. The server will generate a secret code for the created account which can be used to log in later.

Part 1: Registering an Account

For this part of the lab, you will be creating a web page where somebody can register a user in the web application you will be building for your final project. You do not need to make the page look very fancy but if you want an example of how it should behave, check out the example site

If nothing else, the page you build in this part of the lab should have a button that the user clicks to create an account. In order to create the account, you have to make a request to the server at https://spy-notes-api.rk0.xyz. Specifically, you need to make a POST request to https://spy-notes-api.rk0.xyz/users. The POST request will return a response that includes a secret code that the user can use to log in later.

Specifically, the response will look like:

{
    "userId": "abc-123"
}

So the user clicks the button, that triggers a request to the server, the server responds with the user's secret code, and then you display that secret code back to the user for them to copy and store somewhere.

Finally, you have an account created, you can use the user's secret code to generate a corresponding QR code. How does that work? You somehow need to create an <img> tag, using JavaScript, and its src attribute is a URL that you can derive from the secret code. If the code was abc-123 for example, the QR code image src would be <img src="https://spy-notes-api.rk0.xyz/users/abc-123/qr">. If you create an image tag that looks like that, it will result in a QR code that stores the user's secret code.

Part 2: Sign-In

Once a user has generated their account's secret code, they should be able to sign into the application with their secret code. How does that work? The QR code scanning bit is a little complicated. But if they want to sign in with their code directly, they should simply be able to copy-paste their code into an input box and click a sign in button.

For this portion of the lab, you will be building a page that does the steps above. All it needs to have is a text box where the user can enter their code and a button to submit that code. When the user enters the code and clicks submit, you should redirect them to the page you built last lab. To use JavaScript to redirect the user to a new URL, you can use code something like window.location.pathname = "./notes.html". If the note-taking page you built in the last lab was named notes.html, and if it was located in the same folder as the two pages you've created in this lab, you could use the previous code to redirect users from the sign-in page to the note-taking page.

Part 3: Updating the Note Taking Page

Once you've completed the previous lab, as well as parts 1 and 2 in this lab, you should have 3 pages that serve most of the needs of the note-taking application. You should have a page for users to sign up, a page for users to sign in, and a page for users to take notes.

The one thing that doesn't work completely yet is that the note-taking page probably still has a hardcoded user ID in it. Now that there's a way for users to create an account through the web application, the note-taking page should be able to use the account they create and sign in with. That is to say, after signing in, users should have the notes they create associated with the right user. When they load the note-taking page, they should be able to only see notes associated with the user they used to sign in.

To accomplish this, you can pass along the user ID from the sign-in page to the note-taking page. To do that, you can stick the user ID into the page URL. If the note-taking page is currently called notes.html, you might redirect the user to http://localhost:5500/notes.html?userId=abc-123. Once the notes page loads, instead of considering the "current" user as the hardcoded ID value from the last lab, you should use the value from the URL.

Note: In a real application, storing sensitive data in the URL is not a great idea. In this simple example site though, it can work

Submitting

This assignment will be submitted in the same way as previous labs but has a few more moving parts. Please submit a single zip file to Canvas as usual. This time though, please include the following:

• A folder with your code from all three parts of the lab. Part 3 will have you updating the code you wrote in the previous lab. Please make sure to upload those updated files