@opengovsg/mockpass 4.0.4 → 4.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengovsg/mockpass",
-  "version": "4.0.4",
+  "version": "4.0.6",
   "description": "A mock SingPass/CorpPass server for dev purposes",
   "main": "index.js",
   "bin": {

package/public/mockpass/resources/js/login-common.js

@@ -390,6 +390,22 @@ function myTrim(x) {
     return x.replace(/(^[ \t]*\n)/gm, "");
 }
 
+/**
+ * This method listens to changes in userID entry to redirect user when id is clicked
+ */
+function redirectID() {
+    const idInput = document.getElementById("id-input");
+    const optionsList = document.getElementById("id-datalist");
+    let optionsMap = new Map();
+    for (let i=0; i<optionsList.options.length; i++) {
+        optionsMap.set(optionsList.options[i].value, optionsList.options[i].dataset.asserturl);
+    }
+    if (optionsMap.has(idInput.value)) {
+        const assertURL = optionsMap.get(idInput.value);
+        window.location.href = assertURL;
+    }
+}
+
 /**
  * This is generic method called for onkeypress action.
  * 

package/static/html/login-page.html

@@ -166,14 +166,12 @@
                                                             <div class="login-label">Log in</div>
                                                             <br>
                                                             <div class="dropdown" style="width: 100%; ">
-                                                                <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="width: 100%; border: 2px solid #ccc; border-radius: 5px; background: white; color: rgb(42, 45, 51); text-align: left;">
-                                                                Select username
-                                                                </button>
-                                                                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+                                                                <input id="id-input" list="id-datalist" class="btn btn-secondary dropdown-toggle" oninput="redirectID()" placeholder= "Select Username" style="width: 100%; border: 2px solid #ccc; border-radius: 5px; background: white; color: rgb(42, 45, 51); text-align: left;">
+                                                                <datalist class="dropdown-menu" id="id-datalist" aria-labelledby="id-input" >
                                                                     {{#values}}
-                                                                        <li><a href = "{{ assertURL }}">{{ id }}</a></li>
+                                                                        <option value="{{ id }}" data-asserturl="{{ assertURL }}">{{ id }}</option>
                                                                     {{/values}}
-                                                                </div>
+                                                                </datalist>
                                                             </div>
                                                         </div>
                                                         <div>