Add "Change Password" functionality (#177)

* Add "Change Password" functionality * [HTML] Change size between `button` and `hr` --------- Co-authored-by: BreadJS <83626012+BreadJS@users.noreply.github.com>
PIVX-Labs · Aug 16, 2023 · 77d70cd · 77d70cd
1 parent 1a6152e
commit 77d70cd
Show file tree

Hide file tree

Showing 11 changed files with 109 additions and 41 deletions.
diff --git a/index.template.html b/index.template.html
@@ -182,6 +182,42 @@ <h3 class="modal-title" id="confirmModalTitle" style="text-align: center; width:
           </div>
         </div>
 
+        <div class="modal fade" id="encryptWalletModal" tabindex="-1" role="dialog" aria-labelledby="encryptWalletLabel" aria-hidden="true">
+          <div class="modal-dialog modal-dialog-centered" role="document">
+            <div class="modal-content exportKeysModalColor">
+              <div class="modal-header">
+                <h5 class="modal-title" id="encryptWalletLabel">Encrypt wallet</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                  <i class="fa-solid fa-xmark closeCross"></i>
+                </button>
+              </div>
+              <div class="modal-body">
+                <div class="row m-0">
+                  <input class="center-text textboxTransparency" data-i18n="encryptPasswordCurrent" style="width: 100%; font-family: monospace;" type="password" id="changePassword-current" placeholder="Current Password" />
+                  <div class="col-12 col-md-6 p-0 pr-0 pr-md-1">
+                    <input class="center-text textboxTransparency" data-i18n="encryptPasswordFirst" style="width: 100%; font-family: monospace;" type="password" id="newPassword" placeholder="Enter Password" />
+                  </div>
+                  <div class="col-12 col-md-6 p-0 pl-0 pl-md-1">
+                    <input class="center-text textboxTransparency" data-i18n="encryptPasswordSecond" style="width: 100%; font-family: monospace;" type="password" id="newPasswordRetype" placeholder="Re-enter Password" />
+                  </div>
+                </div>
+              </div>
+              <div class="modal-footer text-right">
+                <button class="pivx-button-small" onclick="MPW.guiEncryptWallet()">
+                  <span class="dcWallet-svgIconPurple">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+                      <path
+                        d="M85.967 10.65l-32.15-9.481a13.466 13.466 0 00-7.632 0l-32.15 9.48C11.661 11.351 10 13.567 10 16.042v26.623c0 12.321 3.67 24.186 10.609 34.31 6.774 9.885 16.204 17.49 27.264 21.99a5.612 5.612 0 004.251 0c11.061-4.5 20.491-12.104 27.266-21.99C86.329 66.85 90 54.985 90 42.664V16.042a5.656 5.656 0 00-4.033-5.392zM69 68.522C69 70.907 67.03 72 64.584 72H34.092C31.646 72 30 70.907 30 68.522v-23.49C30 42.647 31.646 41 34.092 41H37v-9.828C37 24.524 41.354 18.5 49.406 18.5 57.37 18.5 62 24.066 62 31.172V41h2.584C67.03 41 69 42.647 69 45.032v23.49zM58 41v-9.828c0-4.671-3.708-8.472-8.5-8.472-4.791 0-8.5 3.8-8.5 8.472V41h17z"
+                      ></path>
+                    </svg>
+                  </span>
+                  <span data-i18n="encrypt">Encrypt</span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+
         <div class="container">
           <div class="row no-gutters">
             <div class="col-md-12 rm-pd">
@@ -239,7 +275,7 @@ <h3 class="pivx-bold-title-smaller">
                   <!-- WARNING -->
                   <div class="col-12" id='genKeyWarning' style='display: none;'>
                     <center>
-                      <div class="dcWallet-warningMessage" data-toggle="modal" data-target="#encryptWalletModal">
+                      <div id="gettingStartedBtn" class="dcWallet-warningMessage" data-toggle="modal" data-target="#encryptWalletModal">
                         <div class="shieldLogo">
                           <div class="shieldBackground">
                             <span class="dcWallet-svgIconPurple" style="top: 14px; left: 7px;">
@@ -257,40 +293,6 @@ <h3 class="pivx-bold-title-smaller">
                     </center>
                   </div>
 
-                  <div class="modal fade" id="encryptWalletModal" tabindex="-1" role="dialog" aria-labelledby="encryptWalletLabel" aria-hidden="true">
-                    <div class="modal-dialog modal-dialog-centered" role="document">
-                      <div class="modal-content exportKeysModalColor">
-                        <div class="modal-header">
-                          <h5 class="modal-title" data-i18n="encryptWallet" id="encryptWalletLabel">Encrypt wallet</h5>
-                          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                            <i class="fa-solid fa-xmark closeCross"></i>
-                          </button>
-                        </div>
-                        <div class="modal-body">
-                          <div class="row m-0">
-                            <div class="col-12 col-md-6 p-0 pr-0 pr-md-1">
-                              <input class="center-text textboxTransparency" data-i18n="encryptPasswordFirst" style="width: 100%; font-family: monospace;" type="password" id="newPassword" placeholder="Enter Password" />
-                            </div>
-                            <div class="col-12 col-md-6 p-0 pl-0 pl-md-1">
-                              <input class="center-text textboxTransparency" data-i18n="encryptPasswordSecond" style="width: 100%; font-family: monospace;" type="password" id="newPasswordRetype" placeholder="Re-enter Password" />
-                            </div>
-                          </div>
-                        </div>
-                        <div class="modal-footer text-right">
-                          <button class="pivx-button-small" onclick="MPW.guiEncryptWallet()">
-                            <span class="dcWallet-svgIconPurple">
-                              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-                                <path
-                                  d="M85.967 10.65l-32.15-9.481a13.466 13.466 0 00-7.632 0l-32.15 9.48C11.661 11.351 10 13.567 10 16.042v26.623c0 12.321 3.67 24.186 10.609 34.31 6.774 9.885 16.204 17.49 27.264 21.99a5.612 5.612 0 004.251 0c11.061-4.5 20.491-12.104 27.266-21.99C86.329 66.85 90 54.985 90 42.664V16.042a5.656 5.656 0 00-4.033-5.392zM69 68.522C69 70.907 67.03 72 64.584 72H34.092C31.646 72 30 70.907 30 68.522v-23.49C30 42.647 31.646 41 34.092 41H37v-9.828C37 24.524 41.354 18.5 49.406 18.5 57.37 18.5 62 24.066 62 31.172V41h2.584C67.03 41 69 42.647 69 45.032v23.49zM58 41v-9.828c0-4.671-3.708-8.472-8.5-8.472-4.791 0-8.5 3.8-8.5 8.472V41h17z"
-                                ></path>
-                              </svg>
-                            </span>
-                            <span data-i18n="encrypt">Encrypt</span>
-                          </button>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
                   <!-- // WARNING -->
                   <br />
 
@@ -1145,6 +1147,14 @@ <h2 id="mnLastSeen" class="stake-balances" style="overflow-wrap: anywhere; top:
                       </select>
                       <div id="analyticsDescriptor"></div>
 
+                      <div id="changePassword-container">
+                        <hr>
+                        <div onclick="MPW.doms.domGettingStartedBtn.click()" style="cursor: pointer; border: 0px; border-radius: 7px; padding: 6px 10px; margin: 0px 1px; background: linear-gradient(183deg, #9621ff9c, #7d21ffc7); color: #fff; font-weight: bold; width: fit-content; margin: 20px 0px;">
+                          Change Password
+                        </div>
+                        <hr>
+                      </div>
+
                       <!-- Default switch -->
                       <div class="custom-control custom-switch" style="margin-bottom:15px;">
                         <input type="checkbox" class="custom-control-input" id="debugToggler" onclick="MPW.toggleDebug()">

diff --git a/locale/de/translation.js b/locale/de/translation.js
@@ -73,9 +73,11 @@ export const de_translation = {
 
     // Encrypt wallet
     encryptWallet: 'Verschlüssel deine Brieftasche', //Encrypt wallet
+    encryptPasswordCurrent: '', //Current Password
     encryptPasswordFirst: 'Gib dein Passwort ein', //Enter Password
     encryptPasswordSecond: 'Wiederhole dein Passwort', //Re-enter Password
     encrypt: 'Verschlüsseln', //Encrypt
+    changePassword: '', //Change Password
 
     // Wallet Dashboard Sub-menu
     balanceBreakdown: 'Aufgeschlüsselter Kontostand', //Balance Breakdown

diff --git a/locale/en/translation.js b/locale/en/translation.js
@@ -70,9 +70,11 @@ export const en_translation = {
 
     // Encrypt wallet
     encryptWallet: 'Encrypt wallet', //
+    encryptPasswordCurrent: 'Current Password', //
     encryptPasswordFirst: 'Enter Password', //
     encryptPasswordSecond: 'Re-enter Password', //
     encrypt: 'Encrypt', //
+    changePassword: 'Change Password', //
 
     // Wallet Dashboard Sub-menu
     balanceBreakdown: 'Balance Breakdown', //

diff --git a/locale/fr/translation.js b/locale/fr/translation.js
@@ -73,9 +73,11 @@ export const fr_translation = {
 
     // Encrypt wallet
     encryptWallet: 'Cryptage du portefeuille', //Encrypt wallet
+    encryptPasswordCurrent: '', //Current Password
     encryptPasswordFirst: 'Entrer le mot de passe', //Enter Password
     encryptPasswordSecond: 'Réintroduire le mot de passe', //Re-enter Password
     encrypt: 'Crypter', //Encrypt
+    changePassword: '', //Change Password
 
     // Wallet Dashboard Sub-menu
     balanceBreakdown: 'Composition de la balance', //Balance Breakdown

diff --git a/locale/ph/translation.js b/locale/ph/translation.js
@@ -74,9 +74,11 @@ export const ph_translation = {
 
     // Encrypt wallet
     encryptWallet: 'Encrypt wallet', //Encrypt wallet
+    encryptPasswordCurrent: '', //Current Password
     encryptPasswordFirst: 'Ilagay ang Password', //Enter Password
     encryptPasswordSecond: 'Ilagay ulit ang Password', //Re-enter Password
     encrypt: 'Encrypt', //Encrypt
+    changePassword: '', //Change Password
 
     // Wallet Dashboard Sub-menu
     balanceBreakdown: 'Kabuoang Balanse', //Balance Breakdown

diff --git a/locale/pt-br/translation.js b/locale/pt-br/translation.js
@@ -73,9 +73,11 @@ export const pt_br_translation = {
 
     // Encrypt wallet
     encryptWallet: 'Criptografar carteira', //Encrypt wallet
+    encryptPasswordCurrent: '', //Current Password
     encryptPasswordFirst: 'Digite a senha', //Enter Password
     encryptPasswordSecond: 'Digite a senha novamente', //Re-enter Password
     encrypt: 'Criptografar', //Encrypt
+    changePassword: '', //Change Password
 
     // Wallet Dashboard Sub-menu
     balanceBreakdown: 'Composição do Saldo', //Balance Breakdown

diff --git a/locale/pt-pt/translation.js b/locale/pt-pt/translation.js
@@ -72,9 +72,11 @@ export const pt_pt_translation = {
 
     // Encrypt wallet
     encryptWallet: 'Criptografar carteira', //Encrypt wallet
+    encryptPasswordCurrent: '', //Current Password
     encryptPasswordFirst: 'Digite a senha', //Enter Password
     encryptPasswordSecond: 'Digite novamente a senha', //Re-enter Password
     encrypt: 'Criptografar', //Encrypt
+    changePassword: '', //Change Password
 
     // Wallet Dashboard Sub-menu
     balanceBreakdown: 'Composição do Saldo', //Balance Breakdown

diff --git a/locale/template/translation.js b/locale/template/translation.js
@@ -85,9 +85,11 @@ var translation = {
 
     // Encrypt wallet
     encryptWallet: '', //Encrypt wallet
+    encryptPasswordCurrent: '', //Current Password
     encryptPasswordFirst: '', //Enter Password
     encryptPasswordSecond: '', //Re-enter Password
     encrypt: '', //Encrypt
+    changePassword: '', //Change Password
 
     // Wallet Dashboard Sub-menu
     balanceBreakdown: '', //Balance Breakdown

diff --git a/locale/uwu/translation.js b/locale/uwu/translation.js
@@ -72,9 +72,11 @@ export const uwu_translation = {
 
     // Encrypt wallet
     encryptWallet: 'Encwypt wawwet', //Encrypt wallet
+    encryptPasswordCurrent: 'Cuwwent Password', //Current Password
     encryptPasswordFirst: 'Entwer Password', //Enter Password
     encryptPasswordSecond: 'Re-entwer Password', //Re-enter Password
     encrypt: 'Encwypt', //Encrypt
+    changePassword: 'Change Passwoword', //Change Password
 
     // Wallet Dashboard Sub-menu
     balanceBreakdown: 'Bwalance Bweakdown', //Balance Breakdown

diff --git a/scripts/global.js b/scripts/global.js
@@ -64,6 +64,7 @@ export async function start() {
         domDashboard: document.getElementById('dashboard'),
         domGuiStaking: document.getElementById('guiStaking'),
         domGuiWallet: document.getElementById('guiWallet'),
+        domGettingStartedBtn: document.getElementById('gettingStartedBtn'),
         domGuiBalance: document.getElementById('guiBalance'),
         domGuiBalanceTicker: document.getElementById('guiBalanceTicker'),
         domGuiBalanceValue: document.getElementById('guiBalanceValue'),
@@ -188,8 +189,10 @@ export async function start() {
         domAccessWalletBtn: document.getElementById('accessWalletBtn'),
         domVanityUiButtonTxt: document.getElementById('vanButtonText'),
         domGenKeyWarning: document.getElementById('genKeyWarning'),
-        domEncryptWarningTxt: document.getElementById('encryptWarningText'),
-        domEncryptBtnTxt: document.getElementById('encryptButton'),
+        domEncryptWalletLabel: document.getElementById('encryptWalletLabel'),
+        domEncryptPasswordCurrent: document.getElementById(
+            'changePassword-current'
+        ),
         domEncryptPasswordBox: document.getElementById('encryptPassword'),
         domEncryptPasswordFirst: document.getElementById('newPassword'),
         domEncryptPasswordSecond: document.getElementById('newPasswordRetype'),
@@ -280,6 +283,9 @@ export async function start() {
         // Alert DOM element
         domAlertPos: document.getElementsByClassName('alertPositioning')[0],
         domNetwork: document.getElementById('Network'),
+        domChangePasswordContainer: document.getElementById(
+            'changePassword-container'
+        ),
         domDebug: document.getElementById('Debug'),
         domTestnet: document.getElementById('Testnet'),
         domCurrencySelect: document.getElementById('currency'),
@@ -456,6 +462,9 @@ export async function start() {
 
     // If we haven't already (due to having no wallet, etc), display the Dashboard
     doms.domDashboard.click();
+
+    // Update the Encryption UI (If the user has a wallet, then it changes to "Change Password" rather than "Encrypt Wallet")
+    await updateEncryptionGUI();
 }
 
 function subscribeToNetworkEvents() {
@@ -1492,7 +1501,7 @@ export async function guiImportWallet() {
     if (fHasWallet) hideAllWalletOptions();
 }
 
-export function guiEncryptWallet() {
+export async function guiEncryptWallet() {
     // Disable wallet encryption in testnet mode
     if (cChainParams.current.isTestnet)
         return createAlert(
@@ -1514,14 +1523,47 @@ export function guiEncryptWallet() {
         );
     if (strPass !== strPassRetype)
         return createAlert('warning', ALERTS.PASSWORD_DOESNT_MATCH, [], 2250);
-    encryptWallet(strPass);
+
+    // If this wallet is already encrypted, then we'll check for the current password and ensure it decrypts properly too
+    if (await hasEncryptedWallet()) {
+        // Grab the pass, and wipe the dialog immediately
+        const strCurrentPass = doms.domEncryptPasswordCurrent.value;
+        doms.domEncryptPasswordCurrent.value = '';
+
+        // If the decryption fails: we don't allow changing the password
+        if (!(await decryptWallet(strCurrentPass))) return;
+    }
+
+    // Encrypt the wallet using the new password
+    await encryptWallet(strPass);
     createAlert('success', ALERTS.NEW_PASSWORD_SUCCESS, [], 5500);
 
+    // Hide and reset the encryption modal
     $('#encryptWalletModal').modal('hide');
     doms.domEncryptPasswordFirst.value = '';
     doms.domEncryptPasswordSecond.value = '';
 
-    doms.domWipeWallet.hidden = false;
+    // Display the 'Unlock/Lock Wallet' buttons accordingly based on state
+    doms.domWipeWallet.hidden = masterKey.isViewOnly;
+    doms.domRestoreWallet.hidden = !masterKey.isViewOnly;
+
+    // Update the encryption UI (changes to "Change Password" now)
+    await updateEncryptionGUI(true);
+}
+
+/** Update the "Encrypt Wallet" / "Change Password" dialog to match the current wallet state */
+export async function updateEncryptionGUI(fEncrypted = null) {
+    // If no param is provided, check if a wallet exists in the database
+    if (fEncrypted === null) {
+        fEncrypted = await hasEncryptedWallet();
+    }
+    // If the wallet is encrypted, we display a "Current Password" input in the Encryption dialog, otherwise, only accept New Passwords
+    doms.domEncryptPasswordCurrent.style.display = fEncrypted ? '' : 'none';
+    // And we adjust the displays to accomodate the mode as well
+    doms.domEncryptWalletLabel.innerText = fEncrypted
+        ? translation.changePassword
+        : translation.encryptWallet;
+    doms.domChangePasswordContainer.style.display = fEncrypted ? '' : 'none';
 }
 
 export async function toggleExportUI() {

diff --git a/scripts/wallet.js b/scripts/wallet.js
@@ -895,7 +895,7 @@ export async function decryptWallet(strPassword = '') {
 }
 
 /**
- * @returns {Promise<bool>} If the wallet is unlocked
+ * @returns {Promise<bool>} If the wallet has an encrypted database backup
  */
 export async function hasEncryptedWallet() {
     const database = await Database.getInstance();