wikijs/server/views/configure/index.pug

extends ../master.pug

block body
  body
    #app.config-manager
      config-manager(inline-template)
        .container
          transition(name='tst-welcome')
            .welcome(v-if='state === "welcome" || state === "restart"')
              img(src='/images/logo.png', alt='Wiki.js')
              h2 A modern, lightweight and powerful wiki app built on NodeJS, Git and Markdown
          .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
                  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 #[i.nc-icon-outline.tech_cd-reader] 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 System Check
                  i(v-if='loading')
                .panel-content.is-text
                  p(v-if='loading') #[i.icon-loader.animated.rotateIn.infinite] Checking your system for compatibility...
                  p(v-if='!loading && syscheck.ok')
                    ul
                      li(v-for='rs in syscheck.results') #[i.icon-check] {{rs}}
                  p(v-if='!loading && syscheck.ok')
                    i.icon-check
                    strong  Looks good! No issues so far.
                  p(v-if='!loading && !syscheck.ok') #[i.icon-square-cross] 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 General
                  i(v-if='loading')
                .panel-content.form-sections
                  section
                    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
                    p.control.is-fullwidth
                      label.label Host
                      input(type='text', placeholder='http://', v-model='conf.host', data-vv-scope='general', name='ipt-host', v-validate='{ required: true, min: 4 }')
                      span.desc The full URL to your wiki, without the trailing slash, e.g.: http://wiki.domain.com. Make sure to include the port if different than 80/443.
                  section
                    p.control
                      label.label 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.<br>Set <strong>$(PORT)</strong> to use PORT environment variable.
                  section
                    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.
                  section
                    p.control.is-fullwidth
                      label.label Local 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].
                  section
                    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.
                .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 Important Considerations
                  i(v-if='loading')
                .panel-content.is-text
                  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 - Make sure your web server is configured to allow web sockets. Wiki.js will fallback to standard XHR queries if not available.
                      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? #[i.nc-icon-outline.ui-3_alert.animated.fadeOut.infinite]
                    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.
                  template(v-if='considerations.localhost')
                    h3 Are you sure you want to use localhost as the host base URL? #[i.nc-icon-outline.ui-3_alert.animated.fadeOut.infinite]
                    p The host URL you specified is localhost. Unless you are a developer running Wiki.js locally on your machine, this is not recommended!
                .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 Git Repository
                  i(v-if='loading')
                .panel-content.is-text
                  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 (recommended)
                          option(value='basic') Basic
                        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 private key on disk.
                  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 Git Repository Check
                  i(v-if='loading')
                .panel-content.is-text
                  p(v-if='loading') #[i.icon-loader.animated.rotateIn.infinite] Verifying Git repository settings...
                  p(v-if='!loading && gitcheck.ok')
                    ul
                      li(v-for='rs in gitcheck.results') #[i.icon-check] {{rs}}
                  p(v-if='!loading && gitcheck.ok')
                    i.icon-check
                    strong  Git settings are correct!
                  p(v-if='!loading && !gitcheck.ok') #[i.icon-square-cross] 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 Administrator Account
                  i(v-if='loading')
                .panel-content.is-text
                  p An 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='proceedToFinal', v-bind:disabled='loading || errors.any("admin")') Continue

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

            template(v-else-if='state === "final"')
              .panel
                h2.panel-title.is-featured
                  span Finalizing
                  i(v-if='loading')
                .panel-content.is-text
                  p(v-if='loading') #[i.icon-loader.animated.rotateIn.infinite] Finalizing your installation...
                  p(v-if='!loading && final.ok')
                    i.icon-check
                    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 start the Wiki.js server.
                  p(v-if='!loading && !final.ok') #[i.icon-square-cross] 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