#8 #13 button lang in login and start internation_

p2m2 · Nov 21, 2023 · c5fd458 · c5fd458
1 parent 7f4cf22
commit c5fd458
Show file tree

Hide file tree

Showing 7 changed files with 102 additions and 66 deletions.
diff --git a/components/BugButton.vue b/components/BugButton.vue
@@ -0,0 +1,10 @@
+<template>
+  <UButton
+    to="https://github.com/p2m2/EP2M2/issues/new"
+    target="_blank"
+    icon="i-heroicons-bug-ant-solid"
+    color="purple"
+  >
+    {{ $t('message.addIssue') }}
+  </UButton>
+</template>
diff --git a/components/ExtrasNav.vue b/components/ExtrasNav.vue
@@ -3,17 +3,10 @@
  -->
 
 <script setup lang="ts">
-import { I } from "vitest/dist/types-198fd1d9";
-import {ref, reactive, computed} from "vue";
-import { useI18n, useSwitchLocalePath } from '#imports'
-const { t, locale, locales } = useI18n()
-const switchLocalePath = useSwitchLocalePath()
-// Variable to access and modify to translate
-const altHome = ref<string>("Accueil");
-const altHelp = ref<string>("Aide");
-const altTopProfOut = ref<string>("Accéder au sous-menu profile et déconnection");
-const labProfile = ref<string>("Profile");
-const labLogout = ref<string>("LogOut");
+import lang from "~/components/LangButton.vue";
+import {reactive} from "vue";
+import { useI18n } from "#imports";
+const { t } = useI18n();
 
 // Variable identify user
 const user = reactive<{firstName: string, lastName: string}>({
@@ -29,25 +22,15 @@ const items = <object[]>[
         disabled: true
     }],
     [{
-        label: labProfile.value,
+        label: t("label.profile"),
         icon: "i-heroicons-adjustments-horizontal" 
     }],
     [{
-        label: labLogout.value,
+        label: t("label.logout"),
         icon: "i-heroicons-arrow-right-on-rectangle"
     }]
 ];
 
-const avaiblesLang = computed(() => {
-    return locales.value.filter((i) => i.code !== locale.value).
-        map((i18n)=> [{
-            label:i18n.name,
-            to: switchLocalePath(i18n.code)
-        }])
-})    
-
-console.log(avaiblesLang.value);
-
 </script>
 
 <style>
@@ -64,19 +47,15 @@ console.log(avaiblesLang.value);
 
 <template>
     <UContainer class="float-right block">
-        <UDropdown :items="avaiblesLang" mode="hover" 
-                   :popper="{ placement: 'bottom-start' }">
-            <UButton icon="i-heroicons-language" color="white" size="xl"
-                     :title="t('button.lang.alt')"/>
-        </UDropdown>
+        <lang/>
         <UButton icon="i-heroicons-home-modern" color="white" size="xl"
-                 :title="altHome"/>
+                 :title="t('button.home')"/>
         <UButton icon="i-heroicons-light-bulb" color="white" size="xl"
-                 :title="altHelp"/>
+                 :title="t('button.help')"/>
 
         <UDropdown :items="items" :popper="{ placement: 'bottom-start' }"
                    :ui="{item: {disabled: 'profileName'}}"
-                   :title="altTopProfOut">
+                   :title="t('button.topProfOut')">
             <UButton trailing-icon="i-heroicons-chevron-down-20-solid"
                      leading-icon="i-heroicons-user-20-solid"  size="xl"
                      color="white" class="bgGreen"/>

diff --git a/components/LangButton.vue b/components/LangButton.vue
@@ -0,0 +1,35 @@
+<!-- 
+  This file contain 
+
+ -->
+
+<script setup lang="ts">
+import {computed} from "vue";
+import { useI18n, useSwitchLocalePath } from "#imports";
+const { t, locale, locales } = useI18n();
+const switchLocalePath = useSwitchLocalePath();
+
+const avaiblesLang = computed(() => {
+    return locales.value.filter(i => (i.code) !== locale.value).
+        map((i18n)=> [{
+            label:i18n.name,
+            to: switchLocalePath(i18n.code)
+        }]);
+});  
+
+</script>
+
+<template>
+  <UDropdown 
+    :items="avaiblesLang"
+    mode="hover" 
+    :popper="{ placement: 'bottom-start' }"
+  >
+    <UButton
+      icon="i-heroicons-language"
+      color="white"
+      size="xl"
+      :title="t('button.lang')"
+    />
+  </UDropdown>
+</template>
diff --git a/components/LoginForm.vue b/components/LoginForm.vue
@@ -1,13 +1,12 @@
 <script setup lang="ts">
-
+import lang from "~/components/LangButton.vue";
 import { ref } from "vue";
-import { string, object, email, minLength, Input } from "valibot";
+import { string, object, email, minLength, type Input } from "valibot";
 import type { FormSubmitEvent } from "@nuxt/ui/dist/runtime/types";
 // import createSession from "~/composables/createSession";
 import {useCookie } from "nuxt/app";
-
-console.log("a");
-
+import { useI18n } from "#imports";
+const { t } = useI18n();
 
 const schema = object({
     email: string([email("Invalid email")]),
@@ -67,22 +66,28 @@ console.log("e");
 </script>
 
 <template>
+  <!-- [&>div]:justify-end Add to child div justify-end class -->
+  <UContainer 
+    class="flex justify-end w-1/2" 
+  >
+    <lang />
+  </UContainer>
   <UContainer class="flex justify-around items-center">
     <UForm 
-      class="form"
+      class="form leading-loose"
       :schema="schema"
       :state="state"
       @submit="submit"
     >
       <UFormGroup 
-        label="Email"
+        :label="t('label.email')"
         name="email" 
       >
         <UInput v-model="state.email" />
       </UFormGroup>
 
       <UFormGroup
-        label="Password"
+        :label="t('label.password')"
         name="password"
       >
         <UInput
@@ -92,7 +97,7 @@ console.log("e");
       </UFormGroup>
 
       <UButton type="submit">
-        Submit
+        {{ $t('button.submit') }}
       </UButton>
     </UForm>
   </UContainer>

diff --git a/lang/en-US.ts b/lang/en-US.ts
@@ -1,9 +1,19 @@
 export default {
-    welcome: "Bonjour",
+    welcome: "Welcom",
     button:{
-        lang:{
-            text: "langage",
-            alt: "Change langage"
-        }
+        lang: "Change langage",
+        home: "Home",
+        help: "Help",
+        topProfOut: "Profile under menu and logout",
+        submit: "Submit"
+    },
+    label:{
+        profile: "Profile",
+        logout: "Logout",
+        email: "Email",
+        password: "Password"
+    },
+    message:{
+        addIssue: "There is a bug"
     }
 };
diff --git a/lang/fr-FR.ts b/lang/fr-FR.ts
@@ -1,10 +1,21 @@
 export default {
     welcome: "Bonjour",
     button:{
-        lang:{
-            text: "langue",
-            alt: "Changer de langue"
-        }
+        lang: "Changer de langue",
+        home: "Accueil",
+        help: "Aide",
+        topProfOut: "Accéder au sous-menu profile et déconnection",
+        submit: "Valider"
+    },
+    label:{
+        profile: "Profile",
+        logout: "Déconnexion",
+        email: "E-mail",
+        password: "Mot de passe"
+    },
+    message:{
+        addIssue: "Un problème dit le"
     }
+
 };
 
diff --git a/pages/index.vue b/pages/index.vue
@@ -10,6 +10,7 @@ import banner from "~/components/BannerMain.vue";
 import extras from "~/components/ExtrasNav.vue";
 import extract from "~/components/ExtractInfo.vue";
 import login from "~/components/LoginForm.vue";
+import bug from "~/components/BugButton.vue";
 import { useCookie } from "nuxt/app";
 
 </script>
@@ -68,27 +69,12 @@ export default{
 
     <extract v-if="checkSession" />
 
-    <UButton
-      v-else
-      to="https://github.com/p2m2/EP2M2/issues/new"
-      target="_blank"
-      icon="i-heroicons-bug-ant-solid"
-      color="purple"
-    >
-      Un problème dit le
-    </UButton>
+    <bug v-else />
     <template 
       v-if="checkSession"
       #footer
     >
-      <UButton
-        to="https://github.com/p2m2/EP2M2/issues/new"
-        target="_blank"
-        icon="i-heroicons-bug-ant-solid"
-        color="purple"
-      >
-        Un problème dit le
-      </UButton>
+      <bug />
     </template>
   </UCard>
 </template>