@drax/identity-vue 0.5.4 → 0.5.5

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.5.4",
+  "version": "0.5.5",
   "type": "module",
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -24,10 +24,10 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "@drax/common-front": "^0.5.4",
-    "@drax/common-vue": "^0.5.4",
+    "@drax/common-front": "^0.5.5",
+    "@drax/common-vue": "^0.5.5",
     "@drax/crud-front": "^0.5.3",
-    "@drax/crud-share": "^0.5.4",
+    "@drax/crud-share": "^0.5.5",
     "@drax/identity-share": "^0.5.1"
   },
   "peerDependencies": {
@@ -65,5 +65,5 @@
     "vue-tsc": "^2.1.6",
     "vuetify": "^3.7.1"
   },
-  "gitHead": "6db0bebb2df9edecd2c3caa7288fb5c7001c4243"
+  "gitHead": "c89751dd8eb2ede7d565b596f698c2b83e0c2fed"
 }

package/src/combobox/RoleCombobox.vue

@@ -3,12 +3,19 @@ import {ref, onMounted, defineModel} from 'vue'
 import type {PropType} from 'vue'
 import type {IRole} from "@drax/identity-share";
 import {useRole} from "../composables/useRole";
+import {useI18n} from "vue-i18n";
+
+
+const {t,te} = useI18n()
+
 
 defineProps({
   errorMessages: {type: String as PropType<string | string[] | undefined>},
+  rules: {type: Array as PropType<any[]>, default: () => []},
   multiple: {type: Boolean, default: false},
   clearable: {type: Boolean, default: false},
   readonly: {type: Boolean, default: false},
+  label: {type: String, default: 'role.entity'},
   density: {type: String as PropType<'comfortable' | 'compact' | 'default'>, default: 'default'},
   variant: {type: String as PropType<'underlined' | 'outlined' | 'filled' | 'solo' | 'solo-inverted' | 'solo-filled' | 'plain'>, default: 'filled'},
 })
@@ -26,7 +33,7 @@ onMounted(async () => {
 <template>
   <v-select
       v-model="model"
-      label="Rol"
+      :label="te(label) ? t(label) : label"
       :items="items"
       item-title="name"
       item-value="id"
@@ -36,6 +43,7 @@ onMounted(async () => {
       :clearable="clearable"
       :readonly="readonly"
       :density="density"
+      :rules="rules"
   ></v-select>
 </template>
 

package/src/combobox/TenantCombobox.vue

@@ -3,15 +3,15 @@
 import {ref, onMounted, defineModel} from 'vue'
 import type { PropType } from 'vue'
 import {useI18n} from "vue-i18n";
-const {t} = useI18n()
+const {t,te} = useI18n()
 defineProps({
-  errorMessages: {
-    type: String as PropType<string | string[] | undefined>,
-  },
-  clearable: {
-    type: Boolean,
-    default: false,
-  }
+  errorMessages: {type: String as PropType<string | string[] | undefined>,},
+  clearable: {type: Boolean, default: false},
+  readonly: {type: Boolean, default: false},
+  rules: {type: Array as PropType<any[]>, default: () => []},
+  label: {type: String, default: 'tenant.entity'},
+  density: {type: String as PropType<'comfortable' | 'compact' | 'default'>, default: 'default'},
+  variant: {type: String as PropType<'underlined' | 'outlined' | 'filled' | 'solo' | 'solo-inverted' | 'solo-filled' | 'plain'>, default: 'filled'},
 })
 
 const model = defineModel<any>()
@@ -29,13 +29,15 @@ onMounted(async () => {
 <template>
   <v-select
       v-model="model"
-      :label="t ? t('tenant.entity') : 'Tenant'"
+      :label="te(label) ? t(label) : label"
       :items="items"
       item-title="name"
       item-value="id"
       variant="outlined"
       :error-messages="errorMessages"
       :clearable="clearable"
+      :rules="rules"
+      :readonly="readonly"
   ></v-select>
 </template>
 

package/src/components/IdentityChangeOwnPassword/IdentityChangeOwnPassword.vue

@@ -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.action.changeOwnPassword') }}</v-card-title>
               <v-card-text v-if="errorMsg">
                 <v-alert type="error">
                   {{ 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.field.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.field.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.field.confirmPassword') }}</div>
                 <v-text-field
                     variant="outlined"
                     id="confirm-password-input"

package/src/components/IdentityProfileDrawer/IdentityProfileDrawer.vue

@@ -37,7 +37,7 @@ const valueModel = defineModel<boolean>()
         <v-list-item
             @click="auth.logout()"
             prepend-icon="mdi-logout"
-            :title="t('user.logout')"
+            :title="t('user.action.logout')"
         >
         </v-list-item>
       </v-list>
@@ -48,7 +48,7 @@ const valueModel = defineModel<boolean>()
         <v-list-item
             href="/login"
             prepend-icon="mdi-login"
-            :title="t('user.login')"
+            :title="t('user.action.login')"
         >
         </v-list-item>
       </v-list>

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

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

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

@@ -0,0 +1,116 @@
+<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)
+
+</script>
+
+<template>
+
+
+  <v-form v-model="valid" ref="formRef" @submit.prevent="submit">
+    <v-card flat>
+      <v-alert v-if="valueModel.readonly && store.operation != 'view'" type="warning">
+        {{ t('role.readonly') }}
+      </v-alert>
+
+      <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
+              id="name-input"
+              name="name"
+              :label="$t('role.field.name')"
+              v-model="valueModel.name"
+              prepend-inner-icon="mdi-card-account-details"
+              :variant="variant"
+              :error-messages="$ta(store.inputErrors?.name)"
+              :rules="[v => !!v || 'validation.required']"
+              density="default"
+              :readonly="readonly"
+              :clearable="false"
+          ></v-text-field>
+
+          <RoleCombobox
+              v-model="valueModel.childRoles"
+              label="role.field.childRoles"
+              :error-messages="$ta(store.inputErrors?.role)"
+              multiple
+              :readonly="readonly"
+              :variant="variant"
+          ></RoleCombobox>
+
+          <PermissionSelector
+              v-model="valueModel.permissions"
+              :readonly="readonly"
+          ></PermissionSelector>
+
+        </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/tenant-crud/TenantCrud.ts

@@ -73,6 +73,14 @@ class TenantCrud extends EntityCrud implements IEntityCrud {
     return ['_id', 'name']
   }
 
+  get isExportable(){
+    return true
+  }
+
+  get isImportable(){
+    return false
+  }
+
 }
 
 export default TenantCrud

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

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import {useI18n} from "vue-i18n";
+const {t} = useI18n()
+</script>
+
+<template>
+  <v-tooltip location="top">
+    <template v-slot:activator="{ props}">
+      <v-btn
+          v-bind="{ ...$attrs, ...props }"
+          icon="mdi-form-textbox-password"
+          class="mr-1"
+          variant="text"
+          color="orange"
+          slim
+      >
+      </v-btn>
+    </template>
+      {{ t('user.action.changePassword')}}
+  </v-tooltip>
+</template>
+
+<style scoped>
+
+</style>

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

@@ -95,6 +95,17 @@ class UserCrud extends EntityCrud implements IEntityCrud {
     return ['_id', 'name','username','email','phone','role.name','tenant.name','active']
   }
 
+  get exportFormats(){
+    return ['CSV']
+  }
+
+  get isExportable(){
+    return true
+  }
+
+  get isImportable(){
+    return false
+  }
 }
 
 export default UserCrud

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

@@ -1,12 +1,10 @@
 <script setup lang="ts">
 import {computed, ref} from 'vue'
-import UserList from "./UserList.vue";
 import {useUser} from "../../composables/useUser";
 import type {IUser, IUserCreate, IUserUpdate} from "@drax/identity-share";
 import type {IUserPassword} from "@drax/identity-front";
-import UserCreateForm from "../../forms/UserCreateForm.vue";
-import UserEditForm from "../../forms/UserEditForm.vue";
-import UserPasswordForm from "../../forms/UserPasswordForm.vue";
+import UserCreateForm from "./UserForm.vue";
+import UserPasswordForm from "./UserPasswordForm.vue";
 import UserView from "../../views/UserView.vue";
 import {useI18n} from "vue-i18n";
 
@@ -154,13 +152,7 @@ function toChangePassword(item: IUser) {
         </v-btn>
       </v-toolbar>
       <v-theme-provider with-background class="pa-2 rounded-b">
-        <UserList
-            ref="userList"
-            @toEdit="toEdit"
-            @toDelete="toDelete"
-            @toChangePassword="toChangePassword"
-            :filterEnable="filterEnable"
-        />
+
       </v-theme-provider>
     </v-card>
 
@@ -181,12 +173,7 @@ function toChangePassword(item: IUser) {
                 @formSubmit="save"
             />
 
-            <UserEditForm
-                v-if="dialogMode === 'edit'"
-                v-model="editForm"
-                :inputErrors="inputErrors"
-                @formSubmit="save"
-            />
+
 
             <UserView v-if="dialogMode === 'delete'
             && target" :user="target"

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

@@ -0,0 +1,177 @@
+<script setup lang="ts">
+import {useFormUtils, useCrudStore} from "@drax/crud-vue";
+import {defineEmits, defineModel, defineProps, ref} from "vue";
+import {useI18nValidation} from "@drax/common-vue";
+import RoleCombobox from "../../combobox/RoleCombobox.vue";
+import TenantCombobox from "../../combobox/TenantCombobox.vue";
+import {useI18n} from "vue-i18n";
+
+const {$ta} = useI18nValidation()
+const {t, te} = useI18n()
+
+defineProps({
+  enablePassword: {type: Boolean, default: false}
+})
+
+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)
+
+
+let passwordVisibility = ref(false)
+
+</script>
+
+<template>
+  <v-form v-model="valid" ref="formRef" @submit.prevent="submit">
+    <v-card flat>
+
+      <v-alert v-if="valueModel.readonly && store.operation != 'view'" type="warning">
+        {{ t('role.readonly') }}
+      </v-alert>
+
+      <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
+            id="name-input"
+            :label="$t('user.field.name')"
+            v-model="valueModel.name"
+            prepend-inner-icon="mdi-card-account-details"
+            :variant="variant"
+            :rules="[v => !!v || t('validation.required')]"
+            :error-messages="$ta(store.inputErrors?.name)"
+            :readonly="readonly"
+        ></v-text-field>
+
+        <v-text-field
+            id="username-input"
+            :label="$t('user.field.username')"
+            v-model="valueModel.username"
+            prepend-inner-icon="mdi-account-question"
+            :variant="variant"
+            :rules="[v => !!v || t('validation.required')]"
+            autocomplete="new-username"
+            :error-messages="$ta(store.inputErrors?.username)"
+            :readonly="readonly"
+        ></v-text-field>
+
+        <v-text-field
+            v-if="enablePassword"
+            id="password-input"
+            :label="$t('user.field.password')"
+            v-model="valueModel.password"
+            :type="passwordVisibility ? 'text': 'password'"
+            :variant="variant"
+            :rules="[v => !!v || t('validation.required')]"
+            prepend-inner-icon="mdi-lock-outline"
+            :append-inner-icon="passwordVisibility ? 'mdi-eye-off': 'mdi-eye'"
+            @click:append-inner="passwordVisibility = !passwordVisibility"
+            autocomplete="new-password"
+            :error-messages="$ta(store.inputErrors?.password)"
+            :readonly="readonly"
+        ></v-text-field>
+
+        <RoleCombobox
+            v-model="valueModel.role"
+            :label="$t('user.field.role')"
+            :variant="variant"
+            :rules="[(v:any) => !!v || t('validation.required')]"
+            :error-messages="$ta(store.inputErrors?.role)"
+            :readonly="readonly"
+        ></RoleCombobox>
+
+        <TenantCombobox
+            v-model="valueModel.tenant"
+            :label="$t('user.field.tenant')"
+            :variant="variant"
+            :error-messages="$ta(store.inputErrors?.tenant)"
+            clearable
+            :readonly="readonly"
+        ></TenantCombobox>
+
+        <v-text-field
+            v-model="valueModel.email"
+            :variant="variant"
+            id="email-input"
+            :label="$t('user.field.email')"
+            prepend-inner-icon="mdi-email"
+            :rules="[(v:any) => !!v || t('validation.required')]"
+            :error-messages="$ta(store.inputErrors?.email)"
+            :readonly="readonly"
+        ></v-text-field>
+
+        <v-text-field
+            v-model="valueModel.phone"
+            :variant="variant"
+            id="phone-input"
+            :label="$t('user.field.phone')"
+            prepend-inner-icon="mdi-phone"
+            :rules="[(v:any) => !!v || t('validation.required')]"
+            :error-messages="$ta(store.inputErrors?.phone)"
+            :readonly="readonly"
+        ></v-text-field>
+
+        <v-switch
+            id="active-input"
+            v-model="valueModel.active"
+            color="primary"
+            label="Active"
+            :true-value="true"
+            :false-value="false"
+            :readonly="readonly"
+        ></v-switch>
+
+      </v-card-text>
+
+      <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/UserPasswordDialog.vue

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import UserPasswordForm from "./UserPasswordForm.vue";
+import {defineModel, defineProps, type PropType, ref} from "vue";
+import type {IUserPassword} from "@drax/identity-front";
+import type {IUser} from "@drax/identity-share";
+import {UserSystemFactory} from "@drax/identity-front";
+import {ClientError, type IClientInputError} from "@drax/common-front";
+import {useI18n} from "vue-i18n";
+
+const {t} = useI18n()
+
+const valueModel = defineModel({type: Boolean, default: false})
+
+const {user} = defineProps({
+  user: {type: Object as PropType<IUser>, required: true},
+})
+
+const userSystem = UserSystemFactory.getInstance()
+
+let passwordForm = ref<IUserPassword>({newPassword: "", confirmPassword: ""})
+let passwordChanged = ref(false);
+let inputErrors = ref<IClientInputError>()
+let loading = ref(false);
+let userError = ref<string>('')
+
+async function savePassword() {
+  if (passwordForm.value.newPassword === passwordForm.value.confirmPassword) {
+    passwordChanged.value = await changeUserPassword(user.id, passwordForm.value.newPassword)
+    return
+  } else {
+    return
+  }
+}
+
+async function changeUserPassword(id: string, newPassword: string) {
+  try {
+    loading.value = true
+    return await userSystem.changeUserPassword(id, newPassword)
+  } catch (err) {
+    if (err instanceof ClientError) {
+      inputErrors.value = err.inputErrors
+    }
+    if (err instanceof Error) {
+      userError.value = err.message
+    }
+    throw err
+  } finally {
+    loading.value = false
+  }
+}
+
+</script>
+
+<template>
+  <v-dialog v-model="valueModel" max-width="800">
+    <v-card>
+      <v-card-title>{{t('user.operation.changePassword')}}</v-card-title>
+      <v-card-subtitle>{{t('user.field.username')}}: {{user.username}}</v-card-subtitle>
+      <v-card-text>
+        <user-password-form
+            v-model="passwordForm"
+            :inputErrors="inputErrors"
+            :passwordChanged="passwordChanged"
+            @formSubmit="savePassword"
+        />
+      </v-card-text>
+
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn
+            variant="text"
+            color="grey"
+            @click="valueModel = false">
+          {{ passwordChanged ? t('action.close') : t('action.cancel') }}
+        </v-btn>
+        <v-btn
+            v-if="!passwordChanged"
+            variant="flat"
+            color="primary"
+            @click="savePassword"
+            :loading="loading"
+        >
+          {{  t('action.change') }}
+        </v-btn>
+      </v-card-actions>
+
+    </v-card>
+
+  </v-dialog>
+</template>
+
+<style scoped>
+
+</style>