This commit adds a bunch of features for admins:

* banning IP
* see files from other users if you are admin
* be able to see details of an uploaded file and it's user
* improved display of thumbnails for non-image files

1 files changed, 102 insertions, 0 deletions

diff --git a/src/site/pages/dashboard/admin/user/_id.vue b/src/site/pages/dashboard/admin/user/_id.vue
new file mode 100644
index 0000000..7703b1c
--- /dev/null
+++ b/src/site/pages/dashboard/admin/user/_id.vue
@@ -0,0 +1,102 @@
+<style lang="scss" scoped>
+	.underline { text-decoration: underline; }
+</style>
+<template>
+	<section class="hero is-fullheight dashboard">
+		<div class="hero-body">
+			<div class="container">
+				<div class="columns">
+					<div class="column is-narrow">
+						<Sidebar />
+					</div>
+					<div class="column">
+						<h2 class="subtitle">User details</h2>
+						<hr>
+
+						<b-field label="User Id"
+							horizontal>
+							<span>{{ user.id }}</span>
+						</b-field>
+
+						<b-field label="Username"
+							horizontal>
+							<span>{{ user.username }}</span>
+						</b-field>
+
+						<b-field label="Enabled"
+							horizontal>
+							<span>{{ user.enabled }}</span>
+						</b-field>
+
+						<b-field label="Registered"
+							horizontal>
+							<span><timeago :since="user.createdAt" /></span>
+						</b-field>
+
+						<b-field label="Files"
+							horizontal>
+							<span>{{ files.length }}</span>
+						</b-field>
+
+						<div class="mb2 mt2 text-center">
+							<button class="button is-danger"
+								@click="promptDisableUser">Disable user</button>
+						</div>
+
+						<Grid v-if="files.length"
+							:files="files" />
+					</div>
+				</div>
+			</div>
+		</div>
+	</section>
+</template>
+
+<script>
+import Sidebar from '~/components/sidebar/Sidebar.vue';
+import Grid from '~/components/grid/Grid.vue';
+
+export default {
+	components: {
+		Sidebar,
+		Grid
+	},
+	middleware: ['auth', 'admin'],
+	data() {
+		return {
+			options: {},
+			files: null,
+			user: null
+		};
+	},
+	async asyncData({ $axios, route }) {
+		try {
+			const response = await $axios.$get(`/admin/users/${route.params.id}`);
+			return {
+				files: response.files ? response.files : null,
+				user: response.user ? response.user : null
+			};
+		} catch (error) {
+			console.error(error);
+			return {
+				files: null,
+				user: null
+			};
+		}
+	},
+	methods: {
+		promptDisableUser() {
+			this.$buefy.dialog.confirm({
+				message: 'Are you sure you want to disable the account of the user that uploaded this file?',
+				onConfirm: () => this.disableUser()
+			});
+		},
+		async disableUser() {
+			const response = await this.$axios.$post('admin/users/disable', {
+				id: this.user.id
+			});
+			this.$buefy.toast.open(response.message);
+		}
+	}
+};
+</script>