Now, if you run the npm test command, you can see we have a failed test. Let's write RegisterPage.vue to make the test pass.

The following code is the <template> section of RegisterPage.vue. Some details are excluded here for the sake of brevity:

<template>
  <div class="container">
    <div class="row justify-content-center">
      <div class="register-form">
        <div class="logo-wrapper">...</div>
        <form>
          <div class="form-group"></div>
          <div class="form-group"></div>
          <div class="form-group"></div>
          <button type="submit" class="btn btn-primary btn-block">
          </button>
          ... 
        </form>
      </div>
    </div>
    <footer class="footer">
      <span class="copyright">...</span>
      <ul class="footer-links list-inline float-right">...</ul>
    </footer>
  </div>
</template>

As you can see, in order to keep the content inside the .row element in the center, we use the .justify-content-center class, which is another utility class of Bootstrap. Inside <form>, we add the .form-group class to the wrapper of each field. In this way, Bootstrap will organize the padding and margin of these fields nicely for us. In the footer, we use span with the .copyright class. <span> fits here very well because the copyright information is just text displayed inline, which is the default style of <span> tags. We use <ul> for the footer links because they are essentially a list of unordered items that are displayed horizontally. Bootstrap's .list-inline works perfectly for this scenario. With the help of .float-right class, we can pull the list to the right side easily.

The following is the custom style that we need to add to the <style> section of RegisterPage.vue. The following listing only include those structure-related styles, reformatted into one line for each class:

<style lang="scss" scoped>
.container {max-width: 900px;}
.register-form {margin-top: 50px; max-width: 320px;}
.logo-wrapper {margin-bottom: 40px;}
.footer {width: 100%; line-height: 40px; margin-top: 50px; }
</style>

As you can see, we set the maximum width of the container to 900 pixels and .register-form to 320 pixels. We use margins in these structure classes to keep elements apart from each other. Now, let's run npm test and, as you will see, we have a green result. The last thing that we need to do is to add RegisterPage.vue to router at the /register path. The details of this step won't be covered in this book. You can find them in the code commit record, along with other details of the register page that we have skipped.

By now, we have covered most of creating the UI of the register page. As you can see, we utilized a lot of Bootstrap's built-in classes, which improved our productivity. Let's run the mvn clean install command to make sure there are no code breaks introduced accidentally before we commit the code. As you can see, we have a successful build. Figure 9.3 is the commit record: