Restrict Pasting in Password Field on Login Screen

Support
#1

Hi,
We are seeking to enhance security on our login screen by preventing users from pasting into the password field. User should not be able to paste password into login screen.It should be restricted.
Could you please assist in implementing this in Jmix 1.0?

Thanks for your support.

#3

Hello!

For Jmix 1.x (Vaadin 8x and GWT) this is uncommon task. I suggest several proposals to do this:

1. Simple JS

@Subscribe
public void onAfterShow(AfterShowEvent event) {
    String generatedClassName = "no-copy-password-field" + randomAlphanumeric(6);
    this.passwordField.addStyleName(generatedClassName);
  
    // Define and execute the JavaScript to prevent paste
    String script = "const elements = document.getElementsByClassName('"+ generatedClassName +"');\n" +
            "for (let i = 0; i < elements.length; i++) }\n" +
            "    elements[i].addEventListener('paste', function(event) { event.preventDefault(); });\n" +
            "}";
    JavaScript.getCurrent().execute(script);
}

Explanation:

  1. We are generating unused unique css class name and giving to ours password field
  2. Finding all elements inside screen with given class name. But class name is unique and we will iterate over only one element and this is our password field. Then we will apply event listener for pasting that preventing paste event
      const elements = document.getElementsByClassName('${generatedClassName}');
  for (let i = 0; i < elements.length; i++) }
      elements[i].addEventListener('paste', function(event) { event.preventDefault(); });
  }

2. Connectors and Extension

Other way to do it is to use AbstractExtensionConnector. In case, this is different way to execute same javascript. You can find example in io.jmix.ui.widget.client.button#JmixCopyButtonExtensionConnector.
This mechanism is need to work with javascript RPCs with state.

Conclusion

In your case that does not contain any stateful operations, better be to use first solution. If you really need to use second solution, text here or see io.jmix.ui.widget.client.button#JmixCopyButtonExtensionConnector in JmixUI sources.

#4

Hi,
Thankyou for responding but unfortunately I tried first solution using JavaScript code but it is not working.
Can you give another solution? or this first solution need any dependency to add?

1 Like
#5

I will check it; it could be that I over-formatted my JS inline code, and it is not running due to errors.

#6

Yes, i did mistakes after research and proof of work, so my code was broken.

This should works

    @Subscribe
    public void onAfterShow(AfterShowEvent event) {
        String uniqueClassName = "no-copy-password-field" + randomAlphanumeric(6);
        this.passwordField.addStyleName(uniqueClassName);

        // Define and execute the JavaScript to prevent paste
        String script = "const elements = document.getElementsByClassName('" + uniqueClassName + "');" +
                "for (let i = 0; i < elements.length; i++) {" +
                "  elements[i].addEventListener('paste', function(event) { event.preventDefault(); });" +
                "}";
        JavaScript.getCurrent().execute(script);
    }

If you need to prove that JS works you can exec this code:

JavaScript.getCurrent().execute("alert(\"Hello\");");
#7

Yes It helped.
Thankyou :slight_smile:

1 Like