@drax/identity-vue 0.0.10

package/src/components/IdentityProfileDrawer/IdentityProfileDrawer.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import {useAuth} from "../../composables/useAuth";
+import {defineModel, ref} from "vue";
+import IdentityProfileView from "../IdentityProfileView/IdentityProfileView.vue";
+import IdentityChangeOwnPassword from "../../components/IdentityChangeOwnPassword/IdentityChangeOwnPassword.vue";
+
+const auth = useAuth()
+const valueModel = defineModel()
+const profile = ref(false)
+const changePassword = ref(false)
+
+
+</script>
+
+<template>
+
+
+  <v-navigation-drawer
+      v-model="valueModel"
+      location="right"
+  >
+
+    <template v-if="auth.isAuthenticated()">
+      <identity-profile-view></identity-profile-view>
+      <v-divider></v-divider>
+
+      <v-list>
+        <v-list-item
+            @click="profile = !profile"
+            prepend-icon="mdi-account-cog"
+            :title="$t('user.profile')"
+        >
+        </v-list-item>
+        <v-list-item
+            @click="auth.logout()"
+            prepend-icon="mdi-logout"
+            :title="$t('user.logout')"
+        >
+        </v-list-item>
+      </v-list>
+    </template>
+
+    <template v-else>
+      <v-list>
+        <v-list-item
+            href="/login"
+            prepend-icon="mdi-login"
+            :title="$t('user.login')"
+        >
+        </v-list-item>
+      </v-list>
+    </template>
+
+    <v-dialog v-model="profile"  fullscreen :on-after-leave="changePassword=false">
+      <v-toolbar>
+        <v-toolbar-title>
+          {{$t('user.profile')}}
+        </v-toolbar-title>
+        <v-spacer></v-spacer>
+        <v-btn icon @click="profile = !profile">
+          <v-icon>mdi-close</v-icon>
+        </v-btn>
+      </v-toolbar>
+      <v-card >
+        <v-card-text class="flex-shrink-1 flex-grow-0">
+          <identity-profile-view></identity-profile-view>
+        </v-card-text>
+        <v-card-text class="text-center flex-grow-1">
+          <IdentityChangeOwnPassword v-if="changePassword"></IdentityChangeOwnPassword>
+          <v-btn v-else  color="blue" variant="tonal" @click="changePassword = true">{{$t('user.changeOwnPassword')}}</v-btn>
+
+        </v-card-text>
+      </v-card>
+    </v-dialog>
+
+  </v-navigation-drawer>
+
+</template>
+
+<style scoped>
+
+</style>

package/src/components/IdentityProfileView/IdentityProfileView.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import {useAuthStore} from "../../stores/auth/AuthStore.js";
+import IdentityProfileAvatar from "../IdentityProfileAvatar/IdentityProfileAvatar.vue";
+const emit = defineEmits(['click'])
+const authStore = useAuthStore()
+const onClick = () => {
+  emit('click')
+}
+</script>
+
+<template>
+  <v-sheet class="position-relative d-flex justify-center align-center" height="150">
+    <v-sheet class="position-absolute bg-surface-light w-100 top-0" height="65"></v-sheet>
+    <v-sheet class="text-center">
+      <identity-profile-avatar :avatar-size="70"></identity-profile-avatar>
+      <h6 class="text-h6">{{ authStore.authUser?.username }}</h6>
+    </v-sheet>
+  </v-sheet>
+
+  <v-divider></v-divider>
+  <v-sheet class="d-flex justify-center align-center" height="50">
+    <v-sheet class="text-center">
+      <h6 class="text-caption">{{ authStore.authUser?.email }}</h6>
+      <h6 class="text-subtitle-2">role: {{ authStore.authUser?.role?.name }}</h6>
+    </v-sheet>
+  </v-sheet>
+</template>
+
+<style scoped>
+
+</style>

package/src/components/PermissionSelector/PermissionSelector.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+
+import {ref, onMounted, defineModel, computed} from 'vue'
+import type {PropType} from 'vue'
+
+const props = defineProps({
+  errorMessages: {
+    type: String as PropType<string | string[] | undefined>,
+  }
+})
+
+const model = defineModel()
+import {useRole} from "../../composables/useRole";
+
+const {fetchPermissions} = useRole()
+let items = ref([])
+
+onMounted(async () => {
+  items.value = await fetchPermissions()
+})
+
+interface PermissionGroups {
+  [key: string]: string[];
+}
+
+const permissionGroups = computed(() => {
+  const groups = items.value.reduce((acc: PermissionGroups, permission: string) => {
+    if (permission.includes(':')) {
+      const [entity, action] = permission.split(':');
+      if (!acc[entity]) {
+        acc[entity] = [];
+      }
+      acc[entity].push(permission);
+    } else {
+      // Si el permiso no sigue el formato entidad:acción, lo asignamos al grupo 'general'
+      const generalGroup = 'general';
+      if (!acc[generalGroup]) {
+        acc[generalGroup] = [];
+      }
+      acc[generalGroup].push(permission);
+    }
+    return acc;
+  }, {});
+
+  return groups;
+})
+
+
+</script>
+
+<template>
+  <v-sheet  class="pa-2">
+    <h5 class="text-h5 mb-2">{{$t ? $t('permission.permissions') : 'Permissions'}}</h5>
+  <v-item-group
+      v-model="model"
+      variant="outlined"
+      divided
+      multiple
+      color="green"
+  >
+    <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 }}
+        </v-card-title>
+        <v-card-text>
+          <v-item
+              v-for="permission in permissions"
+              v-slot="{ isSelected, toggle }"
+              :value="permission"
+          >
+            <v-btn
+                :color="isSelected? 'green' : 'grey-darken-3'" class=""
+                @click="toggle" variant="flat" :rounded="false" border
+            >
+              {{ $t ? $t('permission.'+permission) : permission }}
+            </v-btn>
+          </v-item>
+        </v-card-text>
+      </v-card>
+    </template>
+  </v-item-group>
+
+  </v-sheet>
+</template>
+
+<style scoped>
+
+</style>

package/src/composables/useAuth.ts

@@ -0,0 +1,53 @@
+import {useAuthStore} from "../stores/auth/AuthStore";
+import {AuthHelper, AuthSystem} from "@drax/identity-front";
+import {inject} from "vue";
+
+export function useAuth() {
+
+    const authStore = useAuthStore()
+
+    const authSystem = inject('AuthSystem') as AuthSystem
+
+    const login = async (username:string, password:string) => {
+            const {accessToken} = await authSystem.login(username, password)
+            authStore.setAccessToken(accessToken)
+            const authUser = await authSystem.me()
+            authStore.setAuthUser(authUser)
+    }
+
+    const changeOwnPassword = async (currentPassword:string, newPassword:string) => {
+        return  await authSystem.changeOwnPassword(currentPassword, newPassword)
+    }
+
+    async function fetchAuthUser() {
+        const authUser =  await authSystem.me()
+        authStore.setAuthUser(authUser)
+        return authUser
+    }
+
+    function logout(){
+        authSystem.logout()
+        authStore.clearAuth()
+    }
+
+    function hasPermission(permission:string) {
+        return authStore?.authUser?.role?.permissions ? authStore.authUser.role.permissions.includes(permission) : false
+    }
+
+    function tokenIsValid(){
+        return authStore.accessToken ? AuthHelper.isJWTValid(authStore.accessToken) : false
+    }
+
+    function isAuthenticated(){
+        if(tokenIsValid()){
+            return true
+        }else{
+            logout()
+            return false
+        }
+
+    }
+
+    return {hasPermission, logout, tokenIsValid, isAuthenticated, fetchAuthUser, login, changeOwnPassword}
+
+}

package/src/composables/useI18nValidation.ts

@@ -0,0 +1,11 @@
+import {useI18n} from "vue-i18n";
+
+export function useI18nValidation() {
+    const {t} = useI18n()
+
+    function $ta(inputError: string[] | undefined): string | undefined {
+        return inputError ? inputError.map(error => t(error)).join(", ") : undefined
+    }
+
+    return {$ta}
+}

package/src/composables/useRole.ts

@@ -0,0 +1,93 @@
+import {inject, ref} from "vue";
+import type {IRole, RoleSystem} from "@drax/identity-front";
+import {ClientError} from "@drax/common-front";
+import type { IClientInputError} from "@drax/common-front";
+
+
+export function useRole() {
+
+    const roleSystem = inject('RoleSystem') as RoleSystem
+
+    let roleError = ref<string>('')
+    let inputErrors = ref<IClientInputError>()
+    let loading = ref(false);
+
+    async function fetchPermissions(page = 1, perPage = 5) {
+        loading.value = true
+        let permissions = roleSystem.fetchPermissions()
+        loading.value = false
+        return permissions
+    }
+
+    async function fetchRole(page = 1, perPage = 5) {
+        loading.value = true
+        let roles = roleSystem.fetchRole()
+        loading.value = false
+        return roles
+    }
+
+    async function paginateRole(page = 1, perPage = 5, string = "") {
+        loading.value = true
+        let paginatedrole = roleSystem.paginateRole(page, perPage,string)
+        loading.value = false
+        return paginatedrole
+    }
+
+    async function createRole(roleData: IRole) {
+        try {
+            loading.value = true
+            let role: IRole =  await roleSystem.createRole(roleData)
+            return role
+        } catch (err) {
+            if (err instanceof ClientError) {
+                inputErrors.value = err.inputErrors
+            }if(err instanceof Error) {
+                roleError.value = err.message
+            }
+            throw err
+        }finally {
+            loading.value = false
+        }
+
+    }
+
+    async function editRole(id: string, roleData: IRole) {
+        try {
+            loading.value = true
+            let role: IRole = await roleSystem.editRole(id, roleData)
+            return role
+        } catch (err) {
+
+            if (err instanceof ClientError) {
+                inputErrors.value = err.inputErrors
+            }
+            if(err instanceof Error) {
+                roleError.value = err.message
+            }
+            throw err
+        }finally {
+            loading.value = false
+        }
+    }
+
+    async function deleteRole(id: string) {
+        try {
+            loading.value = true
+            await roleSystem.deleteRole(id)
+        } catch (err) {
+            console.log("composable deleteRole error: ", err, )
+            if (err instanceof ClientError) {
+                inputErrors.value = err.inputErrors
+            }
+            if(err instanceof Error) {
+                roleError.value = err.message
+            }
+            throw err
+        }finally {
+            loading.value = false
+        }
+    }
+
+    return {fetchRole, fetchPermissions, paginateRole, createRole, editRole, deleteRole, loading, roleError, inputErrors}
+
+}

package/src/composables/useUser.ts

@@ -0,0 +1,96 @@
+import {inject, ref} from "vue";
+import type {IUserPassword, UserSystem} from "@drax/identity-front";
+import type {IUser} from "@drax/identity-front";
+import type {IClientInputError} from "@drax/common-front";
+import {ClientError} from "@drax/common-front";
+import type {IUserCreate, IUserUpdate} from "@drax/identity-front";
+
+
+export function useUser() {
+
+    const userSystem = inject('UserSystem') as UserSystem
+
+    let userError = ref<string>('')
+    let inputErrors = ref<IClientInputError>()
+    let loading = ref(false);
+
+    async function paginateUser(page = 1, perPage = 5, search = "") {
+        loading.value = true
+        let paginatedUser = userSystem.paginateUser(page, perPage, search)
+        loading.value = false
+        return paginatedUser
+    }
+
+    async function createUser(userData: IUserCreate) {
+        try {
+            loading.value = true
+            let user: IUser =  await userSystem.createUser(userData)
+            return user
+        } catch (err) {
+            if (err instanceof ClientError) {
+                inputErrors.value = err.inputErrors
+            }if(err instanceof Error) {
+                userError.value = err.message
+            }
+            throw err
+        }finally {
+            loading.value = false
+        }
+
+    }
+
+    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
+        }
+    }
+
+    async function editUser(id: string, userData: IUserUpdate) {
+        try {
+            loading.value = true
+            let user: IUser = await userSystem.editUser(id, userData)
+            return user
+        } catch (err) {
+            if (err instanceof ClientError) {
+                inputErrors.value = err.inputErrors
+            }
+            if(err instanceof Error) {
+                userError.value = err.message
+            }
+            throw err
+        }finally {
+            loading.value = false
+        }
+    }
+
+    async function deleteUser(id: string) {
+        try {
+            loading.value = true
+            await userSystem.deleteUser(id)
+        } catch (err) {
+            console.log("composable deleteUser error: ", err, )
+            if (err instanceof ClientError) {
+                inputErrors.value = err.inputErrors
+            }
+            if(err instanceof Error) {
+                userError.value = err.message
+            }
+            throw err
+        }finally {
+            loading.value = false
+        }
+    }
+
+    return {paginateUser, createUser, editUser, changeUserPassword, deleteUser, loading, userError, inputErrors}
+}

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

@@ -0,0 +1,165 @@
+<script setup lang="ts">
+import {computed, ref} from 'vue'
+import RoleList from "./RoleList.vue";
+import {useRole} from "../../composables/useRole";
+import type {IRole} from "@drax/identity-front";
+import RoleForm from "../../forms/RoleForm.vue";
+import RoleView from "../../views/RoleView.vue";
+
+const {createRole, editRole, deleteRole, loading, roleError, inputErrors} = useRole()
+
+interface RoleList {
+  loadItems: () => void;
+  items: IRole[];
+}
+
+type DialogMode = 'create' | 'edit' | 'delete' | null;
+
+
+let dialog = ref(false);
+let dialogMode = ref<DialogMode>(null);
+let dialogTitle = ref('');
+const roleList = ref<RoleList | null>(null);
+let form = ref<IRole>({name: "", permissions: [], readonly: false})
+let target = ref<IRole>();
+let targetId = ref<string>('');
+let filterEnable = ref(false);
+
+function cancel() {
+  dialog.value = false
+  inputErrors.value = {}
+  roleError.value = '';
+  dialogMode.value = null
+  dialogTitle.value = ''
+  targetId.value = ''
+  target.value = undefined
+}
+
+async function save() {
+
+  try {
+    if (dialogMode.value === 'create') {
+      await createRole(form.value)
+    } else if (dialogMode.value === 'edit') {
+      await editRole(targetId.value, form.value)
+    } else if (dialogMode.value === 'delete') {
+      await deleteRole(targetId.value)
+    }
+    dialog.value = false
+    inputErrors.value = {}
+    roleError.value = '';
+    if (roleList.value !== null) {
+      roleList.value.loadItems()
+    }
+  } catch (e) {
+    console.error(e)
+    if (e instanceof Error) {
+      roleError.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 = 'role.creating';
+  form.value = {name: "", permissions: [], readonly: false}
+  dialog.value = true;
+}
+
+function toEdit(item: IRole) {
+  console.log('toEdit', item)
+  dialogMode.value = 'edit';
+  dialogTitle.value = 'role.updating';
+  const {id, ...rest} = item;
+  targetId.value = id;
+  form.value = {...rest}
+  dialog.value = true;
+}
+
+function toDelete(item: IRole) {
+  console.log('toDelete', item)
+  dialogMode.value = 'delete';
+  dialogTitle.value = 'role.deleting';
+  target.value = item
+  const {id} = item;
+  targetId.value = id;
+  dialog.value = true;
+}
+
+</script>
+
+<template>
+  <v-container>
+
+    <v-sheet border rounded>
+      <v-toolbar>
+        <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') }}
+        </v-btn>
+      </v-toolbar>
+      <v-theme-provider with-background class="pa-2 rounded-b">
+        <RoleList
+            ref="roleList"
+            @toEdit="toEdit"
+            @toDelete="toDelete"
+            :filterEnable="filterEnable"
+        />
+      </v-theme-provider>
+    </v-sheet>
+
+    <v-dialog v-model="dialog" max-width="800">
+      <v-sheet border>
+        <v-toolbar>
+          <v-toolbar-title>{{ $t(dialogTitle) }}</v-toolbar-title>
+        </v-toolbar>
+        <v-card class="pa-10">
+          <v-card-text v-if="roleError">
+            <v-alert type="error">{{ roleError }}</v-alert>
+          </v-card-text>
+          <v-card-text>
+            <RoleForm v-if="dialogMode === 'create' || dialogMode === 'edit'"
+                      v-model="form"
+                      :inputErrors="inputErrors"
+            />
+            <RoleView v-if="dialogMode === 'delete' && target" :role="target"></RoleView>
+          </v-card-text>
+          <v-card-actions>
+            <v-spacer></v-spacer>
+            <v-btn variant="text" @click="cancel" :loading="loading">Cancelar</v-btn>
+            <v-btn 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>