Merge pull request #330 from dextor19/feature/vue-i18n

added vue-i18n package to pinry-spa with english support and locale changer to navigation bar

pinry-spa/package.json

@@ -13,6 +13,7 @@
     "core-js": "^3.3.2",
     "register-service-worker": "^1.6.2",
     "vue": "^2.6.10",
+    "vue-i18n": "8",
     "vue-masonry": "^0.11.8",
     "vue-router": "^3.1.3"
   },

pinry-spa/src/assets/locales/en.json

@@ -0,0 +1,79 @@
+{
+    "loginTitle": "Login",
+    "loginButton": "Login",
+    "closeButton": "Close",
+    "end": "End",
+    "bookmarkletLink": "BookmarkletLink",
+    "createLink": "Create",
+    "pinLink": "Pin",
+    "boardLink": "Board",
+    "myLink": "My",
+    "boardsLink": "Boards",
+    "pinsLink": "Pins",
+    "profileLink": "Profile",
+    "browserExtensionsLink": "Browser Extensions",
+    "chromeLink": "Chrome",
+    "firefoxLink": "Firefox",
+    "signUpLink": "Sign up",
+    "logInLink": "Log in",
+    "logOutLink": "Log out",
+    "signUpTitle": "Sign Up",
+    "registerButton": "Register",
+    "pageNotFound": "Oops! Page Not Found",
+    "error404": "Error 404",
+    "pinsInBoard": "Pins in board: ",
+    "isPrivateCheckbox": "is private",
+    "createBoardButton": "Create Board",
+    "saveChangesButton": "Save Changes",
+    "pinnedByTitle": "Pinned by ",
+    "sourceButton": "Source",
+    "originalImageButton": "Original Image",
+    "permalinkButton": "Permalink",
+    "pinnedByInfo": "Pinned by",
+    "sourceLink": "Source",
+    "userProfileCardContent": "Yet another Pinry user.",
+    "pinsUserProfileCardLink": "Pins",
+    "boardsUserProfileCardLink": "Boards",
+    "profileUserProfileCardLink": "Profile",
+    "tokenUserProfileCardTitle": "Token",
+    "tokenUserProfileCardContent": "Your Token is:",
+    "pleaseReadTokenUserProfileCardContent": "Please read ",
+    "forMoreDetailsParagraph": " for more detail to know how to use it.",
+    "drfApiDocumentationLink": "DRF API Documentation",
+    "searchButton": "Search",
+    "noResultsFound": "No results found",
+    "SearchPanelBoardOption": "Board",
+    "SearchPanelTagOption": "Tag",
+    "Add2BoardModalCardTitle": "Add Pin to Board",
+    "Add2BoardModalCardButton": "Add Pin to Board",
+    "FileUploadDescription": "Drop your files here or click to upload",
+    "filterSelectCreateNewBoardButton": "Create New Board",
+    "pinCreateModalEmptySlot": "There are no items",
+    "pinCreateModalCreatePinButton": "Create Pin",
+    "pinCreateModalSaveChangesButton": "Save Changes",
+    "passwordSignUpPlaceholder": "Your password",
+    "passwordLoginPlaceholder": "Your password",
+    "boardNamePlaceholder": "board name",
+    "usernamePlaceholder": "Your Username",
+    "emailPlaceholder": "Your email",
+    "repeatPasswordInputPlaceholder": "Your password again",
+    "chooseFilterPlaceholder": "Choose Filter",
+    "selectFilterPlaceholder": "select a filter then type to filter",
+    "searchBoardPlaceholder": "type to search board",
+    "filterSelectSelectBoardPlaceholder": "Type to filter or Create one",
+    "pinCreateModalImageURLPlaceholder": "where to fetch the image",
+    "pinCreateModalImageSourcePlaceholder": "where to find the pin",
+    "pinCreateModalImageTagsPlaceholder": "Add a tag",
+    "pinCreateModalImageDescriptionPlaceholder": "idea from this pin",
+    "emailLabel": "Email",
+    "usernameLabel": "Username",
+    "passwordLabel": "Password",
+    "repeatPasswordLabel": "Password repeat",
+    "nameLabel": "name",
+    "privacyOptionLabel": "Privacy Option",
+    "imageUrlLabel": "Image URL",
+    "imageSourceLabel": "Image Source",
+    "tagsLabel": "Tags",
+    "descriptionLabel": "Descripton",
+    "selectBoardLabel": "Select Board"
+}

pinry-spa/src/components/BoardEdit.vue

@@ -7,57 +7,57 @@
         </header>
         <section class="modal-card-body">
           <div v-if="!isEdit">
-            <b-field label="Name"
+            <b-field v-bind:label="$t('nameLabel')"
                        :type="createModel.form.name.type"
                        :message="createModel.form.name.error">
                 <b-input
                   type="text"
                   v-model="createModel.form.name.value"
-                  placeholder="board name"
+                  v-bind:placeholder="$t('boardNamePlaceholder')"
                   maxlength="128"
                   >
                 </b-input>
             </b-field>
-            <b-field label="Privacy Option"
+            <b-field v-bind:label="$t('privacyOptionLabel')"
                        :type="createModel.form.private.type"
                        :message="createModel.form.private.error">
                 <b-checkbox v-model="createModel.form.private.value">
-                    is private
+                    {{ $t("isPrivateCheckbox") }}
                 </b-checkbox>
               </b-field>
           </div>
           <div v-if="isEdit">
-            <b-field label="Name"
+            <b-field v-bind:label="$t('nameLabel')"
                        :type="editModel.form.name.type"
                        :message="editModel.form.name.error">
                 <b-input
                   type="text"
                   v-model="editModel.form.name.value"
-                  placeholder="board name"
+                  v-bind:placeholder="$t('boardNamePlaceholder')"
                   maxlength="128"
                   >
                 </b-input>
             </b-field>
-            <b-field label="Privacy Option"
+            <b-field v-bind:label="$t('privacyOptionLabel')"
                        :type="editModel.form.private.type"
                        :message="editModel.form.private.error">
                 <b-checkbox v-model="editModel.form.private.value">
-                    is private
+                    {{ $t("isPrivateCheckbox") }}
                 </b-checkbox>
               </b-field>
           </div>
         </section>
         <footer class="modal-card-foot">
-          <button class="button" type="button" @click="$parent.close()">Close</button>
+          <button class="button" type="button" @click="$parent.close()">{{ $t("closeButton") }}</button>
           <button
             v-if="!isEdit"
             @click="createBoard"
-            class="button is-primary">Create Board
+            class="button is-primary">{{ $t("createBoardButton") }}
           </button>
           <button
             v-if="isEdit"
             @click="saveBoardChanges"
-            class="button is-primary">Save Changes
+            class="button is-primary">{{ $t("saveChangesButton") }}
           </button>
         </footer>
       </div>

pinry-spa/src/components/Boards.vue

@@ -38,7 +38,7 @@
                     <p class="sub-title board-info">{{ item.name }}</p>
                     <p class="description">
                       <small>
-                        Pins in board: <span class="num-pins">{{ item.total_pins }}</span>
+                        {{ $t("pinsInBoard") }}<span class="num-pins">{{ item.total_pins }}</span>
                       </small>
                     </p>
                   </div>

pinry-spa/src/components/LoginForm.vue

@@ -3,39 +3,39 @@
     <div @keydown="triggerDoLogin">
       <div class="modal-card" style="width: auto">
         <header class="modal-card-head">
-          <p class="modal-card-title">Login</p>
+          <p class="modal-card-title">{{ $t("loginTitle") }}</p>
         </header>
         <section class="modal-card-body">
-          <b-field label="Username"
+          <b-field v-bind:label="$t('usernameLabel')"
                    :type="form.username.type"
                    :message="form.username.error">
             <b-input
               name="username"
               type="text"
               v-model="form.username.value"
-              placeholder="Your Username"
+              v-bind:placeholder="$t('usernamePlaceholder')"
               maxlength="30"
               required>
             </b-input>
           </b-field>
 
-          <b-field label="Password"
+          <b-field v-bind:label="$t('passwordLabel')"
                    :type="form.password.type"
                    :message="form.password.error">
             <b-input
               type="password"
               v-model="form.password.value"
               password-reveal
-              placeholder="Your password"
+              v-bind:placeholder="$t('passwordLoginPlaceholder')"
               required>
             </b-input>
           </b-field>
         </section>
         <footer class="modal-card-foot">
-          <button class="button" type="button" @click="$parent.close()">Close</button>
+          <button class="button" type="button" @click="$parent.close()">{{ $t("closeButton") }}</button>
           <button
             @click="doLogin"
-            class="button is-primary">Login</button>
+            class="button is-primary">{{ $t("loginButton") }}</button>
         </footer>
       </div>
     </div>

pinry-spa/src/components/PHeader.vue

@@ -18,24 +18,24 @@
         <div id="PinryNav" class="navbar-menu" :class="{ 'is-active': active}">
           <div class="navbar-start">
             <a class="navbar-item" :href="bookmarklet">
-              Bookmarklet
+              {{ $t("bookmarkletLink") }}
             </a>
             <div
               v-if="user.loggedIn"
               class="navbar-item has-dropdown is-hoverable">
               <a class="navbar-link">
-                Create
+                {{ $t("createLink") }}
               </a>
               <div class="navbar-dropdown">
                 <a
                   @click="createPin"
                   class="navbar-item">
-                  Pin
+                  {{ $t("pinLink") }}
                 </a>
                 <a
                   @click="createBoard"
                   class="navbar-item">
-                  Board
+                  {{ $t("boardLink") }}
                 </a>
               </div>
             </div>
@@ -43,36 +43,36 @@
               v-if="user.loggedIn"
               class="navbar-item has-dropdown is-hoverable">
               <a class="navbar-link">
-                My
+                {{ $t("myLink") }}
               </a>
               <div class="navbar-dropdown">
                 <router-link
                   :to="{ name: 'boards4user', params: {username: user.meta.username} }"
                   class="navbar-item">
-                  Boards
+                  {{ $t("boardsLink") }}
                 </router-link>
                 <router-link
                   :to="{ name: 'user', params: {user: user.meta.username} }"
                   class="navbar-item">
-                  Pins
+                  {{ $t("pinsLink") }}
                 </router-link>
                 <router-link
                   :to="{ name: 'profile4user', params: {username: user.meta.username} }"
                   class="navbar-item">
-                  Profile
+                  {{ $t("profileLink") }}
                 </router-link>
               </div>
             </div>
             <div class="navbar-item has-dropdown is-hoverable">
               <a class="navbar-link">
-                Browser Extensions
+                {{ $t("browserExtensionsLink") }}
               </a>
               <div class="navbar-dropdown">
                 <a class="navbar-item" href="https://chrome.google.com/webstore/detail/jmhdcnmfkglikfjafdmdikoonedgijpa/">
-                  Chrome
+                  {{ $t("chromeLink") }}
                 </a>
                 <a class="navbar-item" href="https://addons.mozilla.org/en-US/firefox/addon/add-to-pinry/">
-                  Firefox
+                  {{ $t("firefoxLink") }}
                 </a>
               </div>
             </div>
@@ -93,22 +93,27 @@
                   @click="signUp"
                   v-show="!user.loggedIn"
                   class="button is-primary">
-                  <strong>Sign up</strong>
+                  <strong>{{ $t("signUpLink") }}</strong>
                 </a>
                 <a
                   v-show="!user.loggedIn"
                   v-on:click="logIn"
                   class="button is-light">
-                  Log in
+                  {{ $t("logInLink") }}
                 </a>
                 <a
                   v-show="user.loggedIn"
                   v-on:click="logOut"
                   class="button is-light">
-                  Log out
+                  {{ $t("logOutLink") }}
                 </a>
               </div>
             </div>
+            <div class="locale-changer">
+              <select v-model="$i18n.locale" @change="setLocale($event)">
+                 <option v-for="locale in $i18n.availableLocales" :key="`locale-${locale}`" :value="locale">{{ locale }}</option>
+              </select>
+            </div>
           </div>
         </div>
       </div>
@@ -129,6 +134,7 @@ export default {
         loggedIn: false,
         meta: {},
       },
+      langs: ['en'],
     };
   },
   computed: {
@@ -139,6 +145,9 @@ export default {
     },
   },
   methods: {
+    setLocale(event) {
+      localStorage.setItem('localeCode', event.target.value);
+    },
     toggleMenu() {
       this.active = !this.active;
     },

pinry-spa/src/components/PinPreview.vue

@@ -19,7 +19,7 @@
               </div>
               <div class="media-content">
                 <div class="is-pulled-left">
-                  <p class="title is-4 pin-meta-info"><span class="dim">Pinned by </span><span class="author">{{ pinItem.author }}</span></p>
+                  <p class="title is-4 pin-meta-info"><span class="dim">{{ $t("pinnedByTitle") }}</span><span class="author">{{ pinItem.author }}</span></p>
                   <p class="subtitle is-6" v-show="pinItem.tags.length > 0">
                     <span class="subtitle dim">in&nbsp;</span>
                     <template v-for="tag in pinItem.tags">
@@ -33,7 +33,7 @@
                         v-show="pinItem.referer !== null"
                         class="meta-link"
                         type="is-warning">
-                      Source
+                      {{ $t("sourceButton") }}
                     </b-button>
                   </a>
                   <a :href="pinItem.original_image_url" target="_blank">
@@ -41,14 +41,14 @@
                         v-show="pinItem.original_image_url !== null"
                         class="meta-link"
                         type="is-link">
-                        Original Image
+                        {{ $t("originalImageButton") }}
                     </b-button>
                   </a>
                   <b-button
                       @click="closeAndGoTo"
                       class="meta-link"
                       type="is-success">
-                      Permalink
+                      {{ $t("permalinkButton") }}
                   </b-button>
                 </div>
               </div>

pinry-spa/src/components/Pins.vue

@@ -42,7 +42,7 @@
                       <img class="avatar" :src="item.avatar" alt="">
                     </div>
                     <div class="pin-info">
-                      <span class="dim">Pinned by&nbsp;
+                      <span class="dim">{{ $t("pinnedByInfo") }}&nbsp;
                         <span>
                           <router-link
                             :to="{ name: 'user', params: {user: item.author} }">
@@ -58,7 +58,7 @@
                             </span>
                           </template>
                         </template>
-                        • <a :href="item.referer" target="_blank">Source</a>
+                        • <a :href="item.referer" target="_blank">{{ $t("sourceLink") }}</a>
                       </span>
                     </div>
                     <div class="is-clearfix"></div>

pinry-spa/src/components/SignUpForm.vue

@@ -3,60 +3,60 @@
     <div>
       <div class="modal-card" style="width: auto">
         <header class="modal-card-head">
-          <p class="modal-card-title">Sign Up</p>
+          <p class="modal-card-title">{{ $t("signUpTitle") }}</p>
         </header>
         <section class="modal-card-body">
-          <b-field label="Username"
+          <b-field v-bind:label="$t('usernameLabel')"
                    :type="form.username.type"
                    :message="form.username.error">
             <b-input
               type="string"
               v-model="form.username.value"
-              placeholder="Your Username"
+              v-bind:placeholder="$t('usernamePlaceholder')"
               maxlength="30"
               required>
             </b-input>
           </b-field>
 
-          <b-field label="Email"
+          <b-field v-bind:label="$t('emailLabel')"
                    :type="form.email.type"
                    :message="form.email.error">
             <b-input
               type="email"
               v-model="form.email.value"
               password-reveal
-              placeholder="Your email"
+              v-bind:placeholder="$t('emailPlaceholder')"
               required>
             </b-input>
           </b-field>
-          <b-field label="Password"
+          <b-field v-bind:label="$t('passwordLabel')"
                    :type="form.password.type"
                    :message="form.password.error">
             <b-input
               type="password"
               v-model="form.password.value"
               password-reveal
-              placeholder="Your password"
+              v-bind:placeholder="$t('passwordSignUpPlaceholder')"
               required>
             </b-input>
           </b-field>
-          <b-field label="Password repeat"
+          <b-field v-bind:label="$t('repeatPasswordLabel')"
                    :type="form.password_repeat.type"
                    :message="form.password_repeat.error">
             <b-input
               type="password"
               v-model="form.password_repeat.value"
               password-reveal
-              placeholder="Your password again"
+              v-bind:placeholder="$t('repeatPasswordInputPlaceholder')"
               required>
             </b-input>
           </b-field>
         </section>
         <footer class="modal-card-foot">
-          <button class="button" type="button" @click="$parent.close()">Close</button>
+          <button class="button" type="button" @click="$parent.close()">{{ $t("closeButton") }}</button>
           <button
             @click="doRegister"
-            class="button is-primary">Register</button>
+            class="button is-primary">{{ $t("registerButton") }}</button>
         </footer>
       </div>
     </div>

pinry-spa/src/components/UserProfileCard.vue

@@ -21,7 +21,7 @@
               </div>
             </div>
             <div class="content">
-              Yet another Pinry user.
+              {{ $t("userProfileCardContent") }}
               <br>
             </div>
 
@@ -34,7 +34,7 @@
                       icon="image"
                       custom-size="mdi-24px">
                     </b-icon>
-                    <span>Pins</span>
+                    <span>{{ $t("pinsUserProfileCardLink") }}</span>
                   </a>
                 </li>
                 <li :class="trueFalse2Class(inBoard)">
@@ -44,7 +44,7 @@
                       icon="folder-multiple-image"
                       custom-size="mdi-24px">
                     </b-icon>
-                    <span>Boards</span>
+                    <span>{{ $t("boardsUserProfileCardLink") }}</span>
                   </a>
                 </li>
                 <li :class="trueFalse2Class(inProfile)">
@@ -54,7 +54,7 @@
                       icon="account"
                       custom-size="mdi-24px">
                     </b-icon>
-                    <span>Profile</span>
+                    <span>{{ $t("profileUserProfileCardLink") }}</span>
                   </a>
                 </li>
               </ul>

pinry-spa/src/components/noMore.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-show="show">
-    <div id="the-end">&mdash; End &mdash;</div>
+    <div id="the-end">&mdash; {{ $t("end") }} &mdash;</div>
   </div>
 </template>
 

pinry-spa/src/components/pin_edit/Add2Board.vue

@@ -3,7 +3,7 @@
     <div>
       <div class="modal-card" style="width: auto">
         <header class="modal-card-head">
-          <p class="modal-card-title">Add Pin to Board</p>
+          <p class="modal-card-title">{{ $t("Add2BoardModalCardTitle") }}</p>
         </header>
         <section class="modal-card-body">
           <div class="columns">
@@ -21,10 +21,10 @@
           </div>
         </section>
         <footer class="modal-card-foot">
-          <button class="button" type="button" @click="$parent.close()">Close</button>
+          <button class="button" type="button" @click="$parent.close()">{{ $t("closeButton") }}</button>
           <button
             @click="doAdd2Board"
-            class="button is-primary">Add Pin to Board
+            class="button is-primary">{{ $t("Add2BoardModalCardButton") }}
           </button>
         </footer>
       </div>

pinry-spa/src/components/pin_edit/FileUpload.vue

@@ -19,7 +19,7 @@
                   size="is-medium">
                 </b-icon>
               </p>
-              <p>Drop your files here or click to upload</p>
+              <p>{{ $t("FileUploadDescription") }}</p>
             </div>
           </section>
         </b-upload>

pinry-spa/src/components/pin_edit/FilterSelect.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="filter-select">
-    <b-field label="Select Board"
+    <b-field v-bind:label="$t('selectBoardLabel')"
              :type="form.name.type"
              :message="form.name.error">
       <b-input
         type="text"
         v-model="form.name.value"
-        placeholder="Type to filter or Create one"
+        v-bind:placeholder="$t('filterSelectSelectBoardPlaceholder')"
         maxlength="128"
       >
       </b-input>
@@ -15,7 +15,7 @@
       <button
         @click="createNewBoard"
         class="button is-primary">
-        Create New Board
+        {{ $t("filterSelectCreateNewBoardButton") }}
       </button>
     </b-field>
     <b-field>

pinry-spa/src/components/pin_edit/PinCreateModal.vue

@@ -16,37 +16,37 @@
               <div class="description" v-show="pinModel.form.description.value" v-html="niceLinks(pinModel.form.description.value)"></div>
             </div>
             <div class="column">
-              <b-field label="Image URL"
+              <b-field v-bind:label="$t('imageUrlLabel')"
                        v-show="!disableUrlField && !isEdit"
                        :type="pinModel.form.url.type"
                        :message="pinModel.form.url.error">
                 <b-input
                   type="text"
                   v-model="pinModel.form.url.value"
-                  placeholder="where to fetch the image"
+                  v-bind:placeholder="$t('pinCreateModalImageURLPlaceholder')"
                   maxlength="2048"
                 >
                 </b-input>
               </b-field>
-              <b-field label="Privacy Option"
+              <b-field v-bind:label="$t('privacyOptionLabel')"
                        :type="pinModel.form.private.type"
                        :message="pinModel.form.private.error">
                 <b-checkbox v-model="pinModel.form.private.value">
-                    is private
+                    {{ $t("isPrivateCheckbox") }}
                 </b-checkbox>
               </b-field>
-              <b-field label="Image Source"
+              <b-field v-bind:label="$t('imageSourceLabel')"
                        :type="pinModel.form.referer.type"
                        :message="pinModel.form.referer.error">
                 <b-input
                   type="text"
                   v-model="pinModel.form.referer.value"
-                  placeholder="where to find the pin"
+                  v-bind:placeholder="$t('pinCreateModalImageSourcePlaceholder')"
                   maxlength="2048"
                 >
                 </b-input>
               </b-field>
-              <b-field label="Tags">
+              <b-field v-bind:label="$t('tagsLabel')">
                 <b-taginput
                     v-model="pinModel.form.tags.value"
                     :data="editorMeta.filteredTagOptions"
@@ -54,23 +54,23 @@
                     ellipsis
                     icon="label"
                     :allow-new="true"
-                    placeholder="Add a tag"
+                    v-bind:placeholder="$t('pinCreateModalImageTagsPlaceholder')"
                     @typing="getFilteredTags">
                   <template slot-scope="props">
                     <strong>{{ props.option }}</strong>
                   </template>
                   <template slot="empty">
-                    There are no items
+                    {{ $t("pinCreateModalEmptySlot") }}
                   </template>
                 </b-taginput>
               </b-field>
-              <b-field label="Descripton"
+              <b-field v-bind:label="$t('descriptionLabel')"
                        :type="pinModel.form.description.type"
                        :message="pinModel.form.description.error">
                 <b-input
                   type="textarea"
                   v-model="pinModel.form.description.value"
-                  placeholder="idea from this pin"
+                  v-bind:placeholder="$t('pinCreateModalImageDescriptionPlaceholder')"
                   maxlength="1024"
                 >
                 </b-input>
@@ -85,16 +85,16 @@
           </div>
         </section>
         <footer class="modal-card-foot">
-          <button class="button" type="button" @click="$parent.close()">Close</button>
+          <button class="button" type="button" @click="$parent.close()">{{ $t("closeButton") }}</button>
           <button
             v-if="!isEdit"
             @click="createPin"
-            class="button is-primary">Create Pin
+            class="button is-primary">{{ $t("pinCreateModalCreatePinButton") }}
           </button>
           <button
             v-if="isEdit"
             @click="savePin"
-            class="button is-primary">Save Changes
+            class="button is-primary">{{ $t("pinCreateModalSaveChangesButton") }}
           </button>
         </footer>
       </div>

pinry-spa/src/components/search/SearchPanel.vue

@@ -3,9 +3,9 @@
     <div class="filter-selector">
       <div class="card-content">
         <b-field>
-          <b-select placeholder="Choose Filter" v-model="filterType">
-            <option>Tag</option>
-            <option>Board</option>
+          <b-select v-bind:placeholder="$t('chooseFilterPlaceholder')" v-model="filterType">
+            <option>{{ $t("SearchPanelTagOption") }}</option>
+            <option>{{ $t("SearchPanelBoardOption") }}</option>
           </b-select>
           <b-autocomplete
             v-show="filterType === 'Tag'"
@@ -14,22 +14,22 @@
             :data="filteredDataArray"
             :keep-first="true"
             :open-on-focus="true"
-            placeholder="select a filter then type to filter"
+            v-bind:placeholder="$t('selectFilterPlaceholder')"
             icon="magnify"
             @select="option => selected = option">
-            <template slot="empty">No results found</template>
+            <template slot="empty">{{ $t("noResultsFound") }}</template>
           </b-autocomplete>
           <template v-if="filterType === 'Board'">
             <b-input
               class="search-input"
               type="search"
               v-model="boardText"
-              placeholder="type to search board"
+              v-bind:placeholder="$t('searchBoardPlaceholder')"
               icon="magnify"
             >
             </b-input>
             <p class="control">
-              <b-button @click="searchBoard" class="button is-primary">Search</b-button>
+              <b-button @click="searchBoard" class="button is-primary">{{ $t("searchButton") }}</b-button>
             </p>
           </template>
         </b-field>

pinry-spa/src/components/user/profile.vue

@@ -3,14 +3,14 @@
     <div class="card">
       <header class="card-header">
         <p class="card-header-title">
-          Token
+          {{ $t("tokenUserProfileCardTitle") }}
         </p>
       </header>
       <div class="card-content">
         <div class="content">
-          <p>Your Token is:</p>
+          <p>{{ $t("tokenUserProfileCardContent") }}</p>
           <pre>{{ token }}</pre>
-          Please read <a target="_blank" href="https://www.django-rest-framework.org/api-guide/authentication/#tokenauthentication">DRF API Documentation</a> for more detail to know how to use it.
+          {{ $t("pleaseReadTokenUserProfileCardContent") }}<a target="_blank" href="https://www.django-rest-framework.org/api-guide/authentication/#tokenauthentication">{{ $t("drfApiDocumentationLink") }}</a>{{ $t("forMoreDetailsParagraph") }}
           <br>
         </div>
       </div>

pinry-spa/src/main.js

@@ -1,17 +1,31 @@
 import Buefy from 'buefy';
 import Vue from 'vue';
 import { VueMasonryPlugin } from 'vue-masonry';
+import VueI18n from 'vue-i18n';
 import App from './App.vue';
 import router from './router';
 import setUpAxiosCsrfConfig from './components/utils/csrf';
 import './registerServiceWorker';
+import en from './assets/locales/en.json';
+
+const messages = {
+  en,
+};
 
 Vue.config.productionTip = false;
 Vue.use(Buefy);
 Vue.use(VueMasonryPlugin);
+Vue.use(VueI18n);
 setUpAxiosCsrfConfig();
 
+const i18n = new VueI18n({
+  locale: localStorage.getItem('localeCode') || navigator.language.split('-')[0],
+  fallbackLocale: 'en',
+  messages,
+});
+
 new Vue({
   router,
+  i18n,
   render: h => h(App),
 }).$mount('#app');

pinry-spa/src/views/PageNotFound.vue

@@ -3,8 +3,8 @@
     <PHeader></PHeader>
     <div id="main">
       <div class="fof">
-        <p>Oops! Page Not Found</p>
-        <h1>Error 404</h1>
+        <p>{{ $t("pageNotFound") }}</p>
+        <h1>{{ $t("error404") }}</h1>
       </div>
     </div>
   </div>

pinry-spa/yarn.lock

@@ -7160,6 +7160,11 @@ vue-hot-reload-api@^2.3.0:
   version "2.3.4"
   resolved "https://registry.npm.taobao.org/vue-hot-reload-api/download/vue-hot-reload-api-2.3.4.tgz?cache=0&sync_timestamp=1568190386192&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-hot-reload-api%2Fdownload%2Fvue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"
 
+vue-i18n@8:
+  version "8.27.1"
+  resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-8.27.1.tgz#fe660f6c14793ae404d6a715875d772594a3324f"
+  integrity sha512-lWrGm4F25qReJ7XxSnFVb2h3PfW54ldnM4C+YLBGGJ75+Myt/kj4hHSTKqsyDLamvNYpvINMicSOdW+7yuqgIQ==
+
 vue-loader@^15.7.2:
   version "15.8.3"
   resolved "https://registry.npm.taobao.org/vue-loader/download/vue-loader-15.8.3.tgz#857cb9e30eb5fc25e66db48dce7e4f768602a23c"