At this moment, our registration form is ready to receive input and handle the submit. We can move forward to implement the logic of sending data the backend, which starts from the submitForm() method. Inside this method, we could use the HTTP client, axios, directly to do the heavy lifting, as we already introduced in Chapter 3, Spring 5 - The Right Stack for the Job at Hand. This time, we will use it differently. We will create a service called registrationService in the frontend/src/services/registration/index.js file to wrap the details of how to send HTTP requests using axios. The benefit of doing this is that we hide the implementation of the communication with the server from RegisterPage.vue so that, once we need to change something related to sending HTTP requests that RegisterPage.vue doesn't need to be aware of, we can isolate those changes inside registrationService, preventing them from ripping out of the service.

Inside the submitForm() method, we will call the registrationService.register() method with the vm.form object. Once the registration succeeds, we will redirect the user to the Login page. When it fails, we will display an error message above the form in the UI.

Now, we're clear on what need to implement. Let's think about what we need to test. There are mainly two parts: the submitForm() method and the registrationService.register() method. Let's start with the first one.