fix: add site url field to setup page

client/components/setup.vue

@@ -4,13 +4,13 @@
       v-container
         v-layout
           v-flex(xs12, lg6, offset-lg3)
-            v-card.radius-7.animated.fadeInUp
+            v-card.elevation-20.radius-7.animated.fadeInUp
               .text-center
                 img.setup-logo.animated.fadeInUp.wait-p2s(src='/svg/logo-wikijs-full.svg', alt='Wiki.js Logo')
               v-alert(v-model='error', type='error', icon='mdi-alert', tile, dismissible) {{ errorMessage }}
-              v-alert(v-if='!error', tile, color='indigo lighten-5', :value='true')
-                v-icon.mr-3(color='indigo') mdi-package-variant
-                span.indigo--text You are about to install Wiki.js #[strong {{wikiVersion}}].
+              v-alert(v-if='!error', tile, color='blue lighten-5', :value='true')
+                v-icon.mr-3(color='blue') mdi-package-variant
+                span.blue--text You are about to install Wiki.js #[strong {{wikiVersion}}].
               v-card-text
                 .overline.pl-3 Administrator Account
                 v-container.pa-3.mt-3(grid-list-xl)
@@ -50,16 +50,29 @@
                         :type="pwdConfirmMode ? 'password' : 'text'"
                         hint='Verify your password again.',
                         persistent-hint
-                        @keyup.enter='install'
                       )
                 v-divider.mb-4
-                v-checkbox.ml-3(
+                .overline.pl-3.mb-5 Site URL
+                v-text-field.mb-4.mx-3(
+                  outlined
+                  ref='adminSiteUrl',
+                  v-model='conf.siteUrl',
+                  label='Site URL',
+                  hint='Full URL to your wiki, without the trailing slash (e.g. https://wiki.example.com). This should be the public facing URL, not the internal one if using a reverse-proxy.',
+                  persistent-hint
+                  @keyup.enter='install'
+                )
+                v-divider.mb-4
+                .overline.pl-3.mb-3 Telemetry
+                v-switch.ml-3(
+                  inset
                   color='primary',
                   v-model='conf.telemetry',
                   label='Allow Telemetry',
                   persistent-hint,
                   hint='Help Wiki.js developers improve this app with anonymized telemetry.'
                 )
+                a.pl-3(style='font-size: 12px; letter-spacing: initial;', href='https://docs.requarks.io/telemetry', target='_blank') Learn more
               v-divider.mt-2
               v-card-actions
                 v-btn(color='primary', @click='install', :disabled='loading', x-large, depressed, block)
@@ -108,6 +121,7 @@ export default {
         adminEmail: '',
         adminPassword: '',
         adminPasswordConfirm: '',
+        siteUrl: 'https://wiki.yourdomain.com',
         telemetry: true
       },
       pwdMode: true,
@@ -141,6 +155,21 @@ export default {
         },
         adminPasswordConfirm: {
           equality: 'adminPassword'
+        },
+        siteUrl: {
+          presence: {
+            allowEmpty: false
+          },
+          url: {
+            schemes: ['http', 'https'],
+            allowLocal: true,
+            allowDataUrl: false
+          },
+          format: {
+            pattern: '^(?!.*/$).*$',
+            flags: 'i',
+            message: 'must not have a trailing slash'
+          }
         }
       }, {
         format: 'flat'
@@ -193,9 +222,33 @@ export default {
 .setup {
   .v-application--wrap {
     padding-top: 10vh;
-    background-color: darken(mc('grey', '900'), 5%);
-    background-image: url(/svg/motif-circuit.svg) !important;
-    background-repeat: repeat;
+    background-color: #111;
+    background-image: linear-gradient(45deg, mc('blue', '100'), mc('blue', '700'), mc('indigo', '900'));
+    background-blend-mode: exclusion;
+
+    &::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100vh;
+      z-index: 0;
+      background-color: transparent;
+      background-image: url(/svg/motif-grid.svg) !important;
+      background-size: 100px;
+      background-repeat: repeat;
+      animation: bg-anim 100s linear infinite;
+    }
+  }
+
+  @keyframes bg-anim {
+    0% {
+      background-position: 0 0;
+    }
+    100% {
+      background-position: 100% 100%;
+    }
   }
 
   &-logo {