misc: deps cleanup + form validation fixes
This commit is contained in:
Nick
@@ -103,10 +103,12 @@
|
||||
|
||||
v-list-item(to='/dev-flags')
|
||||
v-list-item-title {{ $t('admin:dev.flags.title') }}
|
||||
v-list-item(to='/dev-graphiql')
|
||||
v-list-item(href='/graphql')
|
||||
v-list-item-title {{ $t('admin:dev.graphiql.title') }}
|
||||
v-list-item(to='/dev-voyager')
|
||||
v-list-item-title {{ $t('admin:dev.voyager.title') }}
|
||||
//- v-list-item(to='/dev-graphiql')
|
||||
//- v-list-item-title {{ $t('admin:dev.graphiql.title') }}
|
||||
//- v-list-item(to='/dev-voyager')
|
||||
//- v-list-item-title {{ $t('admin:dev.voyager.title') }}
|
||||
v-divider.my-2
|
||||
v-list-item(to='/contribute')
|
||||
v-list-item-avatar(size='24'): v-icon mdi-heart-outline
|
||||
@@ -163,8 +165,6 @@ const router = new VueRouter({
|
||||
{ path: '/utilities', component: () => import(/* webpackChunkName: "admin" */ './admin/admin-utilities.vue') },
|
||||
{ path: '/webhooks', component: () => import(/* webpackChunkName: "admin" */ './admin/admin-webhooks.vue') },
|
||||
{ path: '/dev-flags', component: () => import(/* webpackChunkName: "admin-dev" */ './admin/admin-dev-flags.vue') },
|
||||
{ path: '/dev-graphiql', component: () => import(/* webpackChunkName: "admin-dev" */ './admin/admin-dev-graphiql.vue') },
|
||||
{ path: '/dev-voyager', component: () => import(/* webpackChunkName: "admin-dev" */ './admin/admin-dev-voyager.vue') },
|
||||
{ path: '/contribute', component: () => import(/* webpackChunkName: "admin" */ './admin/admin-contribute.vue') }
|
||||
]
|
||||
})
|
||||
|
||||
@@ -1,101 +0,0 @@
|
||||
<template lang='pug'>
|
||||
v-container(fluid, grid-list-lg)
|
||||
v-layout(row, wrap)
|
||||
v-flex(xs12)
|
||||
.admin-header
|
||||
img(src='/svg/icon-console.svg', alt='Developer Tools', style='width: 80px;')
|
||||
.admin-header-title
|
||||
.headline.primary--text Developer Tools
|
||||
.subtitle-1.grey--text GraphiQL
|
||||
|
||||
v-card.mt-3.white.grey--text.text--darken-3
|
||||
#graphiql
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import _ from 'lodash'
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom'
|
||||
import GraphiQL from 'graphiql'
|
||||
import 'graphiql/graphiql.css'
|
||||
|
||||
const fetcher = (qry, respType) => {
|
||||
return fetch('/graphql', {
|
||||
method: 'post',
|
||||
headers: {
|
||||
'Accept': 'application/json',
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(qry),
|
||||
credentials: 'include'
|
||||
}).then(response => {
|
||||
if (respType === 'json') {
|
||||
return response.json()
|
||||
} else {
|
||||
return response.text()
|
||||
}
|
||||
}).then(responseBody => {
|
||||
try {
|
||||
return JSON.parse(responseBody)
|
||||
} catch (error) {
|
||||
return responseBody
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return { }
|
||||
},
|
||||
mounted() {
|
||||
let graphiQLInstance
|
||||
ReactDOM.render(
|
||||
React.createElement(GraphiQL, {
|
||||
ref(el) { graphiQLInstance = el },
|
||||
async fetcher(qry) {
|
||||
let resp = await fetcher(qry, 'text')
|
||||
_.delay(() => {
|
||||
graphiQLInstance.resultComponent.viewer.refresh()
|
||||
}, 500)
|
||||
return resp
|
||||
},
|
||||
response: null,
|
||||
variables: '{}',
|
||||
operationName: null,
|
||||
websocketConnectionParams: null
|
||||
}),
|
||||
document.getElementById('graphiql')
|
||||
)
|
||||
graphiQLInstance.queryEditorComponent.editor.refresh()
|
||||
graphiQLInstance.variableEditorComponent.editor.refresh()
|
||||
graphiQLInstance.state.variableEditorOpen = true
|
||||
graphiQLInstance.state.docExplorerOpen = true
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss'>
|
||||
#graphiql {
|
||||
height: calc(100vh - 270px);
|
||||
|
||||
.topBar {
|
||||
background-color: mc('grey', '200');
|
||||
background-image: none;
|
||||
padding: 1.5rem 0;
|
||||
|
||||
> .title {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
background-color: initial;
|
||||
box-shadow: initial;
|
||||
}
|
||||
|
||||
.doc-explorer-title-bar, .history-title-bar {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,93 +0,0 @@
|
||||
<template lang='pug'>
|
||||
v-container(fluid, grid-list-lg)
|
||||
v-layout(row, wrap)
|
||||
v-flex(xs12)
|
||||
.admin-header
|
||||
img(src='/svg/icon-console.svg', alt='Developer Tools', style='width: 80px;')
|
||||
.admin-header-title
|
||||
.headline.primary--text Developer Tools
|
||||
.subtitle-1.grey--text Voyager
|
||||
|
||||
v-card.mt-3.white.grey--text.text--darken-3
|
||||
#voyager
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import _ from 'lodash'
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom'
|
||||
import { Voyager } from 'graphql-voyager'
|
||||
import 'graphql-voyager/dist/voyager.css'
|
||||
|
||||
const fetcher = (qry, respType) => {
|
||||
return fetch('/graphql', {
|
||||
method: 'post',
|
||||
headers: {
|
||||
'Accept': 'application/json',
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(qry),
|
||||
credentials: 'include'
|
||||
}).then(response => {
|
||||
if (respType === 'json') {
|
||||
return response.json()
|
||||
} else {
|
||||
return response.text()
|
||||
}
|
||||
}).then(responseBody => {
|
||||
try {
|
||||
return JSON.parse(responseBody)
|
||||
} catch (error) {
|
||||
return responseBody
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
mounted() {
|
||||
_.delay(() => {
|
||||
ReactDOM.render(
|
||||
React.createElement(Voyager, {
|
||||
introspection: qry => fetcher({ query: qry }, 'json'),
|
||||
workerURI: '/js/voyager.worker.js'
|
||||
}),
|
||||
document.getElementById('voyager')
|
||||
)
|
||||
}, 500)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss'>
|
||||
#voyager {
|
||||
height: calc(100vh - 270px);
|
||||
|
||||
.title-area {
|
||||
display: none;
|
||||
}
|
||||
.type-doc {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.doc-navigation {
|
||||
> span {
|
||||
overflow-y: hidden;
|
||||
display: block;
|
||||
}
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
.contents {
|
||||
padding-bottom: 0;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.type-info-popover {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -23,12 +23,12 @@
|
||||
|
||||
<script>
|
||||
import _ from 'lodash'
|
||||
import { Terminal } from 'xterm'
|
||||
import * as fit from 'xterm/lib/addons/fit/fit'
|
||||
// import { Terminal } from 'xterm'
|
||||
// import * as fit from 'xterm/lib/addons/fit/fit'
|
||||
|
||||
import livetrailSubscription from 'gql/admin/logging/logging-subscription-livetrail.gql'
|
||||
|
||||
Terminal.applyAddon(fit)
|
||||
// Terminal.applyAddon(fit)
|
||||
|
||||
export default {
|
||||
term: null,
|
||||
@@ -48,7 +48,7 @@ export default {
|
||||
value(newValue, oldValue) {
|
||||
if (newValue) {
|
||||
_.delay(() => {
|
||||
this.term = new Terminal()
|
||||
// this.term = new Terminal()
|
||||
this.term.open(this.$refs.consoleContainer)
|
||||
this.term.writeln('Connecting to \x1B[1;3;31mconsole output\x1B[0m...')
|
||||
|
||||
|
||||
@@ -70,6 +70,7 @@
|
||||
:label='$t("navigation.label")'
|
||||
prepend-icon='mdi-format-title'
|
||||
v-model='current.label'
|
||||
counter='255'
|
||||
)
|
||||
v-text-field(
|
||||
outlined
|
||||
|
||||
@@ -23,11 +23,6 @@
|
||||
prepend-icon='mdi-at'
|
||||
v-model='email'
|
||||
label='Email Address'
|
||||
v-validate='{ required: true, email: true, min: 2, max: 255 }',
|
||||
data-vv-name='email',
|
||||
data-vv-as='Email Address',
|
||||
data-vv-scope='newUser',
|
||||
:error-messages='errors.collect(`newUser.email`)'
|
||||
key='newUserEmail'
|
||||
persistent-hint
|
||||
ref='emailInput'
|
||||
@@ -41,11 +36,6 @@
|
||||
:label='mustChangePwd ? `Temporary Password` : `Password`'
|
||||
counter='255'
|
||||
@click:append='generatePwd'
|
||||
v-validate='{ required: true, min: 6, max: 255 }',
|
||||
data-vv-name='password',
|
||||
data-vv-as='Password',
|
||||
data-vv-scope='newUser',
|
||||
:error-messages='errors.collect(`newUser.password`)'
|
||||
key='newUserPassword'
|
||||
persistent-hint
|
||||
)
|
||||
@@ -54,11 +44,6 @@
|
||||
prepend-icon='mdi-account-outline'
|
||||
v-model='name'
|
||||
label='Name'
|
||||
v-validate='{ required: true, min: 2, max: 255 }',
|
||||
data-vv-name='name',
|
||||
data-vv-as='Name',
|
||||
data-vv-scope='newUser',
|
||||
:error-messages='errors.collect(`newUser.name`)'
|
||||
:hint='provider === `local` ? `Can be changed by the user.` : `May be overwritten by the provider during login.`'
|
||||
key='newUserName'
|
||||
persistent-hint
|
||||
@@ -94,16 +79,17 @@
|
||||
v-card-chin
|
||||
v-spacer
|
||||
v-btn(text, @click='isShown = false') Cancel
|
||||
v-btn.px-3(depressed, color='primary', @click='newUser(false)', :disabled='errors.any(`newUser`)')
|
||||
v-btn.px-3(depressed, color='primary', @click='newUser(false)')
|
||||
v-icon(left) mdi-chevron-right
|
||||
span Create
|
||||
v-btn.px-3(depressed, color='primary', @click='newUser(true)', :disabled='errors.any(`newUser`)')
|
||||
v-btn.px-3(depressed, color='primary', @click='newUser(true)')
|
||||
v-icon(left) mdi-chevron-double-right
|
||||
span Create and Close
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import _ from 'lodash'
|
||||
import validate from 'validate.js'
|
||||
|
||||
import createUserMutation from 'gql/admin/users/users-mutation-create.gql'
|
||||
import providersQuery from 'gql/admin/users/users-query-strategies.gql'
|
||||
@@ -138,20 +124,54 @@ export default {
|
||||
watch: {
|
||||
value(newValue, oldValue) {
|
||||
if (newValue) {
|
||||
this.$validator.reset()
|
||||
this.$nextTick(() => {
|
||||
this.$refs.emailInput.focus()
|
||||
})
|
||||
}
|
||||
},
|
||||
provider(newValue, oldValue) {
|
||||
this.$validator.reset()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async newUser(close = false) {
|
||||
const validationSuccess = await this.$validator.validateAll('newUser')
|
||||
if (!validationSuccess) {
|
||||
let rules = {
|
||||
email: {
|
||||
presence: {
|
||||
allowEmpty: false
|
||||
},
|
||||
email: true
|
||||
},
|
||||
name: {
|
||||
presence: {
|
||||
allowEmpty: false
|
||||
},
|
||||
length: {
|
||||
minimum: 2,
|
||||
maximum: 255
|
||||
}
|
||||
}
|
||||
}
|
||||
if (this.provider === `local`) {
|
||||
rules.password = {
|
||||
presence: {
|
||||
allowEmpty: false
|
||||
},
|
||||
length: {
|
||||
minimum: 6,
|
||||
maximum: 255
|
||||
}
|
||||
}
|
||||
}
|
||||
const validationResults = validate({
|
||||
email: this.email,
|
||||
password: this.password,
|
||||
name: this.name
|
||||
}, rules, { format: 'flat' })
|
||||
|
||||
if (validationResults) {
|
||||
this.$store.commit('showNotification', {
|
||||
style: 'red',
|
||||
message: validationResults[0],
|
||||
icon: 'alert'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
@@ -192,7 +212,7 @@ export default {
|
||||
this.$store.commit('showNotification', {
|
||||
style: 'red',
|
||||
message: _.get(resp, 'data.users.create.responseResult.message', 'An unexpected error occured.'),
|
||||
icon: 'warning'
|
||||
icon: 'alert'
|
||||
})
|
||||
}
|
||||
} catch (err) {
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
<template lang='pug'>
|
||||
v-card.wiki-form
|
||||
v-card
|
||||
v-toolbar(flat, color='primary', dark, dense)
|
||||
.subtitle-1 {{ $t('admin:utilities.importv1Title') }}
|
||||
v-card-text
|
||||
.text-xs-center
|
||||
.text-center
|
||||
img.animated.fadeInUp.wait-p1s(src='/svg/icon-software.svg')
|
||||
.body-2 Import from Wiki.js 1.x
|
||||
v-divider.my-4
|
||||
.body-1 Data from a Wiki.js 1.x installation can be imported easily using this tool. What do you want to import?
|
||||
.body-2 Data from a Wiki.js 1.x installation can easily be imported using this tool. What do you want to import?
|
||||
v-checkbox(
|
||||
label='Content'
|
||||
value='content'
|
||||
@@ -29,9 +29,9 @@
|
||||
v-model='importFilters'
|
||||
hide-details
|
||||
)
|
||||
v-divider.my-3
|
||||
v-divider.my-5
|
||||
v-text-field.mt-3(
|
||||
outline
|
||||
outlined
|
||||
label='MongoDB Connection String'
|
||||
hint='The connection string to connect to the Wiki.js 1.x MongoDB database.'
|
||||
persistent-hint
|
||||
@@ -39,7 +39,7 @@
|
||||
v-if='needDB'
|
||||
)
|
||||
v-text-field.mt-3(
|
||||
outline
|
||||
outlined
|
||||
label='Content Repo Path'
|
||||
hint='The full path to where the Wiki.js 1.x content is stored on disk.'
|
||||
persistent-hint
|
||||
@@ -47,18 +47,39 @@
|
||||
v-if='needDisk'
|
||||
)
|
||||
v-card-chin
|
||||
v-btn(depressed, color='deep-orange darken-2', :disabled='!needDB && !needDisk').ml-0
|
||||
v-icon(left, color='white') label_important
|
||||
v-btn.px-3(depressed, color='deep-orange darken-2', :disabled='!needDB && !needDisk', @click='startImport').ml-0
|
||||
v-icon(left, color='white') mdi-database-import
|
||||
span.white--text Start Import
|
||||
v-dialog(
|
||||
v-model='isLoading'
|
||||
persistent
|
||||
max-width='350'
|
||||
)
|
||||
v-card(color='deep-orange darken-2', 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 Importing from Wiki.js 1.x...
|
||||
.caption Please wait
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { SemipolarSpinner } from 'epic-spinners'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
SemipolarSpinner
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
importFilters: ['content', 'uploads'],
|
||||
importFilters: ['content', 'uploads', 'users'],
|
||||
dbConnStr: 'mongodb://',
|
||||
contentPath: '/wiki-v1/repo'
|
||||
contentPath: '/wiki-v1/repo',
|
||||
isLoading: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -68,6 +89,11 @@ export default {
|
||||
needDisk() {
|
||||
return this.importFilters.indexOf('content') >= 0 || this.importFilters.indexOf('uploads') >= 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async startImport () {
|
||||
this.isLoading = true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -72,7 +72,7 @@ export default {
|
||||
key: 'UtilityImportv1',
|
||||
icon: 'mdi-database-import',
|
||||
i18nKey: 'importv1',
|
||||
isAvailable: false
|
||||
isAvailable: true
|
||||
},
|
||||
{
|
||||
key: 'UtilityTelemetry',
|
||||
|
||||
@@ -209,6 +209,10 @@ export default {
|
||||
|
||||
.highlighted {
|
||||
background: #FFF linear-gradient(to bottom, #FFF, mc('orange', '100'));
|
||||
|
||||
@at-root .theme--dark & {
|
||||
background: mc('grey', '900') linear-gradient(to bottom, mc('orange', '900'), darken(mc('orange', '900'), 15%));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -65,7 +65,6 @@ export default {
|
||||
editorCode: () => import(/* webpackChunkName: "editor-code", webpackMode: "lazy" */ './editor/editor-code.vue'),
|
||||
editorCkeditor: () => import(/* webpackChunkName: "editor-ckeditor", webpackMode: "lazy" */ './editor/editor-ckeditor.vue'),
|
||||
editorMarkdown: () => import(/* webpackChunkName: "editor-markdown", webpackMode: "lazy" */ './editor/editor-markdown.vue'),
|
||||
editorWysiwyg: () => import(/* webpackChunkName: "editor-wysiwyg", webpackMode: "lazy" */ './editor/editor-wysiwyg.vue'),
|
||||
editorModalEditorselect: () => import(/* webpackChunkName: "editor", webpackMode: "eager" */ './editor/editor-modal-editorselect.vue'),
|
||||
editorModalProperties: () => import(/* webpackChunkName: "editor", webpackMode: "eager" */ './editor/editor-modal-properties.vue'),
|
||||
editorModalUnsaved: () => import(/* webpackChunkName: "editor", webpackMode: "eager" */ './editor/editor-modal-unsaved.vue'),
|
||||
|
||||
@@ -1,12 +1,64 @@
|
||||
<template lang='pug'>
|
||||
.editor-code
|
||||
.editor-code-main
|
||||
.editor-code-sidebar
|
||||
v-tooltip(right, color='teal')
|
||||
template(v-slot:activator='{ on }')
|
||||
v-btn.animated.fadeInLeft(icon, tile, v-on='on', dark, disabled).mx-0
|
||||
v-icon mdi-link-plus
|
||||
span {{$t('editor:markup.insertLink')}}
|
||||
v-tooltip(right, color='teal')
|
||||
template(v-slot:activator='{ on }')
|
||||
v-btn.mt-3.animated.fadeInLeft.wait-p1s(icon, tile, v-on='on', dark, @click='toggleModal(`editorModalMedia`)').mx-0
|
||||
v-icon(:color='activeModal === `editorModalMedia` ? `teal` : ``') mdi-folder-multiple-image
|
||||
span {{$t('editor:markup.insertAssets')}}
|
||||
v-tooltip(right, color='teal')
|
||||
template(v-slot:activator='{ on }')
|
||||
v-btn.mt-3.animated.fadeInLeft.wait-p2s(icon, tile, v-on='on', dark, @click='toggleModal(`editorModalBlocks`)', disabled).mx-0
|
||||
v-icon(:color='activeModal === `editorModalBlocks` ? `teal` : ``') mdi-view-dashboard-outline
|
||||
span {{$t('editor:markup.insertBlock')}}
|
||||
v-tooltip(right, color='teal')
|
||||
template(v-slot:activator='{ on }')
|
||||
v-btn.mt-3.animated.fadeInLeft.wait-p3s(icon, tile, v-on='on', dark, disabled).mx-0
|
||||
v-icon mdi-code-braces
|
||||
span {{$t('editor:markup.insertCodeBlock')}}
|
||||
v-tooltip(right, color='teal')
|
||||
template(v-slot:activator='{ on }')
|
||||
v-btn.mt-3.animated.fadeInLeft.wait-p4s(icon, tile, v-on='on', dark, disabled).mx-0
|
||||
v-icon mdi-library-video
|
||||
span {{$t('editor:markup.insertVideoAudio')}}
|
||||
v-tooltip(right, color='teal')
|
||||
template(v-slot:activator='{ on }')
|
||||
v-btn.mt-3.animated.fadeInLeft.wait-p5s(icon, tile, v-on='on', dark, disabled).mx-0
|
||||
v-icon mdi-chart-multiline
|
||||
span {{$t('editor:markup.insertDiagram')}}
|
||||
v-tooltip(right, color='teal')
|
||||
template(v-slot:activator='{ on }')
|
||||
v-btn.mt-3.animated.fadeInLeft.wait-p6s(icon, tile, v-on='on', dark, disabled).mx-0
|
||||
v-icon mdi-function-variant
|
||||
span {{$t('editor:markup.insertMathExpression')}}
|
||||
template(v-if='$vuetify.breakpoint.mdAndUp')
|
||||
v-spacer
|
||||
v-tooltip(right, color='teal')
|
||||
template(v-slot:activator='{ on }')
|
||||
v-btn.mt-3.animated.fadeInLeft.wait-p8s(icon, tile, v-on='on', dark, @click='toggleFullscreen').mx-0
|
||||
v-icon mdi-arrow-expand-all
|
||||
span {{$t('editor:markup.distractionFreeMode')}}
|
||||
.editor-code-editor
|
||||
codemirror(ref='cm', v-model='code', :options='cmOptions', @ready='onCmReady', @input='onCmInput')
|
||||
textarea(ref='cm')
|
||||
v-system-bar.editor-code-sysbar(dark, status, color='grey darken-3')
|
||||
.caption.editor-code-sysbar-locale {{locale.toUpperCase()}}
|
||||
.caption.px-3 /{{path}}
|
||||
template(v-if='$vuetify.breakpoint.mdAndUp')
|
||||
v-spacer
|
||||
.caption Code
|
||||
v-spacer
|
||||
.caption Ln {{cursorPos.line + 1}}, Col {{cursorPos.ch + 1}}
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import _ from 'lodash'
|
||||
import { get, sync } from 'vuex-pathify'
|
||||
|
||||
// ========================================
|
||||
// IMPORTS
|
||||
@@ -17,24 +69,21 @@ import CodeMirror from 'codemirror'
|
||||
import 'codemirror/lib/codemirror.css'
|
||||
|
||||
// Language
|
||||
import 'codemirror/mode/markdown/markdown.js'
|
||||
import 'codemirror/mode/htmlmixed/htmlmixed.js'
|
||||
|
||||
// Addons
|
||||
import 'codemirror/addon/selection/active-line.js'
|
||||
import 'codemirror/addon/display/fullscreen.js'
|
||||
import 'codemirror/addon/display/fullscreen.css'
|
||||
import 'codemirror/addon/selection/mark-selection.js'
|
||||
import 'codemirror/addon/scroll/annotatescrollbar.js'
|
||||
import 'codemirror/addon/search/matchesonscrollbar.js'
|
||||
import 'codemirror/addon/search/searchcursor.js'
|
||||
import 'codemirror/addon/search/match-highlighter.js'
|
||||
|
||||
// ========================================
|
||||
// INIT
|
||||
// ========================================
|
||||
|
||||
// Platform detection
|
||||
const CtrlKey = /Mac/.test(navigator.platform) ? 'Cmd' : 'Ctrl'
|
||||
// const CtrlKey = /Mac/.test(navigator.platform) ? 'Cmd' : 'Ctrl'
|
||||
|
||||
// ========================================
|
||||
// Vue Component
|
||||
@@ -43,57 +92,170 @@ const CtrlKey = /Mac/.test(navigator.platform) ? 'Cmd' : 'Ctrl'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: '<h1>Title</h1>\n\n<p>Some text here</p>',
|
||||
cmOptions: {
|
||||
tabSize: 2,
|
||||
mode: 'text/html',
|
||||
theme: 'wikijs-dark',
|
||||
lineNumbers: true,
|
||||
lineWrapping: true,
|
||||
line: true,
|
||||
styleActiveLine: true,
|
||||
highlightSelectionMatches: {
|
||||
annotateScrollbar: true
|
||||
},
|
||||
viewportMargin: 50
|
||||
}
|
||||
cm: null,
|
||||
cursorPos: { ch: 0, line: 1 }
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
cm() {
|
||||
return this.$refs.cm.codemirror
|
||||
},
|
||||
isMobile() {
|
||||
return this.$vuetify.breakpoint.smAndDown
|
||||
}
|
||||
},
|
||||
locale: get('page/locale'),
|
||||
path: get('page/path'),
|
||||
mode: get('editor/mode'),
|
||||
activeModal: sync('editor/activeModal')
|
||||
},
|
||||
methods: {
|
||||
onCmReady(cm) {
|
||||
let self = this
|
||||
const keyBindings = {
|
||||
'F11' (cm) {
|
||||
cm.setOption('fullScreen', !cm.getOption('fullScreen'))
|
||||
},
|
||||
'Esc' (cm) {
|
||||
if (cm.getOption('fullScreen')) cm.setOption('fullScreen', false)
|
||||
}
|
||||
}
|
||||
_.set(keyBindings, `${CtrlKey}-S`, cm => {
|
||||
self.$parent.save()
|
||||
})
|
||||
|
||||
cm.setSize(null, 'calc(100vh - 64px)')
|
||||
cm.setOption('extraKeys', keyBindings)
|
||||
this.onCmInput(this.code)
|
||||
toggleModal(key) {
|
||||
this.activeModal = (this.activeModal === key) ? '' : key
|
||||
this.helpShown = false
|
||||
},
|
||||
onCmInput: _.debounce(function (newContent) {
|
||||
this.$store.set('editor/content', newContent)
|
||||
}, 500)
|
||||
closeAllModal() {
|
||||
this.activeModal = ''
|
||||
this.helpShown = false
|
||||
},
|
||||
/**
|
||||
* Insert content at cursor
|
||||
*/
|
||||
insertAtCursor({ content }) {
|
||||
const cursor = this.cm.doc.getCursor('head')
|
||||
this.cm.doc.replaceRange(content, cursor)
|
||||
},
|
||||
/**
|
||||
* Insert content after current line
|
||||
*/
|
||||
insertAfter({ content, newLine }) {
|
||||
const curLine = this.cm.doc.getCursor('to').line
|
||||
const lineLength = this.cm.doc.getLine(curLine).length
|
||||
this.cm.doc.replaceRange(newLine ? `\n${content}\n` : content, { line: curLine, ch: lineLength + 1 })
|
||||
},
|
||||
/**
|
||||
* Insert content before current line
|
||||
*/
|
||||
insertBeforeEachLine({ content, after }) {
|
||||
let lines = []
|
||||
if (!this.cm.doc.somethingSelected()) {
|
||||
lines.push(this.cm.doc.getCursor('head').line)
|
||||
} else {
|
||||
lines = _.flatten(this.cm.doc.listSelections().map(sl => {
|
||||
const range = Math.abs(sl.anchor.line - sl.head.line) + 1
|
||||
const lowestLine = (sl.anchor.line > sl.head.line) ? sl.head.line : sl.anchor.line
|
||||
return _.times(range, l => l + lowestLine)
|
||||
}))
|
||||
}
|
||||
lines.forEach(ln => {
|
||||
let lineContent = this.cm.doc.getLine(ln)
|
||||
const lineLength = lineContent.length
|
||||
if (_.startsWith(lineContent, content)) {
|
||||
lineContent = lineContent.substring(content.length)
|
||||
}
|
||||
|
||||
this.cm.doc.replaceRange(content + lineContent, { line: ln, ch: 0 }, { line: ln, ch: lineLength })
|
||||
})
|
||||
if (after) {
|
||||
const lastLine = _.last(lines)
|
||||
this.cm.doc.replaceRange(`\n${after}\n`, { line: lastLine, ch: this.cm.doc.getLine(lastLine).length + 1 })
|
||||
}
|
||||
},
|
||||
/**
|
||||
* Update cursor state
|
||||
*/
|
||||
positionSync(cm) {
|
||||
this.cursorPos = cm.getCursor('head')
|
||||
},
|
||||
toggleFullscreen () {
|
||||
this.cm.setOption('fullScreen', true)
|
||||
},
|
||||
refresh() {
|
||||
this.$nextTick(() => {
|
||||
this.cm.refresh()
|
||||
})
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$store.set('editor/editorKey', 'code')
|
||||
|
||||
if (this.mode === 'create') {
|
||||
this.$store.set('editor/content', '<h1>Title</h1>\n\n<p>Some text here</p>')
|
||||
}
|
||||
|
||||
// Initialize CodeMirror
|
||||
|
||||
this.cm = CodeMirror.fromTextArea(this.$refs.cm, {
|
||||
tabSize: 2,
|
||||
mode: 'text/html',
|
||||
theme: 'wikijs-dark',
|
||||
lineNumbers: true,
|
||||
lineWrapping: true,
|
||||
line: true,
|
||||
styleActiveLine: true,
|
||||
highlightSelectionMatches: {
|
||||
annotateScrollbar: true
|
||||
},
|
||||
viewportMargin: 50,
|
||||
inputStyle: 'contenteditable',
|
||||
allowDropFileTypes: ['image/jpg', 'image/png', 'image/svg', 'image/jpeg', 'image/gif']
|
||||
})
|
||||
this.cm.setValue(this.$store.get('editor/content'))
|
||||
this.cm.on('change', c => {
|
||||
this.$store.set('editor/content', c.getValue())
|
||||
})
|
||||
if (this.$vuetify.breakpoint.mdAndUp) {
|
||||
this.cm.setSize(null, 'calc(100vh - 64px - 24px)')
|
||||
} else {
|
||||
this.cm.setSize(null, 'calc(100vh - 56px - 16px)')
|
||||
}
|
||||
|
||||
// Set Keybindings
|
||||
|
||||
const keyBindings = {
|
||||
'F11' (c) {
|
||||
c.setOption('fullScreen', !c.getOption('fullScreen'))
|
||||
},
|
||||
'Esc' (c) {
|
||||
if (c.getOption('fullScreen')) c.setOption('fullScreen', false)
|
||||
}
|
||||
}
|
||||
this.cm.setOption('extraKeys', keyBindings)
|
||||
|
||||
// Handle cursor movement
|
||||
|
||||
this.cm.on('cursorActivity', c => {
|
||||
this.positionSync(c)
|
||||
})
|
||||
|
||||
// Render initial preview
|
||||
|
||||
this.$root.$on('editorInsert', opts => {
|
||||
switch (opts.kind) {
|
||||
case 'IMAGE':
|
||||
let img = `<img src="${opts.path}" alt="${opts.text}"`
|
||||
if (opts.align && opts.align !== '') {
|
||||
img += ` class="align-${opts.align}"`
|
||||
}
|
||||
img += ` />`
|
||||
this.insertAtCursor({
|
||||
content: img
|
||||
})
|
||||
break
|
||||
case 'BINARY':
|
||||
this.insertAtCursor({
|
||||
content: `<a href="${opts.path}" title="${opts.text}">${opts.text}</a>`
|
||||
})
|
||||
break
|
||||
}
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.$root.$off('editorInsert')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss'>
|
||||
$editor-height: calc(100vh - 64px - 24px);
|
||||
$editor-height-mobile: calc(100vh - 56px - 16px);
|
||||
|
||||
.editor-code {
|
||||
&-main {
|
||||
display: flex;
|
||||
@@ -104,7 +266,7 @@ export default {
|
||||
background-color: darken(mc('grey', '900'), 4.5%);
|
||||
flex: 1 1 50%;
|
||||
display: block;
|
||||
height: calc(100vh - 96px);
|
||||
height: $editor-height;
|
||||
position: relative;
|
||||
|
||||
&-title {
|
||||
@@ -130,6 +292,35 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
&-sidebar {
|
||||
background-color: mc('grey', '900');
|
||||
width: 64px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
padding: 24px 0;
|
||||
|
||||
@include until($tablet) {
|
||||
padding: 12px 0;
|
||||
width: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
&-sysbar {
|
||||
padding-left: 0;
|
||||
|
||||
&-locale {
|
||||
background-color: rgba(255,255,255,.25);
|
||||
display:inline-flex;
|
||||
padding: 0 12px;
|
||||
height: 24px;
|
||||
width: 63px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
// ==========================================
|
||||
// CODE MIRROR
|
||||
// ==========================================
|
||||
@@ -180,10 +371,10 @@ export default {
|
||||
background: mc('blue','800');
|
||||
}
|
||||
.cm-s-wikijs-dark .CodeMirror-line::selection, .cm-s-wikijs-dark .CodeMirror-line > span::selection, .cm-s-wikijs-dark .CodeMirror-line > span > span::selection {
|
||||
background: mc('red', '500');
|
||||
background: mc('amber', '500');
|
||||
}
|
||||
.cm-s-wikijs-dark .CodeMirror-line::-moz-selection, .cm-s-wikijs-dark .CodeMirror-line > span::-moz-selection, .cm-s-wikijs-dark .CodeMirror-line > span > span::-moz-selection {
|
||||
background: mc('red', '500');
|
||||
background: mc('amber', '500');
|
||||
}
|
||||
.cm-s-wikijs-dark .CodeMirror-gutters {
|
||||
background: darken(mc('grey','900'), 6%);
|
||||
|
||||
@@ -26,25 +26,15 @@
|
||||
)
|
||||
.body-2.mt-7 Coming Soon
|
||||
v-flex(xs4)
|
||||
v-hover
|
||||
template(v-slot:default='{ hover }')
|
||||
v-card.radius-7.grey.animated.fadeInUp.wait-p1s(
|
||||
hover
|
||||
light
|
||||
ripple
|
||||
)
|
||||
v-card-text.text-center(@click='')
|
||||
img(src='/svg/editor-icon-code.svg', alt='Code', style='width: 36px;')
|
||||
.body-2.mt-2.grey--text.text--darken-2 Code
|
||||
.caption.grey--text.text--darken-1 Raw HTML
|
||||
v-fade-transition
|
||||
v-overlay(
|
||||
v-if='hover'
|
||||
absolute
|
||||
color='primary'
|
||||
opacity='.8'
|
||||
)
|
||||
.body-2.mt-7 Coming Soon
|
||||
v-card.radius-7.animated.fadeInUp.wait-p1s(
|
||||
hover
|
||||
light
|
||||
ripple
|
||||
)
|
||||
v-card-text.text-center(@click='selectEditor("code")')
|
||||
img(src='/svg/editor-icon-code.svg', alt='Code', style='width: 36px;')
|
||||
.body-2.primary--text.mt-2 Code
|
||||
.caption.grey--text Raw HTML
|
||||
v-flex(xs4)
|
||||
v-card.radius-7.animated.fadeInUp.wait-p2s(
|
||||
hover
|
||||
@@ -75,17 +65,6 @@
|
||||
opacity='.8'
|
||||
)
|
||||
.body-2.mt-7 Coming Soon
|
||||
//- v-flex(xs4)
|
||||
//- v-card.radius-7.grey(
|
||||
//- hover
|
||||
//- light
|
||||
//- ripple
|
||||
//- disabled
|
||||
//- )
|
||||
//- v-card-text.text-center(@click='selectEditor("wysiwyg")')
|
||||
//- img(src='/svg/icon-open-in-browser.svg', alt='Visual Builder', style='width: 36px;')
|
||||
//- .body-2.mt-2.grey--text.text--darken-2 Visual Builder
|
||||
//- .caption.grey--text.text--darken-1 Drag-n-drop
|
||||
v-flex(xs4)
|
||||
v-card.radius-7.animated.fadeInUp.wait-p4s(
|
||||
hover
|
||||
|
||||
@@ -568,6 +568,16 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
&.is-editor-code {
|
||||
top: 64px;
|
||||
height: calc(100vh - 64px - 26px);
|
||||
|
||||
@include until($tablet) {
|
||||
top: 56px;
|
||||
height: calc(100vh - 56px - 24px);
|
||||
}
|
||||
}
|
||||
|
||||
.filepond--root {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@@ -1,62 +0,0 @@
|
||||
<template lang='pug'>
|
||||
.editor-wysiwyg
|
||||
div(ref='editor')
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import 'grapesjs/dist/css/grapes.min.css'
|
||||
import grapesjs from 'grapesjs'
|
||||
|
||||
let editor // eslint-disable-line no-unused-vars
|
||||
|
||||
export default {
|
||||
mounted() {
|
||||
editor = grapesjs.init({
|
||||
container: this.$refs.editor,
|
||||
width: 'auto',
|
||||
height: 'calc(100vh - 64px)',
|
||||
storageManager: { type: null },
|
||||
// panels: { defaults: [] }
|
||||
blockManager: {
|
||||
blocks: [
|
||||
{
|
||||
id: 'section', // id is mandatory
|
||||
label: '<b>Section</b>', // You can use HTML/SVG inside labels
|
||||
attributes: { class: 'gjs-block-section' },
|
||||
content: `<section>
|
||||
<h1>This is a simple title</h1>
|
||||
<div>This is just a Lorem text: Lorem ipsum dolor sit amet</div>
|
||||
</section>`
|
||||
}, {
|
||||
id: 'text',
|
||||
label: 'Text',
|
||||
content: '<div data-gjs-type="text">Insert your text here</div>'
|
||||
}, {
|
||||
id: 'image',
|
||||
label: 'Image',
|
||||
// Select the component once it's dropped
|
||||
select: true,
|
||||
// You can pass components as a JSON instead of a simple HTML string,
|
||||
// in this case we also use a defined component type `image`
|
||||
content: { type: 'image' },
|
||||
// This triggers `active` event on dropped components and the `image`
|
||||
// reacts by opening the AssetManager
|
||||
activate: true
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
.gjs-block {
|
||||
width: auto;
|
||||
height: auto;
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -4,15 +4,16 @@
|
||||
v-container
|
||||
v-layout
|
||||
v-flex(xs12, lg6, offset-lg3)
|
||||
v-card.radius-7
|
||||
v-card.radius-7.animated.fadeInUp
|
||||
.text-center
|
||||
img.setup-logo(src='/svg/logo-wikijs.svg', alt='Wiki.js Logo')
|
||||
v-alert(tile, color='indigo lighten-5', :value='true')
|
||||
img.setup-logo.animated.fadeInUp.wait-p2s(src='/svg/logo-wikijs-full.svg', alt='Wiki.js Logo')
|
||||
v-alert(v-model='error', type='error', icon='mdi-alert', tile, dismissible) {{ errorMessage }}
|
||||
v-alert(v-if='!error', tile, color='indigo lighten-5', :value='true')
|
||||
v-icon.mr-3(color='indigo') mdi-package-variant
|
||||
span.indigo--text You are about to install Wiki.js #[strong {{wikiVersion}}].
|
||||
v-card-text
|
||||
.overline.pl-3 Create Administrator Account
|
||||
v-container.pa-3(grid-list-xl)
|
||||
.overline.pl-3 Administrator Account
|
||||
v-container.pa-3.mt-3(grid-list-xl)
|
||||
v-layout(row, wrap)
|
||||
v-flex(xs12)
|
||||
v-text-field(
|
||||
@@ -21,11 +22,7 @@
|
||||
label='Administrator Email',
|
||||
hint='The email address of the administrator account.',
|
||||
persistent-hint
|
||||
v-validate='{ required: true, email: true }',
|
||||
data-vv-name='adminEmail',
|
||||
data-vv-as='Administrator Email',
|
||||
data-vv-scope='admin',
|
||||
:error-messages='errors.collect(`admin.adminEmail`)'
|
||||
required
|
||||
ref='adminEmailInput'
|
||||
)
|
||||
v-flex(xs6)
|
||||
@@ -40,11 +37,6 @@
|
||||
:type="pwdMode ? 'password' : 'text'"
|
||||
hint='At least 8 characters long.',
|
||||
persistent-hint
|
||||
v-validate='{ required: true, min: 8 }',
|
||||
data-vv-name='adminPassword',
|
||||
data-vv-as='Password',
|
||||
data-vv-scope='admin',
|
||||
:error-messages='errors.collect(`admin.adminPassword`)'
|
||||
)
|
||||
v-flex(xs6)
|
||||
v-text-field(
|
||||
@@ -58,11 +50,6 @@
|
||||
:type="pwdConfirmMode ? 'password' : 'text'"
|
||||
hint='Verify your password again.',
|
||||
persistent-hint
|
||||
v-validate='{ required: true, min: 8 }',
|
||||
data-vv-name='adminPasswordConfirm',
|
||||
data-vv-as='Confirm Password',
|
||||
data-vv-scope='admin',
|
||||
:error-messages='errors.collect(`admin.adminPasswordConfirm`)'
|
||||
@keyup.enter='install'
|
||||
)
|
||||
v-divider.mb-4
|
||||
@@ -73,10 +60,9 @@
|
||||
persistent-hint,
|
||||
hint='Help Wiki.js developers improve this app with anonymized telemetry.'
|
||||
)
|
||||
v-alert(:value='error', type='error', icon='mdi-alert') {{ errorMessage }}
|
||||
v-divider.mt-3(v-if='!error')
|
||||
v-divider.mt-2
|
||||
v-card-actions
|
||||
v-btn(color='primary', @click='install', :disabled='loading', x-large, flat, block)
|
||||
v-btn(color='primary', @click='install', :disabled='loading', x-large, depressed, block)
|
||||
v-icon(left) mdi-check
|
||||
span Install
|
||||
|
||||
@@ -98,8 +84,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
import _ from 'lodash'
|
||||
import validate from 'validate.js'
|
||||
import { BreedingRhombusSpinner } from 'epic-spinners'
|
||||
|
||||
export default {
|
||||
@@ -135,27 +121,60 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
async install () {
|
||||
const validationSuccess = await this.$validator.validateAll('admin')
|
||||
if (!validationSuccess || this.conf.adminPassword !== this.conf.adminPasswordConfirm) {
|
||||
this.error = false
|
||||
|
||||
const validationResults = validate(this.conf, {
|
||||
adminEmail: {
|
||||
presence: {
|
||||
allowEmpty: false
|
||||
},
|
||||
email: true
|
||||
},
|
||||
adminPassword: {
|
||||
presence: {
|
||||
allowEmpty: false
|
||||
},
|
||||
length: {
|
||||
minimum: 6,
|
||||
maximum: 255
|
||||
}
|
||||
},
|
||||
adminPasswordConfirm: {
|
||||
equality: 'adminPassword'
|
||||
}
|
||||
}, {
|
||||
format: 'flat'
|
||||
})
|
||||
if (validationResults) {
|
||||
this.error = true
|
||||
this.errorMessage = validationResults[0]
|
||||
this.$forceUpdate()
|
||||
return
|
||||
}
|
||||
|
||||
this.loading = true
|
||||
this.success = false
|
||||
this.error = false
|
||||
this.$forceUpdate()
|
||||
|
||||
_.delay(async () => {
|
||||
try {
|
||||
const resp = await axios.post('/finalize', this.conf)
|
||||
if (resp.data.ok === true) {
|
||||
const resp = await fetch('/finalize', {
|
||||
method: 'POST',
|
||||
cache: 'no-cache',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(this.conf)
|
||||
}).then(res => res.json())
|
||||
|
||||
if (resp.ok === true) {
|
||||
this.success = true
|
||||
_.delay(() => {
|
||||
window.location.assign('/login')
|
||||
}, 3000)
|
||||
} else {
|
||||
this.error = true
|
||||
this.errorMessage = resp.data.error
|
||||
this.errorMessage = resp.error
|
||||
this.loading = false
|
||||
}
|
||||
} catch (err) {
|
||||
@@ -178,8 +197,8 @@ export default {
|
||||
}
|
||||
|
||||
&-logo {
|
||||
width: 300px;
|
||||
margin: 3rem 0 2rem 0;
|
||||
width: 400px;
|
||||
margin: 2rem 0 2rem 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user