Fix various small inconsistencies and styles

login infinite modal, *List style, ToolAdminpw dump, BackupCreate colors

app/src/components/YnhConsole.vue

@@ -159,7 +159,7 @@ export default {
 <style lang="scss" scoped>
 #console {
   position: sticky;
-  z-index: 5;
+  z-index: 15;
   bottom: 0;
 
   margin-left: -1.5rem;

app/src/components/reusableForms/PasswordForm.vue

@@ -10,7 +10,6 @@
       </b-alert>
       <slot name="disclaimer" />
       <hr>
-      {{ $v.form.currentPassword }}
     </template>
 
     <slot name="extra-fields" v-bind="{ v: $v, fields, form }" />

app/src/store/info.js

@@ -65,8 +65,9 @@ export default {
       commit('SET_YUNOHOST_INFOS', null)
     },
 
-    'DISCONNECT' ({ dispatch }, route) {
+    'DISCONNECT' ({ dispatch, commit }, route) {
       dispatch('RESET_CONNECTED')
+      commit('UPDATE_WAITING', false)
       if (router.currentRoute.name === 'login') return
       router.push({
         name: 'login',

app/src/views/app/AppList.vue

@@ -18,6 +18,7 @@
       </div>
     </div>
 
+    <template v-if="apps !== undefined">
       <b-alert v-if="apps === null" variant="warning" show>
         <icon iname="exclamation-triangle" /> {{ $t('no_installed_apps') }}
       </b-alert>
@@ -29,7 +30,9 @@
           class="d-flex justify-content-between align-items-center pr-0"
         >
           <div>
-          <h5>{{ label }} <small>{{ name }}</small></h5>
+            <h5 class="font-weight-bold">{{ label }}
+              <small v-if="name" class="text-secondary">{{ name }}</small>
+            </h5>
             <p class="m-0">
               {{ description }}
             </p>
@@ -38,9 +41,10 @@
           <icon iname="chevron-right" class="lg fs-sm ml-auto" />
         </b-list-group-item>
       </b-list-group>
-    <b-alert v-else-if="filteredApps" variant="warning" show>
+      <b-alert v-else variant="warning" show>
         <icon iname="exclamation-triangle" /> {{ $t('search.not_found.installed_app') }}
       </b-alert>
+    </template>
   </div>
 </template>
 
@@ -70,12 +74,32 @@ export default {
   methods: {
     fetchData () {
       api.get('apps?full').then(({ apps }) => {
-        if (apps.length === 0) this.apps = null
+        if (apps.length === 0) {
-        this.apps = apps.map(({ id, name, description, permissions }) => {
+          this.apps = null
+          return
+        }
+
+        const multiInstances = {}
+        this.apps = apps.map(({ id, name, description, permissions, manifest }) => {
           // FIXME seems like some apps may no have a label (replace with id)
-          return { id, name, description, label: permissions[id + '.main'].label }
+          const label = permissions[id + '.main'].label
+          // Display the `id` of the instead of its `name` if multiple apps share the same name
+          if (manifest.multi_instance) {
+            if (!(name in multiInstances)) {
+              multiInstances[name] = []
+            }
+            const labels = multiInstances[name]
+            if (labels.includes(label)) {
+              name = id
+            }
+            labels.push(label)
+          }
+          if (label === name) {
+            name = null
+          }
+          return { id, name, description, label }
         }).sort((prev, app) => {
-          return prev.id > app.id ? 1 : -1
+          return prev.label > app.label ? 1 : -1
         })
       })
     }

app/src/views/backup/BackupCreate.vue

@@ -12,7 +12,7 @@
       >
         <b-list-group flush>
           <!-- SYSTEM TITLE -->
-          <b-list-group-item class="d-flex align-items-md-center flex-column flex-md-row" variant="success">
+          <b-list-group-item class="d-flex align-items-md-center flex-column flex-md-row" variant="dark">
             <div>
               <h4 class="mb-0"><icon iname="cube" /> {{ $t('system') }}</h4>
             </div>
@@ -44,7 +44,7 @@
           </b-list-group-item>
 
           <!-- APPS TITLE -->
-          <b-list-group-item class="d-flex align-items-md-center flex-column flex-md-row" variant="success">
+          <b-list-group-item class="d-flex align-items-md-center flex-column flex-md-row" variant="dark">
             <div>
               <h4 class="mb-0"><icon iname="cubes" /> {{ $t('applications') }}</h4>
             </div>

app/src/views/domain/DomainList.vue

@@ -1,4 +1,4 @@
-<template lang="html">
+<template>
   <div class="domain-list">
     <div class="actions">
       <b-input-group>
@@ -21,14 +21,14 @@
         class="d-flex justify-content-between align-items-center pr-0"
       >
         <div>
-          <h5>
+          <h5 class="font-weight-bold">
             {{ domain }}
             <small v-if="domain === mainDomain">
               <span class="sr-only">{{ $t('words.default') }}</span>
               <icon iname="star" :title="$t('words.default')" />
             </small>
           </h5>
-          <p>https://{{ domain }}</p>
+          <p class="font-italic">https://{{ domain }}</p>
         </div>
         <icon iname="chevron-right" class="lg fs-sm ml-auto" />
       </b-list-group-item>

app/src/views/service/ServiceList.vue

@@ -17,7 +17,7 @@
         class="d-flex justify-content-between align-items-center pr-0"
       >
         <div class="w-100">
-          <h5>{{ name }} <small>{{ description }}</small></h5>
+          <h5 class="font-weight-bold">{{ name }} <small class="text-secondary">{{ description }}</small></h5>
           <p class="mb-0">
             <span :class="status === 'running' ? 'text-success' : 'text-danger'">
               <icon :iname="status === 'running' ? 'check-circle' : 'times'" />

app/src/views/tool/ToolWebadmin.vue

@@ -40,13 +40,14 @@ export default {
 
       fields: {
         locale: {
-          label: this.$i18n.t('tools_webadmin.locale'),
+          label: this.$i18n.t('tools_webadmin.language'),
           component: 'SelectItem',
           props: { id: 'locale', choices: [] }
         },
 
         fallbackLocale: {
-          label: this.$i18n.t('tools_webadmin.fallback_locale'),
+          label: this.$i18n.t('tools_webadmin.fallback_language'),
+          description: this.$i18n.t('tools_webadmin.fallback_language_description'),
           component: 'SelectItem',
           props: { id: 'fallback-locale', choices: [] }
         },

app/src/views/user/UserList.vue

@@ -36,9 +36,9 @@
           class="d-flex justify-content-between align-items-center pr-0"
         >
           <div>
-            <h5 :class="{rounded: !users}">
+            <h5 :class="{rounded: !users}" class="font-weight-bold">
               {{ user.username }}
-              <small>({{ user.fullname }})</small>
+              <small class="text-secondary">({{ user.fullname }})</small>
             </h5>
             <p :class="{rounded: !users}">
               {{ user.mail }}