add i18n

2025-10-09 00:11:34 +02:00
parent 1ead02ab69
commit 774756a747
20 changed files with 288 additions and 74 deletions
--- a/front/package-lock.json
+++ b/front/package-lock.json
@@ -10,6 +10,7 @@
      "dependencies": {
        "pinia": "^3.0.3",
        "vue": "^3.5.18",
+        "vue-i18n": "^11.1.12",
        "vue-router": "^4.5.1"
      },
      "devDependencies": {
@@ -1161,6 +1162,50 @@
        "url": "https://github.com/sponsors/nzakas"
      }
    },
+    "node_modules/@intlify/core-base": {
+      "version": "11.1.12",
+      "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-11.1.12.tgz",
+      "integrity": "sha512-whh0trqRsSqVLNEUCwU59pyJZYpU8AmSWl8M3Jz2Mv5ESPP6kFh4juas2NpZ1iCvy7GlNRffUD1xr84gceimjg==",
+      "license": "MIT",
+      "dependencies": {
+        "@intlify/message-compiler": "11.1.12",
+        "@intlify/shared": "11.1.12"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/message-compiler": {
+      "version": "11.1.12",
+      "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-11.1.12.tgz",
+      "integrity": "sha512-Fv9iQSJoJaXl4ZGkOCN1LDM3trzze0AS2zRz2EHLiwenwL6t0Ki9KySYlyr27yVOj5aVz0e55JePO+kELIvfdQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@intlify/shared": "11.1.12",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/shared": {
+      "version": "11.1.12",
+      "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-11.1.12.tgz",
+      "integrity": "sha512-Om86EjuQtA69hdNj3GQec9ZC0L0vPSAnXzB3gP/gyJ7+mA7t06d9aOAiqMZ+xEOsumGP4eEBlfl8zF2LOTzf2A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
    "node_modules/@jridgewell/gen-mapping": {
      "version": "0.3.13",
      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
@@ -4050,6 +4095,26 @@
        "eslint": "^8.57.0 || ^9.0.0"
      }
    },
+    "node_modules/vue-i18n": {
+      "version": "11.1.12",
+      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-11.1.12.tgz",
+      "integrity": "sha512-BnstPj3KLHLrsqbVU2UOrPmr0+Mv11bsUZG0PyCOzsawCivk8W00GMXHeVUWIDOgNaScCuZah47CZFE+Wnl8mw==",
+      "license": "MIT",
+      "dependencies": {
+        "@intlify/core-base": "11.1.12",
+        "@intlify/shared": "11.1.12",
+        "@vue/devtools-api": "^6.5.0"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
    "node_modules/vue-router": {
      "version": "4.5.1",
      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.5.1.tgz",
--- a/front/package.json
+++ b/front/package.json
@@ -16,6 +16,7 @@
  "dependencies": {
    "pinia": "^3.0.3",
    "vue": "^3.5.18",
+    "vue-i18n": "^11.1.12",
    "vue-router": "^4.5.1"
  },
  "devDependencies": {
--- a/front/src/AddBook.vue
+++ b/front/src/AddBook.vue
@@ -45,23 +45,24 @@
 <template>
  <form @submit.prevent="onSubmit">
    <div class="field">
-      <label class="label">Title</label>
+      <label class="label">{{$t('addbook.title')}}</label>
      <div class="control">
        <input :class="'input ' + (titleError ? 'is-danger' : '')" type="text" maxlength="300"
-        required v-model="book.title" placeholder="Title">
+        required v-model="book.title" :placeholder="$t('addbook.title')">
      </div>
      <p v-if="titleError" class="help is-danger">{{titleError}}</p>
    </div>
    <div class="field">
-      <label class="label">Author</label>
+      <label class="label">{{$t('addbook.author')}}</label>
      <div class="control">
-        <input :class="'input ' + (authorError ? 'is-danger' : '')" type="text" maxlength="100" v-model="book.author" placeholder="Author">
+        <input :class="'input ' + (authorError ? 'is-danger' : '')" type="text" maxlength="100"
+        v-model="book.author" :placeholder="$t('addbook.author')">
      </div>
      <p v-if="authorError" class="help is-danger">{{authorError}}</p>
    </div>
    <div class="field">
      <div class="control">
-        <button class="button is-link">Submit</button>
+        <button class="button is-link">{{$t('addbook.submit')}}</button>
      </div>
    </div>
  </form>
--- a/front/src/AppNavBar.vue
+++ b/front/src/AppNavBar.vue
@@ -15,13 +15,13 @@
    <div class="navbar-menu">
      <div class="navbar-start">
        <RouterLink to="/" class="navbar-item" activeClass="is-active">
-          Home
-        </RouterLink>
-        <RouterLink v-if="authStore.user" to="/add" class="navbar-item" activeClass="is-active">
-          Add Book
+        {{ $t('navbar.home')}}
        </RouterLink>
        <RouterLink v-if="authStore.user" to="/books" class="navbar-item" activeClass="is-active">
-          My Books
+          {{ $t('navbar.mybooks')}}
+        </RouterLink>
+        <RouterLink v-if="authStore.user" to="/add" class="navbar-item" activeClass="is-active">
+          {{ $t('navbar.addbook')}}
        </RouterLink>
      </div>
      <div class="navbar-end">
@@ -34,16 +34,16 @@
           {{ authStore.user.username }}
        </div>
        <a @click="authStore.logout" class="button is-light">
-          Log out
+          {{ $t('navbar.logout')}}
        </a>
      </div>
      <div v-else class="navbar-item">
        <div  class="buttons">
          <RouterLink to="/signup" class="button is-primary">
-            <strong>Sign up</strong>
+            <strong>{{ $t('navbar.signup')}}</strong>
          </RouterLink>
          <RouterLink to="/login" class="button is-light">
-            Log in
+            {{ $t('navbar.login')}}
          </RouterLink>
        </div>
      </div>
--- a/front/src/BooksBrowser.vue
+++ b/front/src/BooksBrowser.vue
@@ -9,11 +9,11 @@ const { data, error } = getMyBooks();
 <template>
  <div class="books">

-    <div v-if="error">Error when loading books: {{ error.message }}</div>
+    <div v-if="error">{{$t('bookbrowser.error', {error: error.message})}}</div>
    <div class="book" v-else-if="data" v-for="book in data" :key="book.id">
      <BookCard v-bind="book" />
    </div>
-  <div v-else>Loading...</div>
+    <div v-else>{{$t('bookbrowser.loading')}}</div>
  </div>
 </template>

--- a/front/src/Home.vue
+++ b/front/src/Home.vue
@@ -7,10 +7,10 @@

 <template>
  <div v-if="authStore.user">
-    Welcome {{ authStore.user.username }} !
+    {{ $t('home.welcomeuser', {username: authStore.user.username}) }}
  </div>
  <div v-else>
-    Welcome to PersonalLibraryManager. Please login ou sign in to continue.
+    {{ $t('home.welcome') }}
  </div>
 </template>

--- a/front/src/LogIn.vue
+++ b/front/src/LogIn.vue
@@ -47,24 +47,24 @@
  </div>
  <form class="box" @submit.prevent="onSubmit">
    <div class="field">
-      <label class="label">Username</label>
+      <label class="label">{{$t('login.username')}}</label>
      <div class="control">
        <input :class="'input ' + (userError ? 'is-danger' : '')" type="text" minlength="2" maxlength="20"
-        required v-model="user.username" placeholder="Username">
+        required v-model="user.username" :placeholder="$t('login.username')">
      </div>
      <p v-if="userError" class="help is-danger">{{userError}}</p>
    </div>
    <div class="field">
-      <label class="label">Password</label>
+      <label class="label">{{$t('login.password')}}</label>
      <div class="control">
        <input :class="'input ' + (passwordError ? 'is-danger' : '')" type="password" minlength="6"
-        maxlength="100" v-model="user.password" required placeholder="Password">
+        maxlength="100" v-model="user.password" required :placeholder="$t('login.password')">
      </div>
      <p v-if="passwordError" class="help is-danger">{{passwordError}}</p>
    </div>
    <div class="field">
      <div class="control">
-        <button class="button is-link">Log In</button>
+        <button class="button is-link">{{$t('login.login')}}</button>
      </div>
    </div>
  </form>
--- a/front/src/SignUp.vue
+++ b/front/src/SignUp.vue
@@ -41,24 +41,24 @@
  </div>
  <form class="box" @submit.prevent="onSubmit">
    <div class="field">
-      <label class="label">Username</label>
+      <label class="label">{{$t('signup.username')}}</label>
      <div class="control">
        <input :class="'input ' + (userError ? 'is-danger' : '')" type="text" minlength="2" maxlength="20"
-        required v-model="user.username" placeholder="Username">
+        required v-model="user.username" :placeholder="$t('signup.username')">
      </div>
      <p v-if="userError" class="help is-danger">{{userError}}</p>
    </div>
    <div class="field">
-      <label class="label">Password</label>
+      <label class="label">{{ $t('signup.password') }}</label>
      <div class="control">
        <input :class="'input ' + (passwordError ? 'is-danger' : '')" type="password" minlength="6"
-        maxlength="100" v-model="user.password" required placeholder="Password">
+        maxlength="100" v-model="user.password" required :placeholder="$t('signup.password')">
      </div>
      <p v-if="passwordError" class="help is-danger">{{passwordError}}</p>
    </div>
    <div class="field">
      <div class="control">
-        <button class="button is-link">Sign In</button>
+        <button class="button is-link">{{ $t('signup.signup') }}</button>
      </div>
    </div>
  </form>
--- a/front/src/locales/en.json
+++ b/front/src/locales/en.json
@@ -0,0 +1,33 @@
+{
+  "home": {
+    "welcomeuser": "Welcome {username} !",
+    "welcome": "Welcome to PersonalLibraryManager. Please login ou sign in to continue."
+  },
+  "navbar": {
+    "home": "Home",
+    "mybooks": "My Books",
+    "addbook": "Add Book",
+    "logout": "Log out",
+    "signup": "Sign up",
+    "login": "Log In"
+  },
+  "addbook": {
+    "title":"Title",
+    "author":"Author",
+    "submit":"Submit"
+  },
+  "signup": {
+    "username":"Username",
+    "password":"Password",
+    "signup":"Sign up"
+  },
+  "login": {
+    "username":"Username",
+    "password":"Password",
+    "login":"Log in"
+  },
+  "bookbrowser": {
+    "error": "Error when loading books: {error}",
+    "loading": "Loading..."
+  }
+}
--- a/front/src/locales/fr.json
+++ b/front/src/locales/fr.json
@@ -0,0 +1,33 @@
+{
+  "home": {
+    "welcomeuser": "Bienvenue {username} !",
+    "welcome": "Bienvenue sur PersonalLibraryManager. Merci de se connecter ou de s'inscrire pour continuer."
+  },
+  "navbar": {
+    "home": "Accueil",
+    "mybooks": "Mes Livres",
+    "addbook": "Ajouter Un Livre",
+    "logout": "Se déconnecter",
+    "signup": "S'inscrire",
+    "login": "Se connecter"
+  },
+  "addbook": {
+    "title":"Titre",
+    "author":"Auteur",
+    "submit":"Confirmer"
+  },
+  "signup": {
+    "username":"Nom d'utilisateur",
+    "password":"Mot de passe",
+    "signup":"S'inscrire"
+  },
+  "login": {
+    "username":"Nom d'utilisateur",
+    "password":"Mot de passe",
+    "login":"Connexion"
+  },
+  "bookbrowser": {
+    "error": "Erreur pendant le chargement des livres: {error}",
+    "loading": "Chargement..."
+  }
+}
--- a/front/src/main.js
+++ b/front/src/main.js
@@ -1,4 +1,5 @@
 import { createApp } from 'vue'
+import { createI18n } from "vue-i18n";
 import { createPinia } from 'pinia'
 import { createRouter, createWebHistory } from 'vue-router'
 import App from './App.vue'
@@ -8,6 +9,17 @@ import SignUp from './SignUp.vue'
 import LogIn from './LogIn.vue'
 import Home from './Home.vue'

+import fr from './locales/fr.json';
+import en from './locales/en.json';
+
+
+// configure i18n
+const i18n = createI18n({
+    locale: navigator.language,
+    fallbackLocale: "en",
+    messages: { fr, en },
+});
+

 const routes = [
  { path: '/', component: Home },
@@ -24,4 +36,4 @@ export const router = createRouter({

 const pinia = createPinia()

-createApp(App).use(pinia).use(router).mount('#app')
+createApp(App).use(i18n).use(pinia).use(router).mount('#app')