feat: common components localization

client/components/common/page-delete.vue

@@ -3,18 +3,19 @@
     v-card.wiki-form
       .dialog-header.is-short.is-red
         v-icon.mr-2(color='white') highlight_off
-        span Delete Page
+        span {{$t('common:page.delete')}}
       v-card-text
-        .body-2 Are you sure you want to delete page #[span.red--text.text--darken-2 {{pageTitle}}]?
+        i18next.body-2(path='common:page.deleteTitle', tag='div')
-        .caption The page can be restored from the administration area.
+          span.red--text.text--darken-2(place='title') {{pageTitle}}
+        .caption {{$t('common:page.deleteSubtitle')}}
         v-chip.mt-3.ml-0.mr-1(label, color='red lighten-4', disabled, small)
           .caption.red--text.text--darken-2 {{pageLocale.toUpperCase()}}
         v-chip.mt-3.mx-0(label, color='red lighten-5', disabled, small)
           span.red--text.text--darken-2 /{{pagePath}}
       v-card-chin
         v-spacer
-        v-btn(flat, @click='discard', :disabled='loading') Cancel
+        v-btn(flat, @click='discard', :disabled='loading') {{$t('common:actions.cancel')}}
-        v-btn(color='red darken-2', @click='deletePage', :loading='loading').white--text Delete
+        v-btn(color='red darken-2', @click='deletePage', :loading='loading').white--text {{$t('common:actions.delete')}}
 </template>
 
 <script>
@@ -77,7 +78,7 @@ export default {
               }, 1200)
             }, 400)
           } else {
-            throw new Error(_.get(resp, 'data.pages.delete.responseResult.message', 'An unexpected error occured.'))
+            throw new Error(_.get(resp, 'data.pages.delete.responseResult.message', this.$t('common:error.unexpected')))
           }
         } catch (err) {
           this.$store.commit('pushGraphError', err)

client/components/common/password-strength.vue

@@ -44,22 +44,22 @@ export default {
         return
       }
       const strength = zxcvbn(pwd)
-      this.passwordStrength = _.round((strength.score + 1 ) / 5 * 100)
+      this.passwordStrength = _.round((strength.score + 1) / 5 * 100)
       if (this.passwordStrength <= 20) {
         this.passwordStrengthColor = 'red'
-        this.passwordStrengthText = 'Very Weak'
+        this.passwordStrengthText = this.$t('common:password.veryWeak')
       } else if (this.passwordStrength <= 40) {
         this.passwordStrengthColor = 'orange'
-        this.passwordStrengthText = 'Weak'
+        this.passwordStrengthText = this.$t('common:password.weak')
       } else if (this.passwordStrength <= 60) {
         this.passwordStrengthColor = 'teal'
-        this.passwordStrengthText = 'Average'
+        this.passwordStrengthText = this.$t('common:password.average')
       } else if (this.passwordStrength <= 80) {
         this.passwordStrengthColor = 'green'
-        this.passwordStrengthText = 'Strong'
+        this.passwordStrengthText = this.$t('common:password.strong')
       } else {
         this.passwordStrengthColor = 'green'
-        this.passwordStrengthText = 'Very Strong'
+        this.passwordStrengthText = this.$t('common:password.veryStrong')
       }
     }, 100)
   }

client/components/common/search-results.vue

@@ -3,19 +3,19 @@
     .search-results-container
       .search-results-help(v-if='search.length < 2')
         img(src='/svg/icon-search-alt.svg')
-        .mt-4 Type at least 2 characters to start searching...
+        .mt-4 {{$t('common:header.searchHint')}}
       .search-results-loader(v-else-if='searchIsLoading && results.length < 1')
         orbit-spinner(
           :animation-duration='1000'
           :size='100'
           color='#FFF'
         )
-        .headline.mt-5 Searching...
+        .headline.mt-5 {{$t('common:header.searchLoading')}}
       .search-results-none(v-else-if='!searchIsLoading && results.length < 1')
         img(src='/svg/icon-no-results.svg', alt='No Results')
-        .subheading No pages matching your query.
+        .subheading {{$t('common:header.searchNoResult')}}
       template(v-if='results.length > 0')
-        v-subheader.white--text Found {{response.totalHits}} results
+        v-subheader.white--text {{$t('common:header.searchResultsCount', { total: response.totalHits })}}
         v-list.search-results-items.radius-7(two-line)
           template(v-for='(item, idx) of results')
             v-list-tile(@click='goToPage(item)', :key='item.id', :class='idx === cursor ? `highlighted` : ``')
@@ -35,7 +35,7 @@
           :length='paginationLength'
         )
       template(v-if='suggestions.length > 0')
-        v-subheader.white--text.mt-3 Did you mean...
+        v-subheader.white--text.mt-3 {{$t('common:header.searchDidYouMean')}}
         v-list.search-results-suggestions.radius-7(dense, dark)
           template(v-for='(term, idx) of suggestions')
             v-list-tile(:key='term', @click='setSearchTerm(term)', :class='idx + results.length === cursor ? `highlighted` : ``')
@@ -47,10 +47,10 @@
       .text-xs-center.pt-5(v-if='search.length > 1')
         v-btn(outline, color='orange', @click='search = ``', v-if='results.length > 0')
           v-icon(left) save
-          span Copy Search Link
+          span {{$t('common:header.searchCopyLink')}}
         v-btn(outline, color='pink', @click='search = ``')
           v-icon(left) clear
-          span Close
+          span {{$t('common:header.searchClose')}}
 </template>
 
 <script>