From ff099060009bd41c42ce6173aaa801c6d8e24cf6 Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andre8244@gmail.com>
Date: Thu, 11 Apr 2024 11:01:48 +0200
Subject: [PATCH 1/7] chore: import NeTextArea from vue-components

---
 .../standalone/account/two_fa/TwoFactorAuth.vue       |  4 ++--
 .../openvpn_tunnel/CreateOrEditTunnelDrawer.vue       |  5 +++--
 .../standalone/system_settings/GeneralSettings.vue    |  5 +++--
 src/views/controller/AccountView.vue                  | 11 ++++++++---
 src/views/standalone/system/ControllerView.vue        |  5 +++--
 5 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/components/standalone/account/two_fa/TwoFactorAuth.vue b/src/components/standalone/account/two_fa/TwoFactorAuth.vue
index 4354a408c..759e373b9 100644
--- a/src/components/standalone/account/two_fa/TwoFactorAuth.vue
+++ b/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'
diff --git a/src/components/standalone/openvpn_tunnel/CreateOrEditTunnelDrawer.vue b/src/components/standalone/openvpn_tunnel/CreateOrEditTunnelDrawer.vue
index 9a765010d..b27545d02 100644
--- a/src/components/standalone/openvpn_tunnel/CreateOrEditTunnelDrawer.vue
+++ b/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'
diff --git a/src/components/standalone/system_settings/GeneralSettings.vue b/src/components/standalone/system_settings/GeneralSettings.vue
index b928b85f4..563473279 100644
--- a/src/components/standalone/system_settings/GeneralSettings.vue
+++ b/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'
 
diff --git a/src/views/controller/AccountView.vue b/src/views/controller/AccountView.vue
index cb515534e..0f81b7e72 100644
--- a/src/views/controller/AccountView.vue
+++ b/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'
diff --git a/src/views/standalone/system/ControllerView.vue b/src/views/standalone/system/ControllerView.vue
index fa7f6bf12..3bf41501e 100644
--- a/src/views/standalone/system/ControllerView.vue
+++ b/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'

From fa187607097e0b2958a4fdd93d6542961fedec5d Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andre8244@gmail.com>
Date: Thu, 11 Apr 2024 11:47:09 +0200
Subject: [PATCH 2/7] fix: show toast notifications on top of drawers

---
 src/components/ToastNotificationsArea.vue | 34 ++++++++++++-----------
 1 file changed, 18 insertions(+), 16 deletions(-)

diff --git a/src/components/ToastNotificationsArea.vue b/src/components/ToastNotificationsArea.vue
index 72c624245..428c1c35a 100644
--- a/src/components/ToastNotificationsArea.vue
+++ b/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>

From 2c6c7690e4febd84920b9c8e37c0f92eddcc6839 Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andre8244@gmail.com>
Date: Thu, 11 Apr 2024 11:55:56 +0200
Subject: [PATCH 3/7] fix: style of controlled unit badge

---
 src/components/standalone/StandaloneTopBar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/standalone/StandaloneTopBar.vue b/src/components/standalone/StandaloneTopBar.vue
index 54a0aa6f1..8a5513ed8 100644
--- a/src/components/standalone/StandaloneTopBar.vue
+++ b/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') }}

From d081df44939d775f6c653e4b768a0e9f6ff2fa51 Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andre8244@gmail.com>
Date: Thu, 11 Apr 2024 15:09:12 +0200
Subject: [PATCH 4/7] fix: button kind in DeleteStaticLeaseModal

---
 src/components/standalone/dns_dhcp/DeleteStaticLeaseModal.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/standalone/dns_dhcp/DeleteStaticLeaseModal.vue b/src/components/standalone/dns_dhcp/DeleteStaticLeaseModal.vue
index d309c6240..83f189cca 100644
--- a/src/components/standalone/dns_dhcp/DeleteStaticLeaseModal.vue
+++ b/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()"

From ee861a76028f4125f6dc1e9d6ca9208790107142 Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andre8244@gmail.com>
Date: Thu, 11 Apr 2024 15:28:33 +0200
Subject: [PATCH 5/7] fix: width of unit terminal

---
 src/views/controller/UnitTerminalView.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/views/controller/UnitTerminalView.vue b/src/views/controller/UnitTerminalView.vue
index ec4b7c871..63c85411b 100644
--- a/src/views/controller/UnitTerminalView.vue
+++ b/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

From 779061d1273589d57eeb4397723c7c0d71a34913 Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andre8244@gmail.com>
Date: Thu, 11 Apr 2024 17:11:21 +0200
Subject: [PATCH 6/7] feat: show a warning if using default hostname

---
 public/i18n/en/translation.json               |  7 ++--
 .../controller/units/UnitsTable.vue           |  6 +---
 .../standalone/dashboard/SystemInfoCard.vue   | 34 +++++++++++++++++--
 .../system_settings/GeneralSettings.vue       |  9 +++++
 .../CreateOrEditDatabaseDrawer.vue            |  2 +-
 5 files changed, 48 insertions(+), 10 deletions(-)

diff --git a/public/i18n/en/translation.json b/public/i18n/en/translation.json
index 55e796af7..1c4ebcb24 100644
--- a/public/i18n/en/translation.json
+++ b/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",
diff --git a/src/components/controller/units/UnitsTable.vue b/src/components/controller/units/UnitsTable.vue
index 70a686935..cdc5c0afc 100644
--- a/src/components/controller/units/UnitsTable.vue
+++ b/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>
diff --git a/src/components/standalone/dashboard/SystemInfoCard.vue b/src/components/standalone/dashboard/SystemInfoCard.vue
index d671f4ab6..b72bac712 100644
--- a/src/components/standalone/dashboard/SystemInfoCard.vue
+++ b/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>
diff --git a/src/components/standalone/system_settings/GeneralSettings.vue b/src/components/standalone/system_settings/GeneralSettings.vue
index 563473279..7e56fa446 100644
--- a/src/components/standalone/system_settings/GeneralSettings.vue
+++ b/src/components/standalone/system_settings/GeneralSettings.vue
@@ -34,6 +34,7 @@ let timezone = ref('')
 let timezoneRef = ref()
 let timezones = ref([])
 let systemConfig: any = ref({})
+let hostnameFromConfig = ref('')
 
 let loading = ref({
   systemConfig: true,
@@ -107,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) {
@@ -246,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')"
diff --git a/src/components/standalone/users_database/CreateOrEditDatabaseDrawer.vue b/src/components/standalone/users_database/CreateOrEditDatabaseDrawer.vue
index a6c5bb6f4..e2456d29f 100644
--- a/src/components/standalone/users_database/CreateOrEditDatabaseDrawer.vue
+++ b/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

From f4daa21e0558946929182cf11b48a79691236c8f Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andre8244@gmail.com>
Date: Fri, 12 Apr 2024 09:59:43 +0200
Subject: [PATCH 7/7] chore: bump 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 dc964d046..46c3ea862 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,7 +18,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",
@@ -1315,9 +1315,9 @@
       }
     },
     "node_modules/@nethesis/vue-components": {
-      "version": "0.13.2",
-      "resolved": "https://registry.npmjs.org/@nethesis/vue-components/-/vue-components-0.13.2.tgz",
-      "integrity": "sha512-Wtcx5eG+l7bbXSOB+cLJIw+xdO2pDaJ+fJfdV+q7HbJMlFu3nh82axWAGEgP5DZKXSunGZM0+2pBt6pqdF+TFg==",
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/@nethesis/vue-components/-/vue-components-0.14.0.tgz",
+      "integrity": "sha512-stptq5fVkCpDCm9fIyK4O8wvr7bIitzJE7a+vgkEYVZQmRgGjmguJbuhutdqeR17rAu5KpWM+e0WggFHXPyV3A==",
       "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 f853c3de0..a283f5842 100644
--- a/package.json
+++ b/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",