feat: storage extra metadata + user search fix

client/components/admin/admin-storage.vue

@@ -24,6 +24,12 @@
       v-tab-item(v-for='(tgt, n) in activeTargets', :key='tgt.key', :transition='false', :reverse-transition='false')
         v-card.pa-3(flat, tile)
           v-form
+            .targetlogo
+              img(:src='tgt.logo', :alt='tgt.title')
+            v-subheader.pl-0 {{tgt.title}}
+            .caption {{tgt.description}}
+            .caption: a(:href='tgt.website') {{tgt.website}}
+            v-divider.mt-3
             v-subheader.pl-0 Target Configuration
             .body-1.ml-3(v-if='!tgt.config || tgt.config.length < 1') This storage target has no configuration options you can modify.
             template(v-else, v-for='cfg in tgt.config')
@@ -163,6 +169,20 @@ export default {
 }
 </script>
 
-<style lang='scss'>
+<style lang='scss' scoped>
+
+.targetlogo {
+  width: 250px;
+  height: 85px;
+  float:right;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+
+  img {
+    max-width: 100%;
+    max-height: 50px;
+  }
+}
 
 </style>

client/components/admin/admin-theme.vue

@@ -39,6 +39,46 @@
                   v-btn(color='primary', :loading='loading', @click='save')
                     v-icon(left) chevron_right
                     span Save
+              v-card.mt-3
+                v-toolbar(color='primary', dark, dense, flat)
+                  v-toolbar-title
+                    .subheading Code Injection
+                v-card-text
+                  v-textarea(
+                    v-model='injectCSS'
+                    label='CSS Override'
+                    outline
+                    background-color='grey lighten-1'
+                    color='primary'
+                    persistent-hint
+                    hint='CSS code to inject after system default CSS'
+                    auto-grow
+                    )
+                  v-textarea.mt-2(
+                    v-model='injectHeader'
+                    label='Site Header'
+                    outline
+                    background-color='grey lighten-1'
+                    color='primary'
+                    persistent-hint
+                    hint='HTML code to be injected just before the closing head tag'
+                    auto-grow
+                    )
+                  v-textarea.mt-2(
+                    v-model='injectFooter'
+                    label='Site Footer'
+                    outline
+                    background-color='grey lighten-1'
+                    color='primary'
+                    persistent-hint
+                    hint='HTML code to be injected just before the closing body tag'
+                    auto-grow
+                    )
+                v-card-chin
+                  v-spacer
+                  v-btn(color='primary', :loading='loading', @click='save')
+                    v-icon(left) chevron_right
+                    span Save
             v-flex(lg6 xs12)
               v-card
                 v-toolbar(color='teal', dark, dense, flat)
@@ -61,7 +101,10 @@ export default {
         { text: 'Default', author: 'requarks.io', value: 'default' }
       ],
       selectedTheme: 'default',
-      darkModeInitial: false
+      darkModeInitial: false,
+      injectCSS: '',
+      injectHeader: '',
+      injectFooter: ''
     }
   },
   computed: {

client/components/common/user-search.vue

@@ -21,9 +21,10 @@
           label='Search Users...'
           v-model='search'
           prepend-icon='search'
-          :class='$vuetify.dark ? "grey darken-4" : "blue lighten-5"'
+          :background-color='$vuetify.dark ? "grey darken-4" : "blue lighten-5"'
           color='primary'
           ref='searchIpt'
+          hide-details
           )
         v-list(two-line)
           template(v-for='(usr, idx) in items')

client/components/setup.vue

@@ -286,14 +286,19 @@
           v-stepper-content(:step='conf.upgrade ? 6 : 5')
             v-card.text-xs-center(flat)
               template(v-if='loading')
-                v-progress-circular(size='64', indeterminate, color='blue')
-                .subheading Finalizing your installation...
+                .mt-3(style='width: 64px; display:inline-block;')
+                  atom-spinner(
+                    :animation-duration='800'
+                    :size='64'
+                    color='#1976d2'
+                    )
+                .subheading.primary--text.mt-3 Finalizing your installation...
               template(v-else-if='final.ok')
                 svg.icons.is-64: use(xlink:href='#nc-check-bold')
-                .subheading Installation complete!
+                .subheading.green--text Installation complete!
               template(v-else)
                 svg.icons.is-64: use(xlink:href='#nc-square-remove')
-                .subheading Something went wrong...
+                .subheading.red--text Something went wrong...
             v-container
               v-alert(type='success', outline, :value='!loading && final.ok') Wiki.js was configured successfully and is now ready for use.
               v-alert(type='error', outline, :value='!loading && !final.ok') {{ final.error }}
@@ -315,8 +320,12 @@
 
 import axios from 'axios'
 import _ from 'lodash'
+import { AtomSpinner } from 'epic-spinners'
 
 export default {
+  components: {
+    AtomSpinner
+  },
   props: {
     telemetryId: {
       type: String,

client/graph/admin/storage/storage-query-targets.gql

@@ -4,6 +4,9 @@ query {
       isEnabled
       key
       title
+      description
+      logo
+      website
       mode
       config {
         key

client/graph/admin/users/users-query-list.gql

@@ -4,7 +4,7 @@ query {
       id
       name
       email
-      provider
+      providerKey
       role
       createdAt
       updatedAt

client/graph/common/common-users-query-search.gql

@@ -4,7 +4,7 @@ query ($query: String!) {
       id
       name
       email
-      provider
+      providerKey
     }
   }
 }

server/graph/resolvers/user.js

@@ -11,14 +11,14 @@ module.exports = {
   UserQuery: {
     async list(obj, args, context, info) {
       return WIKI.models.users.query()
-        .select('id', 'email', 'name', 'provider', 'role', 'createdAt', 'updatedAt')
+        .select('id', 'email', 'name', 'providerKey', 'role', 'createdAt', 'updatedAt')
     },
     async search(obj, args, context, info) {
       return WIKI.models.users.query()
         .where('email', 'like', `%${args.query}%`)
         .orWhere('name', 'like', `%${args.query}%`)
         .limit(10)
-        .select('id', 'email', 'name', 'provider', 'role', 'createdAt', 'updatedAt')
+        .select('id', 'email', 'name', 'providerKey', 'role', 'createdAt', 'updatedAt')
     },
     async single(obj, args, context, info) {
       let usr = await WIKI.models.users.query().findById(args.id)

server/graph/schemas/storage.graphql

@@ -39,6 +39,9 @@ type StorageTarget {
   isEnabled: Boolean!
   key: String!
   title: String!
+  description: String
+  logo: String
+  website: String
   mode: String
   config: [KeyValuePair]
 }

server/graph/schemas/user.graphql

@@ -85,14 +85,14 @@ type UserMinimal {
   id: Int!
   name: String!
   email: String!
-  provider: String!
+  providerKey: String!
 }
 
 type User {
   id: Int!
   name: String!
   email: String!
-  provider: String!
+  providerKey: String!
   providerId: String
   role: UserRole!
   createdAt: Date!

server/modules/storage/azure/definition.yml

 key: azure
 title: Azure Blob Storage
+description: Azure Blob Storage by Microsoft provides massively scalable object storage for unstructured data.
 author: requarks.io
+logo: https://static.requarks.io/logo/azure.svg
+website: https://azure.microsoft.com/services/storage/blobs/
 props:
   accountName: String
   accountKey: String

server/modules/storage/box/definition.yml

 key: box
 title: Box
+description: Box is a cloud content management and file sharing service for businesses.
 author: requarks.io
+logo: https://static.requarks.io/logo/box.svg
+website: https://www.box.com/platform
 props:
   clientId: String
   clientSecret: String

server/modules/storage/digitalocean/definition.yml

 key: digitalocean
-title: DigialOcean Spaces
+title: DigitalOcean Spaces
+description: DigitalOcean provides developers and businesses a reliable, easy-to-use cloud computing platform of virtual servers (Droplets), object storage (Spaces) and more.
 author: requarks.io
+logo: https://static.requarks.io/logo/digitalocean.svg
+website: https://www.digitalocean.com/products/spaces/
 props:
   accessKeyId: String
   accessSecret: String

server/modules/storage/disk/definition.yml

 key: disk
 title: Local File System
+description: Local storage on disk or network shares.
 author: requarks.io
+logo: https://static.requarks.io/logo/local-fs.svg
+website: https://wiki.js.org
 props:
   path:
     type: String

server/modules/storage/dropbox/definition.yml

 key: dropbox
 title: Dropbox
+description: Dropbox is a file hosting service that offers cloud storage, file synchronization, personal cloud, and client software.
 author: requarks.io
+logo: https://static.requarks.io/logo/dropbox.svg
+website: https://dropbox.com
 props:
   appKey: String
   appSecret: String

server/modules/storage/gdrive/definition.yml

 key: gdrive
 title: Google Drive
+description: Google Drive is a file storage and synchronization service developed by Google.
 author: requarks.io
+logo: https://static.requarks.io/logo/google-drive.svg
+website: https://www.google.com/drive/
 props:
   clientId: String
   clientSecret: String

server/modules/storage/git/definition.yml

 key: git
 title: Git
+description: Git is a version control system for tracking changes in computer files and coordinating work on those files among multiple people.
 author: requarks.io
+logo: https://static.requarks.io/logo/git-alt.svg
+website: https://git-scm.com/
 props:
   authType:
     type: String

server/modules/storage/onedrive/definition.yml

 key: onedrive
 title: OneDrive
+description: OneDrive is a file hosting service operated by Microsoft as part of its suite of Office Online services.
 author: requarks.io
+logo: https://static.requarks.io/logo/onedrive.svg
+website: https://onedrive.live.com/about/
 props:
   clientId: String
   clientSecret: String

server/modules/storage/s3/definition.yml

 key: s3
 title: Amazon S3
+description: Amazon S3 is a cloud computing web service offered by Amazon Web Services which provides object storage.
 author: requarks.io
+logo: https://static.requarks.io/logo/aws-s3.svg
+website: https://aws.amazon.com/s3/
 props:
   accessKeyId: String
   accessSecret: String

server/modules/storage/scp/definition.yml

 key: scp
 title: SCP (SSH)
+description: SSH is a software package that enables secure system administration and file transfers over insecure networks.
 author: requarks.io
+logo: https://static.requarks.io/logo/ssh.svg
+website: https://www.ssh.com/ssh/
 props:
   host: String
   port: