Similar to how we went about implementing the user registration view, first and foremost we must work on the view template. The template required for the login view must possess a form that takes the username and password of the user to be logged in as input. We must also provide a button that facilitates the submission of the login form—after all, there is no point having a form if it cannot be submitted. In addition, we must have a means of alerting the user if something goes wrong with the login process, such as in a scenario where the user enters an invalid username and password combination. Lastly, we should provide a link to the account registration page for situations where the viewer of the login page does not already possess an account.
Having identified what is needed from the template to be implemented, let's go ahead with creating it. Add a login.html file to the template directory. Now, it is time to work on the template. As always, we must first include the necessary stylesheets and scripts to the template. This is done in the following code snippet:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<title>Login</title>
<link rel="stylesheet" th:href="@{/css/app.css}"/>
<link rel="stylesheet"
href="/webjars/bootstrap/4.0.0-beta.3/css/bootstrap.min.css"/>
<script src="/webjars/jquery/3.2.1/jquery.min.js"></script>
<script src="/webjars/bootstrap/4.0.0-beta.3/
js/bootstrap.min.js"></script>
</head>
<body>
</body>
</html>
Having added the style and JavaScript includes necessary for the template, we can now work on the <body> of the template. As we have said before, the body of an HTML template contains the DOM elements that will be rendered to the user upon page load. Add the following code within the <body> tag of login.html:
<div th:insert="fragments/navbar :: navbar"></div>
<div class="container-fluid" style="z-index: 2; position: absolute">
<div class="row mt-5">
<div class="col-sm-4 col-xs-2"></div>
<div class="col-sm-4 col-xs-8">
<form class="form-group col-sm-12 form-vertical form-app"
id="form-login" method="post" th:action="@{/login}">
<div class="col-sm-12 mt-2 lead text-center text-primary">
Login to your account
</div>
<hr>
<input class="form-control" type="text" name="username"
placeholder="Username" required/>
<input class="form-control mt-2" type="password"
name="password" placeholder="Password" required/>
<span th:if="${param.error}" class="mt-2 text-danger"
style="font-size: 10px">
Invalid username and password combination
</span>
<button class="btn btn-primary form-control mt-2 mb-3"
type="submit">
Go!
</button>
</form>
<div class="col-sm-12 text-center" style="font-size: 12px">
Don't an account? Register <a href="/register">here</a>
</div>
</div>
<div class="col-sm-4 col-xs-2">
<div th:if="${param.logout}"
class="col-sm-12 text-success text-right">
You have been logged out.
</div>
</div>
</div>
</div>
With the body added, the HTML we have created sufficiently describes the required structure of our login page. Along with adding the required form, we added the navigation bar fragment created earlier to the page—no need to write boilerplate code. We also added a means by which a user can be provided feedback pertaining to errors that may arise in the login process. This was done with the following lines:
<span th:if="${param.error}" class="mt-2 text-danger"
style="font-size: 10px">
Invalid username and password combination
</span>
When param.error is set, it signifies that an error has occurred during user login, so an Invalid username and password combination message is shown to the user. Something to keep in mind is that besides the login page often being the first point of contact a user has with a web application, it can also be a user's last point of contact with the app during an interaction session. This is particularly true in the case of user logouts. After a user is done interacting with an application and logs out, they should be redirected to a login screen. As a result of such a possibility, we added some text to notify a user that they've been logged out:
<div th:if="${param.logout}" class="col-sm-12 text-success text-right">
You have been logged out.
</div>
The <div> tag is displayed to a user after a successful logout from their account. At this point, ideally we should implement a controller to render login.html but if you recall, we have already done so with the use of a custom Spring MVC configuration via our implemented MvcConfig class, specifically in the section of code shown here:
...
override fun addViewControllers(registry: ViewControllerRegistry?) {
registry?.addViewController("/login")?.setViewName("login")
}
...
We made use of a ViewControllerRegistry instance to add a view controller that handles requests to /login and set the view to be used to the just-implemented login template. Build and run the application to view the newly implemented view. The web page can be accessed via http:localhost:5000/login:
Trying to log in with invalid user credentials will present us with a nice error message:
On the other hand, attempting to log in with valid credentials takes us to the application's home page. Speaking of the home page, we need to work on completing its view layer. We are going to need to work directly with the Google Places API from this point onward. As such, we must set up our application to do so before proceeding.