q-dialog(ref='dialogRef', @hide='onDialogHide')
q-card(style='min-width: 650px;')
q-card-section.card-header
q-icon(name='img:/_assets/icons/fluent-plus-plus.svg', left, size='sm')
span {{t(`admin.users.create`)}}
q-form.q-py-sm(ref='createUserForm', @submit='create')
q-item
blueprint-icon(icon='person')
q-item-section
q-input(
outlined
v-model='state.userName'
dense
:rules='userNameValidation'
hide-bottom-space
:label='t(`common.field.name`)'
:aria-label='t(`common.field.name`)'
lazy-rules='ondemand'
autofocus
ref='iptName'
)
q-item
blueprint-icon(icon='email')
q-item-section
q-input(
outlined
v-model='state.userEmail'
dense
type='email'
:rules='userEmailValidation'
hide-bottom-space
:label='t(`admin.users.email`)'
:aria-label='t(`admin.users.email`)'
lazy-rules='ondemand'
autofocus
)
q-item
blueprint-icon(icon='password')
q-item-section
q-input(
outlined
v-model='state.userPassword'
dense
:rules='userPasswordValidation'
hide-bottom-space
:label='t(`admin.users.password`)'
:aria-label='t(`admin.users.password`)'
lazy-rules='ondemand'
autofocus
)
template(#append)
.flex.items-center
q-badge(
:color='passwordStrength.color'
:label='passwordStrength.label'
)
q-separator.q-mx-sm(vertical)
q-btn(
flat
dense
padding='none xs'
color='brown'
@click='randomizePassword'
)
q-icon(name='las la-dice-d6')
.q-pl-xs.text-caption: strong Generate
q-item
blueprint-icon(icon='team')
q-item-section
q-select(
outlined
:options='state.groups'
v-model='state.userGroups'
multiple
map-options
emit-value
option-value='id'
option-label='name'
options-dense
dense
:rules='userGroupsValidation'
hide-bottom-space
:label='t(`admin.users.groups`)'
:aria-label='t(`admin.users.groups`)'
lazy-rules='ondemand'
:loading='state.loadingGroups'
)
template(v-slot:selected)
.text-caption(v-if='state.userGroups.length > 1')
i18n-t(keypath='admin.users.groupsSelected')
template(#count)
strong {{ state.userGroups.length }}
.text-caption(v-else-if='state.userGroups.length === 1')
i18n-t(keypath='admin.users.groupSelected')
template(#group)
strong {{ selectedGroupName }}
span(v-else)
template(v-slot:option='{ itemProps, opt, selected, toggleOption }')
q-item(
v-bind='itemProps'
)
q-item-section(side)
q-checkbox(
size='sm'
:model-value='selected'
@update:model-value='toggleOption(opt)'
)
q-item-section
q-item-label {{opt.name}}
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='state.userMustChangePassword'
color='primary'
checked-icon='las la-check'
unchecked-icon='las la-times'
:aria-label='t(`admin.users.mustChangePwd`)'
)
q-item(tag='label', v-ripple)
blueprint-icon(icon='email-open')
q-item-section
q-item-label {{t(`admin.users.sendWelcomeEmail`)}}
q-item-label(caption) {{t(`admin.users.sendWelcomeEmailHint`)}}
q-item-section(avatar)
q-toggle(
v-model='state.userSendWelcomeEmail'
color='primary'
checked-icon='las la-check'
unchecked-icon='las la-times'
:aria-label='t(`admin.users.sendWelcomeEmail`)'
)
q-card-actions.card-actions
q-checkbox(
v-model='state.keepOpened'
color='primary'
:label='t(`admin.users.createKeepOpened`)'
size='sm'
)
q-space
q-btn.acrylic-btn(
flat
:label='t(`common.actions.cancel`)'
color='grey'
padding='xs md'
@click='onDialogCancel'
)
q-btn(
unelevated
:label='t(`common.actions.create`)'
color='primary'
padding='xs md'
@click='create'
:loading='state.loading > 0'
)