wiki/client/components/setup.vue

<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 Setup
      v-spacer
    v-content
      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')
            | System Check
            small Checking your system for compatibility
          v-divider
          v-stepper-step(step='3' :complete='state > 3')
            | General Information
            small Site Title, Language and Access
          v-divider
          v-stepper-step(step='4' :complete='state > 4')
            | Administration Account
            small Create the admin account
          v-divider(v-if='this.conf.upgrade')
          v-stepper-step(step='5' :complete='state > 5', 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 ? 6 : 5' :complete='this.conf.upgrade ? state > 5 : state > 6')
            | Final Steps
            small Finalizing your installation

        v-stepper-items
          //- ==============================================
          //- WELCOME
          //- ==============================================

          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;')
            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
                | Detailed information about installation and usage can be found on the #[a(href='https://wiki.requarks.io/docs') official documentation site].
                br
                | 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://github.com/Requarks/wiki/issues') GitHub project].
              .body-1.pt-3
                v-icon.mr-2 system_update
                span You are about to install Wiki.js #[strong {{wikiVersion}}].
              v-divider.mt-3
              v-form
                v-checkbox(
                  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',
                  persistent-hint,
                  hint='Check this box if you are upgrading from Wiki.js 1.x and wish to migrate your existing data.'
                )
            v-divider
            .pt-3.text-xs-center
              v-btn(color='primary', @click='proceedToSyscheck', :disabled='loading') Start

          //- ==============================================
          //- SYSTEM CHECK
          //- ==============================================

          v-stepper-content(step='2')
            v-card.text-xs-center(flat)
              svg.icons.is-64: use(xlink:href='#nc-metrics')
              .subheading System Check
            v-container
              v-layout(row, align-center, v-if='loading')
                v-progress-circular(v-if='loading', indeterminate, color='blue')
                .body-2.blue--text.ml-3 Checking your system for compatibility...
              v-alert(type='success', outline, :value='!loading && syscheck.ok') Looks good! No issues so far.
              v-alert(type='error', outline, :value='!loading && !syscheck.ok') {{ syscheck.error }}
              v-list.mt-3(two-line, v-if='!loading && syscheck.ok', dense)
                template(v-for='(rs, n) in syscheck.results')
                  v-divider(v-if='n > 0', inset)
                  v-list-tile
                    v-list-tile-avatar(color='green lighten-5')
                      v-icon(color='green') check
                    v-list-tile-content
                      v-list-tile-title {{rs.title}}
                      v-list-tile-sub-title {{rs.subtitle}}
            v-divider
            .pt-3.text-xs-center
              v-btn(@click='proceedToWelcome', :disabled='loading') Back
              v-btn(color='primary', @click='proceedToSyscheck', v-if='!loading && !syscheck.ok') Check Again
              v-btn(color='red', dark, @click='proceedToGeneral', v-if='!loading && !syscheck.ok') Continue Anyway
              v-btn(color='primary', @click='proceedToGeneral', v-if='loading || syscheck.ok', :disabled='loading') Continue

          //- ==============================================
          //- GENERAL
          //- ==============================================

          v-stepper-content(step='3')
            v-card.text-xs-center(flat)
              svg.icons.is-64: use(xlink:href='#nc-webpage')
              .subheading General Information
            v-form
              v-container
                v-layout(row, wrap)
                  v-flex(xs12, sm6).pr-3
                    v-text-field(
                      outline
                      background-color='grey lighten-2'
                      v-model='conf.title',
                      label='Site Title',
                      :counter='255',
                      persistent-hint,
                      hint='The site title will appear in the top left corner on every page and within the window title bar.',
                      v-validate='{ required: true, min: 2 }',
                      data-vv-name='siteTitle',
                      data-vv-as='Site Title',
                      data-vv-scope='general',
                      :error-messages='errors.collect(`siteTitle`)'
                    )
                  v-flex.pr-3(xs12, sm6)
                    v-text-field(
                      outline
                      background-color='grey lighten-2'
                      v-model='conf.port',
                      label='Server Port',
                      persistent-hint,
                      hint='The port on which Wiki.js will listen to. Usually port 80 if connecting directly, or a random port (e.g. 3000) if using a web server in front of it. Set $(PORT) to use the PORT environment variable.',
                      v-validate='{ required: true }',
                      data-vv-name='port',
                      data-vv-as='Port',
                      data-vv-scope='general',
                      :error-messages='errors.collect(`port`)'
                    )
                v-layout(row, wrap).mt-3
                  v-flex(xs12, sm6).pr-3
                    v-text-field(
                      outline
                      background-color='grey lighten-2'
                      v-model='conf.pathContent',
                      label='Content Data Path',
                      persistent-hint,
                      hint='The path where content is stored (markdown files, uploads, etc.)',
                      v-validate='{ required: true, min: 2 }',
                      data-vv-name='pathContent',
                      data-vv-as='Content Data Path',
                      data-vv-scope='general',
                      :error-messages='errors.collect(`pathContent`)'
                    )
                  v-flex(xs12, sm6)
                    v-text-field(
                      outline
                      background-color='grey lighten-2'
                      v-model='conf.pathData',
                      label='Temporary Data Path',
                      persistent-hint,
                      hint='The path where temporary data is stored (cache, thumbnails, temporary upload files, etc.)',
                      v-validate='{ required: true, min: 2 }',
                      data-vv-name='pathData',
                      data-vv-as='Temporary Data Path',
                      data-vv-scope='general',
                      :error-messages='errors.collect(`pathData`)'
                    )
                v-layout(row, wrap).mt-3
                  v-flex(xs12)
                    v-checkbox(
                      color='primary',
                      v-model='conf.public',
                      label='Public Access',
                      persistent-hint,
                      hint='Should the site be accessible (read only) without login.'
                    )
            v-divider
            .pt-3.text-xs-center
              v-btn(@click='proceedToSyscheck', :disabled='loading') Back
              v-btn(color='primary', @click='proceedToAdmin', :disabled='loading') Continue

          //- ==============================================
          //- ADMINISTRATOR ACCOUNT
          //- ==============================================

          v-stepper-content(step='4')
            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',
                      v-validate='{ required: true, email: true }',
                      data-vv-name='adminEmail',
                      data-vv-as='Administrator Email',
                      data-vv-scope='admin',
                      :error-messages='errors.collect(`adminEmail`)'
                    )
                  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'"
                      :append-icon-cb="() => (pwdMode = !pwdMode)"
                      :type="pwdMode ? 'password' : 'text'"
                      hint='At least 8 characters long.',
                      v-validate='{ required: true, min: 8 }',
                      data-vv-name='adminPassword',
                      data-vv-as='Password',
                      data-vv-scope='admin',
                      :error-messages='errors.collect(`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'"
                      :append-icon-cb="() => (pwdConfirmMode = !pwdConfirmMode)"
                      :type="pwdConfirmMode ? 'password' : 'text'"
                      hint='Verify your password again.',
                      v-validate='{ required: true, min: 8 }',
                      data-vv-name='adminPasswordConfirm',
                      data-vv-as='Confirm Password',
                      data-vv-scope='admin',
                      :error-messages='errors.collect(`adminPasswordConfirm`)'
                    )
              .pt-3.text-xs-center
                v-btn(@click='proceedToGeneral', :disabled='loading') Back
                v-btn(color='primary', @click='proceedToUpgrade', :disabled='loading') Continue

          //- ==============================================
          //- UPGRADE FROM 1.x
          //- ==============================================

          v-stepper-content(step='5', 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(`upgMongo`)'
                    )
            .pt-3.text-xs-center
              v-btn(@click='proceedToAdmin', :disabled='loading') Back
              v-btn(color='primary', @click='proceedToFinal', :disabled='loading') Continue

          //- ==============================================
          //- FINAL
          //- ==============================================

          v-stepper-content(:step='conf.upgrade ? 6 : 5')
            v-card.text-xs-center(flat)
              template(v-if='loading')
                .mt-3(style='width: 64px; display:inline-block;')
                  atom-spinner(
                    :animation-duration='800'
                    :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
      v-spacer
      .caption.grey--text(v-if='conf.telemetry') Telemetry Client ID: {{telemetryId}}
</template>

<script>

/* global siteConfig */

import axios from 'axios'
import _ from 'lodash'
import { AtomSpinner } from 'epic-spinners'

export default {
  components: {
    AtomSpinner
  },
  props: {
    telemetryId: {
      type: String,
      required: true
    },
    wikiVersion: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      loading: false,
      state: 1,
      syscheck: {
        ok: false,
        error: '',
        results: []
      },
      final: {
        ok: false,
        error: '',
        redirectUrl: ''
      },
      conf: {
        adminEmail: '',
        adminPassword: '',
        adminPasswordConfirm: '',
        lang: siteConfig.lang || 'en',
        pathData: './data',
        pathContent: './content',
        port: siteConfig.port || 80,
        public: (siteConfig.public === true),
        telemetry: true,
        title: siteConfig.title || 'Wiki',
        upgrade: false,
        upgMongo: 'mongodb://'
      },
      pwdMode: true,
      pwdConfirmMode: true
    }
  },
  methods: {
    proceedToWelcome () {
      this.state = 1
      this.loading = false
    },
    proceedToSyscheck () {
      let self = this
      this.state = 2
      this.loading = true
      this.syscheck = {
        ok: false,
        error: '',
        results: []
      }

      _.delay(() => {
        axios.post('/syscheck', self.conf).then(resp => {
          if (resp.data.ok === true) {
            self.syscheck.ok = true
            self.syscheck.results = resp.data.results
          } else {
            self.syscheck.ok = false
            self.syscheck.error = resp.data.error
          }
          self.loading = false
          self.$nextTick()
        }).catch(err => {
          window.alert(err.message)
        })
      }, 1000)
    },
    proceedToGeneral () {
      this.state = 3
      this.loading = false
    },
    async proceedToAdmin () {
      if (this.state < 4) {
        const validationSuccess = await this.$validator.validateAll('general')
        if (!validationSuccess) {
          this.state = 3
          return
        }
      }
      this.state = 4
      this.loading = false
    },
    async proceedToUpgrade () {
      if (this.state < 5) {
        const validationSuccess = await this.$validator.validateAll('admin')
        if (!validationSuccess || this.conf.adminPassword !== this.conf.adminPasswordConfirm) {
          this.state = 4
          return
        }
      }

      if (this.conf.upgrade) {
        this.state = 5
        this.loading = false
      } else {
        this.proceedToFinal()
      }
    },
    async proceedToFinal () {
      if (this.conf.upgrade && this.state < 6) {
        const validationSuccess = await this.$validator.validateAll('upgrade')
        if (!validationSuccess) {
          this.state = 5
          return
        }
      }

      this.state = this.conf.upgrade ? 6 : 5
      this.loading = true
      this.final = {
        ok: false,
        error: '',
        redirectUrl: ''
      }
      this.$forceUpdate()
      let self = this

      _.delay(() => {
        axios.post('/finalize', self.conf).then(resp => {
          if (resp.data.ok === true) {
            _.delay(() => {
              self.final.ok = true
              switch (resp.data.redirectPort) {
                case 80:
                  self.final.redirectUrl = `http://${window.location.hostname}${resp.data.redirectPath}/login`
                  break
                case 443:
                  self.final.redirectUrl = `https://${window.location.hostname}${resp.data.redirectPath}/login`
                  break
                default:
                  self.final.redirectUrl = `http://${window.location.hostname}:${resp.data.redirectPort}${resp.data.redirectPath}/login`
                  break
              }
              self.loading = false
            }, 5000)
          } else {
            self.final.ok = false
            self.final.error = resp.data.error
            self.loading = false
          }
          self.$nextTick()
        }).catch(err => {
          window.alert(err.message)
        })
      }, 1000)
    },
    finish () {
      window.location.assign(this.final.redirectUrl)
    }
  }
}

</script>

<style lang='scss'>

</style>