feat: admin terminal + legacy code cleanup

parent 05797652
...@@ -19,9 +19,7 @@ npm-debug.log* ...@@ -19,9 +19,7 @@ npm-debug.log*
# Generated assets # Generated assets
/assets /assets
/assets-legacy /assets-legacy
server/views/master.pug server/views/base.pug
server/views/legacy/master.pug
server/views/setup.pug
# Webpack # Webpack
.webpack-cache .webpack-cache
......
...@@ -134,27 +134,22 @@ Vue.prototype.Velocity = Velocity ...@@ -134,27 +134,22 @@ Vue.prototype.Velocity = Velocity
// Register Vue Components // Register Vue Components
// ==================================== // ====================================
Vue.component('Admin', () => import(/* webpackChunkName: "admin" */ './components/admin.vue'))
Vue.component('Comments', () => import(/* webpackChunkName: "comments" */ './components/comments.vue')) Vue.component('Comments', () => import(/* webpackChunkName: "comments" */ './components/comments.vue'))
Vue.component('Editor', () => import(/* webpackPrefetch: -100, webpackChunkName: "editor" */ './components/editor.vue')) Vue.component('Editor', () => import(/* webpackPrefetch: -100, webpackChunkName: "editor" */ './components/editor.vue'))
Vue.component('History', () => import(/* webpackChunkName: "history" */ './components/history.vue')) Vue.component('History', () => import(/* webpackChunkName: "history" */ './components/history.vue'))
Vue.component('Loader', () => import(/* webpackPrefetch: true, webpackChunkName: "ui-extra" */ './components/common/loader.vue')) Vue.component('Loader', () => import(/* webpackPrefetch: true, webpackChunkName: "ui-extra" */ './components/common/loader.vue'))
Vue.component('Login', () => import(/* webpackPrefetch: true, webpackChunkName: "login" */ './components/login.vue'))
Vue.component('NavHeader', () => import(/* webpackMode: "eager" */ './components/common/nav-header.vue')) Vue.component('NavHeader', () => import(/* webpackMode: "eager" */ './components/common/nav-header.vue'))
Vue.component('NewPage', () => import(/* webpackChunkName: "new-page" */ './components/new-page.vue')) Vue.component('NewPage', () => import(/* webpackChunkName: "new-page" */ './components/new-page.vue'))
Vue.component('Notify', () => import(/* webpackMode: "eager" */ './components/common/notify.vue')) Vue.component('Notify', () => import(/* webpackMode: "eager" */ './components/common/notify.vue'))
Vue.component('NotFound', () => import(/* webpackChunkName: "not-found" */ './components/not-found.vue')) Vue.component('NotFound', () => import(/* webpackChunkName: "not-found" */ './components/not-found.vue'))
Vue.component('PageSelector', () => import(/* webpackPrefetch: true, webpackChunkName: "ui-extra" */ './components/common/page-selector.vue')) Vue.component('PageSelector', () => import(/* webpackPrefetch: true, webpackChunkName: "ui-extra" */ './components/common/page-selector.vue'))
Vue.component('PageSource', () => import(/* webpackChunkName: "source" */ './components/source.vue')) Vue.component('PageSource', () => import(/* webpackChunkName: "source" */ './components/source.vue'))
Vue.component('Profile', () => import(/* webpackChunkName: "profile" */ './components/profile.vue'))
Vue.component('Register', () => import(/* webpackChunkName: "register" */ './components/register.vue'))
Vue.component('SearchResults', () => import(/* webpackPrefetch: true, webpackChunkName: "ui-extra" */ './components/common/search-results.vue')) Vue.component('SearchResults', () => import(/* webpackPrefetch: true, webpackChunkName: "ui-extra" */ './components/common/search-results.vue'))
Vue.component('SocialSharing', () => import(/* webpackPrefetch: true, webpackChunkName: "ui-extra" */ './components/common/social-sharing.vue')) Vue.component('SocialSharing', () => import(/* webpackPrefetch: true, webpackChunkName: "ui-extra" */ './components/common/social-sharing.vue'))
Vue.component('Tags', () => import(/* webpackChunkName: "tags" */ './components/tags.vue')) Vue.component('Tags', () => import(/* webpackChunkName: "tags" */ './components/tags.vue'))
Vue.component('Unauthorized', () => import(/* webpackChunkName: "unauthorized" */ './components/unauthorized.vue')) Vue.component('Unauthorized', () => import(/* webpackChunkName: "unauthorized" */ './components/unauthorized.vue'))
Vue.component('VCardChin', () => import(/* webpackPrefetch: true, webpackChunkName: "ui-extra" */ './components/common/v-card-chin.vue')) Vue.component('VCardChin', () => import(/* webpackPrefetch: true, webpackChunkName: "ui-extra" */ './components/common/v-card-chin.vue'))
Vue.component('VCardInfo', () => import(/* webpackPrefetch: true, webpackChunkName: "ui-extra" */ './components/common/v-card-info.vue')) Vue.component('VCardInfo', () => import(/* webpackPrefetch: true, webpackChunkName: "ui-extra" */ './components/common/v-card-info.vue'))
Vue.component('Welcome', () => import(/* webpackChunkName: "welcome" */ './components/welcome.vue'))
Vue.component('NavFooter', () => import(/* webpackChunkName: "theme" */ './themes/' + siteConfig.theme + '/components/nav-footer.vue')) Vue.component('NavFooter', () => import(/* webpackChunkName: "theme" */ './themes/' + siteConfig.theme + '/components/nav-footer.vue'))
Vue.component('Page', () => import(/* webpackChunkName: "theme" */ './themes/' + siteConfig.theme + '/components/page.vue')) Vue.component('Page', () => import(/* webpackChunkName: "theme" */ './themes/' + siteConfig.theme + '/components/page.vue'))
......
<template lang='pug'>
v-container(fluid, grid-list-lg)
v-layout(row, wrap)
v-flex(xs12)
.admin-header
img.animated.fadeInUp(src='/_assets/svg/icon-line-chart.svg', alt='Analytics', style='width: 80px;')
.admin-header-title
.headline.primary--text.animated.fadeInLeft {{ $t('admin:analytics.title') }}
.subtitle-1.grey--text.animated.fadeInLeft.wait-p4s {{ $t('admin:analytics.subtitle') }}
v-spacer
v-btn.animated.fadeInDown.wait-p2s.mr-3(icon, outlined, color='grey', @click='refresh')
v-icon mdi-refresh
v-btn.animated.fadeInDown(color='success', @click='save', depressed, large)
v-icon(left) mdi-check
span {{$t('common:actions.apply')}}
v-flex(lg3, xs12)
v-card.animated.fadeInUp
v-toolbar(flat, color='primary', dark, dense)
.subtitle-1 {{$t('admin:analytics.providers')}}
v-list(two-line, dense).py-0
template(v-for='(str, idx) in providers')
v-list-item(:key='str.key', @click='selectedProvider = str.key', :disabled='!str.isAvailable')
v-list-item-avatar(size='24')
v-icon(color='grey', v-if='!str.isAvailable') mdi-minus-box-outline
v-icon(color='primary', v-else-if='str.isEnabled', v-ripple, @click='str.isEnabled = false') mdi-checkbox-marked-outline
v-icon(color='grey', v-else, v-ripple, @click='str.isEnabled = true') mdi-checkbox-blank-outline
v-list-item-content
v-list-item-title.body-2(:class='!str.isAvailable ? `grey--text` : (selectedProvider === str.key ? `primary--text` : ``)') {{ str.title }}
v-list-item-subtitle: .caption(:class='!str.isAvailable ? `grey--text text--lighten-1` : (selectedProvider === str.key ? `blue--text ` : ``)') {{ str.description }}
v-list-item-avatar(v-if='selectedProvider === str.key', size='24')
v-icon.animated.fadeInLeft(color='primary', large) mdi-chevron-right
v-divider(v-if='idx < providers.length - 1')
v-flex(xs12, lg9)
v-card.animated.fadeInUp.wait-p2s
v-toolbar(color='primary', dense, flat, dark)
.subtitle-1 {{provider.title}}
v-spacer
v-switch(
dark
color='blue lighten-5'
label='Active'
v-model='provider.isEnabled'
hide-details
inset
)
v-card-info(color='blue')
div
div {{provider.description}}
span.caption: a(:href='provider.website') {{provider.website}}
v-spacer
.admin-providerlogo
img(:src='provider.logo', :alt='provider.title')
v-card-text
v-form
.overline.pb-5 {{$t('admin:analytics.providerConfiguration')}}
.body-1.ml-3(v-if='!provider.config || provider.config.length < 1'): em {{$t('admin:analytics.providerNoConfiguration')}}
template(v-else, v-for='cfg in provider.config')
v-select(
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" : ""'
)
v-switch.mb-3(
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(
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(
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" : ""'
)
</template>
<script>
import _ from 'lodash'
import providersQuery from 'gql/admin/analytics/analytics-query-providers.gql'
import providersSaveMutation from 'gql/admin/analytics/analytics-mutation-save-providers.gql'
export default {
data() {
return {
providers: [],
selectedProvider: '',
provider: {}
}
},
watch: {
selectedProvider(newValue, oldValue) {
this.provider = _.find(this.providers, ['key', newValue]) || {}
},
providers(newValue, oldValue) {
this.selectedProvider = 'google'
}
},
methods: {
async refresh() {
await this.$apollo.queries.providers.refetch()
this.$store.commit('showNotification', {
message: this.$t('admin:analytics.refreshSuccess'),
style: 'success',
icon: 'cached'
})
},
async save() {
this.$store.commit(`loadingStart`, 'admin-analytics-saveproviders')
try {
await this.$apollo.mutate({
mutation: providersSaveMutation,
variables: {
providers: this.providers.map(str => _.pick(str, [
'isEnabled',
'key',
'config'
])).map(str => ({...str, config: str.config.map(cfg => ({...cfg, value: JSON.stringify({ v: cfg.value.value })}))}))
}
})
this.$store.commit('showNotification', {
message: this.$t('admin:analytics.saveSuccess'),
style: 'success',
icon: 'check'
})
} catch (err) {
this.$store.commit('pushGraphError', err)
}
this.$store.commit(`loadingStop`, 'admin-analytics-saveproviders')
}
},
apollo: {
providers: {
query: providersQuery,
fetchPolicy: 'network-only',
update: (data) => _.cloneDeep(data.analytics.providers).map(str => ({
...str,
config: _.sortBy(str.config.map(cfg => ({
...cfg,
value: JSON.parse(cfg.value)
})), [t => t.value.order])
})),
watchLoading (isLoading) {
this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-analytics-refresh')
}
}
}
}
</script>
<template lang="pug">
div
v-dialog(v-model='isShown', max-width='650', persistent)
v-card
.dialog-header.is-short
v-icon.mr-3(color='white') mdi-plus
span {{$t('admin:api.newKeyTitle')}}
v-card-text.pt-5
v-text-field(
outlined
prepend-icon='mdi-format-title'
v-model='name'
:label='$t(`admin:api.newKeyName`)'
persistent-hint
ref='keyNameInput'
:hint='$t(`admin:api.newKeyNameHint`)'
counter='255'
)
v-select.mt-3(
:items='expirations'
outlined
prepend-icon='mdi-clock'
v-model='expiration'
:label='$t(`admin:api.newKeyExpiration`)'
:hint='$t(`admin:api.newKeyExpirationHint`)'
persistent-hint
)
v-divider.mt-4
v-subheader.pl-2: strong.indigo--text {{$t('admin:api.newKeyPermissionScopes')}}
v-list.pl-8(nav)
v-list-item-group(v-model='fullAccess')
v-list-item(
:value='true'
active-class='indigo--text'
)
template(v-slot:default='{ active, toggle }')
v-list-item-action
v-checkbox(
:input-value='active'
:true-value='true'
color='indigo'
@click='toggle'
)
v-list-item-content
v-list-item-title {{$t('admin:api.newKeyFullAccess')}}
v-divider.mt-3
v-subheader.caption.indigo--text {{$t('admin:api.newKeyGroupPermissions')}}
v-list-item
v-select(
:disabled='fullAccess'
:items='groups'
item-text='name'
item-value='id'
outlined
color='indigo'
v-model='group'
:label='$t(`admin:api.newKeyGroup`)'
:hint='$t(`admin:api.newKeyGroupHint`)'
persistent-hint
)
v-card-chin
v-spacer
v-btn(text, @click='isShown = false', :disabled='loading') {{$t('common:actions.cancel')}}
v-btn.px-3(depressed, color='primary', @click='generate', :loading='loading')
v-icon(left) mdi-chevron-right
span {{$t('common:actions.generate')}}
v-dialog(
v-model='isCopyKeyDialogShown'
max-width='750'
persistent
overlay-color='blue darken-5'
overlay-opacity='.9'
)
v-card
v-toolbar(dense, flat, color='primary', dark) {{$t('admin:api.newKeyTitle')}}
v-card-text.pt-5
.body-2.text-center
i18next(tag='span', path='admin:api.newKeyCopyWarn')
strong(place='bold') {{$t('admin:api.newKeyCopyWarnBold')}}
v-textarea.mt-3(
ref='keyContentsIpt'
filled
no-resize
readonly
v-model='key'
:rows='10'
hide-details
)
v-card-chin
v-spacer
v-btn.px-3(depressed, dark, color='primary', @click='isCopyKeyDialogShown = false') {{$t('common:actions.close')}}
</template>
<script>
import _ from 'lodash'
import gql from 'graphql-tag'
import groupsQuery from 'gql/admin/users/users-query-groups.gql'
export default {
props: {
value: {
type: Boolean,
default: false
}
},
data() {
return {
loading: false,
name: '',
expiration: '1y',
fullAccess: true,
groups: [],
group: null,
isCopyKeyDialogShown: false,
key: ''
}
},
computed: {
isShown: {
get() { return this.value },
set(val) { this.$emit('input', val) }
},
expirations() {
return [
{ value: '30d', text: this.$t('admin:api.expiration30d') },
{ value: '90d', text: this.$t('admin:api.expiration90d') },
{ value: '180d', text: this.$t('admin:api.expiration180d') },
{ value: '1y', text: this.$t('admin:api.expiration1y') },
{ value: '3y', text: this.$t('admin:api.expiration3y') }
]
}
},
watch: {
value (newValue, oldValue) {
if (newValue) {
setTimeout(() => {
this.$refs.keyNameInput.focus()
}, 400)
}
}
},
methods: {
async generate () {
try {
if (_.trim(this.name).length < 2 || this.name.length > 255) {
throw new Error(this.$t('admin:api.newKeyNameError'))
} else if (!this.fullAccess && !this.group) {
throw new Error(this.$t('admin:api.newKeyGroupError'))
} else if (!this.fullAccess && this.group === 2) {
throw new Error(this.$t('admin:api.newKeyGuestGroupError'))
}
} catch (err) {
return this.$store.commit('showNotification', {
style: 'red',
message: err,
icon: 'alert'
})
}
this.loading = true
try {
const resp = await this.$apollo.mutate({
mutation: gql`
mutation ($name: String!, $expiration: String!, $fullAccess: Boolean!, $group: Int) {
authentication {
createApiKey (name: $name, expiration: $expiration, fullAccess: $fullAccess, group: $group) {
key
responseResult {
succeeded
errorCode
slug
message
}
}
}
}
`,
variables: {
name: this.name,
expiration: this.expiration,
fullAccess: (this.fullAccess === true),
group: this.group
},
watchLoading (isLoading) {
this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-api-create')
}
})
if (_.get(resp, 'data.authentication.createApiKey.responseResult.succeeded', false)) {
this.$store.commit('showNotification', {
style: 'success',
message: this.$t('admin:api.newKeySuccess'),
icon: 'check'
})
this.name = ''
this.expiration = '1y'
this.fullAccess = true
this.group = null
this.isShown = false
this.$emit('refresh')
this.key = _.get(resp, 'data.authentication.createApiKey.key', '???')
this.isCopyKeyDialogShown = true
setTimeout(() => {
this.$refs.keyContentsIpt.$refs.input.select()
}, 400)
} else {
this.$store.commit('showNotification', {
style: 'red',
message: _.get(resp, 'data.authentication.createApiKey.responseResult.message', 'An unexpected error occurred.'),
icon: 'alert'
})
}
} catch (err) {
this.$store.commit('pushGraphError', err)
}
this.loading = false
}
},
apollo: {
groups: {
query: groupsQuery,
fetchPolicy: 'network-only',
update: (data) => data.groups.list,
watchLoading (isLoading) {
this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-api-groups-refresh')
}
}
}
}
</script>
<template lang='pug'>
v-container(fluid, grid-list-lg)
v-layout(row, wrap)
v-flex(xs12)
.admin-header
img.animated.fadeInUp(src='/_assets/svg/icon-rest-api.svg', alt='API', style='width: 80px;')
.admin-header-title
.headline.primary--text.animated.fadeInLeft {{$t('admin:api.title')}}
.subtitle-1.grey--text.animated.fadeInLeft {{$t('admin:api.subtitle')}}
v-spacer
template(v-if='enabled')
status-indicator.mr-3(positive, pulse)
.caption.green--text.animated.fadeInLeft {{$t('admin:api.enabled')}}
template(v-else)
status-indicator.mr-3(negative, pulse)
.caption.red--text.animated.fadeInLeft {{$t('admin:api.disabled')}}
v-spacer
v-btn.mr-3.animated.fadeInDown.wait-p2s(outlined, color='grey', icon, @click='refresh')
v-icon mdi-refresh
v-btn.mr-3.animated.fadeInDown.wait-p1s(:color='enabled ? `red` : `green`', depressed, @click='globalSwitch', dark, :loading='isToggleLoading')
v-icon(left) mdi-power
span(v-if='!enabled') {{$t('admin:api.enableButton')}}
span(v-else) {{$t('admin:api.disableButton')}}
v-btn.animated.fadeInDown(color='primary', depressed, large, @click='newKey', dark)
v-icon(left) mdi-plus
span {{$t('admin:api.newKeyButton')}}
v-card.mt-3.animated.fadeInUp
v-simple-table(v-if='keys && keys.length > 0')
template(v-slot:default)
thead
tr.grey(:class='$vuetify.theme.dark ? `darken-4-d5` : `lighten-5`')
th {{$t('admin:api.headerName')}}
th {{$t('admin:api.headerKeyEnding')}}
th {{$t('admin:api.headerExpiration')}}
th {{$t('admin:api.headerCreated')}}
th {{$t('admin:api.headerLastUpdated')}}
th(width='100') {{$t('admin:api.headerRevoke')}}
tbody
tr(v-for='key of keys', :key='`key-` + key.id')
td
strong(:class='key.isRevoked ? `red--text` : ``') {{ key.name }}
em.caption.ml-1.red--text(v-if='key.isRevoked') (revoked)
td.caption {{ key.keyShort }}
td(:style='key.isRevoked ? `text-decoration: line-through;` : ``') {{ key.expiration | moment('LL') }}
td {{ key.createdAt | moment('calendar') }}
td {{ key.updatedAt | moment('calendar') }}
td: v-btn(icon, @click='revoke(key)', :disabled='key.isRevoked'): v-icon(color='error') mdi-cancel
v-card-text(v-else)
v-alert.mb-0(icon='mdi-information', :value='true', outlined, color='info') {{$t('admin:api.noKeyInfo')}}
create-api-key(v-model='isCreateDialogShown', @refresh='refresh(false)')
v-dialog(v-model='isRevokeConfirmDialogShown', max-width='500', persistent)
v-card
.dialog-header.is-red {{$t('admin:api.revokeConfirm')}}
v-card-text.pa-4
i18next(tag='span', path='admin:api.revokeConfirmText')
strong(place='name') {{ current.name }}
v-card-actions
v-spacer
v-btn(text, @click='isRevokeConfirmDialogShown = false', :disabled='revokeLoading') {{$t('common:actions.cancel')}}
v-btn(color='red', dark, @click='revokeConfirm', :loading='revokeLoading') {{$t('admin:api.revoke')}}
</template>
<script>
import _ from 'lodash'
import gql from 'graphql-tag'
import { StatusIndicator } from 'vue-status-indicator'
import CreateApiKey from './admin-api-create.vue'
export default {
components: {
StatusIndicator,
CreateApiKey
},
data() {
return {
enabled: false,
isToggleLoading: false,
keys: [],
isCreateDialogShown: false,
isRevokeConfirmDialogShown: false,
revokeLoading: false,
current: {}
}
},
methods: {
async refresh (notify = true) {
this.$apollo.queries.keys.refetch()
if (notify) {
this.$store.commit('showNotification', {
message: this.$t('admin:api.refreshSuccess'),
style: 'success',
icon: 'cached'
})
}
},
async globalSwitch () {
this.isToggleLoading = true
try {
const resp = await this.$apollo.mutate({
mutation: gql`
mutation ($enabled: Boolean!) {
authentication {
setApiState (enabled: $enabled) {
responseResult {
succeeded
errorCode
slug
message
}
}
}
}
`,
variables: {
enabled: !this.enabled
},
watchLoading (isLoading) {
this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-api-toggle')
}
})
if (_.get(resp, 'data.authentication.setApiState.responseResult.succeeded', false)) {
this.$store.commit('showNotification', {
style: 'success',
message: this.enabled ? this.$t('admin:api.toggleStateDisabledSuccess') : this.$t('admin:api.toggleStateEnabledSuccess'),
icon: 'check'
})
await this.$apollo.queries.enabled.refetch()
} else {
this.$store.commit('showNotification', {
style: 'red',
message: _.get(resp, 'data.authentication.setApiState.responseResult.message', 'An unexpected error occurred.'),
icon: 'alert'
})
}
} catch (err) {
this.$store.commit('pushGraphError', err)
}
this.isToggleLoading = false
},
async newKey () {
this.isCreateDialogShown = true
},
revoke (key) {
this.current = key
this.isRevokeConfirmDialogShown = true
},
async revokeConfirm () {
this.revokeLoading = true
try {
const resp = await this.$apollo.mutate({
mutation: gql`
mutation ($id: Int!) {
authentication {
revokeApiKey (id: $id) {
responseResult {
succeeded
errorCode
slug
message
}
}
}
}
`,
variables: {
id: this.current.id
},
watchLoading (isLoading) {
this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-api-revoke')
}
})
if (_.get(resp, 'data.authentication.revokeApiKey.responseResult.succeeded', false)) {
this.$store.commit('showNotification', {
style: 'success',
message: this.$t('admin:api.revokeSuccess'),
icon: 'check'
})
this.refresh(false)
} else {
this.$store.commit('showNotification', {
style: 'red',
message: _.get(resp, 'data.authentication.revokeApiKey.responseResult.message', 'An unexpected error occurred.'),
icon: 'alert'
})
}
} catch (err) {
this.$store.commit('pushGraphError', err)
}
this.isRevokeConfirmDialogShown = false
this.revokeLoading = false
}
},
apollo: {
enabled: {
query: gql`
{
authentication {
apiState
}
}
`,
fetchPolicy: 'network-only',
update: (data) => data.authentication.apiState,
watchLoading (isLoading) {
this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-api-state-refresh')
}
},
keys: {
query: gql`
{
authentication {
apiKeys {
id
name
keyShort
expiration
isRevoked
createdAt
updatedAt
}
}
}
`,
fetchPolicy: 'network-only',
update: (data) => data.authentication.apiKeys,
watchLoading (isLoading) {
this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-api-keys-refresh')
}
}
}
}
</script>
<style lang='scss'>
</style>
<template lang='pug'>
v-container(fluid, grid-list-lg)
v-layout(row, wrap)
v-flex(xs12)
.admin-header
img.animated.fadeInUp(src='/_assets/svg/icon-chat-bubble.svg', alt='Comments', style='width: 80px;')
.admin-header-title
.headline.primary--text.animated.fadeInLeft {{$t('admin:comments.title')}}
.subtitle-1.grey--text.animated.fadeInLeft.wait-p2s {{$t('admin:comments.subtitle')}}
v-spacer
v-btn.animated.fadeInDown.wait-p3s(icon, outlined, color='grey', href='https://docs.requarks.io/comments', target='_blank')
v-icon mdi-help-circle
v-btn.mx-3.animated.fadeInDown.wait-p2s(icon, outlined, color='grey', @click='refresh')
v-icon mdi-refresh
v-btn.animated.fadeInDown(color='success', @click='save', depressed, large)
v-icon(left) mdi-check
span {{$t('common:actions.apply')}}
v-flex(lg3, xs12)
v-card.animated.fadeInUp
v-toolbar(flat, color='primary', dark, dense)
.subtitle-1 {{$t('admin:comments.provider')}}
v-list.py-0(two-line, dense)
template(v-for='(provider, idx) in providers')
v-list-item(:key='provider.key', @click='selectedProvider = provider.key', :disabled='!provider.isAvailable')
v-list-item-avatar(size='24')
v-icon(color='grey', v-if='!provider.isAvailable') mdi-minus-box-outline
v-icon(color='primary', v-else-if='provider.key === selectedProvider') mdi-checkbox-marked-circle-outline
v-icon(color='grey', v-else) mdi-checkbox-blank-circle-outline
v-list-item-content
v-list-item-title.body-2(:class='!provider.isAvailable ? `grey--text` : (selectedProvider === provider.key ? `primary--text` : ``)') {{ provider.title }}
v-list-item-subtitle: .caption(:class='!provider.isAvailable ? `grey--text text--lighten-1` : (selectedProvider === provider.key ? `blue--text ` : ``)') {{ provider.description }}
v-list-item-avatar(v-if='selectedProvider === provider.key', size='24')
v-icon.animated.fadeInLeft(color='primary', large) mdi-chevron-right
v-divider(v-if='idx < providers.length - 1')
v-flex(lg9, xs12)
v-card.animated.fadeInUp.wait-p2s
v-toolbar(color='primary', dense, flat, dark)
.subtitle-1 {{provider.title}}
v-card-info(color='blue')
div
div {{provider.description}}
span.caption: a(:href='provider.website') {{provider.website}}
v-spacer
.admin-providerlogo
img(:src='provider.logo', :alt='provider.title')
v-card-text
.overline.my-5 {{$t('admin:comments.providerConfig')}}
.body-2.ml-3(v-if='!provider.config || provider.config.length < 1'): em {{$t('admin:comments.providerNoConfig')}}
template(v-else, v-for='cfg in provider.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;` : ``'
)
</template>
<script>
import _ from 'lodash'
import gql from 'graphql-tag'
export default {
data() {
return {
providers: [],
selectedProvider: '',
provider: {}
}
},
watch: {
selectedProvider(newValue, oldValue) {
this.provider = _.find(this.providers, ['key', newValue]) || {}
},
providers(newValue, oldValue) {
this.selectedProvider = _.get(_.find(this.providers, 'isEnabled'), 'key', 'db')
}
},
methods: {
async refresh() {
await this.$apollo.queries.providers.refetch()
this.$store.commit('showNotification', {
message: this.$t('admin:comments.listRefreshSuccess'),
style: 'success',
icon: 'cached'
})
},
async save() {
this.$store.commit(`loadingStart`, 'admin-comments-saveproviders')
try {
const resp = await this.$apollo.mutate({
mutation: gql`
mutation($providers: [CommentProviderInput]!) {
comments {
updateProviders(providers: $providers) {
responseResult {
succeeded
errorCode
slug
message
}
}
}
}
`,
variables: {
providers: this.providers.map(tgt => ({
isEnabled: tgt.key === this.selectedProvider,
key: tgt.key,
config: tgt.config.map(cfg => ({...cfg, value: JSON.stringify({ v: cfg.value.value })}))
}))
}
})
if (_.get(resp, 'data.comments.updateProviders.responseResult.succeeded', false)) {
this.$store.commit('showNotification', {
message: this.$t('admin:comments.configSaveSuccess'),
style: 'success',
icon: 'check'
})
} else {
throw new Error(_.get(resp, 'data.comments.updateProviders.responseResult.message', this.$t('common:error.unexpected')))
}
} catch (err) {
this.$store.commit('pushGraphError', err)
}
this.$store.commit(`loadingStop`, 'admin-comments-saveproviders')
}
},
apollo: {
providers: {
query: gql`
query {
comments {
providers {
isEnabled
key
title
description
logo
website
isAvailable
config {
key
value
}
}
}
}
`,
fetchPolicy: 'network-only',
update: (data) => _.cloneDeep(data.comments.providers).map(str => ({
...str,
config: _.sortBy(str.config.map(cfg => ({
...cfg,
value: JSON.parse(cfg.value)
})), [t => t.value.order])
})),
watchLoading (isLoading) {
this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-comments-refresh')
}
}
}
}
</script>
<template lang='pug'>
v-container(fluid, grid-list-lg)
v-layout(row, wrap)
v-flex(xs12)
.admin-header
img.animated.fadeInUp(src='/_assets/svg/icon-browse-page.svg', alt='Dashboard', style='width: 80px;')
.admin-header-title
.headline.primary--text.animated.fadeInLeft {{ $t('admin:dashboard.title') }}
.subtitle-1.grey--text.animated.fadeInLeft.wait-p2s {{ $t('admin:dashboard.subtitle') }}
v-flex(xs12 md6 lg4 xl3 d-flex)
v-card.primary.dashboard-card.animated.fadeInUp(dark)
v-card-text
v-icon.dashboard-icon mdi-file-document-outline
.overline {{$t('admin:dashboard.pages')}}
animated-number.display-1(
:value='info.pagesTotal'
:duration='2000'
:formatValue='round'
easing='easeOutQuint'
)
v-flex(xs12 md6 lg4 xl3 d-flex)
v-card.blue.darken-3.dashboard-card.animated.fadeInUp.wait-p2s(dark)
v-card-text
v-icon.dashboard-icon mdi-account
.overline {{$t('admin:dashboard.users')}}
animated-number.display-1(
:value='info.usersTotal'
:duration='2000'
:formatValue='round'
easing='easeOutQuint'
)
v-flex(xs12 md6 lg4 xl3 d-flex)
v-card.blue.darken-4.dashboard-card.animated.fadeInUp.wait-p4s(dark)
v-card-text
v-icon.dashboard-icon mdi-account-group
.overline {{$t('admin:dashboard.groups')}}
animated-number.display-1(
:value='info.groupsTotal'
:duration='2000'
:formatValue='round'
easing='easeOutQuint'
)
v-flex(xs12 md6 lg12 xl3 d-flex)
v-card.dashboard-card.animated.fadeInUp.wait-p6s(
:class='isLatestVersion ? "green" : "red lighten-2"'
dark
)
v-btn.btn-animate-wrench(fab, absolute, :right='!$vuetify.rtl', :left='$vuetify.rtl', top, small, light, to='system', v-if='hasPermission(`manage:system`)')
v-icon(:color='isLatestVersion ? `green` : `red darken-4`', small) mdi-wrench
v-card-text
v-icon.dashboard-icon mdi-blur
.subtitle-1 Wiki.js {{info.currentVersion}}
.body-2(v-if='isLatestVersion') {{$t('admin:dashboard.versionLatest')}}
.body-2(v-else) {{$t('admin:dashboard.versionNew', { version: info.latestVersion })}}
v-flex(xs12, xl6)
v-card.radius-7.animated.fadeInUp.wait-p2s
v-toolbar(:color='$vuetify.theme.dark ? `grey darken-2` : `grey lighten-5`', dense, flat)
v-spacer
.overline {{$t('admin:dashboard.recentPages')}}
v-spacer
v-data-table.pb-2(
:items='recentPages'
:headers='recentPagesHeaders'
:loading='recentPagesLoading'
hide-default-footer
hide-default-header
)
template(slot='item', slot-scope='props')
tr.is-clickable(:active='props.selected', @click='$router.push(`/pages/` + props.item.id)')
td
.body-2: strong {{ props.item.title }}
td.admin-pages-path
v-chip(label, small, :color='$vuetify.theme.dark ? `grey darken-4` : `grey lighten-4`') {{ props.item.locale }}
span.ml-2.grey--text(:class='$vuetify.theme.dark ? `text--lighten-1` : `text--darken-2`') / {{ props.item.path }}
td.text-right.caption(width='250') {{ props.item.updatedAt | moment('calendar') }}
v-flex(xs12, xl6)
v-card.radius-7.animated.fadeInUp.wait-p4s
v-toolbar(:color='$vuetify.theme.dark ? `grey darken-2` : `grey lighten-5`', dense, flat)
v-spacer
.overline {{$t('admin:dashboard.lastLogins')}}
v-spacer
v-data-table.pb-2(
:items='lastLogins'
:headers='lastLoginsHeaders'
:loading='lastLoginsLoading'
hide-default-footer
hide-default-header
)
template(slot='item', slot-scope='props')
tr.is-clickable(:active='props.selected', @click='$router.push(`/users/` + props.item.id)')
td
.body-2: strong {{ props.item.name }}
td.text-right.caption(width='250') {{ props.item.lastLoginAt | moment('calendar') }}
v-flex(xs12)
v-card.dashboard-contribute.animated.fadeInUp.wait-p4s
v-card-text
img(src='/_assets/svg/icon-heart-health.svg', alt='Contribute', style='height: 80px;')
.pl-5
.subtitle-1 {{$t('admin:contribute.title')}}
.body-2.mt-3: strong {{$t('admin:dashboard.contributeSubtitle')}}
.body-2 {{$t('admin:dashboard.contributeHelp')}}
v-btn.mx-0.mt-4(:color='$vuetify.theme.dark ? `indigo lighten-3` : `indigo`', outlined, small, to='/contribute')
.caption: strong {{$t('admin:dashboard.contributeLearnMore')}}
</template>
<script>
import _ from 'lodash'
import AnimatedNumber from 'animated-number-vue'
import { get } from 'vuex-pathify'
import gql from 'graphql-tag'
import semverLte from 'semver/functions/lte'
export default {
components: {
AnimatedNumber
},
data() {
return {
recentPages: [],
recentPagesLoading: false,
recentPagesHeaders: [
{ text: 'Title', value: 'title' },
{ text: 'Path', value: 'path' },
{ text: 'Last Updated', value: 'updatedAt', width: 250 }
],
lastLogins: [],
lastLoginsLoading: false,
lastLoginsHeaders: [
{ text: 'User', value: 'displayName' },
{ text: 'Last Login', value: 'lastLoginAt', width: 250 }
]
}
},
computed: {
isLatestVersion() {
if (this.info.latestVersion === 'n/a' || this.info.currentVersion === 'n/a') {
return true
} else {
return semverLte(this.info.latestVersion, this.info.currentVersion)
}
},
info: get('admin/info'),
permissions: get('user/permissions')
},
methods: {
round(val) { return Math.round(val) },
hasPermission(prm) {
if (_.isArray(prm)) {
return _.some(prm, p => {
return _.includes(this.permissions, p)
})
} else {
return _.includes(this.permissions, prm)
}
}
},
apollo: {
recentPages: {
query: gql`
query {
pages {
list(limit: 10, orderBy: UPDATED, orderByDirection: DESC) {
id
locale
path
title
description
contentType
isPublished
isPrivate
privateNS
createdAt
updatedAt
}
}
}
`,
update: (data) => data.pages.list,
watchLoading (isLoading) {
this.recentPagesLoading = isLoading
this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-dashboard-recentpages')
}
},
lastLogins: {
query: gql`
query {
users {
lastLogins {
id
name
lastLoginAt
}
}
}
`,
fetchPolicy: 'network-only',
update: (data) => data.users.lastLogins,
watchLoading (isLoading) {
this.lastLoginsLoading = isLoading
this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-dashboard-lastlogins')
}
}
}
}
</script>
<style lang='scss'>
.dashboard-card {
display: flex;
width: 100%;
border-radius: 7px;
.v-card__text {
overflow: hidden;
position: relative;
}
}
.dashboard-contribute {
background-color: #FFF;
background-image: linear-gradient(to bottom, #FFF 0%, lighten(mc('indigo', '50'), 3%) 100%);
border-radius: 7px;
@at-root .theme--dark & {
background-color: mc('grey', '800');
background-image: linear-gradient(to bottom, mc('grey', '800') 0%, darken(mc('grey', '800'), 6%) 100%);
}
.v-card__text {
display: flex;
align-items: center;
color: mc('indigo', '500') !important;
@at-root .theme--dark & {
color: mc('grey', '300') !important;
}
}
}
.v-icon.dashboard-icon {
position: absolute !important;
right: 0;
top: 12px;
font-size: 100px !important;
opacity: .25;
@at-root .v-application--is-rtl & {
left: 0;
right: initial;
}
}
</style>
<template lang='pug'>
v-container(fluid, grid-list-lg)
v-layout(row, wrap)
v-flex(xs12)
.admin-header
img(src='/_assets/svg/icon-console.svg', alt='Developer Tools', style='width: 80px;')
.admin-header-title
.headline.primary--text Developer Tools
.subtitle-1.grey--text Flags
v-spacer
v-btn(color='success', depressed, @click='save', large)
v-icon(left) mdi-check
span {{$t('common:actions.apply')}}
v-card.mt-3(:class='$vuetify.theme.dark ? `grey darken-3-d5` : `white grey--text text--darken-3`')
v-alert(color='red', :value='true', icon='mdi-alert', dark, prominent)
span Do NOT enable these flags unless you know what you're doing!
.caption Doing so may result in data loss or broken installation!
v-card-text
v-switch.mt-3(
color='primary'
hint='Log detailed debug info on LDAP/AD login attempts.'
persistent-hint
label='LDAP Debug'
v-model='flags.ldapdebug'
inset
)
v-divider.mt-3
v-switch.mt-3(
color='red'
hint='Log all queries made to the database to console.'
persistent-hint
label='SQL Query Logging'
v-model='flags.sqllog'
inset
)
</template>
<script>
import _ from 'lodash'
import flagsQuery from 'gql/admin/dev/dev-query-flags.gql'
import flagsMutation from 'gql/admin/dev/dev-mutation-save-flags.gql'
export default {
data() {
return {
flags: {
sqllog: false
}
}
},
methods: {
async save() {
try {
await this.$apollo.mutate({
mutation: flagsMutation,
variables: {
flags: _.transform(this.flags, (result, value, key) => {
result.push({ key, value })
}, [])
},
watchLoading (isLoading) {
this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-dev-flags-update')
}
})
this.$store.commit('showNotification', {
style: 'success',
message: 'Flags applied successfully.',
icon: 'check'
})
} catch (err) {
this.$store.commit('pushGraphError', err)
}
}
},
apollo: {
flags: {
query: flagsQuery,
fetchPolicy: 'network-only',
update: (data) => _.transform(data.system.flags, (result, row) => {
_.set(result, row.key, row.value)
}, {}),
watchLoading (isLoading) {
this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-dev-flags-refresh')
}
}
}
}
</script>
<style lang='scss'>
</style>
<template lang='pug'>
v-container(fluid, grid-list-lg)
v-layout(row, wrap)
v-flex(xs12)
.admin-header
img(src='/_assets/svg/icon-web-design.svg', alt='Editor', style='width: 80px;')
.admin-header-title
.headline.primary--text Editor
.subtitle-1.grey--text Configure the content editors #[v-chip(label, color='primary', small).white--text coming soon]
v-spacer
v-btn(outline, color='grey', @click='refresh', large)
v-icon refresh
v-btn(color='success', @click='save', depressed, large)
v-icon(left) check
span {{$t('common:actions.apply')}}
v-card.mt-3
v-tabs(color='grey darken-2', fixed-tabs, slider-color='white', show-arrows, dark)
v-tab(key='settings'): v-icon settings
v-tab(key='code') Markdown
v-tab-item(key='settings', :transition='false', :reverse-transition='false')
v-card.pa-3(flat, tile)
.body-2.grey--text.text--darken-1 Select which editors to enable:
.caption.grey--text.pb-2 Some editors require additional configuration in their dedicated tab (when selected).
v-form
v-checkbox.my-0(
v-for='editor in editors'
v-model='editor.isEnabled'
:key='editor.key'
:label='editor.title'
color='primary'
disabled
hide-details
)
v-tab-item(key='code', :transition='false', :reverse-transition='false')
v-card.wiki-form.pa-3(flat, tile)
v-form
v-subheader Editor Configuration
.body-1.ml-3 This editor has no configuration options you can modify.
</template>
<script>
export default {
data() {
return {
editors: [
{ title: 'API Docs', key: 'api', isEnabled: false },
{ title: 'Code', key: 'code', isEnabled: true },
{ title: 'Markdown', key: 'markdown', isEnabled: true },
{ title: 'Tabular', key: 'tabular', isEnabled: false },
{ title: 'Visual Builder', key: 'visual', isEnabled: false },
{ title: 'WikiText', key: 'wikitext', isEnabled: false }
]
}
},
methods: {
save() {},
refresh() {}
}
}
</script>
<style lang='scss'>
</style>
<template lang='pug'>
v-container(fluid, grid-list-lg)
v-layout(row wrap)
v-flex(xs12)
.admin-header
img.animated.fadeInUp(src='/_assets/svg/icon-installing-updates.svg', alt='Extensions', style='width: 80px;')
.admin-header-title
.headline.primary--text.animated.fadeInLeft {{ $t('admin:extensions.title') }}
.subtitle-1.grey--text.animated.fadeInLeft {{ $t('admin:extensions.subtitle') }}
v-form.pt-3
v-layout(row wrap)
v-flex(xl6 lg8 xs12)
v-alert.mb-4(outlined, color='error', icon='mdi-alert')
span New extensions cannot be installed at the moment. This feature is coming in a future release.
v-expansion-panels.admin-extensions-exp(hover, popout)
v-expansion-panel(v-for='ext of extensions', :key='`ext-` + ext.key')
v-expansion-panel-header(disable-icon-rotate)
span {{ext.title}}
template(v-slot:actions)
v-chip(label, color='success', small, v-if='ext.isInstalled') Installed
v-chip(label, color='warning', small, v-else) Not Installed
v-expansion-panel-content.pa-0
v-card(flat, :class='$vuetify.theme.dark ? `grey darken-3` : `grey lighten-5`', tile)
v-card-text
.body-2 {{ext.description}}
v-divider.my-4
.body-2
strong.mr-2 This extension is
v-chip.mr-2(v-if='ext.isCompatible', label, outlined, small, color='success') compatible
v-chip.mr-2(v-else, label, small, color='error') not compatible
strong with your host.
v-card-chin
v-spacer
v-btn(disabled)
v-icon(left) mdi-plus
span Install
</template>
<script>
import _ from 'lodash'
import gql from 'graphql-tag'
export default {
data() {
return {
extensions: []
}
},
methods: {
async save () {
// try {
// await this.$apollo.mutate({
// mutation: gql`
// mutation (
// $host: String!
// ) {
// site {
// updateConfig(
// host: $host
// ) {
// responseResult {
// succeeded
// errorCode
// slug
// message
// }
// }
// }
// }
// `,
// variables: {
// host: _.get(this.config, 'host', '')
// },
// watchLoading (isLoading) {
// this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-extensions-update')
// }
// })
// this.$store.commit('showNotification', {
// style: 'success',
// message: 'Configuration saved successfully.',
// icon: 'check'
// })
// } catch (err) {
// this.$store.commit('pushGraphError', err)
// }
}
},
apollo: {
extensions: {
query: gql`
{
system {
extensions {
key
title
description
isInstalled
isCompatible
}
}
}
`,
fetchPolicy: 'network-only',
update: (data) => _.cloneDeep(data.system.extensions),
watchLoading (isLoading) {
this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-extensions-refresh')
}
}
}
}
</script>
<style lang='scss'>
.admin-extensions-exp {
.v-expansion-panel-content__wrap {
padding: 0;
}
}
</style>
<template lang="pug">
v-card(flat)
v-container.px-3.pb-3.pt-3(fluid, grid-list-md)
v-layout(row, wrap)
v-flex(xs12, v-if='group.isSystem')
v-alert.radius-7.mb-0(
color='orange darken-2'
:class='$vuetify.theme.dark ? "grey darken-4" : "orange lighten-5"'
outlined
:value='true'
icon='mdi-lock-outline'
) This is a system group. Some permissions cannot be modified.
v-flex(xs12, md6, lg4, v-for='pmGroup in permissions', :key='pmGroup.category')
v-card.md2(flat, :class='$vuetify.theme.dark ? "grey darken-3-d5" : "grey lighten-5"')
.overline.px-5.pt-5.pb-3.grey--text.text--darken-2 {{pmGroup.category}}
v-card-text.pt-0
template(v-for='(pm, idx) in pmGroup.items')
v-checkbox.pt-0(
style='justify-content: space-between;'
:key='pm.permission'
:label='pm.permission'
:hint='pm.hint'
persistent-hint
color='primary'
v-model='group.permissions'
:value='pm.permission'
:append-icon='pm.warning ? "mdi-alert" : null',
:disabled='(group.isSystem && pm.restrictedForSystem) || group.id === 1 || pm.disabled'
)
v-divider.mt-3(v-if='idx < pmGroup.items.length - 1')
</template>
<script>
export default {
props: {
value: {
type: Object,
default: () => ({})
}
},
data() {
return {
permissions: [
{
category: 'Content',
items: [
{
permission: 'read:pages',
hint: 'Can view pages, as specified in the Page Rules',
warning: false,
restrictedForSystem: false,
disabled: false
},
{
permission: 'write:pages',
hint: 'Can create / edit pages, as specified in the Page Rules',
warning: false,
restrictedForSystem: true,
disabled: false
},
{
permission: 'manage:pages',
hint: 'Can move existing pages as specified in the Page Rules',
warning: false,
restrictedForSystem: true,
disabled: false
},
{
permission: 'delete:pages',
hint: 'Can delete existing pages, as specified in the Page Rules',
warning: false,
restrictedForSystem: true,
disabled: false
},
{
permission: 'write:styles',
hint: 'Can insert CSS styles in pages, as specified in the Page Rules',
warning: false,
restrictedForSystem: true,
disabled: false
},
{
permission: 'write:scripts',
hint: 'Can insert JavaScript in pages, as specified in the Page Rules',
warning: false,
restrictedForSystem: true,
disabled: false
},
{
permission: 'read:source',
hint: 'Can view pages source, as specified in the Page Rules',
warning: false,
restrictedForSystem: false,
disabled: false
},
{
permission: 'read:history',
hint: 'Can view pages history, as specified in the Page Rules',
warning: false,
restrictedForSystem: false,
disabled: false
},
{
permission: 'read:assets',
hint: 'Can view / use assets (such as images and files), as specified in the Page Rules',
warning: false,
restrictedForSystem: false,
disabled: false
},
{
permission: 'write:assets',
hint: 'Can upload new assets (such as images and files), as specified in the Page Rules',
warning: false,
restrictedForSystem: true,
disabled: false
},
{
permission: 'manage:assets',
hint: 'Can edit and delete existing assets (such as images and files), as specified in the Page Rules',
warning: false,
restrictedForSystem: true,
disabled: false
},
{
permission: 'read:comments',
hint: 'Can view comments, as specified in the Page Rules',
warning: false,
restrictedForSystem: false,
disabled: false
},
{
permission: 'write:comments',
hint: 'Can post new comments, as specified in the Page Rules',
warning: false,
restrictedForSystem: false,
disabled: false
},
{
permission: 'manage:comments',
hint: 'Can edit and delete existing comments, as specified in the Page Rules',
warning: false,
restrictedForSystem: true,
disabled: false
}
]
},
{
category: 'Users',
items: [
{
permission: 'write:users',
hint: 'Can create or authorize new users, but not modify existing ones',
warning: false,
restrictedForSystem: true,
disabled: false
},
{
permission: 'manage:users',
hint: 'Can manage all users (but not users with administrative permissions)',
warning: false,
restrictedForSystem: true,
disabled: false
},
{
permission: 'write:groups',
hint: 'Can manage groups and assign CONTENT permissions / page rules',
warning: false,
restrictedForSystem: true,
disabled: false
},
{
permission: 'manage:groups',
hint: 'Can manage groups and assign ANY permissions (but not manage:system) / page rules',
warning: true,
restrictedForSystem: true,
disabled: false
}
]
},
{
category: 'Administration',
items: [
{
permission: 'manage:navigation',
hint: 'Can manage the site navigation',
warning: false,
restrictedForSystem: true,
disabled: false
},
{
permission: 'manage:theme',
hint: 'Can manage and modify themes',
warning: false,
restrictedForSystem: true,
disabled: false
},
{
permission: 'manage:api',
hint: 'Can generate and revoke API keys',
warning: true,
restrictedForSystem: true,
disabled: false
},
{
permission: 'manage:system',
hint: 'Can manage and access everything. Root administrator.',
warning: true,
restrictedForSystem: true,
disabled: true
}
]
}
]
}
},
computed: {
group: {
get() { return this.value },
set(val) { this.$set('input', val) }
}
}
}
</script>
<template lang="pug">
v-card(flat)
v-card-title.pb-4(:class='$vuetify.theme.dark ? `grey darken-3-d3` : `grey lighten-5`')
v-text-field(
outlined
flat
prepend-inner-icon='mdi-magnify'
v-model='search'
label='Search Group Users...'
hide-details
dense
style='max-width: 450px;'
)
v-spacer
v-btn(color='primary', depressed, @click='searchUserDialog = true', :disabled='group.id === 2')
v-icon(left) mdi-clipboard-account
| Assign User
v-data-table(
:items='group.users',
:headers='headers',
:search='search'
:page.sync='pagination'
:items-per-page='15'
@page-count='pageCount = $event'
must-sort,
hide-default-footer
)
template(v-slot:item.actions='{ item }')
v-menu(bottom, right, min-width='200')
template(v-slot:activator='{ on }')
v-btn(icon, v-on='on', small)
v-icon.grey--text.text--darken-1 mdi-dots-horizontal
v-list(dense, nav)
v-list-item(:to='`/users/` + item.id')
v-list-item-action: v-icon(color='primary') mdi-account-outline
v-list-item-content
v-list-item-title View User Profile
template(v-if='item.id !== 2')
v-list-item(@click='unassignUser(item.id)')
v-list-item-action: v-icon(color='orange') mdi-account-remove-outline
v-list-item-content
v-list-item-title Unassign
template(slot='no-data')
v-alert.ma-3(icon='mdi-alert', outlined) No users to display.
.text-center.py-2(v-if='group.users.length > 15')
v-pagination(v-model='pagination', :length='pageCount')
user-search(v-model='searchUserDialog', @select='assignUser')
</template>
<script>
import UserSearch from '../common/user-search.vue'
import assignUserMutation from 'gql/admin/groups/groups-mutation-assign.gql'
import unassignUserMutation from 'gql/admin/groups/groups-mutation-unassign.gql'
export default {
props: {
value: {
type: Object,
default: () => ({})
}
},
components: {
UserSearch
},
data() {
return {
headers: [
{ text: 'ID', value: 'id', width: 70 },
{ text: 'Name', value: 'name' },
{ text: 'Email', value: 'email' },
{ text: 'Actions', value: 'actions', sortable: false, width: 50 }
],
searchUserDialog: false,
pagination: 1,
pageCount: 0,
search: ''
}
},
computed: {
group: {
get() { return this.value },
set(val) { this.$set('input', val) }
},
pages () {
if (this.pagination.rowsPerPage == null || this.pagination.totalItems == null) {
return 0
}
return Math.ceil(this.pagination.totalItems / this.pagination.rowsPerPage)
}
},
methods: {
async assignUser({ id, email, name }) {
try {
await this.$apollo.mutate({
mutation: assignUserMutation,
variables: {
groupId: this.group.id,
userId: id
},
watchLoading (isLoading) {
this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-groups-assign')
}
})
this.$store.commit('showNotification', {
style: 'success',
message: `User has been assigned to ${this.group.name}.`,
icon: 'assignment_ind'
})
this.$emit('refresh')
} catch (err) {
this.$store.commit('showNotification', {
style: 'red',
message: err.message,
icon: 'warning'
})
}
},
async unassignUser(id) {
try {
await this.$apollo.mutate({
mutation: unassignUserMutation,
variables: {
groupId: this.group.id,
userId: id
},
watchLoading (isLoading) {
this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-groups-unassign')
}
})
this.$store.commit('showNotification', {
style: 'success',
message: `User has been unassigned from ${this.group.name}.`,
icon: 'assignment_ind'
})
this.$emit('refresh')
} catch (err) {
this.$store.commit('showNotification', {
style: 'red',
message: err.message,
icon: 'warning'
})
}
}
}
}
</script>
<template lang='pug'>
v-container(fluid, grid-list-lg)
v-layout(row wrap)
v-flex(xs12)
.admin-header
img(src='/_assets/svg/icon-social-group.svg', alt='Edit Group', style='width: 80px;')
.admin-header-title
.headline.blue--text.text--darken-2 Edit Group
.subtitle-1.grey--text {{group.name}}
v-spacer
v-btn(color='grey', icon, outlined, to='/groups')
v-icon mdi-arrow-left
v-dialog(v-model='deleteGroupDialog', max-width='500', v-if='!group.isSystem')
template(v-slot:activator='{ on }')
v-btn.ml-3(color='red', icon, outlined, v-on='on')
v-icon(color='red') mdi-trash-can-outline
v-card
.dialog-header.is-red Delete Group?
v-card-text.pa-4 Are you sure you want to delete group #[strong {{ group.name }}]? All users will be unassigned from this group.
v-card-actions
v-spacer
v-btn(text, @click='deleteGroupDialog = false') Cancel
v-btn(color='red', dark, @click='deleteGroup') Delete
v-btn.ml-3(color='success', large, depressed, @click='updateGroup')
v-icon(left) mdi-check
span Update Group
v-card.mt-3
v-tabs.grad-tabs(v-model='tab', :color='$vuetify.theme.dark ? `blue` : `primary`', fixed-tabs, show-arrows, icons-and-text)
v-tab(key='settings')
span Settings
v-icon mdi-cog-box
v-tab(key='permissions')
span Permissions
v-icon mdi-lock-pattern
v-tab(key='rules')
span Page Rules
v-icon mdi-file-lock
v-tab(key='users')
span Users
v-icon mdi-account-group
v-tab-item(key='settings', :transition='false', :reverse-transition='false')
v-card(flat)
template(v-if='group.id <= 2')
v-card-text
v-alert.radius-7.mb-0(
color='orange darken-2'
:class='$vuetify.theme.dark ? "grey darken-4" : "orange lighten-5"'
outlined
:value='true'
icon='mdi-lock-outline'
) This is a system group and its settings cannot be modified.
v-divider
v-card-text
v-text-field(
outlined
v-model='group.name'
label='Group Name'
hide-details
prepend-icon='mdi-account-group'
style='max-width: 600px;'
:disabled='group.id <= 2'
)
template(v-if='group.id !== 2')
v-divider
v-card-text
v-text-field(
outlined
v-model='group.redirectOnLogin'
label='Redirect on Login'
persistent-hint
hint='The path / URL where the user will be redirected upon successful login.'
prepend-icon='mdi-arrow-top-left-thick'
append-icon='mdi-folder-search'
@click:append='selectPage'
style='max-width: 850px;'
:counter='255'
)
v-tab-item(key='permissions', :transition='false', :reverse-transition='false')
group-permissions(v-model='group', @refresh='refresh')
v-tab-item(key='rules', :transition='false', :reverse-transition='false')
group-rules(v-model='group', @refresh='refresh')
v-tab-item(key='users', :transition='false', :reverse-transition='false')
group-users(v-model='group', @refresh='refresh')
v-card-chin
v-spacer
.caption.grey--text.pr-2 Group ID #[strong {{group.id}}]
page-selector(mode='select', v-model='selectPageModal', :open-handler='selectPageHandle', path='home', :locale='currentLang')
</template>
<script>
import _ from 'lodash'
import gql from 'graphql-tag'
import GroupPermissions from './admin-groups-edit-permissions.vue'
import GroupRules from './admin-groups-edit-rules.vue'
import GroupUsers from './admin-groups-edit-users.vue'
/* global siteConfig */
export default {
components: {
GroupPermissions,
GroupRules,
GroupUsers
},
data() {
return {
group: {
id: 0,
name: '',
isSystem: false,
permissions: [],
pageRules: [],
users: [],
redirectOnLogin: '/'
},
deleteGroupDialog: false,
tab: null,
selectPageModal: false,
currentLang: siteConfig.lang
}
},
methods: {
selectPage () {
this.selectPageModal = true
},
selectPageHandle ({ path, locale }) {
this.group.redirectOnLogin = `/${locale}/${path}`
},
async updateGroup() {
try {
await this.$apollo.mutate({
mutation: gql`
mutation (
$id: Int!
$name: String!
$redirectOnLogin: String!
$permissions: [String]!
$pageRules: [PageRuleInput]!
) {
groups {
update(
id: $id
name: $name
redirectOnLogin: $redirectOnLogin
permissions: $permissions
pageRules: $pageRules
) {
responseResult {
succeeded
errorCode
slug
message
}
}
}
}
`,
variables: {
id: this.group.id,
name: this.group.name,
redirectOnLogin: this.group.redirectOnLogin,
permissions: this.group.permissions,
pageRules: this.group.pageRules
},
watchLoading (isLoading) {
this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-groups-update')
}
})
this.$store.commit('showNotification', {
style: 'success',
message: `Group changes have been saved.`,
icon: 'check'
})
} catch (err) {
this.$store.commit('pushGraphError', err)
}
},
async deleteGroup() {
this.deleteGroupDialog = false
try {
await this.$apollo.mutate({
mutation: gql`
mutation ($id: Int!) {
groups {
delete(id: $id) {
responseResult {
succeeded
errorCode
slug
message
}
}
}
}
`,
variables: {
id: this.group.id
},
watchLoading (isLoading) {
this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-groups-delete')
}
})
this.$store.commit('showNotification', {
style: 'success',
message: `Group ${this.group.name} has been deleted.`,
icon: 'delete'
})
this.$router.replace('/groups')
} catch (err) {
this.$store.commit('pushGraphError', err)
}
},
async refresh() {
return this.$apollo.queries.group.refetch()
}
},
apollo: {
group: {
query: gql`
query ($id: Int!) {
groups {
single(id: $id) {
id
name
redirectOnLogin
isSystem
permissions
pageRules {
id
path
roles
match
deny
locales
}
users {
id
name
email
}
createdAt
updatedAt
}
}
}
`,
variables() {
return {
id: _.toSafeInteger(this.$route.params.id)
}
},
fetchPolicy: 'network-only',
update: (data) => _.cloneDeep(data.groups.single),
watchLoading (isLoading) {
this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-groups-refresh')
}
}
}
}
</script>
<style lang='scss'>
</style>
<template lang='pug'>
v-container(fluid, grid-list-lg)
v-layout(row wrap)
v-flex(xs12)
.admin-header
img.animated.fadeInUp(src='/_assets/svg/icon-people.svg', alt='Groups', style='width: 80px;')
.admin-header-title
.headline.blue--text.text--darken-2.animated.fadeInLeft Groups
.subtitle-1.grey--text.animated.fadeInLeft.wait-p4s Manage groups and their permissions
v-spacer
v-btn.animated.fadeInDown.wait-p3s(icon, outlined, color='grey', href='https://docs.requarks.io/groups', target='_blank')
v-icon mdi-help-circle
v-btn.animated.fadeInDown.wait-p2s.mx-3(color='grey', outlined, @click='refresh', icon)
v-icon mdi-refresh
v-dialog(v-model='newGroupDialog', max-width='500')
template(v-slot:activator='{ on }')
v-btn.animated.fadeInDown(color='primary', depressed, v-on='on', large)
v-icon(left) mdi-plus
span New Group
v-card
.dialog-header.is-short New Group
v-card-text.pt-5
v-text-field.md2(
outlined
prepend-icon='mdi-account-group'
v-model='newGroupName'
label='Group Name'
counter='255'
@keyup.enter='createGroup'
@keyup.esc='newGroupDialog = false'
ref='groupNameIpt'
)
v-card-chin
v-spacer
v-btn(text, @click='newGroupDialog = false') Cancel
v-btn(color='primary', @click='createGroup') Create
v-card.mt-3.animated.fadeInUp
v-data-table(
:items='groups'
:headers='headers'
:search='search'
:page.sync='pagination'
:items-per-page='15'
:loading='loading'
@page-count='pageCount = $event'
must-sort,
hide-default-footer
)
template(slot='item', slot-scope='props')
tr.is-clickable(:active='props.selected', @click='$router.push("/groups/" + props.item.id)')
td {{ props.item.id }}
td: strong {{ props.item.name }}
td {{ props.item.userCount }}
td {{ props.item.createdAt | moment('calendar') }}
td {{ props.item.updatedAt | moment('calendar') }}
td
v-tooltip(left, v-if='props.item.isSystem')
template(v-slot:activator='{ on }')
v-icon(v-on='on') mdi-lock-outline
span System Group
template(slot='no-data')
v-alert.ma-3(icon='mdi-alert', :value='true', outline) No groups to display.
.text-xs-center.py-2(v-if='pageCount > 1')
v-pagination(v-model='pagination', :length='pageCount')
</template>
<script>
import _ from 'lodash'
import groupsQuery from 'gql/admin/groups/groups-query-list.gql'
import createGroupMutation from 'gql/admin/groups/groups-mutation-create.gql'
export default {
data() {
return {
newGroupDialog: false,
newGroupName: '',
selectedGroup: {},
pagination: 1,
pageCount: 0,
groups: [],
headers: [
{ text: 'ID', value: 'id', width: 80, sortable: true },
{ text: 'Name', value: 'name' },
{ text: 'Users', value: 'userCount', width: 200 },
{ text: 'Created', value: 'createdAt', width: 250 },
{ text: 'Last Updated', value: 'updatedAt', width: 250 },
{ text: '', value: 'isSystem', width: 20, sortable: false }
],
search: '',
loading: false
}
},
watch: {
newGroupDialog(newValue, oldValue) {
if (newValue) {
this.$nextTick(() => {
this.$refs.groupNameIpt.focus()
})
}
}
},
methods: {
async refresh() {
await this.$apollo.queries.groups.refetch()
this.$store.commit('showNotification', {
message: 'Groups have been refreshed.',
style: 'success',
icon: 'cached'
})
},
async createGroup() {
if (_.trim(this.newGroupName).length < 1) {
this.$store.commit('showNotification', {
style: 'red',
message: 'Enter a group name.',
icon: 'warning'
})
return
}
this.newGroupDialog = false
try {
await this.$apollo.mutate({
mutation: createGroupMutation,
variables: {
name: this.newGroupName
},
update (store, resp) {
const data = _.get(resp, 'data.groups.create', { responseResult: {} })
if (data.responseResult.succeeded === true) {
const apolloData = store.readQuery({ query: groupsQuery })
data.group.userCount = 0
apolloData.groups.list.push(data.group)
store.writeQuery({ query: groupsQuery, data: apolloData })
} else {
throw new Error(data.responseResult.message)
}
},
watchLoading (isLoading) {
this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-groups-create')
}
})
this.newGroupName = ''
this.$store.commit('showNotification', {
style: 'success',
message: `Group has been created successfully.`,
icon: 'check'
})
} catch (err) {
this.$store.commit('pushGraphError', err)
}
}
},
apollo: {
groups: {
query: groupsQuery,
fetchPolicy: 'network-only',
update: (data) => data.groups.list,
watchLoading (isLoading) {
this.loading = isLoading
this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-groups-refresh')
}
}
}
}
</script>
<style lang='scss'>
</style>
<template lang='pug'>
v-dialog(v-model='isShown', width='90vw', max-width='1200')
.dialog-header
span Live Console
v-spacer
.caption.blue--text.text--lighten-3.mr-3 Streaming...
v-progress-circular(
indeterminate
color='blue lighten-3'
:size='20'
:width='2'
)
.consoleTerm(ref='consoleContainer')
v-toolbar(flat, color='grey darken-3', dark)
v-spacer
v-btn(outline, @click='clear')
v-icon(left) cancel_presentation
span Clear
v-btn(outline, @click='close')
v-icon(left) close
span Close
</template>
<script>
import _ from 'lodash'
// import { Terminal } from 'xterm'
// import * as fit from 'xterm/lib/addons/fit/fit'
import livetrailSubscription from 'gql/admin/logging/logging-subscription-livetrail.gql'
// Terminal.applyAddon(fit)
export default {
term: null,
props: {
value: {
type: Boolean,
default: false
}
},
computed: {
isShown: {
get() { return this.value },
set(val) { this.$emit('input', val) }
}
},
watch: {
value(newValue, oldValue) {
if (newValue) {
_.delay(() => {
// this.term = new Terminal()
this.term.open(this.$refs.consoleContainer)
this.term.writeln('Connecting to \x1B[1;3;31mconsole output\x1B[0m...')
this.attach()
}, 100)
} else {
this.term.dispose()
this.term = null
}
}
},
mounted() {
},
methods: {
clear() {
this.term.clear()
},
close() {
this.isShown = false
},
attach() {
const self = this
const observer = this.$apollo.subscribe({
query: livetrailSubscription
})
observer.subscribe({
next(data) {
const item = _.get(data, `data.loggingLiveTrail`, {})
console.info(item)
self.term.writeln(`${item.level}: ${item.output}`)
},
error(error) {
self.$store.commit('showNotification', {
style: 'red',
message: error.message,
icon: 'warning'
})
}
})
}
}
}
</script>
<style lang='scss'>
.consoleTerm {
background-color: #000;
padding: 16px;
width: 100%;
height: 415px;
}
</style>
<template lang='pug'>
v-container(fluid, grid-list-lg)
v-layout(row, wrap)
v-flex(xs12)
.admin-header
img(src='/_assets/svg/icon-registry-editor.svg', alt='Logging', style='width: 80px;')
.admin-header-title
.headline.primary--text Logging
.subtitle-1.grey--text Configure the system logger(s) #[v-chip(label, color='primary', small).white--text coming soon]
v-spacer
v-btn(outline, color='grey', @click='refresh', large)
v-icon refresh
v-btn(color='black', disabled, depressed, @click='toggleConsole', large)
v-icon check
span Live Trail
v-btn(color='success', @click='save', depressed, large)
v-icon(left) check
span {{$t('common:actions.apply')}}
v-card.mt-3
v-tabs(color='grey darken-2', fixed-tabs, slider-color='white', show-arrows, dark)
v-tab(key='settings'): v-icon settings
v-tab(v-for='logger in activeLoggers', :key='logger.key') {{ logger.title }}
v-tab-item(key='settings', :transition='false', :reverse-transition='false')
v-card.pa-3(flat, tile)
.body-2.grey--text.text--darken-1 Select which logging service to enable:
.caption.grey--text.pb-2 Some loggers require additional configuration in their dedicated tab (when selected).
v-form
v-checkbox.my-0(
v-for='(logger, n) in loggers'
v-model='logger.isEnabled'
:key='logger.key'
:label='logger.title'
color='primary'
hide-details
disabled
)
v-tab-item(v-for='(logger, n) in activeLoggers', :key='logger.key', :transition='false', :reverse-transition='false')
v-card.wiki-form.pa-3(flat, tile)
v-form
.loggerlogo
img(:src='logger.logo', :alt='logger.title')
v-subheader.pl-0 {{logger.title}}
.caption {{logger.description}}
.caption: a(:href='logger.website') {{logger.website}}
v-divider.mt-3
v-subheader.pl-0 Logger Configuration
.body-1.ml-3(v-if='!logger.config || logger.config.length < 1') This logger has no configuration options you can modify.
template(v-else, v-for='cfg in logger.config')
v-select(
v-if='cfg.value.type === "string" && cfg.value.enum'
outline
background-color='grey lighten-2'
:items='cfg.value.enum'
:key='cfg.key'
:label='cfg.value.title'
v-model='cfg.value.value'
prepend-icon='settings_applications'
:hint='cfg.value.hint ? cfg.value.hint : ""'
persistent-hint
:class='cfg.value.hint ? "mb-2" : ""'
)
v-switch(
v-else-if='cfg.value.type === "boolean"'
:key='cfg.key'
:label='cfg.value.title'
v-model='cfg.value.value'
color='primary'
prepend-icon='settings_applications'
:hint='cfg.value.hint ? cfg.value.hint : ""'
persistent-hint
)
v-text-field(
v-else
outline
background-color='grey lighten-2'
:key='cfg.key'
:label='cfg.value.title'
v-model='cfg.value.value'
prepend-icon='settings_applications'
:hint='cfg.value.hint ? cfg.value.hint : ""'
persistent-hint
:class='cfg.value.hint ? "mb-2" : ""'
)
v-divider.mt-3
v-subheader.pl-0 Log Level
.body-1.ml-3 Select the minimum error level that will be reported to this logger.
v-layout(row)
v-flex(xs12, md6, lg4)
.pt-3
v-select(
single-line
outline
background-color='grey lighten-2'
:items='levels'
label='Level'
v-model='logger.level'
prepend-icon='graphic_eq'
hint='Default: warn'
persistent-hint
)
logging-console(v-model='showConsole')
</template>
<script>
import _ from 'lodash'
import LoggingConsole from './admin-logging-console.vue'
import loggersQuery from 'gql/admin/logging/logging-query-loggers.gql'
import loggersSaveMutation from 'gql/admin/logging/logging-mutation-save-loggers.gql'
export default {
components: {
LoggingConsole
},
data() {
return {
showConsole: false,
loggers: [],
levels: ['error', 'warn', 'info', 'debug', 'verbose']
}
},
computed: {
activeLoggers() {
return _.filter(this.loggers, 'isEnabled')
}
},
methods: {
async refresh() {
await this.$apollo.queries.loggers.refetch()
this.$store.commit('showNotification', {
message: 'List of loggers has been refreshed.',
style: 'success',
icon: 'cached'
})
},
async save() {
this.$store.commit(`loadingStart`, 'admin-logging-saveloggers')
await this.$apollo.mutate({
mutation: loggersSaveMutation,
variables: {
loggers: this.loggers.map(tgt => _.pick(tgt, [
'isEnabled',
'key',
'config',
'level'
])).map(str => ({...str, config: str.config.map(cfg => ({...cfg, value: JSON.stringify({ v: cfg.value.value })}))}))
}
})
this.$store.commit('showNotification', {
message: 'Logging configuration saved successfully.',
style: 'success',
icon: 'check'
})
this.$store.commit(`loadingStop`, 'admin-logging-saveloggers')
},
toggleConsole() {
this.showConsole = !this.showConsole
}
},
apollo: {
loggers: {
query: loggersQuery,
fetchPolicy: 'network-only',
update: (data) => _.cloneDeep(data.logging.loggers).map(str => ({...str, config: str.config.map(cfg => ({...cfg, value: JSON.parse(cfg.value)}))})),
watchLoading (isLoading) {
this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-logging-refresh')
}
}
}
}
</script>
<style lang='scss' scoped>
.loggerlogo {
width: 250px;
height: 85px;
float:right;
display: flex;
justify-content: flex-end;
align-items: center;
img {
max-width: 100%;
max-height: 50px;
}
}
</style>
<template lang='pug'>
v-container(fluid, grid-list-lg)
v-layout(row, wrap)
v-flex(xs12)
.admin-header
img.animated.fadeInUp(src='/_assets/svg/icon-new-post.svg', alt='Mail', style='width: 80px;')
.admin-header-title
.headline.primary--text.animated.fadeInLeft {{ $t('admin:mail.title') }}
.subtitle-1.grey--text.animated.fadeInLeft.wait-p4s {{ $t('admin:mail.subtitle') }}
v-spacer
v-btn.animated.fadeInDown(color='success', depressed, @click='save', large)
v-icon(left) mdi-check
span {{$t('common:actions.apply')}}
v-form.pt-3
v-layout(row wrap)
v-flex(lg6 xs12)
v-form
v-card.animated.fadeInUp
v-toolbar(color='primary', dark, dense, flat)
v-toolbar-title.subtitle-1 {{ $t('admin:mail.configuration') }}
.overline.pa-4.grey--text {{ $t('admin:mail.sender') }}
.px-4
v-text-field(
outlined
v-model='config.senderName'
:label='$t(`admin:mail.senderName`)'
required
:counter='255'
prepend-icon='mdi-mailbox'
)
v-text-field(
outlined
v-model='config.senderEmail'
:label='$t(`admin:mail.senderEmail`)'
required
:counter='255'
prepend-icon='mdi-mailbox'
)
v-divider
.overline.pa-4.grey--text {{ $t('admin:mail.smtp') }}
.px-4
v-text-field(
outlined
v-model='config.host'
:label='$t(`admin:mail.smtpHost`)'
required
:counter='255'
prepend-icon='mdi-memory'
)
v-text-field(
outlined
v-model='config.port'
:label='$t(`admin:mail.smtpPort`)'
required
prepend-icon='mdi-serial-port'
persistent-hint
:hint='$t(`admin:mail.smtpPortHint`)'
style='max-width: 300px;'
)
v-switch(
v-model='config.secure'
:label='$t(`admin:mail.smtpTLS`)'
color='primary'
persistent-hint
:hint='$t(`admin:mail.smtpTLSHint`)'
prepend-icon='mdi-security-network'
inset
)
v-switch(
v-model='config.verifySSL'
:label='$t(`admin:mail.smtpVerifySSL`)'
color='primary'
persistent-hint
:hint='$t(`admin:mail.smtpVerifySSLHint`)'
prepend-icon='mdi-security-network'
inset
)
v-text-field.mt-8(
outlined
v-model='config.user'
:label='$t(`admin:mail.smtpUser`)'
required
:counter='255'
prepend-icon='mdi-shield-account-outline'
)
v-text-field(
outlined
v-model='config.pass'
:label='$t(`admin:mail.smtpPwd`)'
required
prepend-icon='mdi-form-textbox-password'
type='password'
)
v-flex(lg6 xs12)
v-card.animated.fadeInUp.wait-p2s
v-form
v-toolbar(color='primary', dark, dense, flat)
v-toolbar-title.subtitle-1 {{ $t('admin:mail.dkim') }}
v-card-info
span {{ $t('admin:mail.dkimHint') }}
.pa-4
v-switch(
v-model='config.useDKIM'
:label='$t(`admin:mail.dkimUse`)'
color='primary'
prepend-icon='mdi-key'
inset
)
v-text-field(
outlined
v-model='config.dkimDomainName'
:label='$t(`admin:mail.dkimDomainName`)'
:counter='255'
prepend-icon='mdi-key'
:disabled='!config.useDKIM'
)
v-text-field(
outlined
v-model='config.dkimKeySelector'
:label='$t(`admin:mail.dkimKeySelector`)'
:counter='255'
prepend-icon='mdi-key'
:disabled='!config.useDKIM'
)
v-textarea(
outlined
v-model='config.dkimPrivateKey'
:label='$t(`admin:mail.dkimPrivateKey`)'
prepend-icon='mdi-key'
persistent-hint
:hint='$t(`admin:mail.dkimPrivateKeyHint`)'
:disabled='!config.useDKIM'
)
v-card.mt-3.animated.fadeInUp.wait-p3s
v-form
v-toolbar(color='teal', dark, dense, flat)
v-toolbar-title.subtitle-1 {{ $t('admin:mail.test') }}
.pa-4
.body-2.grey--text.text--darken-2 {{ $t('admin:mail.testHint') }}
v-text-field.mt-3(
outlined
v-model='testEmail'
:label='$t(`admin:mail.testRecipient`)'
:counter='255'
prepend-icon='mdi-email-outline'
:disabled='testLoading'
)
v-card-chin
v-spacer
v-btn.px-4(color='teal', dark, @click='sendTest', :loading='testLoading')
v-icon(left) mdi-send
span {{ $t('admin:mail.testSend') }}
</template>
<script>
import _ from 'lodash'
import mailConfigQuery from 'gql/admin/mail/mail-query-config.gql'
import mailUpdateConfigMutation from 'gql/admin/mail/mail-mutation-save-config.gql'
import mailTestMutation from 'gql/admin/mail/mail-mutation-sendtest.gql'
export default {
data() {
return {
config: {
senderName: '',
senderEmail: '',
host: '',
port: 0,
secure: false,
verifySSL: false,
user: '',
pass: '',
useDKIM: false,
dkimDomainName: '',
dkimKeySelector: '',
dkimPrivateKey: ''
},
testEmail: '',
testLoading: false
}
},
methods: {
async save () {
try {
await this.$apollo.mutate({
mutation: mailUpdateConfigMutation,
variables: {
senderName: this.config.senderName || '',
senderEmail: this.config.senderEmail || '',
host: this.config.host || '',
port: _.toSafeInteger(this.config.port) || 0,
secure: this.config.secure || false,
verifySSL: this.config.verifySSL || false,
user: this.config.user || '',
pass: this.config.pass || '',
useDKIM: this.config.useDKIM || false,
dkimDomainName: this.config.dkimDomainName || '',
dkimKeySelector: this.config.dkimKeySelector || '',
dkimPrivateKey: this.config.dkimPrivateKey || ''
},
watchLoading (isLoading) {
this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-mail-update')
}
})
this.$store.commit('showNotification', {
style: 'success',
message: this.$t('admin:mail.saveSuccess'),
icon: 'check'
})
} catch (err) {
this.$store.commit('pushGraphError', err)
}
},
async sendTest () {
try {
const resp = await this.$apollo.mutate({
mutation: mailTestMutation,
variables: {
recipientEmail: this.testEmail
},
watchLoading (isLoading) {
this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-mail-test')
}
})
if (!_.get(resp, 'data.mail.sendTest.responseResult.succeeded', false)) {
throw new Error(_.get(resp, 'data.mail.sendTest.responseResult.message', 'An unexpected error occurred.'))
}
this.testEmail = ''
this.$store.commit('showNotification', {
style: 'success',
message: this.$t('admin:mail.sendTestSuccess'),
icon: 'check'
})
} catch (err) {
this.$store.commit('pushGraphError', err)
}
}
},
apollo: {
config: {
query: mailConfigQuery,
fetchPolicy: 'network-only',
update: (data) => _.cloneDeep(data.mail.config),
watchLoading (isLoading) {
this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-mail-refresh')
}
}
}
}
</script>
<style lang='scss'>
</style>
<template lang='pug'>
v-container(fluid, grid-list-lg)
v-layout(row wrap)
v-flex(xs12)
.admin-header
img.animated.fadeInUp(src='/_assets/svg/icon-file.svg', alt='Page', style='width: 80px;')
.admin-header-title
.headline.blue--text.text--darken-2.animated.fadeInLeft Pages
.subtitle-1.grey--text.animated.fadeInLeft.wait-p2s Manage pages
v-spacer
v-btn.animated.fadeInDown.wait-p1s(icon, color='grey', outlined, @click='refresh')
v-icon.grey--text mdi-refresh
v-btn.animated.fadeInDown.mx-3(color='primary', outlined, @click='recyclebin', disabled)
v-icon(left) mdi-delete-outline
span Recycle Bin
v-btn.animated.fadeInDown(color='primary', depressed, large, to='pages/visualize')
v-icon(left) mdi-graph
span Visualize
v-card.mt-3.animated.fadeInUp
.pa-2.d-flex.align-center(:class='$vuetify.theme.dark ? `grey darken-3-d5` : `grey lighten-3`')
v-text-field(
solo
flat
v-model='search'
prepend-inner-icon='mdi-file-search-outline'
label='Search Pages...'
hide-details
dense
style='max-width: 400px;'
)
v-spacer
v-select.ml-2(
solo
flat
hide-details
dense
label='Locale'
:items='langs'
v-model='selectedLang'
style='max-width: 250px;'
)
v-select.ml-2(
solo
flat
hide-details
dense
label='Publish State'
:items='states'
v-model='selectedState'
style='max-width: 250px;'
)
v-divider
v-data-table(
:items='filteredPages'
:headers='headers'
:search='search'
:page.sync='pagination'
:items-per-page='15'
:loading='loading'
must-sort,
sort-by='updatedAt',
sort-desc,
hide-default-footer
@page-count="pageTotal = $event"
)
template(slot='item', slot-scope='props')
tr.is-clickable(:active='props.selected', @click='$router.push(`/pages/` + props.item.id)')
td.text-xs-right {{ props.item.id }}
td
.body-2: strong {{ props.item.title }}
.caption {{ props.item.description }}
td.admin-pages-path
v-chip(label, small, :color='$vuetify.theme.dark ? `grey darken-4` : `grey lighten-4`') {{ props.item.locale }}
span.ml-2.grey--text(:class='$vuetify.theme.dark ? `text--lighten-1` : `text--darken-2`') / {{ props.item.path }}
td {{ props.item.createdAt | moment('calendar') }}
td {{ props.item.updatedAt | moment('calendar') }}
template(slot='no-data')
v-alert.ma-3(icon='mdi-alert', :value='true', outlined) No pages to display.
.text-center.py-2.animated.fadeInDown(v-if='this.pageTotal > 1')
v-pagination(v-model='pagination', :length='pageTotal')
</template>
<script>
import _ from 'lodash'
import pagesQuery from 'gql/admin/pages/pages-query-list.gql'
export default {
data() {
return {
selectedPage: {},
pagination: 1,
pages: [],
pageTotal: 0,
headers: [
{ text: 'ID', value: 'id', width: 80, sortable: true },
{ text: 'Title', value: 'title' },
{ text: 'Path', value: 'path' },
{ text: 'Created', value: 'createdAt', width: 250 },
{ text: 'Last Updated', value: 'updatedAt', width: 250 }
],
search: '',
selectedLang: null,
selectedState: null,
states: [
{ text: 'All Publishing States', value: null },
{ text: 'Published', value: true },
{ text: 'Not Published', value: false }
],
loading: false
}
},
computed: {
filteredPages () {
return _.filter(this.pages, pg => {
if (this.selectedLang !== null && this.selectedLang !== pg.locale) {
return false
}
if (this.selectedState !== null && this.selectedState !== pg.isPublished) {
return false
}
return true
})
},
langs () {
return _.concat({
text: 'All Locales',
value: null
}, _.uniqBy(this.pages, 'locale').map(pg => ({
text: pg.locale,
value: pg.locale
})))
}
},
methods: {
async refresh() {
await this.$apollo.queries.pages.refetch()
this.$store.commit('showNotification', {
message: 'Page list has been refreshed.',
style: 'success',
icon: 'cached'
})
},
newpage() {
this.pageSelectorShown = true
},
recyclebin () { }
},
apollo: {
pages: {
query: pagesQuery,
fetchPolicy: 'network-only',
update: (data) => data.pages.list,
watchLoading (isLoading) {
this.loading = isLoading
this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-pages-refresh')
}
}
}
}
</script>
<style lang='scss'>
.admin-pages-path {
display: flex;
justify-content: flex-start;
align-items: center;
font-family: 'Roboto Mono', monospace;
}
</style>
<template lang='pug'>
v-container(fluid, grid-list-lg)
v-layout(row, wrap)
v-flex(xs12)
.admin-header
img.animated.fadeInUp(src='/_assets/svg/icon-process.svg', alt='Rendering', style='width: 80px;')
.admin-header-title
.headline.primary--text.animated.fadeInLeft {{ $t('admin:rendering.title') }}
.subtitle-1.grey--text.animated.fadeInLeft.wait-p4s {{ $t('admin:rendering.subtitle') }}
v-spacer
v-btn.animated.fadeInDown.wait-p3s(icon, outlined, color='grey', href='https://docs.requarks.io/rendering', target='_blank')
v-icon mdi-help-circle
v-btn.mx-3.animated.fadeInDown.wait-p2s(icon, outlined, color='grey', @click='refresh')
v-icon mdi-refresh
v-btn.animated.fadeInDown(color='success', @click='save', depressed, large)
v-icon(left) mdi-check
span {{$t('common:actions.apply')}}
v-flex.animated.fadeInUp(lg3, xs12)
v-toolbar(
color='blue darken-2'
dense
flat
dark
)
.subtitle-1 Pipeline
v-expansion-panels.adm-rendering-pipeline(
v-model='selectedCore'
accordion
mandatory
)
v-expansion-panel(
v-for='core in renderers'
:key='core.key'
)
v-expansion-panel-header(
hide-actions
ripple
)
v-toolbar(
color='blue'
dense
dark
flat
)
v-spacer
.body-2 {{core.input}}
v-icon.mx-2 mdi-arrow-right-circle
.caption {{core.output}}
v-spacer
v-expansion-panel-content
v-list.py-0(two-line, dense)
template(v-for='(rdr, n) in core.children')
v-list-item(
:key='rdr.key'
@click='selectRenderer(rdr.key)'
:class='currentRenderer.key === rdr.key ? ($vuetify.theme.dark ? `grey darken-4-l4` : `blue lighten-5`) : ``'
)
v-list-item-avatar(size='24', tile)
v-icon(:color='currentRenderer.key === rdr.key ? "primary" : "grey"') {{rdr.icon}}
v-list-item-content
v-list-item-title {{rdr.title}}
v-list-item-subtitle: .caption {{rdr.description}}
v-list-item-avatar(size='24')
status-indicator(v-if='rdr.isEnabled', positive, pulse)
status-indicator(v-else, negative, pulse)
v-divider.my-0(v-if='n < core.children.length - 1')
v-flex(lg9, xs12)
v-card.wiki-form.animated.fadeInUp
v-toolbar(
color='indigo'
dark
flat
dense
)
v-icon.mr-2 {{currentRenderer.icon}}
.subtitle-1 {{currentRenderer.title}}
v-spacer
v-switch(
dark
color='white'
label='Enabled'
v-model='currentRenderer.isEnabled'
hide-details
inset
)
v-card-info(color='blue')
div
div {{currentRenderer.description}}
span.caption: a(href='https://docs.requarks.io/en/rendering', target='_blank') Documentation
v-card-text.pb-4.pl-4
.overline.mb-5 Rendering Module Configuration
.body-2.ml-3(v-if='!currentRenderer.config || currentRenderer.config.length < 1'): em This rendering module has no configuration options you can modify.
template(v-else, v-for='(cfg, idx) in currentRenderer.config')
v-select(
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'
:hint='cfg.value.hint ? cfg.value.hint : ""'
persistent-hint
:class='cfg.value.hint ? "mb-2" : ""'
color='indigo'
)
v-switch(
v-else-if='cfg.value.type === "boolean"'
:key='cfg.key'
:label='cfg.value.title'
v-model='cfg.value.value'
color='indigo'
:hint='cfg.value.hint ? cfg.value.hint : ""'
persistent-hint
inset
)
v-text-field(
v-else
outlined
:key='cfg.key'
:label='cfg.value.title'
v-model='cfg.value.value'
:hint='cfg.value.hint ? cfg.value.hint : ""'
persistent-hint
:class='cfg.value.hint ? "mb-2" : ""'
color='indigo'
)
v-divider.my-5(v-if='idx < currentRenderer.config.length - 1')
v-card-chin
v-spacer
.caption.pr-3.grey--text Module: {{ currentRenderer.key }}
</template>
<script>
import _ from 'lodash'
import { DepGraph } from 'dependency-graph'
import { StatusIndicator } from 'vue-status-indicator'
import renderersQuery from 'gql/admin/rendering/rendering-query-renderers.gql'
import renderersSaveMutation from 'gql/admin/rendering/rendering-mutation-save-renderers.gql'
export default {
components: {
StatusIndicator
},
data() {
return {
selectedCore: -1,
renderers: [],
currentRenderer: {}
}
},
watch: {
renderers(newValue, oldValue) {
_.delay(() => {
this.selectedCore = _.findIndex(newValue, ['key', 'markdownCore'])
this.selectRenderer('markdownCore')
}, 500)
}
},
methods: {
selectRenderer (key) {
this.renderers.map(rdr => {
if (_.some(rdr.children, ['key', key])) {
this.currentRenderer = _.find(rdr.children, ['key', key])
}
})
},
async refresh () {
await this.$apollo.queries.renderers.refetch()
this.$store.commit('showNotification', {
message: 'Rendering active configuration has been reloaded.',
style: 'success',
icon: 'cached'
})
},
async save () {
this.$store.commit(`loadingStart`, 'admin-rendering-saverenderers')
await this.$apollo.mutate({
mutation: renderersSaveMutation,
variables: {
renderers: _.reduce(this.renderers, (result, core) => {
result = _.concat(result, core.children.map(rd => ({
key: rd.key,
isEnabled: rd.isEnabled,
config: rd.config.map(cfg => ({ key: cfg.key, value: JSON.stringify({ v: cfg.value.value }) }))
})))
return result
}, [])
}
})
this.$store.commit('showNotification', {
message: 'Rendering configuration saved successfully.',
style: 'success',
icon: 'check'
})
this.$store.commit(`loadingStop`, 'admin-rendering-saverenderers')
}
},
apollo: {
renderers: {
query: renderersQuery,
fetchPolicy: 'network-only',
update: (data) => {
let renderers = _.cloneDeep(data.rendering.renderers).map(str => ({
...str,
config: _.sortBy(str.config.map(cfg => ({
...cfg,
value: JSON.parse(cfg.value)
})), [t => t.value.order])
}))
// Build tree
const graph = new DepGraph({ circular: true })
const rawCores = _.filter(renderers, ['dependsOn', null]).map(core => {
core.children = _.concat([_.cloneDeep(core)], _.filter(renderers, ['dependsOn', core.key]))
return core
})
// Build dependency graph
rawCores.map(core => { graph.addNode(core.key) })
rawCores.map(core => {
rawCores.map(coreTarget => {
if (core.key !== coreTarget.key) {
if (core.output === coreTarget.input) {
graph.addDependency(core.key, coreTarget.key)
}
}
})
})
// Reorder cores in reverse dependency order
let orderedCores = []
_.reverse(graph.overallOrder()).map(coreKey => {
orderedCores.push(_.find(rawCores, ['key', coreKey]))
})
return orderedCores
},
watchLoading (isLoading) {
this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-rendering-refresh')
}
}
}
}
</script>
<style lang='scss'>
.adm-rendering-pipeline {
.v-expansion-panel--active .v-expansion-panel-header {
min-height: 0;
}
.v-expansion-panel-header {
padding: 0;
margin-top: 1px;
}
.v-expansion-panel-content__wrap {
padding: 0;
}
}
</style>
<template lang='pug'>
v-container(fluid, grid-list-lg)
v-layout(row, wrap)
v-flex(xs12)
.admin-header
img.animated.fadeInUp(src='/_assets/svg/icon-search.svg', alt='Search Engine', style='width: 80px;')
.admin-header-title
.headline.primary--text.animated.fadeInLeft {{$t('admin:search.title')}}
.subtitle-1.grey--text.animated.fadeInLeft.wait-p2s {{$t('admin:search.subtitle')}}
v-spacer
v-btn.mr-3.animated.fadeInDown.wait-p3s(icon, outlined, color='grey', href='https://docs.requarks.io/search', target='_blank')
v-icon mdi-help-circle
v-btn.animated.fadeInDown.wait-p2s(icon, outlined, color='grey', @click='refresh')
v-icon mdi-refresh
v-btn.mx-3.animated.fadeInDown.wait-p1s(color='black', dark, depressed, @click='rebuild')
v-icon(left) mdi-cached
span {{$t('admin:search.rebuildIndex')}}
v-btn.animated.fadeInDown(color='success', @click='save', depressed, large)
v-icon(left) mdi-check
span {{$t('common:actions.apply')}}
v-flex(lg3, xs12)
v-card.animated.fadeInUp
v-toolbar(flat, color='primary', dark, dense)
.subtitle-1 {{$t('admin:search.searchEngine')}}
v-list.py-0(two-line, dense)
template(v-for='(eng, idx) in engines')
v-list-item(:key='eng.key', @click='selectedEngine = eng.key', :disabled='!eng.isAvailable')
v-list-item-avatar(size='24')
v-icon(color='grey', v-if='!eng.isAvailable') mdi-minus-box-outline
v-icon(color='primary', v-else-if='eng.key === selectedEngine') mdi-checkbox-marked-circle-outline
v-icon(color='grey', v-else) mdi-checkbox-blank-circle-outline
v-list-item-content
v-list-item-title.body-2(:class='!eng.isAvailable ? `grey--text` : (selectedEngine === eng.key ? `primary--text` : ``)') {{ eng.title }}
v-list-item-subtitle: .caption(:class='!eng.isAvailable ? `grey--text text--lighten-1` : (selectedEngine === eng.key ? `blue--text ` : ``)') {{ eng.description }}
v-list-item-avatar(v-if='selectedEngine === eng.key', size='24')
v-icon.animated.fadeInLeft(color='primary', large) mdi-chevron-right
v-divider(v-if='idx < engines.length - 1')
v-flex(lg9, xs12)
v-card.animated.fadeInUp.wait-p2s
v-toolbar(color='primary', dense, flat, dark)
.subtitle-1 {{engine.title}}
v-card-info(color='blue')
div
div {{engine.description}}
span.caption: a(:href='engine.website') {{engine.website}}
v-spacer
.admin-providerlogo
img(:src='engine.logo', :alt='engine.title')
v-card-text
.overline.mb-5 {{$t('admin:search.engineConfig')}}
.body-2.ml-3(v-if='!engine.config || engine.config.length < 1'): em {{$t('admin:search.engineNoConfig')}}
template(v-else, v-for='cfg in engine.config')
v-select(
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" : ""'
)
v-switch.mb-3(
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(
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(
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" : ""'
)
</template>
<script>
import _ from 'lodash'
import enginesQuery from 'gql/admin/search/search-query-engines.gql'
import enginesSaveMutation from 'gql/admin/search/search-mutation-save-engines.gql'
import enginesRebuildMutation from 'gql/admin/search/search-mutation-rebuild-index.gql'
export default {
data() {
return {
engines: [],
selectedEngine: '',
engine: {}
}
},
watch: {
selectedEngine(newValue, oldValue) {
this.engine = _.find(this.engines, ['key', newValue]) || {}
},
engines(newValue, oldValue) {
this.selectedEngine = _.get(_.find(this.engines, 'isEnabled'), 'key', 'db')
}
},
methods: {
async refresh() {
await this.$apollo.queries.engines.refetch()
this.$store.commit('showNotification', {
message: this.$t('admin:search.listRefreshSuccess'),
style: 'success',
icon: 'cached'
})
},
async save() {
this.$store.commit(`loadingStart`, 'admin-search-saveengines')
try {
const resp = await this.$apollo.mutate({
mutation: enginesSaveMutation,
variables: {
engines: this.engines.map(tgt => ({
isEnabled: tgt.key === this.selectedEngine,
key: tgt.key,
config: tgt.config.map(cfg => ({...cfg, value: JSON.stringify({ v: cfg.value.value })}))
}))
}
})
if (_.get(resp, 'data.search.updateSearchEngines.responseResult.succeeded', false)) {
this.$store.commit('showNotification', {
message: this.$t('admin:search.configSaveSuccess'),
style: 'success',
icon: 'check'
})
} else {
throw new Error(_.get(resp, 'data.search.updateSearchEngines.responseResult.message', this.$t('common:error.unexpected')))
}
} catch (err) {
this.$store.commit('pushGraphError', err)
}
this.$store.commit(`loadingStop`, 'admin-search-saveengines')
},
async rebuild () {
this.$store.commit(`loadingStart`, 'admin-search-rebuildindex')
try {
const resp = await this.$apollo.mutate({
mutation: enginesRebuildMutation
})
if (_.get(resp, 'data.search.rebuildIndex.responseResult.succeeded', false)) {
this.$store.commit('showNotification', {
message: this.$t('admin:search.indexRebuildSuccess'),
style: 'success',
icon: 'check'
})
} else {
throw new Error(_.get(resp, 'data.search.rebuildIndex.responseResult.message', this.$t('common:error.unexpected')))
}
} catch (err) {
this.$store.commit('pushGraphError', err)
}
this.$store.commit(`loadingStop`, 'admin-search-rebuildindex')
}
},
apollo: {
engines: {
query: enginesQuery,
fetchPolicy: 'network-only',
update: (data) => _.cloneDeep(data.search.searchEngines).map(str => ({
...str,
config: _.sortBy(str.config.map(cfg => ({
...cfg,
value: JSON.parse(cfg.value)
})), [t => t.value.order])
})),
watchLoading (isLoading) {
this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-search-refresh')
}
}
}
}
</script>
<style lang='scss' scoped>
.enginelogo {
width: 250px;
height: 85px;
float:right;
display: flex;
justify-content: flex-end;
align-items: center;
img {
max-width: 100%;
max-height: 50px;
}
}
</style>
<template lang='pug'>
v-container(fluid, grid-list-lg)
v-layout(row wrap)
v-flex(xs12)
.admin-header
img.animated.fadeInUp(src='/_assets/svg/icon-validation.svg', alt='SSL', style='width: 80px;')
.admin-header-title
.headline.primary--text.animated.fadeInLeft {{ $t('admin:ssl.title') }}
.subtitle-1.grey--text.animated.fadeInLeft {{ $t('admin:ssl.subtitle') }}
v-spacer
v-btn.animated.fadeInDown(
v-if='info.sslProvider === `letsencrypt` && info.httpsPort > 0'
color='black'
dark
depressed
@click='renewCertificate'
large
:loading='loadingRenew'
)
v-icon(left) mdi-cached
span {{$t('admin:ssl.renewCertificate')}}
v-form.pt-3
v-layout(row wrap)
v-flex(lg6 xs12)
v-card.animated.fadeInUp
v-subheader {{ $t('admin:ssl.currentState') }}
v-list(two-line, dense)
v-list-item
v-list-item-avatar
v-icon.indigo.white--text mdi-handshake
v-list-item-content
v-list-item-title {{ $t(`admin:ssl.provider`) }}
v-list-item-subtitle {{ providerTitle }}
template(v-if='info.sslProvider === `letsencrypt` && info.httpsPort > 0')
v-list-item
v-list-item-avatar
v-icon.indigo.white--text mdi-application
v-list-item-content
v-list-item-title {{ $t(`admin:ssl.domain`) }}
v-list-item-subtitle {{ info.sslDomain }}
v-list-item
v-list-item-avatar
v-icon.indigo.white--text mdi-at
v-list-item-content
v-list-item-title {{ $t('admin:ssl.subscriberEmail') }}
v-list-item-subtitle {{ info.sslSubscriberEmail }}
v-list-item
v-list-item-avatar
v-icon.indigo.white--text mdi-calendar-remove-outline
v-list-item-content
v-list-item-title {{ $t('admin:ssl.expiration') }}
v-list-item-subtitle {{ info.sslExpirationDate | moment('calendar') }}
v-list-item
v-list-item-avatar
v-icon.indigo.white--text mdi-traffic-light
v-list-item-content
v-list-item-title {{ $t(`admin:ssl.status`) }}
v-list-item-subtitle {{ info.sslStatus }}
v-flex(lg6 xs12)
v-card.animated.fadeInUp.wait-p2s
v-subheader {{ $t('admin:ssl.ports') }}
v-list(two-line, dense)
v-list-item
v-list-item-avatar
v-icon.blue.white--text mdi-lock-open-variant
v-list-item-content
v-list-item-title {{ $t(`admin:ssl.httpPort`) }}
v-list-item-subtitle {{ info.httpPort }}
template(v-if='info.httpsPort > 0')
v-divider
v-list-item
v-list-item-avatar
v-icon.green.white--text mdi-lock
v-list-item-content
v-list-item-title {{ $t(`admin:ssl.httpsPort`) }}
v-list-item-subtitle {{ info.httpsPort }}
v-divider
v-list-item
v-list-item-avatar
v-icon.indigo.white--text mdi-sign-direction
v-list-item-content
v-list-item-title {{ $t(`admin:ssl.httpPortRedirect`) }}
v-list-item-subtitle {{ info.httpRedirection }}
v-list-item-action
v-btn.red--text(
v-if='info.httpRedirection'
depressed
:color='$vuetify.theme.dark ? `red darken-4` : `red lighten-5`'
:class='$vuetify.theme.dark ? `text--lighten-5` : `text--darken-2`'
@click='toggleRedir'
:loading='loadingRedir'
)
v-icon(left) mdi-power
span {{$t('admin:ssl.httpPortRedirectTurnOff')}}
v-btn.green--text(
v-else
depressed
:color='$vuetify.theme.dark ? `green darken-4` : `green lighten-5`'
:class='$vuetify.theme.dark ? `text--lighten-5` : `text--darken-2`'
@click='toggleRedir'
:loading='loadingRedir'
)
v-icon(left) mdi-power
span {{$t('admin:ssl.httpPortRedirectTurnOn')}}
v-dialog(
v-model='loadingRenew'
persistent
max-width='450'
)
v-card(color='black', dark)
v-card-text.pa-10.text-center
semipolar-spinner.animated.fadeIn(
:animation-duration='1500'
:size='65'
color='#FFF'
style='margin: 0 auto;'
)
.mt-5.body-1.white--text {{$t('admin:ssl.renewCertificateLoadingTitle')}}
.caption.mt-4 {{$t('admin:ssl.renewCertificateLoadingSubtitle')}}
</template>
<script>
import _ from 'lodash'
import gql from 'graphql-tag'
import { SemipolarSpinner } from 'epic-spinners'
export default {
components: {
SemipolarSpinner
},
data() {
return {
loadingRenew: false,
loadingRedir: false,
info: {
sslDomain: '',
sslProvider: '',
sslSubscriberEmail: '',
sslExpirationDate: false,
sslStatus: '',
httpPort: 0,
httpRedirection: false,
httpsPort: 0
}
}
},
computed: {
providerTitle () {
switch (this.info.sslProvider) {
case 'custom':
return this.$t('admin:ssl.providerCustomCertificate')
case 'letsencrypt':
return this.$t('admin:ssl.providerLetsEncrypt')
default:
return this.$t('admin:ssl.providerDisabled')
}
}
},
methods: {
async toggleRedir () {
this.loadingRedir = true
try {
this.info.httpRedirection = !this.info.httpRedirection
await this.$apollo.mutate({
mutation: gql`
mutation ($enabled: Boolean!) {
system {
setHTTPSRedirection(enabled: $enabled) {
responseResult {
succeeded
errorCode
slug
message
}
}
}
}
`,
variables: {
enabled: _.get(this.info, 'httpRedirection', false)
},
watchLoading (isLoading) {
this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-ssl-toggleRedirection')
}
})
this.$store.commit('showNotification', {
style: 'success',
message: this.$t('admin:ssl.httpPortRedirectSaveSuccess'),
icon: 'check'
})
} catch (err) {
this.info.httpRedirection = !this.info.httpRedirection
this.$store.commit('pushGraphError', err)
}
this.loadingRedir = false
},
async renewCertificate () {
this.loadingRenew = true
try {
const respRaw = await this.$apollo.mutate({
mutation: gql`
mutation {
system {
renewHTTPSCertificate {
responseResult {
succeeded
errorCode
slug
message
}
}
}
}
`,
watchLoading (isLoading) {
this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-ssl-renew')
}
})
const resp = _.get(respRaw, 'data.system.renewHTTPSCertificate.responseResult', {})
if (resp.succeeded) {
this.$store.commit('showNotification', {
style: 'success',
message: this.$t('admin:ssl.renewCertificateSuccess'),
icon: 'check'
})
} else {
throw new Error(resp.message)
}
} catch (err) {
this.$store.commit('pushGraphError', err)
}
this.loadingRenew = false
}
},
apollo: {
info: {
query: gql`
{
system {
info {
httpPort
httpRedirection
httpsPort
sslDomain
sslExpirationDate
sslProvider
sslStatus
sslSubscriberEmail
}
}
}
`,
fetchPolicy: 'network-only',
update: (data) => _.cloneDeep(data.system.info),
watchLoading (isLoading) {
this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-ssl-refresh')
}
}
}
}
</script>
<style lang='scss'>
</style>
<template lang='pug'>
v-container(fluid, fill-height)
v-layout(row wrap)
v-flex(xs12)
.admin-header-icon: v-icon(size='80', color='grey lighten-2') show_chart
.headline.primary--text Statistics
.subtitle-1.grey--text Useful information about your wiki
.pa-3
fingerprint-spinner(
:animation-duration='1500'
:size='128'
color='#e91e63'
)
.caption.pink--text.mt-3 Compiling latest data...
</template>
<script>
import { FingerprintSpinner } from 'epic-spinners'
export default {
components: {
FingerprintSpinner
},
data() {
return {}
}
}
</script>
<style lang='scss'>
</style>
<template lang='pug'>
v-container.admin-system(fluid, grid-list-lg)
v-layout(row, wrap)
v-flex(xs12)
.admin-header
img.animated.fadeInUp(src='/_assets/svg/icon-tune.svg', alt='System Info', style='width: 80px;')
.admin-header-title
.headline.primary--text.animated.fadeInLeft {{ $t('admin:system.title') }}
.subtitle-1.grey--text.animated.fadeInLeft.wait-p2s {{ $t('admin:system.subtitle') }}
v-layout.mt-3(row wrap)
v-flex(lg6 xs12)
v-card.animated.fadeInUp
v-btn.animated.fadeInLeft.wait-p2s.btn-animate-rotate(fab, absolute, :right='!$vuetify.rtl', :left='$vuetify.rtl', top, small, light, @click='refresh'): v-icon(color='grey') mdi-refresh
v-subheader Wiki.js
v-list(two-line, dense)
v-list-item
v-list-item-avatar
v-icon.blue.white--text mdi-application-export
v-list-item-content
v-list-item-title {{ $t('admin:system.currentVersion') }}
v-list-item-subtitle {{ info.currentVersion }}
v-list-item
v-list-item-avatar
v-icon.blue.white--text mdi-inbox-arrow-up
v-list-item-content
v-list-item-title {{ $t('admin:system.latestVersion') }}
v-list-item-subtitle {{ info.latestVersion }}
v-list-item-action
v-list-item-action-text {{ $t('admin:system.published') }} {{ info.latestVersionReleaseDate | moment('from') }}
v-card-actions(v-if='info.upgradeCapable && !isLatestVersion && info.platform === `docker`', :class='$vuetify.theme.dark ? `grey darken-3-d5` : `indigo lighten-5`')
.caption.indigo--text.pl-3(:class='$vuetify.theme.dark ? `text--lighten-4` : ``') Wiki.js can perform the upgrade to the latest version for you.
v-spacer
v-btn.px-3(
color='indigo'
dark
@click='performUpgrade'
)
v-icon(left) mdi-upload
span Perform Upgrade
v-card.mt-4.animated.fadeInUp.wait-p2s
v-subheader {{ $t('admin:system.hostInfo') }}
v-list(two-line, dense)
v-list-item
v-list-item-avatar
v-avatar.blue-grey(size='40')
v-icon(color='white') {{platformLogo}}
v-list-item-content
v-list-item-title {{ $t('admin:system.os') }}
v-list-item-subtitle {{ (info.platform === 'docker') ? 'Docker Container (Linux)' : info.operatingSystem }}
v-list-item
v-list-item-avatar
v-icon.blue-grey.white--text mdi-desktop-classic
v-list-item-content
v-list-item-title {{ $t('admin:system.hostname') }}
v-list-item-subtitle {{ info.hostname }}
v-list-item
v-list-item-avatar
v-icon.blue-grey.white--text mdi-cpu-64-bit
v-list-item-content
v-list-item-title {{ $t('admin:system.cpuCores') }}
v-list-item-subtitle {{ info.cpuCores }}
v-list-item
v-list-item-avatar
v-icon.blue-grey.white--text mdi-memory
v-list-item-content
v-list-item-title {{ $t('admin:system.totalRAM') }}
v-list-item-subtitle {{ info.ramTotal }}
v-list-item
v-list-item-avatar
v-icon.blue-grey.white--text mdi-iframe-outline
v-list-item-content
v-list-item-title {{ $t('admin:system.workingDirectory') }}
v-list-item-subtitle {{ info.workingDirectory }}
v-list-item
v-list-item-avatar
v-icon.blue-grey.white--text mdi-card-bulleted-settings-outline
v-list-item-content
v-list-item-title {{ $t('admin:system.configFile') }}
v-list-item-subtitle {{ info.configFile }}
v-flex(lg6 xs12)
v-card.pb-3.animated.fadeInUp.wait-p4s
v-subheader Node.js
v-list(dense)
v-list-item
v-list-item-avatar
v-avatar.light-green(size='40')
v-icon(color='white') mdi-nodejs
v-list-item-content
v-list-item-title {{ info.nodeVersion }}
v-divider.mt-3
v-subheader {{ info.dbType }}
v-list(dense)
v-list-item
v-list-item-avatar
v-avatar.indigo.darken-1(size='40')
v-icon(color='white') mdi-database
v-list-item-content
v-list-item-title(v-html='dbVersion')
v-list-item-subtitle {{ info.dbHost }}
v-alert.mt-3.mx-4(:value='isDbLimited', color='deep-orange darken-2', icon='mdi-alert', dark) {{ $t('admin:system.dbPartialSupport') }}
v-dialog(
v-model='isUpgrading'
persistent
width='450'
)
v-card.blue.darken-5(dark)
v-card-text.text-center.pa-10
self-building-square-spinner(
:animation-duration='4000'
:size='40'
color='#FFF'
style='margin: 0 auto;'
)
.body-2.mt-5.blue--text.text--lighten-4 Your Wiki.js container is being upgraded...
.caption.blue--text.text--lighten-2 Please wait
v-progress-linear.mt-5(
color='blue lighten-2'
:value='upgradeProgress'
:buffer-value='upgradeProgress'
rounded
:stream='isUpgradingStarted'
query
:indeterminate='!isUpgradingStarted'
)
</template>
<script>
import _ from 'lodash'
import { SelfBuildingSquareSpinner } from 'epic-spinners'
import systemInfoQuery from 'gql/admin/system/system-query-info.gql'
import performUpgradeMutation from 'gql/admin/system/system-mutation-upgrade.gql'
export default {
components: {
SelfBuildingSquareSpinner
},
data () {
return {
isUpgrading: false,
isUpgradingStarted: false,
upgradeProgress: 0,
info: {}
}
},
computed: {
dbVersion () {
return _.get(this.info, 'dbVersion', '').replace(/(?:\r\n|\r|\n)/g, '<br />')
},
platformLogo () {
switch (this.info.platform) {
case 'docker':
return 'mdi-docker'
case 'darwin':
return 'mdi-apple'
case 'linux':
if (this.info.operatingSystem.indexOf('Ubuntu')) {
return 'mdi-ubuntu'
} else {
return 'mdi-linux'
}
case 'win32':
return 'mdi-microsoft-windows'
default:
return ''
}
},
isDbLimited () {
return this.info.dbType === 'MySQL' && this.dbVersion.indexOf('5.') === 0
},
isLatestVersion () {
return this.info.currentVersion === this.info.latestVersion
}
},
methods: {
async refresh () {
await this.$apollo.queries.info.refetch()
this.$store.commit('showNotification', {
message: this.$t('admin:system.refreshSuccess'),
style: 'success',
icon: 'cached'
})
},
async performUpgrade () {
this.isUpgrading = true
this.isUpgradingStarted = false
this.upgradeProgress = 0
this.$store.commit(`loadingStart`, 'admin-system-upgrade')
try {
const respRaw = await this.$apollo.mutate({
mutation: performUpgradeMutation
})
const resp = _.get(respRaw, 'data.system.performUpgrade.responseResult', {})
if (resp.succeeded) {
this.isUpgradingStarted = true
let progressInterval = setInterval(() => {
this.upgradeProgress += 0.83
}, 500)
_.delay(() => {
clearInterval(progressInterval)
window.location.reload(true)
}, 60000)
} else {
throw new Error(resp.message)
}
} catch (err) {
this.$store.commit('pushGraphError', err)
this.$store.commit(`loadingStop`, 'admin-system-upgrade')
this.isUpgrading = false
}
}
},
apollo: {
info: {
query: systemInfoQuery,
fetchPolicy: 'network-only',
update: (data) => data.system.info,
watchLoading (isLoading) {
this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-system-refresh')
}
}
}
}
</script>
<style lang='scss'>
.admin-system {
.v-list-item-title, .v-list-item__subtitle {
user-select: text;
}
}
</style>
<template lang='pug'>
v-container(fluid, grid-list-lg)
v-layout(row wrap)
v-flex(xs12)
.admin-header
img.animated.fadeInUp(src='/_assets/svg/icon-tags.svg', alt='Tags', style='width: 80px;')
.admin-header-title
.headline.primary--text.animated.fadeInLeft {{$t('tags.title')}}
.subtitle-1.grey--text.animated.fadeInLeft.wait-p4s {{$t('tags.subtitle')}}
v-spacer
v-btn.animated.fadeInDown(outlined, color='grey', @click='refresh', icon)
v-icon mdi-refresh
v-container.pa-0.mt-3(fluid, grid-list-lg)
v-layout(row)
v-flex(style='flex: 0 0 350px;')
v-card.animated.fadeInUp
v-toolbar(:color='$vuetify.theme.dark ? `grey darken-3-d5` : `grey lighten-4`', flat)
v-text-field(
v-model='filter'
:label='$t(`admin:tags.filter`)'
hide-details
single-line
solo
flat
dense
color='teal'
:background-color='$vuetify.theme.dark ? `grey darken-4` : `grey lighten-2`'
prepend-inner-icon='mdi-magnify'
)
v-divider
v-list.py-2(dense, nav)
v-list-item(v-if='tags.length < 1')
v-list-item-avatar(size='24'): v-icon(color='grey') mdi-compass-off
v-list-item-content
.caption.grey--text {{$t('tags.emptyList')}}
v-list-item(
v-for='tag of filteredTags'
:key='tag.id'
:class='(tag.id === current.id) ? "teal" : ""'
@click='selectTag(tag)'
)
v-list-item-avatar(size='24', tile): v-icon(size='18', :color='tag.id === current.id ? `white` : `teal`') mdi-tag
v-list-item-title(:class='tag.id === current.id ? `white--text` : ``') {{tag.tag}}
v-flex.animated.fadeInUp.wait-p2s
template(v-if='current.id')
v-card
v-toolbar(dense, color='teal', flat, dark)
.subtitle-1 {{$t('tags.edit')}}
v-spacer
v-btn.pl-4(
color='white'
dark
outlined
small
:href='`/t/` + current.tag'
)
span.text-none {{$t('admin:tags.viewLinkedPages')}}
v-icon(right) mdi-chevron-right
v-card-text
v-text-field(
outlined
:label='$t("tags.tag")'
prepend-icon='mdi-tag'
v-model='current.tag'
counter='255'
)
v-text-field(
outlined
:label='$t("tags.label")'
prepend-icon='mdi-format-title'
v-model='current.title'
hide-details
)
v-card-chin
i18next.caption.pl-3(path='admin:tags.date', tag='div')
strong(place='created') {{current.createdAt | moment('from')}}
strong(place='updated') {{current.updatedAt | moment('from')}}
v-spacer
v-dialog(v-model='deleteTagDialog', max-width='500')
template(v-slot:activator='{ on }')
v-btn(color='red', outlined, v-on='on')
v-icon(color='red') mdi-trash-can-outline
v-card
.dialog-header.is-red {{$t('admin:tags.deleteConfirm')}}
v-card-text.pa-4
i18next(tag='span', path='admin:tags.deleteConfirmText')
strong(place='tag') {{ current.tag }}
v-card-actions
v-spacer
v-btn(text, @click='deleteTagDialog = false') {{$t('common:actions.cancel')}}
v-btn(color='red', dark, @click='deleteTag(current)') {{$t('common:actions.delete')}}
v-btn.px-5.mr-2(color='success', depressed, dark, @click='saveTag(current)')
v-icon(left) mdi-content-save
span {{$t('common:actions.save')}}
v-card(v-else)
v-card-text.grey--text(v-if='tags.length > 0') {{$t('tags.noSelectionText')}}
v-card-text.grey--text(v-else) {{$t('tags.noItemsText')}}
</template>
<script>
import _ from 'lodash'
import gql from 'graphql-tag'
export default {
data() {
return {
tags: [],
current: {},
filter: '',
deleteTagDialog: false
}
},
computed: {
filteredTags () {
if (this.filter.length > 0) {
return _.filter(this.tags, t => t.tag.indexOf(this.filter) >= 0 || t.title.indexOf(this.filter) >= 0)
} else {
return this.tags
}
}
},
methods: {
selectTag(tag) {
this.current = tag
},
async deleteTag(tag) {
this.$store.commit(`loadingStart`, 'admin-tags-delete')
try {
const resp = await this.$apollo.mutate({
mutation: gql`
mutation ($id: Int!) {
pages {
deleteTag (id: $id) {
responseResult {
succeeded
errorCode
slug
message
}
}
}
}
`,
variables: {
id: tag.id
}
})
if (_.get(resp, 'data.pages.deleteTag.responseResult.succeeded', false)) {
this.$store.commit('showNotification', {
message: this.$t('tags.deleteSuccess'),
style: 'success',
icon: 'check'
})
this.refresh()
} else {
throw new Error(_.get(resp, 'data.pages.deleteTag.responseResult.message', 'An unexpected error occurred.'))
}
} catch (err) {
this.$store.commit('pushGraphError', err)
}
this.deleteTagDialog = false
this.$store.commit(`loadingStop`, 'admin-tags-delete')
},
async saveTag(tag) {
this.$store.commit(`loadingStart`, 'admin-tags-save')
try {
const resp = await this.$apollo.mutate({
mutation: gql`
mutation ($id: Int!, $tag: String!, $title: String!) {
pages {
updateTag (id: $id, tag: $tag, title: $title) {
responseResult {
succeeded
errorCode
slug
message
}
}
}
}
`,
variables: {
id: tag.id,
tag: tag.tag,
title: tag.title
}
})
if (_.get(resp, 'data.pages.updateTag.responseResult.succeeded', false)) {
this.$store.commit('showNotification', {
message: this.$t('tags.saveSuccess'),
style: 'success',
icon: 'check'
})
this.current.updatedAt = new Date()
} else {
throw new Error(_.get(resp, 'data.pages.updateTag.responseResult.message', 'An unexpected error occurred.'))
}
} catch (err) {
this.$store.commit('pushGraphError', err)
}
this.$store.commit(`loadingStop`, 'admin-tags-save')
},
async refresh() {
await this.$apollo.queries.tags.refetch()
this.current = {}
this.$store.commit('showNotification', {
message: this.$t('tags.refreshSuccess'),
style: 'success',
icon: 'cached'
})
}
},
apollo: {
tags: {
query: gql`
{
pages {
tags {
id
tag
title
createdAt
updatedAt
}
}
}
`,
fetchPolicy: 'network-only',
update: (data) => _.cloneDeep(data.pages.tags),
watchLoading (isLoading) {
this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-tags-refresh')
}
}
}
}
</script>
<style lang='scss' scoped>
.clickable {
cursor: pointer;
&:hover {
background-color: rgba(mc('blue', '500'), .25);
}
}
</style>
<template lang='pug'>
v-container(fluid, grid-list-lg)
v-layout(row wrap)
v-flex(xs12)
.admin-header
img.animated.fadeInUp(src='/_assets/svg/icon-paint-palette.svg', alt='Theme', style='width: 80px;')
.admin-header-title
.headline.primary--text.animated.fadeInLeft {{$t('admin:theme.title')}}
.subtitle-1.grey--text.animated.fadeInLeft.wait-p2s {{$t('admin:theme.subtitle')}}
v-spacer
v-btn.animated.fadeInRight(color='success', depressed, @click='save', large, :loading='loading')
v-icon(left) mdi-check
span {{$t('common:actions.apply')}}
v-form.pt-3
v-layout(row wrap)
v-flex(lg6 xs12)
v-card.animated.fadeInUp
v-toolbar(color='primary', dark, dense, flat)
v-toolbar-title.subtitle-1 {{$t('admin:theme.title')}}
v-card-text
v-select(
:items='themes'
outlined
prepend-icon='mdi-palette'
v-model='config.theme'
:label='$t(`admin:theme.siteTheme`)'
persistent-hint
:hint='$t(`admin:theme.siteThemeHint`)'
)
template(slot='item', slot-scope='data')
v-list-item-avatar
v-icon.blue--text(dark) mdi-image-filter-frames
v-list-item-content
v-list-item-title(v-html='data.item.text')
v-list-item-sub-title(v-html='data.item.author')
v-select.mt-3(
:items='iconsets'
outlined
prepend-icon='mdi-paw'
v-model='config.iconset'
:label='$t(`admin:theme.iconset`)'
persistent-hint
:hint='$t(`admin:theme.iconsetHint`)'
)
v-divider.mt-3
v-switch(
inset
v-model='darkMode'
:label='$t(`admin:theme.darkMode`)'
color='primary'
persistent-hint
:hint='$t(`admin:theme.darkModeHint`)'
)
v-card.mt-3.animated.fadeInUp.wait-p1s
v-toolbar(color='primary', dark, dense, flat)
v-toolbar-title.subtitle-1 {{$t(`admin:theme.options`)}}
v-spacer
v-chip(label, color='white', small).primary--text coming soon
v-card-text
v-select(
:items='[]'
outlined
prepend-icon='mdi-border-vertical'
v-model='config.iconset'
label='Table of Contents Position'
persistent-hint
hint='Select whether the table of contents is shown on the left, right or not at all.'
disabled
)
v-flex(lg6 xs12)
//- v-card.animated.fadeInUp.wait-p2s
//- v-toolbar(color='teal', dark, dense, flat)
//- v-toolbar-title.subtitle-1 {{$t('admin:theme.downloadThemes')}}
//- v-spacer
//- v-chip(label, color='white', small).teal--text coming soon
//- v-data-table(
//- :headers='headers',
//- :items='themes',
//- hide-default-footer,
//- item-key='value',
//- :items-per-page='1000'
//- )
//- template(v-slot:item='thm')
//- td
//- strong {{thm.item.text}}
//- td
//- span {{ thm.item.author }}
//- td.text-xs-center
//- v-progress-circular(v-if='thm.item.isDownloading', indeterminate, color='blue', size='20', :width='2')
//- v-btn(v-else-if='thm.item.isInstalled && thm.item.installDate < thm.item.updatedAt', icon)
//- v-icon.blue--text mdi-cached
//- v-btn(v-else-if='thm.item.isInstalled', icon)
//- v-icon.green--text mdi-check-bold
//- v-btn(v-else, icon)
//- v-icon.grey--text mdi-cloud-download
v-card.animated.fadeInUp.wait-p2s
v-toolbar(color='primary', dark, dense, flat)
v-toolbar-title.subtitle-1 {{$t(`admin:theme.codeInjection`)}}
v-card-text
v-textarea.is-monospaced(
v-model='config.injectCSS'
:label='$t(`admin:theme.cssOverride`)'
outlined
color='primary'
persistent-hint
:hint='$t(`admin:theme.cssOverrideHint`)'
auto-grow
)
i18next.caption.pl-2.ml-1(path='admin:theme.cssOverrideWarning', tag='div')
strong.red--text(place='caution') {{$t('admin:theme.cssOverrideWarningCaution')}}
code(place='cssClass') .contents
v-textarea.is-monospaced.mt-3(
v-model='config.injectHead'
:label='$t(`admin:theme.headHtmlInjection`)'
outlined
color='primary'
persistent-hint
:hint='$t(`admin:theme.headHtmlInjectionHint`)'
auto-grow
)
v-textarea.is-monospaced.mt-2(
v-model='config.injectBody'
:label='$t(`admin:theme.bodyHtmlInjection`)'
outlined
color='primary'
persistent-hint
:hint='$t(`admin:theme.bodyHtmlInjectionHint`)'
auto-grow
)
</template>
<script>
import _ from 'lodash'
import { sync } from 'vuex-pathify'
import themeConfigQuery from 'gql/admin/theme/theme-query-config.gql'
import themeSaveMutation from 'gql/admin/theme/theme-mutation-save.gql'
export default {
data() {
return {
loading: false,
themes: [
{ text: 'Default', author: 'requarks.io', value: 'default', isInstalled: true, installDate: '', updatedAt: '' }
],
iconsets: [
{ text: 'Material Design Icons (default)', value: 'mdi' },
{ text: 'Font Awesome 5', value: 'fa' },
{ text: 'Font Awesome 4', value: 'fa4' }
],
config: {
theme: 'default',
darkMode: false,
iconset: '',
injectCSS: '',
injectHead: '',
injectBody: ''
},
darkModeInitial: false
}
},
computed: {
darkMode: sync('site/dark'),
headers() {
return [
{
text: this.$t('admin:theme.downloadName'),
align: 'left',
value: 'text'
},
{
text: this.$t('admin:theme.downloadAuthor'),
align: 'left',
value: 'author'
},
{
text: this.$t('admin:theme.downloadDownload'),
align: 'center',
value: 'value',
sortable: false,
width: 100
}
]
}
},
watch: {
'darkMode' (newValue, oldValue) {
this.$vuetify.theme.dark = newValue
}
},
mounted() {
this.darkModeInitial = this.darkMode
},
beforeDestroy() {
this.darkMode = this.darkModeInitial
this.$vuetify.theme.dark = this.darkModeInitial
},
methods: {
async save () {
this.loading = true
this.$store.commit(`loadingStart`, 'admin-theme-save')
try {
const respRaw = await this.$apollo.mutate({
mutation: themeSaveMutation,
variables: {
theme: this.config.theme,
iconset: this.config.iconset,
darkMode: this.darkMode,
injectCSS: this.config.injectCSS,
injectHead: this.config.injectHead,
injectBody: this.config.injectBody
}
})
const resp = _.get(respRaw, 'data.theming.setConfig.responseResult', {})
if (resp.succeeded) {
this.darkModeInitial = this.darkMode
this.$store.commit('showNotification', {
message: 'Theme settings updated successfully.',
style: 'success',
icon: 'check'
})
} else {
throw new Error(resp.message)
}
} catch (err) {
this.$store.commit('pushGraphError', err)
}
this.$store.commit(`loadingStop`, 'admin-theme-save')
this.loading = false
}
},
apollo: {
config: {
query: themeConfigQuery,
fetchPolicy: 'network-only',
update: (data) => data.theming.config,
watchLoading (isLoading) {
this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-theme-refresh')
}
}
}
}
</script>
<style lang='scss'>
.v-textarea.is-monospaced textarea {
font-family: 'Roboto Mono', 'Courier New', Courier, monospace;
font-size: 13px;
font-weight: 600;
line-height: 1.4;
}
</style>
<template lang="pug">
v-dialog(v-model='isShown', max-width='650', persistent)
v-card
.dialog-header.is-short
v-icon.mr-3(color='white') mdi-plus
span New User
v-spacer
v-btn.mx-0(color='white', outlined, disabled, dark)
v-icon(left) mdi-database-import
span Bulk Import
v-card-text.pt-5
v-select(
:items='providers'
item-text='displayName'
item-value='key'
outlined
prepend-icon='mdi-domain'
v-model='provider'
label='Provider'
)
v-text-field(
outlined
prepend-icon='mdi-at'
v-model='email'
label='Email Address'
key='newUserEmail'
persistent-hint
ref='emailInput'
)
v-text-field(
v-if='provider === `local`'
outlined
prepend-icon='mdi-lock-outline'
append-icon='mdi-dice-5'
v-model='password'
:label='mustChangePwd ? `Temporary Password` : `Password`'
counter='255'
@click:append='generatePwd'
key='newUserPassword'
persistent-hint
)
v-text-field(
outlined
prepend-icon='mdi-account-outline'
v-model='name'
label='Name'
:hint='provider === `local` ? `Can be changed by the user.` : `May be overwritten by the provider during login.`'
key='newUserName'
persistent-hint
)
v-select.mt-2(
:items='groups'
item-text='name'
item-value='id'
item-disabled='isSystem'
outlined
prepend-icon='mdi-account-group'
v-model='group'
label='Assign to Group(s)...'
hint='Note that you cannot assign users to the Administrators or Guests groups from this dialog.'
persistent-hint
clearable
multiple
)
v-divider
v-checkbox(
color='primary'
label='Require password change on first login'
v-if='provider === `local`'
v-model='mustChangePwd'
hide-details
)
v-checkbox(
color='primary'
label='Send a welcome email'
hide-details
v-model='sendWelcomeEmail'
disabled
)
v-card-chin
v-spacer
v-btn(text, @click='isShown = false') Cancel
v-btn.px-3(depressed, color='primary', @click='newUser(false)')
v-icon(left) mdi-chevron-right
span Create
v-btn.px-3(depressed, color='primary', @click='newUser(true)')
v-icon(left) mdi-chevron-double-right
span Create and Close
</template>
<script>
import _ from 'lodash'
import validate from 'validate.js'
import gql from 'graphql-tag'
import createUserMutation from 'gql/admin/users/users-mutation-create.gql'
import groupsQuery from 'gql/admin/users/users-query-groups.gql'
export default {
props: {
value: {
type: Boolean,
default: false
}
},
data() {
return {
providers: [],
provider: 'local',
email: '',
password: '',
name: '',
groups: [],
group: [],
mustChangePwd: false,
sendWelcomeEmail: false
}
},
computed: {
isShown: {
get() { return this.value },
set(val) { this.$emit('input', val) }
}
},
watch: {
value(newValue, oldValue) {
if (newValue) {
this.$nextTick(() => {
this.$refs.emailInput.focus()
})
}
}
},
methods: {
async newUser(close = false) {
let rules = {
email: {
presence: {
allowEmpty: false
},
email: true
},
name: {
presence: {
allowEmpty: false
},
length: {
minimum: 2,
maximum: 255
}
}
}
if (this.provider === `local`) {
rules.password = {
presence: {
allowEmpty: false
},
length: {
minimum: 6,
maximum: 255
}
}
}
const validationResults = validate({
email: this.email,
password: this.password,
name: this.name
}, rules, { format: 'flat' })
if (validationResults) {
this.$store.commit('showNotification', {
style: 'red',
message: validationResults[0],
icon: 'alert'
})
return
}
try {
const resp = await this.$apollo.mutate({
mutation: createUserMutation,
variables: {
providerKey: this.provider,
email: this.email,
passwordRaw: this.password,
name: this.name,
groups: this.group,
mustChangePassword: this.mustChangePwd,
sendWelcomeEmail: this.sendWelcomeEmail
},
watchLoading (isLoading) {
this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-users-create')
}
})
if (_.get(resp, 'data.users.create.responseResult.succeeded', false)) {
this.$store.commit('showNotification', {
style: 'success',
message: 'New user created successfully.',
icon: 'check'
})
this.email = ''
this.password = ''
this.name = ''
if (close) {
this.isShown = false
this.$emit('refresh')
} else {
this.$refs.emailInput.focus()
}
} else {
this.$store.commit('showNotification', {
style: 'red',
message: _.get(resp, 'data.users.create.responseResult.message', 'An unexpected error occurred.'),
icon: 'alert'
})
}
} catch (err) {
this.$store.commit('pushGraphError', err)
}
},
generatePwd() {
const pwdChars = 'abcdefghkmnpqrstuvwxyzABCDEFHJKLMNPQRSTUVWXYZ23456789_*=?#!()+'
this.password = _.sampleSize(pwdChars, 12).join('')
}
},
apollo: {
providers: {
query: gql`
query {
authentication {
activeStrategies {
key
displayName
}
}
}
`,
fetchPolicy: 'network-only',
update: (data) => data.authentication.activeStrategies,
watchLoading (isLoading) {
this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-users-strategies-refresh')
}
},
groups: {
query: groupsQuery,
fetchPolicy: 'network-only',
update: (data) => data.groups.list,
watchLoading (isLoading) {
this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-auth-groups-refresh')
}
}
}
}
</script>
<template lang='pug'>
v-container(fluid, grid-list-lg)
v-layout(row, wrap)
v-flex(xs12)
.admin-header
img.animated.fadeInUp(src='/_assets/svg/icon-customer.svg', alt='Users', style='width: 80px;')
.admin-header-title
.headline.blue--text.text--darken-2.animated.fadeInLeft Users
.subtitle-1.grey--text.animated.fadeInLeft.wait-p2s Manage users
v-spacer
v-btn.animated.fadeInDown.wait-p2s.mr-3(outlined, color='grey', icon, @click='refresh')
v-icon mdi-refresh
v-btn.animated.fadeInDown(color='primary', large, depressed, @click='createUser')
v-icon(left) mdi-plus
span New User
v-card.mt-3.animated.fadeInUp
.pa-2.d-flex.align-center(:class='$vuetify.theme.dark ? `grey darken-3-d5` : `grey lighten-3`')
v-text-field(
solo
flat
v-model='search'
prepend-inner-icon='mdi-account-search-outline'
label='Search Users...'
hide-details
style='max-width: 400px;'
dense
)
v-spacer
v-select(
solo
flat
hide-details
label='Identity Provider'
:items='strategies'
v-model='filterStrategy'
item-text='displayName'
item-value='key'
style='max-width: 300px;'
dense
)
v-divider
v-data-table(
v-model='selected'
:items='usersFiltered',
:headers='headers',
:search='search',
:page.sync='pagination'
:items-per-page='15'
:loading='loading'
@page-count='pageCount = $event'
hide-default-footer
)
template(slot='item', slot-scope='props')
tr.is-clickable(:active='props.selected', @click='$router.push("/users/" + props.item.id)')
//- td
v-checkbox(hide-details, :input-value='props.selected', color='blue darken-2', @click='props.selected = !props.selected')
td {{ props.item.id }}
td: strong {{ props.item.name }}
td {{ props.item.email }}
td {{ getStrategyName(props.item.providerKey) }}
td {{ props.item.createdAt | moment('from') }}
td
span(v-if='props.item.lastLoginAt') {{ props.item.lastLoginAt | moment('from') }}
em.grey--text(v-else) Never
td.text-right
v-icon.mr-3(v-if='props.item.isSystem') mdi-lock-outline
status-indicator(positive, pulse, v-if='props.item.isActive')
status-indicator(negative, pulse, v-else)
template(slot='no-data')
.pa-3
v-alert.text-left(icon='mdi-alert', outlined, color='grey')
em.body-2 No users to display!
v-card-chin(v-if='pageCount > 1')
v-spacer
v-pagination(v-model='pagination', :length='pageCount')
v-spacer
user-create(v-model='isCreateDialogShown', @refresh='refresh(false)')
</template>
<script>
import _ from 'lodash'
import gql from 'graphql-tag'
import { StatusIndicator } from 'vue-status-indicator'
import UserCreate from './admin-users-create.vue'
export default {
components: {
StatusIndicator,
UserCreate
},
data() {
return {
selected: [],
pagination: 1,
pageCount: 0,
users: [],
headers: [
{ text: 'ID', value: 'id', width: 80, sortable: true },
{ text: 'Name', value: 'name', sortable: true },
{ text: 'Email', value: 'email', sortable: true },
{ text: 'Provider', value: 'provider', sortable: true },
{ text: 'Created', value: 'createdAt', sortable: true },
{ text: 'Last Login', value: 'lastLoginAt', sortable: true },
{ text: '', value: 'actions', sortable: false, width: 80 }
],
strategies: [],
filterStrategy: 'all',
search: '',
loading: false,
isCreateDialogShown: false
}
},
computed: {
usersFiltered () {
const all = this.filterStrategy === 'all' || this.filterStrategy === ''
return _.filter(this.users, u => all || u.providerKey === this.filterStrategy)
}
},
methods: {
createUser() {
this.isCreateDialogShown = true
},
async refresh(notify = true) {
await this.$apollo.queries.users.refetch()
if (notify) {
this.$store.commit('showNotification', {
message: 'Users list has been refreshed.',
style: 'success',
icon: 'cached'
})
}
},
getStrategyName(key) {
return (_.find(this.strategies, ['key', key]) || {}).displayName || key
}
},
apollo: {
users: {
query: gql`
query {
users {
list {
id
name
email
providerKey
isSystem
isActive
createdAt
lastLoginAt
}
}
}
`,
fetchPolicy: 'network-only',
update: (data) => data.users.list,
watchLoading (isLoading) {
this.loading = isLoading
this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-users-refresh')
}
},
strategies: {
query: gql`
query {
authentication {
activeStrategies {
key
displayName
}
}
}
`,
fetchPolicy: 'network-only',
update: (data) => {
return _.concat({
key: 'all',
displayName: 'All Providers'
}, data.authentication.activeStrategies)
},
watchLoading (isLoading) {
this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-users-strategies-refresh')
}
}
}
}
</script>
<style lang='scss'>
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment