@drax/identity-vue 0.5.3 → 0.5.5

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>

package/src/{forms → cruds/user-crud}/UserPasswordForm.vue

@@ -50,7 +50,7 @@ const onSubmit = () => {
   <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.field.newPassword') }}</div>
       <v-text-field
           variant="outlined"
           id="new-password-input"
@@ -63,7 +63,9 @@ 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.field.confirmPassword') }}</div>
+
       <v-text-field
           variant="outlined"
           id="confirm-password-input"

package/src/index.ts

@@ -4,35 +4,28 @@ import IdentityProfileDrawer from "./components/IdentityProfileDrawer/IdentityPr
 import IdentityProfileView from "./components/IdentityProfileView/IdentityProfileView.vue";
 
 import UserCrud from "./cruds/user-crud/UserCrud.vue";
-import UserList from "./cruds/user-crud/UserList.vue";
-import UserCrudPage from "./pages/UserCrudPage.vue";
-import UserCreateForm from "./forms/UserCreateForm.vue";
-import UserEditForm from "./forms/UserEditForm.vue";
+import UserCrudPage from "./pages/crud/UserCrudPage.vue";
+import UserForm from "./cruds/user-crud/UserForm.vue";
 import UserView from "./views/UserView.vue";
 
-import RoleForm from "./forms/RoleForm.vue";
+import RoleForm from "./cruds/role-crud/RoleForm.vue";
 import RoleView from "./views/RoleView.vue";
-import RoleCrud from "./cruds/role-crud/RoleCrud.vue";
-import RoleList from "./cruds/role-crud/RoleList.vue";
-import RoleCrudPage from "./pages/RoleCrudPage.vue";
+import RoleCrudPage from "./pages/crud/RoleCrudPage.vue";
 
 import LoginPage from "./pages/LoginPage.vue";
 import ProfilePage from "./pages/ProfilePage.vue";
 import PasswordPage from "./pages/PasswordPage.vue";
 
 
-import TenantForm from "./forms/TenantForm.vue";
 import TenantView from "./views/TenantView.vue";
-import TenantCrud from "./cruds/tenant-crud/TenantCrud.vue";
-import TenantList from "./cruds/tenant-crud/TenantList.vue";
-import TenantCrudPage from "./pages/TenantCrudPage.vue";
+import TenantCrudPage from "./pages/crud/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 UserApiKeyCrudPage from "./pages/crud/UserApiKeyCrudPage.vue";
 
 import {useAuth} from "./composables/useAuth.js";
 import {useUser} from "./composables/useUser.js";
@@ -60,10 +53,8 @@ export {
 
     //User
     UserView,
-    UserCreateForm,
-    UserEditForm,
+    UserForm,
     UserCrud,
-    UserList,
     UserCrudPage,
     useAuth,
     useUser,
@@ -71,16 +62,11 @@ export {
     //Role
     RoleView,
     RoleForm,
-    RoleCrud,
-    RoleList,
     RoleCrudPage,
     useRole,
 
     //Tenant
     TenantView,
-    TenantForm,
-    TenantCrud,
-    TenantList,
     TenantCrudPage,
     useTenant,
 

package/src/pages/ProfilePage.vue

@@ -16,7 +16,7 @@ const { t } = useI18n();
           <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')}}
+              {{t('user.action.changeOwnPassword')}}
             </v-btn>
           </v-card-text>
         </v-card>

package/src/pages/crud/RoleCrudPage.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import {Crud, useCrud} from "@drax/crud-vue";
+import RoleCrud from "../../cruds/role-crud/RoleCrud";
+import RoleForm from "../../cruds/role-crud/RoleForm.vue";
+import {useI18n} from "vue-i18n";
+
+const {t, te} = useI18n()
+
+const {
+  onCancel, onSubmit,form
+} = useCrud(RoleCrud.instance);
+
+</script>
+
+<template>
+  <crud :entity="RoleCrud.instance">
+
+    <template v-slot:form>
+      <role-form
+          v-model="form"
+          @submit="onSubmit"
+          @cancel="onCancel"
+      />
+    </template>
+
+    <template v-slot:item.permissions="{ value }">
+      <v-chip
+          v-for="permission in value"
+          :key="permission" color="green"
+          class="ma-1"
+      >
+        {{ te(`permission.${permission}`) ? t(`permission.${permission}`) : permission }}
+      </v-chip>
+    </template>
+
+    <template v-slot:item.childRoles="{ value }">
+
+        <v-chip
+            v-for="role in value"
+            :key="role" color="blue"
+            class="ma-1"
+        >
+          {{ role.name }}
+        </v-chip>
+
+    </template>
+
+    <template v-slot:item.readonly="{ value }">
+      <v-chip v-if="value" color="red">
+        <v-icon class="mdi mdi-pencil-off-outline"></v-icon>
+      </v-chip>
+      <v-chip v-else color="green">
+        <v-icon class="mdi mdi-pencil-outline"></v-icon>
+      </v-chip>
+    </template>
+
+  </crud>
+</template>
+
+<style scoped>
+
+</style>

package/src/pages/{TenantCrudPage.vue → crud/TenantCrudPage.vue}

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import TenantCrud from '../cruds/tenant-crud/TenantCrud'
+import TenantCrud from '../../cruds/tenant-crud/TenantCrud'
 import {Crud} from "@drax/crud-vue";
 </script>
 

package/src/pages/{UserApiKeyCrudPage.vue → crud/UserApiKeyCrudPage.vue}

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

package/src/pages/crud/UserCrudPage.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import {ref} from "vue"
+import UserCrud from "../../cruds/user-crud/UserCrud";
+import {Crud, useCrud} from "@drax/crud-vue";
+import UserForm from "../../cruds/user-crud/UserForm.vue";
+import PasswordUpdateButton from "../../cruds/user-crud/PasswordUpdateButton.vue";
+import UserPasswordDialog from "../../cruds/user-crud/UserPasswordDialog.vue";
+import type {IUser} from "@drax/identity-share";
+
+const {onCancel, onSubmit,form, operation } = useCrud(UserCrud.instance);
+
+const dialogPassword = ref(false);
+const userSelected = ref();
+
+function onChangePassword(user:IUser){
+  console.log("onChangePassword for user: ", user);
+  userSelected.value = user;
+  dialogPassword.value = true;
+}
+
+</script>
+
+<template>
+  <div>
+    <user-password-dialog
+        v-if="dialogPassword && userSelected"
+        v-model="dialogPassword"
+        :user="userSelected"
+    />
+
+    <crud :entity="UserCrud.instance">
+
+      <template v-slot:form>
+        <user-form
+            :enable-password="operation === 'create'"
+            v-model="form"
+            @submit="onSubmit"
+            @cancel="onCancel"
+        />
+      </template>
+
+
+
+      <template v-slot:item.actions="{ item }">
+        <password-update-button @click="onChangePassword(item as IUser)"></password-update-button>
+      </template>
+
+
+      <template v-slot:item.active="{ value }" >
+        <v-chip :color="value ? 'green':'red'" >
+          {{ value ? 'Active' : 'Inactive' }}
+        </v-chip>
+      </template>
+    </crud>
+  </div>
+
+</template>
+
+<style scoped>
+
+</style>

package/src/routes/IdentityRoutes.ts

@@ -1,72 +1,78 @@
 import LoginPage from '../pages/LoginPage.vue'
 import ProfilePage from '../pages/ProfilePage.vue'
 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'
+import UserCrudPage from '../pages/crud/UserCrudPage.vue'
+import RoleCrudPage from '../pages/crud/RoleCrudPage.vue'
+import TenantCrudPage from '../pages/crud/TenantCrudPage.vue'
+import UserApiKeyCrudPage from '../pages/crud/UserApiKeyCrudPage.vue'
 
 const routes = [
-  {
-    name: 'Login',
-    path: '/login',
-    component: LoginPage,
-    meta: {
-      auth: false,
-    }
-  },
-  {
-    name: 'Profile',
-    path: '/profile',
-    component: ProfilePage,
-    meta: {
-      auth: true,
-    }
-  },
-  {
-    name: 'Password',
-    path: '/password',
-    component: PasswordPage,
-    meta: {
-      auth: true,
-    }
-  },
-  {
-    name: 'CrudRole',
-    path: '/crud/role',
-    component: RoleCrudPage,
-    meta: {
-      auth: true,
-      permission: 'role:manage'
-    }
-  },
-  {
-    name: 'CrudTenant',
-    path: '/crud/tenant',
-    component: TenantCrudPage,
-    meta: {
-      auth: true,
-      permission: 'tenant:manage'
-    }
-  },
-  {
-    name: 'CrudUser',
-    path: '/crud/user',
-    component: UserCrudPage,
-    meta: {
-      auth: true,
-      permission: 'user:manage'
-    }
-  },
-  {
-    name: 'CrudUserApiKey',
-    path: '/crud/user-api-key',
-    component: UserApiKeyCrudPage,
-    meta: {
-      auth: true,
-      permission: 'userApiKey:manage'
-    }
-  },
+    {
+        name: 'Login',
+        path: '/login',
+        component: LoginPage,
+        meta: {
+            auth: false,
+        }
+    },
+    {
+        name: 'Profile',
+        path: '/profile',
+        component: ProfilePage,
+        meta: {
+            auth: true,
+        }
+    },
+    {
+        name: 'Password',
+        path: '/password',
+        component: PasswordPage,
+        meta: {
+            auth: true,
+        }
+    },
+    //CRUDS
+    {
+        name: 'CrudRole',
+        path: '/crud/role',
+        component: RoleCrudPage,
+        meta: {
+            auth: true,
+            permission: 'role:manage'
+        }
+    },
+
+    {
+        name: 'CrudTenant',
+        path: '/crud/tenant',
+        component: TenantCrudPage,
+        meta: {
+            auth: true,
+            permission: 'tenant:manage'
+        }
+    },
+
+    {
+        name: 'CrudUser',
+        path: '/crud/user',
+        component: UserCrudPage,
+        meta: {
+            auth: true,
+            permission: 'user:manage'
+        }
+    },
+    {
+        name: 'CrudUserApiKey',
+        path: '/crud/user-api-key',
+        component: UserApiKeyCrudPage,
+        meta: {
+            auth: true,
+            permission: 'userApiKey:manage'
+        }
+    },
+
+
+
 ]