Trim whitespace from usernames and passwords

README.md

@@ -52,5 +52,9 @@ For more information on contributing to this repository visit [Contributing to a
 * Convert to lower/uppercase - this option will convert user name input to upper/lower case. Using this functionality only makes practical sense when all usernames defined in your application are either upper or lower cased.
 NOTE: MxAdmin administrative user will be accessible in both cases as well.
 
+### Whitespace
+* Trim username - this option will trim leading and trailing whitespace from the username on submission
+* Trim password - this option will trim leading and trailing whitespace from the password on submission
+
 ## Known issues
 - Mendix runtime returns no feedback about the existence of a username. This is by design.

package.json

@@ -33,4 +33,4 @@
     "folders": "node ./node_modules/gulp/bin/gulp folders",
     "modeler": "node ./node_modules/gulp/bin/gulp modeler"
   }
-}
+}

src/LoginForm/LoginForm.xml

@@ -135,6 +135,16 @@
                 <enumerationValue key="toUpperCase">Convert to uppercase</enumerationValue>
             </enumerationValues>
         </property>
+        <property key="trimUsername" type="boolean" defaultValue="false">
+            <caption>Trim username</caption>
+            <category>Whitespace</category>
+            <description>Trim leading and trailing whitespace from the username</description>
+        </property>
+        <property key="trimPassword" type="boolean" defaultValue="false">
+            <caption>Trim password</caption>
+            <category>Whitespace</category>
+            <description>Trim leading and trailing whitespace from the password</description>
+        </property>
         <property key="autoCorrect" type="boolean" defaultValue="false">
             <caption>Auto-correct</caption>
             <category>Mobile</category>

src/LoginForm/widget/LoginForm.js

@@ -13,6 +13,12 @@
  ========================
  A custom login form which can be used as an alternative to the default Mendix login page.
  */
+// polyfill for trim functionality
+if (!String.prototype.trim) {
+  String.prototype.trim = function () {
+    return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
+  };
+}
 define([
 
     "mxui/widget/_WidgetBase", "dijit/_TemplatedMixin", "mxui/dom",
@@ -93,6 +99,11 @@ define([
          * Case Handling
          */
         convertCase: "none",
+        /**
+         * Whitespace handing
+         */
+        trimPassword: false,
+        trimUsername: false,
 
         // Internal variables. Non-primitives created in the prototype are shared between all widget instances.
         _handle: null,
@@ -281,8 +292,8 @@ define([
                 this.togglePasswordVisibility();
             }
 
-            var username = this._changeCase(this.usernameInputNode.value),
-                password = this.passwordInputNode.value;
+            var username = this._trimUsername(this._changeCase(this.usernameInputNode.value)),
+                password = this._trimPassword(this.passwordInputNode.value);
 
             if (username && password) {
                 if (this.showprogress) {
@@ -367,6 +378,26 @@ define([
             }
             return username;
         },
+        /**
+         * Trim leading and trailing whitespace from the username if option selected.
+         */
+        _trimUsername: function(username) {
+            if (this.trimUsername) {
+                return username.trim();
+            } else {
+                return username;
+            }
+        },
+        /**
+         * Trim leading and trailing whitespace from the password if option selected.
+         */
+        _trimPassword: function(password) {
+            if (this.trimPassword) {
+                return password.trim();
+            } else {
+                return password;
+            }
+        },
         /**
          * Sets focus to the username input node if not the default
          * @private