): V[];
+export function values (forEachable) {
+ const result = []
+ forEachable.forEach(value => result.push(value))
+ return result
+}
+
+export class Position {
+ static Min (...positions) {
+ if (positions.length === 0) {
+ throw new TypeError()
+ }
+ let result = positions[0]
+ for (let i = 1; i < positions.length; i++) {
+ const p = positions[i]
+ if (p.isBefore(result)) {
+ result = p
+ }
+ }
+ return result
+ }
+
+ static Max (...positions) {
+ if (positions.length === 0) {
+ throw new TypeError()
+ }
+ let result = positions[0]
+ for (let i = 1; i < positions.length; i++) {
+ const p = positions[i]
+ if (p.isAfter(result)) {
+ result = p
+ }
+ }
+ return result
+ }
+
+ static isPosition (other) {
+ if (!other) {
+ return false
+ }
+ if (other instanceof Position) {
+ return true
+ }
+ const { line, character } = other
+ if (typeof line === 'number' && typeof character === 'number') {
+ return true
+ }
+ return false
+ }
+
+ get line () {
+ return this._line
+ }
+
+ get character () {
+ return this._character
+ }
+
+ constructor (line, character) {
+ if (line < 0) {
+ throw new Error('line must be non-negative')
+ }
+ if (character < 0) {
+ throw new Error('character must be non-negative')
+ }
+ this._line = line
+ this._character = character
+ }
+
+ isBefore (other) {
+ if (this._line < other._line) {
+ return true
+ }
+ if (other._line < this._line) {
+ return false
+ }
+ return this._character < other._character
+ }
+
+ isBeforeOrEqual (other) {
+ if (this._line < other._line) {
+ return true
+ }
+ if (other._line < this._line) {
+ return false
+ }
+ return this._character <= other._character
+ }
+
+ isAfter (other) {
+ return !this.isBeforeOrEqual(other)
+ }
+
+ isAfterOrEqual (other) {
+ return !this.isBefore(other)
+ }
+
+ isEqual (other) {
+ return this._line === other._line && this._character === other._character
+ }
+
+ compareTo (other) {
+ if (this._line < other._line) {
+ return -1
+ } else if (this._line > other.line) {
+ return 1
+ } else {
+ // equal line
+ if (this._character < other._character) {
+ return -1
+ } else if (this._character > other._character) {
+ return 1
+ } else {
+ // equal line and character
+ return 0
+ }
+ }
+ }
+
+ translate (lineDeltaOrChange, characterDelta = 0) {
+ if (lineDeltaOrChange === null || characterDelta === null) {
+ throw new Error()
+ }
+
+ let lineDelta
+ if (typeof lineDeltaOrChange === 'undefined') {
+ lineDelta = 0
+ } else if (typeof lineDeltaOrChange === 'number') {
+ lineDelta = lineDeltaOrChange
+ } else {
+ lineDelta = typeof lineDeltaOrChange.lineDelta === 'number' ? lineDeltaOrChange.lineDelta : 0
+ characterDelta = typeof lineDeltaOrChange.characterDelta === 'number' ? lineDeltaOrChange.characterDelta : 0
+ }
+
+ if (lineDelta === 0 && characterDelta === 0) {
+ return this
+ }
+ return new Position(this.line + lineDelta, this.character + characterDelta)
+ }
+
+ with (lineOrChange, character = this.character) {
+ if (lineOrChange === null || character === null) {
+ throw new Error()
+ }
+
+ let line
+ if (typeof lineOrChange === 'undefined') {
+ line = this.line
+ } else if (typeof lineOrChange === 'number') {
+ line = lineOrChange
+ } else {
+ line = typeof lineOrChange.line === 'number' ? lineOrChange.line : this.line
+ character = typeof lineOrChange.character === 'number' ? lineOrChange.character : this.character
+ }
+
+ if (line === this.line && character === this.character) {
+ return this
+ }
+ return new Position(line, character)
+ }
+
+ toJSON () {
+ return { line: this.line, character: this.character }
+ }
+}
+
+export class Range {
+ static isRange (thing) {
+ if (thing instanceof Range) {
+ return true
+ }
+ if (!thing) {
+ return false
+ }
+ return Position.isPosition(thing.start) && Position.isPosition(thing.end)
+ }
+
+ get start () {
+ return this._start
+ }
+
+ get end () {
+ return this._end
+ }
+
+ constructor (startLineOrStart, startColumnOrEnd, endLine, endColumn) {
+ let start
+ let end
+
+ if (typeof startLineOrStart === 'number' && typeof startColumnOrEnd === 'number' && typeof endLine === 'number' && typeof endColumn === 'number') {
+ start = new Position(startLineOrStart, startColumnOrEnd)
+ end = new Position(endLine, endColumn)
+ } else if (startLineOrStart instanceof Position && startColumnOrEnd instanceof Position) {
+ start = startLineOrStart
+ end = startColumnOrEnd
+ }
+
+ if (!start || !end) {
+ throw new Error('Invalid arguments')
+ }
+
+ if (start.isBefore(end)) {
+ this._start = start
+ this._end = end
+ } else {
+ this._start = end
+ this._end = start
+ }
+ }
+
+ contains (positionOrRange) {
+ if (positionOrRange instanceof Range) {
+ return this.contains(positionOrRange._start) &&
+ this.contains(positionOrRange._end)
+ } else if (positionOrRange instanceof Position) {
+ if (positionOrRange.isBefore(this._start)) {
+ return false
+ }
+ if (this._end.isBefore(positionOrRange)) {
+ return false
+ }
+ return true
+ }
+ return false
+ }
+
+ isEqual (other) {
+ return this._start.isEqual(other._start) && this._end.isEqual(other._end)
+ }
+
+ intersection (other) {
+ const start = Position.Max(other.start, this._start)
+ const end = Position.Min(other.end, this._end)
+ if (start.isAfter(end)) {
+ // this happens when there is no overlap:
+ // |-----|
+ // |----|
+ return undefined
+ }
+ return new Range(start, end)
+ }
+
+ union (other) {
+ if (this.contains(other)) {
+ return this
+ } else if (other.contains(this)) {
+ return other
+ }
+ const start = Position.Min(other.start, this._start)
+ const end = Position.Max(other.end, this.end)
+ return new Range(start, end)
+ }
+
+ get isEmpty () {
+ return this._start.isEqual(this._end)
+ }
+
+ get isSingleLine () {
+ return this._start.line === this._end.line
+ }
+
+ with (startOrChange, end = this.end) {
+ if (startOrChange === null || end === null) {
+ throw new Error()
+ }
+
+ let start
+ if (!startOrChange) {
+ start = this.start
+ } else if (Position.isPosition(startOrChange)) {
+ start = startOrChange
+ } else {
+ start = startOrChange.start || this.start
+ end = startOrChange.end || this.end
+ }
+
+ if (start.isEqual(this._start) && end.isEqual(this.end)) {
+ return this
+ }
+ return new Range(start, end)
+ }
+
+ toJSON () {
+ return [this.start, this.end]
+ }
+}
+
+export class Selection extends Range {
+ static isSelection (thing) {
+ if (thing instanceof Selection) {
+ return true
+ }
+ if (!thing) {
+ return false
+ }
+ return Range.isRange(thing) &&
+ Position.isPosition(thing.anchor) &&
+ Position.isPosition(thing.active) &&
+ typeof thing.isReversed === 'boolean'
+ }
+
+ get anchor () {
+ return this._anchor
+ }
+
+ get active () {
+ return this._active
+ }
+
+ constructor (anchorLineOrAnchor, anchorColumnOrActive, activeLine, activeColumn) {
+ let anchor
+ let active
+
+ if (typeof anchorLineOrAnchor === 'number' && typeof anchorColumnOrActive === 'number' && typeof activeLine === 'number' && typeof activeColumn === 'number') {
+ anchor = new Position(anchorLineOrAnchor, anchorColumnOrActive)
+ active = new Position(activeLine, activeColumn)
+ } else if (anchorLineOrAnchor instanceof Position && anchorColumnOrActive instanceof Position) {
+ anchor = anchorLineOrAnchor
+ active = anchorColumnOrActive
+ }
+
+ if (!anchor || !active) {
+ throw new Error('Invalid arguments')
+ }
+
+ super(anchor, active)
+
+ this._anchor = anchor
+ this._active = active
+ }
+
+ get isReversed () {
+ return this._anchor === this._end
+ }
+
+ toJSON () {
+ return {
+ start: this.start,
+ end: this.end,
+ active: this.active,
+ anchor: this.anchor
+ }
+ }
+}
+
+export const EndOfLine = {
+ LF: 1,
+ CRLF: 2
+}
+
+export class TextEdit {
+ static isTextEdit (thing) {
+ if (thing instanceof TextEdit) {
+ return true
+ }
+ if (!thing) {
+ return false
+ }
+ return Range.isRange(thing) && typeof thing.newText === 'string'
+ }
+
+ static replace (range, newText) {
+ return new TextEdit(range, newText)
+ }
+
+ static insert (position, newText) {
+ return TextEdit.replace(new Range(position, position), newText)
+ }
+
+ static delete (range) {
+ return TextEdit.replace(range, '')
+ }
+
+ static setEndOfLine (eol) {
+ const ret = new TextEdit(new Range(new Position(0, 0), new Position(0, 0)), '')
+ ret.newEol = eol
+ return ret
+ }
+
+ get range () {
+ return this._range
+ }
+
+ set range (value) {
+ if (value && !Range.isRange(value)) {
+ throw new Error('range')
+ }
+ this._range = value
+ }
+
+ get newText () {
+ return this._newText || ''
+ }
+
+ set newText (value) {
+ if (value && typeof value !== 'string') {
+ throw new Error('newText')
+ }
+ this._newText = value
+ }
+
+ get newEol () {
+ return this._newEol
+ }
+
+ set newEol (value) {
+ if (value && typeof value !== 'number') {
+ throw new Error('newEol')
+ }
+ this._newEol = value
+ }
+
+ constructor (range, newText) {
+ this.range = range
+ this._newText = newText
+ }
+
+ toJSON () {
+ return {
+ range: this.range,
+ newText: this.newText,
+ newEol: this._newEol
+ }
+ }
+}
+
+export class WorkspaceEdit {
+ constructor () {
+ this._edits = []
+ }
+
+ renameFile (from, to, options) {
+ this._edits.push({ _type: 1, from, to, options })
+ }
+
+ createFile (uri, options) {
+ this._edits.push({ _type: 1, from: undefined, to: uri, options })
+ }
+
+ deleteFile (uri, options) {
+ this._edits.push({ _type: 1, from: uri, to: undefined, options })
+ }
+
+ replace (uri, range, newText) {
+ this._edits.push({ _type: 2, uri, edit: new TextEdit(range, newText) })
+ }
+
+ insert (resource, position, newText) {
+ this.replace(resource, new Range(position, position), newText)
+ }
+
+ delete (resource, range) {
+ this.replace(resource, range, '')
+ }
+
+ has (uri) {
+ for (const edit of this._edits) {
+ if (edit._type === 2 && edit.uri.toString() === uri.toString()) {
+ return true
+ }
+ }
+ return false
+ }
+
+ set (uri, edits) {
+ if (!edits) {
+ // remove all text edits for `uri`
+ for (let i = 0; i < this._edits.length; i++) {
+ const element = this._edits[i]
+ if (element._type === 2 && element.uri.toString() === uri.toString()) {
+ this._edits[i] = undefined // will be coalesced down below
+ }
+ }
+ // this._edits = coalesce(this._edits); TODO
+ } else {
+ // append edit to the end
+ for (const edit of edits) {
+ if (edit) {
+ this._edits.push({ _type: 2, uri, edit })
+ }
+ }
+ }
+ }
+
+ get (uri) {
+ const res = []
+ for (const candidate of this._edits) {
+ if (candidate._type === 2 && candidate.uri.toString() === uri.toString()) {
+ res.push(candidate.edit)
+ }
+ }
+ return res
+ }
+
+ entries () {
+ const textEdits = new Map()
+ for (const candidate of this._edits) {
+ if (candidate._type === 2) {
+ let textEdit = textEdits.get(candidate.uri.toString())
+ if (!textEdit) {
+ textEdit = [candidate.uri, []]
+ textEdits.set(candidate.uri.toString(), textEdit)
+ }
+ textEdit[1].push(candidate.edit)
+ }
+ }
+ return values(textEdits)
+ }
+
+ _allEntries () {
+ const res = []
+ for (const edit of this._edits) {
+ if (edit._type === 1) {
+ res.push([edit.from, edit.to, edit.options])
+ } else {
+ res.push([edit.uri, [edit.edit]])
+ }
+ }
+ return res
+ }
+
+ get size () {
+ return this.entries().length
+ }
+
+ toJSON () {
+ return this.entries()
+ }
+}
+
+export const TextEditorRevealType = {
+ Default: 0,
+ InCenter: 1,
+ InCenterIfOutsideViewport: 2,
+ AtTop: 3
+}
+
+export const TextEditorSelectionChangeKind = {
+ Keyboard: 1,
+ Mouse: 2,
+ Command: 3
+}
+
+export class SnippetString {
+ static isSnippetString (thing) {
+ if (thing instanceof SnippetString) {
+ return true
+ }
+ if (!thing) {
+ return false
+ }
+ return typeof thing.value === 'string'
+ }
+
+ static _escape (value) {
+ return value.replace(/\$|}|\\/g, '\\$&')
+ }
+
+ constructor (value) {
+ this._tabstop = 1
+ this.value = value || ''
+ }
+
+ appendText (string) {
+ this.value += SnippetString._escape(string)
+ return this
+ }
+
+ appendTabstop (number = this._tabstop++) {
+ this.value += '$'
+ this.value += number
+ return this
+ }
+
+ appendPlaceholder (value, number = this._tabstop++) {
+ if (typeof value === 'function') {
+ const nested = new SnippetString()
+ nested._tabstop = this._tabstop
+ value(nested)
+ this._tabstop = nested._tabstop
+ value = nested.value
+ } else {
+ value = SnippetString._escape(value)
+ }
+
+ this.value += '${'
+ this.value += number
+ this.value += ':'
+ this.value += value
+ this.value += '}'
+
+ return this
+ }
+
+ appendVariable (name, defaultValue) {
+ if (typeof defaultValue === 'function') {
+ const nested = new SnippetString()
+ nested._tabstop = this._tabstop
+ defaultValue(nested)
+ this._tabstop = nested._tabstop
+ defaultValue = nested.value
+ } else if (typeof defaultValue === 'string') {
+ defaultValue = defaultValue.replace(/\$|}/g, '\\$&')
+ }
+
+ this.value += '${'
+ this.value += name
+ if (defaultValue) {
+ this.value += ':'
+ this.value += defaultValue
+ }
+ this.value += '}'
+
+ return this
+ }
+}
diff --git a/frontend/src/layouts/AdminLayout.vue b/frontend/src/layouts/AdminLayout.vue
new file mode 100644
index 00000000..40eae23f
--- /dev/null
+++ b/frontend/src/layouts/AdminLayout.vue
@@ -0,0 +1,454 @@
+
+q-layout.admin(view='hHh Lpr lff')
+ q-header.bg-black.text-white
+ .row.no-wrap
+ q-toolbar(style='height: 64px;', dark)
+ q-btn(dense, flat, to='/')
+ q-avatar(size='34px', square)
+ img(src='/_assets/logo-wikijs.svg')
+ q-toolbar-title.text-h6 Wiki.js
+ q-toolbar.gt-sm.justify-center(style='height: 64px;', dark)
+ .text-overline.text-uppercase.text-grey {{ t('admin.adminArea') }}
+ q-badge.q-ml-sm(
+ label='beta'
+ color='pink'
+ outline
+ )
+ q-toolbar(style='height: 64px;', dark)
+ q-space
+ transition(name='syncing')
+ q-spinner-tail(
+ v-show='commonStore.routerLoading'
+ color='accent'
+ size='24px'
+ )
+ q-btn.q-ml-md(flat, dense, icon='las la-times-circle', :label='t(`common.actions.exit`)' color='pink', to='/')
+ q-btn.q-ml-md(flat, dense, icon='las la-language', :label='commonStore.locale' color='grey-4')
+ q-menu.translucent-menu(auto-close, anchor='bottom right', self='top right')
+ q-list(separator, padding)
+ q-item(
+ v-for='lang of adminStore.locales'
+ :key='lang.code'
+ clickable
+ @click='commonStore.setLocale(lang.code)'
+ )
+ q-item-section(side)
+ q-avatar(rounded, :color='lang.code === commonStore.locale ? `secondary` : `primary`', text-color='white', size='sm')
+ .text-caption.text-uppercase: strong {{ lang.language }}
+ q-item-section
+ q-item-label {{ lang.nativeName }}
+ q-item-label(caption) {{ lang.name }}
+ account-menu
+ q-drawer.admin-sidebar(v-model='leftDrawerOpen', show-if-above, bordered)
+ q-scroll-area.admin-nav(
+ :thumb-style='thumbStyle'
+ :bar-style='barStyle'
+ )
+ q-list.text-white.q-pb-lg(padding, dense)
+ q-item.q-mb-sm
+ q-item-section
+ q-btn.acrylic-btn(
+ flat
+ color='pink'
+ icon='las la-heart'
+ :label='t(`admin.contribute.title`)'
+ no-caps
+ href='https://js.wiki/donate'
+ target='_blank'
+ type='a'
+ )
+ q-item(to='/_admin/dashboard', v-ripple, active-class='bg-primary text-white')
+ q-item-section(avatar)
+ q-icon(name='img:/_assets/icons/fluent-apps-tab.svg')
+ q-item-section {{ t('admin.dashboard.title') }}
+ q-item(to='/_admin/sites', v-ripple, active-class='bg-primary text-white', v-if='userStore.can(`manage:sites`)')
+ q-item-section(avatar)
+ q-icon(name='img:/_assets/icons/fluent-change-theme.svg')
+ q-item-section {{ t('admin.sites.title') }}
+ q-item-section(side)
+ q-badge(color='dark-3', :label='adminStore.sites.length')
+ template(v-if='siteSectionShown')
+ q-item-label.q-mt-sm(header).text-caption.text-blue-grey-4 {{ t('admin.nav.site') }}
+ q-item.q-mb-md
+ q-item-section
+ q-select(
+ dark
+ standout
+ dense
+ v-model='adminStore.currentSiteId'
+ :options='adminStore.sites'
+ option-value='id'
+ option-label='title'
+ emit-value
+ map-options
+ )
+ q-item(:to='`/_admin/` + adminStore.currentSiteId + `/general`', v-ripple, active-class='bg-primary text-white')
+ q-item-section(avatar)
+ q-icon(name='img:/_assets/icons/fluent-web.svg')
+ q-item-section {{ t('admin.general.title') }}
+ template(v-if='flagsStore.experimental')
+ q-item(:to='`/_admin/` + adminStore.currentSiteId + `/analytics`', v-ripple, active-class='bg-primary text-white', disabled)
+ q-item-section(avatar)
+ q-icon(name='img:/_assets/icons/fluent-bar-chart.svg')
+ q-item-section {{ t('admin.analytics.title') }}
+ q-item(:to='`/_admin/` + adminStore.currentSiteId + `/approvals`', v-ripple, active-class='bg-primary text-white', disabled)
+ q-item-section(avatar)
+ q-icon(name='img:/_assets/icons/fluent-inspection.svg')
+ q-item-section {{ t('admin.approval.title') }}
+ q-item(:to='`/_admin/` + adminStore.currentSiteId + `/comments`', v-ripple, active-class='bg-primary text-white', disabled)
+ q-item-section(avatar)
+ q-icon(name='img:/_assets/icons/fluent-comments.svg')
+ q-item-section {{ t('admin.comments.title') }}
+ q-item(:to='`/_admin/` + adminStore.currentSiteId + `/blocks`', v-ripple, active-class='bg-primary text-white', v-if='userStore.can(`manage:sites`)')
+ q-item-section(avatar)
+ q-icon(name='img:/_assets/icons/fluent-rfid-tag.svg')
+ q-item-section {{ t('admin.blocks.title') }}
+ q-item(:to='`/_admin/` + adminStore.currentSiteId + `/editors`', v-ripple, active-class='bg-primary text-white', v-if='userStore.can(`manage:sites`)')
+ q-item-section(avatar)
+ q-icon(name='img:/_assets/icons/fluent-cashbook.svg')
+ q-item-section {{ t('admin.editors.title') }}
+ q-item(:to='`/_admin/` + adminStore.currentSiteId + `/locale`', v-ripple, active-class='bg-primary text-white', v-if='userStore.can(`manage:sites`)')
+ q-item-section(avatar)
+ q-icon(name='img:/_assets/icons/fluent-language.svg')
+ q-item-section {{ t('admin.locale.title') }}
+ q-item(:to='`/_admin/` + adminStore.currentSiteId + `/login`', v-ripple, active-class='bg-primary text-white', v-if='userStore.can(`manage:sites`)')
+ q-item-section(avatar)
+ q-icon(name='img:/_assets/icons/fluent-bunch-of-keys.svg')
+ q-item-section {{ t('admin.login.title') }}
+ q-item(:to='`/_admin/` + adminStore.currentSiteId + `/navigation`', v-ripple, active-class='bg-primary text-white', disabled, v-if='flagsStore.experimental && (userStore.can(`manage:sites`) || userStore.can(`manage:navigation`))')
+ q-item-section(avatar)
+ q-icon(name='img:/_assets/icons/fluent-tree-structure.svg')
+ q-item-section {{ t('admin.navigation.title') }}
+ q-item(:to='`/_admin/` + adminStore.currentSiteId + `/storage`', v-ripple, active-class='bg-primary text-white', v-if='userStore.can(`manage:sites`)')
+ q-item-section(avatar)
+ q-icon(name='img:/_assets/icons/fluent-ssd.svg')
+ q-item-section {{ t('admin.storage.title') }}
+ q-item-section(side)
+ //- TODO: Reflect site storage status
+ status-light(:color='true ? `positive` : `warning`', :pulse='false')
+ q-item(:to='`/_admin/` + adminStore.currentSiteId + `/tags`', v-ripple, active-class='bg-primary text-white', disabled, v-if='flagsStore.experimental && (userStore.can(`manage:sites`))')
+ q-item-section(avatar)
+ q-icon(name='img:/_assets/icons/fluent-tag.svg')
+ q-item-section {{ t('admin.tags.title') }}
+ q-item(:to='`/_admin/` + adminStore.currentSiteId + `/theme`', v-ripple, active-class='bg-primary text-white', v-if='userStore.can(`manage:sites`) || userStore.can(`manage:theme`)')
+ q-item-section(avatar)
+ q-icon(name='img:/_assets/icons/fluent-paint-roller.svg')
+ q-item-section {{ t('admin.theme.title') }}
+ template(v-if='usersSectionShown')
+ q-item-label.q-mt-sm(header).text-caption.text-blue-grey-4 {{ t('admin.nav.users') }}
+ q-item(to='/_admin/auth', v-ripple, active-class='bg-primary text-white', v-if='userStore.can(`manage:system`)')
+ q-item-section(avatar)
+ q-icon(name='img:/_assets/icons/fluent-security-lock.svg')
+ q-item-section {{ t('admin.auth.title') }}
+ q-item(to='/_admin/groups', v-ripple, active-class='bg-primary text-white', v-if='userStore.can(`manage:groups`)')
+ q-item-section(avatar)
+ q-icon(name='img:/_assets/icons/fluent-people.svg')
+ q-item-section {{ t('admin.groups.title') }}
+ q-item-section(side)
+ q-badge(color='dark-3', :label='adminStore.info.groupsTotal')
+ q-item(to='/_admin/users', v-ripple, active-class='bg-primary text-white', v-if='userStore.can(`manage:users`)')
+ q-item-section(avatar)
+ q-icon(name='img:/_assets/icons/fluent-account.svg')
+ q-item-section {{ t('admin.users.title') }}
+ q-item-section(side)
+ q-badge(color='dark-3', :label='adminStore.info.usersTotal')
+ template(v-if='userStore.can(`manage:system`)')
+ q-item-label.q-mt-sm(header).text-caption.text-blue-grey-4 {{ t('admin.nav.system') }}
+ q-item(to='/_admin/api', v-ripple, active-class='bg-primary text-white')
+ q-item-section(avatar)
+ q-icon(name='img:/_assets/icons/fluent-rest-api.svg')
+ q-item-section {{ t('admin.api.title') }}
+ q-item-section(side)
+ status-light(:color='adminStore.info.isApiEnabled ? `positive` : `negative`')
+ q-item(to='/_admin/audit', v-ripple, active-class='bg-primary text-white', disabled, v-if='flagsStore.experimental')
+ q-item-section(avatar)
+ q-icon(name='img:/_assets/icons/fluent-event-log.svg')
+ q-item-section {{ t('admin.audit.title') }}
+ q-item(to='/_admin/extensions', v-ripple, active-class='bg-primary text-white')
+ q-item-section(avatar)
+ q-icon(name='img:/_assets/icons/fluent-module.svg')
+ q-item-section {{ t('admin.extensions.title') }}
+ q-item(to='/_admin/icons', v-ripple, active-class='bg-primary text-white')
+ q-item-section(avatar)
+ q-icon(name='img:/_assets/icons/fluent-spring.svg')
+ q-item-section {{ t('admin.icons.title') }}
+ q-item(to='/_admin/instances', v-ripple, active-class='bg-primary text-white')
+ q-item-section(avatar)
+ q-icon(name='img:/_assets/icons/fluent-network.svg')
+ q-item-section {{ t('admin.instances.title') }}
+ q-item(to='/_admin/mail', v-ripple, active-class='bg-primary text-white')
+ q-item-section(avatar)
+ q-icon(name='img:/_assets/icons/fluent-message-settings.svg')
+ q-item-section {{ t('admin.mail.title') }}
+ q-item-section(side)
+ status-light(:color='adminStore.info.isMailConfigured ? `positive` : `warning`', :pulse='!adminStore.info.isMailConfigured')
+ q-item(to='/_admin/metrics', v-ripple, active-class='bg-primary text-white')
+ q-item-section(avatar)
+ q-icon(name='img:/_assets/icons/fluent-graph.svg')
+ q-item-section {{ t('admin.metrics.title') }}
+ q-item-section(side)
+ status-light(:color='adminStore.info.isMetricsEnabled ? `positive` : `negative`')
+ q-item(to='/_admin/rendering', v-ripple, active-class='bg-primary text-white', v-if='flagsStore.experimental')
+ q-item-section(avatar)
+ q-icon(name='img:/_assets/icons/fluent-rich-text-converter.svg')
+ q-item-section {{ t('admin.rendering.title') }}
+ q-item(to='/_admin/scheduler', v-ripple, active-class='bg-primary text-white')
+ q-item-section(avatar)
+ q-icon(name='img:/_assets/icons/fluent-bot.svg')
+ q-item-section {{ t('admin.scheduler.title') }}
+ q-item-section(side)
+ status-light(:color='adminStore.info.isSchedulerHealthy ? `positive` : `warning`', :pulse='!adminStore.info.isSchedulerHealthy')
+ q-item(to='/_admin/search', v-ripple, active-class='bg-primary text-white')
+ q-item-section(avatar)
+ q-icon(name='img:/_assets/icons/fluent-find-and-replace.svg')
+ q-item-section {{ t('admin.search.title') }}
+ q-item(to='/_admin/security', v-ripple, active-class='bg-primary text-white')
+ q-item-section(avatar)
+ q-icon(name='img:/_assets/icons/fluent-protect.svg')
+ q-item-section {{ t('admin.security.title') }}
+ q-item(to='/_admin/ssl', v-ripple, active-class='bg-primary text-white', disabled, v-if='flagsStore.experimental')
+ q-item-section(avatar)
+ q-icon(name='img:/_assets/icons/fluent-security-ssl.svg')
+ q-item-section {{ t('admin.ssl.title') }}
+ q-item(to='/_admin/system', v-ripple, active-class='bg-primary text-white')
+ q-item-section(avatar)
+ q-icon(name='img:/_assets/icons/fluent-processor.svg')
+ q-item-section {{ t('admin.system.title') }}
+ q-item-section(side)
+ status-light(:color='adminStore.isVersionLatest ? `positive` : `warning`')
+ q-item(to='/_admin/terminal', v-ripple, active-class='bg-primary text-white')
+ q-item-section(avatar)
+ q-icon(name='img:/_assets/icons/fluent-linux-terminal.svg')
+ q-item-section {{ t('admin.terminal.title') }}
+ q-item(to='/_admin/utilities', v-ripple, active-class='bg-primary text-white')
+ q-item-section(avatar)
+ q-icon(name='img:/_assets/icons/fluent-swiss-army-knife.svg')
+ q-item-section {{ t('admin.utilities.title') }}
+ q-item(to='/_admin/webhooks', v-ripple, active-class='bg-primary text-white')
+ q-item-section(avatar)
+ q-icon(name='img:/_assets/icons/fluent-lightning-bolt.svg')
+ q-item-section {{ t('admin.webhooks.title') }}
+ q-item(to='/_admin/flags', v-ripple, active-class='bg-primary text-white')
+ q-item-section(avatar)
+ q-icon(name='img:/_assets/icons/fluent-windsock.svg')
+ q-item-section {{ t('admin.dev.flags.title') }}
+ q-page-container.admin-container
+ router-view(v-slot='{ Component }')
+ component(:is='Component')
+ q-dialog.admin-overlay(
+ v-model='overlayIsShown'
+ persistent
+ full-width
+ full-height
+ no-shake
+ transition-show='jump-up'
+ transition-hide='jump-down'
+ )
+ component(:is='overlays[adminStore.overlay]')
+ footer-nav.admin-footer(generic)
+
+
+
+
+
diff --git a/frontend/src/layouts/AuthLayout.vue b/frontend/src/layouts/AuthLayout.vue
new file mode 100644
index 00000000..4cb6cf4d
--- /dev/null
+++ b/frontend/src/layouts/AuthLayout.vue
@@ -0,0 +1,13 @@
+
+q-layout(view='hHh lpr lff')
+ q-page-container
+ router-view
+
+
+
+
+
diff --git a/frontend/src/layouts/MainLayout.vue b/frontend/src/layouts/MainLayout.vue
new file mode 100644
index 00000000..ecb97a5b
--- /dev/null
+++ b/frontend/src/layouts/MainLayout.vue
@@ -0,0 +1,275 @@
+
+q-layout(view='hHh Lpr lff')
+ header-nav
+ q-drawer.bg-sidebar(
+ :model-value='isSidebarShown'
+ :show-if-above='siteStore.theme.sidebarPosition !== `off`'
+ :width='isSidebarMini ? 56 : 255'
+ :side='siteStore.theme.sidebarPosition === `right` ? `right` : `left`'
+ )
+ .sidebar-mini.column.items-stretch(v-if='isSidebarMini')
+ q-btn.q-py-md(
+ flat
+ icon='las la-globe'
+ color='white'
+ aria-label='Switch Locale'
+ )
+ locale-selector-menu(anchor='top right' self='top left')
+ q-tooltip(anchor='center right' self='center left') Switch Locale
+ q-btn.q-py-md(
+ flat
+ icon='las la-sitemap'
+ color='white'
+ aria-label='Browse'
+ @click='notImplemented'
+ )
+ q-tooltip(anchor='center right' self='center left') Browse
+ q-separator.q-my-sm(inset, dark)
+ q-btn.q-py-md(
+ flat
+ icon='las la-bookmark'
+ color='white'
+ aria-label='Bookmarks'
+ @click='notImplemented'
+ )
+ q-tooltip(anchor='center right' self='center left') Bookmarks
+ q-space
+ q-btn.q-py-xs(
+ flat
+ icon='las la-dharmachakra'
+ color='white'
+ aria-label='Edit Nav'
+ size='sm'
+ )
+ q-menu(
+ ref='navEditMenuMini'
+ anchor='top right'
+ self='bottom left'
+ )
+ nav-edit-menu(
+ :menu-hide-handler='navEditMenuMini.hide'
+ :update-position-handler='navEditMenuMini.updatePosition'
+ )
+ q-tooltip(anchor='center right' self='center left') Edit Nav
+ template(v-else)
+ .sidebar-actions.flex.items-stretch
+ q-btn.q-px-sm.col(
+ flat
+ dense
+ icon='las la-globe'
+ color='blue-7'
+ text-color='custom-color'
+ :label='commonStore.locale'
+ :aria-label='commonStore.locale'
+ size='sm'
+ )
+ locale-selector-menu(:offset='[-5, 5]')
+ q-separator(vertical)
+ q-btn.q-px-sm.col(
+ flat
+ dense
+ icon='las la-sitemap'
+ color='blue-7'
+ text-color='custom-color'
+ label='Browse'
+ aria-label='Browse'
+ size='sm'
+ @click='notImplemented'
+ )
+ nav-sidebar
+ q-bar.sidebar-footerbtns.text-white(
+ v-if='userStore.authenticated'
+ dense
+ )
+ q-btn.col(
+ icon='las la-dharmachakra'
+ label='Edit Nav'
+ flat
+ )
+ q-menu(
+ ref='navEditMenu'
+ anchor='top left'
+ self='bottom left'
+ :offset='[0, 10]'
+ )
+ nav-edit-menu(
+ :menu-hide-handler='navEditMenu.hide'
+ :update-position-handler='navEditMenu.updatePosition'
+ )
+ q-separator(vertical)
+ q-btn.col(
+ icon='las la-bookmark'
+ label='Bookmarks'
+ flat
+ @click='notImplemented'
+ )
+ q-page-container
+ router-view
+ q-page-scroller(
+ position='bottom-right'
+ :scroll-offset='150'
+ :offset='[15, 15]'
+ )
+ q-btn(
+ icon='las la-arrow-up'
+ color='primary'
+ round
+ size='md'
+ )
+ main-overlay-dialog
+ footer-nav(v-if='!editorStore.isActive')
+
+
+
+
+
diff --git a/frontend/src/layouts/ProfileLayout.vue b/frontend/src/layouts/ProfileLayout.vue
new file mode 100644
index 00000000..ef3a726f
--- /dev/null
+++ b/frontend/src/layouts/ProfileLayout.vue
@@ -0,0 +1,330 @@
+
+q-layout(view='hHh Lpr lff')
+ header-nav
+ q-page-container.layout-profile
+ .layout-profile-card
+ .layout-profile-sd
+ q-list
+ template(v-for='navItem of sidenav' :key='navItem.key')
+ q-item(
+ v-if='!navItem.disabled || flagsStore.experimental'
+ clickable
+ :to='`/_profile/` + navItem.key'
+ active-class='is-active'
+ :disabled='navItem.disabled'
+ v-ripple
+ )
+ q-item-section(side)
+ q-icon(:name='navItem.icon')
+ q-item-section
+ q-item-label {{navItem.label}}
+ q-separator.q-my-sm(inset)
+ q-item(
+ clickable
+ v-ripple
+ :to='`/_user/` + userStore.id'
+ )
+ q-item-section(side)
+ q-icon(name='las la-id-card')
+ q-item-section
+ q-item-label {{ t('profile.viewPublicProfile') }}
+ q-separator.q-my-sm(inset)
+ q-item(
+ clickable
+ v-ripple
+ @click='userStore.logout()'
+ )
+ q-item-section(side)
+ q-icon(name='las la-sign-out-alt', color='negative')
+ q-item-section
+ q-item-label.text-negative {{ t('common.header.logout') }}
+ router-view
+ main-overlay-dialog
+ footer-nav
+
+
+
+
+
diff --git a/frontend/src/main.js b/frontend/src/main.js
new file mode 100644
index 00000000..dfdb4750
--- /dev/null
+++ b/frontend/src/main.js
@@ -0,0 +1,80 @@
+import { createApp } from 'vue'
+import { Quasar, Dialog, Loading, LoadingBar, Meta, Notify } from 'quasar'
+import { initializeRouter } from './router'
+import { initializeStore } from './stores'
+import { initializeApi } from './boot/api'
+import { initializeComponents } from './boot/components'
+import { initializeEventBus } from './boot/eventbus'
+import { initializeExternals } from './boot/externals'
+import { initializeI18n } from './boot/i18n'
+import quasarIconSet from 'quasar/icon-set/mdi-v7'
+
+// Import icon libraries
+import '@quasar/extras/roboto-font/roboto-font.css'
+import '@mdi/font/css/materialdesignicons.css'
+import '@quasar/extras/line-awesome/line-awesome.css'
+
+// Import Quasar css
+import 'quasar/src/css/index.sass'
+import './css/app.scss'
+
+import RootApp from './App.vue'
+
+const router = initializeRouter()
+const store = initializeStore(router)
+
+const app = createApp(RootApp)
+app.use(store)
+app.use(router)
+
+initializeApi(store)
+initializeComponents(app)
+initializeEventBus()
+initializeExternals(router, store)
+initializeI18n(app, store)
+
+app.use(Quasar, {
+ plugins: {
+ Dialog,
+ Loading,
+ LoadingBar,
+ Meta,
+ Notify
+ },
+ iconSet: quasarIconSet,
+ config: {
+ brand: {
+ header: '#000',
+ sidebar: '#1976D2'
+ },
+ loading: {
+ delay: 500,
+ spinner: 'QSpinnerGrid',
+ spinnerSize: 32,
+ spinnerColor: 'white',
+ customClass: 'loading-darker'
+ },
+ loadingBar: {
+ color: 'primary',
+ size: '1px',
+ position: 'top'
+ },
+ notify: {
+ position: 'top',
+ progress: true,
+ color: 'green',
+ icon: 'las la-check',
+ actions: [
+ {
+ icon: 'las la-times',
+ color: 'white',
+ size: 'sm',
+ round: true,
+ handler: () => {}
+ }
+ ]
+ }
+ }
+})
+
+app.mount('#app')
diff --git a/frontend/src/pages/AdminAnalytics.vue b/frontend/src/pages/AdminAnalytics.vue
new file mode 100644
index 00000000..337960a6
--- /dev/null
+++ b/frontend/src/pages/AdminAnalytics.vue
@@ -0,0 +1,181 @@
+
+ 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" : ""'
+ )
+
+
+
+
diff --git a/frontend/src/pages/AdminApi.vue b/frontend/src/pages/AdminApi.vue
new file mode 100644
index 00000000..e77189f2
--- /dev/null
+++ b/frontend/src/pages/AdminApi.vue
@@ -0,0 +1,246 @@
+
+q-page.admin-api
+ .row.q-pa-md.items-center
+ .col-auto
+ img.admin-icon.animated.fadeInLeft(src='/_assets/icons/fluent-rest-api-animated.svg')
+ .col.q-pl-md
+ .text-h5.text-primary.animated.fadeInLeft {{ t('admin.api.title') }}
+ .text-subtitle1.text-grey.animated.fadeInLeft.wait-p2s {{ t('admin.api.subtitle') }}
+ .col
+ .flex.items-center
+ template(v-if='state.enabled')
+ q-spinner-rings.q-mr-sm(color='green', size='md')
+ .text-caption.text-green {{t('admin.api.enabled')}}
+ template(v-else)
+ q-spinner-rings.q-mr-sm(color='red', size='md')
+ .text-caption.text-red {{t('admin.api.disabled')}}
+ .col-auto
+ q-btn.q-mr-sm.q-ml-md.acrylic-btn(
+ icon='las la-question-circle'
+ flat
+ color='grey'
+ :aria-label='t(`common.actions.viewDocs`)'
+ :href='siteStore.docsBase + `/dev/api`'
+ target='_blank'
+ type='a'
+ )
+ q-tooltip {{ t(`common.actions.viewDocs`) }}
+ q-btn.acrylic-btn.q-mr-sm(
+ icon='las la-redo-alt'
+ flat
+ color='secondary'
+ :loading='state.loading > 0'
+ :aria-label='t(`common.actions.refresh`)'
+ @click='refresh'
+ )
+ q-tooltip {{ t(`common.actions.refresh`) }}
+ q-btn.q-mr-sm(
+ unelevated
+ icon='las la-power-off'
+ :label='!state.enabled ? t(`admin.api.enableButton`) : t(`admin.api.disableButton`)'
+ :color='!state.enabled ? `positive` : `negative`'
+ @click='globalSwitch'
+ :loading='state.isToggleLoading'
+ :disabled='state.loading > 0'
+ )
+ q-btn(
+ unelevated
+ icon='las la-plus'
+ :label='t(`admin.api.newKeyButton`)'
+ color='primary'
+ @click='newKey'
+ :disabled='state.loading > 0'
+ )
+ q-separator(inset)
+ .row.q-pa-md.q-col-gutter-md
+ .col-12(v-if='state.keys.length < 1')
+ q-card.rounded-borders(
+ flat
+ :class='$q.dark.isActive ? `bg-dark-5 text-white` : `bg-grey-3 text-dark`'
+ )
+ q-card-section.items-center(horizontal)
+ q-card-section.col-auto.q-pr-none
+ q-icon(name='las la-info-circle', size='sm')
+ q-card-section.text-caption {{ t('admin.api.none') }}
+ .col-12(v-else)
+ q-card
+ q-list(separator)
+ q-item(v-for='key of state.keys', :key='key.id')
+ q-item-section(side)
+ q-icon(name='las la-key', :color='key.isRevoked ? `negative` : `positive`')
+ q-item-section
+ q-item-label {{key.name}}
+ q-item-label(caption) Ending in {{key.keyShort}}
+ q-item-label(caption) Created On: #[strong {{DateTime.fromISO(key.createdAt).toFormat('fff')}}]
+ q-item-label(caption) Expiration: #[strong(:style='key.isRevoked ? `text-decoration: line-through;` : ``') {{DateTime.fromISO(key.expiration).toFormat('fff')}}]
+ q-item-section(
+ v-if='key.isRevoked'
+ side
+ style='flex-direction: row; align-items: center;'
+ )
+ q-icon.q-mr-sm(
+ color='negative'
+ size='xs'
+ name='las la-exclamation-triangle'
+ )
+ .text-caption.text-negative {{t('admin.api.revoked')}}
+ q-tooltip(anchor='center left', self='center right') {{t('admin.api.revokedHint')}}
+ q-separator.q-ml-md(vertical)
+ q-item-section(side, style='flex-direction: row; align-items: center;')
+ q-btn.acrylic-btn(
+ :color='key.isRevoked ? `gray` : `red`'
+ icon='las la-ban'
+ flat
+ @click='revoke(key)'
+ :disable='key.isRevoked'
+ )
+
+
+
+
+
diff --git a/frontend/src/pages/AdminAuth.vue b/frontend/src/pages/AdminAuth.vue
new file mode 100644
index 00000000..f7ea8db7
--- /dev/null
+++ b/frontend/src/pages/AdminAuth.vue
@@ -0,0 +1,671 @@
+
+q-page.admin-mail
+ .row.q-pa-md.items-center
+ .col-auto
+ img.admin-icon.animated.fadeInLeft(src='/_assets/icons/fluent-security-lock.svg')
+ .col.q-pl-md
+ .text-h5.text-primary.animated.fadeInLeft {{ t('admin.auth.title') }}
+ .text-subtitle1.text-grey.animated.fadeInLeft.wait-p2s {{ t('admin.auth.subtitle') }}
+ .col-auto
+ q-btn.q-mr-sm.acrylic-btn(
+ icon='las la-question-circle'
+ flat
+ color='grey'
+ :aria-label='t(`common.actions.viewDocs`)'
+ :href='siteStore.docsBase + `/admin/auth`'
+ target='_blank'
+ type='a'
+ )
+ q-tooltip {{ t(`common.actions.viewDocs`) }}
+ q-btn(
+ unelevated
+ icon='mdi-check'
+ :label='t(`common.actions.apply`)'
+ color='secondary'
+ @click='save'
+ :loading='state.loading > 0'
+ )
+ q-separator(inset)
+ .row.q-pa-md.q-col-gutter-md
+ .col-12.col-lg-auto
+ q-card.rounded-borders.bg-dark
+ q-list(
+ style='min-width: 350px;'
+ padding
+ dark
+ )
+ q-item(
+ v-for='str of state.activeStrategies'
+ :key='str.id'
+ active-class='bg-primary text-white'
+ :active='state.selectedStrategy === str.id'
+ @click='state.selectedStrategy = str.id'
+ clickable
+ )
+ q-item-section(side)
+ q-icon(:name='`img:` + str.strategy.icon')
+ q-item-section
+ q-item-label {{ str.displayName }}
+ q-item-label(caption) {{ str.strategy.title }}
+ q-item-section(side)
+ status-light(:color='str.isEnabled ? `positive` : `negative`', :pulse='str.isEnabled')
+ q-btn.q-mt-sm.full-width(
+ color='primary'
+ icon='las la-plus'
+ :label='t(`admin.auth.addStrategy`)'
+ v-if='flagsStore.experimental'
+ )
+ q-menu(auto-close, fit, max-width='300px')
+ q-list(separator)
+ q-item(
+ v-for='str of availableStrategies'
+ :key='str.key'
+ clickable
+ @click='addStrategy(str)'
+ )
+ q-item-section(avatar)
+ q-avatar(
+ rounded
+ color='dark'
+ text-color='white'
+ )
+ q-icon(
+ :name='`img:` + str.icon'
+ )
+ q-item-section
+ q-item-label: strong {{ str.title }}
+ q-item-label(caption, lines='2') {{str.description}}
+ .col
+ q-card.q-pb-sm
+ q-card-section
+ .text-subtitle1 {{ t('admin.auth.info') }}
+ q-item
+ blueprint-icon(icon='information')
+ q-item-section
+ q-item-label {{ t(`admin.auth.infoName`) }}
+ q-item-label(caption) {{ t(`admin.auth.infoNameHint`) }}
+ q-item-section
+ q-input(
+ outlined
+ v-model='state.strategy.displayName'
+ dense
+ hide-bottom-space
+ :aria-label='t(`admin.auth.infoName`)'
+ )
+ q-separator.q-my-sm(inset)
+ q-item(tag='label')
+ blueprint-icon(icon='shutdown')
+ q-item-section
+ q-item-label {{ t(`admin.auth.enabled`) }}
+ q-item-label(caption) {{ t(`admin.auth.enabledHint`) }}
+ q-item-label.text-deep-orange(v-if='state.strategy.strategy.key === `local`', caption) {{ t(`admin.auth.enabledForced`) }}
+ q-item-section(avatar)
+ q-toggle(
+ v-model='state.strategy.isEnabled'
+ :disable='state.strategy.strategy.key === `local`'
+ color='primary'
+ checked-icon='las la-check'
+ unchecked-icon='las la-times'
+ :aria-label='t(`admin.auth.enabled`)'
+ )
+ q-separator.q-my-sm(inset)
+ q-item(tag='label')
+ blueprint-icon(icon='register')
+ q-item-section
+ q-item-label {{ t(`admin.auth.registration`) }}
+ q-item-label(caption) {{ state.strategy.strategy.key === `local` ? t(`admin.auth.registrationLocalHint`) : t(`admin.auth.registrationHint`) }}
+ q-item-section(avatar)
+ q-toggle(
+ v-model='state.strategy.registration'
+ color='primary'
+ checked-icon='las la-check'
+ unchecked-icon='las la-times'
+ :aria-label='t(`admin.auth.registration`)'
+ )
+ template(v-if='state.strategy.registration')
+ q-separator.q-my-sm(inset)
+ q-item
+ blueprint-icon(icon='team')
+ q-item-section
+ q-item-label {{ t(`admin.auth.autoEnrollGroups`) }}
+ q-item-label(caption) {{ t(`admin.auth.autoEnrollGroupsHint`) }}
+ q-item-section
+ q-select(
+ outlined
+ :options='state.groups'
+ v-model='state.strategy.autoEnrollGroups'
+ multiple
+ map-options
+ emit-value
+ option-value='id'
+ option-label='name'
+ options-dense
+ dense
+ hide-bottom-space
+ :aria-label='t(`admin.users.groups`)'
+ :loading='state.loadingGroups'
+ )
+ template(#selected)
+ .text-caption(v-if='state.strategy.autoEnrollGroups?.length > 1')
+ i18n-t(keypath='admin.users.groupsSelected')
+ template(#count)
+ strong {{ state.strategy.autoEnrollGroups?.length }}
+ .text-caption(v-else-if='state.strategy.autoEnrollGroups?.length === 1')
+ i18n-t(keypath='admin.users.groupSelected')
+ template(#group)
+ strong {{ selectedGroupName }}
+ span(v-else)
+ template(#option='{ itemProps, opt, selected, toggleOption }')
+ q-item(
+ v-bind='itemProps'
+ )
+ q-item-section(side)
+ q-checkbox(
+ size='sm'
+ :model-value='selected'
+ @update:model-value='toggleOption(opt)'
+ )
+ q-item-section
+ q-item-label {{opt.name}}
+
+ q-separator.q-my-sm(inset)
+ q-item
+ blueprint-icon(icon='private')
+ q-item-section
+ q-item-label {{ t(`admin.auth.allowedEmailRegex`) }}
+ q-item-label(caption) {{ t(`admin.auth.allowedEmailRegexHint`) }}
+ q-item-section
+ q-input(
+ outlined
+ v-model='state.strategy.allowedEmailRegex'
+ dense
+ hide-bottom-space
+ :aria-label='t(`admin.auth.allowedEmailRegex`)'
+ prefix='/'
+ suffix='/'
+ )
+
+ //- -----------------------
+ //- Configuration
+ //- -----------------------
+ q-card.q-pb-sm.q-mt-md
+ q-card-section
+ .text-subtitle1 {{ t('admin.auth.strategyConfiguration') }}
+ q-banner.q-mt-md(
+ v-if='!state.strategy.config || Object.keys(state.strategy.config).length < 1'
+ rounded
+ :class='$q.dark.isActive ? `bg-dark-4 text-grey-5` : `bg-grey-2 text-grey-7`'
+ ): em {{ t('admin.auth.noConfigOption') }}
+ template(
+ v-for='(cfg, cfgKey, idx) in state.strategy.config'
+ )
+ template(
+ v-if='configIfCheck(cfg.if)'
+ )
+ q-separator.q-my-sm(inset, v-if='idx > 0')
+ q-item(v-if='cfg.type === `boolean`', tag='label')
+ blueprint-icon(:icon='cfg.icon', :hue-rotate='cfg.readOnly ? -45 : 0')
+ q-item-section
+ q-item-label {{ cfg.title }}
+ q-item-label(caption) {{ cfg.hint }}
+ q-item-section(avatar)
+ q-toggle(
+ v-model='cfg.value'
+ color='primary'
+ checked-icon='las la-check'
+ unchecked-icon='las la-times'
+ :aria-label='cfg.title'
+ :disable='cfg.readOnly'
+ )
+ q-item(v-else)
+ blueprint-icon(:icon='cfg.icon', :hue-rotate='cfg.readOnly ? -45 : 0')
+ q-item-section
+ q-item-label {{ cfg.title }}
+ q-item-label(caption) {{ cfg.hint }}
+ q-item-section(
+ :style='cfg.type === `number` ? `flex: 0 0 150px;` : ``'
+ :class='{ "col-auto": cfg.enum && cfg.enumDisplay === `buttons` }'
+ )
+ q-btn-toggle(
+ v-if='cfg.enum && cfg.enumDisplay === `buttons`'
+ v-model='cfg.value'
+ push
+ glossy
+ no-caps
+ toggle-color='primary'
+ :options='cfg.enum'
+ :disable='cfg.readOnly'
+ )
+ q-select(
+ v-else-if='cfg.enum'
+ outlined
+ v-model='cfg.value'
+ :options='cfg.enum'
+ emit-value
+ map-options
+ dense
+ options-dense
+ :aria-label='cfg.title'
+ :disable='cfg.readOnly'
+ )
+ q-input(
+ v-else
+ outlined
+ v-model='cfg.value'
+ dense
+ :type='cfg.multiline ? `textarea` : (cfg.sensitive ? `password` : `input`)'
+ :aria-label='cfg.title'
+ :disable='cfg.readOnly'
+ )
+
+ //- -----------------------
+ //- References
+ //- -----------------------
+ q-card.q-pb-sm.q-mt-md(v-if='strategyRefs.length > 0')
+ q-card-section
+ .text-subtitle1 {{ t('admin.auth.configReference') }}
+ q-item(v-for='strRef of strategyRefs', :key='strRef.key')
+ blueprint-icon(:icon='strRef.icon', :hue-rotate='-45')
+ q-item-section
+ q-item-label {{ strRef.title }}
+ q-item-label(caption) {{ strRef.hint }}
+ q-item-section
+ q-input(
+ outlined
+ v-model='strRef.value'
+ dense
+ :aria-label='strRef.title'
+ readonly
+ )
+ //- -----------------------
+ //- Infobox
+ //- -----------------------
+ q-card.q-mt-md
+ q-card-section.text-center
+ q-img.rounded-borders(
+ :src='state.strategy.strategy.logo'
+ fit='contain'
+ no-spinner
+ style='height: 100px; max-width: 300px;'
+ )
+ .text-subtitle2.q-mt-sm {{ state.strategy.strategy.title }}
+ .text-caption.q-mt-sm {{ state.strategy.strategy.description }}
+ .text-caption.q-mt-sm: strong {{ state.strategy.strategy.vendor }}
+ .text-caption: a(:href='state.strategy.strategy.website', target='_blank', rel='noreferrer') {{state.strategy.strategy.website}}
+
+ .flex.q-mt-md
+ .text-caption.text-grey ID: {{ state.strategy.id }}
+ q-space
+ q-btn.acrylic-btn(
+ icon='las la-trash-alt'
+ flat
+ color='negative'
+ :disable='state.strategy.strategy.key === `local`'
+ label='Delete Strategy'
+ @click='deleteStrategy(state.strategy.id)'
+ )
+
+
+
diff --git a/frontend/src/pages/AdminBlocks.vue b/frontend/src/pages/AdminBlocks.vue
new file mode 100644
index 00000000..64c04678
--- /dev/null
+++ b/frontend/src/pages/AdminBlocks.vue
@@ -0,0 +1,236 @@
+
+q-page.admin-flags
+ .row.q-pa-md.items-center
+ .col-auto
+ img.admin-icon.animated.fadeInLeft(src='/_assets/icons/fluent-rfid-tag.svg')
+ .col.q-pl-md
+ .text-h5.text-primary.animated.fadeInLeft {{ t('admin.blocks.title') }}
+ .text-subtitle1.text-grey.animated.fadeInLeft.wait-p2s {{ t('admin.blocks.subtitle') }}
+ .col-auto.flex
+ template(v-if='flagsStore.experimental')
+ q-btn.q-mr-sm.acrylic-btn(
+ unelevated
+ icon='las la-plus'
+ :label='t(`admin.blocks.add`)'
+ color='primary'
+ @click='addBlock'
+ )
+ q-separator.q-mr-sm(vertical)
+ q-btn.q-mr-sm.acrylic-btn(
+ icon='las la-question-circle'
+ flat
+ color='grey'
+ :aria-label='t(`common.actions.viewDocs`)'
+ :href='siteStore.docsBase + `/admin/editors`'
+ target='_blank'
+ type='a'
+ )
+ q-tooltip {{ t(`common.actions.viewDocs`) }}
+ q-btn.q-mr-sm.acrylic-btn(
+ icon='las la-redo-alt'
+ flat
+ color='secondary'
+ :loading='state.loading > 0'
+ :aria-label='t(`common.actions.refresh`)'
+ @click='refresh'
+ )
+ q-tooltip {{ t(`common.actions.refresh`) }}
+ q-btn(
+ unelevated
+ icon='mdi-check'
+ :label='t(`common.actions.apply`)'
+ color='secondary'
+ @click='save'
+ :disabled='state.loading > 0'
+ )
+ q-separator(inset)
+ .q-pa-md.q-gutter-md
+ q-card
+ q-list(separator)
+ q-item(v-for='block of state.blocks', :key='block.id')
+ blueprint-icon(:icon='block.isCustom ? `plugin` : block.icon')
+ q-item-section
+ q-item-label: strong {{ block.name }}
+ q-item-label(caption) {{ block.description }}
+ q-item-label.flex.items-center(caption)
+ q-chip.q-ma-none(square, dense, :color='$q.dark.isActive ? `pink-8` : `pink-1`', :text-color='$q.dark.isActive ? `white` : `pink-9`'): span.text-caption <block-{{ block.block }}>
+ q-separator.q-mx-sm.q-my-xs(vertical)
+ em.text-purple(v-if='block.isCustom') {{ t('admin.blocks.custom') }}
+ em.text-teal-7(v-else) {{ t('admin.blocks.builtin') }}
+ template(v-if='block.isCustom')
+ q-item-section(
+ side
+ )
+ q-btn(
+ icon='las la-trash'
+ :aria-label='t(`common.actions.delete`)'
+ color='negative'
+ outline
+ no-caps
+ padding='xs sm'
+ @click='deleteBlock(block.id)'
+ )
+ q-separator.q-ml-lg(vertical)
+ q-item-section(side)
+ q-toggle.q-pr-sm(
+ v-model='block.isEnabled'
+ color='primary'
+ checked-icon='las la-check'
+ unchecked-icon='las la-times'
+ :label='t(`admin.blocks.isEnabled`)'
+ :aria-label='t(`admin.blocks.isEnabled`)'
+ disable
+ )
+
+
+
+
+
diff --git a/frontend/src/pages/AdminComments.vue b/frontend/src/pages/AdminComments.vue
new file mode 100644
index 00000000..02f831d3
--- /dev/null
+++ b/frontend/src/pages/AdminComments.vue
@@ -0,0 +1,206 @@
+
+ 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;` : ``'
+ )
+
+
+
diff --git a/frontend/src/pages/AdminDashboard.vue b/frontend/src/pages/AdminDashboard.vue
new file mode 100644
index 00000000..e1e12d75
--- /dev/null
+++ b/frontend/src/pages/AdminDashboard.vue
@@ -0,0 +1,271 @@
+
+q-page.admin-dashboard
+ .row.q-pa-md.items-center
+ .col-auto
+ img.admin-icon.animated.fadeInLeft(src='/_assets/icons/fluent-apps-tab.svg')
+ .col.q-pl-md
+ .text-h5.text-primary.animated.fadeInLeft {{ t('admin.dashboard.title') }}
+ .text-subtitle1.text-grey.animated.fadeInLeft.wait-p2s {{ t('admin.dashboard.subtitle') }}
+ .row.q-px-md.q-col-gutter-sm
+ .col-12.col-sm-6.col-lg-3
+ q-card
+ q-card-section.admin-dashboard-card
+ img(src='/_assets/icons/fluent-change-theme.svg')
+ div
+ strong {{ t('admin.sites.title') }}
+ span {{adminStore.sites.length}}
+ q-separator
+ q-card-actions(align='right')
+ q-btn(
+ flat
+ color='primary'
+ icon='las la-plus-circle'
+ :label='t(`common.actions.new`)'
+ :disable='!userStore.can(`manage:sites`)'
+ @click='newSite'
+ )
+ q-separator.q-mx-sm(vertical)
+ q-btn(
+ flat
+ color='primary'
+ icon='las la-sitemap'
+ :label='t(`common.actions.manage`)'
+ :disable='!userStore.can(`manage:sites`)'
+ to='/_admin/sites'
+ )
+ .col-12.col-sm-6.col-lg-3
+ q-card
+ q-card-section.admin-dashboard-card
+ img(src='/_assets/icons/fluent-people.svg')
+ div
+ strong {{ t('admin.groups.title') }}
+ span {{adminStore.info.groupsTotal}}
+ q-separator
+ q-card-actions(align='right')
+ q-btn(
+ flat
+ color='primary'
+ icon='las la-plus-circle'
+ :label='t(`common.actions.new`)'
+ :disable='!userStore.can(`manage:users`)'
+ @click='newGroup'
+ )
+ q-separator.q-mx-sm(vertical)
+ q-btn(
+ flat
+ color='primary'
+ icon='las la-users'
+ :label='t(`common.actions.manage`)'
+ :disable='!userStore.can(`manage:users`)'
+ to='/_admin/groups'
+ )
+ .col-12.col-sm-6.col-lg-3
+ q-card
+ q-card-section.admin-dashboard-card
+ img(src='/_assets/icons/fluent-account.svg')
+ div
+ strong {{ t('admin.users.title') }}
+ span {{adminStore.info.usersTotal}}
+ q-separator
+ q-card-actions(align='right')
+ q-btn(
+ flat
+ color='primary'
+ icon='las la-user-plus'
+ :label='t(`common.actions.new`)'
+ :disable='!userStore.can(`manage:users`)'
+ @click='newUser'
+ )
+ q-separator.q-mx-sm(vertical)
+ q-btn(
+ flat
+ color='primary'
+ icon='las la-user-friends'
+ :label='t(`common.actions.manage`)'
+ :disable='!userStore.can(`manage:users`)'
+ to='/_admin/users'
+ )
+ //- .col-12.col-sm-6.col-lg-3
+ //- q-card
+ //- q-card-section.admin-dashboard-card
+ //- img(src='/_assets/icons/fluent-tag.svg')
+ //- div
+ //- strong {{ t('admin.tags.title') }}
+ //- span {{adminStore.info.tagsTotal}}
+ //- q-separator
+ //- q-card-actions(align='right')
+ //- q-btn(
+ //- flat
+ //- color='primary'
+ //- icon='las la-tags'
+ //- :label='t(`common.actions.manage`)'
+ //- :disable='!userStore.can(`manage:sites`)'
+ //- :to='`/_admin/` + adminStore.currentSiteId + `/tags`'
+ //- )
+ .col-12.col-sm-6.col-lg-3
+ q-card
+ q-card-section.admin-dashboard-card
+ img(src='/_assets/icons/fluent-female-working-with-a-laptop.svg')
+ div
+ strong Logins
+ small {{ adminStore.info.loginsPastDay }} #[i / past 24h]
+ q-separator
+ q-card-actions(align='right')
+ q-btn(
+ flat
+ color='primary'
+ icon='las la-chart-area'
+ :label='t(`admin.analytics.title`)'
+ :disable='!flagsStore.experimental'
+ :to='`/_admin/` + adminStore.currentSiteId + `/analytics`'
+ )
+ //- .col-12.col-lg-9
+ //- q-card
+ //- q-card-section ---
+
+ .col-12
+ q-banner.bg-positive.text-white(
+ :class='adminStore.isVersionLatest ? `bg-positive` : `bg-warning`'
+ inline-actions
+ rounded
+ )
+ i.las.la-check.q-mr-sm
+ span.text-weight-medium(v-if='adminStore.isVersionLatest') Your Wiki.js server is running the latest version!
+ span.text-weight-medium(v-else) A new version of Wiki.js is available. Please update to the latest version.
+ template(#action, v-if='userStore.can(`manage:system`)')
+ q-btn(
+ flat
+ :label='t(`admin.system.checkForUpdates`)'
+ @click='checkForUpdates'
+ )
+ q-separator.q-mx-sm(vertical, dark)
+ q-btn(
+ flat
+ :label='t(`admin.system.title`)'
+ to='/_admin/system'
+ )
+
+
+
+
+
diff --git a/frontend/src/pages/AdminEditors.vue b/frontend/src/pages/AdminEditors.vue
new file mode 100644
index 00000000..2d38d599
--- /dev/null
+++ b/frontend/src/pages/AdminEditors.vue
@@ -0,0 +1,309 @@
+
+q-page.admin-flags
+ .row.q-pa-md.items-center
+ .col-auto
+ img.admin-icon.animated.fadeInLeft(src='/_assets/icons/fluent-cashbook.svg')
+ .col.q-pl-md
+ .text-h5.text-primary.animated.fadeInLeft {{ t('admin.editors.title') }}
+ .text-subtitle1.text-grey.animated.fadeInLeft.wait-p2s {{ t('admin.editors.subtitle') }}
+ .col-auto
+ q-btn.q-mr-sm.acrylic-btn(
+ icon='las la-question-circle'
+ flat
+ color='grey'
+ :aria-label='t(`common.actions.viewDocs`)'
+ :href='siteStore.docsBase + `/admin/editors`'
+ target='_blank'
+ type='a'
+ )
+ q-tooltip {{ t(`common.actions.viewDocs`) }}
+ q-btn.q-mr-sm.acrylic-btn(
+ icon='las la-redo-alt'
+ flat
+ color='secondary'
+ :loading='state.loading > 0'
+ :aria-label='t(`common.actions.refresh`)'
+ @click='refresh'
+ )
+ q-tooltip {{ t(`common.actions.refresh`) }}
+ q-btn(
+ unelevated
+ icon='mdi-check'
+ :label='t(`common.actions.apply`)'
+ color='secondary'
+ @click='save'
+ :disabled='state.loading > 0'
+ )
+ q-separator(inset)
+ .q-pa-md.q-gutter-md
+ q-card
+ q-list(separator)
+ template(v-for='editor of editors', :key='editor.id')
+ q-item(v-if='flagsStore.experimental || !editor.isDisabled')
+ blueprint-icon(:icon='editor.icon')
+ q-item-section
+ q-item-label: strong {{t(`admin.editors.` + editor.id + `Name`)}}
+ q-item-label(caption)
+ span {{t(`admin.editors.` + editor.id + `Description`)}}
+ q-item-label(caption, v-if='editor.useRendering')
+ em.text-purple {{ t('admin.editors.useRenderingPipeline') }}
+ template(v-if='editor.hasConfig')
+ q-item-section(
+ side
+ )
+ q-btn(
+ icon='las la-cog'
+ :label='t(`admin.editors.configuration`)'
+ :color='$q.dark.isActive ? `blue-grey-3` : `blue-grey-8`'
+ outline
+ no-caps
+ padding='xs md'
+ @click='openConfig(editor.id)'
+ )
+ q-separator.q-ml-md(vertical)
+ q-item-section(side)
+ q-toggle.q-pr-sm(
+ v-model='state.config[editor.id]'
+ :color='editor.isDisabled ? `grey` : `primary`'
+ checked-icon='las la-check'
+ unchecked-icon='las la-times'
+ :label='t(`admin.sites.isActive`)'
+ :aria-label='t(`admin.sites.isActive`)'
+ :disabled='editor.isDisabled'
+ )
+
+
+
+
+
diff --git a/frontend/src/pages/AdminExtensions.vue b/frontend/src/pages/AdminExtensions.vue
new file mode 100644
index 00000000..06d21832
--- /dev/null
+++ b/frontend/src/pages/AdminExtensions.vue
@@ -0,0 +1,229 @@
+
+q-page.admin-extensions
+ .row.q-pa-md.items-center
+ .col-auto
+ img.admin-icon.animated.fadeInLeft(src='/_assets/icons/fluent-module.svg')
+ .col.q-pl-md
+ .text-h5.text-primary.animated.fadeInLeft {{ t('admin.extensions.title') }}
+ .text-subtitle1.text-grey.animated.fadeInLeft.wait-p2s {{ t('admin.extensions.subtitle') }}
+ .col-auto
+ q-btn.acrylic-btn.q-mr-sm(
+ icon='las la-question-circle'
+ flat
+ color='grey'
+ :aria-label='t(`common.actions.viewDocs`)'
+ :href='siteStore.docsBase + `/system/extensions`'
+ target='_blank'
+ type='a'
+ )
+ q-tooltip {{ t(`common.actions.viewDocs`) }}
+ q-btn.acrylic-btn(
+ icon='las la-redo-alt'
+ flat
+ color='secondary'
+ :loading='state.loading > 0'
+ :aria-label='t(`common.actions.refresh`)'
+ @click='load'
+ )
+ q-tooltip {{ t(`common.actions.refresh`) }}
+ q-separator(inset)
+ .row.q-pa-md.q-col-gutter-md
+ .col-12
+ q-card
+ q-list(separator)
+ q-item(
+ v-for='ext of state.extensions'
+ :key='`ext-` + ext.key'
+ )
+ blueprint-icon(icon='module')
+ q-item-section
+ q-item-label {{ext.title}}
+ q-item-label(caption) {{ext.description}}
+ q-item-section(side)
+ .row
+ q-btn-group(unelevated)
+ q-btn(
+ icon='las la-check'
+ size='sm'
+ color='positive'
+ padding='xs sm'
+ v-if='ext.isInstalled'
+ :ripple='false'
+ )
+ q-tooltip(
+ anchor='center left'
+ self='center right'
+ ) {{t('admin.extensions.installed')}}
+ q-btn(
+ :label='t(`admin.extensions.install`)'
+ color='blue-7'
+ v-if='ext.isCompatible && !ext.isInstalled && ext.isInstallable'
+ @click='install(ext)'
+ no-caps
+ )
+ q-btn(
+ v-else-if='ext.isCompatible && ext.isInstalled && ext.isInstallable'
+ :label='t(`admin.extensions.reinstall`)'
+ color='blue-7'
+ @click='install(ext)'
+ no-caps
+ )
+ q-btn(
+ v-else-if='ext.isCompatible && ext.isInstalled && !ext.isInstallable'
+ :label='t(`admin.extensions.installed`)'
+ color='positive'
+ no-caps
+ :ripple='false'
+ )
+ q-btn(
+ v-else-if='ext.isCompatible'
+ :label='t(`admin.extensions.instructions`)'
+ icon='las la-info-circle'
+ color='indigo'
+ outline
+ type='a'
+ :href='`https://docs.js.wiki/admin/extensions/` + ext.key'
+ target='_blank'
+ no-caps
+ )
+ q-tooltip(
+ anchor='center left'
+ self='center right'
+ ) {{t('admin.extensions.instructionsHint')}}
+ q-btn(
+ v-else
+ color='negative'
+ outline
+ :label='t(`admin.extensions.incompatible`)'
+ no-caps
+ :ripple='false'
+ )
+
+
+
+
+
+
diff --git a/frontend/src/pages/AdminFlags.vue b/frontend/src/pages/AdminFlags.vue
new file mode 100644
index 00000000..bbf55fc7
--- /dev/null
+++ b/frontend/src/pages/AdminFlags.vue
@@ -0,0 +1,257 @@
+
+q-page.admin-flags
+ .row.q-pa-md.items-center
+ .col-auto
+ img.admin-icon.animated.fadeInLeft(src='/_assets/icons/fluent-windsock.svg')
+ .col.q-pl-md
+ .text-h5.text-primary.animated.fadeInLeft {{ t('admin.flags.title') }}
+ .text-subtitle1.text-grey.animated.fadeInLeft.wait-p2s {{ t('admin.flags.subtitle') }}
+ .col-auto
+ q-btn.q-mr-sm.acrylic-btn(
+ icon='las la-question-circle'
+ flat
+ color='grey'
+ :aria-label='t(`common.actions.viewDocs`)'
+ :href='siteStore.docsBase + `/system/flags`'
+ target='_blank'
+ type='a'
+ )
+ q-tooltip {{ t(`common.actions.viewDocs`) }}
+ q-btn.q-mr-sm.acrylic-btn(
+ icon='las la-redo-alt'
+ flat
+ color='secondary'
+ :loading='state.loading > 0'
+ :aria-label='t(`common.actions.refresh`)'
+ @click='load'
+ )
+ q-tooltip {{ t(`common.actions.refresh`) }}
+ q-btn(
+ unelevated
+ icon='mdi-check'
+ :label='t(`common.actions.apply`)'
+ color='secondary'
+ @click='save'
+ :loading='state.loading > 0'
+ )
+ q-separator(inset)
+ .row.q-pa-md.q-col-gutter-md
+ .col-12.col-lg-7
+ q-card.q-py-sm
+ q-item
+ q-item-section
+ q-card.bg-negative.text-white.rounded-borders(flat)
+ q-card-section.items-center(horizontal)
+ q-card-section.col-auto.q-pr-none
+ q-icon(name='las la-exclamation-triangle', size='sm')
+ q-card-section
+ span {{ t('admin.flags.warn.label') }}
+ .text-caption.text-red-1 {{ t('admin.flags.warn.hint') }}
+ q-item(tag='label')
+ blueprint-icon(icon='flag-filled')
+ q-item-section
+ q-item-label {{t(`admin.flags.experimental.label`)}}
+ q-item-label(caption) {{t(`admin.flags.experimental.hint`)}}
+ q-item-section(avatar)
+ q-toggle(
+ v-model='state.flags.experimental'
+ color='negative'
+ checked-icon='las la-check'
+ unchecked-icon='las la-times'
+ :aria-label='t(`admin.flags.experimental.label`)'
+ )
+ q-separator.q-my-sm(inset)
+ q-item(tag='label')
+ blueprint-icon(icon='flag-filled')
+ q-item-section
+ q-item-label {{t(`admin.flags.authDebug.label`)}}
+ q-item-label(caption) {{t(`admin.flags.authDebug.hint`)}}
+ q-item-section(avatar)
+ q-toggle(
+ v-model='state.flags.authDebug'
+ color='negative'
+ checked-icon='las la-check'
+ unchecked-icon='las la-times'
+ :aria-label='t(`admin.flags.authDebug.label`)'
+ )
+ q-separator.q-my-sm(inset)
+ q-item(tag='label')
+ blueprint-icon(icon='flag-filled')
+ q-item-section
+ q-item-label {{t(`admin.flags.sqlLog.label`)}}
+ q-item-label(caption) {{t(`admin.flags.sqlLog.hint`)}}
+ q-item-section(avatar)
+ q-toggle(
+ v-model='state.flags.sqlLog'
+ color='negative'
+ checked-icon='las la-check'
+ unchecked-icon='las la-times'
+ :aria-label='t(`admin.flags.sqlLog.label`)'
+ )
+ q-card.q-py-sm.q-mt-md
+ q-item
+ blueprint-icon(icon='administrative-tools')
+ q-item-section
+ q-item-label {{t(`admin.flags.advanced.label`)}}
+ q-item-label(caption) {{t(`admin.flags.advanced.hint`)}}
+ q-item-section(avatar)
+ q-btn(
+ :label='t(`common.actions.edit`)'
+ unelevated
+ icon='las la-code'
+ color='primary'
+ text-color='white'
+ disabled
+ )
+
+ q-card.q-py-sm.q-mt-md
+ q-item
+ blueprint-icon(icon='key')
+ q-item-section
+ q-item-label {{t(`admin.flags.getTokenLabel`)}}
+ q-item-label(caption) {{t(`admin.flags.getTokenHint`)}}
+ q-item-section(avatar)
+ q-btn(
+ ref='copyTokenBtn'
+ :label='t(`common.actions.copy`)'
+ unelevated
+ icon='las la-clipboard'
+ color='primary'
+ text-color='white'
+ )
+
+ .col-12.col-lg-5.gt-md
+ .q-pa-md.text-center
+ img(src='/_assets/illustrations/undraw_settings.svg', style='width: 80%;')
+
+
+
+
+
diff --git a/frontend/src/pages/AdminGeneral.vue b/frontend/src/pages/AdminGeneral.vue
new file mode 100644
index 00000000..c3454d34
--- /dev/null
+++ b/frontend/src/pages/AdminGeneral.vue
@@ -0,0 +1,916 @@
+
+q-page.admin-general
+ .row.q-pa-md.items-center
+ .col-auto
+ img.admin-icon.animated.fadeInLeft(src='/_assets/icons/fluent-web.svg')
+ .col.q-pl-md
+ .text-h5.text-primary.animated.fadeInLeft {{ t('admin.general.title') }}
+ .text-subtitle1.text-grey.animated.fadeInLeft.wait-p2s {{ t('admin.general.subtitle') }}
+ .col-auto
+ q-btn.q-mr-sm.acrylic-btn(
+ icon='las la-question-circle'
+ flat
+ color='grey'
+ :aria-label='t(`common.actions.viewDocs`)'
+ :href='siteStore.docsBase + `/admin/sites#general`'
+ target='_blank'
+ type='a'
+ )
+ q-tooltip {{ t(`common.actions.viewDocs`) }}
+ q-btn.q-mr-sm.acrylic-btn(
+ icon='las la-redo-alt'
+ flat
+ color='secondary'
+ :loading='state.loading > 0'
+ :aria-label='t(`common.actions.refresh`)'
+ @click='load'
+ )
+ q-tooltip {{ t(`common.actions.refresh`) }}
+ q-btn(
+ unelevated
+ icon='mdi-check'
+ :label='t(`common.actions.apply`)'
+ color='secondary'
+ @click='save'
+ :disabled='state.loading > 0'
+ )
+ q-separator(inset)
+ .row.q-pa-md.q-col-gutter-md
+ .col-12.col-lg-7
+ //- -----------------------
+ //- Site Info
+ //- -----------------------
+ q-card.q-pb-sm
+ q-card-section
+ .text-subtitle1 {{t('admin.general.siteInfo')}}
+ q-item
+ blueprint-icon(icon='home')
+ q-item-section
+ q-item-label {{t(`admin.general.siteTitle`)}}
+ q-item-label(caption) {{t(`admin.general.siteTitleHint`)}}
+ q-item-section
+ q-input(
+ outlined
+ v-model='state.config.title'
+ dense
+ :rules='rulesTitle'
+ hide-bottom-space
+ :aria-label='t(`admin.general.siteTitle`)'
+ )
+ q-separator.q-my-sm(inset)
+ q-item
+ blueprint-icon(icon='select-all')
+ q-item-section
+ q-item-label {{t(`admin.general.siteDescription`)}}
+ q-item-label(caption) {{t(`admin.general.siteDescriptionHint`)}}
+ q-item-section
+ q-input(
+ outlined
+ v-model='state.config.description'
+ dense
+ :aria-label='t(`admin.general.siteDescription`)'
+ )
+ q-separator.q-my-sm(inset)
+ q-item
+ blueprint-icon(icon='dns')
+ q-item-section
+ q-item-label {{t(`admin.general.siteHostname`)}}
+ q-item-label(caption) {{t(`admin.general.siteHostnameHint`)}}
+ q-item-section
+ q-input(
+ outlined
+ v-model='state.config.hostname'
+ dense
+ :rules='rulesHostname'
+ hide-bottom-space
+ :aria-label='t(`admin.general.siteHostname`)'
+ )
+
+ //- -----------------------
+ //- Footer / Copyright
+ //- -----------------------
+ q-card.q-pb-sm.q-mt-md
+ q-card-section
+ .text-subtitle1 {{t('admin.general.footerCopyright')}}
+ q-item
+ blueprint-icon(icon='building')
+ q-item-section
+ q-item-label {{t(`admin.general.companyName`)}}
+ q-item-label(caption) {{t(`admin.general.companyNameHint`)}}
+ q-item-section
+ q-input(
+ outlined
+ v-model='state.config.company'
+ dense
+ :aria-label='t(`admin.general.companyName`)'
+ )
+ q-separator.q-my-sm(inset)
+ q-item
+ blueprint-icon(icon='copyright')
+ q-item-section
+ q-item-label {{t(`admin.general.contentLicense`)}}
+ q-item-label(caption) {{t(`admin.general.contentLicenseHint`)}}
+ q-item-section
+ q-select(
+ outlined
+ v-model='state.config.contentLicense'
+ :options='contentLicenses'
+ option-value='value'
+ option-label='text'
+ emit-value
+ map-options
+ dense
+ :aria-label='t(`admin.general.contentLicense`)'
+ )
+ q-separator.q-my-sm(inset)
+ q-item
+ blueprint-icon(icon='subtitles')
+ q-item-section
+ q-item-label {{t(`admin.general.footerExtra`)}}
+ q-item-label(caption) {{t(`admin.general.footerExtraHint`)}}
+ q-item-section
+ q-input(
+ outlined
+ v-model='state.config.footerExtra'
+ dense
+ :aria-label='t(`admin.general.footerExtra`)'
+ )
+
+ //- -----------------------
+ //- FEATURES
+ //- -----------------------
+ q-card.q-pb-sm.q-mt-md
+ q-card-section
+ .text-subtitle1 {{t('admin.general.features')}}
+ q-item(tag='label')
+ blueprint-icon(icon='tree-structure')
+ q-item-section
+ q-item-label {{t(`admin.general.allowBrowse`)}}
+ q-item-label(caption) {{t(`admin.general.allowBrowseHint`)}}
+ q-item-section(avatar)
+ q-toggle(
+ v-model='state.config.features.browse'
+ color='primary'
+ checked-icon='las la-check'
+ unchecked-icon='las la-times'
+ :aria-label='t(`admin.general.allowBrowse`)'
+ )
+ q-separator.q-my-sm(inset)
+ q-item(tag='label')
+ blueprint-icon(icon='discussion-forum')
+ q-item-section
+ q-item-label {{t(`admin.general.allowComments`)}}
+ q-item-label(caption) {{t(`admin.general.allowCommentsHint`)}}
+ q-item-section(avatar)
+ q-toggle(
+ v-model='state.config.features.comments'
+ color='primary'
+ checked-icon='las la-check'
+ unchecked-icon='las la-times'
+ :aria-label='t(`admin.general.allowComments`)'
+ )
+ q-separator.q-my-sm(inset)
+ q-item(tag='label')
+ blueprint-icon(icon='pen')
+ q-item-section
+ q-item-label {{t(`admin.general.allowContributions`)}}
+ q-item-label(caption) {{t(`admin.general.allowContributionsHint`)}}
+ q-item-section(avatar)
+ q-toggle(
+ v-model='state.config.features.contributions'
+ color='primary'
+ checked-icon='las la-check'
+ unchecked-icon='las la-times'
+ :aria-label='t(`admin.general.allowContributions`)'
+ )
+ q-separator.q-my-sm(inset)
+ q-item(tag='label')
+ blueprint-icon(icon='administrator-male')
+ q-item-section
+ q-item-label {{t(`admin.general.allowProfile`)}}
+ q-item-label(caption) {{t(`admin.general.allowProfileHint`)}}
+ q-item-section(avatar)
+ q-toggle(
+ v-model='state.config.features.profile'
+ color='primary'
+ checked-icon='las la-check'
+ unchecked-icon='las la-times'
+ :aria-label='t(`admin.general.allowProfile`)'
+ )
+ q-separator.q-my-sm(inset)
+ q-item
+ blueprint-icon(icon='star-half-empty')
+ q-item-section
+ q-item-label {{t(`admin.general.allowRatings`)}}
+ q-item-label(caption) {{t(`admin.general.allowRatingsHint`)}}
+ q-item-section.col-auto
+ q-btn-toggle(
+ v-model='state.config.features.ratingsMode'
+ push
+ glossy
+ no-caps
+ toggle-color='primary'
+ :options='ratingsModes'
+ )
+ q-separator.q-my-sm(inset)
+ q-item(tag='label')
+ blueprint-icon(icon='search')
+ q-item-section
+ q-item-label {{t(`admin.general.allowSearch`)}}
+ q-item-label(caption) {{t(`admin.general.allowSearchHint`)}}
+ q-item-section(avatar)
+ q-toggle(
+ v-model='state.config.features.search'
+ color='primary'
+ checked-icon='las la-check'
+ unchecked-icon='las la-times'
+ :aria-label='t(`admin.general.allowSearch`)'
+ )
+ q-separator.q-my-sm(inset)
+ q-item
+ blueprint-icon(icon='confusion')
+ q-item-section
+ q-item-label {{t(`admin.general.reasonForChange`)}}
+ q-item-label(caption) {{t(`admin.general.reasonForChangeHint`)}}
+ q-item-section(avatar)
+ q-btn-toggle(
+ v-model='state.config.features.reasonForChange'
+ push
+ glossy
+ no-caps
+ toggle-color='primary'
+ :options='reasonForChangeModes'
+ )
+
+ //- -----------------------
+ //- Defaults
+ //- -----------------------
+ q-card.q-pb-sm.q-mt-md(v-if='state.config.defaults')
+ q-card-section
+ .text-subtitle1 {{t('admin.general.defaults')}}
+ q-item
+ blueprint-icon(icon='depth')
+ q-item-section
+ q-item-label {{t(`admin.general.defaultTocDepth`)}}
+ q-item-label(caption) {{t(`admin.general.defaultTocDepthHint`)}}
+ q-item-section.col-auto.q-pl-sm(style='min-width: 180px;')
+ .text-caption {{t('editor.props.tocMinMaxDepth')}} #[strong (H{{state.config.defaults.tocDepth.min}} → H{{state.config.defaults.tocDepth.max}})]
+ q-range(
+ v-model='state.config.defaults.tocDepth'
+ :min='1'
+ :max='6'
+ color='primary'
+ :left-label-value='`H` + state.config.defaults.tocDepth.min'
+ :right-label-value='`H` + state.config.defaults.tocDepth.max'
+ snap
+ label
+ markers
+ )
+
+ .col-12.col-lg-5
+ //- -----------------------
+ //- Logo
+ //- -----------------------
+ q-card.q-pb-sm
+ q-card-section
+ .text-subtitle1 {{t('admin.general.logo')}}
+ q-item
+ blueprint-icon.self-start(icon='butterfly', indicator, :indicator-text='t(`admin.extensions.requiresSharp`)')
+ q-item-section
+ .flex
+ q-item-section
+ q-item-label {{t(`admin.general.logoUpl`)}}
+ q-item-label(caption) {{t(`admin.general.logoUplHint`)}}
+ q-item-section.col-auto
+ q-btn(
+ label='Upload'
+ unelevated
+ icon='las la-upload'
+ color='primary'
+ text-color='white'
+ @click='uploadLogo'
+ )
+ q-toolbar.bg-header.q-mt-md.rounded-borders.text-white(
+ dark
+ style='height: 64px;'
+ )
+ q-btn(dense, flat, v-if='adminStore.currentSiteId')
+ q-avatar(
+ v-if='state.config.logoText'
+ size='34px'
+ square
+ )
+ img(:src='`/_site/` + adminStore.currentSiteId + `/logo?` + state.assetTimestamp')
+ img(
+ v-else
+ :src='`/_site/` + adminStore.currentSiteId + `/logo?` + state.assetTimestamp'
+ style='height: 34px;'
+ )
+ q-toolbar-title.text-h6(v-if='state.config.logoText') {{state.config.title}}
+ q-separator.q-my-sm(inset)
+ q-item(tag='label')
+ blueprint-icon(icon='information')
+ q-item-section
+ q-item-label {{t(`admin.general.displaySiteTitle`)}}
+ q-item-label(caption) {{t(`admin.general.displaySiteTitleHint`)}}
+ q-item-section(avatar)
+ q-toggle(
+ v-model='state.config.logoText'
+ color='primary'
+ checked-icon='las la-check'
+ unchecked-icon='las la-times'
+ :aria-label='t(`admin.general.displaySiteTitle`)'
+ )
+ q-separator.q-my-sm(inset)
+ q-item
+ blueprint-icon.self-start(icon='starfish', indicator, :indicator-text='t(`admin.extensions.requiresSharp`)')
+ q-item-section
+ .flex
+ q-item-section
+ q-item-label {{t(`admin.general.favicon`)}}
+ q-item-label(caption) {{t(`admin.general.faviconHint`)}}
+ q-item-section.col-auto
+ q-btn(
+ label='Upload'
+ unelevated
+ icon='las la-upload'
+ color='primary'
+ text-color='white'
+ @click='uploadFavicon'
+ )
+ .admin-general-favicontabs.q-mt-md
+ div
+ q-avatar(
+ v-if='adminStore.currentSiteId'
+ size='24px'
+ square
+ )
+ img(:src='`/_site/` + adminStore.currentSiteId + `/favicon?` + state.assetTimestamp')
+ .text-caption.q-ml-sm {{state.config.title}}
+ div
+ q-icon(name='las la-otter', size='24px', color='grey')
+ .text-caption.q-ml-sm Lorem ipsum
+ div
+ q-icon(name='las la-mountain', size='24px', color='grey')
+ .text-caption.q-ml-sm Dolor sit amet...
+
+ //- -----------------------
+ //- Discovery
+ //- -----------------------
+ q-card.q-pb-sm.q-mt-md
+ q-card-section
+ .text-subtitle1 {{t('admin.general.discovery')}}
+ q-item(tag='label')
+ blueprint-icon(icon='cellular-network')
+ q-item-section
+ q-item-label {{t(`admin.general.discoverable`)}}
+ q-item-label(caption) {{t(`admin.general.discoverableHint`)}}
+ q-item-section(avatar)
+ q-toggle(
+ v-model='state.config.discoverable'
+ color='primary'
+ checked-icon='las la-check'
+ unchecked-icon='las la-times'
+ :aria-label='t(`admin.general.discoverable`)'
+ )
+
+ //- -----------------------
+ //- Uploads
+ //- -----------------------
+ q-card.q-pb-sm.q-mt-md(v-if='state.config.uploads')
+ q-card-section
+ .text-subtitle1 {{t('admin.general.uploads')}}
+ q-item
+ blueprint-icon(icon='merge-files')
+ q-item-section
+ q-item-label {{t(`admin.general.uploadConflictBehavior`)}}
+ q-item-label(caption) {{t(`admin.general.uploadConflictBehaviorHint`)}}
+ q-item-section
+ q-select(
+ outlined
+ v-model='state.config.uploads.conflictBehavior'
+ :options='uploadConflictBehaviors'
+ option-value='value'
+ option-label='label'
+ emit-value
+ map-options
+ dense
+ options-dense
+ :virtual-scroll-slice-size='1000'
+ :aria-label='t(`admin.general.uploadConflictBehavior`)'
+ )
+ q-separator.q-my-sm(inset)
+ q-item(tag='label')
+ blueprint-icon(icon='rename')
+ q-item-section
+ q-item-label {{t(`admin.general.uploadNormalizeFilename`)}}
+ q-item-label(caption) {{t(`admin.general.uploadNormalizeFilenameHint`)}}
+ q-item-section(avatar)
+ q-toggle(
+ v-model='state.config.uploads.normalizeFilename'
+ color='primary'
+ checked-icon='las la-check'
+ unchecked-icon='las la-times'
+ :aria-label='t(`admin.general.uploadNormalizeFilename`)'
+ )
+
+ //- -----------------------
+ //- URL Handling
+ //- -----------------------
+ q-card.q-pb-sm.q-mt-md
+ q-card-section
+ .text-subtitle1 {{t('admin.general.urlHandling')}}
+ q-item
+ blueprint-icon(icon='sort-by-follow-up-date')
+ q-item-section
+ q-item-label {{t(`admin.general.pageExtensions`)}}
+ q-item-label(caption) {{t(`admin.general.pageExtensionsHint`)}}
+ q-item-section
+ q-input(
+ outlined
+ v-model='state.config.pageExtensions'
+ dense
+ :aria-label='t(`admin.general.pageExtensions`)'
+ )
+ q-separator.q-my-sm(inset)
+ q-item(tag='label')
+ blueprint-icon(icon='lowercase')
+ q-item-section
+ q-item-label {{t(`admin.general.pageCasing`)}}
+ q-item-label(caption) {{t(`admin.general.pageCasingHint`)}}
+ q-item-section(avatar)
+ q-toggle(
+ v-model='state.config.pageCasing'
+ color='primary'
+ checked-icon='las la-check'
+ unchecked-icon='las la-times'
+ :aria-label='t(`admin.general.pageCasing`)'
+ )
+
+ //- -----------------------
+ //- SEO
+ //- -----------------------
+ q-card.q-pb-sm.q-mt-md(v-if='state.config.robots')
+ q-card-section
+ .text-subtitle1 SEO
+ q-item(tag='label')
+ blueprint-icon(icon='bot')
+ q-item-section
+ q-item-label {{t(`admin.general.searchAllowIndexing`)}}
+ q-item-label(caption) {{t(`admin.general.searchAllowIndexingHint`)}}
+ q-item-section(avatar)
+ q-toggle(
+ v-model='state.config.robots.index'
+ color='primary'
+ checked-icon='las la-check'
+ unchecked-icon='las la-times'
+ :aria-label='t(`admin.general.searchAllowIndexing`)'
+ )
+ q-separator.q-my-sm(inset)
+ q-item(tag='label')
+ blueprint-icon(icon='polyline')
+ q-item-section
+ q-item-label {{t(`admin.general.searchAllowFollow`)}}
+ q-item-label(caption) {{t(`admin.general.searchAllowFollowHint`)}}
+ q-item-section(avatar)
+ q-toggle(
+ v-model='state.config.robots.follow'
+ color='primary'
+ checked-icon='las la-check'
+ unchecked-icon='las la-times'
+ :aria-label='t(`admin.general.searchAllowFollow`)'
+ )
+ q-separator.q-my-sm(inset)
+ q-item(tag='label')
+ blueprint-icon(icon='genealogy')
+ q-item-section
+ q-item-label {{t(`admin.general.sitemap`)}}
+ q-item-label(caption) {{t(`admin.general.sitemapHint`)}}
+ q-item-section(avatar)
+ q-toggle(
+ v-model='state.config.sitemap'
+ color='primary'
+ checked-icon='las la-check'
+ unchecked-icon='las la-times'
+ :aria-label='t(`admin.general.sitemap`)'
+ )
+
+
+
+
+
+
diff --git a/frontend/src/pages/AdminGroups.vue b/frontend/src/pages/AdminGroups.vue
new file mode 100644
index 00000000..cb9327a4
--- /dev/null
+++ b/frontend/src/pages/AdminGroups.vue
@@ -0,0 +1,276 @@
+
+q-page.admin-groups
+ .row.q-pa-md.items-center
+ .col-auto
+ img.admin-icon.animated.fadeInLeft(src='/_assets/icons/fluent-people.svg')
+ .col.q-pl-md
+ .text-h5.text-primary.animated.fadeInLeft {{ t('admin.groups.title') }}
+ .text-subtitle1.text-grey.animated.fadeInLeft.wait-p2s {{ t('admin.groups.subtitle') }}
+ .col-auto.flex.items-center
+ q-input.denser.q-mr-sm(
+ outlined
+ v-model='state.search'
+ dense
+ :class='$q.dark.isActive ? `bg-dark` : `bg-white`'
+ )
+ template(#prepend)
+ q-icon(name='las la-search')
+ q-btn.acrylic-btn.q-mr-sm(
+ icon='las la-question-circle'
+ flat
+ color='grey'
+ type='a'
+ :aria-label='t(`common.actions.viewDocs`)'
+ :href='siteStore.docsBase + `/admin/groups`'
+ target='_blank'
+ )
+ q-tooltip {{ t(`common.actions.viewDocs`) }}
+ q-btn.q-mr-sm.acrylic-btn(
+ icon='las la-redo-alt'
+ flat
+ color='secondary'
+ :aria-label='t(`common.actions.refresh`)'
+ @click='load'
+ :loading='state.loading > 0'
+ )
+ q-tooltip {{ t(`common.actions.refresh`) }}
+ q-btn(
+ unelevated
+ icon='las la-plus'
+ :label='t(`admin.groups.create`)'
+ color='primary'
+ @click='createGroup'
+ )
+ q-separator(inset)
+ .row.q-pa-md.q-col-gutter-md
+ .col-12
+ q-card
+ q-table(
+ :rows='state.groups'
+ :columns='headers'
+ row-key='id'
+ flat
+ hide-header
+ hide-bottom
+ :rows-per-page-options='[0]'
+ :loading='state.loading > 0'
+ :filter='state.search'
+ )
+ template(v-slot:body-cell-id='props')
+ q-td(:props='props')
+ q-icon(name='las la-users', color='primary', size='sm')
+ template(v-slot:body-cell-name='props')
+ q-td(:props='props')
+ .flex.items-center
+ strong {{props.value}}
+ q-icon.q-ml-sm(
+ v-if='props.row.isSystem'
+ name='las la-lock'
+ color='pink'
+ )
+ template(v-slot:body-cell-usercount='props')
+ q-td(:props='props')
+ q-chip.text-caption(
+ square
+ :color='$q.dark.isActive ? `dark-6` : `grey-2`'
+ :text-color='$q.dark.isActive ? `white` : `grey-8`'
+ dense
+ ) {{t('admin.groups.usersCount', { count: props.value })}}
+ template(v-slot:body-cell-edit='props')
+ q-td(:props='props')
+ q-btn.acrylic-btn.q-mr-sm(
+ flat
+ :to='`/_admin/groups/` + props.row.id'
+ icon='las la-pen'
+ color='indigo'
+ :label='t(`common.actions.edit`)'
+ no-caps
+ )
+ q-btn.acrylic-btn(
+ flat
+ icon='las la-trash'
+ :color='props.row.isSystem ? `grey` : `negative`'
+ :disabled='props.row.isSystem'
+ @click='deleteGroup(props.row)'
+ )
+
+
+
+
+
diff --git a/frontend/src/pages/AdminIcons.vue b/frontend/src/pages/AdminIcons.vue
new file mode 100644
index 00000000..4cca4f49
--- /dev/null
+++ b/frontend/src/pages/AdminIcons.vue
@@ -0,0 +1,254 @@
+
+q-page.admin-icons
+ .row.q-pa-md.items-center
+ .col-auto
+ img.admin-icon.admin-icons-icon.animated.fadeInLeft(src='/_assets/icons/fluent-spring.svg')
+ .col.q-pl-md
+ .text-h5.text-primary.animated.fadeInLeft {{ t('admin.icons.title') }}
+ .text-subtitle1.text-grey.animated.fadeInLeft.wait-p2s {{ t('admin.icons.subtitle') }}
+ .col-auto
+ q-btn.acrylic-btn.q-mr-sm(
+ icon='las la-question-circle'
+ flat
+ color='grey'
+ :aria-label='t(`common.actions.viewDocs`)'
+ :href='siteStore.docsBase + `/system/icons`'
+ target='_blank'
+ type='a'
+ )
+ q-tooltip {{ t(`common.actions.viewDocs`) }}
+ q-btn.acrylic-btn.q-mr-sm(
+ icon='las la-redo-alt'
+ flat
+ color='secondary'
+ :loading='state.loading > 0'
+ :aria-label='t(`common.actions.refresh`)'
+ @click='load'
+ )
+ q-tooltip {{ t(`common.actions.refresh`) }}
+ q-btn(
+ unelevated
+ icon='mdi-check'
+ :label='t(`common.actions.apply`)'
+ color='secondary'
+ @click='save'
+ :disabled='state.loading > 0'
+ )
+ q-separator(inset)
+ .row.q-pa-md.q-col-gutter-md
+ .col-12
+ q-card
+ q-card-section
+ q-card.bg-negative.text-white.rounded-borders(flat)
+ q-card-section.items-center(horizontal)
+ q-card-section.col-auto.q-pr-none
+ q-icon(name='las la-exclamation-triangle', size='sm')
+ q-card-section
+ span {{ t('admin.icons.warnLabel') }}
+ .text-caption.text-red-1 {{ t('admin.icons.warnHint') }}
+ q-list(separator)
+ q-item(v-for='pack of combinedPacks', :key='pack.key')
+ blueprint-icon(icon='small-icons', :hueRotate='30')
+ q-item-section
+ q-item-label: strong {{pack.label}}
+ q-item-label(caption, v-if='pack.isMandatory')
+ em {{t('admin.icons.mandatory')}}
+ template(v-if='pack.config')
+ q-item-section(
+ side
+ )
+ q-btn(
+ icon='las la-cog'
+ :label='t(`admin.editors.configuration`)'
+ :color='$q.dark.isActive ? `blue-grey-3` : `blue-grey-8`'
+ outline
+ no-caps
+ padding='xs md'
+ )
+ q-separator.q-ml-md(vertical)
+ q-item-section(
+ side
+ )
+ q-btn(
+ type='a'
+ icon='las la-external-link-square-alt'
+ :label='t(`admin.icons.reference`)'
+ color='indigo'
+ outline
+ no-caps
+ padding='xs md'
+ :href='pack.website'
+ target='_blank'
+ rel='noreferrer noopener'
+ )
+ q-separator.q-ml-md(vertical)
+ q-item-section(side)
+ q-toggle.q-pr-sm(
+ :modelValue='pack.isActive'
+ @update:model-value='newValue => setPackState(pack.key, newValue)'
+ :color='pack.isDisabled ? `grey` : `primary`'
+ checked-icon='las la-check'
+ unchecked-icon='las la-times'
+ :label='t(`admin.sites.isActive`)'
+ :aria-label='t(`admin.sites.isActive`)'
+ :disabled='pack.isMandatory'
+ )
+
+
+
+
+
+
diff --git a/frontend/src/pages/AdminInstances.vue b/frontend/src/pages/AdminInstances.vue
new file mode 100644
index 00000000..d3c7ce8f
--- /dev/null
+++ b/frontend/src/pages/AdminInstances.vue
@@ -0,0 +1,212 @@
+
+q-page.admin-terminal
+ .row.q-pa-md.items-center
+ .col-auto
+ img.admin-icon.animated.fadeInLeft(src='/_assets/icons/fluent-network.svg')
+ .col.q-pl-md
+ .text-h5.text-primary.animated.fadeInLeft {{ t('admin.instances.title') }}
+ .text-subtitle1.text-grey.animated.fadeInLeft.wait-p2s {{ t('admin.instances.subtitle') }}
+ .col-auto.flex
+ q-btn.q-mr-sm.acrylic-btn(
+ icon='las la-question-circle'
+ flat
+ color='grey'
+ :aria-label='t(`common.actions.viewDocs`)'
+ :href='siteStore.docsBase + `/admin/instances`'
+ target='_blank'
+ type='a'
+ )
+ q-tooltip {{ t(`common.actions.viewDocs`) }}
+ q-btn.q-mr-sm.acrylic-btn(
+ icon='las la-redo-alt'
+ flat
+ color='secondary'
+ :loading='state.loading > 0'
+ :aria-label='t(`common.actions.refresh`)'
+ @click='load'
+ )
+ q-tooltip {{ t(`common.actions.refresh`) }}
+ q-separator(inset)
+ .q-pa-md.q-gutter-md
+ q-card
+ q-table(
+ :rows='state.instances'
+ :columns='instancesHeaders'
+ row-key='name'
+ flat
+ hide-bottom
+ :rows-per-page-options='[0]'
+ :loading='state.loading > 0'
+ )
+ template(v-slot:body-cell-icon='props')
+ q-td(:props='props')
+ q-icon(name='las la-server', color='positive', size='sm')
+ template(v-slot:body-cell-id='props')
+ q-td(:props='props')
+ strong {{props.value}}
+ div: small.text-grey: strong {{props.row.ip}}
+ div: small.text-grey {{props.row.dbUser}}
+ template(v-slot:body-cell-cons='props')
+ q-td(:props='props')
+ q-chip(
+ icon='las la-plug'
+ square
+ size='md'
+ color='blue'
+ text-color='white'
+ )
+ span.font-robotomono {{ props.value }}
+ template(v-slot:body-cell-subs='props')
+ q-td(:props='props')
+ q-chip(
+ icon='las la-broadcast-tower'
+ square
+ size='md'
+ color='green'
+ text-color='white'
+ )
+ small.text-uppercase {{ props.value }}
+ template(v-slot:body-cell-firstseen='props')
+ q-td(:props='props')
+ span {{props.value}}
+ div: small.text-grey {{humanizeDate(props.row.dbFirstSeen)}}
+ template(v-slot:body-cell-lastseen='props')
+ q-td(:props='props')
+ span {{props.value}}
+ div: small.text-grey {{humanizeDate(props.row.dbLastSeen)}}
+
+
+
diff --git a/frontend/src/pages/AdminLocale.vue b/frontend/src/pages/AdminLocale.vue
new file mode 100644
index 00000000..070b45d6
--- /dev/null
+++ b/frontend/src/pages/AdminLocale.vue
@@ -0,0 +1,267 @@
+
+q-page.admin-locale
+ .row.q-pa-md.items-center
+ .col-auto
+ img.admin-icon.animated.fadeInLeft(src='/_assets/icons/fluent-language.svg')
+ .col.q-pl-md
+ .text-h5.text-primary.animated.fadeInLeft {{ t('admin.locale.title') }}
+ .text-subtitle1.text-grey.animated.fadeInLeft.wait-p2s {{ t('admin.locale.subtitle') }}
+ .col-auto.flex
+ q-btn.q-mr-sm.acrylic-btn(
+ icon='las la-question-circle'
+ flat
+ color='grey'
+ :aria-label='t(`common.actions.viewDocs`)'
+ :href='siteStore.docsBase + `/admin/localisation`'
+ target='_blank'
+ type='a'
+ )
+ q-tooltip {{ t(`common.actions.viewDocs`) }}
+ q-btn.q-mr-sm.acrylic-btn(
+ icon='las la-redo-alt'
+ flat
+ color='secondary'
+ :loading='state.loading > 0'
+ :aria-label='t(`common.actions.refresh`)'
+ @click='load'
+ )
+ q-tooltip {{ t(`common.actions.refresh`) }}
+ q-btn(
+ unelevated
+ icon='mdi-check'
+ :label='t(`common.actions.apply`)'
+ color='secondary'
+ @click='save'
+ :disabled='state.loading > 0'
+ )
+ q-separator(inset)
+ .row.q-pa-md.q-col-gutter-md
+ .col-12.col-lg-7
+ //- -----------------------
+ //- Locale Options
+ //- -----------------------
+ q-card.q-pb-sm
+ q-card-section
+ .text-subtitle1 {{t('admin.locale.settings')}}
+ q-item
+ blueprint-icon(icon='translation')
+ q-item-section
+ q-item-label {{t(`admin.locale.primary`)}}
+ q-item-label(caption) {{t(`admin.locale.primaryHint`)}}
+ q-item-section
+ q-select(
+ outlined
+ v-model='state.primary'
+ :options='state.locales'
+ option-value='code'
+ option-label='name'
+ emit-value
+ map-options
+ dense
+ :aria-label='t(`admin.locale.primary`)'
+ )
+ q-separator.q-my-sm(inset)
+ q-item(tag='label')
+ blueprint-icon(icon='close-pane')
+ q-item-section
+ q-item-label {{t(`admin.locale.forcePrefix`)}}
+ q-item-label(caption) {{t(`admin.locale.forcePrefixHint`)}}
+ q-item-section(avatar)
+ q-toggle(
+ v-model='state.forcePrefix'
+ color='primary'
+ checked-icon='las la-check'
+ unchecked-icon='las la-times'
+ :aria-label='t(`admin.locale.forcePrefixHint`)'
+ )
+
+ //- -----------------------
+ //- Active Locales
+ //- -----------------------
+ q-card.q-pb-sm.q-mt-md
+ q-card-section
+ .text-subtitle1 {{t('admin.locale.active')}}
+ .text-caption(:class='$q.dark.isActive ? `text-grey-4` : `text-grey-7`') Select the locales that can be used on this site.
+
+ q-item(
+ v-for='lc of state.locales'
+ :key='lc.code'
+ :tag='lc.code !== state.selectedLocale ? `label` : null'
+ )
+ blueprint-icon(:text='lc.language')
+ q-item-section
+ q-item-label {{lc.nativeName}}
+ q-item-label(caption) {{lc.name}} ({{lc.code}})
+ q-item-section(avatar)
+ q-toggle(
+ :disable='lc.code === state.primary'
+ v-model='state.active'
+ :val='lc.code'
+ :color='lc.code === state.primary ? `secondary` : `primary`'
+ checked-icon='las la-check'
+ unchecked-icon='las la-times'
+ :aria-label='lc.name'
+ )
+
+ .col-12.col-lg-5
+ .q-pa-md.text-center
+ img(src='/_assets/illustrations/undraw_world.svg', style='width: 80%;')
+
+
+
+
diff --git a/frontend/src/pages/AdminLogin.vue b/frontend/src/pages/AdminLogin.vue
new file mode 100644
index 00000000..8433d0d2
--- /dev/null
+++ b/frontend/src/pages/AdminLogin.vue
@@ -0,0 +1,407 @@
+
+q-page.admin-login
+ .row.q-pa-md.items-center
+ .col-auto
+ img.admin-icon.animated.fadeInLeft(src='/_assets/icons/fluent-bunch-of-keys.svg')
+ .col.q-pl-md
+ .text-h5.text-primary.animated.fadeInLeft {{ t('admin.login.title') }}
+ .text-subtitle1.text-grey.animated.fadeInLeft.wait-p2s {{ t('admin.login.subtitle') }}
+ .col-auto
+ q-btn.q-mr-sm.acrylic-btn(
+ icon='las la-question-circle'
+ flat
+ color='grey'
+ :aria-label='t(`common.actions.viewDocs`)'
+ :href='siteStore.docsBase + `/admin/auth`'
+ target='_blank'
+ type='a'
+ )
+ q-tooltip {{ t(`common.actions.viewDocs`) }}
+ q-btn.q-mr-sm.acrylic-btn(
+ icon='las la-redo-alt'
+ flat
+ color='secondary'
+ :loading='state.loading > 0'
+ :aria-label='t(`common.actions.refresh`)'
+ @click='load'
+ )
+ q-tooltip {{ t(`common.actions.refresh`) }}
+ q-btn(
+ unelevated
+ icon='mdi-check'
+ :label='t(`common.actions.apply`)'
+ color='secondary'
+ @click='save'
+ :disabled='state.loading > 0'
+ )
+ q-separator(inset)
+ .row.q-pa-md.q-col-gutter-md
+ .col-12.col-lg-6
+ //- -----------------------
+ //- Experience
+ //- -----------------------
+ q-card.q-pb-sm
+ q-card-section
+ .text-subtitle1 {{t('admin.login.experience')}}
+ q-item
+ blueprint-icon(icon='full-image', indicator, :indicator-text='t(`admin.extensions.requiresSharp`)')
+ q-item-section
+ q-item-label {{t(`admin.login.background`)}}
+ q-item-label(caption) {{t(`admin.login.backgroundHint`)}}
+ q-item-section.col-auto
+ q-btn(
+ label='Upload'
+ unelevated
+ icon='las la-upload'
+ color='primary'
+ text-color='white'
+ @click='uploadBg'
+ )
+ q-separator.q-my-sm(inset)
+ q-item(tag='label')
+ blueprint-icon(icon='close-pane')
+ q-item-section
+ q-item-label {{t(`admin.login.bypassScreen`)}}
+ q-item-label(caption) {{t(`admin.login.bypassScreenHint`)}}
+ q-item-section(avatar)
+ q-toggle(
+ v-model='state.config.authAutoLogin'
+ color='primary'
+ checked-icon='las la-check'
+ unchecked-icon='las la-times'
+ :aria-label='t(`admin.login.bypassScreen`)'
+ )
+ q-separator.q-my-sm(inset)
+ q-item(tag='label')
+ blueprint-icon(icon='no-access')
+ q-item-section
+ q-item-label {{t(`admin.login.bypassUnauthorized`)}}
+ q-item-label(caption) {{t(`admin.login.bypassUnauthorizedHint`)}}
+ q-item-section(avatar)
+ q-toggle(
+ v-model='state.config.authBypassUnauthorized'
+ color='primary'
+ checked-icon='las la-check'
+ unchecked-icon='las la-times'
+ :aria-label='t(`admin.login.bypassUnauthorized`)'
+ )
+ q-separator.q-my-sm(inset)
+ q-item
+ blueprint-icon(icon='double-right')
+ q-item-section
+ q-item-label {{t(`admin.login.loginRedirect`)}}
+ q-item-label(caption) {{t(`admin.login.loginRedirectHint`)}}
+ q-item-section
+ q-input(
+ outlined
+ v-model='state.config.loginRedirect'
+ dense
+ :rules=`[
+ val => state.invalidCharsRegex.test(val) || t('admin.login.loginRedirectInvalidChars')
+ ]`
+ hide-bottom-space
+ :aria-label='t(`admin.login.loginRedirect`)'
+ )
+ q-separator.q-my-sm(inset)
+ q-item
+ blueprint-icon(icon='chevron-right')
+ q-item-section
+ q-item-label {{t(`admin.login.welcomeRedirect`)}}
+ q-item-label(caption) {{t(`admin.login.welcomeRedirectHint`)}}
+ q-item-section
+ q-input(
+ outlined
+ v-model='state.config.welcomeRedirect'
+ dense
+ :rules=`[
+ val => state.invalidCharsRegex.test(val) || t('admin.login.welcomeRedirectInvalidChars')
+ ]`
+ hide-bottom-space
+ :aria-label='t(`admin.login.welcomeRedirect`)'
+ )
+ q-separator.q-my-sm(inset)
+ q-item
+ blueprint-icon(icon='exit')
+ q-item-section
+ q-item-label {{t(`admin.login.logoutRedirect`)}}
+ q-item-label(caption) {{t(`admin.login.logoutRedirectHint`)}}
+ q-item-section
+ q-input(
+ outlined
+ v-model='state.config.logoutRedirect'
+ dense
+ :rules=`[
+ val => state.invalidCharsRegex.test(val) || t('admin.login.logoutRedirectInvalidChars')
+ ]`
+ hide-bottom-space
+ :aria-label='t(`admin.login.logoutRedirect`)'
+ )
+
+ .col-12.col-lg-6
+ //- -----------------------
+ //- Providers
+ //- -----------------------
+ q-card.q-pb-sm
+ q-card-section
+ .text-subtitle1 {{t('admin.login.providers')}}
+ q-card-section.admin-login-providers.q-pt-none
+ sortable(
+ class='q-list'
+ :list='state.providers'
+ item-key='id'
+ :options='sortableOptions'
+ @end='updateAuthPosition'
+ )
+ template(#item='{element}')
+ q-item
+ q-item-section(side)
+ q-icon.handle(name='mdi-drag-horizontal')
+ q-item-section(side)
+ q-icon(:name='`img:` + element.activeStrategy.strategy.icon')
+ q-item-section
+ q-item-label {{element.activeStrategy.displayName}}
+ q-item-label(caption) {{element.activeStrategy.strategy.title}}
+ q-item-section(side)
+ q-toggle(
+ v-model='element.isVisible'
+ color='primary'
+ checked-icon='las la-check'
+ unchecked-icon='las la-times'
+ label='Visible'
+ :aria-label='element.activeStrategy.displayName'
+ )
+ q-item.q-pt-none
+ q-item-section
+ q-card.bg-info.text-white.rounded-borders(flat)
+ q-card-section.items-center(horizontal)
+ q-card-section.col-auto.q-pr-none
+ q-icon(name='las la-info-circle', size='sm')
+ q-card-section.text-caption {{ t('admin.login.providersVisbleWarning') }}
+
+
+
+
+
diff --git a/frontend/src/pages/AdminMail.vue b/frontend/src/pages/AdminMail.vue
new file mode 100644
index 00000000..6ad0f627
--- /dev/null
+++ b/frontend/src/pages/AdminMail.vue
@@ -0,0 +1,548 @@
+
+q-page.admin-mail
+ .row.q-pa-md.items-center
+ .col-auto
+ img.admin-icon.animated.fadeInLeft(src='/_assets/icons/fluent-message-settings-animated.svg')
+ .col.q-pl-md
+ .text-h5.text-primary.animated.fadeInLeft {{ t('admin.mail.title') }}
+ .text-subtitle1.text-grey.animated.fadeInLeft.wait-p2s {{ t('admin.mail.subtitle') }}
+ .col-auto
+ q-btn.q-mr-sm.acrylic-btn(
+ icon='las la-question-circle'
+ flat
+ color='grey'
+ :aria-label='t(`common.actions.viewDocs`)'
+ :href='siteStore.docsBase + `/system/mail`'
+ target='_blank'
+ type='a'
+ )
+ q-tooltip {{ t(`common.actions.viewDocs`) }}
+ q-btn.q-mr-sm.acrylic-btn(
+ icon='las la-redo-alt'
+ flat
+ color='secondary'
+ :loading='state.loading > 0'
+ :aria-label='t(`common.actions.refresh`)'
+ @click='load'
+ )
+ q-tooltip {{ t(`common.actions.refresh`) }}
+ q-btn(
+ unelevated
+ icon='mdi-check'
+ :label='t(`common.actions.apply`)'
+ color='secondary'
+ @click='save'
+ :disabled='state.loading > 0'
+ )
+ q-separator(inset)
+ .row.q-pa-md.q-col-gutter-md
+ .col-12.col-lg-7
+ //- -----------------------
+ //- Configuration
+ //- -----------------------
+ q-card.q-pb-sm
+ q-card-section
+ .text-subtitle1 {{t('admin.mail.configuration')}}
+ q-item
+ blueprint-icon(icon='contact')
+ q-item-section
+ q-item-label {{t(`admin.mail.senderName`)}}
+ q-item-label(caption) {{t(`admin.general.senderNameHint`)}}
+ q-item-section
+ q-input(
+ outlined
+ v-model='state.config.senderName'
+ dense
+ hide-bottom-space
+ :aria-label='t(`admin.mail.senderName`)'
+ )
+ q-separator.q-my-sm(inset)
+ q-item
+ blueprint-icon(icon='envelope')
+ q-item-section
+ q-item-label {{t(`admin.mail.senderEmail`)}}
+ q-item-label(caption) {{t(`admin.general.senderEmailHint`)}}
+ q-item-section
+ q-input(
+ outlined
+ v-model='state.config.senderEmail'
+ dense
+ :aria-label='t(`admin.mail.senderEmail`)'
+ )
+ q-separator.q-my-sm(inset)
+ q-item
+ blueprint-icon(icon='dns')
+ q-item-section
+ q-item-label {{t(`admin.mail.defaultBaseURL`)}}
+ q-item-label(caption) {{t(`admin.general.defaultBaseURLHint`)}}
+ q-item-section
+ q-input(
+ outlined
+ v-model='state.config.defaultBaseURL'
+ dense
+ :aria-label='t(`admin.mail.defaultBaseURL`)'
+ )
+ //- -----------------------
+ //- SMTP
+ //- -----------------------
+ q-card.q-pb-sm.q-mt-md
+ q-card-section
+ .text-subtitle1 {{t('admin.mail.smtp')}}
+ q-item
+ blueprint-icon(icon='dns')
+ q-item-section
+ q-item-label {{t(`admin.mail.smtpHost`)}}
+ q-item-label(caption) {{t(`admin.mail.smtpHostHint`)}}
+ q-item-section
+ q-input(
+ outlined
+ v-model='state.config.host'
+ dense
+ hide-bottom-space
+ :aria-label='t(`admin.mail.smtpHost`)'
+ )
+ q-separator.q-my-sm(inset)
+ q-item
+ blueprint-icon(icon='ethernet-off')
+ q-item-section
+ q-item-label {{t(`admin.mail.smtpPort`)}}
+ q-item-label(caption) {{t(`admin.mail.smtpPortHint`)}}
+ q-item-section(style='flex: 0 0 120px;')
+ q-input(
+ outlined
+ v-model='state.config.port'
+ dense
+ :aria-label='t(`admin.mail.smtpPort`)'
+ )
+ q-separator.q-my-sm(inset)
+ q-item(tag='label')
+ blueprint-icon(icon='secure')
+ q-item-section
+ q-item-label {{t(`admin.mail.smtpTLS`)}}
+ q-item-label(caption) {{t(`admin.mail.smtpTLSHint`)}}
+ q-item-section(avatar)
+ q-toggle(
+ v-model='state.config.secure'
+ color='primary'
+ checked-icon='las la-check'
+ unchecked-icon='las la-times'
+ :aria-label='t(`admin.mail.smtpTLS`)'
+ )
+ q-separator.q-my-sm(inset)
+ q-item(tag='label')
+ blueprint-icon(icon='security-ssl')
+ q-item-section
+ q-item-label {{t(`admin.mail.smtpVerifySSL`)}}
+ q-item-label(caption) {{t(`admin.mail.smtpVerifySSLHint`)}}
+ q-item-section(avatar)
+ q-toggle(
+ v-model='state.config.verifySSL'
+ color='primary'
+ checked-icon='las la-check'
+ unchecked-icon='las la-times'
+ :aria-label='t(`admin.mail.smtpVerifySSL`)'
+ )
+ q-separator.q-my-sm(inset)
+ q-item
+ blueprint-icon(icon='test-account')
+ q-item-section
+ q-item-label {{t(`admin.mail.smtpUser`)}}
+ q-item-label(caption) {{t(`admin.mail.smtpUserHint`)}}
+ q-item-section
+ q-input(
+ outlined
+ v-model='state.config.user'
+ dense
+ :aria-label='t(`admin.mail.smtpUser`)'
+ )
+ q-separator.q-my-sm(inset)
+ q-item
+ blueprint-icon(icon='password')
+ q-item-section
+ q-item-label {{t(`admin.mail.smtpPwd`)}}
+ q-item-label(caption) {{t(`admin.mail.smtpPwdHint`)}}
+ q-item-section
+ q-input(
+ outlined
+ v-model='state.config.pass'
+ dense
+ :aria-label='t(`admin.mail.smtpPwd`)'
+ )
+ q-separator.q-my-sm(inset)
+ q-item
+ blueprint-icon(icon='server')
+ q-item-section
+ q-item-label {{t(`admin.mail.smtpName`)}}
+ q-item-label(caption) {{t(`admin.mail.smtpNameHint`)}}
+ q-item-section
+ q-input(
+ outlined
+ v-model='state.config.name'
+ dense
+ hide-bottom-space
+ :aria-label='t(`admin.mail.smtpName`)'
+ )
+ //- -----------------------
+ //- DKIM
+ //- -----------------------
+ q-card.q-pb-sm.q-mt-md
+ q-card-section
+ .text-subtitle1 {{t('admin.mail.dkim')}}
+ q-item.q-pt-none
+ q-item-section
+ q-card.bg-info.text-white.rounded-borders(flat)
+ q-card-section.items-center(horizontal)
+ q-card-section.col-auto.q-pr-none
+ q-icon(name='las la-info-circle', size='sm')
+ q-card-section.text-caption {{ t('admin.mail.dkimHint') }}
+ q-item(tag='label')
+ blueprint-icon(icon='received')
+ q-item-section
+ q-item-label {{t(`admin.mail.dkimUse`)}}
+ q-item-label(caption) {{t(`admin.mail.dkimUseHint`)}}
+ q-item-section(avatar)
+ q-toggle(
+ v-model='state.config.useDKIM'
+ color='primary'
+ checked-icon='las la-check'
+ unchecked-icon='las la-times'
+ :aria-label='t(`admin.mail.dkimUse`)'
+ )
+ template(v-if='state.config.useDKIM')
+ q-separator.q-my-sm(inset)
+ q-item
+ blueprint-icon(icon='dns')
+ q-item-section
+ q-item-label {{t(`admin.mail.dkimDomainName`)}}
+ q-item-label(caption) {{t(`admin.mail.dkimDomainNameHint`)}}
+ q-item-section
+ q-input(
+ outlined
+ v-model='state.config.dkimDomainName'
+ dense
+ :aria-label='t(`admin.mail.dkimDomainName`)'
+ )
+ q-separator.q-my-sm(inset)
+ q-item
+ blueprint-icon(icon='access')
+ q-item-section
+ q-item-label {{t(`admin.mail.dkimKeySelector`)}}
+ q-item-label(caption) {{t(`admin.mail.dkimKeySelectorHint`)}}
+ q-item-section
+ q-input(
+ outlined
+ v-model='state.config.dkimKeySelector'
+ dense
+ :aria-label='t(`admin.mail.dkimKeySelector`)'
+ )
+ q-separator.q-my-sm(inset)
+ q-item
+ blueprint-icon(icon='grand-master-key')
+ q-item-section
+ q-item-label {{t(`admin.mail.dkimPrivateKey`)}}
+ q-item-label(caption) {{t(`admin.mail.dkimPrivateKeyHint`)}}
+ q-item-section
+ q-input(
+ outlined
+ v-model='state.config.dkimPrivateKey'
+ dense
+ :aria-label='t(`admin.mail.dkimPrivateKey`)'
+ type='textarea'
+ )
+
+ .col-12.col-lg-5
+ //- -----------------------
+ //- MAIL TEMPLATES
+ //- -----------------------
+ q-card.q-pb-sm.q-mb-md(v-if='flagStore.experimental')
+ q-card-section
+ .text-subtitle1 {{t('admin.mail.templates')}}
+ q-list
+ q-item
+ blueprint-icon(icon='resume-template')
+ q-item-section
+ q-item-label {{t(`admin.mail.templateWelcome`)}}
+ q-item-section(side)
+ q-btn(
+ outline
+ no-caps
+ icon='las la-edit'
+ color='primary'
+ @click='editTemplate(`welcome`)'
+ :label='t(`common.actions.edit`)'
+ )
+ q-separator(inset)
+ q-item
+ blueprint-icon(icon='resume-template')
+ q-item-section
+ q-item-label {{t(`admin.mail.templateResetPwd`)}}
+ q-item-section(side)
+ q-btn(
+ outline
+ no-caps
+ icon='las la-edit'
+ color='primary'
+ @click='editTemplate(`pwdreset`)'
+ :label='t(`common.actions.edit`)'
+ )
+ //- -----------------------
+ //- SMTP TEST
+ //- -----------------------
+ q-card.q-pb-sm
+ q-card-section
+ .text-subtitle1 {{t('admin.mail.test')}}
+ q-item
+ blueprint-icon.self-start(icon='email')
+ q-item-section
+ q-item-label {{t(`admin.mail.testRecipient`)}}
+ q-item-label(caption) {{t(`admin.mail.testRecipientHint`)}}
+ q-input.q-mt-md(
+ outlined
+ v-model='state.testEmail'
+ dense
+ :aria-label='t(`admin.mail.testRecipient`)'
+ )
+ .flex.justify-end.q-pr-md.q-py-sm
+ q-btn(
+ unelevated
+ color='primary'
+ icon='las la-paper-plane'
+ :label='t(`admin.mail.testSend`)'
+ @click='sendTest'
+ :loading='state.testLoading'
+ )
+
+
+
+
+
+
diff --git a/frontend/src/pages/AdminMetrics.vue b/frontend/src/pages/AdminMetrics.vue
new file mode 100644
index 00000000..6cfb36a4
--- /dev/null
+++ b/frontend/src/pages/AdminMetrics.vue
@@ -0,0 +1,188 @@
+
+q-page.admin-api
+ .row.q-pa-md.items-center
+ .col-auto
+ img.admin-icon.animated.fadeInLeft(src='/_assets/icons/fluent-graph.svg')
+ .col.q-pl-md
+ .text-h5.text-primary.animated.fadeInLeft {{ t('admin.metrics.title') }}
+ .text-subtitle1.text-grey.animated.fadeInLeft.wait-p2s {{ t('admin.metrics.subtitle') }}
+ .col
+ .flex.items-center
+ template(v-if='state.enabled')
+ q-spinner-rings.q-mr-sm(color='green', size='md')
+ .text-caption.text-green {{t('admin.metrics.enabled')}}
+ template(v-else)
+ q-spinner-rings.q-mr-sm(color='red', size='md')
+ .text-caption.text-red {{t('admin.metrics.disabled')}}
+ .col-auto
+ q-btn.q-mr-sm.q-ml-md.acrylic-btn(
+ icon='las la-question-circle'
+ flat
+ color='grey'
+ :aria-label='t(`common.actions.viewDocs`)'
+ :href='siteStore.docsBase + `/system/metrics`'
+ target='_blank'
+ type='a'
+ )
+ q-tooltip {{ t(`common.actions.viewDocs`) }}
+ q-btn.acrylic-btn.q-mr-sm(
+ icon='las la-redo-alt'
+ flat
+ color='secondary'
+ :loading='state.loading > 0'
+ :aria-label='t(`common.actions.refresh`)'
+ @click='refresh'
+ )
+ q-tooltip {{ t(`common.actions.refresh`) }}
+ q-btn.q-mr-sm(
+ unelevated
+ icon='las la-power-off'
+ :label='!state.enabled ? t(`common.actions.activate`) : t(`common.actions.deactivate`)'
+ :color='!state.enabled ? `positive` : `negative`'
+ @click='globalSwitch'
+ :loading='state.isToggleLoading'
+ :disabled='state.loading > 0'
+ )
+ q-separator(inset)
+ .row.q-pa-md.q-col-gutter-md
+ .col-12
+ q-card.rounded-borders(
+ flat
+ :class='$q.dark.isActive ? `bg-dark-5 text-white` : `bg-grey-3 text-dark`'
+ )
+ q-card-section.items-center(horizontal)
+ q-card-section.col-auto.q-pr-none
+ q-icon(name='las la-info-circle', size='sm')
+ q-card-section
+ i18n-t(tag='span', keypath='admin.metrics.endpoint', scope='global')
+ template(#endpoint)
+ strong.font-robotomono /metrics
+ .text-caption {{ t('admin.metrics.endpointWarning') }}
+ q-card.rounded-borders.q-mt-md(
+ flat
+ :class='$q.dark.isActive ? `bg-dark-5 text-white` : `bg-grey-3 text-dark`'
+ )
+ q-card-section.items-center(horizontal)
+ q-card-section.col-auto.q-pr-none
+ q-icon(name='las la-key', size='sm')
+ q-card-section
+ i18n-t(tag='span', keypath='admin.metrics.auth', scope='global')
+ template(#headerName)
+ strong.font-robotomono Authorization
+ template(#tokenType)
+ strong.font-robotomono Bearer
+ template(#permission)
+ strong.font-robotomono read:metrics
+ .text-caption.font-robotomono Authorization: Bearer API-KEY-VALUE
+
+
+
+
+
diff --git a/frontend/src/pages/AdminNavigation.vue b/frontend/src/pages/AdminNavigation.vue
new file mode 100644
index 00000000..5ef04beb
--- /dev/null
+++ b/frontend/src/pages/AdminNavigation.vue
@@ -0,0 +1,619 @@
+
+q-page.admin-navigation
+ .row.q-pa-md.items-center
+ .col-auto
+ img.admin-icon.animated.fadeInLeft(src='/_assets/icons/fluent-tree-structure.svg')
+ .col.q-pl-md
+ .text-h5.text-primary.animated.fadeInLeft {{ t('admin.navigation.title') }}
+ .text-subtitle1.text-grey.animated.fadeInLeft.wait-p2s {{ t('admin.navigation.subtitle') }}
+ .col-auto
+ q-btn.acrylic-btn.q-mr-sm(
+ icon='las la-question-circle'
+ flat
+ color='grey'
+ :aria-label='t(`common.actions.viewDocs`)'
+ :href='siteStore.docsBase + `/admin/navigation`'
+ target='_blank'
+ type='a'
+ )
+ q-tooltip {{ t(`common.actions.viewDocs`) }}
+ q-btn.q-mr-sm.acrylic-btn(
+ icon='las la-redo-alt'
+ flat
+ color='secondary'
+ :loading='state.loading > 0'
+ :aria-label='t(`common.actions.refresh`)'
+ @click='load'
+ )
+ q-tooltip {{ t(`common.actions.refresh`) }}
+ q-btn(
+ unelevated
+ icon='mdi-check'
+ :label='t(`common.actions.apply`)'
+ color='secondary'
+ @click='save'
+ :disabled='state.loading > 0'
+ )
+ q-separator(inset)
+ .row.q-pa-md.q-col-gutter-md
+ .col-auto
+ q-card.q-mt-sm {{t('admin.navigation.mode')}}
+
+ q-card.bg-dark.q-mt-sm
+ q-list(
+ style='min-width: 350px;'
+ padding
+ dark
+ )
+ q-item
+ q-item-section
+ q-select(
+ dark
+ outlined
+ option-value='value'
+ option-label='text'
+ emit-value
+ map-options
+ dense
+ options-dense
+ :label='t(`admin.navigation.mode`)'
+ :aria-label='t(`admin.navigation.mode`)'
+ )
+
+//- v-container.pa-0.mt-3(fluid, grid-list-lg)
+//- v-row(dense)
+//- v-col(cols='3')
+//- v-card.animated.fadeInUp
+//- v-toolbar(color='teal', dark, dense, flat, height='56')
+//- v-toolbar-title.subtitle-1 {{$t('admin.navigation.mode')}}
+//- v-list(nav, two-line)
+//- v-list-item-group(v-model='config.mode', mandatory, :color='$vuetify.theme.dark ? `teal lighten-3` : `teal`')
+//- v-list-item(value='TREE')
+//- v-list-item-avatar
+//- img(src='/_assets/svg/icon-tree-structure-dotted.svg', alt='Site Tree')
+//- v-list-item-content
+//- v-list-item-title {{$t('admin.navigation.modeSiteTree.title')}}
+//- v-list-item-subtitle {{$t('admin.navigation.modeSiteTree.description')}}
+//- v-list-item-avatar
+//- v-icon(v-if='$vuetify.theme.dark', :color='config.mode === `TREE` ? `teal lighten-3` : `grey darken-2`') mdi-check-circle
+//- v-icon(v-else, :color='config.mode === `TREE` ? `teal` : `grey lighten-3`') mdi-check-circle
+//- v-list-item(value='STATIC')
+//- v-list-item-avatar
+//- img(src='/_assets/svg/icon-features-list.svg', alt='Static Navigation')
+//- v-list-item-content
+//- v-list-item-title {{$t('admin.navigation.modeStatic.title')}}
+//- v-list-item-subtitle {{$t('admin.navigation.modeStatic.description')}}
+//- v-list-item-avatar
+//- v-icon(v-if='$vuetify.theme.dark', :color='config.mode === `STATIC` ? `teal lighten-3` : `grey darken-2`') mdi-check-circle
+//- v-icon(v-else, :color='config.mode === `STATIC` ? `teal` : `grey lighten-3`') mdi-check-circle
+//- v-list-item(value='MIXED')
+//- v-list-item-avatar
+//- img(src='/_assets/svg/icon-user-menu-male-dotted.svg', alt='Custom Navigation')
+//- v-list-item-content
+//- v-list-item-title {{$t('admin.navigation.modeCustom.title')}}
+//- v-list-item-subtitle {{$t('admin.navigation.modeCustom.description')}}
+//- v-list-item-avatar
+//- v-icon(v-if='$vuetify.theme.dark', :color='config.mode === `MIXED` ? `teal lighten-3` : `grey darken-2`') mdi-check-circle
+//- v-icon(v-else, :color='config.mode === `MIXED` ? `teal` : `grey lighten-3`') mdi-check-circle
+//- v-list-item(value='NONE')
+//- v-list-item-avatar
+//- img(src='/_assets/svg/icon-cancel-dotted.svg', alt='None')
+//- v-list-item-content
+//- v-list-item-title {{$t('admin.navigation.modeNone.title')}}
+//- v-list-item-subtitle {{$t('admin.navigation.modeNone.description')}}
+//- v-list-item-avatar
+//- v-icon(v-if='$vuetify.theme.dark', :color='config.mode === `none` ? `teal lighten-3` : `grey darken-2`') mdi-check-circle
+//- v-icon(v-else, :color='config.mode === `none` ? `teal` : `grey lighten-3`') mdi-check-circle
+//- v-col(cols='9', v-if='config.mode === `MIXED` || config.mode === `STATIC`')
+//- v-card.animated.fadeInUp.wait-p2s
+//- v-row(no-gutters, align='stretch')
+//- v-col(style='flex: 0 0 350px;')
+//- v-card.grey(flat, style='height: 100%; border-radius: 4px 0 0 4px;', :class='$vuetify.theme.dark ? `darken-4-l5` : `lighten-3`')
+//- .teal.lighten-1.pa-2.d-flex(style='margin-bottom: 1px; height:56px;')
+//- v-select(
+//- :disabled='locales.length < 2'
+//- label='Locale'
+//- hide-details
+//- solo
+//- flat
+//- background-color='teal darken-2'
+//- dark
+//- dense
+//- v-model='currentLang'
+//- :items='locales'
+//- item-text='nativeName'
+//- item-value='code'
+//- )
+//- v-tooltip(top)
+//- template(v-slot:activator='{ on }')
+//- v-btn.ml-2(icon, tile, color='white', v-on='on', @click='copyFromLocaleDialogIsShown = true')
+//- v-icon mdi-arrange-send-backward
+//- span {{$t('admin.navigation.copyFromLocale')}}
+//- v-list.py-2(dense, nav, dark, class='blue darken-2', style='border-radius: 0;')
+//- v-list-item(v-if='currentTree.length < 1')
+//- v-list-item-avatar(size='24'): v-icon(color='blue lighten-3') mdi-alert
+//- v-list-item-content
+//- em.caption.blue--text.text--lighten-4 {{$t('navigation.emptyList')}}
+//- draggable(v-model='currentTree')
+//- template(v-for='navItem in currentTree')
+//- v-list-item(
+//- v-if='navItem.kind === "link"'
+//- :key='navItem.id'
+//- :class='(navItem === current) ? "blue" : ""'
+//- @click='selectItem(navItem)'
+//- )
+//- v-list-item-avatar(size='24', tile)
+//- v-icon(v-if='navItem.icon.match(/fa[a-z] fa-/)', size='19') {{ navItem.icon }}
+//- v-icon(v-else) {{ navItem.icon }}
+//- v-list-item-title {{navItem.label}}
+//- .py-2.clickable(
+//- v-else-if='navItem.kind === "divider"'
+//- :key='navItem.id'
+//- :class='(navItem === current) ? "blue" : ""'
+//- @click='selectItem(navItem)'
+//- )
+//- v-divider
+//- v-subheader.pl-4.clickable(
+//- v-else-if='navItem.kind === "header"'
+//- :key='navItem.id'
+//- :class='(navItem === current) ? "blue" : ""'
+//- @click='selectItem(navItem)'
+//- ) {{navItem.label}}
+//- v-card-chin
+//- v-menu(offset-y, bottom, min-width='200px', style='flex: 1 1;')
+//- template(v-slot:activator='{ on }')
+//- v-btn(v-on='on', color='primary', depressed, block)
+//- v-icon(left) mdi-plus
+//- span {{$t('common.actions.add')}}
+//- v-list
+//- v-list-item(@click='addItem("link")')
+//- v-list-item-avatar(size='24'): v-icon mdi-link
+//- v-list-item-title {{$t('navigation.link')}}
+//- v-list-item(@click='addItem("header")')
+//- v-list-item-avatar(size='24'): v-icon mdi-format-title
+//- v-list-item-title {{$t('navigation.header')}}
+//- v-list-item(@click='addItem("divider")')
+//- v-list-item-avatar(size='24'): v-icon mdi-minus
+//- v-list-item-title {{$t('navigation.divider')}}
+//- v-col
+//- v-card(flat, style='border-radius: 0 4px 4px 0;')
+//- template(v-if='current.kind === "link"')
+//- v-toolbar(height='56', color='teal lighten-1', flat, dark)
+//- .subtitle-1 {{$t('navigation.edit', { kind: $t('navigation.link') })}}
+//- v-spacer
+//- v-btn.px-5(color='white', outlined, @click='deleteItem(current)')
+//- v-icon(left) mdi-delete
+//- span {{$t('navigation.delete', { kind: $t('navigation.link') })}}
+//- v-card-text
+//- v-text-field(
+//- outlined
+//- :label='$t("navigation.label")'
+//- prepend-icon='mdi-format-title'
+//- v-model='current.label'
+//- counter='255'
+//- )
+//- v-text-field(
+//- outlined
+//- :label='$t("navigation.icon")'
+//- prepend-icon='mdi-dice-5'
+//- v-model='current.icon'
+//- hide-details
+//- )
+//- .caption.pt-3.pl-5 The default icon set is #[strong Material Design Icons]. In order to use another icon set, you must first select it in the Theme administration section.
+//- .caption.pt-3.pl-5: strong Material Design Icons
+//- .caption.pl-5 Refer to the #[a(href='https://materialdesignicons.com/', target='_blank') Material Design Icons Reference] for the list of all possible values. You must prefix all values with #[code mdi-], e.g. #[code mdi-home]
+//- .caption.pt-3.pl-5: strong Font Awesome 5
+//- .caption.pl-5 Refer to the #[a(href='https://fontawesome.com/icons?d=gallery&m=free', target='_blank') Font Awesome 5 Reference] for the list of all possible values. You must prefix all values with #[code fas fa-], e.g. #[code fas fa-home]. Note that some icons use different prefixes (e.g. #[code fab], #[code fad], #[code fal], #[code far]).
+//- .caption.pt-3.pl-5: strong Font Awesome 4
+//- .caption.pl-5 Refer to the #[a(href='https://fontawesome.com/v4.7.0/icons/', target='_blank') Font Awesome 4 Reference] for the list of all possible values. You must prefix all values with #[code fa fa-], e.g. #[code fa fa-home]
+//- v-divider
+//- v-card-text
+//- v-select(
+//- outlined
+//- :label='$t("navigation.targetType")'
+//- prepend-icon='mdi-near-me'
+//- :items='navTypes'
+//- v-model='current.targetType'
+//- hide-details
+//- )
+//- v-text-field.mt-4(
+//- v-if='current.targetType === `external` || current.targetType === `externalblank`'
+//- outlined
+//- :label='$t("navigation.target")'
+//- prepend-icon='mdi-near-me'
+//- v-model='current.target'
+//- hide-details
+//- )
+//- .d-flex.align-center.mt-4(v-else-if='current.targetType === "page"')
+//- v-btn.ml-8(
+//- color='primary'
+//- dark
+//- @click='selectPage'
+//- )
+//- v-icon(left) mdi-magnify
+//- span {{$t('admin.navigation.selectPageButton')}}
+//- .caption.ml-4.primary--text {{current.target}}
+//- v-text-field(
+//- v-else-if='current.targetType === `search`'
+//- outlined
+//- :label='$t("navigation.navType.searchQuery")'
+//- prepend-icon='search'
+//- v-model='current.target'
+//- )
+//- v-divider
+
+//- template(v-else-if='current.kind === "header"')
+//- v-toolbar(height='56', color='teal lighten-1', flat, dark)
+//- .subtitle-1 {{$t('navigation.edit', { kind: $t('navigation.header') })}}
+//- v-spacer
+//- v-btn.px-5(color='white', outlined, @click='deleteItem(current)')
+//- v-icon(left) mdi-delete
+//- span {{$t('navigation.delete', { kind: $t('navigation.header') })}}
+//- v-card-text
+//- v-text-field(
+//- outlined
+//- :label='$t("navigation.label")'
+//- prepend-icon='mdi-format-title'
+//- v-model='current.label'
+//- )
+//- v-divider
+
+//- div(v-else-if='current.kind === "divider"')
+//- v-toolbar(height='56', color='teal lighten-1', flat, dark)
+//- .subtitle-1 {{$t('navigation.edit', { kind: $t('navigation.divider') })}}
+//- v-spacer
+//- v-btn.px-5(color='white', outlined, @click='deleteItem(current)')
+//- v-icon(left) mdi-delete
+//- span {{$t('navigation.delete', { kind: $t('navigation.divider') })}}
+
+//- v-card-text(v-if='current.kind')
+//- v-radio-group.pl-8(v-model='current.visibilityMode', mandatory, hide-details)
+//- v-radio(:label='$t("admin.navigation.visibilityMode.all")', value='all', color='primary')
+//- v-radio.mt-3(:label='$t("admin.navigation.visibilityMode.restricted")', value='restricted', color='primary')
+//- .pl-8
+//- v-select.pl-8.mt-3(
+//- item-text='name'
+//- item-value='id'
+//- outlined
+//- prepend-icon='mdi-account-group'
+//- label='Groups'
+//- :disabled='current.visibilityMode !== `restricted`'
+//- v-model='current.visibilityGroups'
+//- :items='groups'
+//- persistent-hint
+//- clearable
+//- multiple
+//- )
+//- template(v-else)
+//- v-toolbar(height='56', color='teal lighten-1', flat, dark)
+//- v-card-text.grey--text(v-if='currentTree.length > 0') {{$t('navigation.noSelectionText')}}
+//- v-card-text.grey--text(v-else) {{$t('navigation.noItemsText')}}
+
+//- v-dialog(v-model='copyFromLocaleDialogIsShown', max-width='650', persistent)
+//- v-card
+//- .dialog-header.is-short.is-teal
+//- v-icon.mr-3(color='white') mdi-arrange-send-backward
+//- span {{$t('admin.navigation.copyFromLocale')}}
+//- v-card-text.pt-5
+//- .body-2 {{$t('admin.navigation.copyFromLocaleInfoText')}}
+//- v-select.mt-3(
+//- :items='locales'
+//- item-text='nativeName'
+//- item-value='code'
+//- outlined
+//- prepend-icon='mdi-web'
+//- v-model='copyFromLocaleCode'
+//- :label='$t(`admin.navigation.sourceLocale`)'
+//- :hint='$t(`admin.navigation.sourceLocaleHint`)'
+//- persistent-hint
+//- )
+//- v-card-chin
+//- v-spacer
+//- v-btn(text, @click='copyFromLocaleDialogIsShown = false') {{$t('common.actions.cancel')}}
+//- v-btn.px-3(depressed, color='primary', @click='copyFromLocale')
+//- v-icon(left) mdi-chevron-right
+//- span {{$t('common.actions.copy')}}
+
+//- page-selector(mode='select', v-model='selectPageModal', :open-handler='selectPageHandle', path='home', :locale='currentLang')
+
+
+
+
+
diff --git a/frontend/src/pages/AdminPages.vue b/frontend/src/pages/AdminPages.vue
new file mode 100644
index 00000000..4bd5958c
--- /dev/null
+++ b/frontend/src/pages/AdminPages.vue
@@ -0,0 +1,170 @@
+
+ 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
+ )
+ 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')
+
+
+
+
+
diff --git a/frontend/src/pages/AdminPagesEdit.vue b/frontend/src/pages/AdminPagesEdit.vue
new file mode 100644
index 00000000..ef29082c
--- /dev/null
+++ b/frontend/src/pages/AdminPagesEdit.vue
@@ -0,0 +1,235 @@
+
+ v-container(fluid, grid-list-lg)
+ v-layout(row, wrap, v-if='page.id')
+ v-flex(xs12)
+ .admin-header
+ img.animated.fadeInUp(src='/_assets/svg/icon-view-details.svg', alt='Edit Page', style='width: 80px;')
+ .admin-header-title
+ .headline.blue--text.text--darken-2.animated.fadeInLeft Page Details
+ .subtitle-1.grey--text.animated.fadeInLeft.wait-p2s
+ v-chip.ml-0.mr-2(label, small).caption ID {{page.id}}
+ span /{{page.locale}}/{{page.path}}
+ v-spacer
+ template(v-if='page.isPublished')
+ status-indicator.mr-3(positive, pulse)
+ .caption.green--text {{$t('common.page.published')}}
+ template(v-else)
+ status-indicator.mr-3(negative, pulse)
+ .caption.red--text {{$t('common.page.unpublished')}}
+ template(v-if='page.isPrivate')
+ status-indicator.mr-3.ml-4(intermediary, pulse)
+ .caption.deep-orange--text {{$t('common.page.private')}}
+ template(v-else)
+ status-indicator.mr-3.ml-4(active, pulse)
+ .caption.blue--text {{$t('common.page.global')}}
+ v-spacer
+ v-btn.animated.fadeInDown.wait-p3s(color='grey', icon, outlined, to='/pages')
+ v-icon mdi-arrow-left
+ v-menu(offset-y, origin='top right')
+ template(v-slot:activator='{ on }')
+ v-btn.mx-3.animated.fadeInDown.wait-p2s(color='black', v-on='on', depressed, dark)
+ span Actions
+ v-icon(right) mdi-chevron-down
+ v-list(dense, nav)
+ v-list-item(:href='`/` + page.locale + `/` + page.path')
+ v-list-item-icon
+ v-icon(color='indigo') mdi-text-subject
+ v-list-item-title View
+ v-list-item(:href='`/e/` + page.locale + `/` + page.path')
+ v-list-item-icon
+ v-icon(color='indigo') mdi-pencil
+ v-list-item-title Edit
+ v-list-item(@click='', disabled)
+ v-list-item-icon
+ v-icon(color='grey') mdi-cube-scan
+ v-list-item-title Re-Render
+ v-list-item(@click='', disabled)
+ v-list-item-icon
+ v-icon(color='grey') mdi-earth-remove
+ v-list-item-title Unpublish
+ v-list-item(:href='`/s/` + page.locale + `/` + page.path')
+ v-list-item-icon
+ v-icon(color='indigo') mdi-code-tags
+ v-list-item-title View Source
+ v-list-item(:href='`/h/` + page.locale + `/` + page.path')
+ v-list-item-icon
+ v-icon(color='indigo') mdi-history
+ v-list-item-title View History
+ v-list-item(@click='', disabled)
+ v-list-item-icon
+ v-icon(color='grey') mdi-content-duplicate
+ v-list-item-title Duplicate
+ v-list-item(@click='', disabled)
+ v-list-item-icon
+ v-icon(color='grey') mdi-content-save-move-outline
+ v-list-item-title Move / Rename
+ v-dialog(v-model='deletePageDialog', max-width='500')
+ template(v-slot:activator='{ on }')
+ v-list-item(v-on='on')
+ v-list-item-icon
+ v-icon(color='red') mdi-trash-can-outline
+ v-list-item-title Delete
+ v-card
+ .dialog-header.is-short.is-red
+ v-icon.mr-2(color='white') mdi-file-document-box-remove-outline
+ span {{$t('common.page.delete')}}
+ v-card-text.pt-5
+ i18next.body-2(path='common.page.deleteTitle', tag='div')
+ span.red--text.text--darken-2(place='title') {{page.title}}
+ .caption {{$t('common.page.deleteSubtitle')}}
+ v-chip.mt-3.ml-0.mr-1(label, color='red lighten-4', disabled, small)
+ .caption.red--text.text--darken-2 {{page.locale.toUpperCase()}}
+ v-chip.mt-3.mx-0(label, color='red lighten-5', disabled, small)
+ span.red--text.text--darken-2 /{{page.path}}
+ v-card-chin
+ v-spacer
+ v-btn(text, @click='deletePageDialog = false', :disabled='loading') {{$t('common.actions.cancel')}}
+ v-btn(color='red darken-2', @click='deletePage', :loading='loading').white--text {{$t('common.actions.delete')}}
+ v-btn.animated.fadeInDown(color='success', large, depressed, disabled)
+ v-icon(left) mdi-check
+ span Save Changes
+ v-flex(xs12, lg6)
+ v-card.animated.fadeInUp
+ v-toolbar(color='primary', dense, dark, flat)
+ v-icon.mr-2 mdi-text-subject
+ span Properties
+ v-list.py-0(two-line, dense)
+ v-list-item
+ v-list-item-content
+ v-list-item-title: .overline.grey--text Title
+ v-list-item-subtitle.body-2(:class='$vuetify.theme.dark ? `grey--text text--lighten-2` : `grey--text text--darken-3`') {{ page.title }}
+ v-divider
+ v-list-item
+ v-list-item-content
+ v-list-item-title: .overline.grey--text Description
+ v-list-item-subtitle.body-2(:class='$vuetify.theme.dark ? `grey--text text--lighten-2` : `grey--text text--darken-3`') {{ page.description || '-' }}
+ v-divider
+ v-list-item
+ v-list-item-content
+ v-list-item-title: .overline.grey--text Locale
+ v-list-item-subtitle.body-2(:class='$vuetify.theme.dark ? `grey--text text--lighten-2` : `grey--text text--darken-3`') {{ page.locale }}
+ v-divider
+ v-list-item
+ v-list-item-content
+ v-list-item-title: .overline.grey--text Path
+ v-list-item-subtitle.body-2(:class='$vuetify.theme.dark ? `grey--text text--lighten-2` : `grey--text text--darken-3`') {{ page.path }}
+ v-divider
+ v-list-item
+ v-list-item-content
+ v-list-item-title: .overline.grey--text Editor
+ v-list-item-subtitle.body-2(:class='$vuetify.theme.dark ? `grey--text text--lighten-2` : `grey--text text--darken-3`') {{ page.editor || '?' }}
+ v-divider
+ v-list-item
+ v-list-item-content
+ v-list-item-title: .overline.grey--text Content Type
+ v-list-item-subtitle.body-2(:class='$vuetify.theme.dark ? `grey--text text--lighten-2` : `grey--text text--darken-3`') {{ page.contentType || '?' }}
+ v-divider
+ v-list-item
+ v-list-item-content
+ v-list-item-title: .overline.grey--text Page Hash
+ v-list-item-subtitle.body-2(:class='$vuetify.theme.dark ? `grey--text text--lighten-2` : `grey--text text--darken-3`') {{ page.hash }}
+
+ v-flex(xs12, lg6)
+ v-card.animated.fadeInUp.wait-p2s
+ v-toolbar(color='primary', dense, dark, flat)
+ v-icon.mr-2 mdi-account-multiple
+ span Users
+ v-list.py-0(two-line, dense)
+ v-list-item
+ v-list-item-avatar(size='24')
+ v-btn(icon, :to='`/users/` + page.creatorId')
+ v-icon(color='grey') mdi-account
+ v-list-item-content
+ v-list-item-title: .overline.grey--text Creator
+ v-list-item-subtitle.body-2(:class='$vuetify.theme.dark ? `grey--text text--lighten-2` : `grey--text text--darken-3`') {{ page.creatorName }} #[em.caption ({{ page.creatorEmail }})]
+ v-list-item-action
+ v-list-item-action-text {{ page.createdAt | moment('calendar') }}
+ v-divider
+ v-list-item
+ v-list-item-avatar(size='24')
+ v-btn(icon, :to='`/users/` + page.authorId')
+ v-icon(color='grey') mdi-account
+ v-list-item-content
+ v-list-item-title: .overline.grey--text Last Editor
+ v-list-item-subtitle.body-2(:class='$vuetify.theme.dark ? `grey--text text--lighten-2` : `grey--text text--darken-3`') {{ page.authorName }} #[em.caption ({{ page.authorEmail }})]
+ v-list-item-action
+ v-list-item-action-text {{ page.updatedAt | moment('calendar') }}
+
+ v-layout(row, align-center, v-else)
+ v-progress-circular(indeterminate, width='2', color='grey')
+ .body-2.pl-3.grey--text {{ $t('common.page.loading') }}
+
+
+
+
+
diff --git a/frontend/src/pages/AdminPagesVisualize.vue b/frontend/src/pages/AdminPagesVisualize.vue
new file mode 100644
index 00000000..e02cdaae
--- /dev/null
+++ b/frontend/src/pages/AdminPagesVisualize.vue
@@ -0,0 +1,405 @@
+
+ v-container(fluid, grid-list-lg)
+ v-layout(row wrap)
+ v-flex(xs12)
+ .admin-header
+ img.animated.fadeInUp(src='/_assets/svg/icon-venn-diagram.svg', alt='Visualize Pages', style='width: 80px;')
+ .admin-header-title
+ .headline.blue--text.text--darken-2.animated.fadeInLeft Visualize Pages
+ .subtitle-1.grey--text.animated.fadeInLeft.wait-p2s Dendrogram representation of your pages
+ v-spacer
+ v-select.mx-5.animated.fadeInDown.wait-p1s(
+ v-if='locales.length > 0'
+ v-model='currentLocale'
+ :items='locales'
+ style='flex: 0 1 120px;'
+ solo
+ dense
+ hide-details
+ item-value='code'
+ item-text='name'
+ )
+ v-btn-toggle.animated.fadeInDown(v-model='graphMode', color='primary', dense, rounded)
+ v-btn.px-5(value='htree')
+ v-icon(left, :color='graphMode === `htree` ? `primary` : `grey darken-3`') mdi-sitemap
+ span.text-none Hierarchical Tree
+ v-btn.px-5(value='hradial')
+ v-icon(left, :color='graphMode === `hradial` ? `primary` : `grey darken-3`') mdi-chart-donut-variant
+ span.text-none Hierarchical Radial
+ v-btn.px-5(value='rradial')
+ v-icon(left, :color='graphMode === `rradial` ? `primary` : `grey darken-3`') mdi-blur-radial
+ span.text-none Relational Radial
+ .admin-pages-visualize-svg(ref='svgContainer', v-show='pages.length >= 1')
+ v-alert(v-if='pages.length < 1', outlined, type='warning', style='max-width: 650px; margin: 0 auto;') Looks like there's no data yet to graph!
+
+
+
+
+
diff --git a/frontend/src/pages/AdminRendering.vue b/frontend/src/pages/AdminRendering.vue
new file mode 100644
index 00000000..165ddae0
--- /dev/null
+++ b/frontend/src/pages/AdminRendering.vue
@@ -0,0 +1,116 @@
+
+q-page.admin-mail
+ .row.q-pa-md.items-center
+ .col-auto
+ img.admin-icon.animated.fadeInLeft(src='/_assets/icons/fluent-rich-text-converter.svg')
+ .col.q-pl-md
+ .text-h5.text-primary.animated.fadeInLeft {{ $t('admin.rendering.title') }}
+ .text-subtitle1.text-grey.animated.fadeInLeft.wait-p2s {{ $t('admin.rendering.subtitle') }}
+ .col-auto
+ q-btn.q-mr-sm.acrylic-btn(
+ icon='las la-question-circle'
+ flat
+ color='grey'
+ :href='siteStore.docsBase + `/system/rendering`'
+ target='_blank'
+ type='a'
+ )
+ q-btn.q-mr-sm.acrylic-btn(
+ icon='las la-redo-alt'
+ flat
+ color='secondary'
+ :loading='state.loading > 0'
+ @click='load'
+ )
+ q-tooltip {{ t(`common.actions.refresh`) }}
+ q-btn(
+ unelevated
+ icon='mdi-check'
+ :label='$t(`common.actions.apply`)'
+ color='secondary'
+ @click='save'
+ :disabled='state.loading > 0'
+ )
+ q-separator(inset)
+
+ .row.q-pa-md.q-col-gutter-md
+ .col-auto
+ q-card.rounded-borders.bg-dark
+ q-list(
+ style='min-width: 300px;'
+ padding
+ dark
+ )
+ q-item(
+ v-for='rdr of state.renderers'
+ :key='rdr.key'
+ active-class='bg-primary text-white'
+ :active='state.selectedRenderer === rdr.id'
+ @click='state.selectedRenderer = rdr.id'
+ clickable
+ )
+ q-item-section(side)
+ q-icon(:name='`img:` + rdr.icon')
+ q-item-section
+ q-item-label {{rdr.title}}
+ q-item-label(caption) {{rdr.description}}
+ q-item-section(side)
+ status-light(:color='rdr.isEnabled ? `positive` : `negative`', :pulse='rdr.isEnabled')
+ .col
+ .row.q-col-gutter-md
+ .col-12.col-lg
+
+
+
+
diff --git a/frontend/src/pages/AdminScheduler.vue b/frontend/src/pages/AdminScheduler.vue
new file mode 100644
index 00000000..27d23a1f
--- /dev/null
+++ b/frontend/src/pages/AdminScheduler.vue
@@ -0,0 +1,644 @@
+
+q-page.admin-terminal
+ .row.q-pa-md.items-center
+ .col-auto
+ img.admin-icon.animated.fadeInLeft(src='/_assets/icons/fluent-bot-animated.svg')
+ .col.q-pl-md
+ .text-h5.text-primary.animated.fadeInLeft {{ t('admin.scheduler.title') }}
+ .text-subtitle1.text-grey.animated.fadeInLeft.wait-p2s {{ t('admin.scheduler.subtitle') }}
+ .col-auto.flex
+ q-btn-toggle.q-mr-md(
+ v-model='state.displayMode'
+ push
+ no-caps
+ :disable='state.loading > 0'
+ :toggle-color='$q.dark.isActive ? `white` : `black`'
+ :toggle-text-color='$q.dark.isActive ? `black` : `white`'
+ :text-color='$q.dark.isActive ? `white` : `black`'
+ :color='$q.dark.isActive ? `dark-1` : `white`'
+ :options=`[
+ { label: t('admin.scheduler.schedule'), value: 'scheduled' },
+ { label: t('admin.scheduler.upcoming'), value: 'upcoming' },
+ { label: t('admin.scheduler.active'), value: 'active' },
+ { label: t('admin.scheduler.completed'), value: 'completed' },
+ { label: t('admin.scheduler.failed'), value: 'failed' },
+ ]`
+ )
+ q-separator.q-mr-md(vertical)
+ q-btn.q-mr-sm.acrylic-btn(
+ icon='las la-question-circle'
+ flat
+ color='grey'
+ :aria-label='t(`common.actions.viewDocs`)'
+ :href='siteStore.docsBase + `/system/scheduler`'
+ target='_blank'
+ type='a'
+ )
+ q-tooltip {{ t(`common.actions.viewDocs`) }}
+ q-btn.q-mr-sm.acrylic-btn(
+ icon='las la-redo-alt'
+ flat
+ color='secondary'
+ :loading='state.loading > 0'
+ :aria-label='t(`common.actions.refresh`)'
+ @click='load'
+ )
+ q-tooltip {{ t(`common.actions.refresh`) }}
+ q-separator(inset)
+ .q-pa-md.q-gutter-md
+ template(v-if='state.displayMode === `scheduled`')
+ q-card.rounded-borders(
+ v-if='state.scheduledJobs.length < 1'
+ flat
+ :class='$q.dark.isActive ? `bg-dark-5 text-white` : `bg-grey-3 text-dark`'
+ )
+ q-card-section.items-center(horizontal)
+ q-card-section.col-auto.q-pr-none
+ q-icon(name='las la-info-circle', size='sm')
+ q-card-section.text-caption {{ t('admin.scheduler.scheduledNone') }}
+ q-card(v-else)
+ q-table(
+ :rows='state.scheduledJobs'
+ :columns='scheduledJobsHeaders'
+ row-key='name'
+ flat
+ hide-bottom
+ :rows-per-page-options='[0]'
+ :loading='state.loading > 0'
+ )
+ template(v-slot:body-cell-id='props')
+ q-td(:props='props')
+ q-spinner-clock.q-mr-sm(
+ color='indigo'
+ size='xs'
+ )
+ template(v-slot:body-cell-task='props')
+ q-td(:props='props')
+ strong {{props.value}}
+ div: small.text-grey {{props.row.id}}
+ template(v-slot:body-cell-cron='props')
+ q-td(:props='props')
+ q-chip(
+ square
+ size='md'
+ color='blue'
+ text-color='white'
+ )
+ span.font-robotomono {{ props.value }}
+ template(v-slot:body-cell-type='props')
+ q-td(:props='props')
+ q-chip(
+ square
+ size='md'
+ dense
+ color='deep-orange'
+ text-color='white'
+ )
+ small.text-uppercase {{ props.value }}
+ template(v-slot:body-cell-created='props')
+ q-td(:props='props')
+ span {{props.value}}
+ div: small.text-grey {{humanizeDate(props.row.createdAt)}}
+ template(v-slot:body-cell-updated='props')
+ q-td(:props='props')
+ span {{props.value}}
+ div: small.text-grey {{humanizeDate(props.row.updatedAt)}}
+ template(v-else-if='state.displayMode === `upcoming`')
+ q-card.rounded-borders(
+ v-if='state.upcomingJobs.length < 1'
+ flat
+ :class='$q.dark.isActive ? `bg-dark-5 text-white` : `bg-grey-3 text-dark`'
+ )
+ q-card-section.items-center(horizontal)
+ q-card-section.col-auto.q-pr-none
+ q-icon(name='las la-info-circle', size='sm')
+ q-card-section.text-caption {{ t('admin.scheduler.upcomingNone') }}
+ q-card(v-else)
+ q-table(
+ :rows='state.upcomingJobs'
+ :columns='upcomingJobsHeaders'
+ row-key='name'
+ flat
+ hide-bottom
+ :rows-per-page-options='[0]'
+ :loading='state.loading > 0'
+ )
+ template(v-slot:body-cell-id='props')
+ q-td(:props='props')
+ q-icon(name='las la-clock', color='primary', size='sm')
+ template(v-slot:body-cell-task='props')
+ q-td(:props='props')
+ strong {{props.value}}
+ div: small.text-grey {{props.row.id}}
+ template(v-slot:body-cell-waituntil='props')
+ q-td(:props='props')
+ span {{ props.value }}
+ div: small.text-grey {{humanizeDate(props.row.waitUntil)}}
+ template(v-slot:body-cell-retries='props')
+ q-td(:props='props')
+ span #[strong {{props.value + 1}}] #[span.text-grey / {{props.row.maxRetries + 1}}]
+ template(v-slot:body-cell-useworker='props')
+ q-td(:props='props')
+ template(v-if='props.value')
+ q-icon(name='las la-microchip', color='brown', size='sm')
+ small.q-ml-xs.text-brown Worker
+ template(v-else)
+ q-icon(name='las la-leaf', color='teal', size='sm')
+ small.q-ml-xs.text-teal In-Process
+ template(v-slot:body-cell-date='props')
+ q-td(:props='props')
+ span {{props.value}}
+ div
+ i18n-t.text-grey(keypath='admin.scheduler.createdBy', tag='small')
+ template(#instance)
+ strong {{props.row.createdBy}}
+ template(v-slot:body-cell-cancel='props')
+ q-td(:props='props')
+ q-btn.acrylic-btn.q-px-sm(
+ flat
+ icon='las la-window-close'
+ color='negative'
+ @click='cancelJob(props.row.id)'
+ )
+ q-tooltip(anchor='center left', self='center right') {{ t('admin.scheduler.cancelJob') }}
+ template(v-else)
+ q-card.rounded-borders(
+ v-if='state.jobs.length < 1'
+ flat
+ :class='$q.dark.isActive ? `bg-dark-5 text-white` : `bg-grey-3 text-dark`'
+ )
+ q-card-section.items-center(horizontal)
+ q-card-section.col-auto.q-pr-none
+ q-icon(name='las la-info-circle', size='sm')
+ q-card-section.text-caption {{ t('admin.scheduler.' + state.displayMode + 'None') }}
+ q-card(v-else)
+ q-table(
+ :rows='state.jobs'
+ :columns='jobsHeaders'
+ row-key='name'
+ flat
+ hide-bottom
+ :rows-per-page-options='[0]'
+ :loading='state.loading > 0'
+ )
+ template(v-slot:body-cell-id='props')
+ q-td(:props='props')
+ q-avatar(
+ v-if='props.row.state === `completed`'
+ icon='las la-check'
+ color='positive'
+ text-color='white'
+ size='sm'
+ rounded
+ )
+ q-avatar(
+ v-else-if='props.row.state === `failed`'
+ icon='las la-times'
+ color='negative'
+ text-color='white'
+ size='sm'
+ rounded
+ )
+ q-avatar(
+ v-else-if='props.row.state === `interrupted`'
+ icon='las la-square-full'
+ color='orange'
+ text-color='white'
+ size='sm'
+ rounded
+ )
+ q-circular-progress(
+ v-else-if='props.row.state === `active`'
+ indeterminate
+ size='sm'
+ :thickness='0.4'
+ color='blue'
+ track-color='blue-1'
+ center-color='blue-2'
+ )
+ template(v-slot:body-cell-task='props')
+ q-td(:props='props')
+ strong {{props.value}}
+ div: small.text-grey {{props.row.id}}
+ template(v-slot:body-cell-state='props')
+ q-td(:props='props')
+ template(v-if='props.value === `completed`')
+ i18n-t(keypath='admin.scheduler.completedIn', tag='span')
+ template(#duration)
+ strong {{humanizeDuration(props.row.startedAt, props.row.completedAt)}}
+ div: small.text-grey {{ humanizeDate(props.row.completedAt) }}
+ template(v-else-if='props.value === `active`')
+ em.text-grey {{ t('admin.scheduler.pending') }}
+ template(v-else)
+ strong.text-negative {{ props.value === 'failed' ? t('admin.scheduler.error') : t('admin.scheduler.interrupted') }}
+ div: small {{ props.row.lastErrorMessage }}
+ template(v-slot:body-cell-attempt='props')
+ q-td(:props='props')
+ span #[strong {{props.value}}] #[span.text-grey / {{props.row.maxRetries + 1}}]
+ template(v-slot:body-cell-useworker='props')
+ q-td(:props='props')
+ template(v-if='props.value')
+ q-icon(name='las la-microchip', color='brown', size='sm')
+ small.q-ml-xs.text-brown Worker
+ template(v-else)
+ q-icon(name='las la-leaf', color='teal', size='sm')
+ small.q-ml-xs.text-teal In-Process
+ template(v-slot:body-cell-date='props')
+ q-td(:props='props')
+ span {{props.value}}
+ div: small.text-grey {{humanizeDate(props.row.startedAt)}}
+ div
+ i18n-t.text-grey(keypath='admin.scheduler.createdBy', tag='small')
+ template(#instance)
+ strong {{props.row.executedBy}}
+ template(v-slot:body-cell-actions='props')
+ q-td(:props='props')
+ q-btn.acrylic-btn.q-px-sm(
+ v-if='props.row.state !== `active`'
+ flat
+ icon='las la-undo-alt'
+ color='orange'
+ @click='retryJob(props.row.id)'
+ :disable='props.row.state === `interrupted` || props.row.state === `failed` && props.row.attempt < props.row.maxRetries'
+ )
+ q-tooltip(anchor='center left', self='center right') {{ t('admin.scheduler.retryJob') }}
+
+
+
+
diff --git a/frontend/src/pages/AdminSearch.vue b/frontend/src/pages/AdminSearch.vue
new file mode 100644
index 00000000..1cab1cad
--- /dev/null
+++ b/frontend/src/pages/AdminSearch.vue
@@ -0,0 +1,241 @@
+
+q-page.admin-flags
+ .row.q-pa-md.items-center
+ .col-auto
+ img.admin-icon.animated.fadeInLeft(src='/_assets/icons/fluent-find-and-replace.svg')
+ .col.q-pl-md
+ .text-h5.text-primary.animated.fadeInLeft {{ t('admin.search.title') }}
+ .text-subtitle1.text-grey.animated.fadeInLeft.wait-p2s {{ t('admin.search.subtitle') }}
+ .col-auto.flex
+ q-btn.q-mr-sm.acrylic-btn(
+ flat
+ icon='mdi-database-refresh'
+ :label='t(`admin.searchRebuildIndex`)'
+ color='purple'
+ @click='rebuild'
+ :loading='state.rebuildLoading'
+ )
+ q-separator.q-mr-sm(vertical)
+ q-btn.q-mr-sm.acrylic-btn(
+ icon='las la-question-circle'
+ flat
+ color='grey'
+ :aria-label='t(`common.actions.viewDocs`)'
+ :href='siteStore.docsBase + `/system/search`'
+ target='_blank'
+ type='a'
+ )
+ q-tooltip {{ t(`common.actions.viewDocs`) }}
+ q-btn.q-mr-sm.acrylic-btn(
+ icon='las la-redo-alt'
+ flat
+ color='secondary'
+ :loading='state.loading > 0'
+ :aria-label='t(`common.actions.refresh`)'
+ @click='load'
+ )
+ q-tooltip {{ t(`common.actions.refresh`) }}
+ q-btn(
+ unelevated
+ icon='mdi-check'
+ :label='t(`common.actions.apply`)'
+ color='secondary'
+ @click='save'
+ :loading='state.loading > 0'
+ )
+ q-separator(inset)
+ .row.q-pa-md.q-col-gutter-md
+ .col-12.col-lg-7
+ q-card.q-py-sm
+ q-item(tag='label')
+ blueprint-icon(icon='search')
+ q-item-section
+ q-item-label {{t(`admin.search.highlighting`)}}
+ q-item-label(caption) {{t(`admin.search.highlightingHint`)}}
+ q-item-section(avatar)
+ q-toggle(
+ v-model='state.config.termHighlighting'
+ color='primary'
+ checked-icon='las la-check'
+ unchecked-icon='las la-times'
+ :aria-label='t(`admin.search.highlighting`)'
+ )
+ q-separator.q-my-sm(inset)
+ q-item
+ blueprint-icon.self-start(icon='search')
+ q-item-section
+ q-item-label {{t(`admin.search.dictOverrides`)}}
+ q-no-ssr(:placeholder='t(`common.loading`)')
+ util-code-editor.admin-theme-cm.q-my-sm(
+ v-model='state.config.dictOverrides'
+ language='json'
+ :min-height='250'
+ )
+ q-item-label(caption)
+ i18n-t(keypath='admin.search.dictOverridesHint' tag='span')
+ span { "en": "english" }
+
+ .col-12.col-lg-5.gt-md
+ .q-pa-md.text-center
+ img(src='/_assets/illustrations/undraw_file_searching.svg', style='width: 80%;')
+
+
+
+
+
diff --git a/frontend/src/pages/AdminSecurity.vue b/frontend/src/pages/AdminSecurity.vue
new file mode 100644
index 00000000..10d2c28a
--- /dev/null
+++ b/frontend/src/pages/AdminSecurity.vue
@@ -0,0 +1,524 @@
+
+q-page.admin-mail
+ .row.q-pa-md.items-center
+ .col-auto
+ img.admin-icon.animated.fadeInLeft(src='/_assets/icons/fluent-protect.svg')
+ .col.q-pl-md
+ .text-h5.text-primary.animated.fadeInLeft {{ t('admin.security.title') }}
+ .text-subtitle1.text-grey.animated.fadeInLeft.wait-p2s {{ t('admin.security.subtitle') }}
+ .col-auto
+ q-btn.q-mr-sm.acrylic-btn(
+ icon='las la-question-circle'
+ flat
+ color='grey'
+ :aria-label='t(`common.actions.viewDocs`)'
+ :href='siteStore.docsBase + `/system/security`'
+ target='_blank'
+ type='a'
+ )
+ q-tooltip {{ t(`common.actions.viewDocs`) }}
+ q-btn.q-mr-sm.acrylic-btn(
+ icon='las la-redo-alt'
+ flat
+ color='secondary'
+ :loading='state.loading > 0'
+ :aria-label='t(`common.actions.refresh`)'
+ @click='load'
+ )
+ q-tooltip {{ t(`common.actions.refresh`) }}
+ q-btn(
+ unelevated
+ icon='mdi-check'
+ :label='t(`common.actions.apply`)'
+ color='secondary'
+ @click='save'
+ :loading='state.loading > 0'
+ )
+ q-separator(inset)
+ .row.q-pa-md.q-col-gutter-md
+ .col-12.col-lg-6
+ //- -----------------------
+ //- Security
+ //- -----------------------
+ q-card.q-pb-sm
+ q-card-section
+ .text-subtitle1 {{t('admin.security.title')}}
+ q-item.q-pt-none
+ q-item-section
+ q-card.bg-negative.text-white.rounded-borders(flat)
+ q-card-section.items-center(horizontal)
+ q-card-section.col-auto.q-pr-none
+ q-icon(name='las la-exclamation-triangle', size='sm')
+ q-card-section.text-caption {{ t('admin.security.warn') }}
+ q-item(tag='label', v-ripple)
+ blueprint-icon(icon='rfid-signal')
+ q-item-section
+ q-item-label {{t(`admin.security.disallowFloc`)}}
+ q-item-label(caption) {{t(`admin.security.disallowFlocHint`)}}
+ q-item-section(avatar)
+ q-toggle(
+ v-model='state.config.disallowFloc'
+ color='primary'
+ checked-icon='las la-check'
+ unchecked-icon='las la-times'
+ :aria-label='t(`admin.security.disallowFloc`)'
+ )
+ q-separator.q-my-sm(inset)
+ q-item(tag='label', v-ripple)
+ blueprint-icon(icon='maximize-window')
+ q-item-section
+ q-item-label {{t(`admin.security.disallowIframe`)}}
+ q-item-label(caption) {{t(`admin.security.disallowIframeHint`)}}
+ q-item-section(avatar)
+ q-toggle(
+ v-model='state.config.disallowIframe'
+ color='primary'
+ checked-icon='las la-check'
+ unchecked-icon='las la-times'
+ :aria-label='t(`admin.security.disallowIframe`)'
+ )
+ q-separator.q-my-sm(inset)
+ q-item(tag='label', v-ripple)
+ blueprint-icon(icon='do-not-touch')
+ q-item-section
+ q-item-label {{t(`admin.security.enforceSameOriginReferrerPolicy`)}}
+ q-item-label(caption) {{t(`admin.security.enforceSameOriginReferrerPolicyHint`)}}
+ q-item-section(avatar)
+ q-toggle(
+ v-model='state.config.enforceSameOriginReferrerPolicy'
+ color='primary'
+ checked-icon='las la-check'
+ unchecked-icon='las la-times'
+ :aria-label='t(`admin.security.enforceSameOriginReferrerPolicy`)'
+ )
+ q-separator.q-my-sm(inset)
+ q-item(tag='label', v-ripple)
+ blueprint-icon(icon='curly-arrow')
+ q-item-section
+ q-item-label {{t(`admin.security.disallowOpenRedirect`)}}
+ q-item-label(caption) {{t(`admin.security.disallowOpenRedirectHint`)}}
+ q-item-section(avatar)
+ q-toggle(
+ v-model='state.config.disallowOpenRedirect'
+ color='primary'
+ checked-icon='las la-check'
+ unchecked-icon='las la-times'
+ :aria-label='t(`admin.security.disallowOpenRedirect`)'
+ )
+ q-separator.q-my-sm(inset)
+ q-item(tag='label', v-ripple)
+ blueprint-icon(icon='download-from-cloud')
+ q-item-section
+ q-item-label {{t(`admin.security.forceAssetDownload`)}}
+ q-item-label(caption) {{t(`admin.security.forceAssetDownloadHint`)}}
+ q-item-section(avatar)
+ q-toggle(
+ v-model='state.config.forceAssetDownload'
+ color='primary'
+ checked-icon='las la-check'
+ unchecked-icon='las la-times'
+ :aria-label='t(`admin.security.forceAssetDownload`)'
+ )
+ q-separator.q-my-sm(inset)
+ q-item(tag='label', v-ripple)
+ blueprint-icon(icon='door-sensor-alarmed')
+ q-item-section
+ q-item-label {{t(`admin.security.trustProxy`)}}
+ q-item-label(caption) {{t(`admin.security.trustProxyHint`)}}
+ q-item-section(avatar)
+ q-toggle(
+ v-model='state.config.trustProxy'
+ color='primary'
+ checked-icon='las la-check'
+ unchecked-icon='las la-times'
+ :aria-label='t(`admin.security.trustProxy`)'
+ )
+ //- -----------------------
+ //- HSTS
+ //- -----------------------
+ q-card.q-pb-sm.q-mt-md
+ q-card-section
+ .text-subtitle1 {{t('admin.security.hsts')}}
+ q-item(tag='label', v-ripple)
+ blueprint-icon(icon='hips')
+ q-item-section
+ q-item-label {{t(`admin.security.enforceHsts`)}}
+ q-item-label(caption) {{t(`admin.security.enforceHstsHint`)}}
+ q-item-section(avatar)
+ q-toggle(
+ v-model='state.config.enforceHsts'
+ color='primary'
+ checked-icon='las la-check'
+ unchecked-icon='las la-times'
+ :aria-label='t(`admin.security.enforceHsts`)'
+ )
+ template(v-if='state.config.enforceHsts')
+ q-separator.q-my-sm(inset)
+ q-item
+ blueprint-icon(icon='timer')
+ q-item-section
+ q-item-label {{t(`admin.security.hstsDuration`)}}
+ q-item-label(caption) {{t(`admin.security.hstsDurationHint`)}}
+ q-item-section(style='flex: 0 0 200px;')
+ q-select(
+ outlined
+ v-model='state.config.hstsDuration'
+ :options='hstsDurations'
+ option-value='value'
+ option-label='text'
+ emit-value
+ map-options
+ dense
+ :aria-label='t(`admin.security.hstsDuration`)'
+ )
+
+ .col-12.col-lg-6
+ //- -----------------------
+ //- Uploads
+ //- -----------------------
+ q-card.q-pb-sm
+ q-card-section
+ .text-subtitle1 {{t('admin.security.uploads')}}
+ q-item.q-pt-none
+ q-item-section
+ q-card.bg-info.text-white.rounded-borders(flat)
+ q-card-section.items-center(horizontal)
+ q-card-section.col-auto.q-pr-none
+ q-icon(name='las la-info-circle', size='sm')
+ q-card-section.text-caption {{ t('admin.security.uploadsInfo') }}
+ q-item
+ blueprint-icon(icon='upload-to-the-cloud')
+ q-item-section
+ q-item-label {{t(`admin.security.maxUploadSize`)}}
+ q-item-label(caption) {{t(`admin.security.maxUploadSizeHint`)}}
+ q-item-section(style='flex: 0 0 200px;')
+ q-input(
+ outlined
+ v-model.number='state.humanUploadMaxFileSize'
+ dense
+ :aria-label='t(`admin.security.maxUploadSize`)'
+ )
+ q-separator.q-my-sm(inset)
+ q-item
+ blueprint-icon(icon='upload-to-ftp')
+ q-item-section
+ q-item-label {{t(`admin.security.maxUploadBatch`)}}
+ q-item-label(caption) {{t(`admin.security.maxUploadBatchHint`)}}
+ q-item-section(style='flex: 0 0 200px;')
+ q-input(
+ outlined
+ v-model.number='state.config.uploadMaxFiles'
+ dense
+ :suffix='t(`admin.security.maxUploadBatchSuffix`)'
+ :aria-label='t(`admin.security.maxUploadBatch`)'
+ )
+ q-separator.q-my-sm(inset)
+ q-item(tag='label', v-ripple)
+ blueprint-icon(icon='scan-stock')
+ q-item-section
+ q-item-label {{t(`admin.security.scanSVG`)}}
+ q-item-label(caption) {{t(`admin.security.scanSVGHint`)}}
+ q-item-section(avatar)
+ q-toggle(
+ v-model='state.config.uploadScanSVG'
+ color='primary'
+ checked-icon='las la-check'
+ unchecked-icon='las la-times'
+ :aria-label='t(`admin.security.scanSVG`)'
+ )
+
+ //- -----------------------
+ //- CORS
+ //- -----------------------
+ q-card.q-pb-sm.q-mt-md
+ q-card-section
+ .text-subtitle1 {{t('admin.security.cors')}}
+ q-item
+ blueprint-icon(icon='firewall')
+ q-item-section
+ q-item-label {{t(`admin.security.corsMode`)}}
+ q-item-label(caption) {{t(`admin.security.corsModeHint`)}}
+ q-item-section
+ q-select(
+ outlined
+ v-model='state.config.corsMode'
+ :options='corsModes'
+ option-value='value'
+ option-label='text'
+ emit-value
+ map-options
+ dense
+ :aria-label='t(`admin.security.corsMode`)'
+ )
+ template(v-if='state.config.corsMode === `HOSTNAMES`')
+ q-separator.q-my-sm(inset)
+ q-item
+ blueprint-icon(icon='todo-list', key='corsHostnames')
+ q-item-section
+ q-item-label {{t(`admin.security.corsHostnames`)}}
+ q-item-label(caption) {{t(`admin.security.corsHostnamesHint`)}}
+ q-item-section
+ q-input(
+ outlined
+ v-model='state.config.corsConfig'
+ dense
+ type='textarea'
+ :aria-label='t(`admin.security.corsHostnames`)'
+ )
+ template(v-else-if='state.config.corsMode === `REGEX`')
+ q-separator.q-my-sm(inset)
+ q-item
+ blueprint-icon(icon='validation', key='corsRegex')
+ q-item-section
+ q-item-label {{t(`admin.security.corsRegex`)}}
+ q-item-label(caption) {{t(`admin.security.corsRegexHint`)}}
+ q-item-section
+ q-input(
+ outlined
+ v-model='state.config.corsConfig'
+ dense
+ :aria-label='t(`admin.security.corsRegex`)'
+ )
+
+ //- -----------------------
+ //- JWT
+ //- -----------------------
+ q-card.q-pb-sm.q-mt-md
+ q-card-section
+ .text-subtitle1 {{t('admin.security.jwt')}}
+ q-item
+ blueprint-icon(icon='ticket')
+ q-item-section
+ q-item-label {{t(`admin.security.jwtAudience`)}}
+ q-item-label(caption) {{t(`admin.security.jwtAudienceHint`)}}
+ q-item-section(style='flex: 0 0 250px;')
+ q-input(
+ outlined
+ v-model='state.config.authJwtAudience'
+ dense
+ :aria-label='t(`admin.security.jwtAudience`)'
+ )
+ q-separator.q-my-sm(inset)
+ q-item
+ blueprint-icon(icon='expired')
+ q-item-section
+ q-item-label {{t(`admin.security.tokenExpiration`)}}
+ q-item-label(caption) {{t(`admin.security.tokenExpirationHint`)}}
+ q-item-section(style='flex: 0 0 140px;')
+ q-input(
+ outlined
+ v-model='state.config.authJwtExpiration'
+ dense
+ :aria-label='t(`admin.security.tokenExpiration`)'
+ )
+ q-separator.q-my-sm(inset)
+ q-item
+ blueprint-icon(icon='future')
+ q-item-section
+ q-item-label {{t(`admin.security.tokenRenewalPeriod`)}}
+ q-item-label(caption) {{t(`admin.security.tokenRenewalPeriodHint`)}}
+ q-item-section(style='flex: 0 0 140px;')
+ q-input(
+ outlined
+ v-model='state.config.authJwtRenewablePeriod'
+ dense
+ :aria-label='t(`admin.security.tokenRenewalPeriod`)'
+ )
+
+
+
+
+
diff --git a/frontend/src/pages/AdminSites.vue b/frontend/src/pages/AdminSites.vue
new file mode 100644
index 00000000..7ecaf70d
--- /dev/null
+++ b/frontend/src/pages/AdminSites.vue
@@ -0,0 +1,189 @@
+
+q-page.admin-locale
+ .row.q-pa-md.items-center
+ .col-auto
+ img.admin-icon.animated.fadeInLeft(src='/_assets/icons/fluent-change-theme.svg')
+ .col.q-pl-md
+ .text-h5.text-primary.animated.fadeInLeft {{ t('admin.sites.title') }}
+ .text-subtitle1.text-grey.animated.fadeInLeft.wait-p2s {{ t('admin.sites.subtitle') }}
+ .col-auto
+ q-btn.q-mr-sm.acrylic-btn(
+ icon='las la-question-circle'
+ flat
+ color='grey'
+ type='a'
+ :aria-label='t(`common.actions.viewDocs`)'
+ :href='siteStore.docsBase + `/admin/sites`'
+ target='_blank'
+ )
+ q-tooltip {{ t(`common.actions.viewDocs`) }}
+ q-btn.q-mr-sm.acrylic-btn(
+ icon='las la-redo-alt'
+ flat
+ color='secondary'
+ :aria-label='t(`common.actions.refresh`)'
+ @click='refresh'
+ )
+ q-tooltip {{ t(`common.actions.refresh`) }}
+ q-btn(
+ unelevated
+ icon='las la-plus'
+ :label='t(`admin.sites.new`)'
+ color='primary'
+ @click='createSite'
+ )
+ q-separator(inset)
+ .row.q-pa-md.q-col-gutter-md
+ .col-12
+ q-card
+ q-list(separator)
+ q-item(
+ v-for='site of adminStore.sites'
+ :key='site.id'
+ )
+ q-item-section(side)
+ q-icon(name='las la-chalkboard', color='primary')
+ q-item-section
+ strong {{site.title}}
+ q-item-section
+ div
+ q-chip.q-mx-none(
+ v-if='site.hostname !== `*`'
+ square
+ color='blue-7'
+ text-color='white'
+ size='sm'
+ )
+ q-avatar(
+ icon='las la-angle-right'
+ color='blue-5'
+ text-color='white'
+ )
+ span {{site.hostname}}
+ q-chip.q-mx-none(
+ v-else
+ square
+ color='indigo-7'
+ text-color='white'
+ size='sm'
+ )
+ q-avatar(
+ icon='las la-asterisk'
+ color='indigo-5'
+ text-color='white'
+ )
+ span catch-all
+ q-item-section(side)
+ q-toggle(
+ :model-value='site.isEnabled'
+ color='primary'
+ checked-icon='las la-check'
+ unchecked-icon='las la-times'
+ :label='t(`admin.sites.isActive`)'
+ :aria-label='t(`admin.sites.isActive`)'
+ @update:model-value ='(val) => { toggleSiteState(site, val) }'
+ )
+ q-separator.q-ml-md(vertical)
+ q-item-section(side, style='flex-direction: row; align-items: center;')
+ q-btn.acrylic-btn.q-mr-sm(
+ flat
+ @click='editSite(site)'
+ icon='las la-pen'
+ color='indigo'
+ :label='t(`common.actions.edit`)'
+ no-caps
+ )
+ q-btn.acrylic-btn(
+ flat
+ icon='las la-trash'
+ color='negative'
+ @click='deleteSite(site)'
+ :aria-label='t(`common.actions.delete`)'
+ )
+
+
+
diff --git a/frontend/src/pages/AdminSsl.vue b/frontend/src/pages/AdminSsl.vue
new file mode 100644
index 00000000..453f55b5
--- /dev/null
+++ b/frontend/src/pages/AdminSsl.vue
@@ -0,0 +1,269 @@
+
+ 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')}}
+
+
+
+
+
+
diff --git a/frontend/src/pages/AdminStats.vue b/frontend/src/pages/AdminStats.vue
new file mode 100644
index 00000000..cbfd09a3
--- /dev/null
+++ b/frontend/src/pages/AdminStats.vue
@@ -0,0 +1,32 @@
+
+ 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...
+
+
+
+
+
diff --git a/frontend/src/pages/AdminStorage.vue b/frontend/src/pages/AdminStorage.vue
new file mode 100644
index 00000000..df5e0ea1
--- /dev/null
+++ b/frontend/src/pages/AdminStorage.vue
@@ -0,0 +1,1262 @@
+
+q-page.admin-storage
+ .row.q-pa-md.items-center
+ .col-auto
+ img.admin-icon.animated.fadeInLeft(src='/_assets/icons/fluent-ssd-animated.svg')
+ .col.q-pl-md
+ .text-h5.text-primary.animated.fadeInLeft {{ t('admin.storage.title') }}
+ .text-subtitle1.text-grey.animated.fadeInLeft.wait-p2s {{ t('admin.storage.subtitle') }}
+ .col-auto.flex
+ q-spinner-tail.q-mr-md(
+ v-show='state.loading > 0'
+ color='accent'
+ size='sm'
+ )
+ q-btn-toggle.q-mr-md(
+ v-model='state.displayMode'
+ push
+ no-caps
+ :toggle-color='$q.dark.isActive ? `white` : `black`'
+ :toggle-text-color='$q.dark.isActive ? `black` : `white`'
+ :text-color='$q.dark.isActive ? `white` : `black`'
+ :color='$q.dark.isActive ? `dark-1` : `white`'
+ :options=`[
+ { label: t('admin.storage.targets'), value: 'targets' },
+ { label: t('admin.storage.deliveryPaths'), value: 'delivery' }
+ ]`
+ )
+ q-separator.q-mr-md(vertical)
+ q-btn.q-mr-sm.acrylic-btn(
+ icon='las la-question-circle'
+ flat
+ color='grey'
+ :aria-label='t(`common.actions.viewDocs`)'
+ :href='siteStore.docsBase + `/admin/storage`'
+ target='_blank'
+ type='a'
+ )
+ q-tooltip {{ t(`common.actions.viewDocs`) }}
+ q-btn(
+ unelevated
+ icon='mdi-check'
+ :label='t(`common.actions.apply`)'
+ color='secondary'
+ @click='save'
+ :loading='state.loading > 0'
+ )
+ q-separator(inset)
+
+ //- ==========================================
+ //- TARGETS
+ //- ==========================================
+
+ .row.q-pa-md.q-col-gutter-md(v-if='state.displayMode === `targets`')
+ .col-auto
+ q-card.rounded-borders.bg-dark
+ q-list(
+ style='min-width: 300px;'
+ padding
+ dark
+ )
+ q-item(
+ v-for='tgt of state.targets'
+ :key='tgt.key'
+ active-class='bg-primary text-white'
+ :active='state.selectedTarget === tgt.id'
+ :to='`/_admin/` + adminStore.currentSiteId + `/storage/` + tgt.id'
+ clickable
+ )
+ q-item-section(side)
+ q-icon(:name='`img:` + tgt.icon')
+ q-item-section
+ q-item-label {{tgt.title}}
+ q-item-label(caption, :class='getTargetSubtitleColor(tgt)') {{getTargetSubtitle(tgt)}}
+ q-item-section(side)
+ status-light(:color='tgt.isEnabled ? `positive` : `negative`', :pulse='tgt.isEnabled')
+ .col(v-if='state.target')
+ .row.q-col-gutter-md
+ .col-12.col-lg
+ //- -----------------------
+ //- Setup
+ //- -----------------------
+ q-card.q-pb-sm.q-mb-md(v-if='state.target.setup && state.target.setup.handler && state.target.setup.state !== `configured`')
+ q-card-section
+ .text-subtitle1 {{t('admin.storage.setup')}}
+ .text-body2.text-grey {{ t('admin.storage.setupHint') }}
+ template(v-if='state.target.setup.handler === `github` && state.target.setup.state === `notconfigured`')
+ q-item
+ blueprint-icon(icon='test-account')
+ q-item-section
+ q-item-label GitHub Account Type
+ q-item-label(caption) Whether to use an organization or personal GitHub account during setup.
+ q-item-section.col-auto
+ q-btn-toggle(
+ v-model='state.target.setup.values.accountType'
+ push
+ glossy
+ no-caps
+ toggle-color='primary'
+ :options=`[
+ { label: t('admin.storage.githubAccTypeOrg'), value: 'org' },
+ { label: t('admin.storage.githubAccTypePersonal'), value: 'personal' }
+ ]`
+ )
+ q-separator.q-my-sm(inset)
+ template(v-if='state.target.setup.values.accountType === `org`')
+ q-item
+ blueprint-icon(icon='github')
+ q-item-section
+ q-item-label {{ t('admin.storage.githubOrg') }}
+ q-item-label(caption) {{ t('admin.storage.githubOrgHint') }}
+ q-item-section
+ q-input(
+ outlined
+ v-model='state.target.setup.values.org'
+ dense
+ :aria-label='t(`admin.storage.githubOrg`)'
+ )
+ q-separator.q-my-sm(inset)
+ q-item
+ blueprint-icon(icon='dns')
+ q-item-section
+ q-item-label {{ t('admin.storage.githubPublicUrl') }}
+ q-item-label(caption) {{ t('admin.storage.githubPublicUrlHint') }}
+ q-item-section
+ q-input(
+ outlined
+ v-model='state.target.setup.values.publicUrl'
+ dense
+ :aria-label='t(`admin.storage.githubPublicUrl`)'
+ )
+ q-card-section.q-pt-sm.text-right
+ form(
+ ref='githubSetupForm'
+ method='POST'
+ :action='state.setupCfg.action'
+ )
+ input(
+ type='hidden'
+ name='manifest'
+ :value='state.setupCfg.manifest'
+ )
+ q-btn(
+ unelevated
+ icon='las la-angle-double-right'
+ :label='t(`admin.storage.startSetup`)'
+ color='secondary'
+ @click='setupGitHub'
+ :loading='state.setupCfg.loading'
+ )
+ template(v-else-if='state.target.setup.handler === `github` && state.target.setup.state === `pendinginstall`')
+ q-card-section.q-py-none
+ q-banner(
+ rounded
+ :class='$q.dark.isActive ? `bg-teal-9 text-white` : `bg-teal-1 text-teal-9`'
+ ) {{t('admin.storage.githubFinish')}}
+ q-card-section.q-pt-sm.text-right
+ q-btn.q-mr-sm(
+ unelevated
+ icon='las la-times-circle'
+ :label='t(`admin.storage.cancelSetup`)'
+ color='negative'
+ @click='setupDestroy'
+ )
+ q-btn(
+ unelevated
+ icon='las la-angle-double-right'
+ :label='t(`admin.storage.finishSetup`)'
+ color='secondary'
+ @click='setupGitHubStep(`verify`)'
+ :loading='state.setupCfg.loading'
+ )
+ q-card.q-pb-sm.q-mb-md(v-if='state.target.setup && state.target.setup.handler && state.target.setup.state === `configured`')
+ q-card-section
+ .text-subtitle1 {{t('admin.storage.setup')}}
+ .text-body2.text-grey {{ t('admin.storage.setupConfiguredHint') }}
+ q-item
+ blueprint-icon.self-start(icon='matches', :hue-rotate='140')
+ q-item-section
+ q-item-label Uninstall
+ q-item-label(caption) Delete the active configuration and start over the setup process.
+ q-item-label.text-red(caption): strong This action cannot be undone!
+ q-item-section(side)
+ q-btn.acrylic-btn(
+ flat
+ icon='las la-arrow-circle-right'
+ color='negative'
+ @click='setupDestroy'
+ :label='t(`admin.storage.uninstall`)'
+ )
+
+ //- -----------------------
+ //- Content Types
+ //- -----------------------
+ q-card.q-pb-sm
+ q-card-section
+ .text-subtitle1 {{t('admin.storage.contentTypes')}}
+ .text-body2.text-grey {{ t('admin.storage.contentTypesHint') }}
+ q-item(tag='label')
+ q-item-section(avatar)
+ q-checkbox(
+ v-model='state.target.contentTypes.activeTypes'
+ :color='state.target.module === `db` ? `grey` : `primary`'
+ val='pages'
+ :aria-label='t(`admin.storage.contentTypePages`)'
+ :disable='state.target.module === `db`'
+ )
+ q-item-section
+ q-item-label {{t(`admin.storage.contentTypePages`)}}
+ q-item-label(caption) {{t(`admin.storage.contentTypePagesHint`)}}
+ q-item(tag='label')
+ q-item-section(avatar)
+ q-checkbox(
+ v-model='state.target.contentTypes.activeTypes'
+ color='primary'
+ val='images'
+ :aria-label='t(`admin.storage.contentTypeImages`)'
+ )
+ q-item-section
+ q-item-label {{t(`admin.storage.contentTypeImages`)}}
+ q-item-label(caption) {{t(`admin.storage.contentTypeImagesHint`)}}
+ q-item(tag='label')
+ q-item-section(avatar)
+ q-checkbox(
+ v-model='state.target.contentTypes.activeTypes'
+ color='primary'
+ val='documents'
+ :aria-label='t(`admin.storage.contentTypeDocuments`)'
+ )
+ q-item-section
+ q-item-label {{t(`admin.storage.contentTypeDocuments`)}}
+ q-item-label(caption) {{t(`admin.storage.contentTypeDocumentsHint`)}}
+ q-item(tag='label')
+ q-item-section(avatar)
+ q-checkbox(
+ v-model='state.target.contentTypes.activeTypes'
+ color='primary'
+ val='others'
+ :aria-label='t(`admin.storage.contentTypeOthers`)'
+ )
+ q-item-section
+ q-item-label {{t(`admin.storage.contentTypeOthers`)}}
+ q-item-label(caption) {{t(`admin.storage.contentTypeOthersHint`)}}
+ q-item(tag='label')
+ q-item-section(avatar)
+ q-checkbox(
+ v-model='state.target.contentTypes.activeTypes'
+ color='primary'
+ val='large'
+ :aria-label='t(`admin.storage.contentTypeLargeFiles`)'
+ )
+ q-item-section
+ q-item-label {{t(`admin.storage.contentTypeLargeFiles`)}}
+ q-item-label(caption) {{t(`admin.storage.contentTypeLargeFilesHint`)}}
+ q-item-label.text-deep-orange(v-if='state.target.module === `db`', caption) {{t(`admin.storage.contentTypeLargeFilesDBWarn`)}}
+ q-item-section(side)
+ q-input(
+ outlined
+ :label='t(`admin.storage.contentTypeLargeFilesThreshold`)'
+ v-model='state.target.contentTypes.largeThreshold'
+ style='min-width: 150px;'
+ dense
+ )
+
+ //- -----------------------
+ //- Content Delivery
+ //- -----------------------
+ q-card.q-pb-sm.q-mt-md
+ q-card-section
+ .text-subtitle1 {{t('admin.storage.assetDelivery')}}
+ .text-body2.text-grey {{ t('admin.storage.assetDeliveryHint') }}
+ q-item(:tag='state.target.assetDelivery.isStreamingSupported ? `label` : null')
+ q-item-section(avatar)
+ q-checkbox(
+ v-model='state.target.assetDelivery.streaming'
+ :color='state.target.module === `db` || !state.target.assetDelivery.isStreamingSupported ? `grey` : `primary`'
+ :aria-label='t(`admin.storage.contentTypePages`)'
+ :disable='state.target.module === `db` || !state.target.assetDelivery.isStreamingSupported'
+ )
+ q-item-section
+ q-item-label {{t(`admin.storage.assetStreaming`)}}
+ q-item-label(caption) {{t(`admin.storage.assetStreamingHint`)}}
+ q-item-label.text-deep-orange(v-if='!state.target.assetDelivery.isStreamingSupported', caption) {{t(`admin.storage.assetStreamingNotSupported`)}}
+ q-item(:tag='state.target.assetDelivery.isDirectAccessSupported ? `label` : null')
+ q-item-section(avatar)
+ q-checkbox(
+ v-model='state.target.assetDelivery.directAccess'
+ :color='!state.target.assetDelivery.isDirectAccessSupported ? `grey` : `primary`'
+ :aria-label='t(`admin.storage.contentTypePages`)'
+ :disable='!state.target.assetDelivery.isDirectAccessSupported'
+ )
+ q-item-section
+ q-item-label {{t(`admin.storage.assetDirectAccess`)}}
+ q-item-label(caption) {{t(`admin.storage.assetDirectAccessHint`)}}
+ q-item-label.text-deep-orange(v-if='!state.target.assetDelivery.isDirectAccessSupported', caption) {{t(`admin.storage.assetDirectAccessNotSupported`)}}
+
+ //- -----------------------
+ //- Configuration
+ //- -----------------------
+ q-card.q-pb-sm.q-mt-md
+ q-card-section
+ .text-subtitle1 {{t('admin.storage.config')}}
+ q-banner.q-mt-md(
+ v-if='!state.target.config || Object.keys(state.target.config).length < 1'
+ rounded
+ :class='$q.dark.isActive ? `bg-negative text-white` : `bg-grey-2 text-grey-7`'
+ ) {{t('admin.storage.noConfigOption')}}
+ template(
+ v-for='(cfg, cfgKey, idx) in state.target.config'
+ )
+ template(
+ v-if='configIfCheck(cfg.if)'
+ )
+ q-separator.q-my-sm(inset, v-if='idx > 0')
+ q-item(v-if='cfg.type === `Boolean`', tag='label')
+ blueprint-icon(:icon='cfg.icon', :hue-rotate='cfg.readOnly ? -45 : 0')
+ q-item-section
+ q-item-label {{cfg.title}}
+ q-item-label(caption) {{cfg.hint}}
+ q-item-section(avatar)
+ q-toggle(
+ v-model='cfg.value'
+ color='primary'
+ checked-icon='las la-check'
+ unchecked-icon='las la-times'
+ :aria-label='t(`admin.general.allowComments`)'
+ :disable='cfg.readOnly'
+ )
+ q-item(v-else)
+ blueprint-icon(:icon='cfg.icon', :hue-rotate='cfg.readOnly ? -45 : 0')
+ q-item-section
+ q-item-label {{cfg.title}}
+ q-item-label(caption) {{cfg.hint}}
+ q-item-section(
+ :style='cfg.type === `Number` ? `flex: 0 0 150px;` : ``'
+ :class='{ "col-auto": cfg.enum && cfg.enumDisplay === `buttons` }'
+ )
+ q-btn-toggle(
+ v-if='cfg.enum && cfg.enumDisplay === `buttons`'
+ v-model='cfg.value'
+ push
+ glossy
+ no-caps
+ toggle-color='primary'
+ :options=`cfg.enum`
+ :disable='cfg.readOnly'
+ )
+ q-select(
+ v-else-if='cfg.enum'
+ outlined
+ v-model='cfg.value'
+ :options='cfg.enum'
+ emit-value
+ map-options
+ dense
+ options-dense
+ :aria-label='cfg.title'
+ :disable='cfg.readOnly'
+ )
+ q-input(
+ v-else
+ outlined
+ v-model='cfg.value'
+ dense
+ :type='cfg.multiline ? `textarea` : `input`'
+ :aria-label='cfg.title'
+ :disable='cfg.readOnly'
+ )
+
+ //- -----------------------
+ //- Sync
+ //- -----------------------
+ q-card.q-pb-sm.q-mt-md(v-if='state.target.sync && Object.keys(state.target.sync).length > 0')
+ q-card-section
+ .text-subtitle1 {{t('admin.storage.sync')}}
+ q-banner.q-mt-md(
+ rounded
+ :class='$q.dark.isActive ? `bg-negative text-white` : `bg-grey-2 text-grey-7`'
+ ) {{t('admin.storage.noSyncModes')}}
+
+ //- -----------------------
+ //- Actions
+ //- -----------------------
+ q-card.q-pb-sm.q-mt-md
+ q-card-section
+ .text-subtitle1 {{t('admin.storage.actions')}}
+ q-banner.q-mt-md(
+ v-if='!state.target.actions || state.target.actions.length < 1'
+ rounded
+ :class='$q.dark.isActive ? `bg-negative text-white` : `bg-grey-2 text-grey-7`'
+ ) {{t('admin.storage.noActions')}}
+ q-banner.q-mt-md(
+ v-else-if='!state.target.isEnabled'
+ rounded
+ :class='$q.dark.isActive ? `bg-negative text-white` : `bg-grey-2 text-grey-7`'
+ ) {{t('admin.storage.actionsInactiveWarn')}}
+
+ template(
+ v-if='state.target.isEnabled'
+ v-for='(act, idx) in state.target.actions'
+ )
+ q-separator.q-my-sm(inset, v-if='idx > 0')
+ q-item
+ blueprint-icon.self-start(:icon='act.icon', :hue-rotate='45')
+ q-item-section
+ q-item-label {{act.label}}
+ q-item-label(caption) {{act.hint}}
+ q-item-label.text-red(v-if='act.warn', caption): strong {{act.warn}}
+ q-item-section(side)
+ q-btn.acrylic-btn(
+ flat
+ icon='las la-arrow-circle-right'
+ color='primary'
+ @click=''
+ :label='t(`common.actions.proceed`)'
+ )
+
+ .col-12.col-lg-auto
+ //- -----------------------
+ //- Infobox
+ //- -----------------------
+ q-card.rounded-borders.q-pb-md(style='width: 300px;')
+ q-card-section
+ .text-subtitle1 {{state.target.title}}
+ q-img.q-mt-sm.rounded-borders(
+ :src='state.target.banner'
+ fit='cover'
+ no-spinner
+ )
+ .text-body2.q-mt-md {{state.target.description}}
+ q-separator.q-mb-sm(inset)
+ q-item
+ q-item-section
+ q-item-label.text-grey {{t(`admin.storage.vendor`)}}
+ q-item-label {{state.target.vendor}}
+ q-separator.q-my-sm(inset)
+ q-item
+ q-item-section
+ q-item-label.text-grey {{t(`admin.storage.vendorWebsite`)}}
+ q-item-label: a(:href='state.target.website', target='_blank', rel='noreferrer') {{state.target.website}}
+
+ //- -----------------------
+ //- Status
+ //- -----------------------
+ q-card.rounded-borders.q-pb-md.q-mt-md(style='width: 300px;')
+ q-card-section
+ .text-subtitle1 {{ t('admin.storage.status') }}
+ template(v-if='state.target.module !== `db`')
+ q-item(tag='label')
+ q-item-section
+ q-item-label {{t(`admin.storage.enabled`)}}
+ q-item-label(caption) {{t(`admin.storage.enabledHint`)}}
+ q-item-label.text-deep-orange(v-if='state.target.module === `db`', caption) {{t(`admin.storage.enabledForced`)}}
+ q-item-section(avatar)
+ q-toggle(
+ v-model='state.target.isEnabled'
+ :disable='state.target.module === `db` || isSetupNeeded'
+ color='primary'
+ checked-icon='las la-check'
+ unchecked-icon='las la-times'
+ :aria-label='t(`admin.storage.enabled`)'
+ )
+ q-inner-loading(:showing='isSetupNeeded')
+ q-icon(name='las la-exclamation-triangle', size='sm', color='negative')
+ .text-body2.text-negative {{ t('admin.storage.setupRequired') }}
+ q-separator.q-my-sm(inset)
+ q-item
+ q-item-section
+ q-item-label.text-grey {{t(`admin.storage.currentState`)}}
+ q-item-label.text-positive No issues detected.
+
+ //- -----------------------
+ //- Versioning
+ //- -----------------------
+ q-card.rounded-borders.q-pb-md.q-mt-md(style='width: 300px;')
+ q-card-section
+ .text-subtitle1 {{t(`admin.storage.versioning`)}}
+ .text-body2.text-grey {{t(`admin.storage.versioningHint`)}}
+ q-item(:tag='state.target.versioning.isSupported ? `label` : null')
+ q-item-section
+ q-item-label {{t(`admin.storage.useVersioning`)}}
+ q-item-label(caption) {{t(`admin.storage.useVersioningHint`)}}
+ q-item-label.text-deep-orange(v-if='!state.target.versioning.isSupported', caption) {{t(`admin.storage.versioningNotSupported`)}}
+ q-item-label.text-deep-orange(v-if='state.target.versioning.isForceEnabled', caption) {{t(`admin.storage.versioningForceEnabled`)}}
+ q-item-section(avatar)
+ q-toggle(
+ v-model='state.target.versioning.enabled'
+ :disable='!state.target.versioning.isSupported || state.target.versioning.isForceEnabled'
+ color='primary'
+ checked-icon='las la-check'
+ unchecked-icon='las la-times'
+ :aria-label='t(`admin.storage.useVersioning`)'
+ )
+
+ //- ==========================================
+ //- DELIVERY PATHS
+ //- ==========================================
+
+ .row.q-pa-md.q-col-gutter-md(v-if='state.displayMode === `delivery`')
+ .col
+ q-card.rounded-borders
+ q-card-section.flex.items-center
+ .text-caption.q-mr-sm {{ t('admin.storage.deliveryPathsLegend') }}
+ q-chip(square, dense, color='blue-1', text-color='blue-8')
+ q-avatar(icon='las la-ellipsis-h', color='blue', text-color='white')
+ span.text-caption.q-px-sm {{ t('admin.storage.deliveryPathsUserRequest') }}
+ q-chip(square, dense, color='teal-1', text-color='teal-8')
+ q-avatar(icon='las la-ellipsis-h', color='positive', text-color='white')
+ span.text-caption.q-px-sm {{ t('admin.storage.deliveryPathsPushToOrigin') }}
+ q-chip(square, dense, color='red-1', text-color='red-8')
+ q-avatar(icon='las la-minus', color='negative', text-color='white')
+ span.text-caption.q-px-sm {{ t('admin.storage.missingOrigin') }}
+ q-separator
+ v-network-graph(
+ :zoom-level='2'
+ :configs='state.deliveryConfig'
+ :nodes='state.deliveryNodes'
+ :edges='state.deliveryEdges'
+ :paths='state.deliveryPaths'
+ :layouts='state.deliveryLayouts'
+ style='height: 600px; background-color: #FFF;'
+ )
+ template(#override-node='{ nodeId, scale, config, ...slotProps }')
+ rect(
+ :rx='config.borderRadius * scale'
+ :x='-config.radius * scale'
+ :y='-config.radius * scale'
+ :width='config.radius * scale * 2'
+ :height='config.radius * scale * 2'
+ :fill='config.color'
+ v-bind='slotProps'
+ )
+ image(
+ v-if='state.deliveryNodes[nodeId].icon && state.deliveryNodes[nodeId].icon.endsWith(`.svg`)'
+ :x='(-config.radius + 5) * scale'
+ :y='(-config.radius + 5) * scale'
+ :width='(config.radius - 5) * scale * 2'
+ :height='(config.radius - 5) * scale * 2'
+ :xlink:href='state.deliveryNodes[nodeId].icon'
+ )
+ text(
+ v-if='state.deliveryNodes[nodeId].icon && state.deliveryNodes[nodeId].iconText'
+ :class='state.deliveryNodes[nodeId].icon'
+ :font-size='22 * scale'
+ fill='#ffffff'
+ text-anchor='middle'
+ dominant-baseline='central'
+ v-html='state.deliveryNodes[nodeId].iconText'
+ )
+
+ //- .overline.my-5 {{t('admin.storage.syncDirection')}}
+ //- .body-2.ml-3 {{t('admin.storage.syncDirectionSubtitle')}}
+ //- .pr-3.pt-3
+ //- v-radio-group.ml-3.py-0(v-model='target.mode')
+ //- v-radio(
+ //- :label='t(`admin.storage.syncDirBi`)'
+ //- color='primary'
+ //- value='sync'
+ //- :disabled='target.supportedModes.indexOf(`sync`) < 0'
+ //- )
+ //- v-radio(
+ //- :label='t(`admin.storage.syncDirPush`)'
+ //- color='primary'
+ //- value='push'
+ //- :disabled='target.supportedModes.indexOf(`push`) < 0'
+ //- )
+ //- v-radio(
+ //- :label='t(`admin.storage.syncDirPull`)'
+ //- color='primary'
+ //- value='pull'
+ //- :disabled='target.supportedModes.indexOf(`pull`) < 0'
+ //- )
+ //- .body-2.ml-3
+ //- strong {{t('admin.storage.syncDirBi')}} #[em.red--text.text--lighten-2(v-if='target.supportedModes.indexOf(`sync`) < 0') {{t('admin.storage.unsupported')}}]
+ //- .pb-3 {{t('admin.storage.syncDirBiHint')}}
+ //- strong {{t('admin.storage.syncDirPush')}} #[em.red--text.text--lighten-2(v-if='target.supportedModes.indexOf(`push`) < 0') {{t('admin.storage.unsupported')}}]
+ //- .pb-3 {{t('admin.storage.syncDirPushHint')}}
+ //- strong {{t('admin.storage.syncDirPull')}} #[em.red--text.text--lighten-2(v-if='target.supportedModes.indexOf(`pull`) < 0') {{t('admin.storage.unsupported')}}]
+ //- .pb-3 {{t('admin.storage.syncDirPullHint')}}
+
+ //- template(v-if='target.hasSchedule')
+ //- v-divider.mt-3
+ //- .overline.my-5 {{t('admin.storage.syncSchedule')}}
+ //- .body-2.ml-3 {{t('admin.storage.syncScheduleHint')}}
+ //- .pa-3
+ //- duration-picker(v-model='target.syncInterval')
+ //- i18next.caption.mt-3(path='admin.storage.syncScheduleCurrent', tag='div')
+ //- strong(place='schedule') {{getDefaultSchedule(target.syncInterval)}}
+ //- i18next.caption(path='admin.storage.syncScheduleDefault', tag='div')
+ //- strong(place='schedule') {{getDefaultSchedule(target.syncIntervalDefault)}}
+
+
+
+
+
+
diff --git a/frontend/src/pages/AdminSystem.vue b/frontend/src/pages/AdminSystem.vue
new file mode 100644
index 00000000..84171bc1
--- /dev/null
+++ b/frontend/src/pages/AdminSystem.vue
@@ -0,0 +1,383 @@
+
+q-page.admin-system
+ .row.q-pa-md.items-center
+ .col-auto
+ img.admin-icon.animated.fadeInLeft(src='/_assets/icons/fluent-processor.svg')
+ .col.q-pl-md
+ .text-h5.text-primary.animated.fadeInLeft {{ t('admin.system.title') }}
+ .text-subtitle1.text-grey.animated.fadeInLeft.wait-p2s {{ t('admin.system.subtitle') }}
+ .col-auto
+ q-btn.q-mr-sm.acrylic-btn(
+ icon='las la-question-circle'
+ flat
+ color='grey'
+ :aria-label='t(`common.actions.viewDocs`)'
+ :href='siteStore.docsBase + `/system/`'
+ target='_blank'
+ type='a'
+ )
+ q-tooltip {{ t(`common.actions.viewDocs`) }}
+ q-btn.q-mr-sm.acrylic-btn(
+ icon='las la-redo-alt'
+ flat
+ color='secondary'
+ :loading='state.loading > 0'
+ :aria-label='t(`common.actions.refresh`)'
+ @click='load'
+ )
+ q-tooltip {{ t(`common.actions.refresh`) }}
+ q-btn.acrylic-btn(
+ ref='copySysInfoBtn'
+ flat
+ icon='mdi-clipboard-text-outline'
+ label='Copy System Info'
+ color='primary'
+ :disabled='state.loading > 0'
+ )
+ q-separator(inset)
+ .row.q-pa-md.q-col-gutter-md
+ .col-6
+ //- -----------------------
+ //- WIKI.JS
+ //- -----------------------
+ q-card.q-pb-sm
+ q-card-section
+ .text-subtitle1 Wiki.js
+ q-item
+ blueprint-icon(icon='breakable', :hue-rotate='-45')
+ q-item-section
+ q-item-label {{ t('admin.system.currentVersion') }}
+ q-item-label(caption) {{t('admin.system.currentVersionHint')}}
+ q-item-section
+ q-item-label.dark-value(caption) {{ state.info.currentVersion }}
+ q-separator(inset)
+ q-item
+ blueprint-icon(icon='cloud-checked', :hue-rotate='-45')
+ q-item-section
+ q-item-label {{ t('admin.system.latestVersion') }}
+ q-item-label(caption) {{t('admin.system.latestVersionHint')}}
+ q-item-section
+ .row.q-col-gutter-sm
+ .col
+ .text-caption.dark-value {{ state.info.latestVersion }}
+ .col-auto
+ q-btn.acrylic-btn(
+ flat
+ color='purple'
+ @click='checkForUpdates'
+ :label='t(`admin.system.checkUpdate`)'
+ )
+
+ //- -----------------------
+ //- CLIENT
+ //- -----------------------
+ q-no-ssr
+ q-card.q-mt-md.q-pb-sm
+ q-card-section
+ .text-subtitle1 {{t('admin.system.client')}}
+ q-item
+ blueprint-icon(icon='navigation-toolbar-top', :hue-rotate='-45')
+ q-item-section
+ q-item-label {{t('admin.system.browser')}}
+ q-item-label(caption) {{t('admin.system.browserHint')}}
+ q-item-section
+ q-item-label.dark-value(caption) {{ clientBrowser }}
+ q-separator(inset)
+ q-item
+ blueprint-icon(icon='computer', :hue-rotate='-45')
+ q-item-section
+ q-item-label {{t('admin.system.clientPlatform')}}
+ q-item-label(caption) {{t('admin.system.clientPlatformHint')}}
+ q-item-section
+ q-item-label.dark-value(caption) {{ clientPlatform }}
+ q-separator(inset)
+ q-item
+ blueprint-icon(icon='translation', :hue-rotate='-45')
+ q-item-section
+ q-item-label {{t('admin.system.clientLanguage')}}
+ q-item-label(caption) {{t('admin.system.clientLanguageHint')}}
+ q-item-section
+ q-item-label.dark-value(caption) {{ clientLanguage }}
+ q-separator(inset)
+ q-item
+ blueprint-icon(icon='cookies', :hue-rotate='-45')
+ q-item-section
+ q-item-label {{t('admin.system.clientCookies')}}
+ q-item-label(caption) {{t('admin.system.clientCookiesHint')}}
+ q-item-section
+ q-item-label.dark-value(caption) {{ clientCookies }}
+ q-separator(inset)
+ q-item
+ blueprint-icon(icon='widescreen', :hue-rotate='-45')
+ q-item-section
+ q-item-label {{t('admin.system.clientViewport')}}
+ q-item-label(caption) {{t('admin.system.clientViewportHint')}}
+ q-item-section
+ q-item-label.dark-value(caption) {{ clientViewport }}
+
+ .col-6
+ //- -----------------------
+ //- ENGINES
+ //- -----------------------
+ q-card.q-pb-sm
+ q-card-section
+ .text-subtitle1 {{t('admin.system.engines')}}
+ q-item
+ blueprint-icon(icon='nodejs', :hue-rotate='-45')
+ q-item-section
+ q-item-label Node.js
+ q-item-label(caption) {{t('admin.system.nodejsHint')}}
+ q-item-section
+ q-item-label.dark-value(caption) {{ state.info.nodeVersion }}
+ q-separator(inset)
+ q-item
+ blueprint-icon(icon='postgresql', :hue-rotate='-45')
+ q-item-section
+ q-item-label {{t('admin.system.database')}}
+ q-item-label(caption) {{t('admin.system.databaseHint')}}
+ q-item-section
+ q-item-label.dark-value(caption) PostgreSQL {{dbVersion}}
+ q-separator(inset)
+ q-item
+ blueprint-icon(icon='database', :hue-rotate='-45')
+ q-item-section
+ q-item-label {{t('admin.system.databaseHost')}}
+ q-item-label(caption) {{t('admin.system.databaseHostHint')}}
+ q-item-section
+ q-item-label.dark-value(caption) {{ state.info.dbHost }}
+
+ //- -----------------------
+ //- HOST INFORMATION
+ //- -----------------------
+ q-card.q-mt-md.q-pb-sm
+ q-card-section
+ .text-subtitle1 {{ t('admin.system.hostInfo') }}
+ q-item
+ blueprint-icon(:icon='platformLogo', :hue-rotate='-45')
+ q-item-section
+ q-item-label {{ t('admin.system.os') }}
+ q-item-label(caption) {{t('admin.system.osHint')}}
+ q-item-section
+ q-item-label.dark-value(caption) {{ (state.info.platform === 'docker') ? 'Docker Container (Linux)' : state.info.operatingSystem }}
+ q-separator(inset)
+ q-item
+ blueprint-icon(icon='server', :hue-rotate='-45')
+ q-item-section
+ q-item-label {{ t('admin.system.hostname') }}
+ q-item-label(caption) {{t('admin.system.hostnameHint')}}
+ q-item-section
+ q-item-label.dark-value(caption) {{ state.info.hostname }}
+ q-separator(inset)
+ q-item
+ blueprint-icon(icon='processor', :hue-rotate='-45')
+ q-item-section
+ q-item-label {{ t('admin.system.cpuCores') }}
+ q-item-label(caption) {{t('admin.system.cpuCoresHint')}}
+ q-item-section
+ q-item-label.dark-value(caption) {{ state.info.cpuCores }}
+ q-separator(inset)
+ q-item
+ blueprint-icon(icon='memory-slot', :hue-rotate='-45')
+ q-item-section
+ q-item-label {{ t('admin.system.totalRAM') }}
+ q-item-label(caption) {{t('admin.system.totalRAMHint')}}
+ q-item-section
+ q-item-label.dark-value(caption) {{ state.info.ramTotal }}
+ q-separator(inset)
+ q-item
+ blueprint-icon(icon='program', :hue-rotate='-45')
+ q-item-section
+ q-item-label {{ t('admin.system.workingDirectory') }}
+ q-item-label(caption) {{t('admin.system.workingDirectoryHint')}}
+ q-item-section
+ q-item-label.dark-value(caption) {{ state.info.workingDirectory }}
+ q-separator(inset)
+ q-item
+ blueprint-icon(icon='automation', :hue-rotate='-45')
+ q-item-section
+ q-item-label {{ t('admin.system.configFile') }}
+ q-item-label(caption) {{t('admin.system.configFileHint')}}
+ q-item-section
+ q-item-label.dark-value(caption) {{ state.info.configFile }}
+
+
+
+
+
diff --git a/frontend/src/pages/AdminTags.vue b/frontend/src/pages/AdminTags.vue
new file mode 100644
index 00000000..1142671d
--- /dev/null
+++ b/frontend/src/pages/AdminTags.vue
@@ -0,0 +1,248 @@
+
+ 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')}}
+
+
+
+
+
diff --git a/frontend/src/pages/AdminTerminal.vue b/frontend/src/pages/AdminTerminal.vue
new file mode 100644
index 00000000..e39228b3
--- /dev/null
+++ b/frontend/src/pages/AdminTerminal.vue
@@ -0,0 +1,171 @@
+
+q-page.admin-terminal
+ .row.q-pa-md.items-center
+ .col-auto
+ img.admin-icon.animated.fadeInLeft(src='/_assets/icons/fluent-linux-terminal-animated.svg')
+ .col.q-pl-md
+ .text-h5.text-primary.animated.fadeInLeft {{ t('admin.terminal.title') }}
+ .text-subtitle1.text-grey.animated.fadeInLeft.wait-p2s {{ t('admin.terminal.subtitle') }}
+ .col-auto.flex
+ q-btn.acrylic-btn.q-mr-sm(
+ v-if='!state.connected || state.connecting'
+ flat
+ icon='las la-link'
+ :label='t(`admin.terminal.connect`)'
+ color='positive'
+ @click='connect'
+ :loading='state.connecting'
+ :disabled='state.connecting'
+ )
+ q-btn.acrylic-btn.q-mr-sm(
+ v-else
+ flat
+ icon='las la-unlink'
+ :label='t(`admin.terminal.disconnect`)'
+ color='negative'
+ @click='disconnect'
+ )
+ q-btn.acrylic-btn.q-mr-md(
+ flat
+ icon='las la-ban'
+ :label='t(`admin.terminal.clear`)'
+ color='primary'
+ @click='clearTerminal'
+ )
+ q-separator.q-mr-md(vertical)
+ q-btn.q-mr-sm.acrylic-btn(
+ icon='las la-question-circle'
+ flat
+ color='grey'
+ :aria-label='t(`common.actions.viewDocs`)'
+ :href='siteStore.docsBase + `/admin/terminal`'
+ target='_blank'
+ type='a'
+ )
+ q-tooltip {{ t(`common.actions.viewDocs`) }}
+ q-separator(inset)
+ .q-pa-md.q-gutter-md
+ q-card
+ .admin-terminal-term(ref='termDiv')
+
+
+
+
+
+
diff --git a/frontend/src/pages/AdminTheme.vue b/frontend/src/pages/AdminTheme.vue
new file mode 100644
index 00000000..77fec4db
--- /dev/null
+++ b/frontend/src/pages/AdminTheme.vue
@@ -0,0 +1,812 @@
+
+q-page.admin-theme
+ .row.q-pa-md.items-center
+ .col-auto
+ img.admin-icon.animated.fadeInLeft(src='/_assets/icons/fluent-paint-roller-animated.svg')
+ .col.q-pl-md
+ .text-h5.text-primary.animated.fadeInLeft {{ t('admin.theme.title') }}
+ .text-subtitle1.text-grey.animated.fadeInLeft.wait-p2s {{ t('admin.theme.subtitle') }}
+ .col-auto
+ q-btn.q-mr-sm.acrylic-btn(
+ icon='las la-question-circle'
+ flat
+ color='grey'
+ type='a'
+ :aria-label='t(`common.actions.viewDocs`)'
+ :href='siteStore.docsBase + `/admin/theme`'
+ target='_blank'
+ )
+ q-tooltip {{ t(`common.actions.viewDocs`) }}
+ q-btn.q-mr-sm.acrylic-btn(
+ icon='las la-redo-alt'
+ flat
+ color='secondary'
+ :loading='state.loading > 0'
+ :aria-label='t(`common.actions.refresh`)'
+ @click='load'
+ )
+ q-tooltip {{ t(`common.actions.refresh`) }}
+ q-btn(
+ unelevated
+ icon='mdi-check'
+ :label='t(`common.actions.apply`)'
+ color='secondary'
+ @click='save'
+ :loading='state.loading > 0'
+ )
+ q-separator(inset)
+ .row.q-pa-md.q-col-gutter-md
+ .col-6
+ //- -----------------------
+ //- Theme Options
+ //- -----------------------
+ q-card.q-pb-sm
+ q-card-section.flex.items-center
+ .text-subtitle1 {{t('admin.theme.appearance')}}
+ q-space
+ q-btn.acrylic-btn(
+ icon='las la-redo-alt'
+ :label='t(`admin.theme.resetDefaults`)'
+ flat
+ size='sm'
+ color='pink'
+ @click='resetColors'
+ )
+ q-item(tag='label')
+ blueprint-icon(icon='light-on')
+ q-item-section
+ q-item-label {{t(`admin.theme.darkMode`)}}
+ q-item-label(caption) {{t(`admin.theme.darkModeHint`)}}
+ q-item-section(avatar)
+ q-toggle(
+ v-model='state.config.dark'
+ color='primary'
+ checked-icon='las la-check'
+ unchecked-icon='las la-times'
+ :aria-label='t(`admin.theme.darkMode`)'
+ )
+ template(v-for='cl of colorKeys', :key='cl')
+ q-separator.q-my-sm(inset)
+ q-item
+ blueprint-icon(icon='fill-color')
+ q-item-section
+ q-item-label {{t(`admin.theme.` + cl + `Color`)}}
+ q-item-label(caption) {{t(`admin.theme.` + cl + `ColorHint`)}}
+ q-item-section(side)
+ .text-caption.text-grey-6 {{state.config[`color` + startCase(cl)]}}
+ q-item-section(side)
+ q-btn.q-mr-sm(
+ :key='`btnpick-` + cl'
+ glossy
+ padding='xs md'
+ no-caps
+ size='sm'
+ :style='`background-color: ` + state.config[`color` + startCase(cl)] + `;`'
+ text-color='white'
+ )
+ q-icon(name='las la-fill', size='xs', left)
+ span Pick...
+ q-menu
+ q-color(
+ v-model='state.config[`color` + startCase(cl)]'
+ )
+
+ //- -----------------------
+ //- Code Blocks
+ //- -----------------------
+ q-card.q-pb-sm.q-mt-md
+ q-card-section.flex.items-center
+ .text-subtitle1 {{t('admin.theme.codeBlocks')}}
+ q-space
+ q-btn.acrylic-btn(
+ icon='las la-redo-alt'
+ :label='t(`admin.theme.resetDefaults`)'
+ flat
+ size='sm'
+ color='pink'
+ @click='resetCodeBlocks'
+ )
+ q-item
+ blueprint-icon(icon='code')
+ q-item-section
+ q-item-label {{t(`admin.theme.codeBlocksAppearance`)}}
+ q-item-label(caption) {{t(`admin.theme.codeBlocksAppearanceHint`)}}
+ q-item-section
+ q-select(
+ outlined
+ v-model='state.config.codeBlocksTheme'
+ :options='codeThemes'
+ emit-value
+ map-options
+ :virtual-scroll-slice-size='100'
+ :virtual-scroll-slice-ratio-before='2'
+ :virtual-scroll-slice-ratio-after='2'
+ dense
+ options-dense
+ :aria-label='t(`admin.theme.codeBlocksAppearance`)'
+ )
+
+ //- -----------------------
+ //- Theme Layout
+ //- -----------------------
+ q-card.q-pb-sm.q-mt-md
+ q-card-section
+ .text-subtitle1 {{t('admin.theme.layout')}}
+ template(v-if='flagStore.experimental')
+ q-item
+ blueprint-icon(icon='width')
+ q-item-section
+ q-item-label {{t(`admin.theme.contentWidth`)}}
+ q-item-label(caption) {{t(`admin.theme.contentWidthHint`)}}
+ q-item-section.col-auto
+ q-btn-toggle(
+ v-model='state.config.contentWidth'
+ push
+ glossy
+ no-caps
+ toggle-color='primary'
+ :options='widthOptions'
+ )
+ q-separator.q-my-sm(inset)
+ q-item
+ blueprint-icon(icon='right-navigation-toolbar')
+ q-item-section
+ q-item-label {{t(`admin.theme.sidebarPosition`)}}
+ q-item-label(caption) {{t(`admin.theme.sidebarPositionHint`)}}
+ q-item-section.col-auto
+ q-btn-toggle(
+ v-model='state.config.sidebarPosition'
+ push
+ glossy
+ no-caps
+ toggle-color='primary'
+ :options='rightLeftOptions'
+ )
+ q-separator.q-my-sm(inset)
+ q-item
+ blueprint-icon(icon='index')
+ q-item-section
+ q-item-label {{t(`admin.theme.tocPosition`)}}
+ q-item-label(caption) {{t(`admin.theme.tocPositionHint`)}}
+ q-item-section.col-auto
+ q-btn-toggle(
+ v-model='state.config.tocPosition'
+ push
+ glossy
+ no-caps
+ toggle-color='primary'
+ :options='rightLeftOptions'
+ )
+ q-separator.q-my-sm(inset)
+ q-item(tag='label')
+ blueprint-icon(icon='share')
+ q-item-section
+ q-item-label {{t(`admin.theme.showSharingMenu`)}}
+ q-item-label(caption) {{t(`admin.theme.showSharingMenuHint`)}}
+ q-item-section(avatar)
+ q-toggle(
+ v-model='state.config.showSharingMenu'
+ color='primary'
+ checked-icon='las la-check'
+ unchecked-icon='las la-times'
+ :aria-label='t(`admin.theme.showSharingMenu`)'
+ )
+ q-separator.q-my-sm(inset)
+ q-item(tag='label')
+ blueprint-icon(icon='print')
+ q-item-section
+ q-item-label {{t(`admin.theme.showPrintBtn`)}}
+ q-item-label(caption) {{t(`admin.theme.showPrintBtnHint`)}}
+ q-item-section(avatar)
+ q-toggle(
+ v-model='state.config.showPrintBtn'
+ color='primary'
+ checked-icon='las la-check'
+ unchecked-icon='las la-times'
+ :aria-label='t(`admin.theme.showPrintBtn`)'
+ )
+
+ .col-6
+ //- -----------------------
+ //- Fonts
+ //- -----------------------
+ q-card.q-pb-sm
+ q-card-section.flex.items-center
+ .text-subtitle1 {{t('admin.theme.fonts')}}
+ q-space
+ q-btn.acrylic-btn(
+ icon='las la-redo-alt'
+ :label='t(`admin.theme.resetDefaults`)'
+ flat
+ size='sm'
+ color='pink'
+ @click='resetFonts'
+ )
+ q-item
+ blueprint-icon(icon='fonts-app')
+ q-item-section
+ q-item-label {{t(`admin.theme.baseFont`)}}
+ q-item-label(caption) {{t(`admin.theme.baseFontHint`)}}
+ q-item-section
+ q-select(
+ outlined
+ v-model='state.config.baseFont'
+ :options='fonts'
+ emit-value
+ map-options
+ dense
+ :aria-label='t(`admin.theme.baseFont`)'
+ )
+ q-item
+ blueprint-icon(icon='fonts-app')
+ q-item-section
+ q-item-label {{t(`admin.theme.contentFont`)}}
+ q-item-label(caption) {{t(`admin.theme.contentFontHint`)}}
+ q-item-section
+ q-select(
+ outlined
+ v-model='state.config.contentFont'
+ :options='fonts'
+ emit-value
+ map-options
+ dense
+ :aria-label='t(`admin.theme.contentFont`)'
+ )
+
+ //- -----------------------
+ //- Code Injection
+ //- -----------------------
+ q-card.q-pb-sm.q-mt-md
+ q-card-section
+ .text-subtitle1 {{t('admin.theme.codeInjection')}}
+ q-item
+ blueprint-icon(icon='css')
+ q-item-section
+ q-item-label {{t(`admin.theme.cssOverride`)}}
+ q-item-label(caption) {{t(`admin.theme.cssOverrideHint`)}}
+ q-item
+ q-item-section
+ q-no-ssr(:placeholder='t(`common.loading`)')
+ util-code-editor.admin-theme-cm(
+ ref='cmCSS'
+ v-model='state.config.injectCSS'
+ language='css'
+ )
+ q-separator.q-my-sm(inset)
+ q-item
+ blueprint-icon(icon='html')
+ q-item-section
+ q-item-label {{t(`admin.theme.headHtmlInjection`)}}
+ q-item-label(caption) {{t(`admin.theme.headHtmlInjectionHint`)}}
+ q-item
+ q-item-section
+ q-no-ssr(:placeholder='t(`common.loading`)')
+ util-code-editor.admin-theme-cm(
+ ref='cmHead'
+ v-model='state.config.injectHead'
+ language='html'
+ )
+ q-separator.q-my-sm(inset)
+ q-item
+ blueprint-icon(icon='html')
+ q-item-section
+ q-item-label {{t(`admin.theme.bodyHtmlInjection`)}}
+ q-item-label(caption) {{t(`admin.theme.bodyHtmlInjectionHint`)}}
+ q-item
+ q-item-section
+ q-no-ssr(:placeholder='t(`common.loading`)')
+ util-code-editor.admin-theme-cm(
+ ref='cmBody'
+ v-model='state.config.injectBody'
+ language='html'
+ )
+
+
+
+
+
diff --git a/frontend/src/pages/AdminUsers.vue b/frontend/src/pages/AdminUsers.vue
new file mode 100644
index 00000000..59fc3eb9
--- /dev/null
+++ b/frontend/src/pages/AdminUsers.vue
@@ -0,0 +1,334 @@
+
+q-page.admin-groups
+ .row.q-pa-md.items-center
+ .col-auto
+ img.admin-icon.animated.fadeInLeft(src='/_assets/icons/fluent-account.svg')
+ .col.q-pl-md
+ .text-h5.text-primary.animated.fadeInLeft {{ t('admin.users.title') }}
+ .text-subtitle1.text-grey.animated.fadeInLeft.wait-p2s {{ t('admin.users.subtitle') }}
+ .col-auto.flex.items-center
+ q-input.denser.q-mr-sm(
+ outlined
+ v-model='state.search'
+ dense
+ :class='$q.dark.isActive ? `bg-dark` : `bg-white`'
+ )
+ template(#prepend)
+ q-icon(name='las la-search')
+ q-btn.acrylic-btn.q-mr-sm(
+ icon='las la-question-circle'
+ flat
+ color='grey'
+ type='a'
+ :aria-label='t(`common.actions.viewDocs`)'
+ :href='siteStore.docsBase + `/admin/groups`'
+ target='_blank'
+ )
+ q-tooltip {{ t(`common.actions.viewDocs`) }}
+ q-btn.q-mr-sm.acrylic-btn(
+ icon='las la-redo-alt'
+ flat
+ color='secondary'
+ :aria-label='t(`common.actions.refresh`)'
+ @click='load'
+ :loading='state.loading > 0'
+ )
+ q-tooltip {{ t(`common.actions.refresh`) }}
+ q-btn.q-mr-sm(
+ icon='las la-user-cog'
+ unelevated
+ color='secondary'
+ :aria-label='t(`admin.users.defaults`)'
+ )
+ q-tooltip {{ t(`admin.users.defaults`) }}
+ user-defaults-menu
+ q-btn(
+ unelevated
+ icon='las la-plus'
+ :label='t(`admin.users.create`)'
+ color='primary'
+ @click='createUser'
+ :disabled='state.loading > 0'
+ )
+ q-separator(inset)
+ .row.q-pa-md.q-col-gutter-md
+ .col-12
+ q-card
+ q-table(
+ :rows='state.users'
+ :columns='headers'
+ row-key='id'
+ flat
+ hide-header
+ hide-bottom
+ :rows-per-page-options='[0]'
+ :loading='state.loading > 0'
+ )
+ template(#body-cell-id='props')
+ q-td(:props='props')
+ q-icon(name='las la-user', color='primary', size='sm')
+ template(#body-cell-name='props')
+ q-td(:props='props')
+ .flex.items-center
+ strong {{ props.value }}
+ q-icon.q-ml-sm(
+ v-if='props.row.isSystem'
+ name='las la-lock'
+ color='pink'
+ )
+ q-icon.q-ml-sm(
+ v-if='!props.row.isActive'
+ name='las la-ban'
+ color='pink'
+ )
+ template(#body-cell-email='props')
+ q-td(:props='props')
+ em {{ props.value }}
+ template(#body-cell-date='props')
+ q-td(:props='props')
+ i18n-t.text-caption(keypath='admin.users.createdAt', tag='div')
+ template(#date)
+ strong {{ formattedDate(props.value) }}
+ i18n-t.text-caption(
+ v-if='props.row.lastLoginAt'
+ keypath='admin.users.lastLoginAt'
+ tag='div'
+ )
+ template(#date)
+ strong {{ humanizeDate(props.row.lastLoginAt) }}
+ template(#body-cell-edit='props')
+ q-td(:props='props')
+ q-btn.acrylic-btn.q-mr-sm(
+ v-if='!props.row.isSystem'
+ flat
+ :to='`/_admin/users/` + props.row.id'
+ icon='las la-pen'
+ color='indigo'
+ :label='t(`common.actions.edit`)'
+ no-caps
+ )
+ q-btn.acrylic-btn(
+ v-if='!props.row.isSystem'
+ flat
+ icon='las la-trash'
+ color='negative'
+ @click='deleteUser(props.row)'
+ )
+ .flex.flex-center.q-mt-lg(v-if='state.totalPages > 1')
+ q-pagination(
+ v-model='state.currentPage'
+ :max='state.totalPages'
+ :max-pages='9'
+ boundary-numbers
+ direction-links
+ )
+
+
+
+
+
diff --git a/frontend/src/pages/AdminUtilities.vue b/frontend/src/pages/AdminUtilities.vue
new file mode 100644
index 00000000..b7e05e4b
--- /dev/null
+++ b/frontend/src/pages/AdminUtilities.vue
@@ -0,0 +1,205 @@
+
+q-page.admin-utilities
+ .row.q-pa-md.items-center
+ .col-auto
+ img.admin-icon.animated.fadeInLeft(src='/_assets/icons/fluent-swiss-army-knife.svg')
+ .col.q-pl-md
+ .text-h5.text-primary.animated.fadeInLeft {{ t('admin.utilities.title') }}
+ .text-subtitle1.text-grey.animated.fadeInLeft.wait-p2s {{ t('admin.utilities.subtitle') }}
+ .col-auto
+ q-btn.q-mr-sm.acrylic-btn(
+ icon='las la-question-circle'
+ flat
+ color='grey'
+ :aria-label='t(`common.actions.viewDocs`)'
+ :href='siteStore.docsBase + `/admin/utilities`'
+ target='_blank'
+ type='a'
+ )
+ q-tooltip {{ t(`common.actions.viewDocs`) }}
+ q-separator(inset)
+ .q-pa-md.q-gutter-md
+ q-card
+ q-list(separator)
+ q-item
+ blueprint-icon(icon='disconnected', :hue-rotate='45')
+ q-item-section
+ q-item-label {{t(`admin.utilities.disconnectWS`)}}
+ q-item-label(caption) {{t(`admin.utilities.disconnectWSHint`)}}
+ q-item-section(side)
+ q-btn.acrylic-btn(
+ flat
+ icon='las la-arrow-circle-right'
+ color='primary'
+ @click='disconnectWS'
+ :label='t(`common.actions.proceed`)'
+ )
+ q-item
+ blueprint-icon(icon='database-export', :hue-rotate='45')
+ q-item-section
+ q-item-label {{t(`admin.utilities.export`)}}
+ q-item-label(caption) {{t(`admin.utilities.exportHint`)}}
+ q-item-section(side)
+ q-btn.acrylic-btn(
+ flat
+ icon='las la-arrow-circle-right'
+ color='primary'
+ :label='t(`common.actions.proceed`)'
+ )
+ q-item
+ blueprint-icon(icon='datalake', :hue-rotate='45')
+ q-item-section
+ q-item-label {{t(`admin.utilities.flushCache`)}}
+ q-item-label(caption) {{t(`admin.utilities.flushCacheHint`)}}
+ q-item-section(side)
+ q-btn.acrylic-btn(
+ flat
+ icon='las la-arrow-circle-right'
+ color='primary'
+ :label='t(`common.actions.proceed`)'
+ )
+ q-item
+ blueprint-icon(icon='database-restore', :hue-rotate='45')
+ q-item-section
+ q-item-label {{t(`admin.utilities.import`)}}
+ q-item-label(caption) {{t(`admin.utilities.importHint`)}}
+ q-item-section(side)
+ q-btn.acrylic-btn(
+ flat
+ icon='las la-arrow-circle-right'
+ color='primary'
+ :label='t(`common.actions.proceed`)'
+ )
+ q-item
+ blueprint-icon(icon='matches', :hue-rotate='45')
+ q-item-section
+ q-item-label {{t(`admin.utilities.invalidAuthCertificates`)}}
+ q-item-label(caption) {{t(`admin.utilities.invalidAuthCertificatesHint`)}}
+ q-item-section(side)
+ q-btn.acrylic-btn(
+ flat
+ icon='las la-arrow-circle-right'
+ color='primary'
+ :label='t(`common.actions.proceed`)'
+ )
+ q-item
+ blueprint-icon(icon='historical', :hue-rotate='45')
+ q-item-section
+ q-item-label {{t(`admin.utilities.purgeHistory`)}}
+ q-item-label(caption) {{t(`admin.utilities.purgeHistoryHint`)}}
+ q-item-section(side)
+ q-select(
+ outlined
+ :label='t(`admin.utilities.purgeHistoryTimeframe`)'
+ v-model='state.purgeHistoryTimeframe'
+ style='min-width: 175px;'
+ emit-value
+ map-options
+ dense
+ :options='purgeHistoryTimeframes'
+ )
+ q-separator.q-ml-sm(vertical)
+ q-item-section(side)
+ q-btn.acrylic-btn(
+ flat
+ icon='las la-arrow-circle-right'
+ color='primary'
+ :label='t(`common.actions.proceed`)'
+ )
+ q-item
+ blueprint-icon(icon='rescan-document', :hue-rotate='45')
+ q-item-section
+ q-item-label {{t(`admin.utilities.scanPageProblems`)}}
+ q-item-label(caption) {{t(`admin.utilities.scanPageProblemsHint`)}}
+ q-item-section(side)
+ q-btn.acrylic-btn(
+ flat
+ icon='las la-arrow-circle-right'
+ color='primary'
+ :label='t(`common.actions.proceed`)'
+ )
+
+
+
+
+
diff --git a/frontend/src/pages/AdminWebhooks.vue b/frontend/src/pages/AdminWebhooks.vue
new file mode 100644
index 00000000..a794f93a
--- /dev/null
+++ b/frontend/src/pages/AdminWebhooks.vue
@@ -0,0 +1,202 @@
+
+q-page.admin-webhooks
+ .row.q-pa-md.items-center
+ .col-auto
+ img.admin-icon.animated.fadeInLeft(src='/_assets/icons/fluent-lightning-bolt.svg')
+ .col.q-pl-md
+ .text-h5.text-primary.animated.fadeInLeft {{ t('admin.webhooks.title') }}
+ .text-subtitle1.text-grey.animated.fadeInLeft.wait-p2s {{ t('admin.webhooks.subtitle') }}
+ .col-auto
+ q-btn.q-mr-sm.acrylic-btn(
+ icon='las la-question-circle'
+ flat
+ color='grey'
+ :aria-label='t(`common.actions.viewDocs`)'
+ :href='siteStore.docsBase + `/system/webhooks`'
+ target='_blank'
+ type='a'
+ )
+ q-tooltip {{ t(`common.actions.viewDocs`) }}
+ q-btn.acrylic-btn.q-mr-sm(
+ icon='las la-redo-alt'
+ flat
+ color='secondary'
+ :loading='state.loading > 0'
+ :aria-label='t(`common.actions.refresh`)'
+ @click='load'
+ )
+ q-tooltip {{ t(`common.actions.refresh`) }}
+ q-btn(
+ unelevated
+ icon='las la-plus'
+ :label='t(`admin.webhooks.new`)'
+ color='primary'
+ @click='createHook'
+ )
+ q-separator(inset)
+ .row.q-pa-md.q-col-gutter-md
+ .col-12(v-if='state.hooks.length < 1')
+ q-card.rounded-borders(
+ flat
+ :class='$q.dark.isActive ? `bg-dark-5 text-white` : `bg-grey-3 text-dark`'
+ )
+ q-card-section.items-center(horizontal)
+ q-card-section.col-auto.q-pr-none
+ q-icon(name='las la-info-circle', size='sm')
+ q-card-section.text-caption {{ t('admin.webhooks.none') }}
+ .col-12(v-else)
+ q-card
+ q-list(separator)
+ q-item(v-for='hook of state.hooks', :key='hook.id')
+ q-item-section(side)
+ q-icon(name='las la-bolt', color='primary')
+ q-item-section
+ q-item-label {{hook.name}}
+ q-item-label(caption) {{hook.url}}
+ q-item-section(side, style='flex-direction: row; align-items: center;')
+ template(v-if='hook.state === `pending`')
+ q-spinner-clock.q-mr-sm(
+ color='indigo'
+ size='xs'
+ )
+ .text-caption.text-indigo {{t('admin.webhooks.statePending')}}
+ q-tooltip(anchor='center left', self='center right') {{t('admin.webhooks.statePendingHint')}}
+ template(v-else-if='hook.state === `success`')
+ q-spinner-infinity.q-mr-sm(
+ color='positive'
+ size='xs'
+ )
+ .text-caption.text-positive {{t('admin.webhooks.stateSuccess')}}
+ q-tooltip(anchor='center left', self='center right') {{t('admin.webhooks.stateSuccessHint')}}
+ template(v-else-if='hook.state === `error`')
+ q-icon.q-mr-sm(
+ color='negative'
+ size='xs'
+ name='las la-exclamation-triangle'
+ )
+ .text-caption.text-negative {{t('admin.webhooks.stateError')}}
+ q-tooltip(anchor='center left', self='center right') {{t('admin.webhooks.stateErrorHint')}}
+ q-separator.q-ml-md(vertical)
+ q-item-section(side, style='flex-direction: row; align-items: center;')
+ q-btn.acrylic-btn.q-mr-sm(
+ color='indigo'
+ icon='las la-pen'
+ label='Edit'
+ flat
+ no-caps
+ @click='editHook(hook.id)'
+ )
+ q-btn.acrylic-btn(
+ color='red'
+ icon='las la-trash'
+ flat
+ @click='deleteHook(hook)'
+ )
+
+
+
+
+
+
diff --git a/frontend/src/pages/ErrorGeneric.vue b/frontend/src/pages/ErrorGeneric.vue
new file mode 100644
index 00000000..b09b206e
--- /dev/null
+++ b/frontend/src/pages/ErrorGeneric.vue
@@ -0,0 +1,144 @@
+
+.errorpage
+ .errorpage-bg
+ .errorpage-content
+ .errorpage-code {{error.code}}
+ .errorpage-title {{error.title}}
+ .errorpage-hint {{error.hint}}
+ .errorpage-actions
+ q-btn(
+ v-if='error.showHomeBtn'
+ push
+ color='primary'
+ label='Go to home'
+ icon='las la-home'
+ to='/'
+ )
+ q-btn.q-ml-md(
+ v-if='error.showLoginBtn'
+ push
+ color='primary'
+ label='Login As...'
+ icon='las la-sign-in-alt'
+ to='/login'
+ )
+
+
+
+
+
+
diff --git a/frontend/src/pages/Index.vue b/frontend/src/pages/Index.vue
new file mode 100644
index 00000000..81885f4a
--- /dev/null
+++ b/frontend/src/pages/Index.vue
@@ -0,0 +1,499 @@
+
+q-page.column
+ .page-breadcrumbs.q-py-sm.q-px-md.row(
+ v-if='!editorStore.isActive'
+ )
+ .col
+ q-breadcrumbs(
+ active-color='grey-7'
+ separator-color='grey'
+ )
+ template(v-slot:separator)
+ q-icon(
+ name='las la-angle-right'
+ )
+ q-breadcrumbs-el(icon='las la-home', to='/', aria-label='Home')
+ q-tooltip Home
+ q-breadcrumbs-el(
+ v-for='brd of pageStore.breadcrumbs'
+ :key='brd.id'
+ :icon='brd.icon'
+ :label='brd.title'
+ :aria-label='brd.title'
+ :to='brd.path'
+ )
+ .col-auto.flex.items-center.justify-end
+ template(v-if='!pageStore.publishState === `draft`')
+ .text-caption.text-accent: strong Unpublished
+ q-separator.q-mx-sm(vertical)
+ .text-caption.text-grey-6 Last modified on #[strong {{lastModified}}]
+ page-header
+ .page-container.row.no-wrap.items-stretch(style='flex: 1 1 100%;')
+ .col(
+ :style='siteStore.theme.tocPosition === `left` ? `order: 2;` : `order: 1;`'
+ )
+ q-no-ssr(
+ v-if='editorStore.isActive'
+ )
+ component(:is='editorComponents[editorStore.editor]')
+ q-scroll-area.page-container-scrl(
+ v-else
+ :thumb-style='thumbStyle'
+ :bar-style='barStyle'
+ style='height: 100%;'
+ )
+ .q-pa-md
+ .page-contents(ref='pageContents', v-html='pageStore.render')
+ template(v-if='pageStore.relations && pageStore.relations.length > 0')
+ q-separator.q-my-lg
+ .row.align-center
+ .col.text-left(v-if='relationsLeft.length > 0')
+ q-btn.q-mr-sm.q-mb-sm(
+ padding='sm md'
+ outline
+ :icon='rel.icon'
+ no-caps
+ color='primary'
+ v-for='rel of relationsLeft'
+ :key='`rel-id-` + rel.id'
+ )
+ .column.text-left.q-pl-md
+ .text-body2: strong {{rel.label}}
+ .text-caption {{rel.caption}}
+ .col.text-center(v-if='relationsCenter.length > 0')
+ .column
+ q-btn(
+ :label='rel.label'
+ color='primary'
+ flat
+ no-caps
+ :icon='rel.icon'
+ v-for='rel of relationsCenter'
+ :key='`rel-id-` + rel.id'
+ )
+ .col.text-right(v-if='relationsRight.length > 0')
+ q-btn.q-ml-sm.q-mb-sm(
+ padding='sm md'
+ outline
+ :icon-right='rel.icon'
+ no-caps
+ color='primary'
+ v-for='rel of relationsRight'
+ :key='`rel-id-` + rel.id'
+ )
+ .column.text-left.q-pr-md
+ .text-body2: strong {{rel.label}}
+ .text-caption {{rel.caption}}
+ .page-sidebar(
+ v-if='showSidebar'
+ :style='siteStore.theme.tocPosition === `left` ? `order: 1;` : `order: 2;`'
+ )
+ template(v-if='pageStore.showToc')
+ //- TOC
+ .q-pa-md.flex.items-center
+ q-icon.q-mr-sm(name='las la-stream', color='grey')
+ .text-caption.text-grey-7 Contents
+ .q-px-md.q-pb-sm
+ q-tree.page-toc(
+ :nodes='pageStore.toc'
+ icon='las la-caret-right'
+ node-key='key'
+ dense
+ v-model:expanded='state.tocExpanded'
+ v-model:selected='state.tocSelected'
+ )
+ //- Tags
+ template(v-if='pageStore.showTags')
+ q-separator(v-if='pageStore.showToc')
+ .q-pa-md(
+ @mouseover='state.showTagsEditBtn = true'
+ @mouseleave='state.showTagsEditBtn = false'
+ )
+ .flex.items-center
+ q-icon.q-mr-sm(name='las la-tags', color='grey')
+ .text-caption.text-grey-7 Tags
+ q-space
+ transition(name='fade')
+ q-btn(
+ v-show='state.showTagsEditBtn'
+ size='sm'
+ padding='none xs'
+ icon='las la-pen'
+ color='deep-orange-9'
+ flat
+ label='Edit'
+ no-caps
+ @click='state.tagEditMode = !state.tagEditMode'
+ )
+ page-tags.q-mt-sm(:edit='state.tagEditMode')
+ template(v-if='siteStore.features.ratingsMode !== `off` && pageStore.allowRatings')
+ q-separator(v-if='pageStore.showToc || pageStore.showTags')
+ //- Rating
+ .q-pa-md.flex.items-center
+ q-icon.q-mr-sm(name='las la-star-half-alt', color='grey')
+ .text-caption.text-grey-7 Rate this page
+ .q-px-md
+ q-rating(
+ v-if='siteStore.features.ratingsMode === `stars`'
+ v-model='state.currentRating'
+ icon='las la-star'
+ color='secondary'
+ size='sm'
+ )
+ .flex.items-center(v-else-if='siteStore.features.ratingsMode === `thumbs`')
+ q-btn.acrylic-btn(
+ flat
+ icon='las la-thumbs-down'
+ color='secondary'
+ )
+ q-btn.acrylic-btn.q-ml-sm(
+ flat
+ icon='las la-thumbs-up'
+ color='secondary'
+ )
+ page-actions-col
+
+ side-dialog
+
+
+
+
+
diff --git a/frontend/src/pages/Login.vue b/frontend/src/pages/Login.vue
new file mode 100644
index 00000000..02fd158f
--- /dev/null
+++ b/frontend/src/pages/Login.vue
@@ -0,0 +1,486 @@
+
+.auth
+ .auth-content
+ .auth-logo
+ img(:src='`/_site/logo`' :alt='siteStore.title')
+ h2.auth-site-title(v-if='siteStore.logoText') {{ siteStore.title }}
+ p.text-grey-7 Login to continue
+ auth-login-panel
+ .auth-bg(aria-hidden="true")
+ img(:src='`/_site/loginbg`' alt='')
+
+
+
+
+
diff --git a/frontend/src/pages/ProfileAuth.vue b/frontend/src/pages/ProfileAuth.vue
new file mode 100644
index 00000000..6c040333
--- /dev/null
+++ b/frontend/src/pages/ProfileAuth.vue
@@ -0,0 +1,418 @@
+
+q-page.q-py-md(:style-fn='pageStyle')
+ .text-header {{t('profile.auth')}}
+ .q-pa-md
+ .text-body2 {{ t('profile.authInfo') }}
+ q-list.q-mt-lg(
+ bordered
+ separator
+ )
+ q-item(
+ v-for='auth of state.authMethods'
+ :key='auth.id'
+ )
+ q-item-section(avatar)
+ q-avatar(
+ color='dark-5'
+ text-color='white'
+ rounded
+ )
+ q-icon(:name='`img:` + auth.strategyIcon')
+ q-item-section
+ strong {{auth.authName}}
+ template(v-if='auth.strategyKey === `local`')
+ q-item-section(v-if='auth.config.isTfaSetup', side)
+ q-btn(
+ icon='las la-fingerprint'
+ unelevated
+ :label='t(`profile.authDisableTfa`)'
+ color='negative'
+ @click='disableTfa(auth.authId)'
+ :disable='auth.config.isTfaRequired'
+ )
+ q-item-section(v-else, side)
+ q-btn(
+ icon='las la-fingerprint'
+ unelevated
+ :label='t(`profile.authSetTfa`)'
+ color='primary'
+ @click='setupTfa(auth.authId)'
+ )
+ q-item-section(side)
+ q-btn(
+ icon='las la-key'
+ unelevated
+ :label='t(`profile.authChangePassword`)'
+ color='primary'
+ @click='changePassword(auth.authId)'
+ )
+
+ .text-header.q-mt-md {{t('profile.passkeys')}}
+ .q-pa-md
+ .text-body2 {{ t('profile.passkeysIntro') }}
+ q-list.q-mt-lg(
+ v-if="state.passkeys?.length > 0"
+ bordered
+ separator
+ )
+ q-item(
+ v-for='pkey of state.passkeys'
+ :key='pkey.id'
+ )
+ q-item-section(avatar)
+ q-avatar(
+ color='secondary'
+ text-color='white'
+ rounded
+ )
+ q-icon(name='las la-key')
+ q-item-section
+ strong {{pkey.name}}
+ .text-caption {{ pkey.siteHostname }}
+ .text-caption.text-grey-7 {{ humanizeDate(pkey.createdAt) }}
+ q-item-section(side)
+ q-btn.acrylic-btn(
+ flat
+ icon='las la-trash'
+ :aria-label='t(`common.actions.delete`)'
+ color='negative'
+ @click='deactivatePasskey(pkey)'
+ )
+ .q-mt-md
+ q-btn(
+ icon='las la-plus'
+ unelevated
+ :label='t(`profile.passkeysAdd`)'
+ color='primary'
+ @click='setupPasskey'
+ )
+
+ q-inner-loading(:showing='state.loading > 0')
+
+
+
diff --git a/frontend/src/pages/ProfileAvatar.vue b/frontend/src/pages/ProfileAvatar.vue
new file mode 100644
index 00000000..6d2aea7c
--- /dev/null
+++ b/frontend/src/pages/ProfileAvatar.vue
@@ -0,0 +1,203 @@
+
+q-page.q-py-md(:style-fn='pageStyle')
+ .text-header {{t('profile.avatar')}}
+ .row.q-gutter-lg.q-mt-xl
+ .col.text-center
+ q-avatar.profile-avatar-circ(
+ size='180px'
+ :color='userStore.hasAvatar ? `dark-1` : `primary`'
+ text-color='white'
+ :class='userStore.hasAvatar ? `is-image` : ``'
+ )
+ img(
+ v-if='userStore.hasAvatar',
+ :src='`/_user/` + userStore.id + `/avatar?` + state.assetTimestamp'
+ )
+ q-icon(
+ v-else,
+ name='las la-user'
+ )
+ .col.self-center(v-if='canEdit')
+ .text-body1 {{ t('profile.avatarUploadTitle') }}
+ .text-caption {{ t('profile.avatarUploadHint') }}
+ .q-mt-md
+ q-btn(
+ icon='las la-upload'
+ unelevated
+ :label='t(`profile.uploadNewAvatar`)'
+ color='primary'
+ @click='uploadImage'
+ )
+ .q-mt-md
+ q-btn.q-mr-sm(
+ icon='las la-times'
+ outline
+ :label='t(`common.actions.clear`)'
+ color='primary'
+ @click='clearImage'
+ :disable='!userStore.hasAvatar'
+ )
+ .col.self-center(v-else)
+ .text-caption.text-negative {{ t('profile.avatarUploadDisabled') }}
+
+ q-inner-loading(:showing='state.loading > 0')
+
+
+
+
+
diff --git a/frontend/src/pages/ProfileGroups.vue b/frontend/src/pages/ProfileGroups.vue
new file mode 100644
index 00000000..bf195b85
--- /dev/null
+++ b/frontend/src/pages/ProfileGroups.vue
@@ -0,0 +1,114 @@
+
+q-page.q-py-md(:style-fn='pageStyle')
+ .text-header {{t('profile.groups')}}
+ .q-pa-md
+ .text-body2 {{ t('profile.groupsInfo') }}
+ q-list.q-mt-lg(
+ bordered
+ separator
+ )
+ q-item(
+ v-if='state.groups.length === 0 && state.loading < 1'
+ )
+ q-item-section
+ span.text-negative {{ t('profile.groupsNone') }}
+ q-item(
+ v-for='grp of state.groups'
+ :key='grp.id'
+ )
+ q-item-section(avatar)
+ q-avatar(
+ color='secondary'
+ text-color='white'
+ icon='las la-users'
+ rounded
+ )
+ q-item-section
+ strong {{grp.name}}
+
+ q-inner-loading(:showing='state.loading > 0')
+
+
+
diff --git a/frontend/src/pages/ProfileInfo.vue b/frontend/src/pages/ProfileInfo.vue
new file mode 100644
index 00000000..980e9c63
--- /dev/null
+++ b/frontend/src/pages/ProfileInfo.vue
@@ -0,0 +1,327 @@
+
+q-page.q-py-md(:style-fn='pageStyle')
+ .text-header {{t('profile.myInfo')}}
+ q-item(v-if='!canEdit')
+ q-item-section
+ q-card.bg-negative.text-white.rounded-borders(flat)
+ q-card-section.items-center(horizontal)
+ q-card-section.col-auto.q-pr-none
+ q-icon(name='las la-ban', size='sm')
+ q-card-section
+ span {{ t('profile.editDisabledTitle') }}
+ .text-caption.text-red-1 {{ t('profile.editDisabledDescription') }}
+ q-item
+ blueprint-icon(icon='contact')
+ q-item-section
+ q-item-label {{t(`profile.displayName`)}}
+ q-item-label(caption) {{t(`profile.displayNameHint`)}}
+ q-item-section
+ q-input(
+ outlined
+ v-model='state.config.name'
+ dense
+ hide-bottom-space
+ :aria-label='t(`profile.displayName`)'
+ :readonly='!canEdit'
+ )
+ q-separator.q-my-sm(inset)
+ q-item
+ blueprint-icon(icon='envelope')
+ q-item-section
+ q-item-label {{t(`profile.email`)}}
+ q-item-label(caption) {{t(`profile.emailHint`)}}
+ q-item-section
+ q-input(
+ outlined
+ v-model='state.config.email'
+ dense
+ :aria-label='t(`profile.email`)'
+ readonly
+ )
+ q-separator.q-my-sm(inset)
+ q-item
+ blueprint-icon(icon='address')
+ q-item-section
+ q-item-label {{t(`profile.location`)}}
+ q-item-label(caption) {{t(`profile.locationHint`)}}
+ q-item-section
+ q-input(
+ outlined
+ v-model='state.config.location'
+ dense
+ hide-bottom-space
+ :aria-label='t(`profile.location`)'
+ :readonly='!canEdit'
+ )
+ q-separator.q-my-sm(inset)
+ q-item
+ blueprint-icon(icon='new-job')
+ q-item-section
+ q-item-label {{t(`profile.jobTitle`)}}
+ q-item-label(caption) {{t(`profile.jobTitleHint`)}}
+ q-item-section
+ q-input(
+ outlined
+ v-model='state.config.jobTitle'
+ dense
+ hide-bottom-space
+ :aria-label='t(`profile.jobTitle`)'
+ :readonly='!canEdit'
+ )
+ q-separator.q-my-sm(inset)
+ q-item
+ blueprint-icon(icon='gender')
+ q-item-section
+ q-item-label {{t(`profile.pronouns`)}}
+ q-item-label(caption) {{t(`profile.pronounsHint`)}}
+ q-item-section
+ q-input(
+ outlined
+ v-model='state.config.pronouns'
+ dense
+ hide-bottom-space
+ :aria-label='t(`profile.pronouns`)'
+ :readonly='!canEdit'
+ )
+ .text-header.q-mt-lg {{t('profile.preferences')}}
+ q-item
+ blueprint-icon(icon='timezone')
+ q-item-section
+ q-item-label {{t(`profile.timezone`)}}
+ q-item-label(caption) {{t(`profile.timezoneHint`)}}
+ q-item-section
+ q-select(
+ outlined
+ v-model='state.config.timezone'
+ :options='timezones'
+ :virtual-scroll-slice-size='100'
+ :virtual-scroll-slice-ratio-before='2'
+ :virtual-scroll-slice-ratio-after='2'
+ dense
+ options-dense
+ :aria-label='t(`admin.general.defaultTimezone`)'
+ )
+ q-separator.q-my-sm(inset)
+ q-item
+ blueprint-icon(icon='calendar')
+ q-item-section
+ q-item-label {{t(`profile.dateFormat`)}}
+ q-item-label(caption) {{t(`profile.dateFormatHint`)}}
+ q-item-section
+ q-select(
+ outlined
+ v-model='state.config.dateFormat'
+ emit-value
+ map-options
+ dense
+ :aria-label='t(`admin.general.defaultDateFormat`)'
+ :options='dateFormats'
+ )
+ q-separator.q-my-sm(inset)
+ q-item
+ blueprint-icon(icon='clock')
+ q-item-section
+ q-item-label {{t(`profile.timeFormat`)}}
+ q-item-label(caption) {{t(`profile.timeFormatHint`)}}
+ q-item-section.col-auto
+ q-btn-toggle(
+ v-model='state.config.timeFormat'
+ push
+ glossy
+ no-caps
+ toggle-color='primary'
+ :options='timeFormats'
+ )
+ q-separator.q-my-sm(inset)
+ q-item
+ blueprint-icon(icon='light-on')
+ q-item-section
+ q-item-label {{t(`profile.appearance`)}}
+ q-item-label(caption) {{t(`profile.appearanceHint`)}}
+ q-item-section.col-auto
+ q-btn-toggle(
+ v-model='state.config.appearance'
+ push
+ glossy
+ no-caps
+ toggle-color='primary'
+ :options='appearances'
+ )
+ .text-header.q-mt-lg {{t('profile.accessibility')}}
+ q-item
+ blueprint-icon(icon='visualy-impaired')
+ q-item-section
+ q-item-label {{t(`profile.cvd`)}}
+ q-item-label(caption) {{t(`profile.cvdHint`)}}
+ q-item-section.col-auto
+ q-btn-toggle(
+ v-model='state.config.cvd'
+ push
+ glossy
+ no-caps
+ toggle-color='primary'
+ :options='cvdChoices'
+ )
+ .actions-bar.q-mt-lg
+ q-btn(
+ icon='las la-check'
+ unelevated
+ :label='t(`common.actions.saveChanges`)'
+ color='secondary'
+ @click='save'
+ )
+
+
+
diff --git a/frontend/src/pages/Search.vue b/frontend/src/pages/Search.vue
new file mode 100644
index 00000000..121c76a6
--- /dev/null
+++ b/frontend/src/pages/Search.vue
@@ -0,0 +1,578 @@
+
+q-layout(view='hHh Lpr lff')
+ header-nav
+ q-page-container.layout-search
+ .layout-search-card
+ q-btn.layout-search-back(
+ icon='las la-arrow-circle-left'
+ color='white'
+ flat
+ round
+ @click='goBack'
+ )
+ q-tooltip(anchor='center left', self='center right') {{ t('common.actions.goback') }}
+ .layout-search-sd
+ .text-header {{ t('search.sortBy') }}
+ q-list(dense, padding)
+ q-item(
+ v-for='item of orderByOptions'
+ clickable
+ :active='item.value === state.params.orderBy'
+ @click='setOrderBy(item.value)'
+ )
+ q-item-section(side)
+ q-icon(:name='item.icon', :color='item.value === state.params.orderBy ? `primary` : ``')
+ q-item-section
+ q-item-label {{ item.label }}
+ q-item-section(
+ v-if='item.value === state.params.orderBy'
+ side
+ )
+ q-icon(
+ :name='state.params.orderByDirection === `desc` ? `mdi-transfer-down` : `mdi-transfer-up`'
+ size='sm'
+ color='primary'
+ )
+ .text-header {{ t('search.filters') }}
+ .q-pa-sm
+ q-input(
+ outlined
+ dense
+ :placeholder='t(`search.filterPath`)'
+ prefix='/'
+ v-model='state.params.filterPath'
+ )
+ template(v-slot:prepend)
+ q-icon(name='las la-caret-square-right', size='xs')
+ q-select.q-mt-sm(
+ outlined
+ v-model='state.selectedTags'
+ :options='state.filteredTags'
+ dense
+ options-dense
+ use-input
+ use-chips
+ multiple
+ hide-dropdown-icon
+ :input-debounce='0'
+ @update:model-value='v => syncTags(v)'
+ @filter='filterTags'
+ :placeholder='state.selectedTags.length < 1 ? t(`search.filterTags`) : ``'
+ :loading='state.loading > 0'
+ )
+ template(v-slot:prepend)
+ q-icon(name='las la-hashtag', size='xs')
+ template(v-slot:option='scope')
+ q-item(v-bind='scope.itemProps')
+ q-item-section(side)
+ q-checkbox(:model-value='scope.selected', @update:model-value='scope.toggleOption(scope.opt)', size='sm')
+ q-item-section
+ q-item-label
+ span(v-html='scope.opt')
+ //- q-input.q-mt-sm(
+ //- outlined
+ //- dense
+ //- placeholder='Last updated...'
+ //- )
+ //- template(v-slot:prepend)
+ //- q-icon(name='las la-calendar', size='xs')
+ //- q-input.q-mt-sm(
+ //- outlined
+ //- dense
+ //- placeholder='Last edited by...'
+ //- )
+ //- template(v-slot:prepend)
+ //- q-icon(name='las la-user-edit', size='xs')
+ q-select.q-mt-sm(
+ outlined
+ v-model='state.params.filterLocale'
+ emit-value
+ map-options
+ dense
+ :aria-label='t(`search.filterLocale`)'
+ :options='siteStore.locales.active'
+ option-value='code'
+ option-label='name'
+ options-dense
+ multiple
+ :display-value='t(`search.filterLocaleDisplay`, { n: state.params.filterLocale.length > 0 ? state.params.filterLocale[0].toUpperCase() : state.params.filterLocale.length }, state.params.filterLocale.length)'
+ )
+ template(v-slot:prepend)
+ q-icon(name='las la-language', size='xs')
+ template(v-slot:option='scope')
+ q-item(v-bind='scope.itemProps')
+ q-item-section(side)
+ q-checkbox(:model-value='scope.selected', @update:model-value='scope.toggleOption(scope.opt)')
+ q-item-section
+ q-item-label
+ span(v-html='scope.opt.name')
+ q-select.q-mt-sm(
+ outlined
+ v-model='state.params.filterEditor'
+ emit-value
+ map-options
+ dense
+ :aria-label='t(`search.filterEditor`)'
+ :options='editors'
+ )
+ template(v-slot:prepend)
+ q-icon(name='las la-pen-nib', size='xs')
+ q-select.q-mt-sm(
+ outlined
+ v-model='state.params.filterPublishState'
+ emit-value
+ map-options
+ dense
+ :aria-label='t(`search.filterPublishState`)'
+ :options='publishStates'
+ )
+ template(v-slot:prepend)
+ q-icon(name='las la-traffic-light', size='xs')
+ q-page(:style-fn='pageStyle')
+ .text-header.flex
+ span {{t('search.results')}}
+ q-space
+ transition(name='slide-up', mode='out-in')
+ i18n-t(
+ v-if='!siteStore.searchIsLoading'
+ keypath='search.totalResults'
+ tag='span'
+ class='text-caption'
+ :plural='state.total'
+ )
+ strong {{ state.total }}
+ .q-pa-lg(v-if='state.results.length < 1')
+ i18n-t(keypath='search.noResults', tag='span', v-if='siteStore.search && siteStore.searchLastQuery')
+ strong {{ siteStore.searchLastQuery }}
+ span(v-else): em {{ t('search.emptyQuery') }}
+ q-list(separator)
+ q-item(
+ v-for='item of state.results'
+ clickable
+ :to='`/` + item.path'
+ )
+ q-item-section(avatar)
+ q-avatar(color='primary' text-color='white' rounded :icon='item.icon')
+ q-item-section
+ q-item-label {{ item.title }}
+ q-item-label(v-if='item.description', caption) {{ item.description }}
+ q-item-label.text-highlight(v-if='item.highlight', caption)
+ span(v-html='item.highlight')
+ q-item-section(side)
+ .flex.layout-search-itemtags
+ q-chip(
+ v-for='tag of item.tags'
+ square
+ color='secondary'
+ text-color='white'
+ icon='las la-hashtag'
+ size='sm'
+ ) {{ tag }}
+ .flex
+ .text-caption.q-mr-sm.text-grey /{{ item.path }}
+ .text-caption {{ humanizeDate(item.updatedAt) }}
+
+ q-inner-loading(:showing='state.loading > 0')
+ main-overlay-dialog
+ footer-nav
+
+
+
+
+
diff --git a/frontend/src/renderers/markdown.js b/frontend/src/renderers/markdown.js
new file mode 100644
index 00000000..4559e89f
--- /dev/null
+++ b/frontend/src/renderers/markdown.js
@@ -0,0 +1,186 @@
+import MarkdownIt from 'markdown-it'
+import mdAttrs from 'markdown-it-attrs'
+import mdDecorate from 'markdown-it-decorate'
+import { full as mdEmoji } from 'markdown-it-emoji'
+import mdTaskLists from 'markdown-it-task-lists'
+import mdExpandTabs from 'markdown-it-expand-tabs'
+import mdAbbr from 'markdown-it-abbr'
+import mdSup from 'markdown-it-sup'
+import mdSub from 'markdown-it-sub'
+import mdMark from 'markdown-it-mark'
+import mdMultiTable from 'markdown-it-multimd-table'
+import mdFootnote from 'markdown-it-footnote'
+import mdMdc from 'markdown-it-mdc'
+import katex from 'katex'
+import mdUnderline from './modules/markdown-it-underline'
+import mdImsize from './modules/markdown-it-imsize'
+import 'katex/dist/contrib/mhchem'
+import twemoji from 'twemoji'
+import plantuml from './modules/plantuml'
+import kroki from './modules/kroki.mjs'
+import katexHelper from './modules/katex'
+
+import hljs from 'highlight.js'
+
+import { escape, findLast, times } from 'lodash-es'
+
+const quoteStyles = {
+ chinese: '””‘’',
+ english: '“”‘’',
+ french: ['«\xA0', '\xA0»', '‹\xA0', '\xA0›'],
+ german: '„“‚‘',
+ greek: '«»‘’',
+ japanese: '「」「」',
+ hungarian: '„”’’',
+ polish: '„”‚‘',
+ portuguese: '«»‘’',
+ russian: '«»„“',
+ spanish: '«»‘’',
+ swedish: '””’’'
+}
+
+export class MarkdownRenderer {
+ constructor (config = {}) {
+ this.md = new MarkdownIt({
+ html: config.allowHTML,
+ breaks: config.lineBreaks,
+ linkify: config.linkify,
+ typography: config.typographer,
+ quotes: quoteStyles[config.quotes] ?? quoteStyles.english,
+ highlight (str, lang) {
+ if (lang === 'diagram') {
+ return `${Buffer.from(str, 'base64').toString()}`
+ } else if (['mermaid', 'plantuml'].includes(lang)) {
+ return `${escape(str)}
`
+ } else {
+ const highlighted = lang ? hljs.highlight(str, { language: lang, ignoreIllegals: true }) : { value: str }
+ const lineCount = highlighted.value.match(/\n/g).length
+ const lineNums = lineCount > 1 ? `${times(lineCount, n => '').join('')}` : ''
+ return `${highlighted.value}${lineNums}
`
+ }
+ }
+ })
+ .use(mdMdc)
+ .use(mdAttrs, {
+ allowedAttributes: ['id', 'class', 'target']
+ })
+ .use(mdDecorate)
+ .use(mdEmoji)
+ .use(mdTaskLists, { label: false, labelAfter: false })
+ .use(mdExpandTabs, { tabWidth: config.tabWidth })
+ .use(mdAbbr)
+ .use(mdSup)
+ .use(mdSub)
+ .use(mdMark)
+ .use(mdFootnote)
+ .use(mdImsize)
+
+ if (config.underline) {
+ this.md.use(mdUnderline)
+ }
+
+ if (config.mdmultiTable) {
+ this.md.use(mdMultiTable, { multiline: true, rowspan: true, headerless: true })
+ }
+
+ // --------------------------------
+ // PLANTUML
+ // --------------------------------
+
+ if (config.plantuml) {
+ plantuml.init(this.md, { server: config.plantumlServerUrl })
+ }
+
+ // --------------------------------
+ // KROKI
+ // --------------------------------
+
+ if (config.kroki) {
+ kroki.init(this.md, { server: config.krokiServerUrl })
+ }
+
+ // --------------------------------
+ // KATEX
+ // --------------------------------
+
+ const macros = {}
+
+ // TODO: Add mhchem (needs esm conversion)
+ // Add \ce, \pu, and \tripledash to the KaTeX macros.
+ // katex.__defineMacro('\\ce', function (context) {
+ // return chemParse(context.consumeArgs(1)[0], 'ce')
+ // })
+ // katex.__defineMacro('\\pu', function (context) {
+ // return chemParse(context.consumeArgs(1)[0], 'pu')
+ // })
+
+ // Needed for \bond for the ~ forms
+ // Raise by 2.56mu, not 2mu. We're raising a hyphen-minus, U+002D, not
+ // a mathematical minus, U+2212. So we need that extra 0.56.
+ katex.__defineMacro('\\tripledash', '{\\vphantom{-}\\raisebox{2.56mu}{$\\mkern2mu' + '\\tiny\\text{-}\\mkern1mu\\text{-}\\mkern1mu\\text{-}\\mkern2mu$}}')
+ this.md.inline.ruler.after('escape', 'katex_inline', katexHelper.katexInline)
+ this.md.renderer.rules.katex_inline = (tokens, idx) => {
+ try {
+ return katex.renderToString(tokens[idx].content, {
+ displayMode: false, macros
+ })
+ } catch (err) {
+ console.warn(err)
+ return tokens[idx].content
+ }
+ }
+ this.md.block.ruler.after('blockquote', 'katex_block', katexHelper.katexBlock, {
+ alt: ['paragraph', 'reference', 'blockquote', 'list']
+ })
+ this.md.renderer.rules.katex_block = (tokens, idx) => {
+ try {
+ return '' + katex.renderToString(tokens[idx].content, {
+ displayMode: true, macros
+ }) + '
'
+ } catch (err) {
+ console.warn(err)
+ return tokens[idx].content
+ }
+ }
+
+ // --------------------------------
+ // TWEMOJI
+ // --------------------------------
+
+ this.md.renderer.rules.emoji = (token, idx) => {
+ return twemoji.parse(token[idx].content, {
+ callback (icon, opts) {
+ return `/_assets/svg/twemoji/${icon}.svg`
+ }
+ })
+ }
+
+ // --------------------------------
+ // Inject line numbers for preview scroll sync
+ // --------------------------------
+
+ this.linesMap = []
+ const injectLineNumbers = (tokens, idx, options, env, slf) => {
+ let line
+ if (tokens[idx].map && tokens[idx].level === 0) {
+ line = tokens[idx].map[0] + 1
+ tokens[idx].attrJoin('class', 'line')
+ tokens[idx].attrSet('data-line', String(line))
+ this.linesMap.push(line)
+ }
+ return slf.renderToken(tokens, idx, options, env, slf)
+ }
+ this.md.renderer.rules.paragraph_open = injectLineNumbers
+ this.md.renderer.rules.heading_open = injectLineNumbers
+ this.md.renderer.rules.blockquote_open = injectLineNumbers
+ }
+
+ render (src) {
+ this.linesMap = []
+ return this.md.render(src)
+ }
+
+ getClosestPreviewLine (line) {
+ return findLast(this.linesMap, n => n <= line)
+ }
+}
diff --git a/frontend/src/renderers/modules/katex.js b/frontend/src/renderers/modules/katex.js
new file mode 100644
index 00000000..74a096db
--- /dev/null
+++ b/frontend/src/renderers/modules/katex.js
@@ -0,0 +1,145 @@
+// Test if potential opening or closing delimieter
+// Assumes that there is a "$" at state.src[pos]
+function isValidDelim (state, pos) {
+ const max = state.posMax
+ let canOpen = true
+ let canClose = true
+
+ const prevChar = pos > 0 ? state.src.charCodeAt(pos - 1) : -1
+ const nextChar = pos + 1 <= max ? state.src.charCodeAt(pos + 1) : -1
+
+ // Check non-whitespace conditions for opening and closing, and
+ // check that closing delimeter isn't followed by a number
+ if (prevChar === 0x20/* " " */ || prevChar === 0x09/* \t */ ||
+ (nextChar >= 0x30/* "0" */ && nextChar <= 0x39/* "9" */)) {
+ canClose = false
+ }
+ if (nextChar === 0x20/* " " */ || nextChar === 0x09/* \t */) {
+ canOpen = false
+ }
+
+ return {
+ canOpen,
+ canClose
+ }
+}
+
+export default {
+ katexInline (state, silent) {
+ let match, token, res, pos
+
+ if (state.src[state.pos] !== '$') { return false }
+
+ res = isValidDelim(state, state.pos)
+ if (!res.canOpen) {
+ if (!silent) { state.pending += '$' }
+ state.pos += 1
+ return true
+ }
+
+ // First check for and bypass all properly escaped delimieters
+ // This loop will assume that the first leading backtick can not
+ // be the first character in state.src, which is known since
+ // we have found an opening delimieter already.
+ const start = state.pos + 1
+ match = start
+ while ((match = state.src.indexOf('$', match)) !== -1) {
+ // Found potential $, look for escapes, pos will point to
+ // first non escape when complete
+ pos = match - 1
+ while (state.src[pos] === '\\') { pos -= 1 }
+
+ // Even number of escapes, potential closing delimiter found
+ if (((match - pos) % 2) === 1) { break }
+ match += 1
+ }
+
+ // No closing delimter found. Consume $ and continue.
+ if (match === -1) {
+ if (!silent) { state.pending += '$' }
+ state.pos = start
+ return true
+ }
+
+ // Check if we have empty content, ie: $$. Do not parse.
+ if (match - start === 0) {
+ if (!silent) { state.pending += '$$' }
+ state.pos = start + 1
+ return true
+ }
+
+ // Check for valid closing delimiter
+ res = isValidDelim(state, match)
+ if (!res.canClose) {
+ if (!silent) { state.pending += '$' }
+ state.pos = start
+ return true
+ }
+
+ if (!silent) {
+ token = state.push('katex_inline', 'math', 0)
+ token.markup = '$'
+ token.content = state.src
+ // Extract the math part without the $
+ .slice(start, match)
+ // Escape the curly braces since they will be interpreted as
+ // attributes by markdown-it-attrs (the "curly_attributes"
+ // core rule)
+ .replaceAll('{', '{{')
+ .replaceAll('}', '}}')
+ }
+
+ state.pos = match + 1
+ return true
+ },
+
+ katexBlock (state, start, end, silent) {
+ let firstLine; let lastLine; let next; let lastPos; let found = false
+ let pos = state.bMarks[start] + state.tShift[start]
+ let max = state.eMarks[start]
+
+ if (pos + 2 > max) { return false }
+ if (state.src.slice(pos, pos + 2) !== '$$') { return false }
+
+ pos += 2
+ firstLine = state.src.slice(pos, max)
+
+ if (silent) { return true }
+ if (firstLine.trim().slice(-2) === '$$') {
+ // Single line expression
+ firstLine = firstLine.trim().slice(0, -2)
+ found = true
+ }
+
+ for (next = start; !found;) {
+ next++
+
+ if (next >= end) { break }
+
+ pos = state.bMarks[next] + state.tShift[next]
+ max = state.eMarks[next]
+
+ if (pos < max && state.tShift[next] < state.blkIndent) {
+ // non-empty line with negative indent should stop the list:
+ break
+ }
+
+ if (state.src.slice(pos, max).trim().slice(-2) === '$$') {
+ lastPos = state.src.slice(0, max).lastIndexOf('$$')
+ lastLine = state.src.slice(pos, lastPos)
+ found = true
+ }
+ }
+
+ state.line = next + 1
+
+ const token = state.push('katex_block', 'math', 0)
+ token.block = true
+ token.content = (firstLine && firstLine.trim() ? firstLine + '\n' : '') +
+ state.getLines(start + 1, next, state.tShift[start], true) +
+ (lastLine && lastLine.trim() ? lastLine : '')
+ token.map = [start, state.line]
+ token.markup = '$$'
+ return true
+ }
+}
diff --git a/frontend/src/renderers/modules/kroki.mjs b/frontend/src/renderers/modules/kroki.mjs
new file mode 100644
index 00000000..43e102bc
--- /dev/null
+++ b/frontend/src/renderers/modules/kroki.mjs
@@ -0,0 +1,143 @@
+import pako from 'pako'
+
+// ------------------------------------
+// Markdown - PlantUML Preprocessor
+// ------------------------------------
+
+export default {
+ init (mdinst, conf) {
+ mdinst.use((md, opts) => {
+ const openMarker = opts.openMarker || '```kroki'
+ const openChar = openMarker.charCodeAt(0)
+ const closeMarker = opts.closeMarker || '```'
+ const closeChar = closeMarker.charCodeAt(0)
+ const server = opts.server || 'https://kroki.io'
+
+ md.block.ruler.before('fence', 'kroki', (state, startLine, endLine, silent) => {
+ let nextLine
+ let markup
+ let params
+ let token
+ let i
+ let autoClosed = false
+ let start = state.bMarks[startLine] + state.tShift[startLine]
+ let max = state.eMarks[startLine]
+
+ // Check out the first character quickly,
+ // this should filter out most of non-uml blocks
+ //
+ if (openChar !== state.src.charCodeAt(start)) { return false }
+
+ // Check out the rest of the marker string
+ //
+ for (i = 0; i < openMarker.length; ++i) {
+ if (openMarker[i] !== state.src[start + i]) { return false }
+ }
+
+ markup = state.src.slice(start, start + i)
+ params = state.src.slice(start + i, max)
+
+ // Since start is found, we can report success here in validation mode
+ //
+ if (silent) { return true }
+
+ // Search for the end of the block
+ //
+ nextLine = startLine
+
+ for (;;) {
+ nextLine++
+ if (nextLine >= endLine) {
+ // unclosed block should be autoclosed by end of document.
+ // also block seems to be autoclosed by end of parent
+ break
+ }
+
+ start = state.bMarks[nextLine] + state.tShift[nextLine]
+ max = state.eMarks[nextLine]
+
+ if (start < max && state.sCount[nextLine] < state.blkIndent) {
+ // non-empty line with negative indent should stop the list:
+ // - ```
+ // test
+ break
+ }
+
+ if (closeChar !== state.src.charCodeAt(start)) {
+ // didn't find the closing fence
+ continue
+ }
+
+ if (state.sCount[nextLine] > state.sCount[startLine]) {
+ // closing fence should not be indented with respect of opening fence
+ continue
+ }
+
+ let closeMarkerMatched = true
+ for (i = 0; i < closeMarker.length; ++i) {
+ if (closeMarker[i] !== state.src[start + i]) {
+ closeMarkerMatched = false
+ break
+ }
+ }
+
+ if (!closeMarkerMatched) {
+ continue
+ }
+
+ // make sure tail has spaces only
+ if (state.skipSpaces(start + i) < max) {
+ continue
+ }
+
+ // found!
+ autoClosed = true
+ break
+ }
+
+ let contents = state.src
+ .split('\n')
+ .slice(startLine + 1, nextLine)
+ .join('\n')
+
+ // We generate a token list for the alt property, to mimic what the image parser does.
+ let altToken = []
+ // Remove leading space if any.
+ let alt = params ? params.slice(1) : 'uml diagram'
+ state.md.inline.parse(
+ alt,
+ state.md,
+ state.env,
+ altToken
+ )
+
+ let firstlf = contents.indexOf('\n')
+ if (firstlf === -1) firstlf = undefined
+ let diagramType = contents.substring(0, firstlf)
+ contents = contents.substring(firstlf + 1)
+
+ const result = pako.deflate(contents).toString('base64').replace(/\+/g, '-').replace(/\//g, '_')
+
+ token = state.push('kroki', 'img', 0)
+ // alt is constructed from children. No point in populating it here.
+ token.attrs = [ [ 'src', `${server}/${diagramType}/svg/${result}` ], [ 'alt', '' ], ['class', 'uml-diagram prefetch-candidate'] ]
+ token.block = true
+ token.children = altToken
+ token.info = params
+ token.map = [ startLine, nextLine ]
+ token.markup = markup
+
+ state.line = nextLine + (autoClosed ? 1 : 0)
+
+ return true
+ }, {
+ alt: [ 'paragraph', 'reference', 'blockquote', 'list' ]
+ })
+ md.renderer.rules.kroki = md.renderer.rules.image
+ }, {
+ openMarker: conf.openMarker,
+ closeMarker: conf.closeMarker,
+ server: conf.server
+ })
+ }
+}
diff --git a/frontend/src/renderers/modules/markdown-it-imsize.js b/frontend/src/renderers/modules/markdown-it-imsize.js
new file mode 100644
index 00000000..6b6b30e6
--- /dev/null
+++ b/frontend/src/renderers/modules/markdown-it-imsize.js
@@ -0,0 +1,259 @@
+// Adapted from markdown-it-imsize plugin by @tatsy
+// Original source https://github.com/tatsy/markdown-it-imsize/blob/master/lib/index.js
+
+function renderImSize (state, silent) {
+ let attrs
+ let code
+ let label
+ let pos
+ let ref
+ let res
+ let title
+ let width = ''
+ let height = ''
+ let token
+ let tokens
+ let start
+ let href = ''
+ const oldPos = state.pos
+ const max = state.posMax
+
+ if (state.src.charCodeAt(state.pos) !== 0x21/* ! */) { return false }
+ if (state.src.charCodeAt(state.pos + 1) !== 0x5B/* [ */) { return false }
+
+ const labelStart = state.pos + 2
+ const labelEnd = state.md.helpers.parseLinkLabel(state, state.pos + 1, false)
+
+ // parser failed to find ']', so it's not a valid link
+ if (labelEnd < 0) { return false }
+
+ pos = labelEnd + 1
+ if (pos < max && state.src.charCodeAt(pos) === 0x28/* ( */) {
+ //
+ // Inline link
+ //
+
+ // [link]( "title" )
+ // ^^ skipping these spaces
+ pos++
+ for (; pos < max; pos++) {
+ code = state.src.charCodeAt(pos)
+ if (code !== 0x20 && code !== 0x0A) { break }
+ }
+ if (pos >= max) { return false }
+
+ // [link]( "title" )
+ // ^^^^^^ parsing link destination
+ start = pos
+ res = state.md.helpers.parseLinkDestination(state.src, pos, state.posMax)
+ if (res.ok) {
+ href = state.md.normalizeLink(res.str)
+ if (state.md.validateLink(href)) {
+ pos = res.pos
+ } else {
+ href = ''
+ }
+ }
+
+ // [link]( "title" )
+ // ^^ skipping these spaces
+ start = pos
+ for (; pos < max; pos++) {
+ code = state.src.charCodeAt(pos)
+ if (code !== 0x20 && code !== 0x0A) { break }
+ }
+
+ // [link]( "title" )
+ // ^^^^^^^ parsing link title
+ res = state.md.helpers.parseLinkTitle(state.src, pos, state.posMax)
+ if (pos < max && start !== pos && res.ok) {
+ title = res.str
+ pos = res.pos
+
+ // [link]( "title" )
+ // ^^ skipping these spaces
+ for (; pos < max; pos++) {
+ code = state.src.charCodeAt(pos)
+ if (code !== 0x20 && code !== 0x0A) { break }
+ }
+ } else {
+ title = ''
+ }
+
+ // [link]( "title" =WxH )
+ // ^^^^ parsing image size
+ if (pos - 1 >= 0) {
+ code = state.src.charCodeAt(pos - 1)
+
+ // there must be at least one white spaces
+ // between previous field and the size
+ if (code === 0x20) {
+ res = parseImageSize(state.src, pos, state.posMax)
+ if (res.ok) {
+ width = res.width
+ height = res.height
+ pos = res.pos
+
+ // [link]( "title" =WxH )
+ // ^^ skipping these spaces
+ for (; pos < max; pos++) {
+ code = state.src.charCodeAt(pos)
+ if (code !== 0x20 && code !== 0x0A) { break }
+ }
+ }
+ }
+ }
+
+ if (pos >= max || state.src.charCodeAt(pos) !== 0x29/* ) */) {
+ state.pos = oldPos
+ return false
+ }
+ pos++
+ } else {
+ //
+ // Link reference
+ //
+ if (typeof state.env.references === 'undefined') { return false }
+
+ // [foo] [bar]
+ // ^^ optional whitespace (can include newlines)
+ for (; pos < max; pos++) {
+ code = state.src.charCodeAt(pos)
+ if (code !== 0x20 && code !== 0x0A) { break }
+ }
+
+ if (pos < max && state.src.charCodeAt(pos) === 0x5B/* [ */) {
+ start = pos + 1
+ pos = state.md.helpers.parseLinkLabel(state, pos)
+ if (pos >= 0) {
+ label = state.src.slice(start, pos++)
+ } else {
+ pos = labelEnd + 1
+ }
+ } else {
+ pos = labelEnd + 1
+ }
+
+ // covers label === '' and label === undefined
+ // (collapsed reference link and shortcut reference link respectively)
+ if (!label) { label = state.src.slice(labelStart, labelEnd) }
+
+ ref = state.env.references[state.md.utils.normalizeReference(label)]
+ if (!ref) {
+ state.pos = oldPos
+ return false
+ }
+ href = ref.href
+ title = ref.title
+ }
+
+ //
+ // We found the end of the link, and know for a fact it's a valid link;
+ // so all that's left to do is to call tokenizer.
+ //
+ if (!silent) {
+ state.pos = labelStart
+ state.posMax = labelEnd
+
+ const newState = new state.md.inline.State(
+ state.src.slice(labelStart, labelEnd),
+ state.md,
+ state.env,
+ tokens = []
+ )
+ newState.md.inline.tokenize(newState)
+
+ token = state.push('image', 'img', 0)
+ token.attrs = attrs = [['src', href],
+ ['alt', '']]
+ token.children = tokens
+ if (title) {
+ attrs.push(['title', title])
+ }
+
+ if (width !== '') {
+ attrs.push(['width', width])
+ }
+
+ if (height !== '') {
+ attrs.push(['height', height])
+ }
+ }
+
+ state.pos = pos
+ state.posMax = max
+ return true
+}
+
+function parseNextNumber (str, pos, max) {
+ let code
+ const start = pos
+ const result = {
+ ok: false,
+ pos,
+ value: ''
+ }
+
+ code = str.charCodeAt(pos)
+
+ while ((pos < max && (code >= 0x30 /* 0 */ && code <= 0x39 /* 9 */)) || code === 0x25 /* % */) {
+ code = str.charCodeAt(++pos)
+ }
+
+ result.ok = true
+ result.pos = pos
+ result.value = str.slice(start, pos)
+
+ return result
+}
+
+function parseImageSize (str, pos, max) {
+ let code
+ const result = {
+ ok: false,
+ pos: 0,
+ width: '',
+ height: ''
+ }
+
+ if (pos >= max) { return result }
+
+ code = str.charCodeAt(pos)
+
+ if (code !== 0x3d /* = */) { return result }
+
+ pos++
+
+ // size must follow = without any white spaces as follows
+ // (1) =300x200
+ // (2) =300x
+ // (3) =x200
+ code = str.charCodeAt(pos)
+ if (code !== 0x78 /* x */ && (code < 0x30 || code > 0x39) /* [0-9] */) {
+ return result
+ }
+
+ // parse width
+ const resultW = parseNextNumber(str, pos, max)
+ pos = resultW.pos
+
+ // next charactor must be 'x'
+ code = str.charCodeAt(pos)
+ if (code !== 0x78 /* x */) { return result }
+
+ pos++
+
+ // parse height
+ const resultH = parseNextNumber(str, pos, max)
+ pos = resultH.pos
+
+ result.width = resultW.value
+ result.height = resultH.value
+ result.pos = pos
+ result.ok = true
+ return result
+}
+
+export default (md) => {
+ md.inline.ruler.before('emphasis', 'image', renderImSize)
+}
diff --git a/frontend/src/renderers/modules/markdown-it-underline.js b/frontend/src/renderers/modules/markdown-it-underline.js
new file mode 100644
index 00000000..b898d1ce
--- /dev/null
+++ b/frontend/src/renderers/modules/markdown-it-underline.js
@@ -0,0 +1,12 @@
+function renderEm (tokens, idx, opts, env, slf) {
+ const token = tokens[idx]
+ if (token.markup === '_') {
+ token.tag = 'u'
+ }
+ return slf.renderToken(tokens, idx, opts)
+}
+
+export default (md) => {
+ md.renderer.rules.em_open = renderEm
+ md.renderer.rules.em_close = renderEm
+}
diff --git a/frontend/src/renderers/modules/plantuml.js b/frontend/src/renderers/modules/plantuml.js
new file mode 100644
index 00000000..9d5e3ea5
--- /dev/null
+++ b/frontend/src/renderers/modules/plantuml.js
@@ -0,0 +1,187 @@
+import pako from 'pako'
+
+// ------------------------------------
+// Markdown - PlantUML Preprocessor
+// ------------------------------------
+
+export default {
+ init (mdinst, conf) {
+ mdinst.use((md, opts) => {
+ const openMarker = opts.openMarker || '```plantuml'
+ const openChar = openMarker.charCodeAt(0)
+ const closeMarker = opts.closeMarker || '```'
+ const closeChar = closeMarker.charCodeAt(0)
+ const imageFormat = opts.imageFormat || 'svg'
+ const server = opts.server || 'https://plantuml.requarks.io'
+
+ md.block.ruler.before('fence', 'uml_diagram', (state, startLine, endLine, silent) => {
+ let nextLine
+ let i
+ let autoClosed = false
+ let start = state.bMarks[startLine] + state.tShift[startLine]
+ let max = state.eMarks[startLine]
+
+ // Check out the first character quickly,
+ // this should filter out most of non-uml blocks
+ //
+ if (openChar !== state.src.charCodeAt(start)) { return false }
+
+ // Check out the rest of the marker string
+ //
+ for (i = 0; i < openMarker.length; ++i) {
+ if (openMarker[i] !== state.src[start + i]) { return false }
+ }
+
+ const markup = state.src.slice(start, start + i)
+ const params = state.src.slice(start + i, max)
+
+ // Since start is found, we can report success here in validation mode
+ //
+ if (silent) { return true }
+
+ // Search for the end of the block
+ //
+ nextLine = startLine
+
+ for (;;) {
+ nextLine++
+ if (nextLine >= endLine) {
+ // unclosed block should be autoclosed by end of document.
+ // also block seems to be autoclosed by end of parent
+ break
+ }
+
+ start = state.bMarks[nextLine] + state.tShift[nextLine]
+ max = state.eMarks[nextLine]
+
+ if (start < max && state.sCount[nextLine] < state.blkIndent) {
+ // non-empty line with negative indent should stop the list:
+ // - ```
+ // test
+ break
+ }
+
+ if (closeChar !== state.src.charCodeAt(start)) {
+ // didn't find the closing fence
+ continue
+ }
+
+ if (state.sCount[nextLine] > state.sCount[startLine]) {
+ // closing fence should not be indented with respect of opening fence
+ continue
+ }
+
+ let closeMarkerMatched = true
+ for (i = 0; i < closeMarker.length; ++i) {
+ if (closeMarker[i] !== state.src[start + i]) {
+ closeMarkerMatched = false
+ break
+ }
+ }
+
+ if (!closeMarkerMatched) {
+ continue
+ }
+
+ // make sure tail has spaces only
+ if (state.skipSpaces(start + i) < max) {
+ continue
+ }
+
+ // found!
+ autoClosed = true
+ break
+ }
+
+ const contents = state.src
+ .split('\n')
+ .slice(startLine + 1, nextLine)
+ .join('\n')
+
+ // We generate a token list for the alt property, to mimic what the image parser does.
+ const altToken = []
+ // Remove leading space if any.
+ const alt = params ? params.slice(1) : 'uml diagram'
+ state.md.inline.parse(
+ alt,
+ state.md,
+ state.env,
+ altToken
+ )
+
+ const zippedCode = encode64(pako.deflate('@startuml\n' + contents + '\n@enduml', { to: 'string' }))
+
+ const token = state.push('uml_diagram', 'img', 0)
+ // alt is constructed from children. No point in populating it here.
+ token.attrs = [['src', `${server}/${imageFormat}/${zippedCode}`], ['alt', ''], ['class', 'uml-diagram']]
+ token.block = true
+ token.children = altToken
+ token.info = params
+ token.map = [startLine, nextLine]
+ token.markup = markup
+
+ state.line = nextLine + (autoClosed ? 1 : 0)
+
+ return true
+ }, {
+ alt: ['paragraph', 'reference', 'blockquote', 'list']
+ })
+ md.renderer.rules.uml_diagram = md.renderer.rules.image
+ }, {
+ openMarker: conf.openMarker,
+ closeMarker: conf.closeMarker,
+ imageFormat: conf.imageFormat,
+ server: conf.server
+ })
+ }
+}
+
+function encode64 (data) {
+ let r = ''
+ for (let i = 0; i < data.length; i += 3) {
+ if (i + 2 === data.length) {
+ r += append3bytes(data.charCodeAt(i), data.charCodeAt(i + 1), 0)
+ } else if (i + 1 === data.length) {
+ r += append3bytes(data.charCodeAt(i), 0, 0)
+ } else {
+ r += append3bytes(data.charCodeAt(i), data.charCodeAt(i + 1), data.charCodeAt(i + 2))
+ }
+ }
+ return r
+}
+
+function append3bytes (b1, b2, b3) {
+ const c1 = b1 >> 2
+ const c2 = ((b1 & 0x3) << 4) | (b2 >> 4)
+ const c3 = ((b2 & 0xF) << 2) | (b3 >> 6)
+ const c4 = b3 & 0x3F
+ let r = ''
+ r += encode6bit(c1 & 0x3F)
+ r += encode6bit(c2 & 0x3F)
+ r += encode6bit(c3 & 0x3F)
+ r += encode6bit(c4 & 0x3F)
+ return r
+}
+
+function encode6bit (raw) {
+ let b = raw
+ if (b < 10) {
+ return String.fromCharCode(48 + b)
+ }
+ b -= 10
+ if (b < 26) {
+ return String.fromCharCode(65 + b)
+ }
+ b -= 26
+ if (b < 26) {
+ return String.fromCharCode(97 + b)
+ }
+ b -= 26
+ if (b === 0) {
+ return '-'
+ }
+ if (b === 1) {
+ return '_'
+ }
+ return '?'
+}
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
new file mode 100644
index 00000000..fb552660
--- /dev/null
+++ b/frontend/src/router/index.js
@@ -0,0 +1,16 @@
+import { createRouter, createMemoryHistory, createWebHistory } from 'vue-router'
+import routes from './routes'
+
+export function initializeRouter () {
+ const createHistory = import.meta.env.SSR
+ ? createMemoryHistory
+ : createWebHistory
+
+ const router = createRouter({
+ scrollBehavior: () => ({ left: 0, top: 0 }),
+ routes,
+ history: createHistory(import.meta.env.BASE_URL)
+ })
+
+ return router
+}
diff --git a/frontend/src/router/routes.js b/frontend/src/router/routes.js
new file mode 100644
index 00000000..0cf5d40a
--- /dev/null
+++ b/frontend/src/router/routes.js
@@ -0,0 +1,118 @@
+import { usePageStore } from '@/stores/page'
+
+const routes = [
+ {
+ path: '/login',
+ component: () => import('@/layouts/AuthLayout.vue'),
+ children: [
+ { path: '', component: () => import('@/pages/Login.vue') }
+ ]
+ },
+ {
+ path: '/a/:alias',
+ component: () => import('@/layouts/MainLayout.vue'),
+ beforeEnter: async (to, from) => {
+ const pageStore = usePageStore()
+ try {
+ const pathPath = await pageStore.pageAlias(to.params.alias)
+ return `/${pathPath}`
+ } catch (err) {
+ return '/_error/notfound'
+ }
+ }
+ },
+ {
+ path: '/_profile',
+ component: () => import('@/layouts/ProfileLayout.vue'),
+ children: [
+ { path: '', redirect: '/_profile/info' },
+ { path: 'info', component: () => import('@/pages/ProfileInfo.vue') },
+ { path: 'avatar', component: () => import('@/pages/ProfileAvatar.vue') },
+ { path: 'auth', component: () => import('@/pages/ProfileAuth.vue') },
+ { path: 'groups', component: () => import('@/pages/ProfileGroups.vue') }
+ ]
+ },
+ {
+ path: '/_search',
+ component: () => import('@/pages/Search.vue')
+ },
+ {
+ path: '/_admin',
+ component: () => import('@/layouts/AdminLayout.vue'),
+ children: [
+ { path: '', redirect: '/_admin/dashboard' },
+ { path: 'dashboard', component: () => import('@/pages/AdminDashboard.vue') },
+ { path: 'sites', component: () => import('@/pages/AdminSites.vue') },
+ // -> Site
+ { path: ':siteid/general', component: () => import('@/pages/AdminGeneral.vue') },
+ { path: ':siteid/blocks', component: () => import('@/pages/AdminBlocks.vue') },
+ { path: ':siteid/editors', component: () => import('@/pages/AdminEditors.vue') },
+ { path: ':siteid/locale', component: () => import('@/pages/AdminLocale.vue') },
+ { path: ':siteid/login', component: () => import('@/pages/AdminLogin.vue') },
+ { path: ':siteid/navigation', component: () => import('@/pages/AdminNavigation.vue') },
+ { path: ':siteid/storage/:id?', component: () => import('@/pages/AdminStorage.vue') },
+ { path: ':siteid/theme', component: () => import('@/pages/AdminTheme.vue') },
+ // -> Users
+ { path: 'auth', component: () => import('@/pages/AdminAuth.vue') },
+ { path: 'groups/:id?/:section?', component: () => import('@/pages/AdminGroups.vue') },
+ { path: 'users/:id?/:section?', component: () => import('@/pages/AdminUsers.vue') },
+ // -> System
+ { path: 'api', component: () => import('@/pages/AdminApi.vue') },
+ { path: 'extensions', component: () => import('@/pages/AdminExtensions.vue') },
+ { path: 'icons', component: () => import('@/pages/AdminIcons.vue') },
+ { path: 'instances', component: () => import('@/pages/AdminInstances.vue') },
+ { path: 'mail', component: () => import('@/pages/AdminMail.vue') },
+ { path: 'metrics', component: () => import('@/pages/AdminMetrics.vue') },
+ { path: 'rendering', component: () => import('@/pages/AdminRendering.vue') },
+ { path: 'scheduler', component: () => import('@/pages/AdminScheduler.vue') },
+ { path: 'search', component: () => import('@/pages/AdminSearch.vue') },
+ { path: 'security', component: () => import('@/pages/AdminSecurity.vue') },
+ { path: 'system', component: () => import('@/pages/AdminSystem.vue') },
+ { path: 'terminal', component: () => import('@/pages/AdminTerminal.vue') },
+ { path: 'utilities', component: () => import('@/pages/AdminUtilities.vue') },
+ { path: 'webhooks', component: () => import('@/pages/AdminWebhooks.vue') },
+ { path: 'flags', component: () => import('@/pages/AdminFlags.vue') }
+ ]
+ },
+ {
+ path: '/_error/:action?',
+ component: () => import('@/pages/ErrorGeneric.vue')
+ },
+ // {
+ // path: '/_unknown-site',
+ // component: () => import('../pages/UnknownSite.vue')
+ // },
+
+ // --------------------------------
+ // CREATE
+ // --------------------------------
+ {
+ path: '/_create/:editor?',
+ component: () => import('../layouts/MainLayout.vue'),
+ children: [
+ { path: '', component: () => import('../pages/Index.vue') }
+ ]
+ },
+ // --------------------------------
+ // EDIT
+ // --------------------------------
+ {
+ path: '/_edit/:pagePath?',
+ component: () => import('../layouts/MainLayout.vue'),
+ children: [
+ { path: '', component: () => import('../pages/Index.vue') }
+ ]
+ },
+ // -----------------------
+ // STANDARD PAGE CATCH-ALL
+ // -----------------------
+ {
+ path: '/:catchAll(.*)*',
+ component: () => import('../layouts/MainLayout.vue'),
+ children: [
+ { path: '', component: () => import('../pages/Index.vue') }
+ ]
+ }
+]
+
+export default routes
diff --git a/frontend/src/stores/admin.js b/frontend/src/stores/admin.js
new file mode 100644
index 00000000..fd368209
--- /dev/null
+++ b/frontend/src/stores/admin.js
@@ -0,0 +1,105 @@
+import { defineStore } from 'pinia'
+
+import { clone, cloneDeep, sortBy } from 'lodash-es'
+import semverGte from 'semver/functions/gte'
+
+/* global APOLLO_CLIENT */
+
+export const useAdminStore = defineStore('admin', {
+ state: () => ({
+ currentSiteId: null,
+ info: {
+ currentVersion: 'n/a',
+ latestVersion: 'n/a',
+ groupsTotal: 0,
+ pagesTotal: 0,
+ tagsTotal: 0,
+ usersTotal: 0,
+ loginsPastDay: 0,
+ isApiEnabled: false,
+ isMailConfigured: false,
+ isSchedulerHealthy: false
+ },
+ overlay: null,
+ overlayOpts: {},
+ sites: [],
+ locales: [
+ { code: 'en', name: 'English' }
+ ]
+ }),
+ getters: {
+ isVersionLatest: (state) => {
+ if (!state.info.currentVersion || !state.info.latestVersion || state.info.currentVersion === 'n/a' || state.info.latestVersion === 'n/a') {
+ return false
+ }
+ return semverGte(state.info.currentVersion, state.info.latestVersion)
+ }
+ },
+ actions: {
+ async fetchLocales () {
+ const resp = await APOLLO_CLIENT.query({
+ query: `
+ query getAdminLocales {
+ locales {
+ code
+ language
+ name
+ nativeName
+ }
+ }
+ `
+ })
+ this.locales = sortBy(cloneDeep(resp?.data?.locales ?? []), ['nativeName', 'name'])
+ },
+ async fetchInfo () {
+ const resp = await APOLLO_CLIENT.query({
+ query: `
+ query getAdminInfo {
+ apiState
+ metricsState
+ systemInfo {
+ groupsTotal
+ tagsTotal
+ usersTotal
+ loginsPastDay
+ currentVersion
+ latestVersion
+ isMailConfigured
+ isSchedulerHealthy
+ }
+ }
+ `,
+ fetchPolicy: 'network-only'
+ })
+ this.info.groupsTotal = clone(resp?.data?.systemInfo?.groupsTotal ?? 0)
+ this.info.tagsTotal = clone(resp?.data?.systemInfo?.tagsTotal ?? 0)
+ this.info.usersTotal = clone(resp?.data?.systemInfo?.usersTotal ?? 0)
+ this.info.loginsPastDay = clone(resp?.data?.systemInfo?.loginsPastDay ?? 0)
+ this.info.currentVersion = clone(resp?.data?.systemInfo?.currentVersion ?? 'n/a')
+ this.info.latestVersion = clone(resp?.data?.systemInfo?.latestVersion ?? 'n/a')
+ this.info.isApiEnabled = clone(resp?.data?.apiState ?? false)
+ this.info.isMetricsEnabled = clone(resp?.data?.metricsState ?? false)
+ this.info.isMailConfigured = clone(resp?.data?.systemInfo?.isMailConfigured ?? false)
+ this.info.isSchedulerHealthy = clone(resp?.data?.systemInfo?.isSchedulerHealthy ?? false)
+ },
+ async fetchSites () {
+ const resp = await APOLLO_CLIENT.query({
+ query: `
+ query getSites {
+ sites {
+ id
+ hostname
+ isEnabled
+ title
+ }
+ }
+ `,
+ fetchPolicy: 'network-only'
+ })
+ this.sites = cloneDeep(resp?.data?.sites ?? [])
+ if (!this.currentSiteId) {
+ this.currentSiteId = this.sites[0].id
+ }
+ }
+ }
+})
diff --git a/frontend/src/stores/common.js b/frontend/src/stores/common.js
new file mode 100644
index 00000000..158cc746
--- /dev/null
+++ b/frontend/src/stores/common.js
@@ -0,0 +1,41 @@
+import { defineStore } from 'pinia'
+
+import { difference } from 'lodash-es'
+
+export const useCommonStore = defineStore('common', {
+ state: () => ({
+ routerLoading: false,
+ locale: localStorage.getItem('locale') || 'en',
+ desiredLocale: localStorage.getItem('locale'),
+ blocksLoaded: []
+ }),
+ getters: {},
+ actions: {
+ async fetchLocaleStrings (locale) {
+ try {
+ return API_CLIENT.get(`locales/${locale}/strings`)
+ } catch (err) {
+ console.warn(err)
+ throw err
+ }
+ },
+ setLocale (locale) {
+ this.$patch({
+ locale,
+ desiredLocale: locale
+ })
+ localStorage.setItem('locale', locale)
+ },
+ async loadBlocks (blocks = []) {
+ const toLoad = difference(blocks, this.blocksLoaded)
+ for (const block of toLoad) {
+ try {
+ await import(/* @vite-ignore */ `/_blocks/${block}.js`)
+ this.blocksLoaded.push(block)
+ } catch (err) {
+ console.warn(`Failed to load ${block}: ${err.message}`)
+ }
+ }
+ }
+ }
+})
diff --git a/frontend/src/stores/editor.js b/frontend/src/stores/editor.js
new file mode 100644
index 00000000..7b3caaa4
--- /dev/null
+++ b/frontend/src/stores/editor.js
@@ -0,0 +1,120 @@
+import { defineStore } from 'pinia'
+
+import { clone } from 'lodash-es'
+import { v4 as uuid } from 'uuid'
+
+import { useSiteStore } from './site'
+
+const imgMimeExt = {
+ 'image/jpeg': 'jpg',
+ 'image/gif': 'gif',
+ 'image/png': 'png',
+ 'image/webp': 'webp',
+ 'image/svg+xml': 'svg',
+ 'image/tiff': 'tif'
+}
+
+export const useEditorStore = defineStore('editor', {
+ state: () => ({
+ isActive: false,
+ editor: '',
+ originPageId: '',
+ mode: 'edit',
+ activeModal: '',
+ activeModalData: null,
+ hideSideNav: false,
+ media: {
+ folderTree: [],
+ currentFolderId: 0,
+ currentFileId: null
+ },
+ checkoutDateActive: '',
+ lastSaveTimestamp: null,
+ lastChangeTimestamp: null,
+ editors: {},
+ configIsLoaded: false,
+ reasonForChange: '',
+ ignoreRouteChange: false,
+ pendingAssets: []
+ }),
+ getters: {
+ hasPendingChanges: (state) => {
+ return state.lastSaveTimestamp && state.lastSaveTimestamp !== state.lastChangeTimestamp
+ }
+ },
+ actions: {
+ addPendingAsset (data) {
+ const blobUrl = URL.createObjectURL(data)
+ if (data instanceof File) {
+ this.pendingAssets.push({
+ id: uuid(),
+ kind: 'file',
+ file: data,
+ fileName: data.name,
+ blobUrl
+ })
+ } else {
+ const fileId = uuid()
+ const fileName = `${fileId}.${imgMimeExt[data.type] || 'dat'}`
+ this.pendingAssets.push({
+ id: fileId,
+ kind: 'blob',
+ file: new File(data, fileName, { type: data.type }),
+ fileName,
+ blobUrl
+ })
+ }
+ return blobUrl
+ },
+ async fetchConfigs () {
+ const siteStore = useSiteStore()
+ try {
+ if (!siteStore.id) {
+ throw new Error('Cannot fetch editors config: Missing Site ID')
+ }
+ const resp = await APOLLO_CLIENT.query({
+ query: `
+ query fetchEditorConfigs (
+ $id: UUID!
+ ) {
+ siteById(
+ id: $id
+ ) {
+ id
+ editors {
+ asciidoc {
+ isActive
+ config
+ }
+ markdown {
+ isActive
+ config
+ }
+ wysiwyg {
+ isActive
+ config
+ }
+ }
+ }
+ }
+ `,
+ variables: {
+ id: siteStore.id
+ },
+ fetchPolicy: 'network-only'
+ })
+ this.$patch({
+ editors: {
+ asciidoc: resp?.data?.siteById?.editors?.asciidoc?.config,
+ markdown: resp?.data?.siteById?.editors?.markdown?.config,
+ wysiwyg: resp?.data?.siteById?.editors?.wysiwyg?.config
+ },
+ configIsLoaded: true
+ })
+ } catch (err) {
+ console.warn(err)
+ throw err
+ }
+ }
+ }
+})
diff --git a/frontend/src/stores/flags.js b/frontend/src/stores/flags.js
new file mode 100644
index 00000000..ccab18af
--- /dev/null
+++ b/frontend/src/stores/flags.js
@@ -0,0 +1,28 @@
+import { defineStore } from 'pinia'
+
+
+export const useFlagsStore = defineStore('flags', {
+ state: () => ({
+ loaded: false,
+ experimental: false
+ }),
+ getters: {},
+ actions: {
+ async load () {
+ try {
+ const systemFlags = await API_CLIENT.get('system/flags')
+ if (systemFlags) {
+ this.$patch({
+ ...systemFlags,
+ loaded: true
+ })
+ } else {
+ throw new Error('Could not fetch system flags.')
+ }
+ } catch (err) {
+ console.warn(err.message)
+ throw err
+ }
+ }
+ }
+})
diff --git a/frontend/src/stores/index.js b/frontend/src/stores/index.js
new file mode 100644
index 00000000..e44b46d1
--- /dev/null
+++ b/frontend/src/stores/index.js
@@ -0,0 +1,15 @@
+import { createPinia } from 'pinia'
+import { markRaw } from 'vue'
+
+export function initializeStore (router) {
+ const pinia = createPinia()
+
+ // You can add Pinia plugins here
+ // pinia.use(SomePiniaPlugin)
+
+ pinia.use(({ store }) => {
+ store.router = markRaw(router)
+ })
+
+ return pinia
+}
diff --git a/frontend/src/stores/page.js b/frontend/src/stores/page.js
new file mode 100644
index 00000000..cc6a7811
--- /dev/null
+++ b/frontend/src/stores/page.js
@@ -0,0 +1,683 @@
+import { defineStore } from 'pinia'
+
+import { cloneDeep, dropRight, initial, last, pick, transform } from 'lodash-es'
+import { DateTime } from 'luxon'
+
+import { useSiteStore } from './site'
+import { useEditorStore } from './editor'
+
+const pagePropsFragment = `
+ fragment PageRead on Page {
+ alias
+ allowComments
+ allowContributions
+ allowRatings
+ contentType
+ createdAt
+ description
+ editor
+ icon
+ id
+ isBrowsable
+ isSearchable
+ locale
+ navigationId
+ navigationMode
+ password
+ path
+ publishEndDate
+ publishStartDate
+ publishState
+ relations {
+ id
+ position
+ label
+ caption
+ icon
+ target
+ }
+ render
+ scriptJsLoad
+ scriptJsUnload
+ scriptCss
+ showSidebar
+ showTags
+ showToc
+ tags
+ title
+ toc
+ tocDepth {
+ min
+ max
+ }
+ updatedAt
+ }
+`
+const gqlQueries = {
+ pageById: `
+ query loadPage (
+ $id: UUID!
+ ) {
+ pageById(
+ id: $id
+ ) {
+ ...PageRead
+ }
+ }
+ ${pagePropsFragment}
+ `,
+ pageByPath: `
+ query loadPage (
+ $siteId: UUID!
+ $path: String!
+ ) {
+ pageByPath(
+ siteId: $siteId
+ path: $path
+ ) {
+ ...PageRead
+ }
+ }
+ ${pagePropsFragment}
+ `,
+ pageByIdWithContent: `
+ query loadPageWithContent (
+ $id: UUID!
+ ) {
+ pageById(
+ id: $id
+ ) {
+ ...PageRead,
+ content
+ }
+ }
+ ${pagePropsFragment}
+ `,
+ pageByPathWithContent: `
+ query loadPageWithContent (
+ $siteId: UUID!
+ $path: String!
+ ) {
+ pageByPath(
+ siteId: $siteId
+ path: $path
+ ) {
+ ...PageRead,
+ content
+ }
+ }
+ ${pagePropsFragment}
+ `
+}
+
+const gqlMutations = {
+ createPage: `
+ mutation createPage (
+ $alias: String
+ $allowComments: Boolean
+ $allowContributions: Boolean
+ $allowRatings: Boolean
+ $content: String!
+ $description: String!
+ $editor: String!
+ $icon: String
+ $isBrowsable: Boolean
+ $isSearchable: Boolean
+ $locale: String!
+ $path: String!
+ $publishState: PagePublishState!
+ $publishEndDate: Date
+ $publishStartDate: Date
+ $relations: [PageRelationInput!]
+ $scriptCss: String
+ $scriptJsLoad: String
+ $scriptJsUnload: String
+ $showSidebar: Boolean
+ $showTags: Boolean
+ $showToc: Boolean
+ $siteId: UUID!
+ $tags: [String!]
+ $title: String!
+ $tocDepth: PageTocDepthInput
+ ) {
+ createPage (
+ alias: $alias
+ allowComments: $allowComments
+ allowContributions: $allowContributions
+ allowRatings: $allowRatings
+ content: $content
+ description: $description
+ editor: $editor
+ icon: $icon
+ isBrowsable: $isBrowsable
+ isSearchable: $isSearchable
+ locale: $locale
+ path: $path
+ publishState: $publishState
+ publishEndDate: $publishEndDate
+ publishStartDate: $publishStartDate
+ relations: $relations
+ scriptCss: $scriptCss
+ scriptJsLoad: $scriptJsLoad
+ scriptJsUnload: $scriptJsUnload
+ showSidebar: $showSidebar
+ showTags: $showTags
+ showToc: $showToc
+ siteId: $siteId
+ tags: $tags
+ title: $title
+ tocDepth: $tocDepth
+ ) {
+ operation {
+ succeeded
+ message
+ }
+ page {
+ ...PageRead
+ }
+ }
+ }
+ ${pagePropsFragment}
+ `
+}
+
+export const usePageStore = defineStore('page', {
+ state: () => ({
+ alias: '',
+ allowComments: false,
+ allowContributions: true,
+ allowRatings: true,
+ authorId: 0,
+ authorName: '',
+ commentsCount: 0,
+ content: '',
+ createdAt: '',
+ description: '',
+ editor: '',
+ icon: 'las la-file-alt',
+ id: '',
+ isBrowsable: true,
+ isSearchable: true,
+ locale: 'en',
+ navigationId: null,
+ navigationMode: 'inherit',
+ password: '',
+ path: '',
+ publishEndDate: '',
+ publishStartDate: '',
+ publishState: '',
+ relations: [],
+ render: '',
+ scriptJsLoad: '',
+ scriptJsUnload: '',
+ scriptCss: '',
+ showSidebar: true,
+ showTags: true,
+ showToc: true,
+ tags: [],
+ title: '',
+ toc: [],
+ tocDepth: {
+ min: 1,
+ max: 2
+ },
+ updatedAt: ''
+ }),
+ getters: {
+ breadcrumbs: (state) => {
+ const siteStore = useSiteStore()
+ const pathPrefix = siteStore.useLocales ? `/${state.locale}` : ''
+ return transform(state.path.split('/'), (result, value, key) => {
+ result.push({
+ id: key,
+ title: value,
+ icon: 'las la-file-alt',
+ locale: 'en',
+ path: (last(result)?.path || pathPrefix) + `/${value}`
+ })
+ }, [])
+ },
+ folderPath: (state) => {
+ return initial(state.path.split('/')).join('/')
+ },
+ isHome: (state) => {
+ return ['', 'home'].includes(state.path)
+ }
+ },
+ actions: {
+ /**
+ * PAGE - LOAD
+ */
+ async pageLoad ({ path, id, withContent = false }) {
+ const editorStore = useEditorStore()
+ const siteStore = useSiteStore()
+ try {
+ const pageData = await API_CLIENT.get(`sites/${siteStore.id}/pages/${id ?? fastHash(path)}`, {
+ searchParams: {
+ withContent
+ }
+ }).json()
+ if (!pageData?.id) {
+ throw new Error('ERR_PAGE_NOT_FOUND')
+ }
+ // Update page store
+ this.$patch({
+ ...pageData,
+ relations: pageData.relations.map(r => pick(r, ['id', 'position', 'label', 'caption', 'icon', 'target'])),
+ tocDepth: pick(pageData.tocDepth, ['min', 'max'])
+ })
+ // Update editor state timestamps
+ const curDate = DateTime.utc()
+ editorStore.$patch({
+ lastChangeTimestamp: curDate,
+ lastSaveTimestamp: curDate
+ })
+ } catch (err) {
+ console.warn(err)
+ throw err
+ }
+ },
+ /**
+ * PAGE - GET PATH FROM ALIAS
+ */
+ async pageAlias (alias) {
+ const siteStore = useSiteStore()
+ try {
+ const resp = await APOLLO_CLIENT.query({
+ query: `
+ query fetchPathFromAlias (
+ $siteId: UUID!
+ $alias: String!
+ ) {
+ pathFromAlias (
+ siteId: $siteId
+ alias: $alias
+ ) {
+ id
+ path
+ }
+ }
+ `,
+ variables: { siteId: siteStore.id, alias },
+ fetchPolicy: 'cache-first'
+ })
+ const pagePath = cloneDeep(resp?.data?.pathFromAlias)
+ if (!pagePath?.id) {
+ throw new Error('ERR_PAGE_NOT_FOUND')
+ }
+ return pagePath.path
+ } catch (err) {
+ console.warn(err)
+ throw err
+ }
+ },
+ /**
+ * PAGE - CREATE
+ */
+ async pageCreate ({ editor, locale, path, basePath, title = '', description = '', content = '', fromNavigate = false } = {}) {
+ const editorStore = useEditorStore()
+
+ // -> Load editor config
+ if (!editorStore.configIsLoaded) {
+ await editorStore.fetchConfigs()
+ }
+
+ // -> Path normalization
+ if (path?.startsWith('/')) {
+ path = path.substring(1)
+ }
+ if (basePath?.startsWith('/')) {
+ basePath = basePath.substring(1)
+ }
+ if (basePath?.endsWith('/')) {
+ basePath = basePath.substring(0, basePath.length - 1)
+ }
+
+ // -> Redirect if not at /_create path
+ if (!this.router.currentRoute.value.path.startsWith('/_create/') && !fromNavigate) {
+ editorStore.$patch({ ignoreRouteChange: true })
+ this.router.push(`/_create/${editor}`)
+ }
+
+ // -> Init editor
+ editorStore.$patch({
+ originPageId: editorStore.isActive ? editorStore.originPageId : this.id, // Don't replace if already in edit mode
+ isActive: true,
+ mode: 'create',
+ editor
+ })
+
+ // -> Default Page Path
+ let newPath = path
+ if (!path && path !== '') {
+ const parentPath = basePath || basePath === '' ? basePath : dropRight(this.path.split('/'), 1).join('/')
+ newPath = parentPath ? `${parentPath}/new-page` : 'new-page'
+ }
+
+ // -> Set Default Page Data
+ this.$patch({
+ id: 0,
+ locale: locale || this.locale,
+ path: newPath,
+ title: title ?? '',
+ description: description ?? '',
+ icon: 'las la-file-alt',
+ alias: '',
+ publishState: 'published',
+ relations: [],
+ tags: [],
+ content: content ?? '',
+ render: '',
+ isBrowsable: true,
+ isSearchable: true,
+ mode: 'edit'
+ })
+ },
+ /**
+ * PAGE - DUPLICATE
+ */
+ async pageDuplicate ({ sourecePageId, title, path }) {
+ try {
+ const resp = await APOLLO_CLIENT.query({
+ query: `
+ query loadPageSource (
+ $id: UUID!
+ ) {
+ pageById(
+ id: $id
+ ) {
+ id
+ content
+ contentType
+ description
+ editor
+ }
+ }
+ `,
+ variables: {
+ id: sourecePageId ?? pageStore.id
+ },
+ fetchPolicy: 'network-only'
+ })
+ const pageData = cloneDeep(resp?.data?.pageById ?? {})
+ if (!pageData?.id) {
+ throw new Error('ERR_PAGE_NOT_FOUND')
+ }
+ this.pageCreate({
+ editor: pageData.editor,
+ title,
+ path,
+ content: pageData.content,
+ description: pageData.description
+ })
+ } catch (err) {
+ console.warn(err)
+ throw err
+ }
+ },
+ /**
+ * PAGE - EDIT
+ */
+ async pageEdit ({ path, id, fromNavigate = false } = {}) {
+ const editorStore = useEditorStore()
+
+ const loadArgs = {
+ withContent: true
+ }
+
+ if (id) {
+ loadArgs.id = id
+ } else if (path) {
+ loadArgs.path = path
+ } else {
+ loadArgs.id = this.id
+ }
+
+ await this.pageLoad(loadArgs)
+
+ if (!editorStore.configIsLoaded) {
+ await editorStore.fetchConfigs()
+ }
+
+ editorStore.$patch({
+ isActive: true,
+ mode: 'edit',
+ editor: this.editor
+ })
+ },
+ /**
+ * PAGE - MOVE
+ */
+ async pageMove ({ id, title, path } = {}) {
+ const resp = await APOLLO_CLIENT.mutate({
+ mutation: `
+ mutation movePage (
+ $id: UUID!
+ $destinationLocale: String!
+ $destinationPath: String!
+ $title: String
+ ) {
+ movePage (
+ id: $id
+ destinationLocale: $destinationLocale
+ destinationPath: $destinationPath
+ title: $title
+ ) {
+ operation {
+ succeeded
+ message
+ }
+ }
+ }
+ `,
+ variables: {
+ id,
+ destinationLocale: this.locale,
+ destinationPath: path,
+ title
+ }
+ })
+ const result = resp?.data?.movePage?.operation ?? {}
+ if (!result.succeeded) {
+ throw new Error(result.message)
+ } else {
+ this.router.replace(`/${path}`)
+ }
+ },
+ /**
+ * PAGE - Rename
+ */
+ async pageRename ({ id, title } = {}) {
+ const resp = await APOLLO_CLIENT.mutate({
+ mutation: `
+ mutation renamePage (
+ $id: UUID!
+ $patch: PageUpdateInput!
+ ) {
+ updatePage (
+ id: $id
+ patch: $patch
+ ) {
+ operation {
+ succeeded
+ message
+ }
+ }
+ }
+ `,
+ variables: {
+ id: id,
+ patch: {
+ title
+ }
+ }
+ })
+ const result = resp?.data?.updatePage?.operation ?? {}
+ if (!result.succeeded) {
+ throw new Error(result.message)
+ }
+
+ // Update page store
+ if (id === this.id) {
+ this.$patch({ title })
+ }
+ },
+ /**
+ * PAGE SAVE
+ */
+ async pageSave () {
+ const editorStore = useEditorStore()
+ const siteStore = useSiteStore()
+ try {
+ if (editorStore.mode === 'create') {
+ const resp = await APOLLO_CLIENT.mutate({
+ mutation: gqlMutations.createPage,
+ variables: {
+ ...pick(this, [
+ 'alias',
+ 'allowComments',
+ 'allowContributions',
+ 'allowRatings',
+ 'content',
+ 'description',
+ 'icon',
+ 'isBrowsable',
+ 'isSearchable',
+ 'locale',
+ 'password',
+ 'path',
+ 'publishEndDate',
+ 'publishStartDate',
+ 'publishState',
+ 'relations',
+ 'scriptJsLoad',
+ 'scriptJsUnload',
+ 'scriptCss',
+ 'showSidebar',
+ 'showTags',
+ 'showToc',
+ 'tags',
+ 'title',
+ 'tocDepth'
+ ]),
+ editor: editorStore.editor,
+ siteId: siteStore.id
+ }
+ })
+ const result = resp?.data?.createPage?.operation ?? {}
+ if (!result.succeeded) {
+ throw new Error(result.message)
+ }
+ const pageData = cloneDeep(resp.data.createPage.page ?? {})
+ if (!pageData?.id) {
+ throw new Error('ERR_CREATED_PAGE_NOT_FOUND')
+ }
+ // Update page store
+ this.$patch({
+ ...pageData,
+ relations: pageData.relations.map(r => pick(r, ['id', 'position', 'label', 'caption', 'icon', 'target'])),
+ tocDepth: pick(pageData.tocDepth, ['min', 'max'])
+ })
+
+ editorStore.$patch({
+ mode: 'edit'
+ })
+
+ this.router.replace(`/${this.path}`)
+ } else {
+ const resp = await APOLLO_CLIENT.mutate({
+ mutation: `
+ mutation savePage (
+ $id: UUID!
+ $patch: PageUpdateInput!
+ ) {
+ updatePage (
+ id: $id
+ patch: $patch
+ ) {
+ operation {
+ succeeded
+ message
+ }
+ }
+ }
+ `,
+ variables: {
+ id: this.id,
+ patch: {
+ ...pick(this, [
+ 'alias',
+ 'allowComments',
+ 'allowContributions',
+ 'allowRatings',
+ 'content',
+ 'description',
+ 'icon',
+ 'isBrowsable',
+ 'isSearchable',
+ 'password',
+ 'publishEndDate',
+ 'publishStartDate',
+ 'publishState',
+ 'relations',
+ 'scriptJsLoad',
+ 'scriptJsUnload',
+ 'scriptCss',
+ 'showSidebar',
+ 'showTags',
+ 'showToc',
+ 'tags',
+ 'title',
+ 'tocDepth'
+ ]),
+ reasonForChange: editorStore.reasonForChange
+ }
+ }
+ })
+ const result = resp?.data?.updatePage?.operation ?? {}
+ if (!result.succeeded) {
+ throw new Error(result.message)
+ }
+ }
+ // Update editor state timestamps
+ const curDate = DateTime.utc()
+ editorStore.$patch({
+ lastChangeTimestamp: curDate,
+ lastSaveTimestamp: curDate,
+ reasonForChange: ''
+ })
+ } catch (err) {
+ console.warn(err)
+ throw err
+ }
+ },
+ async cancelPageEdit () {
+ const editorStore = useEditorStore()
+ await this.pageLoad({ id: editorStore.originPageId ? editorStore.originPageId : this.id })
+ this.router.replace(`/${this.path}`)
+ },
+ generateToc () {
+
+ }
+ }
+})
+
+/**
+ * Fast, non-cryptographic 53-bit hash to encode page paths.
+ * Returns a URL-safe hex string.
+ */
+function fastHash (str, seed = 0) {
+ let h1 = 0xdeadbeef ^ seed, h2 = 0x41c6ce57 ^ seed
+ for (let i = 0, ch; i < str.length; i++) {
+ ch = str.charCodeAt(i)
+ h1 = Math.imul(h1 ^ ch, 2654435761)
+ h2 = Math.imul(h2 ^ ch, 1597334677)
+ }
+ h1 = Math.imul(h1 ^ (h1 >>> 16), 2246822507)
+ h1 ^= Math.imul(h2 ^ (h2 >>> 13), 3266489909)
+ h2 = Math.imul(h2 ^ (h2 >>> 16), 2246822507)
+ h2 ^= Math.imul(h1 ^ (h1 >>> 13), 3266489909)
+
+ // Convert to a 16-character hexadecimal string
+ return (4294967296 * (2097151 & h2) + (h1 >>> 0)).toString(16)
+}
diff --git a/frontend/src/stores/site.js b/frontend/src/stores/site.js
new file mode 100644
index 00000000..568a703d
--- /dev/null
+++ b/frontend/src/stores/site.js
@@ -0,0 +1,220 @@
+import { defineStore } from 'pinia'
+
+import { clone, sortBy } from 'lodash-es'
+
+import { useUserStore } from './user'
+
+export const useSiteStore = defineStore('site', {
+ state: () => ({
+ id: null,
+ hostname: '',
+ company: '',
+ contentLicense: '',
+ footerExtra: '',
+ dark: false,
+ title: '',
+ description: '',
+ logoText: true,
+ search: '',
+ searchLastQuery: '',
+ searchIsLoading: false,
+ printView: false,
+ pageDataTemplates: [],
+ showSideNav: true,
+ showSidebar: true,
+ overlay: null,
+ overlayOpts: {},
+ features: {
+ profile: false,
+ ratingsMode: 'off',
+ reasonForChange: 'required',
+ search: false
+ },
+ editors: {
+ asciidoc: false,
+ markdown: false,
+ wysiwyg: false
+ },
+ locales: {
+ primary: 'en',
+ active: [{
+ code: 'en',
+ language: 'en',
+ name: 'English',
+ nativeName: 'English'
+ }]
+ },
+ tags: [],
+ tagsLoaded: false,
+ theme: {
+ dark: false,
+ injectCSS: '',
+ injectHead: '',
+ injectBody: '',
+ colorPrimary: '#1976D2',
+ colorSecondary: '#02C39A',
+ colorAccent: '#f03a47',
+ colorHeader: '#000',
+ colorSidebar: '#1976D2',
+ codeBlocksTheme: '',
+ sidebarPosition: 'left',
+ tocPosition: 'right',
+ showSharingMenu: true,
+ showPrintBtn: true
+ },
+ sideDialogShown: false,
+ sideDialogComponent: '',
+ docsBase: 'https://beta.js.wiki/docs',
+ nav: {
+ currentId: null,
+ items: []
+ }
+ }),
+ getters: {
+ overlayIsShown: (state) => Boolean(state.overlay),
+ sideNavIsDisabled: (state) => Boolean(state.theme.sidebarPosition === 'off'),
+ scrollStyle: (state) => {
+ const userStore = useUserStore()
+ let isDark = false
+ if (userStore.appearance === 'site') {
+ isDark = state.theme.dark
+ } else if (userStore.appearance === 'dark') {
+ isDark = true
+ }
+ return {
+ thumb: {
+ right: '2px',
+ borderRadius: '5px',
+ backgroundColor: isDark ? '#FFF' : '#000',
+ width: '5px',
+ opacity: isDark ? 0.25 : 0.15
+ },
+ bar: {
+ backgroundColor: isDark ? '#000' : '#FAFAFA',
+ width: '9px',
+ opacity: isDark ? 0.25 : 1
+ }
+ }
+ },
+ useLocales: (state) => {
+ return state.locales?.active?.length > 1
+ }
+ },
+ actions: {
+ openFileManager (opts) {
+ this.$patch({
+ overlay: 'FileManager',
+ overlayOpts: {
+ insertMode: opts?.insertMode ?? false
+ }
+ })
+ },
+ async loadSite (hostname) {
+ try {
+ const siteInfo = await API_CLIENT.get(`sites/${hostname}`).json()
+ if (siteInfo) {
+ this.$patch({
+ id: clone(siteInfo.id),
+ hostname: clone(siteInfo.hostname),
+ title: clone(siteInfo.title),
+ description: clone(siteInfo.description),
+ logoText: clone(siteInfo.logoText),
+ company: clone(siteInfo.company),
+ contentLicense: clone(siteInfo.contentLicense),
+ footerExtra: clone(siteInfo.footerExtra),
+ features: {
+ ...this.features,
+ ...clone(siteInfo.features)
+ },
+ editors: {
+ asciidoc: clone(siteInfo.editors.asciidoc.isActive),
+ markdown: clone(siteInfo.editors.markdown.isActive),
+ wysiwyg: clone(siteInfo.editors.wysiwyg.isActive)
+ },
+ locales: {
+ primary: clone(siteInfo.locales.primary),
+ active: sortBy(clone(siteInfo.locales.active), ['nativeName', 'name'])
+ },
+ tags: [],
+ tagsLoaded: false,
+ theme: {
+ ...this.theme,
+ ...clone(siteInfo.theme)
+ }
+ })
+ } else {
+ throw new Error('Invalid Site')
+ }
+ } catch (err) {
+ console.warn(err)
+ console.warn(err.networkError?.result ?? err.message)
+ throw err
+ }
+ },
+ async fetchTags (forceRefresh = false) {
+ if (this.tagsLoaded && !forceRefresh) { return }
+ try {
+ const resp = await APOLLO_CLIENT.query({
+ query: `
+ query getSiteTags ($siteId: UUID!) {
+ tags (
+ siteId: $siteId
+ ) {
+ tag
+ usageCount
+ }
+ }
+ `,
+ variables: {
+ siteId: this.id
+ }
+ })
+ this.$patch({
+ tags: resp.data.tags ?? [],
+ tagsLoaded: true
+ })
+ } catch (err) {
+ console.warn(err.networkError?.result ?? err.message)
+ throw err
+ }
+ },
+ async fetchNavigation (id) {
+ try {
+ const resp = await APOLLO_CLIENT.query({
+ query: `
+ query getNavigationItems ($id: UUID!) {
+ navigationById (
+ id: $id
+ ) {
+ id
+ type
+ label
+ icon
+ target
+ openInNewWindow
+ children {
+ id
+ type
+ label
+ icon
+ target
+ openInNewWindow
+ }
+ }
+ }
+ `,
+ variables: { id }
+ })
+ this.$patch({
+ nav: {
+ currentId: id,
+ items: resp?.data?.navigationById ?? []
+ }
+ })
+ } catch (err) {
+ console.warn(err.networkError?.result ?? err.message)
+ throw err
+ }
+ }
+ }
+})
diff --git a/frontend/src/stores/store-flag.d.ts b/frontend/src/stores/store-flag.d.ts
new file mode 100644
index 00000000..7677175b
--- /dev/null
+++ b/frontend/src/stores/store-flag.d.ts
@@ -0,0 +1,10 @@
+/* eslint-disable */
+// THIS FEATURE-FLAG FILE IS AUTOGENERATED,
+// REMOVAL OR CHANGES WILL CAUSE RELATED TYPES TO STOP WORKING
+import "quasar/dist/types/feature-flag";
+
+declare module "quasar/dist/types/feature-flag" {
+ interface QuasarFeatureFlags {
+ store: true;
+ }
+}
diff --git a/frontend/src/stores/user.js b/frontend/src/stores/user.js
new file mode 100644
index 00000000..2b3c3592
--- /dev/null
+++ b/frontend/src/stores/user.js
@@ -0,0 +1,201 @@
+import { defineStore } from 'pinia'
+import { jwtDecode } from 'jwt-decode'
+import Cookies from 'js-cookie'
+
+import { DateTime } from 'luxon'
+import { getAccessibleColor } from '@/helpers/accessibility'
+
+import { useSiteStore } from './site'
+
+export const useUserStore = defineStore('user', {
+ state: () => ({
+ id: '10000000-0000-4000-8000-000000000001',
+ email: '',
+ name: '',
+ hasAvatar: false,
+ localeCode: '',
+ timezone: '',
+ dateFormat: 'YYYY-MM-DD',
+ timeFormat: '12h',
+ appearance: 'site',
+ cvd: 'none',
+ permissions: [],
+ pagePermissions: [],
+ iat: 0,
+ exp: null,
+ authenticated: false,
+ token: Cookies.get('jwt'),
+ profileLoaded: false
+ }),
+ getters: {
+ preferredDateFormat: (state) => {
+ if (!state.dateFormat) {
+ return 'D'
+ } else {
+ return state.dateFormat.replaceAll('Y', 'y').replaceAll('D', 'd')
+ }
+ },
+ preferredTimeFormat: (state) => {
+ return state.timeFormat === '24h' ? 'T' : 't'
+ }
+ },
+ actions: {
+ isTokenValid (offset) {
+ return this.exp && this.exp > (offset ? DateTime.now().plus(offset) : DateTime.now())
+ },
+ loadToken () {
+ if (!this.token) { return }
+ try {
+ const jwtData = jwtDecode(this.token)
+ this.id = jwtData.id
+ this.email = jwtData.email
+ this.iat = jwtData.iat
+ this.exp = DateTime.fromSeconds(jwtData.exp, { zone: 'utc' })
+ if (this.exp > DateTime.utc()) {
+ this.authenticated = true
+ } else {
+ console.info('Token has expired and will be refreshed on next query.')
+ }
+ } catch (err) {
+ console.warn('Failed to parse JWT. Invalid or malformed.')
+ }
+ },
+ async refreshToken () {
+ try {
+ const respRaw = await APOLLO_CLIENT.mutate({
+ context: {
+ skipAuth: true
+ },
+ mutation: `
+ mutation refreshToken (
+ $token: String!
+ ) {
+ refreshToken(token: $token) {
+ operation {
+ succeeded
+ message
+ }
+ jwt
+ }
+ }
+ `,
+ variables: {
+ token: this.token
+ }
+ })
+ const resp = respRaw?.data?.refreshToken ?? {}
+ if (!resp.operation?.succeeded) {
+ throw new Error(resp.operation?.message || 'Failed to refresh token.')
+ }
+ Cookies.set('jwt', resp.jwt, { expires: 365, path: '/', sameSite: 'Lax' })
+ this.token = resp.jwt
+ this.loadToken()
+ return true
+ } catch (err) {
+ console.warn(err)
+ return false
+ }
+ },
+ async refreshProfile () {
+ if (!this.authenticated || !this.id) {
+ return
+ }
+ try {
+ const respRaw = await APOLLO_CLIENT.query({
+ query: `
+ query refreshProfile (
+ $id: UUID!
+ ) {
+ userById(id: $id) {
+ id
+ name
+ email
+ hasAvatar
+ meta
+ prefs
+ lastLoginAt
+ groups {
+ id
+ name
+ }
+ }
+ userPermissions
+ }
+ `,
+ variables: {
+ id: this.id
+ }
+ })
+ const resp = respRaw?.data?.userById
+ if (!resp || resp.id !== this.id) {
+ throw new Error('Failed to fetch user profile!')
+ }
+ this.name = resp.name || 'Unknown User'
+ this.email = resp.email
+ this.hasAvatar = resp.hasAvatar ?? false
+ this.location = resp.meta.location || ''
+ this.jobTitle = resp.meta.jobTitle || ''
+ this.pronouns = resp.meta.pronouns || ''
+ this.timezone = resp.prefs.timezone || Intl.DateTimeFormat().resolvedOptions().timeZone || ''
+ this.dateFormat = resp.prefs.dateFormat || ''
+ this.timeFormat = resp.prefs.timeFormat || '12h'
+ this.appearance = resp.prefs.appearance || 'site'
+ this.cvd = resp.prefs.cvd || 'none'
+ this.permissions = respRaw.data.userPermissions || []
+ this.profileLoaded = true
+ } catch (err) {
+ console.warn(err)
+ }
+ },
+ logout () {
+ Cookies.remove('jwt', { path: '/' })
+ this.$patch({
+ id: '10000000-0000-4000-8000-000000000001',
+ email: '',
+ name: '',
+ hasAvatar: false,
+ localeCode: '',
+ timezone: '',
+ dateFormat: 'YYYY-MM-DD',
+ timeFormat: '12h',
+ appearance: 'site',
+ cvd: 'none',
+ permissions: [],
+ iat: 0,
+ exp: null,
+ authenticated: false,
+ token: '',
+ profileLoaded: false
+ })
+ EVENT_BUS.emit('logout')
+ },
+ getAccessibleColor (base, hexBase) {
+ return getAccessibleColor(base, hexBase, this.cvd)
+ },
+ can (permission) {
+ if (this.permissions.includes('manage:system') || this.permissions.includes(permission) || this.pagePermissions.includes(permission)) {
+ return true
+ }
+ return false
+ },
+ async fetchPagePermissions (path) {
+ if (path.startsWith('/_')) {
+ this.pagePermissions = []
+ return
+ }
+ const siteStore = useSiteStore()
+ try {
+ this.pagePermissions = await API_CLIENT.post(`sites/${siteStore.id}/pages/userPermissions`, {
+ json: {
+ path
+ }
+ }).json()
+ } catch (err) {
+ console.warn(`Failed to fetch page permissions at path ${path}!`)
+ }
+ },
+ formatDateTime (t, date) {
+ return (typeof date === 'string' ? DateTime.fromISO(date) : date).toFormat(t('common.datetime', { date: this.preferredDateFormat, time: this.preferredTimeFormat }))
+ }
+ }
+})
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
new file mode 100644
index 00000000..71399ae0
--- /dev/null
+++ b/frontend/vite.config.js
@@ -0,0 +1,87 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import yaml from 'js-yaml'
+import fs from 'node:fs'
+import { fileURLToPath } from 'node:url'
+import { quasar, transformAssetUrls } from '@quasar/vite-plugin'
+import vueDevTools from 'vite-plugin-vue-devtools'
+
+// https://vitejs.dev/config/
+export default defineConfig(({ mode }) => {
+ const userConfig = mode === 'development' ? {
+ dev: { port: 3001, hmrClientPort: 3001 },
+ ...yaml.load(fs.readFileSync(fileURLToPath(new URL('../config.yml', import.meta.url)), 'utf8'))
+ } : {}
+
+ return {
+ build: {
+ assetsDir: '_assets',
+ chunkSizeWarningLimit: 5000,
+ dynamicImportVarsOptions: {
+ warnOnError: true,
+ include: ['!/_blocks/**']
+ },
+ outDir: '../assets',
+ target: 'es2022',
+ ...(mode === 'production') && {
+ rollupOptions: {
+ output: {
+ manualChunks (id) {
+ if (id.includes('lodash')) {
+ return 'lodash'
+ // } else if (id.includes('quasar')) {
+ // return 'quasar'
+ } else if (id.includes('pages/Admin')) {
+ return 'admin'
+ } else if (id.includes('pages/Profile')) {
+ return 'profile'
+ }
+ }
+ }
+ }
+ }
+ },
+ optimizeDeps: {
+ include: [
+ 'prosemirror-state',
+ 'prosemirror-transform',
+ 'prosemirror-model',
+ 'prosemirror-view'
+ ]
+ },
+ plugins: [
+ vue({
+ template: { transformAssetUrls }
+ }),
+ quasar({
+ autoImportComponentCase: 'kebab',
+ sassVariables: '@/css/_theme.scss'
+ }),
+ vueDevTools()
+ ],
+ resolve: {
+ alias: {
+ '@': fileURLToPath(new URL('./src', import.meta.url))
+ }
+ },
+ server: {
+ // https: true
+ open: false, // opens browser window automatically
+ host: '0.0.0.0',
+ allowedHosts: true,
+ port: userConfig.dev?.port,
+ proxy: ['_api', '_blocks', '_site', '_thumb', '_user'].reduce((result, key) => {
+ result[`/${key}`] = {
+ target: {
+ host: '127.0.0.1',
+ port: userConfig.port
+ }
+ }
+ return result
+ }, {}),
+ hmr: {
+ clientPort: userConfig.dev?.hmrClientPort
+ }
+ }
+ }
+})