Let's implement the UI of the page. The following shows what he login page looks like:

As you can see, we support signing in by using either a username or email address. On the login page, there is a link to the register page, as well as another to the forgot password page, which we will implement in a future version of TaskAgile.

The following are the steps to implement the UI of the login page, which is similar to the steps for implementing the register page:

• Write a unit test: services.authentication.spec.js
• Create services/authentication/index.js
• Write a unit test: LoginPage.spec.js
• Create LoginPage.vue to make the test pass

In services.authentication.spec.js, we will create the following tests:

• It should call the /authentications API
• It should pass the response to the caller when the request succeeded
• It should propagate the error to the caller when the request failed

The first test is to make sure the authentication service will call the correct API. The other two are the same as we have in the specification of the registration service, which are used to make sure the authentication service passes results and propagates errors to its caller.

The tests we will create in LoginPage.spec.js include the following:

• It should render the login form
• It should contain the data model with initial values
• It should have form inputs bound with the data model
• It should have a form submit event handler, submitForm
• It should succeed when credentials are valid
• It should fail when credentials are invalid
• It should have validation to prevent invalid data submission

We will also need to create a mock of the authentication service and a blank home page that users will be redirected to after logging in. We will also need to refactor RegisterPage.vue to extract the logo part and the footer as standalone components so that they can be shared with the login page.

Since all of the items mentioned before are similar to what we built for the register page, we will just skip the details here. You can check the commit record to find out more. The following is the commit record: