Merge pull request TFNS#469 from markfijneman/241-page-titles

Page title improvements

Author: JJ-8

front/src/boot/ctfnote.ts

@@ -13,7 +13,7 @@ export default boot(async ({ router, redirect, urlPath }) => {
   router.afterEach((to) => {
     if (typeof to.meta.title == 'string') {
       const title = to.meta.title;
-      document.title = title ? `CTFNote - ${title}` : 'CTFNote';
+      document.title = title ? `${title} | CTFNote` : 'CTFNote';
     }
   });
 

…nt/src/components/Admin/Registration.vue …/src/components/Admin/Authentication.vuefront/src/components/Admin/Registration.vue renamed to front/src/components/Admin/Authentication.vue front/src/components/Admin/Registration.vue renamed to front/src/components/Admin/Authentication.vue

@@ -7,26 +7,37 @@
 <script lang="ts">
 import ctfnote from 'src/ctfnote';
 import { defineComponent, watch } from 'vue';
+import { useRoute } from 'vue-router';
+
+const setTitle = (ctf: { title: string } | null) => {
+  if (ctf) {
+    document.title = `${ctf.title} | CTFNote`;
+  }
+};
 
 export default defineComponent({
   props: {
     ctfId: { type: Number, required: true },
   },
   setup(props) {
+    const route = useRoute();
     const { result: ctf } = ctfnote.ctfs.getCtf(() => ({
       id: props.ctfId,
     }));
 
-    watch(ctf, (ctf) => {
-      if (ctf) {
-        document.title = `CTFNote - ${ctf.title}`;
-      }
-    });
+    // Watch for manual CTF name changes
+    watch(ctf, (ctf) => setTitle(ctf));
+
+    // Watch for Vue route changes (required to change the title when the page was already mounted)
+    watch(
+      () => route.fullPath,
+      () => setTitle(ctf.value),
+    );
 
     return { ctf };
   },
   mounted() {
-    if (this.ctf) document.title = `CTFNote - ${this.ctf.title}`;
+    setTitle(this.ctf);
   },
 });
 </script>

front/src/components/Loader/CTF.vue

@@ -2,7 +2,7 @@
   <q-page>
     <q-tabs v-model="tab" indicator-color="secondary" dense align="left">
       <q-route-tab
-        :to="{ name: 'admin-registration' }"
+        :to="{ name: 'admin-authentication' }"
         label="Authentication"
         icon="lock"
       />

front/src/pages/Admin.vue

@@ -46,7 +46,7 @@ export default defineComponent({
       task,
       (task) => {
         if (task) {
-          document.title = `CTFNote - ${task.title}`;
+          document.title = `${task.title} | ${props.ctf.title} | CTFNote`;
         }
       },
       { immediate: true },

front/src/pages/Task.vue

@@ -114,7 +114,7 @@ const authRoute: RouteRecordRaw = {
     {
       path: 'reset-password/:token',
       name: 'auth-reset-password',
-      meta: { public: true, title: 'Register' },
+      meta: { public: true, title: 'Reset password' },
       props: (route) => ({ token: route.params.token }),
       component: () => import('components/Auth/ResetPassword.vue'),
     },
@@ -132,24 +132,24 @@ const adminRoute: RouteRecordRaw = {
   path: 'admin',
   name: 'admin',
   component: () => import('pages/Admin.vue'),
-  redirect: { name: 'admin-registration' },
+  redirect: { name: 'admin-authentication' },
   children: [
     {
-      path: 'settings/registration',
-      name: 'admin-registration',
-      meta: { title: 'Admin - Registration' },
-      component: () => import('src/components/Admin/Registration.vue'),
+      path: 'settings/authentication',
+      name: 'admin-authentication',
+      meta: { title: 'Authentication | Admin' },
+      component: () => import('src/components/Admin/Authentication.vue'),
     },
     {
       path: 'settings/style',
       name: 'admin-theme',
-      meta: { title: 'Admin - Theme' },
+      meta: { title: 'Theme | Admin' },
       component: () => import('src/components/Admin/Theme.vue'),
     },
     {
       path: 'users',
       name: 'admin-users',
-      meta: { title: 'Admin - Users' },
+      meta: { title: 'Users | Admin' },
       component: () => import('components/Admin/Users.vue'),
     },
   ],
@@ -158,6 +158,7 @@ const adminRoute: RouteRecordRaw = {
 const teamRoute: RouteRecordRaw = {
   path: 'team',
   name: 'team',
+  meta: { title: 'Team' },
   component: () => import('src/pages/Team.vue'),
 };