Merge pull request #328 from aeternity/feature/fix-i18n-issues

Feature/fix i18n issues

.eslintrc.js

@@ -12,7 +12,12 @@ module.exports = {
   },
   // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
   // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
-  extends: ['plugin:vue/essential', 'airbnb-base', 'plugin:prettier/recommended'],
+  extends: [
+    'plugin:vue-i18n/recommended',
+    'plugin:vue/essential',
+    'airbnb-base',
+    'plugin:prettier/recommended'
+  ],
   // required to lint *.vue files
   plugins: [
     'vue'
@@ -23,7 +28,10 @@ module.exports = {
       webpack: {
         config: './webpack.config.js'
       }
-    }
+    },
+    'vue-i18n': {
+      localeDir: './src/locales/*.json',
+    },
   },
   // add your custom rules here
   rules: {
@@ -34,13 +42,16 @@ module.exports = {
     }],
       // disallow reassignment of function parameters
       // disallow parameter object manipulation except for specific exclusions
-      'no-param-reassign': ['error', {
+    'no-param-reassign': ['error', {
       props: true,
       ignorePropertyModificationsFor: [
         'state', // for vuex state
       ]
     }],
     // allow debugger during development
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'vue-i18n/no-dynamic-keys': 'error',
+    'vue-i18n/no-unused-keys': 'error',
+    'vue-i18n/no-raw-text': 'error',
   }
 }

package.json

@@ -94,6 +94,7 @@
     "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-prettier": "^3.1.3",
     "eslint-plugin-vue": "^5.2.3",
+    "eslint-plugin-vue-i18n": "^0.3.0",
     "file-loader": "^1.1.11",
     "generate-json-webpack-plugin": "^0.3.1",
     "html-webpack-plugin": "^3.2.0",

src/aepp/App.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue-i18n/no-raw-text -->
 <template>
   <div>
     <p data-cy="wallet-found" v-if="wallet.found">Wallet found</p>

src/options/App.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
-    <p>Superhero is Open-source! Visit <a href="superhero.com">Superhero.com</a></p>
+    <!--eslint-disable-next-line vue-i18n/no-raw-text-->
+    <p>{{ $t('options.text') }}<a href="superhero.com">Superhero.com</a></p>
   </div>
 </template>
 

src/phishing/App.vue

@@ -3,32 +3,24 @@
     <ae-main>
       <ae-panel class="text-center">
         <img src="../icons/icon_128.png" alt="Superhero logo" />
-        <h1><ae-icon fill="primary" face="round" name="info" />Superhero Phishing Detection</h1>
-        <p>
-          This domain is currently on the Superhero domain warning list. This means that based on
-          information available to us, Superhero believes this domain could currently compromise
-          your security and, as an added safety feature, Superhero has restricted access to the
-          site. To override this, please read the rest of this warning for instructions on how to
-          continue at your own risk.
-        </p>
-        <p>
-          There are many reasons sites can appear on our warning list, and our warning list compiles
-          from other widely used industry lists. Such reasons can include known fraud or security
-          risks, such as domains that test positive on the <a>Superhero Phishing Detector</a>.
-          Domains on these warning lists may include outright malicious websites and legitimate
-          websites that have been compromised by a malicious actor.
-        </p>
-        <p>
-          Note that this warning list is compiled on a voluntary basis. This list may be inaccurate
-          or incomplete. Just because a domain does not appear on this list is not an implicit
-          guarantee of that domain's safety. As always, your transactions are your own
-          responsibility. If you wish to interact with any domain on our warning list, you can do so
-          by <a @click.prevent="continueHost">continuing at your own risk</a>.
-        </p>
-        <p>
-          If you think this domain is incorrectly flagged or if a blocked legitimate website has
-          resolved its security issues,<a> please file an issue</a>.
-        </p>
+        <h1><ae-icon fill="primary" face="round" name="info" />{{ $t('phishing.detection') }}</h1>
+        <i18n
+          v-for="(item, index) in $t('phishing.sections').length"
+          :key="index"
+          :path="`phishing.sections[${index}].text`"
+          tag="p"
+        >
+          <template v-slot:insertion>
+            <a>
+              {{ $t(`phishing.sections[${index}].insertion`) }}
+            </a>
+          </template>
+          <template v-slot:continueHost>
+            <a @click.prevent="continueHost">
+              {{ $t(`phishing.sections[${index}].continueHost`) }}
+            </a>
+          </template>
+        </i18n>
       </ae-panel>
     </ae-main>
   </div>