@drax/identity-vue 0.0.31 → 0.1.5

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.0.31",
+  "version": "0.1.5",
   "type": "module",
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -24,10 +24,10 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "@drax/common-front": "^0.0.31",
-    "@drax/common-share": "^0.0.31",
-    "@drax/common-vue": "^0.0.31",
-    "@drax/identity-share": "^0.0.31",
+    "@drax/common-front": "^0.1.0",
+    "@drax/common-share": "^0.1.0",
+    "@drax/common-vue": "^0.1.0",
+    "@drax/identity-share": "^0.1.0",
     "vue-i18n": "^9.13.1"
   },
   "peerDependencies": {
@@ -64,5 +64,5 @@
     "vue-tsc": "^2.0.11",
     "vuetify": "^3.6.4"
   },
-  "gitHead": "14a8c465526ef0edc3179be38fb0aaa081a4ebc4"
+  "gitHead": "b9efcbc5785e3a02dbb6ca0255527ee2be1d16c0"
 }

package/src/composables/useUserApiKey.ts

@@ -0,0 +1,81 @@
+import {inject, ref} from "vue";
+import type {IUserApiKey, IUserApiKeyBase} from "@drax/identity-share";
+import type { UserApiKeySystem} from "@drax/identity-front";
+import {ClientError} from "@drax/common-front";
+import type { IClientInputError} from "@drax/common-front";
+
+
+export function useUserApiKey() {
+
+    const userApiKeySystem = inject('UserApiKeySystem') as UserApiKeySystem
+
+    let userApiKeyError = ref<string>('')
+    let inputErrors = ref<IClientInputError>()
+    let loading = ref(false);
+
+
+    async function paginateUserApiKey({page= 1, limit= 5, orderBy="", orderDesc=false, search = ""}) {
+        loading.value = true
+        let paginateduserApiKey = userApiKeySystem.paginate({page, limit, orderBy, orderDesc, search})
+        loading.value = false
+        return paginateduserApiKey
+    }
+
+    async function createUserApiKey(userApiKeyData: IUserApiKeyBase) {
+        try {
+            loading.value = true
+            let userApiKey: IUserApiKey =  await userApiKeySystem.create(userApiKeyData)
+            return userApiKey
+        } catch (err) {
+            if (err instanceof ClientError) {
+                inputErrors.value = err.inputErrors
+            }if(err instanceof Error) {
+                userApiKeyError.value = err.message
+            }
+            throw err
+        }finally {
+            loading.value = false
+        }
+
+    }
+
+    async function editUserApiKey(id: string, userApiKeyData: IUserApiKeyBase) {
+        try {
+            loading.value = true
+            let userApiKey: IUserApiKey = await userApiKeySystem.update(id, userApiKeyData)
+            return userApiKey
+        } catch (err) {
+
+            if (err instanceof ClientError) {
+                inputErrors.value = err.inputErrors
+            }
+            if(err instanceof Error) {
+                userApiKeyError.value = err.message
+            }
+            throw err
+        }finally {
+            loading.value = false
+        }
+    }
+
+    async function deleteUserApiKey(id: string) {
+        try {
+            loading.value = true
+            await userApiKeySystem.delete(id)
+        } catch (err) {
+            console.log("composable delete error: ", err, )
+            if (err instanceof ClientError) {
+                inputErrors.value = err.inputErrors
+            }
+            if(err instanceof Error) {
+                userApiKeyError.value = err.message
+            }
+            throw err
+        }finally {
+            loading.value = false
+        }
+    }
+
+    return {paginateUserApiKey, createUserApiKey, editUserApiKey, deleteUserApiKey, loading, userApiKeyError, inputErrors}
+
+}

package/src/cruds/tenant-crud/TenantList.vue

@@ -5,6 +5,7 @@ import {useTenant} from "../../composables/useTenant";
 import {useAuth} from "../../composables/useAuth";
 import {useI18n} from "vue-i18n";
 import type {ITenant} from "@drax/identity-share";
+import dayjs from "dayjs";
 
 const {hasPermission} = useAuth()
 const {paginateTenant} = useTenant()
@@ -25,6 +26,7 @@ const loading = ref(false)
 const search = ref('')
 const headers = ref<any>([
   { title: t('tenant.name') as string, key: 'name', align: 'start' },
+  { title: t('tenant.createdAt') as string, key: 'createdAt', align: 'start' },
   { title: '', key: 'actions', align: 'end', minWidth: '150px' },
 ])
 
@@ -81,6 +83,10 @@ defineExpose({
       </v-toolbar>
     </template>
 
+    <template v-slot:item.createdAt="{ value }" >
+      {{value ? dayjs(value).format('YYYY-MM-DD') : '' }}
+    </template>
+
 
     <template v-slot:item.actions="{item}" >
       <v-btn v-if="hasPermission('tenant:update')"  icon="mdi-pencil"  variant="text" color="primary" @click="$emit('toEdit', item)"></v-btn>

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

@@ -0,0 +1,203 @@
+<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";
+
+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

@@ -0,0 +1,113 @@
+<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 dayjs from "dayjs";
+
+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 headers = ref<any>([
+    ...( hasPermission('userApiKey:view') ? [{ title: t('userApiKey.user') as string, key: 'user.username', align: 'start' }] : []),
+  { 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,
+      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"
+      v-model:page="page"
+      :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 }" >
+      {{value ? dayjs(value).format('YYYY-MM-DD') : '' }}
+    </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

@@ -0,0 +1,79 @@
+<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>

package/src/index.ts

@@ -27,10 +27,18 @@ import TenantCrud from "./cruds/tenant-crud/TenantCrud.vue";
 import TenantList from "./cruds/tenant-crud/TenantList.vue";
 import TenantCrudPage from "./pages/TenantCrudPage.vue";
 
+
+import UserApiKeyForm from "./forms/UserApiKeyForm.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/UserApiKeyCrudPage.vue";
+
 import {useAuth} from "./composables/useAuth.js";
 import {useUser} from "./composables/useUser.js";
 import {useRole} from "./composables/useRole.js";
 import {useTenant} from "./composables/useTenant.js";
+import {useUserApiKey} from "./composables/useUserApiKey.js";
 
 
 import {useAuthStore} from "./stores/auth/AuthStore.js";
@@ -77,6 +85,14 @@ export {
     useTenant,
 
 
+    //UserApiKey
+    UserApiKeyView,
+    UserApiKeyForm,
+    UserApiKeyCrud,
+    UserApiKeyList,
+    UserApiKeyCrudPage,
+    useUserApiKey,
+
     //Stores
     useAuthStore,
 

package/src/pages/UserApiKeyCrudPage.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+
+import UserApiKeyCrud from "../cruds/user-api-key-crud/UserApiKeyCrud.vue";
+</script>
+
+<template>
+<UserApiKeyCrud></UserApiKeyCrud>
+</template>
+
+<style scoped>
+
+</style>

package/src/routes/IdentityRoutes.ts

@@ -4,6 +4,7 @@ import PasswordPage from '../pages/PasswordPage.vue'
 import UserCrudPage from '../pages/UserCrudPage.vue'
 import RoleCrudPage from '../pages/RoleCrudPage.vue'
 import TenantCrudPage from '../pages/TenantCrudPage.vue'
+import UserApiKeyCrudPage from '../pages/UserApiKeyCrudPage.vue'
 
 const routes = [
   {
@@ -57,7 +58,15 @@ const routes = [
       permission: 'user:manage'
     }
   },
-
+  {
+    name: 'CrudUserApiKey',
+    path: '/crud/user-api-key',
+    component: UserApiKeyCrudPage,
+    meta: {
+      auth: true,
+      permission: 'userApiKey:manage'
+    }
+  },
 ]
 
 

package/src/views/UserApiKeyView.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type {PropType} from "vue";
+import type {IUserApiKey} from "@drax/identity-share";
+
+defineProps({
+  userApiKey:{
+    type: Object as PropType<IUserApiKey>,
+    required: true,
+  }
+})
+</script>
+
+<template>
+  <v-sheet border class="position-relative d-flex justify-center align-center" height="150">
+    <v-sheet class="text-center">
+      <h6 class="text-h6">{{$t ? $t('userApiKey.name') : 'Name'}} : {{ userApiKey.name }}</h6>
+    </v-sheet>
+  </v-sheet>
+
+</template>
+
+<style scoped>
+
+</style>