wiki/server/views/setup.pug

extends master.pug

block body
  body
    #app.setup
      setup(inline-template)
        div
          .container
            .content(v-cloak)

              //- ==============================================
              //- WELCOME
              //- ==============================================

              template(v-if='state === "welcome"')
                .panel
                  h2.panel-title.is-featured
                    span Welcome!
                    i(v-if='loading')
                  .panel-content.is-text
                    .welcome
                      img(src='svg/logo-wikijs.svg', alt='Wiki.js Logo')
                      h2 A modern, lightweight and powerful wiki app built on NodeJS, Git and Markdown
                    p This installation wizard will guide you through the steps needed to get your wiki up and running in no time!
                    p 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].
                  .panel-content.form-sections
                    section
                      p
                        svg.icons.is-18.is-outlined.has-right-pad.is-text: use(xlink:href='#nc-cd-reader')
                        span You are about to install Wiki.js #[strong= packageObj.version].
                    section
                      p.control.is-fullwidth
                        input#ipt-telemetry(type='checkbox', v-model='conf.telemetry', name='ipt-telemetry')
                        label.label(for='ipt-telemetry') Allow Telemetry
                        span.desc Help Wiki.js developers improve this app with anonymized #[a(href='https://wiki.requarks.io/docs/telemetry') telemetry].
                      p.control.is-fullwidth
                        input#ipt-upgrade(type='checkbox', v-model='conf.upgrade', name='ipt-upgrade')
                        label.label(for='ipt-upgrade') Upgrade from Wiki.js 1.x
                        span.desc Check this box if you are upgrading from Wiki.js 1.x and wish to migrate your existing data.
                  .panel-footer
                    .progress-bar: div(v-bind:style='{width: currentProgress}')
                    button.button.is-small.is-light-blue(v-on:click='proceedToSyscheck', v-bind:disabled='loading') Start

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

              template(v-else-if='state === "syscheck"')
                .panel
                  h2.panel-title.is-featured
                    span Wiki.js
                    i(v-if='loading')
                  .panel-content.is-text
                    .is-logo
                      svg.icons.is-64: use(xlink:href='#nc-metrics')
                      h4 System Check
                    p(v-if='loading') #[svg.icons.is-24.is-text: use(xlink:href='#nc-ms-dots')] Checking your system for compatibility...
                    p(v-if='!loading && syscheck.ok')
                      ul
                        li(v-for='rs in syscheck.results') #[svg.icons.is-18.is-text: use(xlink:href='#nc-check-bold')] {{rs}}
                    p(v-if='!loading && syscheck.ok')
                      svg.icons.is-18.is-text: use(xlink:href='#nc-check-bold')
                      strong  Looks good! No issues so far.
                    p(v-if='!loading && !syscheck.ok') #[svg.icons.is-18.is-text: use(xlink:href='#nc-square-remove-12')] Error: {{ syscheck.error }}
                  .panel-footer
                    .progress-bar: div(v-bind:style='{width: currentProgress}')
                    button.button.is-small.is-light-blue.is-outlined(v-on:click='proceedToWelcome', v-bind:disabled='loading') Back
                    button.button.is-small.is-teal(v-on:click='proceedToSyscheck', v-if='!loading && !syscheck.ok') Check Again
                    button.button.is-small.is-red.is-outlined(v-on:click='proceedToGeneral', v-if='!loading && !syscheck.ok') Continue Anyway
                    button.button.is-small.is-light-blue(v-on:click='proceedToGeneral', v-if='loading || syscheck.ok', v-bind:disabled='loading') Continue

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

              template(v-else-if='state === "general"')
                .panel
                  h2.panel-title.is-featured
                    span Wiki.js
                    i(v-if='loading')
                  .panel-content.form-sections
                    section
                      .is-logo
                        svg.icons.is-64: use(xlink:href='#nc-webpage-2-2')
                        h4 General Information
                      p.control.is-fullwidth
                        label.label Site Title
                        input(type='text', placeholder='e.g. Wiki', v-model='conf.title', data-vv-scope='general', name='ipt-title', v-validate='{ required: true, min: 2 }')
                        span.desc The site title will appear in the top left corner on every page and within the window title bar.
                    section.columns
                      .column.is-half
                        p.control
                          label.label Site UI Language
                          select(v-model='conf.lang')
                            each lg in data.langs
                              option(value=lg.id)= lg.name
                          span.desc The language in which navigation, help and other UI elements will be displayed.
                      .column.is-half
                        p.control.is-fullwidth
                          label.label Site Relative URL Path
                          input(type='text', placeholder='/', v-model='conf.path', data-vv-scope='general', name='ipt-path', v-validate='{ required: true, min: 1 }')
                          span.desc The relative path to your wiki. Unless you configure a reverse proxy in front of Wiki.js to handle requests made to a sub-directory, #[strong it is recommended to leave the default value].
                    section.columns
                      .column.is-half
                        p.control
                          label.label Server Port
                          input(type='text', placeholder='e.g. 80', v-model.number='conf.port', data-vv-scope='general', name='ipt-port', v-validate='{ required: true }')
                          span.desc 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 #[strong $(PORT)] to use the PORT environment variable.
                      .column.is-half
                        p.control.is-fullwidth
                          input#ipt-public(type='checkbox', v-model='conf.public', data-vv-scope='general', name='ipt-public')
                          label.label(for='ipt-public') Public Access
                          span.desc Should the site be accessible (read only) without login.
                        p.control.is-fullwidth
                          input#ipt-selfregister(type='checkbox', v-model='conf.selfRegister', data-vv-scope='general', name='ipt-selfregister')
                          label.label(for='ipt-selfregister') Allow Self-Registration
                          span.desc Can users create their own account to gain access?
                    section
                      p.control.is-fullwidth
                        label.label Local Server Repository Path
                        input(type='text', placeholder='e.g. ./repo', v-model='conf.pathRepo', data-vv-scope='general', name='ipt-repopath', v-validate='{ required: true, min: 2 }')
                        span.desc The path where the local git repository will be created, used to store content in markdown files and uploads.#[br] #[strong It is recommended to leave the default value].
                  .panel-footer
                    .progress-bar: div(v-bind:style='{width: currentProgress}')
                    button.button.is-small.is-light-blue.is-outlined(v-on:click='proceedToSyscheck', v-bind:disabled='loading') Back
                    button.button.is-small.is-light-blue(v-on:click='proceedToConsiderations', v-bind:disabled='loading || errors.any("general")') Continue

              //- ==============================================
              //- CONSIDERATIONS
              //- ==============================================

              template(v-else-if='state === "considerations"')
                .panel
                  h2.panel-title.is-featured
                    span Wiki.js
                    i(v-if='loading')
                  .panel-content.is-text
                    .is-logo
                      svg.icons.is-64: use(xlink:href='#nc-radar')
                      h4 Important Considerations
                    h3 Is Wiki.js going to be behind a web server (e.g. nginx / apache / IIS) or proxy?
                    p
                      ul
                        li - Make sure the upload limit is sufficient. Most web servers have a low limit (e.g. 2 MB) by default.
                        li - Do not rewrite URLs after the domain. This can cause unexpected issues in Wiki.js navigation.
                        li - Do not remove or alter the client IP when proxying the requests. This can cause the authentication brute force protection to engage unexpectedly.
                    template(v-if='considerations.https')
                      h3 The site will not be using HTTPS? #[svg.icons.is-20.is-outlined.animated.fadeOut.infinite: use(xlink:href='#nc-alert')]
                      p The host URL you specified is not HTTPS. It is highly recommended to use HTTPS. You must use a web server / proxy (e.g. nginx / apache / IIS) in front of Wiki.js to use HTTPS. Wiki.js does not provide HTTPS handling by itself.
                    template(v-if='considerations.port')
                      h3 You are using a non-standard port.
                      p If you are not planning on using a web server / proxy in front of Wiki.js, be aware that users will need to specify the port when accessing the wiki. Make sure this is the intended behavior. Otherwise set a standard HTTP port such as 80.
                  .panel-footer
                    .progress-bar: div(v-bind:style='{width: currentProgress}')
                    button.button.is-small.is-light-blue.is-outlined(v-on:click='proceedToGeneral', v-bind:disabled='loading') Back
                    button.button.is-small.is-light-blue(v-on:click='proceedToGit', v-bind:disabled='loading') Continue

              //- ==============================================
              //- GIT
              //- ==============================================

              template(v-else-if='state === "git"')
                .panel
                  h2.panel-title.is-featured
                    span Wiki.js
                    i(v-if='loading')
                  .panel-content.is-text
                    .is-logo
                      img(src='svg/logo-git.svg', alt='Git Logo')
                      h4 Git Repository
                    p Wiki.js stores article content and uploads locally on disk. All content is then regularly kept in sync with a remote git repository. This acts a backup protection and provides history / revert features. While optional, it is <strong>HIGHLY</strong> recommended to setup the remote git repository connection.
                  .panel-content.form-sections
                    section.columns
                      .column.is-two-thirds
                        p.control.is-fullwidth
                          label.label Repository URL
                          input(type='text', placeholder='e.g. git@github.com/org/repo.git or https://github.com/org/repo', v-model='conf.gitUrl', data-vv-scope='git', name='ipt-giturl', v-validate='{ required: true, min: 5 }')
                          span.desc The full git repository URL to connect to.
                      .column
                        p.control.is-fullwidth
                          label.label Branch
                          input(type='text', placeholder='e.g. master', v-model='conf.gitBranch', data-vv-scope='git', name='ipt-gitbranch', v-validate='{ required: true, min: 2 }')
                          span.desc The git branch to use when synchronizing changes.
                    section.columns
                      .column.is-one-third
                        p.control.is-fullwidth
                          label.label Authentication
                          select(v-model='conf.gitAuthType')
                            option(value='ssh') SSH using Private Key file (recommended)
                            option(value='sshenv') SSH using Private Key in environment variable
                            option(value='sshdb') SSH using Private Key in database
                            option(value='basic') Basic Credentials
                          span.desc The authentication method used to connect to your remote Git repository.
                        p.control.is-fullwidth
                          input#ipt-git-verify-ssl(type='checkbox', v-model='conf.gitAuthSSL')
                          label.label(for='ipt-git-verify-ssl') Verify SSL
                      .column(v-show='conf.gitAuthType === "basic"')
                        p.control.is-fullwidth
                          label.label Username
                          input(type='text', v-model='conf.gitAuthUser')
                          span.desc The username for the remote git connection.
                      .column(v-show='conf.gitAuthType === "basic"')
                        p.control.is-fullwidth
                          label.label Password
                          input(type='password', v-model='conf.gitAuthPass')
                          span.desc The password for the remote git connection.
                      .column(v-show='conf.gitAuthType === "ssh"')
                        p.control.is-fullwidth
                          label.label Private Key location
                          input(type='text', placeholder='e.g. /etc/wiki/keys/git.pem', v-model='conf.gitAuthSSHKey')
                          span.desc The full path to the #[strong unencrypted] private key on disk.
                      .column(v-show='conf.gitAuthType === "sshenv"')
                        p.control.is-fullwidth
                          label.label Private Key Environment Variable
                          input(type='text', placeholder='e.g. GIT_PRIVATE_KEY', v-model='conf.gitAuthSSHKeyEnv')
                          span.desc The environment variable containing the private key.
                      .column(v-show='conf.gitAuthType === "sshdb"')
                        p.control.is-fullwidth
                          label.label Private Key Contents
                          textarea(v-model='conf.gitAuthSSHKeyDB')
                          span.desc Paste the contents of the private key in the above field
                    section.columns
                      .column.is-one-third
                        p.control.is-fullwidth
                          input#ipt-git-show-user-email(type='checkbox', v-model='conf.gitShowUserEmail')
                          label.label(for='ipt-git-show-user-email') Commit using User Email
                          span.desc When enabled, commits are made as the current user name and email. If unchecked, the current user name will still be used but the default commit author email will be used instead.
                      .column
                        p.control.is-fullwidth
                          label.label Default Commit Author Email
                          input(type='text', placeholder='e.g. user@example.com', v-model.number='conf.gitServerEmail', data-vv-scope='git', name='ipt-gitsrvemail', v-validate='{ required: true, email: true }')
                          span.desc The default/fallback email to use when creating commits to the git repository.
                  .panel-footer
                    .progress-bar: div(v-bind:style='{width: currentProgress}')
                    button.button.is-small.is-light-blue.is-outlined(v-on:click='proceedToGeneral', v-bind:disabled='loading') Back
                    button.button.is-small.is-light-blue.is-outlined(v-on:click='conf.gitUseRemote = false; proceedToGitCheck()', v-bind:disabled='loading') Skip this step
                    button.button.is-small.is-light-blue(v-on:click='conf.gitUseRemote = true; proceedToGitCheck()', v-bind:disabled='loading || errors.any("git")') Continue
              
              //- ==============================================
              //- GIT CHECK
              //- ==============================================

              template(v-else-if='state === "gitcheck"')
                .panel
                  h2.panel-title.is-featured
                    span Wiki.js
                    i(v-if='loading')
                  .panel-content.is-text
                    .is-logo
                      img(src='svg/logo-git.svg', alt='Git Logo')
                      h4 Git Repository Check
                    p(v-if='loading') #[svg.icons.is-24.is-text: use(xlink:href='#nc-ms-dots')] Verifying Git repository settings...
                    p(v-if='!loading && gitcheck.ok')
                      ul
                        li(v-for='rs in gitcheck.results') #[svg.icons.is-18.is-text: use(xlink:href='#nc-check-bold')] {{rs}}
                    p(v-if='!loading && gitcheck.ok')
                      svg.icons.is-18.is-text: use(xlink:href='#nc-check-bold')
                      strong  Git settings are correct!
                    p(v-if='!loading && !gitcheck.ok') #[svg.icons.is-18.is-text: use(xlink:href='#nc-square-remove-12')] Error: {{ gitcheck.error }}
                  .panel-footer
                    .progress-bar: div(v-bind:style='{width: currentProgress}')
                    button.button.is-small.is-light-blue.is-outlined(v-on:click='proceedToGit', v-bind:disabled='loading') Back
                    button.button.is-small.is-teal(v-on:click='proceedToGitCheck', v-if='!loading && !gitcheck.ok') Try Again
                    button.button.is-small.is-light-blue(v-on:click='proceedToAdmin', v-if='loading || gitcheck.ok', v-bind:disabled='loading') Continue

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

              template(v-else-if='state === "admin"')
                .panel
                  h2.panel-title.is-featured
                    span Wiki.js
                    i(v-if='loading')
                  .panel-content.is-text
                    .is-logo
                      svg.icons.is-64: use(xlink:href='#nc-man-38')
                      h4 Administrator Account
                    p A root administrator account will be created for local authentication. From this account, you can create or authorize more users.
                  .panel-content.form-sections
                    section
                      p.control.is-fullwidth
                        label.label Administrator Email
                        input(type='text', placeholder='e.g. admin@example.com', v-model='conf.adminEmail', data-vv-scope='admin', name='ipt-adminemail', v-validate='{ required: true, email: true }')
                        span.desc The email address of the administrator account
                    section.columns
                      .column
                        p.control.is-fullwidth
                          label.label Password
                          input(type='password', v-model='conf.adminPassword', data-vv-scope='admin', name='ipt-adminpwd', v-validate='{ required: true, min: 8 }')
                          span.desc At least 8 characters long.
                      .column
                        p.control.is-fullwidth
                          label.label Confirm Password
                          input(type='password', v-model='conf.adminPasswordConfirm', data-vv-scope='admin', name='ipt-adminpwd2', v-validate='{ required: true, confirmed: "ipt-adminpwd" }')
                          span.desc Verify your password again.
                  .panel-footer
                    .progress-bar: div(v-bind:style='{width: currentProgress}')
                    button.button.is-small.is-light-blue.is-outlined(v-on:click='proceedToGit', v-bind:disabled='loading') Back
                    button.button.is-small.is-light-blue(v-on:click='proceedToUpgrade', v-bind:disabled='loading || errors.any("admin")') Continue
              
              //- ==============================================
              //- UPGRADE FROM 1.x
              //- ==============================================

              template(v-else-if='state === "upgrade"')
                .panel
                  h2.panel-title.is-featured
                    span Wiki.js
                    i(v-if='loading')
                  .panel-content.is-text
                    .is-logo
                      svg.icons.is-64: use(xlink:href='#nc-spaceship')
                      h4 Upgrade from Wiki.js 1.x
                    p Migrating from a Wiki.js 1.x installation is quick and simple.
                  .panel-content.form-sections
                    section
                      p.control.is-fullwidth
                        label.label Connection String to Wiki.js 1.x MongoDB database
                        input(type='text', placeholder='mongodb://', v-model='conf.upgMongo', data-vv-scope='upgrade', name='ipt-mongo', v-validate='{ required: true, min: 2 }')
                        span.desc A MongoDB database connection string where a Wiki.js 1.x installation is located. #[strong No alterations will be made to this database. ]
                  .panel-footer
                    .progress-bar: div(v-bind:style='{width: currentProgress}')
                    button.button.is-small.is-light-blue.is-outlined(v-on:click='proceedToAdmin', v-bind:disabled='loading') Back
                    button.button.is-small.is-light-blue(v-on:click='proceedToFinal', v-bind:disabled='loading || errors.any("general")') Continue

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

              template(v-else-if='state === "final"')
                .panel
                  h2.panel-title.is-featured
                    span Wiki.js
                    i(v-if='loading')
                  .panel-content.is-text
                    .is-logo(v-if='loading')
                      svg.icons.is-64: use(xlink:href='#nc-ms-dots')
                      h4 Finalizing your installation...
                    .is-logo(v-if='!loading && final.ok')
                      svg.icons.is-64: use(xlink:href='#nc-check-bold')
                      h4 All done!
                    p(v-if='!loading && final.ok'): strong Wiki.js was configured successfully and is now ready for use.
                    p(v-if='!loading && final.ok')
                      | Click the <strong>Start</strong> button below to launch your newly configured wiki.
                    p(v-if='!loading && !final.ok') #[svg.icons.is-18.is-text: use(xlink:href='#nc-square-remove-12')] Error: {{ final.error }}
                  .panel-footer
                    .progress-bar: div(v-bind:style='{width: currentProgress}')
                    button.button.is-small.is-light-blue.is-outlined(v-on:click='proceedToAdmin', v-bind:disabled='loading') Back
                    button.button.is-small.is-teal(v-on:click='proceedToFinal', v-if='!loading && !final.ok') Try Again
                    button.button.is-small.is-green(v-on:click='finish', v-if='loading || final.ok', v-bind:disabled='loading') Start

              //- ==============================================
              //- RESTART
              //- ==============================================

              template(v-else-if='state === "restart"')
                .panel
                  h2.panel-title.is-featured
                    span Restarting...
                    i
                  .panel-content.is-text
                    p #[i.icon-loader.animated.rotateIn.infinite] Restarting Wiki.js in normal mode...
                    p You'll automatically be redirected to the homepage when ready. This usually takes about 30 seconds.
                  .panel-footer
                    button.button.is-small.is-green(disabled='disabled') Start
          
          footer
            small Wiki.js Installation Wizard
            small(v-if='conf.telemetry') Telemetry Client ID: !{telemetryClientID}