| @ -0,0 +1,170 @@ | |||||
| package mx.gob.jumapacelaya.views.login; | |||||
| import com.vaadin.flow.component.Key; | |||||
| import com.vaadin.flow.component.button.Button; | |||||
| import com.vaadin.flow.component.button.ButtonVariant; | |||||
| import com.vaadin.flow.component.dependency.CssImport; | |||||
| import com.vaadin.flow.component.html.H2; | |||||
| import com.vaadin.flow.component.html.Image; | |||||
| import com.vaadin.flow.component.icon.VaadinIcon; | |||||
| import com.vaadin.flow.component.notification.Notification; | |||||
| import com.vaadin.flow.component.notification.NotificationVariant; | |||||
| 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.BeforeEnterEvent; | |||||
| import com.vaadin.flow.router.BeforeEnterObserver; | |||||
| import com.vaadin.flow.router.PageTitle; | |||||
| import com.vaadin.flow.router.Route; | |||||
| import com.vaadin.flow.server.auth.AnonymousAllowed; | |||||
| import jakarta.servlet.ServletException; | |||||
| import jakarta.servlet.http.HttpServletRequest; | |||||
| import org.springframework.beans.factory.annotation.Autowired; | |||||
| import java.util.regex.Pattern; | |||||
| @Route("iniciarSesion") | |||||
| @PageTitle("IniciarSesion") | |||||
| @AnonymousAllowed | |||||
| @CssImport("./themes/soportet.iv1.2/styles.css") | |||||
| public class Login extends VerticalLayout implements BeforeEnterObserver { | |||||
| private final HttpServletRequest request; | |||||
| @Autowired | |||||
| public Login(HttpServletRequest request) { | |||||
| this.request = request; | |||||
| addClassName("login-rich-content"); | |||||
| setSizeFull(); | |||||
| setAlignItems(Alignment.CENTER); | |||||
| setJustifyContentMode(JustifyContentMode.CENTER); | |||||
| setPadding(false); | |||||
| HorizontalLayout mainLayout = new HorizontalLayout(); | |||||
| mainLayout.setSizeFull(); | |||||
| mainLayout.setPadding(false); | |||||
| mainLayout.setMargin(false); | |||||
| Image logo = new Image("images/bckgndNvo.png", "Fondo Nvo color"); | |||||
| logo.addClassName("login-logo"); | |||||
| Pattern emailPattern = Pattern.compile("^[\\w\\.-]+@[\\w\\.-]+\\.[a-z]{2,}$", Pattern.CASE_INSENSITIVE); | |||||
| H2 title = new H2("Mesa de Ayuda JUMAPA Celaya"); | |||||
| title.getStyle().set("width", "90%"); | |||||
| title.getStyle().set("margin-top", "10px"); | |||||
| title.getStyle().set("color", "#691b31"); | |||||
| Button loginButton = new Button("Iniciar Sesión", VaadinIcon.SIGN_IN.create()); | |||||
| loginButton.addThemeVariants(ButtonVariant.LUMO_PRIMARY); | |||||
| loginButton.getStyle().set("width", "80%"); | |||||
| loginButton.addClickShortcut(Key.ENTER); | |||||
| TextField username = new TextField("Usuario"); | |||||
| username.getStyle().set("width", "80%"); | |||||
| username.addValueChangeListener(event -> { | |||||
| String value = event.getValue(); | |||||
| if (emailPattern.matcher(value).matches()) { | |||||
| username.setInvalid(true); | |||||
| username.setErrorMessage("No se permite ingresar un correo electrónico, solo nombres de usuario"); | |||||
| loginButton.setEnabled(false); | |||||
| } else { | |||||
| username.setInvalid(false); | |||||
| username.setErrorMessage(null); | |||||
| loginButton.setEnabled(true); | |||||
| } | |||||
| }); | |||||
| username.setClearButtonVisible(true); | |||||
| username.setRequired(true); | |||||
| username.setInvalid(false); | |||||
| PasswordField password = new PasswordField("Contraseña"); | |||||
| password.getStyle().set("width", "80%"); | |||||
| password.setRequired(true); | |||||
| VerticalLayout fieldLayout = new VerticalLayout(); | |||||
| fieldLayout.add(title, username, password, loginButton); | |||||
| fieldLayout.setAlignItems(Alignment.CENTER); | |||||
| fieldLayout.setJustifyContentMode(JustifyContentMode.CENTER); | |||||
| fieldLayout.setPadding(true); | |||||
| fieldLayout.getStyle().set("background-color", "#ddc9a3"); | |||||
| fieldLayout.getStyle().set("border-radius", "30px"); | |||||
| fieldLayout.getStyle().set("height", "300px"); | |||||
| fieldLayout.getStyle().set("width", "300px"); | |||||
| VerticalLayout formContainer = new VerticalLayout(); | |||||
| Image imageLogin = new Image("images/JUMAPA_NVO.png", "logo"); | |||||
| imageLogin.setWidth("300px"); | |||||
| formContainer.add(imageLogin, fieldLayout); | |||||
| formContainer.setSizeUndefined(); | |||||
| formContainer.setPadding(true); | |||||
| formContainer.setMargin(false); | |||||
| formContainer.setAlignItems(Alignment.CENTER); | |||||
| formContainer.setJustifyContentMode(JustifyContentMode.CENTER); | |||||
| formContainer.getElement().getThemeList().add("dark"); | |||||
| mainLayout.add(formContainer, logo); | |||||
| mainLayout.setFlexGrow(1, formContainer); | |||||
| mainLayout.setFlexGrow(2, logo); | |||||
| loginButton.addClickListener(e -> { | |||||
| boolean valid = true; | |||||
| if (username.isEmpty()) { | |||||
| username.setInvalid(true); | |||||
| valid = false; | |||||
| } else { | |||||
| username.setInvalid(false); | |||||
| } | |||||
| if (password.isEmpty()) { | |||||
| password.setInvalid(true); | |||||
| valid = false; | |||||
| } else { | |||||
| password.setInvalid(false); | |||||
| } | |||||
| if (!valid) { | |||||
| Notification notification = new Notification("Por favor, completa todos los campos requeridos."); | |||||
| notification.addThemeVariants(NotificationVariant.LUMO_ERROR); | |||||
| notification.setDuration(3000); | |||||
| notification.setPosition(Notification.Position.MIDDLE); | |||||
| notification.open(); | |||||
| return; | |||||
| } | |||||
| try { | |||||
| request.login(username.getValue(), password.getValue()); | |||||
| getUI().ifPresent(ui -> ui.navigate("")); | |||||
| } catch (ServletException ex) { | |||||
| Notification notification = new Notification("!Usuario o Contraseña incorrectos, verifica tus datos!"); | |||||
| notification.addThemeVariants(NotificationVariant.LUMO_ERROR); | |||||
| notification.setDuration(3000); | |||||
| notification.setPosition(Notification.Position.MIDDLE); | |||||
| notification.open(); | |||||
| } | |||||
| }); | |||||
| add(mainLayout); | |||||
| } | |||||
| @Override | |||||
| public void beforeEnter(BeforeEnterEvent event) { | |||||
| if (event.getLocation() | |||||
| .getQueryParameters() | |||||
| .getParameters() | |||||
| .containsKey("error")) { | |||||
| } | |||||
| } | |||||
| } | |||||