diff --git a/client/js/app.js b/client/js/app.js index 52a99e4b..07f9366b 100644 --- a/client/js/app.js +++ b/client/js/app.js @@ -13,6 +13,7 @@ import { ApolloClient } from 'apollo-client' import { HttpLink } from 'apollo-link-http' import { InMemoryCache } from 'apollo-cache-inmemory' import store from './store' +import icons from '../svg/nc-icons.svg' // ==================================== // Load Modules @@ -165,4 +166,10 @@ document.addEventListener('DOMContentLoaded', ev => { } }) + + // ==================================== + // Load Icons + // ==================================== + + document.body.insertAdjacentHTML('beforeend', icons) }) diff --git a/client/js/components/config-manager.component.js b/client/js/components/config-manager.component.js index fa85ebed..fbb0f142 100644 --- a/client/js/components/config-manager.component.js +++ b/client/js/components/config-manager.component.js @@ -46,6 +46,7 @@ export default { gitAuthSSL: true, gitShowUserEmail: true, gitServerEmail: '', + mongo: 'mongodb://', adminEmail: '', adminPassword: '', adminPasswordConfirm: '' @@ -82,6 +83,9 @@ export default { case 'admin': perc = '75%' break + case 'upgrade': + perc = '85%' + break } return perc } @@ -195,6 +199,17 @@ export default { self.$validator.validateAll('admin') }) }, + proceedToUpgrade: function (ev) { + if (this.conf.upgrade) { + this.state = 'upgrade' + this.loading = false + this.$nextTick(() => { + this.$validator.validateAll('upgrade') + }) + } else { + this.proceedToFinal() + } + }, proceedToFinal: function (ev) { let self = this self.state = 'final' diff --git a/client/scss/app.scss b/client/scss/app.scss index ab58c08e..19e92481 100644 --- a/client/scss/app.scss +++ b/client/scss/app.scss @@ -7,6 +7,7 @@ $primary: 'indigo'; @import "base/reset"; @import "base/mixins"; @import "base/fonts"; +@import "base/icons"; @import "base/base"; @import "libs/animate"; @@ -45,6 +46,5 @@ $primary: 'indigo'; @import 'layout/_rtl'; @import 'pages/login'; -@import 'pages/welcome'; @import 'base/print'; diff --git a/client/scss/base/icons.scss b/client/scss/base/icons.scss new file mode 100644 index 00000000..4caaa870 --- /dev/null +++ b/client/scss/base/icons.scss @@ -0,0 +1,48 @@ +.icons { + display: inline-block; + color: mc('grey', '800'); + + &.is-text { + display: inline-block; + width: 1em; + height: 1em; + vertical-align: middle; + position: relative; + top: -0.0625em; + stroke: none; + fill: none; + } + + &.is-16 { + width: 16px; + height: 16px; + } + + &.is-18 { + width: 18px; + height: 18px; + } + + &.is-20 { + width: 20px; + height: 20px; + } + + &.is-24 { + width: 24px; + height: 24px; + } + + &.has-right-pad { + margin-right: .5rem; + } + + &.is-outlined { + stroke-width: 2px; + use { + fill: inherit; + stroke: mc('grey', '800'); + } + } + +} \ No newline at end of file diff --git a/client/scss/components/config-manager.scss b/client/scss/components/config-manager.scss index 8ee89d91..05a02239 100644 --- a/client/scss/components/config-manager.scss +++ b/client/scss/components/config-manager.scss @@ -1,11 +1,31 @@ .config-manager { + background-image: linear-gradient(to right, mc('indigo', '400'), mc('indigo', '600')); + width: 100%; + min-height: 100%; + padding-top: 1rem; + + &::before { + content: ''; + position: absolute; + background-image: url('../svg/login-bg.svg'); + background-position: center bottom; + background-size: cover; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + } + .welcome { text-align: center; - padding: 50px 0 15px 0; - color: mc('grey', '700'); + padding: 1rem 0 2rem 0; + border-bottom: 1px solid mc('indigo', '50'); + margin-bottom: 1rem; h2 { margin: 0; + color: mc('indigo', '700'); + font-weight: 500; } } @@ -14,30 +34,16 @@ display: inline-block; color: mc('indigo', '500') } - i.icon-check { + i.ui-1_check-simple { color: mc('green', '500') } - i.icon-square-cross { + i.ui-2_ban-bold { color: mc('red', '500') } i.icon-warning-outline { color: mc('orange', '500') } - .tst-welcome-leave-active, .tst-welcome-enter-active { - transition: all .5s; - overflow-y: hidden; - } - .tst-welcome-leave, .tst-welcome-enter-to { - opacity: 1; - max-height: 200px; - } - .tst-welcome-leave-to, .tst-welcome-enter { - opacity: 0; - max-height: 0; - padding-top: 0; - } - .progress-bar { width: 150px; height: 10px; diff --git a/client/scss/components/panel.scss b/client/scss/components/panel.scss index de90ac3e..b693ca53 100644 --- a/client/scss/components/panel.scss +++ b/client/scss/components/panel.scss @@ -32,8 +32,8 @@ &.is-featured { border-top-left-radius: 4px; border-top-right-radius: 4px; - background-color: mc($primary, '400'); - border-bottom-color: mc($primary, '500'); + background-color: mc('indigo', '400'); + border-bottom-color: mc('indigo', '500'); color: #FFF; > i::before { diff --git a/client/scss/configure.scss b/client/scss/configure.scss deleted file mode 100644 index af786b8d..00000000 --- a/client/scss/configure.scss +++ /dev/null @@ -1,81 +0,0 @@ -@charset "utf-8"; - -$primary: 'indigo'; - -@import "base/variables"; -@import "base/colors"; -@import "base/reset"; -@import "base/mixins"; -@import "base/fonts"; -@import "base/base"; - -@import "libs/animate"; - -@import 'components/button'; -@import 'components/footer'; -@import 'components/form'; -@import 'components/grid'; -@import 'components/modal'; -@import 'components/nav'; -@import 'components/panel'; -@import 'components/typography'; - -.welcome { - text-align: center; - padding: 50px 0 15px 0; - color: mc('grey', '700'); - - h2 { - margin: 0; - } - -} - -i.icon-loader { - display: inline-block; - color: mc('indigo', '500') -} -i.icon-check { - color: mc('green', '500') -} -i.icon-square-cross { - color: mc('red', '500') -} -i.icon-warning-outline { - color: mc('orange', '500') -} - -.tst-welcome-leave-active, .tst-welcome-enter-active { - transition: all .5s; - overflow-y: hidden; -} -.tst-welcome-leave, .tst-welcome-enter-to { - opacity: 1; - max-height: 200px; -} -.tst-welcome-leave-to, .tst-welcome-enter { - opacity: 0; - max-height: 0; - padding-top: 0; -} - -.progress-bar { - width: 150px; - height: 10px; - background-color: mc('indigo', '50'); - border:1px solid mc('indigo', '100'); - border-radius: 3px; - position: absolute; - left: 15px; - top: 21px; - padding: 1px; - - > div { - width: 5px; - height: 6px; - background-color: mc('indigo', '200'); - border-radius: 2px; - transition: all 1s ease; - } - -} diff --git a/client/scss/libs/animate.scss b/client/scss/libs/animate.scss index f8377f57..fd594779 100644 --- a/client/scss/libs/animate.scss +++ b/client/scss/libs/animate.scss @@ -3483,4 +3483,26 @@ .slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp; +} + +@keyframes spin { + from { + -webkit-transform-origin: center; + transform-origin: center; + -webkit-transform: rotate3d(0, 0, 1, -360deg); + transform: rotate3d(0, 0, 1, -360deg); + } + + to { + -webkit-transform-origin: center; + transform-origin: center; + -webkit-transform: none; + transform: none; + } +} + + +.spin { + -webkit-animation-name: spin; + animation-name: spin; } \ No newline at end of file diff --git a/client/scss/libs/nucleo-icons-license.txt b/client/scss/libs/nucleo-icons-license.txt new file mode 100644 index 00000000..a4c7cd61 --- /dev/null +++ b/client/scss/libs/nucleo-icons-license.txt @@ -0,0 +1,61 @@ +# Standard License - nucleoapp.com + +Github repo: https://github.com/NucleoApp/license-standard + +By purchasing Nucleo you are being granted a license to use Nucleo icons (including the custom Nucleo icons created through the Nucleo applications) for specific uses under certain conditions. + +You have rights to use Nucleo icons in unlimited personal and commercial projects for yourself or a client. Even if you don't renew the Basic license, you can still use the source files for as many projects as you want. + +For each project, you can use a maximum of 250 Nucleo icons (intended per unique style: for example if you're using the same icon in both the outline and glyph styles, or in 2 different sizes, you're using 2 icons). + +By purchasing Nucleo, you have the right to: + +- Use Nucleo icons in unlimited personal and commercial projects. +- Use Nucleo icons in application/website/print/mobile/logo design. +- Modify Nucleo icons to create you own icon variations. + +You don't have the right to: + +- Sublicense, resell, share, transfer, or otherwise redistribute Nucleo icons (even for free or within a more complex downloadable file). +- Use more than 250 Nucleo icons in a single project. +- Use Nucleo icons in a product that is directly competitive with Nucleo. + +## Freelance Projects & Contracted work +If you’re working on one or more projects for a client, you can share with your client a maximum of 250 Nucleo icons per project. You can’t share Nucleo source files, unless the client purchases a Nucleo license. + +If the End Product you (or the team you’ve been part of) have created for the client is a product offered for sale, and the Nucleo icons contribute to the core value of the product being sold/shared, your client will have to buy an Extended License. + +## End Product Users +If you're using Nucleo icons in apps, installable items or online products/services, there's no limit to the number of users/customers that can use the product you're developing (e.g. if you're developing a web application and you're using Nucleo icons throughout the design, there's no limit to the number of active users of the application). + +## Templates, Themes, UI Kits & Plugins +If you’re using Nucleo icons in templates, themes or plugins offered for sale, or for free, (e.g. UI kits, Wordpress Themes, HTML/CSS Templates), you can include up to 100 icons in the downloadable source files. This limitation applies to the icon fonts as well. + +The downloadable source file has to include [Nucleo license](https://github.com/NucleoApp/license-standard). No attribution or link back required, however any credit will be much appreciated. + +If Nucleo icons contribute to the core value of the template, theme or plugin sold/shared (e.g. a theme builder where users can browse Nucleo icons and pick the ones to include in their design), you will need an Extended License. + +## Open source projects +If you’re using Nucleo icons in open source projects, you can include up to 100 icons in the downloadable source files. This limitation applies to the icon fonts as well. + +The downloadable source file has to include [Nucleo license](https://github.com/NucleoApp/license-standard). No attribution or link back required, however any credit will be much appreciated. + +If Nucleo icons contribute to the core value of the open source project (e.g. a CMS where users can browse Nucleo icons and pick the ones to include in their design), you will need an Extended License. + +## Extended License +If you're interested in using Nucleo icons in items offered for sale (or for free) where the Nucleo icons contribute to the core value of the product being sold/shared, you will need an Extended License. + +By purchasing an Extended License, you’re also granted the right to: + +- Use up to 500 icons in a single project (the one you’re purchasing the Extended License for) if the users/customers can access Nucleo source files (e.g. Nucleo icons are stored in a folder inside the downloadable file). +- Use unlimited icons if the users/customers cannot access Nucleo source files (e.g. Nucleo icons are encrypted and user can only use icons throughout the application). + +The downloadable source file has to include [Nucleo Standard License](https://github.com/NucleoApp/license-standard), as well as Nucleo Extended License. + +Example of products offered for sale (or for free) where Nucleo contributes to the core value of the product being sold/shared: + +- Logo builder application that combines Nucleo icons to create a logo +- Theme builder where users can browse Nucleo icons and pick the ones to include in their design. +- Application used to create presentations, where users can pick Nucleo icons through the built-in presentation builder. + +If you’re still unclear about what is or isn’t allowed under this license, please contact us at info@nucleoapp.com. \ No newline at end of file diff --git a/client/scss/pages/_welcome.scss b/client/scss/pages/_welcome.scss deleted file mode 100644 index eb6b9f97..00000000 --- a/client/scss/pages/_welcome.scss +++ /dev/null @@ -1,15 +0,0 @@ -.welcome { - text-align: center; - padding: 50px 0; - color: mc('grey', '700'); - - h1 { - margin-top: 15px; - } - - h2 { - margin-top: 15px; - margin-bottom: 50px; - } - -} \ No newline at end of file diff --git a/client/svg/nc-icons.svg b/client/svg/nc-icons.svg new file mode 100644 index 00000000..24bb25a6 --- /dev/null +++ b/client/svg/nc-icons.svg @@ -0,0 +1 @@ +check simpleworld 2 webpage 2 square remove 12 spaceship settings preferences palette image home 52 dashboard 30 cloud download 95 cloud upload 96 code chat 33 man 23 cd reader check boldcircle ms dots \ No newline at end of file diff --git a/server/index.js b/server/index.js index 68b9e93d..897010a8 100644 --- a/server/index.js +++ b/server/index.js @@ -36,6 +36,13 @@ wiki.logger = require('./modules/logger').init() wiki.telemetry = require('./modules/telemetry').init() +process.on('unhandledRejection', (err) => { + wiki.telemetry.sendError(err) +}) +process.on('uncaughtException', (err) => { + wiki.telemetry.sendError(err) +}) + // ---------------------------------------- // Init DB // ---------------------------------------- diff --git a/server/views/configure/index.pug b/server/views/configure/index.pug index 91f940d7..974fb89b 100644 --- a/server/views/configure/index.pug +++ b/server/views/configure/index.pug @@ -6,10 +6,6 @@ block body config-manager(inline-template) div .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) //- ============================================== @@ -22,11 +18,16 @@ block body span Welcome! i(v-if='loading') .panel-content.is-text + .welcome + img(src='/images/logo.png', alt='Wiki.js') + 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 #[i.nc-icon-outline.tech_cd-reader] You are about to install Wiki.js #[strong= packageObj.version]. + 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') @@ -50,14 +51,14 @@ block body 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') #[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') #[i.icon-check] {{rs}} + 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') - i.icon-check + 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') #[i.icon-square-cross] Error: {{ syscheck.error }} + 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 @@ -128,7 +129,6 @@ block body 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') @@ -137,9 +137,6 @@ block body 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 @@ -221,14 +218,14 @@ block body 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') #[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') #[i.icon-check] {{rs}} + 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') - i.icon-check + svg.icons.is-18.is-text: use(xlink:href="#nc-check-bold") strong Git settings are correct! - p(v-if='!loading && !gitcheck.ok') #[i.icon-square-cross] Error: {{ gitcheck.error }} + 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 @@ -245,7 +242,7 @@ block body 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. + 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 @@ -266,7 +263,34 @@ block body .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 + 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 Upgrade from Wiki.js 1.x + i(v-if='loading') + .panel-content.is-text + 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.mongo', data-vv-scope='mongo', 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. ] + 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') Create groups based on individual permissions + span.desc User groups will be created based on existing users permissions. If multiple users have the exact same permission rules, they will be put in the same user group. + .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 @@ -307,5 +331,5 @@ block body button.button.is-small.is-green(disabled='disabled') Start .footer - small Wiki.js Configuration Manager + small Wiki.js Installation Wizard small(v-if='conf.telemetry') Telemetry Client ID: !{telemetryClientID} \ No newline at end of file diff --git a/tools/fuse.js b/tools/fuse.js index eb3e407d..c13d42af 100644 --- a/tools/fuse.js +++ b/tools/fuse.js @@ -100,6 +100,7 @@ globalTasks.then(() => { style: scssChain }), scssChain, + fsbx.RawPlugin(['.svg']), fsbx.BabelPlugin(babelrc), fsbx.JSONPlugin() ],