init

.gitignore

@@ -0,0 +1,28 @@
+# Node Modules
+node_modules
+
+# Local ENV files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor Directories/Files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+.DS_Store
+
+yarn.lock
+
+# Custom
+.env
+config/config.json

package.json

@@ -0,0 +1,41 @@
+{
+  "name": "jays-host",
+  "version": "1.0.0",
+  "description": "A ShareX photo gallery.",
+  "main": "index.js",
+  "scripts": {
+    "serve": "nodemon --ignore ./ui/"
+  },
+  "author": "Troplo",
+  "license": "Internal use only.",
+  "private": true,
+  "dependencies": {
+    "@discordjs/rest": "^0.1.0-canary.0",
+    "axios": "^0.21.1",
+    "bcryptjs": "^2.4.3",
+    "body-parser": "^1.19.0",
+    "btcpay": "^0.2.5",
+    "btoa": "^1.2.1",
+    "cloudflare": "^2.8.0",
+    "cors": "^2.8.5",
+    "crypto-random-string": "3.3.1",
+    "discord.js": "^13.1.0",
+    "dotenv": "^10.0.0",
+    "express": "^4.17.1",
+    "express-autosanitizer": "^1.0.2",
+    "form-data": "^4.0.0",
+    "helmet": "^4.6.0",
+    "is-valid-domain": "^0.1.2",
+    "jsonwebtoken": "^8.5.1",
+    "jw-paginate": "^1.0.4",
+    "microstats": "^0.1.2",
+    "moment": "^2.29.1",
+    "multer": "^1.4.2",
+    "mysql2": "^2.2.5",
+    "nodemon": "^2.0.12",
+    "sequelize": "^6.6.5",
+    "sequelize-cli": "^6.2.0",
+    "speakeasy": "^2.0.0",
+    "whois": "^2.13.5"
+  }
+}

ui/.browserslistrc

@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not dead

ui/.eslintrc.js

@@ -0,0 +1,17 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true
+  },
+  'extends': [
+    'plugin:vue/essential',
+    'eslint:recommended'
+  ],
+  parserOptions: {
+    parser: 'babel-eslint'
+  },
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
+  }
+}

ui/.gitignore

@@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

ui/README.md

@@ -0,0 +1,24 @@
+# ui
+
+## Project setup
+```
+yarn install
+```
+
+### Compiles and hot-reloads for development
+```
+yarn serve
+```
+
+### Compiles and minifies for production
+```
+yarn build
+```
+
+### Lints and fixes files
+```
+yarn lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

ui/babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}

ui/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "ui",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint",
+    "postinstall": "patch-package"
+  },
+  "dependencies": {
+    "core-js": "^3.6.5",
+    "patch-package": "^6.4.7",
+    "register-service-worker": "^1.7.1",
+    "vue": "^2.6.11",
+    "vue-router": "^3.2.0",
+    "vuetify": "^2.4.0"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-plugin-pwa": "~4.5.0",
+    "@vue/cli-plugin-router": "~4.5.0",
+    "@vue/cli-service": "~4.5.0",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-vue": "^6.2.2",
+    "sass": "~1.32.0",
+    "sass-loader": "^10.0.0",
+    "vue-cli-plugin-vuetify": "~2.4.2",
+    "vue-template-compiler": "^2.6.11",
+    "vuetify-loader": "^1.7.0"
+  }
+}

ui/patches/vuetify+2.5.8.patch

@@ -0,0 +1,425 @@
+diff --git a/node_modules/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.sass b/node_modules/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.sass
+index ee4419a..6d1ba3d 100644
+--- a/node_modules/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.sass
++++ b/node_modules/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.sass
+@@ -9,7 +9,7 @@
+       background-color: map-get($material, 'dividers')
+ 
+   .v-divider
+-    border-color: map-get($material, 'dividers')
++    width: 0
+ 
+ // Block
+ .v-navigation-drawer
+diff --git a/node_modules/vuetify/src/styles/settings/_variables.scss b/node_modules/vuetify/src/styles/settings/_variables.scss
+index f5cc26b..6b998f1 100644
+--- a/node_modules/vuetify/src/styles/settings/_variables.scss
++++ b/node_modules/vuetify/src/styles/settings/_variables.scss
+@@ -2,23 +2,24 @@
+ 
+ $color-pack: true !default;
+ 
+-$body-font-family: 'Roboto', sans-serif !default;
++$body-font-family: 'Montserrat', sans-serif !default;
+ $font-size-root: 16px !default;
+ $line-height-root: 1.5 !default;
+ $border-radius-root: 4px !default;
+ 
+ $rounded: () !default;
+ $rounded: map-deep-merge(
+-  (
+-    0: 0,
+-    'sm': $border-radius-root / 2,
+-    null: $border-radius-root,
+-    'lg': $border-radius-root * 2,
+-    'xl': $border-radius-root * 6,
+-    'pill': 9999px,
+-    'circle': 50%
+-  ),
+-  $rounded
++                (
++                        0: 0,
++                        'sm': $border-radius-root / 2,
++                        null: $border-radius-root,
++                        'lg': $border-radius-root * 2,
++                        'xl': $border-radius-root * 3,
++                        'xxl': $border-radius-root * 6,
++                        'pill': 9999px,
++                        'circle': 50%
++                ),
++                $rounded
+ );
+ 
+ $spacer: 4px !default;
+@@ -39,14 +40,14 @@ $negative-spacers: () !default;
+ 
+ $grid-breakpoints: () !default;
+ $grid-breakpoints: map-deep-merge(
+-  (
+-    'xs': 0,
+-    'sm': 600px,
+-    'md': 960px,
+-    'lg': 1280px - 16px,
+-    'xl': 1920px - 16px
+-  ),
+-  $grid-breakpoints
++                (
++                        'xs': 0,
++                        'sm': 600px,
++                        'md': 960px,
++                        'lg': 1280px - 16px,
++                        'xl': 1920px - 16px
++                ),
++                $grid-breakpoints
+ );
+ 
+ $grid-gutter: $spacer * 6 !default;
+@@ -57,191 +58,191 @@ $container-padding-x: $grid-gutter / 2 !default;
+ 
+ $grid-gutters: () !default;
+ $grid-gutters: map-deep-merge(
+-  (
+-    'xs': $grid-gutter / 12,
+-    'sm': $grid-gutter / 6,
+-    'md': $grid-gutter / 3,
+-    'lg': $grid-gutter * 2/3,
+-    'xl': $grid-gutter
+-  ),
+-  $grid-gutters
++                (
++                        'xs': $grid-gutter / 12,
++                        'sm': $grid-gutter / 6,
++                        'md': $grid-gutter / 3,
++                        'lg': $grid-gutter * 2/3,
++                        'xl': $grid-gutter
++                ),
++                $grid-gutters
+ );
+ 
+ $container-max-widths: () !default;
+ $container-max-widths: map-deep-merge(
+-  (
+-    'md': map-get($grid-breakpoints, 'md') * 0.9375,
+-    'lg': map-get($grid-breakpoints, 'lg') * 0.9375,
+-    'xl': map-get($grid-breakpoints, 'xl') * 0.9375
+-  ),
+-  $container-max-widths
++                (
++                        'md': map-get($grid-breakpoints, 'md') * 0.9375,
++                        'lg': map-get($grid-breakpoints, 'lg') * 0.9375,
++                        'xl': map-get($grid-breakpoints, 'xl') * 0.9375
++                ),
++                $container-max-widths
+ );
+ 
+ $display-breakpoints: () !default;
+ $display-breakpoints: map-deep-merge(
+-  (
+-    'print-only': 'only print',
+-    'screen-only': 'only screen',
+-    'xs-only': 'only screen and (max-width: #{map-get($grid-breakpoints, 'sm') - 1})',
+-    'sm-only': 'only screen and (min-width: #{map-get($grid-breakpoints, 'sm')}) and (max-width: #{map-get($grid-breakpoints, 'md') - 1})',
+-    'sm-and-down': 'only screen and (max-width: #{map-get($grid-breakpoints, 'md') - 1})',
+-    'sm-and-up': 'only screen and (min-width: #{map-get($grid-breakpoints, 'sm')})',
+-    'md-only': 'only screen and (min-width: #{map-get($grid-breakpoints, 'md')}) and (max-width: #{map-get($grid-breakpoints, 'lg') - 1})',
+-    'md-and-down': 'only screen and (max-width: #{map-get($grid-breakpoints, 'lg') - 1})',
+-    'md-and-up': 'only screen and (min-width: #{map-get($grid-breakpoints, 'md')})',
+-    'lg-only': 'only screen and (min-width: #{map-get($grid-breakpoints, 'lg')}) and (max-width: #{map-get($grid-breakpoints, 'xl') - 1})',
+-    'lg-and-down': 'only screen and (max-width: #{map-get($grid-breakpoints, 'xl') - 1})',
+-    'lg-and-up': 'only screen and (min-width: #{map-get($grid-breakpoints, 'lg')})',
+-    'xl-only': 'only screen and (min-width: #{map-get($grid-breakpoints, 'xl')})'
+-  ),
+-  $display-breakpoints
++                (
++                        'print-only': 'only print',
++                        'screen-only': 'only screen',
++                        'xs-only': 'only screen and (max-width: #{map-get($grid-breakpoints, 'sm') - 1})',
++                        'sm-only': 'only screen and (min-width: #{map-get($grid-breakpoints, 'sm')}) and (max-width: #{map-get($grid-breakpoints, 'md') - 1})',
++                        'sm-and-down': 'only screen and (max-width: #{map-get($grid-breakpoints, 'md') - 1})',
++                        'sm-and-up': 'only screen and (min-width: #{map-get($grid-breakpoints, 'sm')})',
++                        'md-only': 'only screen and (min-width: #{map-get($grid-breakpoints, 'md')}) and (max-width: #{map-get($grid-breakpoints, 'lg') - 1})',
++                        'md-and-down': 'only screen and (max-width: #{map-get($grid-breakpoints, 'lg') - 1})',
++                        'md-and-up': 'only screen and (min-width: #{map-get($grid-breakpoints, 'md')})',
++                        'lg-only': 'only screen and (min-width: #{map-get($grid-breakpoints, 'lg')}) and (max-width: #{map-get($grid-breakpoints, 'xl') - 1})',
++                        'lg-and-down': 'only screen and (max-width: #{map-get($grid-breakpoints, 'xl') - 1})',
++                        'lg-and-up': 'only screen and (min-width: #{map-get($grid-breakpoints, 'lg')})',
++                        'xl-only': 'only screen and (min-width: #{map-get($grid-breakpoints, 'xl')})'
++                ),
++                $display-breakpoints
+ );
+ 
+ $font-weights: () !default;
+ $font-weights: map-deep-merge(
+-  (
+-    'thin': 100,
+-    'light': 300,
+-    'regular': 400,
+-    'medium': 500,
+-    'bold': 700,
+-    'black': 900
+-  ),
+-  $font-weights
++                (
++                        'thin': 100,
++                        'light': 300,
++                        'regular': 400,
++                        'medium': 500,
++                        'bold': 700,
++                        'black': 900
++                ),
++                $font-weights
+ );
+ 
+ $heading-font-family: $body-font-family !default;
+ 
+ $headings: () !default;
+ $headings: map-deep-merge(
+-  (
+-    'h1': (
+-      'size': 6rem,
+-      'weight': 300,
+-      'line-height': 6rem,
+-      'letter-spacing': -.015625em,
+-      'font-family': $heading-font-family,
+-      'text-transform': false
+-    ),
+-    'h2': (
+-      'size': 3.75rem,
+-      'weight': 300,
+-      'line-height': 3.75rem,
+-      'letter-spacing': -.0083333333em,
+-      'font-family': $heading-font-family,
+-      'text-transform': false
+-    ),
+-    'h3': (
+-      'size': 3rem,
+-      'weight': 400,
+-      'line-height': 3.125rem,
+-      'letter-spacing': normal,
+-      'font-family': $heading-font-family,
+-      'text-transform': false
+-    ),
+-    'h4': (
+-      'size': 2.125rem,
+-      'weight': 400,
+-      'line-height': 2.5rem,
+-      'letter-spacing': .0073529412em,
+-      'font-family': $heading-font-family,
+-      'text-transform': false
+-    ),
+-    'h5': (
+-      'size': 1.5rem,
+-      'weight': 400,
+-      'line-height': 2rem,
+-      'letter-spacing': normal,
+-      'font-family': $heading-font-family,
+-      'text-transform': false
+-    ),
+-    'h6': (
+-      'size': 1.25rem,
+-      'weight': 500,
+-      'line-height': 2rem,
+-      'letter-spacing': .0125em,
+-      'font-family': $heading-font-family,
+-      'text-transform': false
+-    ),
+-    'subtitle-1': (
+-      'size': 1rem,
+-      'weight': normal,
+-      'line-height': 1.75rem,
+-      'letter-spacing': .009375em,
+-      'font-family': $body-font-family,
+-      'text-transform': false
+-    ),
+-    'subtitle-2': (
+-      'size': .875rem,
+-      'weight': 500,
+-      'line-height': 1.375rem,
+-      'letter-spacing': .0071428571em,
+-      'font-family': $body-font-family,
+-      'text-transform': false
+-    ),
+-    'body-1': (
+-      'size': 1rem,
+-      'weight': 400,
+-      'line-height': 1.5rem,
+-      'letter-spacing': .03125em,
+-      'font-family': $body-font-family,
+-      'text-transform': false
+-    ),
+-    'body-2': (
+-      'size': .875rem,
+-      'weight': 400,
+-      'line-height': 1.25rem,
+-      'letter-spacing': .0178571429em,
+-      'font-family': $body-font-family,
+-      'text-transform': false
+-    ),
+-    'button': (
+-      'size': .875rem,
+-      'weight': 500,
+-      'line-height': 2.25rem,
+-      'letter-spacing': .0892857143em,
+-      'font-family': $body-font-family,
+-      'text-transform': uppercase
+-    ),
+-    'caption': (
+-      'size': .75rem,
+-      'weight': 400,
+-      'line-height': 1.25rem,
+-      'letter-spacing': .0333333333em,
+-      'font-family': $body-font-family,
+-      'text-transform': false
+-    ),
+-    'overline': (
+-      'size': .75rem,
+-      'weight': 500,
+-      'line-height': 2rem,
+-      'letter-spacing': .1666666667em,
+-      'font-family': $body-font-family,
+-      'text-transform': uppercase
+-    )
+-  ),
+-  $headings
++                (
++                        'h1': (
++                                'size': 6rem,
++                                'weight': 300,
++                                'line-height': 6rem,
++                                'letter-spacing': -.015625em,
++                                'font-family': $heading-font-family,
++                                'text-transform': false
++                        ),
++                        'h2': (
++                                'size': 3.75rem,
++                                'weight': 300,
++                                'line-height': 3.75rem,
++                                'letter-spacing': -.0083333333em,
++                                'font-family': $heading-font-family,
++                                'text-transform': false
++                        ),
++                        'h3': (
++                                'size': 3rem,
++                                'weight': 400,
++                                'line-height': 3.125rem,
++                                'letter-spacing': normal,
++                                'font-family': $heading-font-family,
++                                'text-transform': false
++                        ),
++                        'h4': (
++                                'size': 2.125rem,
++                                'weight': 400,
++                                'line-height': 2.5rem,
++                                'letter-spacing': .0073529412em,
++                                'font-family': $heading-font-family,
++                                'text-transform': false
++                        ),
++                        'h5': (
++                                'size': 1.5rem,
++                                'weight': 400,
++                                'line-height': 2rem,
++                                'letter-spacing': normal,
++                                'font-family': $heading-font-family,
++                                'text-transform': false
++                        ),
++                        'h6': (
++                                'size': 1.25rem,
++                                'weight': 500,
++                                'line-height': 2rem,
++                                'letter-spacing': .0125em,
++                                'font-family': $heading-font-family,
++                                'text-transform': false
++                        ),
++                        'subtitle-1': (
++                                'size': 1rem,
++                                'weight': normal,
++                                'line-height': 1.75rem,
++                                'letter-spacing': .009375em,
++                                'font-family': $body-font-family,
++                                'text-transform': false
++                        ),
++                        'subtitle-2': (
++                                'size': .875rem,
++                                'weight': 500,
++                                'line-height': 1.375rem,
++                                'letter-spacing': .0071428571em,
++                                'font-family': $body-font-family,
++                                'text-transform': false
++                        ),
++                        'body-1': (
++                                'size': 1rem,
++                                'weight': 400,
++                                'line-height': 1.5rem,
++                                'letter-spacing': .03125em,
++                                'font-family': $body-font-family,
++                                'text-transform': false
++                        ),
++                        'body-2': (
++                                'size': .875rem,
++                                'weight': 400,
++                                'line-height': 1.25rem,
++                                'letter-spacing': .0178571429em,
++                                'font-family': $body-font-family,
++                                'text-transform': false
++                        ),
++                        'button': (
++                                'size': .875rem,
++                                'weight': 500,
++                                'line-height': 2.25rem,
++                                'letter-spacing': .0892857143em,
++                                'font-family': $body-font-family,
++                                'text-transform': uppercase
++                        ),
++                        'caption': (
++                                'size': .75rem,
++                                'weight': 400,
++                                'line-height': 1.25rem,
++                                'letter-spacing': .0333333333em,
++                                'font-family': $body-font-family,
++                                'text-transform': false
++                        ),
++                        'overline': (
++                                'size': .75rem,
++                                'weight': 500,
++                                'line-height': 2rem,
++                                'letter-spacing': .1666666667em,
++                                'font-family': $body-font-family,
++                                'text-transform': uppercase
++                        )
++                ),
++                $headings
+ );
+ 
+ $typography: () !default;
+ @each $type, $values in $headings {
+   $typography: map-deep-merge(
+-    $typography,
+-    (#{$type}: map-values($values))
++                  $typography,
++                  (#{$type}: map-values($values))
+   );
+ }
+ 
+ $transition: () !default;
+ $transition: map-deep-merge(
+-  (
+-    'fast-out-slow-in': cubic-bezier(0.4, 0, 0.2, 1),
+-    'linear-out-slow-in': cubic-bezier(0, 0, 0.2, 1),
+-    'fast-out-linear-in': cubic-bezier(0.4, 0, 1, 1),
+-    'ease-in-out': cubic-bezier(0.4, 0, 0.6, 1),
+-    'fast-in-fast-out': cubic-bezier(0.25, 0.8, 0.25, 1),
+-    'swing': cubic-bezier(0.25, 0.8, 0.5, 1)
+-  ),
+-  $transition
++                (
++                        'fast-out-slow-in': cubic-bezier(0.4, 0, 0.2, 1),
++                        'linear-out-slow-in': cubic-bezier(0, 0, 0.2, 1),
++                        'fast-out-linear-in': cubic-bezier(0.4, 0, 1, 1),
++                        'ease-in-out': cubic-bezier(0.4, 0, 0.6, 1),
++                        'fast-in-fast-out': cubic-bezier(0.25, 0.8, 0.25, 1),
++                        'swing': cubic-bezier(0.25, 0.8, 0.5, 1)
++                ),
++                $transition
+ );
+ $primary-transition: 0.3s map-get($transition, 'swing') !default;
+ $secondary-transition: 0.2s map-get($transition, 'ease-in-out') !default;

ui/public/img/icons/safari-pinned-tab.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.00251 14.9297L0 1.07422H6.14651L8.00251 4.27503L9.84583 1.07422H16L8.00251 14.9297Z" fill="black"/>
+</svg>

ui/public/index.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

ui/public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow:

ui/src/App.vue

@@ -0,0 +1,21 @@
+<template>
+  <v-app>
+    <v-main>
+      <Header></Header>
+      <router-view/>
+    </v-main>
+  </v-app>
+</template>
+
+<script>
+import Header from './components/Header.vue'
+export default {
+  name: 'App',
+  components: {
+    Header
+  },
+  data: () => ({
+    //
+  }),
+};
+</script>

ui/src/assets/logo.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.5 100"><defs><style>.cls-1{fill:#1697f6;}.cls-2{fill:#7bc6ff;}.cls-3{fill:#1867c0;}.cls-4{fill:#aeddff;}</style></defs><title>Artboard 46</title><polyline class="cls-1" points="43.75 0 23.31 0 43.75 48.32"/><polygon class="cls-2" points="43.75 62.5 43.75 100 0 14.58 22.92 14.58 43.75 62.5"/><polyline class="cls-3" points="43.75 0 64.19 0 43.75 48.32"/><polygon class="cls-4" points="64.58 14.58 87.5 14.58 43.75 100 43.75 62.5 64.58 14.58"/></svg>

ui/src/components/Header.vue

@@ -0,0 +1,52 @@
+<template>
+  <div id="header">
+    <v-navigation-drawer
+        floating
+        color="#1c1c1c"
+        app
+        expand>
+      <v-divider></v-divider>
+      <v-list nav dense>
+        <v-list>
+          <v-list>
+            <v-list-item
+                v-for="item in items"
+                :key="item.id"
+                link
+                :to="item.path"
+            >
+              <v-list-item-icon>
+                <v-icon>{{ item.icon }}</v-icon>
+              </v-list-item-icon>
+
+              <v-list-item-content>
+                <v-list-item-title>{{ item.title }}</v-list-item-title>
+              </v-list-item-content>
+            </v-list-item>
+          </v-list>
+        </v-list>
+      </v-list>
+    </v-navigation-drawer>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Header",
+  data() {
+    return {
+      items: [
+        {id: 1, title: "Home", icon: "mdi-home", path: "/"},
+        {id: 1, title: "Watch_Dogs Tools", icon: "mdi-nexus", path: "/"}
+      ]
+    }
+  },
+  mounted() {
+    this.$vuetify.theme = { dark: true }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

ui/src/components/HelloWorld.vue

@@ -0,0 +1,151 @@
+<template>
+  <v-container>
+    <v-row class="text-center">
+      <v-col cols="12">
+        <v-img
+          :src="require('../assets/logo.svg')"
+          class="my-3"
+          contain
+          height="200"
+        />
+      </v-col>
+
+      <v-col class="mb-4">
+        <h1 class="display-2 font-weight-bold mb-3">
+          Welcome to Vuetify
+        </h1>
+
+        <p class="subheading font-weight-regular">
+          For help and collaboration with other Vuetify developers,
+          <br>please join our online
+          <a
+            href="https://community.vuetifyjs.com"
+            target="_blank"
+          >Discord Community</a>
+        </p>
+      </v-col>
+
+      <v-col
+        class="mb-5"
+        cols="12"
+      >
+        <h2 class="headline font-weight-bold mb-3">
+          What's next?
+        </h2>
+
+        <v-row justify="center">
+          <a
+            v-for="(next, i) in whatsNext"
+            :key="i"
+            :href="next.href"
+            class="subheading mx-3"
+            target="_blank"
+          >
+            {{ next.text }}
+          </a>
+        </v-row>
+      </v-col>
+
+      <v-col
+        class="mb-5"
+        cols="12"
+      >
+        <h2 class="headline font-weight-bold mb-3">
+          Important Links
+        </h2>
+
+        <v-row justify="center">
+          <a
+            v-for="(link, i) in importantLinks"
+            :key="i"
+            :href="link.href"
+            class="subheading mx-3"
+            target="_blank"
+          >
+            {{ link.text }}
+          </a>
+        </v-row>
+      </v-col>
+
+      <v-col
+        class="mb-5"
+        cols="12"
+      >
+        <h2 class="headline font-weight-bold mb-3">
+          Ecosystem
+        </h2>
+
+        <v-row justify="center">
+          <a
+            v-for="(eco, i) in ecosystem"
+            :key="i"
+            :href="eco.href"
+            class="subheading mx-3"
+            target="_blank"
+          >
+            {{ eco.text }}
+          </a>
+        </v-row>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+  export default {
+    name: 'HelloWorld',
+
+    data: () => ({
+      ecosystem: [
+        {
+          text: 'vuetify-loader',
+          href: 'https://github.com/vuetifyjs/vuetify-loader',
+        },
+        {
+          text: 'github',
+          href: 'https://github.com/vuetifyjs/vuetify',
+        },
+        {
+          text: 'awesome-vuetify',
+          href: 'https://github.com/vuetifyjs/awesome-vuetify',
+        },
+      ],
+      importantLinks: [
+        {
+          text: 'Documentation',
+          href: 'https://vuetifyjs.com',
+        },
+        {
+          text: 'Chat',
+          href: 'https://community.vuetifyjs.com',
+        },
+        {
+          text: 'Made with Vuetify',
+          href: 'https://madewithvuejs.com/vuetify',
+        },
+        {
+          text: 'Twitter',
+          href: 'https://twitter.com/vuetifyjs',
+        },
+        {
+          text: 'Articles',
+          href: 'https://medium.com/vuetify',
+        },
+      ],
+      whatsNext: [
+        {
+          text: 'Explore components',
+          href: 'https://vuetifyjs.com/components/api-explorer',
+        },
+        {
+          text: 'Select a layout',
+          href: 'https://vuetifyjs.com/getting-started/pre-made-layouts',
+        },
+        {
+          text: 'Frequently Asked Questions',
+          href: 'https://vuetifyjs.com/getting-started/frequently-asked-questions',
+        },
+      ],
+    }),
+  }
+</script>

ui/src/main.js

@@ -0,0 +1,13 @@
+import Vue from 'vue'
+import App from './App.vue'
+import './registerServiceWorker'
+import router from './router'
+import vuetify from './plugins/vuetify'
+
+Vue.config.productionTip = false
+
+new Vue({
+  router,
+  vuetify,
+  render: h => h(App)
+}).$mount('#app')

ui/src/plugins/vuetify.js

@@ -0,0 +1,24 @@
+import Vue from 'vue'
+import Vuetify from 'vuetify/lib/framework'
+import colors from "vuetify/es5/util/colors";
+
+Vue.use(Vuetify)
+
+export default new Vuetify({
+    theme: {
+        themes: {
+            light: {
+                primary: colors.blue.lighten3,
+                secondary: colors.grey.darken1,
+                accent: colors.shades.black,
+                error: colors.red.accent3,
+                text: "#000000"
+            },
+            dark: {
+                primary: colors.blue,
+                dark: "#1c1c1c",
+                text: "#ffffff"
+            },
+        },
+    }
+});

ui/src/registerServiceWorker.js

@@ -0,0 +1,32 @@
+/* eslint-disable no-console */
+
+import { register } from 'register-service-worker'
+
+if (process.env.NODE_ENV === 'production') {
+  register(`${process.env.BASE_URL}service-worker.js`, {
+    ready () {
+      console.log(
+        'App is being served from cache by a service worker.\n' +
+        'For more details, visit https://goo.gl/AFskqB'
+      )
+    },
+    registered () {
+      console.log('Service worker has been registered.')
+    },
+    cached () {
+      console.log('Content has been cached for offline use.')
+    },
+    updatefound () {
+      console.log('New content is downloading.')
+    },
+    updated () {
+      console.log('New content is available; please refresh.')
+    },
+    offline () {
+      console.log('No internet connection found. App is running in offline mode.')
+    },
+    error (error) {
+      console.error('Error during service worker registration:', error)
+    }
+  })
+}

ui/src/router/index.js

@@ -0,0 +1,27 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import Home from '../views/Home.vue'
+
+Vue.use(VueRouter)
+
+const routes = [
+  {
+    path: '/',
+    name: 'Home',
+    component: Home
+  },
+  {
+    path: '/about',
+    name: 'About',
+    // route level code-splitting
+    // this generates a separate chunk (about.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
+  }
+]
+
+const router = new VueRouter({
+  routes
+})
+
+export default router

ui/src/views/About.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="about">
+    <h1>This is an about page</h1>
+  </div>
+</template>

ui/src/views/Home.vue

@@ -0,0 +1,15 @@
+<template>
+  <hello-world />
+</template>
+
+<script>
+  import HelloWorld from '../components/HelloWorld'
+
+  export default {
+    name: 'Home',
+
+    components: {
+      HelloWorld,
+    },
+  }
+</script>

ui/vue.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  transpileDependencies: [
+    'vuetify'
+  ]
+}