@drax/identity-vue 0.0.10

package/src/forms/UserPasswordForm.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import {ref, defineModel, type PropType, computed} from "vue";
+import type {IClientInputError} from "@drax/common-front";
+import type {IUser, IUserPassword} from "@drax/identity-front";
+import {useI18nValidation} from "../composables/useI18nValidation";
+import {useI18n} from "vue-i18n";
+
+const {t} = useI18n()
+const {$ta} = useI18nValidation()
+
+let newPasswordVisibility = ref(false)
+
+
+const props = defineProps({
+  inputErrors: {
+    type: Object as PropType<IClientInputError>,
+    default: () => ({id: "", newPassword: ""})
+  },
+  passwordChanged: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const form = defineModel<IUserPassword>({
+  type: Object as PropType<IUserPassword>,
+  default: () => ({newPassword: "", confirmPassword: ""})
+})
+
+function confirmPasswordRule(value: string) {
+  return form.value.newPassword === form.value.confirmPassword || t('validation.password.confirmed')
+}
+
+
+</script>
+
+<template>
+
+  <v-sheet v-if="passwordChanged">
+    <v-alert type="success">
+      {{ $t('user.passwordChanged') }}
+    </v-alert>
+  </v-sheet>
+  <v-sheet v-else>
+    <form ref="changeUserPassword">
+
+      <div class="text-subtitle-1 text-medium-emphasis">{{ $t('user.newPassword') }}</div>
+      <v-text-field
+          variant="outlined"
+          id="new-password-input"
+          v-model="form.newPassword"
+          :type="newPasswordVisibility ? 'text': 'password'"
+          required
+          prepend-inner-icon="mdi-lock-outline"
+          :append-inner-icon="newPasswordVisibility ? 'mdi-eye-off': 'mdi-eye'"
+          @click:append-inner="newPasswordVisibility = !newPasswordVisibility"
+          autocomplete="new-password"
+          :error-messages="$ta(inputErrors.newPassword)"
+      ></v-text-field>
+      <div class="text-subtitle-1 text-medium-emphasis">{{ $t('user.confirmPassword') }}</div>
+      <v-text-field
+          variant="outlined"
+          id="confirm-password-input"
+          v-model="form.confirmPassword"
+          :type="newPasswordVisibility ? 'text': 'password'"
+          required
+          prepend-inner-icon="mdi-lock-outline"
+          :append-inner-icon="newPasswordVisibility ? 'mdi-eye-off': 'mdi-eye'"
+          @click:append-inner="newPasswordVisibility = !newPasswordVisibility"
+          autocomplete="new-password"
+          :error-messages="$ta(inputErrors.confirmPassword)"
+          :rules="[confirmPasswordRule]"
+      ></v-text-field>
+    </form>
+  </v-sheet>
+
+</template>
+
+<style scoped>
+
+</style>

package/src/i18n/I18n.ts

@@ -0,0 +1,10 @@
+import {createI18n} from "vue-i18n";
+import messages from "@/i18n/I18nMessages";
+
+const i18n = createI18n({
+  locale: 'es',
+  fallbackLocale: 'en',
+  messages: messages
+})
+
+export default i18n

package/src/i18n/I18nMessages.ts

@@ -0,0 +1,21 @@
+import {commonValidationI18n, identityValidationI18n} from "@drax/i18n-share"
+import merge from 'deepmerge'
+
+const mainMsg = {
+  en: {
+    main: {
+      home: 'Home',
+    }
+  },
+  es: {
+    main: {
+      home: 'Principal',
+    }
+  }
+}
+
+const messages = merge.all([mainMsg,commonValidationI18n, identityValidationI18n])
+
+console.log("messages",messages)
+
+export default messages

package/src/icons/IconCommunity.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
+    <path
+      d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
+    />
+  </svg>
+</template>

package/src/index.ts

@@ -0,0 +1,51 @@
+import IdentityLogin from "./components/IdentityLogin/IdentityLogin.vue";
+import IdentityProfileAvatar from "./components/IdentityProfileAvatar/IdentityProfileAvatar.vue";
+import IdentityProfileDrawer from "./components/IdentityProfileDrawer/IdentityProfileDrawer.vue";
+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 RoleForm from "./forms/RoleForm.vue";
+
+import RoleCrud from "./cruds/role-crud/RoleCrud.vue";
+import RoleList from "./cruds/role-crud/RoleList.vue";
+import RoleCrudPage from "./pages/RoleCrudPage.vue";
+
+import {useAuth} from "./composables/useAuth.js";
+import {useUser} from "./composables/useUser.js";
+import {useRole} from "./composables/useRole.js";
+import {useAuthStore} from "./stores/auth/AuthStore.js";
+
+export {
+    //Vue Components
+    IdentityLogin,
+    IdentityProfileAvatar,
+    IdentityProfileView,
+    IdentityProfileDrawer,
+
+    //Forms
+    UserCreateForm,
+    UserEditForm,
+    RoleForm,
+
+    //Vue Composables
+    useAuth,
+    useUser,
+    useRole,
+
+    //Cruds
+    UserCrud,
+    UserList,
+
+    RoleCrud,
+    RoleList,
+
+    //Pages
+    UserCrudPage,
+    RoleCrudPage,
+
+    //Stores
+    useAuthStore
+}

package/src/pages/RoleCrudPage.vue

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

package/src/pages/UserCrudPage.vue

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

package/src/stores/auth/AuthStore.ts

@@ -0,0 +1,38 @@
+// Utilities
+import { defineStore } from 'pinia'
+import type {IAuthUser} from "@drax/identity-front";
+import type from 'pinia-plugin-persistedstate'
+import {AuthHelper} from "@drax/identity-front";
+
+export const useAuthStore = defineStore('AuthStore', {
+  state: () => ({
+    accessToken: null as string | null,
+    authUser: null as IAuthUser | null,
+  }),
+  getters:{
+    isAuth: (state): boolean => {
+      //TODO verify token
+      return !!state.accessToken
+    },
+    hasPermission: (state) => (permission:string) => {
+      return state.authUser && state.authUser.role && state.authUser.role.permissions ? state.authUser.role.permissions.includes(permission) : false
+    },
+    tokenIsValid: (state) => () => {
+      return state.accessToken ? AuthHelper.isJWTValid(state.accessToken) : false
+    },
+  },
+  actions:{
+    setAccessToken(accessToken:string){
+      this.accessToken = accessToken
+    },
+    setAuthUser(authUser:IAuthUser){
+      this.authUser = authUser
+    },
+    clearAuth(){
+      this.accessToken = null
+      this.authUser = null
+    }
+  },
+
+  persist: true
+})

package/src/views/RoleView.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type {PropType} from "vue";
+import type {IRole} from "@drax/identity-front";
+
+const props = defineProps({
+  role:{
+    type: Object as PropType<IRole>,
+    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('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 }}
+      </v-chip>
+    </v-sheet>
+  </v-sheet>
+
+</template>
+
+<style scoped>
+
+</style>

package/src/views/UserView.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type {PropType} from "vue";
+import type {IUser} from "@drax/identity-front";
+import IdentityProfileAvatar from "../components/IdentityProfileAvatar/IdentityProfileAvatar.vue";
+
+const props = defineProps({
+  user:{
+    type: Object as PropType<IUser>,
+    required: true,
+  }
+})
+</script>
+
+<template>
+  <v-sheet border 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">{{ user.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">{{ user.email }}</h6>
+      <h6 class="text-subtitle-2">role: {{ user.role?.name }}</h6>
+    </v-sheet>
+  </v-sheet>
+</template>
+
+<style scoped>
+
+</style>