wikijs-fork/client/components/setup.vue

186 lines
6.2 KiB
Vue
Raw Normal View History

<template lang="pug">
v-app.setup
2019-07-01 02:37:01 +00:00
v-content
v-container
v-layout
v-flex(xs12, lg6, offset-lg3)
v-card.radius-7
2019-08-04 02:51:29 +00:00
.text-center
2019-07-01 02:37:01 +00:00
img.setup-logo(src='/svg/logo-wikijs.svg', alt='Wiki.js Logo')
2019-08-04 02:51:29 +00:00
v-alert(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}}].
2019-07-01 02:37:01 +00:00
v-card-text
2019-08-04 02:51:29 +00:00
.overline.pl-3 Create Administrator Account
2019-07-01 02:37:01 +00:00
v-container.pa-3(grid-list-xl)
v-layout(row, wrap)
v-flex(xs12)
v-text-field(
2019-08-04 02:51:29 +00:00
outlined
2019-07-01 02:37:01 +00:00
v-model='conf.adminEmail',
label='Administrator Email',
2019-08-04 02:51:29 +00:00
hint='The email address of the administrator account.',
2019-07-01 02:37:01 +00:00
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(
2019-08-04 02:51:29 +00:00
outlined
2019-07-01 02:37:01 +00:00
ref='adminPassword',
counter='255'
v-model='conf.adminPassword',
label='Password',
2019-08-04 02:51:29 +00:00
:append-icon="pwdMode ? 'mdi-eye-off' : 'mdi-eye'"
2019-07-01 02:37:01 +00:00
@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(
2019-08-04 02:51:29 +00:00
outlined
2019-07-01 02:37:01 +00:00
ref='adminPasswordConfirm',
counter='255'
v-model='conf.adminPasswordConfirm',
label='Confirm Password',
2019-08-04 02:51:29 +00:00
:append-icon="pwdConfirmMode ? 'mdi-eye-off' : 'mdi-eye'"
2019-07-01 02:37:01 +00:00
@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.'
)
2019-08-31 01:23:04 +00:00
v-alert(:value='error', type='error', icon='mdi-alert') {{ errorMessage }}
2019-07-01 02:37:01 +00:00
v-divider.mt-3(v-if='!error')
v-card-actions
2019-08-04 02:51:29 +00:00
v-btn(color='primary', @click='install', :disabled='loading', x-large, flat, block)
v-icon(left) mdi-check
2019-07-01 02:37:01 +00:00
span Install
v-dialog(v-model='loading', width='450', persistent)
v-card(color='primary', dark).radius-7
2019-08-04 02:51:29 +00:00
v-card-text.text-center.py-5
2019-07-01 02:37:01 +00:00
.py-3(style='width: 64px; display:inline-block;')
breeding-rhombus-spinner(
:animation-duration='2000'
:size='64'
color='#FFF'
)
template(v-if='!success')
2019-08-04 02:51:29 +00:00
.subtitle-1.white--text Finalizing your installation...
2019-07-01 02:37:01 +00:00
.caption Just a moment
template(v-else)
2019-08-04 02:51:29 +00:00
.subtitle-1.white--text Installation complete!
2019-07-01 02:37:01 +00:00
.caption Redirecting...
</template>
<script>
import axios from 'axios'
import _ from 'lodash'
import { BreedingRhombusSpinner } from 'epic-spinners'
export default {
components: {
BreedingRhombusSpinner
},
props: {
wikiVersion: {
type: String,
required: true
}
},
data() {
return {
loading: false,
2019-07-01 02:37:01 +00:00
success: false,
error: false,
errorMessage: '',
conf: {
adminEmail: '',
adminPassword: '',
adminPasswordConfirm: '',
2019-07-01 02:37:01 +00:00
telemetry: true
2018-05-28 18:46:55 +00:00
},
pwdMode: true,
pwdConfirmMode: true
}
},
2019-07-01 02:37:01 +00:00
mounted() {
_.delay(() => {
this.$refs.adminEmailInput.focus()
}, 500)
},
methods: {
2019-07-01 02:37:01 +00:00
async install () {
const validationSuccess = await this.$validator.validateAll('admin')
if (!validationSuccess || this.conf.adminPassword !== this.conf.adminPasswordConfirm) {
return
}
this.loading = true
2019-07-01 02:37:01 +00:00
this.success = false
this.error = false
this.$forceUpdate()
2019-07-01 02:37:01 +00:00
_.delay(async () => {
try {
const resp = await axios.post('/finalize', this.conf)
if (resp.data.ok === true) {
2019-07-29 04:50:03 +00:00
this.success = true
_.delay(() => {
2019-07-01 02:37:01 +00:00
window.location.assign('/login')
}, 3000)
} else {
2019-07-01 02:37:01 +00:00
this.error = true
this.errorMessage = resp.data.error
this.loading = false
}
2019-07-29 04:50:03 +00:00
} catch (err) {
window.alert(err.message)
2019-07-01 02:37:01 +00:00
}
}, 1000)
}
}
}
</script>
<style lang='scss'>
2019-07-01 02:37:01 +00:00
.setup {
2019-08-04 02:51:29 +00:00
.v-application--wrap {
2019-07-01 02:37:01 +00:00
padding-top: 10vh;
2019-08-04 02:51:29 +00:00
background-color: darken(mc('grey', '900'), 5%);
2019-07-01 02:37:01 +00:00
background-image: url(/svg/motif-circuit.svg) !important;
background-repeat: repeat;
}
2019-07-01 02:37:01 +00:00
&-logo {
width: 300px;
margin: 3rem 0 2rem 0;
}
}
</style>