feat: Integrate new svg icons set + config wiz UI improvements

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)
 })

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'

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';

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');
+    }
+  }
+
+}

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;

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 {

client/scss/configure.scss

@@ -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;
-  }
-
-}

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;
 }

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.

client/scss/pages/_welcome.scss

@@ -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;
-	}
-
-}

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
 // ----------------------------------------

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}

tools/fuse.js

@@ -100,6 +100,7 @@ globalTasks.then(() => {
         style: scssChain
       }),
       scssChain,
+      fsbx.RawPlugin(['.svg']),
       fsbx.BabelPlugin(babelrc),
       fsbx.JSONPlugin()
     ],