q-layout(view='hHh lpR fFf', container)
q-header.card-header.q-px-md.q-py-sm
q-icon(name='img:/_assets/icons/fluent-account.svg', left, size='md')
div
span {{t(`admin.users.edit`)}}
.text-caption {{state.user.name}}
q-space
q-btn-group(push)
q-btn(
push
color='grey-6'
text-color='white'
:aria-label='t(`common.actions.refresh`)'
icon='las la-redo-alt'
@click='fetchUser'
:loading='state.loading > 0'
)
q-tooltip(anchor='center left', self='center right') {{t(`common.actions.refresh`)}}
q-btn(
push
color='white'
text-color='grey-7'
:label='t(`common.actions.close`)'
:aria-label='t(`common.actions.close`)'
icon='las la-times'
@click='close'
)
q-btn(
push
color='positive'
text-color='white'
:label='t(`common.actions.save`)'
:aria-label='t(`common.actions.save`)'
icon='las la-check'
@click='save()'
:disabled='state.loading > 0'
)
q-drawer.bg-dark-6(:model-value='true', :width='250', dark)
q-list(padding, v-if='state.loading < 1')
q-item(
v-for='sc of sections'
:key='`section-` + sc.key'
clickable
:to='{ params: { section: sc.key } }'
active-class='bg-primary text-white'
:disabled='sc.disabled'
)
q-item-section(side)
q-icon(:name='sc.icon', color='white')
q-item-section {{sc.text}}
q-page-container
q-page(v-if='state.loading > 0')
.flex.q-pa-lg.items-center
q-spinner-tail(color='primary', size='32px', :thickness='2')
.text-caption.text-primary.q-pl-md: strong {{t('admin.users.loading')}}
q-page(v-else-if='route.params.section === `overview`')
.q-pa-md
.row.q-col-gutter-md
.col-12.col-lg-8
q-card.shadow-1.q-pb-sm
q-card-section
.text-subtitle1 {{t('admin.users.profile')}}
q-item
blueprint-icon(icon='contact')
q-item-section
q-item-label {{t(`admin.users.name`)}}
q-item-label(caption) {{t(`admin.users.nameHint`)}}
q-item-section
q-input(
outlined
v-model='state.user.name'
dense
:rules=`[
val => invalidCharsRegex.test(val) || t('admin.users.nameInvalidChars')
]`
hide-bottom-space
:aria-label='t(`admin.users.name`)'
)
q-separator.q-my-sm(inset)
q-item
blueprint-icon(icon='envelope')
q-item-section
q-item-label {{t(`admin.users.email`)}}
q-item-label(caption) {{t(`admin.users.emailHint`)}}
q-item-section
q-input(
outlined
v-model='state.user.email'
dense
:aria-label='t(`admin.users.email`)'
)
template(v-if='state.user.meta')
q-separator.q-my-sm(inset)
q-item
blueprint-icon(icon='address')
q-item-section
q-item-label {{t(`admin.users.location`)}}
q-item-label(caption) {{t(`admin.users.locationHint`)}}
q-item-section
q-input(
outlined
v-model='state.user.meta.location'
dense
:aria-label='t(`admin.users.location`)'
)
q-separator.q-my-sm(inset)
q-item
blueprint-icon(icon='new-job')
q-item-section
q-item-label {{t(`admin.users.jobTitle`)}}
q-item-label(caption) {{t(`admin.users.jobTitleHint`)}}
q-item-section
q-input(
outlined
v-model='state.user.meta.jobTitle'
dense
:aria-label='t(`admin.users.jobTitle`)'
)
q-card.shadow-1.q-pb-sm.q-mt-md(v-if='state.user.meta')
q-card-section
.text-subtitle1 {{t('admin.users.preferences')}}
q-item
blueprint-icon(icon='timezone')
q-item-section
q-item-label {{t(`admin.users.timezone`)}}
q-item-label(caption) {{t(`admin.users.timezoneHint`)}}
q-item-section
q-select(
outlined
v-model='state.user.prefs.timezone'
:options='dataStore.timezones'
option-value='value'
option-label='text'
emit-value
map-options
dense
options-dense
:aria-label='t(`admin.users.timezone`)'
)
q-separator.q-my-sm(inset)
q-item
blueprint-icon(icon='calendar')
q-item-section
q-item-label {{t(`admin.users.dateFormat`)}}
q-item-label(caption) {{t(`admin.users.dateFormatHint`)}}
q-item-section
q-select(
outlined
v-model='state.user.prefs.dateFormat'
emit-value
map-options
dense
:aria-label='t(`admin.users.dateFormat`)'
:options=`[
{ label: t('profile.localeDefault'), value: '' },
{ label: 'DD/MM/YYYY', value: 'DD/MM/YYYY' },
{ label: 'DD.MM.YYYY', value: 'DD.MM.YYYY' },
{ label: 'MM/DD/YYYY', value: 'MM/DD/YYYY' },
{ label: 'YYYY-MM-DD', value: 'YYYY-MM-DD' },
{ label: 'YYYY/MM/DD', value: 'YYYY/MM/DD' }
]`
)
q-separator.q-my-sm(inset)
q-item
blueprint-icon(icon='clock')
q-item-section
q-item-label {{t(`admin.users.timeFormat`)}}
q-item-label(caption) {{t(`admin.users.timeFormatHint`)}}
q-item-section.col-auto
q-btn-toggle(
v-model='state.user.prefs.timeFormat'
push
glossy
no-caps
toggle-color='primary'
:options=`[
{ label: t('profile.timeFormat12h'), value: '12h' },
{ label: t('profile.timeFormat24h'), value: '24h' }
]`
)
q-separator.q-my-sm(inset)
q-item(tag='label', v-ripple)
blueprint-icon(icon='light-on')
q-item-section
q-item-label {{t(`admin.users.darkMode`)}}
q-item-label(caption) {{t(`admin.users.darkModeHint`)}}
q-item-section(avatar)
q-toggle(
v-model='state.user.prefs.darkMode'
color='primary'
checked-icon='las la-check'
unchecked-icon='las la-times'
:aria-label='t(`admin.users.darkMode`)'
)
.col-12.col-lg-4
q-card.shadow-1.q-pb-sm
q-card-section
.text-subtitle1 {{t('admin.users.info')}}
q-item
blueprint-icon(icon='person', :hue-rotate='-45')
q-item-section
q-item-label {{t(`common.field.id`)}}
q-item-label: strong {{state.user.id}}
q-separator.q-my-sm(inset)
q-item
blueprint-icon(icon='calendar-plus', :hue-rotate='-45')
q-item-section
q-item-label {{t(`common.field.createdOn`)}}
q-item-label: strong {{humanizeDate(state.user.createdAt)}}
q-separator.q-my-sm(inset)
q-item
blueprint-icon(icon='summertime', :hue-rotate='-45')
q-item-section
q-item-label {{t(`common.field.lastUpdated`)}}
q-item-label: strong {{humanizeDate(state.user.updatedAt)}}
q-separator.q-my-sm(inset)
q-item
blueprint-icon(icon='enter', :hue-rotate='-45')
q-item-section
q-item-label {{t(`admin.users.lastLoginAt`)}}
q-item-label: strong {{humanizeDate(state.user.lastLoginAt)}}
q-card.shadow-1.q-pb-sm.q-mt-md(v-if='state.user.meta')
q-card-section
.text-subtitle1 {{t('admin.users.notes')}}
q-input.q-mt-sm(
outlined
v-model='state.user.meta.notes'
type='textarea'
:aria-label='t(`admin.users.notes`)'
input-style='min-height: 243px'
:hint='t(`admin.users.noteHint`)'
)
q-page(v-else-if='route.params.section === `activity`')
span ---
q-page(v-else-if='route.params.section === `auth`')
.q-pa-md
.row.q-col-gutter-md
.col-12.col-lg-7
q-card.shadow-1.q-pb-sm
q-card-section
.text-subtitle1 {{t('admin.users.passAuth')}}
q-item
blueprint-icon(icon='password', :hue-rotate='45')
q-item-section
q-item-label {{t(`admin.users.changePassword`)}}
q-item-label(caption) {{t(`admin.users.changePasswordHint`)}}
q-item-label(caption): strong(:class='localAuth.password ? `text-positive` : `text-negative`') {{localAuth.password ? t(`admin.users.pwdSet`) : t(`admin.users.pwdNotSet`)}}
q-item-section(side)
q-btn.acrylic-btn(
flat
icon='las la-arrow-circle-right'
color='primary'
@click='changePassword'
:label='t(`common.actions.proceed`)'
)
q-separator.q-my-sm(inset)
q-item(tag='label', v-ripple)
blueprint-icon(icon='password-reset')
q-item-section
q-item-label {{t(`admin.users.mustChangePwd`)}}
q-item-label(caption) {{t(`admin.users.mustChangePwdHint`)}}
q-item-section(avatar)
q-toggle(
v-model='localAuth.mustChangePwd'
color='primary'
checked-icon='las la-check'
unchecked-icon='las la-times'
:aria-label='t(`admin.users.mustChangePwd`)'
)
q-separator.q-my-sm(inset)
q-item(tag='label', v-ripple)
blueprint-icon(icon='key')
q-item-section
q-item-label {{t(`admin.users.pwdAuthRestrict`)}}
q-item-label(caption) {{t(`admin.users.pwdAuthRestrictHint`)}}
q-item-section(avatar)
q-toggle(
v-model='localAuth.restrictLogin'
color='primary'
checked-icon='las la-check'
unchecked-icon='las la-times'
:aria-label='t(`admin.users.pwdAuthRestrict`)'
)
q-card.shadow-1.q-pb-sm.q-mt-md
q-card-section
.text-subtitle1 {{t('admin.users.tfa')}}
q-item(tag='label', v-ripple)
blueprint-icon(icon='key')
q-item-section
q-item-label {{t(`admin.users.tfaRequired`)}}
q-item-label(caption) {{t(`admin.users.tfaRequiredHint`)}}
q-item-section(avatar)
q-toggle(
v-model='localAuth.tfaRequired'
color='primary'
checked-icon='las la-check'
unchecked-icon='las la-times'
:aria-label='t(`admin.users.tfaRequired`)'
)
q-separator.q-my-sm(inset)
q-item
blueprint-icon(icon='password', :hue-rotate='45')
q-item-section
q-item-label {{t(`admin.users.tfaInvalidate`)}}
q-item-label(caption) {{t(`admin.users.tfaInvalidateHint`)}}
q-item-label(caption): strong(:class='localAuth.tfaSecret ? `text-positive` : `text-negative`') {{localAuth.tfaSecret ? t(`admin.users.tfaSet`) : t(`admin.users.tfaNotSet`)}}
q-item-section(side)
q-btn.acrylic-btn(
flat
icon='las la-arrow-circle-right'
color='primary'
@click='invalidateTFA'
:label='t(`common.actions.proceed`)'
)
.col-12.col-lg-5
q-card.shadow-1.q-pb-sm
q-card-section
.text-subtitle1 {{t('admin.users.linkedProviders')}}
q-banner.q-mt-md(
v-if='linkedAuthProviders.length < 1'
rounded
:class='$q.dark.isActive ? `bg-negative text-white` : `bg-grey-2 text-grey-7`'
) {{t('admin.users.noLinkedProviders')}}
template(
v-for='(prv, idx) in linkedAuthProviders'
:key='prv._id'
)
q-separator.q-my-sm(inset, v-if='idx > 0')
q-item
blueprint-icon(icon='google', :hue-rotate='-45')
q-item-section
q-item-label {{prv._moduleName}}
q-item-label(caption) {{prv.key}}
q-page(v-else-if='route.params.section === `groups`')
.q-pa-md
.row.q-col-gutter-md
.col-12.col-lg-8
q-card.shadow-1.q-pb-sm
q-card-section
.text-subtitle1 {{t('admin.users.groups')}}
template(
v-for='(grp, idx) of state.user.groups'
:key='grp.id'
)
q-separator.q-my-sm(inset, v-if='idx > 0')
q-item
blueprint-icon(icon='team', :hue-rotate='-45')
q-item-section
q-item-label {{grp.name}}
q-item-section(side)
q-btn.acrylic-btn(
flat
icon='las la-times'
color='accent'
@click='unassignGroup(grp.id)'
:aria-label='t(`admin.users.unassignGroup`)'
)
q-tooltip(anchor='center left' self='center right') {{t('admin.users.unassignGroup')}}
q-card.shadow-1.q-py-sm.q-mt-md
q-item
blueprint-icon(icon='join')
q-item-section
q-select(
outlined
:options='state.groups'
v-model='state.groupToAdd'
map-options
emit-value
option-value='id'
option-label='name'
options-dense
dense
hide-bottom-space
:label='t(`admin.users.groups`)'
:aria-label='t(`admin.users.groups`)'
:loading='state.loading > 0'
)
q-item-section(side)
q-btn(
unelevated
icon='las la-plus'
:label='t(`admin.users.assignGroup`)'
color='primary'
@click='assignGroup'
)
q-page(v-else-if='route.params.section === `metadata`')
.q-pa-md
.row.q-col-gutter-md
.col-12.col-lg-8
q-card.shadow-1.q-pb-sm
q-card-section.flex.items-center
.text-subtitle1 {{t('admin.users.metadata')}}
q-space
q-badge(
v-if='state.metadataInvalidJSON'
color='negative'
)
q-icon.q-mr-xs(name='las la-exclamation-triangle', size='20px')
span {{t('admin.users.invalidJSON')}}
q-badge.q-py-xs(
v-else
label='JSON'
color='positive'
)
q-item
q-item-section
q-no-ssr(:placeholder='t(`common.loading`)')
util-code-editor.admin-theme-cm(
v-model='metadata'
language='json'
:min-height='500'
)
q-page(v-else-if='route.params.section === `operations`')
.q-pa-md
.row.q-col-gutter-md
.col-12.col-lg-8
q-card.shadow-1.q-pb-sm
q-card-section
.text-subtitle1 {{t('admin.users.operations')}}
q-item
blueprint-icon(icon='email-open', :hue-rotate='45')
q-item-section
q-item-label {{t(`admin.users.sendWelcomeEmail`)}}
q-item-label(caption) {{t(`admin.users.sendWelcomeEmailAltHint`)}}
q-item-section(side)
q-btn.acrylic-btn(
flat
icon='las la-arrow-circle-right'
color='primary'
@click='sendWelcomeEmail'
:label='t(`common.actions.proceed`)'
)
q-separator.q-my-sm(inset)
q-item
blueprint-icon(icon='apply', :hue-rotate='45')
q-item-section
q-item-label {{state.user.isVerified ? t(`admin.users.unverify`) : t(`admin.users.verify`)}}
q-item-label(caption) {{state.user.isVerified ? t(`admin.users.unverifyHint`) : t(`admin.users.verifyHint`)}}
q-item-label(caption): strong(:class='state.user.isVerified ? `text-positive` : `text-negative`') {{state.user.isVerified ? t(`admin.users.verified`) : t(`admin.users.unverified`)}}
q-item-section(side)
q-btn.acrylic-btn(
flat
icon='las la-arrow-circle-right'
color='primary'
@click='toggleVerified'
:label='t(`common.actions.proceed`)'
)
q-separator.q-my-sm(inset)
q-item
blueprint-icon(icon='unfriend', :hue-rotate='45')
q-item-section
q-item-label {{state.user.isActive ? t(`admin.users.ban`) : t(`admin.users.unban`)}}
q-item-label(caption) {{state.user.isActive ? t(`admin.users.banHint`) : t(`admin.users.unbanHint`)}}
q-item-label(caption): strong(:class='state.user.isActive ? `text-positive` : `text-negative`') {{state.user.isActive ? t(`admin.users.active`) : t(`admin.users.banned`)}}
q-item-section(side)
q-btn.acrylic-btn(
flat
icon='las la-arrow-circle-right'
color='primary'
@click='toggleBan'
:label='t(`common.actions.proceed`)'
)
q-card.shadow-1.q-py-sm.q-mt-md
q-item
blueprint-icon(icon='denied', :hue-rotate='140')
q-item-section
q-item-label {{t(`admin.users.delete`)}}
q-item-label(caption) {{t(`admin.users.deleteHint`)}}
q-item-section(side)
q-btn.acrylic-btn(
flat
icon='las la-arrow-circle-right'
color='negative'
@click='deleteUser'
:label='t(`common.actions.proceed`)'
)