@drax/identity-vue 0.0.27 → 0.0.29

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.0.27",
+  "version": "0.0.29",
   "type": "module",
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -24,10 +24,10 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "@drax/common-front": "^0.0.27",
-    "@drax/common-share": "^0.0.27",
-    "@drax/common-vue": "^0.0.27",
-    "@drax/identity-share": "^0.0.27",
+    "@drax/common-front": "^0.0.29",
+    "@drax/common-share": "^0.0.29",
+    "@drax/common-vue": "^0.0.29",
+    "@drax/identity-share": "^0.0.29",
     "vue-i18n": "^9.13.1"
   },
   "peerDependencies": {
@@ -64,5 +64,5 @@
     "vue-tsc": "^2.0.11",
     "vuetify": "^3.6.4"
   },
-  "gitHead": "bdfe3169ed4088f221468eb536a115802a091377"
+  "gitHead": "a067a1fc430dbc7d31835de79cfe385ba9935914"
 }

package/src/components/IdentityChangeOwnPassword/IdentityChangeOwnPassword.vue

@@ -64,7 +64,7 @@ async function submitChangePassowrd() {
     <template v-else>
 
           <v-form @submit.prevent="submitChangePassowrd">
-            <v-card variant="outlined">
+            <v-card variant="elevated">
               <v-card-title class="pa-4 text-center">{{ $t('user.changeOwnPassword') }}</v-card-title>
               <v-card-text v-if="errorMsg">
                 <v-alert type="error">

package/src/components/IdentityLogin/IdentityLogin.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {computed, defineProps, ref} from 'vue'
+import {computed, ref, defineEmits} from 'vue'
 import {useAuth} from '../../composables/useAuth.js'
 import IdentityProfileView from "../IdentityProfileView/IdentityProfileView.vue";
 
@@ -12,10 +12,13 @@ const loading = ref(false)
 
 const isFormValid = computed(() => username.value.trim() !== '' && password.value.trim() !== '')
 
+const emit = defineEmits(['loginSuccess'])
+
 async function submitLogin() {
   try {
     loading.value = true
     await login(username.value, password.value)
+    emit('loginSuccess')
   } catch (e) {
     const error = e as Error
     authError.value = error.message
@@ -24,25 +27,6 @@ async function submitLogin() {
   }
 }
 
-// Define props for customizing labels, title, and button text
-const props = defineProps({
-  title: {
-    type: String,
-    default: 'Login'
-  },
-  usernameLabel: {
-    type: String,
-    default: 'Username'
-  },
-  passwordLabel: {
-    type: String,
-    default: 'Password'
-  },
-  buttonText: {
-    type: String,
-    default: 'Login'
-  }
-})
 
 let passwordVisibility = ref(false)
 
@@ -53,72 +37,68 @@ function togglePasswordVisibility() {
 </script>
 
 <template>
-  <v-container>
 
-    <template v-if="isAuthenticated()">
-      <v-card>
-        <identity-profile-view></identity-profile-view>
-      </v-card>
-    </template>
+  <template v-if="isAuthenticated()">
+        <v-card>
+          <v-card-text>
+            <identity-profile-view></identity-profile-view>
+          </v-card-text>
+        </v-card>
+  </template>
+
+  <template v-else>
 
-    <template v-else>
-      <v-row justify="center">
-        <v-col cols="12" sm="8" md="6" lg="5" xl="4">
-          <v-form @submit.prevent="submitLogin">
-            <v-card variant="elevated" class="pa-6">
-              <v-card-title class="pa-4 text-center">{{ props.title }}</v-card-title>
-              <v-card-text v-if="authError">
-                <v-alert type="error">
-                  {{ $t ? $t(authError) : authError }}
-                </v-alert>
-              </v-card-text>
-              <v-card-text>
-                <div class="text-subtitle-1 text-medium-emphasis">{{ props.usernameLabel }}</div>
-                <v-text-field
-                    variant="outlined"
-                    id="username-input"
-                    v-model="username"
-                    prepend-inner-icon="mdi-lock-outline"
-                    required
-                    autocomplete="new-username"
-                ></v-text-field>
-                <div class="text-subtitle-1 text-medium-emphasis">{{ props.passwordLabel }}</div>
-                <v-text-field
-                    variant="outlined"
-                    id="password-input"
-                    v-model="password"
-                    :type="passwordVisibility ? 'text': 'password'"
-                    required
-                    prepend-inner-icon="mdi-lock-outline"
-                    :append-inner-icon="passwordVisibility ? 'mdi-eye-off': 'mdi-eye'"
-                    @click:append-inner="togglePasswordVisibility"
-                    autocomplete="new-password"
-                ></v-text-field>
-              </v-card-text>
-              <v-card-actions>
-                <v-spacer></v-spacer>
-                <v-btn
-                    class="mb-8"
-                    color="blue"
-                    size="large"
-                    variant="tonal"
-                    id="submit-button"
-                    type="submit"
-                    block
-                    :disabled="!isFormValid"
-                    :loading="loading"
-                >
-                  {{ props.buttonText }}
-                </v-btn>
-              </v-card-actions>
-            </v-card>
-          </v-form>
-        </v-col>
-      </v-row>
-    </template>
-  </v-container>
+        <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-text v-if="authError">
+              <v-alert type="error">
+                {{ $t ? $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>
+              <v-text-field
+                  variant="outlined"
+                  id="username-input"
+                  v-model="username"
+                  prepend-inner-icon="mdi-lock-outline"
+                  required
+                  autocomplete="new-username"
+              ></v-text-field>
+              <div class="text-subtitle-1 text-medium-emphasis">{{ $t ? $t('auth.password') : 'Password' }}</div>
+              <v-text-field
+                  variant="outlined"
+                  id="password-input"
+                  v-model="password"
+                  :type="passwordVisibility ? 'text': 'password'"
+                  required
+                  prepend-inner-icon="mdi-lock-outline"
+                  :append-inner-icon="passwordVisibility ? 'mdi-eye-off': 'mdi-eye'"
+                  @click:append-inner="togglePasswordVisibility"
+                  autocomplete="new-password"
+              ></v-text-field>
+            </v-card-text>
+            <v-card-actions>
+              <v-spacer></v-spacer>
+              <v-btn
+                  class="mb-8"
+                  color="blue"
+                  size="large"
+                  variant="tonal"
+                  id="submit-button"
+                  type="submit"
+                  block
+                  :disabled="!isFormValid"
+                  :loading="loading"
+              >
+                {{ $t ? $t('auth.login') : 'Login' }}
+              </v-btn>
+            </v-card-actions>
+          </v-card>
+        </v-form>
+  </template>
 </template>
 
-<style scoped lang="sass">
-// Your styles here
+<style scoped>
 </style>

package/src/components/IdentityProfileAvatar/IdentityProfileAvatar.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
+import {defineEmits} from 'vue'
 import {useAuthStore} from "../../stores/auth/AuthStore.js";
 
-const emit = defineEmits(['click'])
+
 
 defineProps({
   avatarSize: {
@@ -15,24 +16,28 @@ defineProps({
 })
 
 const authStore = useAuthStore()
-const onClick = () => {
-  emit('click')
-}
+
+const emits = defineEmits(['click'])
+
 </script>
 
 <template>
   <v-avatar
       :size="avatarSize"
-      @click="onClick"
+      @click="emits('click')"
       color="surface"
       class="border-md border-opacity-100 border-surface-light"
       :class="customClass"
   >
-    <v-img v-if="authStore.authUser && authStore.authUser.avatar" :src="authStore.authUser.avatar"/>
+    <v-img v-if="authStore.authUser && authStore.authUser.avatar" :src="authStore.authUser.avatar" class="d-flex justify-center align-center">
+      <slot />
+    </v-img>
     <v-icon v-else size="50">mdi-account-circle</v-icon>
+
   </v-avatar>
 </template>
 
 <style scoped>
 
+
 </style>

package/src/components/IdentityProfileAvatarEdit/IdentityProfileAvatarEdit.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import {ref} from 'vue'
+import {useAuth} from "../../composables/useAuth";
+import IdentityProfileAvatar from "../IdentityProfileAvatar/IdentityProfileAvatar.vue";
+
+const {changeAvatar} = useAuth();
+
+let fileInput = ref()
+let showEdit = ref(false)
+
+
+function onAvatarClick() {
+  fileInput.value.click();
+}
+
+async function onFileChanged(e: Event) {
+  console.log("OnFileChanged",e)
+  if (e.target && (e.target as HTMLInputElement).files) {
+    const files = (e.target as HTMLInputElement).files;
+    if (files && files[0]) {
+      await changeAvatar(files[0]);
+    }
+  }
+}
+
+defineProps({
+  avatarSize: {
+    type: Number,
+    default: 54
+  }
+})
+
+</script>
+
+<template>
+  <div @mouseenter="showEdit = true" @mouseleave="showEdit= false" >
+    <identity-profile-avatar
+        :avatar-size="avatarSize"
+        @click="onAvatarClick"
+    >
+      <v-icon  v-if="showEdit" size="35" color="white" class="mdi mdi-pencil bg-black rounded"></v-icon>
+    </identity-profile-avatar>
+    <input
+        accept="image/png, image/jpeg, image/jpg"
+        ref="fileInput"
+        class="d-none"
+        type="file"
+        @change="onFileChanged"
+    >
+  </div>
+</template>
+
+<style scoped>
+.v-avatar {
+  cursor: pointer;
+  transition: all .4s ease-in-out;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.v-avatar:hover {
+  filter: brightness(80%);
+}
+
+
+</style>

package/src/components/IdentityProfileDrawer/IdentityProfileDrawer.vue

@@ -2,12 +2,13 @@
 import {useAuth} from "../../composables/useAuth";
 import {defineModel, ref} from "vue";
 import IdentityProfileView from "../IdentityProfileView/IdentityProfileView.vue";
-import IdentityChangeOwnPassword from "../../components/IdentityChangeOwnPassword/IdentityChangeOwnPassword.vue";
+import {useRouter} from "vue-router";
+
+const router = useRouter()
+
 
 const auth = useAuth()
 const valueModel = defineModel<boolean>()
-const profile = ref(false)
-const changePassword = ref(false)
 
 
 </script>
@@ -26,7 +27,7 @@ const changePassword = ref(false)
 
       <v-list>
         <v-list-item
-            @click="profile = !profile"
+            @click="router.push({name:'Profile'})"
             prepend-icon="mdi-account-cog"
             :title="$t('user.profile')"
         >
@@ -51,27 +52,6 @@ const changePassword = ref(false)
       </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>
 

package/src/components/IdentityProfileView/IdentityProfileView.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import {useAuthStore} from "../../stores/auth/AuthStore.js";
-import IdentityProfileAvatar from "../IdentityProfileAvatar/IdentityProfileAvatar.vue";
+import IdentityProfileAvatarEdit from "../IdentityProfileAvatarEdit/IdentityProfileAvatarEdit.vue";
 const emit = defineEmits(['click'])
 const authStore = useAuthStore()
 
@@ -10,7 +10,7 @@ const authStore = useAuthStore()
   <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>
+      <identity-profile-avatar-edit :avatar-size="90"></identity-profile-avatar-edit>
       <h6 class="text-h6">{{ authStore.authUser?.username }}</h6>
     </v-sheet>
   </v-sheet>

package/src/composables/useAuth.ts

@@ -1,53 +1,65 @@
 import {useAuthStore} from "../stores/auth/AuthStore";
 import {AuthHelper, AuthSystem} from "@drax/identity-front";
 import {inject} from "vue";
+import {useRouter} from 'vue-router'
 
 export function useAuth() {
 
     const authStore = useAuthStore()
+    const router = useRouter()
 
     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 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)
     }
 
-    const changeOwnPassword = async (currentPassword:string, newPassword:string) => {
-        return  await authSystem.changeOwnPassword(currentPassword, newPassword)
+    const changeAvatar = async (file: File) => {
+        if(file){
+            await authSystem.changeAvatar(file)
+            await fetchAuthUser()
+            return
+        }
+
     }
 
     async function fetchAuthUser() {
-        const authUser =  await authSystem.me()
+        const authUser = await authSystem.me()
         authStore.setAuthUser(authUser)
         return authUser
     }
 
-    function logout(){
+    function logout() {
         authSystem.logout()
         authStore.clearAuth()
+        router.push({name: 'Login'})
     }
 
-    function hasPermission(permission:string) {
+    function hasPermission(permission: string) {
         return authStore?.authUser?.role?.permissions ? authStore.authUser.role.permissions.includes(permission) : false
     }
 
-    function tokenIsValid(){
+    function tokenIsValid() {
         return authStore.accessToken ? AuthHelper.isJWTValid(authStore.accessToken) : false
     }
 
-    function isAuthenticated(){
-        if(tokenIsValid()){
+    function isAuthenticated() {
+        if (tokenIsValid()) {
             return true
-        }else{
+        } else {
             logout()
             return false
         }
 
     }
 
-    return {hasPermission, logout, tokenIsValid, isAuthenticated, fetchAuthUser, login, changeOwnPassword}
+    return {hasPermission, logout, tokenIsValid, isAuthenticated, fetchAuthUser, login, changeOwnPassword, changeAvatar}
 
 }

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

@@ -108,8 +108,8 @@ function toDelete(item: IRole) {
 <template>
   <v-container fluid>
 
-    <v-sheet border rounded>
-      <v-toolbar>
+    <v-card border rounded>
+      <v-toolbar class="bg-toolbar">
         <v-toolbar-title>{{$t('role.managing')}}</v-toolbar-title>
         <v-spacer></v-spacer>
         <v-btn icon @click="filterEnable = !filterEnable">
@@ -127,7 +127,7 @@ function toDelete(item: IRole) {
             :filterEnable="filterEnable"
         />
       </v-theme-provider>
-    </v-sheet>
+    </v-card>
 
     <v-dialog v-model="dialog" max-width="800">
       <v-sheet border>

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

@@ -71,8 +71,8 @@ defineExpose({
       @update:options="loadItems"
   >
     <template v-slot:top>
-      <v-toolbar border density="compact" v-if="filterEnable" class="grey-lighten-1">
-        <v-toolbar-title>{{ $t('action.filter') }}</v-toolbar-title>
+      <v-toolbar  density="compact" v-if="filterEnable">
+        <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"

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

@@ -105,14 +105,14 @@ function toDelete(item: ITenant) {
 <template>
   <v-container fluid>
 
-    <v-sheet border rounded>
-      <v-toolbar>
+    <v-card border rounded >
+      <v-toolbar class="bg-toolbar">
         <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 color="primary" @click="toCreate">
+        <v-btn class="font-weight-bold" color="primary" @click="toCreate">
           {{ $t('action.create') }}
         </v-btn>
       </v-toolbar>
@@ -124,7 +124,7 @@ function toDelete(item: ITenant) {
             :filterEnable="filterEnable"
         />
       </v-theme-provider>
-    </v-sheet>
+    </v-card>
 
     <v-dialog v-model="dialog" max-width="800">
       <v-sheet border>

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

@@ -54,6 +54,7 @@ defineExpose({
 
 <template>
   <v-data-table-server
+      class="border"
       v-if="hasPermission('user:manage')"
       v-model:items-per-page="itemsPerPage"
       v-model:page="page"
@@ -66,8 +67,8 @@ defineExpose({
       @update:options="loadItems"
   >
     <template v-slot:top>
-      <v-toolbar border density="compact" v-if="filterEnable" class="grey-lighten-1">
-        <v-toolbar-title>{{ $t('action.filter') }}</v-toolbar-title>
+      <v-toolbar  density="compact" v-if="filterEnable">
+        <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"

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

@@ -139,8 +139,8 @@ function toChangePassword(item: IUser) {
 <template>
   <v-container fluid>
 
-    <v-sheet border rounded>
-      <v-toolbar>
+    <v-card border rounded>
+      <v-toolbar class="bg-toolbar">
         <v-toolbar-title>{{ $t('user.managing') }}</v-toolbar-title>
         <v-spacer></v-spacer>
         <v-btn icon @click="filterEnable = !filterEnable">
@@ -159,7 +159,7 @@ function toChangePassword(item: IUser) {
             :filterEnable="filterEnable"
         />
       </v-theme-provider>
-    </v-sheet>
+    </v-card>
 
     <v-dialog v-model="dialog" max-width="800">
       <v-sheet border>

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

@@ -73,8 +73,8 @@ defineExpose({
       @update:options="loadItems"
   >
     <template v-slot:top>
-      <v-toolbar border density="compact" v-if="filterEnable" class="grey-lighten-1">
-        <v-toolbar-title>{{ $t('action.filter') }}</v-toolbar-title>
+      <v-toolbar  density="compact" v-if="filterEnable">
+        <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"

package/src/i18n/I18nMessages.ts

@@ -1,4 +1,5 @@
-import {commonValidationI18n, identityValidationI18n} from "@drax/i18n-share"
+import {CommonI18nMessages} from "@drax/common-front"
+import {IdentityI18nMessages} from "@drax/identity-front"
 import merge from 'deepmerge'
 
 const mainMsg = {
@@ -14,7 +15,7 @@ const mainMsg = {
   }
 }
 
-const messages = merge.all([mainMsg,commonValidationI18n, identityValidationI18n])
+const messages = merge.all([mainMsg,IdentityI18nMessages, CommonI18nMessages])
 
 console.log("messages",messages)
 

package/src/index.ts

@@ -16,6 +16,10 @@ import RoleCrud from "./cruds/role-crud/RoleCrud.vue";
 import RoleList from "./cruds/role-crud/RoleList.vue";
 import RoleCrudPage from "./pages/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";
@@ -31,6 +35,8 @@ import {useTenant} from "./composables/useTenant.js";
 
 import {useAuthStore} from "./stores/auth/AuthStore.js";
 
+import IdentityRoutes from "./routes/IdentityRoutes.js";
+
 export {
 
     //Vue Components
@@ -39,6 +45,11 @@ export {
     IdentityProfileView,
     IdentityProfileDrawer,
 
+    //Pages
+    LoginPage,
+    ProfilePage,
+    PasswordPage,
+
     //User
     UserView,
     UserCreateForm,
@@ -67,5 +78,8 @@ export {
 
 
     //Stores
-    useAuthStore
+    useAuthStore,
+
+    //Routes
+    IdentityRoutes
 }

package/src/pages/LoginPage.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+
+import IdentityLogin from "../components/IdentityLogin/IdentityLogin.vue";
+import { useDisplay, useTheme } from 'vuetify'
+import { computed } from 'vue'
+import {useRouter} from "vue-router";
+
+const router = useRouter()
+
+const { mobile } = useDisplay()
+const theme = useTheme()
+const primaryColor = computed(() => theme.current.value.colors.primary)
+const primaryColorText = computed(() => theme.current.value.colors.background)
+
+
+const TITLE_MAIN = import.meta.env.VITE_TITLE_MAIN || 'DRAX';
+const TITLE_SEC = import.meta.env.VITE_TITLE_SEC || 'SUITE';
+
+function onLoginSuccess(){
+  router.push('/')
+}
+
+</script>
+
+<template>
+  <v-container fluid class="fill-height">
+
+    <v-row justify="center" align="center">
+      <v-col cols="12" sm="8" md="6" lg="5">
+      <h2 class="pb-10 text-center default-cursor" :class="mobile ? 'text-h4' : 'text-h2'">
+        <span class="pa-3 font-weight-medium rounded logo">{{TITLE_MAIN}}</span> {{TITLE_SEC}}
+      </h2>
+
+      <IdentityLogin @loginSuccess="onLoginSuccess"></IdentityLogin>
+      </v-col>
+    </v-row>
+
+  </v-container>
+</template>
+
+<style scoped>
+.logo {
+  background-color: v-bind(primaryColor);
+  color:  v-bind(primaryColorText) !important;
+}
+
+</style>
+

package/src/pages/PasswordPage.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+
+
+import IdentityChangeOwnPassword from "../components/IdentityChangeOwnPassword/IdentityChangeOwnPassword.vue";
+</script>
+
+<template>
+  <v-container fluid class="fill-height">
+
+    <v-row justify="center" align="center">
+      <v-col cols="12" sm="8" md="6" lg="5">
+        <identity-change-own-password />
+      </v-col>
+    </v-row>
+
+  </v-container>
+</template>
+
+<style scoped>
+
+</style>
+

package/src/pages/ProfilePage.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import IdentityProfileView from "../components/IdentityProfileView/IdentityProfileView.vue";
+import {useRouter} from "vue-router";
+import IdentityProfileAvatarChanger from "@/components/IdentityProfileAvatarEdit/IdentityProfileAvatarEdit.vue";
+const router = useRouter();
+
+</script>
+
+<template>
+  <v-container fluid class="fill-height">
+
+    <v-row justify="center" align="center">
+      <v-col cols="12" sm="8" md="6" lg="5">
+
+        <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-card-text>
+        </v-card>
+      </v-col>
+    </v-row>
+
+  </v-container>
+</template>
+
+<style scoped>
+
+</style>
+

package/src/routes/IdentityRoutes.ts

@@ -0,0 +1,64 @@
+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'
+
+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'
+    }
+  },
+
+]
+
+
+export default routes

package/src/views/RoleView.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type {PropType} from "vue";
-import type {IRole} from "@drax/identity-front";
+import type {IRole} from "@drax/identity-share";
 
 defineProps({
   role:{

package/src/views/TenantView.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type {PropType} from "vue";
-import type {ITenant} from "@drax/identity-front";
+import type {ITenant} from "@drax/identity-share";
 
 defineProps({
   tenant:{

package/src/views/UserView.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type {PropType} from "vue";
-import type {IUser} from "@drax/identity-front";
+import type {IUser} from "@drax/identity-share";
 import IdentityProfileAvatar from "../components/IdentityProfileAvatar/IdentityProfileAvatar.vue";
 
 defineProps({