chore: import NeTextArea from vue-components

package.json

@@ -25,7 +25,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.13.2",
+    "@nethesis/vue-components": "^0.14.0",
     "@nethserver/vue-tailwind-lib": "^0.1.2",
     "@types/lodash-es": "^4.17.12",
     "@vuepic/vue-datepicker": "^7.2.2",

public/i18n/en/translation.json

@@ -412,7 +412,8 @@
       "no_protocols": "No protocols",
       "openvpn_rw": "OpenVPN RW",
       "data_updated_every_seconds": "Data updated every {seconds} seconds",
-      "usage_free_of_total": "{free} free of {total}"
+      "usage_free_of_total": "{free} free of {total}",
+      "default_hostname_warning": "Using the default hostname 'NethSec' is not recommended. Change it in {systemSettingsLink} and apply the change."
     },
     "subscription": {
       "title": "Subscription",
@@ -460,7 +461,9 @@
       "all_interfaces": "All interfaces",
       "settings": "Settings",
       "ntp_server_candidates": "NTP servers",
-      "add_ntp_server": "Add NTP server"
+      "add_ntp_server": "Add NTP server",
+      "default_hostname": "Default hostname",
+      "default_hostname_description": "Using the default hostname 'NethSec' is not recommended. You can assign a different hostname to this unit here."
     },
     "uci_changes": {
       "configuration_changes": "Configuration changes",

src/components/ToastNotificationsArea.vue

@@ -20,23 +20,25 @@ const notificationsToShow = computed(() => {
 
 <template>
   <div>
-    <div
-      aria-live="assertive"
-      class="pointer-events-none fixed inset-0 flex items-start px-4 pb-6 pt-20 text-sm"
-    >
-      <div class="flex w-full flex-col items-end space-y-4">
-        <TransitionGroup name="fade">
-          <NeToastNotification
-            v-for="notification in notificationsToShow"
-            :key="notification.id"
-            :notification="notification"
-            :srCloseLabel="t('common.close')"
-            showCloseButton
-            @close="notificationsStore.hideNotification(notification.id)"
-          />
-        </TransitionGroup>
+    <Teleport to="body">
+      <div
+        aria-live="assertive"
+        class="pointer-events-none fixed inset-0 z-[120] flex items-start px-8 pb-6 pt-24 text-sm"
+      >
+        <div class="flex w-full flex-col items-end space-y-4">
+          <TransitionGroup name="fade">
+            <NeToastNotification
+              v-for="notification in notificationsToShow"
+              :key="notification.id"
+              :notification="notification"
+              :srCloseLabel="t('common.close')"
+              showCloseButton
+              @close="notificationsStore.hideNotification(notification.id)"
+            />
+          </TransitionGroup>
+        </div>
       </div>
-    </div>
+    </Teleport>
     <!-- axios error modal -->
     <AxiosErrorModal />
   </div>

src/components/controller/units/UnitsTable.vue

@@ -400,11 +400,7 @@ function showRemoveUnitModal(unit: Unit) {
                 <div>
                   {{ t('controller.units.open_unit_tooltip') }}
                 </div>
-                <!-- link with inverted theme -->
-                <NeLink
-                  @click="dontShowAgainHideOpenUnitPopupsTooltip"
-                  class="mt-2 inline-block text-primary-300 hover:text-primary-200 dark:text-primary-700 dark:hover:text-primary-800"
-                >
+                <NeLink invertedTheme @click="dontShowAgainHideOpenUnitPopupsTooltip">
                   {{ t('common.dont_show_again') }}
                 </NeLink>
               </template>

src/components/standalone/StandaloneTopBar.vue

@@ -160,7 +160,7 @@ function openNotificationsDrawer() {
         <!-- badge for controlled unit -->
         <NeTooltip v-if="!isStandaloneMode()">
           <template #trigger>
-            <NeBadge kind="tertiary" text="Controller" />
+            <NeBadge kind="primary" text="Controller" />
           </template>
           <template #content>
             {{ t('common.shell.controlled_unit_tooltip') }}

src/components/standalone/account/two_fa/TwoFactorAuth.vue

@@ -15,9 +15,9 @@ import {
   NeFormItemLabel,
   getPreference,
   savePreference,
-  getAxiosErrorMessage
+  getAxiosErrorMessage,
+  NeTextArea
 } from '@nethesis/vue-components'
-import { NeTextArea } from '@nethserver/vue-tailwind-lib'
 import ConfigureTwoFaDrawer from './ConfigureTwoFaDrawer.vue'
 import RevokeTwoFaModal from './RevokeTwoFaModal.vue'
 import { useLoginStore } from '@/stores/standalone/standaloneLogin'

src/components/standalone/dashboard/SystemInfoCard.vue

@@ -8,6 +8,8 @@ import { ubusCall } from '@/lib/standalone/ubus'
 import {
   NeCard,
   NeProgressBar,
+  NeTooltip,
+  NeLink,
   getAxiosErrorMessage,
   formatDurationLoc,
   byteFormat1024
@@ -16,10 +18,13 @@ import { onMounted, onUnmounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { round } from 'lodash-es'
+import { getStandaloneRoutePrefix } from '@/lib/router'
+import { useRouter } from 'vue-router'
 
 const { t } = useI18n()
+const router = useRouter()
 const REFRESH_INTERVAL = 10000
-const systemInfo = ref<any>(null)
+const systemInfo = ref<any>({})
 const systemInfoIntervalId = ref(0)
 
 const freeMemory = ref(0)
@@ -105,6 +110,10 @@ function getProgressBarColor(progress: number) {
     return 'rose'
   }
 }
+
+function goToSystemSettings() {
+  router.push(`${getStandaloneRoutePrefix()}/system/systemSettings`)
+}
 </script>
 
 <template>
@@ -126,7 +135,28 @@ function getProgressBarColor(progress: number) {
     <div class="divide-y divide-gray-300 dark:divide-gray-600">
       <div class="py-2">
         <span class="mr-3 font-semibold">{{ t('standalone.dashboard.hostname') }}</span>
-        <span>{{ systemInfo?.hostname || '-' }}</span>
+        <div class="inline-flex items-center gap-1">
+          <span>{{ systemInfo?.hostname || '-' }}</span>
+          <!-- warning for default hostname -->
+          <NeTooltip v-if="systemInfo.hostname === 'NethSec'" interactive class="leading-none">
+            <template #trigger>
+              <font-awesome-icon
+                :icon="['fas', 'warning']"
+                class="h-4 w-4 text-amber-700 dark:text-amber-500"
+                aria-hidden="true"
+              />
+            </template>
+            <template #content>
+              <i18n-t keypath="standalone.dashboard.default_hostname_warning" tag="p">
+                <template #systemSettingsLink>
+                  <NeLink invertedTheme @click="goToSystemSettings">
+                    {{ t('standalone.system_settings.title') }}
+                  </NeLink>
+                </template>
+              </i18n-t>
+            </template>
+          </NeTooltip>
+        </div>
       </div>
       <div class="py-2">
         <span class="mr-3 font-semibold">{{ t('standalone.dashboard.operating_system') }}</span>

src/components/standalone/dns_dhcp/DeleteStaticLeaseModal.vue

@@ -66,6 +66,7 @@ function close() {
     kind="warning"
     :title="t('standalone.dns_dhcp.delete_reservation')"
     :primaryLabel="t('common.delete')"
+    primaryButtonKind="danger"
     :primaryButtonDisabled="isDeleting"
     :primaryButtonLoading="isDeleting"
     @primaryClick="deleteStaticLease()"

src/components/standalone/openvpn_tunnel/CreateOrEditTunnelDrawer.vue

@@ -27,9 +27,10 @@ import {
   NeSkeleton,
   NeFormItemLabel,
   NeRadioSelection,
-  getAxiosErrorMessage
+  getAxiosErrorMessage,
+  NeTextArea
 } from '@nethesis/vue-components'
-import { NeToggle, NeTextInput, NeTextArea } from '@nethserver/vue-tailwind-lib'
+import { NeToggle, NeTextInput } from '@nethserver/vue-tailwind-lib'
 import { useI18n } from 'vue-i18n'
 import type { ServerTunnel, ClientTunnel } from './TunnelManager.vue'
 import NeMultiTextInput from '../NeMultiTextInput.vue'

src/components/standalone/system_settings/GeneralSettings.vue

@@ -15,9 +15,10 @@ import {
   NeFormItemLabel,
   focusElement,
   formatInTimeZoneLoc,
-  getAxiosErrorMessage
+  getAxiosErrorMessage,
+  NeTextArea
 } from '@nethesis/vue-components'
-import { NeTextInput, NeTextArea } from '@nethserver/vue-tailwind-lib'
+import { NeTextInput } from '@nethserver/vue-tailwind-lib'
 import { computed, onMounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -33,6 +34,7 @@ let timezone = ref('')
 let timezoneRef = ref()
 let timezones = ref([])
 let systemConfig: any = ref({})
+let hostnameFromConfig = ref('')
 
 let loading = ref({
   systemConfig: true,
@@ -106,6 +108,7 @@ async function getSystemConfig() {
     const config = await getUciConfig('system')
     systemConfig.value = config
     hostname.value = config.system[0].hostname
+    hostnameFromConfig.value = hostname.value
     description.value = config.system[0].description
     notes.value = config.system[0].notes
   } catch (err: any) {
@@ -245,6 +248,13 @@ async function syncWithNtpServer() {
       <!-- main section -->
       <div class="border-b border-gray-200 pb-6 dark:border-gray-700">
         <div class="space-y-6">
+          <NeInlineNotification
+            v-if="hostnameFromConfig === 'NethSec'"
+            kind="warning"
+            :title="t('standalone.system_settings.default_hostname')"
+            :description="t('standalone.system_settings.default_hostname_description')"
+            :closeAriaLabel="t('common.close')"
+          />
           <!-- hostname -->
           <NeTextInput
             :label="t('standalone.system_settings.hostname')"

src/components/standalone/users_database/CreateOrEditDatabaseDrawer.vue

@@ -25,7 +25,7 @@ import {
 } from '@nethesis/vue-components'
 import { NeTextInput, NeToggle } from '@nethserver/vue-tailwind-lib'
 import { ValidationError, ubusCall } from '@/lib/standalone/ubus'
-import { bind, debounce } from 'lodash-es'
+import { debounce } from 'lodash-es'
 
 type LDAPDatabasePayload = {
   name: string

src/views/controller/AccountView.vue

@@ -4,11 +4,16 @@
 -->
 
 <script setup lang="ts">
-import { NeTitle } from '@nethesis/vue-components'
 import { useI18n } from 'vue-i18n'
 import FormLayout from '@/components/standalone/FormLayout.vue'
-import { NeButton, NeSkeleton, NeInlineNotification, NeCombobox } from '@nethesis/vue-components'
-import { NeTextArea } from '@nethserver/vue-tailwind-lib'
+import {
+  NeButton,
+  NeSkeleton,
+  NeInlineNotification,
+  NeCombobox,
+  NeTitle,
+  NeTextArea
+} from '@nethesis/vue-components'
 import { onMounted, ref } from 'vue'
 import { useAccountsStore } from '@/stores/controller/accounts'
 import { useLanguage } from '@/composables/useLanguage'

src/views/controller/UnitTerminalView.vue

@@ -125,7 +125,8 @@ function getBadgeIcon() {
 <template>
   <div class="p-6">
     <NeTitle>{{ t('controller.unit_terminal.name_unit_terminal', { name: unitName }) }}</NeTitle>
-    <div class="flex flex-col gap-6">
+    <!-- 50 rem is an appropriate width for the default number or colums of xterm.js terminal -->
+    <div class="flex max-w-[50rem] flex-col gap-6">
       <div class="flex items-center gap-4">
         <span>{{ t('controller.unit_terminal.connection') }}</span>
         <NeBadge

src/views/standalone/system/ControllerView.vue

@@ -12,9 +12,10 @@ import {
   NeButton,
   NeInlineNotification,
   focusElement,
-  getAxiosErrorMessage
+  getAxiosErrorMessage,
+  NeTextArea
 } from '@nethesis/vue-components'
-import { NeTextInput, NeToggle, NeModal, NeTextArea } from '@nethserver/vue-tailwind-lib'
+import { NeTextInput, NeToggle, NeModal } from '@nethserver/vue-tailwind-lib'
 import { useI18n } from 'vue-i18n'
 import FormLayout from '@/components/standalone/FormLayout.vue'
 import { onMounted, onUnmounted, ref, type Ref } from 'vue'