UserName to LowerCase with the native login widget?

1
We want to have our login case insensitive to prevent login errors due to the username being (partly) in capitals. We don't use the default login.html page, but a custom Mendix page with the native login input and button widgets instead. The best solution I've found so far is Rene van Hofwegen's "In the appstore there are multiple authentication modules which provides this solution out of the box. -> Modules/Authentication.".  However, I would like to use the native widgets if that is possible. So is there a microflow or anything else I can edit to have the username be changed to lowercase, either on OnChange or OnSubmit? Update: I thought this 'SignIn microflow / Sign-in microflow for Mx7' module would help, but it didn't. The microflow will only be run if the entered credentials are validated by Mendix and since I have to LowerCase those credentials.. The microflow runs too little too late. 
asked
4 answers
1

I have ran into the same problem before.

I've tried setting the autocapitalize attribute to the input div. Weirdly enough this only applied to it after a refresh of the page and there was no other way to solve it visually.

What did help was just create an onchange event listener in javascript and automatically lowercase the input value afterwards.

But this only works if you do not support multicase usernames.

It would be nice if the autocapitalize attribute would just stick...

answered
1

Hi Sander, today I started testing using the default Mendix login form widget in our project. You can change the casehandling of the widget when you add this to your home page. Does this apply to your use case or?

answered
1

[the correct answer]

In my own research I found the same answers as posted by Wilfried and Hunter, respectively adding a Login form widget or using Javascript to convert the input to lowercase. We went for the Javascript method as this is more lightweight and can be used together with the native login form. It doesn't require to change our page and that's a plus.

In order to help others, as well as receive feedback on my implementation, I've posted the jQuery javascript below.

 

`$(‘.mx-name-loginIdTextBox1 input[type=text]‘).blur(function () {
  $(‘.mx-name-loginIdTextBox1 input[type=text]’).val(function () {
    return this.value.toLowerCase();
  });
});`

 

answered
0

Hi,

 

I created a custom widget to solve this without custom scripts in the model. It also allows the user to login by pressing the enter key.

https://appstore.home.mendix.com/link/app/107615/

 

answered