From 864945a2ac7d4d7d9c7302538060f04a0dfd1377 Mon Sep 17 00:00:00 2001
From: Axolotle <nchesnais@mailoo.org>
Date: Wed, 25 Nov 2020 18:23:52 +0100
Subject: [PATCH] Fix various small inconsistencies and styles

login infinite modal, *List style, ToolAdminpw dump, BackupCreate colors
---
 app/src/components/YnhConsole.vue             |  2 +-
 .../components/reusableForms/PasswordForm.vue |  1 -
 app/src/store/info.js                         |  3 +-
 app/src/views/app/AppList.vue                 | 74 ++++++++++++-------
 app/src/views/backup/BackupCreate.vue         |  4 +-
 app/src/views/domain/DomainList.vue           |  6 +-
 app/src/views/service/ServiceList.vue         |  2 +-
 app/src/views/tool/ToolWebadmin.vue           |  5 +-
 app/src/views/user/UserList.vue               |  4 +-
 9 files changed, 63 insertions(+), 38 deletions(-)

diff --git a/app/src/components/YnhConsole.vue b/app/src/components/YnhConsole.vue
index d2aca904..4fe44cd1 100644
--- a/app/src/components/YnhConsole.vue
+++ b/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;
diff --git a/app/src/components/reusableForms/PasswordForm.vue b/app/src/components/reusableForms/PasswordForm.vue
index 7b1f689c..fc9d060b 100644
--- a/app/src/components/reusableForms/PasswordForm.vue
+++ b/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 }" />
diff --git a/app/src/store/info.js b/app/src/store/info.js
index 42a416c1..30eff691 100644
--- a/app/src/store/info.js
+++ b/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',
diff --git a/app/src/views/app/AppList.vue b/app/src/views/app/AppList.vue
index 39ef274b..7eb08e71 100644
--- a/app/src/views/app/AppList.vue
+++ b/app/src/views/app/AppList.vue
@@ -18,29 +18,33 @@
       </div>
     </div>
 
-    <b-alert v-if="apps === null" variant="warning" show>
-      <icon iname="exclamation-triangle" /> {{ $t('no_installed_apps') }}
-    </b-alert>
+    <template v-if="apps !== undefined">
+      <b-alert v-if="apps === null" variant="warning" show>
+        <icon iname="exclamation-triangle" /> {{ $t('no_installed_apps') }}
+      </b-alert>
 
-    <b-list-group v-else-if="filteredApps && filteredApps.length">
-      <b-list-group-item
-        v-for="{ id, name, description, label } in filteredApps" :key="id"
-        :to="{ name: 'app-info', params: { id }}"
-        class="d-flex justify-content-between align-items-center pr-0"
-      >
-        <div>
-          <h5>{{ label }} <small>{{ name }}</small></h5>
-          <p class="m-0">
-            {{ description }}
-          </p>
-        </div>
+      <b-list-group v-else-if="filteredApps && filteredApps.length">
+        <b-list-group-item
+          v-for="{ id, name, description, label } in filteredApps" :key="id"
+          :to="{ name: 'app-info', params: { id }}"
+          class="d-flex justify-content-between align-items-center pr-0"
+        >
+          <div>
+            <h5 class="font-weight-bold">{{ label }}
+              <small v-if="name" class="text-secondary">{{ name }}</small>
+            </h5>
+            <p class="m-0">
+              {{ description }}
+            </p>
+          </div>
 
-        <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>
-      <icon iname="exclamation-triangle" /> {{ $t('search.not_found.installed_app') }}
-    </b-alert>
+          <icon iname="chevron-right" class="lg fs-sm ml-auto" />
+        </b-list-group-item>
+      </b-list-group>
+      <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
-        this.apps = apps.map(({ id, name, description, permissions }) => {
+        if (apps.length === 0) {
+          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
         })
       })
     }
diff --git a/app/src/views/backup/BackupCreate.vue b/app/src/views/backup/BackupCreate.vue
index d130643d..b1572a9f 100644
--- a/app/src/views/backup/BackupCreate.vue
+++ b/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>
diff --git a/app/src/views/domain/DomainList.vue b/app/src/views/domain/DomainList.vue
index 3cba2b35..c5b078a2 100644
--- a/app/src/views/domain/DomainList.vue
+++ b/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>
diff --git a/app/src/views/service/ServiceList.vue b/app/src/views/service/ServiceList.vue
index 88a07f22..14807df1 100644
--- a/app/src/views/service/ServiceList.vue
+++ b/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'" />
diff --git a/app/src/views/tool/ToolWebadmin.vue b/app/src/views/tool/ToolWebadmin.vue
index cc8b9bb0..1fb91a52 100644
--- a/app/src/views/tool/ToolWebadmin.vue
+++ b/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: [] }
         },
diff --git a/app/src/views/user/UserList.vue b/app/src/views/user/UserList.vue
index 0c5893da..43f1b5a4 100644
--- a/app/src/views/user/UserList.vue
+++ b/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 }}