refactor: use NeLink instead of <a> text links

NethServer · Feb 5, 2024 · 171ebdd · 171ebdd
1 parent d818167
commit 171ebdd
Show file tree

Hide file tree

Showing 8 changed files with 42 additions and 55 deletions.
diff --git 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
@@ -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 -->