Fixes Issue HabitRPG#12421 - Change page title based on the site sect…

…ion being viewed (HabitRPG#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>
bakerty · Dec 18, 2020 · 1dfa9fe · 1dfa9fe
1 parent 58551a0
commit 1dfa9fe
Show file tree

Hide file tree

Showing 36 changed files with 188 additions and 6 deletions.
diff --git a/website/client/src/components/auth/registerLoginReset.vue b/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();

diff --git a/website/client/src/components/challenges/challengeDetail.vue b/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: [],

diff --git a/website/client/src/components/challenges/findChallenges.vue b/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: {

diff --git a/website/client/src/components/challenges/myChallenges.vue b/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: {

diff --git a/website/client/src/components/group-plans/taskInformation.vue b/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;
 

diff --git a/website/client/src/components/groups/discovery.vue b/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

diff --git a/website/client/src/components/groups/group.vue b/website/client/src/components/groups/group.vue
@@ -500,15 +500,17 @@ 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 () {
     this.$root.$off('updatedGroup', this.onGroupUpdate);
   },
   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,
+      });
     },
 
     /**

diff --git a/website/client/src/components/groups/groupPlan.vue b/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 () {

diff --git a/website/client/src/components/groups/myGuilds.vue b/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();
   },

diff --git a/website/client/src/components/groups/tavern.vue b/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: {

diff --git a/website/client/src/components/inventory/equipment/index.vue b/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) {

diff --git a/website/client/src/components/inventory/items/index.vue b/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();

diff --git a/website/client/src/components/inventory/stable/index.vue b/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();

diff --git a/website/client/src/components/settings/api.vue b/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 () {

diff --git a/website/client/src/components/settings/dataExport.vue b/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>
diff --git a/website/client/src/components/settings/notifications.vue b/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

diff --git a/website/client/src/components/settings/promoCode.vue b/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/

diff --git a/website/client/src/components/settings/site.vue b/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

diff --git a/website/client/src/components/settings/subscription.vue b/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}`);

diff --git a/website/client/src/components/shops/market/index.vue b/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: {

diff --git a/website/client/src/components/shops/quests/index.vue b/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: {

diff --git a/website/client/src/components/shops/seasonal/index.vue b/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();
     });

diff --git a/website/client/src/components/shops/timeTravelers/index.vue b/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();
     });

diff --git a/website/client/src/components/static/contact.vue b/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>
diff --git a/website/client/src/components/static/faq.vue b/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;

diff --git a/website/client/src/components/static/features.vue b/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');

diff --git a/website/client/src/components/static/groupPlans.vue b/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 () {

diff --git a/website/client/src/components/static/home.vue b/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

diff --git a/website/client/src/components/static/pressKit.vue b/website/client/src/components/static/pressKit.vue
@@ -172,5 +172,10 @@ export default {
       ],
     });
   },
+  mounted () {
+    this.$store.dispatch('common:setTitle', {
+      section: this.$t('presskit'),
+    });
+  },
 };
 </script>