From c4c1cf007b930f992f9dd8bca556b1b9e3eb93d1 Mon Sep 17 00:00:00 2001
From: Nicolas Giard <github@ngpixel.com>
Date: Mon, 13 Aug 2018 00:12:44 -0400
Subject: [PATCH] feat: xterm + UI fixes

---
 .../admin/admin-logging-console.vue           | 83 ++++++++++++++++
 client/components/admin/admin-logging.vue     | 19 ++--
 client/components/common/nav-footer.vue       | 22 +++--
 client/components/common/nav-header.vue       | 54 +++++++++-
 client/components/editor.vue                  | 33 +++++--
 client/components/editor/editor-code.vue      | 98 +++++++++----------
 client/components/login.vue                   |  2 +
 client/scss/app.scss                          |  1 +
 package.json                                  |  3 +-
 .../modules/authentication/cas/definition.yml |  2 +-
 yarn.lock                                     |  4 +
 11 files changed, 238 insertions(+), 83 deletions(-)
 create mode 100644 client/components/admin/admin-logging-console.vue

diff --git a/client/components/admin/admin-logging-console.vue b/client/components/admin/admin-logging-console.vue
new file mode 100644
index 00000000..489ceb15
--- /dev/null
+++ b/client/components/admin/admin-logging-console.vue
@@ -0,0 +1,83 @@
+<template lang='pug'>
+  v-dialog(v-model='isShown', width='90vw', max-width='1200')
+    .dialog-header
+      span Live Console
+      v-spacer
+      .caption.blue--text.text--lighten-3.mr-3 Streaming...
+      v-progress-circular(
+        indeterminate
+        color='blue lighten-3'
+        :size='20'
+        :width='2'
+        )
+    .consoleTerm(ref='consoleContainer')
+    v-toolbar(flat, color='grey darken-3', dark)
+      v-spacer
+      v-btn(outline, @click='clear')
+        v-icon(left) cancel_presentation
+        span Clear
+      v-btn(outline, @click='close')
+        v-icon(left) close
+        span Close
+</template>
+
+<script>
+import _ from 'lodash'
+import { Terminal } from 'xterm'
+import * as fit from 'xterm/lib/addons/fit/fit'
+
+Terminal.applyAddon(fit)
+
+export default {
+  term: null,
+  props: {
+    value: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    isShown: {
+      get() { return this.value },
+      set(val) { this.$emit('input', val) }
+    }
+  },
+  watch: {
+    value(newValue, oldValue) {
+      if (newValue) {
+        _.delay(() => {
+          this.term = new Terminal()
+          this.term.open(this.$refs.consoleContainer)
+          this.term.writeln('Connecting to \x1B[1;3;31mconsole output\x1B[0m...')
+        }, 100)
+      } else {
+        this.term.dispose()
+        this.term = null
+      }
+    }
+  },
+  mounted() {
+    this.term = new Terminal()
+    this.term.open(this.$refs.consoleContainer)
+  },
+  methods: {
+    clear() {
+      this.term.clear()
+    },
+    close() {
+      this.isShown = false
+    }
+  }
+}
+</script>
+
+<style lang='scss'>
+
+.consoleTerm {
+  background-color: #000;
+  padding: 16px;
+  width: 100%;
+  height: 415px;
+}
+
+</style>
diff --git a/client/components/admin/admin-logging.vue b/client/components/admin/admin-logging.vue
index 13cee489..3905c0f3 100644
--- a/client/components/admin/admin-logging.vue
+++ b/client/components/admin/admin-logging.vue
@@ -25,7 +25,7 @@
             v-btn(color='primary')
               v-icon(left) chevron_right
               | Set Services
-            v-btn(color='black', dark)
+            v-btn(color='black', dark, @click='toggleConsole')
               v-icon(left) keyboard
               | View Console
             v-btn(color='black', dark)
@@ -45,21 +45,21 @@
               v-icon(left) chevron_right
               | Save Configuration
 
-    v-snackbar(
-      color='success'
-      top
-      v-model='refreshCompleted'
-    )
-      v-icon.mr-3(dark) cached
-      | List of logging services has been refreshed.
+    logging-console(v-model='showConsole')
 </template>
 
 <script>
 import _ from 'lodash'
 
+import LoggingConsole from './admin-logging-console.vue'
+
 export default {
+  components: {
+    LoggingConsole
+  },
   data() {
     return {
+      showConsole: false,
       services: [],
       selectedServices: ['console'],
       refreshCompleted: false
@@ -80,6 +80,9 @@ export default {
     async refresh() {
       await this.$apollo.queries.services.refetch()
       this.refreshCompleted = true
+    },
+    toggleConsole () {
+      this.showConsole = !this.showConsole
     }
   }
 }
diff --git a/client/components/common/nav-footer.vue b/client/components/common/nav-footer.vue
index 6ff7bd14..c4d6a94c 100644
--- a/client/components/common/nav-footer.vue
+++ b/client/components/common/nav-footer.vue
@@ -1,8 +1,8 @@
 <template lang="pug">
   v-footer.justify-center(:color='color', inset)
     .caption.grey--text.text--darken-1
-      span(v-if='company && company.length > 0') {{ $t('common:footer.copyright', { company: company, year: currentYear }) }} |&nbsp;
-      span {{ $t('common:footer.poweredBy') }} Wiki.js
+      span(v-if='company && company.length > 0') {{ $t('common:footer.copyright', { company: company, year: currentYear, interpolation: { escapeValue: false } }) }} |&nbsp;
+      span {{ $t('common:footer.poweredBy') }} #[a(href='https://wiki.js.org', ref='nofollow') Wiki.js]
 
     v-snackbar(
       :color='notification.style'
@@ -50,11 +50,21 @@ export default {
 </script>
 
 <style lang="scss">
-  .v-footer.altbg {
-    background: mc('theme', 'primary');
+  .v-footer {
+    a {
+      text-decoration: none;
+    }
+
+    &.altbg {
+      background: mc('theme', 'primary');
 
-    span {
-      color: mc('blue', '300');
+      span {
+        color: mc('blue', '300');
+      }
+
+      a {
+        color: mc('blue', '200');
+      }
     }
   }
 </style>
diff --git a/client/components/common/nav-header.vue b/client/components/common/nav-header.vue
index ed48e644..4accc103 100644
--- a/client/components/common/nav-header.vue
+++ b/client/components/common/nav-header.vue
@@ -1,5 +1,21 @@
 <template lang='pug'>
-  v-toolbar(color='black', dark, app, clipped-left, fixed, flat)
+  v-toolbar.nav-header(color='black', dark, app, clipped-left, fixed, flat, :extended='searchIsShown && $vuetify.breakpoint.smAndDown')
+    v-toolbar(color='deep-purple', flat, slot='extension', v-if='searchIsShown && $vuetify.breakpoint.smAndDown')
+      v-text-field(
+        ref='searchFieldMobile',
+        v-model='search',
+        clearable,
+        background-color='deep-purple'
+        color='white',
+        label='Search...',
+        single-line,
+        solo
+        flat
+        hide-details,
+        prepend-inner-icon='search',
+        :loading='searchIsLoading',
+        @keyup.enter='searchEnter'
+      )
     v-menu(open-on-hover, offset-y, bottom, left, min-width='250')
       v-toolbar-side-icon(slot='activator')
         v-icon view_module
@@ -32,9 +48,9 @@
         v-list-tile(avatar, @click='')
           v-list-tile-avatar: v-icon(color='blue-grey') burst_mode
           v-list-tile-content Images &amp; Files
-    v-toolbar-title.ml-2
+    v-toolbar-title(:class='{ "ml-2": $vuetify.breakpoint.mdAndUp, "ml-0": $vuetify.breakpoint.smAndDown }')
       span.subheading {{title}}
-    v-spacer
+    v-spacer(v-if='searchIsShown && $vuetify.breakpoint.mdAndUp')
     transition(name='navHeaderSearch')
       v-text-field(
         ref='searchField',
@@ -61,7 +77,11 @@
     .navHeaderLoading.mr-3
       v-progress-circular(indeterminate, color='blue', :size='22', :width='2' v-show='isLoading')
     slot(name='actions')
-    v-btn(v-if='searchIsShown && $vuetify.breakpoint.smAndDown', icon)
+    v-btn(
+      v-if='!hideSearch && $vuetify.breakpoint.smAndDown'
+      @click='searchToggle'
+      icon
+      )
       v-icon(color='grey') search
     v-tooltip(bottom)
       v-btn(icon, href='/a', slot='activator')
@@ -90,6 +110,7 @@
 
 <script>
 import { get } from 'vuex-pathify'
+import _ from 'lodash'
 
 export default {
   props: {
@@ -115,11 +136,19 @@ export default {
     title: get('site/title')
   },
   created() {
-    if (this.hideSearch || this.dense) {
+    if (this.hideSearch || this.dense || this.$vuetify.breakpoint.smAndDown) {
       this.searchIsShown = false
     }
   },
   methods: {
+    searchToggle() {
+      this.searchIsShown = !this.searchIsShown
+      if (this.searchIsShown) {
+        _.delay(() => {
+          this.$refs.searchFieldMobile.focus()
+        }, 200)
+      }
+    },
     searchEnter() {
       this.searchIsLoading = true
     },
@@ -146,6 +175,21 @@ export default {
 </script>
 
 <style lang='scss'>
+
+.nav-header {
+  .v-toolbar__extension {
+    padding: 0;
+
+    .v-toolbar__content {
+      padding: 0;
+    }
+    .v-text-field .v-input__prepend-inner {
+      padding: 0 14px 0 5px;
+      padding-right: 14px;
+    }
+  }
+}
+
 .navHeaderSearch {
   &-enter-active, &-leave-active {
     transition: opacity .25s ease, transform .25s ease;
diff --git a/client/components/editor.vue b/client/components/editor.vue
index 2391932e..b41a321c 100644
--- a/client/components/editor.vue
+++ b/client/components/editor.vue
@@ -2,16 +2,29 @@
   .editor
     nav-header(dense)
       template(slot='actions')
-        v-btn(outline, color='green', @click.native.stop='save')
-          v-icon(color='green', left) check
-          span.white--text(v-if='mode === "create"') {{ $t('common:actions.create') }}
-          span.white--text(v-else) {{ $t('common:actions.save') }}
-        v-btn(outline, color='red').mx-0
-          v-icon(color='red', left) close
-          span.white--text {{ $t('common:actions.discard') }}
-        v-btn(outline, color='blue', @click.native.stop='openModal(`properties`)', dark)
-          v-icon(left) sort_by_alpha
-          span.white--text {{ $t('editor:page') }}
+        v-btn(
+          outline
+          color='green'
+          @click.native.stop='save'
+          :class='{ "is-icon": $vuetify.breakpoint.mdAndDown }'
+          )
+          v-icon(color='green', :left='$vuetify.breakpoint.lgAndUp') check
+          span.white--text(v-if='$vuetify.breakpoint.lgAndUp') {{ mode === 'create' ? $t('common:actions.create') : $t('common:actions.save') }}
+        v-btn.mx-0(
+          outline
+          color='red'
+          :class='{ "is-icon": $vuetify.breakpoint.mdAndDown }'
+          )
+          v-icon(color='red', :left='$vuetify.breakpoint.lgAndUp') close
+          span.white--text(v-if='$vuetify.breakpoint.lgAndUp') {{ $t('common:actions.discard') }}
+        v-btn(
+          outline
+          color='blue'
+          @click.native.stop='openModal(`properties`)'
+          :class='{ "is-icon": $vuetify.breakpoint.mdAndDown }'
+          )
+          v-icon(color='blue', :left='$vuetify.breakpoint.lgAndUp') sort_by_alpha
+          span.white--text(v-if='$vuetify.breakpoint.lgAndUp') {{ $t('editor:page') }}
     v-content
       editor-code
       component(:is='currentModal')
diff --git a/client/components/editor/editor-code.vue b/client/components/editor/editor-code.vue
index c0ce43cf..68d9241e 100644
--- a/client/components/editor/editor-code.vue
+++ b/client/components/editor/editor-code.vue
@@ -1,58 +1,54 @@
 <template lang='pug'>
   .editor-code
     v-toolbar.editor-code-toolbar(dense, color='primary', dark)
-      v-btn(icon).mx-0
-        svg.icons.is-18(role='img')
-          title Bold
-          use(xlink:href='#fa-bold')
-      v-btn(icon).mx-0
-        svg.icons.is-18(role='img')
-          title Italic
-          use(xlink:href='#fa-italic')
-      v-btn(icon).mx-0
-        svg.icons.is-18(role='img')
-          title Strikethrough
-          use(xlink:href='#fa-strikethrough')
+      v-tooltip(top)
+        v-btn(icon, slot='activator').mx-0
+          v-icon format_bold
+        span Bold
+      v-tooltip(top)
+        v-btn(icon, slot='activator').mx-0
+          v-icon format_italic
+        span Italic
+      v-tooltip(top)
+        v-btn(icon, slot='activator').mx-0
+          v-icon format_strikethrough
+        span Strikethrough
       v-menu(offset-y, open-on-hover)
         v-btn(icon, slot='activator').mx-0
-          svg.icons.is-18(role='img')
-            title Heading
-            use(xlink:href='#fa-heading')
+          v-icon font_download
         v-list
           v-list-tile(v-for='(n, idx) in 6', @click='', :key='idx')
             v-list-tile-action
-              svg.icons.is-18(role='img')
-                title Heading {{n}}
-                use(xlink:href='#fa-heading')
+              v-icon font_download
             v-list-tile-title Heading {{n}}
-      v-btn(icon).mx-0
-        svg.icons.is-18(role='img')
-          title Blockquote
-          use(xlink:href='#fa-quote-left')
-      v-btn(icon).mx-0
-        svg.icons.is-18(role='img')
-          title Unordered List
-          use(xlink:href='#fa-list-ul')
-      v-btn(icon).mx-0
-        svg.icons.is-18(role='img')
-          title Ordered List
-          use(xlink:href='#fa-list-ol')
-      v-btn(icon).mx-0
-        svg.icons.is-18(role='img')
-          title Link
-          use(xlink:href='#fa-link')
-      v-btn(icon).mx-0
-        svg.icons.is-18(role='img')
-          title Inline Code
-          use(xlink:href='#fa-terminal')
-      v-btn(icon).mx-0
-        svg.icons.is-18(role='img')
-          title Code Block
-          use(xlink:href='#fa-code')
-      v-btn(icon).mx-0
-        svg.icons.is-18(role='img')
-          title Horizontal Bar
-          use(xlink:href='#fa-minus')
+      v-tooltip(top)
+        v-btn(icon, slot='activator').mx-0
+          v-icon format_quote
+        span Blockquote
+      v-tooltip(top)
+        v-btn(icon, slot='activator').mx-0
+          v-icon format_list_bulleted
+        span Unordered List
+      v-tooltip(top)
+        v-btn(icon, slot='activator').mx-0
+          v-icon format_list_numbered
+        span Ordered List
+      v-tooltip(top)
+        v-btn(icon, slot='activator').mx-0
+          v-icon insert_link
+        span Link
+      v-tooltip(top)
+        v-btn(icon, slot='activator').mx-0
+          v-icon space_bar
+        span Inline Code
+      v-tooltip(top)
+        v-btn(icon, slot='activator').mx-0
+          v-icon code
+        span Code Block
+      v-tooltip(top)
+        v-btn(icon, slot='activator').mx-0
+          v-icon remove
+        span Horizontal Bar
 
     .editor-code-main
       .editor-code-editor
@@ -361,13 +357,11 @@ export default {
     background-image: linear-gradient(to bottom, mc('blue', '700') 0%, mc('blue','800') 100%);
     color: #FFF;
 
-    @include until($tablet) {
-      justify-content: center;
-    }
+    .v-toolbar__content {
+      padding-left: 16px;
 
-    svg {
-      use {
-        color: #FFF;
+      @include until($tablet) {
+        padding-left: 8px;
       }
     }
   }
diff --git a/client/components/login.vue b/client/components/login.vue
index 7deca056..e1afc69c 100644
--- a/client/components/login.vue
+++ b/client/components/login.vue
@@ -265,6 +265,7 @@ export default {
       left: 0;
       width: 100vw;
       height: 25vh;
+      z-index: 1;
     }
 
     &-mascot {
@@ -289,6 +290,7 @@ export default {
       box-shadow: 0 14px 28px rgba(0,0,0,0.2);
       border-radius: 6px;
       animation: zoomIn .5s ease;
+      z-index: 2;
 
       &::after {
         position: absolute;
diff --git a/client/scss/app.scss b/client/scss/app.scss
index d9906c75..2621c4b0 100644
--- a/client/scss/app.scss
+++ b/client/scss/app.scss
@@ -14,6 +14,7 @@
 @import '../libs/prism/prism.css';
 @import '~vue-tour/dist/vue-tour.css';
 @import '~vue-status-indicator/styles.css';
+@import '~xterm/dist/xterm.css';
 // @import 'node_modules/diff2html/dist/diff2html.min';
 
 @import 'pages/welcome';
diff --git a/package.json b/package.json
index b1270001..40cab61f 100644
--- a/package.json
+++ b/package.json
@@ -254,7 +254,8 @@
     "webpack-hot-middleware": "2.22.3",
     "webpack-merge": "4.1.4",
     "whatwg-fetch": "2.0.4",
-    "write-file-webpack-plugin": "4.3.2"
+    "write-file-webpack-plugin": "4.3.2",
+    "xterm": "3.6.0"
   },
   "browserslist": [
     "> 1%",
diff --git a/server/modules/authentication/cas/definition.yml b/server/modules/authentication/cas/definition.yml
index 761971da..4a8f7ce5 100644
--- a/server/modules/authentication/cas/definition.yml
+++ b/server/modules/authentication/cas/definition.yml
@@ -3,7 +3,7 @@ title: CAS
 description: The Central Authentication Service (CAS) is a single sign-on protocol for the web.
 author: requarks.io
 logo: https://static.requarks.io/logo/cas.svg
-website: https://wiki.js.org
+website: https://apereo.github.io/cas/
 useForm: false
 props:
   ssoBaseURL: String
diff --git a/yarn.lock b/yarn.lock
index 4d1173a9..c0a287b3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -12983,6 +12983,10 @@ xtend@^4.0.0, xtend@~4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.1.tgz#a5c6d532be656e23db820efb943a1f04998d63af"
 
+xterm@3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/xterm/-/xterm-3.6.0.tgz#9b95cd23a338e5842343aec1a104f094c5153e7c"
+
 y18n@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-3.2.1.tgz#6d15fba884c08679c0d77e88e7759e811e07fa41"