Fixes Issue #12421 - Change page title based on the site section being viewed (#12627)

* Update title for tabs not including challenges, guild and team

* add section titles to challenges, guilds, and groups

* Update dynamic title to use vuex action

* Remove duplicate key

* Actually remove duplicate key

* Fix section sub section in group

* Add note to implement setTitle when adding a page

* Add missing sections to dynamic title

* Features string not translated

* Use onGroupUpdate to update group titles

* Add watcher to challenges for dynamic title updates

* Small fixes

* Add register and login to title, remove duplicate keys

* Add home page dynamic title functionality

* Minor name changes

* remove wrong i18n strings from front.js

* refactor router note

Co-authored-by: Matteo Pagliazzi <matteopagliazzi@gmail.com>

website/client/src/components/auth/registerLoginReset.vue

@@ -745,6 +745,7 @@ export default {
   watch: {
     $route: {
       handler () {
+        this.setTitle();
         if (this.resetPasswordSetNewOne) {
           const { query } = this.$route;
           const { code } = query;
@@ -760,7 +761,6 @@ export default {
             this.$router.push({ name: 'login' });
             return;
           }
-
           this.resetPasswordSetNewOneData.code = query.code;
           this.resetPasswordSetNewOneData.hasError = hasError;
         }
@@ -898,6 +898,18 @@ export default {
         window.location.href = redirectTo;
       }
     },
+    setTitle () {
+      if (this.resetPasswordSetNewOne) {
+        return;
+      }
+      let title = 'login';
+      if (this.registering) {
+        title = 'register';
+      }
+      this.$store.dispatch('common:setTitle', {
+        section: this.$t(title),
+      });
+    },
     handleSubmit () {
       if (this.registering) {
         this.register();

website/client/src/components/challenges/challengeDetail.vue

@@ -384,6 +384,16 @@ export default {
       memberResults: [],
     };
   },
+  watch: {
+    'challenge.name': {
+      handler (newVal) {
+        this.$store.dispatch('common:setTitle', {
+          section: this.$t('challenge'),
+          subSection: newVal.name,
+        });
+      },
+    },
+  },
   computed: {
     ...mapState({ user: 'user.data' }),
     isMember () {
@@ -433,6 +443,10 @@ export default {
         this.$router.push('/challenges/findChallenges');
         return;
       }
+      this.$store.dispatch('common:setTitle', {
+        subSection: this.challenge.name,
+        section: this.$t('challenges'),
+      });
       const tasks = await this.$store.dispatch('tasks:getChallengeTasks', { challengeId: this.searchId });
       this.tasksByType = {
         habit: [],

website/client/src/components/challenges/findChallenges.vue

@@ -175,6 +175,10 @@ export default {
     },
   },
   mounted () {
+    this.$store.dispatch('common:setTitle', {
+      subSection: this.$t('findChallenges'),
+      section: this.$t('challenges'),
+    });
     this.loadChallenges();
   },
   methods: {

website/client/src/components/challenges/myChallenges.vue

@@ -218,6 +218,10 @@ export default {
     },
   },
   mounted () {
+    this.$store.dispatch('common:setTitle', {
+      subSection: this.$t('myChallenges'),
+      section: this.$t('challenges'),
+    });
     this.loadChallenges();
   },
   methods: {

website/client/src/components/group-plans/taskInformation.vue

@@ -224,7 +224,10 @@ export default {
       this.group = await this.$store.dispatch('guilds:getGroup', {
         groupId: this.searchId,
       });
-
+      this.$store.dispatch('common:setTitle', {
+        subSection: this.group.name,
+        section: this.$t('group'),
+      });
       const members = await this.$store.dispatch('members:getGroupMembers', { groupId: this.searchId });
       this.group.members = members;
 

website/client/src/components/groups/discovery.vue

@@ -155,6 +155,12 @@ export default {
       return this.guilds.filter(guild => filterGuild(guild, filters, search, user));
     },
   },
+  mounted () {
+    this.$store.dispatch('common:setTitle', {
+      subSection: this.$t('guildsDiscovery'),
+      section: this.$t('guilds'),
+    });
+  },
   methods: {
     async updateSearch (eventData) {
       // this.search = eventData.searchTerm; @TODO: Probably don't need this anymore

website/client/src/components/groups/group.vue

@@ -500,7 +500,10 @@ export default {
     if (this.isParty) this.searchId = 'party';
     if (!this.searchId) this.searchId = this.groupId;
     await this.fetchGuild();
-
+    this.$store.dispatch('common:setTitle', {
+      section: this.$t('groupPlans'),
+      subSection: this.group.name,
+    });
     this.$root.$on('updatedGroup', this.onGroupUpdate);
   },
   beforeDestroy () {
@@ -508,7 +511,6 @@ export default {
   },
   beforeRouteUpdate (to, from, next) {
     this.$set(this, 'searchId', to.params.groupId);
-
     next();
   },
   methods: {
@@ -518,6 +520,10 @@ export default {
     onGroupUpdate (group) {
       const updatedGroup = extend(this.group, group);
       this.$set(this.group, updatedGroup);
+      this.$store.dispatch('common:setTitle', {
+        section: this.$t('groupPlans'),
+        subSection: group.name,
+      });
     },
 
     /**

website/client/src/components/groups/groupPlan.vue

@@ -486,6 +486,9 @@ export default {
   },
   mounted () {
     this.activePage = this.PAGES.BENEFITS;
+    this.$store.dispatch('common:setTitle', {
+      section: this.$t('groupPlans'),
+    });
   },
   methods: {
     launchModal () {

website/client/src/components/groups/myGuilds.vue

@@ -165,6 +165,12 @@ export default {
       });
     },
   },
+  mounted () {
+    this.$store.dispatch('common:setTitle', {
+      subSection: this.$t('myGuilds'),
+      section: this.$t('guilds'),
+    });
+  },
   created () {
     this.fetchGuilds();
   },

website/client/src/components/groups/tavern.vue

@@ -843,6 +843,10 @@ export default {
     },
   },
   async mounted () {
+    this.$store.dispatch('common:setTitle', {
+      subSection: this.$t('tavern'),
+      section: this.$t('guilds'),
+    });
     this.group = await this.$store.dispatch('guilds:getGroup', { groupId: TAVERN_ID });
   },
   methods: {

website/client/src/components/inventory/equipment/index.vue

@@ -508,6 +508,11 @@ export default {
     this.costumeMode = getLocalSetting(
       CONSTANTS.keyConstants.CURRENT_EQUIPMENT_DRAWER_TAB,
     ) === CONSTANTS.equipmentDrawerTabValues.COSTUME_TAB;
+
+    this.$store.dispatch('common:setTitle', {
+      subSection: this.$t('equipment'),
+      section: this.$t('inventory'),
+    });
   },
   methods: {
     selectDrawerTab (tabName) {

website/client/src/components/inventory/items/index.vue

@@ -491,6 +491,12 @@ export default {
       return this.groups.some(g => g.selected);
     },
   },
+  mounted () {
+    this.$store.dispatch('common:setTitle', {
+      subSection: this.$t('items'),
+      section: this.$t('inventory'),
+    });
+  },
   watch: {
     searchText: throttle(function throttleSearch () {
       this.searchTextThrottled = this.searchText.toLowerCase();

website/client/src/components/inventory/stable/index.vue

@@ -645,6 +645,12 @@ export default {
       return Object.values(this.viewOptions).some(g => g.selected);
     },
   },
+  mounted () {
+    this.$store.dispatch('common:setTitle', {
+      subSection: this.$t('stable'),
+      section: this.$t('inventory'),
+    });
+  },
   watch: {
     searchText: _throttle(function throttleSearch () {
       const search = this.searchText.toLowerCase();

website/client/src/components/settings/api.vue

@@ -154,6 +154,10 @@ export default {
     },
   },
   mounted () {
+    this.$store.dispatch('common:setTitle', {
+      section: this.$t('settings'),
+      subSection: this.$t('API'),
+    });
     window.addEventListener('message', this.receiveMessage, false);
   },
   destroy () {

website/client/src/components/settings/dataExport.vue

@@ -13,3 +13,14 @@
     </div>
   </div>
 </template>
+
+<script>
+export default {
+  mounted () {
+    this.$store.dispatch('common:setTitle', {
+      section: this.$t('settings'),
+      subSection: this.$t('dataExport'),
+    });
+  },
+};
+</script>

website/client/src/components/settings/notifications.vue

@@ -105,6 +105,10 @@ export default {
     ...mapState({ user: 'user.data' }),
   },
   async mounted () {
+    this.$store.dispatch('common:setTitle', {
+      section: this.$t('settings'),
+      subSection: this.$t('notifications'),
+    });
     // If ?unsubFrom param is passed with valid email type,
     // automatically unsubscribe users from that email and
     // show an alert

website/client/src/components/settings/promoCode.vue

@@ -87,6 +87,12 @@ export default {
       return '/api/v4/coupons';
     },
   },
+  mounted () {
+    this.$store.dispatch('common:setTitle', {
+      section: this.$t('settings'),
+      subSection: this.$t('promoCode'),
+    });
+  },
   methods: {
     generateCodes () {
       // $http.post(ApiUrl.get() + '/api/v2/coupons/generate/

website/client/src/components/settings/site.vue

@@ -678,6 +678,11 @@ export default {
     this.emailUpdates.newEmail = this.user.auth.local.email || null;
     this.localAuth.username = this.user.auth.local.username || null;
     this.soundIndex = 0;
+
+    this.$store.dispatch('common:setTitle', {
+      section: this.$t('settings'),
+    });
+
     hello.init({
       facebook: process.env.FACEBOOK_KEY, // eslint-disable-line no-process-env
       google: process.env.GOOGLE_CLIENT_ID, // eslint-disable-line no-process-env

website/client/src/components/settings/subscription.vue

@@ -720,6 +720,12 @@ export default {
       return moment(this.user.purchased.plan.dateTerminated).format('MM/DD/YYYY');
     },
   },
+  mounted () {
+    this.$store.dispatch('common:setTitle', {
+      section: this.$t('settings'),
+      subSection: this.$t('subscription'),
+    });
+  },
   methods: {
     async applyCoupon (coupon) {
       const response = await axios.post(`/api/v4/coupons/validate/${coupon}`);

website/client/src/components/shops/market/index.vue

@@ -304,6 +304,10 @@ export default {
     }, 250),
   },
   async mounted () {
+    this.$store.dispatch('common:setTitle', {
+      subSection: this.$t('market'),
+      section: this.$t('shops'),
+    });
     await this.$store.dispatch('worldState:getWorldState');
   },
   methods: {

website/client/src/components/shops/quests/index.vue

@@ -544,6 +544,10 @@ export default {
     }, 250),
   },
   async mounted () {
+    this.$store.dispatch('common:setTitle', {
+      subSection: this.$t('quests'),
+      section: this.$t('shops'),
+    });
     await this.$store.dispatch('worldState:getWorldState');
   },
   methods: {

website/client/src/components/shops/seasonal/index.vue

@@ -517,6 +517,11 @@ export default {
     }, 250),
   },
   async mounted () {
+    this.$store.dispatch('common:setTitle', {
+      subSection: this.$t('seasonalShop'),
+      section: this.$t('shops'),
+    });
+
     this.$root.$on('buyModal::boughtItem', () => {
       this.backgroundUpdate = new Date();
     });

website/client/src/components/shops/timeTravelers/index.vue

@@ -399,6 +399,10 @@ export default {
     }, 250),
   },
   mounted () {
+    this.$store.dispatch('common:setTitle', {
+      subSection: this.$t('timeTravelers'),
+      section: this.$t('shops'),
+    });
     this.$root.$on('buyModal::boughtItem', () => {
       this.backgroundUpdate = new Date();
     });

website/client/src/components/static/contact.vue

@@ -67,5 +67,10 @@ export default {
       goToModForm(this.user);
     },
   },
+  mounted () {
+    this.$store.dispatch('common:setTitle', {
+      section: this.$t('contactUs'),
+    });
+  },
 };
 </script>

website/client/src/components/static/faq.vue

@@ -112,6 +112,12 @@ export default {
       // "webFaqStillNeedHelp": "If you have a question that isn't on this list or on the [Wiki FAQ](http://habitica.fandom.com/wiki/FAQ), come ask in the <%= linkStart %>Habitica Help guild<%= linkEnd %>! We're happy to help."
     };
   },
+  mounted () {
+    this.$store.dispatch('common:setTitle', {
+      section: this.$t('help'),
+      subSection: this.$t('faq'),
+    });
+  },
   methods: {
     isVisible (heading) {
       return this.visible && this.visible === heading;

website/client/src/components/static/features.vue

@@ -137,6 +137,11 @@ export default {
   directives: {
     markdown: markdownDirective,
   },
+  mounted () {
+    this.$store.dispatch('common:setTitle', {
+      section: this.$t('features'),
+    });
+  },
   methods: {
     playButtonClick () {
       this.$router.push('/register');

website/client/src/components/static/groupPlans.vue

@@ -274,6 +274,9 @@ export default {
       // Load external scripts after the app has been rendered
       setupPayments();
     });
+    this.$store.dispatch('common:setTitle', {
+      section: this.$t('groupPlans'),
+    });
   },
   methods: {
     goToNewGroupPage () {

website/client/src/components/static/home.vue

@@ -909,6 +909,9 @@ export default {
       // windows: WINDOWS_CLIENT_ID,
       google: process.env.GOOGLE_CLIENT_ID, // eslint-disable-line
     });
+    this.$store.dispatch('common:setTitle', {
+      fullTitle: 'Habitica - Gamify Your Life',
+    });
   },
   methods: {
     // eslint-disable-next-line func-names

website/client/src/components/static/pressKit.vue

@@ -172,5 +172,10 @@ export default {
       ],
     });
   },
+  mounted () {
+    this.$store.dispatch('common:setTitle', {
+      section: this.$t('presskit'),
+    });
+  },
 };
 </script>

website/client/src/components/tasks/user.vue

@@ -491,6 +491,11 @@ export default {
       return tagsByType;
     },
   },
+  mounted () {
+    this.$store.dispatch('common:setTitle', {
+      section: this.$t('tasks'),
+    });
+  },
   watch: {
     searchText: throttle(function throttleSearch () {
       this.searchTextThrottled = this.searchText.toLowerCase();

website/client/src/components/userMenu/profile.vue

@@ -893,6 +893,10 @@ export default {
     selectPage (page) {
       this.selectedPage = page || 'profile';
       window.history.replaceState(null, null, '');
+      this.$store.dispatch('common:setTitle', {
+        section: this.$t('user'),
+        subSection: this.$t(this.startingPage),
+      });
     },
     getProgressDisplay () {
       // let currentLoginDay = Content.loginIncentives[this.user.loginIncentives];

website/client/src/pages/private-messages.vue

@@ -781,6 +781,9 @@ export default {
     },
   },
   async mounted () {
+    this.$store.dispatch('common:setTitle', {
+      section: this.$t('messages'),
+    });
     // notification click to refresh
     this.$root.$on(EVENTS.PM_REFRESH, async () => {
       await this.reload();

website/client/src/router/index.js

@@ -107,6 +107,8 @@ const router = new VueRouter({
     return { x: 0, y: 0 };
   },
   // requiresLogin is true by default, isStatic false
+  // NOTE: when adding a new route entry make sure to implement the `common:setTitle` action
+  // in the route component to set a specific subtitle for the page.
   routes: [
     {
       name: 'register', path: '/register', component: RegisterLoginReset, meta: { requiresLogin: false },

website/client/src/store/actions/common.js

@@ -23,6 +23,16 @@ export function hatch (store, params) {
   // .catch((err) => console.error('equip', err));
 }
 
+export function setTitle (store, params) {
+  if (params.subSection && params.section) {
+    store.state.title = `${params.subSection} | ${params.section} | Habitica`;
+  } else if (params.section) {
+    store.state.title = `${params.section} | Habitica`;
+  } else if (params.fullTitle) {
+    store.state.title = params.fullTitle;
+  }
+}
+
 export async function feed (store, params) {
   const user = store.state.user.data;
   feedOp(user, { params });

website/common/locales/en/front.json

@@ -15,7 +15,6 @@
   "emailNewPass": "Email a Password Reset Link",
   "forgotPasswordSteps": "Enter the email address you used to register your Habitica account.",
   "sendLink": "Send Link",
-  "featuredIn": "Featured in",
   "footerDevs": "Developers",
   "footerCommunity": "Community",
   "footerCompany": "Company",

website/common/locales/en/groups.json

@@ -48,6 +48,7 @@
   "memberList": "Member List",
   "invited": "Invited",
   "name": "Name",
+  "features": "Features",
   "description": "Description",
   "public": "Public",
   "inviteOnly": "Invite Only",
@@ -136,7 +137,6 @@
   "gemGiftsAreOptional": "Please note that Habitica will never require you to gift gems to other players. Begging people for gems is a <strong>violation of the Community Guidelines</strong>, and all such instances should be reported to <%= hrefTechAssistanceEmail %>.",
   "battleWithFriends": "Battle Monsters With Friends",
   "startAParty": "Start a Party",
-  "possessiveParty": "<%= name %>'s Party",
   "partyUpName": "Party Up",
   "partyOnName": "Party On",
   "partyUpText": "Joined a Party with another person! Have fun battling monsters and supporting each other.",