Updating the Client: The Login Screen

Learn how to add a password field and a register account checkbox.

Necessary changes

The updates to the client are fairly extensive since every interaction with the API must be correctly modified, and we need to think through how to handle a range of failure cases. There is good news, though, which is that all of the interactions with the server occur at the top level within the App.js file. Here’s a list of the changes we’ll need to make:

  1. Update the login screen by adding a password field and a “register account” check-box.

  2. Update the start game function to first register or login and then create a new game before going on to the next screen. The following responses need to be created:

    1. If an account already exists, return to login with that flash message.
    2. If login fails, return to login with that flash message.
    3. If an account is created, the user logs in and continues to the next screen.
  3. Use received access tokens in future requests.

    1. If a request fails due to an expired token, re-login using the stored username and password and continue, but show an alert if that fails.
  4. Create a new component to display “flash” messages, which are temporary messages used to give feedback. Place this flash component in the login screen.

  5. Test it.

Changes in the login screen

Let’s start with the login screen. When we revisit the code, we’ll see that we only need to change the StartForm, to which the clickStart function is passed, so that will probably also need to be updated. Add StartForm in backticks. As a reminder, the StartForm component class was defined as follows:

Get hands-on with 1200+ tech skills courses.