The following happens in the sign in page that you created as part of last week's project tasks.

1. Add the script tags to the page. We can reuse the existing customer.js file for the sign in operation.

2. We need a message placeholder that we can use to give the user some feedback relating to their sign in attempts.

   Add a <p> tag above the form. The message will come from the controller:

   <p>{{signInMessage}}</p>

1. Set the default message as a model in the data section:

   signInMessage: "Please sign in to continue."

   Don't forget to put a comma at the end of the previous model.

2. Add a signIn function to the methods section. It doesn't need to take any parameters since we will be reusing the existing customer model.

3. Add an alert to the function to check that we have access to the username and password that the user has entered. As mentioned, we are going to be reusing the existing customer model, so the code looks like:

   alert("Sign In " + this.customer.username + ", " + this.customer.password);

4. Back in the HTML page, set the v-model attributes for the input tags to customer.username and customer.password.

5. Register the signIn function as the form's submit handler:

   @submit.prevent="signIn()"

6. Save, reload, and test. You should see the alert with the username and password.

7. Add another URI variable near the top of the file for the GET customer operation. It should point at /api/customers/{username}. Since there is a path parameter, you will need to use a template literal as shown in <>.

8. Complete the signIn function:

    axios.get(customerApi({'username': this.customer.username}))
        .then(response => {
            this.customer = response.data;
            window.location = 'products.html';
        })
        .catch(error => {
            this.signInMessage = 'Sign in failed.  Check your username and password and try again.';
        });

   Where customerApi is the name of the template literal that you added in the previous step.

   If there is an error then we can assume that the user entered the incorrect credentials, so we change the signInMessage to reflect that.

   <> The error will only trigger if you have explicitly added code to your CustomerModle that returns a 404 / Not Found error if the user enters a bad username (which you should do). See the reference section <> for details.

   1. Save, reload, and test.You should now be able to create a new account, and then sign in with the new details.

Note that the password is not currently being checked. Full authentication is a bonus task. We will give you some more details on how to do this in the reference document soon. Note that we want pretty much all requests to be authenticated, so we can't just add a simple check to the signIn function for this, not to mention that it would take an attacker 10 seconds to defeat that check.