Skip to content

W
wiki-js
Commit 33c05b32 authored by NGPixel's avatar NGPixel
Browse files
Options

refactor: admin-edit-user -> vue + fixes

parent d590c67d
Hide whitespace changes
Inline Side-by-side
Showing with 276 additions and 274 deletions
client/js/app.js
View file @ 33c05b32
...@@ -74,6 +74,7 @@ import pageLoaderComponent from './components/page-loader.vue' ...@@ -74,6 +74,7 @@ import pageLoaderComponent from './components/page-loader.vue'
import searchComponent from './components/search.vue' import searchComponent from './components/search.vue'
import treeComponent from './components/tree.vue' import treeComponent from './components/tree.vue'
import adminEditUserComponent from './pages/admin-edit-user.component.js'
import adminProfileComponent from './pages/admin-profile.component.js' import adminProfileComponent from './pages/admin-profile.component.js'
import adminSettingsComponent from './pages/admin-settings.component.js' import adminSettingsComponent from './pages/admin-settings.component.js'
import contentViewComponent from './pages/content-view.component.js' import contentViewComponent from './pages/content-view.component.js'
...@@ -163,6 +164,7 @@ $(() => { ...@@ -163,6 +164,7 @@ $(() => {
mixins: [helpers], mixins: [helpers],
components: { components: {
alert: alertComponent, alert: alertComponent,
adminEditUser: adminEditUserComponent,
adminProfile: adminProfileComponent, adminProfile: adminProfileComponent,
adminSettings: adminSettingsComponent, adminSettings: adminSettingsComponent,
anchor: anchorComponent, anchor: anchorComponent,
......
client/js/components/modal-create-user.vue
View file @ 33c05b32
...@@ -8,11 +8,11 @@ ...@@ -8,11 +8,11 @@
.modal-content(v-show='isShown') .modal-content(v-show='isShown')
header.is-blue header.is-blue
span {{ $t('modal.createusertitle') }} span {{ $t('modal.createusertitle') }}
p.modal-notify(v-bind:class='{ "is-active": isLoading }'): i p.modal-notify(:class='{ "is-active": isLoading }'): i
section section
label.label {{ $t('modal.createuseremail') }} label.label {{ $t('modal.createuseremail') }}
p.control.is-fullwidth p.control.is-fullwidth
input.input(type='text', v-bind:placeholder='$t("modal.createuseremailplaceholder")', v-model='email', ref='createUserEmailInput') input.input(type='text', :placeholder='$t("modal.createuseremailplaceholder")', v-model='email', ref='createUserEmailInput')
section section
label.label {{ $t('modal.createuserprovider') }} label.label {{ $t('modal.createuserprovider') }}
p.control.is-fullwidth p.control.is-fullwidth
...@@ -30,76 +30,76 @@ ...@@ -30,76 +30,76 @@
section(v-if='provider=="local"') section(v-if='provider=="local"')
label.label {{ $t('modal.createuserfullname') }} label.label {{ $t('modal.createuserfullname') }}
p.control.is-fullwidth p.control.is-fullwidth
input.input(type='text', v-bind:placeholder='$t("modal.createusernameplaceholder")', v-model='name') input.input(type='text', :placeholder='$t("modal.createusernameplaceholder")', v-model='name')
footer footer
a.button.is-grey.is-outlined(v-on:click='cancel') {{ $t('modal.discard') }} a.button.is-grey.is-outlined(@click='cancel') {{ $t('modal.discard') }}
a.button(v-on:click='create', v-if='provider=="local"', v-bind:disabled='isLoading', v-bind:class='{ "is-disabled": isLoading, "is-blue": !loading }') {{ $t('modal.createuser') }} a.button(@click='create', v-if='provider=="local"', :disabled='isLoading', :class='{ "is-disabled": isLoading, "is-blue": !loading }') {{ $t('modal.createuser') }}
a.button(v-on:click='create', v-if='provider!="local"', v-bind:disabled='isLoading', v-bind:class='{ "is-disabled": isLoading, "is-blue": !loading }') {{ $t('modal.createuserauthorize') }} a.button(@click='create', v-if='provider!="local"', :disabled='isLoading', :class='{ "is-disabled": isLoading, "is-blue": !loading }') {{ $t('modal.createuserauthorize') }}
</template> </template>
<script> <script>
export default { export default {
name: 'modal-create-user', name: 'modal-create-user',
data () { data() {
return { return {
email: '', email: '',
provider: 'local', provider: 'local',
password: '', password: '',
name: '', name: '',
isLoading: false isLoading: false
} }
},
computed: {
isShown() {
return this.$store.state.modalCreateUser.shown
}
},
methods: {
init() {
let self = this
self._.delay(() => {
self.$refs.createUserEmailInput.focus()
}, 100)
}, },
computed: { cancel() {
isShown () { this.$store.dispatch('modalCreateUser/close')
return this.$store.state.modalCreateUser.shown this.email = ''
} this.provider = 'local'
}, },
methods: { create() {
init () { let self = this
let self = this this.isLoading = true
self._.delay(() => { this.$http.post('/admin/users/create', {
self.$refs.createUserEmailInput.focus() email: this.email,
}, 100) provider: this.provider,
}, password: this.password,
cancel () { name: this.name
this.$store.dispatch('modalCreateUser/close') }).then(resp => {
this.email = '' return resp.json()
this.provider = 'local' }).then(resp => {
}, this.isLoading = false
create () { if (resp.ok) {
let self = this this.cancel()
this.isLoading = true window.location.reload(true)
this.$http.post('/admin/users/create', { } else {
email: this.email,
provider: this.provider,
password: this.password,
name: this.name
}).then(resp => {
return resp.json()
}).then(resp => {
this.isLoading = false
if (resp.ok) {
this.cancel()
window.location.reload(true)
} else {
self.$store.dispatch('alert', {
style: 'red',
icon: 'square-cross',
msg: resp.msg
})
}
}).catch(err => {
this.isLoading = false
self.$store.dispatch('alert', { self.$store.dispatch('alert', {
style: 'red', style: 'red',
icon: 'square-cross', icon: 'square-cross',
msg: 'Error: ' + err.body.msg msg: resp.msg
}) })
}
}).catch(err => {
this.isLoading = false
self.$store.dispatch('alert', {
style: 'red',
icon: 'square-cross',
msg: 'Error: ' + err.body.msg
}) })
}, })
mounted () {
this.$root.$on('modalCreateUser/init', this.init)
}
} }
},
mounted() {
this.$root.$on('modalCreateUser/init', this.init)
} }
}
</script> </script>
client/js/components/modal-delete-user.vue
View file @ 33c05b32
...@@ -12,54 +12,54 @@ ...@@ -12,54 +12,54 @@
section section
span {{ $t('modal.deleteuserwarning') }} span {{ $t('modal.deleteuserwarning') }}
footer footer
a.button.is-grey.is-outlined(v-on:click='cancel') {{ $t('modal.abort') }} a.button.is-grey.is-outlined(@click='cancel') {{ $t('modal.abort') }}
a.button.is-red(v-on:click='deleteUser') {{ $t('modal.delete') }} a.button.is-red(@click='deleteUser') {{ $t('modal.delete') }}
</template> </template>
<script> <script>
export default { export default {
name: 'modal-delete-user', name: 'modal-delete-user',
props: ['currentUser'], props: ['currentUser'],
data () { data() {
return { return {
isLoading: false isLoading: false
} }
}, },
computed: { computed: {
isShown () { isShown() {
return this.$store.state.modalDeleteUser.shown return this.$store.state.modalDeleteUser.shown
} }
},
methods: {
cancel: function () {
this.isLoading = false
this.$store.dispatch('modalDeleteUser/close')
}, },
methods: { deleteUser: function () {
cancel: function () { let self = this
this.isLoading = false this.isLoading = true
this.$store.dispatch('modalDeleteUser/close') this.$http.delete('/admin/users/' + this.currentUser).then(resp => {
}, return resp.json()
discard: function () { }).then(resp => {
let self = this if (resp.ok) {
this.isLoading = true window.location.assign('/admin/users')
this.$http.delete('/admin/users/' + this.currentUser).then(resp => { } else {
return resp.json()
}).then(resp => {
if (resp.ok) {
window.location.assign('/admin/users')
} else {
self.isLoading = false
self.$store.dispatch('alert', {
style: 'red',
icon: 'square-cross',
msg: resp.msg
})
}
}).catch(err => {
self.isLoading = false self.isLoading = false
self.$store.dispatch('alert', { self.$store.dispatch('alert', {
style: 'red', style: 'red',
icon: 'square-cross', icon: 'square-cross',
msg: 'Error: ' + err.body.msg msg: resp.msg
}) })
}
}).catch(err => {
self.isLoading = false
self.$store.dispatch('alert', {
style: 'red',
icon: 'square-cross',
msg: 'Error: ' + err.body.msg
}) })
} })
} }
} }
}
</script> </script>
client/js/pages/admin.js → client/js/pages/admin-edit-user.component.js
View file @ 33c05b32
'use strict' 'use strict'
/* global usrData */ export default {
name: 'admin-edit-user',
import $ from 'jquery' props: ['usrdata'],
import _ from 'lodash' data() {
import Vue from 'vue' return {
id: '',
module.exports = (alerts) => { email: '',
if ($('#page-type-admin-users-edit').length) { password: '********',
let vueEditUser = new Vue({ name: '',
el: '#page-type-admin-users-edit', rights: [],
data: { roleoverride: 'none'
id: '', }
email: '', },
password: '********', methods: {
name: '', addRightsRow() {
rights: [], this.rights.push({
roleoverride: 'none' role: 'write',
}, path: '/',
methods: { exact: false,
addRightsRow: (ev) => { deny: false
vueEditUser.rights.push({ })
role: 'write', },
removeRightsRow(idx) {
this._.pullAt(this.rights, idx)
this.$forceUpdate()
},
saveUser() {
let self = this
let formattedRights = this._.cloneDeep(this.rights)
switch (this.roleoverride) {
case 'admin':
formattedRights.push({
role: 'admin',
path: '/', path: '/',
exact: false, exact: false,
deny: false deny: false
}) })
}, break
removeRightsRow: (idx) => {
_.pullAt(vueEditUser.rights, idx)
vueEditUser.$forceUpdate()
},
saveUser: (ev) => {
let formattedRights = _.cloneDeep(vueEditUser.rights)
switch (vueEditUser.roleoverride) {
case 'admin':
formattedRights.push({
role: 'admin',
path: '/',
exact: false,
deny: false
})
break
}
$.post(window.location.href, {
password: vueEditUser.password,
name: vueEditUser.name,
rights: JSON.stringify(formattedRights)
}).done((resp) => {
alerts.pushSuccess('Saved successfully', 'Changes have been applied.')
}).fail((jqXHR, txtStatus, resp) => {
alerts.pushError('Error', resp)
})
}
},
created: function () {
this.id = usrData._id
this.email = usrData.email
this.name = usrData.name
if (_.find(usrData.rights, { role: 'admin' })) {
this.rights = _.reject(usrData.rights, ['role', 'admin'])
this.roleoverride = 'admin'
} else {
this.rights = usrData.rights
}
} }
}) this.$http.post(window.location.href, {
require('../modals/admin-users-delete.js')(alerts) password: this.password,
name: this.name,
rights: JSON.stringify(formattedRights)
}).then(resp => {
self.$store.dispatch('alert', {
style: 'green',
icon: 'check',
msg: 'Changes have been applied successfully.'
})
}).catch(err => {
self.$store.dispatch('alert', {
style: 'red',
icon: 'square-cross',
msg: 'Error: ' + err.body.msg
})
})
}
},
mounted() {
let usr = JSON.parse(this.usrdata)
this.id = usr._id
this.email = usr.email
this.name = usr.name
if (this._.find(usr.rights, { role: 'admin' })) {
this.rights = this._.reject(usr.rights, ['role', 'admin'])
this.roleoverride = 'admin'
} else {
this.rights = usr.rights
}
} }
} }
server/locales/en/common.json
View file @ 33c05b32
...@@ -22,6 +22,7 @@ ...@@ -22,6 +22,7 @@
"discard": "Discard", "discard": "Discard",
"edit": "Edit", "edit": "Edit",
"history": "History", "history": "History",
"home": "Home",
"login": "Login", "login": "Login",
"logout": "Logout", "logout": "Logout",
"move": "Move", "move": "Move",
...@@ -46,4 +47,4 @@ ...@@ -46,4 +47,4 @@
"source": "Loading source...", "source": "Loading source...",
"editor": "Loading editor..." "editor": "Loading editor..."
} }
} }
\ No newline at end of file
server/views/pages/admin/_layout.pug
View file @ 33c05b32
extends ../../layout.pug extends ../../layout.pug
block rootNavCenter block rootNavCenter
h2.nav-item= t('nav.account') h2.nav-item= t('nav.settings')
block rootNavRight block rootNavRight
loading-spinner loading-spinner
...@@ -48,7 +48,7 @@ block content ...@@ -48,7 +48,7 @@ block content
a(href='/admin/settings') a(href='/admin/settings')
i.icon-cog i.icon-cog
span= t('nav.syssettings') span= t('nav.syssettings')
li //-li
a(href='/admin/theme') a(href='/admin/theme')
i.icon-drop i.icon-drop
span= t('nav.theme') span= t('nav.theme')
......
server/views/pages/admin/users-edit.pug
View file @ 33c05b32
...@@ -8,116 +8,114 @@ block rootNavRight ...@@ -8,116 +8,114 @@ block rootNavRight
span= t('admin:users.returntousers') span= t('admin:users.returntousers')
block adminContent block adminContent
#page-type-admin-users-edit admin-edit-user(inline-template, usrdata=JSON.stringify(usr))
.hero div
h1.title#title= t('admin:users.edituser') .hero
h2.subtitle= usr.email h1.title= t('admin:users.edituser')
table.table h2.subtitle= usr.email
thead table.table
tr thead
th= t('admin:users.uniqueid') tr
th= t('admin:users.provider') th= t('admin:users.uniqueid')
th= t('admin:users.createdon') th= t('admin:users.provider')
th= t('admin:users.updatedon') th= t('admin:users.createdon')
tbody th= t('admin:users.updatedon')
tr tbody
td.is-centered= usr._id tr
td.is-centered.has-icons td.is-centered= usr._id
case usr.provider td.is-centered.has-icons
when 'local': i.icon-server case usr.provider
when 'windowslive': i.icon-windows2.is-blue when 'local': i.icon-server
when 'azure': i.icon-windows2.is-blue when 'windowslive': i.icon-windows2.is-blue
when 'google': i.icon-google.is-blue when 'azure': i.icon-windows2.is-blue
when 'facebook': i.icon-facebook.is-indigo when 'google': i.icon-google.is-blue
when 'github': i.icon-github.is-grey when 'facebook': i.icon-facebook.is-indigo
when 'slack': i.icon-slack.is-purple when 'github': i.icon-github.is-grey
when 'ldap': i.icon-arrow-repeat-outline when 'slack': i.icon-slack.is-purple
default: i.icon-warning when 'ldap': i.icon-arrow-repeat-outline
= t('auth:providers.' + usr.provider) default: i.icon-warning
td.is-centered= moment(usr.createdAt).format('lll') = t('auth:providers.' + usr.provider)
td.is-centered= moment(usr.updatedAt).format('lll') td.is-centered= moment(usr.createdAt).format('lll')
.form-sections td.is-centered= moment(usr.updatedAt).format('lll')
section .form-sections
label.label= t('admin:profile.email')
p.control.is-fullwidth
input.input(type='text', placeholder='john.smith@example.com', v-model='email', disabled=!usrOpts.canChangeEmail)
section
label.label= t('admin:profile.displayname')
p.control.is-fullwidth
input.input(type='text', placeholder=t('admin:profile.displaynameexample'), v-model='name', disabled=!usrOpts.canChangeName)
if usrOpts.canChangePassword
section section
label.label= t('admin:profile.password') label.label= t('admin:profile.email')
p.control.is-fullwidth p.control.is-fullwidth
input.input(type='password', placeholder=t('admin:profile.password'), v-model='password', value='********') input.input(type='text', placeholder='john.smith@example.com', v-model='email', disabled=!usrOpts.canChangeEmail)
section section
label.label Access Rights label.label= t('admin:profile.displayname')
table.table p.control.is-fullwidth
thead.is-teal input.input(type='text', placeholder=t('admin:profile.displaynameexample'), v-model='name', disabled=!usrOpts.canChangeName)
tr if usrOpts.canChangePassword
th
th(style={width: '200px'}) Permission(s)
th Path
th(style={width: '150px'}) Access
th(style={width: '50px'})
tbody
tr(v-for='(right, idx) in rights', v-cloak)
td.is-icon
i.icon-marquee-plus.is-green(v-if='right.deny === false || right.deny === "false"')
i.icon-marquee-minus.is-red(v-if='right.deny === true || right.deny === "true"')
td
p.control.is-fullwidth
select(v-model='right.role')
option(value='write') Read and Write
option(value='read') Read Only
td
.columns
.column.is-narrow
p.control
select(v-model='right.exact')
option(value='false') Path starts with:
option(value='true') Path match exactly:
.column
p.control.is-fullwidth
input.input(type='text', placeholder='/', v-model='right.path')
td
p.control.is-fullwidth
select(v-model='right.deny')
option(value='false') Allow
option(value='true') Deny
td.is-centered.has-action-icons
i.icon-delete.is-red(v-on:click='removeRightsRow(idx)')
tr(v-if='rights.length < 1', v-cloak)
td.is-icon
td.is-centered(colspan='3'): em No additional access rights
td.is-centered.has-action-icons
.table-actions
button.button.is-blue(v-on:click='addRightsRow')
i.icon-plus
span Add New Row
section
label.label Role Override
p.control.is-fullwidth
select(v-model='roleoverride', disabled=!usrOpts.canChangeRole)
option(value='none') None
option(value='admin') Global Administrator
.columns.is-gapless
.column
section
button.button.is-green(v-on:click='saveUser')
i.icon-check
span Save Changes
a.button.button.is-grey.is-outlined(href='/admin/users')
i.icon-cancel
span Discard
.column.is-narrow
section section
if usrOpts.canBeDeleted label.label= t('admin:profile.password')
button.button.is-red(v-on:click='$store.dispatch("modalDeleteUser/open")') p.control.is-fullwidth
i.icon-trash2 input.input(type='password', placeholder=t('admin:profile.password'), v-model='password', value='********')
span Delete Account section
label.label Access Rights
table.table
thead.is-teal
tr
th
th(style={width: '200px'}) Permission(s)
th Path
th(style={width: '150px'}) Access
th(style={width: '50px'})
tbody
tr(v-for='(right, idx) in rights', v-cloak)
td.is-icon
i.icon-marquee-plus.is-green(v-if='right.deny === false || right.deny === "false"')
i.icon-marquee-minus.is-red(v-if='right.deny === true || right.deny === "true"')
td
p.control.is-fullwidth
select(v-model='right.role')
option(value='write') Read and Write
option(value='read') Read Only
td
.columns
.column.is-narrow
p.control
select(v-model='right.exact')
option(value='false') Path starts with:
option(value='true') Path match exactly:
.column
p.control.is-fullwidth
input.input(type='text', placeholder='/', v-model='right.path')
td
p.control.is-fullwidth
select(v-model='right.deny')
option(value='false') Allow
option(value='true') Deny
td.is-centered.has-action-icons
i.icon-delete.is-red(v-on:click='removeRightsRow(idx)')
tr(v-if='rights.length < 1', v-cloak)
td.is-icon
td.is-centered(colspan='3'): em No additional access rights
td.is-centered.has-action-icons
.table-actions
button.button.is-blue(v-on:click='addRightsRow')
i.icon-plus
span Add New Row
section
label.label Role Override
p.control.is-fullwidth
select(v-model='roleoverride', disabled=!usrOpts.canChangeRole)
option(value='none') None
option(value='admin') Global Administrator
.columns.is-gapless
.column
section
button.button.is-green(v-on:click='saveUser')
i.icon-check
span Save Changes
a.button.button.is-grey.is-outlined(href='/admin/users')
i.icon-cancel
span Discard
.column.is-narrow
section
if usrOpts.canBeDeleted
button.button.is-red(v-on:click='$store.dispatch("modalDeleteUser/open")')
i.icon-trash2
span Delete Account
modal-delete-user(current-user=usr._id) modal-delete-user(current-user=usr._id)
script(type='text/javascript').
var usrData = !{JSON.stringify(usr)};
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment