i18n added but not usable

frontend/public/i18n/EN.txt

@@ -13,5 +13,18 @@ login.guest.password=PASSWORD
 login.guest.nextpage=Next Page
 login.guest.lastpage=Last Page
 login.guest.submit=Submit
-
+login.guest.birthday=BIRTHDAY
+login.guest.confirm=CONFIRM
+app.home=Home
+app.login=Login
+app.notifications=Notifications
+app.settings=Settings
+app.messages=Messages
+app.forum=Forum
+app.schedules=Schedules
+app.inscription.requests=Inscription Requests
+request.moreInfos=More Infos
+request.accept=Accept
+request.refuse=Refuse
 #=====================================================
+

frontend/public/i18n/FR.txt

@@ -13,5 +13,17 @@ login.guest.password= MOT DE PASSE
 login.guest.nextpage=Prochaine Page
 login.guest.lastpage=Derniere Page
 login.guest.submit=Envoyer
-
+login.guest.birthday=DATE DE NAISSANCE
+login.guest.confirm=CONFIRMER
+app.home=Home
+app.login=Se connecter
+app.notifications=Notifications
+app.settings=Options
+app.messages=Messages
+app.forum=Forum
+app.schedules=Horaires
+app.inscription.requests=Demandes d'Inscription
+request.moreInfos=Plus d'Infos
+request.accept=Accepter
+request.refuse=Refuser
 #=====================================================

frontend/src/App.vue

@@ -14,6 +14,10 @@
 		toast(test.value['txt']);
 	}
 
+  const home=ref(i18n("app.home"))
+  const notifications=ref(i18n("app.notifications"))
+  const settings=ref(i18n("app.settings"))
+  const login=ref(i18n("app.login"))
   
 
 
@@ -24,23 +28,23 @@
 
     <div class="topBar">
       <ul class="horizontal">
-        <li title="Home">
+        <li title=home>
             <a href="#home">
                 <img @click="draw" src="./assets/Clyde.png" style="width: 40px; height: auto; margin-top:4px">
             </a></li>
-        <li title="Home">
+        <li title=home>
             <a href="#home">
                 <div class=" fa-solid fa-house" style="margin-top: 7px; margin-bottom: 3px;"></div>
             </a></li>
-        <li style="float: right;" title="Account">
+        <li style="float: right;" title=login>
             <a href="/login">
                 <div class="fa-solid fa-user"  style="margin-top: 7px; margin-bottom: 3px;"></div>
             </a></li>
-        <li style="float: right;" title="Notifications">
+        <li style="float: right;" title=notifications>
             <a href="#Notifications">
                 <div class="fa-solid fa-bell"  style="margin-top: 7px; margin-bottom: 3px;"></div>
             </a></li>
-        <li style="float: right;" title="Options">
+        <li style="float: right;" title=settings>
             <a href="#Options">
                 <div  class="fa-solid fa-gear"  style="margin-top: 7px; margin-bottom: 3px;"></div>
             </a></li>
@@ -56,24 +60,24 @@
         <li style="margin-top: 25px;" >
           <a href="#Messages">
             <div class="fa-solid fa-comment" style="font-size: 40px;"></div>
-            <div class="text">Messages</div>
+            <div class="text">{{i18n("app.messages")}}</div>
           </a></li>
         <li >
           <a href="#Notifications">
             <div class="fa-solid fa-bell" style="font-size: 40px;" ></div>
-            <div class="text">Notifications</div>
+            <div class="text">{{i18n("app.notifications")}}</div>
           </a></li>
         <li >
           <a href="#Schedule">
             <div class="fa-solid fa-calendar-days" style="font-size: 40px;"></div>
-            <div class="text">Schedules</div>
+            <div class="text">{{i18n("app.schedules")}}</div>
           </a></li>
         <li ><a href="#Forum">
             <div class="fa-solid fa-envelope" style="font-size: 40px;" ></div>
-            <div class="text">Forum</div></a></li>
+            <div class="text">{{i18n("app.forum")}}</div></a></li>
         <li><a href="#Inscription">
             <div class="fa-solid fa-users" style="font-size: 40px;"></div>
-            <div class="text">Inscription Requests</div></a></li>
+            <div class="text">{{i18n("app.inscription.requests")}}</div></a></li>
     </ul>
 
     </div>

frontend/src/Login.vue

@@ -73,7 +73,7 @@
                 <input type="text" v-model="firstname">
               </div>
               <div class="inputBox">
-                <p>BIRTHDAY</p>
+                <p>{{i18n("login.guest.birthday")}}</p>
                 <input type="date" v-model="birthday">
               </div>
               <div class="inputBox">
@@ -81,7 +81,7 @@
                  <input type="password" v-model="passwordOUT">
               </div>
               <div class="inputBox">
-                 <p>CONFIRM {{i18n("login.guest.password")}}</p>
+                <p>{{i18n("login.guest.confirm")}} {{i18n("login.guest.password")}}</p>
                  <input type="password" v-model="passwordConfirm">
               </div>
               

frontend/src/Request.vue

@@ -1,4 +1,5 @@
 <script setup>
+  import i18n from "./i18n.js"
   const props = defineProps({
   id: Number,
   type: String,
@@ -20,9 +21,9 @@
     <div class="type"><a>{{type}}</a></div>
     <div class="surname"><a>{{lastName}}</a></div>
     <div class="firstname"><a>{{firstName}}</a></div>
-    <div class="infos"><button style="background-color:rgb(105,05,105);" > More infos </button></div>
+    <div class="infos"><button style="background-color:rgb(105,05,105);" >{{i18n("request.moreInfos")}}   </button></div>
-    <div class="accept"><button style="background-color:rgb(0,105,50);">Accept</button></div>
+    <div class="accept"><button style="background-color:rgb(0,105,50);">{{i18n("request.accept")}}</button></div>
-    <div class="refuse"><button style="background-color:rgb(105,0,0);">Refuse</button></div>
+    <div class="refuse"><button style="background-color:rgb(105,0,0);">{{i18n("request.refuse")}}</button></div>
   </div>
   </div>
 </template>