Addresses Review Comments

frontend/components/modal/PermissionDenied.vue

@@ -2,6 +2,7 @@
 const { permissionDenied: { permissionDeniedVisible, permissionDeniedError } } = useModal()
 const router = useRouter()
 const { t } = useI18n()
+const localePath = useLocalePath()
 
 const prefix = 'ModalPermissionDenied'
 const tt = (s: string) => t(`${prefix}.${s}`)
@@ -13,7 +14,7 @@ const navigateBack = () => {
     return
   }
   // Otherwise, just take them home.
-  return router.push('/')
+  return router.push(localePath('/'))
 }
 </script>
 

frontend/components/standard/Content.vue

@@ -37,7 +37,10 @@
     margin: 0.5rem 0;
   }
 
-  min-height: calc(100vh - 10.5rem - 4px);
   justify-content: center;
 }
+
+.full-height-minus-header-footer {
+  min-height: calc(100vh - 10.5rem - 4px);
+}
 </style>

frontend/components/standard/Nav.vue

@@ -60,7 +60,7 @@ const menuItems = computed(() => {
         background="white"
         layout="horizontal"
         class="h-3rem pb-2"
-        @click="() => router.push('/')"
+        @click="() => router.push(localePath('/'))"
       />
       <PVButton
         :icon="menuHidden ? 'pi pi-bars' : 'pi pi-times'"

frontend/composables/useMSAL.ts

@@ -36,6 +36,7 @@ export const useMSAL = async () => {
 
   const router = useRouter()
   const { userClientWithAuth } = useAPI()
+  const localePath = useLocalePath()
 
   const { $msal: { msalConfig, b2cPolicies } } = useNuxtApp()
   const scopes: string[] = ['openid', 'profile', 'offline_access', msalConfig.auth.clientId]
@@ -283,7 +284,7 @@ export const useMSAL = async () => {
       .then(() => { /* cast to void */ })
       .finally(() => {
         isAuthenticated.value = false
-        void router.push('/')
+        void router.push(localePath('/'))
       })
   }
 

frontend/envs/env.dev

@@ -9,3 +9,7 @@ MSAL_CLIENT_ID=218f47ee-11b1-459a-b914-b7fa6f107e7b
 MSAL_REDIRECT_URI=https://pacta.dev.rmi.siliconally.dev/blank
 MSAL_LOGOUT_URI=https://pacta.dev.rmi.siliconally.dev/
 MSAL_MIN_LOG_LEVEL=INFO
+
+BASE_URI=https://pacta.dev.rmi.siliconally.dev
+
+I18N_STRATEGY=prefix

frontend/envs/env.local

@@ -9,3 +9,7 @@ MSAL_CLIENT_ID=2d77a4a9-b7be-4451-ad47-c151d8b6c05f
 MSAL_REDIRECT_URI=http://localhost:3000/blank
 MSAL_LOGOUT_URI=http://localhost:3000/
 MSAL_MIN_LOG_LEVEL=INFO
+
+BASE_URI=http://3000
+
+I18N_STRATEGY=prefix

frontend/lang/en.json

@@ -10,8 +10,8 @@
     "ModalError": {
         "Heading": "An error occurred",
         "Subheading": "Sorry about that, our team take bug reports seriously, and will try to make it right!",
-        "Error Details": "Error Details", 
-        "Common Steps": "",
+        "Error Details": "Error Details",
+        "Common Steps": "Some common troubleshooting steps that might be helpful:",
         "Refresh": "Refresh this page",
         "Refresh Explanation": "most of our pages save your progress as you go, so it's almost always fine to reload the page.",
         "Connection": "Check your internet connection",

frontend/layouts/default.vue

@@ -14,8 +14,7 @@ onMountedWithLoading(() => { /* nothing to do */ }, 'defaultLayout.onMountedWith
       :aria-hidden="anyBlockingModalOpen"
     >
       <main
-        class="px-3 md:px-6 w-full lg:w-10 xl:w-8 mx-auto"
-        style="min-height: calc(100vh - 10.5rem - 4px);"
+        class="px-3 md:px-6 w-full lg:w-10 xl:w-8 mx-auto full-height-minus-header-footer"
       >
         <NuxtPage />
       </main>

frontend/middleware/validate-nav-i18n.global.ts

@@ -0,0 +1,35 @@
+import { type RouteLocationNormalized } from 'vue-router'
+
+const getLocaleFromRoute = (route: RouteLocationNormalized): string => {
+  if (route.fullPath.startsWith('/en/') || route.fullPath === '/en') {
+    return 'en'
+  }
+  if (route.fullPath.startsWith('/fr/') || route.fullPath === '/fr') {
+    return 'fr'
+  }
+  if (route.fullPath.startsWith('/es/') || route.fullPath === '/es') {
+    return 'es'
+  }
+  if (route.fullPath.startsWith('/de/') || route.fullPath === '/de') {
+    return 'de'
+  }
+  return ''
+}
+
+export default defineNuxtRouteMiddleware((to: RouteLocationNormalized, from: RouteLocationNormalized) => {
+  const toLocale = getLocaleFromRoute(to)
+  if (toLocale === '') {
+    console.error(`Navigating to ${to.fullPath} is missing locale!`)
+    return
+  }
+  const fromLocale = getLocaleFromRoute(from)
+  if (toLocale === fromLocale) {
+    return
+  }
+  const toWithoutLocale = to.fullPath.replace(`/${toLocale}`, '')
+  const fromWithoutLocale = from.fullPath.replace(`/${fromLocale}`, '')
+  if (toWithoutLocale === fromWithoutLocale) {
+    return
+  }
+  console.error(`Navigating to ${to.fullPath} is missing navigation guard!`)
+})

frontend/nuxt.config.ts

@@ -4,8 +4,10 @@ export default defineNuxtConfig({
     '@nuxtjs/i18n',
   ],
   build: {
-    // https://primevue.org/installation/#nuxtintegration
-    transpile: ['primevue', 'vue-i18n'],
+    transpile: [
+      'primevue', // https://primevue.org/installation/#nuxtintegration
+      'vue-i18n',
+    ],
   },
   css: [
     '@/assets/css/overrides.css',
@@ -45,9 +47,8 @@ export default defineNuxtConfig({
     dirs: ['globalimports'],
   },
   i18n: {
-    // TODO(grady) Set a Base URL once we have it for SEO https://i18n.nuxtjs.org/guide/seo#:~:text=You%20must%20also%20set%20the%20baseUrl%20option%20to%20your%20production%20domain%20in%20order%20to%20make%20alternate%20URLs%20fully%2Dqualified%3A
-    // baseUrl: 'https://my-nuxt-app.com'
-    strategy: 'prefix_and_default',
+    baseUrl: process.env.BASE_URL,
+    strategy: process.env.I18N_STRATEGY, // When we have a prod env, this should be 'prefix_except_default'
     vueI18n: './i18n.config.ts',
     locales: [
       { code: 'en', iso: 'en-US', file: { path: 'en.json', cache: false }, flag: '🇬🇧', name: 'English' },

frontend/package.json

@@ -20,7 +20,7 @@
     "@types/node": "^18.17.3",
     "@types/uuid": "^9.0.3",
     "@typescript-eslint/eslint-plugin": "^6.4.1",
-    "eslint": "^8.47.0",
+    "eslint": "^8.51.0",
     "eslint-config-standard-with-typescript": "^38.0.0",
     "eslint-plugin-import": "^2.28.1",
     "eslint-plugin-n": "^16.0.2",

frontend/pages/admin/index.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+const localePath = useLocalePath()
+
 interface AdminItem {
   title: string
   icon: string
@@ -51,7 +53,7 @@ const adminItems: AdminItem[] = [
             <div class="flex justify-content-end w-full">
               <LinkButton
                 class="p-button-sm"
-                :to="item.href"
+                :to="localePath(item.href)"
                 icon="pi pi-arrow-right"
                 icon-pos="right"
                 label="Go"