q-page.admin-mail
.row.q-pa-md.items-center
.col-auto
img.admin-icon.animated.fadeInLeft(src='/_assets/icons/fluent-security-lock.svg')
.col.q-pl-md
.text-h5.text-primary.animated.fadeInLeft {{ t('admin.auth.title') }}
.text-subtitle1.text-grey.animated.fadeInLeft.wait-p2s {{ t('admin.auth.subtitle') }}
.col-auto
q-btn.q-mr-sm.acrylic-btn(
icon='las la-question-circle'
flat
color='grey'
:href='siteStore.docsBase + `/admin/auth`'
target='_blank'
type='a'
)
q-btn(
unelevated
icon='mdi-check'
:label='t(`common.actions.apply`)'
color='secondary'
@click='save'
:loading='state.loading > 0'
)
q-separator(inset)
.row.q-pa-md.q-col-gutter-md
.col-auto
q-card.rounded-borders.bg-dark
q-list(
style='min-width: 350px;'
padding
dark
)
q-item(
v-for='str of combinedActiveStrategies'
:key='str.key'
active-class='bg-primary text-white'
:active='state.selectedStrategy === str.id'
@click='state.selectedStrategy = str.id'
clickable
)
q-item-section(side)
q-icon(:name='`img:` + str.strategy.icon')
q-item-section
q-item-label {{str.displayName}}
q-item-label(caption) {{str.strategy.title}}
q-item-section(side)
status-light(:color='str.isEnabled ? `positive` : `negative`', :pulse='str.isEnabled')
q-btn.q-mt-sm.full-width(
color='primary'
icon='las la-plus'
:label='t(`admin.auth.addStrategy`)'
)
q-menu(auto-close, fit, max-width='300px')
q-list(separator)
q-item(
v-for='str of availableStrategies'
:key='str.key'
clickable
@click='addStrategy(str)'
)
q-item-section(avatar)
q-avatar(
rounded
color='dark'
text-color='white'
)
q-icon(
:name='`img:` + str.icon'
)
q-item-section
q-item-label: strong {{str.title}}
q-item-label(caption, lines='2') {{str.description}}
.col
q-card.shadow-1.q-pb-sm
q-card-section
.text-subtitle1 {{t('admin.storage.contentTypes')}}
.text-body2.text-grey {{ t('admin.storage.contentTypesHint') }}
//- -----------------------
//- Configuration
//- -----------------------
q-card.shadow-1.q-pb-sm.q-mt-md
q-card-section
.text-subtitle1 {{t('admin.storage.config')}}
q-banner.q-mt-md(
v-if='!state.strategy.config || Object.keys(state.strategy.config).length < 1'
rounded
:class='$q.dark.isActive ? `bg-negative text-white` : `bg-grey-2 text-grey-7`'
) {{t('admin.storage.noConfigOption')}}
template(
v-for='(cfg, cfgKey, idx) in state.strategy.config'
)
template(
v-if='configIfCheck(cfg.if)'
)
q-separator.q-my-sm(inset, v-if='idx > 0')
q-item(v-if='cfg.type === `boolean`', tag='label')
blueprint-icon(:icon='cfg.icon', :hue-rotate='cfg.readOnly ? -45 : 0')
q-item-section
q-item-label {{cfg.title}}
q-item-label(caption) {{cfg.hint}}
q-item-section(avatar)
q-toggle(
v-model='cfg.value'
color='primary'
checked-icon='las la-check'
unchecked-icon='las la-times'
:aria-label='t(`admin.general.allowComments`)'
:disable='cfg.readOnly'
)
q-item(v-else)
blueprint-icon(:icon='cfg.icon', :hue-rotate='cfg.readOnly ? -45 : 0')
q-item-section
q-item-label {{cfg.title}}
q-item-label(caption) {{cfg.hint}}
q-item-section(
:style='cfg.type === `number` ? `flex: 0 0 150px;` : ``'
:class='{ "col-auto": cfg.enum && cfg.enumDisplay === `buttons` }'
)
q-btn-toggle(
v-if='cfg.enum && cfg.enumDisplay === `buttons`'
v-model='cfg.value'
push
glossy
no-caps
toggle-color='primary'
:options='cfg.enum'
:disable='cfg.readOnly'
)
q-select(
v-else-if='cfg.enum'
outlined
v-model='cfg.value'
:options='cfg.enum'
emit-value
map-options
dense
options-dense
:aria-label='cfg.title'
:disable='cfg.readOnly'
)
q-input(
v-else
outlined
v-model='cfg.value'
dense
:type='cfg.multiline ? `textarea` : `input`'
:aria-label='cfg.title'
:disable='cfg.readOnly'
)
.col-auto(v-if='state.selectedStrategy && state.strategy')
//- -----------------------
//- Infobox
//- -----------------------
q-card.rounded-borders.q-pb-md(style='width: 350px;')
q-card-section
.text-subtitle1 {{state.strategy.strategy.title}}
q-img.q-mt-sm.rounded-borders(
:src='state.strategy.strategy.logo'
fit='contain'
no-spinner
style='height: 100px;'
)
.text-body2.q-mt-md {{state.strategy.strategy.description}}
q-separator.q-mb-sm(inset)
q-item
q-item-section
q-item-label.text-grey {{t(`admin.auth.vendor`)}}
q-item-label {{state.strategy.strategy.vendor}}
q-separator.q-my-sm(inset)
q-item
q-item-section
q-item-label.text-grey {{t(`admin.auth.vendorWebsite`)}}
q-item-label: a(:href='state.strategy.strategy.website', target='_blank', rel='noreferrer') {{state.strategy.strategy.website}}
//- -----------------------
//- Status
//- -----------------------
q-card.rounded-borders.q-pb-md.q-mt-md(style='width: 350px;')
q-card-section
.text-subtitle1 {{t(`admin.auth.status`)}}
q-item(tag='label')
q-item-section
q-item-label {{t(`admin.auth.enabled`)}}
q-item-label(caption) {{t(`admin.auth.enabledHint`)}}
q-item-label.text-deep-orange(v-if='state.strategy.strategy.key === `local`', caption) {{t(`admin.auth.enabledForced`)}}
q-item-section(avatar)
q-toggle(
v-model='state.strategy.isEnabled'
:disable='state.strategy.strategy.key === `local`'
color='primary'
checked-icon='las la-check'
unchecked-icon='las la-times'
:aria-label='t(`admin.auth.enabled`)'
)
q-separator.q-my-sm(inset)
q-item
q-item-section
q-btn.acrylic-btn(
icon='las la-trash-alt'
flat
color='negative'
:disable='state.strategy.strategy.key === `local`'
label='Delete Strategy'
)
//- v-flex(xs12, lg9)
//- v-card.animated.fadeInUp.wait-p2s
//- v-toolbar(color='primary', dense, flat, dark)
//- .subtitle-1 {{strategy.displayName}} #[em ({{strategy.strategy.title}})]
//- v-spacer
//- v-btn(small, outlined, dark, color='white', :disabled='strategy.key === `local`', @click='deleteStrategy()')
//- v-icon(left) mdi-close
//- span {{$t('common.actions.delete')}}
//- v-card-info(color='blue')
//- div
//- span {{strategy.strategy.description}}
//- .caption: a(:href='strategy.strategy.website') {{strategy.strategy.website}}
//- v-spacer
//- .admin-providerlogo
//- img(:src='strategy.strategy.logo', :alt='strategy.strategy.title')
//- v-card-text
//- .row
//- .col-8
//- v-text-field(
//- outlined
//- :label='$t(`admin.auth.displayName`)'
//- v-model='strategy.displayName'
//- prepend-icon='mdi-format-title'
//- :hint='$t(`admin.auth.displayNameHint`)'
//- persistent-hint
//- )
//- .col-4
//- v-switch.mt-1(
//- :label='$t(`admin.auth.strategyIsEnabled`)'
//- v-model='strategy.isEnabled'
//- color='primary'
//- prepend-icon='mdi-power'
//- :hint='$t(`admin.auth.strategyIsEnabledHint`)'
//- persistent-hint
//- inset
//- :disabled='strategy.key === `local`'
//- )
//- template(v-if='strategy.config && Object.keys(strategy.config).length > 0')
//- v-divider
//- .overline.my-5 {{$t('admin.auth.strategyConfiguration')}}
//- .pr-3
//- template(v-for='cfg in strategy.config')
//- v-select.mb-3(
//- v-if='cfg.value.type === "string" && cfg.value.enum'
//- outlined
//- :items='cfg.value.enum'
//- :key='cfg.key'
//- :label='cfg.value.title'
//- v-model='cfg.value.value'
//- prepend-icon='mdi-cog-box'
//- :hint='cfg.value.hint ? cfg.value.hint : ""'
//- persistent-hint
//- :class='cfg.value.hint ? "mb-2" : ""'
//- :style='cfg.value.maxWidth > 0 ? `max-width:` + cfg.value.maxWidth + `px;` : ``'
//- )
//- v-switch.mb-6(
//- v-else-if='cfg.value.type === "boolean"'
//- :key='cfg.key'
//- :label='cfg.value.title'
//- v-model='cfg.value.value'
//- color='primary'
//- prepend-icon='mdi-cog-box'
//- :hint='cfg.value.hint ? cfg.value.hint : ""'
//- persistent-hint
//- inset
//- )
//- v-textarea.mb-3(
//- v-else-if='cfg.value.type === "string" && cfg.value.multiline'
//- outlined
//- :key='cfg.key'
//- :label='cfg.value.title'
//- v-model='cfg.value.value'
//- prepend-icon='mdi-cog-box'
//- :hint='cfg.value.hint ? cfg.value.hint : ""'
//- persistent-hint
//- :class='cfg.value.hint ? "mb-2" : ""'
//- )
//- v-text-field.mb-3(
//- v-else
//- outlined
//- :key='cfg.key'
//- :label='cfg.value.title'
//- v-model='cfg.value.value'
//- prepend-icon='mdi-cog-box'
//- :hint='cfg.value.hint ? cfg.value.hint : ""'
//- persistent-hint
//- :class='cfg.value.hint ? "mb-2" : ""'
//- :style='cfg.value.maxWidth > 0 ? `max-width:` + cfg.value.maxWidth + `px;` : ``'
//- )
//- v-divider
//- .overline.my-5 {{$t('admin.auth.registration')}}
//- .pr-3
//- v-switch.ml-3(
//- v-model='strategy.selfRegistration'
//- :label='$t(`admin.auth.selfRegistration`)'
//- color='primary'
//- :hint='$t(`admin.auth.selfRegistrationHint`)'
//- persistent-hint
//- inset
//- )
//- v-combobox.ml-3.mt-5(
//- :label='$t(`admin.auth.domainsWhitelist`)'
//- v-model='strategy.domainWhitelist'
//- prepend-icon='mdi-email-check-outline'
//- outlined
//- :disabled='!strategy.selfRegistration'
//- :hint='$t(`admin.auth.domainsWhitelistHint`)'
//- persistent-hint
//- small-chips
//- deletable-chips
//- clearable
//- multiple
//- chips
//- )
//- v-autocomplete.mt-3.ml-3(
//- outlined
//- :disabled='!strategy.selfRegistration'
//- :items='groups'
//- item-text='name'
//- item-value='id'
//- :label='$t(`admin.auth.autoEnrollGroups`)'
//- v-model='strategy.autoEnrollGroups'
//- prepend-icon='mdi-account-group'
//- :hint='$t(`admin.auth.autoEnrollGroupsHint`)'
//- small-chips
//- persistent-hint
//- deletable-chips
//- clearable
//- multiple
//- chips
//- )
//- v-card.mt-4.wiki-form.animated.fadeInUp.wait-p4s(v-if='selectedStrategy !== `local`')
//- v-toolbar(color='primary', dense, flat, dark)
//- .subtitle-1 {{$t('admin.auth.configReference')}}
//- v-card-text
//- .body-2 {{$t('admin.auth.configReferenceSubtitle')}}
//- v-alert.mt-3.radius-7(v-if='host.length < 8', color='red', outlined, :value='true', icon='mdi-alert')
//- i18next(path='admin.auth.siteUrlNotSetup', tag='span')
//- strong(place='siteUrl') {{$t('admin.general.siteUrl')}}
//- strong(place='general') {{$t('admin.general.title')}}
//- .pa-3.mt-3.radius-7.grey(v-else, :class='$vuetify.theme.dark ? `darken-3-d5` : `lighten-3`')
//- .body-2: strong {{$t('admin.auth.allowedWebOrigins')}}
//- .body-2 {{host}}
//- v-divider.my-3
//- .body-2: strong {{$t('admin.auth.callbackUrl')}}
//- .body-2 {{host}}/login/{{strategy.key}}/callback
//- v-divider.my-3
//- .body-2: strong {{$t('admin.auth.loginUrl')}}
//- .body-2 {{host}}/login
//- v-divider.my-3
//- .body-2: strong {{$t('admin.auth.logoutUrl')}}
//- .body-2 {{host}}
//- v-divider.my-3
//- .body-2: strong {{$t('admin.auth.tokenEndpointAuthMethod')}}
//- .body-2 HTTP-POST