From 843431272820a237b1f1376ccdb5ed1a194b666e Mon Sep 17 00:00:00 2001
From: shikhar-scs <shikhar9a@gmail.com>
Date: Thu, 21 Dec 2017 15:17:31 +0530
Subject: [PATCH] Toggleable Password
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Changed * to ●
---
 app/templates/share.js          | 18 +++++++++++++++++-
 app/templates/uploadPassword.js |  5 ++---
 assets/main.css                 | 12 ++++++++++++
 3 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/app/templates/share.js b/app/templates/share.js
index e86d18e0..ce6d8774 100644
--- a/app/templates/share.js
+++ b/app/templates/share.js
@@ -11,7 +11,23 @@ function passwordComplete(state, password) {
       password: '<pre></pre>'
     })}</div>`
   ]);
-  el.lastElementChild.textContent = password;
+  const displayPassword = [];
+  for (let i = 0; i < password.length; i++) {
+    displayPassword[i] = '●';
+  }
+
+  const passwordOriginal = document.createElement('div');
+  passwordOriginal.className = 'passwordOriginal';
+  passwordOriginal.innerText = password;
+
+  const passwordStar = document.createElement('div');
+  passwordStar.className = 'passwordStar';
+  passwordStar.innerText = displayPassword
+    .toString()
+    .split(',')
+    .join('');
+  el.lastElementChild.appendChild(passwordOriginal);
+  el.lastElementChild.appendChild(passwordStar);
   return el;
 }
 
diff --git a/app/templates/uploadPassword.js b/app/templates/uploadPassword.js
index e84ebbb7..0df27f05 100644
--- a/app/templates/uploadPassword.js
+++ b/app/templates/uploadPassword.js
@@ -5,9 +5,7 @@ module.exports = function(state, emit) {
   const div = html`
   <div class="selectPassword">
     <div id="addPasswordWrapper">
-      <input id="addPassword" type="checkbox" autocomplete="off" onchange=${
-        togglePasswordInput
-      }/>
+      <input id="addPassword" type="checkbox" autocomplete="off" onchange=${togglePasswordInput}/>
       <label for="addPassword">
         ${state.translate('requirePasswordCheckbox')}</label>
     </div>
@@ -17,6 +15,7 @@ module.exports = function(state, emit) {
         maxlength="64"
         autocomplete="off"
         placeholder="${state.translate('unlockInputPlaceholder')}"
+        type="password"
         oninput=${inputChanged}/>
       <input type="submit"
         id="unlock-btn"
diff --git a/assets/main.css b/assets/main.css
index b188b92a..211ef0d9 100644
--- a/assets/main.css
+++ b/assets/main.css
@@ -666,6 +666,18 @@ tbody {
   overflow-wrap: break-word;
 }
 
+.passwordOriginal {
+  display: none;
+}
+
+.selectPassword :hover .passwordOriginal {
+  display: block;
+}
+
+.selectPassword :hover .passwordStar {
+  display: none;
+}
+
 .setPassword {
   align-self: left;
   display: flex;