From f378c61bc4b68fb362da562ed715304431958626 Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andre8244@gmail.com>
Date: Mon, 3 Jun 2024 12:27:47 +0200
Subject: [PATCH 1/2] Format code

---
 ui/package.json                          |   3 +-
 ui/src/components/AppMobileSideMenu.vue  |   8 +-
 ui/src/components/AppSideMenuContent.vue |   2 +-
 ui/src/views/Settings.vue                |  26 +-
 ui/src/views/Status.vue                  | 164 +++++----
 ui/src/views/VirtualHosts.vue            | 430 +++++++++++++----------
 ui/yarn.lock                             |  18 +-
 7 files changed, 365 insertions(+), 286 deletions(-)

diff --git a/ui/package.json b/ui/package.json
index 7c89152..953bcb3 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -6,7 +6,8 @@
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
-    "watch": "vue-cli-service build --watch"
+    "watch": "vue-cli-service build --watch",
+    "format": "prettier --write src/"
   },
   "dependencies": {
     "@carbon/icons-vue": "^10.37.0",
diff --git a/ui/src/components/AppMobileSideMenu.vue b/ui/src/components/AppMobileSideMenu.vue
index 611a4c0..c61f0cd 100644
--- a/ui/src/components/AppMobileSideMenu.vue
+++ b/ui/src/components/AppMobileSideMenu.vue
@@ -2,13 +2,7 @@
   <transition name="slide-menu">
     <div
       v-if="isMenuShown"
-      class="
-        mobile-side-menu
-        cv-side-nav
-        bx--side-nav bx--side-nav__navigation
-        bx--side-nav--expanded
-        app-side-nav
-      "
+      class="mobile-side-menu cv-side-nav bx--side-nav bx--side-nav__navigation bx--side-nav--expanded app-side-nav"
     >
       <AppSideMenuContent />
     </div>
diff --git a/ui/src/components/AppSideMenuContent.vue b/ui/src/components/AppSideMenuContent.vue
index efa5f19..148a0a5 100644
--- a/ui/src/components/AppSideMenuContent.vue
+++ b/ui/src/components/AppSideMenuContent.vue
@@ -56,7 +56,7 @@ export default {
     Settings20,
     Information20,
     Activity20,
-    DataBase20
+    DataBase20,
   },
   mixins: [QueryParamService, UtilService],
   data() {
diff --git a/ui/src/views/Settings.vue b/ui/src/views/Settings.vue
index 5d78e10..ca77874 100644
--- a/ui/src/views/Settings.vue
+++ b/ui/src/views/Settings.vue
@@ -22,7 +22,7 @@
             <template>
               <NsTextInput
                 :label="$t('settings.sftpgo_path')"
-                :placeholder="$t('common.eg_value', {value: '/sftpgo'})"
+                :placeholder="$t('common.eg_value', { value: '/sftpgo' })"
                 v-model.trim="path"
                 class="mg-bottom"
                 :invalid-message="$t(error.path)"
@@ -32,16 +32,12 @@
                 tooltipDirection="right"
               >
                 <template slot="tooltip">
-                  <div
-                    v-html="
-                      $t('settings.sftpgo_path_tips')
-                    "
-                  ></div>
+                  <div v-html="$t('settings.sftpgo_path_tips')"></div>
                 </template>
               </NsTextInput>
               <NsTextInput
                 :label="$t('settings.sftp_tcp_port')"
-                :placeholder="$t('common.eg_value', {value: '3092'})"
+                :placeholder="$t('common.eg_value', { value: '3092' })"
                 type="number"
                 v-model.trim="sftp_tcp_port"
                 class="mg-bottom"
@@ -54,7 +50,9 @@
                 <template slot="tooltip">
                   <div
                     v-html="
-                      $t('settings.sftp_tcp_port_tips', {port: sftp_tcp_port || '{tcp_port}'})
+                      $t('settings.sftp_tcp_port_tips', {
+                        port: sftp_tcp_port || '{tcp_port}',
+                      })
                     "
                   ></div>
                 </template>
@@ -73,8 +71,12 @@
                     v-html="$t('settings.sftpgo_explanation_tooltips')"
                   ></span>
                 </template>
-                <template slot="text-left">{{ $t("common.disabled") }}</template>
-                <template slot="text-right">{{ $t("common.enabled") }}</template>
+                <template slot="text-left">{{
+                  $t("common.disabled")
+                }}</template>
+                <template slot="text-right">{{
+                  $t("common.enabled")
+                }}</template>
               </NsToggle>
               <cv-toggle
                 value="httpToHttps"
@@ -226,7 +228,7 @@ export default {
       this.path = config.path;
       this.sftp_tcp_port = config.sftp_tcp_port.toString();
       this.isHttpToHttpsEnabled = config.http2https;
-      this.isSftpgoPortEnabled = config.sftpgo_service
+      this.isSftpgoPortEnabled = config.sftpgo_service;
       this.loading.getConfiguration = false;
       this.focusElement("path");
     },
@@ -336,4 +338,4 @@ export default {
 .mg-left {
   margin-left: $spacing-05;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/ui/src/views/Status.vue b/ui/src/views/Status.vue
index 6fbc60a..15ec13f 100644
--- a/ui/src/views/Status.vue
+++ b/ui/src/views/Status.vue
@@ -46,7 +46,7 @@
       </cv-column>
     </cv-row>
     <cv-row>
-      <template  v-if="!sftpgo_isrunning && ! loading.getConfiguration">
+      <template v-if="!sftpgo_isrunning && !loading.getConfiguration">
         <cv-column :md="4" :max="4">
           <NsInfoCard
             light
@@ -55,19 +55,23 @@
             :loading="loading.getConfiguration"
             class="min-height-card"
           >
-          <template slot="content">
-            <div class="card-rows">
-              <div class="card-row">
-                <NsButton kind="ghost" :icon="ArrowRight20" @click="goToAppPage(instanceName, 'settings')">
-                  {{ $t("status.configure_sftpgo") }}
-                </NsButton>
+            <template slot="content">
+              <div class="card-rows">
+                <div class="card-row">
+                  <NsButton
+                    kind="ghost"
+                    :icon="ArrowRight20"
+                    @click="goToAppPage(instanceName, 'settings')"
+                  >
+                    {{ $t("status.configure_sftpgo") }}
+                  </NsButton>
+                </div>
               </div>
-            </div>
-          </template>
+            </template>
           </NsInfoCard>
         </cv-column>
       </template>
-      <template  v-if="sftpgo_isrunning && ! loading.getConfiguration">
+      <template v-if="sftpgo_isrunning && !loading.getConfiguration">
         <cv-column :md="4" :max="4">
           <NsInfoCard
             light
@@ -76,25 +80,29 @@
             :loading="loading.getConfiguration"
             class="min-height-card"
           >
-          <template slot="content">
-            <div class="card-rows">
-              <div class="card-row">
-              {{ $t("status.default_credentials") }}
-                <cv-tooltip
-                  alignment="start"
-                  direction="top"
-                  :tip="$t('status.sftpgo_admin_login_tips')"
-                  class="info tooltip-mg-left"
-                >
-                </cv-tooltip>
-              </div>
-              <div class="card-row">
-                <NsButton kind="ghost" :icon="Launch20" @click="goToSftpgoAdmin">
-                  {{ $t("status.open_web_admin_page") }}
-                </NsButton>
+            <template slot="content">
+              <div class="card-rows">
+                <div class="card-row">
+                  {{ $t("status.default_credentials") }}
+                  <cv-tooltip
+                    alignment="start"
+                    direction="top"
+                    :tip="$t('status.sftpgo_admin_login_tips')"
+                    class="info tooltip-mg-left"
+                  >
+                  </cv-tooltip>
+                </div>
+                <div class="card-row">
+                  <NsButton
+                    kind="ghost"
+                    :icon="Launch20"
+                    @click="goToSftpgoAdmin"
+                  >
+                    {{ $t("status.open_web_admin_page") }}
+                  </NsButton>
+                </div>
               </div>
-            </div>
-          </template>
+            </template>
           </NsInfoCard>
         </cv-column>
         <cv-column :md="4" :max="4">
@@ -105,25 +113,29 @@
             :loading="loading.getConfiguration"
             class="min-height-card"
           >
-          <template slot="content">
-            <div class="card-rows">
-              <div class="card-row">
-              {{ $t("status.default_credentials") }}
-                <cv-tooltip
-                  alignment="start"
-                  direction="top"
-                  :tip="$t('status.sftpgo_user_login_tips')"
-                  class="info tooltip-mg-left"
-                >
-                </cv-tooltip>
+            <template slot="content">
+              <div class="card-rows">
+                <div class="card-row">
+                  {{ $t("status.default_credentials") }}
+                  <cv-tooltip
+                    alignment="start"
+                    direction="top"
+                    :tip="$t('status.sftpgo_user_login_tips')"
+                    class="info tooltip-mg-left"
+                  >
+                  </cv-tooltip>
+                </div>
+                <div class="card-row">
+                  <NsButton
+                    kind="ghost"
+                    :icon="Launch20"
+                    @click="goToSftpgoUser"
+                  >
+                    {{ $t("status.open_web_client_page") }}
+                  </NsButton>
+                </div>
               </div>
-              <div class="card-row">
-                <NsButton kind="ghost" :icon="Launch20" @click="goToSftpgoUser">
-                  {{ $t("status.open_web_client_page") }}
-                </NsButton>
-              </div>
-            </div>
-          </template>
+            </template>
           </NsInfoCard>
         </cv-column>
         <cv-column :md="4" :max="4">
@@ -134,20 +146,24 @@
             :loading="loading.getConfiguration"
             class="min-height-card"
           >
-          <template slot="content">
-            <div class="card-rows">
-              <div class="card-row">
-              {{$t("status.External_sftp_tcp_port")}}
-                <cv-tooltip
-                  alignment="start"
-                  direction="top"
-                  :tip="$t('status.sftp_tcp_port_tips',{port: this.sftp_tcp_port})"
-                  class="info tooltip-mg-left"
-                >
-                </cv-tooltip>
+            <template slot="content">
+              <div class="card-rows">
+                <div class="card-row">
+                  {{ $t("status.External_sftp_tcp_port") }}
+                  <cv-tooltip
+                    alignment="start"
+                    direction="top"
+                    :tip="
+                      $t('status.sftp_tcp_port_tips', {
+                        port: this.sftp_tcp_port,
+                      })
+                    "
+                    class="info tooltip-mg-left"
+                  >
+                  </cv-tooltip>
+                </div>
               </div>
-            </div>
-          </template>
+            </template>
           </NsInfoCard>
         </cv-column>
       </template>
@@ -371,7 +387,7 @@ import {
   IconService,
   UtilService,
 } from "@nethserver/ns8-ui-lib";
-import Settings32 from "@carbon/icons-vue/es/settings/32"; 
+import Settings32 from "@carbon/icons-vue/es/settings/32";
 export default {
   name: "Status",
   mixins: [TaskService, QueryParamService, IconService, UtilService],
@@ -394,8 +410,8 @@ export default {
         images: [],
         volumes: [],
       },
-      path:"",
-      sftp_tcp_port:"",
+      path: "",
+      sftp_tcp_port: "",
       sftpgo_isrunning: "",
       backupRepositories: [],
       backups: [],
@@ -403,13 +419,13 @@ export default {
         getStatus: false,
         listBackupRepositories: false,
         listBackups: false,
-        getConfiguration:false
+        getConfiguration: false,
       },
       error: {
         getStatus: "",
         listBackupRepositories: "",
         listBackups: "",
-        getConfiguration:""
+        getConfiguration: "",
       },
     };
   },
@@ -459,14 +475,14 @@ export default {
     this.listBackupRepositories();
   },
   methods: {
-      goToSftpgoAdmin() {
-        window.open('http://' + this.hostname + this.path+'/web/admin/login');
-      },
-      goToSftpgoUser() {
-        window.open('http://' + this.hostname + this.path+'/web/client/login');
-      },
-      
-        async getConfiguration() {
+    goToSftpgoAdmin() {
+      window.open("http://" + this.hostname + this.path + "/web/admin/login");
+    },
+    goToSftpgoUser() {
+      window.open("http://" + this.hostname + this.path + "/web/client/login");
+    },
+
+    async getConfiguration() {
       this.loading.getConfiguration = true;
       this.error.getConfiguration = "";
       const taskAction = "get-configuration";
@@ -512,8 +528,8 @@ export default {
       const config = taskResult.output;
       this.sftp_tcp_port = config.sftp_tcp_port;
       this.sftpgo_isrunning = config.sftpgo_isrunning;
-      this.path = config.path
-      this.hostname = config.hostname
+      this.path = config.path;
+      this.hostname = config.hostname;
       this.loading.getConfiguration = false;
     },
     async getStatus() {
diff --git a/ui/src/views/VirtualHosts.vue b/ui/src/views/VirtualHosts.vue
index 21e4019..9fd2c3d 100644
--- a/ui/src/views/VirtualHosts.vue
+++ b/ui/src/views/VirtualHosts.vue
@@ -1,5 +1,5 @@
 <template>
-  <div >
+  <div>
     <cv-grid fullWidth>
       <cv-row>
         <cv-column class="page-title title-and-toolbar">
@@ -36,17 +36,25 @@
                 <DataBase32 />
               </template>
               <template #description>
-                <div>{{ sftpgo_isrunning ? $t("virtualhosts.empty_state_virtualhost_description") : $t("virtualhosts.sftpgo_is_not_running_description")}}</div>
-                <NsButton v-if="sftpgo_isrunning"
+                <div>
+                  {{
+                    sftpgo_isrunning
+                      ? $t("virtualhosts.empty_state_virtualhost_description")
+                      : $t("virtualhosts.sftpgo_is_not_running_description")
+                  }}
+                </div>
+                <NsButton
+                  v-if="sftpgo_isrunning"
                   kind="primary"
                   :icon="Add20"
                   @click="showCreateVhostModal()"
                   class="empty-state-button"
                   >{{ $t("virtualhosts.create_virtualhost") }}
                 </NsButton>
-                <NsButton v-else
-                  kind="ghost" 
-                  :icon="ArrowRight20" 
+                <NsButton
+                  v-else
+                  kind="ghost"
+                  :icon="ArrowRight20"
                   @click="goToAppPage(instanceName, 'settings')"
                   >{{ $t("virtualhosts.configure_sftpgo") }}
                 </NsButton>
@@ -81,12 +89,14 @@
                     :label="$t('virtualhosts.delete')"
                   />
                 </cv-overflow-menu-item>
-                <cv-overflow-menu-item
-                  @click="DisableVhost(vhost)"
-                >
+                <cv-overflow-menu-item @click="DisableVhost(vhost)">
                   <NsMenuItem
                     :icon="Power20"
-                    :label="vhost.status == 'enabled' ? $t('virtualhosts.disable_virtualhost') : $t('virtualhosts.enable_virtualhost')"
+                    :label="
+                      vhost.status == 'enabled'
+                        ? $t('virtualhosts.disable_virtualhost')
+                        : $t('virtualhosts.enable_virtualhost')
+                    "
                   />
                 </cv-overflow-menu-item>
               </cv-overflow-menu>
@@ -95,43 +105,47 @@
               <div class="card-rows">
                 <div class="card-row">
                   <cv-link
-                    :href="'http://' + hostname + path+'/web/client/login'"
+                    :href="'http://' + hostname + path + '/web/client/login'"
                     target="_blank"
                     :inline="false"
                   >
-                  {{ $t("virtualhosts.sftpgo_url") }}
-                  <cv-tooltip
-                    alignment="start"
-                    direction="top"
-                    :tip="$t('virtualhosts.sftpgo_login_tips',{user: isEdit ? Port: vhost.Port})"
-                    class="info tooltip-mg-left"
-                  >
-                  </cv-tooltip>
+                    {{ $t("virtualhosts.sftpgo_url") }}
+                    <cv-tooltip
+                      alignment="start"
+                      direction="top"
+                      :tip="
+                        $t('virtualhosts.sftpgo_login_tips', {
+                          user: isEdit ? Port : vhost.Port,
+                        })
+                      "
+                      class="info tooltip-mg-left"
+                    >
+                    </cv-tooltip>
                   </cv-link>
-                  </div>
-                  <div class="card-row">
-                    <cv-tag
-                      v-if="vhost.status == 'enabled'"
-                      kind="green"
-                      :label="$t('common.enabled')"
-                      :title="$t('common.enabled')"
-                    ></cv-tag>
-                    <cv-tag
-                      v-else
-                      kind="red"
-                      :label="$t('common.disabled')"
-                      :title="$t('common.disabled')"
-                    ></cv-tag>
-                  </div>
-                  <div class="card-row actions ">
-                    <NsButton
-                      kind="ghost"
-                      :icon="Edit20"
-                      @click="showEditVhostModal(vhost)"
-                      >
-                      {{ $t("virtualhosts.edit") }}
-                    </NsButton>
-                  </div>
+                </div>
+                <div class="card-row">
+                  <cv-tag
+                    v-if="vhost.status == 'enabled'"
+                    kind="green"
+                    :label="$t('common.enabled')"
+                    :title="$t('common.enabled')"
+                  ></cv-tag>
+                  <cv-tag
+                    v-else
+                    kind="red"
+                    :label="$t('common.disabled')"
+                    :title="$t('common.disabled')"
+                  ></cv-tag>
+                </div>
+                <div class="card-row actions">
+                  <NsButton
+                    kind="ghost"
+                    :icon="Edit20"
+                    @click="showEditVhostModal(vhost)"
+                  >
+                    {{ $t("virtualhosts.edit") }}
+                  </NsButton>
+                </div>
               </div>
             </template>
           </NsInfoCard>
@@ -144,33 +158,43 @@
       :name="currentVhost.ServerNames[0] || ''"
       :title="$t('virtualhosts.delete')"
       :warning="$t('virtualhosts.please_read_carefully')"
-      :description="$t('virtualhosts.delete_virtualhosts_confirm', { name: currentVhost.ServerNames[0]})"
+      :description="
+        $t('virtualhosts.delete_virtualhosts_confirm', {
+          name: currentVhost.ServerNames[0],
+        })
+      "
       :typeToConfirm="
-        $t('virtualhosts.type_to_confirm', { name:currentVhost.ServerNames[0] })
+        $t('virtualhosts.type_to_confirm', {
+          name: currentVhost.ServerNames[0],
+        })
       "
       @hide="hideDeleteVhostModal"
       @confirmDelete="deleteDomain(currentVhost)"
     />
 
-    <NsModal 
+    <NsModal
       :visible="isShownCreateVhostModal"
       @modal-hidden="hideEditRepoModal"
       @primary-click="SaveVhost"
       @secondary-click="hideEditRepoModal"
       size="default"
     >
-      <template v-if="isEdit" slot="title">{{$t('virtualhosts.Edit_Virtualhosts',{name: TitleEditModal })}}</template>
-      <template v-if="!isEdit" slot="title">{{$t('virtualhosts.Create_Virtualhosts')}}</template>
+      <template v-if="isEdit" slot="title">{{
+        $t("virtualhosts.Edit_Virtualhosts", { name: TitleEditModal })
+      }}</template>
+      <template v-if="!isEdit" slot="title">{{
+        $t("virtualhosts.Create_Virtualhosts")
+      }}</template>
       <template slot="content">
         <cv-form @submit.prevent="SaveVhost">
           <!-- domain name -->
           <cv-text-area
             :label="$t('virtualhosts.ServerNames')"
             v-model.trim="ServerNames"
-            :invalid-message="$t(error.ServerNames,{error:value.ServerNames})"
-            :helper-text="
-              $t('virtualhosts.Write_DomainNames')
+            :invalid-message="
+              $t(error.ServerNames, { error: value.ServerNames })
             "
+            :helper-text="$t('virtualhosts.Write_DomainNames')"
             :value="currentVhost.ServerNames"
             class="ServerNames"
             ref="ServerNames"
@@ -208,62 +232,85 @@
             }}</template>
           </cv-toggle>
           <!-- Php version -->
-          <cv-dropdown 
+          <cv-dropdown
             :light="true"
             :value="currentVhost.PhpVersion"
             v-model="PhpVersion"
             :up="false"
             :inline="false"
-            :helper-text="$t('virtualhosts.container_version_will_be_installed')"
+            :helper-text="
+              $t('virtualhosts.container_version_will_be_installed')
+            "
             :hide-selected="false"
             :invalid-message="$t(error.PhpVersion)"
             :label="$t('virtualhosts.select_php_version')"
-            :disabled="loading.getConfiguration || loading.configureModule">
-            <cv-dropdown-item selected value="">{{$t('virtualhosts.PHP_none')}}</cv-dropdown-item>
-            <cv-dropdown-item value="7.4">{{$t('virtualhosts.PHP_74')}}</cv-dropdown-item>
-            <cv-dropdown-item value="8.0">{{$t('virtualhosts.PHP_80')}}</cv-dropdown-item>
-            <cv-dropdown-item value="8.1">{{$t('virtualhosts.PHP_81')}}</cv-dropdown-item>
-            <cv-dropdown-item value="8.2">{{$t('virtualhosts.PHP_82')}}</cv-dropdown-item>
-            <cv-dropdown-item value="8.3">{{$t('virtualhosts.PHP_83')}}</cv-dropdown-item>
+            :disabled="loading.getConfiguration || loading.configureModule"
+          >
+            <cv-dropdown-item selected value="">{{
+              $t("virtualhosts.PHP_none")
+            }}</cv-dropdown-item>
+            <cv-dropdown-item value="7.4">{{
+              $t("virtualhosts.PHP_74")
+            }}</cv-dropdown-item>
+            <cv-dropdown-item value="8.0">{{
+              $t("virtualhosts.PHP_80")
+            }}</cv-dropdown-item>
+            <cv-dropdown-item value="8.1">{{
+              $t("virtualhosts.PHP_81")
+            }}</cv-dropdown-item>
+            <cv-dropdown-item value="8.2">{{
+              $t("virtualhosts.PHP_82")
+            }}</cv-dropdown-item>
+            <cv-dropdown-item value="8.3">{{
+              $t("virtualhosts.PHP_83")
+            }}</cv-dropdown-item>
           </cv-dropdown>
           <!-- advanced options -->
           <cv-accordion ref="accordion">
             <cv-accordion-item :open="toggleAccordion[0]">
-              <template slot="title">{{ $t("virtualhosts.advanced") }}</template>
+              <template slot="title">{{
+                $t("virtualhosts.advanced")
+              }}</template>
               <template slot="content">
                 <cv-toggle
-                :value="indexes"
-                :label="$t('virtualhosts.Indexes')"
-                v-model="isIndexesEnabled"
-                :disabled="loading.getConfiguration || loading.configureModule"
-                class="mg-bottom"
+                  :value="indexes"
+                  :label="$t('virtualhosts.Indexes')"
+                  v-model="isIndexesEnabled"
+                  :disabled="
+                    loading.getConfiguration || loading.configureModule
+                  "
+                  class="mg-bottom"
                 >
-                <template slot="text-left">{{
-                  $t("virtualhosts.disabled")
-                }}</template>
-                <template slot="text-right">{{
-                  $t("virtualhosts.enabled")
-                }}</template>
+                  <template slot="text-left">{{
+                    $t("virtualhosts.disabled")
+                  }}</template>
+                  <template slot="text-right">{{
+                    $t("virtualhosts.enabled")
+                  }}</template>
                 </cv-toggle>
                 <template v-if="PhpVersion">
-                <cv-toggle
-                :value="allowurlfopen"
-                :label="$t('virtualhosts.AllowUrlfOpen')"
-                v-model="isAllowUrlfOpenEnabled"
-                :disabled="loading.getConfiguration || loading.configureModule"
-                class="mg-bottom"
-                >
-                <template slot="text-left">{{
-                  $t("virtualhosts.disabled")
-                }}</template>
-                <template slot="text-right">{{
-                  $t("virtualhosts.enabled")
-                }}</template>
-                </cv-toggle>
+                  <cv-toggle
+                    :value="allowurlfopen"
+                    :label="$t('virtualhosts.AllowUrlfOpen')"
+                    v-model="isAllowUrlfOpenEnabled"
+                    :disabled="
+                      loading.getConfiguration || loading.configureModule
+                    "
+                    class="mg-bottom"
+                  >
+                    <template slot="text-left">{{
+                      $t("virtualhosts.disabled")
+                    }}</template>
+                    <template slot="text-right">{{
+                      $t("virtualhosts.enabled")
+                    }}</template>
+                  </cv-toggle>
                   <cv-slider
                     :light="true"
                     :label="$t('virtualhosts.select_php_memory_limit')"
-                    :disabled="loading.getConfiguration || loading.configureModule"
+                    :disabled="
+                      loading.getConfiguration || loading.configureModule
+                    "
                     :min="PostMaxSize"
                     :max="'2000'"
                     :value="MemoryLimit"
@@ -271,12 +318,17 @@
                     :step="'1'"
                     :step-multiplier="'1'"
                     :min-label="$t('virtualhosts.Min')"
-                    :max-label="$t('virtualhosts.Max')">
+                    :max-label="$t('virtualhosts.Max')"
+                  >
                   </cv-slider>
                   <cv-slider
                     :light="true"
-                    :label="$t('virtualhosts.select_php_post_max_file_size_limit')"
-                    :disabled="loading.getConfiguration || loading.configureModule"
+                    :label="
+                      $t('virtualhosts.select_php_post_max_file_size_limit')
+                    "
+                    :disabled="
+                      loading.getConfiguration || loading.configureModule
+                    "
                     :min="UploadMaxFilesize"
                     :max="'2000'"
                     :value="PostMaxSize"
@@ -284,12 +336,15 @@
                     :step="'1'"
                     :step-multiplier="'1'"
                     :min-label="$t('virtualhosts.Min')"
-                    :max-label="$t('virtualhosts.Max')">
+                    :max-label="$t('virtualhosts.Max')"
+                  >
                   </cv-slider>
                   <cv-slider
                     :light="true"
                     :label="$t('virtualhosts.select_php_upload_max_file_limit')"
-                    :disabled="loading.getConfiguration || loading.configureModule"
+                    :disabled="
+                      loading.getConfiguration || loading.configureModule
+                    "
                     :min="'4'"
                     :max="'2000'"
                     :value="UploadMaxFilesize"
@@ -297,12 +352,15 @@
                     :step="'1'"
                     :step-multiplier="'1'"
                     :min-label="$t('virtualhosts.Min')"
-                    :max-label="$t('virtualhosts.Max')">
+                    :max-label="$t('virtualhosts.Max')"
+                  >
                   </cv-slider>
                   <cv-slider
                     :light="true"
                     :label="$t('virtualhosts.select_php_max_file_upload_limit')"
-                    :disabled="loading.getConfiguration || loading.configureModule"
+                    :disabled="
+                      loading.getConfiguration || loading.configureModule
+                    "
                     :min="'20'"
                     :max="'20000'"
                     :value="MaxFileUploads"
@@ -310,12 +368,17 @@
                     :step="'1'"
                     :step-multiplier="'1'"
                     :min-label="$t('virtualhosts.Min')"
-                    :max-label="$t('virtualhosts.Max')">
+                    :max-label="$t('virtualhosts.Max')"
+                  >
                   </cv-slider>
                   <cv-slider
                     :light="true"
-                    :label="$t('virtualhosts.select_php_max_execution_time_limit')"
-                    :disabled="loading.getConfiguration || loading.configureModule"
+                    :label="
+                      $t('virtualhosts.select_php_max_execution_time_limit')
+                    "
+                    :disabled="
+                      loading.getConfiguration || loading.configureModule
+                    "
                     :min="'0'"
                     :max="'3600'"
                     :value="MaxExecutionTime"
@@ -323,7 +386,8 @@
                     :step="'1'"
                     :step-multiplier="'1'"
                     :min-label="$t('virtualhosts.Min')"
-                    :max-label="$t('virtualhosts.Max')">
+                    :max-label="$t('virtualhosts.Max')"
+                  >
                   </cv-slider>
                 </template>
               </template>
@@ -331,7 +395,9 @@
           </cv-accordion>
         </cv-form>
       </template>
-      <template slot="secondary-button">{{ $t("virtualhosts.cancel") }}</template>
+      <template slot="secondary-button">{{
+        $t("virtualhosts.cancel")
+      }}</template>
       <template slot="primary-button">{{ $t("virtualhosts.save") }}</template>
     </NsModal>
   </div>
@@ -349,7 +415,7 @@ import {
 import DataBase32 from "@carbon/icons-vue/es/data--base/32";
 export default {
   name: "VirtualHosts",
-  components:{ DataBase32},
+  components: { DataBase32 },
   mixins: [TaskService, IconService, UtilService, QueryParamService],
   pageTitle() {
     return this.$t("virtualhosts.title") + " - " + this.appName;
@@ -362,32 +428,32 @@ export default {
       DataBase32,
       isShownCreateVhostModal: false,
       isShownDeleteVhostModal: false,
-      path:"",
+      path: "",
       sftpgo_isrunning: false,
-      letsencrypt:"",
-      http2https:"",
-      indexes:"",
-      allowurlfopen:"",
+      letsencrypt: "",
+      http2https: "",
+      indexes: "",
+      allowurlfopen: "",
       isEdit: false,
-      isDisable:false,
+      isDisable: false,
       currentVhost: {
-        ServerNames:[""],
-        Port:"",
+        ServerNames: [""],
+        Port: "",
       },
-      TitleEditModal:"",
-      MemoryLimit:"",
-      PhpVersion:"",
-      isHttpToHttpsEnabled:false,
-      isLetsEncryptEnabled:false,
-      isIndexesEnabled:false,
-      isAllowUrlfOpenEnabled:false,
-      ServerNames:"",
-      MaxExecutionTime:"",
-      MaxFileUploads:"",
-      PostMaxSize:"",
-      UploadMaxFilesize:"",
+      TitleEditModal: "",
+      MemoryLimit: "",
+      PhpVersion: "",
+      isHttpToHttpsEnabled: false,
+      isLetsEncryptEnabled: false,
+      isIndexesEnabled: false,
+      isAllowUrlfOpenEnabled: false,
+      ServerNames: "",
+      MaxExecutionTime: "",
+      MaxFileUploads: "",
+      PostMaxSize: "",
+      UploadMaxFilesize: "",
       virtualhost: [],
-      NextFpmPort:"",
+      NextFpmPort: "",
       hostname: "",
       urlCheckInterval: null,
       loading: {
@@ -397,30 +463,30 @@ export default {
       error: {
         getConfiguration: "",
         SaveVhost: "",
-        ServerNames:"",
+        ServerNames: "",
         lets_encrypt: "",
         http2https: "",
         isIndexesEnabled: "",
         PhpVersion: "",
         MemoryLimit: "",
-        MaxExecutionTime:"",
-        MaxFileUploads:"",
-        PostMaxSize:"",
-        UploadMaxFilesize:""
+        MaxExecutionTime: "",
+        MaxFileUploads: "",
+        PostMaxSize: "",
+        UploadMaxFilesize: "",
       },
       value: {
         getConfiguration: "",
         SaveVhost: "",
-        ServerNames:"",
+        ServerNames: "",
         lets_encrypt: "",
         http2https: "",
         isIndexesEnabled: "",
         PhpVersion: "",
         MemoryLimit: "",
-        MaxExecutionTime:"",
-        MaxFileUploads:"",
-        PostMaxSize:"",
-        UploadMaxFilesize:""
+        MaxExecutionTime: "",
+        MaxFileUploads: "",
+        PostMaxSize: "",
+        UploadMaxFilesize: "",
       },
     };
   },
@@ -443,13 +509,13 @@ export default {
   methods: {
     initvhost() {
       return {
-        PhpVersion:"",
-        ServerNames:"",
-        MemoryLimit:"128",
+        PhpVersion: "",
+        ServerNames: "",
+        MemoryLimit: "128",
         UploadMaxFilesize: "4",
         PostMaxSize: "8",
-        MaxExecutionTime:"0",
-        MaxFileUploads:"20",
+        MaxExecutionTime: "0",
+        MaxFileUploads: "20",
         lets_encrypt: false,
         http2https: false,
         status: "enabled",
@@ -459,7 +525,7 @@ export default {
         HttpToHttps: false,
         LetsEncrypt: false,
         AllowUrlfOpen: false,
-        Indexes: false
+        Indexes: false,
       };
     },
     async getConfiguration() {
@@ -514,8 +580,8 @@ export default {
       this.NextFpmPort = config.NextFpmPort;
       this.sftp_tcp_port = config.sftp_tcp_port;
       this.sftpgo_isrunning = config.sftpgo_isrunning;
-      this.path = config.path
-      this.hostname = config.hostname
+      this.path = config.path;
+      this.hostname = config.hostname;
       this.loading.getConfiguration = false;
     },
 
@@ -535,16 +601,13 @@ export default {
       this.error.removeVhost = "";
       const taskAction = "destroy-vhost";
       // register to task completion
-      this.$root.$once(
-        taskAction + "-completed",
-        this.removeVhostCompleted()
-      );
+      this.$root.$once(taskAction + "-completed", this.removeVhostCompleted());
       const res = await to(
         this.createModuleTaskForApp(this.instanceName, {
           action: taskAction,
           data: {
             port: parseInt(vhost.name),
-            ServerNames: vhost.ServerNames
+            ServerNames: vhost.ServerNames,
           },
           extra: {
             title: this.$t("action." + taskAction),
@@ -559,19 +622,19 @@ export default {
         this.error.removeVhost = this.getErrorMessage(err);
         return;
       }
-        this.isShownDeleteVhostModal = false;
-
+      this.isShownDeleteVhostModal = false;
     },
     removeVhostCompleted() {
       this.getConfiguration();
     },
 
     DisableVhost(vhost) {
-      this.ServerNames = vhost.ServerNames.join('\n');
-      this.isHttpToHttpsEnabled= vhost.http2https;
-      this.isAllowUrlfOpenEnabled= (vhost.allowurlfopen === "enabled") ? true : false;
-      this.isIndexesEnabled= (vhost.Indexes === "enabled") ? true : false;
-      this.isLetsEncryptEnabled= vhost.lets_encrypt;
+      this.ServerNames = vhost.ServerNames.join("\n");
+      this.isHttpToHttpsEnabled = vhost.http2https;
+      this.isAllowUrlfOpenEnabled =
+        vhost.allowurlfopen === "enabled" ? true : false;
+      this.isIndexesEnabled = vhost.Indexes === "enabled" ? true : false;
+      this.isLetsEncryptEnabled = vhost.lets_encrypt;
       this.PhpVersion = vhost.PhpVersion;
       this.Port = vhost.Port.toString();
       this.MemoryLimit = vhost.MemoryLimit.toString();
@@ -579,22 +642,23 @@ export default {
       this.PostMaxSize = vhost.PostMaxSize.toString();
       this.MaxExecutionTime = vhost.MaxExecutionTime.toString();
       this.MaxFileUploads = vhost.MaxFileUploads.toString();
-      this.status = (vhost.status === "enabled") ? "disabled": "enabled";
+      this.status = vhost.status === "enabled" ? "disabled" : "enabled";
       this.isEdit = true;
       this.isDisable = true;
       this.SaveVhost();
     },
     showEditVhostModal(vhost) {
       // set error to false
-      Object.keys(this.error).forEach(key => {
+      Object.keys(this.error).forEach((key) => {
         this.error[key] = false;
       });
       this.TitleEditModal = vhost.ServerNames[0];
-      this.ServerNames = vhost.ServerNames.join('\n');
-      this.isHttpToHttpsEnabled= vhost.http2https;
-      this.isAllowUrlfOpenEnabled= (vhost.allowurlfopen === "enabled") ? true : false;
-      this.isIndexesEnabled= (vhost.Indexes === "enabled") ? true : false;
-      this.isLetsEncryptEnabled= vhost.lets_encrypt;
+      this.ServerNames = vhost.ServerNames.join("\n");
+      this.isHttpToHttpsEnabled = vhost.http2https;
+      this.isAllowUrlfOpenEnabled =
+        vhost.allowurlfopen === "enabled" ? true : false;
+      this.isIndexesEnabled = vhost.Indexes === "enabled" ? true : false;
+      this.isLetsEncryptEnabled = vhost.lets_encrypt;
       this.PhpVersion = vhost.PhpVersion;
       this.Port = vhost.Port.toString();
       this.MemoryLimit = vhost.MemoryLimit.toString();
@@ -610,18 +674,18 @@ export default {
       this.$nextTick(() => {
         this.isShownCreateVhostModal = true;
       });
-},
+    },
     showCreateVhostModal() {
       // set error to false
-      Object.keys(this.error).forEach(key => {
+      Object.keys(this.error).forEach((key) => {
         this.error[key] = false;
       });
       this.currentVhost = this.initvhost();
       this.ServerNames = this.currentVhost.ServerNames;
-      this.isHttpToHttpsEnabled= this.currentVhost.HttpToHttps;
-      this.isAllowUrlfOpenEnabled= this.currentVhost.AllowUrlfOpen;
-      this.isIndexesEnabled= this.currentVhost.Indexes;
-      this.isLetsEncryptEnabled= this.currentVhost.LetsEncrypt;
+      this.isHttpToHttpsEnabled = this.currentVhost.HttpToHttps;
+      this.isAllowUrlfOpenEnabled = this.currentVhost.AllowUrlfOpen;
+      this.isIndexesEnabled = this.currentVhost.Indexes;
+      this.isLetsEncryptEnabled = this.currentVhost.LetsEncrypt;
       this.PhpVersion = this.currentVhost.PhpVersion;
       this.Port = this.currentVhost.port;
       this.MemoryLimit = this.currentVhost.MemoryLimit;
@@ -638,9 +702,9 @@ export default {
       });
     },
     hideEditRepoModal() {
-        this.loading.SaveVhost = false;
-        this.isShownCreateVhostModal = false;
-         this.currentVhost = this.initvhost();
+      this.loading.SaveVhost = false;
+      this.isShownCreateVhostModal = false;
+      this.currentVhost = this.initvhost();
     },
     validateConfigureModule() {
       let isValidationOk = true;
@@ -676,8 +740,8 @@ export default {
       }
 
       this.loading.SaveVhost = true;
-      
-      const taskAction = (!this.isEdit) ? "create-vhost":"update-vhost";
+
+      const taskAction = !this.isEdit ? "create-vhost" : "update-vhost";
 
       // register to task error
       this.core.$root.$off(taskAction + "-aborted");
@@ -704,10 +768,10 @@ export default {
         this.createModuleTaskForApp(this.instanceName, {
           action: taskAction,
           data: {
-            ...(this.isEdit) && {Port: this.Port},
-            ServerNames: this.ServerNames.split('\n'),
+            ...(this.isEdit && { Port: this.Port }),
+            ServerNames: this.ServerNames.split("\n"),
             lets_encrypt: this.isLetsEncryptEnabled ? true : false,
-            http2https: this.isHttpToHttpsEnabled ? true: false,
+            http2https: this.isHttpToHttpsEnabled ? true : false,
             Indexes: this.isIndexesEnabled ? "enabled" : "disabled",
             AllowUrlfOpen: this.isAllowUrlfOpenEnabled ? "enabled" : "disabled",
             PhpVersion: this.PhpVersion,
@@ -716,14 +780,16 @@ export default {
             PostMaxSize: parseInt(this.PostMaxSize),
             MaxExecutionTime: parseInt(this.MaxExecutionTime),
             MaxFileUploads: parseInt(this.MaxFileUploads),
-            status: this.status
+            status: this.status,
           },
           extra: {
-            title: this.isDisable ? this.$t("virtualhosts.Disable_virtual_Host" , {
-              instance: this.instanceName,
-            }) : this.$t("virtualhosts.instance_configuration", {
-              instance: this.instanceName,
-            }),
+            title: this.isDisable
+              ? this.$t("virtualhosts.Disable_virtual_Host", {
+                  instance: this.instanceName,
+                })
+              : this.$t("virtualhosts.instance_configuration", {
+                  instance: this.instanceName,
+                }),
             description: this.$t("virtualhosts.configuring"),
           },
         })
@@ -743,10 +809,10 @@ export default {
       this.loading.SaveVhost = false;
     },
     configureModuleCompleted() {
-        this.loading.SaveVhost = false;
-        this.isShownCreateVhostModal = false;
-        // reload configuration
-        this.getConfiguration();
+      this.loading.SaveVhost = false;
+      this.isShownCreateVhostModal = false;
+      // reload configuration
+      this.getConfiguration();
     },
   },
 };
diff --git a/ui/yarn.lock b/ui/yarn.lock
index c430ee0..7f271fb 100644
--- a/ui/yarn.lock
+++ b/ui/yarn.lock
@@ -1553,8 +1553,8 @@
 
 "@vue/eslint-config-prettier@^6.0.0":
   version "6.0.0"
-  resolved "https://registry.npmmirror.com/@vue/eslint-config-prettier/download/@vue/eslint-config-prettier-6.0.0.tgz#ad5912b308f4ae468458e02a2b05db0b9d246700"
-  integrity sha1-rVkSswj0rkaEWOAqKwXbC50kZwA=
+  resolved "https://registry.yarnpkg.com/@vue/eslint-config-prettier/-/eslint-config-prettier-6.0.0.tgz#ad5912b308f4ae468458e02a2b05db0b9d246700"
+  integrity sha512-wFQmv45c3ige5EA+ngijq40YpVcIkAy0Lihupnsnd1Dao5CBbPyfCzqtejFLZX1EwH/kCJdpz3t6s+5wd3+KxQ==
   dependencies:
     eslint-config-prettier "^6.0.0"
 
@@ -3715,8 +3715,8 @@ escape-string-regexp@^1.0.5:
 
 eslint-config-prettier@^6.0.0:
   version "6.15.0"
-  resolved "https://registry.npmmirror.com/eslint-config-prettier/download/eslint-config-prettier-6.15.0.tgz#7f93f6cb7d45a92f1537a70ecc06366e1ac6fed9"
-  integrity sha1-f5P2y31FqS8VN6cOzAY2bhrG/tk=
+  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-6.15.0.tgz#7f93f6cb7d45a92f1537a70ecc06366e1ac6fed9"
+  integrity sha512-a1+kOYLR8wMGustcgAjdydMsQ2A/2ipRPwRKUmfYaSxc9ZPcrku080Ctl6zrZzZNs/U82MjSv+qKREkoq3bJaw==
   dependencies:
     get-stdin "^6.0.0"
 
@@ -4393,8 +4393,8 @@ get-intrinsic@^1.0.2, get-intrinsic@^1.1.1:
 
 get-stdin@^6.0.0:
   version "6.0.0"
-  resolved "https://registry.npmmirror.com/get-stdin/download/get-stdin-6.0.0.tgz?cache=0&sync_timestamp=1618557641950&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fget-stdin%2Fdownload%2Fget-stdin-6.0.0.tgz#9e09bf712b360ab9225e812048f71fde9c89657b"
-  integrity sha1-ngm/cSs2CrkiXoEgSPcf3pyJZXs=
+  resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-6.0.0.tgz#9e09bf712b360ab9225e812048f71fde9c89657b"
+  integrity sha512-jp4tHawyV7+fkkSKyvjuLZswblUtz+SQKzSWnBbii16BuZksJlU1wuBYXY75r+duh/llF1ur6oNwi+2ZzjKZ7g==
 
 get-stream@^3.0.0:
   version "3.0.0"
@@ -7037,9 +7037,9 @@ prettier@^1.18.2:
   integrity sha1-99f1/4qc2HKnvkyhQglZVqYHl8s=
 
 prettier@^2.2.1:
-  version "2.3.2"
-  resolved "https://registry.npmmirror.com/prettier/download/prettier-2.3.2.tgz?cache=0&sync_timestamp=1624696259185&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fprettier%2Fdownload%2Fprettier-2.3.2.tgz#ef280a05ec253712e486233db5c6f23441e7342d"
-  integrity sha1-7ygKBewlNxLkhiM9tcbyNEHnNC0=
+  version "2.8.8"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.8.tgz#e8c5d7e98a4305ffe3de2e1fc4aca1a71c28b1da"
+  integrity sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==
 
 pretty-error@^2.0.2:
   version "2.1.2"

From cc923752920b1be2a905fb8718809c77ab082d9c Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andre8244@gmail.com>
Date: Mon, 3 Jun 2024 12:33:56 +0200
Subject: [PATCH 2/2] Remove v-html usages

---
 ui/public/i18n/en/translation.json |  4 ++--
 ui/src/views/Settings.vue          | 18 ++++++++----------
 2 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/ui/public/i18n/en/translation.json b/ui/public/i18n/en/translation.json
index 1472658..f300874 100644
--- a/ui/public/i18n/en/translation.json
+++ b/ui/public/i18n/en/translation.json
@@ -79,8 +79,8 @@
     "title": "Virtual hosts",
     "ServerNames_format": "Domain name not allowed : {error}",
     "ServerNames_pattern": "Must be a valid fully qualified domain name: {error}",
-    "type_to_confirm": "Type <strong>{name}</strong> to confirm deletion",
-    "delete_virtualhosts_confirm": "Delete virtual host <strong>{name}</strong>? All data will be deleted. This action is <strong>NOT</strong> reversible",
+    "type_to_confirm": "Type '{name}' to confirm deletion",
+    "delete_virtualhosts_confirm": "Delete virtual host '{name}'? All data will be deleted. This action is NOT reversible",
     "sftpgo_url": "SFTPGo WebClient",
     "sftpgo_login_tips": "The default login:password is {user}:{user}, you must change it at the first login",
     "domain_already_used_in_traefik": "Domain name already used: {error}",
diff --git a/ui/src/views/Settings.vue b/ui/src/views/Settings.vue
index ca77874..1321309 100644
--- a/ui/src/views/Settings.vue
+++ b/ui/src/views/Settings.vue
@@ -32,7 +32,7 @@
                 tooltipDirection="right"
               >
                 <template slot="tooltip">
-                  <div v-html="$t('settings.sftpgo_path_tips')"></div>
+                  <div>{{ $t("settings.sftpgo_path_tips") }}</div>
                 </template>
               </NsTextInput>
               <NsTextInput
@@ -48,13 +48,13 @@
                 tooltipDirection="right"
               >
                 <template slot="tooltip">
-                  <div
-                    v-html="
-                      $t('settings.sftp_tcp_port_tips', {
-                        port: sftp_tcp_port || '{tcp_port}',
+                  <div>
+                    {{
+                      $t("settings.sftp_tcp_port_tips", {
+                        port: sftp_tcp_port || "{tcp_port}",
                       })
-                    "
-                  ></div>
+                    }}
+                  </div>
                 </template>
               </NsTextInput>
               <NsToggle
@@ -67,9 +67,7 @@
                 class="mg-bottom"
               >
                 <template slot="tooltip">
-                  <span
-                    v-html="$t('settings.sftpgo_explanation_tooltips')"
-                  ></span>
+                  <span>{{ $t("settings.sftpgo_explanation_tooltips") }}</span>
                 </template>
                 <template slot="text-left">{{
                   $t("common.disabled")