Search in sources :

Example 1 with EmailValidator

use of com.vaadin.flow.data.validator.EmailValidator in project komunumo-server by komunumo.

the class SpeakerDialog method createForm.

@Override
public void createForm(@NotNull final FormLayout formLayout, @NotNull final Binder<SpeakerRecord> binder) {
    final var firstName = new TextField("First name");
    final var lastName = new TextField("Last name");
    final var company = new TextField("Company");
    final var bio = new RichTextEditor();
    final var photo = new ImageUploadField("Photo");
    final var email = new EmailField("Email");
    final var twitter = new TextField("Twitter");
    final var linkedIn = new TextField("LinkedIn");
    final var website = new TextField("Website");
    final var address = new TextField("Address");
    final var zipCode = new TextField("Zip code");
    final var city = new TextField("City");
    final var state = new TextField("State");
    final var country = new TextField("Country");
    firstName.setRequiredIndicatorVisible(true);
    firstName.setValueChangeMode(EAGER);
    lastName.setRequiredIndicatorVisible(true);
    lastName.setValueChangeMode(EAGER);
    photo.setMaxPreviewSize("150px", "150px");
    email.addValueChangeListener(changeEvent -> {
        final var newEmail = changeEvent.getValue();
        final var photoValue = photo.getValue();
        if (!newEmail.isBlank() && (photoValue.isBlank() || photoValue.startsWith(GRAVATAR_URL))) {
            photo.setValue(GravatarUtil.getGravatarAddress(newEmail, 150));
        } else if (newEmail.isBlank() && photoValue.startsWith(GRAVATAR_URL)) {
            photo.setValue("");
        }
    });
    formLayout.add(firstName, lastName, company, new CustomLabel("Bio"), bio, photo, email, twitter, linkedIn, website, address, zipCode, city, state, country);
    binder.forField(firstName).withValidator(new StringLengthValidator("Please enter the first name of the speaker (max. 255 chars)", 1, 255)).bind(SpeakerRecord::getFirstName, SpeakerRecord::setFirstName);
    binder.forField(lastName).withValidator(new StringLengthValidator("Please enter the last name of the speaker (max. 255 chars)", 1, 255)).bind(SpeakerRecord::getLastName, SpeakerRecord::setLastName);
    binder.forField(company).withValidator(new StringLengthValidator("The company name is too long (max. 255 chars)", 0, 255)).bind(SpeakerRecord::getCompany, SpeakerRecord::setCompany);
    binder.forField(bio.asHtml()).withValidator(new StringLengthValidator("The bio is too long (max. 100'000 chars)", 0, 100_000)).bind(SpeakerRecord::getBio, SpeakerRecord::setBio);
    binder.forField(photo).withValidator(value -> value.isEmpty() || value.startsWith("data:") || value.startsWith("https://"), "The photo must be uploaded or the photo address must be secure (HTTPS)").withValidator(new StringLengthValidator("The photo is too big (max. 250 KB)", 0, 250_000)).bind(SpeakerRecord::getPhoto, SpeakerRecord::setPhoto);
    binder.forField(email).withValidator(new EmailValidator("Please enter a correct email address or leave this field empty", true)).withValidator(new StringLengthValidator("The email address is too long (max. 255 chars)", 0, 255)).bind(SpeakerRecord::getEmail, SpeakerRecord::setEmail);
    binder.forField(twitter).withValidator(new StringLengthValidator("The twitter username is too long (max. 15 chars)", 0, 15)).bind(SpeakerRecord::getTwitter, SpeakerRecord::setTwitter);
    binder.forField(linkedIn).withValidator(value -> value.isEmpty() || value.startsWith("https://"), "The LinkedIn address must start with \"https://\"").withValidator(new StringLengthValidator("The LinkedIn address is too long (max. 255 chars)", 0, 255)).bind(SpeakerRecord::getLinkedin, SpeakerRecord::setLinkedin);
    binder.forField(website).withValidator(value -> value.isEmpty() || value.startsWith("https://"), "The website address must start with \"https://\"").withValidator(new StringLengthValidator("The website address is too long (max. 255 chars)", 0, 255)).bind(SpeakerRecord::getWebsite, SpeakerRecord::setWebsite);
    binder.forField(address).withValidator(new StringLengthValidator("The address is too long (max. 255 chars)", 0, 255)).bind(SpeakerRecord::getAddress, SpeakerRecord::setAddress);
    binder.forField(zipCode).withValidator(new StringLengthValidator("The zip code is too long (max. 255 chars)", 0, 255)).bind(SpeakerRecord::getZipCode, SpeakerRecord::setZipCode);
    binder.forField(city).withValidator(new StringLengthValidator("The city is too long (max. 255 chars)", 0, 255)).bind(SpeakerRecord::getCity, SpeakerRecord::setCity);
    binder.forField(state).withValidator(new StringLengthValidator("The state is too long (max. 255 chars)", 0, 255)).bind(SpeakerRecord::getState, SpeakerRecord::setState);
    binder.forField(country).withValidator(new StringLengthValidator("The country is too long (max. 255 chars)", 0, 255)).bind(SpeakerRecord::getCountry, SpeakerRecord::setCountry);
}
Also used : CustomLabel(org.komunumo.ui.component.CustomLabel) EmailValidator(com.vaadin.flow.data.validator.EmailValidator) ImageUploadField(org.komunumo.ui.component.ImageUploadField) SpeakerRecord(org.komunumo.data.db.tables.records.SpeakerRecord) StringLengthValidator(com.vaadin.flow.data.validator.StringLengthValidator) EmailField(com.vaadin.flow.component.textfield.EmailField) TextField(com.vaadin.flow.component.textfield.TextField) RichTextEditor(com.vaadin.flow.component.richtexteditor.RichTextEditor)

Example 2 with EmailValidator

use of com.vaadin.flow.data.validator.EmailValidator in project komunumo-server by komunumo.

the class MemberDialog method createForm.

@Override
public void createForm(@NotNull final FormLayout formLayout, @NotNull final Binder<Member> binder) {
    final var firstName = new TextField("First name");
    final var lastName = new TextField("Last name");
    final var company = new TextField("Company");
    final var email = new EmailField("Email");
    final var active = new Checkbox("Active");
    final var address = new TextField("Address");
    final var zipCode = new TextField("Zip code");
    final var city = new TextField("City");
    final var state = new TextField("State");
    final var country = new TextField("Country");
    final var admin = new Checkbox("Member is Admin");
    final var blocked = new Checkbox("Account Blocked");
    final var blockedReason = new TextField("Reason");
    final var comment = new TextArea("Comment");
    firstName.setRequiredIndicatorVisible(true);
    firstName.setValueChangeMode(EAGER);
    lastName.setRequiredIndicatorVisible(true);
    lastName.setValueChangeMode(EAGER);
    blocked.addValueChangeListener(event -> {
        final var isBlocked = event.getValue();
        blockedReason.setEnabled(isBlocked);
        blockedReason.setRequiredIndicatorVisible(isBlocked);
        if (isBlocked) {
            blockedReason.focus();
        } else {
            blockedReason.setValue("");
        }
        binder.validate();
    });
    blockedReason.setValueChangeMode(EAGER);
    blockedReason.setEnabled(false);
    formLayout.add(firstName, lastName, company, email, active, address, zipCode, city, state, country, admin, blocked, blockedReason, comment);
    binder.forField(firstName).withValidator(new StringLengthValidator("Please enter the first name of the member (max. 255 chars)", 1, 255)).bind(Member::getFirstName, Member::setFirstName);
    binder.forField(lastName).withValidator(new StringLengthValidator("Please enter the last name of the member (max. 255 chars)", 1, 255)).bind(Member::getLastName, Member::setLastName);
    binder.forField(company).bind(Member::getCompany, Member::setCompany);
    binder.forField(email).withValidator(new EmailValidator("Please enter a correct email address or leave this field empty", true)).withValidator(new StringLengthValidator("The email address is too long (max. 255 chars)", 0, 255)).bind(Member::getEmail, Member::setEmail);
    binder.forField(active).bind(Member::getAccountActive, Member::setAccountActive);
    binder.forField(address).withValidator(new StringLengthValidator("The address is too long (max. 255 chars)", 0, 255)).bind(Member::getAddress, Member::setAddress);
    binder.forField(zipCode).withValidator(new StringLengthValidator("The zip code is too long (max. 255 chars)", 0, 255)).bind(Member::getZipCode, Member::setZipCode);
    binder.forField(city).withValidator(new StringLengthValidator("The city is too long (max. 255 chars)", 0, 255)).bind(Member::getCity, Member::setCity);
    binder.forField(state).withValidator(new StringLengthValidator("The state is too long (max. 255 chars)", 0, 255)).bind(Member::getState, Member::setState);
    binder.forField(country).withValidator(new StringLengthValidator("The country is too long (max. 255 chars)", 0, 255)).bind(Member::getCountry, Member::setCountry);
    binder.forField(admin).bind(Member::getAdmin, Member::setAdmin);
    binder.forField(blocked).bind(Member::getAccountBlocked, Member::setAccountBlocked);
    binder.forField(blockedReason).withValidator(value -> !blocked.getValue() || blocked.getValue() && !value.isBlank(), "If you want to block this member, you must enter a reason").withValidator(new StringLengthValidator("The reason is too long (max. 255 chars)", 0, 255)).bind(Member::getAccountBlockedReason, Member::setAccountBlockedReason);
    binder.forField(comment).bind(Member::getComment, Member::setComment);
}
Also used : EmailValidator(com.vaadin.flow.data.validator.EmailValidator) TextArea(com.vaadin.flow.component.textfield.TextArea) Checkbox(com.vaadin.flow.component.checkbox.Checkbox) StringLengthValidator(com.vaadin.flow.data.validator.StringLengthValidator) EmailField(com.vaadin.flow.component.textfield.EmailField) TextField(com.vaadin.flow.component.textfield.TextField) Member(org.komunumo.data.entity.Member)

Example 3 with EmailValidator

use of com.vaadin.flow.data.validator.EmailValidator in project flow-components by vaadin.

the class FormLayoutView method createFormLayoutWithBinder.

private void createFormLayoutWithBinder() {
    FormLayout layoutWithBinder = new FormLayout();
    Binder<Contact> binder = new Binder<>();
    // The object that will be edited
    Contact contactBeingEdited = new Contact();
    // Create the fields
    TextField firstName = new TextField();
    firstName.setValueChangeMode(ValueChangeMode.EAGER);
    TextField lastName = new TextField();
    lastName.setValueChangeMode(ValueChangeMode.EAGER);
    TextField phone = new TextField();
    phone.setValueChangeMode(ValueChangeMode.EAGER);
    TextField email = new TextField();
    email.setValueChangeMode(ValueChangeMode.EAGER);
    DatePicker birthDate = new DatePicker();
    Checkbox doNotCall = new Checkbox("Do not call");
    Label infoLabel = new Label();
    NativeButton save = new NativeButton("Save");
    NativeButton reset = new NativeButton("Reset");
    layoutWithBinder.addFormItem(firstName, "First name");
    layoutWithBinder.addFormItem(lastName, "Last name");
    layoutWithBinder.addFormItem(birthDate, "Birthdate");
    layoutWithBinder.addFormItem(email, "E-mail");
    FormItem phoneItem = layoutWithBinder.addFormItem(phone, "Phone");
    phoneItem.add(doNotCall);
    // Button bar
    HorizontalLayout actions = new HorizontalLayout();
    actions.add(save, reset);
    save.getStyle().set("marginRight", "10px");
    SerializablePredicate<String> phoneOrEmailPredicate = value -> !phone.getValue().trim().isEmpty() || !email.getValue().trim().isEmpty();
    // E-mail and phone have specific validators
    Binding<Contact, String> emailBinding = binder.forField(email).withValidator(phoneOrEmailPredicate, "Both phone and email cannot be empty").withValidator(new EmailValidator("Incorrect email address")).bind(Contact::getEmail, Contact::setEmail);
    Binding<Contact, String> phoneBinding = binder.forField(phone).withValidator(phoneOrEmailPredicate, "Both phone and email cannot be empty").bind(Contact::getPhone, Contact::setPhone);
    // Trigger cross-field validation when the other field is changed
    email.addValueChangeListener(event -> phoneBinding.validate());
    phone.addValueChangeListener(event -> emailBinding.validate());
    // First name and last name are required fields
    firstName.setRequiredIndicatorVisible(true);
    lastName.setRequiredIndicatorVisible(true);
    binder.forField(firstName).withValidator(new StringLengthValidator("Please add the first name", 1, null)).bind(Contact::getFirstName, Contact::setFirstName);
    binder.forField(lastName).withValidator(new StringLengthValidator("Please add the last name", 1, null)).bind(Contact::getLastName, Contact::setLastName);
    // Birthdate and doNotCall don't need any special validators
    binder.bind(doNotCall, Contact::isDoNotCall, Contact::setDoNotCall);
    binder.bind(birthDate, Contact::getBirthDate, Contact::setBirthDate);
    // Click listeners for the buttons
    save.addClickListener(event -> {
        if (binder.writeBeanIfValid(contactBeingEdited)) {
            infoLabel.setText("Saved bean values: " + contactBeingEdited);
        } else {
            BinderValidationStatus<Contact> validate = binder.validate();
            String errorText = validate.getFieldValidationStatuses().stream().filter(BindingValidationStatus::isError).map(BindingValidationStatus::getMessage).map(Optional::get).distinct().collect(Collectors.joining(", "));
            infoLabel.setText("There are errors: " + errorText);
        }
    });
    reset.addClickListener(event -> {
        // clear fields by setting null
        binder.readBean(null);
        infoLabel.setText("");
        doNotCall.setValue(false);
    });
    infoLabel.setId("binder-info");
    firstName.setId("binder-first-name");
    lastName.setId("binder-last-name");
    phone.setId("binder-phone");
    email.setId("binder-email");
    birthDate.setId("binder-birth-date");
    doNotCall.setId("binder-do-not-call");
    save.setId("binder-save");
    reset.setId("binder-reset");
    addCard("A form layout with fields using Binder", layoutWithBinder, actions, infoLabel);
}
Also used : FormLayout(com.vaadin.flow.component.formlayout.FormLayout) BinderValidationStatus(com.vaadin.flow.data.binder.BinderValidationStatus) Component(com.vaadin.flow.component.Component) Composite(com.vaadin.flow.component.Composite) EmailValidator(com.vaadin.flow.data.validator.EmailValidator) Binder(com.vaadin.flow.data.binder.Binder) HorizontalLayout(com.vaadin.flow.component.orderedlayout.HorizontalLayout) Div(com.vaadin.flow.component.html.Div) Label(com.vaadin.flow.component.html.Label) NativeButton(com.vaadin.flow.component.html.NativeButton) ResponsiveStep(com.vaadin.flow.component.formlayout.FormLayout.ResponsiveStep) FormItem(com.vaadin.flow.component.formlayout.FormLayout.FormItem) Route(com.vaadin.flow.router.Route) BindingValidationStatus(com.vaadin.flow.data.binder.BindingValidationStatus) SerializablePredicate(com.vaadin.flow.function.SerializablePredicate) TextField(com.vaadin.flow.component.textfield.TextField) ValueChangeMode(com.vaadin.flow.data.value.ValueChangeMode) VerticalLayout(com.vaadin.flow.component.orderedlayout.VerticalLayout) H2(com.vaadin.flow.component.html.H2) Collectors(java.util.stream.Collectors) Serializable(java.io.Serializable) FormLayout(com.vaadin.flow.component.formlayout.FormLayout) Checkbox(com.vaadin.flow.component.checkbox.Checkbox) StringLengthValidator(com.vaadin.flow.data.validator.StringLengthValidator) DatePicker(com.vaadin.flow.component.datepicker.DatePicker) LocalDate(java.time.LocalDate) Optional(java.util.Optional) Binding(com.vaadin.flow.data.binder.Binder.Binding) NativeButton(com.vaadin.flow.component.html.NativeButton) EmailValidator(com.vaadin.flow.data.validator.EmailValidator) Optional(java.util.Optional) FormItem(com.vaadin.flow.component.formlayout.FormLayout.FormItem) StringLengthValidator(com.vaadin.flow.data.validator.StringLengthValidator) Label(com.vaadin.flow.component.html.Label) BindingValidationStatus(com.vaadin.flow.data.binder.BindingValidationStatus) HorizontalLayout(com.vaadin.flow.component.orderedlayout.HorizontalLayout) Binder(com.vaadin.flow.data.binder.Binder) Checkbox(com.vaadin.flow.component.checkbox.Checkbox) TextField(com.vaadin.flow.component.textfield.TextField) DatePicker(com.vaadin.flow.component.datepicker.DatePicker)

Example 4 with EmailValidator

use of com.vaadin.flow.data.validator.EmailValidator in project flow-components by vaadin.

the class GridViewEditorPage method createBufferedDynamicEditor.

private void createBufferedDynamicEditor() {
    Div message = new Div();
    message.setId("buffered-dynamic-editor-msg");
    Grid<Person> grid = new Grid<>();
    List<Person> persons = new ArrayList<>();
    persons.addAll(createItems());
    grid.setItems(persons);
    Column<Person> nameColumn = grid.addColumn(Person::getFirstName).setHeader("Name");
    Column<Person> subscriberColumn = grid.addColumn(Person::isSubscriber).setHeader("Subscriber");
    Column<Person> emailColumn = grid.addColumn(Person::getEmail).setHeader("E-mail");
    Binder<Person> binder = new Binder<>(Person.class);
    Editor<Person> editor = grid.getEditor();
    editor.setBinder(binder);
    editor.setBuffered(true);
    TextField field = new TextField();
    binder.bind(field, "firstName");
    nameColumn.setEditorComponent(field);
    Div validationStatus = new Div();
    validationStatus.getStyle().set("color", "red");
    validationStatus.setId("email-validation");
    Checkbox checkbox = new Checkbox();
    binder.bind(checkbox, "subscriber");
    subscriberColumn.setEditorComponent(checkbox);
    TextField emailField = new TextField();
    // When not a subscriber, we want to show a read-only text-field that
    // ignores whatever is set to it
    TextField readOnlyEmail = new TextField();
    readOnlyEmail.setValue("Not a subscriber");
    readOnlyEmail.setReadOnly(true);
    Runnable bindEmail = () -> binder.forField(emailField).withValidator(new EmailValidator("Invalid email")).withStatusLabel(validationStatus).bind("email");
    Runnable setEmail = () -> emailColumn.setEditorComponent(item -> {
        if (item.isSubscriber()) {
            bindEmail.run();
            return emailField;
        } else {
            return readOnlyEmail;
        }
    });
    // Sets the binding based on the Person bean state
    setEmail.run();
    // Refresh subscriber editor component when checkbox value is changed
    checkbox.addValueChangeListener(event -> {
        // Only updates from the client-side should be taken into account
        if (event.isFromClient()) {
            // When using buffered mode, the partial updates shouldn't be
            // propagated to the bean before the Save button is clicked, so
            // here we need to override the binding function to take the
            // checkbox state into consideration instead
            emailColumn.setEditorComponent(item -> {
                if (checkbox.getValue()) {
                    bindEmail.run();
                    return emailField;
                } else {
                    return readOnlyEmail;
                }
            });
            grid.getEditor().refresh();
        }
    });
    Collection<Button> editButtons = Collections.newSetFromMap(new WeakHashMap<>());
    // Resets the binding function to use the bean state whenever the editor
    // is closed
    editor.addCloseListener(event -> {
        setEmail.run();
        editButtons.stream().forEach(button -> button.setEnabled(true));
    });
    Column<Person> editorColumn = grid.addComponentColumn(person -> {
        Button edit = new Button("Edit");
        edit.addClassName("edit");
        edit.addClickListener(e -> {
            editor.editItem(person);
            field.focus();
        });
        edit.setEnabled(!editor.isOpen());
        editButtons.add(edit);
        return edit;
    });
    editor.addOpenListener(e -> editButtons.stream().forEach(button -> button.setEnabled(!editor.isOpen())));
    editor.addCloseListener(e -> editButtons.stream().forEach(button -> button.setEnabled(!editor.isOpen())));
    Button save = new Button("Save", e -> editor.save());
    save.addClassName("save");
    Button cancel = new Button("Cancel", e -> editor.cancel());
    cancel.addClassName("cancel");
    // Add a keypress listener that listens for an escape key up event.
    // Note! some browsers return key as Escape and some as Esc
    grid.getElement().addEventListener("keyup", event -> editor.cancel()).setFilter("event.key === 'Escape' || event.key === 'Esc'");
    Div buttons = new Div(save, cancel);
    editorColumn.setEditorComponent(buttons);
    editor.addSaveListener(event -> message.setText(event.getItem().getFirstName() + ", " + event.getItem().isSubscriber() + ", " + event.getItem().getEmail()));
    grid.setId("buffered-dynamic-editor");
    addCard("Grid Editor", "Dynamic Editor in Buffered Mode", message, validationStatus, grid);
}
Also used : Grid(com.vaadin.flow.component.grid.Grid) EmailValidator(com.vaadin.flow.data.validator.EmailValidator) Collection(java.util.Collection) Editor(com.vaadin.flow.component.grid.editor.Editor) Binder(com.vaadin.flow.data.binder.Binder) Div(com.vaadin.flow.component.html.Div) ArrayList(java.util.ArrayList) Route(com.vaadin.flow.router.Route) Checkbox(com.vaadin.flow.component.checkbox.Checkbox) List(java.util.List) Button(com.vaadin.flow.component.button.Button) Column(com.vaadin.flow.component.grid.Grid.Column) Person(com.vaadin.flow.data.bean.Person) Collections(java.util.Collections) TextField(com.vaadin.flow.component.textfield.TextField) WeakHashMap(java.util.WeakHashMap) EmailValidator(com.vaadin.flow.data.validator.EmailValidator) Grid(com.vaadin.flow.component.grid.Grid) ArrayList(java.util.ArrayList) Div(com.vaadin.flow.component.html.Div) Binder(com.vaadin.flow.data.binder.Binder) Button(com.vaadin.flow.component.button.Button) Checkbox(com.vaadin.flow.component.checkbox.Checkbox) TextField(com.vaadin.flow.component.textfield.TextField) Person(com.vaadin.flow.data.bean.Person)

Aggregations

TextField (com.vaadin.flow.component.textfield.TextField)4 EmailValidator (com.vaadin.flow.data.validator.EmailValidator)4 Checkbox (com.vaadin.flow.component.checkbox.Checkbox)3 StringLengthValidator (com.vaadin.flow.data.validator.StringLengthValidator)3 Div (com.vaadin.flow.component.html.Div)2 EmailField (com.vaadin.flow.component.textfield.EmailField)2 Binder (com.vaadin.flow.data.binder.Binder)2 Route (com.vaadin.flow.router.Route)2 Component (com.vaadin.flow.component.Component)1 Composite (com.vaadin.flow.component.Composite)1 Button (com.vaadin.flow.component.button.Button)1 DatePicker (com.vaadin.flow.component.datepicker.DatePicker)1 FormLayout (com.vaadin.flow.component.formlayout.FormLayout)1 FormItem (com.vaadin.flow.component.formlayout.FormLayout.FormItem)1 ResponsiveStep (com.vaadin.flow.component.formlayout.FormLayout.ResponsiveStep)1 Grid (com.vaadin.flow.component.grid.Grid)1 Column (com.vaadin.flow.component.grid.Grid.Column)1 Editor (com.vaadin.flow.component.grid.editor.Editor)1 H2 (com.vaadin.flow.component.html.H2)1 Label (com.vaadin.flow.component.html.Label)1