liz/wikijs-fork
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: updated loggers + admin UI improvements + setup fixes

Browse Source
This commit is contained in:
NGPixel
2018-03-12 00:09:54 -04:00
parent 6baa277f51
commit 8e09c6fce1
26 changed files with 434 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
client/components/admin-auth.vue
View File

@@ -4,13 +4,13 @@
.pa-3.pt-4
.headline.primary--text Authentication
.subheading.grey--text Configure the authentication settings of your wiki
v-tabs(color='grey lighten-4', grow, slider-color='primary', show-arrows)
v-tabs(color='grey lighten-4', fixed-tabs, slider-color='primary', show-arrows)
v-tab(key='settings'): v-icon settings
v-tab(v-for='provider in providers', :key='provider.key') {{ provider.title }}
v-tab(v-for='provider in activeProviders', :key='provider.key') {{ provider.title }}
v-tab-item(key='settings', :transition='false', :reverse-transition='false')
v-card.pa-3
.body-2.pb-2 Select which authentication providers are enabled:
.body-2.pb-2 Select which authentication providers to enable:
v-form
v-checkbox(
v-for='(provider, n) in providers',
@@ -32,11 +32,24 @@
v-btn(icon, @click='refresh')
v-icon.grey--text refresh
v-tab-item(v-for='(provider, n) in providers', :key='provider.key', :transition='false', :reverse-transition='false')
v-tab-item(v-for='(provider, n) in activeProviders', :key='provider.key', :transition='false', :reverse-transition='false')
v-card.pa-3
.body-1(v-if='!provider.props || provider.props.length < 1') This provider has no configuration options you can modify.
v-form(v-else)
v-text-field(v-for='prop in provider.props', :key='prop', :label='prop', prepend-icon='mode_edit')
v-form
v-subheader Provider Configuration
.body-1(v-if='!provider.props || provider.props.length < 1') This provider has no configuration options you can modify.
v-text-field(v-else, v-for='prop in provider.props', :key='prop', :label='prop', prepend-icon='mode_edit')
v-divider
v-subheader Registration
v-switch.ml-3(
v-model='auths',
label='Allow self-registration',
:value='true',
color='primary',
hint='Allow any user successfully authorized by the provider to access the wiki.',
persistent-hint
)
v-text-field(label='Limit to specific email domains', prepend-icon='mail_outline')
v-text-field(label='Assign to group', prepend-icon='people')
v-divider
v-btn(color='primary')
v-icon(left) chevron_right
@@ -52,6 +65,8 @@
</template>
<script>
import _ from 'lodash'
/* global CONSTANTS */
export default {
@@ -62,6 +77,11 @@ export default {
refreshCompleted: false
}
},
computed: {
activeProviders() {
return _.filter(this.providers, 'isEnabled')
}
},
apollo: {
providers: {
query: CONSTANTS.GRAPH.AUTHENTICATION.QUERY_PROVIDERS,

43
client/components/admin-general.vue
View File

@@ -7,27 +7,48 @@
v-form.pt-3
v-layout(row wrap)
v-flex(lg6 xs12)
v-card
v-toolbar(color='blue', dark, dense, flat)
v-toolbar-title
.subheading Site Info
v-btn(fab, absolute, right, bottom, small, light): v-icon save
v-card-text
v-text-field(label='Site Title', required, :counter='50', v-model='siteTitle')
v-text-field(label='Site Description', :counter='255')
v-text-field(label='Site Keywords', :counter='255')
v-select(label='Meta Robots', chips, tags, :items='metaRobots', v-model='metaRobotsSelection')
v-form
v-card
v-toolbar(color='primary', dark, dense, flat)
v-toolbar-title
.subheading Site Info
v-subheader General
.px-3
v-text-field(label='Site Title', required, :counter='50', v-model='siteTitle', prepend-icon='public')
v-divider
v-subheader SEO
.px-3
v-text-field(label='Site Description', :counter='255', prepend-icon='public')
v-text-field(label='Site Keywords', :counter='255', prepend-icon='public')
v-select(label='Meta Robots', chips, tags, :items='metaRobots', v-model='metaRobotsSelection', prepend-icon='public')
v-divider
.px-3.pb-3
v-btn(color='primary') Save
v-flex(lg6 xs12)
v-card
v-toolbar(color='blue', dark, dense, flat)
v-toolbar(color='primary', dark, dense, flat)
v-toolbar-title
.subheading Site Branding
v-card-text ---
v-card.mt-3
v-toolbar(color='primary', dark, dense, flat)
v-toolbar-title
.subheading Maintenance Mode
v-card-text
.body-1 Maintenance mode restrict access to the site to administrators only, regarless of current permissions.
v-btn.mt-3(color='orange darken-2', dark)
icon-home-alert.mr-2(fillColor='#FFFFFF')
| Turn On Maintenance Mode
</template>
<script>
import IconHomeAlert from 'mdi/home-alert'
export default {
components: {
IconHomeAlert
},
data() {
return {
siteTitle: 'Wiki.js',

20
client/components/admin-locale.vue
View File

@@ -8,10 +8,9 @@
v-layout(row wrap)
v-flex(lg6 xs12)
v-card
v-toolbar(color='blue', dark, dense, flat)
v-toolbar(color='primary', dark, dense, flat)
v-toolbar-title
.subheading Locale
v-btn(fab, absolute, right, bottom, small, light): v-icon save
.subheading Locale Settings
v-card-text
v-select(:items='locales', prepend-icon='public', v-model='selectedLocale', label='Site Locale', persistent-hint, hint='All UI text elements will be displayed in selected language.')
template(slot='item', slot-scope='data')
@@ -21,16 +20,19 @@
v-list-tile-title(v-html='data.item.text')
v-list-tile-sub-title(v-html='data.item.original')
v-divider
v-switch(v-model='rtlEnabled', label='RTL Text Display', color='primary', persistent-hint, hint='For Right-to-Left languages, e.g. Arabic')
v-switch(v-model='rtlEnabled', label='RTL Display Mode', color='primary', persistent-hint, hint='For Right-to-Left languages, e.g. Arabic')
v-divider
.px-3.pb-3
v-btn(color='primary') Save
v-flex(lg6 xs12)
v-card
v-toolbar(color='blue', dark, dense, flat)
v-toolbar(color='teal', dark, dense, flat)
v-toolbar-title
.subheading Download Locale
v-list
v-list-tile(@click='')
v-list-tile-avatar
v-avatar.blue.white--text(tile, size='40') ZH
v-avatar.teal.white--text(tile, size='40') ZH
v-list-tile-content
v-list-tile-title Chinese
v-list-tile-sub-title 中文
@@ -39,7 +41,7 @@
v-icon.grey--text cloud_download
v-list-tile(@click='')
v-list-tile-avatar
v-avatar.blue.white--text(tile, size='40') EN
v-avatar.teal.white--text(tile, size='40') EN
v-list-tile-content
v-list-tile-title English
v-list-tile-sub-title English
@@ -47,7 +49,7 @@
v-icon.green--text check
v-list-tile(@click='')
v-list-tile-avatar
v-avatar.blue.white--text(tile, size='40') FR
v-avatar.teal.white--text(tile, size='40') FR
v-list-tile-content
v-list-tile-title French
v-list-tile-sub-title Français
@@ -55,7 +57,7 @@
v-icon.green--text check
v-list-tile(@click='')
v-list-tile-avatar
v-avatar.blue.white--text(tile, size='40') RU
v-avatar.teal.white--text(tile, size='40') RU
v-list-tile-content
v-list-tile-title Russian
v-list-tile-sub-title Русский

93
client/components/admin-logging.vue Normal file
View File

@@ -0,0 +1,93 @@
<template lang='pug'>
v-card(flat)
v-card(color='grey lighten-5')
.pa-3.pt-4
.headline.primary--text Logging
.subheading.grey--text Configure the system logger(s)
v-tabs(color='grey lighten-4', fixed-tabs, slider-color='primary', show-arrows)
v-tab(key='settings'): v-icon settings
v-tab(v-for='svc in activeServices', :key='svc.key') {{ svc.title }}
v-tab-item(key='settings', :transition='false', :reverse-transition='false')
v-card.pa-3
.body-2.pb-2 Select which logging service to enable:
v-form
v-checkbox(
v-for='(svc, n) in services',
v-model='selectedServices',
:key='svc.key',
:label='svc.title',
:value='svc.key',
color='primary',
:disabled='svc.key === `console`'
hide-details
)
v-divider
v-btn(color='primary')
v-icon(left) chevron_right
| Set Services
v-btn(color='black', dark)
v-icon(left) keyboard
| View Console
v-btn(color='black', dark)
v-icon(left) layers_clear
| Purge Logs
v-btn(icon, @click='refresh')
v-icon.grey--text refresh
v-tab-item(v-for='(svc, n) in activeServices', :key='svc.key', :transition='false', :reverse-transition='false')
v-card.pa-3
v-form
v-subheader Service Configuration
.body-1(v-if='!svc.props || svc.props.length < 1') This logging service has no configuration options you can modify.
v-text-field(v-else, v-for='prop in svc.props', :key='prop', :label='prop', prepend-icon='mode_edit')
v-divider
v-btn(color='primary')
v-icon(left) chevron_right
| Save Configuration
v-snackbar(
color='success'
top
v-model='refreshCompleted'
)
v-icon.mr-3(dark) cached
| List of logging services has been refreshed.
</template>
<script>
import _ from 'lodash'
/* global CONSTANTS */
export default {
data() {
return {
services: [],
selectedServices: ['console'],
refreshCompleted: false
}
},
computed: {
activeServices() {
return _.filter(this.services, 'isEnabled')
}
},
apollo: {
services: {
query: CONSTANTS.GRAPH.AUTHENTICATION.QUERY_PROVIDERS,
update: (data) => data.authentication.providers
}
},
methods: {
async refresh() {
await this.$apollo.queries.services.refetch()
this.refreshCompleted = true
}
}
}
</script>
<style lang='scss'>
</style>

2
client/components/admin-search.vue
View File

@@ -4,7 +4,7 @@
.pa-3.pt-4
.headline.primary--text Search Engine
.subheading.grey--text Configure the search capabilities of your wiki
v-tabs(color='grey lighten-4', grow, slider-color='primary', show-arrows)
v-tabs(color='grey lighten-4', fixed-tabs, slider-color='primary', show-arrows)
v-tab(key='settings'): v-icon settings
v-tab(key='db') Database
v-tab(key='algolia') Algolia

14
client/components/admin-storage.vue
View File

@@ -4,7 +4,7 @@
.pa-3.pt-4
.headline.primary--text Storage
.subheading.grey--text Set backup and sync targets for your content
v-tabs(color='grey lighten-4', grow, slider-color='primary', show-arrows)
v-tabs(color='grey lighten-4', fixed-tabs, slider-color='primary', show-arrows)
v-tab(key='settings'): v-icon settings
v-tab(key='local') Local FS
v-tab(key='git') Git
@@ -19,7 +19,15 @@
v-tab-item(key='settings')
v-card.pa-3
v-form
v-checkbox(v-for='(target, n) in targets', v-model='auths', :key='n', :label='target.text', :value='target.value', color='primary')
v-checkbox(
v-for='(target, n) in targets',
v-model='auths',
:key='n',
:label='target.text',
:value='target.value',
color='primary',
hide-details
)
v-divider
v-btn(color='primary')
v-icon(left) chevron_right
@@ -32,7 +40,7 @@ export default {
data() {
return {
targets: [
{ text: 'Local FS', value: 'local' },
{ text: 'Local Filesystem', value: 'local' },
{ text: 'Git', value: 'auth0' },
{ text: 'Amazon S3', value: 'algolia' },
{ text: 'Azure Blob Storage', value: 'elasticsearch' },

12
client/components/admin-theme.vue
View File

@@ -8,10 +8,9 @@
v-layout(row wrap)
v-flex(lg6 xs12)
v-card
v-toolbar(color='blue', dark, dense, flat)
v-toolbar(color='primary', dark, dense, flat)
v-toolbar-title
.subheading Theme
v-btn(fab, absolute, right, bottom, small, light): v-icon save
v-card-text
v-select(:items='themes', prepend-icon='palette', v-model='selectedTheme', label='Site Theme', persistent-hint, hint='Themes affect how content pages are displayed. Other site sections (such as the editor or admin area) are not affected.')
template(slot='item', slot-scope='data')
@@ -22,12 +21,15 @@
v-list-tile-sub-title(v-html='data.item.author')
v-divider
v-switch(v-model='darkMode', label='Dark Mode', color='primary', persistent-hint, hint='Not recommended for accessibility')
v-divider
.px-3.pb-3
v-btn(color='primary') Save
v-flex(lg6 xs12)
v-card
v-toolbar(color='blue', dark, dense, flat)
v-toolbar(color='primary', dark, dense, flat)
v-toolbar-title
.subheading Theme Options
v-list
.subheading ---
v-card-text ---
</template>
<script>

1
client/components/admin.vue
View File

@@ -85,6 +85,7 @@ const router = new VueRouter({
{ path: '/theme', component: () => import(/* webpackChunkName: "admin" */ './admin-theme.vue') },
{ path: '/users', component: () => import(/* webpackChunkName: "admin" */ './admin-users.vue') },
{ path: '/auth', component: () => import(/* webpackChunkName: "admin" */ './admin-auth.vue') },
{ path: '/logging', component: () => import(/* webpackChunkName: "admin" */ './admin-logging.vue') },
{ path: '/search', component: () => import(/* webpackChunkName: "admin" */ './admin-search.vue') },
{ path: '/storage', component: () => import(/* webpackChunkName: "admin" */ './admin-storage.vue') },
{ path: '/api', component: () => import(/* webpackChunkName: "admin" */ './admin-api.vue') },

72
client/components/nav-header.vue
View File

@@ -1,13 +1,38 @@
<template lang='pug'>
v-toolbar(color='black', dark, app, clipped-left, fixed, flat)
v-toolbar-side-icon(@click.native='')
v-icon view_module
v-toolbar-title
span.subheading Wiki.js
v-spacer
transition(name='navHeaderSearch')
v-text-field(
ref='searchField',
v-if='searchIsShown',
v-model='search',
clearable,
color='blue',
label='Search...',
single-line,
hide-details,
append-icon='search',
:append-icon-cb='searchEnter',
:loading='searchIsLoading',
@keyup.enter='searchEnter',
@keyup.esc='searchToggle'
)
v-progress-linear(
indeterminate,
slot='progress',
height='2',
color='blue'
)
v-spacer
v-progress-circular.mr-3(indeterminate, color='blue', v-show='$apollo.loading')
v-btn(icon)
v-icon(color='grey') search
v-btn(icon, @click.native='darkTheme = !darkTheme')
transition(name='navHeaderSearch')
v-btn(icon, @click='searchToggle', v-if='!searchIsShown')
v-icon(color='grey') search
v-btn(icon, href='/a')
v-icon(color='grey') settings
v-menu(offset-y, min-width='300')
v-btn(icon, slot='activator')
@@ -20,7 +45,10 @@
v-list-tile-title John Doe
v-list-tile-sub-title john.doe@example.com
v-divider.my-0
v-list-tile(@click='')
v-list-tile(href='/p')
v-list-tile-action: v-icon(color='red') person
v-list-tile-title Profile
v-list-tile(href='/logout')
v-list-tile-action: v-icon(color='red') exit_to_app
v-list-tile-title Logout
</template>
@@ -28,11 +56,41 @@
<script>
export default {
data() {
return {}
return {
searchIsLoading: false,
searchIsShown: false,
search: ''
}
},
methods: {
searchToggle() {
this.searchIsLoading = false
this.searchIsShown = !this.searchIsShown
if (this.searchIsShown) {
this.$nextTick(() => {
this.$refs.searchField.focus()
})
}
},
searchEnter() {
this.searchIsLoading = true
}
}
}
</script>
<style>
<style lang='scss'>
.navHeaderSearch {
&-enter-active, &-leave-active {
transition: opacity .25s ease, transform .25s ease;
opacity: 1;
}
&-enter-active {
transition-delay: .25s;
}
&-enter, &-leave-to {
opacity: 0;
transform: translateY(-25px);
}
}
</style>

2
client/components/setup.vue
View File

@@ -40,7 +40,7 @@
v-stepper-content(step='1')
v-card.text-xs-center.pa-3(flat)
img(src='svg/logo-wikijs.svg', alt='Wiki.js Logo', style='width: 300px;')
img(src='/svg/logo-wikijs.svg', alt='Wiki.js Logo', style='width: 300px;')
v-container
.body-2.py-2 This installation wizard will guide you through the steps needed to get your wiki up and running in no time!
.body-1