adminforth 4.5.0 → 4.6.0

package/dist/spa/package-lock.json

@@ -50,7 +50,6 @@
         "eslint": "^8.57.0",
         "eslint-plugin-vue": "^9.23.0",
         "flag-icons": "^7.2.3",
-        "flowbite": "^3.1.2",
         "i18n-iso-countries": "^7.12.0",
         "npm-run-all2": "^9.0.2",
         "portfinder": "^1.0.32",
@@ -3111,19 +3110,6 @@
       "dev": true,
       "license": "ISC"
     },
-    "node_modules/flowbite": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/flowbite/-/flowbite-3.1.2.tgz",
-      "integrity": "sha512-MkwSgbbybCYgMC+go6Da5idEKUFfMqc/AmSjm/2ZbdmvoKf5frLPq/eIhXc9P+rC8t9boZtUXzHDgt5whZ6A/Q==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@popperjs/core": "^2.9.3",
-        "flowbite-datepicker": "^1.3.1",
-        "mini-svg-data-uri": "^1.4.3",
-        "postcss": "^8.5.1"
-      }
-    },
     "node_modules/flowbite-datepicker": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/flowbite-datepicker/-/flowbite-datepicker-1.3.2.tgz",

package/dist/spa/package.json

@@ -55,7 +55,6 @@
     "eslint": "^8.57.0",
     "eslint-plugin-vue": "^9.23.0",
     "flag-icons": "^7.2.3",
-    "flowbite": "^3.1.2",
     "i18n-iso-countries": "^7.12.0",
     "npm-run-all2": "^9.0.2",
     "portfinder": "^1.0.32",

package/dist/spa/pnpm-lock.yaml

@@ -129,9 +129,6 @@ importers:
       flag-icons:
         specifier: ^7.2.3
         version: 7.5.0
-      flowbite:
-        specifier: ^3.1.2
-        version: 3.1.2(rollup@4.60.2)
       i18n-iso-countries:
         specifier: ^7.12.0
         version: 7.14.0
@@ -1308,9 +1305,6 @@ packages:
   flowbite@2.5.2:
     resolution: {integrity: sha512-kwFD3n8/YW4EG8GlY3Od9IoKND97kitO+/ejISHSqpn3vw2i5K/+ZI8Jm2V+KC4fGdnfi0XZ+TzYqQb4Q1LshA==}
 
-  flowbite@3.1.2:
-    resolution: {integrity: sha512-MkwSgbbybCYgMC+go6Da5idEKUFfMqc/AmSjm/2ZbdmvoKf5frLPq/eIhXc9P+rC8t9boZtUXzHDgt5whZ6A/Q==}
-
   fraction.js@5.3.4:
     resolution: {integrity: sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==}
 
@@ -3263,15 +3257,6 @@ snapshots:
     transitivePeerDependencies:
       - rollup
 
-  flowbite@3.1.2(rollup@4.60.2):
-    dependencies:
-      '@popperjs/core': 2.11.8
-      flowbite-datepicker: 1.3.2(rollup@4.60.2)
-      mini-svg-data-uri: 1.4.4
-      postcss: 8.5.30
-    transitivePeerDependencies:
-      - rollup
-
   fraction.js@5.3.4: {}
 
   fs.realpath@1.0.0: {}

package/dist/spa/src/afcl/DialogPanel.vue

@@ -0,0 +1,108 @@
+<template>
+  <div v-bind="restAttrs" :class="rootClasses">
+    <div :class="mergeClasses(
+      'afcl-dialog-panel-header flex items-center gap-3.5 border-b border-lightDialogBreakLine py-5 pl-6 dark:border-darkDialogBreakLine',
+      closable ? 'pr-4' : 'pr-6',
+      classes.header,
+    )">
+      <div
+        v-if="$slots.icon"
+        :class="mergeClasses(
+          'afcl-dialog-panel-icon flex w-10 h-10 shrink-0 items-center justify-center rounded-lg [&>svg]:w-5 [&>svg]:h-5',
+          'bg-lightPrimary/10 text-lightPrimary dark:bg-darkPrimary/20 dark:text-darkPrimary',
+          classes.icon,
+        )"
+      >
+        <slot name="icon" />
+      </div>
+      <div :class="mergeClasses('afcl-dialog-panel-title-wrap flex-1 min-w-0', classes.titleWrap)">
+        <slot name="title">
+          <h2 :class="mergeClasses('afcl-dialog-panel-title break-words text-lg leading-6 font-semibold text-lightDialogHeaderText dark:text-darkDialogHeaderText', classes.title)">{{ title }}</h2>
+          <p v-if="subtitle" :class="mergeClasses('afcl-dialog-panel-subtitle mt-0.5 text-sm leading-5 text-lightInputIconColor dark:text-darkInputIconColor', classes.subtitle)">{{ subtitle }}</p>
+        </slot>
+      </div>
+      <Button
+        v-if="closable"
+        type="button"
+        variant="ghost"
+        size="sm"
+        iconOnly
+        :aria-label="$t('Close')"
+        :class="mergeClasses(
+          'afcl-dialog-panel-close text-lightDialogCloseButton hover:text-lightDialogCloseButtonHover hover:bg-lightDialogCloseButtonHoverBackground',
+          'dark:text-darkDialogCloseButton dark:hover:text-darkDialogCloseButtonHover dark:hover:bg-darkDialogCloseButtonHoverBackground',
+          classes.close,
+        )"
+        @click="emit('close')"
+      >
+        <IconX aria-hidden="true" />
+      </Button>
+    </div>
+
+    <div :class="mergeClasses('afcl-dialog-panel-body flex flex-col gap-4 px-6 pt-5 pb-6', classes.body)">
+      <slot />
+      <p v-if="error" role="alert" :class="mergeClasses('afcl-dialog-panel-error -mt-1 flex items-center gap-1.5 text-sm text-lightDanger dark:text-darkDanger', classes.error)">
+        <IconCircleAlert class="w-4 h-4 shrink-0" aria-hidden="true" />
+        {{ error }}
+      </p>
+    </div>
+
+    <!-- a main action on the right, a secondary one may sit on the left with ms-0 me-auto -->
+    <div
+      v-if="$slots.footer"
+      :class="mergeClasses(
+        'afcl-dialog-panel-footer flex flex-wrap items-center justify-end gap-x-3 gap-y-2 border-t border-lightDialogBreakLine bg-lightFormHeading py-3 pl-6 pr-5',
+        'dark:border-darkDialogBreakLine dark:bg-darkFormHeading',
+        classes.footer,
+      )"
+    >
+      <slot name="footer" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, useAttrs } from 'vue';
+import { type ClassNameValue } from 'tailwind-merge';
+import { IconCircleAlert, IconX } from '@iconify-prerendered/vue-lucide';
+import { mergeClasses } from './classMerge';
+import Button from './Button.vue';
+
+type DialogPanelPart = 'header' | 'icon' | 'titleWrap' | 'title' | 'subtitle' | 'close' | 'body' | 'error' | 'footer';
+
+defineOptions({ inheritAttrs: false });
+
+withDefaults(defineProps<{
+  title?: string,
+  subtitle?: string,
+  error?: string | null,
+  // shows a close button in the header which emits close
+  closable?: boolean,
+  // extra classes for the parts, e.g. the af-* classes apps restyle a screen by
+  classes?: Partial<Record<DialogPanelPart, ClassNameValue>>,
+}>(), {
+  title: '',
+  subtitle: '',
+  error: null,
+  closable: false,
+  classes: () => ({}),
+});
+
+const emit = defineEmits<{
+  (e: 'close'): void,
+}>();
+
+const attrs = useAttrs();
+const restAttrs = computed(() => {
+  const { class: _class, ...rest } = attrs;
+  return rest;
+});
+
+// a panel on the page is drawn like other surfaces: a hairline border and the light shadow of controls,
+// a panel which floats over the page (in a modal) passes shadow-popover
+const rootClasses = computed(() => mergeClasses(
+  'afcl-dialog-panel relative flex flex-col w-full max-w-md overflow-hidden rounded-xl border shadow-customLight',
+  'border-lightDialogBreakLine bg-lightDialogBackgorund dark:border-darkDialogBreakLine dark:bg-darkDialogBackgorund',
+  attrs.class as ClassNameValue,
+));
+</script>

package/dist/spa/src/afcl/Input.vue

@@ -11,19 +11,39 @@
     <input
       ref="input"
       v-bind="$attrs"
-      :type="type"
+      :type="passwordToggle && revealed ? 'text' : type"
       @input="$emit('update:modelValue', type === 'number' ? numberInputValue(($event.target as HTMLInputElement)?.value) : ($event.target as HTMLInputElement)?.value)"
       :value="modelValue"
       aria-describedby="helper-text-explanation"
-      class="afcl-input  inline-flex bg-lightInputBackground text-lightInputText dark:text-darkInputText border border-lightInputBorder rounded-0 shadow-customLight hover:border-lightInputBorderHover focus:outline-none focus:ring-[3px] focus:ring-lightInputFocusRing focus:border-lightInputFocusBorder dark:hover:border-darkInputBorderHover dark:focus:ring-darkInputFocusRing dark:focus:border-darkInputFocusBorder 
-      block w-20 px-2.5 py-1.5 leading-5 dark:bg-darkInputBackground dark:border-darkInputBorder placeholder-lightInputPlaceholderText dark:placeholder-darkInputPlaceholderText dark:text-darkInputText translate-y-0 transition-colors disabled:cursor-not-allowed"
-      :class="{'rounded-l-default': !$slots.prefix && !prefix, 'rounded-r-default': !$slots.suffix && !suffix, 'w-full': fullWidth, 'text-base': isIos, 'text-sm': !isIos, 'pr-10': $slots.rightIcon }"
+      :aria-invalid="invalid || undefined"
+      class="afcl-input  inline-flex bg-lightInputBackground text-lightInputText dark:text-darkInputText border rounded-0 shadow-customLight focus:outline-none focus:ring-[3px]
+      block w-20 px-2.5 py-1.5 leading-5 dark:bg-darkInputBackground placeholder-lightInputPlaceholderText dark:placeholder-darkInputPlaceholderText dark:text-darkInputText translate-y-0 transition-colors disabled:cursor-not-allowed"
+      :class="[
+        invalid
+          ? 'border-lightDanger focus:border-lightDanger focus:ring-lightDanger/20 dark:border-darkDanger dark:focus:border-darkDanger dark:focus:ring-darkDanger/30'
+          : 'border-lightInputBorder hover:border-lightInputBorderHover focus:ring-lightInputFocusRing focus:border-lightInputFocusBorder dark:border-darkInputBorder dark:hover:border-darkInputBorderHover dark:focus:ring-darkInputFocusRing dark:focus:border-darkInputFocusBorder',
+        {'rounded-l-default': !$slots.prefix && !prefix, 'rounded-r-default': !$slots.suffix && !suffix, 'w-full': fullWidth, 'text-base': isIos, 'text-sm': !isIos, 'pr-10': $slots.rightIcon || passwordToggle },
+      ]"
       :disabled="readonly"
     >
 
     <div v-if="$slots.rightIcon" class="absolute inset-y-0 right-0 pr-3 flex items-center">
         <slot name="rightIcon" />
     </div>
+    <div v-else-if="passwordToggle" class="absolute inset-y-0 right-0 pr-1 flex items-center">
+      <Button
+        type="button"
+        variant="ghost"
+        size="sm"
+        iconOnly
+        class="afcl-input-password-toggle"
+        :aria-label="revealed ? $t('Hide password') : $t('Show password')"
+        @click="revealed = !revealed"
+      >
+        <IconEyeOff v-if="revealed" aria-hidden="true" />
+        <IconEye v-else aria-hidden="true" />
+      </Button>
+    </div>
     <span
         v-if="$slots.suffix || suffix"
         class="inline-flex items-center px-2.5 text-sm text-lightInputIconColor bg-lightSecondaryDarken border border-s-0 border-lightInputBorder rounded-e-default dark:bg-darkSecondaryLighten dark:text-darkInputIconColor dark:border-darkInputBorder ">
@@ -36,8 +56,10 @@
 <script setup lang="ts">
 
 import { ref } from 'vue';
+import { IconEye, IconEyeOff } from '@iconify-prerendered/vue-lucide';
 import { useCoreStore } from '@/stores/core';
 import { numberInputValue } from './inputValue';
+import Button from './Button.vue';
 
 const coreStore = useCoreStore();
 const isIos = coreStore.isIos;
@@ -49,9 +71,14 @@ const props = defineProps<{
   suffix?: string,
   prefix?: string,
   readonly?: boolean,
+  // paints the border red, e.g. for a value which did not pass validation
+  invalid?: boolean,
+  // for type="password": a button on the right shows and hides the value
+  passwordToggle?: boolean,
 }>()
 
 const input = ref<HTMLInputElement | null>(null)
+const revealed = ref(false)
 
 defineExpose({
   focus: () => input.value?.focus(),

package/dist/spa/src/afcl/Tooltip.vue

@@ -1,87 +1,111 @@
 <template>
-  <div ref="triggerEl" class="afcl-tooltip inline-flex items-center" @mouseenter="mouseOn" @mouseleave="mouseOff">
+  <div ref="triggerEl" class="afcl-tooltip inline-flex items-center" :style="{ anchorName }" @mouseenter="show" @mouseleave="hide">
       <slot></slot>
   </div>
-  <teleport to="body" v-if="showTooltip">
+  <teleport to="body" v-if="isOpen">
     <div
+      ref="tooltipEl"
+      popover="manual"
       role="tooltip"
-      class="absolute z-[100] invisible inline-block px-2.5 py-1.5 text-xs font-medium text-lightTooltipText dark:text-darkTooltipText transition-opacity duration-150 bg-lightTooltipBackground rounded-md shadow-popover opacity-0 tooltip dark:bg-darkTooltipBackground dark:shadow-darkPopover"
-      ref="tooltip"
+      :data-placement="placement"
+      :style="{ positionAnchor: anchorName }"
+      class="afcl-tooltip-popover inline-block px-2.5 py-1.5 text-xs font-medium text-lightTooltipText dark:text-darkTooltipText transition-opacity duration-150 bg-lightTooltipBackground rounded-md shadow-popover dark:bg-darkTooltipBackground dark:shadow-darkPopover"
     >
       <slot name="tooltip"></slot>
-      <div class="tooltip-arrow" data-popper-arrow></div>
+      <div class="afcl-tooltip-arrow" :style="{ left: `${arrowLeft}px` }"></div>
     </div>
   </teleport>
 </template>
 
 <script setup lang="ts">
-import { ref, nextTick, type Ref } from 'vue';
-import { Tooltip } from 'flowbite';
+import { ref, nextTick, onBeforeUnmount, useId } from 'vue';
 
-const triggerEl = ref(null);
-const tooltip = ref(null);
-const showTooltip = ref(false);
-const tp: Ref<Tooltip|null> = ref(null);
+const OFFSET = 8;
+const SUPPORTS_ANCHOR = CSS.supports('anchor-name: --a');
 
-async function mouseOn() {
-  showTooltip.value = true;
+const anchorName = `--afcl-tooltip-${useId()}`;
+const triggerEl = ref<HTMLElement>();
+const tooltipEl = ref<HTMLElement>();
+const isOpen = ref(false);
+const placement = ref<'top' | 'bottom'>('bottom');
+const arrowLeft = ref(0);
+
+async function show() {
+  isOpen.value = true;
   await nextTick();
+  tooltipEl.value!.showPopover();
 
-  tp.value?.destroy();
+  const trigger = triggerEl.value!.getBoundingClientRect();
+  if (!SUPPORTS_ANCHOR) {
+    placeByRect(trigger);
+  }
+  const tooltip = tooltipEl.value!.getBoundingClientRect();
+  placement.value = tooltip.top < trigger.top ? 'top' : 'bottom';
+  arrowLeft.value = trigger.left + trigger.width / 2 - tooltip.left;
 
-  tp.value = new Tooltip(
-    tooltip.value,
-    triggerEl.value,
-    {
-      placement: 'bottom',
-      triggerType: 'hover',
-    },
-  );
+  document.addEventListener('keydown', onKeydown);
+}
 
-  tp.value.show();
+function hide() {
+  isOpen.value = false;
+  document.removeEventListener('keydown', onKeydown);
 }
 
-function mouseOff() {
-  tp.value?.hide();
-  tp.value?.destroy();
-  tp.value = null;
-  showTooltip.value = false;
+function onKeydown(e: KeyboardEvent) {
+  if (e.key === 'Escape') {
+    hide();
+  }
 }
 
+// Safari before 26 and Firefox before 147 have no CSS anchor positioning
+function placeByRect(trigger: DOMRect) {
+  const el = tooltipEl.value!;
+  const { width, height } = el.getBoundingClientRect();
+  const fitsBelow = trigger.bottom + OFFSET + height <= window.innerHeight;
+  const top = fitsBelow ? trigger.bottom + OFFSET : trigger.top - OFFSET - height;
+  const left = Math.min(Math.max(trigger.left + (trigger.width - width) / 2, 0), window.innerWidth - width);
+  el.style.top = `${top}px`;
+  el.style.left = `${left}px`;
+}
+
+onBeforeUnmount(hide);
 </script>
 
 <style>
-.tooltip .tooltip-arrow,
-.tooltip .tooltip-arrow::before {
-  position: absolute;
-  width: 8px;
-  height: 8px;
-  background: inherit;
-}
-
-.tooltip .tooltip-arrow {
-  visibility: hidden;
+/* popover puts the tooltip into the top layer, so no z-index and no clipping by overflow of the parents */
+.afcl-tooltip-popover {
+  inset: auto;
+  margin: 0;
+  overflow: visible;
 }
 
-.tooltip .tooltip-arrow::before {
-  visibility: visible;
-  content: '';
-  transform: rotate(45deg);
+@supports (anchor-name: --a) {
+  .afcl-tooltip-popover {
+    position-area: bottom;
+    position-try-fallbacks: flip-block;
+    margin-top: 8px;
+  }
 }
 
-.tooltip[data-popper-placement^='top'] > .tooltip-arrow {
-  bottom: -4px;
+@starting-style {
+  .afcl-tooltip-popover {
+    opacity: 0;
+  }
 }
 
-.tooltip[data-popper-placement^='bottom'] > .tooltip-arrow {
-  top: -4px;
+.afcl-tooltip-arrow {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background: inherit;
+  transform: translateX(-50%) rotate(45deg);
 }
 
-.tooltip[data-popper-placement^='left'] > .tooltip-arrow {
-  right: -4px;
+.afcl-tooltip-popover[data-placement='top'] > .afcl-tooltip-arrow {
+  bottom: -4px;
 }
 
-.tooltip[data-popper-placement^='right'] > .tooltip-arrow {
-  left: -4px;
+.afcl-tooltip-popover[data-placement='bottom'] > .afcl-tooltip-arrow {
+  top: -4px;
 }
-</style>
+</style>

package/dist/spa/src/afcl/index.ts

@@ -19,6 +19,7 @@ export { default as ProgressBar } from './ProgressBar.vue';
 export { default as Spinner } from './Spinner.vue';
 export { default as Skeleton } from './Skeleton.vue';
 export { default as Dialog } from './Dialog.vue';
+export { default as DialogPanel } from './DialogPanel.vue';
 export { default as MixedChart } from './MixedChart.vue';
 export { default as CountryFlag } from './CountryFlag.vue';
 export { default as JsonViewer } from './JsonViewer.vue';

package/dist/spa/src/views/ListView.vue

@@ -35,7 +35,6 @@
       <template v-if="isResourceReady && checkboxes.length" #selection>
         <Button
           @click="()=>{checkboxes = []}"
-          data-tooltip-target="tooltip-remove-all"
           variant="secondary"
           iconOnly
         >

package/dist/spa/src/views/LoginView.vue

@@ -32,11 +32,15 @@
       class="af-login-modal overflow-y-auto flex flex-grow
       overflow-x-hidden z-50 min-w-[350px]  justify-center items-center md:inset-0 h-[calc(100%-1rem)] max-h-full">
         <div class="relative p-4 w-full max-h-full max-w-[400px]">
-            <!-- Modal content -->
-            <div class="af-login-popup af-login-modal-content relative bg-lightLoginViewBackground rounded-default shadow dark:bg-darkLoginViewBackground dark:shadow-black" :class=" { 'rounded-b-none  overflow-hidden': error } ">
-                <!-- Modal header -->
-                <div class="af-login-modal-header flex items-center justify-between flex-col p-4 md:p-5 border-b rounded-t dark:border-gray-600">
-
+            <DialogPanel
+              class="af-login-popup af-login-modal-content max-w-none bg-lightLoginViewBackground dark:bg-darkLoginViewBackground"
+              :error="error"
+              :classes="{
+                header: 'af-login-modal-header',
+                body: 'af-login-modal-body',
+              }"
+            >
+                <template #title>
                     <template v-if="coreStore?.config?.loginPageInjections?.panelHeader.length  && coreStore?.config?.loginPageInjections?.panelHeader.length > 0">
                       <component 
                         v-for="(c, index) in coreStore?.config?.loginPageInjections?.panelHeader || []"
@@ -46,15 +50,13 @@
                         @update:setLoginParam="setLoginParam"
                       />
                     </template>
-                    <h3 v-else class="text-xl font-semibold text-lightLoginViewText dark:text-darkLoginViewTextColor">
+                    <p v-else class="text-lg leading-6 font-semibold text-lightLoginViewTextColor dark:text-darkLoginViewTextColor">
                       {{ $t('Sign in to') }} {{ coreStore.config?.brandName }}
-                    </h3>
-                </div>
-                <!-- Modal body -->
-                <div class="af-login-modal-body p-4 md:p-5">
-                    <form class="space-y-4" @submit.prevent>
+                    </p>
+                </template>
+                <form class="space-y-4" @submit.prevent>
                         <div>
-                            <label for="username" class="block mb-2 text-sm font-medium text-lightLoginViewText dark:text-darkLoginViewTextColor">{{ $t('Your') }} {{ coreStore.config?.usernameFieldName?.toLowerCase() }}</label>
+                            <label for="username" class="block mb-2 text-sm font-medium text-lightLoginViewTextColor dark:text-darkLoginViewTextColor">{{ $t('Your') }} {{ coreStore.config?.usernameFieldName?.toLowerCase() }}</label>
                             <Input 
                               v-model="username"
                               autocomplete="username"  
@@ -67,20 +69,13 @@
                               placeholder="name@company.com" required />
                         </div>
                         <div class="">
-                            <label for="password" class="block mb-2 text-sm font-medium text-lightLoginViewText dark:text-darkLoginViewTextColor">{{ $t('Your password') }}</label>
+                            <label for="password" class="block mb-2 text-sm font-medium text-lightLoginViewTextColor dark:text-darkLoginViewTextColor">{{ $t('Your password') }}</label>
                             <Input 
                               v-model="password"
                               ref="passwordInput"
                               autocomplete="current-password"
                               @keydown.enter="login"
-                              :type="!showPw ? 'password': 'text'" name="password" id="password" placeholder="••••••••" class="w-full" required>
-                              <template #rightIcon>
-                                <button type="button" @click="showPw = !showPw" class="text-lightLoginViewSubTextColor dark:text-darkLoginViewSubTextColor">
-                                  <IconEye class="w-4 h-4" v-if="!showPw" />
-                                  <IconEyeOff class="w-4 h-4" v-else />
-                                </button>
-                              </template>
-                            </Input>
+                              type="password" passwordToggle name="password" id="password" placeholder="••••••••" class="w-full" required />
                         </div>
 
                         <div v-if="coreStore?.config?.rememberMeDuration" 
@@ -123,10 +118,8 @@
                           @update:setLoginParam="setLoginParam"
                           @update:oauthRedirecting="oauthRedirecting = $event"
                         />
-                    </form>
-                </div>
-            </div>
-            <ErrorMessage v-if="error" :error="error" class="absolute left-4 right-4 rounded-t-none mb-0 shadow px-9" />
+                </form>
+            </DialogPanel>
         </div>
     </div> 
 
@@ -140,11 +133,10 @@ import { getCustomComponent, formatComponent } from '@/utils';
 import { onMounted, ref, computed } from 'vue';
 import { useCoreStore } from '@/stores/core';
 import { useUserStore } from '@/stores/user';
-import { IconEye, IconEyeOff, IconInfo } from '@iconify-prerendered/vue-lucide';
+import { IconInfo } from '@iconify-prerendered/vue-lucide';
 import { callAdminForthApi, loadFile } from '@/utils';
 import { useRouter, useRoute } from 'vue-router';
-import { Button, Checkbox, Input, Spinner } from '@/afcl';
-import ErrorMessage from '@/components/ErrorMessage.vue';
+import { Button, Checkbox, DialogPanel, Input, Spinner } from '@/afcl';
 
 const passwordInput = ref<InstanceType<typeof Input> | null>(null);
 const usernameInput = ref<InstanceType<typeof Input> | null>(null);
@@ -161,7 +153,6 @@ const isSuccess = ref<boolean>(false);
 const coreStore = useCoreStore();
 const user = useUserStore();
 
-const showPw = ref(false);
 
 const error = ref(null);
 const disableLoginButton = ref(false);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adminforth",
-  "version": "4.5.0",
+  "version": "4.6.0",
   "description": "OpenSource Agent-Native forth-generation admin panel",
   "keywords": [
     "adminforth",