🌐 Localize sign in & sign up page

components/auth/Authenticate.vue

@@ -1,19 +1,20 @@
 <template>
   <div class="flex items-center">
     <v-form class="flex-grow-1" @submit.prevent="submit">
-      <v-text-field label="Username" variant="solo" density="comfortable" class="mb-3" :hide-details="true"
+      <v-text-field :label="t('username')" variant="solo" density="comfortable" class="mb-3" :hide-details="true"
                     :disabled="props.loading" v-model="probe" />
-      <v-text-field label="Password" variant="solo" density="comfortable" type="password" :disabled="props.loading"
+      <v-text-field :label="t('password')" variant="solo" density="comfortable" type="password"
+                    :disabled="props.loading"
                     v-model="password" />
 
       <v-expand-transition>
         <v-alert v-show="error" variant="tonal" type="error" class="text-xs mb-3">
-          Something went wrong... {{ error }}
+          {{ t("errorOccurred", [error]) }}
         </v-alert>
       </v-expand-transition>
 
       <div class="flex justify-between">
-        <v-btn type="button" variant="plain" color="grey-darken-3" to="/auth/sign-up">Sign up</v-btn>
+        <v-btn type="button" variant="plain" color="grey-darken-3" to="/auth/sign-up">{{ t("userMenuSignUp") }}</v-btn>
 
         <v-btn
           type="submit"
@@ -23,7 +24,7 @@
           append-icon="mdi-arrow-right"
           :disabled="props.loading"
         >
-          Next
+          {{ t("next") }}
         </v-btn>
       </div>
     </v-form>
@@ -31,8 +32,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue"
-
+const { t } = useI18n()
 const config = useRuntimeConfig()
 
 const probe = ref("")

components/auth/AuthenticateCompleted.vue

@@ -2,21 +2,19 @@
   <div>
     <v-icon icon="mdi-lan-check" size="32" color="grey-darken-3" class="mb-3" />
 
-    <h1 class="font-bold text-xl">All Done!</h1>
-    <p>Welcome back! You just signed in right now! We're going to direct you to dashboard...</p>
+    <h1 class="font-bold text-xl">{{ t("signInCompleted") }}</h1>
+    <p>{{ t("signInCompletedCaption") }}</p>
 
     <v-expand-transition>
       <v-alert v-show="error" variant="tonal" type="error" class="text-xs mb-3">
-        Something went wrong... {{ error }}
+        {{ t("errorOccurred", [error]) }}
       </v-alert>
     </v-expand-transition>
   </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from "vue"
-import { useRoute, useRouter } from "vue-router"
-
+const { t } = useI18n()
 const config = useRuntimeConfig()
 
 const route = useRoute()

components/auth/FactorApplicator.vue

@@ -2,7 +2,7 @@
   <div class="flex items-center">
     <v-form class="flex-grow-1" @submit.prevent="submit">
       <div v-if="inputType === 'one-time-password'" class="text-center">
-        <p class="text-xs opacity-90">Check your inbox!</p>
+        <p class="text-xs opacity-90">{{ t("multiFactorHint") }}</p>
         <v-otp-input
           class="pt-0"
           variant="solo"
@@ -15,7 +15,7 @@
       </div>
       <v-text-field
         v-else
-        label="Password"
+        :label="t('password')"
         type="password"
         variant="solo"
         density="comfortable"
@@ -25,7 +25,7 @@
 
       <v-expand-transition>
         <v-alert v-show="error" variant="tonal" type="error" class="text-xs mb-3">
-          Something went wrong... {{ error }}
+          {{ t("errorOccurred", [error]) }}
         </v-alert>
       </v-expand-transition>
 
@@ -38,7 +38,7 @@
           append-icon="mdi-arrow-right"
           :disabled="loading"
         >
-          Next
+          {{ t("next") }}
         </v-btn>
       </div>
     </v-form>
@@ -46,8 +46,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from "vue"
-
+const { t } = useI18n()
 const config = useRuntimeConfig()
 
 const password = ref("")

components/auth/FactorPicker.vue

@@ -17,13 +17,13 @@
 
       <v-expand-transition>
         <v-alert v-show="error" variant="tonal" type="error" class="text-xs mb-3">
-          Something went wrong... {{ error }}
+          {{ t("errorOccurred", [error]) }}
         </v-alert>
       </v-expand-transition>
 
       <div class="flex justify-end">
         <v-btn variant="text" color="primary" class="justify-self-end" append-icon="mdi-arrow-right" @click="submit">
-          Next
+          {{ t("next") }}
         </v-btn>
       </div>
     </div>
@@ -31,8 +31,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from "vue"
-
+const { t } = useI18n()
 const config = useRuntimeConfig()
 
 const focus = ref<number | null>(null)
@@ -78,7 +77,7 @@ async function submit() {
 function getFactorType(item: any) {
   switch (item.type) {
     case 1:
-      return { icon: "mdi-email-fast", label: "Email Validation" }
+      return { icon: "mdi-email-fast", label: t('multiFactorTypeEmail') }
   }
 }