Tutorial

How To Build a Lightweight Invoicing App with Node: User Interface

By Chris Nwamba
PostedDecember 12, 2019

While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or edited it to ensure you have an error-free learning experience. It's on our list, and we're working on it! You can help us out by using the "report an issue" button at the bottom of the tutorial.

Introduction

In the first part of this series, you set up the backend server for the invoicing application. In this tutorial you will build the part of the application that users will interact with, known as the user interface.

Prerequisites

To follow through this article, you’ll need the following:

Node installed on your machine
NPM installed on your machine
Have read through the first part of this series.

Step 1 — Installing Vue

To build the frontend of this application, you’ll be using Vue. Vue is a progressive JavaScript framework used for building useful and interactive user interfaces. To install Vue, run the following command:

npm install -g vue-cli

To confirm your Vue installation, run this command:

vue --version

The version number will be returned if Vue is installed.

Step 2 — Creating the Project

To create a new project with Vue, run the following command and then follow the prompt:

vue init webpack invoicing-app-frontend

This creates a sample Vue project that we’ll build upon in this article.

For the frontend of this invoicing application, a lot of requests are going to be made to the backend server. To do this, we’ll make use of axios. To install axios, run the command in your project directory:

npm install axios --save

To allow some default styling in the application, you will make use of Bootstrap. To add it to your application, add the following to the index.html file in the project:

index.html

    ...
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
    ...
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"crossorigin="anonymous"></script>
    ...

Step 3 — Configuring Vue Router

For this application, you are going to have two major routes:

/ to render the login page
/dashboard to render the user dashboard

To configure these routes, open the src/router/index.js and update it to look like this:

src/router/index.js


import Vue from 'vue'
import Router from 'vue-router'
import SignUp from '@/components/SignUp'
import Dashboard from '@/components/Dashboard'
Vue.use(Router)
export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'SignUp',
      component: SignUp
    },
    {
      path: '/dashboard',
      name: 'Dashboard',
      component: Dashboard
    },
  ]
})

This specifies the components that should be displayed to the user when they visit your application.

Step 4 — Creating Components

One of the major selling points of Vue is the component structure. Components allow the frontend of your application to be more modular and reusable. This application will have the following components:

Sign Up/Sign In
Header
Navigation
Dashboard
View Invoices
Create Invoice
Single Invoice

The Navigation component is the sidebar that will house the links of different actions. Create a new component in the /src/components directory:

touch SideNav.vue

Now, edit the SideNav.vue like this:

src/components/SideNav.vue


<script>
export default {
  name: "SideNav",
  props: ["name", "company"],
  methods: {
   setActive(option) {
      this.$parent.$parent.isactive = option;
    },
    openNav() {
      document.getElementById("leftsidenav").style.width = "20%";
    },
    closeNav() {
      document.getElementById("leftsidenav").style.width = "0%";
    }
  }
};
</script>

...

The component is created with two props: the name of the user and the name of the company. The two methods add the collapsible functionality to the sidebar. The setActive method will update the component calling the parent of the SideNav component, in this case Dashboard, when a user clicks on a navigation link.

The component has the following template:

src/components/SideNav.vue

...
  <template>
    <div>
        <span style="font-size:30px;cursor:pointer" v-on:click="openNav">&#9776;</span>
        <div id="leftsidenav" class="sidenav">
            <p style="font-size:12px;cursor:pointer" v-on:click="closeNav"><em>Close Nav</em></p>
            <p><em>Company: {{ company }} </em></p>
            <h3>Welcome, {{ name }}</h3>
            <p class="clickable" v-on:click="setActive('create')">Create Invoice</p>
            <p class="clickable" v-on:click="setActive('view')">View Invoices</p>
        </div>
    </div>
</template>
...

The Header component displays the name of the application and side bar if a user is signed in. Create a Header.vue file in the src/components directory:

touch Header.vue

The component file will look like this:

src/components/Header.vue

<template>
    <nav class="navbar navbar-light bg-light">
        <template v-if="user != null">
            <SideNav v-bind:name="user.name" v-bind:company="user.company_name"/>
        </template>
        <span class="navbar-brand mb-0 h1">{{title}}</span>
    </nav>
</template>
<script>
import SideNav from './SideNav'
export default {
  name: "Header",
  props : ["user"],
  components: {
    SideNav
  },
  data() {
    return {
      title: "Invoicing App",
    };
  }
};
</script>

The header component has a single prop called user. This prop will be passed by any component that will use the header component. In template for the header, the SideNav component created earlier is imported and conditional rendering is used to determine if the SideNav should be displayed or not.

The SignIn component houses the sign up and sign in form. Create a new file in /src/components directory:

touch SignIn.vue

The component to register and login a user is a little more complex than the two earlier components. The app needs to have the login and register forms on the same page.

First, create the component:

src/components/SignIn.vue

<script>
import Header from "./Header";
import axios from "axios";
export default {
  name: "SignUp",
  components: {
    Header
  },
  data() {
    return {
      model: {
        name: "",
        email: "",
        password: "",
        c_password: "",
        company_name: ""
      },
      loading: "",
      status: ""
    };
  },
  ...

The Header component is imported and the data properties of the components are also specified. Next, create the methods to handle what happens when data is submitted:

src/components/SignIn.vue

  ...
  methods: {
    validate() {
      // checks to ensure passwords match
      if( this.model.password != this.model.c_password){
        return false;
      }
      return true;
    },
    ...

The validate() method performs checks to make sure the data sent by the user meets our requirements.

src/components/SignIn.vue

...
register() {
const formData = new FormData();
let valid = this.validate();
if(valid){
formData.append("name", this.model.name);
formData.append("email", this.model.email);
formData.append("company_name", this.model.company_name);
formData.append("password", this.model.password);

this.loading = "Registering you, please wait";
// Post to server
axios.post("http://localhost:3128/register", formData).then(res => {
  // Post a status message
  this.loading = "";
  if (res.data.status == true) {
    // now send the user to the next route
    this.$router.push({
      name: "Dashboard",
      params: { user: res.data.user }
    });
  } else {
    this.status = res.data.message;
  }
});
  }else{
alert("Passwords do not match");
  }
},
...

The register method of the component handles the action when a user tries to register a new account. First, the data is validated using the validate method. Then if all criteria are met, the data is prepared for submission using the formData.

We’ve also defined the loading property of the component to let the user know when their form is being processed. Finally, a POST request is sent to the backend server using axios. When a response is received from the server with a status of true, the user is directed to the dashboard. Otherwise, an error message is displayed to the user.

src/components/SignIn.vue

  ...
  login() {
  const formData = new FormData();
  formData.append("email", this.model.email);
  formData.append("password", this.model.password);
  this.loading = "Signing in";
  // Post to server
  axios.post("http://localhost:3128/login", formData).then(res => {
    // Post a status message
    this.loading = "";
    if (res.data.status == true) {
      // now send the user to the next route
      this.$router.push({
        name: "Dashboard",
        params: { user: res.data.user }
      });
    } else {
      this.status = res.data.message;
    }
  });
}
  }
};
</script>

Just like the register method, the data is prepared and sent over to the backend server to authenticate the user. If the user exists and the details match, the user is directed to their dashboard.

Now, take a look at the template for the SignUp component:

src/components/SignUp.vue

   <template>
   ...
   <div class="tab-pane fade show active" id="pills-login" role="tabpanel" aria-labelledby="pills-login-tab">
  <div class="row">
  <div class="col-md-12">
      <form @submit.prevent="login">
          <div class="form-group">
              <label for="">Email:</label>
              <input type="email" required class="form-control" placeholder="eg chris@invoiceapp.com" v-model="model.email">
          </div>

          <div class="form-group">
              <label for="">Password:</label>
              <input type="password" required class="form-control" placeholder="Enter Password" v-model="model.password">
          </div>

          <div class="form-group">
              <button class="btn btn-primary" >Login</button>
              {{ loading }}
              {{ status }}
          </div>
      </form> 
  </div>
  </div>
  </div>
  ...

The login in form is shown above and the input fields are linked to the respective data properties specified when the components were created. When the submit button of the form is clicked, the login method of the component is called.

Usually, when the submit button of a form is clicked, the form is submitted via a GET or POST request. Instead of using that, we added <form @submit.prevent="login"> when creating the form to override the default behavior and specify that the login function should be called.

The register form also looks like this:

src/components/SignIn.vue

  ...
<div class="tab-pane fade" id="pills-register" role="tabpanel" aria-labelledby="pills-register-tab">
  <div class="row">
  <div class="col-md-12">
      <form @submit.prevent="register">
          <div class="form-group">
              <label for="">Name:</label>
              <input type="text" required class="form-control" placeholder="eg Chris" v-model="model.name">
          </div>
          <div class="form-group">
              <label for="">Email:</label>
              <input type="email" required class="form-control" placeholder="eg chris@invoiceapp.com" v-model="model.email">
          </div>

          <div class="form-group">
              <label for="">Company Name:</label>
              <input type="text" required class="form-control" placeholder="eg Chris Tech" v-model="model.company_name">
          </div>
          <div class="form-group">
              <label for="">Password:</label>
              <input type="password" required class="form-control" placeholder="Enter Password" v-model="model.password">
          </div>
          <div class="form-group">
              <label for="">Confirm Password:</label>
              <input type="password" required class="form-control" placeholder="Confirm Passowrd" v-model="model.confirm_password">
          </div>
          <div class="form-group">
              <button class="btn btn-primary" >Register</button>
              {{ loading }}
              {{ status }}
          </div>
      </form>
  </div>
  </div>
  ...
</template>

The @submit.prevent is also used here to call the register method when the submit button is clicked.

Now, run your development server using this command:

npm run dev

Visit localhost:8080/ on your browser to see the newly created login and sign up page.

The Dashboard component will be displayed when the user gets routed to the /dashboard route. It displays the Header and the CreateInvoice component by default. Create the Dashboard.vue file in the src/components directory

touch Dashboard.vue

Edit the file to look like this:

src/component/Dashboard.vue

<script>
import Header from "./Header";
import CreateInvoice from "./CreateInvoice";
import ViewInvoices from "./ViewInvoices";
export default {
  name: "Dashboard",
  components: {
    Header,
    CreateInvoice,
    ViewInvoices,
  },
  data() {
    return {
      isactive: 'create',
      title: "Invoicing App",
      user : (this.$route.params.user) ? this.$route.params.user : null
    };
  }
};
</script>
...

Above, the necessary components are imported and rendered based on the template below:

src/component/Dashboard.vue

...
<template>
  <div class="container-fluid" style="padding: 0px;">
    <Header v-bind:user="user"/>
    <template v-if="this.isactive == 'create'">
      <CreateInvoice />
    </template>
    <template v-else>
      <ViewInvoices />
    </template>
  </div>
</template>

The CreateInvoice component contains the form needed to create a new invoice. Create a new file in the src/components directory:

touch CreateInvoice.vue

Edit the CreateInvoice component to look like this: