feat: user edit UI + admin UI improvements + fixes

client/components/admin.vue

@@ -23,7 +23,7 @@
             v-list-tile-title {{ $t('admin:pages.title') }}
             v-list-tile-action
               v-chip(small, disabled, :color='darkMode ? `grey darken-3-d4` : `grey lighten-4`')
-                .caption.grey--text 123
+                .caption.grey--text {{ info.pagesTotal }}
           v-list-tile(to='/theme')
             v-list-tile-avatar: v-icon palette
             v-list-tile-title {{ $t('admin:theme.title') }}
@@ -32,12 +32,15 @@
           v-list-tile(to='/groups')
             v-list-tile-avatar: v-icon people
             v-list-tile-title {{ $t('admin:groups.title') }}
+            v-list-tile-action
+              v-chip(small, disabled, :color='darkMode ? `grey darken-3-d4` : `grey lighten-4`')
+                .caption.grey--text {{ info.groupsTotal }}
           v-list-tile(to='/users')
             v-list-tile-avatar: v-icon perm_identity
             v-list-tile-title {{ $t('admin:users.title') }}
             v-list-tile-action
               v-chip(small, disabled, :color='darkMode ? `grey darken-3-d4` : `grey lighten-4`')
-                .caption.grey--text 1
+                .caption.grey--text {{ info.usersTotal }}
           v-divider.my-2
           v-subheader.pl-4 {{ $t('admin:nav.modules') }}
           v-list-tile(to='/auth')
@@ -86,7 +89,15 @@
 
 <script>
 import VueRouter from 'vue-router'
-import { get } from 'vuex-pathify'
+import { get, sync } from 'vuex-pathify'
+
+import statsQuery from 'gql/admin/dashboard/dashboard-query-stats.gql'
+
+import adminStore from '@/store/admin'
+
+/* global WIKI */
+
+WIKI.$store.registerModule('admin', adminStore)
 
 const router = new VueRouter({
   mode: 'history',
@@ -102,6 +113,7 @@ const router = new VueRouter({
     { path: '/groups', component: () => import(/* webpackChunkName: "admin" */ './admin/admin-groups.vue') },
     { path: '/groups/:id', component: () => import(/* webpackChunkName: "admin" */ './admin/admin-groups-edit.vue') },
     { path: '/users', component: () => import(/* webpackChunkName: "admin" */ './admin/admin-users.vue') },
+    { path: '/users/:id', component: () => import(/* webpackChunkName: "admin" */ './admin/admin-users-edit.vue') },
     { path: '/auth', component: () => import(/* webpackChunkName: "admin" */ './admin/admin-auth.vue') },
     { path: '/rendering', component: () => import(/* webpackChunkName: "admin" */ './admin/admin-rendering.vue') },
     { path: '/editor', component: () => import(/* webpackChunkName: "admin" */ './admin/admin-editor.vue') },
@@ -144,11 +156,25 @@ export default {
     }
   },
   computed: {
-    darkMode: get('site/dark')
+    darkMode: get('site/dark'),
+    info: sync('admin/info')
   },
   router,
   created() {
     this.$store.commit('page/SET_MODE', 'admin')
+  },
+  apollo: {
+    info: {
+      query: statsQuery,
+      fetchPolicy: 'network-only',
+      manual: true,
+      result({ data, loading, networkStatus }) {
+        this.info = data.system.info
+      },
+      watchLoading (isLoading) {
+        this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-stats-refresh')
+      }
+    }
   }
 }
 </script>

client/components/admin/admin-api.vue

@@ -3,7 +3,7 @@
     v-layout(row, wrap)
       v-flex(xs12)
         .admin-header
-          v-icon(size='80', color='grey lighten-2') call_split
+          img(src='/svg/icon-rest-api.svg', alt='API', style='width: 80px;')
           .admin-header-title
             .headline.blue--text.text--darken-2 API
             .subheading.grey--text Manage keys to access the API

client/components/admin/admin-auth.vue

@@ -3,7 +3,7 @@
     v-layout(row, wrap)
       v-flex(xs12)
         .admin-header
-          v-icon(size='80', color='grey lighten-2') lock_outline
+          img(src='/svg/icon-unlock.svg', alt='Authentication', style='width: 80px;')
           .admin-header-title
             .headline.primary--text Authentication
             .subheading.grey--text Configure the authentication settings of your wiki

client/components/admin/admin-contribute.vue

@@ -3,7 +3,7 @@
     v-layout(row, wrap)
       v-flex(xs12)
         .admin-header
-          v-icon(size='80', color='grey lighten-2') favorite
+          img(src='/svg/icon-heart-health.svg', alt='Contribute', style='width: 80px;')
           .admin-header-title
             .headline.primary--text {{ $t('admin:contribute.title') }}
             .subheading.grey--text {{ $t('admin:contribute.subtitle') }}

client/components/admin/admin-dashboard.vue

@@ -3,7 +3,7 @@
     v-layout(row, wrap)
       v-flex(xs12)
         .admin-header
-          v-icon(size='80', color='grey lighten-2') dashboard
+          img(src='/svg/icon-browse-page.svg', alt='Dashboard', style='width: 80px;')
           .admin-header-title
             .headline.primary--text {{ $t('admin:dashboard.title') }}
             .subheading.grey--text {{ $t('admin:dashboard.subtitle') }}
@@ -92,8 +92,7 @@
 
 <script>
 import AnimatedNumber from 'animated-number-vue'
-
-import statsQuery from 'gql/admin/dashboard/dashboard-query-stats.gql'
+import { get } from 'vuex-pathify'
 
 export default {
   components: {
@@ -101,13 +100,6 @@ export default {
   },
   data() {
     return {
-      info: {
-        currentVersion: 'n/a',
-        latestVersion: 'n/a',
-        groupsTotal: 0,
-        pagesTotal: 0,
-        usersTotal: 0
-      },
       recentPages: [],
       popularPages: []
     }
@@ -115,20 +107,11 @@ export default {
   computed: {
     isLatestVersion() {
       return this.info.currentVersion === this.info.latestVersion
-    }
+    },
+    info: get('admin/info')
   },
   methods: {
     round(val) { return Math.round(val) }
-  },
-  apollo: {
-    info: {
-      query: statsQuery,
-      fetchPolicy: 'network-only',
-      update: (data) => data.system.info,
-      watchLoading (isLoading) {
-        this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-system-refresh')
-      }
-    }
   }
 }
 </script>

client/components/admin/admin-dev.vue

@@ -3,7 +3,7 @@
     v-layout(row, wrap)
       v-flex(xs12)
         .admin-header
-          v-icon(size='80', color='grey lighten-2') weekend
+          img(src='/svg/icon-console.svg', alt='Developer Tools', style='width: 80px;')
           .admin-header-title
             .headline.primary--text Developer Tools
             .subheading.grey--text ¯\_(ツ)_/¯

client/components/admin/admin-editor.vue

@@ -3,7 +3,7 @@
     v-layout(row, wrap)
       v-flex(xs12)
         .admin-header
-          v-icon(size='80', color='grey lighten-2') transform
+          img(src='/svg/icon-web-design.svg', alt='Editor', style='width: 80px;')
           .admin-header-title
             .headline.primary--text Editor
             .subheading.grey--text Configure the content editor

client/components/admin/admin-general.vue

@@ -3,7 +3,7 @@
     v-layout(row wrap)
       v-flex(xs12)
         .admin-header
-          v-icon(size='80', color='grey lighten-2') widgets
+          img(src='/svg/icon-categorize.svg', alt='General', style='width: 80px;')
           .admin-header-title
             .headline.primary--text {{ $t('admin:general.title') }}
             .subheading.grey--text {{ $t('admin:general.subtitle') }}
@@ -60,7 +60,7 @@
                       outline
                       label='Google Analytics ID'
                       :counter='255'
-                      prepend-icon='public'
+                      prepend-icon='timeline'
                       persistent-hint
                       hint='Property tracking ID for Google Analytics.'
                       )
@@ -72,7 +72,7 @@
                       label='Company / Organization Name'
                       v-model='company'
                       :counter='255'
-                      prepend-icon='public'
+                      prepend-icon='business'
                       persistent-hint
                       hint='Name to use when displaying copyright notice in the footer. Leave empty to hide.'
                       )

client/components/admin/admin-groups-edit.vue

@@ -3,11 +3,13 @@
     v-layout(row wrap)
       v-flex(xs12)
         .admin-header
-          v-icon(size='80', color='grey lighten-2') people
+          img(src='/svg/icon-social-group.svg', alt='Edit Group', style='width: 80px;')
           .admin-header-title
             .headline.blue--text.text--darken-2 Edit Group
             .subheading.grey--text {{name}}
           v-spacer
+          .caption.grey--text ID #[strong {{group.id}}]
+          v-divider.mx-3(vertical)
           v-btn(color='indigo', large, outline, to='/groups')
             v-icon arrow_back
           v-dialog(v-model='deleteGroupDialog', max-width='500', v-if='!group.isSystem')
@@ -24,7 +26,7 @@
             v-icon(left) check
             span Update Group
         v-card.mt-3
-          v-tabs(v-model='tab', :color='$vuetify.dark ? "primary" : "grey lighten-4"', fixed-tabs, :slider-color='$vuetify.dark ? "white" : "primary"', show-arrows)
+          v-tabs(v-model='tab', :color='$vuetify.dark ? "primary" : "grey darken-2"', fixed-tabs, slider-color='white', show-arrows, dark)
             v-tab(key='properties') Properties
             v-tab(key='permissions') Permissions
             v-tab(key='rules') Page Rules
@@ -41,8 +43,6 @@
                     counter='255'
                     prepend-icon='people'
                     )
-                  v-divider
-                  .caption.mt-3.grey--text ID: {{group.id}}
 
             v-tab-item(key='permissions', :transition='false', :reverse-transition='false')
               v-container.pa-3(fluid, grid-list-md)

client/components/admin/admin-groups.vue

@@ -3,7 +3,7 @@
     v-layout(row wrap)
       v-flex(xs12)
         .admin-header
-          v-icon(size='80', color='grey lighten-2') people
+          img(src='/svg/icon-people.svg', alt='Groups', style='width: 80px;')
           .admin-header-title
             .headline.blue--text.text--darken-2 Groups
             .subheading.grey--text Manage groups and their permissions

client/components/admin/admin-locale.vue

@@ -3,7 +3,7 @@
     v-layout(row, wrap)
       v-flex(xs12)
         .admin-header
-          v-icon(size='80', color='grey lighten-2') language
+          img(src='/svg/icon-globe-earth.svg', alt='Locale', style='width: 80px;')
           .admin-header-title
             .headline.primary--text {{ $t('admin:locale.title') }}
             .subheading.grey--text {{ $t('admin:locale.subtitle') }}

client/components/admin/admin-logging.vue

@@ -3,7 +3,7 @@
     v-layout(row, wrap)
       v-flex(xs12)
         .admin-header
-          v-icon(size='80', color='grey lighten-2') graphic_eq
+          img(src='/svg/icon-registry-editor.svg', alt='Logging', style='width: 80px;')
           .admin-header-title
             .headline.primary--text Logging
             .subheading.grey--text Configure the system logger(s)

client/components/admin/admin-navigation.vue

@@ -3,7 +3,7 @@
     v-layout(row wrap)
       v-flex(xs12)
         .admin-header
-          v-icon(size='80', color='grey lighten-2') near_me
+          img(src='/svg/icon-triangle-arrow.svg', alt='Navigation', style='width: 80px;')
           .admin-header-title
             .headline.primary--text {{$t('navigation.title')}}
             .subheading.grey--text {{$t('navigation.subtitle')}}

client/components/admin/admin-pages.vue

@@ -3,7 +3,7 @@
     v-layout(row wrap)
       v-flex(xs12)
         .admin-header
-          v-icon(size='80', color='grey lighten-2') insert_drive_file
+          img(src='/svg/icon-file.svg', alt='Page', style='width: 80px;')
           .admin-header-title
             .headline.blue--text.text--darken-2 Pages
             .subheading.grey--text Manage pages

client/components/admin/admin-rendering.vue

@@ -3,7 +3,7 @@
     v-layout(row, wrap)
       v-flex(xs12)
         .admin-header
-          v-icon(size='80', color='grey lighten-2') system_update_alt
+          img(src='/svg/icon-process.svg', alt='Rendering', style='width: 80px;')
           .admin-header-title
             .headline.primary--text Rendering
             .subheading.grey--text Configure how content is rendered

client/components/admin/admin-search.vue

@@ -3,7 +3,7 @@
     v-layout(row, wrap)
       v-flex(xs12)
         .admin-header
-          v-icon(size='80', color='grey lighten-2') search
+          img(src='/svg/icon-search.svg', alt='Search Engine', style='width: 80px;')
           .admin-header-title
             .headline.primary--text Search Engine
             .subheading.grey--text Configure the search capabilities of your wiki

client/components/admin/admin-storage.vue

@@ -3,7 +3,7 @@
     v-layout(row, wrap)
       v-flex(xs12)
         .admin-header
-          v-icon(size='80', color='grey lighten-2') storage
+          img(src='/svg/icon-cloud-storage.svg', alt='Storage', style='width: 80px;')
           .admin-header-title
             .headline.primary--text Storage
             .subheading.grey--text Set backup and sync targets for your content

client/components/admin/admin-system.vue

@@ -3,7 +3,7 @@
     v-layout(row, wrap)
       v-flex(xs12)
         .admin-header
-          v-icon(size='80', color='grey lighten-2') tune
+          img(src='/svg/icon-tune.svg', alt='System Info', style='width: 80px;')
           .admin-header-title
             .headline.primary--text {{ $t('admin:system.title') }}
             .subheading.grey--text {{ $t('admin:system.subtitle') }}

client/components/admin/admin-theme.vue

@@ -3,7 +3,7 @@
     v-layout(row wrap)
       v-flex(xs12)
         .admin-header
-          v-icon(size='80', color='grey lighten-2') palette
+          img(src='/svg/icon-paint-palette.svg', alt='Theme', style='width: 80px;')
           .admin-header-title
             .headline.primary--text Theme
             .subheading.grey--text Modify the look & feel of your wiki

client/components/admin/admin-users-edit.vue

@@ -3,148 +3,193 @@
     v-layout(row, wrap)
       v-flex(xs12)
         .admin-header
-          v-icon(size='80', color='grey lighten-2') perm_identity
+          img(src='/svg/icon-male-user.svg', alt='Edit User', style='width: 80px;')
           .admin-header-title
-            .headline.blue--text.text--darken-2 Users
-            .subheading.grey--text Manage users
+            .headline.blue--text.text--darken-2 Edit User
+            .subheading.grey--text {{user.name}}
           v-spacer
-          v-btn(outline, color='grey', large, @click='refresh')
-            v-icon refresh
-          v-btn(color='primary', large, depressed, @click='authorizeUser')
-            v-icon(left) lock_outline
-            span Authorize Social User
-          v-btn(color='primary', large, depressed, @click='createUser')
-            v-icon(left) add
-            span New Local User
+          .caption.grey--text ID #[strong {{user.id}}]
+          v-divider.mx-3(vertical)
+          v-btn(color='indigo', large, outline, to='/users')
+            v-icon arrow_back
+          v-dialog(v-model='deleteUserDialog', max-width='500', v-if='user.id !== currentUserId && !user.isSystem')
+            v-btn(color='red', large, outline, slot='activator')
+              v-icon(color='red') delete
+            v-card
+              .dialog-header.is-red Delete User?
+              v-card-text Are you sure you want to delete user #[strong {{ user.name }}]?
+              v-card-actions
+                v-spacer
+                v-btn(flat, @click='deleteUserDialog = false') Cancel
+                v-btn(color='red', dark, @click='deleteUser') Delete
+          v-btn(color='primary', large, depressed, @click='updateUser')
+            v-icon(left) check
+            span Update User
+      v-flex(xs5)
+        v-card
+          v-toolbar(color='primary', dense, dark, flat)
+            v-icon.mr-2 directions_run
+            span Basic Info
+          v-list.py-0(two-line, dense)
+            v-list-tile
+              v-list-tile-avatar
+                v-icon alternate_email
+              v-list-tile-content
+                v-list-tile-title Email
+                v-list-tile-sub-title {{ user.email }}
+              v-list-tile-action
+                  v-btn(icon, color='grey', flat)
+                    v-icon edit
+            v-divider
+            v-list-tile
+              v-list-tile-avatar
+                v-icon person
+              v-list-tile-content
+                v-list-tile-title Display Name
+                v-list-tile-sub-title {{ user.name }}
+              v-list-tile-action
+                  v-btn(icon, color='grey', flat)
+                    v-icon edit
         v-card.mt-3
-          v-data-table(
-            v-model='selected'
-            :items='users',
-            :headers='headers',
-            :search='search',
-            :pagination.sync='pagination',
-            :rows-per-page-items='[15]'
-            hide-actions,
-            disable-initial-sort
-          )
-            template(slot='headers', slot-scope='props')
-              tr
-                th.text-xs-left(
-                  v-for='header in props.headers'
-                  :key='header.text'
-                  :width='header.width'
-                  :class='[`column`, header.sortable ? `sortable` : ``, pagination.descending ? `desc` : `asc`, header.value === pagination.sortBy ? `active` : ``]'
-                  @click='changeSort(header.value)'
-                )
-                  | {{ header.text }}
-                  v-icon(small, v-if='header.sortable') arrow_upward
-            template(slot='items', slot-scope='props')
-              tr.is-clickable(:active='props.selected', @click='$router.push("/users/" + props.item.id)')
-                //- td
-                  v-checkbox(hide-details, :input-value='props.selected', color='blue darken-2', @click='props.selected = !props.selected')
-                td.text-xs-right {{ props.item.id }}
-                td: strong {{ props.item.name }}
-                td {{ props.item.email }}
-                td {{ props.item.providerKey }}
-                td {{ props.item.createdAt | moment('from') }}
-                td
-                  v-menu(bottom, right, min-width='200')
-                    v-btn(icon, slot='activator'): v-icon.grey--text.text--darken-1 more_horiz
-                    v-list
-                      v-list-tile(@click='')
-                        v-list-tile-action
-                          v-icon(color='primary') edit
-                        v-list-tile-content
-                          v-list-tile-title Edit
-                      v-list-tile(@click='')
-                        v-list-tile-action
-                          v-icon(color='red') block
-                        v-list-tile-content
-                          v-list-tile-title Block
-            template(slot='no-data')
-              .pa-3
-                v-alert(icon='warning', :value='true', outline) No users to display!
-          .text-xs-center.py-2
-            v-pagination(v-model='pagination.page', :length='pages')
+          v-toolbar(color='primary', dense, dark, flat)
+            v-icon.mr-2 lock_outline
+            span Authentication
+          v-list.py-0(two-line, dense)
+            v-list-tile
+              v-list-tile-avatar
+                v-icon business
+              v-list-tile-content
+                v-list-tile-title Provider
+                v-list-tile-sub-title {{ user.providerKey }}
+              v-list-tile-action
+                v-img(src='https://static.requarks.io/logo/wikijs.svg', alt='')
+            template(v-if='user.providerKey === `local`')
+              v-divider
+              v-list-tile
+                v-list-tile-avatar
+                  v-icon security
+                v-list-tile-content
+                  v-list-tile-title Password
+                  v-list-tile-sub-title ********
+                v-list-tile-action
+                    v-btn(icon, color='grey', flat)
+                      v-icon cached
+                v-list-tile-action
+                    v-btn(icon, color='grey', flat)
+                      v-icon email
+              v-divider
+              v-list-tile
+                v-list-tile-avatar
+                  v-icon screen_lock_portrait
+                v-list-tile-content
+                  v-list-tile-title Two Factor Authentication (2FA)
+                  v-list-tile-sub-title.red--text Inactive
+                v-list-tile-action
+                    v-btn(icon, color='grey', flat)
+                      v-icon power_settings_new
+              template(v-if='user.providerId')
+                v-divider
+                v-list-tile
+                  v-list-tile-avatar
+                    v-icon person
+                  v-list-tile-content
+                    v-list-tile-title Provider Id
+                    v-list-tile-sub-title {{ user.providerId }}
+        v-card.mt-3
+          v-toolbar(color='primary', dense, dark, flat)
+            v-icon.mr-2 people
+            span User Groups
+          v-list(dense)
+            template(v-for='(group, idx) in user.groups')
+              v-list-tile
+                v-list-tile-avatar
+                  v-icon people_outline
+                v-list-tile-content
+                  v-list-tile-title {{group.name}}
+                v-list-tile-action
+                  v-btn(icon, color='red', flat)
+                    v-icon clear
+              v-divider(v-if='idx < user.groups.length - 1')
+          v-card-chin
+            v-spacer
+            v-btn(small, color='primary', flat)
+              v-icon(left) how_to_reg
+              span Assign to group
+      v-flex(xs7)
+        v-card
+          v-toolbar(color='primary', dense, dark, flat)
+            v-icon.mr-2 directions_walk
+            span Extended Metadata
+          v-list.py-0(two-line, dense)
+            v-list-tile
+              v-list-tile-avatar
+                v-icon public
+              v-list-tile-content
+                v-list-tile-title Location
+                v-list-tile-sub-title {{ user.location }}
+              v-list-tile-action
+                  v-btn(icon, color='grey', flat)
+                    v-icon edit
+            v-divider
+            v-list-tile
+              v-list-tile-avatar
+                v-icon local_library
+              v-list-tile-content
+                v-list-tile-title Job Title
+                v-list-tile-sub-title {{ user.jobTitle }}
+              v-list-tile-action
+                  v-btn(icon, color='grey', flat)
+                    v-icon edit
+            v-divider
+            v-list-tile
+              v-list-tile-avatar
+                v-icon map
+              v-list-tile-content
+                v-list-tile-title Timezone
+                v-list-tile-sub-title {{ user.timezone }}
+              v-list-tile-action
+                  v-btn(icon, color='grey', flat)
+                    v-icon edit
+        v-card.mt-3
+          v-toolbar(color='primary', dense, dark, flat)
+            v-icon.mr-2 insert_drive_file
+            span Content
+          v-card-text
+            em.caption.grey--text Coming soon
 
-    user-authorize(v-model='isAuthorizeDialogShown')
-    user-create(v-model='isCreateDialogShown')
 </template>
-
 <script>
-import usersQuery from 'gql/admin/users/users-query-list.gql'
+import _ from 'lodash'
+import { get } from 'vuex-pathify'
 
-import UserAuthorize from './admin-users-authorize.vue'
-import UserCreate from './admin-users-create.vue'
+import userQuery from 'gql/admin/users/users-query-single.gql'
 
 export default {
-  components: {
-    UserAuthorize,
-    UserCreate
-  },
   data() {
     return {
-      selected: [],
-      pagination: {},
-      users: [],
-      headers: [
-        { text: 'ID', value: 'id', width: 80, sortable: true },
-        { text: 'Name', value: 'name', sortable: true },
-        { text: 'Email', value: 'email', sortable: true },
-        { text: 'Provider', value: 'provider', sortable: true },
-        { text: 'Created', value: 'createdAt', sortable: true },
-        { text: '', value: 'actions', sortable: false, width: 50 }
-      ],
-      search: '',
-      isAuthorizeDialogShown: false,
-      isCreateDialogShown: false
+      deleteUserDialog: false,
+      user: {
+
+      }
     }
   },
   computed: {
-    pages () {
-      if (this.pagination.rowsPerPage == null || this.pagination.totalItems == null) {
-        return 0
-      }
-
-      return Math.ceil(this.pagination.totalItems / this.pagination.rowsPerPage)
-    }
+    currentUserId: get('user/id')
   },
   methods: {
-    authorizeUser() {
-      this.isAuthorizeDialogShown = true
-    },
-    createUser() {
-      this.isCreateDialogShown = true
-    },
-    async refresh() {
-      await this.$apollo.queries.users.refetch()
-      this.$store.commit('showNotification', {
-        message: 'Users list has been refreshed.',
-        style: 'success',
-        icon: 'cached'
-      })
-    },
-    changeSort (column) {
-      if (this.pagination.sortBy === column) {
-        this.pagination.descending = !this.pagination.descending
-      } else {
-        this.pagination.sortBy = column
-        this.pagination.descending = false
-      }
-    },
-    toggleAll () {
-      if (this.selected.length) {
-        this.selected = []
-      } else {
-        this.selected = this.items.slice()
-      }
-    }
+    deleteUser() {},
+    updateUser() {}
   },
   apollo: {
-    users: {
-      query: usersQuery,
+    user: {
+      query: userQuery,
+      variables() {
+        return {
+          id: _.toSafeInteger(this.$route.params.id)
+        }
+      },
       fetchPolicy: 'network-only',
-      update: (data) => data.users.list,
+      update: (data) => data.users.single,
       watchLoading (isLoading) {
         this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-users-refresh')
       }

client/components/admin/admin-users.vue

@@ -3,7 +3,7 @@
     v-layout(row, wrap)
       v-flex(xs12)
         .admin-header
-          v-icon(size='80', color='grey lighten-2') perm_identity
+          img(src='/svg/icon-customer.svg', alt='Users', style='width: 80px;')
           .admin-header-title
             .headline.blue--text.text--darken-2 Users
             .subheading.grey--text Manage users
@@ -48,24 +48,16 @@
                 td {{ props.item.providerKey }}
                 td {{ props.item.createdAt | moment('from') }}
                 td
-                  v-menu(bottom, right, min-width='200')
-                    v-btn(icon, slot='activator'): v-icon.grey--text.text--darken-1 more_horiz
-                    v-list
-                      v-list-tile(@click='')
-                        v-list-tile-action
-                          v-icon(color='primary') edit
-                        v-list-tile-content
-                          v-list-tile-title Edit
-                      v-list-tile(@click='')
-                        v-list-tile-action
-                          v-icon(color='red') block
-                        v-list-tile-content
-                          v-list-tile-title Block
+                  v-tooltip(left, v-if='props.item.isSystem')
+                    v-icon(slot='activator') lock_outline
+                    span System User
             template(slot='no-data')
               .pa-3
                 v-alert(icon='warning', :value='true', outline) No users to display!
-          .text-xs-center.py-2
+          v-card-chin
+            v-spacer
             v-pagination(v-model='pagination.page', :length='pages')
+            v-spacer
 
     user-authorize(v-model='isAuthorizeDialogShown')
     user-create(v-model='isCreateDialogShown')

client/components/admin/admin-utilities.vue

@@ -3,7 +3,7 @@
     v-layout(row, wrap)
       v-flex(xs12)
         .admin-header
-          v-icon(size='80', color='grey lighten-2') build
+          img(src='/svg/icon-maintenance.svg', alt='Utilities', style='width: 80px;')
           .admin-header-title
             .headline.primary--text Utilities
             .subheading.grey--text Maintenance and troubleshooting tools

client/components/common/nav-header.vue

@@ -128,7 +128,7 @@
             v-list-tile-action: v-icon(color='grey') person_add
             v-list-tile-title Register
 
-    page-selector(mode='create', v-model='newPageModal')
+    page-selector(mode='create', v-model='newPageModal', :open-handler='pageNewCreate')
 </template>
 
 <script>
@@ -208,6 +208,9 @@ export default {
     pageNew () {
       this.newPageModal = true
     },
+    pageNewCreate ({ path, locale }) {
+      window.location.assign(`/e/${path}`)
+    },
     pageView () {
       window.location.assign(`/${this.path}`)
     },

client/components/common/page-selector.vue

@@ -50,13 +50,23 @@
             v-list-tile
               v-list-tile-avatar: v-icon insert_drive_file
               v-list-tile-title File D
-      v-card-text.grey.pa-2(:class='darkMode ? `darken-3-d5` : `lighten-1`')
+      v-card-actions.grey.pa-2(:class='darkMode ? `darken-3-d5` : `lighten-1`')
+        v-select(
+          solo
+          dark
+          background-color='grey darken-3-d2'
+          hide-details
+          single-line
+          :items='namespaces'
+          style='flex: 0 0 100px;'
+          v-model='currentLocale'
+          )
         v-text-field(
           solo
           hide-details
-          v-model='location'
+          prefix='/'
+          v-model='currentPath'
           flat
-          prepend-inner-icon='subdirectory_arrow_right'
           clearable
         )
       v-card-chin
@@ -76,17 +86,31 @@ export default {
       type: Boolean,
       default: false
     },
+    path: {
+      type: String,
+      default: 'new-page'
+    },
+    locale: {
+      type: String,
+      default: 'en'
+    },
     mode: {
       type: String,
       default: 'create'
+    },
+    openHandler: {
+      type: Function,
+      default: () => {}
     }
   },
   data() {
     return {
       searchLoading: false,
-      location: '/new-page',
+      currentLocale: 'en',
+      currentPath: 'new-page',
       tree: [],
-      treeChildren: []
+      treeChildren: [],
+      namespaces: ['en']
     }
   },
   computed: {
@@ -105,13 +129,25 @@ export default {
       ]
     }
   },
+  watch: {
+    isShown(newValue, oldValue) {
+      if (newValue && !oldValue) {
+        this.currentPath = this.path
+        this.currentLocale = this.locale
+      }
+    }
+  },
   methods: {
     close() {
       this.isShown = false
     },
     open() {
-      if (this.mode === 'create') {
-        window.location.assign(`/e${this.location}`)
+      const exit = this.openHandler({
+        locale: this.currentLocale,
+        path: this.currentPath
+      })
+      if (exit !== false) {
+        this.close()
       }
     },
     async fetchFolders(item) {

client/components/common/v-card-chin.vue

@@ -1,7 +1,7 @@
 <template lang='pug'>
   div
     v-divider.my-0
-    v-card-actions(:class='dark ? "" : "grey lighten-4"')
+    v-card-actions(:class='dark ? "grey darken-4-l5" : "grey lighten-4"')
       slot
 </template>
 

client/components/editor.vue

@@ -40,40 +40,50 @@
               )
             .subheading {{ $t('editor:save.processing') }}
             .caption.blue--text.text--lighten-3 {{ $t('editor:save.pleaseWait') }}
-      v-dialog(v-model='dialogEditorSelector', persistent, max-width='550')
+      v-dialog(v-model='dialogEditorSelector', persistent, max-width='700')
         v-card.radius-7(color='blue darken-3', dark)
           v-card-text.text-xs-center.py-4
             .subheading Which editor do you want to use for this page?
             v-container(grid-list-lg, fluid)
               v-layout(row, wrap, justify-center)
-                v-flex(xs4)
+                v-flex(xs3)
+                  v-card.radius-7.grey(
+                    hover
+                    light
+                    ripple
+                    )
+                    v-card-text.text-xs-center(@click='selectEditor("api")')
+                      img(src='/svg/icon-rest-api.svg', alt='API', style='width: 36px;')
+                      .body-2.mt-2.grey--text.text--darken-2 API Docs
+                      .caption.grey--text.text--darken-1 REST / GraphQL
+                v-flex(xs3)
                   v-card.radius-7(
                     hover
                     light
                     ripple
                     )
                     v-card-text.text-xs-center(@click='selectEditor("code")')
-                      v-icon(large, color='primary') code
+                      img(src='/svg/icon-source-code.svg', alt='Code', style='width: 36px;')
                       .body-2.mt-2 Code
                       .caption.grey--text Raw HTML
-                v-flex(xs4)
+                v-flex(xs3)
                   v-card.radius-7(
                     hover
                     light
                     ripple
                     )
                     v-card-text.text-xs-center(@click='selectEditor("markdown")')
-                      v-icon(large, color='primary') list_alt
+                      img(src='/svg/icon-markdown.svg', alt='Markdown', style='width: 36px;')
                       .body-2.mt-2 Markdown
                       .caption.grey--text Default
-                v-flex(xs4)
+                v-flex(xs3)
                   v-card.radius-7.grey(
                     hover
                     light
                     ripple
                     )
                     v-card-text.text-xs-center(@click='selectEditor("wysiwyg")')
-                      v-icon(large, color='grey darken-1') web
+                      img(src='/svg/icon-open-in-browser.svg', alt='Visual Builder', style='width: 36px;')
                       .body-2.mt-2.grey--text.text--darken-2 Visual Builder
                       .caption.grey--text.text--darken-1 Drag-n-drop
             .caption.blue--text.text--lighten-2 This cannot be changed once the page is created.

client/components/editor/editor-modal-properties.vue

@@ -176,6 +176,7 @@
                     @click='$refs.menuPublishEnd.save(publishEndDate)'
                     ) OK
 
+    page-selector(mode='create', v-model='pageSelectorShown', :path='path', :locale='locale', :open-handler='setPath')
     v-tour(name='editorPropertiesTour', :steps='tourSteps')
 </template>
 
@@ -194,6 +195,7 @@ export default {
     return {
       isPublishStartShown: false,
       isPublishEndShown: false,
+      pageSelectorShown: false,
       namespaces: ['en'],
       tourSteps: [
         {
@@ -234,11 +236,11 @@ export default {
       this.isShown = false
     },
     showPathSelector() {
-      this.$store.commit('showNotification', {
-        message: 'Coming soon!',
-        style: 'purple',
-        icon: 'directions_boat'
-      })
+      this.pageSelectorShown = true
+    },
+    setPath({ path, locale }) {
+      this.locale = locale
+      this.path = path
     }
   }
 }

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

@@ -5,6 +5,7 @@ query {
       name
       email
       providerKey
+      isSystem
       createdAt
     }
   }

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

@@ -0,0 +1,21 @@
+query ($id: Int!) {
+  users {
+    single(id: $id) {
+      id
+      name
+      email
+      providerKey
+      providerId
+      location
+      jobTitle
+      timezone
+      isSystem
+      createdAt
+      updatedAt
+      groups {
+        id
+        name
+      }
+    }
+  }
+}

client/scss/components/v-dialog.scss

@@ -15,6 +15,12 @@
               radial-gradient(ellipse at bottom, mc('red', '800'), mc('red', '700'));
   }
 
+  &.is-indigo {
+    background-color: mc('indigo', '700');
+    background: radial-gradient(ellipse at top, mc('indigo', '500'), mc('indigo', '700')),
+              radial-gradient(ellipse at bottom, mc('indigo', '800'), mc('indigo', '700'));
+  }
+
   &.is-dark {
     background-color: mc('grey', '900');
     background: radial-gradient(ellipse at top, mc('grey', '800'), mc('grey', '900')),

client/scss/pages/_new.scss

@@ -1,5 +1,5 @@
 .newpage {
-  background: linear-gradient(to bottom, mc('blue', '900') 0%, mc('blue', '500') 100%);
+  background: linear-gradient(to bottom, darken(mc('blue', '900'), 10%) 0%, mc('purple', '500') 100%);
   height: 100%;
   display: flex;
   flex-direction: column;
@@ -36,7 +36,7 @@
   &::after {
     content: '';
     position: absolute;
-    background-color: #0d47a1;
+    background-color: transparent;
     background-image: url('../static/svg/motif-overlay.svg');
     background-attachment: fixed;
     background-size: cover;

client/static/svg/icon-browse-page.svg

@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80pt" height="80pt" viewBox="0 0 80 80" version="1.1">
+<defs>
+<linearGradient id="linear0" gradientUnits="userSpaceOnUse" x1="32" y1="18.6667" x2="32" y2="47.3047" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear1" gradientUnits="userSpaceOnUse" x1="41" y1="25" x2="41" y2="31.5765" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear2" gradientUnits="userSpaceOnUse" x1="32" y1="8.3333" x2="32" y2="55.5027" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear3" gradientUnits="userSpaceOnUse" x1="32" y1="8.3333" x2="32" y2="55.5027" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear4" gradientUnits="userSpaceOnUse" x1="23" y1="8.3333" x2="23" y2="55.5027" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear5" gradientUnits="userSpaceOnUse" x1="23" y1="8.3333" x2="23" y2="55.5027" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear6" gradientUnits="userSpaceOnUse" x1="23" y1="8.3333" x2="23" y2="55.5027" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear7" gradientUnits="userSpaceOnUse" x1="21" y1="8.3333" x2="21" y2="55.5027" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear8" gradientUnits="userSpaceOnUse" x1="41" y1="8.3333" x2="41" y2="55.5027" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear9" gradientUnits="userSpaceOnUse" x1="39" y1="8.3333" x2="39" y2="55.5027" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+</defs>
+<g id="surface1">
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear0);" d="M 65 58.75 L 15 58.75 C 13.621094 58.75 12.5 57.628906 12.5 56.25 L 12.5 26.25 C 12.5 24.871094 13.621094 23.75 15 23.75 L 65 23.75 C 66.378906 23.75 67.5 24.871094 67.5 26.25 L 67.5 56.25 C 67.5 57.628906 66.378906 58.75 65 58.75 Z M 15 26.25 L 15 56.25 L 65.003906 56.25 L 65 26.25 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear1);" d="M 58.75 38.75 L 43.75 38.75 C 43.058594 38.75 42.5 38.191406 42.5 37.5 L 42.5 32.5 C 42.5 31.808594 43.058594 31.25 43.75 31.25 L 58.75 31.25 C 59.441406 31.25 60 31.808594 60 32.5 L 60 37.5 C 60 38.191406 59.441406 38.75 58.75 38.75 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear2);" d="M 68.75 11.25 L 11.25 11.25 C 9.183594 11.25 7.5 12.933594 7.5 15 L 7.5 60 C 7.5 62.066406 9.183594 63.75 11.25 63.75 L 68.75 63.75 C 70.816406 63.75 72.5 62.066406 72.5 60 L 72.5 15 C 72.5 12.933594 70.816406 11.25 68.75 11.25 Z M 70 15 L 70 18.75 L 44.046875 18.75 C 43.570313 18.75 43.140625 18.484375 42.925781 18.054688 L 40.773438 13.75 L 68.75 13.75 C 69.441406 13.75 70 14.308594 70 15 Z M 37.207031 13.75 C 37.683594 13.75 38.109375 14.015625 38.324219 14.4375 L 40.476563 18.75 L 31.546875 18.75 C 31.066406 18.75 30.640625 18.484375 30.425781 18.058594 L 28.273438 13.75 Z M 68.75 61.25 L 11.25 61.25 C 10.558594 61.25 10 60.691406 10 60 L 10 15 C 10 14.308594 10.558594 13.75 11.25 13.75 L 24.707031 13.75 C 25.183594 13.75 25.609375 14.015625 25.824219 14.441406 L 28.191406 19.175781 C 28.828125 20.453125 30.117188 21.25 31.546875 21.25 L 70 21.25 L 70 60 C 70 60.691406 69.441406 61.25 68.75 61.25 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear3);" d="M 12.5 66.25 L 67.5 66.25 L 67.5 68.75 L 12.5 68.75 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear4);" d="M 20 31.25 L 37.5 31.25 L 37.5 33.75 L 20 33.75 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear5);" d="M 20 36.25 L 37.5 36.25 L 37.5 38.75 L 20 38.75 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear6);" d="M 20 41.25 L 37.5 41.25 L 37.5 43.75 L 20 43.75 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear7);" d="M 20 46.25 L 32.5 46.25 L 32.5 48.75 L 20 48.75 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear8);" d="M 42.5 41.25 L 60 41.25 L 60 43.75 L 42.5 43.75 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear9);" d="M 42.5 46.25 L 55 46.25 L 55 48.75 L 42.5 48.75 Z "/>
+</g>
+</svg>

client/static/svg/icon-categorize.svg

@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80pt" height="80pt" viewBox="0 0 80 80" version="1.1">
+<defs>
+<linearGradient id="linear0" gradientUnits="userSpaceOnUse" x1="19" y1="41.625" x2="19" y2="48.5182" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear1" gradientUnits="userSpaceOnUse" x1="45" y1="15.625" x2="45" y2="22.6261" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear2" gradientUnits="userSpaceOnUse" x1="19" y1="8" x2="19" y2="57.2906" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear3" gradientUnits="userSpaceOnUse" x1="19" y1="8" x2="19" y2="57.2906" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear4" gradientUnits="userSpaceOnUse" x1="45" y1="8" x2="45" y2="57.2906" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear5" gradientUnits="userSpaceOnUse" x1="45" y1="8" x2="45" y2="57.2906" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear6" gradientUnits="userSpaceOnUse" x1="45" y1="8" x2="45" y2="57.2906" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear7" gradientUnits="userSpaceOnUse" x1="45" y1="8" x2="45" y2="57.2906" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear8" gradientUnits="userSpaceOnUse" x1="19" y1="8" x2="19" y2="57.2906" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear9" gradientUnits="userSpaceOnUse" x1="19" y1="8" x2="19" y2="57.2906" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+</defs>
+<g id="surface1">
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear0);" d="M 27.5 56.25 C 27.5 58.320313 25.820313 60 23.75 60 C 21.679688 60 20 58.320313 20 56.25 C 20 54.179688 21.679688 52.5 23.75 52.5 C 25.820313 52.5 27.5 54.179688 27.5 56.25 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear1);" d="M 60 26.25 C 60 26.941406 59.441406 27.5 58.75 27.5 L 53.75 27.5 C 53.058594 27.5 52.5 26.941406 52.5 26.25 L 52.5 21.25 C 52.5 20.558594 53.058594 20 53.75 20 L 58.75 20 C 59.441406 20 60 20.558594 60 21.25 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear2);" d="M 33.75 10 L 13.75 10 C 11.683594 10 10 11.683594 10 13.75 L 10 33.75 C 10 35.816406 11.683594 37.5 13.75 37.5 L 33.75 37.5 C 35.816406 37.5 37.5 35.816406 37.5 33.75 L 37.5 13.75 C 37.5 11.683594 35.816406 10 33.75 10 Z M 35 33.75 C 35 34.441406 34.4375 35 33.75 35 L 13.75 35 C 13.0625 35 12.5 34.441406 12.5 33.75 L 12.5 13.75 C 12.5 13.058594 13.0625 12.5 13.75 12.5 L 33.75 12.5 C 34.4375 12.5 35 13.058594 35 13.75 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear3);" d="M 33.75 42.5 L 13.75 42.5 C 11.683594 42.5 10 44.183594 10 46.25 L 10 66.25 C 10 68.316406 11.683594 70 13.75 70 L 33.75 70 C 35.816406 70 37.5 68.316406 37.5 66.25 L 37.5 46.25 C 37.5 44.183594 35.816406 42.5 33.75 42.5 Z M 35 66.25 C 35 66.941406 34.4375 67.5 33.75 67.5 L 13.75 67.5 C 13.0625 67.5 12.5 66.941406 12.5 66.25 L 12.5 46.25 C 12.5 45.558594 13.0625 45 13.75 45 L 33.75 45 C 34.4375 45 35 45.558594 35 46.25 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear4);" d="M 66.25 10 L 46.25 10 C 44.183594 10 42.5 11.683594 42.5 13.75 L 42.5 33.75 C 42.5 35.816406 44.183594 37.5 46.25 37.5 L 66.25 37.5 C 68.316406 37.5 70 35.816406 70 33.75 L 70 13.75 C 70 11.683594 68.316406 10 66.25 10 Z M 67.5 33.75 C 67.5 34.441406 66.9375 35 66.25 35 L 46.25 35 C 45.5625 35 45 34.441406 45 33.75 L 45 13.75 C 45 13.058594 45.5625 12.5 46.25 12.5 L 66.25 12.5 C 66.9375 12.5 67.5 13.058594 67.5 13.75 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear5);" d="M 66.25 42.5 L 46.25 42.5 C 44.183594 42.5 42.5 44.183594 42.5 46.25 L 42.5 66.25 C 42.5 68.316406 44.183594 70 46.25 70 L 66.25 70 C 68.316406 70 70 68.316406 70 66.25 L 70 46.25 C 70 44.183594 68.316406 42.5 66.25 42.5 Z M 67.5 66.25 C 67.5 66.941406 66.9375 67.5 66.25 67.5 L 46.25 67.5 C 45.5625 67.5 45 66.941406 45 66.25 L 45 46.25 C 45 45.558594 45.5625 45 46.25 45 L 66.25 45 C 66.9375 45 67.5 45.558594 67.5 46.25 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear6);" d="M 62.5 15 L 50 15 C 48.621094 15 47.5 16.121094 47.5 17.5 L 47.5 30 C 47.5 31.378906 48.621094 32.5 50 32.5 L 62.5 32.5 C 63.878906 32.5 65 31.378906 65 30 L 65 17.5 C 65 16.121094 63.878906 15 62.5 15 Z M 62.5 30 L 50 30 L 50 17.5 L 62.5 17.5 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear7);" d="M 62.5 47.5 L 50 47.5 C 48.621094 47.5 47.5 48.621094 47.5 50 L 47.5 62.5 C 47.5 63.878906 48.621094 65 50 65 L 62.5 65 C 63.878906 65 65 63.878906 65 62.5 L 65 50 C 65 48.621094 63.878906 47.5 62.5 47.5 Z M 62.5 50 L 62.5 52.5 L 50 52.5 L 50 50 Z M 50 62.5 L 50 55 L 62.5 55 L 62.5 62.5 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear8);" d="M 30 47.5 L 17.5 47.5 C 16.121094 47.5 15 48.621094 15 50 L 15 62.5 C 15 63.878906 16.121094 65 17.5 65 L 30 65 C 31.378906 65 32.5 63.878906 32.5 62.5 L 32.5 50 C 32.5 48.621094 31.378906 47.5 30 47.5 Z M 30 62.5 L 17.5 62.5 L 17.5 50 L 30 50 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear9);" d="M 30 15 L 17.5 15 C 16.121094 15 15 16.121094 15 17.5 L 15 30 C 15 31.378906 16.121094 32.5 17.5 32.5 L 30 32.5 C 31.378906 32.5 32.5 31.378906 32.5 30 L 32.5 17.5 C 32.5 16.121094 31.378906 15 30 15 Z M 30 17.5 L 30 20 L 17.5 20 L 17.5 17.5 Z M 30 22.5 L 30 25 L 17.5 25 L 17.5 22.5 Z M 17.5 30 L 17.5 27.5 L 30 27.5 L 30 30 Z "/>
+</g>
+</svg>

client/static/svg/icon-close-window.svg

@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80pt" height="80pt" viewBox="0 0 80 80" version="1.1">
+<defs>
+<linearGradient id="linear0" gradientUnits="userSpaceOnUse" x1="17" y1="28" x2="17" y2="36.4861" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear1" gradientUnits="userSpaceOnUse" x1="32" y1="7.5" x2="32" y2="57.5" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear2" gradientUnits="userSpaceOnUse" x1="48" y1="7.5" x2="48" y2="57.5336" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear3" gradientUnits="userSpaceOnUse" x1="16" y1="7.5" x2="16" y2="57.5336" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear4" gradientUnits="userSpaceOnUse" x1="29" y1="7.5" x2="29" y2="57.5336" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear5" gradientUnits="userSpaceOnUse" x1="37" y1="7.5" x2="37" y2="57.5336" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear6" gradientUnits="userSpaceOnUse" x1="35" y1="7.5" x2="35" y2="57.5336" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear7" gradientUnits="userSpaceOnUse" x1="32" y1="7.5" x2="32" y2="57.5336" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear8" gradientUnits="userSpaceOnUse" x1="14" y1="7.5" x2="14" y2="57.5336" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+</defs>
+<g id="surface1">
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear0);" d="M 17.5 35 L 25 35 L 25 45 L 17.5 45 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear1);" d="M 66.25 8.75 L 53.75 8.75 C 50.304688 8.75 47.5 11.554688 47.5 15 L 47.5 20 L 38.917969 20 C 38.480469 20 38.066406 19.765625 37.84375 19.390625 L 35.550781 15.574219 C 34.878906 14.449219 33.644531 13.75 32.332031 13.75 L 11.257813 13.75 C 9.183594 13.75 7.5 15.433594 7.5 17.507813 L 7.5 62.5 C 7.5 64.566406 9.183594 66.25 11.25 66.25 L 11.25 68.75 C 11.25 70.128906 12.371094 71.25 13.75 71.25 L 61.25 71.25 C 62.628906 71.25 63.75 70.128906 63.75 68.75 L 63.75 66.25 C 65.816406 66.25 67.5 64.566406 67.5 62.5 L 67.5 33.625 C 70.347656 33.042969 72.5 30.519531 72.5 27.5 L 72.5 15 C 72.5 11.554688 69.695313 8.75 66.25 8.75 Z M 33.410156 16.859375 L 35.292969 20 L 28.917969 20 C 28.480469 20 28.066406 19.765625 27.839844 19.390625 L 25.957031 16.25 L 32.332031 16.25 C 32.769531 16.25 33.183594 16.484375 33.410156 16.859375 Z M 10 17.507813 C 10 16.8125 10.5625 16.25 11.257813 16.25 L 22.332031 16.25 C 22.769531 16.25 23.183594 16.484375 23.40625 16.859375 L 25.699219 20.675781 C 26.371094 21.800781 27.605469 22.5 28.917969 22.5 L 47.5 22.5 L 47.5 27.5 L 10 27.5 Z M 61.25 68.75 L 13.75 68.75 L 13.75 66.25 L 61.25 66.25 Z M 63.75 63.75 L 58.75 63.75 L 58.75 61.25 L 56.25 61.25 L 56.25 63.75 L 48.75 63.75 L 48.75 61.25 L 46.25 61.25 L 46.25 63.75 L 38.75 63.75 L 38.75 61.25 L 36.25 61.25 L 36.25 63.75 L 28.75 63.75 L 28.75 61.25 L 26.25 61.25 L 26.25 63.75 L 18.75 63.75 L 18.75 61.25 L 16.25 61.25 L 16.25 63.75 L 11.25 63.75 C 10.558594 63.75 10 63.191406 10 62.5 L 10 30 L 48.03125 30 C 48.996094 32.203125 51.195313 33.75 53.75 33.75 L 65 33.75 L 65 62.5 C 65 63.191406 64.441406 63.75 63.75 63.75 Z M 70 27.5 C 70 29.566406 68.316406 31.25 66.25 31.25 L 53.75 31.25 C 51.683594 31.25 50 29.566406 50 27.5 L 50 15 C 50 12.933594 51.683594 11.25 53.75 11.25 L 66.25 11.25 C 68.316406 11.25 70 12.933594 70 15 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear2);" d="M 64.417969 15.0625 L 60 19.484375 L 55.582031 15.0625 L 53.8125 16.832031 L 58.234375 21.25 L 53.8125 25.667969 L 55.582031 27.4375 L 60 23.015625 L 64.417969 27.4375 L 66.1875 25.667969 L 61.765625 21.25 L 66.1875 16.832031 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear3);" d="M 12.5 50 L 27.5 50 L 27.5 32.5 L 12.5 32.5 Z M 15 35 L 25 35 L 25 47.5 L 15 47.5 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear4);" d="M 30 32.5 L 42.5 32.5 L 42.5 35 L 30 35 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear5);" d="M 30 37.5 L 62.5 37.5 L 62.5 40 L 30 40 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear6);" d="M 30 42.5 L 57.5 42.5 L 57.5 45 L 30 45 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear7);" d="M 30 47.5 L 50 47.5 L 50 50 L 30 50 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear8);" d="M 13.75 20 L 21.25 20 L 21.25 22.5 L 13.75 22.5 Z "/>
+</g>
+</svg>

client/static/svg/icon-cloud-storage.svg

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="&#1057;&#1083;&#1086;&#1081;_1" x="0px" y="0px" viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve" width="80px" height="80px">
+<linearGradient id="SVGID_1__44790" gradientUnits="userSpaceOnUse" x1="42" y1="46.5" x2="42" y2="51.6387" spreadMethod="reflect">
+	<stop offset="0" style="stop-color:#6DC7FF"/>
+	<stop offset="1" style="stop-color:#E6ABFF"/>
+</linearGradient>
+<path style="fill:url(#SVGID_1__44790);" d="M46,50c0,0.552-0.448,1-1,1h-6c-0.552,0-1-0.448-1-1v-2c0-0.552,0.448-1,1-1h6  c0.552,0,1,0.448,1,1V50z"/>
+<linearGradient id="SVGID_2__44790" gradientUnits="userSpaceOnUse" x1="32.4541" y1="7.869" x2="31.7041" y2="55.369" spreadMethod="reflect">
+	<stop offset="0" style="stop-color:#1A6DFF"/>
+	<stop offset="1" style="stop-color:#C822FF"/>
+</linearGradient>
+<path style="fill:url(#SVGID_2__44790);" d="M55.363,23.621C55.771,22.804,56,21.919,56,21c0-3.309-2.691-6-6-6  c-0.746,0-1.47,0.156-2.157,0.427C47.11,11.767,43.873,9,40,9c-3.719,0-6.845,2.555-7.737,6H16.236  c-2.344,0-4.401,1.664-4.892,3.955L6.022,43.79l-0.015,2.136C6.007,45.951,6,45.975,6,46v6c0,1.654,1.346,3,3,3h38  c1.654,0,3-1.346,3-3v-4v-2v-2l-2.515-11H53c2.757,0,5-2.243,5-5C58,26.102,56.925,24.468,55.363,23.621z M48,52  c0,0.552-0.448,1-1,1H9c-0.552,0-1-0.448-1-1v-5v-1c0-0.552,0.448-1,1-1h38c0.552,0,1,0.448,1,1v2V52z M47.769,43.112  C47.522,43.046,47.267,43,47,43H9c-0.275,0-0.535,0.049-0.788,0.118L8.666,41H26v-2H9.094l0.429-2H21v-2H9.951l0.428-2H19v-2h-8.191  l0.428-2H17v-2h-5.334l1.634-7.626C13.595,17.999,14.83,17,16.236,17H32v2.08c-3.386,0.488-6,3.401-6,6.92c0,3.859,3.141,7,7,7  h12.435L47.769,43.112z M53,31H33c-2.757,0-5-2.243-5-5s2.243-5,5.001-5H36v-2h-2v-2c0-3.309,2.691-6,6-6s6,2.691,6,6v2h2v-1.434  C48.615,17.201,49.296,17,50,17c2.206,0,4,1.794,4,4c0,0.721-0.21,1.416-0.594,2.041C53.27,23.03,53.139,23,53,23h-2v2h2  c1.654,0,3,1.346,3,3S54.654,31,53,31z"/>
+<linearGradient id="SVGID_3__44790" gradientUnits="userSpaceOnUse" x1="12.6544" y1="7.5564" x2="11.9044" y2="55.0564" spreadMethod="reflect">
+	<stop offset="0" style="stop-color:#1A6DFF"/>
+	<stop offset="1" style="stop-color:#C822FF"/>
+</linearGradient>
+<circle style="fill:url(#SVGID_3__44790);" cx="12" cy="49" r="2"/>
+<linearGradient id="SVGID_4__44790" gradientUnits="userSpaceOnUse" x1="18.6529" y1="7.6511" x2="17.9029" y2="55.1511" spreadMethod="reflect">
+	<stop offset="0" style="stop-color:#1A6DFF"/>
+	<stop offset="1" style="stop-color:#C822FF"/>
+</linearGradient>
+<circle style="fill:url(#SVGID_4__44790);" cx="18" cy="49" r="2"/>
+<linearGradient id="SVGID_5__44790" gradientUnits="userSpaceOnUse" x1="24.6514" y1="7.7458" x2="23.9014" y2="55.2458" spreadMethod="reflect">
+	<stop offset="0" style="stop-color:#1A6DFF"/>
+	<stop offset="1" style="stop-color:#C822FF"/>
+</linearGradient>
+<circle style="fill:url(#SVGID_5__44790);" cx="24" cy="49" r="2"/>
+</svg>

client/static/svg/icon-console.svg

@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80pt" height="80pt" viewBox="0 0 80 80" version="1.1">
+<defs>
+<linearGradient id="linear0" gradientUnits="userSpaceOnUse" x1="32" y1="21.125" x2="32" y2="47.125" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear1" gradientUnits="userSpaceOnUse" x1="12" y1="12.8333" x2="12" y2="15.3753" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear2" gradientUnits="userSpaceOnUse" x1="18" y1="12.8333" x2="18" y2="15.3753" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear3" gradientUnits="userSpaceOnUse" x1="24" y1="12.8333" x2="24" y2="15.3753" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear4" gradientUnits="userSpaceOnUse" x1="32" y1="8.75" x2="32" y2="55.5002" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear5" gradientUnits="userSpaceOnUse" x1="32" y1="8.75" x2="32" y2="55.5002" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear6" gradientUnits="userSpaceOnUse" x1="24.9392" y1="8.75" x2="24.9392" y2="55.5002" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear7" gradientUnits="userSpaceOnUse" x1="37" y1="8.75" x2="37" y2="55.5002" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+</defs>
+<g id="surface1">
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear0);" d="M 65 58.75 L 15 58.75 C 13.621094 58.75 12.5 57.628906 12.5 56.25 L 12.5 28.75 C 12.5 27.371094 13.621094 26.25 15 26.25 L 65 26.25 C 66.378906 26.25 67.5 27.371094 67.5 28.75 L 67.5 56.25 C 67.5 57.628906 66.378906 58.75 65 58.75 Z M 15 28.75 L 15 56.25 L 65 56.25 L 65 28.75 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear1);" d="M 12.5 16.25 L 17.5 16.25 L 17.5 18.75 L 12.5 18.75 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear2);" d="M 20 16.25 L 25 16.25 L 25 18.75 L 20 18.75 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear3);" d="M 27.5 16.25 L 32.5 16.25 L 32.5 18.75 L 27.5 18.75 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear4);" d="M 68.75 11.25 L 11.25 11.25 C 9.183594 11.25 7.5 12.933594 7.5 15 L 7.5 60 C 7.5 62.066406 9.183594 63.75 11.25 63.75 L 68.75 63.75 C 70.816406 63.75 72.5 62.066406 72.5 60 L 72.5 15 C 72.5 12.933594 70.816406 11.25 68.75 11.25 Z M 70 15 L 70 21.25 L 62.5 21.25 L 62.5 13.75 L 68.75 13.75 C 69.441406 13.75 70 14.308594 70 15 Z M 11.25 13.75 L 60 13.75 L 60 21.25 L 10 21.25 L 10 15 C 10 14.308594 10.558594 13.75 11.25 13.75 Z M 68.75 61.25 L 11.25 61.25 C 10.558594 61.25 10 60.691406 10 60 L 10 23.75 L 70 23.75 L 70 60 C 70 60.691406 69.441406 61.25 68.75 61.25 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear5);" d="M 10 66.25 L 70 66.25 L 70 68.75 L 10 68.75 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear6);" d="M 28.382813 34.117188 L 26.617188 35.882813 L 33.234375 42.5 L 26.617188 49.117188 L 28.382813 50.882813 L 35 44.265625 C 35.976563 43.292969 35.976563 41.707031 35 40.734375 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear7);" d="M 40 47.5 L 52.5 47.5 L 52.5 50 L 40 50 Z "/>
+</g>
+</svg>

client/static/svg/icon-customer.svg

@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80pt" height="80pt" viewBox="0 0 80 80" version="1.1">
+<defs>
+<linearGradient id="linear0" gradientUnits="userSpaceOnUse" x1="37" y1="22.5" x2="37" y2="29.7519" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear1" gradientUnits="userSpaceOnUse" x1="27" y1="22.5" x2="27" y2="29.7519" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear2" gradientUnits="userSpaceOnUse" x1="32" y1="6" x2="32" y2="58.5856" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear3" gradientUnits="userSpaceOnUse" x1="27.05" y1="6" x2="27.05" y2="58.5856" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+</defs>
+<g id="surface1">
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear0);" d="M 50 32.5 C 50 34.570313 48.320313 36.25 46.25 36.25 C 44.179688 36.25 42.5 34.570313 42.5 32.5 C 42.5 30.429688 44.179688 28.75 46.25 28.75 C 48.320313 28.75 50 30.429688 50 32.5 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear1);" d="M 37.5 32.5 C 37.5 34.570313 35.820313 36.25 33.75 36.25 C 31.679688 36.25 30 34.570313 30 32.5 C 30 30.429688 31.679688 28.75 33.75 28.75 C 35.820313 28.75 37.5 30.429688 37.5 32.5 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear2);" d="M 56.347656 42.902344 C 57.871094 40.191406 58.75 37.074219 58.75 33.75 L 58.75 26.25 C 58.75 15.910156 50.339844 7.5 40 7.5 C 29.660156 7.5 21.25 15.910156 21.25 26.25 L 21.25 33.75 C 21.25 37.074219 22.128906 40.191406 23.652344 42.902344 C 16.660156 48.082031 12.5 56.277344 12.5 65 L 12.5 72.5 L 67.5 72.5 L 67.5 65 C 67.5 56.277344 63.339844 48.082031 56.347656 42.902344 Z M 23.75 26.25 C 23.75 17.289063 31.039063 10 40 10 C 48.960938 10 56.25 17.289063 56.25 26.25 L 56.25 33.75 C 56.25 42.710938 48.960938 50 40 50 C 31.039063 50 23.75 42.710938 23.75 33.75 Z M 40 52.5 C 46.121094 52.5 51.546875 49.539063 54.972656 44.992188 C 55.648438 45.5 56.300781 46.039063 56.917969 46.605469 C 52.859375 51.941406 46.703125 55 40 55 C 33.324219 55 27.09375 51.886719 23.078125 46.609375 C 23.699219 46.039063 24.351563 45.5 25.027344 44.992188 C 28.453125 49.539063 33.882813 52.5 40 52.5 Z M 65 70 L 58.75 70 L 58.75 67.5 L 56.25 67.5 L 56.25 70 L 23.75 70 L 23.75 67.5 L 21.25 67.5 L 21.25 70 L 15 70 L 15 65 C 15 58.820313 17.296875 52.929688 21.316406 48.398438 C 25.804688 54.125 32.660156 57.5 40 57.5 C 47.371094 57.5 54.148438 54.183594 58.683594 48.398438 C 62.703125 52.929688 65 58.820313 65 65 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear3);" d="M 40 15 L 40 12.5 C 34.769531 12.5 29.910156 15.542969 27.625 20.25 L 29.875 21.339844 C 31.773438 17.429688 35.652344 15 40 15 Z "/>
+</g>
+</svg>

client/static/svg/icon-globe-earth.svg

@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80pt" height="80pt" viewBox="0 0 80 80" version="1.1">
+<defs>
+<linearGradient id="linear0" gradientUnits="userSpaceOnUse" x1="31.7739" y1="13" x2="31.7739" y2="21.6286" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear1" gradientUnits="userSpaceOnUse" x1="22.5815" y1="21.5" x2="22.5815" y2="31.6443" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear2" gradientUnits="userSpaceOnUse" x1="30.0061" y1="5" x2="30.0061" y2="58.4592" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear3" gradientUnits="userSpaceOnUse" x1="33.3681" y1="5" x2="33.3681" y2="58.4592" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+</defs>
+<g id="surface1">
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear0);" d="M 45.460938 17.992188 L 37.507813 25.945313 L 33.972656 22.410156 C 33.972656 22.410156 38.390625 17.992188 45.460938 17.992188 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear1);" d="M 24.25 39.203125 L 32.203125 31.25 L 28.667969 27.714844 C 28.667969 27.714844 24.25 32.132813 24.25 39.203125 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear2);" d="M 37.507813 55 C 43.851563 55 49.816406 52.527344 54.300781 48.042969 C 58.789063 43.558594 61.257813 37.59375 61.257813 31.25 C 61.257813 24.90625 58.785156 18.941406 54.300781 14.457031 C 49.816406 9.96875 43.851563 7.5 37.507813 7.5 C 31.164063 7.5 25.199219 9.972656 20.714844 14.457031 C 16.226563 18.941406 13.757813 24.90625 13.757813 31.25 C 13.757813 37.59375 16.230469 43.558594 20.714844 48.042969 C 25.199219 52.53125 31.164063 55 37.507813 55 Z M 28.695313 24.207031 L 35.738281 31.25 L 22.277344 44.714844 C 21.085938 38.21875 23.675781 29.816406 28.695313 24.207031 Z M 46.3125 38.289063 L 39.273438 31.25 L 52.738281 17.785156 C 53.921875 24.28125 51.332031 32.679688 46.3125 38.289063 Z M 44.546875 40.054688 C 38.933594 45.078125 30.539063 47.667969 24.042969 46.480469 L 37.507813 33.015625 Z M 37.507813 29.484375 L 30.464844 22.4375 C 36.074219 17.417969 44.476563 14.824219 50.972656 16.015625 Z M 26.238281 49.25 C 26.613281 49.269531 26.988281 49.289063 27.367188 49.289063 C 33.882813 49.289063 41.128906 46.539063 46.320313 41.832031 L 51.605469 47.113281 C 47.714844 50.582031 42.765625 52.5 37.507813 52.5 C 33.457031 52.5 29.585938 51.355469 26.238281 49.25 Z M 53.375 45.347656 L 48.082031 40.058594 C 53.0625 34.5625 55.851563 26.78125 55.511719 19.988281 C 57.613281 23.332031 58.757813 27.199219 58.757813 31.25 C 58.757813 36.507813 56.839844 41.457031 53.375 45.347656 Z M 48.765625 13.246094 C 41.972656 12.90625 34.191406 15.691406 28.695313 20.671875 L 23.410156 15.382813 C 27.300781 11.917969 32.25 10 37.507813 10 C 41.554688 10 45.421875 11.144531 48.765625 13.246094 Z M 21.640625 17.152344 L 26.925781 22.4375 C 21.949219 27.929688 19.160156 35.714844 19.5 42.507813 C 17.398438 39.164063 16.257813 35.296875 16.257813 31.25 C 16.257813 25.992188 18.171875 21.042969 21.640625 17.152344 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear3);" d="M 41.105469 59.734375 C 47.226563 58.964844 53.148438 56.265625 57.835938 51.578125 C 69.042969 40.371094 69.046875 22.128906 57.835938 10.921875 L 56.070313 12.6875 C 66.304688 22.921875 66.304688 39.578125 56.070313 49.8125 C 45.832031 60.046875 29.179688 60.046875 18.945313 49.8125 L 17.175781 51.578125 C 21.863281 56.265625 27.78125 58.964844 33.902344 59.734375 C 34.226563 60.917969 35 61.859375 36.25 62.269531 L 36.25 66.25 L 33.777344 66.25 C 31.703125 66.25 30.019531 67.929688 30.011719 70 L 23.75 70 L 23.75 72.5 L 51.25 72.5 L 51.25 70 L 45.007813 70 C 44.996094 67.929688 43.3125 66.25 41.238281 66.25 L 38.75 66.25 L 38.75 62.269531 C 40 61.859375 40.78125 60.917969 41.105469 59.734375 Z M 42.503906 70 L 32.511719 70 C 32.523438 69.308594 33.082031 68.75 33.777344 68.75 L 41.238281 68.75 C 41.929688 68.75 42.492188 69.308594 42.503906 70 Z "/>
+</g>
+</svg>

client/static/svg/icon-heart-health.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80pt" height="80pt" viewBox="0 0 80 80" version="1.1">
+<defs>
+<linearGradient id="linear0" gradientUnits="userSpaceOnUse" x1="32" y1="9.8333" x2="32" y2="54.7159" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear1" gradientUnits="userSpaceOnUse" x1="50.5" y1="33.6667" x2="50.5" y2="44.2733" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear2" gradientUnits="userSpaceOnUse" x1="14.5" y1="12.8333" x2="14.5" y2="24.8899" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+</defs>
+<g id="surface1">
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear0);" d="M 38.75 67.5 C 32.21875 67.5 7.5 51.015625 7.5 28.75 C 7.5 19.789063 14.789063 12.5 23.75 12.5 C 30.496094 12.5 36.296875 16.632813 38.75 22.5 C 41.203125 16.632813 47.003906 12.5 53.75 12.5 C 62.710938 12.5 70 19.789063 70 28.75 C 70 32.632813 69.234375 36.570313 67.722656 40.453125 L 66.75 42.484375 L 65.550781 41.679688 C 63.90625 40.582031 61.988281 40 60 40 C 54.484375 40 50 44.484375 50 50 C 50 55.515625 54.484375 60 60 60 C 65.515625 60 70 55.515625 70 50 L 72.5 50 C 72.5 56.890625 66.890625 62.5 60 62.5 C 57.300781 62.5 54.796875 61.640625 52.75 60.179688 C 47.378906 64.578125 41.8125 67.5 38.75 67.5 Z M 23.75 15 C 16.167969 15 10 21.167969 10 28.75 C 10 49.148438 32.929688 65 38.75 65 C 40.765625 65 45.605469 62.730469 50.847656 58.503906 C 48.769531 56.273438 47.5 53.28125 47.5 50 C 47.5 43.109375 53.109375 37.5 60 37.5 C 61.984375 37.5 63.914063 37.964844 65.660156 38.851563 C 66.871094 35.535156 67.5 32.113281 67.5 28.75 C 67.5 21.167969 61.332031 15 53.75 15 C 46.167969 15 40 21.167969 40 28.75 L 37.5 28.75 C 37.5 21.167969 31.332031 15 23.75 15 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear1);" d="M 60 54.480469 C 59.359375 54.480469 58.71875 54.234375 58.234375 53.75 L 55.367188 50.882813 L 57.136719 49.117188 L 60 51.980469 L 69.117188 42.867188 L 70.886719 44.632813 L 61.769531 53.75 C 61.28125 54.234375 60.640625 54.480469 60 54.480469 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear2);" d="M 23.75 17.5 C 17.535156 17.5 12.5 22.535156 12.5 28.75 L 23.75 28.75 Z "/>
+</g>
+</svg>

client/static/svg/icon-maintenance.svg

@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80pt" height="80pt" viewBox="0 0 80 80" version="1.1">
+<defs>
+<linearGradient id="linear0" gradientUnits="userSpaceOnUse" x1="41" y1="47.875" x2="41" y2="54.0115" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear1" gradientUnits="userSpaceOnUse" x1="16" y1="4.6667" x2="16" y2="58.9749" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear2" gradientUnits="userSpaceOnUse" x1="41.003" y1="4.6667" x2="41.003" y2="58.9749" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear3" gradientUnits="userSpaceOnUse" x1="41" y1="4.6667" x2="41" y2="58.9749" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+</defs>
+<g id="surface1">
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear0);" d="M 55 63.75 C 55 65.820313 53.320313 67.5 51.25 67.5 C 49.179688 67.5 47.5 65.820313 47.5 63.75 C 47.5 61.679688 49.179688 60 51.25 60 C 53.320313 60 55 61.679688 55 63.75 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear1);" d="M 25 40 L 23.75 40 L 23.75 17.152344 C 24.492188 16.71875 25 15.921875 25 15 L 25 10 C 25 8.621094 23.878906 7.5 22.5 7.5 L 17.5 7.5 C 16.121094 7.5 15 8.621094 15 10 L 15 15 C 15 15.921875 15.507813 16.71875 16.25 17.152344 L 16.25 40 L 15 40 C 12.933594 40 11.25 41.683594 11.25 43.75 L 11.25 63.75 C 11.25 68.574219 15.175781 72.5 20 72.5 C 24.824219 72.5 28.75 68.574219 28.75 63.75 L 28.75 43.75 C 28.75 41.683594 27.066406 40 25 40 Z M 17.5 10 L 22.5 10 L 22.5 15 L 17.5 15 Z M 18.75 17.5 L 21.25 17.5 L 21.25 40 L 18.75 40 Z M 15 42.5 L 25 42.5 C 25.691406 42.5 26.25 43.058594 26.25 43.75 L 26.25 47.5 L 13.75 47.5 L 13.75 43.75 C 13.75 43.058594 14.308594 42.5 15 42.5 Z M 23.75 62.5 L 23.75 50 L 26.25 50 L 26.25 62.5 Z M 13.75 62.5 L 13.75 50 L 16.25 50 L 16.25 62.5 Z M 18.75 50 L 21.25 50 L 21.25 62.5 L 18.75 62.5 Z M 20 70 C 16.980469 70 14.457031 67.847656 13.875 65 L 26.125 65 C 25.542969 67.847656 23.019531 70 20 70 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear2);" d="M 68.75 21.25 C 68.75 13.28125 63.492188 7.5 56.25 7.5 L 55 7.5 L 55 18.75 C 55 19.441406 54.441406 20 53.75 20 L 48.75 20 C 48.058594 20 47.5 19.441406 47.5 18.75 L 47.5 7.5 L 46.25 7.5 C 42.398438 7.5 39.011719 9.113281 36.71875 12.046875 C 33.957031 15.574219 33.058594 20.710938 34.3125 25.78125 C 35.550781 30.78125 39.8125 34.390625 44.917969 34.929688 L 43 63.683594 C 42.851563 65.957031 43.65625 68.214844 45.214844 69.882813 C 46.769531 71.546875 48.972656 72.5 51.25 72.5 C 53.53125 72.5 55.734375 71.546875 57.292969 69.882813 C 58.867188 68.195313 59.652344 65.996094 59.5 63.691406 L 57.582031 34.933594 C 64.128906 34.269531 68.75 28.722656 68.75 21.25 Z M 56.25 32.5 L 54.914063 32.5 L 57.003906 63.859375 C 57.113281 65.464844 56.566406 66.996094 55.464844 68.171875 C 54.363281 69.351563 52.867188 70 51.25 70 C 49.636719 70 48.140625 69.351563 47.039063 68.171875 C 45.9375 66.996094 45.390625 65.460938 45.496094 63.851563 L 47.582031 32.5 L 46.25 32.5 C 41.71875 32.5 37.808594 29.488281 36.742188 25.179688 C 35.667969 20.847656 36.398438 16.515625 38.6875 13.589844 C 40.273438 11.5625 42.4375 10.359375 45 10.070313 L 45 18.75 C 45 20.816406 46.683594 22.5 48.75 22.5 L 53.75 22.5 C 55.820313 22.5 57.5 20.816406 57.5 18.75 L 57.5 10.074219 C 62.714844 10.679688 66.25 15.105469 66.25 21.25 C 66.25 27.875 62.140625 32.5 56.25 32.5 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear3);" d="M 50 38.75 L 52.5 38.75 L 52.5 56.25 L 50 56.25 Z "/>
+</g>
+</svg>

client/static/svg/icon-markdown.svg

@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80pt" height="80pt" viewBox="0 0 80 80" version="1.1">
+<defs>
+<linearGradient id="linear0" gradientUnits="userSpaceOnUse" x1="31.8738" y1="12.7607" x2="32.1238" y2="50.8857" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear1" gradientUnits="userSpaceOnUse" x1="31.8738" y1="12.7607" x2="32.1238" y2="50.8857" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear2" gradientUnits="userSpaceOnUse" x1="23" y1="23" x2="23" y2="42.0497" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear3" gradientUnits="userSpaceOnUse" x1="44" y1="23" x2="44" y2="42.0497" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+</defs>
+<g id="surface1">
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear0);" d="M 72.5 63.75 L 7.5 63.75 C 5.433594 63.75 3.75 62.066406 3.75 60 L 3.75 20 C 3.75 17.933594 5.433594 16.25 7.5 16.25 L 72.5 16.25 C 74.566406 16.25 76.25 17.933594 76.25 20 L 76.25 60 C 76.25 62.066406 74.566406 63.75 72.5 63.75 Z M 7.5 18.75 C 6.8125 18.75 6.25 19.3125 6.25 20 L 6.25 60 C 6.25 60.6875 6.8125 61.25 7.5 61.25 L 72.5 61.25 C 73.1875 61.25 73.75 60.6875 73.75 60 L 73.75 20 C 73.75 19.3125 73.1875 18.75 72.5 18.75 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear1);" d="M 68.75 58.75 L 11.25 58.75 C 9.871094 58.75 8.75 57.628906 8.75 56.25 L 8.75 23.75 C 8.75 22.371094 9.871094 21.25 11.25 21.25 L 68.75 21.25 C 70.128906 21.25 71.25 22.371094 71.25 23.75 L 71.25 56.25 C 71.25 57.628906 70.128906 58.75 68.75 58.75 Z M 68.75 23.75 L 11.25 23.75 L 11.25 56.25 L 68.75 56.25 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear2);" d="M 35 28.75 L 28.75 38.75 L 22.5 28.75 L 16.25 28.75 L 16.25 51.25 L 22.5 51.25 L 22.5 38.75 L 28.75 47.5 L 35 38.75 L 35 51.25 L 41.25 51.25 L 41.25 28.75 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear3);" d="M 57.5 40 L 57.5 28.75 L 52.5 28.75 L 52.5 40 L 45 40 L 55 51.25 L 65 40 Z "/>
+</g>
+</svg>

client/static/svg/icon-open-in-browser.svg

@@ -0,0 +1,67 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80pt" height="80pt" viewBox="0 0 80 80" version="1.1">
+<defs>
+<linearGradient id="linear0" gradientUnits="userSpaceOnUse" x1="32" y1="7.625" x2="32" y2="15.0011" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear1" gradientUnits="userSpaceOnUse" x1="32" y1="5.6667" x2="32" y2="59.3592" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear2" gradientUnits="userSpaceOnUse" x1="32" y1="5.6667" x2="32" y2="59.3592" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear3" gradientUnits="userSpaceOnUse" x1="25.0004" y1="5.6667" x2="25.0004" y2="59.3592" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear4" gradientUnits="userSpaceOnUse" x1="18" y1="5.6667" x2="18" y2="59.3592" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear5" gradientUnits="userSpaceOnUse" x1="18" y1="5.6667" x2="18" y2="59.3592" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear6" gradientUnits="userSpaceOnUse" x1="17" y1="5.6667" x2="17" y2="59.3592" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear7" gradientUnits="userSpaceOnUse" x1="46" y1="5.6667" x2="46" y2="59.3592" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear8" gradientUnits="userSpaceOnUse" x1="46" y1="5.6667" x2="46" y2="59.3592" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear9" gradientUnits="userSpaceOnUse" x1="47" y1="5.6667" x2="47" y2="59.3592" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear10" gradientUnits="userSpaceOnUse" x1="15" y1="5.6667" x2="15" y2="59.3592" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear11" gradientUnits="userSpaceOnUse" x1="22" y1="5.6667" x2="22" y2="59.3592" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+</defs>
+<g id="surface1">
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear0);" d="M 10 10 L 70 10 L 70 17.5 L 10 17.5 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear1);" d="M 66.25 7.5 L 13.75 7.5 C 10.304688 7.5 7.5 10.304688 7.5 13.75 L 7.5 63.75 C 7.5 65.816406 9.183594 67.5 11.25 67.5 L 36.25 67.5 L 36.25 65 L 11.25 65 C 10.558594 65 10 64.441406 10 63.75 L 10 62.269531 C 10.390625 62.410156 10.808594 62.5 11.25 62.5 L 36.25 62.5 L 36.25 60 L 11.25 60 C 10.558594 60 10 59.441406 10 58.75 L 10 20 L 70 20 L 70 58.75 C 70 59.441406 69.441406 60 68.75 60 L 43.75 60 L 43.75 62.5 L 68.75 62.5 C 69.191406 62.5 69.609375 62.410156 70 62.269531 L 70 63.75 C 70 64.441406 69.441406 65 68.75 65 L 43.75 65 L 43.75 67.5 L 68.75 67.5 C 70.816406 67.5 72.5 65.816406 72.5 63.75 L 72.5 13.75 C 72.5 10.304688 69.695313 7.5 66.25 7.5 Z M 10 17.5 L 10 13.75 C 10 11.683594 11.683594 10 13.75 10 L 66.25 10 C 68.316406 10 70 11.683594 70 13.75 L 70 17.5 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear2);" d="M 65 35 L 65 25 C 65 23.621094 63.878906 22.5 62.5 22.5 L 17.5 22.5 C 16.121094 22.5 15 23.621094 15 25 L 15 35 C 15 36.378906 16.121094 37.5 17.5 37.5 L 62.5 37.5 C 63.878906 37.5 65 36.378906 65 35 Z M 62.503906 35 L 52.5 35 L 52.5 25 L 62.5 25 Z M 50 35 L 30 35 L 30 25 L 50 25 Z M 17.5 25 L 27.5 25 L 27.5 35 L 17.5 35 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear3);" d="M 45.589844 55 C 46.289063 55 46.929688 54.636719 47.265625 54.054688 C 47.582031 53.503906 47.578125 52.847656 47.257813 52.300781 L 42.269531 43.75 C 41.820313 42.980469 40.949219 42.5 40 42.5 C 39.050781 42.5 38.179688 42.980469 37.730469 43.75 L 32.742188 52.300781 C 32.421875 52.847656 32.417969 53.503906 32.734375 54.054688 C 33.070313 54.636719 33.710938 55 34.410156 55 L 38.75 55 L 38.75 68.75 C 38.75 69.441406 38.191406 70 37.5 70 L 15 70 L 15 72.5 L 37.5 72.5 C 39.566406 72.5 41.25 70.816406 41.25 68.75 L 41.25 55 Z M 39.875 45.027344 C 39.921875 44.988281 40.074219 44.988281 40.109375 45.007813 L 44.480469 52.5 L 35.519531 52.5 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear4);" d="M 15 42.5 L 30 42.5 L 30 45 L 15 45 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear5);" d="M 15 47.5 L 30 47.5 L 30 50 L 15 50 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear6);" d="M 15 52.5 L 27.5 52.5 L 27.5 55 L 15 55 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear7);" d="M 50 42.5 L 65 42.5 L 65 45 L 50 45 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear8);" d="M 50 47.5 L 65 47.5 L 65 50 L 50 50 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear9);" d="M 52.5 52.5 L 65 52.5 L 65 55 L 52.5 55 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear10);" d="M 15 12.5 L 22.5 12.5 L 22.5 15 L 15 15 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear11);" d="M 25 12.5 L 30 12.5 L 30 15 L 25 15 Z "/>
+</g>
+</svg>

client/static/svg/icon-paint-palette.svg

@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80pt" height="80pt" viewBox="0 0 80 80" version="1.1">
+<defs>
+<linearGradient id="linear0" gradientUnits="userSpaceOnUse" x1="49" y1="21.9609" x2="49" y2="29.6619" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear1" gradientUnits="userSpaceOnUse" x1="40" y1="12" x2="40" y2="19.8003" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear2" gradientUnits="userSpaceOnUse" x1="26" y1="11.0438" x2="26" y2="18.9416" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear3" gradientUnits="userSpaceOnUse" x1="16" y1="21.1089" x2="16" y2="28.9559" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear4" gradientUnits="userSpaceOnUse" x1="16" y1="33.9501" x2="16" y2="41.8509" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear5" gradientUnits="userSpaceOnUse" x1="31.9997" y1="4.625" x2="31.9997" y2="59.3701" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+</defs>
+<g id="surface1">
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear0);" d="M 66.25 32.5 C 66.25 35.265625 64.015625 37.5 61.25 37.5 C 58.488281 37.5 56.25 35.265625 56.25 32.5 C 56.25 29.738281 58.488281 27.5 61.25 27.5 C 64.015625 27.5 66.25 29.738281 66.25 32.5 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear1);" d="M 55 20 C 55 22.765625 52.765625 25 50 25 C 47.238281 25 45 22.765625 45 20 C 45 17.238281 47.238281 15 50 15 C 52.765625 15 55 17.238281 55 20 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear2);" d="M 37.5 18.75 C 37.5 21.515625 35.265625 23.75 32.5 23.75 C 29.738281 23.75 27.5 21.515625 27.5 18.75 C 27.5 15.988281 29.738281 13.75 32.5 13.75 C 35.265625 13.75 37.5 15.988281 37.5 18.75 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear3);" d="M 25 31.25 C 25 34.015625 22.765625 36.25 20 36.25 C 17.238281 36.25 15 34.015625 15 31.25 C 15 28.488281 17.238281 26.25 20 26.25 C 22.765625 26.25 25 28.488281 25 31.25 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear4);" d="M 25 47.5 C 25 50.265625 22.765625 52.5 20 52.5 C 17.238281 52.5 15 50.265625 15 47.5 C 15 44.738281 17.238281 42.5 20 42.5 C 22.765625 42.5 25 44.738281 25 47.5 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear5);" d="M 37.5 51.25 C 33.363281 51.25 30 54.613281 30 58.75 C 30 62.886719 33.363281 66.25 37.5 66.25 C 41.636719 66.25 45 62.886719 45 58.75 C 45 54.613281 41.636719 51.25 37.5 51.25 Z M 37.5 63.75 C 34.742188 63.75 32.5 61.507813 32.5 58.75 C 32.5 55.992188 34.742188 53.75 37.5 53.75 C 40.257813 53.75 42.5 55.992188 42.5 58.75 C 42.5 61.507813 40.257813 63.75 37.5 63.75 Z M 63.109375 15.402344 C 56.25 8.957031 47.28125 5.726563 37.847656 6.320313 C 20.921875 7.367188 7.367188 20.921875 6.320313 37.847656 C 5.734375 47.28125 8.957031 56.25 15.402344 63.109375 C 21.757813 69.875 30.722656 73.75 40 73.75 C 46.894531 73.75 52.5 68.144531 52.5 61.25 L 52.5 58.75 C 52.5 53.238281 56.988281 48.75 62.5 48.75 L 65 48.75 C 69.824219 48.75 73.75 44.824219 73.75 40 C 73.75 30.722656 69.875 21.757813 63.109375 15.402344 Z M 65 46.25 L 62.5 46.25 C 55.605469 46.25 50 51.855469 50 58.75 L 50 61.25 C 50 66.761719 45.511719 71.25 40 71.25 C 31.285156 71.25 23.199219 67.75 17.222656 61.398438 C 11.261719 55.050781 8.273438 46.738281 8.8125 38.003906 C 9.785156 22.335938 22.335938 9.785156 38.003906 8.8125 C 38.675781 8.769531 39.351563 8.75 40.023438 8.75 C 48.011719 8.75 55.539063 11.71875 61.398438 17.222656 C 67.75 23.199219 71.25 31.285156 71.25 40 C 71.25 43.449219 68.449219 46.25 65 46.25 Z "/>
+</g>
+</svg>

client/static/svg/icon-process.svg

@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80pt" height="80pt" viewBox="0 0 80 80" version="1.1">
+<defs>
+<linearGradient id="linear0" gradientUnits="userSpaceOnUse" x1="24.4999" y1="4.1666" x2="24.4999" y2="59.312" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear1" gradientUnits="userSpaceOnUse" x1="12.5009" y1="4.1666" x2="12.5009" y2="59.3119" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear2" gradientUnits="userSpaceOnUse" x1="39.4999" y1="4.1667" x2="39.4999" y2="59.3119" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear3" gradientUnits="userSpaceOnUse" x1="51.4989" y1="4.1667" x2="51.4989" y2="59.3119" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear4" gradientUnits="userSpaceOnUse" x1="32" y1="4.1667" x2="32" y2="59.3119" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear5" gradientUnits="userSpaceOnUse" x1="32" y1="27.8333" x2="32" y2="35.8333" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+</defs>
+<g id="surface1">
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear0);" d="M 16.25 20 C 16.25 17.933594 17.929688 16.25 20 16.25 L 32.5 16.25 L 32.5 21.300781 C 32.5 22.171875 32.953125 22.957031 33.714844 23.402344 C 34.109375 23.632813 34.550781 23.746094 34.992188 23.746094 C 35.421875 23.746094 35.847656 23.640625 36.230469 23.425781 L 45.625 18.160156 C 46.796875 17.5 47.5 16.320313 47.5 15 C 47.5 13.679688 46.796875 12.5 45.625 11.839844 L 36.230469 6.574219 C 35.449219 6.136719 34.484375 6.144531 33.714844 6.597656 C 32.953125 7.042969 32.5 7.828125 32.5 8.699219 L 32.5 13.75 L 20 13.75 C 16.554688 13.75 13.75 16.554688 13.75 20 L 13.75 25 L 16.25 25 Z M 35.007813 8.753906 L 44.402344 14.019531 C 44.941406 14.324219 45 14.804688 45 15 C 45 15.195313 44.941406 15.675781 44.402344 15.980469 L 35 21.300781 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear1);" d="M 16.25 60 L 16.25 47.5 L 21.300781 47.5 C 22.171875 47.5 22.957031 47.046875 23.402344 46.285156 C 23.855469 45.511719 23.863281 44.546875 23.425781 43.765625 L 18.160156 34.375 C 17.5 33.203125 16.320313 32.5 15 32.5 C 13.679688 32.5 12.5 33.203125 11.839844 34.375 L 6.574219 43.769531 C 6.136719 44.546875 6.144531 45.515625 6.597656 46.285156 C 7.042969 47.046875 7.828125 47.5 8.695313 47.5 L 13.75 47.5 L 13.75 60 C 13.75 63.445313 16.554688 66.25 20 66.25 L 25 66.25 L 25 63.75 L 20 63.75 C 17.929688 63.75 16.25 62.066406 16.25 60 Z M 14.019531 35.597656 C 14.324219 35.058594 14.804688 35 15 35 C 15.195313 35 15.675781 35.058594 15.980469 35.597656 L 21.300781 45 L 8.753906 44.992188 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear2);" d="M 63.75 60 C 63.75 62.066406 62.066406 63.75 60 63.75 L 47.5 63.75 L 47.5 58.699219 C 47.5 57.828125 47.046875 57.042969 46.285156 56.597656 C 45.511719 56.144531 44.546875 56.136719 43.765625 56.574219 L 34.375 61.839844 C 33.199219 62.5 32.5 63.679688 32.5 65 C 32.5 66.320313 33.203125 67.5 34.375 68.160156 L 43.769531 73.425781 C 44.152344 73.640625 44.578125 73.746094 45.007813 73.746094 C 45.449219 73.746094 45.890625 73.632813 46.285156 73.402344 C 47.046875 72.957031 47.5 72.171875 47.5 71.300781 L 47.5 66.25 L 60 66.25 C 63.445313 66.25 66.25 63.445313 66.25 60 L 66.25 55 L 63.75 55 Z M 44.992188 71.246094 L 35.597656 65.980469 C 35.058594 65.675781 35 65.195313 35 65 C 35 64.804688 35.058594 64.324219 35.597656 64.019531 L 45 58.699219 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear3);" d="M 73.402344 33.714844 C 72.957031 32.953125 72.171875 32.5 71.300781 32.5 L 66.25 32.5 L 66.25 20 C 66.25 16.554688 63.445313 13.75 60 13.75 L 55 13.75 L 55 16.25 L 60 16.25 C 62.066406 16.25 63.75 17.933594 63.75 20 L 63.75 32.5 L 58.695313 32.5 C 57.828125 32.5 57.042969 32.953125 56.597656 33.714844 C 56.144531 34.484375 56.136719 35.453125 56.574219 36.234375 L 61.839844 45.625 C 62.5 46.796875 63.679688 47.5 65 47.5 C 66.320313 47.5 67.5 46.796875 68.160156 45.625 L 73.425781 36.230469 C 73.863281 35.453125 73.855469 34.488281 73.402344 33.714844 Z M 65.980469 44.402344 C 65.675781 44.941406 65.195313 45 65 45 C 64.804688 45 64.324219 44.941406 64.019531 44.402344 L 58.695313 35 L 71.246094 35.007813 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear4);" d="M 48.75 35 C 48.75 32.929688 47.070313 31.25 45 31.25 L 35 31.25 C 32.929688 31.25 31.25 32.929688 31.25 35 L 31.25 45 C 31.25 47.070313 32.929688 48.75 35 48.75 L 45 48.75 C 47.070313 48.75 48.75 47.070313 48.75 45 Z M 46.25 45 C 46.25 45.691406 45.691406 46.25 45 46.25 L 35 46.25 C 34.308594 46.25 33.75 45.691406 33.75 45 L 33.75 35 C 33.75 34.308594 34.308594 33.75 35 33.75 L 45 33.75 C 45.691406 33.75 46.25 34.308594 46.25 35 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear5);" d="M 43.75 42.5 C 43.75 43.191406 43.191406 43.75 42.5 43.75 L 37.5 43.75 C 36.808594 43.75 36.25 43.191406 36.25 42.5 L 36.25 37.5 C 36.25 36.808594 36.808594 36.25 37.5 36.25 L 42.5 36.25 C 43.191406 36.25 43.75 36.808594 43.75 37.5 Z "/>
+</g>
+</svg>

client/static/svg/icon-registry-editor.svg

@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80pt" height="80pt" viewBox="0 0 80 80" version="1.1">
+<defs>
+<linearGradient id="linear0" gradientUnits="userSpaceOnUse" x1="32" y1="11.875" x2="32" y2="38.7526" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear1" gradientUnits="userSpaceOnUse" x1="48" y1="11.375" x2="48" y2="38.2526" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear2" gradientUnits="userSpaceOnUse" x1="48" y1="11.875" x2="48" y2="38.7526" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear3" gradientUnits="userSpaceOnUse" x1="16" y1="9.75" x2="16" y2="56.2607" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear4" gradientUnits="userSpaceOnUse" x1="16" y1="9.75" x2="16" y2="56.2607" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear5" gradientUnits="userSpaceOnUse" x1="32" y1="9.75" x2="32" y2="56.2607" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear6" gradientUnits="userSpaceOnUse" x1="16" y1="9.75" x2="16" y2="56.2607" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear7" gradientUnits="userSpaceOnUse" x1="32" y1="9.75" x2="32" y2="56.2607" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear8" gradientUnits="userSpaceOnUse" x1="48" y1="9.75" x2="48" y2="56.2607" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+</defs>
+<g id="surface1">
+<path style=" stroke:none;fill-rule:evenodd;fill:url(#linear0);" d="M 33.75 15 L 46.25 15 L 46.25 27.5 L 33.75 27.5 Z "/>
+<path style=" stroke:none;fill-rule:evenodd;fill:url(#linear1);" d="M 53.75 35 L 66.25 35 L 66.25 47.5 L 53.75 47.5 Z "/>
+<path style=" stroke:none;fill-rule:evenodd;fill:url(#linear2);" d="M 53.75 15 L 66.25 15 L 66.25 27.5 L 53.75 27.5 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear3);" d="M 25 30 L 15 30 C 12.933594 30 11.25 28.316406 11.25 26.25 L 11.25 16.25 C 11.25 14.183594 12.933594 12.5 15 12.5 L 25 12.5 C 27.066406 12.5 28.75 14.183594 28.75 16.25 L 28.75 26.25 C 28.75 28.316406 27.066406 30 25 30 Z M 15 15 C 14.308594 15 13.75 15.5625 13.75 16.25 L 13.75 26.25 C 13.75 26.9375 14.308594 27.5 15 27.5 L 25 27.5 C 25.691406 27.5 26.25 26.9375 26.25 26.25 L 26.25 16.25 C 26.25 15.5625 25.691406 15 25 15 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear4);" d="M 25 50 L 15 50 C 12.933594 50 11.25 48.316406 11.25 46.25 L 11.25 36.25 C 11.25 34.183594 12.933594 32.5 15 32.5 L 25 32.5 C 27.066406 32.5 28.75 34.183594 28.75 36.25 L 28.75 46.25 C 28.75 48.316406 27.066406 50 25 50 Z M 15 35 C 14.308594 35 13.75 35.5625 13.75 36.25 L 13.75 46.25 C 13.75 46.9375 14.308594 47.5 15 47.5 L 25 47.5 C 25.691406 47.5 26.25 46.9375 26.25 46.25 L 26.25 36.25 C 26.25 35.5625 25.691406 35 25 35 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear5);" d="M 45 50 L 35 50 C 32.933594 50 31.25 48.316406 31.25 46.25 L 31.25 36.25 C 31.25 34.183594 32.933594 32.5 35 32.5 L 45 32.5 C 47.066406 32.5 48.75 34.183594 48.75 36.25 L 48.75 46.25 C 48.75 48.316406 47.066406 50 45 50 Z M 35 35 C 34.308594 35 33.75 35.5625 33.75 36.25 L 33.75 46.25 C 33.75 46.9375 34.308594 47.5 35 47.5 L 45 47.5 C 45.691406 47.5 46.25 46.9375 46.25 46.25 L 46.25 36.25 C 46.25 35.5625 45.691406 35 45 35 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear6);" d="M 25 70 L 15 70 C 12.933594 70 11.25 68.316406 11.25 66.25 L 11.25 56.25 C 11.25 54.183594 12.933594 52.5 15 52.5 L 25 52.5 C 27.066406 52.5 28.75 54.183594 28.75 56.25 L 28.75 66.25 C 28.75 68.316406 27.066406 70 25 70 Z M 15 55 C 14.308594 55 13.75 55.5625 13.75 56.25 L 13.75 66.25 C 13.75 66.9375 14.308594 67.5 15 67.5 L 25 67.5 C 25.691406 67.5 26.25 66.9375 26.25 66.25 L 26.25 56.25 C 26.25 55.5625 25.691406 55 25 55 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear7);" d="M 45 70 L 35 70 C 32.933594 70 31.25 68.316406 31.25 66.25 L 31.25 56.25 C 31.25 54.183594 32.933594 52.5 35 52.5 L 45 52.5 C 47.066406 52.5 48.75 54.183594 48.75 56.25 L 48.75 66.25 C 48.75 68.316406 47.066406 70 45 70 Z M 35 55 C 34.308594 55 33.75 55.5625 33.75 56.25 L 33.75 66.25 C 33.75 66.9375 34.308594 67.5 35 67.5 L 45 67.5 C 45.691406 67.5 46.25 66.9375 46.25 66.25 L 46.25 56.25 C 46.25 55.5625 45.691406 55 45 55 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear8);" d="M 65 70 L 55 70 C 52.933594 70 51.25 68.316406 51.25 66.25 L 51.25 56.25 C 51.25 54.183594 52.933594 52.5 55 52.5 L 65 52.5 C 67.066406 52.5 68.75 54.183594 68.75 56.25 L 68.75 66.25 C 68.75 68.316406 67.066406 70 65 70 Z M 55 55 C 54.308594 55 53.75 55.5625 53.75 56.25 L 53.75 66.25 C 53.75 66.9375 54.308594 67.5 55 67.5 L 65 67.5 C 65.691406 67.5 66.25 66.9375 66.25 66.25 L 66.25 56.25 C 66.25 55.5625 65.691406 55 65 55 Z "/>
+</g>
+</svg>

client/static/svg/icon-source-code.svg

@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80pt" height="80pt" viewBox="0 0 80 80" version="1.1">
+<defs>
+<linearGradient id="linear0" gradientUnits="userSpaceOnUse" x1="16" y1="11.3333" x2="16" y2="16.8961" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear1" gradientUnits="userSpaceOnUse" x1="22" y1="11.3333" x2="22" y2="16.8961" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear2" gradientUnits="userSpaceOnUse" x1="28" y1="11.3333" x2="28" y2="16.8961" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear3" gradientUnits="userSpaceOnUse" x1="32" y1="8" x2="32" y2="57.847" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear4" gradientUnits="userSpaceOnUse" x1="19.9197" y1="8" x2="19.9197" y2="57.847" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear5" gradientUnits="userSpaceOnUse" x1="44.3491" y1="8" x2="44.3491" y2="57.847" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear6" gradientUnits="userSpaceOnUse" x1="32.5" y1="8" x2="32.5" y2="57.847" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+</defs>
+<g id="surface1">
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear0);" d="M 20 20 C 18.621094 20 17.5 18.878906 17.5 17.5 C 17.5 16.121094 18.621094 15 20 15 C 21.378906 15 22.5 16.121094 22.5 17.5 C 22.5 18.878906 21.378906 20 20 20 Z M 20 17.5 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear1);" d="M 27.5 20 C 26.121094 20 25 18.878906 25 17.5 C 25 16.121094 26.121094 15 27.5 15 C 28.878906 15 30 16.121094 30 17.5 C 30 18.878906 28.878906 20 27.5 20 Z M 27.5 17.5 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear2);" d="M 35 20 C 33.621094 20 32.5 18.878906 32.5 17.5 C 32.5 16.121094 33.621094 15 35 15 C 36.378906 15 37.5 16.121094 37.5 17.5 C 37.5 18.878906 36.378906 20 35 20 Z M 35 17.5 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear3);" d="M 63.75 10 L 16.25 10 C 12.804688 10 10 12.804688 10 16.25 L 10 63.75 C 10 67.195313 12.804688 70 16.25 70 L 63.75 70 C 67.195313 70 70 67.195313 70 63.75 L 70 16.25 C 70 12.804688 67.195313 10 63.75 10 Z M 16.25 12.5 L 63.75 12.5 C 65.816406 12.5 67.5 14.183594 67.5 16.25 L 67.5 22.5 L 12.5 22.5 L 12.5 16.25 C 12.5 14.183594 14.183594 12.5 16.25 12.5 Z M 63.75 67.5 L 16.25 67.5 C 14.183594 67.5 12.5 65.816406 12.5 63.75 L 12.5 25 L 67.5 25 L 67.5 63.75 C 67.5 65.816406 65.816406 67.5 63.75 67.5 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear4);" d="M 28.964844 35.308594 L 20.042969 43.117188 C 19.5 43.589844 19.1875 44.277344 19.1875 45 C 19.1875 45.722656 19.5 46.410156 20.042969 46.886719 L 28.964844 54.691406 L 30.609375 52.808594 L 21.6875 44.996094 L 30.609375 37.191406 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear5);" d="M 51.910156 35.355469 L 50.164063 37.144531 L 58.207031 45.003906 L 50.164063 52.855469 L 51.910156 54.644531 L 59.953125 46.792969 C 60.441406 46.320313 60.707031 45.679688 60.707031 45 C 60.707031 44.320313 60.441406 43.683594 59.953125 43.207031 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear6);" d="M 33.824219 60.828125 L 36.175781 61.671875 L 47.425781 30.421875 L 45.074219 29.578125 Z "/>
+</g>
+</svg>

client/static/svg/icon-triangle-arrow.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80pt" height="80pt" viewBox="0 0 80 80" version="1.1">
+<defs>
+<linearGradient id="linear0" gradientUnits="userSpaceOnUse" x1="32" y1="4.6686" x2="32" y2="58.1697" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear1" gradientUnits="userSpaceOnUse" x1="32" y1="16.3353" x2="32" y2="47.0024" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+</defs>
+<g id="surface1">
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear0);" d="M 67.371094 72.496094 C 66.796875 72.496094 66.214844 72.367188 65.667969 72.097656 L 41.71875 60.269531 C 40.628906 59.730469 39.375 59.730469 38.28125 60.269531 L 14.332031 72.097656 C 12.867188 72.820313 11.15625 72.550781 9.976563 71.410156 C 8.75 70.226563 8.410156 68.453125 9.113281 66.886719 L 34.097656 11.375 C 35.171875 8.984375 37.433594 7.503906 40.003906 7.503906 C 42.570313 7.503906 44.832031 8.984375 45.910156 11.375 L 70.890625 66.886719 C 71.59375 68.453125 71.253906 70.226563 70.027344 71.410156 C 69.285156 72.125 68.335938 72.496094 67.371094 72.496094 Z M 66.773438 69.855469 C 67.546875 70.242188 68.128906 69.765625 68.289063 69.613281 C 68.652344 69.261719 68.929688 68.628906 68.605469 67.914063 L 43.625 12.398438 C 42.949219 10.898438 41.59375 10.003906 40 10.003906 C 38.40625 10.003906 37.050781 10.898438 36.375 12.398438 L 11.394531 67.910156 C 11.070313 68.628906 11.347656 69.261719 11.710938 69.609375 C 11.871094 69.765625 12.453125 70.238281 13.226563 69.855469 L 37.171875 58.027344 C 38.972656 57.140625 41.03125 57.140625 42.828125 58.027344 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear1);" d="M 55.734375 58.585938 L 41.363281 51.488281 C 40.5 51.0625 39.5 51.0625 38.636719 51.488281 L 24.265625 58.585938 C 22.933594 59.246094 21.53125 57.824219 22.152344 56.441406 L 37.140625 23.132813 C 38.269531 20.625 41.734375 20.625 42.859375 23.132813 L 57.847656 56.441406 C 58.46875 57.824219 57.066406 59.246094 55.734375 58.585938 Z "/>
+</g>
+</svg>

client/static/svg/icon-unlock.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80pt" height="80pt" viewBox="0 0 80 80" version="1.1">
+<defs>
+<linearGradient id="linear0" gradientUnits="userSpaceOnUse" x1="32" y1="25" x2="32" y2="55" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear1" gradientUnits="userSpaceOnUse" x1="32" y1="2" x2="32" y2="62.5129" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+</defs>
+<g id="surface1">
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear0);" d="M 40 31.25 C 29.660156 31.25 21.25 39.660156 21.25 50 C 21.25 60.339844 29.660156 68.75 40 68.75 C 50.339844 68.75 58.75 60.339844 58.75 50 C 58.75 39.660156 50.339844 31.25 40 31.25 Z M 42.5 53.222656 L 42.5 57.5 C 42.5 58.882813 41.382813 60 40 60 C 38.617188 60 37.5 58.882813 37.5 57.5 L 37.5 53.222656 C 35.296875 52.257813 33.75 50.0625 33.75 47.5 C 33.75 44.046875 36.546875 41.25 40 41.25 C 43.453125 41.25 46.25 44.046875 46.25 47.5 C 46.25 50.0625 44.703125 52.257813 42.5 53.222656 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear1);" d="M 53.75 27.679688 L 53.75 22.5 C 53.75 21.121094 52.628906 20 51.25 20 L 46.25 20 C 44.871094 20 43.75 21.121094 43.75 22.5 L 43.75 24.050781 C 42.519531 23.871094 41.277344 23.75 40 23.75 C 38.722656 23.75 37.480469 23.871094 36.25 24.050781 L 36.25 22.5 C 36.25 21.121094 35.128906 20 33.75 20 L 32.5 20 L 32.5 13.75 C 32.5 9.613281 35.863281 6.25 40 6.25 C 44.136719 6.25 47.5 9.613281 47.5 13.75 L 47.5 15 L 50 15 L 50 13.75 C 50 8.234375 45.515625 3.75 40 3.75 C 34.484375 3.75 30 8.234375 30 13.75 L 30 20 L 28.75 20 C 27.371094 20 26.25 21.121094 26.25 22.5 L 26.25 27.679688 C 18.765625 32.3125 13.75 40.570313 13.75 50 C 13.75 64.476563 25.523438 76.25 40 76.25 C 54.476563 76.25 66.25 64.476563 66.25 50 C 66.25 40.570313 61.234375 32.3125 53.75 27.679688 Z M 46.25 24.535156 L 46.25 22.5 L 51.25 22.5 L 51.25 26.320313 C 50.457031 25.941406 49.644531 25.601563 48.8125 25.304688 C 48.808594 25.300781 48.808594 25.300781 48.804688 25.300781 C 47.972656 25.003906 47.121094 24.746094 46.25 24.535156 Z M 28.75 22.5 L 33.75 22.5 L 33.75 24.535156 C 32.878906 24.746094 32.027344 25.003906 31.195313 25.300781 C 31.191406 25.304688 31.191406 25.304688 31.1875 25.304688 C 30.355469 25.605469 29.542969 25.941406 28.75 26.320313 Z M 40 73.75 C 26.902344 73.75 16.25 63.097656 16.25 50 C 16.25 36.902344 26.902344 26.25 40 26.25 C 53.097656 26.25 63.75 36.902344 63.75 50 C 63.75 63.097656 53.097656 73.75 40 73.75 Z "/>
+</g>
+</svg>

client/static/svg/icon-web-design.svg

@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80pt" height="80pt" viewBox="0 0 80 80" version="1.1">
+<defs>
+<linearGradient id="linear0" gradientUnits="userSpaceOnUse" x1="38" y1="25.5" x2="38" y2="32.51" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear1" gradientUnits="userSpaceOnUse" x1="32" y1="5.1667" x2="32" y2="60.1843" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear2" gradientUnits="userSpaceOnUse" x1="38" y1="5.1667" x2="38" y2="60.1843" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear3" gradientUnits="userSpaceOnUse" x1="18.5" y1="5.1667" x2="18.5" y2="60.1843" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear4" gradientUnits="userSpaceOnUse" x1="18.5" y1="5.1667" x2="18.5" y2="60.1843" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear5" gradientUnits="userSpaceOnUse" x1="18.5" y1="5.1667" x2="18.5" y2="60.1843" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear6" gradientUnits="userSpaceOnUse" x1="18.5" y1="5.1667" x2="18.5" y2="60.1843" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+</defs>
+<g id="surface1">
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear0);" d="M 38.75 33.75 L 38.75 38.75 C 38.75 39.441406 39.308594 40 40 40 L 41.914063 40 C 42.285156 40 46.289063 35.453125 46.289063 35.453125 C 46.824219 34.808594 47.828125 34.863281 48.289063 35.558594 C 48.289063 35.558594 52.5 40 51.917969 40 L 55 40 C 55.691406 40 56.25 39.4375 56.25 38.75 L 56.25 33.75 C 56.25 33.058594 55.691406 32.5 55 32.5 L 40 32.5 C 39.308594 32.5 38.75 33.058594 38.75 33.75 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear1);" d="M 66.25 7.5 L 13.75 7.5 C 11.683594 7.5 10 9.183594 10 11.25 L 10 58.75 C 10 60.816406 11.683594 62.5 13.75 62.5 L 35 62.5 L 35 60 L 13.75 60 C 13.058594 60 12.5 59.441406 12.5 58.75 L 12.5 57.269531 C 12.890625 57.410156 13.308594 57.5 13.75 57.5 L 35 57.5 L 35 55 L 13.75 55 C 13.058594 55 12.5 54.441406 12.5 53.75 L 12.5 20 L 67.5 20 L 67.5 53.75 C 67.5 54.441406 66.941406 55 66.25 55 L 60 55 L 60 57.5 L 66.25 57.5 C 66.691406 57.5 67.109375 57.410156 67.5 57.269531 L 67.5 58.75 C 67.5 59.441406 66.941406 60 66.25 60 L 60 60 L 60 62.5 L 66.25 62.5 C 68.316406 62.5 70 60.816406 70 58.75 L 70 11.25 C 70 9.183594 68.316406 7.5 66.25 7.5 Z M 35.476563 10 L 39.226563 17.5 L 33.273438 17.5 L 29.523438 10 Z M 12.5 11.25 C 12.5 10.558594 13.058594 10 13.75 10 L 26.726563 10 L 30.476563 17.5 L 12.5 17.5 Z M 42.023438 17.5 L 38.273438 10 L 66.25 10 C 66.941406 10 67.5 10.558594 67.5 11.25 L 67.5 17.5 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear2);" d="M 60.058594 49.085938 L 57.335938 45 L 58.75 45 C 60.128906 45 61.25 43.878906 61.25 42.5 L 61.25 30 C 61.25 28.621094 60.128906 27.5 58.75 27.5 L 36.25 27.5 C 34.871094 27.5 33.75 28.621094 33.75 30 L 33.75 42.5 C 33.75 43.878906 34.871094 45 36.25 45 L 37.664063 45 L 34.941406 49.085938 C 34.058594 50.40625 34.109375 52.148438 35.0625 53.414063 L 37.609375 56.8125 C 37.546875 57.03125 37.5 57.257813 37.5 57.5 L 37.5 60 C 37.5 61.378906 38.621094 62.5 40 62.5 L 40 68.75 C 40 70.816406 41.683594 72.5 43.75 72.5 L 51.25 72.5 C 53.316406 72.5 55 70.816406 55 68.75 L 55 62.5 C 56.378906 62.5 57.5 61.378906 57.5 60 L 57.5 57.5 C 57.5 57.257813 57.453125 57.03125 57.390625 56.8125 L 59.9375 53.417969 C 60.890625 52.148438 60.941406 50.40625 60.058594 49.085938 Z M 36.25 42.5 L 36.25 30 L 58.75 30 L 58.75 42.5 L 55.667969 42.5 L 50.621094 34.929688 C 49.921875 33.882813 48.757813 33.257813 47.5 33.257813 C 46.242188 33.257813 45.078125 33.882813 44.378906 34.929688 L 39.332031 42.5 Z M 48.75 48.75 C 48.75 49.441406 48.191406 50 47.5 50 C 46.808594 50 46.25 49.441406 46.25 48.75 C 46.25 48.058594 46.808594 47.5 47.5 47.5 C 48.191406 47.5 48.75 48.058594 48.75 48.75 Z M 52.5 68.75 C 52.5 69.441406 51.941406 70 51.25 70 L 43.75 70 C 43.058594 70 42.5 69.441406 42.5 68.75 L 42.5 62.5 L 52.5 62.5 Z M 40 60 L 40 57.5 L 55 57.5 L 55.003906 60 Z M 57.9375 51.914063 L 55.570313 55.074219 C 55.386719 55.027344 55.199219 55 55 55 L 40 55 C 39.800781 55 39.613281 55.027344 39.429688 55.074219 L 37.058594 51.914063 C 36.742188 51.492188 36.726563 50.914063 37.019531 50.472656 L 46.25 36.628906 L 46.25 45.230469 C 44.796875 45.75 43.75 47.125 43.75 48.75 C 43.75 50.820313 45.433594 52.5 47.5 52.5 C 49.566406 52.5 51.25 50.820313 51.25 48.75 C 51.25 47.125 50.203125 45.75 48.75 45.230469 L 48.75 36.628906 L 57.980469 50.472656 C 58.273438 50.910156 58.257813 51.492188 57.9375 51.914063 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear3);" d="M 17.5 27.5 L 28.75 27.5 L 28.75 30 L 17.5 30 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear4);" d="M 17.5 32.5 L 28.75 32.5 L 28.75 35 L 17.5 35 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear5);" d="M 17.5 37.5 L 28.75 37.5 L 28.75 40 L 17.5 40 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear6);" d="M 17.5 42.5 L 28.75 42.5 L 28.75 45 L 17.5 45 Z "/>
+</g>
+</svg>

client/store/admin.js

@@ -3,8 +3,12 @@ import { make } from 'vuex-pathify'
 /* global siteConfig */
 
 const state = {
-  theme: {
-    dark: siteConfig.darkMode
+  info: {
+    currentVersion: 'n/a',
+    latestVersion: 'n/a',
+    groupsTotal: 0,
+    pagesTotal: 0,
+    usersTotal: 0
   }
 }
 

dev/docker/docker-compose.yml

@@ -28,6 +28,17 @@ services:
     ports:
       - "15432:5432"
 
+  adminer:
+    image: adminer:latest
+    environment:
+      ADMINER_DESIGN: pappu687
+    logging:
+      driver: "none"
+    networks:
+      - wikinet
+    ports:
+      - "3001:8080"
+
   wiki:
     build:
       context: .

server/app/data.yml

@@ -39,6 +39,9 @@ defaults:
       darkMode: false
     # System defaults
     setup: false
+    paths:
+      content: ./content
+      data: ./data
     cors:
       credentials: true
       maxAge: 600

server/db/migrations/2.0.0.js

@@ -184,6 +184,7 @@ exports.up = knex => {
       table.string('location').defaultTo('')
       table.string('pictureUrl')
       table.string('timezone').notNullable().defaultTo('America/New_York')
+      table.boolean('isSystem').notNullable().defaultTo(false)
       table.string('createdAt').notNullable()
       table.string('updatedAt').notNullable()
     })

server/graph/resolvers/user.js

@@ -11,7 +11,7 @@ module.exports = {
   UserQuery: {
     async list(obj, args, context, info) {
       return WIKI.models.users.query()
-        .select('id', 'email', 'name', 'providerKey', 'createdAt')
+        .select('id', 'email', 'name', 'providerKey', 'isSystem', 'createdAt')
     },
     async search(obj, args, context, info) {
       return WIKI.models.users.query()
@@ -22,6 +22,7 @@ module.exports = {
     },
     async single(obj, args, context, info) {
       let usr = await WIKI.models.users.query().findById(args.id)
+      console.info(usr)
       usr.password = ''
       usr.tfaSecret = ''
       return usr
@@ -39,8 +40,7 @@ module.exports = {
         email: args.email,
         name: args.name,
         provider: args.provider,
-        providerId: args.providerId,
-        role: args.role
+        providerId: args.providerId
       }).where('id', args.id)
     },
     resetPassword(obj, args) {
@@ -52,7 +52,7 @@ module.exports = {
   },
   User: {
     groups(usr) {
-      return usr.getGroups()
+      return usr.$relatedQuery('groups')
     }
   }
 }

server/graph/schemas/user.graphql

@@ -38,18 +38,16 @@ type UserMutation {
     email: String!
     name: String
     passwordRaw: String
-    provider: String!
+    providerKey: String!
     providerId: String
-    role: UserRole!
   ): UserResponse @auth(requires: ["write:users", "manage:users", "manage:system"])
 
   update(
     id: Int!
     email: String
     name: String
-    provider: String
+    providerKey: String
     providerId: String
-    role: UserRole
   ): UserResponse @auth(requires: ["manage:users", "manage:system"])
 
   delete(
@@ -70,12 +68,6 @@ type UserMutation {
 # TYPES
 # -----------------------------------------------
 
-enum UserRole {
-  guest
-  user
-  admin
-}
-
 type UserResponse {
   responseResult: ResponseStatus!
   user: User
@@ -86,6 +78,7 @@ type UserMinimal {
   name: String!
   email: String!
   providerKey: String!
+  isSystem: Boolean!
   createdAt: Date!
 }
 
@@ -95,8 +88,11 @@ type User {
   email: String!
   providerKey: String!
   providerId: String
-  role: UserRole!
+  isSystem: Boolean!
+  location: String!
+  jobTitle: String!
+  timezone: String!
   createdAt: Date!
   updatedAt: Date!
-  groups: [Group]
+  groups: [Group]!
 }

server/models/users.js

@@ -32,6 +32,7 @@ module.exports = class User extends Model {
         jobTitle: {type: 'string'},
         location: {type: 'string'},
         pictureUrl: {type: 'string'},
+        isSystem: {type: 'boolean'},
         createdAt: {type: 'string'},
         updatedAt: {type: 'string'}
       }

server/setup.js

@@ -94,7 +94,7 @@ module.exports = () => {
       WIKI.logger.info('Creating data directories...')
       const dataPath = path.join(process.cwd(), 'data')
       await fs.ensureDir(dataPath)
-      await fs.ensureDir(path.join(dataPath, 'cache'))
+      await fs.emptyDir(path.join(dataPath, 'cache'))
       await fs.ensureDir(path.join(dataPath, 'uploads'))
 
       // Set config
@@ -221,7 +221,8 @@ module.exports = () => {
         password: '',
         locale: 'en',
         defaultEditor: 'markdown',
-        tfaIsActive: false
+        tfaIsActive: false,
+        isSystem: true
       })
       await guestUser.$relatedQuery('groups').relate(guestGroup.id)
 

server/views/new.pug

@@ -5,12 +5,12 @@ block body
     v-app
       .newpage
         .newpage-content
-          img.animated.fadeIn(src='/svg/henry-thinking.svg', alt='Henry')
+          img.animated.fadeIn(src='/svg/icon-close-window.svg', alt='Henry')
           .headline= t('newpage.title')
           .subheading.mt-3= t('newpage.subtitle')
           v-btn.mt-5(href='/e' + pagePath, large)
             v-icon(left) add
             span= t('newpage.create')
-          v-btn.mt-2(color='blue lighten-4', href='javascript:window.history.go(-1);', large, outline)
+          v-btn.mt-2(color='purple lighten-3', href='javascript:window.history.go(-1);', large, outline)
             v-icon(left) arrow_back
             span= t('newpage.goback')