From 4f968cf230d97bee7124e663dfa7ec36e99e635b Mon Sep 17 00:00:00 2001
From: Nick <github@ngpixel.com>
Date: Sun, 30 Jun 2019 22:37:01 -0400
Subject: [PATCH] feat: simplified setup

---
 .../admin/admin-utilities-telemetry.vue       |   2 +-
 client/components/setup.vue                   | 387 ++++++------------
 server/setup.js                               |   2 +-
 3 files changed, 127 insertions(+), 264 deletions(-)

diff --git a/client/components/admin/admin-utilities-telemetry.vue b/client/components/admin/admin-utilities-telemetry.vue
index 853f356b..b6e0a902 100644
--- a/client/components/admin/admin-utilities-telemetry.vue
+++ b/client/components/admin/admin-utilities-telemetry.vue
@@ -31,7 +31,7 @@
             v-list-tile-content
               v-list-tile-title.body-1 Setup analytics
               v-list-tile-subtitle.caption: em Installation checkpoint reached
-        .body-1.pl-3 Note that any data collected is stored for a maximum of 180 days, after which it is permanently deleted.
+        .body-1.pl-3 Note that crash debug data is stored for a maximum of 30 days while analytics are stored for a maximum of 16 months, after which it is permanently deleted.
         v-divider.my-3
         v-subheader What is it used for?
         .body-1.pl-3 Telemetry is used by developers to improve Wiki.js, mostly for the following reasons:
diff --git a/client/components/setup.vue b/client/components/setup.vue
index fc14e50a..ea95850b 100644
--- a/client/components/setup.vue
+++ b/client/components/setup.vue
@@ -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
-          //- ==============================================
-          //- 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;')
-            .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://github.com/Requarks/wiki/issues') GitHub project].
-              .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.'
-                )
-
-          //- ==============================================
-          //- ADMINISTRATOR ACCOUNT
-          //- ==============================================
-
-          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
-
-          //- ==============================================
-          //- UPGRADE FROM 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
-
-          //- ==============================================
-          //- FINAL
-          //- ==============================================
-
-          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 = false
-            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: 10vh;
+    background-color: mc('grey', '900');
+    background-image: url(/svg/motif-circuit.svg) !important;
+    background-repeat: repeat;
+  }
 
+  &-logo {
+    width: 300px;
+    margin: 3rem 0 2rem 0;
+  }
+}
 </style>
diff --git a/server/setup.js b/server/setup.js
index 5aabb589..bc1e2865 100644
--- a/server/setup.js
+++ b/server/setup.js
@@ -349,7 +349,7 @@ module.exports = () => {
   // Start HTTP server
   // ----------------------------------------
 
-  WIKI.logger.info(`HTTP Server on port: [ ${WIKI.config.port} ]`)
+  WIKI.logger.info(`Starting HTTP server on port ${WIKI.config.port}...`)
 
   app.set('port', WIKI.config.port)