liz/wikijs-fork
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: user menu + jwt certs + UI fixes

Browse Source
This commit is contained in:
Nicolas Giard
2018-12-02 21:42:43 -05:00
parent 74aa09f39c
commit f856da074e
25 changed files with 327 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
client/components/common/criterias-item.vue
View File

@@ -1,7 +1,14 @@
<template lang="pug">
.criterias-item
//- Type
v-select(solo, :items='filteredCriteriaTypes', v-model='item.type', placeholder='Rule Type', ref='typeSelect')
v-select(
solo
:items='filteredCriteriaTypes'
v-model='item.type'
placeholder='Rule Type'
ref='typeSelect'
hide-details
)
template(slot='item', slot-scope='data')
v-list-tile-avatar
v-avatar(:color='data.item.color', size='40', tile): v-icon(color='white') {{ data.item.icon }}
@@ -10,7 +17,15 @@
v-list-tile-sub-title.caption(v-html='data.item.description')
//- Operator
v-select(solo, :items='filteredCriteriaOperators', v-model='item.operator', placeholder='Operator', :disabled='!item.type', :class='!item.type ? "blue-grey lighten-4" : ""')
v-select(
solo
:items='filteredCriteriaOperators'
v-model='item.operator'
placeholder='Operator'
:disabled='!item.type'
:class='!item.type ? "blue-grey lighten-4" : ""'
hide-details
)
template(slot='item', slot-scope='data')
v-list-tile-avatar
v-avatar.white--text(color='blue', size='30', tile) {{ data.item.icon }}
@@ -18,12 +33,58 @@
v-list-tile-title(v-html='data.item.text')
//- Value
v-select(v-if='item.type === "country"', solo, :items='countries', v-model='item.value', placeholder='Countries...', multiple, item-text='name', item-value='code')
v-text-field(v-else-if='item.type === "path"', solo, v-model='item.value', label='Path (e.g. /section)')
v-text-field(v-else-if='item.type === "date"', solo, @click.native.stop='dateActivator = true', v-model='item.value', label='YYYY-MM-DD', readonly)
v-text-field(v-else-if='item.type === "time"', solo, @click.native.stop='timeActivator = true', v-model='item.value', label='HH:MM', readonly)
v-select(v-else-if='item.type === "group"', solo, :items='groups', v-model='item.value', placeholder='Group...', item-text='name', item-value='id')
v-text-field.blue-grey.lighten-4(v-else, solo, disabled)
v-select(
v-if='item.type === "country"'
solo
:items='countries'
v-model='item.value'
placeholder='Countries...'
multiple
item-text='name'
item-value='code'
hide-details
)
v-text-field(
v-else-if='item.type === "path"'
solo
v-model='item.value'
label='Path (e.g. /section)'
hide-details
)
v-text-field(
v-else-if='item.type === "date"'
solo
@click.native.stop='dateActivator = true'
v-model='item.value'
label='YYYY-MM-DD'
readonly
hide-details
)
v-text-field(
v-else-if='item.type === "time"'
solo
@click.native.stop='timeActivator = true'
v-model='item.value'
label='HH:MM'
readonly
hide-details
)
v-select(
v-else-if='item.type === "group"'
solo
:items='groups'
v-model='item.value'
placeholder='Group...'
item-text='name'
item-value='id'
hide-details
)
v-text-field.blue-grey.lighten-4(
v-else
solo
disabled
hide-details
)
v-dialog(lazy, v-model='dateActivator', width='290px', ref='dateDialog')
v-date-picker(v-model='item.value', scrollable, color='primary')

77
client/components/common/nav-header.vue
View File

@@ -87,29 +87,46 @@
icon
)
v-icon(color='grey') search
v-tooltip(bottom)
v-tooltip(bottom, v-if='isAuthenticated && isAdmin')
v-btn.btn-animate-rotate(icon, href='/a', slot='activator')
v-icon(color='grey') settings
span Admin
v-menu(offset-y, min-width='300')
v-tooltip(bottom, slot='activator')
v-btn.btn-animate-grow(icon, slot='activator', outline, color='grey darken-3')
v-btn.btn-animate-grow(icon, slot='activator', outline, :color='isAuthenticated ? `blue` : `grey darken-3`')
v-icon(color='grey') account_circle
span Account
v-list.py-0(:light='!$vuetify.dark')
v-list-tile.py-3(avatar)
v-list-tile-avatar
v-avatar.red(:size='40'): span.white--text.subheading JD
v-list-tile-content
v-list-tile-title John Doe
v-list-tile-sub-title john.doe@example.com
v-divider.my-0
v-list-tile(href='/p')
v-list-tile-action: v-icon(color='red') person
v-list-tile-title Profile
v-list-tile(@click='logout')
v-list-tile-action: v-icon(color='red') exit_to_app
v-list-tile-title Logout
v-list.py-0
template(v-if='isAuthenticated')
v-list-tile.py-3.grey(avatar, :class='$vuetify.dark ? `darken-4-l5` : `lighten-5`')
v-list-tile-avatar
v-avatar.blue(v-if='picture.kind === `initials`', :size='40')
span.white--text.subheading {{picture.initials}}
v-avatar(v-else-if='picture.kind === `image`', :size='40')
v-img(:src='picture.url')
v-list-tile-content
v-list-tile-title {{name}}
v-list-tile-sub-title {{email}}
v-divider.my-0
v-list-tile(href='/w')
v-list-tile-action: v-icon(color='blue') web
v-list-tile-title My Wiki
v-divider.my-0
v-list-tile(href='/p')
v-list-tile-action: v-icon(color='blue') person
v-list-tile-title Profile
v-divider.my-0
v-list-tile(@click='logout')
v-list-tile-action: v-icon(color='red') exit_to_app
v-list-tile-title Logout
template(v-else)
v-list-tile(href='/login')
v-list-tile-action: v-icon(color='grey') person
v-list-tile-title Login
v-divider.my-0
v-list-tile(href='/register')
v-list-tile-action: v-icon(color='grey') person_add
v-list-tile-title Register
page-selector(mode='create', v-model='newPageModal')
</template>
@@ -143,7 +160,33 @@ export default {
isLoading: get('isLoading'),
title: get('site/title'),
path: get('page/path'),
mode: get('page/mode')
mode: get('page/mode'),
name: get('user/name'),
email: get('user/email'),
pictureUrl: get('user/pictureUrl'),
isAuthenticated: get('user/authenticated'),
permissions: get('user/permissions'),
picture() {
if (this.pictureUrl && this.pictureUrl.length > 1) {
return {
kind: 'image',
url: this.pictureUrl
}
} else {
const nameParts = this.name.toUpperCase().split(' ')
let initials = _.head(nameParts).charAt(0)
if (nameParts.length > 1) {
initials += _.last(nameParts).charAt(0)
}
return {
kind: 'initials',
initials
}
}
},
isAdmin() {
return _.includes(this.permissions, 'manage:system')
}
},
created() {
if (this.hideSearch || this.dense || this.$vuetify.breakpoint.smAndDown) {