From 73049447cde95c8d6240ec96c255137b166dede1 Mon Sep 17 00:00:00 2001
From: Evert <imsonotsleepy@gmail.com>
Date: Tue, 5 Dec 2017 17:19:22 +0200
Subject: [PATCH] use vue-router, use pug in templates

---
 package-lock.json                 |   6 ++
 package.json                      |   1 +
 src/script/admin.js               |  70 ++++--------------
 src/script/component/BanList.vue  |  82 +++++++++-----------
 src/script/component/BanModal.vue |  56 ++++++++++++++
 src/script/component/Modal.vue    |  25 +++++++
 src/script/component/UserList.vue |  72 +++++++++---------
 src/script/views/OAuth2.vue       |   8 ++
 src/script/views/Users.vue        |  18 +++++
 views/admin/index.pug             | 119 +-----------------------------
 views/admin/layout.pug            |  40 +++++-----
 11 files changed, 216 insertions(+), 281 deletions(-)
 create mode 100644 src/script/component/BanModal.vue
 create mode 100644 src/script/component/Modal.vue
 create mode 100644 src/script/views/OAuth2.vue
 create mode 100644 src/script/views/Users.vue

diff --git a/package-lock.json b/package-lock.json
index 822f741..512268b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -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",
diff --git a/package.json b/package.json
index 0126c96..341b858 100644
--- a/package.json
+++ b/package.json
@@ -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",
diff --git a/src/script/admin.js b/src/script/admin.js
index afcf6c8..c913c67 100644
--- a/src/script/admin.js
+++ b/src/script/admin.js
@@ -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')
diff --git a/src/script/component/BanList.vue b/src/script/component/BanList.vue
index 4916466..122aa77 100644
--- a/src/script/component/BanList.vue
+++ b/src/script/component/BanList.vue
@@ -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: {
diff --git a/src/script/component/BanModal.vue b/src/script/component/BanModal.vue
new file mode 100644
index 0000000..a55a98d
--- /dev/null
+++ b/src/script/component/BanModal.vue
@@ -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>
diff --git a/src/script/component/Modal.vue b/src/script/component/Modal.vue
new file mode 100644
index 0000000..b092a7f
--- /dev/null
+++ b/src/script/component/Modal.vue
@@ -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>
diff --git a/src/script/component/UserList.vue b/src/script/component/UserList.vue
index 249a037..fa3da91 100644
--- a/src/script/component/UserList.vue
+++ b/src/script/component/UserList.vue
@@ -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)
         })
       }
     },
diff --git a/src/script/views/OAuth2.vue b/src/script/views/OAuth2.vue
new file mode 100644
index 0000000..2620217
--- /dev/null
+++ b/src/script/views/OAuth2.vue
@@ -0,0 +1,8 @@
+<template lang="pug">
+	.root
+		h1 Manage OAuth2 Clients
+</template>
+
+<script type="text/javascript">
+	export default {}
+</script>
diff --git a/src/script/views/Users.vue b/src/script/views/Users.vue
new file mode 100644
index 0000000..3b22f64
--- /dev/null
+++ b/src/script/views/Users.vue
@@ -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>
diff --git a/views/admin/index.pug b/views/admin/index.pug
index 44cb5f9..52d02e8 100644
--- a/views/admin/index.pug
+++ b/views/admin/index.pug
@@ -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>
+			
diff --git a/views/admin/layout.pug b/views/admin/layout.pug
index 5136dac..5051dd7 100644
--- a/views/admin/layout.pug
+++ b/views/admin/layout.pug
@@ -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")