From abdb8fd6971d2b546cd719ea79ac83aff7475a19 Mon Sep 17 00:00:00 2001
From: JSKitty <jskitty@protonmail.com>
Date: Thu, 9 Nov 2023 16:43:02 +0000
Subject: [PATCH] i18n Modal Fixes (#254)

* Fix Seed Phrase creation modal

* Fix "Create New Wallet" not translating

* Fix "Encrypt/Change Pass" modal not translating

* Fix negotiateLanguages typo

* Fix "Lang Parent" fallback if parent doesn't exist

* Prettier
---
 index.template.html                 | 35 -----------------------------
 scripts/dashboard/CreateWallet.vue  | 30 ++++++++-----------------
 scripts/dashboard/GenKeyWarning.vue | 10 ++++-----
 scripts/i18n.js                     | 12 ++++++++--
 4 files changed, 24 insertions(+), 63 deletions(-)

diff --git a/index.template.html b/index.template.html
index b1d0bb2d..1f4fa804 100644
--- a/index.template.html
+++ b/index.template.html
@@ -133,41 +133,6 @@ <h5 data-i18n="balanceBreakdown" class="modal-title" id="walletBreakdownModalLab
           </div>
         </div>
 
-        <br />
-        <!-- // MNEMONIC MODAL -->
-        <div class="modal fade" id="mnemonicModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
-          <div class="modal-dialog modal-dialog-centered" role="document">
-            <div class="modal-content">
-              <div class="modal-body center-text">
-                <p id="ModalMnemonicLabel" class="modal-label"></p>
-                <div id="ModalMnemonic" class="auto-fit">
-                  <span data-i18n="thisIsYourSeed">This is your seed phrase:</span>
-                  <b>
-                    <div translate="no" class="seed-phrase noselect notranslate" id="ModalMnemonicContent">
-                    </div>
-                  </b>
-                  <br />
-                  <span data-i18n="writeDownSeed">Write it down somewhere. You'll only see this <b>once!</b></span>
-                  <br />
-                  <span data-i18n="doNotShareWarning">Anyone with a copy of it can access <b>all</b> of your funds.</span>
-                  <br />
-                  <b data-i18n="doNotShare">Do NOT share it with anybody.</b> <br />
-                  <br />
-                  <a href="https://www.ledger.com/blog/how-to-protect-your-seed-phrase" target="_blank" rel="noopener noreferrer">
-                    <i data-i18n="digitalStoreNotAdvised">It is <b>NOT</b> advised to store this digitally.</i>
-                  </a>
-                  <br />
-                  <br />
-                  <input data-i18n="optionalPassphrase" class="center-text" type="password" id="ModalMnemonicPassphrase" placeholder="Optional Passphrase" />
-                  <br />
-                </div>
-                <div class="modal-footer">
-                  <button type="button" data-i18n="writtenDown" id="modalMnemonicConfirmButton" class="pivx-button-big">I have written down my seed phrase</button>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
         <br />
         <!-- // CONFIRM MODAL -->
         <div class="modal" id="confirmModal" tabindex="-1" style="z-index: 2000; background-color: #00000063;" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
diff --git a/scripts/dashboard/CreateWallet.vue b/scripts/dashboard/CreateWallet.vue
index fc1a8498..42751c71 100644
--- a/scripts/dashboard/CreateWallet.vue
+++ b/scripts/dashboard/CreateWallet.vue
@@ -51,9 +51,9 @@ async function generateWallet() {
 
             <button class="pivx-button-big" @click="generateWallet()">
                 <span class="buttoni-icon" v-html="pLogo"> </span>
-                <span class="buttoni-text" data-i18n="dCardOneButton"
-                    >Create A New Wallet</span
-                >
+                <span class="buttoni-text">
+                    {{ translation.dCardOneButton }}
+                </span>
             </button>
         </div>
     </div>
@@ -62,9 +62,7 @@ async function generateWallet() {
             <template #body>
                 <p class="modal-label"></p>
                 <div class="auto-fit">
-                    <span data-i18n="thisIsYourSeed"
-                        >This is your seed phrase:</span
-                    >
+                    <span v-html="translation.thisIsYourSeed"></span>
                     <b>
                         <div
                             translate="no"
@@ -74,17 +72,11 @@ async function generateWallet() {
                         </div>
                     </b>
                     <br />
-                    <span data-i18n="writeDownSeed"
-                        >Write it down somewhere. You'll only see this
-                        <b>once!</b></span
-                    >
+                    <span v-html="translation.writeDownSeed"></span>
                     <br />
-                    <span data-i18n="doNotShareWarning"
-                        >Anyone with a copy of it can access <b>all</b> of your
-                        funds.</span
-                    >
+                    <span v-html="translation.doNotShareWarning"> </span>
                     <br />
-                    <b data-i18n="doNotShare">Do NOT share it with anybody.</b>
+                    <b> {{ translation.doNotShare }} </b>
                     <br />
                     <br />
                     <a
@@ -92,10 +84,7 @@ async function generateWallet() {
                         target="_blank"
                         rel="noopener noreferrer"
                     >
-                        <i data-i18n="digitalStoreNotAdvised"
-                            >It is <b>NOT</b> advised to store this
-                            digitally.</i
-                        >
+                        <i v-html="translation.digitalStoreNotAdvised"></i>
                     </a>
                     <br />
                     <div v-if="fAdvancedMode">
@@ -113,11 +102,10 @@ async function generateWallet() {
                 <center>
                     <button
                         type="button"
-                        data-i18n="writtenDown"
                         class="pivx-button-big"
                         @click="showModal = false"
                     >
-                        I have written down my seed phrase
+                        {{ translation.writtenDown }}
                     </button>
                 </center>
             </template>
diff --git a/scripts/dashboard/GenKeyWarning.vue b/scripts/dashboard/GenKeyWarning.vue
index a42b34ca..6d1f63ed 100644
--- a/scripts/dashboard/GenKeyWarning.vue
+++ b/scripts/dashboard/GenKeyWarning.vue
@@ -84,7 +84,7 @@ function submit() {
             modalClass="exportKeysModalColor"
         >
             <template #header>
-                <h5 class="modal-title">Encrypt wallet</h5>
+                <h5 class="modal-title">{{ translation.encryptWallet }}</h5>
                 <button
                     type="button"
                     class="close"
@@ -102,7 +102,7 @@ function submit() {
                         v-model="currentPassword"
                         style="width: 100%; font-family: monospace"
                         type="password"
-                        placeholder="Current Password"
+                        :placeholder="translation.encryptPasswordCurrent"
                         v-show="isEncrypt"
                     />
                     <div class="col-12 col-md-6 p-0 pr-0 pr-md-1">
@@ -112,7 +112,7 @@ function submit() {
                             data-i18n="encryptPasswordFirst"
                             style="width: 100%; font-family: monospace"
                             type="password"
-                            placeholder="Enter Password"
+                            :placeholder="translation.encryptPasswordFirst"
                         />
                     </div>
                     <div class="col-12 col-md-6 p-0 pl-0 pl-md-1">
@@ -122,7 +122,7 @@ function submit() {
                             data-i18n="encryptPasswordSecond"
                             style="width: 100%; font-family: monospace"
                             type="password"
-                            placeholder="Re-enter Password"
+                            :placeholder="translation.encryptPasswordSecond"
                         />
                     </div>
                 </div>
@@ -139,7 +139,7 @@ function submit() {
                             ></path>
                         </svg>
                     </span>
-                    <span data-i18n="encrypt">Encrypt</span>
+                    <span data-i18n="encrypt"> {{ translation.encrypt }} </span>
                 </button>
             </template>
         </Modal>
diff --git a/scripts/i18n.js b/scripts/i18n.js
index 53ddb554..93970287 100644
--- a/scripts/i18n.js
+++ b/scripts/i18n.js
@@ -27,7 +27,15 @@ const defaultLang = 'en';
  * @returns the 'parent' language of a langcode
  */
 function getParentLanguage(langName) {
-    return langName.includes('-') ? langName.split('-')[0] : defaultLang;
+    const strParentCode = langName.includes('-')
+        ? langName.split('-')[0]
+        : defaultLang;
+    // Ensure the code exists
+    if (arrActiveLangs.find((lang) => lang.code === strParentCode)) {
+        return strParentCode;
+    } else {
+        return defaultLang;
+    }
 }
 
 /**
@@ -100,7 +108,7 @@ export async function switchTranslation(langName) {
             window.navigator.languages,
             arrActiveLangs.slice(1).map((l) => l.code),
             {
-                defualtLocale: defaultLang,
+                defaultLocale: defaultLang,
             }
         )[0];
     }