IcyNetwork
/
IcyNet.eu
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

use vue-router, use pug in templates

This commit is contained in:
Evert Prants 2017-12-05 17:19:22 +02:00
parent 22c4addc0f
commit 73049447cd
Signed by: evert
GPG Key ID: 1688DA83D222D0B5
11 changed files with 216 additions and 281 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
package-lock.json generated
View File

@ -6192,6 +6192,12 @@
"got": "7.1.0"
}
},
"vue-router": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.0.1.tgz",
"integrity": "sha512-vLLoY452L+JBpALMP5UHum9+7nzR9PeIBCghU9ZtJ1eWm6ieUI8Zb/DI3MYxH32bxkjzYV1LRjNv4qr8d+uX/w==",
"dev": true
},
"vue-style-loader": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-3.0.3.tgz",

1
package.json
View File

@ -70,6 +70,7 @@
"uglifyjs-webpack-plugin": "^0.4.6",
"vue-loader": "^13.5.0",
"vue-resource": "^1.3.4",
"vue-router": "^3.0.1",
"vue-template-compiler": "^2.5.9",
"watch": "^1.0.2",
"webpack": "^3.10.0",

70
src/script/admin.js
View File

@ -1,68 +1,24 @@
import Vue from 'vue'
import VueResource from 'vue-resource'
import VueRouter from 'vue-router'
import UserList from './component/UserList.vue'
import BanList from './component/BanList.vue'
const csrfToken = document.querySelector('meta[name="csrf-token"]').content
import Users from './views/Users.vue'
import OAuth2 from './views/OAuth2.vue'
Vue.use(VueResource)
Vue.use(VueRouter)
Vue.component('Modal', {
template: '#modal-template',
props: ['show'],
methods: {
close: function () {
this.$emit('close')
}
},
mounted: function () {
document.addEventListener('keydown', (e) => {
if (this.show && e.keyCode === 27) {
this.close()
}
})
}
})
const routes = [
{ path: '/', component: Users },
{ path: '/oauth2', component: OAuth2 }
]
Vue.component('BanModal', {
template: '#ban-modal-template',
props: ['show', 'id'],
data: function () {
return {
error: '',
reason: '',
expires_at: null
}
},
methods: {
close: function () {
this.$emit('close')
this.error = ''
this.reason = ''
this.expires_at = null
},
submit: function () {
this.$http.post('/admin/api/ban', {
user_id: this.id,
reason: this.reason,
expires_at: this.expires_at,
csrf: csrfToken
}).then(data => {
this.close()
this.$root.$emit('reload_bans')
}).catch(err => {
console.log(err)
if (err.body && err.body.error) this.error = err.body.error
})
}
}
const router = new VueRouter({
routes
})
const app = new Vue({
el: '#app',
components: {
UserList,
BanList
}
router
})
app.$mount('#app')

82
src/script/component/BanList.vue
View File

@ -1,53 +1,41 @@
<template>
<div id="banlist">
<h3>Bans ({{pagination.total}})</h3>
<div class="message error" v-if="error">{{ error }}</div>
<div class="entry" v-else="v-else">
<div class="pgn">
<span class="pagenum">Page {{ pagination.page }} of {{ pagination.pages }}</span>
<div class="button" v-if="pagination.page &gt; 1" v-on:click="getBans(pagination.page - 1)">Previous</div>
<div class="button" v-for="n in pagination.pages" v-on:click="getBans(n)" v-bind:class="{active: n == pagination.page}">{{ n }}</div>
<div class="button" v-if="pagination.page &lt; pagination.pages" v-on:click="getBans(pagination.page + 1)">Next</div>
</div>
<div class="list bans">
<div class="ban list-item" v-for="ban in bans">
<div class="stamps">
<div class="noactive" title="Expired" v-if="ban.expired">
<i class="fa fa-fw fa-ban"></i>
</div>
</div>
<div class="info">
<div class="section">
<span class="key">User</span>
<span class="value">{{ ban.user.display_name }}</span>
</div>
<div class="section">
<span class="key">Admin</span>
<span class="value">{{ ban.admin.display_name }}</span>
</div>
<div class="section">
<span class="key">Reason</span>
<span class="value">{{ ban.reason }}</span>
</div>
<div class="section">
<span class="key">Placed</span>
<span class="value">{{ new Date(ban.created_at).toString() }}</span>
</div>
<div class="section">
<span class="key">Expires</span>
<span class="value" v-if="ban.expires_at">{{ new Date(ban.expires_at).toString() }}</span>
<span class="value" v-else="v-else"><b>This ban is permanent.</b></span>
</div>
<div class="button remove" @click="pardon(ban.id)">Pardon</div>
</div>
</div>
</div>
</div>
</div>
<template lang="pug">
#banlist
h3 Bans ({{pagination.total}})
.message.error(v-if='error') {{ error }}
.entry(v-else='v-else')
.pgn
span.pagenum Page {{ pagination.page }} of {{ pagination.pages }}
.button(v-if='pagination.page > 1', v-on:click='getBans(pagination.page - 1)') Previous
.button(v-for='n in pagination.pages', v-on:click='getBans(n)', v-bind:class='{active: n == pagination.page}') {{ n }}
.button(v-if='pagination.page < pagination.pages', v-on:click='getBans(pagination.page + 1)') Next
.list.bans
.ban.list-item(v-for='ban in bans')
.stamps
.noactive(title='Expired', v-if='ban.expired')
i.fa.fa-fw.fa-ban
.info
.section
span.key User
span.value {{ ban.user.display_name }}
.section
span.key Admin
span.value {{ ban.admin.display_name }}
.section
span.key Reason
span.value {{ ban.reason }}
.section
span.key Placed
span.value {{ new Date(ban.created_at).toString() }}
.section
span.key Expires
span.value(v-if='ban.expires_at') {{ new Date(ban.expires_at).toString() }}
span.value(v-else='v-else')
b This ban is permanent.
.button.remove(@click='pardon(ban.id)') Pardon
</template>
<script type="text/javascript">
module.exports = {
export default {
data: function () {
return {
pagination: {

56
src/script/component/BanModal.vue Normal file
View File

@ -0,0 +1,56 @@
<template lang="pug">
modal(:show='show', @close='close')
.modal-header
h3 Ban user
.modal-body
.message.error(v-if='error') {{ error }}
input(type='hidden', name='user_id', :value='id')
label(for='reason') Reason
input#reason(type='text', name='reason', v-model='reason')
label(for='expires_at') Expires
input#expires_at(type='date', name='expires_at', v-model='expires_at')
.modal-footer.text-right
button(@click='submit') Ban
button(@click='close') Cancel
</template>
<script type="text/javascript">
import Modal from './Modal.vue'
const csrfToken = document.querySelector('meta[name="csrf-token"]').content
export default {
props: ['show', 'id'],
data: function () {
return {
error: '',
reason: '',
expires_at: null
}
},
components: {
Modal
},
methods: {
close: function () {
this.$emit('close')
this.error = ''
this.reason = ''
this.expires_at = null
},
submit: function () {
this.$http.post('/admin/api/ban', {
user_id: this.id,
reason: this.reason,
expires_at: this.expires_at,
csrf: csrfToken
}).then(data => {
this.close()
this.$root.$emit('reload_bans')
}).catch(err => {
console.log(err)
if (err.body && err.body.error) this.error = err.body.error
})
}
}
}
</script>

25
src/script/component/Modal.vue Normal file
View File

@ -0,0 +1,25 @@
<template lang="pug">
transition(name='modal')
.modal-mask(@click='close', v-show='show')
.modal-wrapper
.modal-container(@click.stop='')
slot
</template>
<script type="text/javascript">
export default {
props: ['show'],
methods: {
close: function () {
this.$emit('close')
}
},
mounted: function () {
document.addEventListener('keydown', (e) => {
if (this.show && e.keyCode === 27) {
this.close()
}
})
}
}
</script>

72
src/script/component/UserList.vue
View File

@ -1,42 +1,37 @@
<template>
<div id="userlist">
<h3>Registered Users ({{ pagination.total }})</h3>
<div class="pgn">
<span class="pagenum">Page {{ pagination.page }} of {{ pagination.pages }}</span>
<div class="button" v-if="pagination.page &gt; 1" v-on:click="getUsers(pagination.page - 1)">Previous</div>
<div class="button" v-for="n in pagination.pages" v-on:click="getUsers(n)" v-bind:class="{active: n == pagination.page}">{{ n }}</div>
<div class="button" v-if="pagination.page &lt; pagination.pages" v-on:click="getUsers(pagination.page + 1)">Next</div>
</div>
<div class="list users">
<div class="user list-item" v-for="user in users">
<div class="avatar">
<img v-if="user.avatar_file" v-bind:src="'/usercontent/images/' + user.avatar_file"/>
<img v-else="v-else" src="/static/image/avatar.png"/>
</div>
<div class="info">
<div class="stamps">
<div class="noactive" v-if="user.activated == false" title="Not activated.">
<i class="fa fa-fw fa-envelope"></i>
</div>
</div>
<div class="display_name">{{ user.display_name }}</div>
<div class="username">{{ user.id }} - {{ user.username }} ({{ user.uuid }})</div>
<div class="email">{{ user.email }}</div>
<div class="privilege">Privilege: level {{ user.nw_privilege }}</div>
<div class="timestamp">{{ new Date(user.created_at).toString() }}</div>
<div class="external" v-if="!user.password"><b>Used external login</b></div>
<div class="button ban" v-if="user.bannable" v-on:click="banning = user.id">
<i class="fa fa-fw fa-ban"></i>Ban User
</div>
</div>
</div>
<ban-modal :show="banning" @close="banning = 0" :id="banning"></ban-modal>
</div>
</div>
<template lang="pug">
#userlist
h3 Registered Users ({{ pagination.total }})
.pgn
span.pagenum Page {{ pagination.page }} of {{ pagination.pages }}
.button(v-if='pagination.page > 1', v-on:click='getUsers(pagination.page - 1)') Previous
.button(v-for='n in pagination.pages', v-on:click='getUsers(n)', v-bind:class='{active: n == pagination.page}') {{ n }}
.button(v-if='pagination.page < pagination.pages', v-on:click='getUsers(pagination.page + 1)') Next
.list.users
.user.list-item(v-for='user in users')
.avatar
img(v-if='user.avatar_file', v-bind:src="'/usercontent/images/' + user.avatar_file")
img(v-else='v-else', src='/static/image/avatar.png')
.info
.stamps
.noactive(v-if='user.activated == false', title='Not activated.')
i.fa.fa-fw.fa-envelope
.display_name {{ user.display_name }}
.username {{ user.id }} - {{ user.username }} ({{ user.uuid }})
.email {{ user.email }}
.privilege Privilege: level {{ user.nw_privilege }}
.timestamp {{ new Date(user.created_at).toString() }}
.external(v-if='!user.password')
b Used external login
.button.ban(v-if='user.bannable', v-on:click='banning = user.id')
i.fa.fa-fw.fa-ban
| Ban User
ban-modal(:show='banning', @close='banning = 0', :id='banning')
</template>
<script>
module.exports = {
import BanModal from './BanModal.vue'
export default {
data: function () {
return {
pagination: {
@ -50,14 +45,15 @@
banning: 0
}
},
components: {
BanModal
},
methods: {
getUsers: function (page) {
this.$http.get('/admin/api/users?page=' + page).then(data => {
if (data.body && data.body.error) return
this.pagination = data.body.page
this.users = data.body.users
console.log(this.pagination)
})
}
},

8
src/script/views/OAuth2.vue Normal file
View File

@ -0,0 +1,8 @@
<template lang="pug">
.root
h1 Manage OAuth2 Clients
</template>
<script type="text/javascript">
export default {}
</script>

18
src/script/views/Users.vue Normal file
View File

@ -0,0 +1,18 @@
<template lang="pug">
.root
h1 Welcome to the Admin Panel
.left
user-list
.right
ban-list
</template>
<script type="text/javascript">
import UserList from '../component/UserList.vue'
import BanList from '../component/BanList.vue'
export default {
components: {
UserList, BanList
}
}
</script>

119
views/admin/index.pug
View File

@ -2,122 +2,9 @@ extends layout.pug
block body
.container
.content#app
h1 Welcome to the Admin Panel
.left
user-list
.right
ban-list
.content
router-view
.templates
script(type="text/x-template" id="user-list-template").
<div id="userlist">
<h3>Registered Users ({{ pagination.total }})</h3>
<div class="pgn">
<span class="pagenum">Page {{ pagination.page }} of {{ pagination.pages }}</span>
<div class="button" v-if="pagination.page &gt; 1" v-on:click="getUsers(pagination.page - 1)">Previous</div>
<div class="button" v-for="n in pagination.pages" v-on:click="getUsers(n)" v-bind:class="{active: n == pagination.page}">{{ n }}</div>
<div class="button" v-if="pagination.page &lt; pagination.pages" v-on:click="getUsers(pagination.page + 1)">Next</div>
</div>
<div class="list users">
<div class="user list-item" v-for="user in users">
<div class="avatar">
<img v-if="user.avatar_file" v-bind:src="'/usercontent/images/' + user.avatar_file"/>
<img v-else="v-else" src="/static/image/avatar.png"/>
</div>
<div class="info">
<div class="stamps">
<div class="noactive" v-if="user.activated == false" title="Not activated.">
<i class="fa fa-fw fa-envelope"></i>
</div>
</div>
<div class="display_name">{{ user.display_name }}</div>
<div class="username">{{ user.id }} - {{ user.username }} ({{ user.uuid }})</div>
<div class="email">{{ user.email }}</div>
<div class="privilege">Privilege: level {{ user.nw_privilege }}</div>
<div class="timestamp">{{ new Date(user.created_at).toString() }}</div>
<div class="external" v-if="!user.password"><b>Used external login</b></div>
<div class="button ban" v-if="user.bannable" v-on:click="banning = user.id">
<i class="fa fa-fw fa-ban"></i>Ban User
</div>
</div>
</div>
<ban-modal :show="banning" @close="banning = 0" :id="banning"></ban-modal>
</div>
</div>
script(type="text/x-template" id="ban-list-template").
<div id="banlist">
<h3>Bans ({{pagination.total}})</h3>
<div class="message error" v-if="error">{{ error }}</div>
<div class="entry" v-else="v-else">
<div class="pgn">
<span class="pagenum">Page {{ pagination.page }} of {{ pagination.pages }}</span>
<div class="button" v-if="pagination.page &gt; 1" v-on:click="getBans(pagination.page - 1)">Previous</div>
<div class="button" v-for="n in pagination.pages" v-on:click="getBans(n)" v-bind:class="{active: n == pagination.page}">{{ n }}</div>
<div class="button" v-if="pagination.page &lt; pagination.pages" v-on:click="getBans(pagination.page + 1)">Next</div>
</div>
<div class="list bans">
<div class="ban list-item" v-for="ban in bans">
<div class="stamps">
<div class="noactive" title="Expired" v-if="ban.expired">
<i class="fa fa-fw fa-ban"></i>
</div>
</div>
<div class="info">
<div class="section">
<span class="key">User</span>
<span class="value">{{ ban.user.display_name }}</span>
</div>
<div class="section">
<span class="key">Admin</span>
<span class="value">{{ ban.admin.display_name }}</span>
</div>
<div class="section">
<span class="key">Reason</span>
<span class="value">{{ ban.reason }}</span>
</div>
<div class="section">
<span class="key">Placed</span>
<span class="value">{{ new Date(ban.created_at).toString() }}</span>
</div>
<div class="section">
<span class="key">Expires</span>
<span class="value" v-if="ban.expires_at">{{ new Date(ban.expires_at).toString() }}</span>
<span class="value" v-else="v-else"><b>This ban is permanent.</b></span>
</div>
<div class="button remove" @click="pardon(ban.id)">Pardon</div>
</div>
</div>
</div>
</div>
</div>
script(type="text/x-template" id="modal-template").
<transition name="modal">
<div class="modal-mask" @click="close" v-show="show">
<div class="modal-wrapper" @click.stop>
<div class="modal-container">
<slot></slot>
</div>
</div>
</div>
</transition>
script(type="text/x-template" id="ban-modal-template").
<modal :show="show" @close="close">
<div class="modal-header">
<h3>Ban user</h3>
</div>
<div class="modal-body">
<div class="message error" v-if="error">{{ error }}</div>
<input type="hidden" name="user_id" :value="id">
<label for="reason">Reason</label>
<input type="text" id="reason" name="reason" v-model="reason">
<label for="expires_at">Expires</label>
<input type="date" id="expires_at" name="expires_at" v-model="expires_at">
</div>
<div class="modal-footer text-right">
<button @click="submit">Ban</button>
<button @click="close">Cancel</button>
</div>
</modal>

40
views/admin/layout.pug
View File

@ -15,26 +15,20 @@ html
block title
|Icy Network - Administration
body
block navigation
nav
ul
li
a.navlogo(href="/") Icy Network
li
a(href="/admin/") Home
li
a(href="/admin/oauth2/") OAuth2
ul.right
li
a(href="/user/manage") #{user.display_name}
block dialog
.dialog-drop#dialog
.dialog
.head
#title
#close
i.fa.fa-fw.fa-times
.content#content
.wrapper
block body
script(src="/script/admin.js")
#app
block navigation
nav
ul
li
a.navlogo(href="/") Icy Network
li
router-link(to="/") Home
li
router-link(to="/oauth2") OAuth2
ul.right
li
a(href="/user/manage") #{user.display_name}
.wrapper
block body
script(src="/script/admin.js")