From e260a1a408d4ac80818e5447bc1c5f76495d1ef7 Mon Sep 17 00:00:00 2001 From: Sam Date: Thu, 13 Jul 2023 15:49:13 +0200 Subject: [PATCH] Client - update page title --- .../src/locales/en/administration.json | 3 +- fittrackee_client/src/locales/en/user.json | 2 + .../src/locales/fr/administration.json | 3 +- fittrackee_client/src/locales/fr/user.json | 2 + fittrackee_client/src/router/index.ts | 141 ++++++++++++++++++ 5 files changed, 149 insertions(+), 2 deletions(-) diff --git a/fittrackee_client/src/locales/en/administration.json b/fittrackee_client/src/locales/en/administration.json index 8935d4f1..6ae7dea4 100644 --- a/fittrackee_client/src/locales/en/administration.json +++ b/fittrackee_client/src/locales/en/administration.json @@ -59,7 +59,8 @@ "TABLE": { "ADD_ADMIN_RIGHTS": "Add admin rights", "REMOVE_ADMIN_RIGHTS": "Remove admin rights" - } + }, + "TITLE": "Administration - Users" }, "USER_EMAIL_UPDATE_SUCCESSFUL": "The email address has been updated." } diff --git a/fittrackee_client/src/locales/en/user.json b/fittrackee_client/src/locales/en/user.json index 3bd9cd9b..a90f69ab 100644 --- a/fittrackee_client/src/locales/en/user.json +++ b/fittrackee_client/src/locales/en/user.json @@ -1,4 +1,5 @@ { + "ACCOUNT_CONFIRMATION": "Account confirmation", "ACCOUNT_CONFIRMATION_NOT_RECEIVED": "Didn't received instructions?", "ACCOUNT_CONFIRMATION_SENT": "Check your email. A new confirmation email has been sent to the address provided.", "ADMIN": "Admin", @@ -7,6 +8,7 @@ "CURRENT_PASSWORD": "Current password", "EMAIL": "Email", "EMAIL_INFO": "Enter a valid email address.", + "EMAIL_UPDATE": "Email update", "ENTER_PASSWORD": "Enter a password", "EXPORT_REQUEST": { "DATA_EXPORT": "Data export", diff --git a/fittrackee_client/src/locales/fr/administration.json b/fittrackee_client/src/locales/fr/administration.json index a77cd6e6..16769b9c 100644 --- a/fittrackee_client/src/locales/fr/administration.json +++ b/fittrackee_client/src/locales/fr/administration.json @@ -59,7 +59,8 @@ "TABLE": { "ADD_ADMIN_RIGHTS": "Ajouter les droits d'admin", "REMOVE_ADMIN_RIGHTS": "Retirer les droits d'admin" - } + }, + "TITLE": "Administration - Utilisateurs" }, "USER_EMAIL_UPDATE_SUCCESSFUL": "L'adresse email a été mise à jour." } diff --git a/fittrackee_client/src/locales/fr/user.json b/fittrackee_client/src/locales/fr/user.json index 5d758d9a..49895eea 100644 --- a/fittrackee_client/src/locales/fr/user.json +++ b/fittrackee_client/src/locales/fr/user.json @@ -1,4 +1,5 @@ { + "ACCOUNT_CONFIRMATION": "Confirmation du compte", "ACCOUNT_CONFIRMATION_NOT_RECEIVED": "Vous n'avez pas reçu les instructions ?", "ACCOUNT_CONFIRMATION_SENT": "Vérifiez vos courriels. Un nouveau courriel de confirmation a été envoyé à l'adresse électronique fournie.", "ADMIN": "Admin", @@ -7,6 +8,7 @@ "CURRENT_PASSWORD": "Mot de passe actuel", "EMAIL": "Courriel", "EMAIL_INFO": "Saisissez une adresse électronique valide.", + "EMAIL_UPDATE": "Mise à jour de l'adresse électronique", "ENTER_PASSWORD": "Saisissez un mot de passe", "EXPORT_REQUEST": { "DATA_EXPORT": "Export des données", diff --git a/fittrackee_client/src/router/index.ts b/fittrackee_client/src/router/index.ts index 3c69d5b6..9b407b8c 100644 --- a/fittrackee_client/src/router/index.ts +++ b/fittrackee_client/src/router/index.ts @@ -1,3 +1,4 @@ +import { capitalize } from 'vue' import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router' import AdminApplication from '@/components/Administration/AdminApplication.vue' @@ -19,6 +20,7 @@ import UserApps from '@/components/User/UserApps/index.vue' import UserApp from '@/components/User/UserApps/UserApp.vue' import UserAppsList from '@/components/User/UserApps/UserAppsList.vue' import UserSportPreferences from '@/components/User/UserSportPreferences.vue' +import createI18n from '@/i18n' import store from '@/store' import { AUTH_USER_STORE } from '@/store/constants' import AboutView from '@/views/AboutView.vue' @@ -27,6 +29,8 @@ import NotFoundView from '@/views/NotFoundView.vue' import PrivacyPolicyView from '@/views/PrivacyPolicyView.vue' import LoginOrRegister from '@/views/user/LoginOrRegister.vue' +const { t } = createI18n.global + const getTabFromPath = (path: string): string => { const regex = /(\/profile)(\/edit)*(\/*)/ const tag = path.replace(regex, '').toUpperCase() @@ -38,18 +42,27 @@ const routes: Array = [ path: '/', name: 'Dashboard', component: Dashboard, + meta: { + title: 'dashboard.DASHBOARD', + }, }, { path: '/login', name: 'Login', component: LoginOrRegister, props: { action: 'login' }, + meta: { + title: 'user.LOGIN', + }, }, { path: '/register', name: 'Register', component: LoginOrRegister, props: { action: 'register' }, + meta: { + title: 'user.REGISTER', + }, }, { path: '/account-confirmation', @@ -58,6 +71,9 @@ const routes: Array = [ import( /* webpackChunkName: 'profile' */ '@/views/user/AccountConfirmationView.vue' ), + meta: { + title: 'user.ACCOUNT_CONFIRMATION', + }, }, { path: '/account-confirmation/resend', @@ -67,6 +83,9 @@ const routes: Array = [ /* webpackChunkName: 'reset' */ '@/views/user/AccountConfirmationResendView.vue' ), props: { action: 'account-confirmation-resend' }, + meta: { + title: 'buttons.ACCOUNT-CONFIRMATION-RESEND', + }, }, { path: '/account-confirmation/email-sent', @@ -76,6 +95,9 @@ const routes: Array = [ /* webpackChunkName: 'reset' */ '@/views/user/AccountConfirmationResendView.vue' ), props: { action: 'email-sent' }, + meta: { + title: 'buttons.ACCOUNT-CONFIRMATION-RESEND', + }, }, { path: '/password-reset/sent', @@ -85,6 +107,9 @@ const routes: Array = [ /* webpackChunkName: 'reset' */ '@/views/user/PasswordResetView.vue' ), props: { action: 'request-sent' }, + meta: { + title: 'user.PASSWORD_RESET', + }, }, { path: '/password-reset/request', @@ -94,6 +119,9 @@ const routes: Array = [ /* webpackChunkName: 'reset' */ '@/views/user/PasswordResetView.vue' ), props: { action: 'reset-request' }, + meta: { + title: 'user.PASSWORD_RESET', + }, }, { path: '/password-reset/password-updated', @@ -103,6 +131,9 @@ const routes: Array = [ /* webpackChunkName: 'reset' */ '@/views/user/PasswordResetView.vue' ), props: { action: 'password-updated' }, + meta: { + title: 'user.PASSWORD_RESET', + }, }, { path: '/password-reset', @@ -112,6 +143,9 @@ const routes: Array = [ /* webpackChunkName: 'reset' */ '@/views/user/PasswordResetView.vue' ), props: { action: 'reset' }, + meta: { + title: 'user.PASSWORD_RESET', + }, }, { path: '/email-update', @@ -120,6 +154,9 @@ const routes: Array = [ import( /* webpackChunkName: 'profile' */ '@/views/user/EmailUpdateView.vue' ), + meta: { + title: 'user.EMAIL_UPDATE', + }, }, { path: '/profile', @@ -139,17 +176,26 @@ const routes: Array = [ path: '', name: 'UserInfos', component: UserInfos, + meta: { + title: 'user.PROFILE.TABS.PROFILE', + }, }, { path: 'preferences', name: 'UserPreferences', component: UserPreferences, + meta: { + title: 'user.PROFILE.TABS.PREFERENCES', + }, }, { path: 'sports', name: 'UserSportPreferences', component: UserSportPreferences, props: { isEdition: false }, + meta: { + title: 'user.PROFILE.TABS.SPORTS', + }, }, { path: 'apps', @@ -160,27 +206,42 @@ const routes: Array = [ path: '', name: 'UserAppsList', component: UserAppsList, + meta: { + title: 'user.PROFILE.TABS.APPS', + }, }, { path: ':id', name: 'UserApp', component: UserApp, + meta: { + title: 'user.PROFILE.TABS.APPS', + }, }, { path: ':id/created', name: 'CreatedUserApp', component: UserApp, props: { afterCreation: true }, + meta: { + title: 'user.PROFILE.TABS.APPS', + }, }, { path: 'new', name: 'AddUserApp', component: AddUserApp, + meta: { + title: 'user.PROFILE.TABS.APPS', + }, }, { path: 'authorize', name: 'AuthorizeUserApp', component: AuthorizeUserApp, + meta: { + title: 'user.PROFILE.TABS.APPS', + }, }, ], }, @@ -198,32 +259,50 @@ const routes: Array = [ path: '', name: 'UserInfosEdition', component: UserInfosEdition, + meta: { + title: 'user.PROFILE.EDIT', + }, }, { path: 'account', name: 'UserAccountEdition', component: UserAccountEdition, + meta: { + title: 'user.PROFILE.ACCOUNT_EDITION', + }, }, { path: 'picture', name: 'UserPictureEdition', component: UserPictureEdition, + meta: { + title: 'user.PROFILE.PICTURE_EDITION', + }, }, { path: 'preferences', name: 'UserPreferencesEdition', component: UserPreferencesEdition, + meta: { + title: 'user.PROFILE.EDIT_PREFERENCES', + }, }, { path: 'sports', name: 'UserSportPreferencesEdition', component: UserSportPreferences, props: { isEdition: true }, + meta: { + title: 'user.PROFILE.EDIT_SPORTS_PREFERENCES', + }, }, { path: 'privacy-policy', name: 'UserPrivacyPolicy', component: UserPrivacyPolicyValidation, + meta: { + title: 'user.PROFILE.PRIVACY-POLICY_EDITION', + }, }, ], }, @@ -234,12 +313,18 @@ const routes: Array = [ name: 'Statistics', component: () => import(/* webpackChunkName: 'statistics' */ '@/views/StatisticsView.vue'), + meta: { + title: 'statistics.STATISTICS', + }, }, { path: '/users/:username', name: 'User', component: () => import(/* webpackChunkName: 'profile' */ '@/views/user/UserView.vue'), + meta: { + title: 'administration.USER', + }, }, { path: '/workouts', @@ -248,6 +333,10 @@ const routes: Array = [ import( /* webpackChunkName: 'workouts' */ '@/views/workouts/WorkoutsView.vue' ), + meta: { + title: 'workouts.WORKOUT', + count: 0, + }, }, { path: '/workouts/:workoutId', @@ -255,6 +344,9 @@ const routes: Array = [ component: () => import(/* webpackChunkName: 'workouts' */ '@/views/workouts/Workout.vue'), props: { displaySegment: false }, + meta: { + title: 'workouts.WORKOUT', + }, }, { path: '/workouts/:workoutId/edit', @@ -263,6 +355,9 @@ const routes: Array = [ import( /* webpackChunkName: 'workouts' */ '@/views/workouts/EditWorkout.vue' ), + meta: { + title: 'workouts.EDIT_WORKOUT', + }, }, { path: '/workouts/:workoutId/segment/:segmentId', @@ -270,6 +365,10 @@ const routes: Array = [ component: () => import(/* webpackChunkName: 'workouts' */ '@/views/workouts/Workout.vue'), props: { displaySegment: true }, + meta: { + title: 'workouts.SEGMENT', + count: 0, + }, }, { path: '/workouts/add', @@ -278,6 +377,9 @@ const routes: Array = [ import( /* webpackChunkName: 'workouts' */ '@/views/workouts/AddWorkout.vue' ), + meta: { + title: 'workouts.ADD_WORKOUT', + }, }, { path: '/admin', @@ -289,22 +391,34 @@ const routes: Array = [ path: '', name: 'AdministrationMenu', component: AdminMenu, + meta: { + title: 'admin.ADMINISTRATION', + }, }, { path: 'application', name: 'ApplicationAdministration', component: AdminApplication, + meta: { + title: 'admin.APP_CONFIG.TITLE', + }, }, { path: 'application/edit', name: 'ApplicationAdministrationEdition', component: AdminApplication, props: { edition: true }, + meta: { + title: 'admin.APPLICATION', + }, }, { path: 'sports', name: 'SportsAdministration', component: AdminSports, + meta: { + title: 'admin.SPORTS.TITLE', + }, }, { path: 'users/:username', @@ -312,11 +426,18 @@ const routes: Array = [ component: () => import(/* webpackChunkName: 'profile' */ '@/views/user/UserView.vue'), props: { fromAdmin: true }, + meta: { + title: 'admin.USER', + count: 1, + }, }, { path: 'users', name: 'UsersAdministration', component: AdminUsers, + meta: { + title: 'admin.USERS.TITLE', + }, }, ], }, @@ -324,16 +445,25 @@ const routes: Array = [ path: '/about', name: 'About', component: AboutView, + meta: { + title: 'common.ABOUT', + }, }, { path: '/privacy-policy', name: 'PrivacyPolicy', component: PrivacyPolicyView, + meta: { + title: 'privacy_policy.TITLE', + }, }, { path: '/:pathMatch(.*)*', name: 'not-found', component: NotFoundView, + meta: { + title: 'error.NOT_FOUND.PAGE', + }, }, ] @@ -357,6 +487,17 @@ const pathsWithoutAuthentication = [ const pathsWithoutChecks = ['/email-update', '/about', '/privacy-policy'] router.beforeEach((to, from, next) => { + if ('title' in to.meta) { + const title = typeof to.meta.title === 'string' ? to.meta.title : '' + const translatedTitle = title + ? typeof to.meta.count === 'number' + ? t(title, +to.meta.count) + : t(title) + : '' + window.document.title = `FitTrackee${ + title ? ` - ${capitalize(translatedTitle)}` : '' + }` + } store .dispatch(AUTH_USER_STORE.ACTIONS.CHECK_AUTH_USER) .then(() => {