wip/Dashboard Internationalization

package.json

@@ -40,8 +40,8 @@
     "axios": "^1.5.1",
     "buffer": "^6.0.3",
     "chart.js": "^4.3.3",
-    "dotenv": "^16.3.1",
     "core-tasks": "^1.0.0-alpha.1",
+    "dotenv": "^16.3.1",
     "emailjs-com": "^3.2.0",
     "firebase": "^9.14.0",
     "jose": "^4.14.4",
@@ -60,6 +60,7 @@
     "vite-plugin-node-polyfills": "^0.9.0",
     "vue": "^3.2.25",
     "vue-google-maps-community-fork": "^0.3.1",
+    "vue-i18n": "^9.9.1",
     "vue-router": "^4.1.6",
     "vue3-text-clamp": "^0.1.2",
     "zipson": "^0.2.12"

src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <AppHead>
-    <title>ROAR: {{ $route.meta.pageTitle }}</title>
+    <title>ROAR: {{ $route.meta.pageTitle[language] }}</title>
     <meta name="description" content="A web-based tool to query ROAR assessment data!" />
 
     <!-- Social -->
@@ -27,6 +27,8 @@ import { useAuthStore } from '@/store/auth';
 import { ref } from 'vue';
 import { fetchDocById } from '@/helpers/query/utils';
 
+const language = window.navigator.language;
+
 const navbarBlacklist = ref([
   'SignIn',
   'PlayApp',

src/components/GameTabs.vue

@@ -48,8 +48,8 @@
                   />
                 </svg>
               </i>
-              <span v-if="!allGamesComplete && !game.completedOn">Click to start</span>
-              <span v-else>Task Completed!</span>
+              <span v-if="!allGamesComplete && !game.completedOn">{{ $t('gameTabs.clickToStart') }}</span>
+              <span v-else>{{ $t('gameTabs.taskCompleted') }}</span>
             </div>
           </div>
           <div class="roar-game-image">

src/components/NavBar.vue

@@ -18,7 +18,7 @@
           </PvMenu>
         </div>
         <router-link :to="{ name: 'SignOut' }" class="signout-button">
-          <PvButton data-cy="button-sign-out" class="no-underline">Sign Out</PvButton>
+          <PvButton data-cy="button-sign-out" class="no-underline">{{ $t('navBar.signOut') }}</PvButton>
         </router-link>
       </div>
     </nav>

src/components/ParticipantSidebar.vue

@@ -4,13 +4,15 @@
       <PvChart type="doughnut" :data="chartData" :options="chartOptions" />
       <div>
         <p class="sidebar-progress-totals">{{ completedGames }}/{{ totalGames }}</p>
-        <p>tasks completed!</p>
+        <p>{{ $t('participantSidebar.tasksCompleted') }}</p>
       </div>
     </div>
     <ul class="sidebar-info">
-      <li class="sidebar-title"><strong>Student Info</strong></li>
+      <li class="sidebar-title">
+        <strong>{{ $t('participantSidebar.studentInfo') }}</strong>
+      </li>
       <li>
-        Grade: <span class="sidebar-info-item">{{ studentInfo.grade }}</span>
+        {{ $t('participantSidebar.grade') }}: <span class="sidebar-info-item">{{ studentInfo.grade }}</span>
       </li>
     </ul>
   </div>

src/components/auth/SignIn.vue

@@ -4,58 +4,62 @@
       <div class="field mt-2">
         <div class="p-input-icon-right">
           <PvInputText
-            id="email"
+            :id="$t('authSignIn.emailId')"
             v-model="v$.email.$model"
             :class="{ 'p-invalid': invalid }"
             aria-describedby="email-error"
-            placeholder="Username or email"
+            :placeholder="$t('authSignIn.emailPlaceholder')"
             data-cy="input-username-email"
           />
         </div>
-        <small v-if="invalid" class="p-error">Incorrect username/email or password</small>
+        <small v-if="invalid" class="p-error">{{ $t('authSignIn.incorrectEmailOrPassword') }}</small>
       </div>
       <div class="field mt-4 mb-5">
         <div>
           <span v-if="evaluatingEmail">
             <PvSkeleton height="2.75rem" />
           </span>
-          <div v-else-if="allowPassword && allowLink">Both allowed</div>
+          <div v-else-if="allowPassword && allowLink">{{ $t('authSignIn.bothAllowed') }}</div>
           <PvPassword
             v-else-if="allowPassword"
-            id="password"
+            :id="$t('authSignIn.passwordId')"
             v-model="v$.password.$model"
             :class="{ 'p-invalid': invalid }"
             toggle-mask
             show-icon="pi pi-eye-slash"
             hide-icon="pi pi-eye"
             :feedback="false"
-            placeholder="Password"
+            :placeholder="$t('authSignIn.passwordPlaceholder')"
             data-cy="input-password"
           >
             <template #header>
-              <h6>Pick a password</h6>
+              <h6>{{ $t('authSignIn.pickPassword') }}</h6>
             </template>
             <template #footer="sp">
               {{ sp.level }}
               <PvDivider />
-              <p class="mt-2">Suggestions</p>
+              <p class="mt-2">{{ $t('authSignIn.suggestions') }}</p>
               <ul class="pl-2 ml-2 mt-0" style="line-height: 1.5">
-                <li>At least one lowercase</li>
-                <li>At least one uppercase</li>
-                <li>At least one numeric</li>
-                <li>Minimum 8 characters</li>
+                <li>{{ $t('authSignIn.atLeastOneLowercase') }}</li>
+                <li>{{ $t('authSignIn.atLeastOneUppercase') }}</li>
+                <li>{{ $t('authSignIn.atLeastOneNumeric') }}</li>
+                <li>{{ $t('authSignIn.minimumCharacters') }}</li>
               </ul>
             </template>
           </PvPassword>
           <div v-else-if="allowLink">
-            <PvPassword disabled placeholder="Press Go to sign-in with an email link." />
+            <PvPassword disabled :placeholder="$t('signInWithEmailLinkPlaceholder')" />
           </div>
           <div v-else>
-            <PvPassword disabled class="p-invalid text-red-600" placeholder="Error: invalid email" />
+            <PvPassword
+              disabled
+              class="p-invalid text-red-600"
+              :placeholder="$t('authSignIn.invalidEmailPlaceholder')"
+            />
           </div>
         </div>
       </div>
-      <PvButton type="submit" label="Go! &rarr;" class="submit-button" />
+      <PvButton type="submit" :label="$t('authSignIn.buttonLabel') + ' &rarr;'" class="submit-button" />
     </form>
   </div>
 </template>

src/components/tasks/TaskFluency.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="jspsych-target" class="game-target" translate="no" />
   <div v-if="!gameStarted" class="col-full text-center">
-    <h1>Preparing your game!</h1>
+    <h1>{{ $t('tasks.preparing') }}</h1>
     <AppSpinner />
   </div>
 </template>

src/components/tasks/TaskLetter.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="jspsych-target" class="game-target" translate="no" />
   <div v-if="!gameStarted" class="col-full text-center">
-    <h1>Preparing your game!</h1>
+    <h1>{{ $t('tasks.preparing') }}</h1>
     <AppSpinner />
   </div>
 </template>

src/components/tasks/TaskLevante.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="jspsych-target" class="game-target" translate="no" />
   <div v-if="!gameStarted" class="col-full text-center">
-    <h1>Preparing your game!</h1>
+    <h1>{{ $t('tasks.preparing') }}</h1>
     <AppSpinner />
   </div>
 </template>

src/components/tasks/TaskMultichoice.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="jspsych-target" class="game-target" translate="no" />
   <div v-if="!gameStarted" class="col-full text-center">
-    <h1>Preparing your game!</h1>
+    <h1>{{ $t('tasks.preparing') }}</h1>
     <AppSpinner />
   </div>
 </template>

src/components/tasks/TaskPA.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="jspsych-target" class="game-target" translate="no" />
   <div v-if="!gameStarted" class="col-full text-center">
-    <h1>Preparing your game!</h1>
+    <h1>{{ $t('tasks.preparing') }}</h1>
     <AppSpinner />
   </div>
 </template>

src/components/tasks/TaskSRE.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="jspsych-target" class="game-target" translate="no" />
   <div v-if="!gameStarted" class="col-full text-center">
-    <h1>Preparing your game!</h1>
+    <h1>{{ $t('tasks.preparing') }}</h1>
     <AppSpinner />
   </div>
 </template>

src/components/tasks/TaskSWR-ES.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="jspsych-target" class="game-target" translate="no" />
   <div v-if="!gameStarted" class="col-full text-center">
-    <h1>Preparing your game!</h1>
+    <h1>{{ $t('tasks.preparing') }}</h1>
     <AppSpinner />
   </div>
 </template>

src/components/tasks/TaskSWR.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="jspsych-target" class="game-target" translate="no" />
   <div v-if="!gameStarted" class="col-full text-center">
-    <h1>Preparing your game!</h1>
+    <h1>{{ $t('tasks.preparing') }}</h1>
     <AppSpinner />
   </div>
 </template>

src/components/tasks/TaskVocab.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="jspsych-target" class="game-target" translate="no" />
   <div v-if="!gameStarted" class="col-full text-center">
-    <h1>Preparing your game!</h1>
+    <h1>{{ $t('tasks.preparing') }}</h1>
     <AppSpinner />
   </div>
 </template>

src/main.js

@@ -78,6 +78,9 @@ import 'primeflex/primeflex.scss'; // primeflex
 import './assets/styles/theme-tailwind.css'; // base theme (pulled from Primevue)
 import './assets/styles/theme.scss'; // ROAR theme
 
+// translations
+import { i18n } from './translations/i18n';
+
 // Begin the app!
 const app = createApp(App);
 const pinia = createPinia();
@@ -97,6 +100,7 @@ app.use(VueGoogleMaps, {
 app.use(createHead());
 app.use(TextClamp);
 app.use(VueQueryPlugin);
+app.use(i18n);
 
 app.component('PvAccordion', PvAccordion);
 app.component('PvAccordionTab', PvAccordionTab);

src/pages/CleverLanding.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="loading-container">
     <AppSpinner style="margin-bottom: 1rem" />
-    <span>Loading your data from Clever...</span>
+    <span>{{ $t('cleverLanding.cleverLoading') }}</span>
   </div>
 </template>
 <script setup>

src/pages/HomeParticipant.vue

@@ -3,15 +3,15 @@
     <div v-if="!noGamesAvailable || consentSpinner">
       <div v-if="isFetching || consentSpinner" class="loading-container">
         <AppSpinner style="margin-bottom: 1rem" />
-        <span>Loading Assignments</span>
+        <span>{{ $t('homeParticipant.loadingAssignments') }}</span>
       </div>
       <div v-else>
         <h2 v-if="adminInfo?.length == 1" class="p-float-label dropdown-container">
           {{ adminInfo.at(0).name }}
         </h2>
         <div v-if="adminInfo?.length > 1" class="p-float-label dropdown-container">
           <PvDropdown v-model="selectedAdmin" :options="adminInfo ?? []" option-label="name" input-id="dd-assignment" />
-          <label for="dd-assignment">Select an assignment</label>
+          <label for="dd-assignment">{{ $t('homeParticipant.selectAssignment') }}</label>
         </div>
         <div class="tabs-container">
           <ParticipantSidebar :total-games="totalGames" :completed-games="completeGames" :student-info="studentInfo" />
@@ -21,10 +21,10 @@
     </div>
     <div v-else>
       <div class="col-full text-center">
-        <h1>You have no assignments!</h1>
-        <p class="text-center">Please contact your administrator to get added to an assignment.</p>
+        <h1>{{ $t('homeParticipant.noAssignments') }}</h1>
+        <p class="text-center">{{ $t('homeParticipant.contactAdministrator') }}</p>
         <router-link :to="{ name: 'SignOut' }">
-          <PvButton label="Sign out" class="no-underline" icon="pi pi-sign-out" />
+          <PvButton :label="$t('navBar.signOut')" class="no-underline" icon="pi pi-sign-out" />
         </router-link>
       </div>
     </div>