@drax/identity-vue 0.9.0 → 0.10.0

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.9.0",
+  "version": "0.10.0",
   "type": "module",
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -24,12 +24,12 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "@drax/common-front": "^0.9.0",
-    "@drax/common-vue": "^0.9.0",
-    "@drax/crud-front": "^0.9.0",
-    "@drax/crud-share": "^0.9.0",
-    "@drax/crud-vue": "^0.9.0",
-    "@drax/identity-share": "^0.9.0"
+    "@drax/common-front": "^0.10.0",
+    "@drax/common-vue": "^0.10.0",
+    "@drax/crud-front": "^0.10.0",
+    "@drax/crud-share": "^0.10.0",
+    "@drax/crud-vue": "^0.10.0",
+    "@drax/identity-share": "^0.10.0"
   },
   "peerDependencies": {
     "pinia": "^2.2.2",
@@ -66,5 +66,5 @@
     "vue-tsc": "^2.1.6",
     "vuetify": "^3.7.1"
   },
-  "gitHead": "aae0068b0343cbb23e85c2a9ea454e183739a8a7"
+  "gitHead": "bc1b8a35563ccffdf7719cfcc588f12df0e012bb"
 }

package/src/components/IdentityChangeOwnPassword/IdentityChangeOwnPassword.vue

@@ -31,7 +31,7 @@ function confirmPasswordRule(value: string) {
   return newPassword.value.trim() === confirmPassword.value.trim() || t('validation.password.confirmed')
 }
 
-async function submitChangePassowrd() {
+async function submitChangePassword() {
   try {
     loading.value = true
     await changeOwnPassword(currentPassword.value.trim(), newPassword.value.trim())
@@ -57,15 +57,15 @@ async function submitChangePassowrd() {
 
     <template v-if="changed">
       <v-alert type="success">
-        {{ t('user.passwordChanged') }}
+        {{ t('user.events.passwordChanged') }}
       </v-alert>
     </template>
 
     <template v-else>
 
-          <v-form @submit.prevent="submitChangePassowrd">
+          <v-form @submit.prevent="submitChangePassword">
             <v-card variant="elevated">
-              <v-card-title class="pa-4 text-center">{{ t('user.action.changeOwnPassword') }}</v-card-title>
+              <v-card-title class="pa-4">{{ t('user.action.changeOwnPassword') }}</v-card-title>
               <v-card-text v-if="errorMsg">
                 <v-alert type="error">
                   {{ te(errorMsg) ?t(errorMsg) : errorMsg }}

package/src/components/IdentityLogin/IdentityLogin.vue

@@ -7,6 +7,13 @@ const {t, te} = useI18n()
 
 const {login, isAuthenticated} = useAuth()
 
+
+defineProps({
+  recovery: {type: Boolean, default: false},
+  register: {type: Boolean, default: false},
+}
+)
+
 const username = ref('')
 const password = ref('')
 const authError = ref('')
@@ -51,7 +58,7 @@ function togglePasswordVisibility() {
   <template v-else>
 
         <v-form @submit.prevent="submitLogin">
-          <v-card variant="elevated" class="pa-6">
+          <v-card variant="elevated" class="pa-6 pb-0">
             <v-card-title class="pa-4 text-center">{{ te('auth.signIn') ? t('auth.signIn') : 'Sign In' }}</v-card-title>
             <v-card-text v-if="authError">
               <v-alert type="error">
@@ -84,7 +91,7 @@ function togglePasswordVisibility() {
             <v-card-actions>
               <v-spacer></v-spacer>
               <v-btn
-                  class="mb-8"
+                  class="mb-4"
                   color="blue"
                   size="large"
                   variant="tonal"
@@ -97,8 +104,20 @@ function togglePasswordVisibility() {
                 {{ te('auth.login') ? t('auth.login') : 'Login' }}
               </v-btn>
             </v-card-actions>
+
+            <v-divider></v-divider>
+            <v-card-actions v-if="recovery || register" class="pa-0 ma-0">
+              <v-btn v-if="register" size="small" color="grey" variant="text" href="/registration">
+                {{ te('auth.register') ? t('auth.register') : 'Registro' }}
+              </v-btn>
+              <v-spacer></v-spacer>
+              <v-btn v-if="recovery" size="small" color="grey" variant="text" href="/password/recovery/request">
+                {{ te('auth.recoveryPassword') ? t('auth.recoveryPassword') : 'Recovery Password' }}
+              </v-btn>
+            </v-card-actions>
           </v-card>
         </v-form>
+
   </template>
 </template>
 

package/src/components/IdentityRecoveryPasswordComplete/IdentityRecoveryPasswordComplete.vue

@@ -0,0 +1,162 @@
+<script setup lang="ts">
+import {computed, ref, onMounted} from 'vue'
+import {useAuth} from "../../composables/useAuth.js";
+import {ClientError} from "@drax/common-front";
+import type {IClientInputError} from "@drax/common-front";
+import {useI18nValidation} from "@drax/common-vue";
+import {useI18n} from "vue-i18n";
+import {useRoute, useRouter} from "vue-router"
+
+const {t,te} = useI18n()
+const {$ta} = useI18nValidation()
+
+const route = useRoute()
+const router = useRouter()
+
+const {recoveryPasswordComplete} = useAuth()
+
+const recoveryCode = ref('')
+const newPassword = ref('')
+const confirmPassword = ref('')
+const inputErrors = ref<IClientInputError|undefined>({currentPassword: [], newPassword: [], confirmPassword: []})
+const errorMsg = ref('')
+const loading = ref(false)
+const success = ref(false)
+
+let recoveryCodeVisibility = ref(false)
+let newPasswordVisibility = ref(false)
+
+
+const isFormValid = computed(() =>
+    recoveryCode.value.trim() !== '' && newPassword.value.trim() !== ''
+    && newPassword.value.trim() === confirmPassword.value.trim()
+)
+
+const recoveryCodeParam = computed(() => {
+  return route.params.code
+})
+
+onMounted(() => {
+  if (recoveryCodeParam.value) {
+    recoveryCode.value = recoveryCodeParam.value as string
+  }
+})
+
+function confirmPasswordRule(value: string) {
+  return newPassword.value.trim() === confirmPassword.value.trim() || t('validation.password.confirmed')
+}
+
+async function submitResetPassword() {
+  try {
+    loading.value = true
+    await recoveryPasswordComplete(recoveryCode.value.trim(), newPassword.value.trim())
+    success.value = true
+  } catch (err) {
+    if (err instanceof ClientError) {
+      inputErrors.value = err.inputErrors
+    }if(err instanceof Error) {
+      errorMsg.value = err.message
+    }
+    const error = err as Error
+    errorMsg.value = error.message
+  } finally {
+    loading.value = false
+  }
+
+}
+
+</script>
+
+<template>
+  <v-sheet>
+
+    <template v-if="success">
+      <v-card>
+        <v-card-text>
+          <v-alert type="success">
+            {{ t('user.passwordChanged') }}
+          </v-alert>
+        </v-card-text>
+        <v-card-text class="text-center">
+          <v-btn color="primary" @click="router.push('/login')">{{ t('user.action.login') }}</v-btn>
+        </v-card-text>
+      </v-card>
+
+    </template>
+
+    <template v-else>
+
+          <v-form @submit.prevent="submitResetPassword">
+            <v-card variant="elevated">
+              <v-card-title class="pa-4">{{ t('user.action.recoveryPassword') }}</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.field.recoveryCode') }}</div>
+                <v-text-field
+                    variant="outlined"
+                    id="recovery-code-input"
+                    v-model="recoveryCode"
+                    prepend-inner-icon="mdi-code-braces-box"
+                    required
+                    readonly
+                    :error-messages="$ta(inputErrors?.recoveryCode)"
+                ></v-text-field>
+
+                <div class="text-subtitle-1 text-medium-emphasis">{{ t('user.field.newPassword') }}</div>
+                <!-- NEW PASSWORD-->
+                <v-text-field
+                    variant="outlined"
+                    id="new-password-input"
+                    v-model="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.field.confirmPassword') }}</div>
+                <!-- CONFIRM PASSWORD-->
+                <v-text-field
+                    variant="outlined"
+                    id="confirm-password-input"
+                    v-model="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>
+              </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"
+                >
+                  {{ t('action.sent') }}
+                </v-btn>
+              </v-card-actions>
+            </v-card>
+          </v-form>
+    </template>
+  </v-sheet>
+</template>
+
+<style scoped lang="sass">
+// Your styles here
+</style>

package/src/components/IdentityRecoveryPasswordRequest/IdentityRecoveryPasswordRequest.vue

@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import {computed, ref} from 'vue'
+import {useAuth} from "../../composables/useAuth.js";
+import {ClientError} from "@drax/common-front";
+import type {IClientInputError} from "@drax/common-front";
+import {useI18nValidation} from "@drax/common-vue";
+import {useI18n} from "vue-i18n";
+
+const {t,te} = useI18n()
+const {$ta} = useI18nValidation()
+
+const {recoveryPasswordRequest} = useAuth()
+
+const email = ref('')
+const inputErrors = ref<IClientInputError|undefined>({currentPassword: [], newPassword: [], confirmPassword: []})
+const errorMsg = ref('')
+const loading = ref(false)
+const success = ref(false)
+const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+const emailRules = [(v:any) => emailRegex.test(v) || te('validation.email.invalid')]
+
+const isFormValid = computed(() =>
+    email.value.trim() !== '' && emailRegex.test(email.value)
+)
+
+
+async function submitResetPassword() {
+  try {
+    loading.value = true
+    const r = await recoveryPasswordRequest(email.value.trim())
+
+    console.log(r)
+
+    success.value = true
+  } catch (err) {
+    if (err instanceof ClientError) {
+      inputErrors.value = err.inputErrors
+    }if(err instanceof Error) {
+      errorMsg.value = err.message
+    }
+    const error = err as Error
+    errorMsg.value = error.message
+  } finally {
+    loading.value = false
+  }
+
+}
+
+</script>
+
+<template>
+  <v-sheet>
+
+    <template v-if="success">
+      <v-alert type="success">
+        {{ t('user.events.recoveryPasswordInfo') }}
+      </v-alert>
+    </template>
+
+    <template v-else>
+
+          <v-form @submit.prevent="submitResetPassword">
+            <v-card variant="elevated">
+              <v-card-title class="pa-4">{{ t('user.action.recoveryPasswordRequest') }}</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.field.email') }}</div>
+                <!-- USER EMAIL-->
+                <v-text-field
+                    variant="outlined"
+                    id="recovery-code-input"
+                    v-model="email"
+                    prepend-inner-icon="mdi-lock-outline"
+                    required
+                    autocomplete="new-password"
+                    :error-messages="$ta(inputErrors?.recoveryCode)"
+                    :rules="emailRules"
+                ></v-text-field>
+
+              </v-card-text>
+              <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn
+                    :loading="loading"
+                    class="mb-8"
+                    color="blue"
+                    size="large"
+                    variant="tonal"
+                    id="submit-button"
+                    type="submit"
+                    block
+                    :disabled="!isFormValid"
+                >
+                  {{ t('action.sent') }}
+                </v-btn>
+              </v-card-actions>
+            </v-card>
+          </v-form>
+    </template>
+  </v-sheet>
+</template>
+
+<style scoped lang="sass">
+
+</style>

package/src/components/IdentityRegistration/IdentityRegistration.vue

@@ -0,0 +1,197 @@
+<script setup lang="ts">
+import {computed, ref, onMounted} from 'vue'
+import {useAuth} from "../../composables/useAuth.js";
+import {ClientError} from "@drax/common-front";
+import type {IClientInputError} from "@drax/common-front";
+import {useI18nValidation} from "@drax/common-vue";
+import {useI18n} from "vue-i18n";
+import {useRoute, useRouter} from "vue-router"
+
+const {t,te} = useI18n()
+const {$ta} = useI18nValidation()
+
+const route = useRoute()
+const router = useRouter()
+
+const {register} = useAuth()
+
+const rform = ref()
+
+const variant = ref('filled')
+
+const form = ref({
+  username: '',
+  name: '',
+  email: '',
+  phone: '',
+  password: '',
+  confirmPassword: ''
+})
+
+const inputErrors = ref<IClientInputError|undefined>({currentPassword: [], newPassword: [], confirmPassword: []})
+const errorMsg = ref('')
+const loading = ref(false)
+const success = ref(false)
+
+let passwordVisibility = ref(false)
+let confirmPasswordVisibility = ref(false)
+
+
+function confirmPasswordRule(value: string) {
+  return form.value.password.trim() === form.value.confirmPassword.trim() || t('validation.password.confirmed')
+}
+
+async function submitRegistration() {
+  try {
+    loading.value = true
+    await register(form.value)
+    success.value = true
+  } catch (err) {
+    if (err instanceof ClientError) {
+      inputErrors.value = err.inputErrors
+    }if(err instanceof Error) {
+      errorMsg.value = err.message
+    }
+    const error = err as Error
+    errorMsg.value = error.message
+  } finally {
+    loading.value = false
+  }
+
+}
+
+</script>
+
+<template>
+  <v-sheet>
+
+    <template v-if="success">
+      <v-card>
+        <v-card-text>
+          <v-alert type="success">
+            {{ t('user.event.registrationComplete') }}
+          </v-alert>
+        </v-card-text>
+        <v-card-text class="text-center">
+          <v-btn color="primary" @click="router.push('/login')">{{ t('user.action.login') }}</v-btn>
+        </v-card-text>
+      </v-card>
+
+    </template>
+
+    <template v-else>
+
+          <v-form ref="rform" @submit.prevent="submitRegistration">
+            <v-card variant="elevated">
+              <v-card-title class="pa-4">{{ t('user.action.register') }}</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>
+                <v-text-field
+                    id="name-input"
+                    :label="t('user.field.name')"
+                    v-model="form.name"
+                    prepend-inner-icon="mdi-card-account-details"
+                    :variant="variant"
+                    :rules="[v => !!v || t('validation.required')]"
+                    :error-messages="$ta(inputErrors?.name)"
+
+                ></v-text-field>
+
+                <v-text-field
+                    id="username-input"
+                    :label="t('user.field.username')"
+                    v-model="form.username"
+                    prepend-inner-icon="mdi-account-question"
+                    :variant="variant"
+                    :rules="[v => !!v || t('validation.required')]"
+                    autocomplete="new-username"
+                    :error-messages="$ta(inputErrors?.username)"
+
+                ></v-text-field>
+
+                <v-text-field
+                    v-model="form.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(inputErrors?.email)"
+                ></v-text-field>
+
+                <v-text-field
+                    v-model="form.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(inputErrors?.phone)"
+                ></v-text-field>
+
+
+                <div class="text-subtitle-1 text-medium-emphasis">{{ t('user.field.newPassword') }}</div>
+                <!-- NEW PASSWORD-->
+                <v-text-field
+                    :variant="variant"
+                    id="new-password-input"
+                    v-model="form.password"
+                    :type="passwordVisibility ? 'text': 'password'"
+                    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(inputErrors?.newPassword)"
+                ></v-text-field>
+                <div class="text-subtitle-1 text-medium-emphasis">{{ t('user.field.confirmPassword') }}</div>
+                <!-- CONFIRM PASSWORD-->
+                <v-text-field
+                    :variant="variant"
+                    id="confirm-password-input"
+                    v-model="form.confirmPassword"
+                    :type="confirmPasswordVisibility ? 'text': 'password'"
+                    required
+                    prepend-inner-icon="mdi-lock-outline"
+                    :append-inner-icon="confirmPasswordVisibility ? 'mdi-eye-off': 'mdi-eye'"
+                    @click:append-inner="confirmPasswordVisibility = !confirmPasswordVisibility"
+                    autocomplete="new-password"
+                    :error-messages="$ta(inputErrors?.confirmPassword)"
+                    :rules="[confirmPasswordRule]"
+                ></v-text-field>
+              </v-card-text>
+              <v-card-actions>
+
+                <v-btn
+                    color="grey"
+                    variant="text"
+                    id="submit-button"
+                    type="submit"
+                    href="/login"
+                >
+                  {{ t('auth.login') }}
+                </v-btn>
+                <v-spacer></v-spacer>
+                <v-btn
+                    color="blue"
+                    variant="tonal"
+                    id="submit-button"
+                    type="submit"
+                    :loading="loading"
+                >
+                  {{ t('action.sent') }}
+                </v-btn>
+              </v-card-actions>
+            </v-card>
+          </v-form>
+    </template>
+  </v-sheet>
+</template>
+
+<style scoped lang="sass">
+// Your styles here
+</style>

package/src/composables/useAuth.ts

@@ -30,6 +30,18 @@ export function useAuth() {
         return await authSystem.changeOwnPassword(currentPassword, newPassword)
     }
 
+    const recoveryPasswordRequest = async (email: string) => {
+        return await authSystem.recoveryPasswordRequest(email)
+    }
+
+    const recoveryPasswordComplete = async (recoveryCode: string, newPassword: string) => {
+        return await authSystem.recoveryPasswordComplete(recoveryCode, newPassword)
+    }
+
+    const register = async (form: any) => {
+        return await authSystem.register(form)
+    }
+
     const changeAvatar = async (file: File) => {
         if (file) {
             await authSystem.changeAvatar(file)
@@ -73,6 +85,13 @@ export function useAuth() {
 
     }
 
-    return {hasPermission, logout, loginWithToken, tokenIsValid, isAuthenticated, fetchAuthUser, login, changeOwnPassword, changeAvatar}
+    return {
+        login, logout, loginWithToken,
+        tokenIsValid, hasPermission,
+        isAuthenticated, fetchAuthUser,
+        changeOwnPassword, changeAvatar,
+        recoveryPasswordRequest, recoveryPasswordComplete,
+        register
+    }
 
 }

package/src/index.ts

@@ -13,7 +13,7 @@ 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 PasswordPage from "./pages/PasswordChangePage.vue";
 
 import TenantView from "./views/TenantView.vue";
 import TenantCrudPage from "./pages/crud/TenantCrudPage.vue";
@@ -39,6 +39,8 @@ import RoleCrud from "./cruds/role-crud/RoleCrud"
 
 import {useAuthStore} from "./stores/auth/AuthStore.js";
 
+import IdentityAuthRoutes from "./routes/IdentityAuthRoutes.js";
+import IdentityCrudRoutes from "./routes/IdentityCrudRoutes.js";
 import IdentityRoutes from "./routes/IdentityRoutes.js";
 
 export {
@@ -90,5 +92,7 @@ export {
     useAuthStore,
 
     //Routes
-    IdentityRoutes
+    IdentityCrudRoutes,
+    IdentityAuthRoutes,
+    IdentityRoutes,
 }

package/src/pages/LoginPage.vue

@@ -31,7 +31,7 @@ function onLoginSuccess(){
         <span class="pa-3 font-weight-medium rounded logo">{{TITLE_MAIN}}</span> {{TITLE_SEC}}
       </h2>
 
-      <IdentityLogin @loginSuccess="onLoginSuccess"></IdentityLogin>
+      <IdentityLogin @loginSuccess="onLoginSuccess" recovery register></IdentityLogin>
       </v-col>
     </v-row>
 

package/src/pages/PasswordRecoveryCompletePage.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+
+import IdentityRecoveryPasswordComplete from "../components/IdentityRecoveryPasswordComplete/IdentityRecoveryPasswordComplete.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-recovery-password-complete></identity-recovery-password-complete>
+      </v-col>
+
+
+    </v-row>
+
+  </v-container>
+</template>
+
+<style scoped>
+
+</style>

package/src/pages/PasswordRecoveryRequestPage.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+
+import IdentityRecoveryPasswordRequest
+  from "../components/IdentityRecoveryPasswordRequest/IdentityRecoveryPasswordRequest.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-recovery-password-request></identity-recovery-password-request>
+      </v-col>
+
+    </v-row>
+
+  </v-container>
+</template>
+
+<style scoped>
+
+</style>

package/src/pages/ProfilePage.vue

@@ -15,7 +15,7 @@ const { t } = useI18n();
         <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'})">
+            <v-btn color="blue" variant="tonal" @click="router.push({name: 'PasswordChange'})">
               {{t('user.action.changeOwnPassword')}}
             </v-btn>
           </v-card-text>

package/src/pages/RegistrationPage.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+
+import IdentityRegistration from "../components/IdentityRegistration/IdentityRegistration.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-registration></identity-registration>
+      </v-col>
+
+    </v-row>
+
+  </v-container>
+</template>
+
+<style scoped>
+
+</style>

package/src/routes/IdentityAuthRoutes.ts

@@ -0,0 +1,60 @@
+import LoginPage from '../pages/LoginPage.vue'
+import ProfilePage from '../pages/ProfilePage.vue'
+import PasswordPage from '../pages/PasswordChangePage.vue'
+import RegistrationPage from '../pages/RegistrationPage.vue'
+import PasswordRecoveryRequestPage from '../pages/PasswordRecoveryRequestPage.vue'
+import PasswordRecoveryCompletePage from '../pages/PasswordRecoveryCompletePage.vue'
+
+const routes = [
+    {
+        name: 'IdentityLogin',
+        path: '/login',
+        component: LoginPage,
+        meta: {
+            auth: false,
+        }
+    },
+    {
+        name: 'Profile',
+        path: '/profile',
+        component: ProfilePage,
+        meta: {
+            auth: true,
+        }
+    },
+    {
+        name: 'PasswordChange',
+        path: '/password/change',
+        component: PasswordPage,
+        meta: {
+            auth: true,
+        }
+    },
+    {
+        name: 'Registration',
+        path: '/registration',
+        component: RegistrationPage,
+        meta: {
+            auth: false,
+        }
+    },
+    {
+        name: 'PasswordRecoveryRequest',
+        path: '/password/recovery/request',
+        component: PasswordRecoveryRequestPage,
+        meta: {
+            auth: false,
+        }
+    },
+    {
+        name: 'PasswordRecoveryComplete',
+        path: '/password/recovery/complete/:code',
+        component: PasswordRecoveryCompletePage,
+        meta: {
+            auth: false,
+        }
+    },
+]
+
+
+export default routes

package/src/routes/IdentityCrudRoutes.ts

@@ -0,0 +1,53 @@
+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 = [
+
+    //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'
+        }
+    },
+
+
+
+]
+
+
+export default routes

package/src/routes/IdentityRoutes.ts

@@ -1,78 +1,10 @@
-import LoginPage from '../pages/LoginPage.vue'
-import ProfilePage from '../pages/ProfilePage.vue'
-import PasswordPage from '../pages/PasswordPage.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: 'IdentityLogin',
-        path: '/identity-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'
-        }
-    },
-
+import IdentityCrudRoutes from './IdentityCrudRoutes'
+import IdentityAuthRoutes from './IdentityAuthRoutes'
 
 
+const routes = [
+    ...IdentityAuthRoutes,
+    ...IdentityCrudRoutes,
 ]
 
 

package/src/i18n/I18n.ts

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

package/src/i18n/I18nMessages.ts

@@ -1,22 +0,0 @@
-import {CommonI18nMessages} from "@drax/common-front"
-import {IdentityI18nMessages} from "@drax/identity-front"
-import merge from 'deepmerge'
-
-const mainMsg = {
-  en: {
-    main: {
-      home: 'Home',
-    }
-  },
-  es: {
-    main: {
-      home: 'Principal',
-    }
-  }
-}
-
-const messages = merge.all([mainMsg,IdentityI18nMessages, CommonI18nMessages])
-
-console.log("messages",messages)
-
-export default messages