@drax/identity-vue 0.11.3 → 0.11.5

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.11.3",
+  "version": "0.11.5",
   "type": "module",
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -24,12 +24,12 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "@drax/common-front": "^0.11.3",
-    "@drax/common-vue": "^0.11.3",
+    "@drax/common-front": "^0.11.5",
+    "@drax/common-vue": "^0.11.5",
     "@drax/crud-front": "^0.11.3",
-    "@drax/crud-share": "^0.11.3",
-    "@drax/crud-vue": "^0.11.3",
-    "@drax/identity-share": "^0.11.3"
+    "@drax/crud-share": "^0.11.5",
+    "@drax/crud-vue": "^0.11.5",
+    "@drax/identity-share": "^0.11.5"
   },
   "peerDependencies": {
     "pinia": "^2.2.2",
@@ -66,5 +66,5 @@
     "vue-tsc": "^2.1.6",
     "vuetify": "^3.7.1"
   },
-  "gitHead": "54216d94d68dac488969f9c95d3c6be780935f9d"
+  "gitHead": "e67f10f0af29468c9d30f16135cfdbdff166d916"
 }

package/src/cruds/role-crud/RoleCrud.ts

@@ -73,7 +73,7 @@ class RoleCrud extends EntityCrud implements IEntityCrud {
   }
 
   get exportHeaders(){
-    return ['_id', 'name','permissions','childRoles','readonly']
+    return ['id', 'name','permissions','childRoles','readonly']
   }
 
   get isExportable(){

package/src/cruds/role-crud/RoleForm.vue

@@ -51,7 +51,7 @@ const {
       <template v-if="!valueModel.readonly || store.operation == 'view'">
 
 
-        <v-card-subtitle v-if="valueModel._id">ID: {{ valueModel._id }}</v-card-subtitle>
+        <v-card-subtitle v-if="valueModel.id">ID: {{ valueModel.id }}</v-card-subtitle>
 
         <v-card-text v-if="store.error">
           <v-alert color="error">{{ te(store.error) ? t(store.error) : store.error }}</v-alert>

package/src/cruds/tenant-crud/TenantCrud.ts

@@ -70,7 +70,7 @@ class TenantCrud extends EntityCrud implements IEntityCrud {
   }
 
   get exportHeaders(){
-    return ['_id', 'name']
+    return ['id', 'name']
   }
 
   get isExportable(){
@@ -81,6 +81,10 @@ class TenantCrud extends EntityCrud implements IEntityCrud {
     return false
   }
 
+  get dialogMaxWidth(){
+    return '800'
+  }
+
 }
 
 export default TenantCrud

package/src/cruds/user-api-key-crud/UserApiKeyCreated.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import {useCopy} from "@drax/common-vue";
+import {useI18n} from "vue-i18n";
+import {defineModel, type PropType} from "vue";
+import type {IUserApiKey} from "@drax/identity-share";
+
+const {t} = useI18n()
+
+const {copy} = useCopy()
+
+defineProps({
+  userApiKey: {type: Object as PropType<IUserApiKey>, required: true},
+})
+
+const dialog = defineModel<boolean>({
+  type: Boolean
+})
+
+</script>
+
+<template>
+
+  <v-dialog v-model="dialog" max-width="800" persistent>
+    <v-sheet border>
+      <v-toolbar>
+        <v-toolbar-title>{{t('userapikey.created')}}</v-toolbar-title>
+      </v-toolbar>
+      <v-card>
+
+        <v-card-title class="my-3 text-center">{{userApiKey.name}}</v-card-title>
+
+        <v-card-text>
+        <v-text-field
+            label="API KEY"
+            v-model="userApiKey.secret"
+            color="success"
+            base-color="success"
+            variant="outlined"
+            @click:append="copy(userApiKey.secret)"
+            :hint="t('userapikey.secretWarning')"
+            persistent-hint readonly
+        >
+          <template v-slot:append>
+            <v-btn icon class="text-success" @click="copy(userApiKey.secret)">
+              <v-icon>mdi mdi-content-copy</v-icon>
+            </v-btn>
+          </template>
+
+        </v-text-field>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn @click="dialog = false">{{ t('action.close') }}</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-sheet>
+  </v-dialog>
+
+</template>
+
+<style scoped>
+
+</style>

package/src/cruds/user-api-key-crud/UserApiKeyCrud.ts

@@ -0,0 +1,94 @@
+
+import {EntityCrud} from "@drax/crud-vue";
+import {UserApiKeySystemFactory} from "@drax/identity-front";
+import type {IEntityCrud, IEntityCrudField, IEntityCrudFilter, IEntityCrudHeader} from "@drax/crud-share";
+
+
+class UserApiKeyCrud extends EntityCrud implements IEntityCrud {
+
+  static singleton: UserApiKeyCrud
+
+  constructor() {
+    super();
+    this.name = 'userApiKey'
+  }
+
+  static get instance(): UserApiKeyCrud {
+    if(!UserApiKeyCrud.singleton){
+      UserApiKeyCrud.singleton = new UserApiKeyCrud()
+    }
+    return UserApiKeyCrud.singleton
+  }
+
+  get permissions(){
+    return {
+      manage: 'userApiKey:manage',
+      view: 'userApiKey:viewMy',
+      create: 'userApiKey:createMy',
+      update: 'userApiKey:update',
+      delete: 'userApiKey:delete'
+    }
+  }
+
+  get headers():IEntityCrudHeader[] {
+    return [
+        //{title: 'id',key:'_id', align: 'start'},
+        {title: 'user',key:'user', align: 'start'},
+        {title: 'name',key:'name', align: 'start'},
+        {title: 'ipv4',key:'ipv4', align: 'start'},
+        {title: 'ipv6',key:'ipv6', align: 'start'},
+      //  {title: 'createdBy',key:'createdBy', align: 'start'},
+        {title: 'createdAt',key:'createdAt', align: 'start'},
+    ]
+  }
+
+  get provider(){
+    return UserApiKeySystemFactory.getInstance()
+  }
+
+  get refs(){
+    return {
+
+    }
+  }
+
+  get rules(){
+    return {
+      name: [(v: any) => !!v || 'Requerido']
+    }
+  }
+
+  get fields(): IEntityCrudField[]{
+    return [
+        {name: 'name', type: 'string', label: 'name', default:'', prependInnerIcon:'mdi-text-short'  },
+        {name: 'ipv4', type: 'string', label: 'name', default:[], prependInnerIcon:'mdi-text-short'  },
+        {name: 'ipv6', type: 'string', label: 'name', default:[], prependInnerIcon:'mdi-text-short'  },
+    ]
+  }
+
+  get filters():IEntityCrudFilter[]{
+    return [
+
+    ]
+  }
+
+  get dialogFullscreen(){
+    return false
+  }
+
+  get exportHeaders(){
+    return ['id', 'name']
+  }
+
+  get isExportable(){
+    return false
+  }
+
+  get isImportable(){
+    return false
+  }
+
+}
+
+export default UserApiKeyCrud
+export { UserApiKeyCrud }

package/src/cruds/user-api-key-crud/UserApiKeyForm.vue

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import {useFormUtils, useCrudStore} from "@drax/crud-vue";
+import {defineEmits, defineModel, ref} from "vue";
+import {useI18nValidation} from "@drax/common-vue";
+import PermissionSelector from "../../components/PermissionSelector/PermissionSelector.vue";
+import RoleCombobox from "../../combobox/RoleCombobox.vue";
+import {useI18n} from "vue-i18n";
+
+const {$ta} = useI18nValidation()
+const {t, te} = useI18n()
+
+const valueModel = defineModel({type: [Object]})
+
+const emit = defineEmits(['submit', 'cancel'])
+
+const store = useCrudStore()
+
+const valid = ref()
+const formRef = ref()
+
+
+async function submit() {
+  store.resetErrors()
+  await formRef.value.validate()
+  if (valid.value) {
+    emit('submit', valueModel.value)
+  } else {
+    console.log('Invalid form')
+  }
+}
+
+function cancel() {
+  emit('cancel')
+}
+
+const {
+  variant, submitColor, readonly
+} = useFormUtils(store.operation)
+
+
+const ipv6Regex = /(([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))/
+const ipv4Regex = /^((25[0-5]|(2[0-4]|1\d|[1-9]|)\d)\.?\b){4}$/
+
+const ipv4Address = [
+  (v: string[]) => !v.some(ip => !ipv4Regex.test(ip)) || t('validation.invalidIpv4'),
+]
+
+const ipv6Address = [
+  (v: string[]) => !v.some(ip => !ipv6Regex.test(ip))  || t('validation.invalidIpv6'),
+]
+
+</script>
+
+<template>
+
+
+  <v-form v-model="valid" ref="formRef" @submit.prevent="submit">
+    <v-card flat>
+
+      <template v-if="!valueModel.readonly || store.operation == 'view'">
+
+
+        <v-card-subtitle v-if="valueModel._id">ID: {{ valueModel._id }}</v-card-subtitle>
+
+        <v-card-text v-if="store.error">
+          <v-alert color="error">{{ te(store.error) ? t(store.error) : store.error }}</v-alert>
+        </v-card-text>
+
+        <v-card-text>
+          <v-text-field
+              variant="outlined"
+              id="name-input"
+              :label="t('userapikey.field.name')"
+              v-model="valueModel.name"
+              prepend-inner-icon="mdi-card-account-details"
+              required
+              :error-messages="$ta(store.inputErrors?.name)"
+          ></v-text-field>
+
+          <v-combobox
+              v-model="valueModel.ipv4 as string[]"
+              :label="t('userapikey.field.ipv4')"
+              variant="outlined"
+              multiple chips
+              validate-on="blur"
+              :rules="ipv4Address"
+              :error-messages="$ta(store.inputErrors?.ipv4)"
+          ></v-combobox>
+
+          <v-combobox
+              v-model="valueModel.ipv6 as string[]"
+              :label="t('userapikey.field.ipv6')"
+              variant="outlined"
+              multiple chips
+              validate-on="blur"
+              :rules="ipv6Address"
+              :error-messages="$ta(store.inputErrors?.ipv6)"
+          ></v-combobox>
+
+
+        </v-card-text>
+      </template>
+
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn
+            variant="text"
+            color="grey"
+            @click="cancel">
+          {{ t('action.cancel') }}
+        </v-btn>
+        <v-btn
+            v-if="!valueModel.readonly && store.operation != 'view'"
+            variant="flat"
+            :color="submitColor"
+            @click="submit"
+        >
+          {{ store.operation ? t('action.' + store.operation) : t('action.sent') }}
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-form>
+</template>
+
+<style scoped>
+
+</style>

package/src/cruds/user-crud/UserCrud.ts

@@ -92,7 +92,7 @@ class UserCrud extends EntityCrud implements IEntityCrud {
   }
 
   get exportHeaders(){
-    return ['_id', 'name','username','email','phone','role.name','tenant.name','active']
+    return ['id', 'name','username','email','phone','role.name','tenant.name','active']
   }
 
   get exportFormats(){

package/src/index.ts

@@ -19,10 +19,9 @@ import TenantView from "./views/TenantView.vue";
 import TenantCrudPage from "./pages/crud/TenantCrudPage.vue";
 
 
-import UserApiKeyForm from "./forms/UserApiKeyForm.vue";
+import UserApiKeyForm from "./cruds/user-api-key-crud/UserApiKeyForm.vue";
+import UserApiKeyCreated from "./cruds/user-api-key-crud/UserApiKeyCreated.vue";
 import UserApiKeyView from "./views/UserApiKeyView.vue";
-import UserApiKeyCrud from "./cruds/user-api-key-crud/UserApiKeyCrud.vue";
-import UserApiKeyList from "./cruds/user-api-key-crud/UserApiKeyList.vue";
 import UserApiKeyCrudPage from "./pages/crud/UserApiKeyCrudPage.vue";
 
 import {useAuth} from "./composables/useAuth.js";
@@ -83,8 +82,7 @@ export {
     //UserApiKey
     UserApiKeyView,
     UserApiKeyForm,
-    UserApiKeyCrud,
-    UserApiKeyList,
+    UserApiKeyCreated,
     UserApiKeyCrudPage,
     useUserApiKey,
 

package/src/pages/crud/UserApiKeyCrudPage.vue

@@ -1,10 +1,79 @@
 <script setup lang="ts">
 
-import UserApiKeyCrud from "../../cruds/user-api-key-crud/UserApiKeyCrud.vue";
+import UserApiKeyCrud from "../../cruds/user-api-key-crud/UserApiKeyCrud";
+import UserApiKeyForm from "../../cruds/user-api-key-crud/UserApiKeyForm.vue";
+import {Crud, useCrud} from "@drax/crud-vue";
+import type {IUserApiKey} from "@drax/identity-share";
+import {formatDateTime} from "@drax/common-front";
+import UserApiKeyCreated from "../../cruds/user-api-key-crud/UserApiKeyCreated.vue";
+import {ref} from "vue";
+
+const {
+  onCancel, onSubmit,form
+} = useCrud(UserApiKeyCrud.instance);
+
+const userApiKeyCreated = ref<IUserApiKey>();
+const userApiKeyCreatedDialog = ref<boolean>(false);
+
+async function submit() {
+  let result = await onSubmit(form.value)
+  if(result.status === 'created'){
+    onCreated(result.item);
+  }
+}
+
+function onCreated(item:IUserApiKey) {
+  console.log("User API Key created:", item);
+  userApiKeyCreated.value = item;
+  userApiKeyCreatedDialog.value = true;
+}
+
 </script>
 
 <template>
-<UserApiKeyCrud></UserApiKeyCrud>
+  <div>
+    <user-api-key-created
+        v-if="userApiKeyCreated"
+        :user-api-key="userApiKeyCreated"
+        v-model="userApiKeyCreatedDialog"
+    />
+
+  <crud :entity="UserApiKeyCrud.instance" @created="onCreated">
+
+    <template v-slot:form>
+      <user-api-key-form
+          v-model="form"
+          @submit="submit"
+          @cancel="onCancel"
+      />
+    </template>
+
+    <template v-slot:item.ipv4="{ value }" >
+      <v-chip v-for="(ip,index) in value" :key="index">{{ip}}</v-chip>
+    </template>
+
+    <template v-slot:item.ipv6="{ value }" >
+      <v-chip v-for="(ip,index) in value" :key="index">{{ip}}</v-chip>
+    </template>
+
+    <template v-slot:item.createdAt="{ value }" >
+      {{formatDateTime(value)}}
+    </template>
+
+    <template v-slot:item.createdBy="{ value }" >
+      {{value ? value.name : 'Unknown' }}
+    </template>
+
+
+    <template v-slot:item.user="{ value }" >
+      {{value.username }}
+    </template>
+
+  </crud>
+
+  </div>
+
+
 </template>
 
 <style scoped>

package/src/cruds/user-api-key-crud/UserApiKeyCrud.vue

@@ -1,204 +0,0 @@
-<script setup lang="ts">
-import {computed, ref} from 'vue'
-import UserApiKeyList from "./UserApiKeyList.vue";
-import {useUserApiKey} from "../../composables/useUserApiKey";
-import type {IUserApiKey, IUserApiKeyBase} from "@drax/identity-share";
-import {useCopy} from "@drax/common-vue";
-import UserApiKeyForm from "../../forms/UserApiKeyForm.vue";
-import UserApiKeyView from "../../views/UserApiKeyView.vue";
-import {useI18n} from "vue-i18n";
-const {t} = useI18n()
-const {createUserApiKey, editUserApiKey, deleteUserApiKey, loading, userApiKeyError, inputErrors} = useUserApiKey()
-
-
-const {copy} = useCopy()
-
-interface UserApiKeyList {
-  loadItems: () => void;
-  items: IUserApiKey[];
-}
-
-type DialogMode = 'create' | 'edit' | 'delete' | null;
-
-
-let dialog = ref(false);
-let success = ref(false);
-let dialogMode = ref<DialogMode>(null);
-let dialogTitle = ref('');
-const userApiKeyList = ref<UserApiKeyList | null>(null);
-let form = ref<IUserApiKeyBase>({name: "", ipv4: [], ipv6: []})
-let target = ref<IUserApiKey>();
-let targetId = ref<string>('');
-let filterEnable = ref(false);
-
-let userApiKeyCreated = ref<IUserApiKey>();
-
-
-function cancel() {
-  dialog.value = false
-  userApiKeyCreated.value = undefined
-  success.value = false
-  inputErrors.value = {}
-  userApiKeyError.value = '';
-  dialogMode.value = null
-  dialogTitle.value = ''
-  targetId.value = ''
-  target.value = undefined
-}
-
-async function save() {
-
-  try {
-    if (dialogMode.value === 'create') {
-      userApiKeyCreated.value = await createUserApiKey(form.value)
-
-    } else if (dialogMode.value === 'edit') {
-      await editUserApiKey(targetId.value, form.value)
-    } else if (dialogMode.value === 'delete') {
-      await deleteUserApiKey(targetId.value)
-    }
-    success.value = true
-    inputErrors.value = {}
-    userApiKeyError.value = '';
-    if (userApiKeyList.value !== null) {
-      userApiKeyList.value.loadItems()
-    }
-  } catch (e) {
-    console.error(e)
-    if (e instanceof Error) {
-      userApiKeyError.value = e.message
-    }
-  }
-}
-
-let buttonText = computed(() => {
-  switch (dialogMode.value) {
-    case 'create':
-      return 'action.create'
-    case 'edit':
-      return 'action.update'
-    case 'delete':
-      return 'action.delete'
-    default:
-      return 'action.sent'
-  }
-})
-
-function toCreate() {
-  dialogMode.value = 'create';
-  dialogTitle.value = 'userApiKey.creating';
-  form.value = {name: "", ipv4: [], ipv6: []}
-  dialog.value = true;
-}
-
-function toEdit(item: IUserApiKey) {
-  console.log('toEdit', item)
-  dialogMode.value = 'edit';
-  dialogTitle.value = 'userApiKey.updating';
-  targetId.value = item.id;
-  form.value = {
-    name: item.name,
-    ipv4: item.ipv4 ? item.ipv4 : [],
-    ipv6: item.ipv6 ? item.ipv6 : [],
-  }
-  dialog.value = true;
-}
-
-function toDelete(item: IUserApiKey) {
-  console.log('toDelete', item)
-  dialogMode.value = 'delete';
-  dialogTitle.value = 'userApiKey.deleting';
-  target.value = item
-  const {id} = item;
-  targetId.value = id;
-  dialog.value = true;
-}
-
-</script>
-
-<template>
-  <v-container fluid>
-
-    <v-card border rounded>
-      <v-toolbar class="bg-toolbar">
-        <v-toolbar-title>{{ t('userApiKey.managing') }}</v-toolbar-title>
-        <v-spacer></v-spacer>
-        <v-btn icon @click="filterEnable = !filterEnable">
-          <v-icon>{{ filterEnable ? 'mdi-filter' : 'mdi-filter-off' }}</v-icon>
-        </v-btn>
-        <v-btn class="font-weight-bold" color="primary" @click="toCreate">
-          {{ t('action.create') }}
-        </v-btn>
-      </v-toolbar>
-      <v-theme-provider with-background class="pa-2 rounded-b">
-        <UserApiKeyList
-            ref="userApiKeyList"
-            @toEdit="toEdit"
-            @toDelete="toDelete"
-            :filterEnable="filterEnable"
-        />
-      </v-theme-provider>
-    </v-card>
-
-    <v-dialog v-model="dialog" max-width="800">
-      <v-sheet border>
-        <v-toolbar>
-          <v-toolbar-title>{{ dialogTitle ? t(dialogTitle) : '-' }}</v-toolbar-title>
-        </v-toolbar>
-        <v-card class="pa-10">
-          <v-card-text v-if="userApiKeyError">
-            <v-alert type="error">{{ userApiKeyError }}</v-alert>
-          </v-card-text>
-          <v-card-text v-if="success">
-            <v-alert type="success">{{ t('action.success') }}</v-alert>
-          </v-card-text>
-          <v-card-text>
-            <UserApiKeyForm v-if="dialogMode === 'create' || dialogMode === 'edit'"
-                            v-model="form"
-                            :inputErrors="inputErrors"
-                            @formSubmit="save"
-            />
-            <v-text-field
-                v-if="userApiKeyCreated"
-                label="API KEY"
-                v-model="userApiKeyCreated.secret"
-                color="success"
-                base-color="success"
-                variant="outlined"
-                @click:append="copy(userApiKeyCreated.secret)"
-                :hint="t('userApiKey.secretWarning')"
-                persistent-hint
-            >
-              <template v-slot:append>
-                <v-btn icon class="text-success" @click="copy(userApiKeyCreated.secret)"><v-icon>mdi mdi-content-copy</v-icon></v-btn>
-              </template>
-
-            </v-text-field>
-            <UserApiKeyView v-if="dialogMode === 'delete' && target" :userApiKey="target"></UserApiKeyView>
-          </v-card-text>
-          <v-card-actions>
-            <v-spacer></v-spacer>
-            <v-btn variant="text" @click="cancel" :loading="loading">
-              {{success ? t('action.close') : t('action.cancel')}}
-            </v-btn>
-            <v-btn
-                v-if="!success"
-                variant="flat"
-                :color="dialogMode==='delete' ? 'red' : 'primary'"
-                @click="save"
-                :loading="loading"
-            >
-              {{ t(buttonText) }}
-            </v-btn>
-          </v-card-actions>
-
-        </v-card>
-      </v-sheet>
-    </v-dialog>
-
-  </v-container>
-</template>
-
-<style scoped>
-
-</style>

package/src/cruds/user-api-key-crud/UserApiKeyList.vue

@@ -1,118 +0,0 @@
-<script setup lang="ts">
-
-import {defineProps, type Ref, ref} from "vue";
-import {useUserApiKey} from "../../composables/useUserApiKey";
-import {useAuth} from "../../composables/useAuth";
-import {useI18n} from "vue-i18n";
-import type {IUserApiKey} from "@drax/identity-share";
-import {formatDateTime} from "@drax/common-front";
-
-const {hasPermission} = useAuth()
-const {paginateUserApiKey} = useUserApiKey()
-const {t} = useI18n()
-
-defineProps({
-  filterEnable: {
-    type: Boolean,
-    default: false,
-  }
-})
-
-const itemsPerPage = ref(5)
-const page = ref(1)
-const serverItems: Ref<IUserApiKey[]> = ref([]);
-const totalItems = ref(0)
-const loading = ref(false)
-const search = ref('')
-const sortBy : Ref<any> = ref([])
-
-const headers = ref<any>([
-    ...( hasPermission('userApiKey:view') ? [{ title: t('userApiKey.user') as string, key: 'user.username', align: 'start', sortable: false }] : []),
-  { title: t('userApiKey.name') as string, key: 'name', align: 'start' },
-  { title: t('userApiKey.ipv4') as string, key: 'ipv4', align: 'start' },
-  { title: t('userApiKey.ipv6') as string, key: 'ipv6', align: 'start' },
-  { title: t('userApiKey.createdAt') as string, key: 'createdAt', align: 'start' },
-  { title: '', key: 'actions', align: 'end', minWidth: '150px' },
-])
-
-async function loadItems(){
-  try{
-    loading.value = true
-    const r = await paginateUserApiKey({
-      page: page.value,
-      limit: itemsPerPage.value,
-      orderBy: sortBy.value[0]?.key,
-      order: sortBy.value[0]?.order,
-      search: search.value})
-    serverItems.value = r.items
-    totalItems.value = r.total
-  }catch (e){
-    console.error(e)
-  }finally {
-    loading.value = false
-  }
-}
-
-
-
-defineExpose({
-  loadItems
-});
-
-</script>
-
-<template>
-  <v-data-table-server
-      class="border"
-      v-if="hasPermission('userApiKey:manage')"
-      v-model:items-per-page="itemsPerPage"
-      :items-per-page-options="[5, 10, 20, 50]"
-      v-model:page="page"
-      v-model:sort-by="sortBy"
-      :headers="headers"
-      :items="serverItems"
-      :items-length="totalItems"
-      :loading="loading"
-      :search="search"
-      item-value="name"
-      @update:options="loadItems"
-  >
-    <template v-slot:top>
-      <v-toolbar  density="compact" v-if="filterEnable">
-        <v-toolbar-title>{{ t('action.filters') }}</v-toolbar-title>
-        <v-spacer></v-spacer>
-        <v-text-field v-model="search" hide-details
-                      density="compact" class="mr-2"
-                      variant="outlined"
-                      append-inner-icon="mdi-magnify"
-                      :label="t('action.search')"
-                      single-line clearable @click:clear="() => search = ''"
-        />
-
-      </v-toolbar>
-    </template>
-
-    <template v-slot:item.ipv4="{ value }" >
-      <v-chip v-for="(ip,index) in value" :key="index">{{ip}}</v-chip>
-    </template>
-
-    <template v-slot:item.ipv6="{ value }" >
-      <v-chip v-for="(ip,index) in value" :key="index">{{ip}}</v-chip>
-    </template>
-
-    <template v-slot:item.createdAt="{ value }" >
-      {{formatDateTime(value)}}
-    </template>
-
-
-    <template v-slot:item.actions="{item}" >
-      <v-btn v-if="hasPermission('userApiKey:update')"  icon="mdi-pencil"  variant="text" color="primary" @click="$emit('toEdit', item)"></v-btn>
-      <v-btn v-if="hasPermission('userApiKey:delete')"  icon="mdi-delete" class="mr-1" variant="text" color="red" @click="$emit('toDelete', item)"></v-btn>
-    </template>
-
-  </v-data-table-server>
-</template>
-
-<style scoped>
-
-</style>

package/src/forms/UserApiKeyForm.vue

@@ -1,79 +0,0 @@
-<script setup lang="ts">
-import {defineModel, type PropType} from "vue";
-import type {IUserApiKeyBase} from "@drax/identity-share";
-import {useI18nValidation} from "@drax/common-vue";
-import type {IClientInputError} from "@drax/common-front";
-import {useI18n} from "vue-i18n";
-
-const {$ta} = useI18nValidation()
-const {t} = useI18n()
-
-defineProps({
-  inputErrors: {
-    type: Object as PropType<IClientInputError>,
-    default: () => ({name: "", ipv4: "", ipv6: ""})
-  }
-})
-
-const form = defineModel<IUserApiKeyBase>({
-  type: Object,
-  default: () => ({name: "", ipv4: [], ipv6: []})
-})
-
-// Define emits
-const emits = defineEmits(['formSubmit'])
-
-// Function to call when form is attempted to be submitted
-const onSubmit = () => {
-  emits('formSubmit', form); // Emitting an event with the form data
-}
-
-const ipv6Regex = /(([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))/
-const ipv4Regex = /^((25[0-5]|(2[0-4]|1\d|[1-9]|)\d)\.?\b){4}$/
-
-const ipv4Address = [
-  (v: string[]) => !v.some(ip => !ipv4Regex.test(ip)) || t('validation.invalidIpv4'),
-]
-
-const ipv6Address = [
-  (v: string[]) => !v.some(ip => !ipv6Regex.test(ip))  || t('validation.invalidIpv6'),
-]
-
-</script>
-
-<template>
-  <v-form @submit.prevent="onSubmit" validate-on="blur">
-    <v-text-field
-        variant="outlined"
-        id="name-input"
-        :label="t('userApiKey.name')"
-        v-model="form.name"
-        prepend-inner-icon="mdi-card-account-details"
-        required
-        :error-messages="$ta(inputErrors.name)"
-    ></v-text-field>
-
-    <v-combobox
-        v-model="form.ipv4 as string[]"
-        :label="t('userApiKey.ipv4')"
-        variant="outlined"
-        multiple chips
-        validate-on="blur"
-        :rules="ipv4Address"
-    ></v-combobox>
-
-    <v-combobox
-        v-model="form.ipv6 as string[]"
-        :label="t('userApiKey.ipv6')"
-        variant="outlined"
-        multiple chips
-        validate-on="blur"
-        :rules="ipv6Address"
-    ></v-combobox>
-
-  </v-form>
-</template>
-
-<style scoped>
-
-</style>