Merge pull request #166 from NethServer/use-nelink-component

Use NeLink component instead of <a> text links
NethServer · Feb 5, 2024 · 334e2ce · 334e2ce
2 parents 2de3404 + edfc97d
commit 334e2ce
Show file tree

Hide file tree

Showing 11 changed files with 51 additions and 64 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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",

diff --git a/public/i18n/en/translation.json b/public/i18n/en/translation.json
@@ -1176,13 +1176,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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 -->

diff --git 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']"