update: UsersManagement

- add missing start/end dates for passwords
- show said dates in list as well

Author: dbulatovicx32

src/i18n/en-US/messages.json

@@ -4137,6 +4137,8 @@
             "flgPwdBlocked": "Blocked",
             "form": {
                 "defaultRole": "Default role",
+                "dtPwdBegin": "Password valid from",
+                "dtPwdEnd": "Password expires on",
                 "password": "Password",
                 "passwordConfirm": "Confirm Password",
                 "userId": "User ID"
@@ -4163,6 +4165,7 @@
             "lockUser": "Lock user",
             "multifactor": "This user has multifactor authentication enabled. Click the button to reset it",
             "newUser": "New user",
+            "noAttributesInfo": "There are no attributes for this user.",
             "roles": "Roles",
             "title": "Users Management",
             "unlockUser": "Unlock user",

src/modules/managers/usersManagement/UserAttributesTab/UserAttributesForm.vue

@@ -31,6 +31,10 @@
                         </q-list>
                     </q-card-section>
                 </q-card>
+                <q-banner v-if="!attributes || attributes.length === 0" rounded dense class="bg-info">
+                    <template v-slot:avatar><q-icon name="info" /></template>
+                    {{ $t('managers.usersManagement.noAttributesInfo') }}
+                </q-banner>
             </div>
         </q-scroll-area>
         <UserAttributesLovValueDialog :attribute="selectedAttribute" :selection="initialSelection" :dialog-visible="lovDialogVisible" @saveLovValues="onSaveLovValues" @closeDialog=";((lovDialogVisible = false), (selectedAttribute = null))" />

src/modules/managers/usersManagement/UserDetailTab/DetailFormTab.vue

@@ -29,6 +29,12 @@
                             <div class="col-6">
                                 <q-input outlined dense hide-bottom-space v-model="vobj.userDetailsForm.fullName.$model" :label="$t('managers.usersManagement.fullName') + ' *'" autocomplete="off" :maxLength="250" :error="vobj.userDetailsForm.fullName.$invalid && vobj.userDetailsForm.fullName.$dirty" :error-message="vobj.userDetailsForm.fullName.$errors[0]?.$message" @update:model-value="onDataChange(vobj.userDetailsForm.fullName)" />
                             </div>
+                            <div class="col-6">
+                                <q-input outlined dense hide-bottom-space readonly :model-value="formatPwdDate(userDetailsForm.dtPwdBegin)" :label="$t('managers.usersManagement.form.dtPwdBegin')" />
+                            </div>
+                            <div class="col-6">
+                                <q-input outlined dense hide-bottom-space readonly :model-value="formatPwdDate(userDetailsForm.dtPwdEnd)" :label="$t('managers.usersManagement.form.dtPwdEnd')" />
+                            </div>
                         </div>
                     </q-card-section>
                 </q-card>
@@ -92,6 +98,7 @@ import { mapActions } from 'pinia'
 import { defineComponent } from 'vue'
 import mainStore from '@/App.store'
 import { AxiosResponse } from 'axios'
+import { DateTime } from 'luxon'
 
 export default defineComponent({
     name: 'roles-tab',
@@ -142,6 +149,13 @@ export default defineComponent({
     },
     methods: {
         ...mapActions(mainStore, ['setLoading', 'setInfo']),
+        // date + time for now; revert to date-only later if too long
+        formatPwdDate(value: string): string {
+            if (!value) return '-'
+            let dt = DateTime.fromISO(value)
+            if (!dt.isValid) dt = DateTime.fromSQL(value)
+            return dt.isValid ? dt.toFormat('dd/MM/yyyy HH:mm') : value
+        },
         unlockUser() {
             this.$emit('unlock')
         },

src/modules/managers/usersManagement/UserRolesTab/RolesTab.vue

@@ -2,13 +2,13 @@
     <div class="um-tab-layout">
         <q-scroll-area class="um-tab-scroll">
             <div class="um-tab-container">
-                <q-card>
+                <q-card v-if="selectedRoles.length > 1">
                     <q-card-section class="q-py-sm">
                         <div class="um-section-label">{{ $t('managers.usersManagement.form.defaultRole') }}</div>
                     </q-card-section>
                     <q-separator />
                     <q-card-section>
-                        <q-select v-if="selectedRoles.length > 1" outlined dense v-model="defaultRole" :options="selectedRolesWithEmpty()" option-label="name" :label="$t('managers.usersManagement.form.defaultRole')" @update:model-value="onSelectDefaultRole">
+                        <q-select outlined dense v-model="defaultRole" :options="selectedRolesWithEmpty()" option-label="name" :label="$t('managers.usersManagement.form.defaultRole')" @update:model-value="onSelectDefaultRole">
                             <template #append>
                                 <q-icon name="info" color="grey" size="xs">
                                     <q-tooltip>{{ $t('managers.usersManagement.defaultRoleInfo') }}</q-tooltip>

src/modules/managers/usersManagement/UsersManagementList.vue

@@ -8,7 +8,7 @@
 
                 <div class="kn-list-item-text">
                     <span v-tooltip.top="slotProps.option.fullName" class="kn-list-item-label">{{ slotProps.option.fullName }}</span>
-                    <span class="kn-list-item-text-secondary kn-truncated">{{ slotProps.option.userId }}</span>
+                    <span class="kn-list-item-text-secondary kn-truncated">{{ pwdDatesLabel(slotProps.option) }}</span>
                 </div>
 
                 <Button v-tooltip.bottom="slotProps.option.flgPwdBlocked ? $t('managers.usersManagement.unlockUser') : $t('managers.usersManagement.lockUser')" :icon="slotProps.option.flgPwdBlocked ? 'fas fa-lock-open' : 'fas fa-lock'" class="p-button-text p-button-rounded p-button-plain" @click.stop="$emit('lockToggle', slotProps.option)" />
@@ -24,6 +24,7 @@ import Avatar from 'primevue/avatar'
 import Button from 'primevue/button'
 import Listbox from 'primevue/listbox'
 import { iUser } from './UsersManagement'
+import { DateTime } from 'luxon'
 
 export default defineComponent({
     name: 'users-management-list',
@@ -48,6 +49,20 @@ export default defineComponent({
     },
     emits: ['select', 'selectionChange', 'delete', 'lockToggle'],
     methods: {
+        // date + time for now; revert to date-only later if too long
+        formatPwdDate(value: string): string {
+            if (!value) return ''
+            let dt = DateTime.fromISO(value)
+            if (!dt.isValid) dt = DateTime.fromSQL(value)
+            return dt.isValid ? dt.toFormat('dd/MM/yyyy HH:mm') : value
+        },
+        pwdDatesLabel(user: iUser): string {
+            const begin = this.formatPwdDate(user.dtPwdBegin)
+            const end = this.formatPwdDate(user.dtPwdEnd)
+            // no password dates set: fall back to the userId so the row still shows something
+            if (!begin && !end) return user.userId
+            return `${begin || '—'} → ${end || '—'}`
+        },
         avatarIcon(user: iUser): string {
             return user.flgPwdBlocked === true ? 'fas fa-lock' : 'fas fa-lock-open'
         },