Dantesque Vaadin: 16. Vaadin LoginForm (1). Basic components

updated on April 16, 2019

0. Introduction

A simple login form can have basically:

A user name input field
A password input field
A submit button
A component for showing messages
A component for selecting the language

We are calling this class "LoginForm" and this name must be the same as the one defined in then openadmin.listeners.LoggedInListener class for redirecting to the user that has not been logged in. See this previous post.

1. Designing the visual interface

Here is a simple sketch of the login form

+---------------------------------------------------------+
| +--------+ |
| | LOGO | 1 ENTERPRISE NAME |
| | | |
| +--------+ |
+---------------------------------------------------------+
| +---------------------------+ |
| 2 | Language selector combo | |
| +---------------------------+ |
+---------------------------------------------------------+
| 3 |
| +-------------------+ |
| User: | | |
| +-------------------+ |
| |
| |
| +-------------------+ |
| Password: | | |
| +-------------------+ |
| |
| +-------------------+ |
| | Login Button | |
| +-------------------+ |
| |

| +--------------------------------------------------+ |
| | Notification messages | |
| +--------------------------------------------------+ |
| |

+---------------------------------------------------------+

We are considering 3 containers indicated in yellow colour:

Header panel
Language selector panel
Login panel

2. Image resources

The image resources (photos of the enterprise) are in this folder. If not exists the route from webapp folder you should create it.

Deployed Resources/webapp/frontend/img/enterprise

The images are taken from a "Whatsapp group" and are a protest against the citriculture problems in Valencia (Spain). It is a simple example. The images are the same but have different size.

About the flag images, we have talked about in a previous entry. They are in this folder:

Deployed Resources/webapp/frontend/icon/flags

3. i18n resources

They are in this folder. If not exists i18n folder you should create it.

src/main/resources/i18n

There are 2 groups of resources:

login
main

the contents of the English version of login is:

user = User
password = Password
login = Login
invalid_credentials = Invalid credentials

and the contents of the English version of main is:

enterprise=The Death of Agriculture in Valencia

3. LoginForm component

Take into account that:

Is annotated by @Route("") as it is the first route Vaadin looks for.
Extends a VerticalLayout
Implements II18nChange (created in a previous post), to allow changing labels affected by the Locale. The method it implements is changeI18nLables()
It has 3 parts (header panel, language selector panel and login panel)
The language selector panel has a component that was created in the previous post that select the language and changes all labels content affected by the language change.
The login button executes the login() procedure to test if the user can log in.
The keyboard key "enter" also activates the login() procedure
If the user is logged in, it is redirected to a view that is annotated by @Route("main").
The valid user is "user" and the password is "password"

Here is the code

ackage openadmin.ui;

import javax.annotation.PostConstruct;
import javax.inject.Inject;

import com.vaadin.flow.component.Component;
import com.vaadin.flow.component.Html;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.html.Image;
import com.vaadin.flow.component.html.Label;
import com.vaadin.flow.component.icon.VaadinIcon;
import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.orderedlayout.FlexComponent;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.textfield.PasswordField;
import com.vaadin.flow.component.textfield.TextField;
import com.vaadin.flow.router.PageTitle;
import com.vaadin.flow.router.Route;

import openadmin.session.SessionData;
import openadmin.utils.VaadinUtils;


@Route("")
@PageTitle("Login")
@SuppressWarnings("serial")
public class LoginForm extends VerticalLayout implements II18nChange{
 private TextField userName;
 private PasswordField password;
 private Button login;
 private LocaleCombo langCombo;
 private Label lblUserName;
 private Label lblPassword;
 private Label lTitle;
 private Image imageLang;
 
 @Inject
 private SessionData sesData;
 
 public LoginForm() {
 }
 
 /**
  * Initialization of the 3 panels
  */
 @PostConstruct
 private void init() {
  add(getHeaderPanel());
  add(getLangSelectorPanel());
  add(getLoginPanel());
 }
 
 
 /** Enterprise header **/
 private HorizontalLayout getHeaderPanel() {
 
  HorizontalLayout headerPanel = new HorizontalLayout();
  
  
  Image logo = new Image("frontend/img/enterprise/enterprise04.jpg", "logo");
  headerPanel.setVerticalComponentAlignment(FlexComponent.Alignment.CENTER, logo);
  headerPanel.add(logo);
  
  HorizontalLayout title = new HorizontalLayout();
  title.setJustifyContentMode(FlexComponent.JustifyContentMode.CENTER);
  
  lTitle=new Label(getTranslation ("main.enterprise"));
  
  headerPanel.setVerticalComponentAlignment(FlexComponent.Alignment.CENTER, lTitle);
  title.add(lTitle);
  
  headerPanel.add(title);
  return headerPanel;
 }

 private HorizontalLayout getLangSelectorPanel() {
  
  HorizontalLayout langSelPanel = new HorizontalLayout();
  
  langSelPanel.setJustifyContentMode(FlexComponent.JustifyContentMode.END);
  
  // 1. Language ComboBox.
  langCombo = new LocaleCombo(sesData, this);
  
  langSelPanel.setVerticalComponentAlignment(FlexComponent.Alignment.CENTER, langCombo);
  langSelPanel.add(langCombo);
    
  // 2.Flag Icon
  imageLang = new Image("frontend/icon/flags/" + sesData.getLangEnum().name() + ".png", "language");
  //imageLang = new Image("frontend/icon/flags/" + lEnum.name() + ".png", "language");  // Jetty
  
  
  langSelPanel.setVerticalComponentAlignment(FlexComponent.Alignment.CENTER, imageLang);
  langSelPanel.add(imageLang);

  return langSelPanel;
 }
 
 private Component getLoginPanel() {
         
        VerticalLayout loginPanel= new VerticalLayout();
        VerticalLayout loginForm = new VerticalLayout();
  
        // 1. User
        lblUserName = new Label(getTranslation ("login.user"));
  userName=new TextField();
  userName.setValue("admin");
  loginForm.add(lblUserName, userName);
   
  //2. Password
  lblPassword = new Label(getTranslation("login.password"));
  password = new PasswordField();
  loginForm.add(lblPassword, password);
  password.setWidth("15em");
  
  //3. Line separation
  loginForm.add(new Html("<br/>"));
  
  //4. Buttons layout
  HorizontalLayout buttonsLay = new HorizontalLayout();
  buttonsLay.setJustifyContentMode(FlexComponent.JustifyContentMode.END);
  loginForm.add(buttonsLay);
  buttonsLay.add(login = new Button(getTranslation("login.login"), VaadinIcon.SIGN_IN.create()));
  
  //5. Login button
  login.addClickListener(event -> login()); //assign action to button
  
  //6 Keyboard event listeners 
  loginForm.getElement().addEventListener("keypress", event -> login()).setFilter("event.key == 'Enter'");
  loginPanel.setHorizontalComponentAlignment(FlexComponent.Alignment.CENTER, loginForm);
  loginPanel.add(loginForm);
  
  return loginPanel;
 }
 
 /**
  * Try to log in if credentials are correct 
  */
 private void login() {
  if (userName.getValue().length()<1 || password.getValue().length()<1) {
   showNotification("login.invalid_credentials", 2000);
   userName.focus();
  
  // user & password credentials 
  }else if (userName.getValue().equals("user") && password.getValue().equals("password")) {
   VaadinUtils.setSessionAttribute("CURRENT_USER", userName.getValue());
   getUI().get().navigate("main");
   
  }else {
   showNotification("login.invalid_credentials", 2000);
   userName.focus();
  }
 }

 /**
  * Show notification 
  * @param i18nKey
  * @param duration
  */
 public void showNotification(String i18nKey, int duration) {
  String translatedMessage=this.getTranslation(i18nKey);
  Notification not=new Notification(translatedMessage);
  not.setDuration(duration);
  not.open();
 }
 /**
  * Change labels according to Locale
  */
 @Override
 public void changeI18nLabels() {
  lTitle.setText(getTranslation ("main.enterprise"));
  lblUserName.setText(getTranslation("login.user"));
  lblPassword.setText(getTranslation("login.password"));
  login.setText(getTranslation("login.login"));
  imageLang.setSrc("frontend/icon/flags/" + sesData.getLangEnum().name() + ".png");
  //imageLang.setSrc("frontend/icon/flags/" + lEnum.name() + ".png");  //Jetty
 }
}

Here is the result in the browser

In the next post, we are adding style.

Dantesque Vaadin

lunes, 15 de abril de 2019

16. Vaadin LoginForm (1). Basic components

0. Introduction

1. Designing the visual interface

2. Image resources

3. LoginForm component

No hay comentarios:

Publicar un comentario