From d818167b8eeb097a643314198865e5fc6d7318ef Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andre8244@gmail.com>
Date: Thu, 1 Feb 2024 18:06:31 +0100
Subject: [PATCH 1/3] fix: minor style fixes to Certificates page

---
 src/views/standalone/system/CertificatesView.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/views/standalone/system/CertificatesView.vue b/src/views/standalone/system/CertificatesView.vue
index cb2c9d9f9..3676e9bfb 100644
--- a/src/views/standalone/system/CertificatesView.vue
+++ b/src/views/standalone/system/CertificatesView.vue
@@ -130,14 +130,14 @@ onMounted(() => {
         {{ error.notificationDetails }}
       </template></NeInlineNotification
     >
-    <NeSkeleton v-if="loading" :lines="15" />
+    <NeSkeleton v-if="loading" size="lg" :lines="8" />
     <template v-else-if="!fetchError">
-      <div class="flex flex-row items-center justify-between">
+      <div class="flex flex-col items-start justify-between gap-4 xl:flex-row">
         <p class="max-w-2xl text-sm font-normal text-gray-500 dark:text-gray-400">
           {{ t('standalone.certificates.description') }}
         </p>
-        <div class="flex flex-row">
-          <NeButton class="mr-2" kind="tertiary" @click="showImportCertificateDrawer = true"
+        <div class="flex shrink-0 flex-row-reverse gap-4 xl:flex-row">
+          <NeButton kind="tertiary" @click="showImportCertificateDrawer = true"
             ><template #prefix>
               <font-awesome-icon
                 :icon="['fas', 'circle-arrow-up']"

From 171ebdd46f47b63e82dfa923faf54c7ee656d1d6 Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andre8244@gmail.com>
Date: Thu, 1 Feb 2024 18:10:23 +0100
Subject: [PATCH 2/3] refactor: use NeLink instead of <a> text links

---
 public/i18n/en/translation.json               |  4 +--
 .../controller/ControllerAppLogin.vue         | 11 +++---
 .../standalone/StandaloneAppLogin.vue         |  9 ++---
 .../backup_and_restore/MigrationContent.vue   | 22 +++++-------
 .../CreateLetsEncryptCertificateDrawer.vue    |  7 ++--
 .../firewall/rules/FirewallRulesContent.vue   |  2 +-
 .../standalone/security/FlashstartContent.vue | 36 ++++++++-----------
 .../standalone/StandaloneDashboardView.vue    |  6 ++--
 8 files changed, 42 insertions(+), 55 deletions(-)

diff --git a/public/i18n/en/translation.json b/public/i18n/en/translation.json
index a7d2b87d5..42a47b6e1 100644
--- a/public/i18n/en/translation.json
+++ b/public/i18n/en/translation.json
@@ -1175,13 +1175,13 @@
     "flashstart": {
       "title": "FlashStart filter",
       "content_title": "Settings",
-      "content_description": "FlashStart doesn't require any DNS configuration neither in the firewall itself nor inside the clients. Before using FlashStart you need to",
+      "content_description": "FlashStart doesn't require any DNS configuration neither in the firewall itself nor inside the clients. Before using FlashStart you need to {createAccount}",
       "content_link": "create an account",
       "status": "Status",
       "status_enabled": "Enabled",
       "status_disabled": "Disabled",
       "username": "Username",
-      "username_helper": "Enter the username or the email address registered on",
+      "username_helper": "Enter the username or the email address registered on {flashstartUrl}",
       "password": "Password",
       "zones": "Zones to filter",
       "zones_placeholder": "Choose zones",
diff --git a/src/components/controller/ControllerAppLogin.vue b/src/components/controller/ControllerAppLogin.vue
index 020efc5dd..cfa9a1670 100644
--- a/src/components/controller/ControllerAppLogin.vue
+++ b/src/components/controller/ControllerAppLogin.vue
@@ -4,6 +4,7 @@
 -->
 
 <script setup lang="ts">
+import { NeLink } from '@nethesis/vue-components'
 import {
   NeTitle,
   NeButton,
@@ -186,13 +187,9 @@ function validate() {
               </div>
 
               <div class="text-sm leading-6">
-                <a
-                  href="https://docs.nethsecurity.org/"
-                  target="_blank"
-                  rel="noreferrer"
-                  class="font-semibold text-primary-700 hover:text-primary-800 dark:text-primary-300 dark:hover:text-primary-200"
-                  >{{ t('login.need_help') }}</a
-                >
+                <NeLink href="https://docs.nethsecurity.org/" target="_blank" class="font-medium">
+                  {{ t('login.need_help') }}
+                </NeLink>
               </div>
             </div>
 
diff --git a/src/components/standalone/StandaloneAppLogin.vue b/src/components/standalone/StandaloneAppLogin.vue
index ffb9647f5..daeb2e7b0 100644
--- a/src/components/standalone/StandaloneAppLogin.vue
+++ b/src/components/standalone/StandaloneAppLogin.vue
@@ -4,6 +4,7 @@
 -->
 
 <script setup lang="ts">
+import { NeLink } from '@nethesis/vue-components'
 import { NeTitle, NeButton, NeTextInput, NeInlineNotification } from '@nethserver/vue-tailwind-lib'
 import { useLoginStore } from '@/stores/standalone/standaloneLogin'
 import { onMounted, ref, watch } from 'vue'
@@ -254,13 +255,13 @@ async function verifyOtp() {
                   >
                 </div>
                 <div class="text-sm leading-6">
-                  <a
+                  <NeLink
                     href="https://docs.nethsecurity.org/en/latest/remote_access.html#default-credentials"
                     target="_blank"
-                    rel="noreferrer"
-                    class="font-semibold text-primary-700 hover:text-primary-800 dark:text-primary-300 dark:hover:text-primary-200"
-                    >{{ t('login.need_help') }}</a
+                    class="font-medium"
                   >
+                    {{ t('login.need_help') }}
+                  </NeLink>
                 </div>
               </div>
               <div>
diff --git a/src/components/standalone/backup_and_restore/MigrationContent.vue b/src/components/standalone/backup_and_restore/MigrationContent.vue
index d36d1c23b..70605d154 100644
--- a/src/components/standalone/backup_and_restore/MigrationContent.vue
+++ b/src/components/standalone/backup_and_restore/MigrationContent.vue
@@ -6,6 +6,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { NeLink } from '@nethesis/vue-components'
 import { NeButton, NeInlineNotification } from '@nethserver/vue-tailwind-lib'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import MigrationDrawer from '@/components/standalone/backup_and_restore/MigrationDrawer.vue'
@@ -34,20 +35,15 @@ function successMigration() {
     />
     <FormLayout class="max-w-6xl">
       <template #description>
-        <p class="mb-8 text-sm font-normal text-gray-500 dark:text-gray-400">
+        <div class="mb-8 text-sm font-normal text-gray-500 dark:text-gray-400">
           {{ t('standalone.backup_and_restore.migration.description') }}
-          <br />
-          <br />
-          <a
-            href="https://docs.nethsecurity.org/en/latest/migration.html"
-            target="_blank"
-            rel="noreferrer"
-            class="text-primary-700 hover:text-primary-800 dark:text-primary-500 dark:hover:text-primary-300"
-          >
-            <FontAwesomeIcon class="mr-2" :icon="['fa', 'arrow-up-right-from-square']" />
-            {{ t('standalone.backup_and_restore.migration.description_link') }}
-          </a>
-        </p>
+          <div class="mt-4">
+            <NeLink href="https://docs.nethsecurity.org/en/latest/migration.html" target="_blank">
+              <FontAwesomeIcon class="mr-2" :icon="['fa', 'arrow-up-right-from-square']" />
+              {{ t('standalone.backup_and_restore.migration.description_link') }}
+            </NeLink>
+          </div>
+        </div>
       </template>
       <div class="flex">
         <div class="mr-auto self-start">
diff --git a/src/components/standalone/certificates/CreateLetsEncryptCertificateDrawer.vue b/src/components/standalone/certificates/CreateLetsEncryptCertificateDrawer.vue
index cc4e2e59c..2c1455ab5 100644
--- a/src/components/standalone/certificates/CreateLetsEncryptCertificateDrawer.vue
+++ b/src/components/standalone/certificates/CreateLetsEncryptCertificateDrawer.vue
@@ -11,6 +11,7 @@ import {
   validateUciName,
   type validationOutput
 } from '@/lib/validation'
+import { NeLink } from '@nethesis/vue-components'
 import { getAxiosErrorMessage, type NeComboboxOption } from '@nethserver/vue-tailwind-lib'
 import { ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -294,12 +295,10 @@ watch(
                 <template #content>
                   <i18n-t keypath="standalone.certificates.dns_api_tooltip" tag="span">
                     <template #dnsapiurl>
-                      <a
+                      <NeLink
                         href="https://github.com/acmesh-official/acme.sh/wiki/dnsapi"
                         target="_blank"
-                        rel="noreferrer"
-                        class="text-primary-500 hover:text-primary-300 dark:text-primary-700 dark:hover:text-primary-800"
-                        >https://github.com/acmesh-official/acme.sh/wiki/dnsapi</a
+                        >https://github.com/acmesh-official/acme.sh/wiki/dnsapi</NeLink
                       >
                     </template>
                   </i18n-t>
diff --git a/src/components/standalone/firewall/rules/FirewallRulesContent.vue b/src/components/standalone/firewall/rules/FirewallRulesContent.vue
index fde3e925d..3847507d6 100644
--- a/src/components/standalone/firewall/rules/FirewallRulesContent.vue
+++ b/src/components/standalone/firewall/rules/FirewallRulesContent.vue
@@ -11,7 +11,7 @@ import {
   getAxiosErrorMessage,
   NeTextInput
 } from '@nethserver/vue-tailwind-lib'
-import { NeInlineNotification, NeComboboxOption } from '@nethesis/vue-components'
+import { NeInlineNotification, type NeComboboxOption } from '@nethesis/vue-components'
 import { onMounted, ref, type PropType, watch, computed } from 'vue'
 import CreateOrEditFirewallRuleDrawer from './CreateOrEditFirewallRuleDrawer.vue'
 import { isEmpty, uniq } from 'lodash-es'
diff --git a/src/components/standalone/security/FlashstartContent.vue b/src/components/standalone/security/FlashstartContent.vue
index 284aeb559..62178931f 100644
--- a/src/components/standalone/security/FlashstartContent.vue
+++ b/src/components/standalone/security/FlashstartContent.vue
@@ -7,7 +7,7 @@
 import { ref, onMounted } from 'vue'
 import { useI18n } from 'vue-i18n'
 import FormLayout from '@/components/standalone/FormLayout.vue'
-import { NeCombobox, type NeComboboxOption } from '@nethesis/vue-components'
+import { NeCombobox, type NeComboboxOption, NeLink } from '@nethesis/vue-components'
 import {
   NeSkeleton,
   NeTextInput,
@@ -223,17 +223,13 @@ function save() {
   <div>
     <FormLayout :title="t('standalone.flashstart.content_title')" class="max-w-3xl">
       <template #description>
-        <p class="mb-8 text-sm font-normal text-gray-500 dark:text-gray-400">
-          {{ t('standalone.flashstart.content_description') }}
-          <a
-            href="https://flashstart.nethesis.it/"
-            target="_blank"
-            rel="noreferrer"
-            class="text-primary-700 hover:text-primary-800 dark:text-primary-500 dark:hover:text-primary-300"
-          >
-            {{ t('standalone.flashstart.content_link') }}
-          </a>
-        </p>
+        <i18n-t keypath="standalone.flashstart.content_description" tag="p">
+          <template #createAccount>
+            <NeLink href="https://flashstart.nethesis.it/" target="_blank">
+              {{ t('standalone.flashstart.content_link') }}
+            </NeLink>
+          </template>
+        </i18n-t>
       </template>
       <NeSkeleton v-if="loading" :lines="5" />
       <NeInlineNotification
@@ -272,15 +268,13 @@ function save() {
             <template #tooltip>
               <NeTooltip>
                 <template #content>
-                  {{ t('standalone.flashstart.username_helper') }}
-                  <a
-                    href="https://flashstart.nethesis.it/"
-                    target="_blank"
-                    rel="noreferrer"
-                    class="text-primary-500 hover:text-primary-300 dark:text-primary-700 dark:hover:text-primary-800"
-                  >
-                    https://flashstart.nethesis.it/ </a
-                  >.
+                  <i18n-t keypath="standalone.flashstart.username_helper" tag="span">
+                    <template #flashstartUrl>
+                      <NeLink href="https://flashstart.nethesis.it/" target="_blank">
+                        https://flashstart.nethesis.it/
+                      </NeLink>
+                    </template>
+                  </i18n-t>
                 </template>
               </NeTooltip>
             </template>
diff --git a/src/views/standalone/StandaloneDashboardView.vue b/src/views/standalone/StandaloneDashboardView.vue
index 9d0e68268..bf3b287a9 100644
--- a/src/views/standalone/StandaloneDashboardView.vue
+++ b/src/views/standalone/StandaloneDashboardView.vue
@@ -4,7 +4,7 @@
 -->
 
 <script setup lang="ts">
-import { NeCard } from '@nethesis/vue-components'
+import { NeCard, NeLink } from '@nethesis/vue-components'
 import { NeTitle } from '@nethserver/vue-tailwind-lib'
 import { useI18n } from 'vue-i18n'
 import RealTimeTrafficCard from '@/components/standalone/dashboard/RealTimeTrafficCard.vue'
@@ -55,9 +55,9 @@ function goToMultiwan() {
     <!-- multiwan -->
     <ServiceCard serviceName="mwan" hasStatus :icon="['fas', 'earth-americas']">
       <template #title>
-        <a @click="goToMultiwan" class="cursor-pointer text-primary-700 dark:text-primary-500">
+        <NeLink @click="goToMultiwan">
           {{ t('standalone.dashboard.multiwan') }}
-        </a>
+        </NeLink>
       </template>
     </ServiceCard>
     <!-- dpi-core -->

From edfc97d4d87697f7356e902b27ccf52cb3f8fe04 Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andre8244@gmail.com>
Date: Mon, 5 Feb 2024 17:42:11 +0100
Subject: [PATCH 3/3] chore: update @nethesis/vue-components

---
 package-lock.json | 8 ++++----
 package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index a2b4d4af0..3b552cdd4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,7 +17,7 @@
         "@nethesis/nethesis-brands-svg-icons": "github:nethesis/Font-Awesome#ns-brands",
         "@nethesis/nethesis-light-svg-icons": "github:nethesis/Font-Awesome#ns-light",
         "@nethesis/nethesis-solid-svg-icons": "github:nethesis/Font-Awesome#ns-solid",
-        "@nethesis/vue-components": "^0.7.0",
+        "@nethesis/vue-components": "^0.8.0",
         "@nethserver/vue-tailwind-lib": "^0.1.1",
         "@types/lodash-es": "^4.17.12",
         "@vuepic/vue-datepicker": "^7.2.2",
@@ -1301,9 +1301,9 @@
       }
     },
     "node_modules/@nethesis/vue-components": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/@nethesis/vue-components/-/vue-components-0.7.0.tgz",
-      "integrity": "sha512-t8mXa+X2xWYHcnWI04+MPSpkedSMHXNG4OSe9JqWhcvqP/zxM3r43/SN+8U0UB9rmVRnPc3FDKtBL6ZO4qn/XQ==",
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@nethesis/vue-components/-/vue-components-0.8.0.tgz",
+      "integrity": "sha512-pe5nVPN+zAQLc8sF1h+UNdzKfii01GyfxiwR/iGk883t23hbRYgSd0Ks9GVfuf19s1fxFErGzdmLwiFF0oE1UA==",
       "dependencies": {
         "@fortawesome/fontawesome-svg-core": "^6.5.1",
         "@fortawesome/free-solid-svg-icons": "^6.5.1",
diff --git a/package.json b/package.json
index 22153ed70..b35b1f2a2 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,7 @@
     "@nethesis/nethesis-brands-svg-icons": "github:nethesis/Font-Awesome#ns-brands",
     "@nethesis/nethesis-light-svg-icons": "github:nethesis/Font-Awesome#ns-light",
     "@nethesis/nethesis-solid-svg-icons": "github:nethesis/Font-Awesome#ns-solid",
-    "@nethesis/vue-components": "^0.7.0",
+    "@nethesis/vue-components": "^0.8.0",
     "@nethserver/vue-tailwind-lib": "^0.1.1",
     "@types/lodash-es": "^4.17.12",
     "@vuepic/vue-datepicker": "^7.2.2",