Design UI Pages With JSF. Hello, dear friends. In this video, we will design a simple user interface for the user info service. The UI part will include a login page, a knowledge presentation page, and an error notification page. Okay, let's start with the login page. Create a new XHTML file. Here, I will place a form. I'll give the form a name. There will be a username and a password field. I will bind them to the loginBean class. Action will be bound to doLogin() method in the loginBean class. Okay, we finished the login page. Now I will design the Representation page. Create a new XHTML file. First, I will place a logoutButton at the top of the page. When a user logs out, they are sent to the login page. Okay, now I'm creating a table. It will include username, operating system name, roles info, and JWT info.

We will get information from the applicationBean class. Now, I will create a page for errors. It will be presented to user when a wrong username or a password is entered. Create a new XHTML page. Write some basic notifications.

All right, well done. We designed our sample UI. It's our turn to adjust our web.xml file. I will add the FacesServlet tag, and now I am adding servlet-mapping. Okay, added required configs. Let's run the application and look at it. Okay, as you can see, our page has appeared but it doesn't have the required functionality now. We need to make some security adjustments, both on system and user services. But that's all for now. We'll do that in the next lesson. So, I'll see you there dear friends.