@drax/identity-vue 0.0.10

package/README.md

@@ -0,0 +1,61 @@
+# identity-front
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+
+## Type Support for `.vue` Imports in TS
+
+TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vitejs.dev/config/).
+
+## Project Setup
+
+```sh
+npm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
+```
+
+### Type-Check, Compile and Minify for Production
+
+```sh
+npm run build
+```
+
+### Run Unit Tests with [Vitest](https://vitest.dev/)
+
+```sh
+npm run test:unit
+```
+
+### Run End-to-End Tests with [Cypress](https://www.cypress.io/)
+
+```sh
+npm run test:e2e:dev
+```
+
+This runs the end-to-end tests against the Vite development server.
+It is much faster than the production build.
+
+But it's still recommended to test the production build with `test:e2e` before deploying (e.g. in CI environments):
+
+```sh
+npm run build
+npm run test:e2e
+```
+
+### Lint with [ESLint](https://eslint.org/)
+
+```sh
+npm run lint
+```

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@drax/identity-vue",
+  "publishConfig": {
+    "access": "public"
+  },
+  "version": "0.0.10",
+  "type": "module",
+  "main": "./src/index.ts",
+  "module": "./src/index.ts",
+  "types": "./src/index.ts",
+  "files": [
+    "src"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "run-p type-check \"build-only {@}\" --",
+    "preview": "vite preview",
+    "test:unit": "vitest",
+    "test:e2e": "start-server-and-test preview http://localhost:4173 'cypress run --e2e'",
+    "test:e2e:dev": "start-server-and-test 'vite dev --port 4173' http://localhost:4173 'cypress open --e2e'",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --build --force",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
+    "format": "prettier --write src/"
+  },
+  "dependencies": {
+    "@drax/common-front": "^0.0.10",
+    "vue-i18n": "^9.13.1"
+  },
+  "peerDependencies": {
+    "pinia": "^2.1.7",
+    "vue": "^3.4.21",
+    "vuetify": "^3.6.4"
+  },
+  "devDependencies": {
+    "@rushstack/eslint-patch": "^1.8.0",
+    "@tsconfig/node20": "^20.1.4",
+    "@types/jsdom": "^21.1.7",
+    "@types/node": "^20.12.5",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "@vue/eslint-config-prettier": "^9.0.0",
+    "@vue/eslint-config-typescript": "^13.0.0",
+    "@vue/test-utils": "^2.4.5",
+    "@vue/tsconfig": "^0.5.1",
+    "cypress": "^13.7.2",
+    "eslint": "^8.57.0",
+    "eslint-plugin-cypress": "^2.15.1",
+    "eslint-plugin-vue": "^9.23.0",
+    "jsdom": "^24.0.0",
+    "npm-run-all2": "^6.1.2",
+    "pinia": "^2.1.7",
+    "pinia-plugin-persistedstate": "^3.2.1",
+    "prettier": "^3.2.5",
+    "start-server-and-test": "^2.0.3",
+    "typescript": "~5.4.0",
+    "vite": "^5.2.8",
+    "vite-plugin-css-injected-by-js": "^3.5.1",
+    "vite-plugin-dts": "^3.9.1",
+    "vitest": "^1.4.0",
+    "vue": "^3.4.21",
+    "vue-tsc": "^2.0.11",
+    "vuetify": "^3.6.4"
+  },
+  "gitHead": "c30e1965d551cc63001a301b8dc98e26eba3afe1"
+}

package/src/assets/base.css

@@ -0,0 +1,86 @@
+/* color palette from <https://github.com/vuejs/theme> */
+:root {
+  --vt-c-white: #ffffff;
+  --vt-c-white-soft: #f8f8f8;
+  --vt-c-white-mute: #f2f2f2;
+
+  --vt-c-black: #181818;
+  --vt-c-black-soft: #222222;
+  --vt-c-black-mute: #282828;
+
+  --vt-c-indigo: #2c3e50;
+
+  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
+  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
+  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
+  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
+
+  --vt-c-text-light-1: var(--vt-c-indigo);
+  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
+  --vt-c-text-dark-1: var(--vt-c-white);
+  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
+}
+
+/* semantic color variables for this project */
+:root {
+  --color-background: var(--vt-c-white);
+  --color-background-soft: var(--vt-c-white-soft);
+  --color-background-mute: var(--vt-c-white-mute);
+
+  --color-border: var(--vt-c-divider-light-2);
+  --color-border-hover: var(--vt-c-divider-light-1);
+
+  --color-heading: var(--vt-c-text-light-1);
+  --color-text: var(--vt-c-text-light-1);
+
+  --section-gap: 160px;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-background: var(--vt-c-black);
+    --color-background-soft: var(--vt-c-black-soft);
+    --color-background-mute: var(--vt-c-black-mute);
+
+    --color-border: var(--vt-c-divider-dark-2);
+    --color-border-hover: var(--vt-c-divider-dark-1);
+
+    --color-heading: var(--vt-c-text-dark-1);
+    --color-text: var(--vt-c-text-dark-2);
+  }
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  font-weight: normal;
+}
+
+body {
+  min-height: 100vh;
+  color: var(--color-text);
+  background: var(--color-background);
+  transition:
+    color 0.5s,
+    background-color 0.5s;
+  line-height: 1.6;
+  font-family:
+    Inter,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    'Fira Sans',
+    'Droid Sans',
+    'Helvetica Neue',
+    sans-serif;
+  font-size: 15px;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

package/src/assets/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>

package/src/assets/main.css

@@ -0,0 +1,35 @@
+@import './base.css';
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  font-weight: normal;
+}
+
+a,
+.green {
+  text-decoration: none;
+  color: hsla(160, 100%, 37%, 1);
+  transition: 0.4s;
+  padding: 3px;
+}
+
+@media (hover: hover) {
+  a:hover {
+    background-color: hsla(160, 100%, 37%, 0.2);
+  }
+}
+
+@media (min-width: 1024px) {
+  body {
+    display: flex;
+    place-items: center;
+  }
+
+  #app {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    padding: 0 2rem;
+  }
+}

package/src/combobox/PermissionCombobox.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+
+import {ref, onMounted, defineModel} 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()
+})
+
+
+</script>
+
+<template>
+  <v-select
+      v-model="model"
+      label="Permissions"
+      :items="items"
+      variant="outlined"
+      :error-messages="errorMessages"
+      multiple
+  >
+  </v-select>
+</template>
+
+<style scoped>
+
+</style>

package/src/combobox/RoleCombobox.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+
+import {ref, onMounted, defineModel} 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 {fetchRole} = useRole()
+let items = ref([])
+
+onMounted(async () => {
+  items.value = await fetchRole()
+})
+
+
+</script>
+
+<template>
+  <v-select
+      v-model="model"
+      label="Rol"
+      :items="items"
+      item-title="name"
+      item-value="id"
+      variant="outlined"
+      :error-messages="errorMessages"
+  ></v-select>
+</template>
+
+<style scoped>
+
+</style>

package/src/components/IdentityChangeOwnPassword/IdentityChangeOwnPassword.vue

@@ -0,0 +1,139 @@
+<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 "../../composables/useI18nValidation.js";
+import {useI18n} from "vue-i18n";
+
+const {t} = useI18n()
+const {$ta} = useI18nValidation()
+
+const {changeOwnPassword} = useAuth()
+
+const currentPassword = ref('')
+const newPassword = ref('')
+const confirmPassword = ref('')
+const inputErrors = ref<IClientInputError|undefined>({currentPassword: [], newPassword: [], confirmPassword: []})
+const errorMsg = ref('')
+const loading = ref(false)
+const changed = ref(false)
+
+let currentPasswordVisibility = ref(false)
+let newPasswordVisibility = ref(false)
+
+const isFormValid = computed(() =>
+    currentPassword.value.trim() !== '' && newPassword.value.trim() !== ''
+    && newPassword.value.trim() === confirmPassword.value.trim()
+)
+
+function confirmPasswordRule(value: string) {
+  return newPassword.value.trim() === confirmPassword.value.trim() || t('validation.password.confirmed')
+}
+
+async function submitChangePassowrd() {
+  try {
+    loading.value = true
+    await changeOwnPassword(currentPassword.value.trim(), newPassword.value.trim())
+    changed.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="changed">
+      <v-alert type="success">
+        {{ $t('user.passwordChanged') }}
+      </v-alert>
+    </template>
+
+    <template v-else>
+
+          <v-form @submit.prevent="submitChangePassowrd">
+            <v-card variant="outlined">
+              <v-card-title class="pa-4 text-center">{{ $t('user.changeOwnPassword') }}</v-card-title>
+              <v-card-text v-if="errorMsg">
+                <v-alert type="error">
+                  {{ $t ? $t(errorMsg) : errorMsg }}
+                </v-alert>
+              </v-card-text>
+              <v-card-text>
+                <div class="text-subtitle-1 text-medium-emphasis">{{ $t('user.currentPassword') }}</div>
+                <v-text-field
+                    variant="outlined"
+                    id="current-password-input"
+                    v-model="currentPassword"
+                    prepend-inner-icon="mdi-lock-outline"
+                    required
+                    :type="currentPasswordVisibility ? 'text': 'password'"
+                    :append-inner-icon="currentPasswordVisibility ? 'mdi-eye-off': 'mdi-eye'"
+                    @click:append-inner="currentPasswordVisibility = !currentPasswordVisibility"
+                    autocomplete="new-password"
+                    :error-messages="$ta(inputErrors.currentPassword)"
+                ></v-text-field>
+                <div class="text-subtitle-1 text-medium-emphasis">{{ $t('user.newPassword') }}</div>
+                <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.confirmPassword') }}</div>
+                <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/IdentityLogin/IdentityLogin.vue

@@ -0,0 +1,124 @@
+<script setup lang="ts">
+import {computed, defineProps, ref} from 'vue'
+import {useAuth} from '../../composables/useAuth.js'
+import IdentityProfileView from "../IdentityProfileView/IdentityProfileView.vue";
+
+const {login, isAuthenticated} = useAuth()
+
+const username = ref('')
+const password = ref('')
+const authError = ref('')
+const loading = ref(false)
+
+const isFormValid = computed(() => username.value.trim() !== '' && password.value.trim() !== '')
+
+async function submitLogin() {
+  try {
+    loading.value = true
+    await login(username.value, password.value)
+  } catch (e) {
+    const error = e as Error
+    authError.value = error.message
+  } finally {
+    loading.value = false
+  }
+}
+
+// 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)
+
+function togglePasswordVisibility() {
+  passwordVisibility.value = !passwordVisibility.value
+}
+
+</script>
+
+<template>
+  <v-container>
+
+    <template v-if="isAuthenticated()">
+      <v-card>
+        <identity-profile-view></identity-profile-view>
+      </v-card>
+    </template>
+
+    <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>
+</template>
+
+<style scoped lang="sass">
+// Your styles here
+</style>

package/src/components/IdentityProfileAvatar/IdentityProfileAvatar.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import {useAuthStore} from "../../stores/auth/AuthStore.js";
+
+const emit = defineEmits(['click'])
+
+const props = defineProps({
+  avatarSize: {
+    type: Number,
+    default: 54
+  },
+  customClass:{
+    type: String,
+    default: ''
+  }
+})
+
+const authStore = useAuthStore()
+const onClick = () => {
+  emit('click')
+}
+</script>
+
+<template>
+  <v-avatar
+      :size="avatarSize"
+      @click="onClick"
+      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-icon v-else size="50">mdi-account-circle</v-icon>
+  </v-avatar>
+</template>
+
+<style scoped>
+
+</style>