Merge pull request #393 from YunoHost/enh-tab-breadcrumb

[enh] add simplified breadcrumb as document title

app/src/i18n/locales/en.json

@@ -321,7 +321,8 @@
     "port": "Port",
     "ports": "Ports",
     "postinstall": {
-        "force": "Force the post-install"
+        "force": "Force the post-install",
+        "title": "Postinstall"
     },
     "postinstall_domain": "This is the first domain name linked to your YunoHost server, but also the one which will be used by your server's users to access the authentication portal. Accordingly, it will be visible by everyone, so choose it carefully.",
     "postinstall_intro_1": "Congratulations! YunoHost has been successfully installed.",
@@ -510,6 +511,7 @@
     },
     "wrong_password": "Wrong password",
     "yes": "Yes",
+    "yunohost_admin": "YunoHost Admin",
     "certificate_alert_not_valid": "CRITICAL: Current certificate is not valid! HTTPS won't work at all!",
     "certificate_alert_selfsigned": "WARNING: Current certificate is self-signed. Browsers will display a spooky warning to new visitors!",
     "certificate_alert_letsencrypt_about_to_expire": "Current certificate is about to expire. It should soon be renewed automatically.",

app/src/router/index.js

@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
+import i18n from '@/i18n'
 import routes from './routes'
 import store from '@/store'
 
@@ -39,4 +40,30 @@ router.beforeEach((to, from, next) => {
   }
 })
 
+router.afterEach((to, from) => {
+  // Display a simplified breadcrumb as the document title.
+  const routeParams = to.params
+  let breadcrumb = to.meta.breadcrumb
+  if (breadcrumb.length === 0) {
+    breadcrumb = [to.name]
+  } else if (breadcrumb.length > 2) {
+    breadcrumb = breadcrumb.slice(breadcrumb.length - 2)
+  }
+
+  const title = breadcrumb.map(name => {
+    const route = routes.find(route => route.name === name)
+    const { trad, param } = route ? route.meta.args : {}
+    // if a traduction key string has been given and we also need to pass
+    // the route param as a variable.
+    if (trad && param) {
+      return i18n.t(trad, { [param]: routeParams[param] })
+    } else if (trad) {
+      return i18n.t(trad)
+    }
+    return routeParams[param]
+  }).reverse().join(' / ')
+
+  document.title = `${title} | ${i18n.t('yunohost_admin')}`
+})
+
 export default router

app/src/router/routes.js

@@ -18,14 +18,21 @@ const routes = [
     path: '/',
     component: Home,
     // Leave the empty breadcrumb as it is used by the animated transition to know which way to go
-    meta: { breadcrumb: [] }
+    meta: {
+      args: { trad: 'home' },
+      breadcrumb: []
+    }
   },
 
   {
     name: 'login',
     path: '/login',
     component: Login,
-    meta: { noAuth: true, breadcrumb: [] }
+    meta: {
+      noAuth: true,
+      args: { trad: 'login' },
+      breadcrumb: []
+    }
   },
 
   /* ───────────────╮
@@ -36,7 +43,11 @@ const routes = [
     path: '/postinstall',
     component: () => import(/* webpackChunkName: "views/post-install" */ '@/views/PostInstall'),
     // Leave the breadcrumb
-    meta: { noAuth: true, breadcrumb: [] }
+    meta: {
+      noAuth: true,
+      args: { trad: 'postinstall.title' },
+      breadcrumb: []
+     }
   },
 
   /* ───────╮