automaticly add locale to url query and fix small templates

app/src/helpers/api.js

@@ -1,5 +1,7 @@
+import store from '@/store'
+
 function objectToParams (object) {
-  const urlParams = new URLSearchParams()
+  const urlParams = new URLSearchParams('locale=' + store.getters.locale)
   for (const [key, value] of Object.entries(object)) {
     urlParams.append(key, value)
   }
@@ -41,9 +43,10 @@ export default {
     }
   },
 
-  get (uri) {
+  get (uri, urlParams = {}) {
     return fetch(
-      '/api/' + uri, this.options
+      `/api/${uri}?${objectToParams(urlParams)}`,
+      this.options
     ).then(handleResponse)
   },
 

app/src/scss/main.scss

@@ -107,3 +107,16 @@ body {
     }
   }
 }
+
+.log {
+  .card-body {
+    padding: 0;
+
+    pre {
+      margin-bottom: 0;
+      padding: 1rem;
+      background-color: $light;
+    }
+
+  }
+}

app/src/views/domain/DomainDns.vue

@@ -7,7 +7,7 @@
       <template v-slot:header>
         <h2><icon iname="globe" /> {{ $t('domain_dns_config') }}</h2>
       </template>
-      <pre class="mb-0 p-3 bg-light"><code>{{ dnsConfig }}</code></pre>
+      <pre><code>{{ dnsConfig }}</code></pre>
     </b-card>
   </div>
 </template>
@@ -38,7 +38,4 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.card-body {
-  padding: 0;
-}
 </style>

app/src/views/service/ServiceInfo.vue

@@ -46,8 +46,7 @@
             <icon :iname="status === 'running' ? 'check-circle' : 'times'" />
             {{ status }}
           </span>
-          <!-- FIXME format date to: (now - date) as words -->
-          {{ $t('since') }} {{ last_state_change }}
+          {{ $t('since') }} {{ last_state_change | distanceToNow }}
         </dd>
         <hr>
 
@@ -88,6 +87,7 @@
 
 <script>
 import api from '@/helpers/api'
+import { distanceToNow } from '@/filters/date'
 
 export default {
   name: 'ServiceInfo',
@@ -114,6 +114,10 @@ export default {
     }
   },
 
+  filters: {
+    distanceToNow
+  },
+
   computed: {
   },
 

app/src/views/service/ServiceList.vue

@@ -23,7 +23,6 @@
               <icon :iname="status === 'running' ? 'check-circle' : 'times'" />
               {{ $t(status) }}
             </span>
-            <!-- FIXME format date to: (now - date) as words -->
             {{ $t('since') }} {{ last_state_change | distanceToNow }}
           </p>
         </div>

app/src/views/tool/ToolList.vue

@@ -26,8 +26,8 @@ export default {
         { 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' }
+        { id: 4, routeName: 'tool-wabadmin', icon: 'cog', translation: 'tools_webadmin_settings' },
+        { id: 5, routeName: 'tool-power', icon: 'power-off', translation: 'tools_shutdown_reboot' }
       ]
     }
   }

app/src/views/tool/ToolLogs.vue

@@ -16,7 +16,7 @@
       <b-list-group flush>
         <b-list-group-item
           v-for="log in filteredOperations" :key="log.name"
-          :to="{ name: 'tool-log', params: { name: log.name } }"
+          :to="{ name: 'tool-log', params: { name: log.name || log.log_path } }"
           :title="log.started_at | readableDate"
         >
           <small class="mr-3">{{ log.started_at | distanceToNow }} </small>
@@ -59,9 +59,8 @@ export default {
 
   methods: {
     fetchData () {
-      // simply use the api helper since we will not store the request's result.
       // FIXME only prints operation for now (can't receive 'history', 'app', 'service', etc.)
-      api.get('logs?limit=25&with_details').then(({ operation }) => {
+      api.get('logs', { limit: 25, with_details: '' }).then(({ operation }) => {
         operation.forEach((log, index) => {
           if (log.success === '?') {
             operation[index].icon = 'question'

app/src/views/user/UserInfo.vue

@@ -86,9 +86,9 @@
     >
       <b-form-group>
         <template v-slot:description>
-          <span class="bg-warning p-2 text-dark">
+          <b-alert variant="warning" show>
             <icon iname="exclamation-triangle" /> {{ $t('purge_user_data_warning') }}
-          </span>
+          </b-alert>
         </template>
         <b-form-checkbox v-model="purge" class="mb-3">
           {{ $t('purge_user_data_checkbox', {name: user.username}) }}