@ -1,199 +1,99 @@
< template lang = "pug" >
v - app . setup
v - toolbar ( color = 'blue darken-2' , dark , app , clipped - left , fixed , flat )
v - spacer
v - toolbar - title
span . subheading Wiki . js { { wikiVersion } }
v - spacer
v - content . white
v - progress - linear . ma - 0 ( indeterminate , height = '4' , : active = 'loading' )
v - stepper . elevation - 0 ( v - model = 'state' )
v - stepper - header
v - stepper - step ( step = '1' : complete = 'state > 1' )
| Welcome
small Wiki . js Installation Wizard
v - divider
v - stepper - step ( step = '2' : complete = 'state > 2' )
| Administration Account
small Create the admin account
v - divider ( v - if = 'this.conf.upgrade' )
v - stepper - step ( step = '3' : complete = 'state > 3' , v - if = 'this.conf.upgrade' )
| Upgrade from Wiki . js 1. x
small Migrate your existing installation
v - divider
v - stepper - step ( : step = 'this.conf.upgrade ? 4 : 3' : complete = 'this.conf.upgrade ? state > 3 : state > 4' )
| Final Steps
small Finalizing your installation
v - stepper - items
/ / - = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
/ / - W E L C O M E
/ / - = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
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;' )
. text - xs - center
. 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 Detailed information about installation and usage can be found on the # [ a ( href = 'https://wiki.requarks.io/docs' ) official documentation site ] .
. body - 1 Should you have any question or would like to report something that doesn 't look right, feel free to create a new issue on the #[a(href=' https : / / g i t h u b . c o m / R e q u a r k s / w i k i / i s s u e s ' ) G i t H u b p r o j e c t ] .
. body - 1. py - 3
v - icon . mr - 2 ( color = 'indigo' ) open _in _browser
v - content
v - container
v - layout
v - flex ( xs12 , lg6 , offset - lg3 )
v - card . radius - 7
. text - xs - center
img . setup - logo ( src = '/svg/logo-wikijs.svg' , alt = 'Wiki.js Logo' )
v - alert ( color = 'indigo lighten-5' , icon = 'open_in_browser' , : value = 'true' )
span . indigo -- text You are about to install Wiki . js # [ strong { { wikiVersion } } ] .
v - btn . mt - 4 ( color = 'primary' , @ click = 'proceedToAdmin' , : disabled = 'loading' , large )
span Start
v - icon ( right ) arrow _forward
v - divider . my - 5
. body - 2 Additional Setup Options
div ( style = 'display:inline-block;' )
v - checkbox (
v - card - text
. body - 2. pl - 3 Create Administrator Account
v - container . pa - 3 ( grid - list - xl )
v - layout ( row , wrap )
v - flex ( xs12 )
v - text - field (
outline
v - model = 'conf.adminEmail' ,
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`)'
ref = 'adminEmailInput'
)
v - flex ( xs6 )
v - text - field (
outline
ref = 'adminPassword' ,
counter = '255'
v - model = 'conf.adminPassword' ,
label = 'Password' ,
: append - icon = "pwdMode ? 'visibility' : 'visibility_off'"
@ click : append = "() => (pwdMode = !pwdMode)"
: 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 (
outline
ref = 'adminPasswordConfirm' ,
counter = '255'
v - model = 'conf.adminPasswordConfirm' ,
label = 'Confirm Password' ,
: append - icon = "pwdConfirmMode ? 'visibility' : 'visibility_off'"
@ click : append = "() => (pwdConfirmMode = !pwdConfirmMode)"
: 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
v - checkbox . ml - 3 (
color = 'primary' ,
v - model = 'conf.telemetry' ,
label = 'Allow Telemetry' ,
persistent - hint ,
hint = 'Help Wiki.js developers improve this app with anonymized telemetry.'
)
v - checkbox . mt - 3 (
color = 'primary' ,
v - model = 'conf.upgrade' ,
label = 'Upgrade from Wiki.js 1.x' ,
disabled
persistent - hint ,
hint = 'Check this box if you are upgrading from Wiki.js 1.x and wish to migrate your existing data.'
)
/ / - = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
/ / - A D M I N I S T R A T O R A C C O U N T
/ / - = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
v - stepper - content ( step = '2' )
v - card . text - xs - center ( flat )
svg . icons . is - 64 : use ( xlink : href = '#nc-man-black' )
. subheading Administrator Account
. body - 2 A root administrator account will be created for local authentication . From this account , you can create or authorize more users .
v - form
v - container
v - layout ( row , wrap )
v - flex ( xs12 )
v - text - field (
outline
background - color = 'grey lighten-2'
v - model = 'conf.adminEmail' ,
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`)'
ref = 'adminEmailInput'
)
v - flex . pr - 3 ( xs6 )
v - text - field (
outline
background - color = 'grey lighten-2'
ref = 'adminPassword' ,
counter = '255'
v - model = 'conf.adminPassword' ,
label = 'Password' ,
: append - icon = "pwdMode ? 'visibility' : 'visibility_off'"
@ click : append = "() => (pwdMode = !pwdMode)"
: 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 (
outline
background - color = 'grey lighten-2'
ref = 'adminPasswordConfirm' ,
counter = '255'
v - model = 'conf.adminPasswordConfirm' ,
label = 'Confirm Password' ,
: append - icon = "pwdConfirmMode ? 'visibility' : 'visibility_off'"
@ click : append = "() => (pwdConfirmMode = !pwdConfirmMode)"
: 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 = 'proceedToUpgrade'
)
. pt - 3. text - xs - center
v - btn ( @ click = 'proceedToWelcome' , : disabled = 'loading' ) Back
v - btn ( color = 'primary' , @ click = 'proceedToUpgrade' , : disabled = 'loading' ) Continue
/ / - = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
/ / - U P G R A D E F R O M 1 . x
/ / - = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
v - stepper - content ( step = '3' , v - if = 'conf.upgrade' )
v - card . text - xs - center ( flat )
svg . icons . is - 64 : use ( xlink : href = '#nc-spaceship' )
. subheading Upgrade from Wiki . js 1. x
. body - 2 Migrating from a Wiki . js 1. x installation is quick and simple .
v - form
v - container
v - layout ( row )
v - flex ( xs12 )
v - text - field (
outline
background - color = 'grey lighten-2'
v - model = 'conf.upgMongo' ,
placeholder = 'mongodb://' ,
label = 'Connection String to Wiki.js 1.x MongoDB database' ,
persistent - hint ,
hint = 'A MongoDB database connection string where a Wiki.js 1.x installation is located. No alterations will be made to this database.' ,
v - validate = '{ required: true, min: 2 }' ,
data - vv - name = 'upgMongo' ,
data - vv - as = 'MongoDB Connection String' ,
data - vv - scope = 'upgrade' ,
: error - messages = 'errors.collect(`upgrade.upgMongo`)'
)
. pt - 3. text - xs - center
v - btn ( @ click = 'proceedToAdmin' , : disabled = 'loading' ) Back
v - btn ( color = 'primary' , @ click = 'proceedToFinal' , : disabled = 'loading' ) Continue
/ / - = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
/ / - F I N A L
/ / - = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
v - stepper - content ( : step = 'conf.upgrade ? 4 : 3' )
v - card . text - xs - center ( flat )
template ( v - if = 'loading' )
. mt - 3 ( style = 'width: 64px; display:inline-block;' )
breeding - rhombus - spinner (
: animation - duration = '2000'
: size = '64'
color = '#1976d2'
)
. subheading . primary -- text . mt - 3 Finalizing your installation ...
template ( v - else - if = 'final.ok' )
svg . icons . is - 64 : use ( xlink : href = '#nc-check-bold' )
. subheading . green -- text Installation complete !
template ( v - else )
svg . icons . is - 64 : use ( xlink : href = '#nc-square-remove' )
. subheading . red -- text Something went wrong ...
v - container
v - alert ( type = 'success' , outline , : value = '!loading && final.ok' ) Wiki . js was configured successfully and is now ready for use .
v - alert ( type = 'error' , outline , : value = '!loading && !final.ok' ) { { final . error } }
v - divider
. pt - 3. text - xs - center
v - btn ( @ click = '!conf.upgrade ? proceedToAdmin() : proceedToUpgrade()' , : disabled = 'loading' ) Back
v - btn ( color = 'primary' , @ click = 'proceedToFinal' , v - if = '!loading && !final.ok' ) Try Again
v - btn ( color = 'success' , @ click = 'finish' , v - if = 'loading || final.ok' , : disabled = 'loading' ) Continue
v - footer . pa - 3 ( app , absolute , color = 'grey darken-3' , height = 'auto' )
. caption . grey -- text Wiki . js { { wikiVersion } } Installation Wizard
v - alert ( : value = 'error' , type = 'error' , icon = 'warning' ) { { errorMessage } }
v - divider . mt - 3 ( v - if = '!error' )
v - card - actions
v - btn ( color = 'primary' , @ click = 'install' , : disabled = 'loading' , large , flat , block )
span Install
v - icon ( right ) arrow _forward
v - dialog ( v - model = 'loading' , width = '450' , persistent )
v - card ( color = 'primary' , dark ) . radius - 7
v - card - text . text - xs - center . py - 5
. py - 3 ( style = 'width: 64px; display:inline-block;' )
breeding - rhombus - spinner (
: animation - duration = '2000'
: size = '64'
color = '#FFF'
)
template ( v - if = '!success' )
. subheading Finalizing your installation ...
. caption Just a moment
template ( v - else )
. subheading Installation complete !
. caption Redirecting ...
< / template >
< script >
@ -206,10 +106,6 @@ export default {
BreedingRhombusSpinner
} ,
props : {
telemetryId : {
type : String ,
required : true
} ,
wikiVersion : {
type : String ,
required : true
@ -218,98 +114,53 @@ export default {
data ( ) {
return {
loading : false ,
state : 1 ,
final : {
ok : false ,
error : '' ,
redirectUrl : ''
} ,
success : false ,
error : false ,
errorMessage : '' ,
conf : {
adminEmail : '' ,
adminPassword : '' ,
adminPasswordConfirm : '' ,
telemetry : true ,
upgrade : false ,
upgMongo : 'mongodb://'
telemetry : true
} ,
pwdMode : true ,
pwdConfirmMode : true
}
} ,
mounted ( ) {
_ . delay ( ( ) => {
this . $refs . adminEmailInput . focus ( )
} , 500 )
} ,
methods : {
proceedToWelcome ( ) {
this . state = 1
this . loading = false
} ,
async proceedToAdmin ( ) {
if ( this . state < 2 ) {
const validationSuccess = await this . $validator . validateAll ( 'general' )
if ( ! validationSuccess ) {
this . state = 1
return
}
}
this . state = 2
this . loading = false
_ . delay ( ( ) => {
this . $refs . adminEmailInput . focus ( )
} , 400 )
} ,
async proceedToUpgrade ( ) {
if ( this . state < 3 ) {
const validationSuccess = await this . $validator . validateAll ( 'admin' )
if ( ! validationSuccess || this . conf . adminPassword !== this . conf . adminPasswordConfirm ) {
this . state = 2
return
}
}
if ( this . conf . upgrade ) {
this . state = 3
this . loading = false
} else {
this . proceedToFinal ( )
}
} ,
async proceedToFinal ( ) {
if ( this . conf . upgrade && this . state < 4 ) {
const validationSuccess = await this . $validator . validateAll ( 'upgrade' )
if ( ! validationSuccess ) {
this . state = 3
return
}
async install ( ) {
const validationSuccess = await this . $validator . validateAll ( 'admin' )
if ( ! validationSuccess || this . conf . adminPassword !== this . conf . adminPasswordConfirm ) {
return
}
this . state = this . conf . upgrade ? 4 : 3
this . loading = true
this . final = {
ok : false ,
error : '' ,
redirectUrl : ''
}
this . success = false
this . error = false
this . $forceUpdate ( )
let self = this
_ . delay ( ( ) => {
axios . post ( '/finalize' , self . conf ) . then ( resp => {
_ . delay ( async ( ) => {
try {
const resp = await axios . post ( '/finalize' , this . conf )
if ( resp . data . ok === true ) {
this . success = true
_ . delay ( ( ) => {
self . final . ok = true
self . loading = false
} , 5000 )
window . location . assign ( '/login' )
} , 3000 )
} else {
self . final . ok = fals
self . final . error = resp . data . error
self . loading = false
this . error = true
this . errorMessage = resp . data . error
this . loading = false
}
self . $nextTick ( )
} ) . catch ( err => {
} catch ( err ) {
window . alert ( err . message )
} )
}
} , 1000 )
} ,
finish ( ) {
window . location . assign ( '/login' )
}
}
}
@ -317,5 +168,17 @@ export default {
< / script >
< style lang = 'scss' >
. setup {
. application -- wrap {
padding - top : 10 vh ;
background - color : mc ( 'grey' , '900' ) ;
background - image : url ( / s v g / m o t i f - c i r c u i t . s v g ) ! i m p o r t a n t ;
background - repeat : repeat ;
}
& - logo {
width : 300 px ;
margin : 3 rem 0 2 rem 0 ;
}
}
< / style >
Nick
5 years ago