Merge pull request #67 from NethServer/remove-vhtml

- Remove v-html usages - Format code
NethServer · Jun 3, 2024 · 3246e50 · 3246e50
2 parents 347bfdd + cc92375
commit 3246e50
Show file tree

Hide file tree

Showing 8 changed files with 372 additions and 295 deletions.
diff --git 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/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/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
@@ -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
@@ -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>{{ $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"
@@ -52,11 +48,13 @@
                 tooltipDirection="right"
               >
                 <template slot="tooltip">
-                  <div
-                    v-html="
-                      $t('settings.sftp_tcp_port_tips', {port: sftp_tcp_port || '{tcp_port}'})
-                    "
-                  ></div>
+                  <div>
+                    {{
+                      $t("settings.sftp_tcp_port_tips", {
+                        port: sftp_tcp_port || "{tcp_port}",
+                      })
+                    }}
+                  </div>
                 </template>
               </NsTextInput>
               <NsToggle
@@ -69,12 +67,14 @@
                 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") }}</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 +226,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 +336,4 @@ export default {
 .mg-left {
   margin-left: $spacing-05;
 }
-</style>
+</style>
diff --git 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,22 +410,22 @@ export default {
         images: [],
         volumes: [],
       },
-      path:"",
-      sftp_tcp_port:"",
+      path: "",
+      sftp_tcp_port: "",
       sftpgo_isrunning: "",
       backupRepositories: [],
       backups: [],
       loading: {
         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() {