#749 Mask PIN numbers by default during SSO logins

PrivateSky · May 31, 2022 · 2d3a1f5 · 2d3a1f5
1 parent 05e813a
commit 2d3a1f5
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 3 deletions.
diff --git a/controllers/MainController.js b/controllers/MainController.js
@@ -318,6 +318,16 @@ function MainController() {
 
   };
 
+  this.toggleShowPin = function () {
+    this.showPin = !this.showPin;
+    this.pinUpdate("");
+  }
+
+  this.clearPin = function () {
+    this.pinInput.value = "";
+    this.pinUpdate("");
+  }
+
   this.pinUpdate = function (value) {
     this.pinInput = document.getElementById('sso-pincode');
 
@@ -331,7 +341,11 @@ function MainController() {
 
     if (this.pinInput.value.length <= 6) {
       Array.from(document.getElementsByClassName('number-input')).forEach((item, index) => {
-        item.innerText = this.pinInput.value[index] || "";
+        if (this.showPin) {
+          this.pinInput.value[index] ? item.innerText = this.pinInput.value[index] : item.innerText = "";
+        } else {
+          this.pinInput.value[index] ? item.innerText = "*" : item.innerText = "";
+        }
       })
     }
   }

diff --git a/index.html b/index.html
@@ -18,6 +18,10 @@
         width: 65px;
     }
 
+    .view-pin, .clear-pin {
+        margin: 10px 0px;
+    }
+
     .input-wrapper {
         width: 100%;
         display: flex;
@@ -30,8 +34,8 @@
         height: 35px;
         width: 35px;
         border: 1px solid #FFFFFF;
-        font-size: 2em;
-        line-height: 1.2em;
+        font-size: 1.5em;
+        line-height: 1.5em;
         text-align: center;
     }
 
@@ -95,6 +99,24 @@
                     <span class="number-input text-secondary"></span>
                     <span class="number-input text-secondary"></span>
                 </div>
+                <div class="buttons-row">
+                    <div class="view-pin">
+                        <button class="btn btn-outline-secondary"
+                                id="btn-view-pin"
+                                onclick="controller.toggleShowPin()"
+                                type="button">
+                            Show pin
+                        </button>
+                    </div>
+                    <div class="clear-pin">
+                        <button class="btn btn-outline-secondary"
+                                id="btn-clear-pin"
+                                onclick="controller.clearPin()"
+                                type="button">
+                            Clear all
+                        </button>
+                    </div>
+                </div>
                 <div class="buttons-row">
                     <input class="text-center form-control-lg mb-2 w-100" hidden id="sso-pincode" type="text">
                 </div>