Part 2: SignUp and SignIn for E-Commerce App
We will now create the front-end of a very important feature in every e-Commerce site — Sign In & Sign Up, using Vue.Js
In the previous tutorial, we added the Sign In & Sign Up API to our Spring Boot backend. Now, let’s learn how to use this API in our front-end.
You can see the Sign In & Sign Up API (integrated with Vue.Js) live in action at the link mentioned below. You will be able to experience this feature if you click on the buttons — Sign In OR Sign Up.
Webtutsplus E-commerce APP
- Knowledge about Vue.Js & Vue.Js CLI
- Code Editor (like Microsoft Visual Code with Veture extension)
- A good browser (like Google Chrome)
Since this tutorial is based on the work we have done so far, it is recommended to go through the following tutorials as well.
We will now describe the following directories:-
- public — contains the main HTML file of our project
- src/assets — stores the media files like images, logos, etc.
- src/components — stores all the reusable components of our project. These components are not unique to some specific route.
- src/router — contains the index.js file which keeps a record of all the routes
- src/views — stores all the router components. These are the components that are rendered as per the current route.
Apart from this, we have some important files too
- App.vue — it is the root component of our project
- main.js — it is the starting point of our project. Here we import our root component App.vue, our router file index.js and createApp method. After this, we mount our root component to the DOM using the following statement:
We designed the WishList API for our backend in the previous tutorial. You can try this API using the following Swagger link.
If you have not read the previous tutorial, do not worry. We will now describe this API so that you can feel comfortable when we use the API in our front-end.
Following are the API end-points to
- Get a list of all the users
- Sign In with username and password
- Sign Up and create a username and password
- Note that the response returns a token. We must save this token to a gobal object because other API End-points like Wishlist API End-point might use this token to recognise the user.
Before we begin to write code, it is very important that we have a very clear picture of what we are going to do. So, let’s discuss this.
- We are going to create separate SignUp, SignIn, and Admin pages.
- The admin page will be restricted to the logged in users. If someone tries to access the Admin page without logging into the system, she/he will be redirected back to the Login page.
- To easily access Admin and Login pages, we’ll put two links in the top navigation bar.
- Also, we’ll link the Login and Signup pages with each other by placing a link at the bottom of each page.
We will now begin to write code.
Even if we can create Vue.js components manually, it is easy to use a component generator. We will use the package called
vue-generate-component for generating Vue.js components. Install
vue-generate-component package with the following command.
npm install -g vue-generate-component
vue-generate-component package, generate three components for Signup, Signin, and Admin page. We’ll use
vgc command with
-s flag for generating Vue Single File Components (SFC).
vgc -s Admin
vgc -s Signup
vgc -s Signin
Now, you will get three blank Vue component files under the
views folder containing a code block similar to the following.
Once we have created the components, you need to make them accessible by creating routes for each component. Open the
src/router/index.js file and add the following routes under the
Start the development server by either executing the following command from the root of the project folder or clicking on the small run button in front of the
npm run serve
Now you should be able to navigate to the components we have created in the previous step with the following URLs.
Let’s begin with the Sign-Up form first. Now we have blank components for each page. Let’s design our sign-up page first. It will contain a form with the required fields for user signup. Modify your
Signup.vue component as following code block.
Since we are using Bootstrap in our application, this will render with default bootstrap styles. The
required attribute in each form element will trigger HTML5 form validations before submitting the form.
Note that we have defined our data in the component and linked each form field to the corresponding data field using the
v-model directive. The
v-model directive is used to create two-way data binding.
- Same is true for the other way around, i.e. Any data changes in the model are immediately propagated to the matching view(s).
- In simple words, whenever application data changes, the UI also changes and vice-versa.
Ok, let’s get back to the tutorial. Now if we run the application and navigate to http://localhost:8080/signup, you will see a UI similar to the following.
Now that we have made the form, we need to submit its data to the server. To do that we have to call
/user/signupbackend API with the data filled in UI. We will call the API (i.e. submit the form) when the user clicks the “Signup” button.
After the user clicks the sign up button, it will validate the password with the confirm-password field and if the values are equal, proceed to the API call. Once you have signed up successfully, the page will be redirected to the Home page and will display a success message.
Let’s add a separate method for Calling the API. Modify the methods section under
<script> tag as follows.
Note the following:-
- We are using
axioslibrary to make the API call.
swalis a function similar to
e.preventDefault()function is called to avoid the default behavior which is submitting the form and refresh the page when the user clicks on the “Submit” button.
Now we have to call this function whenever the user submits the form, either by clicking on the “Submit” button or pressing the “Enter” key. This can be done by adding
v-on:submit directive to the form element as follows
You said we’ll use
v-on:submit. Isn’t it?
Yes, of course.
@submit is a shorthand for
v-on:submit. While v- prefix provides a visual cue for Vue.js specific attributes in our templates, it can be verbose for some frequently used directives. Therefore, Vue provides special shorthands for v-on and v-bind directives since those are the most often used directives. @ for
v-on and : for
Now we can fill the form and sign-up users successfully. But as you can see
[http://remotedevs.org:8080/api/](http://remotedevs.org:8080/api/) part of the URL is hardcoded in the component and possibly repeated the same in many other components as well. As a best practice, we will move this base URL to a common place, so that it’s easy to modify it, in case if the API host is changed in the future.
App.vue component is the base component for all other components, let’s define our base URL in that file. Add the following code block to the
App.vue component if it is not already there.
Then we can bind this value to a property of
<router-view>element. As we mentioned in the previous tutorials, this
<router-view>element will be replaced with the relevant components according to the router definitions. Therefore, this
baseURLproperty will be available in any components which will be replaced by the router. Note that we have used
:shorthand instead of
v-bindwhich is explained previously.
Now we can use this property in our
Signup.vuecomponent. Define the
Signup.vuecomponent to match with the bonded value in previous step and modify the URL to use that value.
Now our signup page is completed. Let’s design and implement the login functionality.
Now that our sign up page is up and running, let’s begin implementing the login page for our app. The login page should contain two input fields for entering email and password. To create the HTML template, open
Signin.vue component and modify it as following code block.
Now run the application and navigate to
[thehttp://localhost:8080/signin.](http://localhost:8080/signin)Then you will see an UI similar to the following.
We have now created the form for Sign In. Now we have to call
user/signInbackend API with the login data when the user clicks on the “Signin” button. Modify the
<script>tag as follows to add a separate method for that.
- If you could not understand the purpose of
localStorage.setItem(), do not worry. We will explain it later in the article.
sigin function should be called whenever the user submits the form. This can be done by adding
v-on:submit directive to the form element as follows. Now, if you fill the form with correct login details and hit “Signin” button, you will see a success alert.
Now if you look at the signin API call response body, you will see that there is a unique token issued for an every successful login session. We have to use this token in subsequent calls to access secured API resources. That means we have to store this token somewhere in our application for later usage. So, here comes the use of local storage.
There is an implementation called
localStorage is a map like implementation which allows saving key-value pairs.
Once we have received the token from the API, we will store it in the
localStorage.setItem() method. And then user should be redirected back to the previous router location. This can be done by replacing the signin success alert with the following code block.
Now try to sign in from the UI and check the “Application” tab of the web browser developer console. You can see our token is saved to the local storage.
The signin page is now almost completed. Let’s add one more element, a loading spinner! We will add a spinner icon which will be showed upon clicking on the “Signin” button and will be dismissed after receiving the signin response from backend server.
Modify the “Signin” button HTML code,
mounted() function and
style section as follows
The loading spinner visibility will be set to
truewhen it starts to make the backend API call. Note that we have used the
finally()block to stop the spinner and
mounted()method to specify the default behavior of spinner while loading the page.
Now we will add an admin page and restrict it only to the logged in users. Modify your
Admin.vue component with following code block to
mounted()function we have checked the value of
tokenwhich is stored in the
localStoragewhile signing in. Now if you try to access Admin page without signing in, you will be redirected to the signin page. The
$router.push()command is used to navigate the user to the signin page instead of the
$router.replace()method. This will allow the user to redirect back to the same page after logging into the system.
We have almost finished the signup and signin functionalities in our e-commerce app. Let’s add the navigation links to the navigation bar at the top of the screen. Open your
Navbar.vue file and modify the
template as shown below.
This will add the “ADMIN” and “SIGNIN” navigation links to the top navigation bar as below.
Okay, as you can see, one important feature is still missing from our application. There should be a way to sign out after signing in. Also, The sign out link should be appear only after signing in and the sign in link should be hidden at the same time. This can be done by checking the existence of the token while rendering the Navbar.vue component.
Note that we have defined a
signout()method and bind it to the “SIGNOUT” navigation link. We are removing the
localStorageso that user will not be signed in anymore.
Now, try to sign out and sign in again. You will notice a little bug there. The “SIGNIN” link will not be replaced by the “SIGNOUT” link as soon as you signed in to the system. You have to manually refresh the page. Let’s fix this!. Open the App.vue component and modify it as following code block.
We have added a component
keyto the navigation component and define a method called
refreshNav()to change that key. The trick is change the component properties so that the component will be reloaded at the run time. Then use
signin()method in the
Signin.vuecomponent to call this method as soon as user gets logged in as shown in the following code block.
Now let’s add links to each other in Signup and Signin pages so that the users can easily navigate between these components. To do that, modify the
template of each page as follows.
The above code will cause the following change in the UI.
You have now successfully added the Wishlist feature in your Vue.Js frontend. It was a really long and challenging task. Congratulations on completing the tutorial.
The complete code can be found in this GitHub repository