@drax/identity-vue 0.4.0 → 0.5.2

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.4.0",
+  "version": "0.5.2",
   "type": "module",
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -24,10 +24,10 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "@drax/common-front": "^0.4.0",
-    "@drax/common-share": "^0.4.0",
-    "@drax/common-vue": "^0.4.0",
-    "@drax/identity-share": "^0.4.0"
+    "@drax/common-front": "^0.5.1",
+    "@drax/common-vue": "^0.5.1",
+    "@drax/crud-share": "^0.5.2",
+    "@drax/identity-share": "^0.5.1"
   },
   "peerDependencies": {
     "pinia": "^2.2.2",
@@ -64,5 +64,5 @@
     "vue-tsc": "^2.1.6",
     "vuetify": "^3.7.1"
   },
-  "gitHead": "481b302fe72f403abf092806ceca540dd2765dfa"
+  "gitHead": "6f854dbeb2af7bca32ed35bcec2f8e48790a73b9"
 }

package/src/combobox/TenantCombobox.vue

@@ -2,6 +2,8 @@
 
 import {ref, onMounted, defineModel} from 'vue'
 import type { PropType } from 'vue'
+import {useI18n} from "vue-i18n";
+const {t} = useI18n()
 defineProps({
   errorMessages: {
     type: String as PropType<string | string[] | undefined>,
@@ -27,7 +29,7 @@ onMounted(async () => {
 <template>
   <v-select
       v-model="model"
-      :label="$t ? $t('tenant.entity') : 'Tenant'"
+      :label="t ? t('tenant.entity') : 'Tenant'"
       :items="items"
       item-title="name"
       item-value="id"

package/src/components/IdentityChangeOwnPassword/IdentityChangeOwnPassword.vue

@@ -6,7 +6,7 @@ import type {IClientInputError} from "@drax/common-front";
 import {useI18nValidation} from "@drax/common-vue";
 import {useI18n} from "vue-i18n";
 
-const {t} = useI18n()
+const {t,te} = useI18n()
 const {$ta} = useI18nValidation()
 
 const {changeOwnPassword} = useAuth()
@@ -57,7 +57,7 @@ async function submitChangePassowrd() {
 
     <template v-if="changed">
       <v-alert type="success">
-        {{ $t('user.passwordChanged') }}
+        {{ t('user.passwordChanged') }}
       </v-alert>
     </template>
 
@@ -65,14 +65,14 @@ async function submitChangePassowrd() {
 
           <v-form @submit.prevent="submitChangePassowrd">
             <v-card variant="elevated">
-              <v-card-title class="pa-4 text-center">{{ $t('user.changeOwnPassword') }}</v-card-title>
+              <v-card-title class="pa-4 text-center">{{ t('user.changeOwnPassword') }}</v-card-title>
               <v-card-text v-if="errorMsg">
                 <v-alert type="error">
-                  {{ $t ? $t(errorMsg) : errorMsg }}
+                  {{ te(errorMsg) ?t(errorMsg) : errorMsg }}
                 </v-alert>
               </v-card-text>
               <v-card-text>
-                <div class="text-subtitle-1 text-medium-emphasis">{{ $t('user.currentPassword') }}</div>
+                <div class="text-subtitle-1 text-medium-emphasis">{{ t('user.currentPassword') }}</div>
                 <v-text-field
                     variant="outlined"
                     id="current-password-input"
@@ -85,7 +85,7 @@ async function submitChangePassowrd() {
                     autocomplete="new-password"
                     :error-messages="$ta(inputErrors?.currentPassword)"
                 ></v-text-field>
-                <div class="text-subtitle-1 text-medium-emphasis">{{ $t('user.newPassword') }}</div>
+                <div class="text-subtitle-1 text-medium-emphasis">{{ t('user.newPassword') }}</div>
                 <v-text-field
                     variant="outlined"
                     id="new-password-input"
@@ -98,7 +98,7 @@ async function submitChangePassowrd() {
                     autocomplete="new-password"
                     :error-messages="$ta(inputErrors?.newPassword)"
                 ></v-text-field>
-                <div class="text-subtitle-1 text-medium-emphasis">{{ $t('user.confirmPassword') }}</div>
+                <div class="text-subtitle-1 text-medium-emphasis">{{ t('user.confirmPassword') }}</div>
                 <v-text-field
                     variant="outlined"
                     id="confirm-password-input"
@@ -125,7 +125,7 @@ async function submitChangePassowrd() {
                     block
                     :disabled="!isFormValid"
                 >
-                  {{ $t('action.sent') }}
+                  {{ t('action.sent') }}
                 </v-btn>
               </v-card-actions>
             </v-card>

package/src/components/IdentityLogin/IdentityLogin.vue

@@ -2,6 +2,8 @@
 import {computed, ref, defineEmits} from 'vue'
 import {useAuth} from '../../composables/useAuth.js'
 import IdentityProfileView from "../IdentityProfileView/IdentityProfileView.vue";
+import {useI18n} from "vue-i18n";
+const {t, te} = useI18n()
 
 const {login, isAuthenticated} = useAuth()
 
@@ -50,14 +52,14 @@ function togglePasswordVisibility() {
 
         <v-form @submit.prevent="submitLogin">
           <v-card variant="elevated" class="pa-6">
-            <v-card-title class="pa-4 text-center">{{ $t ? $t('auth.signIn') : 'Sign In' }}</v-card-title>
+            <v-card-title class="pa-4 text-center">{{ te('auth.signIn') ? t('auth.signIn') : 'Sign In' }}</v-card-title>
             <v-card-text v-if="authError">
               <v-alert type="error">
-                {{ $t ? $t(authError) : authError }}
+                {{te(authError) ? t(authError) : authError }}
               </v-alert>
             </v-card-text>
             <v-card-text>
-              <div class="text-subtitle-1 text-medium-emphasis">{{ $t ? $t('auth.username') : 'Username' }}</div>
+              <div class="text-subtitle-1 text-medium-emphasis">{{ te('auth.username') ? t('auth.username') : 'Username' }}</div>
               <v-text-field
                   variant="outlined"
                   id="username-input"
@@ -66,7 +68,7 @@ function togglePasswordVisibility() {
                   required
                   autocomplete="new-username"
               ></v-text-field>
-              <div class="text-subtitle-1 text-medium-emphasis">{{ $t ? $t('auth.password') : 'Password' }}</div>
+              <div class="text-subtitle-1 text-medium-emphasis">{{ te('auth.password') ? t('auth.password') : 'Password' }}</div>
               <v-text-field
                   variant="outlined"
                   id="password-input"
@@ -92,7 +94,7 @@ function togglePasswordVisibility() {
                   :disabled="!isFormValid"
                   :loading="loading"
               >
-                {{ $t ? $t('auth.login') : 'Login' }}
+                {{ te('auth.login') ? t('auth.login') : 'Login' }}
               </v-btn>
             </v-card-actions>
           </v-card>

package/src/components/IdentityProfileDrawer/IdentityProfileDrawer.vue

@@ -3,7 +3,9 @@ import {useAuth} from "../../composables/useAuth";
 import {defineModel} from "vue";
 import IdentityProfileView from "../IdentityProfileView/IdentityProfileView.vue";
 import {useRouter} from "vue-router";
+import {useI18n} from "vue-i18n";
 
+const {t} = useI18n()
 const router = useRouter()
 
 
@@ -29,13 +31,13 @@ const valueModel = defineModel<boolean>()
         <v-list-item
             @click="router.push({name:'Profile'})"
             prepend-icon="mdi-account-cog"
-            :title="$t('user.profile')"
+            :title="t('user.profile')"
         >
         </v-list-item>
         <v-list-item
             @click="auth.logout()"
             prepend-icon="mdi-logout"
-            :title="$t('user.logout')"
+            :title="t('user.logout')"
         >
         </v-list-item>
       </v-list>
@@ -46,7 +48,7 @@ const valueModel = defineModel<boolean>()
         <v-list-item
             href="/login"
             prepend-icon="mdi-login"
-            :title="$t('user.login')"
+            :title="t('user.login')"
         >
         </v-list-item>
       </v-list>

package/src/components/PermissionSelector/PermissionSelector.vue

@@ -2,6 +2,8 @@
 
 import {ref, onMounted, defineModel, computed} from 'vue'
 import type {PropType} from 'vue'
+import {useI18n} from "vue-i18n";
+const {t,te} = useI18n()
 
 defineProps({
   errorMessages: {
@@ -49,7 +51,7 @@ const permissionGroups = computed(() => {
 
 <template>
   <v-sheet  class="pa-2">
-    <h5 class="text-h5 mb-2">{{$t ? $t('permission.permissions') : 'Permissions'}}</h5>
+    <h5 class="text-h5 mb-2">{{te('permission.permissions') ? t('permission.permissions') : 'Permissions'}}</h5>
   <v-item-group
       v-model="model"
       variant="outlined"
@@ -60,7 +62,7 @@ const permissionGroups = computed(() => {
     <template v-for="(permissions, entity) in permissionGroups" :key="entity">
       <v-card class="mb-2" variant="outlined">
         <v-card-title class="text-capitalize">
-          {{ $t ? $t('permission.'+entity) : entity }}
+          {{ t ? t('permission.'+entity) : entity }}
         </v-card-title>
         <v-card-text>
           <v-item
@@ -73,7 +75,7 @@ const permissionGroups = computed(() => {
                 :color="isSelected? 'green' : 'grey-darken-3'" class=""
                 @click="toggle" variant="flat" :rounded="false" border
             >
-              {{ $t ? $t('permission.'+permission) : permission }}
+              {{ te('permission.'+permission) ? t('permission.'+permission) : permission }}
             </v-chip>
 
 

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

@@ -5,7 +5,8 @@ import {useRole} from "../../composables/useRole";
 import type {IRole, IRoleBase} from "@drax/identity-share";
 import RoleForm from "../../forms/RoleForm.vue";
 import RoleView from "../../views/RoleView.vue";
-
+import {useI18n} from "vue-i18n";
+const {t} = useI18n()
 const {createRole, editRole, deleteRole, loading, roleError, inputErrors} = useRole()
 
 interface RoleList {
@@ -110,13 +111,13 @@ function toDelete(item: IRole) {
 
     <v-card border rounded>
       <v-toolbar class="bg-toolbar">
-        <v-toolbar-title>{{$t('role.managing')}}</v-toolbar-title>
+        <v-toolbar-title>{{t('role.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 color="primary" @click="toCreate">
-          {{$t('action.create') }}
+          {{t('action.create') }}
         </v-btn>
       </v-toolbar>
       <v-theme-provider with-background class="pa-2 rounded-b">
@@ -132,7 +133,7 @@ function toDelete(item: IRole) {
     <v-dialog v-model="dialog" max-width="800">
       <v-sheet border>
         <v-toolbar>
-          <v-toolbar-title>{{ dialogTitle ? $t(dialogTitle) : '-' }}</v-toolbar-title>
+          <v-toolbar-title>{{ dialogTitle ? t(dialogTitle) : '-' }}</v-toolbar-title>
         </v-toolbar>
         <v-card class="pa-10">
           <v-card-text v-if="roleError">
@@ -154,7 +155,7 @@ function toDelete(item: IRole) {
                    @click="save"
                    :loading="loading"
             >
-              {{ $t(buttonText) }}
+              {{ t(buttonText) }}
             </v-btn>
           </v-card-actions>
 

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

@@ -8,7 +8,7 @@ import type {IRole} from "@drax/identity-share";
 
 const {hasPermission} = useAuth()
 const {paginateRole} = useRole()
-const {t} = useI18n()
+const {t,te} = useI18n()
 
 defineProps({
   filterEnable: {
@@ -77,13 +77,13 @@ defineExpose({
   >
     <template v-slot:top>
       <v-toolbar  density="compact" v-if="filterEnable">
-        <v-toolbar-title>{{ $t('action.filters') }}</v-toolbar-title>
+        <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')"
+                      :label="t('action.search')"
                       single-line clearable @click:clear="() => search = ''"
         />
 
@@ -94,7 +94,7 @@ defineExpose({
                   :key="permission" color="green"
                   class="ma-1"
           >
-            {{$t ? $t(`permission.${permission}`) : permission }}
+            {{te(`permission.${permission}`) ? t(`permission.${permission}`) : permission }}
           </v-chip>
     </template>
 

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

@@ -0,0 +1,73 @@
+
+import {EntityCrud} from "@drax/crud-vue";
+import {TenantSystemFactory} from "@drax/identity-front";
+import type {IEntityCrud, IEntityCrudField, IEntityCrudHeader} from "@drax/crud-share";
+
+
+class TenantCrud extends EntityCrud implements IEntityCrud {
+
+  static singleton: TenantCrud
+
+  constructor() {
+    super();
+    this.name = 'Tenant'
+  }
+
+  static get instance(): TenantCrud {
+    if(!TenantCrud.singleton){
+      TenantCrud.singleton = new TenantCrud()
+    }
+    return TenantCrud.singleton
+  }
+
+  get permissions(){
+    return {
+      manage: 'tenant:manage',
+      view: 'tenant:view',
+      create: 'tenant:create',
+      update: 'tenant:update',
+      delete: 'tenant:delete'
+    }
+  }
+
+  get headers():IEntityCrudHeader[] {
+    return [
+        //{title: 'id',key:'_id', align: 'start'},
+        {title: 'name',key:'name', align: 'start'}
+    ]
+  }
+
+  get provider(){
+    return TenantSystemFactory.getInstance()
+  }
+
+  get refs(){
+    return {
+
+    }
+  }
+
+  get rules(){
+    return {
+      name: [(v: any) => !!v || 'Requerido']
+    }
+  }
+
+  get fields(): IEntityCrudField[]{
+    return [
+        {name: 'name', type: 'string', label: 'name', default:'' }
+    ]
+  }
+
+  get dialogFullscreen(){
+    return false
+  }
+
+  get exportHeaders(){
+    return ['_id', 'name']
+  }
+
+}
+
+export default TenantCrud
+

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

@@ -5,7 +5,8 @@ import {useTenant} from "../../composables/useTenant";
 import type {ITenant, ITenantBase} from "@drax/identity-share";
 import TenantForm from "../../forms/TenantForm.vue";
 import TenantView from "../../views/TenantView.vue";
-
+import {useI18n} from "vue-i18n";
+const {t} = useI18n()
 const {createTenant, editTenant, deleteTenant, loading, tenantError, inputErrors} = useTenant()
 
 interface TenantList {
@@ -107,13 +108,13 @@ function toDelete(item: ITenant) {
 
     <v-card border rounded >
       <v-toolbar class="bg-toolbar">
-        <v-toolbar-title>{{ $t('tenant.managing') }}</v-toolbar-title>
+        <v-toolbar-title>{{ t('tenant.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') }}
+          {{ t('action.create') }}
         </v-btn>
       </v-toolbar>
       <v-theme-provider with-background class="pa-2 rounded-b">
@@ -129,7 +130,7 @@ function toDelete(item: ITenant) {
     <v-dialog v-model="dialog" max-width="800">
       <v-sheet border>
         <v-toolbar>
-          <v-toolbar-title>{{ dialogTitle ? $t(dialogTitle) : '-' }}</v-toolbar-title>
+          <v-toolbar-title>{{ dialogTitle ? t(dialogTitle) : '-' }}</v-toolbar-title>
         </v-toolbar>
         <v-card class="pa-10">
           <v-card-text v-if="tenantError">
@@ -151,7 +152,7 @@ function toDelete(item: ITenant) {
                    @click="save"
                    :loading="loading"
             >
-              {{ $t(buttonText) }}
+              {{ t(buttonText) }}
             </v-btn>
           </v-card-actions>
 

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

@@ -77,13 +77,13 @@ defineExpose({
   >
     <template v-slot:top>
       <v-toolbar  density="compact" v-if="filterEnable">
-        <v-toolbar-title>{{ $t('action.filters') }}</v-toolbar-title>
+        <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')"
+                      :label="t('action.search')"
                       single-line clearable @click:clear="() => search = ''"
         />
 

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

@@ -6,7 +6,8 @@ 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()
 
 
@@ -120,13 +121,13 @@ function toDelete(item: IUserApiKey) {
 
     <v-card border rounded>
       <v-toolbar class="bg-toolbar">
-        <v-toolbar-title>{{ $t('userApiKey.managing') }}</v-toolbar-title>
+        <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') }}
+          {{ t('action.create') }}
         </v-btn>
       </v-toolbar>
       <v-theme-provider with-background class="pa-2 rounded-b">
@@ -142,14 +143,14 @@ function toDelete(item: IUserApiKey) {
     <v-dialog v-model="dialog" max-width="800">
       <v-sheet border>
         <v-toolbar>
-          <v-toolbar-title>{{ dialogTitle ? $t(dialogTitle) : '-' }}</v-toolbar-title>
+          <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-alert type="success">{{ t('action.success') }}</v-alert>
           </v-card-text>
           <v-card-text>
             <UserApiKeyForm v-if="dialogMode === 'create' || dialogMode === 'edit'"
@@ -165,7 +166,7 @@ function toDelete(item: IUserApiKey) {
                 base-color="success"
                 variant="outlined"
                 @click:append="copy(userApiKeyCreated.secret)"
-                :hint="$t('userApiKey.secretWarning')"
+                :hint="t('userApiKey.secretWarning')"
                 persistent-hint
             >
               <template v-slot:append>
@@ -178,7 +179,7 @@ function toDelete(item: IUserApiKey) {
           <v-card-actions>
             <v-spacer></v-spacer>
             <v-btn variant="text" @click="cancel" :loading="loading">
-              {{success ? $t('action.close') : $t('action.cancel')}}
+              {{success ? t('action.close') : t('action.cancel')}}
             </v-btn>
             <v-btn
                 v-if="!success"
@@ -187,7 +188,7 @@ function toDelete(item: IUserApiKey) {
                 @click="save"
                 :loading="loading"
             >
-              {{ $t(buttonText) }}
+              {{ t(buttonText) }}
             </v-btn>
           </v-card-actions>
 

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

@@ -79,13 +79,13 @@ defineExpose({
   >
     <template v-slot:top>
       <v-toolbar  density="compact" v-if="filterEnable">
-        <v-toolbar-title>{{ $t('action.filters') }}</v-toolbar-title>
+        <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')"
+                      :label="t('action.search')"
                       single-line clearable @click:clear="() => search = ''"
         />
 

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

@@ -8,6 +8,9 @@ import UserCreateForm from "../../forms/UserCreateForm.vue";
 import UserEditForm from "../../forms/UserEditForm.vue";
 import UserPasswordForm from "../../forms/UserPasswordForm.vue";
 import UserView from "../../views/UserView.vue";
+import {useI18n} from "vue-i18n";
+
+const {t} = useI18n()
 
 const {createUser, editUser, changeUserPassword, deleteUser, loading, userError, inputErrors} = useUser()
 
@@ -141,13 +144,13 @@ function toChangePassword(item: IUser) {
 
     <v-card border rounded>
       <v-toolbar class="bg-toolbar">
-        <v-toolbar-title>{{ $t('user.managing') }}</v-toolbar-title>
+        <v-toolbar-title>{{ t('user.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 color="primary" @click="toCreate">
-          {{$t('action.create') }}
+          {{t('action.create') }}
         </v-btn>
       </v-toolbar>
       <v-theme-provider with-background class="pa-2 rounded-b">
@@ -164,7 +167,7 @@ function toChangePassword(item: IUser) {
     <v-dialog v-model="dialog" max-width="800">
       <v-sheet border>
         <v-toolbar>
-          <v-toolbar-title>{{ dialogTitle ? $t(dialogTitle) : '-' }}</v-toolbar-title>
+          <v-toolbar-title>{{ dialogTitle ? t(dialogTitle) : '-' }}</v-toolbar-title>
         </v-toolbar>
         <v-card class="pa-10">
           <v-card-text v-if="userError">
@@ -206,7 +209,7 @@ function toChangePassword(item: IUser) {
                 variant="text"
                 @click="cancel"
                 :loading="loading">
-              {{ actionButtonEnable ? $t('action.cancel') : $t('action.close') }}
+              {{ actionButtonEnable ? t('action.cancel') : t('action.close') }}
             </v-btn>
             <v-btn
                 v-if="actionButtonEnable"
@@ -215,7 +218,7 @@ function toChangePassword(item: IUser) {
                 @click="save"
                 :loading="loading"
             >
-              {{ $t(buttonText) }}
+              {{ t(buttonText) }}
             </v-btn>
           </v-card-actions>
 

package/src/cruds/user-crud/UserList.vue

@@ -79,13 +79,13 @@ defineExpose({
   >
     <template v-slot:top>
       <v-toolbar  density="compact" v-if="filterEnable">
-        <v-toolbar-title>{{ $t('action.filters') }}</v-toolbar-title>
+        <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')"
+                      :label="t('action.search')"
                       single-line clearable @click:clear="() => search = ''"
         />
       </v-toolbar>

package/src/forms/UserApiKeyForm.vue

@@ -46,7 +46,7 @@ const ipv6Address = [
     <v-text-field
         variant="outlined"
         id="name-input"
-        :label="$t('userApiKey.name')"
+        :label="t('userApiKey.name')"
         v-model="form.name"
         prepend-inner-icon="mdi-card-account-details"
         required
@@ -55,7 +55,7 @@ const ipv6Address = [
 
     <v-combobox
         v-model="form.ipv4 as string[]"
-        :label="$t('userApiKey.ipv4')"
+        :label="t('userApiKey.ipv4')"
         variant="outlined"
         multiple chips
         validate-on="blur"
@@ -64,7 +64,7 @@ const ipv6Address = [
 
     <v-combobox
         v-model="form.ipv6 as string[]"
-        :label="$t('userApiKey.ipv6')"
+        :label="t('userApiKey.ipv6')"
         variant="outlined"
         multiple chips
         validate-on="blur"

package/src/forms/UserPasswordForm.vue

@@ -44,13 +44,13 @@ const onSubmit = () => {
 
   <v-sheet v-if="passwordChanged">
     <v-alert type="success">
-      {{ $t('user.passwordChanged') }}
+      {{ t('user.passwordChanged') }}
     </v-alert>
   </v-sheet>
   <v-sheet v-else>
     <form ref="changeUserPassword" @submit.prevent="onSubmit">
 
-      <div class="text-subtitle-1 text-medium-emphasis">{{ $t('user.newPassword') }}</div>
+      <div class="text-subtitle-1 text-medium-emphasis">{{ t('user.newPassword') }}</div>
       <v-text-field
           variant="outlined"
           id="new-password-input"
@@ -63,7 +63,7 @@ const onSubmit = () => {
           autocomplete="new-password"
           :error-messages="$ta(inputErrors.newPassword)"
       ></v-text-field>
-      <div class="text-subtitle-1 text-medium-emphasis">{{ $t('user.confirmPassword') }}</div>
+      <div class="text-subtitle-1 text-medium-emphasis">{{ t('user.confirmPassword') }}</div>
       <v-text-field
           variant="outlined"
           id="confirm-password-input"

package/src/pages/ProfilePage.vue

@@ -2,7 +2,8 @@
 import IdentityProfileView from "../components/IdentityProfileView/IdentityProfileView.vue";
 import {useRouter} from "vue-router";
 const router = useRouter();
-
+import { useI18n } from 'vue-i18n';
+const { t } = useI18n();
 </script>
 
 <template>
@@ -14,7 +15,9 @@ const router = useRouter();
         <v-card>
           <identity-profile-view> </identity-profile-view>
           <v-card-text class="text-center">
-            <v-btn color="blue" variant="tonal" @click="router.push({name: 'Password'})">{{$t('user.changeOwnPassword')}}</v-btn>
+            <v-btn color="blue" variant="tonal" @click="router.push({name: 'Password'})">
+              {{t('user.changeOwnPassword')}}
+            </v-btn>
           </v-card-text>
         </v-card>
       </v-col>

package/src/pages/TenantCrudPage.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
-
-import TenantCrud from "../cruds/tenant-crud/TenantCrud.vue";
+import TenantCrud from '../cruds/tenant-crud/TenantCrud'
+import {Crud} from "@drax/crud-vue";
 </script>
 
 <template>
-<TenantCrud></TenantCrud>
+  <crud :entity="TenantCrud.instance">
+
+  </crud>
 </template>
 
 <style scoped>

package/src/pages/TenantCrudPageOld.vue

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

package/src/views/RoleView.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import type {PropType} from "vue";
 import type {IRole} from "@drax/identity-share";
+import { useI18n } from 'vue-i18n';
+const { t, te } = useI18n();
 
 defineProps({
   role:{
@@ -13,14 +15,14 @@ defineProps({
 <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('role.name') : 'Name'}} : {{ role.name }}</h6>
+      <h6 class="text-h6">{{te('role.name') ? t('role.name') : 'Name'}} : {{ role.name }}</h6>
       <h6 class="text-h6 text-grey">Permisos</h6>
 
       <v-chip v-for="permission in role.permissions"
               :key="permission" color="green"
               class="ma-1"
       >
-        {{$t ? $t(`permission.${permission}`) : permission }}
+        {{te(`permission.${permission}`) ? t(`permission.${permission}`) : permission }}
       </v-chip>
     </v-sheet>
   </v-sheet>

package/src/views/TenantView.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import type {PropType} from "vue";
 import type {ITenant} from "@drax/identity-share";
+import { useI18n } from 'vue-i18n';
+const { t, te } = useI18n();
 
 defineProps({
   tenant:{
@@ -13,7 +15,7 @@ defineProps({
 <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('tenant.name') : 'Name'}} : {{ tenant.name }}</h6>
+      <h6 class="text-h6">{{te('tenant.name') ? t('tenant.name') : 'Name'}} : {{ tenant.name }}</h6>
     </v-sheet>
   </v-sheet>
 

package/src/views/UserApiKeyView.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import type {PropType} from "vue";
 import type {IUserApiKey} from "@drax/identity-share";
+import { useI18n } from 'vue-i18n';
+const { t, te } = useI18n();
 
 defineProps({
   userApiKey:{
@@ -13,7 +15,7 @@ defineProps({
 <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>
+      <h6 class="text-h6">{{te('userApiKey.name') ? t('userApiKey.name') : 'Name'}} : {{ userApiKey.name }}</h6>
     </v-sheet>
   </v-sheet>