add ToolList view

app/src/locales/en.json

@@ -318,6 +318,7 @@
     "tools_shutdown_done": "Shutting down...",
     "tools_shuttingdown": "Your server is powering off. As long as your server is off, you won't be able to use the web administration.",
     "tools_shutdown_reboot": "Shutdown/Reboot",
+    "tools_webadmin_settings": "Web-admin settings",
     "udp": "UDP",
     "unauthorized": "Unauthorized",
     "unignore": "Unignore",

app/src/routes.js

@@ -4,6 +4,7 @@ import { UserList, UserCreate, UserInfo, UserEdit } from './views/user'
 import { GroupList, GroupCreate } from './views/group'
 import { DomainList, DomainAdd, DomainInfo, DomainDns, DomainCert } from './views/domain'
 import { ServiceList, ServiceInfo } from './views/service'
+import { ToolList } from './views/tool'
 
 const routes = [
   { name: 'home', path: '/', component: Home },
@@ -169,6 +170,20 @@ const routes = [
         { name: 'service-info', param: 'name' }
       ]
     }
+  },
+
+  /* ────────╮
+   │  TOOLS  │
+   ╰──────── */
+  {
+    name: 'tool-list',
+    path: '/tools',
+    component: ToolList,
+    meta: {
+      breadcrumb: [
+        { name: 'tool-list', trad: 'tools' }
+      ]
+    }
   }
 ]
 

app/src/views/Home.vue

@@ -17,6 +17,7 @@
 <script>
 export default {
   name: 'Home',
+
   data: () => {
     return {
       menu: [
@@ -25,7 +26,7 @@ export default {
         { id: 2, routeName: 'apps', icon: 'cubes', translation: 'applications' },
         { id: 3, routeName: 'update', icon: 'refresh', translation: 'system_update' },
         { id: 4, routeName: 'service-list', icon: 'cog', translation: 'services' },
-        { id: 5, routeName: 'tools', icon: 'wrench', translation: 'tools' },
+        { id: 5, routeName: 'tool-list', icon: 'wrench', translation: 'tools' },
         { id: 6, routeName: 'diagnosis', icon: 'stethoscope', translation: 'diagnosis' },
         { id: 7, routeName: 'backup', icon: 'archive', translation: 'backup' }
       ]

app/src/views/tool/ToolList.vue

@@ -0,0 +1,49 @@
+<!-- FIXME make a component shared with Home.vue ? -->
+<template>
+  <div class="tools-menu">
+    <b-list-group>
+      <b-list-group-item
+        v-for="item in menu"
+        :key="item.id"
+        :to="{name: item.routeName}"
+      >
+        <icon :iname="item.icon" class="lg" />
+        <h2>{{ $t(item.translation) }}</h2>
+        <icon iname="chevron-right" class="lg fs-sm ml-auto" />
+      </b-list-group-item>
+    </b-list-group>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ToolList',
+
+  data: () => {
+    return {
+      menu: [
+        { id: 0, routeName: 'tool-logs', icon: 'file-text-o', translation: 'logs' },
+        { id: 1, routeName: 'tool-migrations', icon: 'share', translation: 'migrations' },
+        { id: 2, routeName: 'tool-firewall', icon: 'shield', translation: 'firewall' },
+        { id: 3, routeName: 'tool-adminpw', icon: 'key-modern', translation: 'tools_adminpw' },
+        { id: 3, routeName: 'tool-wabadmin', icon: 'cog', translation: 'tools_webadmin_settings' },
+        { id: 4, routeName: 'tool-power', icon: 'power-off', translation: 'tools_shutdown_reboot' }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.list-group-item {
+    padding: 0.75rem 0;
+    display: flex;
+    align-items: center;
+}
+
+h2 {
+    font-size: 1.25rem;
+    font-weight: 400;
+    margin: 0;
+}
+</style>

app/src/views/tool/index.js

@@ -0,0 +1 @@
+export { default as ToolList } from './ToolList'