[MODIFIED] username type checking through new key (#675) (#710)

Signed-off-by: Zeeshan Mehboob <[email protected]>

oidc-ui/src/components/InputWithImage.js

@@ -49,51 +49,63 @@ export default function InputWithImage({
 
   const handleKeyDown = (e) => {
 
-    var keyCode = e.keyCode || e.which;
-
-    // number checking function checks if the key is a number or not
-    // restricting with shift + number key
-    const numberChecking = (key, shift) =>
-      (key >= 48 && key <= 57 && !shift) || (key >= 96 && key <= 105);
-
-    // letter checking function checks if the key is a letter or not
-    const letterChecking = (key) =>
-      (key >= 65 && key <= 90);
+    var keyCode = e.key || e.which;
 
     // multiKeyChecking function checks if the key is
     // ctrl + a, ctrl + c, ctrl + v
-    const multiKeyChecking = (key, ctrl) =>
-      ctrl && (key === 65 || key === 67 || key === 86);
+    // while pasting it will also check maxlength
+    const multiKeyChecking = (key, ctrl, maxLength) => {
+      if (
+        ctrl &&
+        (key === "a" || key === "c"
+          || (key === "v" && checkMaxLength(maxLength)))
+      ) {
+        return true;
+      }
+      return false;
+    };
 
     // checking max length for the input
     const checkMaxLength = (maxLength) =>
       maxLength === "" ? true : e.target.value.length < parseInt(maxLength);
 
+    // testing with all input type
+    // with respective regex
+    const patternTest = (type, key) => {
+      if (type === "number") {
+        // Check if the pressed key is a number
+        return /^\d$/.test(key);
+      }
+      if (type === "letter") {
+        // Check if the pressed key is a letter (a-zA-Z)
+        // Lower & upper case letters a-z
+        // Prevent input of other characters
+        return /^[a-zA-Z]$/.test(key);
+      }
+      if (type === "alpha-numeric") {
+        // Check if the pressed key is a number (0-9) or a letter (a-zA-Z)
+        // Numpad numbers 0-9
+        // Prevent input of other characters
+        return /^[a-zA-Z\d]$/.test(key);
+      }
+
+      return true
+    }
+
+
     // Allow some special keys like Backspace, Tab, Home, End, Left Arrow, Right Arrow, Delete.
-    const allowedKeyCodes = [8, 9, 17, 35, 36, 37, 39, 46];
+    const allowedKeyCodes =
+      ['Backspace', 'Tab', 'Control', 'End', 'Home', 'ArrowLeft', 'ArrowRight', 'Delete'];
 
-    if (!allowedKeyCodes.includes(keyCode) && !multiKeyChecking(keyCode, e.ctrlKey)) {
+    if (!allowedKeyCodes.includes(keyCode) && !multiKeyChecking(keyCode, e.ctrlKey, maxLength)) {
       // checking max length for the input
       // if greater than the max length then prevent the default action
       if (!checkMaxLength(maxLength)) {
         e.preventDefault();
       }
 
-      if (type === "number" && !numberChecking(keyCode, e.shiftKey)) {
-        // Check if the pressed key is a number
-        e.preventDefault();
-      } else if (type === "letter" && !letterChecking(keyCode)) {
-        // Check if the pressed key is a letter (a-zA-Z)
-        // Lower & upper case letters a-z
-        // Prevent input of other characters
-        e.preventDefault();
-      } else if (
-        type === "alpha-numeric" &&
-        !(numberChecking(keyCode, e.shiftKey) || letterChecking(keyCode))
-      ) {
-        // Check if the pressed key is a number (0-9) or a letter (a-zA-Z)
-        // Numpad numbers 0-9
-        // Prevent input of other characters
+      // checking patter for number, letter & alpha-numeric
+      if (!patternTest(type, keyCode)) {
         e.preventDefault();
       }
     }