feat: new login experience (#2139)

* feat: multiple auth instances

* fix: auth setup + strategy initialization

* feat: admin auth - add strategy

* feat: redirect on login - group setting

* feat: oauth2 generic - props definitions

* feat: new login UI (wip)

* feat: new login UI (wip)

* feat: admin security login settings

* feat: tabset editor indicators + print view improvements

* fix: code styling

client/components/editor/editor-markdown.vue

@@ -245,6 +245,7 @@ import mermaid from 'mermaid'
 
 // Helpers
 import katexHelper from './common/katex'
+import tabsetHelper from './markdown/tabset'
 
 // ========================================
 // INIT
@@ -433,6 +434,7 @@ export default {
       this.$store.set('editor/content', newContent)
       this.previewHTML = DOMPurify.sanitize(md.render(newContent))
       this.$nextTick(() => {
+        tabsetHelper.format()
         this.renderMermaidDiagrams()
         Prism.highlightAllUnder(this.$refs.editorPreview)
         Array.from(this.$refs.editorPreview.querySelectorAll('pre.line-numbers')).forEach(pre => pre.classList.add('prismjs'))
@@ -856,6 +858,44 @@ $editor-height-mobile: calc(100vh - 112px - 16px);
       p.line {
         overflow-wrap: break-word;
       }
+
+      .tabset {
+        background-color: mc('teal', '700');
+        color: mc('teal', '100') !important;
+        padding: 5px 12px;
+        font-size: 14px;
+        font-weight: 500;
+        border-radius: 5px 0 0 0;
+        font-style: italic;
+
+        &::after {
+          display: none;
+        }
+
+        &-header {
+          background-color: mc('teal', '500');
+          color: #FFF !important;
+          padding: 5px 12px;
+          font-size: 14px;
+          font-weight: 500;
+          margin-top: 0 !important;
+
+          &::after {
+            display: none;
+          }
+        }
+
+        &-content {
+          border-left: 5px solid mc('teal', '500');
+          background-color: mc('teal', '50');
+          padding: 0 15px 15px;
+          overflow: hidden;
+
+          @at-root .theme--dark & {
+            background-color: rgba(mc('teal', '500'), .1);
+          }
+        }
+      }
     }
   }
 

client/components/editor/markdown/tabset.js

@@ -0,0 +1,16 @@
+import cash from 'cash-dom'
+import _ from 'lodash'
+
+export default {
+  format () {
+    for (let i = 1; i < 6; i++) {
+      cash(`.editor-markdown-preview-content h${i}.tabset`).each((idx, elm) => {
+        elm.innerHTML = 'Tabset ( rendered upon saving )'
+        cash(elm).nextUntil(_.times(i, t => `h${t + 1}`).join(', '), `h${i + 1}`).each((hidx, hd) => {
+          hd.classList.add('tabset-header')
+          cash(hd).nextUntil(_.times(i + 1, t => `h${t + 1}`).join(', ')).wrapAll('<div class="tabset-content"></div>')
+        })
+      })
+    }
+  }
+}