From 4df3976dedde11ed569c27f200d2e7d5c4cc2b11 Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Mon, 29 Jun 2020 16:02:23 +0300
Subject: fix: dispatch logout from axios if token expires

---
 src/site/plugins/axios.js | 4 ++++
 1 file changed, 4 insertions(+)

(limited to 'src/site')

diff --git a/src/site/plugins/axios.js b/src/site/plugins/axios.js
index cc6d98e..843a258 100644
--- a/src/site/plugins/axios.js
+++ b/src/site/plugins/axios.js
@@ -13,6 +13,10 @@ export default function({ $axios, store }) {
 				text: error.response.data.message,
 				error: true
 			});
+
+			if (error.response.data.message.indexOf('Token expired') !== -1) {
+				store.dispatch('logout');
+			}
 		}
 	});
 }
-- 
cgit v1.2.3


From 048e5d9325536e04cb99bd8690d94b32516fd8dd Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Mon, 29 Jun 2020 16:03:08 +0300
Subject: feat: add logout link if logged in

---
 src/site/components/navbar/Navbar.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

(limited to 'src/site')

diff --git a/src/site/components/navbar/Navbar.vue b/src/site/components/navbar/Navbar.vue
index 0b98af0..5499120 100644
--- a/src/site/components/navbar/Navbar.vue
+++ b/src/site/components/navbar/Navbar.vue
@@ -45,6 +45,11 @@
 						exact>
 						Account
 					</router-link>
+					<a
+						class="navbar-item"
+						@click="logOut">
+						Logout
+					</a>
 				</template>
 				<template v-else>
 					<router-link
@@ -79,7 +84,8 @@ export default {
 	},
 	methods: {
 		logOut() {
-			this.$emit('logout');
+			this.$store.dispatch('logout');
+			this.$router.replace('/login');
 		}
 	}
 };
-- 
cgit v1.2.3


From 0a50ef771eb870f18b0cd08f579dba1017d73858 Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Mon, 29 Jun 2020 17:01:38 +0300
Subject: fix: change navbar to buefy navbar for mobile support

---
 src/site/assets/styles/_colors.scss   |  8 +++++++
 src/site/components/navbar/Navbar.vue | 45 ++++++++++++++++++-----------------
 2 files changed, 31 insertions(+), 22 deletions(-)

(limited to 'src/site')

diff --git a/src/site/assets/styles/_colors.scss b/src/site/assets/styles/_colors.scss
index 6e40102..78d6f99 100644
--- a/src/site/assets/styles/_colors.scss
+++ b/src/site/assets/styles/_colors.scss
@@ -9,11 +9,19 @@ $background: #1e2430;
 $backgroundAccent: #20222b;
 $backgroundLight1: #f5f6f8;
 
+// customize navbar
+$navbar-background-color: $backgroundAccent;
+$navbar-item-color: #f5f6f8;
+
+
+
 // $defaultTextColor: #4a4a4a;
 $defaultTextColor: rgb(236, 239, 244);
 $textColor: #c7ccd8;
 $textColorHighlight: white;
 
+$input-hover-color: $textColor;
+
 $basePink: #ff015b;
 $basePinkHover: rgb(196, 4, 71);
 $baseBlue: #30A9ED;
diff --git a/src/site/components/navbar/Navbar.vue b/src/site/components/navbar/Navbar.vue
index 5499120..528ed93 100644
--- a/src/site/components/navbar/Navbar.vue
+++ b/src/site/components/navbar/Navbar.vue
@@ -1,66 +1,67 @@
 <template>
-	<nav :class="{ isWhite }"
-		class="navbar is-transparent">
-		<div class="navbar-brand">
-			<a role="button"
-				class="navbar-burger burger"
-				aria-label="menu"
-				aria-expanded="false"
-				data-target="navbarBasicExample">
-				<span aria-hidden="true" />
-				<span aria-hidden="true" />
-				<span aria-hidden="true" />
-			</a>
-		</div>
-		<div class="navbar-menu">
-			<div class="navbar-end">
+	<b-navbar :class="{ isWhite }" 
+		transparent>
+		<template slot="end">
+			<b-navbar-item tag="div">
 				<router-link
 					to="/"
 					class="navbar-item no-active"
 					exact>
 					Home
 				</router-link>
+			</b-navbar-item>
+			<b-navbar-item tag="div">
 				<router-link
 					to="/"
 					class="navbar-item no-active"
 					exact>
 					Docs
 				</router-link>
-				<template v-if="loggedIn">
+			</b-navbar-item>
+			<template v-if="loggedIn">
+				<b-navbar-item tag="div">
 					<router-link
 						to="/dashboard"
 						class="navbar-item no-active"
 						exact>
 						Uploads
 					</router-link>
+				</b-navbar-item>
+				<b-navbar-item tag="div">
 					<router-link
 						to="/dashboard/albums"
 						class="navbar-item no-active"
 						exact>
 						Albums
 					</router-link>
+				</b-navbar-item>
+				<b-navbar-item tag="div">
 					<router-link
 						to="/dashboard/account"
 						class="navbar-item no-active"
 						exact>
 						Account
 					</router-link>
+				</b-navbar-item>
+				<b-navbar-item tag="div">
 					<a
 						class="navbar-item"
 						@click="logOut">
 						Logout
 					</a>
-				</template>
-				<template v-else>
+				</b-navbar-item>
+			</template>
+			<template v-else>
+				<b-navbar-item tag="div">
 					<router-link
 						class="navbar-item"
 						to="/login">
 						Login
 					</router-link>
-				</template>
-			</div>
-		</div>
-	</nav>
+				</b-navbar-item>
+			</template>
+		</template>
+	</b-navbar>
 </template>
 
 <script>
-- 
cgit v1.2.3


From 50d233cd661e792e4aea92a389b0897dd734f772 Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Mon, 29 Jun 2020 17:02:06 +0300
Subject: fix: fix minor visual issues on the album page

---
 src/site/assets/styles/style.scss         |  9 +++++++
 src/site/pages/dashboard/albums/index.vue | 42 ++++++++++++++++++++-----------
 src/site/pages/dashboard/tags/index.vue   |  4 +++
 3 files changed, 41 insertions(+), 14 deletions(-)

(limited to 'src/site')

diff --git a/src/site/assets/styles/style.scss b/src/site/assets/styles/style.scss
index c067ef4..c3aff91 100644
--- a/src/site/assets/styles/style.scss
+++ b/src/site/assets/styles/style.scss
@@ -248,3 +248,12 @@ table.table {
 		border-color: #ffffff1c;
 	}
 }
+
+// helpers
+.has-text-default {
+	color: $textColor;
+}
+
+.has-text-default-highlight {
+	color: $textColorHighlight;
+}
\ No newline at end of file
diff --git a/src/site/pages/dashboard/albums/index.vue b/src/site/pages/dashboard/albums/index.vue
index 60607ac..6003c49 100644
--- a/src/site/pages/dashboard/albums/index.vue
+++ b/src/site/pages/dashboard/albums/index.vue
@@ -17,7 +17,8 @@
 									type="text"
 									@keyup.enter.native="createAlbum" />
 								<p class="control">
-									<button class="button is-primary"
+									<button outlined
+										class="button is-primary"
 										@click="createAlbum">Create album</button>
 								</p>
 							</b-field>
@@ -97,8 +98,7 @@
 											</b-table-column>
 
 											<b-table-column field="enabled"
-												label="Actions"
-												centered>
+												numeric>
 												<button class="button is-danger"
 													@click="promptDeleteAlbumLink(props.row.identifier)">Delete link</button>
 											</b-table-column>
@@ -112,19 +112,25 @@
 											</div>
 										</template>
 										<template slot="footer">
-											<div class="wrapper">
-												<div class="has-text-right">
-													<button :class="{ 'is-loading': album.isCreatingLink }"
-														class="button is-primary"
-														style="float: left"
-														@click="createLink(album)">Create new link</button>
-													{{ album.links.length }} / {{ config.maxLinksPerAlbum }} links created
+											<div class="level is-paddingless">
+												<div class="level-left">
+													<div class="level-item">
+														<button :class="{ 'is-loading': album.isCreatingLink }"
+															class="button is-primary"
+															style="float: left"
+															@click="createLink(album)">Create new link</button>
+													</div>
+													<div class="level-item">
+														<span class="has-text-default">{{ album.links.length }} / {{ config.maxLinksPerAlbum }} links created</span>
+													</div>
 												</div>
 
-												<div class="has-text-left">
-													<button class="button is-danger"
-														style="float: right"
-														@click="promptDeleteAlbum(album.id)">Delete album</button>
+												<div class="level-right">
+													<div class="level-item">
+														<button class="button is-danger"
+															style="float: right"
+															@click="promptDeleteAlbum(album.id)">Delete album</button>
+													</div>
 												</div>
 											</div>
 										</template>
@@ -244,6 +250,12 @@ export default {
 	div.view-container {
 		padding: 2rem;
 	}
+
+	div.search-container {
+		padding: 1rem 2rem;
+		background-color: $base-2;
+	}
+
 	div.album {
 		display: flex;
 		flex-wrap: wrap;
@@ -349,6 +361,8 @@ export default {
 	}
 
 	div.column > h2.subtitle { padding-top: 1px; }
+
+	div.no-background { background: none !important; }
 </style>
 <style lang="scss">
 	@import '~/assets/styles/_colors.scss';
diff --git a/src/site/pages/dashboard/tags/index.vue b/src/site/pages/dashboard/tags/index.vue
index bc9ae57..8523231 100644
--- a/src/site/pages/dashboard/tags/index.vue
+++ b/src/site/pages/dashboard/tags/index.vue
@@ -107,6 +107,10 @@
 	}
 
 	div.column > h2.subtitle { padding-top: 1px; }
+
+	div.no-background {
+		background: none;
+	}
 </style>
 <style lang="scss">
 	@import '~/assets/styles/_colors.scss';
-- 
cgit v1.2.3


From 27b0fdafb2785c4cb1b9c8f62beb8c68ff2aff56 Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Mon, 29 Jun 2020 20:00:49 +0300
Subject: misc: remove patreon. sorry.

---
 src/site/components/footer/Footer.vue | 2 --
 1 file changed, 2 deletions(-)

(limited to 'src/site')

diff --git a/src/site/components/footer/Footer.vue b/src/site/components/footer/Footer.vue
index 9f51fee..49f622c 100644
--- a/src/site/components/footer/Footer.vue
+++ b/src/site/components/footer/Footer.vue
@@ -35,8 +35,6 @@
 							</div>
 							<div class="column">
 								<a href="https://github.com/weebdev/lolisafe">GitHub</a>
-								<a href="https://patreon.com/pitu">Patreon</a>
-								<a href="https://discord.gg/5g6vgwn">Discord</a>
 							</div>
 							<div class="column">
 								<a v-if="loggedIn"
-- 
cgit v1.2.3


From ac037c773ef5f15372c6999445a2efe00034c0c0 Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Mon, 29 Jun 2020 20:02:47 +0300
Subject: fix: Remove hero and hero body and use sections and containers
 instead

Hero is meant to be used as a full-width banner to showcare or present somethign, not to contain the entire content of the webpage
---
 src/site/assets/styles/_colors.scss         |  19 ++-
 src/site/assets/styles/style.scss           |  62 +++++++++-
 src/site/components/grid/Grid.vue           |   4 +-
 src/site/components/navbar/Navbar.vue       |   4 +-
 src/site/layouts/default.vue                |  45 +++----
 src/site/pages/a/_identifier.vue            |  28 ++---
 src/site/pages/dashboard/account.vue        | 104 ++++++++---------
 src/site/pages/dashboard/admin/file/_id.vue | 174 ++++++++++++++--------------
 src/site/pages/dashboard/admin/settings.vue | 156 ++++++++++++-------------
 src/site/pages/dashboard/admin/user/_id.vue |  72 ++++++------
 src/site/pages/dashboard/admin/users.vue    | 124 ++++++++++----------
 src/site/pages/dashboard/albums/_id.vue     |  26 ++---
 src/site/pages/dashboard/index.vue          |  58 +++++++---
 src/site/pages/dashboard/tags/index.vue     | 130 ++++++++++-----------
 src/site/pages/faq.vue                      |   1 +
 src/site/pages/index.vue                    |   6 +-
 src/site/pages/login.vue                    |  64 +++++-----
 src/site/pages/register.vue                 |  72 ++++++------
 18 files changed, 614 insertions(+), 535 deletions(-)

(limited to 'src/site')

diff --git a/src/site/assets/styles/_colors.scss b/src/site/assets/styles/_colors.scss
index 78d6f99..a141447 100644
--- a/src/site/assets/styles/_colors.scss
+++ b/src/site/assets/styles/_colors.scss
@@ -7,14 +7,13 @@ $base-5: #4C566A;
 
 $background: #1e2430;
 $backgroundAccent: #20222b;
+$backgroundAccentLighter: #53555E;
 $backgroundLight1: #f5f6f8;
 
 // customize navbar
 $navbar-background-color: $backgroundAccent;
 $navbar-item-color: #f5f6f8;
 
-
-
 // $defaultTextColor: #4a4a4a;
 $defaultTextColor: rgb(236, 239, 244);
 $textColor: #c7ccd8;
@@ -31,3 +30,19 @@ $uploaderDropdownColor: #797979;
 
 $boxShadow: 0 10px 15px rgba(4,39,107,0.2);
 $boxShadowLight: rgba(15, 17, 21, 0.35) 0px 6px 9px 0px;
+
+// pagination
+
+$pagination-color: $defaultTextColor;
+
+$pagination-focus-color: $textColorHighlight;
+$pagination-focus-border-color: $textColorHighlight;
+
+$pagination-active-color: $textColorHighlight;
+$pagination-active-border-color: $textColorHighlight;
+
+$pagination-hover-color: $textColorHighlight;
+$pagination-hover-border-color: $textColorHighlight;
+
+$pagination-current-background-color: $base-3;
+$pagination-current-border-color: $base-2;
\ No newline at end of file
diff --git a/src/site/assets/styles/style.scss b/src/site/assets/styles/style.scss
index c3aff91..69d15d3 100644
--- a/src/site/assets/styles/style.scss
+++ b/src/site/assets/styles/style.scss
@@ -249,6 +249,57 @@ table.table {
 	}
 }
 
+// vue-bar
+.vb > .vb-dragger {
+    z-index: 5;
+    width: 12px;
+    right: 0;
+}
+
+.vb > .vb-dragger > .vb-dragger-styler {
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    -webkit-transform: rotate3d(0,0,0,0);
+    transform: rotate3d(0,0,0,0);
+    -webkit-transition:
+        background-color 100ms ease-out,
+        margin 100ms ease-out,
+        height 100ms ease-out;
+    transition:
+        background-color 100ms ease-out,
+        margin 100ms ease-out,
+        height 100ms ease-out;
+    background-color: $backgroundAccent;
+    margin: 5px 5px 5px 0;
+    border-radius: 20px;
+    height: calc(100% - 10px);
+    display: block;
+}
+
+.vb.vb-scrolling-phantom > .vb-dragger > .vb-dragger-styler {
+    background-color: $backgroundAccentLighter;
+}
+
+.vb > .vb-dragger:hover > .vb-dragger-styler {
+    background-color: $backgroundAccentLighter;
+    margin: 0px;
+    height: 100%;
+}
+
+.vb.vb-dragging > .vb-dragger > .vb-dragger-styler {
+    background-color: $backgroundAccentLighter;
+    margin: 0px;
+    height: 100%;
+}
+
+.vb.vb-dragging-phantom > .vb-dragger > .vb-dragger-styler {
+    background-color: $backgroundAccentLighter;
+}
+
+.vb-content{
+	overflow: auto !important 
+}
+
 // helpers
 .has-text-default {
 	color: $textColor;
@@ -256,4 +307,13 @@ table.table {
 
 .has-text-default-highlight {
 	color: $textColorHighlight;
-}
\ No newline at end of file
+}
+
+.is-height-max-content {
+	height: max-content;
+}
+
+.pagination a, .pagination a:hover {
+	text-decoration: none;
+}
+
diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index da9b26c..4c4bdf4 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -167,7 +167,7 @@
 					</div>
 				</template>
 				<template slot="footer">
-					<div class="has-text-right">
+					<div class="has-text-right has-text-default">
 						{{ files.length }} files
 					</div>
 				</template>
@@ -197,6 +197,7 @@
 		</b-modal>
 	</div>
 </template>
+
 <script>
 import Waterfall from './waterfall/Waterfall.vue';
 import WaterfallItem from './waterfall/WaterfallItem.vue';
@@ -328,6 +329,7 @@ export default {
 	}
 };
 </script>
+
 <style lang="scss" scoped>
 	@import '~/assets/styles/_colors.scss';
 	.item-move {
diff --git a/src/site/components/navbar/Navbar.vue b/src/site/components/navbar/Navbar.vue
index 528ed93..47f90cb 100644
--- a/src/site/components/navbar/Navbar.vue
+++ b/src/site/components/navbar/Navbar.vue
@@ -1,5 +1,5 @@
 <template>
-	<b-navbar :class="{ isWhite }" 
+	<b-navbar :class="{ isWhite }"
 		transparent>
 		<template slot="end">
 			<b-navbar-item tag="div">
@@ -12,7 +12,7 @@
 			</b-navbar-item>
 			<b-navbar-item tag="div">
 				<router-link
-					to="/"
+					to="/faq"
 					class="navbar-item no-active"
 					exact>
 					Docs
diff --git a/src/site/layouts/default.vue b/src/site/layouts/default.vue
index 1642980..744285c 100644
--- a/src/site/layouts/default.vue
+++ b/src/site/layouts/default.vue
@@ -1,15 +1,11 @@
 <template>
-	<div v-bar>
-		<div>
-			<section class="hero is-fullheight has-text-centered">
-				<Navbar :isWhite="true" />
-				<div class="hero-body">
-					<nuxt-child id="app" />
-				</div>
-				<div class="hero-foot">
-					<Footer />
-				</div>
-			</section>
+	<div v-bar
+		class="scroll-area">
+		<div class="default-body">
+			<Navbar :isWhite="true" />
+			<nuxt-child id="app"
+				class="nuxt-app is-height-max-content" />
+			<Footer />
 		</div>
 	</div>
 </template>
@@ -17,7 +13,10 @@
 import Navbar from '~/components/navbar/Navbar.vue';
 import Footer from '~/components/footer/Footer';
 export default {
-	components: { Navbar, Footer },
+	components: { 
+		Navbar, 
+		Footer
+	},
 	computed: {
 		config() {
 			return this.$store.state.config;
@@ -49,25 +48,19 @@ export default {
 </script>
 <style lang="scss">
 	html { overflow: hidden !important; }
-	.is-fullheight { height: 100vh; }
-	.hero-body {
-		padding: 3rem 0 !important;
-		#app {
-			width: 100%;
-			& > .container {
-				margin-top: 5rem;
-			}
-		}
-		> .hero {
-			min-height: auto !important;
-			height: auto !important;
-		}
+	.is-fullheight { height: 100vh !important; }
+	.nuxt-app > .section {
+		min-height: auto !important;
+		height: auto !important;
 	}
 	@import "~/assets/styles/style.scss";
 	@import "~/assets/styles/icons.min.css";
 </style>
 <style lang="scss" scoped>
-	.hero-body {
+	.default-body {
 		align-items: baseline !important;
 	}
+	.scroll-area {
+		height: 100vh;
+	}
 </style>
diff --git a/src/site/pages/a/_identifier.vue b/src/site/pages/a/_identifier.vue
index ea36852..24d172b 100644
--- a/src/site/pages/a/_identifier.vue
+++ b/src/site/pages/a/_identifier.vue
@@ -16,9 +16,9 @@
 </style>
 
 <template>
-	<section class="hero is-fullheight">
+	<section class="section is-fullheight">
 		<template v-if="files && files.length">
-			<div class="hero-body align-top">
+			<div class="align-top">
 				<div class="container">
 					<h1 class="title">{{ name }}</h1>
 					<h2 class="subtitle">Serving {{ files ? files.length : 0 }} files</h2>
@@ -27,23 +27,19 @@
 					<hr>
 				</div>
 			</div>
-			<div class="hero-body">
-				<div class="container">
-					<Grid v-if="files && files.length"
-						:files="files"
-						:isPublic="true"
-						:width="200"
-						:enableSearch="false"
-						:enableToolbar="false" />
-				</div>
+			<div class="container">
+				<Grid v-if="files && files.length"
+					:files="files"
+					:isPublic="true"
+					:width="200"
+					:enableSearch="false"
+					:enableToolbar="false" />
 			</div>
 		</template>
 		<template v-else>
-			<div class="hero-body">
-				<div class="container">
-					<h1 class="title">:(</h1>
-					<h2 class="subtitle">This album seems to be empty</h2>
-				</div>
+			<div class="container">
+				<h1 class="title">:(</h1>
+				<h2 class="subtitle">This album seems to be empty</h2>
 			</div>
 		</template>
 	</section>
diff --git a/src/site/pages/dashboard/account.vue b/src/site/pages/dashboard/account.vue
index 6ecc885..121b2b3 100644
--- a/src/site/pages/dashboard/account.vue
+++ b/src/site/pages/dashboard/account.vue
@@ -1,64 +1,62 @@
 <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">Account settings</h2>
-						<hr>
+	<section class="section is-fullheight dashboard">
+		<div class="container">
+			<div class="columns">
+				<div class="column is-narrow">
+					<Sidebar />
+				</div>
+				<div class="column">
+					<h2 class="subtitle">Account settings</h2>
+					<hr>
 
-						<b-field label="Username"
-							message="Nothing to do here"
-							horizontal>
-							<b-input v-model="user.username"
-								expanded
-								disabled />
-						</b-field>
+					<b-field label="Username"
+						message="Nothing to do here"
+						horizontal>
+						<b-input v-model="user.username"
+							expanded
+							disabled />
+					</b-field>
 
-						<b-field label="Current password"
-							message="If you want to change your password input the current one here"
-							horizontal>
-							<b-input v-model="user.password"
-								type="password"
-								expanded />
-						</b-field>
+					<b-field label="Current password"
+						message="If you want to change your password input the current one here"
+						horizontal>
+						<b-input v-model="user.password"
+							type="password"
+							expanded />
+					</b-field>
 
-						<b-field label="New password"
-							message="Your new password"
-							horizontal>
-							<b-input v-model="user.newPassword"
-								type="password"
-								expanded />
-						</b-field>
+					<b-field label="New password"
+						message="Your new password"
+						horizontal>
+						<b-input v-model="user.newPassword"
+							type="password"
+							expanded />
+					</b-field>
 
-						<b-field label="New password again"
-							message="Your new password once again"
-							horizontal>
-							<b-input v-model="user.reNewPassword"
-								type="password"
-								expanded />
-						</b-field>
+					<b-field label="New password again"
+						message="Your new password once again"
+						horizontal>
+						<b-input v-model="user.reNewPassword"
+							type="password"
+							expanded />
+					</b-field>
 
-						<div class="mb2 mt2 text-center">
-							<button class="button is-primary"
-								@click="changePassword">Change password</button>
-						</div>
+					<div class="mb2 mt2 text-center">
+						<button class="button is-primary"
+							@click="changePassword">Change password</button>
+					</div>
 
-						<b-field label="Api key"
-							message="This API key lets you use the service from other apps"
-							horizontal>
-							<b-input v-model="user.apiKey"
-								expanded
-								disabled />
-						</b-field>
+					<b-field label="Api key"
+						message="This API key lets you use the service from other apps"
+						horizontal>
+						<b-input v-model="user.apiKey"
+							expanded
+							disabled />
+					</b-field>
 
-						<div class="mb2 mt2 text-center">
-							<button class="button is-primary"
-								@click="promptNewAPIKey">Request new API key</button>
-						</div>
+					<div class="mb2 mt2 text-center">
+						<button class="button is-primary"
+							@click="promptNewAPIKey">Request new API key</button>
 					</div>
 				</div>
 			</div>
diff --git a/src/site/pages/dashboard/admin/file/_id.vue b/src/site/pages/dashboard/admin/file/_id.vue
index 6718b32..5821292 100644
--- a/src/site/pages/dashboard/admin/file/_id.vue
+++ b/src/site/pages/dashboard/admin/file/_id.vue
@@ -2,97 +2,95 @@
 	.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">File details</h2>
-						<hr>
-
-						<div class="columns">
-							<div class="column is-6">
-								<b-field label="ID"
-									horizontal>
-									<span>{{ file.id }}</span>
-								</b-field>
-
-								<b-field label="Name"
-									horizontal>
-									<span>{{ file.name }}</span>
-								</b-field>
-
-								<b-field label="Original Name"
-									horizontal>
-									<span>{{ file.original }}</span>
-								</b-field>
-
-								<b-field label="IP"
-									horizontal>
-									<span class="underline">{{ file.ip }}</span>
-								</b-field>
-
-								<b-field label="Link"
-									horizontal>
-									<a :href="file.url"
-										target="_blank">{{ file.url }}</a>
-								</b-field>
-
-								<b-field label="Size"
-									horizontal>
-									<span>{{ formatBytes(file.size) }}</span>
-								</b-field>
-
-								<b-field label="Hash"
-									horizontal>
-									<span>{{ file.hash }}</span>
-								</b-field>
-
-								<b-field label="Uploaded"
-									horizontal>
-									<span><timeago :since="file.createdAt" /></span>
-								</b-field>
-							</div>
-							<div class="column is-6">
-								<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>
-										<nuxt-link :to="`/dashboard/admin/user/${user.id}`">{{ user.fileCount }}</nuxt-link>
-									</span>
-								</b-field>
-							</div>
+	<section class="section is-fullheight dashboard">
+		<div class="container">
+			<div class="columns">
+				<div class="column is-narrow">
+					<Sidebar />
+				</div>
+				<div class="column">
+					<h2 class="subtitle">File details</h2>
+					<hr>
+
+					<div class="columns">
+						<div class="column is-6">
+							<b-field label="ID"
+								horizontal>
+								<span>{{ file.id }}</span>
+							</b-field>
+
+							<b-field label="Name"
+								horizontal>
+								<span>{{ file.name }}</span>
+							</b-field>
+
+							<b-field label="Original Name"
+								horizontal>
+								<span>{{ file.original }}</span>
+							</b-field>
+
+							<b-field label="IP"
+								horizontal>
+								<span class="underline">{{ file.ip }}</span>
+							</b-field>
+
+							<b-field label="Link"
+								horizontal>
+								<a :href="file.url"
+									target="_blank">{{ file.url }}</a>
+							</b-field>
+
+							<b-field label="Size"
+								horizontal>
+								<span>{{ formatBytes(file.size) }}</span>
+							</b-field>
+
+							<b-field label="Hash"
+								horizontal>
+								<span>{{ file.hash }}</span>
+							</b-field>
+
+							<b-field label="Uploaded"
+								horizontal>
+								<span><timeago :since="file.createdAt" /></span>
+							</b-field>
 						</div>
-
-						<div class="mb2 mt2 text-center">
-							<button class="button is-danger"
-								@click="promptBanIP">Ban IP</button>
-							<button class="button is-danger"
-								@click="promptDisableUser">Disable user</button>
+						<div class="column is-6">
+							<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>
+									<nuxt-link :to="`/dashboard/admin/user/${user.id}`">{{ user.fileCount }}</nuxt-link>
+								</span>
+							</b-field>
 						</div>
 					</div>
+
+					<div class="mb2 mt2 text-center">
+						<button class="button is-danger"
+							@click="promptBanIP">Ban IP</button>
+						<button class="button is-danger"
+							@click="promptDisableUser">Disable user</button>
+					</div>
 				</div>
 			</div>
 		</div>
diff --git a/src/site/pages/dashboard/admin/settings.vue b/src/site/pages/dashboard/admin/settings.vue
index 052a641..2d59fff 100644
--- a/src/site/pages/dashboard/admin/settings.vue
+++ b/src/site/pages/dashboard/admin/settings.vue
@@ -1,94 +1,92 @@
 <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">Service settings</h2>
-						<hr>
+	<section class="section is-fullheight dashboard">
+		<div class="container">
+			<div class="columns">
+				<div class="column is-narrow">
+					<Sidebar />
+				</div>
+				<div class="column">
+					<h2 class="subtitle">Service settings</h2>
+					<hr>
 
-						<b-field label="Service name"
-							message="Please enter the name which this service is gonna be identified as"
-							horizontal>
-							<b-input v-model="options.serviceName"
-								expanded />
-						</b-field>
+					<b-field label="Service name"
+						message="Please enter the name which this service is gonna be identified as"
+						horizontal>
+						<b-input v-model="options.serviceName"
+							expanded />
+					</b-field>
 
-						<b-field label="Upload folder"
-							message="Where to store the files relative to the working directory"
-							horizontal>
-							<b-input v-model="options.uploadFolder"
-								expanded />
-						</b-field>
+					<b-field label="Upload folder"
+						message="Where to store the files relative to the working directory"
+						horizontal>
+						<b-input v-model="options.uploadFolder"
+							expanded />
+					</b-field>
 
-						<b-field label="Links per album"
-							message="Maximum links allowed per album"
-							horizontal>
-							<b-input v-model="options.linksPerAlbum"
-								type="number"
-								expanded />
-						</b-field>
+					<b-field label="Links per album"
+						message="Maximum links allowed per album"
+						horizontal>
+						<b-input v-model="options.linksPerAlbum"
+							type="number"
+							expanded />
+					</b-field>
 
-						<b-field label="Max upload size"
-							message="Maximum allowed file size in MB"
-							horizontal>
-							<b-input v-model="options.maxUploadSize"
-								expanded />
-						</b-field>
+					<b-field label="Max upload size"
+						message="Maximum allowed file size in MB"
+						horizontal>
+						<b-input v-model="options.maxUploadSize"
+							expanded />
+					</b-field>
 
-						<b-field label="Filename length"
-							message="How many characters long should the generated filenames be"
-							horizontal>
-							<b-input v-model="options.filenameLength"
-								expanded />
-						</b-field>
+					<b-field label="Filename length"
+						message="How many characters long should the generated filenames be"
+						horizontal>
+						<b-input v-model="options.filenameLength"
+							expanded />
+					</b-field>
 
-						<b-field label="Album link length"
-							message="How many characters a link for an album should have"
-							horizontal>
-							<b-input v-model="options.albumLinkLength"
-								expanded />
-						</b-field>
+					<b-field label="Album link length"
+						message="How many characters a link for an album should have"
+						horizontal>
+						<b-input v-model="options.albumLinkLength"
+							expanded />
+					</b-field>
 
-						<b-field label="Generate thumbnails"
-							message="Generate thumbnails when uploading a file if possible"
-							horizontal>
-							<b-switch v-model="options.generateThumbnails"
-								:true-value="true"
-								:false-value="false" />
-						</b-field>
+					<b-field label="Generate thumbnails"
+						message="Generate thumbnails when uploading a file if possible"
+						horizontal>
+						<b-switch v-model="options.generateThumbnails"
+							:true-value="true"
+							:false-value="false" />
+					</b-field>
 
-						<b-field label="Generate zips"
-							message="Allow generating zips to download entire albums"
-							horizontal>
-							<b-switch v-model="options.generateZips"
-								:true-value="true"
-								:false-value="false" />
-						</b-field>
+					<b-field label="Generate zips"
+						message="Allow generating zips to download entire albums"
+						horizontal>
+						<b-switch v-model="options.generateZips"
+							:true-value="true"
+							:false-value="false" />
+					</b-field>
 
-						<b-field label="Public mode"
-							message="Enable anonymous uploades"
-							horizontal>
-							<b-switch v-model="options.publicMode"
-								:true-value="true"
-								:false-value="false" />
-						</b-field>
+					<b-field label="Public mode"
+						message="Enable anonymous uploades"
+						horizontal>
+						<b-switch v-model="options.publicMode"
+							:true-value="true"
+							:false-value="false" />
+					</b-field>
 
-						<b-field label="Enable creating account"
-							message="Enable creating new accounts in the platform"
-							horizontal>
-							<b-switch v-model="options.enableAccounts"
-								:true-value="true"
-								:false-value="false" />
-						</b-field>
+					<b-field label="Enable creating account"
+						message="Enable creating new accounts in the platform"
+						horizontal>
+						<b-switch v-model="options.enableAccounts"
+							:true-value="true"
+							:false-value="false" />
+					</b-field>
 
-						<div class="mb2 mt2 text-center">
-							<button class="button is-primary"
-								@click="promptRestartService">Save and restart service</button>
-						</div>
+					<div class="mb2 mt2 text-center">
+						<button class="button is-primary"
+							@click="promptRestartService">Save and restart service</button>
 					</div>
 				</div>
 			</div>
diff --git a/src/site/pages/dashboard/admin/user/_id.vue b/src/site/pages/dashboard/admin/user/_id.vue
index 7703b1c..2a56c34 100644
--- a/src/site/pages/dashboard/admin/user/_id.vue
+++ b/src/site/pages/dashboard/admin/user/_id.vue
@@ -2,50 +2,48 @@
 	.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>
+	<section class="section is-fullheight dashboard">
+		<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="Username"
-							horizontal>
-							<span>{{ user.username }}</span>
-						</b-field>
+					<b-field label="User Id"
+						horizontal>
+						<span>{{ user.id }}</span>
+					</b-field>
 
-						<b-field label="Enabled"
-							horizontal>
-							<span>{{ user.enabled }}</span>
-						</b-field>
+					<b-field label="Username"
+						horizontal>
+						<span>{{ user.username }}</span>
+					</b-field>
 
-						<b-field label="Registered"
-							horizontal>
-							<span><timeago :since="user.createdAt" /></span>
-						</b-field>
+					<b-field label="Enabled"
+						horizontal>
+						<span>{{ user.enabled }}</span>
+					</b-field>
 
-						<b-field label="Files"
-							horizontal>
-							<span>{{ files.length }}</span>
-						</b-field>
+					<b-field label="Registered"
+						horizontal>
+						<span><timeago :since="user.createdAt" /></span>
+					</b-field>
 
-						<div class="mb2 mt2 text-center">
-							<button class="button is-danger"
-								@click="promptDisableUser">Disable user</button>
-						</div>
+					<b-field label="Files"
+						horizontal>
+						<span>{{ files.length }}</span>
+					</b-field>
 
-						<Grid v-if="files.length"
-							:files="files" />
+					<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>
diff --git a/src/site/pages/dashboard/admin/users.vue b/src/site/pages/dashboard/admin/users.vue
index 1fefa1e..695cf0b 100644
--- a/src/site/pages/dashboard/admin/users.vue
+++ b/src/site/pages/dashboard/admin/users.vue
@@ -121,69 +121,67 @@
 
 
 <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">Manage your users</h2>
-						<hr>
-
-						<div class="view-container">
-							<b-table
-								:data="users || []"
-								:mobile-cards="true">
-								<template slot-scope="props">
-									<b-table-column field="id"
-										label="Id"
-										centered>
-										{{ props.row.id }}
-									</b-table-column>
-
-									<b-table-column field="username"
-										label="Username"
-										centered>
-										<nuxt-link :to="`/dashboard/admin/user/${props.row.id}`">{{ props.row.username }}</nuxt-link>
-									</b-table-column>
-
-									<b-table-column field="enabled"
-										label="Enabled"
-										centered>
-										<b-switch v-model="props.row.enabled"
-											@input="changeEnabledStatus(props.row)" />
-									</b-table-column>
-
-									<b-table-column field="isAdmin"
-										label="Admin"
-										centered>
-										<b-switch v-model="props.row.isAdmin"
-											@input="changeIsAdmin(props.row)" />
-									</b-table-column>
-
-									<b-table-column field="purge"
-										centered>
-										<button class="button is-primary"
-											@click="promptPurgeFiles(props.row)">Purge files</button>
-									</b-table-column>
-								</template>
-								<template slot="empty">
-									<div class="has-text-centered">
-										<i class="icon-misc-mood-sad" />
-									</div>
-									<div class="has-text-centered">
-										Nothing here
-									</div>
-								</template>
-								<template slot="footer">
-									<div class="has-text-right">
-										{{ users.length }} users
-									</div>
-								</template>
-							</b-table>
-						</div>
+	<section class="section is-fullheight dashboard">
+		<div class="container">
+			<div class="columns">
+				<div class="column is-narrow">
+					<Sidebar />
+				</div>
+				<div class="column">
+					<h2 class="subtitle">Manage your users</h2>
+					<hr>
+
+					<div class="view-container">
+						<b-table
+							:data="users || []"
+							:mobile-cards="true">
+							<template slot-scope="props">
+								<b-table-column field="id"
+									label="Id"
+									centered>
+									{{ props.row.id }}
+								</b-table-column>
+
+								<b-table-column field="username"
+									label="Username"
+									centered>
+									<nuxt-link :to="`/dashboard/admin/user/${props.row.id}`">{{ props.row.username }}</nuxt-link>
+								</b-table-column>
+
+								<b-table-column field="enabled"
+									label="Enabled"
+									centered>
+									<b-switch v-model="props.row.enabled"
+										@input="changeEnabledStatus(props.row)" />
+								</b-table-column>
+
+								<b-table-column field="isAdmin"
+									label="Admin"
+									centered>
+									<b-switch v-model="props.row.isAdmin"
+										@input="changeIsAdmin(props.row)" />
+								</b-table-column>
+
+								<b-table-column field="purge"
+									centered>
+									<button class="button is-primary"
+										@click="promptPurgeFiles(props.row)">Purge files</button>
+								</b-table-column>
+							</template>
+							<template slot="empty">
+								<div class="has-text-centered">
+									<i class="icon-misc-mood-sad" />
+								</div>
+								<div class="has-text-centered">
+									Nothing here
+								</div>
+							</template>
+							<template slot="footer">
+								<div class="has-text-right">
+									{{ users.length }} users
+								</div>
+							</template>
+						</b-table>
 					</div>
 				</div>
 			</div>
diff --git a/src/site/pages/dashboard/albums/_id.vue b/src/site/pages/dashboard/albums/_id.vue
index 1b7c442..e716b37 100644
--- a/src/site/pages/dashboard/albums/_id.vue
+++ b/src/site/pages/dashboard/albums/_id.vue
@@ -3,20 +3,18 @@
 </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">Files</h2>
-						<hr>
-						<!-- TODO: Add a list view so the user can see the files that don't have thumbnails, like text documents -->
-						<Grid v-if="files.length"
-							:files="files" />
-					</div>
+	<section class="section is-fullheight dashboard">
+		<div class="container">
+			<div class="columns">
+				<div class="column is-narrow">
+					<Sidebar />
+				</div>
+				<div class="column">
+					<h2 class="subtitle">Files</h2>
+					<hr>
+					<!-- TODO: Add a list view so the user can see the files that don't have thumbnails, like text documents -->
+					<Grid v-if="files.length"
+						:files="files" />
 				</div>
 			</div>
 		</div>
diff --git a/src/site/pages/dashboard/index.vue b/src/site/pages/dashboard/index.vue
index b58e567..8a4031b 100644
--- a/src/site/pages/dashboard/index.vue
+++ b/src/site/pages/dashboard/index.vue
@@ -1,19 +1,32 @@
 <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">Your uploaded files</h2>
-						<hr>
-						<!-- TODO: Add a list view so the user can see the files that don't have thumbnails, like text documents -->
-						<Grid v-if="files.length"
-							:files="files"
-							:enableSearch="false" />
-					</div>
+	<section class="section is-fullheight dashboard">
+		<div class="container">
+			<div class="columns is-variable is-0-mobile">
+				<div class="column is-narrow">
+					<Sidebar />
+				</div>
+				<div class="column">
+					<h2 class="subtitle">Your uploaded files</h2>
+					<hr>
+					<!-- TODO: Add a list view so the user can see the files that don't have thumbnails, like text documents -->
+					<Grid v-if="files.length"
+						:files="paginatedFiles"
+						:enableSearch="false"
+						class="grid" />
+
+					<b-pagination
+						v-if="files.length > perPage"
+						:total="files.length"
+						:per-page="perPage"
+						:current.sync="current"
+						class="pagination"
+						icon-prev="icon-interface-arrow-left"
+						icon-next="icon-interface-arrow-right"
+						icon-pack="icon"
+						aria-next-label="Next page"
+						aria-previous-label="Previous page"
+						aria-page-label="Page"
+						aria-current-label="Current page" />
 				</div>
 			</div>
 		</div>
@@ -32,9 +45,16 @@ export default {
 	middleware: 'auth',
 	data() {
 		return {
-			files: []
+			files: [],
+			current: 1,
+			perPage: 20
 		};
 	},
+	computed: {
+		paginatedFiles() {
+			return this.files.slice((this.current - 1) * this.perPage, this.current * this.perPage);
+		}
+	},
 	metaInfo() {
 		return { title: 'Uploads' };
 	},
@@ -49,3 +69,9 @@ export default {
 	}
 };
 </script>
+
+<style lang="scss" scoped>
+	div.grid {
+		margin-bottom: 1rem;
+	}
+</style>
\ No newline at end of file
diff --git a/src/site/pages/dashboard/tags/index.vue b/src/site/pages/dashboard/tags/index.vue
index 8523231..7c295b7 100644
--- a/src/site/pages/dashboard/tags/index.vue
+++ b/src/site/pages/dashboard/tags/index.vue
@@ -125,75 +125,73 @@
 
 
 <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">Manage your tags</h2>
-						<hr>
+	<section class="section is-fullheight dashboard">
+		<div class="container">
+			<div class="columns">
+				<div class="column is-narrow">
+					<Sidebar />
+				</div>
+				<div class="column">
+					<h2 class="subtitle">Manage your tags</h2>
+					<hr>
 
-						<div class="search-container">
-							<b-field>
-								<b-input v-model="newTagName"
-									placeholder="Tag name..."
-									type="text"
-									@keyup.enter.native="createTag" />
-								<p class="control">
-									<button class="button is-primary"
-										@click="createTag">Create tags</button>
-								</p>
-							</b-field>
-						</div>
+					<div class="search-container">
+						<b-field>
+							<b-input v-model="newTagName"
+								placeholder="Tag name..."
+								type="text"
+								@keyup.enter.native="createTag" />
+							<p class="control">
+								<button class="button is-primary"
+									@click="createTag">Create tags</button>
+							</p>
+						</b-field>
+					</div>
 
-						<div class="view-container">
-							<div v-for="tag in tags"
-								:key="tag.id"
-								class="album">
-								<div class="arrow-container"
-									@click="promptDeleteTag">
-									<i class="icon-arrow" />
-								</div>
-								<!--
-								<div class="thumb">
-									<figure class="image is-64x64 thumb">
-										<img src="~/assets/images/blank.png">
-									</figure>
-								</div>
-								-->
-								<div class="info">
-									<h4>
-										<router-link :to="`/dashboard/tags/${tag.id}`">{{ tag.name }}</router-link>
-									</h4>
-									<span>{{ tag.count || 0 }} files</span>
-								</div>
-								<!--
-								<div class="latest is-hidden-mobile">
-									<template v-if="album.fileCount > 0">
-										<div v-for="file of album.files"
-											:key="file.id"
-											class="thumb">
-											<figure class="image is-64x64">
-												<a :href="file.url"
-													target="_blank">
-													<img :src="file.thumbSquare">
-												</a>
-											</figure>
-										</div>
-										<div v-if="album.fileCount > 5"
-											class="thumb more no-background">
-											<router-link :to="`/dashboard/albums/${album.uuid}`">{{ album.fileCount - 5 }}+ more</router-link>
-										</div>
-									</template>
-									<template v-else>
-										<span class="no-files">Nothing to show here</span>
-									</template>
-								</div>
-								-->
+					<div class="view-container">
+						<div v-for="tag in tags"
+							:key="tag.id"
+							class="album">
+							<div class="arrow-container"
+								@click="promptDeleteTag">
+								<i class="icon-arrow" />
+							</div>
+							<!--
+							<div class="thumb">
+								<figure class="image is-64x64 thumb">
+									<img src="~/assets/images/blank.png">
+								</figure>
+							</div>
+							-->
+							<div class="info">
+								<h4>
+									<router-link :to="`/dashboard/tags/${tag.id}`">{{ tag.name }}</router-link>
+								</h4>
+								<span>{{ tag.count || 0 }} files</span>
+							</div>
+							<!--
+							<div class="latest is-hidden-mobile">
+								<template v-if="album.fileCount > 0">
+									<div v-for="file of album.files"
+										:key="file.id"
+										class="thumb">
+										<figure class="image is-64x64">
+											<a :href="file.url"
+												target="_blank">
+												<img :src="file.thumbSquare">
+											</a>
+										</figure>
+									</div>
+									<div v-if="album.fileCount > 5"
+										class="thumb more no-background">
+										<router-link :to="`/dashboard/albums/${album.uuid}`">{{ album.fileCount - 5 }}+ more</router-link>
+									</div>
+								</template>
+								<template v-else>
+									<span class="no-files">Nothing to show here</span>
+								</template>
 							</div>
+							-->
 						</div>
 					</div>
 				</div>
diff --git a/src/site/pages/faq.vue b/src/site/pages/faq.vue
index bd93086..bb84a7d 100644
--- a/src/site/pages/faq.vue
+++ b/src/site/pages/faq.vue
@@ -48,6 +48,7 @@ export default {
 	}
 };
 </script>
+
 <style lang="scss" scoped>
 	@import '~/assets/styles/_colors.scss';
 	article.message { background-color: #ffffff; }
diff --git a/src/site/pages/index.vue b/src/site/pages/index.vue
index 0617098..088d1ba 100644
--- a/src/site/pages/index.vue
+++ b/src/site/pages/index.vue
@@ -17,7 +17,7 @@
 				</div>
 			</div>
 		</div>
-		<div class="container">
+		<div class="container uploader">
 			<Uploader v-if="config.publicMode || (!config.publicMode && loggedIn)" />
 			<div v-else>
 				This site has disabled public uploads. You need an account.
@@ -79,4 +79,8 @@ export default {
 			}
 		}
 	}
+
+	.uploader {
+		margin-top: 2rem;
+	}
 </style>
diff --git a/src/site/pages/login.vue b/src/site/pages/login.vue
index 7a98aa4..514cbc5 100644
--- a/src/site/pages/login.vue
+++ b/src/site/pages/login.vue
@@ -1,38 +1,36 @@
 <template>
-	<section class="hero is-fullheight is-login">
-		<div class="hero-body">
-			<div class="container">
-				<h1 class="title">
-					Dashboard Access
-				</h1>
-				<h2 class="subtitle mb5">
-					Login to access your files and folders
-				</h2>
-				<div class="columns">
-					<div class="column is-4 is-offset-4">
-						<b-field>
-							<b-input v-model="username"
-								type="text"
-								placeholder="Username"
-								@keyup.enter.native="login" />
-						</b-field>
-						<b-field>
-							<b-input v-model="password"
-								type="password"
-								placeholder="Password"
-								password-reveal
-								@keyup.enter.native="login" />
-						</b-field>
+	<section class="section is-fullheight is-login">
+		<div class="container">
+			<h1 class="title">
+				Dashboard Access
+			</h1>
+			<h2 class="subtitle mb5">
+				Login to access your files and folders
+			</h2>
+			<div class="columns">
+				<div class="column is-4 is-offset-4">
+					<b-field>
+						<b-input v-model="username"
+							type="text"
+							placeholder="Username"
+							@keyup.enter.native="login" />
+					</b-field>
+					<b-field>
+						<b-input v-model="password"
+							type="password"
+							placeholder="Password"
+							password-reveal
+							@keyup.enter.native="login" />
+					</b-field>
 
-						<p class="control has-addons is-pulled-right">
-							<router-link v-if="config.userAccounts"
-								to="/register"
-								class="is-text">Don't have an account?</router-link>
-							<span v-else>Registration is closed at the moment</span>
-							<button class="button is-primary big ml1"
-								@click="login">login</button>
-						</p>
-					</div>
+					<p class="control has-addons is-pulled-right">
+						<router-link v-if="config.userAccounts"
+							to="/register"
+							class="is-text">Don't have an account?</router-link>
+						<span v-else>Registration is closed at the moment</span>
+						<button class="button is-primary big ml1"
+							@click="login">login</button>
+					</p>
 				</div>
 			</div>
 		</div>
diff --git a/src/site/pages/register.vue b/src/site/pages/register.vue
index 2f155c0..c102abd 100644
--- a/src/site/pages/register.vue
+++ b/src/site/pages/register.vue
@@ -1,42 +1,40 @@
 <template>
-	<section class="hero is-fullheight is-register">
-		<div class="hero-body">
-			<div class="container">
-				<h1 class="title">
-					Dashboard Access
-				</h1>
-				<h2 class="subtitle mb5">
-					Register for a new account
-				</h2>
-				<div class="columns">
-					<div class="column is-4 is-offset-4">
-						<b-field>
-							<b-input v-model="username"
-								type="text"
-								placeholder="Username" />
-						</b-field>
-						<b-field>
-							<b-input v-model="password"
-								type="password"
-								placeholder="Password"
-								password-reveal />
-						</b-field>
-						<b-field>
-							<b-input v-model="rePassword"
-								type="password"
-								placeholder="Re-type Password"
-								password-reveal
-								@keyup.enter.native="register" />
-						</b-field>
+	<section class="section is-fullheight is-register">
+		<div class="container">
+			<h1 class="title">
+				Dashboard Access
+			</h1>
+			<h2 class="subtitle mb5">
+				Register for a new account
+			</h2>
+			<div class="columns">
+				<div class="column is-4 is-offset-4">
+					<b-field>
+						<b-input v-model="username"
+							type="text"
+							placeholder="Username" />
+					</b-field>
+					<b-field>
+						<b-input v-model="password"
+							type="password"
+							placeholder="Password"
+							password-reveal />
+					</b-field>
+					<b-field>
+						<b-input v-model="rePassword"
+							type="password"
+							placeholder="Re-type Password"
+							password-reveal
+							@keyup.enter.native="register" />
+					</b-field>
 
-						<p class="control has-addons is-pulled-right">
-							<router-link to="/login"
-								class="is-text">Already have an account?</router-link>
-							<button class="button is-primary big ml1"
-								:disabled="isLoading"
-								@click="register">Register</button>
-						</p>
-					</div>
+					<p class="control has-addons is-pulled-right">
+						<router-link to="/login"
+							class="is-text">Already have an account?</router-link>
+						<button class="button is-primary big ml1"
+							:disabled="isLoading"
+							@click="register">Register</button>
+					</p>
 				</div>
 			</div>
 		</div>
-- 
cgit v1.2.3


From 7e4dbdbd2b495e86c061970604c977b9d689f15d Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Mon, 29 Jun 2020 20:12:14 +0300
Subject: misc: Change the color of the warning on the homepage to red and
 bigger font-size

---
 src/site/pages/index.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'src/site')

diff --git a/src/site/pages/index.vue b/src/site/pages/index.vue
index 088d1ba..da55500 100644
--- a/src/site/pages/index.vue
+++ b/src/site/pages/index.vue
@@ -19,7 +19,8 @@
 		</div>
 		<div class="container uploader">
 			<Uploader v-if="config.publicMode || (!config.publicMode && loggedIn)" />
-			<div v-else>
+			<div v-else
+				class="has-text-centered is-size-4 has-text-danger">
 				This site has disabled public uploads. You need an account.
 			</div>
 			<Links />
-- 
cgit v1.2.3


From 20a782fefe0a0c9489bce23ec7ee6548dc5f012d Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Mon, 29 Jun 2020 22:17:42 +0300
Subject: feat: add darker image for album section

---
 src/site/assets/images/blank.png          | Bin 1892 -> 1479 bytes
 src/site/assets/images/blank_darker.png   | Bin 0 -> 862 bytes
 src/site/pages/dashboard/albums/index.vue |   2 +-
 3 files changed, 1 insertion(+), 1 deletion(-)
 create mode 100644 src/site/assets/images/blank_darker.png

(limited to 'src/site')

diff --git a/src/site/assets/images/blank.png b/src/site/assets/images/blank.png
index 224a81c..f1ea2eb 100644
Binary files a/src/site/assets/images/blank.png and b/src/site/assets/images/blank.png differ
diff --git a/src/site/assets/images/blank_darker.png b/src/site/assets/images/blank_darker.png
new file mode 100644
index 0000000..61f2944
Binary files /dev/null and b/src/site/assets/images/blank_darker.png differ
diff --git a/src/site/pages/dashboard/albums/index.vue b/src/site/pages/dashboard/albums/index.vue
index 6003c49..065667a 100644
--- a/src/site/pages/dashboard/albums/index.vue
+++ b/src/site/pages/dashboard/albums/index.vue
@@ -35,7 +35,7 @@
 								</div>
 								<div class="thumb">
 									<figure class="image is-64x64 thumb">
-										<img src="~/assets/images/blank.png">
+										<img src="~/assets/images/blank_darker.png">
 									</figure>
 								</div>
 								<div class="info">
-- 
cgit v1.2.3


From c8ad345d1287d9078075cb92956ac9bbd554f022 Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Mon, 29 Jun 2020 22:18:18 +0300
Subject: fix: heigh issues where the parent is smaller than the child

---
 src/site/layouts/default.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

(limited to 'src/site')

diff --git a/src/site/layouts/default.vue b/src/site/layouts/default.vue
index 744285c..61a257e 100644
--- a/src/site/layouts/default.vue
+++ b/src/site/layouts/default.vue
@@ -13,7 +13,7 @@
 import Navbar from '~/components/navbar/Navbar.vue';
 import Footer from '~/components/footer/Footer';
 export default {
-	components: { 
+	components: {
 		Navbar, 
 		Footer
 	},
@@ -48,7 +48,10 @@ export default {
 </script>
 <style lang="scss">
 	html { overflow: hidden !important; }
-	.is-fullheight { height: 100vh !important; }
+	.is-fullheight { 
+		min-height: 100vh !important; 
+		height: max-content;
+	}
 	.nuxt-app > .section {
 		min-height: auto !important;
 		height: auto !important;
-- 
cgit v1.2.3


From 520062508ccad88d49229e603fc4d2c0c0a118d3 Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Mon, 29 Jun 2020 22:18:42 +0300
Subject: feat: backend pagination

serverLoad++;
userRamUsage--;
---
 src/site/components/grid/Grid.vue  |  4 ++--
 src/site/pages/dashboard/index.vue | 22 ++++++++++++----------
 src/site/pages/index.vue           |  2 +-
 3 files changed, 15 insertions(+), 13 deletions(-)

(limited to 'src/site')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index 4c4bdf4..15ff5fd 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -17,7 +17,8 @@
 		</div>
 
 		<template v-if="!showList">
-			<Waterfall :gutterWidth="10"
+			<Waterfall v-if="showWaterfall"
+				:gutterWidth="10"
 				:gutterHeight="4">
 				<!--
 					TODO: Implement search based on originalName, albumName and tags
@@ -32,7 +33,6 @@
 				<!-- TODO: Implement pagination -->
 
 				<WaterfallItem v-for="(item, index) in gridFiles"
-					v-if="showWaterfall"
 					:key="index"
 					:width="width"
 					move-class="item-move">
diff --git a/src/site/pages/dashboard/index.vue b/src/site/pages/dashboard/index.vue
index 8a4031b..64f8266 100644
--- a/src/site/pages/dashboard/index.vue
+++ b/src/site/pages/dashboard/index.vue
@@ -8,15 +8,16 @@
 				<div class="column">
 					<h2 class="subtitle">Your uploaded files</h2>
 					<hr>
+
 					<!-- TODO: Add a list view so the user can see the files that don't have thumbnails, like text documents -->
-					<Grid v-if="files.length"
-						:files="paginatedFiles"
+					<Grid v-if="count"
+						:files="files"
 						:enableSearch="false"
 						class="grid" />
 
 					<b-pagination
-						v-if="files.length > perPage"
-						:total="files.length"
+						v-if="count > perPage"
+						:total="count"
 						:per-page="perPage"
 						:current.sync="current"
 						class="pagination"
@@ -46,25 +47,26 @@ export default {
 	data() {
 		return {
 			files: [],
+			count: 0,
 			current: 1,
 			perPage: 20
 		};
 	},
-	computed: {
-		paginatedFiles() {
-			return this.files.slice((this.current - 1) * this.perPage, this.current * this.perPage);
-		}
-	},
 	metaInfo() {
 		return { title: 'Uploads' };
 	},
+	watch: {
+		current: 'getFiles'
+	},
 	mounted() {
 		this.getFiles();
 	},
 	methods: {
 		async getFiles() {
-			const response = await this.$axios.$get(`files`);
+			// TODO: Cache a few pages once fetched
+			const response = await this.$axios.$get(`files`, { params: { page: this.current, limit: this.perPage }});
 			this.files = response.files;
+			this.count = response.count;
 		}
 	}
 };
diff --git a/src/site/pages/index.vue b/src/site/pages/index.vue
index da55500..707ae67 100644
--- a/src/site/pages/index.vue
+++ b/src/site/pages/index.vue
@@ -1,5 +1,5 @@
 <template>
-	<div>
+	<div class="section">
 		<div class="container">
 			<div class="columns">
 				<div class="column is-3 is-offset-2">
-- 
cgit v1.2.3


From 8416dc81a34b80de0ac9a4d0be923466bcffdec4 Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Wed, 1 Jul 2020 20:15:08 +0300
Subject: fix: use file id instead of index and remove load more button

---
 src/site/components/grid/Grid.vue | 14 ++------------
 1 file changed, 2 insertions(+), 12 deletions(-)

(limited to 'src/site')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index 15ff5fd..b6615be 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -33,7 +33,7 @@
 				<!-- TODO: Implement pagination -->
 
 				<WaterfallItem v-for="(item, index) in gridFiles"
-					:key="index"
+					:key="item.id"
 					:width="width"
 					move-class="item-move">
 					<template v-if="isPublic">
@@ -93,10 +93,6 @@
 					</template>
 				</WaterfallItem>
 			</Waterfall>
-			<button
-				v-if="moreFiles"
-				class="button is-primary"
-				@click="loadMoreFilesWaterfall">Load more</button>
 		</template>
 		<div v-else>
 			<b-table
@@ -254,16 +250,10 @@ export default {
 			return require('@/assets/images/blank.png');
 		},
 		gridFiles() {
-			return this.files.slice(this.filesOffsetWaterfall, this.filesOffsetEndWaterfall);
+			return this.files;
 		},
-		moreFiles() {
-			return this.files.length > this.filesOffsetEndWaterfall;
-		}
 	},
 	methods: {
-		loadMoreFilesWaterfall() {
-			this.filesOffsetEndWaterfall = this.filesOffsetEndWaterfall + this.filesPerPageWaterfall;
-		},
 		async search() {
 			const data = await this.$search.do(this.searchTerm, [
 				'name',
-- 
cgit v1.2.3


From 44e8175e968c62f4e8e3df39efd445743ea6aa8f Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Wed, 1 Jul 2020 20:39:42 +0300
Subject: feat: use SSR when rendering the dashboard (if possible)

---
 src/site/pages/dashboard/index.vue | 21 +++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

(limited to 'src/site')

diff --git a/src/site/pages/dashboard/index.vue b/src/site/pages/dashboard/index.vue
index 64f8266..0eb9532 100644
--- a/src/site/pages/dashboard/index.vue
+++ b/src/site/pages/dashboard/index.vue
@@ -9,7 +9,6 @@
 					<h2 class="subtitle">Your uploaded files</h2>
 					<hr>
 
-					<!-- TODO: Add a list view so the user can see the files that don't have thumbnails, like text documents -->
 					<Grid v-if="count"
 						:files="files"
 						:enableSearch="false"
@@ -49,7 +48,7 @@ export default {
 			files: [],
 			count: 0,
 			current: 1,
-			perPage: 20
+			perPage: 30
 		};
 	},
 	metaInfo() {
@@ -58,8 +57,22 @@ export default {
 	watch: {
 		current: 'getFiles'
 	},
-	mounted() {
-		this.getFiles();
+	async asyncData({ $axios, route }) {
+		const perPage = 30;
+		const current = 1; // current page
+
+		try {
+			const response = await $axios.$get(`files`, { params: { page: current, limit: perPage }});
+			return {
+				files: response.files || [],
+				count: response.count || 0,
+				current,
+				perPage
+			};
+		} catch (error) {
+			console.error(error);
+			return { files: [] };
+		}
 	},
 	methods: {
 		async getFiles() {
-- 
cgit v1.2.3


From e9ef148d7498b7068274a4141d5591cc8a64016e Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Wed, 1 Jul 2020 20:40:10 +0300
Subject: feat: backend pagination for albums

---
 src/site/pages/dashboard/albums/_id.vue | 43 +++++++++++++++++++++++++++++----
 1 file changed, 38 insertions(+), 5 deletions(-)

(limited to 'src/site')

diff --git a/src/site/pages/dashboard/albums/_id.vue b/src/site/pages/dashboard/albums/_id.vue
index e716b37..47e7057 100644
--- a/src/site/pages/dashboard/albums/_id.vue
+++ b/src/site/pages/dashboard/albums/_id.vue
@@ -12,9 +12,23 @@
 				<div class="column">
 					<h2 class="subtitle">Files</h2>
 					<hr>
-					<!-- TODO: Add a list view so the user can see the files that don't have thumbnails, like text documents -->
+
 					<Grid v-if="files.length"
 						:files="files" />
+
+					<b-pagination
+						v-if="count > perPage"
+						:total="count"
+						:per-page="perPage"
+						:current.sync="current"
+						class="pagination"
+						icon-prev="icon-interface-arrow-left"
+						icon-next="icon-interface-arrow-right"
+						icon-pack="icon"
+						aria-next-label="Next page"
+						aria-previous-label="Previous page"
+						aria-page-label="Page"
+						aria-current-label="Current page" />
 				</div>
 			</div>
 		</div>
@@ -34,22 +48,41 @@ export default {
 	data() {
 		return {
 			name: null,
-			files: []
+			files: [],
+			count: 0,
+			current: 1,
+			perPage: 30
 		};
 	},
 	metaInfo() {
 		return { title: 'Album' };
 	},
+	watch: {
+		current: 'getFiles'
+	},
 	async asyncData({ $axios, route }) {
+		const perPage = 30;
+		const current = 1; // current page
+
 		try {
-			const response = await $axios.$get(`album/${route.params.id}/full`);
+			const response = await $axios.$get(`album/${route.params.id}/full`, { params: { page: current, limit: perPage }});
 			return {
-				files: response.files ? response.files : []
+				files: response.files || [],
+				count: response.count || 0,
+				current,
+				perPage
 			};
 		} catch (error) {
 			console.error(error);
 			return { files: [] };
 		}
-	}
+	},
+	methods: {
+		async getFiles() {
+			const response = await this.$axios.$get(`album/${this.$route.params.id}/full`, { params: { page: this.current, limit: this.perPage }});
+			this.files = response.files;
+			this.count = response.count;
+		}
+	},
 };
 </script>
-- 
cgit v1.2.3


From 6688587eb6bdf118687c630378d40e36a3700a52 Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Thu, 2 Jul 2020 02:48:21 +0300
Subject: feat: move toolbar into a level and add slot for pagination on grid

---
 src/site/components/grid/Grid.vue | 57 ++++++++++++++++++++-------------------
 1 file changed, 30 insertions(+), 27 deletions(-)

(limited to 'src/site')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index b6615be..279472c 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -1,37 +1,40 @@
 <template>
 	<div>
-		<div v-if="enableToolbar"
-			class="toolbar">
-			<div class="block">
-				<b-radio v-model="showList"
-					name="name"
-					:native-value="true">
-					List
-				</b-radio>
-				<b-radio v-model="showList"
-					name="name"
-					:native-value="false">
-					Grid
-				</b-radio>
+		<nav class="level">
+			<div class="level-left">
+				<div class="level-item">
+					<slot name="pagination" />
+				</div>
 			</div>
-		</div>
+			<div v-if="enableToolbar"
+				class="level-right toolbar">
+				<div class="level-item">
+					<div class="block">
+						<b-radio v-model="showList"
+							name="name"
+							:native-value="true">
+							List
+						</b-radio>
+						<b-radio v-model="showList"
+							name="name"
+							:native-value="false">
+							Grid
+						</b-radio>
+					</div>
+				</div>
+			</div>
+		</nav>
 
 		<template v-if="!showList">
 			<Waterfall v-if="showWaterfall"
 				:gutterWidth="10"
 				:gutterHeight="4">
-				<!--
-					TODO: Implement search based on originalName, albumName and tags
-					<input v-if="enableSearch"
-						v-model="searchTerm"
-						type="text"
-						placeholder="Search..."
-						@input="search()"
-						@keyup.enter="search()">
-				-->
-
-				<!-- TODO: Implement pagination -->
-
+				<input v-if="enableSearch"
+					v-model="searchTerm"
+					type="text"
+					placeholder="Search..."
+					@input="search()"
+					@keyup.enter="search()">	
 				<WaterfallItem v-for="(item, index) in gridFiles"
 					:key="item.id"
 					:width="width"
@@ -289,7 +292,7 @@ export default {
 		isAlbumSelected(id) {
 			if (!this.showingModalForFile) return;
 			const found = this.showingModalForFile.albums.find(el => el.id === id);
-			return found ? found.id ? true : false : false;
+			return found && found.id ? true : false;
 		},
 		async openAlbumModal(file) {
 			this.showingModalForFile = file;
-- 
cgit v1.2.3


From 720ffaf0083564c85a07d66a6d303f34706add41 Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Thu, 2 Jul 2020 02:50:55 +0300
Subject: feat: start refactoring the code to actually use vuex

This includes creating multiple stores as needed for components and removing all complex states from components (since all those states should be stored in vuex)
---
 src/site/components/navbar/Navbar.vue |  10 ++-
 src/site/layouts/default.vue          |  66 +++++++++---------
 src/site/middleware/admin.js          |   4 +-
 src/site/middleware/auth.js           |   2 +-
 src/site/pages/dashboard/index.vue    | 124 +++++++++++++++++++++-------------
 src/site/pages/index.vue              |  10 ++-
 src/site/pages/login.vue              |  39 +++++------
 src/site/pages/register.vue           |  10 ++-
 src/site/plugins/axios.js             |   9 +--
 src/site/store/alert.js               |  26 +++++++
 src/site/store/auth.js                |  61 +++++++++++++++++
 src/site/store/config.js              |  19 ++++++
 src/site/store/images.js              |  56 +++++++++++++++
 src/site/store/index.js               |  62 +++--------------
 14 files changed, 317 insertions(+), 181 deletions(-)
 create mode 100644 src/site/store/alert.js
 create mode 100644 src/site/store/auth.js
 create mode 100644 src/site/store/config.js
 create mode 100644 src/site/store/images.js

(limited to 'src/site')

diff --git a/src/site/components/navbar/Navbar.vue b/src/site/components/navbar/Navbar.vue
index 47f90cb..aa4a672 100644
--- a/src/site/components/navbar/Navbar.vue
+++ b/src/site/components/navbar/Navbar.vue
@@ -65,6 +65,8 @@
 </template>
 
 <script>
+import { mapState, mapGetters } from 'vuex';
+
 export default {
 	props: {
 		isWhite: {
@@ -76,12 +78,8 @@ export default {
 		return { hamburger: false };
 	},
 	computed: {
-		loggedIn() {
-			return this.$store.state.loggedIn;
-		},
-		config() {
-			return this.$store.state.config;
-		}
+		...mapGetters({ loggedIn: 'auth/isLoggedIn' }),
+		...mapState(['config'])
 	},
 	methods: {
 		logOut() {
diff --git a/src/site/layouts/default.vue b/src/site/layouts/default.vue
index 61a257e..08d733f 100644
--- a/src/site/layouts/default.vue
+++ b/src/site/layouts/default.vue
@@ -12,22 +12,18 @@
 <script>
 import Navbar from '~/components/navbar/Navbar.vue';
 import Footer from '~/components/footer/Footer';
+import { mapState } from 'vuex';
+
 export default {
 	components: {
-		Navbar, 
+		Navbar,
 		Footer
 	},
-	computed: {
-		config() {
-			return this.$store.state.config;
-		},
-		alert() {
-			return this.$store.state.alert;
-		}
-	},
+	computed: mapState(['config', 'alert']),
 	watch: {
-		alert() {
-			if (!this.alert) return;
+		'alert.text'() {
+			console.log('aaaaaaaa');
+			if (!this.alert.text) return;
 
 			this.$buefy.toast.open({
 				duration: 3500,
@@ -36,34 +32,40 @@ export default {
 				type: this.alert.error ? 'is-danger' : 'is-success'
 			});
 
-			setTimeout(() => {
-				this.$store.dispatch('alert', null);
-			}, 3500);
+			this.$store.dispatch('alert/clear', null);
 		}
 	},
 	mounted() {
-		console.log(`%c lolisafe %c v${this.config.version} %c`, 'background:#35495e ; padding: 1px; border-radius: 3px 0 0 3px;  color: #fff', 'background:#ff015b; padding: 1px; border-radius: 0 3px 3px 0;  color: #fff', 'background:transparent');
+		console.log(
+			`%c lolisafe %c v${this.config.version} %c`,
+			'background:#35495e ; padding: 1px; border-radius: 3px 0 0 3px;  color: #fff',
+			'background:#ff015b; padding: 1px; border-radius: 0 3px 3px 0;  color: #fff',
+			'background:transparent'
+		);
 	}
 };
 </script>
+
 <style lang="scss">
-	html { overflow: hidden !important; }
-	.is-fullheight { 
-		min-height: 100vh !important; 
-		height: max-content;
-	}
-	.nuxt-app > .section {
-		min-height: auto !important;
-		height: auto !important;
-	}
-	@import "~/assets/styles/style.scss";
-	@import "~/assets/styles/icons.min.css";
+html {
+	overflow: hidden !important;
+}
+.is-fullheight {
+	min-height: 100vh !important;
+	height: max-content;
+}
+.nuxt-app > .section {
+	min-height: auto !important;
+	height: auto !important;
+}
+@import '~/assets/styles/style.scss';
+@import '~/assets/styles/icons.min.css';
 </style>
 <style lang="scss" scoped>
-	.default-body {
-		align-items: baseline !important;
-	}
-	.scroll-area {
-		height: 100vh;
-	}
+.default-body {
+	align-items: baseline !important;
+}
+.scroll-area {
+	height: 100vh;
+}
 </style>
diff --git a/src/site/middleware/admin.js b/src/site/middleware/admin.js
index fcac9c6..5c09220 100644
--- a/src/site/middleware/admin.js
+++ b/src/site/middleware/admin.js
@@ -1,5 +1,5 @@
 export default function({ store, redirect }) {
 	// If the user is not authenticated
-	if (!store.state.user) return redirect('/login');
-	if (!store.state.user.isAdmin) return redirect('/dashboard');
+	if (!store.state.auth.user) return redirect('/login');
+	if (!store.state.auth.user.isAdmin) return redirect('/dashboard');
 }
diff --git a/src/site/middleware/auth.js b/src/site/middleware/auth.js
index 58a372e..c3f339c 100644
--- a/src/site/middleware/auth.js
+++ b/src/site/middleware/auth.js
@@ -1,6 +1,6 @@
 export default function({ store, redirect }) {
 	// If the user is not authenticated
-	if (!store.state.loggedIn) {
+	if (!store.state.auth.loggedIn) {
 		return redirect('/login');
 	}
 }
diff --git a/src/site/pages/dashboard/index.vue b/src/site/pages/dashboard/index.vue
index 0eb9532..6c1b99b 100644
--- a/src/site/pages/dashboard/index.vue
+++ b/src/site/pages/dashboard/index.vue
@@ -6,27 +6,55 @@
 					<Sidebar />
 				</div>
 				<div class="column">
-					<h2 class="subtitle">Your uploaded files</h2>
+					<nav class="level">
+						<div class="level-left">
+							<div class="level-item">
+								<h2 class="subtitle">Your uploaded files</h2>
+							</div>
+						</div>
+						<div class="level-right">
+							<div class="level-item">
+								<b-field>
+									<b-input
+										placeholder="Search"
+										type="search"/>
+									<p class="control">
+										<button
+											outlined
+											class="button is-primary">
+											Search
+										</button>
+									</p>
+								</b-field>
+							</div>
+						</div>
+					</nav>					
 					<hr>
 
-					<Grid v-if="count"
-						:files="files"
-						:enableSearch="false"
-						class="grid" />
+					<b-loading :active="images.isLoading" />
 
-					<b-pagination
-						v-if="count > perPage"
-						:total="count"
-						:per-page="perPage"
-						:current.sync="current"
-						class="pagination"
-						icon-prev="icon-interface-arrow-left"
-						icon-next="icon-interface-arrow-right"
-						icon-pack="icon"
-						aria-next-label="Next page"
-						aria-previous-label="Previous page"
-						aria-page-label="Page"
-						aria-current-label="Current page" />
+					<Grid v-if="totalFiles"
+						:files="images.files"
+						:enableSearch="false"
+						class="grid">
+						<template v-slot:pagination>
+							<b-pagination
+								v-if="shouldPaginate"
+								:total="totalFiles"
+								:per-page="limit"
+								:current.sync="current"
+								range-before="2"
+								range-after="2"
+								class="pagination-slot"
+								icon-prev="icon-interface-arrow-left"
+								icon-next="icon-interface-arrow-right"
+								icon-pack="icon"
+								aria-next-label="Next page"
+								aria-previous-label="Previous page"
+								aria-page-label="Page"
+								aria-current-label="Current page" />
+						</template>
+					</Grid>
 				</div>
 			</div>
 		</div>
@@ -34,6 +62,8 @@
 </template>
 
 <script>
+import { mapState, mapGetters, mapActions } from 'vuex';
+
 import Sidebar from '~/components/sidebar/Sidebar.vue';
 import Grid from '~/components/grid/Grid.vue';
 
@@ -42,44 +72,34 @@ export default {
 		Sidebar,
 		Grid
 	},
-	middleware: 'auth',
+	middleware: ['auth', ({ store }) => {
+		store.dispatch('images/fetch');
+	}],
 	data() {
 		return {
-			files: [],
-			count: 0,
-			current: 1,
-			perPage: 30
+			current: 1
 		};
 	},
+	computed: {
+		...mapGetters({ 
+			totalFiles: 'images/getTotalFiles',
+			shouldPaginate: 'images/shouldPaginate',
+			limit: 'images/getLimit'
+		}),
+		...mapState(['images'])
+	},
 	metaInfo() {
 		return { title: 'Uploads' };
 	},
 	watch: {
-		current: 'getFiles'
-	},
-	async asyncData({ $axios, route }) {
-		const perPage = 30;
-		const current = 1; // current page
-
-		try {
-			const response = await $axios.$get(`files`, { params: { page: current, limit: perPage }});
-			return {
-				files: response.files || [],
-				count: response.count || 0,
-				current,
-				perPage
-			};
-		} catch (error) {
-			console.error(error);
-			return { files: [] };
-		}
+		current: 'fetchPaginate'
 	},
 	methods: {
-		async getFiles() {
-			// TODO: Cache a few pages once fetched
-			const response = await this.$axios.$get(`files`, { params: { page: this.current, limit: this.perPage }});
-			this.files = response.files;
-			this.count = response.count;
+		...mapActions({
+			fetch: 'images/fetch'
+		}),
+		fetchPaginate() {
+			this.fetch(this.current)
 		}
 	}
 };
@@ -89,4 +109,14 @@ export default {
 	div.grid {
 		margin-bottom: 1rem;
 	}
-</style>
\ No newline at end of file
+
+	.pagination-slot {
+		padding: 1rem 0;
+	}
+</style>
+
+<style lang="scss">
+	.pagination-slot > .pagination-previous, .pagination-slot > .pagination-next {
+		display: none !important;
+	}
+</style>
diff --git a/src/site/pages/index.vue b/src/site/pages/index.vue
index 707ae67..bb35be3 100644
--- a/src/site/pages/index.vue
+++ b/src/site/pages/index.vue
@@ -28,6 +28,8 @@
 	</div>
 </template>
 <script>
+import { mapState, mapGetters } from 'vuex';
+
 import Logo from '~/components/logo/Logo.vue';
 import Uploader from '~/components/uploader/Uploader.vue';
 import Links from '~/components/home/links/Links.vue';
@@ -43,12 +45,8 @@ export default {
 		return { albums: [] };
 	},
 	computed: {
-		loggedIn() {
-			return this.$store.state.loggedIn;
-		},
-		config() {
-			return this.$store.state.config;
-		}
+		...mapGetters({ loggedIn: 'auth/isLoggedIn' }),
+		...mapState(['config'])
 	}
 };
 </script>
diff --git a/src/site/pages/login.vue b/src/site/pages/login.vue
index 514cbc5..3c43755 100644
--- a/src/site/pages/login.vue
+++ b/src/site/pages/login.vue
@@ -63,6 +63,8 @@
 </template>
 
 <script>
+import { mapState } from 'vuex';
+
 export default {
 	name: 'Login',
 	data() {
@@ -74,40 +76,31 @@ export default {
 			isLoading: false
 		};
 	},
-	computed: {
-		config() {
-			return this.$store.state.config;
-		}
-	},
+	computed: mapState(['config', 'auth']),
 	metaInfo() {
 		return { title: 'Login' };
 	},
+	created() {
+		if (this.auth.loggedIn) {
+			this.redirect();
+		}
+	},
 	methods: {
 		async login() {
-			if (this.isLoading) return;
-			if (!this.username || !this.password) {
-				this.$store.dispatch('alert', {
+			if (this.auth.isLoading) return;
+
+			const { username, password } = this;
+			if (!username || !password) {
+				this.$store.dispatch('alert/set', {
 					text: 'Please fill both fields before attempting to log in.',
 					error: true
 				});
 				return;
 			}
-			this.isLoading = true;
-
-			try {
-				const data = await this.$axios.$post(`auth/login`, {
-					username: this.username,
-					password: this.password
-				});
-				this.$axios.setToken(data.token, 'Bearer');
-				document.cookie = `token=${encodeURIComponent(data.token)}`;
-				this.$store.dispatch('login', { token: data.token, user: data.user });
 
+			await this.$store.dispatch('auth/login', { username, password });
+			if (this.auth.loggedIn) {
 				this.redirect();
-			} catch (error) {
-				//
-			} finally {
-				this.isLoading = false;
 			}
 		},
 		/*
@@ -126,7 +119,7 @@ export default {
 				});
 		},*/
 		redirect() {
-			this.$store.commit('loggedIn', true);
+			console.log('redirect');
 			if (typeof this.$route.query.redirect !== 'undefined') {
 				this.$router.push(this.$route.query.redirect);
 				return;
diff --git a/src/site/pages/register.vue b/src/site/pages/register.vue
index c102abd..92eb35a 100644
--- a/src/site/pages/register.vue
+++ b/src/site/pages/register.vue
@@ -42,6 +42,8 @@
 </template>
 
 <script>
+import { mapState } from 'vuex';
+
 export default {
 	name: 'Register',
 	data() {
@@ -52,11 +54,7 @@ export default {
 			isLoading: false
 		};
 	},
-	computed: {
-		config() {
-			return this.$store.state.config;
-		}
-	},
+	computed: mapState(['config', 'auth']),
 	metaInfo() {
 		return { title: 'Register' };
 	},
@@ -72,7 +70,7 @@ export default {
 			}
 			if (this.password !== this.rePassword) {
 				this.$store.dispatch('alert', {
-					text: 'Passwords don\'t match',
+					text: "Passwords don't match",
 					error: true
 				});
 				return;
diff --git a/src/site/plugins/axios.js b/src/site/plugins/axios.js
index 843a258..cff149c 100644
--- a/src/site/plugins/axios.js
+++ b/src/site/plugins/axios.js
@@ -1,21 +1,22 @@
 export default function({ $axios, store }) {
 	$axios.setHeader('accept', 'application/vnd.lolisafe.json');
+
 	$axios.onRequest(config => {
-		if (store.state.token) {
-			config.headers.common['Authorization'] = `bearer ${store.state.token}`;
+		if (store.state.auth.token) {
+			config.headers.common['Authorization'] = `bearer ${store.state.auth.token}`;
 		}
 	});
 
 	$axios.onError(error => {
 		if (process.env.development) console.error('[AXIOS Error]', error);
 		if (process.browser) {
-			store.dispatch('alert', {
+			store.dispatch('alert/set', {
 				text: error.response.data.message,
 				error: true
 			});
 
 			if (error.response.data.message.indexOf('Token expired') !== -1) {
-				store.dispatch('logout');
+				store.dispatch('auth/logout');
 			}
 		}
 	});
diff --git a/src/site/store/alert.js b/src/site/store/alert.js
new file mode 100644
index 0000000..78c0eaf
--- /dev/null
+++ b/src/site/store/alert.js
@@ -0,0 +1,26 @@
+/* eslint-disable no-shadow */
+const getDefaultState = () => ({
+	text: null,
+	error: false
+});
+
+export const state = getDefaultState;
+
+export const actions = {
+	set({ commit }, data) {
+		commit('set', data);
+	},
+	clear({ commit }) {
+		commit('clear');
+	}
+};
+
+export const mutations = {
+	set(state, { text, error }) {
+		state.text = text;
+		state.error = error;
+	},
+	clear(state) {
+		Object.assign(state, getDefaultState());
+	}
+};
diff --git a/src/site/store/auth.js b/src/site/store/auth.js
new file mode 100644
index 0000000..a62a6ec
--- /dev/null
+++ b/src/site/store/auth.js
@@ -0,0 +1,61 @@
+/* eslint-disable no-shadow */
+// only used so I could keep the convention of naming the first param as "state" in mutations
+const getDefaultState = () => ({
+	loggedIn: false,
+	isLoading: false,
+	user: null,
+	token: null
+});
+
+export const state = getDefaultState;
+
+export const getters = {
+	isLoggedIn: state => state.loggedIn
+};
+
+export const actions = {
+	async verify({ commit, dispatch }) {
+		try {
+			const response = await this.$axios.$get('verify');
+			commit('loginSuccess', response);
+		} catch (e) {
+			dispatch('alert/set', { text: e.message, error: true }, { root: true });
+		}
+	},
+	async login({ commit, dispatch }, { username, password }) {
+		commit('loginRequest');
+
+		try {
+			const data = await this.$axios.$post(`auth/login`, { username, password });
+			this.$axios.setToken(data.token, 'Bearer');
+
+			commit('setToken', data.token);
+			commit('loginSuccess', { token: data.token, user: data.user });
+		} catch (e) {
+			dispatch('alert/set', { text: e.message, error: true }, { root: true });
+		}
+	},
+	logout({ commit }) {
+		commit('logout');
+	}
+};
+
+export const mutations = {
+	setToken(state, token) {
+		state.token = token;
+	},
+	loginRequest(state) {
+		state.isLoading = true;
+	},
+	loginSuccess(state, { user }) {
+		this.$cookies.set('token', state.token);
+		state.user = user;
+		state.loggedIn = true;
+		state.isLoading = false;
+	},
+	logout(state) {
+		this.$cookies.remove('token');
+		// reset state to default
+		Object.assign(state, getDefaultState());
+	}
+};
diff --git a/src/site/store/config.js b/src/site/store/config.js
new file mode 100644
index 0000000..6202f84
--- /dev/null
+++ b/src/site/store/config.js
@@ -0,0 +1,19 @@
+/* eslint-disable no-shadow */
+export const state = () => ({
+	development: true,
+	version: '4.0.0',
+	URL: 'http://localhost:8080',
+	baseURL: 'http://localhost:8080/api',
+	serviceName: '',
+	maxFileSize: 100,
+	chunkSize: 90,
+	maxLinksPerAlbum: 5,
+	publicMode: false,
+	userAccounts: false
+});
+
+export const mutations = {
+	set(state, config) {
+		Object.assign(state, config);
+	}
+};
diff --git a/src/site/store/images.js b/src/site/store/images.js
new file mode 100644
index 0000000..e87dac1
--- /dev/null
+++ b/src/site/store/images.js
@@ -0,0 +1,56 @@
+/* eslint-disable no-shadow */
+export const state = () => ({
+	files: [],
+	isLoading: false,
+	pagination: {
+		page: 1,
+		limit: 30,
+		totalFiles: 0
+	}
+});
+
+export const getters = {
+	getTotalFiles: state => state.pagination.totalFiles,
+	getFetchedCount: state => state.files.length,
+	shouldPaginate: ({ pagination }) => pagination.totalFiles > pagination.limit,
+	getLimit: ({ pagination }) => pagination.limit
+};
+
+export const actions = {
+	async fetch({ commit, dispatch, state }, page) {
+		commit('setIsLoading');
+
+		page = page || 1;
+
+		try {
+			const response = await this.$axios.$get(`files`, { params: { limit: state.pagination.limit, page } });
+
+			commit('updateFiles', { files: response.files });
+			commit('updatePaginationMeta', { totalFiles: response.count, page });
+		} catch (e) {
+			dispatch('alert/set', { text: e.message, error: true }, { root: true });
+		}
+	},
+	async fetchById({ commit, dispatch }) {
+		try {
+			const response = await this.$axios.$get('verify');
+			commit('loginSuccess', response);
+		} catch (e) {
+			dispatch('alert/set', { text: e.message, error: true }, { root: true });
+		}
+	}
+};
+
+export const mutations = {
+	setIsLoading(state) {
+		state.isLoading = true;
+	},
+	updateFiles(state, { files }) {
+		state.files = files || [];
+		state.isLoading = false;
+	},
+	updatePaginationMeta(state, { page, totalFiles }) {
+		state.pagination.page = page || 1;
+		state.pagination.totalFiles = totalFiles || 0;
+	}
+};
diff --git a/src/site/store/index.js b/src/site/store/index.js
index 1fc2272..8f910ae 100644
--- a/src/site/store/index.js
+++ b/src/site/store/index.js
@@ -1,66 +1,20 @@
 import config from '../../../dist/config.json';
-export const state = () => ({
-	loggedIn: false,
-	user: null,
-	token: null,
-	config: null,
-	alert: null
-});
-
-/* eslint-disable no-shadow */
-export const mutations = {
-	loggedIn(state, payload) {
-		state.loggedIn = payload;
-	},
-	user(state, payload) {
-		state.user = payload;
-	},
-	token(state, payload) {
-		state.token = payload;
-	},
-	config(state, payload) {
-		state.config = payload;
-	},
-	alert(state, payload) {
-		state.alert = payload;
-	}
-};
 
 export const actions = {
-	async nuxtClientInit({ commit, dispatch }, { app, req }) {
-		commit('config', config);
+	async nuxtClientInit({ commit, dispatch }) {
+		commit('config/set', config);
 
 		const cookies = this.$cookies.getAll();
-		if (!cookies.token) return dispatch('logout');
+		if (!cookies.token) return dispatch('auth/logout');
 
-		commit('token', cookies.token);
-		try {
-			const response = await this.$axios.$get('verify');
-			dispatch('login', {
-				token: cookies.token,
-				user: response.user
-			});
-		} catch (error) {
-			// dispatch('logout');
-		}
-	},
-	login({ commit }, { token, user }) {
-		this.$cookies.set('token', token);
-		commit('token', token);
-		commit('user', user);
-		commit('loggedIn', true);
-	},
-	logout({ commit }) {
-		this.$cookies.remove('token');
-		commit('token', null);
-		commit('user', null);
-		commit('loggedIn', false);
-	},
-	alert({ commit }, payload) {
+		commit('auth/setToken', cookies.token);
+		await dispatch('auth/verify');
+	}
+	/* 	alert({ commit }, payload) {
 		if (!payload) return commit('alert', null);
 		commit('alert', {
 			text: payload.text,
 			error: payload.error
 		});
-	}
+	} */
 };
-- 
cgit v1.2.3


From c2dbbe6396540ee9d76991a00f5028b49d221d0c Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Thu, 2 Jul 2020 23:42:02 +0300
Subject: feat: refactor account to use vuex, fix small presentational
 components

---
 src/site/components/footer/Footer.vue        | 12 ++---
 src/site/components/grid/Grid.vue            |  8 +--
 src/site/components/loading/BulmaLoading.vue | 33 +++++++++++++
 src/site/components/navbar/Navbar.vue        |  4 +-
 src/site/components/sidebar/Sidebar.vue      | 15 +++---
 src/site/pages/dashboard/account.vue         | 74 +++++++++++++++++-----------
 src/site/pages/dashboard/index.vue           |  2 +-
 src/site/pages/login.vue                     |  2 +-
 src/site/store/auth.js                       | 39 ++++++++++++++-
 src/site/store/images.js                     |  4 +-
 10 files changed, 139 insertions(+), 54 deletions(-)
 create mode 100644 src/site/components/loading/BulmaLoading.vue

(limited to 'src/site')

diff --git a/src/site/components/footer/Footer.vue b/src/site/components/footer/Footer.vue
index 49f622c..44e34f4 100644
--- a/src/site/components/footer/Footer.vue
+++ b/src/site/components/footer/Footer.vue
@@ -49,15 +49,15 @@
 	</footer>
 </template>
 <script>
+import { mapState, mapGetters } from 'vuex';
 import { saveAs } from 'file-saver';
+
 export default {
 	computed: {
-		loggedIn() {
-			return this.$store.state.loggedIn;
-		},
-		version() {
-			return this.$store.state.config.version;
-		}
+		...mapGetters({ loggedIn: 'auth/isLoggedIn' }),
+		...mapState({
+			version: state => state.config.version
+		})
 	},
 	methods: {
 		createShareXThing() {
diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index 279472c..a06eabf 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -198,6 +198,8 @@
 </template>
 
 <script>
+import { mapState } from 'vuex';
+
 import Waterfall from './waterfall/Waterfall.vue';
 import WaterfallItem from './waterfall/WaterfallItem.vue';
 
@@ -246,9 +248,9 @@ export default {
 		};
 	},
 	computed: {
-		user() {
-			return this.$store.state.user;
-		},
+		...mapState({
+			user: state => state.auth.user
+		}),
 		blank() {
 			return require('@/assets/images/blank.png');
 		},
diff --git a/src/site/components/loading/BulmaLoading.vue b/src/site/components/loading/BulmaLoading.vue
new file mode 100644
index 0000000..37cc5a5
--- /dev/null
+++ b/src/site/components/loading/BulmaLoading.vue
@@ -0,0 +1,33 @@
+<template>
+	<div class="loader-wrapper">
+		<div class="loader is-loading" />
+	</div>
+</template>
+
+<style lang="scss" scoped>
+	.loader-wrapper {
+		position: absolute;
+		top: 0;
+		left: 0;
+		height: 100%;
+		width: 100%;
+		background: #fff;
+		opacity: 0;
+		z-index: -1;
+		transition: opacity .3s;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		border-radius: 6px;
+
+			.loader {
+				height: 80px;
+				width: 80px;
+			}
+
+		&.is-active {
+			opacity: 1;
+			z-index: 1;
+		}
+	}
+</style>
diff --git a/src/site/components/navbar/Navbar.vue b/src/site/components/navbar/Navbar.vue
index aa4a672..7fb2f22 100644
--- a/src/site/components/navbar/Navbar.vue
+++ b/src/site/components/navbar/Navbar.vue
@@ -82,8 +82,8 @@ export default {
 		...mapState(['config'])
 	},
 	methods: {
-		logOut() {
-			this.$store.dispatch('logout');
+		async logOut() {
+			await this.$store.dispatch('auth/logout');
 			this.$router.replace('/login');
 		}
 	}
diff --git a/src/site/components/sidebar/Sidebar.vue b/src/site/components/sidebar/Sidebar.vue
index a2ad3f4..3cb8b43 100644
--- a/src/site/components/sidebar/Sidebar.vue
+++ b/src/site/components/sidebar/Sidebar.vue
@@ -6,13 +6,11 @@
 		<router-link to="/dashboard/albums">
 			<i class="icon-interface-window" />Albums
 		</router-link>
-		<!--
 		<router-link to="/dashboard/tags">
 			<i class="icon-ecommerce-tag-c" />Tags
 		</router-link>
-		-->
 		<router-link to="/dashboard/account">
-			<i class="icon-ecommerce-tag-c" />Account
+			<i class="icon-user-alt" />Account
 		</router-link>
 		<template v-if="user && user.isAdmin">
 			<router-link to="/dashboard/admin/users">
@@ -28,13 +26,14 @@
 	</div>
 </template>
 <script>
+import { mapState } from 'vuex';
+
 export default {
-	computed: {
-		user() {
-			return this.$store.state.user;
-		}
-	}
+	computed: mapState({
+		user: state => state.auth.user
+	})
 };
+
 </script>
 <style lang="scss" scoped>
 	@import '~/assets/styles/_colors.scss';
diff --git a/src/site/pages/dashboard/account.vue b/src/site/pages/dashboard/account.vue
index 121b2b3..1c335e8 100644
--- a/src/site/pages/dashboard/account.vue
+++ b/src/site/pages/dashboard/account.vue
@@ -12,7 +12,7 @@
 					<b-field label="Username"
 						message="Nothing to do here"
 						horizontal>
-						<b-input v-model="user.username"
+						<b-input :value="user.username"
 							expanded
 							disabled />
 					</b-field>
@@ -20,7 +20,7 @@
 					<b-field label="Current password"
 						message="If you want to change your password input the current one here"
 						horizontal>
-						<b-input v-model="user.password"
+						<b-input v-model="password"
 							type="password"
 							expanded />
 					</b-field>
@@ -28,7 +28,7 @@
 					<b-field label="New password"
 						message="Your new password"
 						horizontal>
-						<b-input v-model="user.newPassword"
+						<b-input v-model="newPassword"
 							type="password"
 							expanded />
 					</b-field>
@@ -36,7 +36,7 @@
 					<b-field label="New password again"
 						message="Your new password once again"
 						horizontal>
-						<b-input v-model="user.reNewPassword"
+						<b-input v-model="reNewPassword"
 							type="password"
 							expanded />
 					</b-field>
@@ -46,12 +46,17 @@
 							@click="changePassword">Change password</button>
 					</div>
 
-					<b-field label="Api key"
+					<b-field label="API key"
 						message="This API key lets you use the service from other apps"
 						horizontal>
-						<b-input v-model="user.apiKey"
-							expanded
-							disabled />
+						<b-field expanded>
+							<b-input :value="apiKey"
+								expanded
+								disabled />
+							<p class="control">
+								<button class="button is-primary">Copy</button>
+							</p>
+						</b-field>
 					</b-field>
 
 					<div class="mb2 mt2 text-center">
@@ -65,51 +70,62 @@
 </template>
 
 <script>
+import { mapState, mapActions, mapGetters } from 'vuex';
 import Sidebar from '~/components/sidebar/Sidebar.vue';
 
 export default {
 	components: {
 		Sidebar
 	},
-	middleware: 'auth',
+	middleware: ['auth', ({ store }) => {
+		store.dispatch('auth/fetchCurrentUser');
+	}],
 	data() {
 		return {
-			user: {}
+			password: '',
+			newPassword: '',
+			reNewPassword: ''
 		};
+	}, 
+	computed: {
+		...mapGetters({ 'apiKey': 'auth/getApiKey' }),
+		...mapState({
+			user: state => state.auth.user
+		})
 	},
 	metaInfo() {
 		return { title: 'Account' };
 	},
-	mounted() {
-		this.getUserSetttings();
-	},
 	methods: {
-		async getUserSetttings() {
-			const response = await this.$axios.$get(`users/me`);
-			this.user = response.user;
-		},
+		...mapActions({
+			getUserSetttings: 'auth/fetchCurrentUser'
+		}),
 		async changePassword() {
-			if (!this.user.password || !this.user.newPassword || !this.user.reNewPassword) {
-				this.$store.dispatch('alert', {
+			const { password, newPassword, reNewPassword } = this;
+
+			if (!password || !newPassword || !reNewPassword) {
+				this.$store.dispatch('alert/set', {
 					text: 'One or more fields are missing',
 					error: true
 				});
 				return;
 			}
-			if (this.user.newPassword !== this.user.reNewPassword) {
-				this.$store.dispatch('alert', {
+			if (newPassword !== reNewPassword) {
+				this.$store.dispatch('alert/set', {
 					text: 'Passwords don\'t match',
 					error: true
 				});
 				return;
 			}
 
-			const response = await this.$axios.$post(`user/password/change`,
-				{
-					password: this.user.password,
-					newPassword: this.user.newPassword
-				});
-			this.$buefy.toast.open(response.message);
+			const response = await this.$store.dispatch('auth/changePassword', {
+				password,
+				newPassword
+			});
+
+			if (response) {
+				this.$buefy.toast.open(response.message);
+			}
 		},
 		promptNewAPIKey() {
 			this.$buefy.dialog.confirm({
@@ -119,9 +135,7 @@ export default {
 			});
 		},
 		async requestNewAPIKey() {
-			const response = await this.$axios.$post(`user/apikey/change`);
-			this.user.apiKey = response.apiKey;
-			this.$forceUpdate();
+			const response = await this.$store.dispatch('auth/requestAPIKey');		
 			this.$buefy.toast.open(response.message);
 		}
 	}
diff --git a/src/site/pages/dashboard/index.vue b/src/site/pages/dashboard/index.vue
index 6c1b99b..89f0fac 100644
--- a/src/site/pages/dashboard/index.vue
+++ b/src/site/pages/dashboard/index.vue
@@ -99,7 +99,7 @@ export default {
 			fetch: 'images/fetch'
 		}),
 		fetchPaginate() {
-			this.fetch(this.current)
+			this.fetch(this.current);
 		}
 	}
 };
diff --git a/src/site/pages/login.vue b/src/site/pages/login.vue
index 3c43755..cef0868 100644
--- a/src/site/pages/login.vue
+++ b/src/site/pages/login.vue
@@ -99,6 +99,7 @@ export default {
 			}
 
 			await this.$store.dispatch('auth/login', { username, password });
+
 			if (this.auth.loggedIn) {
 				this.redirect();
 			}
@@ -119,7 +120,6 @@ export default {
 				});
 		},*/
 		redirect() {
-			console.log('redirect');
 			if (typeof this.$route.query.redirect !== 'undefined') {
 				this.$router.push(this.$route.query.redirect);
 				return;
diff --git a/src/site/store/auth.js b/src/site/store/auth.js
index a62a6ec..73976d6 100644
--- a/src/site/store/auth.js
+++ b/src/site/store/auth.js
@@ -10,7 +10,8 @@ const getDefaultState = () => ({
 export const state = getDefaultState;
 
 export const getters = {
-	isLoggedIn: state => state.loggedIn
+	isLoggedIn: state => state.loggedIn,
+	getApiKey: state => state.user?.apiKey
 };
 
 export const actions = {
@@ -35,6 +36,36 @@ export const actions = {
 			dispatch('alert/set', { text: e.message, error: true }, { root: true });
 		}
 	},
+	async fetchCurrentUser({ commit, dispatch }) {
+		try {
+			const data = await this.$axios.$get(`users/me`);
+			commit('setUser', data.user);
+		} catch (e) {
+			dispatch('alert/set', { text: e.message, error: true }, { root: true });
+		}
+	},
+	async changePassword({ dispatch }, { password, newPassword }) {
+		try {
+			const response = await this.$axios.$post(`user/password/change`, {
+				password,
+				newPassword
+			});
+
+			return response;
+		} catch (e) {
+			dispatch('alert/set', { text: e.message, error: true }, { root: true });
+		}
+	},
+	async requestAPIKey({ commit, dispatch }) {
+		try {
+			const response = await this.$axios.$post(`user/apikey/change`);
+			commit('setApiKey', response.apiKey);
+
+			return response;
+		} catch (e) {
+			dispatch('alert/set', { text: e.message, error: true }, { root: true });
+		}
+	},
 	logout({ commit }) {
 		commit('logout');
 	}
@@ -44,6 +75,12 @@ export const mutations = {
 	setToken(state, token) {
 		state.token = token;
 	},
+	setApiKey(state, apiKey) {
+		state.user.apiKey = apiKey;
+	},
+	setUser(state, user) {
+		state.user = user;
+	},
 	loginRequest(state) {
 		state.isLoading = true;
 	},
diff --git a/src/site/store/images.js b/src/site/store/images.js
index e87dac1..f6dae1b 100644
--- a/src/site/store/images.js
+++ b/src/site/store/images.js
@@ -10,8 +10,8 @@ export const state = () => ({
 });
 
 export const getters = {
-	getTotalFiles: state => state.pagination.totalFiles,
-	getFetchedCount: state => state.files.length,
+	getTotalFiles: ({ pagination }) => pagination.totalFiles,
+	getFetchedCount: ({ files }) => files.length,
 	shouldPaginate: ({ pagination }) => pagination.totalFiles > pagination.limit,
 	getLimit: ({ pagination }) => pagination.limit
 };
-- 
cgit v1.2.3


From 22f9eb4dff9ee03b5ec655db2204050ffe7a7771 Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Thu, 2 Jul 2020 23:42:44 +0300
Subject: feat: refactor preview to support random fragment extraction

---
 src/site/assets/styles/_colors.scss | 22 +++++++++++++---------
 1 file changed, 13 insertions(+), 9 deletions(-)

(limited to 'src/site')

diff --git a/src/site/assets/styles/_colors.scss b/src/site/assets/styles/_colors.scss
index a141447..b8861d2 100644
--- a/src/site/assets/styles/_colors.scss
+++ b/src/site/assets/styles/_colors.scss
@@ -1,13 +1,13 @@
 // $basePink: #EC1A55;
 $base-1: #292e39;
-$base-2: #2E3440;
-$base-3: #3B4252;
-$base-4: #434C5E;
-$base-5: #4C566A;
+$base-2: #2e3440;
+$base-3: #3b4252;
+$base-4: #434c5e;
+$base-5: #4c566a;
 
 $background: #1e2430;
 $backgroundAccent: #20222b;
-$backgroundAccentLighter: #53555E;
+$backgroundAccentLighter: #53555e;
 $backgroundLight1: #f5f6f8;
 
 // customize navbar
@@ -23,16 +23,15 @@ $input-hover-color: $textColor;
 
 $basePink: #ff015b;
 $basePinkHover: rgb(196, 4, 71);
-$baseBlue: #30A9ED;
+$baseBlue: #30a9ed;
 $baseBlueHover: rgb(21, 135, 201);
 
 $uploaderDropdownColor: #797979;
 
-$boxShadow: 0 10px 15px rgba(4,39,107,0.2);
+$boxShadow: 0 10px 15px rgba(4, 39, 107, 0.2);
 $boxShadowLight: rgba(15, 17, 21, 0.35) 0px 6px 9px 0px;
 
 // pagination
-
 $pagination-color: $defaultTextColor;
 
 $pagination-focus-color: $textColorHighlight;
@@ -45,4 +44,9 @@ $pagination-hover-color: $textColorHighlight;
 $pagination-hover-border-color: $textColorHighlight;
 
 $pagination-current-background-color: $base-3;
-$pagination-current-border-color: $base-2;
\ No newline at end of file
+$pagination-current-border-color: $base-2;
+
+// loading
+
+$loading-background: rgba(0, 0, 0, 0.8);
+$loading-background: rgba(40, 40, 40, 0.66);
-- 
cgit v1.2.3


From 7581d13d1cdbd190009dea11549669cfa5cc00ad Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Fri, 3 Jul 2020 00:35:09 +0300
Subject: feat: separate album view into multiple components and use vuex

---
 src/site/components/album/AlbumDetails.vue | 177 ++++++++++++++++
 src/site/components/album/AlbumEntry.vue   | 179 +++++++++++++++++
 src/site/pages/dashboard/albums/index.vue  | 312 +----------------------------
 src/site/store/albums.js                   |  56 ++++++
 4 files changed, 423 insertions(+), 301 deletions(-)
 create mode 100644 src/site/components/album/AlbumDetails.vue
 create mode 100644 src/site/components/album/AlbumEntry.vue
 create mode 100644 src/site/store/albums.js

(limited to 'src/site')

diff --git a/src/site/components/album/AlbumDetails.vue b/src/site/components/album/AlbumDetails.vue
new file mode 100644
index 0000000..a02fe55
--- /dev/null
+++ b/src/site/components/album/AlbumDetails.vue
@@ -0,0 +1,177 @@
+<template>
+	<div class="details">
+		<h2>Public links for this album:</h2>
+
+		<b-table
+			:data="details.links || []"
+			:mobile-cards="true">
+			<template slot-scope="props">
+				<b-table-column field="identifier"
+					label="Link"
+					centered>
+					<a :href="`${config.URL}/a/${props.row.identifier}`"
+						target="_blank">
+						{{ props.row.identifier }}
+					</a>
+				</b-table-column>
+
+				<b-table-column field="views"
+					label="Views"
+					centered>
+					{{ props.row.views }}
+				</b-table-column>
+
+				<b-table-column field="enableDownload"
+					label="Allow download"
+					centered>
+					<b-switch v-model="props.row.enableDownload"
+						@input="linkOptionsChanged(props.row)" />
+				</b-table-column>
+
+				<b-table-column field="enabled"
+					numeric>
+					<button class="button is-danger"
+						@click="promptDeleteAlbumLink(props.row.identifier)">Delete link</button>
+				</b-table-column>
+			</template>
+			<template slot="empty">
+				<div class="has-text-centered">
+					<i class="icon-misc-mood-sad" />
+				</div>
+				<div class="has-text-centered">
+					Nothing here
+				</div>
+			</template>
+			<template slot="footer">
+				<div class="level is-paddingless">
+					<div class="level-left">
+						<div class="level-item">
+							<button :class="{ 'is-loading': isCreatingLink }"
+								class="button is-primary"
+								style="float: left"
+								@click="createLink(albumId)">Create new link</button>
+						</div>
+						<div class="level-item">
+							<span class="has-text-default">{{ details.links.length }} / {{ config.maxLinksPerAlbum }} links created</span>
+						</div>
+					</div>
+
+					<div class="level-right">
+						<div class="level-item">
+							<button class="button is-danger"
+								style="float: right"
+								@click="promptDeleteAlbum(albumId)">Delete album</button>
+						</div>
+					</div>
+				</div>
+			</template>
+		</b-table>
+	</div>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+
+export default {
+	props: {
+		albumId: {
+			type: Number,
+			default: 0
+		},
+		details: {
+			type: Object,
+			default: () => ({})
+		},
+	},
+	data() {
+		return {
+			isCreatingLink: false
+		}
+	},
+	computed: mapState(['config']),
+	methods: {
+		promptDeleteAlbum(id) {
+			this.$buefy.dialog.confirm({
+				message: 'Are you sure you want to delete this album?',
+				onConfirm: () => this.deleteAlbum(id)
+			});
+		},
+		async deleteAlbum(id) {
+			const response = await this.$axios.$delete(`album/${id}`);
+			this.getAlbums();
+			return this.$buefy.toast.open(response.message);
+		},
+		promptDeleteAlbumLink(identifier) {
+			this.$buefy.dialog.confirm({
+				message: 'Are you sure you want to delete this album link?',
+				onConfirm: () => this.deleteAlbumLink(identifier)
+			});
+		},
+		async deleteAlbumLink(identifier) {
+			const response = await this.$axios.$delete(`album/link/delete/${identifier}`);
+			return this.$buefy.toast.open(response.message);
+		},
+		async linkOptionsChanged(link) {
+			const response = await this.$axios.$post(`album/link/edit`,
+				{
+					identifier: link.identifier,
+					enableDownload: link.enableDownload,
+					enabled: link.enabled
+				});
+			this.$buefy.toast.open(response.message);
+		},
+		async createLink(album) {
+			album.isCreatingLink = true;
+			// Since we actually want to change the state even if the call fails, use a try catch
+			try {
+				const response = await this.$axios.$post(`album/link/new`,
+					{ albumId: album.id });
+				this.$buefy.toast.open(response.message);
+				album.links.push({
+					identifier: response.identifier,
+					views: 0,
+					enabled: true,
+					enableDownload: true,
+					expiresAt: null
+				});
+			} catch (error) {
+				//
+			} finally {
+				album.isCreatingLink = false;
+			}
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+	@import '~/assets/styles/_colors.scss';
+
+	div.details {
+		flex: 0 1 100%;
+		padding-left: 2em;
+		padding-top: 1em;
+		min-height: 50px;
+
+		.b-table {
+			padding: 2em 0em;
+
+			.table-wrapper {
+				-webkit-box-shadow: $boxShadowLight;
+						box-shadow: $boxShadowLight;
+			}
+		}
+	}
+</style>
+
+
+<style lang="scss">
+	@import '~/assets/styles/_colors.scss';
+
+	.b-table {
+		.table-wrapper {
+			-webkit-box-shadow: $boxShadowLight;
+					box-shadow: $boxShadowLight;
+		}
+	}
+</style>
diff --git a/src/site/components/album/AlbumEntry.vue b/src/site/components/album/AlbumEntry.vue
new file mode 100644
index 0000000..4d23d6c
--- /dev/null
+++ b/src/site/components/album/AlbumEntry.vue
@@ -0,0 +1,179 @@
+<template>
+	<div class="album">
+		<div class="arrow-container"
+			@click="toggleDetails(album)">
+			<i :class="{ active: isExpanded }"
+				class="icon-arrow" />
+		</div>
+		<div class="thumb">
+			<figure class="image is-64x64 thumb">
+				<img src="~/assets/images/blank_darker.png">
+			</figure>
+		</div>
+		<div class="info">
+			<h4>
+				<router-link :to="`/dashboard/albums/${album.id}`">{{ album.name }}</router-link>
+			</h4>
+			<span>Updated <timeago :since="album.editedAt" /></span>
+			<span>{{ album.fileCount || 0 }} files</span>
+		</div>
+		<div class="latest is-hidden-mobile">
+			<template v-if="album.fileCount > 0">
+				<div v-for="file of album.files"
+					:key="file.id"
+					class="thumb">
+					<figure class="image is-64x64">
+						<a :href="file.url"
+							target="_blank">
+							<img :src="file.thumbSquare">
+						</a>
+					</figure>
+				</div>
+				<div v-if="album.fileCount > 5"
+					class="thumb more no-background">
+					<router-link :to="`/dashboard/albums/${album.id}`">{{ album.fileCount - 5 }}+ more</router-link>
+				</div>
+			</template>
+			<template v-else>
+				<span class="no-files">Nothing to show here</span>
+			</template>
+		</div>
+
+		<AlbumDetails v-if="isExpanded"
+			:details="getDetails"
+			:albumId="album.id" />
+	</div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import AlbumDetails from '~/components/album/AlbumDetails.vue';
+
+export default {
+	components: {
+		AlbumDetails
+	},
+	props: {
+		album: {
+			type: Object,
+			default: () => ({})
+		}
+	},
+	computed: {
+		...mapGetters({
+			isExpandedGetter: 'albums/isExpanded',
+			getDetailsGetter: 'albums/getDetails'
+		}),
+		isExpanded() {
+			return this.isExpandedGetter(this.album.id);
+		},
+		getDetails() {
+			return this.getDetailsGetter(this.album.id);
+		}
+	},
+	methods: {
+		async toggleDetails(album) {
+			if (!this.isExpanded) {
+				await this.$store.dispatch('albums/fetchDetails', album.id);
+			}
+			this.$store.commit('albums/toggleExpandedState', album.id);
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+	@import '~/assets/styles/_colors.scss';
+
+	div.album {
+		display: flex;
+		flex-wrap: wrap;
+		margin-bottom: 10px;
+
+		div.arrow-container {
+			width: 2em;
+			height: 64px;
+			position: relative;
+			cursor: pointer;
+
+			i {
+				border: 2px solid $defaultTextColor;
+				border-right: 0;
+				border-top: 0;
+				display: block;
+				height: 1em;
+				position: absolute;
+				transform: rotate(-135deg);
+				transform-origin: center;
+				width: 1em;
+				z-index: 4;
+				top: 22px;
+
+				-webkit-transition: transform 0.1s linear;
+				-moz-transition: transform 0.1s linear;
+				-ms-transition: transform 0.1s linear;
+				-o-transition: transform 0.1s linear;
+				transition: transform 0.1s linear;
+
+				&.active {
+					transform: rotate(-45deg);
+				}
+			}
+		}
+
+		div.thumb {
+			width: 64px;
+			height: 64px;
+			-webkit-box-shadow: $boxShadowLight;
+					box-shadow: $boxShadowLight;
+		}
+
+		div.info {
+			margin-left: 15px;
+			text-align: left;
+			h4 {
+				font-size: 1.5rem;
+				a {
+					color: $defaultTextColor;
+					font-weight: 400;
+					&:hover { text-decoration: underline; }
+				}
+			}
+			span { display: block; }
+			span:nth-child(3) {
+				font-size: 0.9rem;
+			}
+		}
+
+		div.latest {
+			flex-grow: 1;
+			justify-content: flex-end;
+			display: flex;
+			margin-left: 15px;
+
+			span.no-files {
+				font-size: 1.5em;
+				color: #b1b1b1;
+				padding-top: 17px;
+			}
+
+			div.more {
+				width: 64px;
+				height: 64px;
+				background: white;
+				display: flex;
+				align-items: center;
+				padding: 10px;
+				text-align: center;
+				a {
+					line-height: 1rem;
+					color: $defaultTextColor;
+					&:hover { text-decoration: underline; }
+				}
+			}
+		}
+	}
+
+	div.no-background { background: none !important; }
+</style>
+
diff --git a/src/site/pages/dashboard/albums/index.vue b/src/site/pages/dashboard/albums/index.vue
index 065667a..2a54ab8 100644
--- a/src/site/pages/dashboard/albums/index.vue
+++ b/src/site/pages/dashboard/albums/index.vue
@@ -25,118 +25,9 @@
 						</div>
 
 						<div class="view-container">
-							<div v-for="album in albums"
+							<AlbumEntry v-for="album in albums.list"
 								:key="album.id"
-								class="album">
-								<div class="arrow-container"
-									@click="fetchAlbumDetails(album)">
-									<i :class="{ active: album.isDetailsOpen }"
-										class="icon-arrow" />
-								</div>
-								<div class="thumb">
-									<figure class="image is-64x64 thumb">
-										<img src="~/assets/images/blank_darker.png">
-									</figure>
-								</div>
-								<div class="info">
-									<h4>
-										<router-link :to="`/dashboard/albums/${album.id}`">{{ album.name }}</router-link>
-									</h4>
-									<span>Updated <timeago :since="album.editedAt" /></span>
-									<span>{{ album.fileCount || 0 }} files</span>
-								</div>
-								<div class="latest is-hidden-mobile">
-									<template v-if="album.fileCount > 0">
-										<div v-for="file of album.files"
-											:key="file.id"
-											class="thumb">
-											<figure class="image is-64x64">
-												<a :href="file.url"
-													target="_blank">
-													<img :src="file.thumbSquare">
-												</a>
-											</figure>
-										</div>
-										<div v-if="album.fileCount > 5"
-											class="thumb more no-background">
-											<router-link :to="`/dashboard/albums/${album.id}`">{{ album.fileCount - 5 }}+ more</router-link>
-										</div>
-									</template>
-									<template v-else>
-										<span class="no-files">Nothing to show here</span>
-									</template>
-								</div>
-
-								<div v-if="album.isDetailsOpen"
-									class="details">
-									<h2>Public links for this album:</h2>
-
-									<b-table
-										:data="album.links.length ? album.links : []"
-										:mobile-cards="true">
-										<template slot-scope="props">
-											<b-table-column field="identifier"
-												label="Link"
-												centered>
-												<a :href="`${config.URL}/a/${props.row.identifier}`"
-													target="_blank">
-													{{ props.row.identifier }}
-												</a>
-											</b-table-column>
-
-											<b-table-column field="views"
-												label="Views"
-												centered>
-												{{ props.row.views }}
-											</b-table-column>
-
-											<b-table-column field="enableDownload"
-												label="Allow download"
-												centered>
-												<b-switch v-model="props.row.enableDownload"
-													@input="linkOptionsChanged(props.row)" />
-											</b-table-column>
-
-											<b-table-column field="enabled"
-												numeric>
-												<button class="button is-danger"
-													@click="promptDeleteAlbumLink(props.row.identifier)">Delete link</button>
-											</b-table-column>
-										</template>
-										<template slot="empty">
-											<div class="has-text-centered">
-												<i class="icon-misc-mood-sad" />
-											</div>
-											<div class="has-text-centered">
-												Nothing here
-											</div>
-										</template>
-										<template slot="footer">
-											<div class="level is-paddingless">
-												<div class="level-left">
-													<div class="level-item">
-														<button :class="{ 'is-loading': album.isCreatingLink }"
-															class="button is-primary"
-															style="float: left"
-															@click="createLink(album)">Create new link</button>
-													</div>
-													<div class="level-item">
-														<span class="has-text-default">{{ album.links.length }} / {{ config.maxLinksPerAlbum }} links created</span>
-													</div>
-												</div>
-
-												<div class="level-right">
-													<div class="level-item">
-														<button class="button is-danger"
-															style="float: right"
-															@click="promptDeleteAlbum(album.id)">Delete album</button>
-													</div>
-												</div>
-											</div>
-										</template>
-									</b-table>
-								</div>
-							</div>
+								:album="album" />
 						</div>
 					</div>
 				</div>
@@ -146,87 +37,28 @@
 </template>
 
 <script>
+import { mapState } from 'vuex';
 import Sidebar from '~/components/sidebar/Sidebar.vue';
+import AlbumEntry from '~/components/album/AlbumEntry.vue';
 
 export default {
 	components: {
-		Sidebar
+		Sidebar,
+		AlbumEntry
 	},
-	middleware: 'auth',
+	middleware: ['auth', ({ store }) => {
+		store.dispatch('albums/fetch');
+	}],
 	data() {
 		return {
-			albums: [],
 			newAlbumName: null
 		};
 	},
-	computed: {
-		config() {
-			return this.$store.state.config;
-		}
-	},
+	computed: mapState(['config', 'albums']),
 	metaInfo() {
 		return { title: 'Uploads' };
 	},
-	mounted() {
-		this.getAlbums();
-	},
 	methods: {
-		async fetchAlbumDetails(album) {
-			const response = await this.$axios.$get(`album/${album.id}/links`);
-			album.links = response.links;
-			album.isDetailsOpen = !album.isDetailsOpen;
-			this.$forceUpdate();
-		},
-		promptDeleteAlbum(id) {
-			this.$buefy.dialog.confirm({
-				message: 'Are you sure you want to delete this album?',
-				onConfirm: () => this.deleteAlbum(id)
-			});
-		},
-		async deleteAlbum(id) {
-			const response = await this.$axios.$delete(`album/${id}`);
-			this.getAlbums();
-			return this.$buefy.toast.open(response.message);
-		},
-		promptDeleteAlbumLink(identifier) {
-			this.$buefy.dialog.confirm({
-				message: 'Are you sure you want to delete this album link?',
-				onConfirm: () => this.deleteAlbumLink(identifier)
-			});
-		},
-		async deleteAlbumLink(identifier) {
-			const response = await this.$axios.$delete(`album/link/delete/${identifier}`);
-			return this.$buefy.toast.open(response.message);
-		},
-		async linkOptionsChanged(link) {
-			const response = await this.$axios.$post(`album/link/edit`,
-				{
-					identifier: link.identifier,
-					enableDownload: link.enableDownload,
-					enabled: link.enabled
-				});
-			this.$buefy.toast.open(response.message);
-		},
-		async createLink(album) {
-			album.isCreatingLink = true;
-			// Since we actually want to change the state even if the call fails, use a try catch
-			try {
-				const response = await this.$axios.$post(`album/link/new`,
-					{ albumId: album.id });
-				this.$buefy.toast.open(response.message);
-				album.links.push({
-					identifier: response.identifier,
-					views: 0,
-					enabled: true,
-					enableDownload: true,
-					expiresAt: null
-				});
-			} catch (error) {
-				//
-			} finally {
-				album.isCreatingLink = false;
-			}
-		},
 		async createAlbum() {
 			if (!this.newAlbumName || this.newAlbumName === '') return;
 			const response = await this.$axios.$post(`album/new`,
@@ -234,17 +66,11 @@ export default {
 			this.newAlbumName = null;
 			this.$buefy.toast.open(response.message);
 			this.getAlbums();
-		},
-		async getAlbums() {
-			const response = await this.$axios.$get(`albums/mini`);
-			for (const album of response.albums) {
-				album.isDetailsOpen = false;
-			}
-			this.albums = response.albums;
 		}
 	}
 };
 </script>
+
 <style lang="scss" scoped>
 	@import '~/assets/styles/_colors.scss';
 	div.view-container {
@@ -256,121 +82,5 @@ export default {
 		background-color: $base-2;
 	}
 
-	div.album {
-		display: flex;
-		flex-wrap: wrap;
-		margin-bottom: 10px;
-
-		div.arrow-container {
-			width: 2em;
-			height: 64px;
-			position: relative;
-			cursor: pointer;
-
-			i {
-				border: 2px solid $defaultTextColor;
-				border-right: 0;
-				border-top: 0;
-				display: block;
-				height: 1em;
-				position: absolute;
-				transform: rotate(-135deg);
-				transform-origin: center;
-				width: 1em;
-				z-index: 4;
-				top: 22px;
-
-				-webkit-transition: transform 0.1s linear;
-				-moz-transition: transform 0.1s linear;
-				-ms-transition: transform 0.1s linear;
-				-o-transition: transform 0.1s linear;
-				transition: transform 0.1s linear;
-
-				&.active {
-					transform: rotate(-45deg);
-				}
-			}
-		}
-		div.thumb {
-			width: 64px;
-			height: 64px;
-			-webkit-box-shadow: $boxShadowLight;
-					box-shadow: $boxShadowLight;
-		}
-
-		div.info {
-			margin-left: 15px;
-			text-align: left;
-			h4 {
-				font-size: 1.5rem;
-				a {
-					color: $defaultTextColor;
-					font-weight: 400;
-					&:hover { text-decoration: underline; }
-				}
-			}
-			span { display: block; }
-			span:nth-child(3) {
-				font-size: 0.9rem;
-			}
-		}
-
-		div.latest {
-			flex-grow: 1;
-			justify-content: flex-end;
-			display: flex;
-			margin-left: 15px;
-
-			span.no-files {
-				font-size: 1.5em;
-				color: #b1b1b1;
-				padding-top: 17px;
-			}
-
-			div.more {
-				width: 64px;
-				height: 64px;
-				background: white;
-				display: flex;
-				align-items: center;
-				padding: 10px;
-				text-align: center;
-				a {
-					line-height: 1rem;
-					color: $defaultTextColor;
-					&:hover { text-decoration: underline; }
-				}
-			}
-		}
-
-		div.details {
-			flex: 0 1 100%;
-			padding-left: 2em;
-			padding-top: 1em;
-			min-height: 50px;
-
-			.b-table {
-				padding: 2em 0em;
-
-				.table-wrapper {
-					-webkit-box-shadow: $boxShadowLight;
-							box-shadow: $boxShadowLight;
-				}
-			}
-		}
-	}
-
 	div.column > h2.subtitle { padding-top: 1px; }
-
-	div.no-background { background: none !important; }
-</style>
-<style lang="scss">
-	@import '~/assets/styles/_colors.scss';
-
-	.b-table {
-		.table-wrapper {
-			-webkit-box-shadow: $boxShadowLight;
-					box-shadow: $boxShadowLight;
-		}
-	}
 </style>
diff --git a/src/site/store/albums.js b/src/site/store/albums.js
new file mode 100644
index 0000000..a33181c
--- /dev/null
+++ b/src/site/store/albums.js
@@ -0,0 +1,56 @@
+/* eslint-disable no-shadow */
+export const state = () => ({
+	list: [],
+	isListLoading: false,
+	albumDetails: {},
+	expandedAlbums: []
+});
+
+export const getters = {
+	isExpanded: state => id => state.expandedAlbums.indexOf(id) > -1,
+	getDetails: state => id => state.albumDetails[id] || {}
+};
+
+export const actions = {
+	async fetch({ commit, dispatch }) {
+		try {
+			commit('albumsRequest');
+			const response = await this.$axios.$get(`albums/mini`);
+
+			commit('setAlbums', response.albums);
+		} catch (e) {
+			dispatch('alert/set', { text: e.message, error: true }, { root: true });
+		}
+	},
+	async fetchDetails({ commit }, albumId) {
+		const response = await this.$axios.$get(`album/${albumId}/links`);
+
+		commit('setDetails', {
+			id: albumId,
+			details: {
+				links: response.links
+			}
+		});
+	}
+};
+
+export const mutations = {
+	albumsRequest(state) {
+		state.isLoading = true;
+	},
+	setAlbums(state, albums) {
+		state.list = albums;
+		state.isLoading = false;
+	},
+	setDetails(state, { id, details }) {
+		state.albumDetails[id] = details;
+	},
+	toggleExpandedState(state, id) {
+		const foundIndex = state.expandedAlbums.indexOf(id);
+		if (foundIndex > -1) {
+			state.expandedAlbums.splice(foundIndex, 1);
+		} else {
+			state.expandedAlbums.push(id);
+		}
+	}
+};
-- 
cgit v1.2.3


From 92be4504ccb8f6d918013e5c33870858cd22376a Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Sat, 4 Jul 2020 03:26:35 +0300
Subject: feat: refactor most of the album components to use store for
 presentation and actions

---
 src/site/assets/styles/_colors.scss         |  10 +-
 src/site/assets/styles/style.scss           | 139 ++++++++++++++++------------
 src/site/components/album/AlbumDetails.vue  |  85 +++++++++--------
 src/site/components/album/AlbumEntry.vue    |  11 +--
 src/site/components/grid/Grid.vue           |  12 +--
 src/site/pages/dashboard/admin/file/_id.vue |   2 +
 src/site/pages/dashboard/admin/user/_id.vue |   1 +
 src/site/pages/dashboard/albums/_id.vue     |  60 ++++++++----
 src/site/pages/dashboard/albums/index.vue   |  28 ++++--
 src/site/pages/dashboard/tags/index.vue     |   2 +
 src/site/store/album.js                     |   0
 src/site/store/albums.js                    |  75 ++++++++++++++-
 12 files changed, 289 insertions(+), 136 deletions(-)
 create mode 100644 src/site/store/album.js

(limited to 'src/site')

diff --git a/src/site/assets/styles/_colors.scss b/src/site/assets/styles/_colors.scss
index b8861d2..6693d8a 100644
--- a/src/site/assets/styles/_colors.scss
+++ b/src/site/assets/styles/_colors.scss
@@ -10,6 +10,10 @@ $backgroundAccent: #20222b;
 $backgroundAccentLighter: #53555e;
 $backgroundLight1: #f5f6f8;
 
+$scheme-main: $background;
+$scheme-main-bis: $backgroundAccent;
+$scheme-main-ter: $backgroundAccentLighter;
+
 // customize navbar
 $navbar-background-color: $backgroundAccent;
 $navbar-item-color: #f5f6f8;
@@ -47,6 +51,10 @@ $pagination-current-background-color: $base-3;
 $pagination-current-border-color: $base-2;
 
 // loading
-
 $loading-background: rgba(0, 0, 0, 0.8);
 $loading-background: rgba(40, 40, 40, 0.66);
+
+// dialogs
+$modal-card-body-background-color: $background;
+$modal-card-head-background-color: $backgroundAccent;
+$modal-card-foot-border-top: 1px solid rgba(255, 255, 255, 0.1098);
diff --git a/src/site/assets/styles/style.scss b/src/site/assets/styles/style.scss
index 69d15d3..6c939b5 100644
--- a/src/site/assets/styles/style.scss
+++ b/src/site/assets/styles/style.scss
@@ -1,15 +1,16 @@
 // Let's first take care of having the customized colors ready.
-@import "./_colors.scss";
+@import './_colors.scss';
 
 // Bulma/Buefy customization
-@import "../../../node_modules/bulma/sass/utilities/_all.sass";
+@import '../../../node_modules/bulma/sass/utilities/_all.sass';
 
 $body-size: 14px !default;
-$family-primary: 'Nunito', BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+$family-primary: 'Nunito', BlinkMacSystemFont, -apple-system, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',
+	'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
 $size-normal: 1rem;
 
-@import "../../../node_modules/bulma/bulma.sass";
-@import "../../../node_modules/buefy/src/scss/buefy.scss";
+@import '../../../node_modules/bulma/bulma.sass';
+@import '../../../node_modules/buefy/src/scss/buefy.scss';
 
 html {
 	// font-size: 100%;
@@ -18,9 +19,9 @@ html {
 }
 
 a {
-	color: #5E81AC;
+	color: #5e81ac;
 	&:hover {
-		color: #81A1C1;
+		color: #81a1c1;
 		text-decoration: underline;
 	}
 }
@@ -43,10 +44,18 @@ h4 {
 }
 
 @for $i from 1 through 10 {
-	.mt#{$i} { margin-top: $i + em !important; }
-	.mb#{$i} { margin-bottom: $i + em !important; }
-	.ml#{$i} { margin-left: $i + em !important; }
-	.mr#{$i} { margin-right: $i + em !important; }
+	.mt#{$i} {
+		margin-top: $i + em !important;
+	}
+	.mb#{$i} {
+		margin-bottom: $i + em !important;
+	}
+	.ml#{$i} {
+		margin-left: $i + em !important;
+	}
+	.mr#{$i} {
+		margin-right: $i + em !important;
+	}
 }
 
 .text-center {
@@ -58,8 +67,12 @@ hr {
 	height: 1px;
 }
 // Bulma color changes.
-.tooltip.is-top.is-primary:before { border-top: 5px solid #20222b; }
-.tooltip.is-primary:after { background: #20222b; }
+.tooltip.is-top.is-primary:before {
+	border-top: 5px solid #20222b;
+}
+.tooltip.is-primary:after {
+	background: #20222b;
+}
 
 div#drag-overlay {
 	position: fixed;
@@ -93,7 +106,6 @@ div#drag-overlay {
 	}
 }
 
-
 section.hero {
 	&.dashboard {
 		// background-color: $backgroundLight1 !important;
@@ -103,10 +115,12 @@ section.hero {
 	}
 }
 
-section input, section a.button {
+section input,
+section a.button {
 	font-size: 14px !important;
 }
-section input, section p.control a.button {
+section input,
+section p.control a.button {
 	border-left: 0px !important;
 	border-top: 0px !important;
 	border-right: 0px !important;
@@ -114,13 +128,15 @@ section input, section p.control a.button {
 	box-shadow: 0 0 0 !important;
 }
 
-section p.control a.button { margin-left: 10px !important; }
+section p.control a.button {
+	margin-left: 10px !important;
+}
 section p.control button {
 	height: 100%;
 	font-size: 12px;
 }
 
-.switch input[type=checkbox] + .check:before {
+.switch input[type='checkbox'] + .check:before {
 	background: #fbfbfb;
 }
 
@@ -128,7 +144,8 @@ section p.control button {
 	Register and Login forms
 */
 
-section.hero.is-login, section.hero.is-register {
+section.hero.is-login,
+section.hero.is-register {
 	a {
 		font-size: 1.25em;
 		line-height: 2.5em;
@@ -174,18 +191,22 @@ section#register a.is-text {
 	font-size: 1.25em;
 	line-height: 2.5em;
 }
-*/
+
 .modal-card-head, .modal-card-foot {
 	background: $backgroundLight1;
 }
+*/
 
 .switch {
 	margin-top: 5px;
 }
 
-.input, .taginput .taginput-container.is-focusable, .textarea, .select select {
+.input,
+.taginput .taginput-container.is-focusable,
+.textarea,
+.select select {
 	border: 2px solid #21252d;
-	border-radius: .3em !important;
+	border-radius: 0.3em !important;
 	background: rgba(0, 0, 0, 0.15);
 	padding: 1rem;
 	color: $textColor;
@@ -203,9 +224,9 @@ button.button.is-primary {
 	border: 2px solid #21252d;
 	color: $textColor;
 	font-size: 1rem;
-    border-top: 0;
-    border-left: 0;
-    border-right: 0;
+	border-top: 0;
+	border-left: 0;
+	border-right: 0;
 	&:hover {
 		background-color: $base-2;
 	}
@@ -224,13 +245,16 @@ svg.waves {
 	user-select: none;
 	overflow: hidden;
 }
-div.field-body > div.field { text-align: left; }
+div.field-body > div.field {
+	text-align: left;
+}
 table.table {
 	background: $base-2;
 	color: $textColor;
 	border: 0;
 	thead {
-		th, td {
+		th,
+		td {
 			color: $textColor;
 		}
 	}
@@ -244,60 +268,55 @@ table.table {
 			}
 		}
 	}
-	th, td {
+	th,
+	td {
 		border-color: #ffffff1c;
 	}
 }
 
 // vue-bar
 .vb > .vb-dragger {
-    z-index: 5;
-    width: 12px;
-    right: 0;
+	z-index: 5;
+	width: 12px;
+	right: 0;
 }
 
 .vb > .vb-dragger > .vb-dragger-styler {
-    -webkit-backface-visibility: hidden;
-    backface-visibility: hidden;
-    -webkit-transform: rotate3d(0,0,0,0);
-    transform: rotate3d(0,0,0,0);
-    -webkit-transition:
-        background-color 100ms ease-out,
-        margin 100ms ease-out,
-        height 100ms ease-out;
-    transition:
-        background-color 100ms ease-out,
-        margin 100ms ease-out,
-        height 100ms ease-out;
-    background-color: $backgroundAccent;
-    margin: 5px 5px 5px 0;
-    border-radius: 20px;
-    height: calc(100% - 10px);
-    display: block;
+	-webkit-backface-visibility: hidden;
+	backface-visibility: hidden;
+	-webkit-transform: rotate3d(0, 0, 0, 0);
+	transform: rotate3d(0, 0, 0, 0);
+	-webkit-transition: background-color 100ms ease-out, margin 100ms ease-out, height 100ms ease-out;
+	transition: background-color 100ms ease-out, margin 100ms ease-out, height 100ms ease-out;
+	background-color: $backgroundAccent;
+	margin: 5px 5px 5px 0;
+	border-radius: 20px;
+	height: calc(100% - 10px);
+	display: block;
 }
 
 .vb.vb-scrolling-phantom > .vb-dragger > .vb-dragger-styler {
-    background-color: $backgroundAccentLighter;
+	background-color: $backgroundAccentLighter;
 }
 
 .vb > .vb-dragger:hover > .vb-dragger-styler {
-    background-color: $backgroundAccentLighter;
-    margin: 0px;
-    height: 100%;
+	background-color: $backgroundAccentLighter;
+	margin: 0px;
+	height: 100%;
 }
 
 .vb.vb-dragging > .vb-dragger > .vb-dragger-styler {
-    background-color: $backgroundAccentLighter;
-    margin: 0px;
-    height: 100%;
+	background-color: $backgroundAccentLighter;
+	margin: 0px;
+	height: 100%;
 }
 
 .vb.vb-dragging-phantom > .vb-dragger > .vb-dragger-styler {
-    background-color: $backgroundAccentLighter;
+	background-color: $backgroundAccentLighter;
 }
 
-.vb-content{
-	overflow: auto !important 
+.vb-content {
+	overflow: auto !important;
 }
 
 // helpers
@@ -313,7 +332,7 @@ table.table {
 	height: max-content;
 }
 
-.pagination a, .pagination a:hover {
+.pagination a,
+.pagination a:hover {
 	text-decoration: none;
 }
-
diff --git a/src/site/components/album/AlbumDetails.vue b/src/site/components/album/AlbumDetails.vue
index a02fe55..b646cb0 100644
--- a/src/site/components/album/AlbumDetails.vue
+++ b/src/site/components/album/AlbumDetails.vue
@@ -25,13 +25,13 @@
 					label="Allow download"
 					centered>
 					<b-switch v-model="props.row.enableDownload"
-						@input="linkOptionsChanged(props.row)" />
+						@input="updateLinkOptions(albumId, props.row)" />
 				</b-table-column>
 
 				<b-table-column field="enabled"
 					numeric>
 					<button class="button is-danger"
-						@click="promptDeleteAlbumLink(props.row.identifier)">Delete link</button>
+						@click="promptDeleteAlbumLink(albumId, props.row.identifier)">Delete link</button>
 				</b-table-column>
 			</template>
 			<template slot="empty">
@@ -42,6 +42,7 @@
 					Nothing here
 				</div>
 			</template>
+
 			<template slot="footer">
 				<div class="level is-paddingless">
 					<div class="level-left">
@@ -70,7 +71,7 @@
 </template>
 
 <script>
-import { mapState } from 'vuex';
+import { mapState, mapActions } from 'vuex';
 
 export default {
 	props: {
@@ -90,55 +91,65 @@ export default {
 	},
 	computed: mapState(['config']),
 	methods: {
+		...mapActions({
+			deleteAlbumAction: 'albums/deleteAlbum',
+			deleteAlbumLinkAction: 'albums/deleteLink',
+			updateLinkOptionsAction: 'albums/updateLinkOptions',
+			createLinkAction: 'albums/createLink',
+			alert: 'alert/set'
+		}),
 		promptDeleteAlbum(id) {
 			this.$buefy.dialog.confirm({
+				type: 'is-danger',
 				message: 'Are you sure you want to delete this album?',
 				onConfirm: () => this.deleteAlbum(id)
 			});
 		},
-		async deleteAlbum(id) {
-			const response = await this.$axios.$delete(`album/${id}`);
-			this.getAlbums();
-			return this.$buefy.toast.open(response.message);
-		},
-		promptDeleteAlbumLink(identifier) {
+		promptDeleteAlbumLink(albumId, identifier) {
 			this.$buefy.dialog.confirm({
+				type: 'is-danger',
 				message: 'Are you sure you want to delete this album link?',
-				onConfirm: () => this.deleteAlbumLink(identifier)
+				onConfirm: () => this.deleteAlbumLink({ albumId, identifier })
 			});
 		},
-		async deleteAlbumLink(identifier) {
-			const response = await this.$axios.$delete(`album/link/delete/${identifier}`);
-			return this.$buefy.toast.open(response.message);
+		async deleteAlbum(id) {
+			try {
+				const response = await this.deleteAlbumAction(id);
+
+				this.alert({ text: response.message, error: false });
+			} catch (e) {
+				this.alert({ text: e.message, error: true });
+			} 
 		},
-		async linkOptionsChanged(link) {
-			const response = await this.$axios.$post(`album/link/edit`,
-				{
-					identifier: link.identifier,
-					enableDownload: link.enableDownload,
-					enabled: link.enabled
-				});
-			this.$buefy.toast.open(response.message);
+		async deleteAlbumLink(id) {
+			try {
+				const response = await this.deleteAlbumLinkAction(id);
+
+				this.alert({ text: response.message, error: false });
+			} catch (e) {
+				this.alert({ text: e.message, error: true });
+			} 
 		},
-		async createLink(album) {
-			album.isCreatingLink = true;
-			// Since we actually want to change the state even if the call fails, use a try catch
+		async createLink(albumId) {
+			this.isCreatingLink = true;
 			try {
-				const response = await this.$axios.$post(`album/link/new`,
-					{ albumId: album.id });
-				this.$buefy.toast.open(response.message);
-				album.links.push({
-					identifier: response.identifier,
-					views: 0,
-					enabled: true,
-					enableDownload: true,
-					expiresAt: null
-				});
-			} catch (error) {
-				//
+				const response = await this.createLinkAction(albumId);
+
+				this.alert({ text: response.message, error: false });
+			} catch (e) {
+				this.alert({ text: e.message, error: true });
 			} finally {
-				album.isCreatingLink = false;
+				this.isCreatingLink = false;
 			}
+		},
+		async updateLinkOptions(albumId, linkOpts) {
+			try {
+				const response = await this.updateLinkOptionsAction({ albumId, linkOpts });
+
+				this.alert({ text: response.message, error: false });
+			} catch (e) {
+				this.alert({ text: e.message, error: true });
+			} 
 		}
 	}
 };
diff --git a/src/site/components/album/AlbumEntry.vue b/src/site/components/album/AlbumEntry.vue
index 4d23d6c..28e434a 100644
--- a/src/site/components/album/AlbumEntry.vue
+++ b/src/site/components/album/AlbumEntry.vue
@@ -14,7 +14,9 @@
 			<h4>
 				<router-link :to="`/dashboard/albums/${album.id}`">{{ album.name }}</router-link>
 			</h4>
-			<span>Updated <timeago :since="album.editedAt" /></span>
+			<span>
+				Created <span class="is-inline has-text-weight-semibold"><timeago :since="album.createdAt" /></span>
+			</span>
 			<span>{{ album.fileCount || 0 }} files</span>
 		</div>
 		<div class="latest is-hidden-mobile">
@@ -40,7 +42,7 @@
 		</div>
 
 		<AlbumDetails v-if="isExpanded"
-			:details="getDetails"
+			:details="getDetails(album.id)"
 			:albumId="album.id" />
 	</div>
 </template>
@@ -62,13 +64,10 @@ export default {
 	computed: {
 		...mapGetters({
 			isExpandedGetter: 'albums/isExpanded',
-			getDetailsGetter: 'albums/getDetails'
+			getDetails: 'albums/getDetails'
 		}),
 		isExpanded() {
 			return this.isExpandedGetter(this.album.id);
-		},
-		getDetails() {
-			return this.getDetailsGetter(this.album.id);
 		}
 	},
 	methods: {
diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index a06eabf..956dd28 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -29,12 +29,6 @@
 			<Waterfall v-if="showWaterfall"
 				:gutterWidth="10"
 				:gutterHeight="4">
-				<input v-if="enableSearch"
-					v-model="searchTerm"
-					type="text"
-					placeholder="Search..."
-					@input="search()"
-					@keyup.enter="search()">	
 				<WaterfallItem v-for="(item, index) in gridFiles"
 					:key="item.id"
 					:width="width"
@@ -167,7 +161,7 @@
 				</template>
 				<template slot="footer">
 					<div class="has-text-right has-text-default">
-						{{ files.length }} files
+						Showing {{ files.length }} files ({{ total }} total)
 					</div>
 				</template>
 			</b-table>
@@ -213,6 +207,10 @@ export default {
 			type: Array,
 			default: () => []
 		},
+		total: {
+			type: Number,
+			default: 0
+		},
 		fixed: {
 			type: Boolean,
 			default: false
diff --git a/src/site/pages/dashboard/admin/file/_id.vue b/src/site/pages/dashboard/admin/file/_id.vue
index 5821292..5853770 100644
--- a/src/site/pages/dashboard/admin/file/_id.vue
+++ b/src/site/pages/dashboard/admin/file/_id.vue
@@ -130,6 +130,7 @@ export default {
 	methods: {
 		promptDisableUser() {
 			this.$buefy.dialog.confirm({
+				type: 'is-danger',
 				message: 'Are you sure you want to disable the account of the user that uploaded this file?',
 				onConfirm: () => this.disableUser()
 			});
@@ -142,6 +143,7 @@ export default {
 		},
 		promptBanIP() {
 			this.$buefy.dialog.confirm({
+				type: 'is-danger',
 				message: 'Are you sure you want to ban the IP this file was uploaded from?',
 				onConfirm: () => this.banIP()
 			});
diff --git a/src/site/pages/dashboard/admin/user/_id.vue b/src/site/pages/dashboard/admin/user/_id.vue
index 2a56c34..8c73037 100644
--- a/src/site/pages/dashboard/admin/user/_id.vue
+++ b/src/site/pages/dashboard/admin/user/_id.vue
@@ -85,6 +85,7 @@ export default {
 	methods: {
 		promptDisableUser() {
 			this.$buefy.dialog.confirm({
+				type: 'is-danger',
 				message: 'Are you sure you want to disable the account of the user that uploaded this file?',
 				onConfirm: () => this.disableUser()
 			});
diff --git a/src/site/pages/dashboard/albums/_id.vue b/src/site/pages/dashboard/albums/_id.vue
index 47e7057..c082b63 100644
--- a/src/site/pages/dashboard/albums/_id.vue
+++ b/src/site/pages/dashboard/albums/_id.vue
@@ -10,25 +10,53 @@
 					<Sidebar />
 				</div>
 				<div class="column">
-					<h2 class="subtitle">Files</h2>
+					<nav class="level">
+						<div class="level-left">
+							<div class="level-item">
+								<h2 class="subtitle">Files</h2>
+							</div>
+						</div>
+						<div class="level-right">
+							<div class="level-item">
+								<b-field>
+									<b-input
+										placeholder="Search"
+										type="search"/>
+									<p class="control">
+										<button
+											outlined
+											class="button is-primary">
+											Search
+										</button>
+									</p>
+								</b-field>
+							</div>
+						</div>
+					</nav>
+
 					<hr>
 
 					<Grid v-if="files.length"
-						:files="files" />
-
-					<b-pagination
-						v-if="count > perPage"
-						:total="count"
-						:per-page="perPage"
-						:current.sync="current"
-						class="pagination"
-						icon-prev="icon-interface-arrow-left"
-						icon-next="icon-interface-arrow-right"
-						icon-pack="icon"
-						aria-next-label="Next page"
-						aria-previous-label="Previous page"
-						aria-page-label="Page"
-						aria-current-label="Current page" />
+						:files="files"
+						:total="count">
+						<template v-slot:pagination>
+							<b-pagination
+								v-if="count > perPage"
+								:total="count"
+								:per-page="perPage"
+								:current.sync="current"
+								range-before="2"
+								range-after="2"
+								class="pagination-slot"
+								icon-prev="icon-interface-arrow-left"
+								icon-next="icon-interface-arrow-right"
+								icon-pack="icon"
+								aria-next-label="Next page"
+								aria-previous-label="Previous page"
+								aria-page-label="Page"
+								aria-current-label="Current page" />
+						</template>
+					</Grid>
 				</div>
 			</div>
 		</div>
diff --git a/src/site/pages/dashboard/albums/index.vue b/src/site/pages/dashboard/albums/index.vue
index 2a54ab8..a010254 100644
--- a/src/site/pages/dashboard/albums/index.vue
+++ b/src/site/pages/dashboard/albums/index.vue
@@ -18,7 +18,8 @@
 									@keyup.enter.native="createAlbum" />
 								<p class="control">
 									<button outlined
-										class="button is-primary"
+										class="button is-black"
+										:disabled="isCreatingAlbum"
 										@click="createAlbum">Create album</button>
 								</p>
 							</b-field>
@@ -37,7 +38,7 @@
 </template>
 
 <script>
-import { mapState } from 'vuex';
+import { mapState, mapActions } from 'vuex';
 import Sidebar from '~/components/sidebar/Sidebar.vue';
 import AlbumEntry from '~/components/album/AlbumEntry.vue';
 
@@ -51,7 +52,8 @@ export default {
 	}],
 	data() {
 		return {
-			newAlbumName: null
+			newAlbumName: null,
+			isCreatingAlbum: false
 		};
 	},
 	computed: mapState(['config', 'albums']),
@@ -59,13 +61,23 @@ export default {
 		return { title: 'Uploads' };
 	},
 	methods: {
+		...mapActions({
+			'alert': 'alert/set'
+		}),
 		async createAlbum() {
 			if (!this.newAlbumName || this.newAlbumName === '') return;
-			const response = await this.$axios.$post(`album/new`,
-				{ name: this.newAlbumName });
-			this.newAlbumName = null;
-			this.$buefy.toast.open(response.message);
-			this.getAlbums();
+
+			this.isCreatingAlbum = true;
+			try {
+				const response = await this.$store.dispatch('albums/createAlbum', this.newAlbumName);
+
+				this.alert({ text: response.message, error: false });
+			} catch (e) {
+				this.alert({ text: e.message, error: true });
+			} finally {
+				this.isCreatingAlbum = false;
+				this.newAlbumName = null;
+			}
 		}
 	}
 };
diff --git a/src/site/pages/dashboard/tags/index.vue b/src/site/pages/dashboard/tags/index.vue
index 7c295b7..a9476da 100644
--- a/src/site/pages/dashboard/tags/index.vue
+++ b/src/site/pages/dashboard/tags/index.vue
@@ -228,12 +228,14 @@ export default {
 	methods: {
 		promptDeleteTag(id) {
 			this.$buefy.dialog.confirm({
+				type: 'is-danger',
 				message: 'Are you sure you want to delete this tag?',
 				onConfirm: () => this.promptPurgeTag(id)
 			});
 		},
 		promptPurgeTag(id) {
 			this.$buefy.dialog.confirm({
+				type: 'is-danger',
 				message: 'Would you like to delete every file associated with this tag?',
 				cancelText: 'No',
 				confirmText: 'Yes',
diff --git a/src/site/store/album.js b/src/site/store/album.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/site/store/albums.js b/src/site/store/albums.js
index a33181c..d5d45ce 100644
--- a/src/site/store/albums.js
+++ b/src/site/store/albums.js
@@ -1,4 +1,6 @@
 /* eslint-disable no-shadow */
+import Vue from 'vue';
+
 export const state = () => ({
 	list: [],
 	isListLoading: false,
@@ -18,10 +20,13 @@ export const actions = {
 			const response = await this.$axios.$get(`albums/mini`);
 
 			commit('setAlbums', response.albums);
+
+			return response;
 		} catch (e) {
 			dispatch('alert/set', { text: e.message, error: true }, { root: true });
 		}
 	},
+
 	async fetchDetails({ commit }, albumId) {
 		const response = await this.$axios.$get(`album/${albumId}/links`);
 
@@ -31,6 +36,52 @@ export const actions = {
 				links: response.links
 			}
 		});
+
+		return response;
+	},
+
+	async createAlbum({ commit }, name) {
+		const response = await this.$axios.$post(`album/new`, { name });
+
+		commit('addAlbum', response.data);
+
+		return response;
+	},
+
+	async deleteAlbum({ commit }, albumId) {
+		const response = await this.$axios.$delete(`album/${albumId}`);
+
+		commit('removeAlbum', albumId);
+
+		return response;
+	},
+
+	async createLink({ commit }, albumId) {
+		const response = await this.$axios.$post(`album/link/new`, { albumId });
+
+		commit('addAlbumLink', { albumId, data: response.data });
+
+		return response;
+	},
+
+	async updateLinkOptions({ commit }, { albumId, linkOpts }) {
+		const response = await this.$axios.$post(`album/link/edit`, {
+			identifier: linkOpts.identifier,
+			enableDownload: linkOpts.enableDownload,
+			enabled: linkOpts.enabled
+		});
+
+		commit('updateAlbumLinkOpts', { albumId, linkOpts: response.data });
+
+		return response;
+	},
+
+	async deleteLink({ commit }, { albumId, identifier }) {
+		const response = await this.$axios.$delete(`album/link/delete/${identifier}`);
+
+		commit('removeAlbumLink', { albumId, identifier });
+
+		return response;
 	}
 };
 
@@ -42,8 +93,30 @@ export const mutations = {
 		state.list = albums;
 		state.isLoading = false;
 	},
+	addAlbum(state, album) {
+		state.list.unshift(album);
+	},
+	removeAlbum(state, albumId) {
+		// state.list = state.list.filter(({ id }) => id !== albumId);
+		const foundIndex = state.list.findIndex(({ id }) => id === albumId);
+		state.list.splice(foundIndex, 1);
+	},
 	setDetails(state, { id, details }) {
-		state.albumDetails[id] = details;
+		Vue.set(state.albumDetails, id, details);
+	},
+	addAlbumLink(state, { albumId, data }) {
+		state.albumDetails[albumId].links.push(data);
+	},
+	updateAlbumLinkOpts(state, { albumId, linkOpts }) {
+		const foundIndex = state.albumDetails[albumId].links.findIndex(
+			({ identifier }) => identifier === linkOpts.identifier
+		);
+		const link = state.albumDetails[albumId].links[foundIndex];
+		state.albumDetails[albumId].links[foundIndex] = { ...link, ...linkOpts };
+	},
+	removeAlbumLink(state, { albumId, identifier }) {
+		const foundIndex = state.albumDetails[albumId].links.findIndex(({ identifier: id }) => id === identifier);
+		state.albumDetails[albumId].links.splice(foundIndex, 1);
 	},
 	toggleExpandedState(state, id) {
 		const foundIndex = state.expandedAlbums.indexOf(id);
-- 
cgit v1.2.3


From ac1d6eec5b5ec3093ac97e179d2573b5a225ea0e Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Sat, 4 Jul 2020 03:28:05 +0300
Subject: fix: change watcher from a component watcher to a store watcher

---
 src/site/layouts/default.vue | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

(limited to 'src/site')

diff --git a/src/site/layouts/default.vue b/src/site/layouts/default.vue
index 08d733f..579a73e 100644
--- a/src/site/layouts/default.vue
+++ b/src/site/layouts/default.vue
@@ -19,21 +19,22 @@ export default {
 		Navbar,
 		Footer
 	},
-	computed: mapState(['config', 'alert']),
-	watch: {
-		'alert.text'() {
-			console.log('aaaaaaaa');
-			if (!this.alert.text) return;
+	computed: mapState(['config']),
+	created() {
+		this.$store.watch(state => state.alert.text, () => {
+			const { text, error } = this.$store.state.alert;
+
+			if (!text) return;
 
 			this.$buefy.toast.open({
 				duration: 3500,
-				message: this.alert.text,
+				message: text,
 				position: 'is-bottom',
-				type: this.alert.error ? 'is-danger' : 'is-success'
+				type: error ? 'is-danger' : 'is-success'
 			});
 
 			this.$store.dispatch('alert/clear', null);
-		}
+		})
 	},
 	mounted() {
 		console.log(
-- 
cgit v1.2.3


From 39ed9d336edb350bca5c2a7f35a60ff9edc527bd Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Sat, 4 Jul 2020 03:52:40 +0300
Subject: feat: make the delete link button more reactive (loading state if
 deletion pending)

---
 src/site/components/album/AlbumDetails.vue | 21 +++++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

(limited to 'src/site')

diff --git a/src/site/components/album/AlbumDetails.vue b/src/site/components/album/AlbumDetails.vue
index b646cb0..f117f2f 100644
--- a/src/site/components/album/AlbumDetails.vue
+++ b/src/site/components/album/AlbumDetails.vue
@@ -30,7 +30,9 @@
 
 				<b-table-column field="enabled"
 					numeric>
-					<button class="button is-danger"
+					<button :class="{ 'is-loading': isDeleting(props.row.identifier) }"
+						class="button is-danger"
+						:disabled="isDeleting(props.row.identifier)"
 						@click="promptDeleteAlbumLink(albumId, props.row.identifier)">Delete link</button>
 				</b-table-column>
 			</template>
@@ -86,7 +88,8 @@ export default {
 	},
 	data() {
 		return {
-			isCreatingLink: false
+			isCreatingLink: false,
+			isDeletingLinks: [],
 		}
 	},
 	computed: mapState(['config']),
@@ -109,7 +112,7 @@ export default {
 			this.$buefy.dialog.confirm({
 				type: 'is-danger',
 				message: 'Are you sure you want to delete this album link?',
-				onConfirm: () => this.deleteAlbumLink({ albumId, identifier })
+				onConfirm: () => this.deleteAlbumLink(albumId, identifier)
 			});
 		},
 		async deleteAlbum(id) {
@@ -121,14 +124,17 @@ export default {
 				this.alert({ text: e.message, error: true });
 			} 
 		},
-		async deleteAlbumLink(id) {
+		async deleteAlbumLink(albumId, identifier) {
+			this.isDeletingLinks.push(identifier);
 			try {
-				const response = await this.deleteAlbumLinkAction(id);
+				const response = await this.deleteAlbumLinkAction({ albumId, identifier });
 
 				this.alert({ text: response.message, error: false });
 			} catch (e) {
 				this.alert({ text: e.message, error: true });
-			} 
+			} finally {
+				this.isDeletingLinks = this.isDeletingLinks.filter(e => e !== identifier);
+			}
 		},
 		async createLink(albumId) {
 			this.isCreatingLink = true;
@@ -150,6 +156,9 @@ export default {
 			} catch (e) {
 				this.alert({ text: e.message, error: true });
 			} 
+		},
+		isDeleting(identifier) {
+			return this.isDeletingLinks.indexOf(identifier) > -1;
 		}
 	}
 };
-- 
cgit v1.2.3


From b4603fd64e271c9c419e7d0269c4493f3253cadf Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Sat, 4 Jul 2020 03:53:06 +0300
Subject: fix: fix axios plugin throwing if no message from backend

---
 src/site/plugins/axios.js | 21 +++++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

(limited to 'src/site')

diff --git a/src/site/plugins/axios.js b/src/site/plugins/axios.js
index cff149c..2f4a169 100644
--- a/src/site/plugins/axios.js
+++ b/src/site/plugins/axios.js
@@ -8,14 +8,23 @@ export default function({ $axios, store }) {
 	});
 
 	$axios.onError(error => {
-		if (process.env.development) console.error('[AXIOS Error]', error);
+		if (process.env.NODE_ENV !== 'production') console.error('[AXIOS Error]', error);
 		if (process.browser) {
-			store.dispatch('alert/set', {
-				text: error.response.data.message,
-				error: true
-			});
+			if (process.env.NODE_ENV !== 'production') {
+				if (error.response?.data?.message) {
+					store.dispatch('alert/set', {
+						text: error.response.data.message,
+						error: true
+					});
+				} else {
+					store.dispatch('alert/set', {
+						text: `[AXIOS]: ${error.message}`,
+						error: true
+					});
+				}
+			}
 
-			if (error.response.data.message.indexOf('Token expired') !== -1) {
+			if (error.response?.data?.message.indexOf('Token expired') !== -1) {
 				store.dispatch('auth/logout');
 			}
 		}
-- 
cgit v1.2.3


From 1e1f3fbb27976a34f53a4e8d250da34dad4e6c20 Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Sat, 4 Jul 2020 23:18:51 +0300
Subject: feat: experimental videos in grid

---
 src/site/components/grid/Grid.vue                  | 32 +++++++++++++------
 src/site/components/grid/waterfall/Waterfall.vue   |  2 +-
 .../components/grid/waterfall/WaterfallItem.vue    | 37 +++++++++++++++++-----
 3 files changed, 52 insertions(+), 19 deletions(-)

(limited to 'src/site')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index 956dd28..0fff307 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -32,6 +32,7 @@
 				<WaterfallItem v-for="(item, index) in gridFiles"
 					:key="item.id"
 					:width="width"
+					:video="!!item.preview"
 					move-class="item-move">
 					<template v-if="isPublic">
 						<a :href="`${item.url}`"
@@ -42,7 +43,11 @@
 						</a>
 					</template>
 					<template v-else>
-						<img :src="item.thumb ? item.thumb : blank">
+						<img v-if="!item.preview" :class="{'hidden': item.preview}" 
+							:src="item.thumb ? item.thumb : blank">
+						<video v-if="item.preview" autoplay loop>
+  							<source :src="item.preview" type="video/mp4" />
+						</video>
 						<span v-if="!item.thumb && item.name"
 							class="extension">{{ item.name.split('.').pop() }}</span>
 						<div v-if="!isPublic"
@@ -56,21 +61,20 @@
 									<i class="icon-web-code" />
 								</a>
 							</b-tooltip>
-							<b-tooltip label="Albums"
+							<b-tooltip label="Tags"
 								position="is-top">
 								<a class="btn"
-									@click="openAlbumModal(item)">
-									<i class="icon-interface-window" />
+									@click="manageTags(item)">
+									<i class="icon-ecommerce-tag-c" />
 								</a>
 							</b-tooltip>
-							<!--
-							<b-tooltip label="Tags"
+							<b-tooltip label="Albums"
 								position="is-top">
-								<a @click="manageTags(item)">
-									<i class="icon-ecommerce-tag-c" />
+								<a class="btn"
+									@click="openAlbumModal(item)">
+									<i class="icon-interface-window" />
 								</a>
-							</b-tooltip>
-							-->
+							</b-tooltip>							
 							<b-tooltip label="Delete"
 								position="is-top">
 								<a class="btn"
@@ -318,6 +322,9 @@ export default {
 			const response = await this.$axios.$get(`albums/dropdown`);
 			this.albums = response.albums;
 			this.$forceUpdate();
+		},
+		mouseOverTest() {
+			console.log('aaaaaa');
 		}
 	}
 };
@@ -385,6 +392,7 @@ export default {
 			&:nth-child(1), &:nth-child(3) {
 				justify-content: flex-end;
 			}
+
 			a {
 				width: 30px;
 				height: 30px;
@@ -429,6 +437,10 @@ export default {
 			text-align: left;
 		}
 	}
+
+	img.hidden {
+		display: none;
+	}
 </style>
 
 <style lang="scss">
diff --git a/src/site/components/grid/waterfall/Waterfall.vue b/src/site/components/grid/waterfall/Waterfall.vue
index 8631ea5..af1bd72 100644
--- a/src/site/components/grid/waterfall/Waterfall.vue
+++ b/src/site/components/grid/waterfall/Waterfall.vue
@@ -170,7 +170,7 @@ export default {
 					return;
 				}
 				child.el.style.top = `${offsetArr[position]}px`;
-				offsetArr[position] += (child.height + this.gutterHeight);
+				offsetArr[position] += child.height + this.gutterHeight;
 				this.$el.style.height = `${Math.max.apply(Math, offsetArr)}px`;
 			});
 			this.$emit('rendered', this);
diff --git a/src/site/components/grid/waterfall/WaterfallItem.vue b/src/site/components/grid/waterfall/WaterfallItem.vue
index a02ea1f..7c4d814 100644
--- a/src/site/components/grid/waterfall/WaterfallItem.vue
+++ b/src/site/components/grid/waterfall/WaterfallItem.vue
@@ -1,13 +1,15 @@
-<style>
+<style scoped>
 	.waterfall-item {
 		position: absolute;
 	}
 </style>
+
 <template>
 	<div class="waterfall-item">
 		<slot />
 	</div>
 </template>
+
 <script>
 import imagesLoaded from 'imagesloaded';
 export default {
@@ -20,6 +22,10 @@ export default {
 		width: {
 			type: Number,
 			default: 150
+		},
+		video: {
+			type: Boolean,
+			default: false
 		}
 	},
 	data() {
@@ -35,13 +41,28 @@ export default {
 		this.$el.style.display = 'none';
 		this.$el.style.width = `${this.width}px`;
 		this.emit();
-		imagesLoaded(this.$el, () => {
-			this.$el.style.left = '-9999px';
-			this.$el.style.top = '-9999px';
-			this.$el.style.display = 'block';
-			this.height = this.$el.offsetHeight;
-			this.itemWidth = this.$el.offsetWidth;
-		});
+		if (this.video) {
+			const videoEl = this.$slots.default.find(e => e.tag?.toLowerCase() === 'video');
+			const el = videoEl.elm;
+			console.log(videoEl);
+			console.log(el);
+			el.onloadeddata = () => {
+				console.log('loaded');
+				this.$el.style.left = '-9999px';
+				this.$el.style.top = '-9999px';
+				this.$el.style.display = 'block';
+				this.height = el.offsetHeight + 5;
+				this.itemWidth = el.offsetWidth;
+			}
+		} else {
+			imagesLoaded(this.$el, () => {
+				this.$el.style.left = '-9999px';
+				this.$el.style.top = '-9999px';
+				this.$el.style.display = 'block';
+				this.height = this.$el.offsetHeight;
+				this.itemWidth = this.$el.offsetWidth;
+			});
+		}
 	},
 	methods: {
 		emit() {
-- 
cgit v1.2.3


From 04fdd63cee5327f49e5e11d5837a9031027c34ef Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Sun, 5 Jul 2020 04:17:09 +0300
Subject: feat: refactor single album page to use vuex

---
 src/site/pages/dashboard/albums/_id.vue   | 94 +++++++++++++++++++------------
 src/site/pages/dashboard/albums/index.vue | 33 +++++++----
 src/site/store/album.js                   | 54 ++++++++++++++++++
 src/site/store/albums.js                  | 38 ++++++-------
 4 files changed, 150 insertions(+), 69 deletions(-)

(limited to 'src/site')

diff --git a/src/site/pages/dashboard/albums/_id.vue b/src/site/pages/dashboard/albums/_id.vue
index c082b63..0d3bd68 100644
--- a/src/site/pages/dashboard/albums/_id.vue
+++ b/src/site/pages/dashboard/albums/_id.vue
@@ -13,7 +13,14 @@
 					<nav class="level">
 						<div class="level-left">
 							<div class="level-item">
-								<h2 class="subtitle">Files</h2>
+								<h1 class="title is-3">
+									{{ name }}
+								</h1>
+							</div>
+							<div class="level-item">
+								<h2 class="subtitle is-5">
+									({{ totalFiles }} files)
+								</h2>
 							</div>
 						</div>
 						<div class="level-right">
@@ -21,7 +28,7 @@
 								<b-field>
 									<b-input
 										placeholder="Search"
-										type="search"/>
+										type="search" />
 									<p class="control">
 										<button
 											outlined
@@ -36,14 +43,15 @@
 
 					<hr>
 
-					<Grid v-if="files.length"
-						:files="files"
-						:total="count">
+					<Grid
+						v-if="totalFiles"
+						:files="album.files"
+						:total="totalFiles">
 						<template v-slot:pagination>
 							<b-pagination
-								v-if="count > perPage"
-								:total="count"
-								:per-page="perPage"
+								v-if="shouldPaginate"
+								:total="totalFiles"
+								:per-page="limit"
 								:current.sync="current"
 								range-before="2"
 								range-after="2"
@@ -64,53 +72,65 @@
 </template>
 
 <script>
+import { mapState, mapGetters, mapActions } from 'vuex';
+
 import Sidebar from '~/components/sidebar/Sidebar.vue';
 import Grid from '~/components/grid/Grid.vue';
 
 export default {
 	components: {
 		Sidebar,
-		Grid
+		Grid,
 	},
-	middleware: 'auth',
+	middleware: ['auth', ({ route, store }) => {
+		store.dispatch('album/fetchById', { id: route.params.id });
+	}],
 	data() {
 		return {
-			name: null,
-			files: [],
-			count: 0,
 			current: 1,
-			perPage: 30
 		};
 	},
+	computed: {
+		...mapGetters({
+			totalFiles: 'album/getTotalFiles',
+			shouldPaginate: 'album/shouldPaginate',
+			limit: 'album/getLimit',
+			name: 'album/getName',
+		}),
+		...mapState(['album']),
+		id() {
+			return this.$route.params.id;
+		},
+	},
 	metaInfo() {
 		return { title: 'Album' };
 	},
 	watch: {
-		current: 'getFiles'
-	},
-	async asyncData({ $axios, route }) {
-		const perPage = 30;
-		const current = 1; // current page
-
-		try {
-			const response = await $axios.$get(`album/${route.params.id}/full`, { params: { page: current, limit: perPage }});
-			return {
-				files: response.files || [],
-				count: response.count || 0,
-				current,
-				perPage
-			};
-		} catch (error) {
-			console.error(error);
-			return { files: [] };
-		}
+		current: 'fetchPaginate',
 	},
 	methods: {
-		async getFiles() {
-			const response = await this.$axios.$get(`album/${this.$route.params.id}/full`, { params: { page: this.current, limit: this.perPage }});
-			this.files = response.files;
-			this.count = response.count;
-		}
+		...mapActions({
+			fetch: 'album/fetchById',
+		}),
+		fetchPaginate() {
+			this.fetch({ id: this.id, page: this.current });
+		},
 	},
 };
 </script>
+
+<style lang="scss" scoped>
+	div.grid {
+		margin-bottom: 1rem;
+	}
+
+	.pagination-slot {
+		padding: 1rem 0;
+	}
+</style>
+
+<style lang="scss">
+	.pagination-slot > .pagination-previous, .pagination-slot > .pagination-next {
+		display: none !important;
+	}
+</style>
diff --git a/src/site/pages/dashboard/albums/index.vue b/src/site/pages/dashboard/albums/index.vue
index a010254..a2ba522 100644
--- a/src/site/pages/dashboard/albums/index.vue
+++ b/src/site/pages/dashboard/albums/index.vue
@@ -7,26 +7,33 @@
 						<Sidebar />
 					</div>
 					<div class="column">
-						<h2 class="subtitle">Manage your albums</h2>
+						<h2 class="subtitle">
+							Manage your albums
+						</h2>
 						<hr>
 
 						<div class="search-container">
 							<b-field>
-								<b-input v-model="newAlbumName"
+								<b-input
+									v-model="newAlbumName"
 									placeholder="Album name..."
 									type="text"
 									@keyup.enter.native="createAlbum" />
 								<p class="control">
-									<button outlined
+									<button
+										outlined
 										class="button is-black"
 										:disabled="isCreatingAlbum"
-										@click="createAlbum">Create album</button>
+										@click="createAlbum">
+										Create album
+									</button>
 								</p>
 							</b-field>
 						</div>
 
 						<div class="view-container">
-							<AlbumEntry v-for="album in albums.list"
+							<AlbumEntry
+								v-for="album in albums.list"
 								:key="album.id"
 								:album="album" />
 						</div>
@@ -45,15 +52,19 @@ import AlbumEntry from '~/components/album/AlbumEntry.vue';
 export default {
 	components: {
 		Sidebar,
-		AlbumEntry
+		AlbumEntry,
 	},
 	middleware: ['auth', ({ store }) => {
-		store.dispatch('albums/fetch');
+		try {
+			store.dispatch('albums/fetch');
+		} catch (e) {
+			this.alert({ text: e.message, error: true });
+		}
 	}],
 	data() {
 		return {
 			newAlbumName: null,
-			isCreatingAlbum: false
+			isCreatingAlbum: false,
 		};
 	},
 	computed: mapState(['config', 'albums']),
@@ -62,7 +73,7 @@ export default {
 	},
 	methods: {
 		...mapActions({
-			'alert': 'alert/set'
+			'alert': 'alert/set',
 		}),
 		async createAlbum() {
 			if (!this.newAlbumName || this.newAlbumName === '') return;
@@ -78,8 +89,8 @@ export default {
 				this.isCreatingAlbum = false;
 				this.newAlbumName = null;
 			}
-		}
-	}
+		},
+	},
 };
 </script>
 
diff --git a/src/site/store/album.js b/src/site/store/album.js
index e69de29..f7c88c9 100644
--- a/src/site/store/album.js
+++ b/src/site/store/album.js
@@ -0,0 +1,54 @@
+/* eslint-disable no-shadow */
+export const state = () => ({
+	files: [],
+	name: null,
+	isLoading: false,
+	pagination: {
+		page: 1,
+		limit: 30,
+		totalFiles: 0,
+	},
+	downloadEnabled: false,
+});
+
+export const getters = {
+	getTotalFiles: ({ pagination }) => pagination.totalFiles,
+	getFetchedCount: ({ files }) => files.length,
+	shouldPaginate: ({ pagination }) => pagination.totalFiles > pagination.limit,
+	getLimit: ({ pagination }) => pagination.limit,
+	getName: ({ name }) => name,
+};
+
+export const actions = {
+	async fetchById({ commit, dispatch, state }, { id, page }) {
+		commit('setIsLoading');
+
+		page = page || 1;
+
+		try {
+			const response = await this.$axios.$get(`album/${id}/full`, {
+				params: { limit: state.pagination.limit, page },
+			});
+
+			commit('setFiles', response);
+			commit('updatePaginationMeta', { totalFiles: response.count, page });
+		} catch (e) {
+			dispatch('alert/set', { text: e.message, error: true }, { root: true });
+		}
+	},
+};
+
+export const mutations = {
+	setIsLoading(state) {
+		state.isLoading = true;
+	},
+	setFiles(state, { files, name }) {
+		state.files = files || [];
+		state.name = name;
+		state.isLoading = false;
+	},
+	updatePaginationMeta(state, { page, totalFiles }) {
+		state.pagination.page = page || 1;
+		state.pagination.totalFiles = totalFiles || 0;
+	},
+};
diff --git a/src/site/store/albums.js b/src/site/store/albums.js
index d5d45ce..f3d7bcf 100644
--- a/src/site/store/albums.js
+++ b/src/site/store/albums.js
@@ -5,26 +5,22 @@ export const state = () => ({
 	list: [],
 	isListLoading: false,
 	albumDetails: {},
-	expandedAlbums: []
+	expandedAlbums: [],
 });
 
 export const getters = {
-	isExpanded: state => id => state.expandedAlbums.indexOf(id) > -1,
-	getDetails: state => id => state.albumDetails[id] || {}
+	isExpanded: (state) => (id) => state.expandedAlbums.indexOf(id) > -1,
+	getDetails: (state) => (id) => state.albumDetails[id] || {},
 };
 
 export const actions = {
-	async fetch({ commit, dispatch }) {
-		try {
-			commit('albumsRequest');
-			const response = await this.$axios.$get(`albums/mini`);
+	async fetch({ commit }) {
+		commit('albumsRequest');
+		const response = await this.$axios.$get('albums/mini');
 
-			commit('setAlbums', response.albums);
+		commit('setAlbums', response.albums);
 
-			return response;
-		} catch (e) {
-			dispatch('alert/set', { text: e.message, error: true }, { root: true });
-		}
+		return response;
 	},
 
 	async fetchDetails({ commit }, albumId) {
@@ -33,15 +29,15 @@ export const actions = {
 		commit('setDetails', {
 			id: albumId,
 			details: {
-				links: response.links
-			}
+				links: response.links,
+			},
 		});
 
 		return response;
 	},
 
 	async createAlbum({ commit }, name) {
-		const response = await this.$axios.$post(`album/new`, { name });
+		const response = await this.$axios.$post('album/new', { name });
 
 		commit('addAlbum', response.data);
 
@@ -57,7 +53,7 @@ export const actions = {
 	},
 
 	async createLink({ commit }, albumId) {
-		const response = await this.$axios.$post(`album/link/new`, { albumId });
+		const response = await this.$axios.$post('album/link/new', { albumId });
 
 		commit('addAlbumLink', { albumId, data: response.data });
 
@@ -65,10 +61,10 @@ export const actions = {
 	},
 
 	async updateLinkOptions({ commit }, { albumId, linkOpts }) {
-		const response = await this.$axios.$post(`album/link/edit`, {
+		const response = await this.$axios.$post('album/link/edit', {
 			identifier: linkOpts.identifier,
 			enableDownload: linkOpts.enableDownload,
-			enabled: linkOpts.enabled
+			enabled: linkOpts.enabled,
 		});
 
 		commit('updateAlbumLinkOpts', { albumId, linkOpts: response.data });
@@ -82,7 +78,7 @@ export const actions = {
 		commit('removeAlbumLink', { albumId, identifier });
 
 		return response;
-	}
+	},
 };
 
 export const mutations = {
@@ -109,7 +105,7 @@ export const mutations = {
 	},
 	updateAlbumLinkOpts(state, { albumId, linkOpts }) {
 		const foundIndex = state.albumDetails[albumId].links.findIndex(
-			({ identifier }) => identifier === linkOpts.identifier
+			({ identifier }) => identifier === linkOpts.identifier,
 		);
 		const link = state.albumDetails[albumId].links[foundIndex];
 		state.albumDetails[albumId].links[foundIndex] = { ...link, ...linkOpts };
@@ -125,5 +121,5 @@ export const mutations = {
 		} else {
 			state.expandedAlbums.push(id);
 		}
-	}
+	},
 };
-- 
cgit v1.2.3


From 766e74cc51138b32482f65f0f2647eb9d943103e Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Sun, 5 Jul 2020 04:18:08 +0300
Subject: feat: add video preview on hover to dashboard and apply new linter
 rules to some of the files

---
 src/site/components/footer/Footer.vue              |  62 ++-
 src/site/components/grid/Grid.vue                  | 435 +++++++++++----------
 src/site/components/grid/waterfall/Waterfall.vue   |  56 +--
 .../components/grid/waterfall/WaterfallItem.vue    |  29 +-
 src/site/constants/alertTypes.js                   |  10 +
 src/site/plugins/notifier.js                       |   7 +
 src/site/store/auth.js                             |  20 +-
 src/site/store/images.js                           |   4 +-
 8 files changed, 342 insertions(+), 281 deletions(-)
 create mode 100644 src/site/constants/alertTypes.js
 create mode 100644 src/site/plugins/notifier.js

(limited to 'src/site')

diff --git a/src/site/components/footer/Footer.vue b/src/site/components/footer/Footer.vue
index 44e34f4..19d18f2 100644
--- a/src/site/components/footer/Footer.vue
+++ b/src/site/components/footer/Footer.vue
@@ -1,12 +1,18 @@
 <template>
+	<!-- eslint-disable max-len -->
 	<footer>
-		<svg viewBox="0 0 1920 250"
+		<svg
+			viewBox="0 0 1920 250"
 			class="waves">
-			<path d="M1920 250H0V0s126.707 78.536 349.975 80.05c177.852 1.203 362.805-63.874 553.803-63.874 290.517 0 383.458 57.712 603.992 61.408 220.527 3.696 278.059-61.408 412.23-17.239"
+
+			<path
+				d="M1920 250H0V0s126.707 78.536 349.975 80.05c177.852 1.203 362.805-63.874 553.803-63.874 290.517 0 383.458 57.712 603.992 61.408 220.527 3.696 278.059-61.408 412.23-17.239"
 				class="wave-1" />
-			<path d="M1920 144s-467.917 116.857-1027.243-17.294C369.986 1.322 0 45.578 0 45.578V250h1920V144z"
+			<path
+				d="M1920 144s-467.917 116.857-1027.243-17.294C369.986 1.322 0 45.578 0 45.578V250h1920V144z"
 				class="wave-2" />
-			<path d="M0 195.553s208.547-75.581 701.325-20.768c376.707 41.908 520.834-67.962 722.545-67.962 222.926 0 311.553 83.523 496.129 86.394V250H0v-54.447z"
+			<path
+				d="M0 195.553s208.547-75.581 701.325-20.768c376.707 41.908 520.834-67.962 722.545-67.962 222.926 0 311.553 83.523 496.129 86.394V250H0v-54.447z"
 				class="wave-3" />
 		</svg>
 		<div>
@@ -15,7 +21,8 @@
 					<div class="column is-narrow">
 						<h4>lolisafe</h4>
 						<span>© 2017-2020
-							<a href="https://github.com/pitu"
+							<a
+								href="https://github.com/pitu"
 								class="no-block">Pitu</a>
 						</span><br>
 						<span>v{{ version }}</span>
@@ -24,20 +31,33 @@
 						<div class="columns is-gapless">
 							<div class="column" />
 							<div class="column">
-								<nuxt-link to="/">Home</nuxt-link>
-								<nuxt-link to="/faq">FAQ</nuxt-link>
+								<nuxt-link to="/">
+									Home
+								</nuxt-link>
+								<nuxt-link to="/faq">
+									FAQ
+								</nuxt-link>
 							</div>
 							<div class="column">
-								<nuxt-link to="/dashboard">Dashboard</nuxt-link>
-								<nuxt-link to="/dashboard">Files</nuxt-link>
-								<nuxt-link to="/dashboard/albums">Albums</nuxt-link>
-								<nuxt-link to="/dashboard/account">Account</nuxt-link>
+								<nuxt-link to="/dashboard">
+									Dashboard
+								</nuxt-link>
+								<nuxt-link to="/dashboard">
+									Files
+								</nuxt-link>
+								<nuxt-link to="/dashboard/albums">
+									Albums
+								</nuxt-link>
+								<nuxt-link to="/dashboard/account">
+									Account
+								</nuxt-link>
 							</div>
 							<div class="column">
 								<a href="https://github.com/weebdev/lolisafe">GitHub</a>
 							</div>
 							<div class="column">
-								<a v-if="loggedIn"
+								<a
+									v-if="loggedIn"
 									@click="createShareXThing">ShareX Config</a>
 								<a href="https://chrome.google.com/webstore/detail/lolisafe-uploader/enkkmplljfjppcdaancckgilmgoiofnj">Chrome Extension</a>
 							</div>
@@ -48,7 +68,10 @@
 		</div>
 	</footer>
 </template>
+
 <script>
+/* eslint-disable no-restricted-globals */
+
 import { mapState, mapGetters } from 'vuex';
 import { saveAs } from 'file-saver';
 
@@ -56,19 +79,21 @@ export default {
 	computed: {
 		...mapGetters({ loggedIn: 'auth/isLoggedIn' }),
 		...mapState({
-			version: state => state.config.version
-		})
+			version: (state) => state.config.version,
+			serviceName: (state) => state.config.serviceName,
+			token: (state) => state.auth.token,
+		}),
 	},
 	methods: {
 		createShareXThing() {
 			const sharexFile = `{
-				"Name": "${this.$store.state.config.serviceName}",
+				"Name": "${this.serviceName}",
 				"DestinationType": "ImageUploader, FileUploader",
 				"RequestType": "POST",
 				"RequestURL": "${location.origin}/api/upload",
 				"FileFormName": "files[]",
 				"Headers": {
-					"authorization": "Bearer ${this.$store.state.token}",
+					"authorization": "Bearer ${this.token}",
 					"accept": "application/vnd.lolisafe.json"
 				},
 				"ResponseType": "Text",
@@ -77,10 +102,11 @@ export default {
 			}`;
 			const sharexBlob = new Blob([sharexFile], { type: 'application/octet-binary' });
 			saveAs(sharexBlob, `${location.hostname}.sxcu`);
-		}
-	}
+		},
+	},
 };
 </script>
+
 <style lang="scss" scoped>
 	@import '~/assets/styles/_colors.scss';
 	footer {
diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index 0fff307..d4fe067 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -6,18 +6,13 @@
 					<slot name="pagination" />
 				</div>
 			</div>
-			<div v-if="enableToolbar"
-				class="level-right toolbar">
+			<div v-if="enableToolbar" class="level-right toolbar">
 				<div class="level-item">
 					<div class="block">
-						<b-radio v-model="showList"
-							name="name"
-							:native-value="true">
+						<b-radio v-model="showList" name="name" :native-value="true">
 							List
 						</b-radio>
-						<b-radio v-model="showList"
-							name="name"
-							:native-value="false">
+						<b-radio v-model="showList" name="name" :native-value="false">
 							Grid
 						</b-radio>
 					</div>
@@ -26,66 +21,71 @@
 		</nav>
 
 		<template v-if="!showList">
-			<Waterfall v-if="showWaterfall"
+			<Waterfall
+				v-if="showWaterfall"
 				:gutterWidth="10"
 				:gutterHeight="4">
-				<WaterfallItem v-for="(item, index) in gridFiles"
+				<WaterfallItem
+					v-for="(item, index) in gridFiles"
 					:key="item.id"
 					:width="width"
-					:video="!!item.preview"
 					move-class="item-move">
 					<template v-if="isPublic">
-						<a :href="`${item.url}`"
-							target="_blank">
+						<a
+							:href="`${item.url}`"
+							class="preview-container"
+							target="_blank"
+							@mouseenter.self.stop.prevent="item.preview && mouseOver(item.id)"
+							@mouseleave.self.stop.prevent="item.preview && mouseOut(item.id)">
+
 							<img :src="item.thumb ? item.thumb : blank">
-							<span v-if="!item.thumb && item.name"
-								class="extension">{{ item.name.split('.').pop() }}</span>
+							<div v-if="item.preview && isHovered(item.id)" class="preview">
+								<video ref="video" class="preview" autoplay loop muted>
+									<source :src="item.preview" type="video/mp4">
+								</video>
+							</div>
+
+							<span v-if="!item.thumb && item.name" class="extension">{{
+								item.name.split('.').pop()
+							}}</span>
 						</a>
 					</template>
 					<template v-else>
-						<img v-if="!item.preview" :class="{'hidden': item.preview}" 
-							:src="item.thumb ? item.thumb : blank">
-						<video v-if="item.preview" autoplay loop>
-  							<source :src="item.preview" type="video/mp4" />
-						</video>
-						<span v-if="!item.thumb && item.name"
-							class="extension">{{ item.name.split('.').pop() }}</span>
-						<div v-if="!isPublic"
+						<img :src="item.thumb ? item.thumb : blank">
+						<div v-if="item.preview && isHovered(item.id)" class="preview">
+							<video ref="video" class="preview" autoplay loop muted>
+								<source :src="item.preview" type="video/mp4">
+							</video>
+						</div>
+
+						<span v-if="!item.thumb && item.name" class="extension">{{ item.name.split('.').pop() }}</span>
+						<div
+							v-if="!isPublic"
 							:class="{ fixed }"
-							class="actions">
-							<b-tooltip label="Link"
-								position="is-top">
-								<a :href="`${item.url}`"
-									target="_blank"
-									class="btn">
+							class="actions"
+							@mouseenter.self.stop.prevent="item.preview && mouseOver(item.id)"
+							@mouseleave.self.stop.prevent="item.preview && mouseOut(item.id)">
+							<b-tooltip label="Link" position="is-top">
+								<a :href="`${item.url}`" target="_blank" class="btn">
 									<i class="icon-web-code" />
 								</a>
 							</b-tooltip>
-							<b-tooltip label="Tags"
-								position="is-top">
-								<a class="btn"
-									@click="manageTags(item)">
+							<b-tooltip label="Tags" position="is-top">
+								<a class="btn" @click="manageTags(item)">
 									<i class="icon-ecommerce-tag-c" />
 								</a>
 							</b-tooltip>
-							<b-tooltip label="Albums"
-								position="is-top">
-								<a class="btn"
-									@click="openAlbumModal(item)">
+							<b-tooltip label="Albums" position="is-top">
+								<a class="btn" @click="openAlbumModal(item)">
 									<i class="icon-interface-window" />
 								</a>
-							</b-tooltip>							
-							<b-tooltip label="Delete"
-								position="is-top">
-								<a class="btn"
-									@click="deleteFile(item, index)">
+							</b-tooltip>
+							<b-tooltip label="Delete" position="is-top">
+								<a class="btn" @click="deleteFile(item, index)">
 									<i class="icon-editorial-trash-a-l" />
 								</a>
 							</b-tooltip>
-							<b-tooltip v-if="user && user.isAdmin"
-								label="More info"
-								position="is-top"
-								class="more">
+							<b-tooltip v-if="user && user.isAdmin" label="More info" position="is-top" class="more">
 								<nuxt-link :to="`/dashboard/admin/file/${item.id}`">
 									<i class="icon-interface-more" />
 								</nuxt-link>
@@ -96,58 +96,42 @@
 			</Waterfall>
 		</template>
 		<div v-else>
-			<b-table
-				:data="gridFiles || []"
-				:mobile-cards="true">
+			<b-table :data="gridFiles || []" :mobile-cards="true">
 				<template slot-scope="props">
 					<template v-if="!props.row.hideFromList">
-						<b-table-column field="url"
-							label="URL">
-							<a :href="props.row.url"
-								target="_blank">{{ props.row.url }}</a>
+						<b-table-column field="url" label="URL">
+							<a :href="props.row.url" target="_blank">{{ props.row.url }}</a>
 						</b-table-column>
 
-						<b-table-column field="albums"
-							label="Albums"
-							centered>
+						<b-table-column field="albums" label="Albums" centered>
 							<template v-for="(album, index) in props.row.albums">
-								<nuxt-link :key="index"
-									:to="`/dashboard/albums/${album.id}`">
+								<nuxt-link :key="index" :to="`/dashboard/albums/${album.id}`">
 									{{ album.name }}
 								</nuxt-link>
-								<template v-if="index < props.row.albums.length - 1">, </template>
+								<template v-if="index < props.row.albums.length - 1">
+									,
+								</template>
 							</template>
 
 							{{ props.row.username }}
 						</b-table-column>
 
-						<b-table-column field="uploaded"
-							label="Uploaded"
-							centered>
+						<b-table-column field="uploaded" label="Uploaded" centered>
 							<span><timeago :since="props.row.createdAt" /></span>
 						</b-table-column>
 
-						<b-table-column field="purge"
-							centered>
-							<b-tooltip label="Albums"
-								position="is-top">
-								<a class="btn"
-									@click="openAlbumModal(props.row)">
+						<b-table-column field="purge" centered>
+							<b-tooltip label="Albums" position="is-top">
+								<a class="btn" @click="openAlbumModal(props.row)">
 									<i class="icon-interface-window" />
 								</a>
 							</b-tooltip>
-							<b-tooltip label="Delete"
-								position="is-top"
-								class="is-danger">
-								<a class="is-danger"
-									@click="deleteFile(props.row)">
+							<b-tooltip label="Delete" position="is-top" class="is-danger">
+								<a class="is-danger" @click="deleteFile(props.row)">
 									<i class="icon-editorial-trash-a-l" />
 								</a>
 							</b-tooltip>
-							<b-tooltip v-if="user && user.isAdmin"
-								label="More info"
-								position="is-top"
-								class="more">
+							<b-tooltip v-if="user && user.isAdmin" label="More info" position="is-top" class="more">
 								<nuxt-link :to="`/dashboard/admin/file/${props.row.id}`">
 									<i class="icon-interface-more" />
 								</nuxt-link>
@@ -170,21 +154,23 @@
 				</template>
 			</b-table>
 		</div>
-		<b-modal :active.sync="isAlbumsModalActive"
-			:width="640"
-			scroll="keep">
+		<b-modal :active.sync="isAlbumsModalActive" :width="640" scroll="keep">
 			<div class="card albumsModal">
 				<div class="card-content">
 					<div class="content">
-						<h3 class="subtitle">Select the albums this file should be a part of</h3>
+						<h3 class="subtitle">
+							Select the albums this file should be a part of
+						</h3>
 						<hr>
+
 						<div class="albums-container">
-							<div v-for="(album, index) in albums"
-								:key="index"
-								class="album">
+							<div v-for="(album, index) in albums" :key="index" class="album">
 								<div class="field">
-									<b-checkbox :value="isAlbumSelected(album.id)"
-										@input="albumCheckboxClicked($event, album.id)">{{ album.name }}</b-checkbox>
+									<b-checkbox
+										:value="isAlbumSelected(album.id)"
+										@input="albumCheckboxClicked($event, album.id)">
+										{{ album.name }}
+									</b-checkbox>
 								</div>
 							</div>
 						</div>
@@ -204,37 +190,37 @@ import WaterfallItem from './waterfall/WaterfallItem.vue';
 export default {
 	components: {
 		Waterfall,
-		WaterfallItem
+		WaterfallItem,
 	},
 	props: {
 		files: {
 			type: Array,
-			default: () => []
+			default: () => [],
 		},
 		total: {
 			type: Number,
-			default: 0
+			default: 0,
 		},
 		fixed: {
 			type: Boolean,
-			default: false
+			default: false,
 		},
 		isPublic: {
 			type: Boolean,
-			default: false
+			default: false,
 		},
 		width: {
 			type: Number,
-			default: 150
+			default: 150,
 		},
 		enableSearch: {
 			type: Boolean,
-			default: true
+			default: true,
 		},
 		enableToolbar: {
 			type: Boolean,
-			default: true
-		}
+			default: true,
+		},
 	},
 	data() {
 		return {
@@ -242,18 +228,20 @@ export default {
 			searchTerm: null,
 			showList: false,
 			albums: [],
+			hoveredItems: [],
 			isAlbumsModalActive: false,
 			showingModalForFile: null,
 			filesOffsetWaterfall: 0,
 			filesOffsetEndWaterfall: 50,
-			filesPerPageWaterfall: 50
+			filesPerPageWaterfall: 50,
 		};
 	},
 	computed: {
 		...mapState({
-			user: state => state.auth.user
+			user: (state) => state.auth.user,
 		}),
 		blank() {
+			// eslint-disable-next-line global-require, import/no-unresolved
 			return require('@/assets/images/blank.png');
 		},
 		gridFiles() {
@@ -262,12 +250,7 @@ export default {
 	},
 	methods: {
 		async search() {
-			const data = await this.$search.do(this.searchTerm, [
-				'name',
-				'original',
-				'type',
-				'albums:name'
-			]);
+			const data = await this.$search.do(this.searchTerm, ['name', 'original', 'type', 'albums:name']);
 			console.log('> Search result data', data);
 		},
 		deleteFile(file, index) {
@@ -290,13 +273,13 @@ export default {
 						});
 					}
 					return this.$buefy.toast.open(response.message);
-				}
+				},
 			});
 		},
 		isAlbumSelected(id) {
-			if (!this.showingModalForFile) return;
-			const found = this.showingModalForFile.albums.find(el => el.id === id);
-			return found && found.id ? true : false;
+			if (!this.showingModalForFile) return false;
+			const found = this.showingModalForFile.albums.find((el) => el.id === id);
+			return !!(found && found.id);
 		},
 		async openAlbumModal(file) {
 			this.showingModalForFile = file;
@@ -311,7 +294,7 @@ export default {
 		async albumCheckboxClicked(value, id) {
 			const response = await this.$axios.$post(`file/album/${value ? 'add' : 'del'}`, {
 				albumId: id,
-				fileId: this.showingModalForFile.id
+				fileId: this.showingModalForFile.id,
 			});
 			this.$buefy.toast.open(response.message);
 
@@ -319,134 +302,166 @@ export default {
 			this.$parent.getFiles();
 		},
 		async getAlbums() {
-			const response = await this.$axios.$get(`albums/dropdown`);
+			const response = await this.$axios.$get('albums/dropdown');
 			this.albums = response.albums;
 			this.$forceUpdate();
 		},
-		mouseOverTest() {
-			console.log('aaaaaa');
-		}
-	}
+		mouseOver(id) {
+			console.log('in', id);
+			const foundIndex = this.hoveredItems.indexOf(id);
+			if (foundIndex > -1) return;
+			this.hoveredItems.push(id);
+			/// XXX: THIS IS NOT OK!
+			this.$nextTick(() => {
+				this.$refs.video.forEach((e) => e.play().catch(() => {}));
+			});
+		},
+		mouseOut(id) {
+			console.log('out', id);
+			const foundIndex = this.hoveredItems.indexOf(id);
+			if (foundIndex > -1) this.hoveredItems.splice(foundIndex, 1);
+		},
+		isHovered(id) {
+			return this.hoveredItems.includes(id);
+		},
+	},
 };
 </script>
 
 <style lang="scss" scoped>
-	@import '~/assets/styles/_colors.scss';
-	.item-move {
-		transition: all .25s cubic-bezier(.55,0,.1,1);
-	}
+@import '~/assets/styles/_colors.scss';
+.item-move {
+	transition: all 0.25s cubic-bezier(0.55, 0, 0.1, 1);
+}
 
-	div.toolbar {
-		padding: 1rem;
+div.toolbar {
+	padding: 1rem;
 
-		.block {
-			text-align: right;
-		}
+	.block {
+		text-align: right;
 	}
+}
 
-	span.extension {
-		position: absolute;
-		width: 100%;
-		height: 100%;
-		z-index: 0;
-		top: 0;
-		left: 0;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		font-size: 2rem;
-		pointer-events: none;
-		opacity: .75;
-		max-width: 150px;
-	}
+span.extension {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	z-index: 0;
+	top: 0;
+	left: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 2rem;
+	pointer-events: none;
+	opacity: 0.75;
+	max-width: 150px;
+}
 
-	div.actions {
-		opacity: 0;
-		-webkit-transition: opacity 0.1s linear;
-		-moz-transition: opacity 0.1s linear;
-		-ms-transition: opacity 0.1s linear;
-		-o-transition: opacity 0.1s linear;
-		transition: opacity 0.1s linear;
-		position: absolute;
-		top: 0px;
-		left: 0px;
-		width: 100%;
-		height: calc(100% - 6px);
-		background: rgba(0, 0, 0, 0.5);
-		display: flex;
-		justify-content: center;
-		align-items: center;
-
-		span {
-			padding: 3px;
-			&.more {
-				position: absolute;
-				top: 0;
-				right: 0;
-			}
+div.preview {
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	width: 100%;
+	height: calc(100% - 6px);
+	overflow: hidden;
+}
 
-			&:nth-child(1), &:nth-child(2) {
-				align-items: flex-end;
-			}
+.preview-container {
+	display: inline-block;
+}
 
-			&:nth-child(1), &:nth-child(3) {
-				justify-content: flex-end;
-			}
+div.actions {
+	opacity: 0;
+	-webkit-transition: opacity 0.1s linear;
+	-moz-transition: opacity 0.1s linear;
+	-ms-transition: opacity 0.1s linear;
+	-o-transition: opacity 0.1s linear;
+	transition: opacity 0.1s linear;
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	width: 100%;
+	height: calc(100% - 6px);
+	// background: rgba(0, 0, 0, 0.5);
+	background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0px, rgba(0, 0, 0, 0) 60px),
+		linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0px, rgba(0, 0, 0, 0) 45px);
+	display: flex;
+	justify-content: center;
+	align-items: flex-end;
+
+	span {
+		padding: 3px;
+
+		&.more {
+			position: absolute;
+			top: 0;
+			right: 0;
+		}
+
+		&:nth-child(1),
+		&:nth-child(2) {
+			align-items: flex-end;
+			padding-bottom: 10px;
+		}
+
+		&:nth-child(3),
+		&:nth-child(4) {
+			justify-content: flex-end;
+			padding-bottom: 10px;
+		}
 
-			a {
+		a {
+			width: 30px;
+			height: 30px;
+			color: white;
+			justify-content: center;
+			align-items: center;
+			display: flex;
+			&.btn:before {
+				content: '';
 				width: 30px;
 				height: 30px;
-				color: white;
-				justify-content: center;
-				align-items: center;
-				display: flex;
-				&.btn:before {
-					content: '';
-					width: 30px;
-					height: 30px;
-					border: 1px solid white;
-					border-radius: 50%;
-					position: absolute;
-				}
+				border: 1px solid white;
+				border-radius: 50%;
+				position: absolute;
 			}
 		}
+	}
 
-		&.fixed {
-			position: relative;
-			opacity: 1;
-			background: none;
-
-			a {
-				width: auto;
-				height: auto;
-				color: $defaultTextColor;
-				&:before {
-					display: none;
-				}
-			}
+	&.fixed {
+		position: relative;
+		opacity: 1;
+		background: none;
 
+		a {
+			width: auto;
+			height: auto;
+			color: $defaultTextColor;
+			&:before {
+				display: none;
+			}
 		}
 	}
+}
 
-	.albums-container {
-		display: flex;
-		flex-direction: row;
-		flex-wrap: wrap;
-		.album {
-			flex-basis: 33%;
-			text-align: left;
-		}
+.albums-container {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	.album {
+		flex-basis: 33%;
+		text-align: left;
 	}
+}
 
-	img.hidden {
-		display: none;
-	}
-</style>
+.hidden {
+	display: none;
+}
 
-<style lang="scss">
-	.waterfall-item:hover {
-		div.actions {
-			opacity: 1
-		}
+.waterfall-item:hover {
+	div.actions {
+		opacity: 1;
 	}
+}
 </style>
diff --git a/src/site/components/grid/waterfall/Waterfall.vue b/src/site/components/grid/waterfall/Waterfall.vue
index af1bd72..cccc3ac 100644
--- a/src/site/components/grid/waterfall/Waterfall.vue
+++ b/src/site/components/grid/waterfall/Waterfall.vue
@@ -9,8 +9,6 @@
 	</div>
 </template>
 <script>
-// import {quickSort, getMinIndex, _, sum} from './util'
-
 const quickSort = (arr, type) => {
 	const left = [];
 	const right = [];
@@ -25,10 +23,10 @@ const quickSort = (arr, type) => {
 			right.push(arr[i]);
 		}
 	}
-	return quickSort(left, type).concat(povis, quickSort(right, type))
+	return quickSort(left, type).concat(povis, quickSort(right, type));
 };
 
-const getMinIndex = arr => {
+const getMinIndex = (arr) => {
 	let pos = 0;
 	for (let i = 0; i < arr.length; i++) {
 		if (arr[pos] > arr[i]) {
@@ -44,49 +42,53 @@ const _ = {
 	},
 	off(el, type, func, capture = false) {
 		el.removeEventListener(type, func, capture);
-	}
+	},
 };
 
-const sum = arr => arr.reduce((sum, val) => sum + val);
+const sum = (arr) => arr.reduce((acc, val) => acc + val, 0);
+
 export default {
 	name: 'Waterfall',
 	props: {
 		gutterWidth: {
 			type: Number,
-			default: 0
+			default: 0,
 		},
 		gutterHeight: {
 			type: Number,
-			default: 0
+			default: 0,
 		},
 		resizable: {
 			type: Boolean,
-			default: true
+			default: true,
 		},
 		align: {
 			type: String,
-			default: 'center'
+			default: 'center',
 		},
 		fixWidth: {
-			type: Number
+			type: Number,
+			default: 0,
 		},
 		minCol: {
 			type: Number,
-			default: 1
+			default: 1,
 		},
 		maxCol: {
-			type: Number
+			type: Number,
+			default: 0,
 		},
 		percent: {
-			type: Array
-		}
+			type: Array,
+			default: null,
+		},
 	},
 	data() {
 		return {
 			timer: null,
 			colNum: 0,
 			lastWidth: 0,
-			percentWidthArr: []
+			percentWidthArr: [],
 		};
 	},
 	created() {
@@ -105,16 +107,16 @@ export default {
 	},
 	methods: {
 		calulate(arr) {
-			let pageWidth = this.fixWidth ? this.fixWidth : this.$el.offsetWidth;
+			const pageWidth = this.fixWidth ? this.fixWidth : this.$el.offsetWidth;
 			// 百分比布局计算
 			if (this.percent) {
 				this.colNum = this.percent.length;
 				const total = sum(this.percent);
-				this.percentWidthArr = this.percent.map(value => (value / total) * pageWidth);
+				this.percentWidthArr = this.percent.map((value) => (value / total) * pageWidth);
 				this.lastWidth = 0;
 			// 正常布局计算
 			} else {
-				this.colNum = parseInt(pageWidth / (arr.width + this.gutterWidth));
+				this.colNum = parseInt(pageWidth / (arr.width + this.gutterWidth), 10);
 				if (this.minCol && this.colNum < this.minCol) {
 					this.colNum = this.minCol;
 					this.lastWidth = 0;
@@ -136,14 +138,14 @@ export default {
 		render() {
 			// 重新排序
 			let childArr = [];
-			childArr = this.$children.map(child => child.getMeta());
+			childArr = this.$children.map((child) => child.getMeta());
 			childArr = quickSort(childArr, 'order');
 			// 计算列数
-			this.calulate(childArr[0])
-			let offsetArr = Array(this.colNum).fill(0);
+			this.calulate(childArr[0]);
+			const offsetArr = Array(this.colNum).fill(0);
 			// 渲染
-			childArr.forEach(child => {
-				let position = getMinIndex(offsetArr);
+			childArr.forEach((child) => {
+				const position = getMinIndex(offsetArr);
 				// 百分比布局渲染
 				if (this.percent) {
 					let left = 0;
@@ -171,10 +173,10 @@ export default {
 				}
 				child.el.style.top = `${offsetArr[position]}px`;
 				offsetArr[position] += child.height + this.gutterHeight;
-				this.$el.style.height = `${Math.max.apply(Math, offsetArr)}px`;
+				this.$el.style.height = `${Math.max(...offsetArr)}px`;
 			});
 			this.$emit('rendered', this);
-		}
-	}
+		},
+	},
 };
 </script>
diff --git a/src/site/components/grid/waterfall/WaterfallItem.vue b/src/site/components/grid/waterfall/WaterfallItem.vue
index 7c4d814..2a5c69a 100644
--- a/src/site/components/grid/waterfall/WaterfallItem.vue
+++ b/src/site/components/grid/waterfall/WaterfallItem.vue
@@ -12,26 +12,27 @@
 
 <script>
 import imagesLoaded from 'imagesloaded';
+
 export default {
 	name: 'WaterfallItem',
 	props: {
 		order: {
 			type: Number,
-			default: 0
+			default: 0,
 		},
 		width: {
 			type: Number,
-			default: 150
+			default: 150,
 		},
 		video: {
 			type: Boolean,
-			default: false
-		}
+			default: false,
+		},
 	},
 	data() {
 		return {
 			itemWidth: 0,
-			height: 0
+			height: 0,
 		};
 	},
 	created() {
@@ -42,18 +43,18 @@ export default {
 		this.$el.style.width = `${this.width}px`;
 		this.emit();
 		if (this.video) {
-			const videoEl = this.$slots.default.find(e => e.tag?.toLowerCase() === 'video');
+			// find first video object
+			const videoEl = this.$slots.default.find((e) => e.tag?.toLowerCase() === 'video');
 			const el = videoEl.elm;
-			console.log(videoEl);
-			console.log(el);
+
+			// add event listener for video loaded
 			el.onloadeddata = () => {
-				console.log('loaded');
 				this.$el.style.left = '-9999px';
 				this.$el.style.top = '-9999px';
 				this.$el.style.display = 'block';
 				this.height = el.offsetHeight + 5;
 				this.itemWidth = el.offsetWidth;
-			}
+			};
 		} else {
 			imagesLoaded(this.$el, () => {
 				this.$el.style.left = '-9999px';
@@ -73,9 +74,9 @@ export default {
 				el: this.$el,
 				height: this.height,
 				width: this.itemWidth,
-				order: this.order
+				order: this.order,
 			};
-		}
-	}
-}
+		},
+	},
+};
 </script>
diff --git a/src/site/constants/alertTypes.js b/src/site/constants/alertTypes.js
new file mode 100644
index 0000000..1b830bc
--- /dev/null
+++ b/src/site/constants/alertTypes.js
@@ -0,0 +1,10 @@
+export default {
+	PRIMARY: 'is-primary',
+	INFO: 'is-info',
+	SUCCESS: 'is-success',
+	WARNING: 'is-warning',
+	ERROR: 'is-danger',
+	DARK: 'is-dark',
+	LIGHT: 'is-light',
+	WHITE: 'is-white',
+};
diff --git a/src/site/plugins/notifier.js b/src/site/plugins/notifier.js
new file mode 100644
index 0000000..bcf7878
--- /dev/null
+++ b/src/site/plugins/notifier.js
@@ -0,0 +1,7 @@
+export default ({ store }, inject) => {
+	inject('notifier', {
+		showMessage({ content = '', type = '' }) {
+			store.commit('alert/set', { content, color });
+		}
+	});
+};
diff --git a/src/site/store/auth.js b/src/site/store/auth.js
index 73976d6..55009ce 100644
--- a/src/site/store/auth.js
+++ b/src/site/store/auth.js
@@ -4,14 +4,14 @@ const getDefaultState = () => ({
 	loggedIn: false,
 	isLoading: false,
 	user: null,
-	token: null
+	token: null,
 });
 
 export const state = getDefaultState;
 
 export const getters = {
-	isLoggedIn: state => state.loggedIn,
-	getApiKey: state => state.user?.apiKey
+	isLoggedIn: (state) => state.loggedIn,
+	getApiKey: (state) => state.user?.apiKey,
 };
 
 export const actions = {
@@ -27,7 +27,7 @@ export const actions = {
 		commit('loginRequest');
 
 		try {
-			const data = await this.$axios.$post(`auth/login`, { username, password });
+			const data = await this.$axios.$post('auth/login', { username, password });
 			this.$axios.setToken(data.token, 'Bearer');
 
 			commit('setToken', data.token);
@@ -38,7 +38,7 @@ export const actions = {
 	},
 	async fetchCurrentUser({ commit, dispatch }) {
 		try {
-			const data = await this.$axios.$get(`users/me`);
+			const data = await this.$axios.$get('users/me');
 			commit('setUser', data.user);
 		} catch (e) {
 			dispatch('alert/set', { text: e.message, error: true }, { root: true });
@@ -46,9 +46,9 @@ export const actions = {
 	},
 	async changePassword({ dispatch }, { password, newPassword }) {
 		try {
-			const response = await this.$axios.$post(`user/password/change`, {
+			const response = await this.$axios.$post('user/password/change', {
 				password,
-				newPassword
+				newPassword,
 			});
 
 			return response;
@@ -58,7 +58,7 @@ export const actions = {
 	},
 	async requestAPIKey({ commit, dispatch }) {
 		try {
-			const response = await this.$axios.$post(`user/apikey/change`);
+			const response = await this.$axios.$post('user/apikey/change');
 			commit('setApiKey', response.apiKey);
 
 			return response;
@@ -68,7 +68,7 @@ export const actions = {
 	},
 	logout({ commit }) {
 		commit('logout');
-	}
+	},
 };
 
 export const mutations = {
@@ -94,5 +94,5 @@ export const mutations = {
 		this.$cookies.remove('token');
 		// reset state to default
 		Object.assign(state, getDefaultState());
-	}
+	},
 };
diff --git a/src/site/store/images.js b/src/site/store/images.js
index f6dae1b..14f475a 100644
--- a/src/site/store/images.js
+++ b/src/site/store/images.js
@@ -25,7 +25,7 @@ export const actions = {
 		try {
 			const response = await this.$axios.$get(`files`, { params: { limit: state.pagination.limit, page } });
 
-			commit('updateFiles', { files: response.files });
+			commit('setFiles', { files: response.files });
 			commit('updatePaginationMeta', { totalFiles: response.count, page });
 		} catch (e) {
 			dispatch('alert/set', { text: e.message, error: true }, { root: true });
@@ -45,7 +45,7 @@ export const mutations = {
 	setIsLoading(state) {
 		state.isLoading = true;
 	},
-	updateFiles(state, { files }) {
+	setFiles(state, { files }) {
 		state.files = files || [];
 		state.isLoading = false;
 	},
-- 
cgit v1.2.3


From 15f296a7805b7623f56eab67b74ab0bf93a038e1 Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Tue, 7 Jul 2020 02:02:37 +0300
Subject: chore: eslint stores feat: merge album and images

---
 src/site/store/.eslintrc.json |  5 +++++
 src/site/store/admin.js       |  0
 src/site/store/album.js       |  5 ++++-
 src/site/store/albums.js      |  1 -
 src/site/store/alert.js       |  7 +++----
 src/site/store/auth.js        | 17 +++++-----------
 src/site/store/config.js      |  5 ++---
 src/site/store/images.js      | 45 ++++++++++++++++++++++++-------------------
 src/site/store/index.js       |  5 +++--
 9 files changed, 47 insertions(+), 43 deletions(-)
 create mode 100644 src/site/store/.eslintrc.json
 create mode 100644 src/site/store/admin.js

(limited to 'src/site')

diff --git a/src/site/store/.eslintrc.json b/src/site/store/.eslintrc.json
new file mode 100644
index 0000000..052e3ef
--- /dev/null
+++ b/src/site/store/.eslintrc.json
@@ -0,0 +1,5 @@
+{
+	"rules": {
+		"no-shadow": ["error", { "allow": ["state"] }]
+	}
+}
diff --git a/src/site/store/admin.js b/src/site/store/admin.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/site/store/album.js b/src/site/store/album.js
index f7c88c9..d8ffacc 100644
--- a/src/site/store/album.js
+++ b/src/site/store/album.js
@@ -1,4 +1,3 @@
-/* eslint-disable no-shadow */
 export const state = () => ({
 	files: [],
 	name: null,
@@ -36,6 +35,10 @@ export const actions = {
 			dispatch('alert/set', { text: e.message, error: true }, { root: true });
 		}
 	},
+	// TODO: Fix duplicate code between this store and files store
+	deleteFile({ commit }, fileId) {
+
+	},
 };
 
 export const mutations = {
diff --git a/src/site/store/albums.js b/src/site/store/albums.js
index f3d7bcf..2b4ac60 100644
--- a/src/site/store/albums.js
+++ b/src/site/store/albums.js
@@ -1,4 +1,3 @@
-/* eslint-disable no-shadow */
 import Vue from 'vue';
 
 export const state = () => ({
diff --git a/src/site/store/alert.js b/src/site/store/alert.js
index 78c0eaf..ff38e09 100644
--- a/src/site/store/alert.js
+++ b/src/site/store/alert.js
@@ -1,7 +1,6 @@
-/* eslint-disable no-shadow */
 const getDefaultState = () => ({
 	text: null,
-	error: false
+	error: false,
 });
 
 export const state = getDefaultState;
@@ -12,7 +11,7 @@ export const actions = {
 	},
 	clear({ commit }) {
 		commit('clear');
-	}
+	},
 };
 
 export const mutations = {
@@ -22,5 +21,5 @@ export const mutations = {
 	},
 	clear(state) {
 		Object.assign(state, getDefaultState());
-	}
+	},
 };
diff --git a/src/site/store/auth.js b/src/site/store/auth.js
index 55009ce..69de9ec 100644
--- a/src/site/store/auth.js
+++ b/src/site/store/auth.js
@@ -1,8 +1,5 @@
-/* eslint-disable no-shadow */
-// only used so I could keep the convention of naming the first param as "state" in mutations
 const getDefaultState = () => ({
 	loggedIn: false,
-	isLoading: false,
 	user: null,
 	token: null,
 });
@@ -23,18 +20,14 @@ export const actions = {
 			dispatch('alert/set', { text: e.message, error: true }, { root: true });
 		}
 	},
-	async login({ commit, dispatch }, { username, password }) {
+	async login({ commit }, { username, password }) {
 		commit('loginRequest');
 
-		try {
-			const data = await this.$axios.$post('auth/login', { username, password });
-			this.$axios.setToken(data.token, 'Bearer');
+		const data = await this.$axios.$post('auth/login', { username, password });
+		this.$axios.setToken(data.token, 'Bearer');
 
-			commit('setToken', data.token);
-			commit('loginSuccess', { token: data.token, user: data.user });
-		} catch (e) {
-			dispatch('alert/set', { text: e.message, error: true }, { root: true });
-		}
+		commit('setToken', data.token);
+		commit('loginSuccess', { token: data.token, user: data.user });
 	},
 	async fetchCurrentUser({ commit, dispatch }) {
 		try {
diff --git a/src/site/store/config.js b/src/site/store/config.js
index 6202f84..f52fc0f 100644
--- a/src/site/store/config.js
+++ b/src/site/store/config.js
@@ -1,4 +1,3 @@
-/* eslint-disable no-shadow */
 export const state = () => ({
 	development: true,
 	version: '4.0.0',
@@ -9,11 +8,11 @@ export const state = () => ({
 	chunkSize: 90,
 	maxLinksPerAlbum: 5,
 	publicMode: false,
-	userAccounts: false
+	userAccounts: false,
 });
 
 export const mutations = {
 	set(state, config) {
 		Object.assign(state, config);
-	}
+	},
 };
diff --git a/src/site/store/images.js b/src/site/store/images.js
index 14f475a..d02219f 100644
--- a/src/site/store/images.js
+++ b/src/site/store/images.js
@@ -1,19 +1,21 @@
-/* eslint-disable no-shadow */
 export const state = () => ({
 	files: [],
 	isLoading: false,
 	pagination: {
 		page: 1,
 		limit: 30,
-		totalFiles: 0
-	}
+		totalFiles: 0,
+	},
+	name: null,
+	downloadEnabled: false,
 });
 
 export const getters = {
 	getTotalFiles: ({ pagination }) => pagination.totalFiles,
 	getFetchedCount: ({ files }) => files.length,
 	shouldPaginate: ({ pagination }) => pagination.totalFiles > pagination.limit,
-	getLimit: ({ pagination }) => pagination.limit
+	getLimit: ({ pagination }) => pagination.limit,
+	getName: ({ name }) => name,
 };
 
 export const actions = {
@@ -23,34 +25,37 @@ export const actions = {
 		page = page || 1;
 
 		try {
-			const response = await this.$axios.$get(`files`, { params: { limit: state.pagination.limit, page } });
+			const response = await this.$axios.$get('files', { params: { limit: state.pagination.limit, page } });
 
-			commit('setFiles', { files: response.files });
-			commit('updatePaginationMeta', { totalFiles: response.count, page });
+			commit('setFilesAndMeta', { ...response, page });
 		} catch (e) {
 			dispatch('alert/set', { text: e.message, error: true }, { root: true });
 		}
 	},
-	async fetchById({ commit, dispatch }) {
-		try {
-			const response = await this.$axios.$get('verify');
-			commit('loginSuccess', response);
-		} catch (e) {
-			dispatch('alert/set', { text: e.message, error: true }, { root: true });
-		}
-	}
+	async fetchByAlbumId({ commit, dispatch, state }, { id, page }) {
+		commit('setIsLoading');
+
+		page = page || 1;
+
+		const response = await this.$axios.$get(`album/${id}/full`, {
+			params: { limit: state.pagination.limit, page },
+		});
+
+		commit('setFilesAndMeta', { ...response, page });
+	},
 };
 
 export const mutations = {
 	setIsLoading(state) {
 		state.isLoading = true;
 	},
-	setFiles(state, { files }) {
+	setFilesAndMeta(state, {
+		files, name, page, count,
+	}) {
 		state.files = files || [];
+		state.name = name ?? null;
 		state.isLoading = false;
-	},
-	updatePaginationMeta(state, { page, totalFiles }) {
 		state.pagination.page = page || 1;
-		state.pagination.totalFiles = totalFiles || 0;
-	}
+		state.pagination.totalFiles = count || 0;
+	},
 };
diff --git a/src/site/store/index.js b/src/site/store/index.js
index 8f910ae..c0faffb 100644
--- a/src/site/store/index.js
+++ b/src/site/store/index.js
@@ -1,5 +1,6 @@
 import config from '../../../dist/config.json';
 
+// eslint-disable-next-line import/prefer-default-export
 export const actions = {
 	async nuxtClientInit({ commit, dispatch }) {
 		commit('config/set', config);
@@ -8,8 +9,8 @@ export const actions = {
 		if (!cookies.token) return dispatch('auth/logout');
 
 		commit('auth/setToken', cookies.token);
-		await dispatch('auth/verify');
-	}
+		return dispatch('auth/verify');
+	},
 	/* 	alert({ commit }, payload) {
 		if (!payload) return commit('alert', null);
 		commit('alert', {
-- 
cgit v1.2.3


From fb0bc57542a44dcc94149f393d8a4ff0c2e7902b Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Tue, 7 Jul 2020 02:02:59 +0300
Subject: feat: try fixing THE SHITTY WATERFALL

---
 src/site/components/grid/Grid.vue                  |  28 +--
 src/site/components/grid/waterfall/Waterfall.vue   |  47 +++-
 .../components/grid/waterfall/WaterfallItem.vue    |  12 +-
 src/site/components/imageInfo/ImageInfo.vue        |   0
 src/site/pages/a/_identifier.vue                   |  38 +--
 src/site/pages/dashboard/account.vue               |  78 +++---
 src/site/pages/dashboard/admin/user/_id.vue        |  45 ++--
 src/site/pages/dashboard/admin/users.vue           | 270 +++++++++++----------
 src/site/pages/dashboard/albums/_id.vue            |  17 +-
 src/site/pages/dashboard/index.vue                 |  42 ++--
 src/site/pages/login.vue                           |  46 ++--
 src/site/plugins/notifier.js                       |   4 +-
 12 files changed, 361 insertions(+), 266 deletions(-)
 create mode 100644 src/site/components/imageInfo/ImageInfo.vue

(limited to 'src/site')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index d4fe067..e6a8c64 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -24,12 +24,10 @@
 			<Waterfall
 				v-if="showWaterfall"
 				:gutterWidth="10"
-				:gutterHeight="4">
-				<WaterfallItem
-					v-for="(item, index) in gridFiles"
-					:key="item.id"
-					:width="width"
-					move-class="item-move">
+				:gutterHeight="4"
+				:itemWidth="width"
+				:items="gridFiles">
+				<template v-slot="{item}">
 					<template v-if="isPublic">
 						<a
 							:href="`${item.url}`"
@@ -81,7 +79,7 @@
 								</a>
 							</b-tooltip>
 							<b-tooltip label="Delete" position="is-top">
-								<a class="btn" @click="deleteFile(item, index)">
+								<a class="btn" @click="deleteFile(item)">
 									<i class="icon-editorial-trash-a-l" />
 								</a>
 							</b-tooltip>
@@ -92,7 +90,7 @@
 							</b-tooltip>
 						</div>
 					</template>
-				</WaterfallItem>
+				</template>
 			</Waterfall>
 		</template>
 		<div v-else>
@@ -185,12 +183,10 @@
 import { mapState } from 'vuex';
 
 import Waterfall from './waterfall/Waterfall.vue';
-import WaterfallItem from './waterfall/WaterfallItem.vue';
 
 export default {
 	components: {
 		Waterfall,
-		WaterfallItem,
 	},
 	props: {
 		files: {
@@ -253,13 +249,13 @@ export default {
 			const data = await this.$search.do(this.searchTerm, ['name', 'original', 'type', 'albums:name']);
 			console.log('> Search result data', data);
 		},
-		deleteFile(file, index) {
-			this.$buefy.dialog.confirm({
+		deleteFile(file) {
+			this.$emit('delete', file);
+			/* this.$buefy.dialog.confirm({
 				title: 'Deleting file',
 				message: 'Are you sure you want to <b>delete</b> this file?',
 				confirmText: 'Delete File',
 				type: 'is-danger',
-				hasIcon: true,
 				onConfirm: async () => {
 					const response = await this.$axios.$delete(`file/${file.id}`);
 					if (this.showList) {
@@ -274,7 +270,7 @@ export default {
 					}
 					return this.$buefy.toast.open(response.message);
 				},
-			});
+			}); */
 		},
 		isAlbumSelected(id) {
 			if (!this.showingModalForFile) return false;
@@ -311,10 +307,6 @@ export default {
 			const foundIndex = this.hoveredItems.indexOf(id);
 			if (foundIndex > -1) return;
 			this.hoveredItems.push(id);
-			/// XXX: THIS IS NOT OK!
-			this.$nextTick(() => {
-				this.$refs.video.forEach((e) => e.play().catch(() => {}));
-			});
 		},
 		mouseOut(id) {
 			console.log('out', id);
diff --git a/src/site/components/grid/waterfall/Waterfall.vue b/src/site/components/grid/waterfall/Waterfall.vue
index cccc3ac..a83a275 100644
--- a/src/site/components/grid/waterfall/Waterfall.vue
+++ b/src/site/components/grid/waterfall/Waterfall.vue
@@ -1,14 +1,14 @@
-<style>
-	.waterfall {
-		position: relative;
-	}
-</style>
 <template>
 	<div class="waterfall">
-		<slot />
+		<WaterfallItem v-for="(item, index) in items" :key="item.id" :ref="`item-${item.id}`" :width="itemWidth">
+			<slot :item="item" />
+		</WaterfallItem>
 	</div>
 </template>
+
 <script>
+import WaterfallItem from './WaterfallItem.vue';
+
 const quickSort = (arr, type) => {
 	const left = [];
 	const right = [];
@@ -49,6 +49,9 @@ const sum = (arr) => arr.reduce((acc, val) => acc + val, 0);
 
 export default {
 	name: 'Waterfall',
+	components: {
+		WaterfallItem,
+	},
 	props: {
 		gutterWidth: {
 			type: Number,
@@ -82,6 +85,14 @@ export default {
 			type: Array,
 			default: null,
 		},
+		itemWidth: {
+			type: Number,
+			default: 150,
+		},
+		items: {
+			type: Array,
+			default: () => [],
+		},
 	},
 	data() {
 		return {
@@ -89,15 +100,21 @@ export default {
 			colNum: 0,
 			lastWidth: 0,
 			percentWidthArr: [],
+			readyChildCount: 0,
 		};
 	},
+	watch: {
+		items() {
+			this.$nextTick(() => this.render('watch'));
+		},
+	},
 	created() {
 		this.$on('itemRender', () => {
 			if (this.timer) {
 				clearTimeout(this.timer);
 			}
 			this.timer = setTimeout(() => {
-				this.render();
+				this.render('created');
 			}, 0);
 		});
 	},
@@ -105,6 +122,10 @@ export default {
 		this.resizeHandle();
 		this.$watch('resizable', this.resizeHandle);
 	},
+	beforeDestroy() {
+		this.$off('itemRender');
+		_.off(window, 'resize', this.render);
+	},
 	methods: {
 		calulate(arr) {
 			const pageWidth = this.fixWidth ? this.fixWidth : this.$el.offsetWidth;
@@ -135,10 +156,12 @@ export default {
 				_.off(window, 'resize', this.render, false);
 			}
 		},
-		render() {
+		render(context) {
+			console.log(context);
+			if (!this.items) return;
 			// 重新排序
 			let childArr = [];
-			childArr = this.$children.map((child) => child.getMeta());
+			childArr = this.items.map(({ id }) => this.$refs[`item-${id}`][0].getMeta());
 			childArr = quickSort(childArr, 'order');
 			// 计算列数
 			this.calulate(childArr[0]);
@@ -180,3 +203,9 @@ export default {
 	},
 };
 </script>
+
+<style>
+	.waterfall {
+		position: relative;
+	}
+</style>
diff --git a/src/site/components/grid/waterfall/WaterfallItem.vue b/src/site/components/grid/waterfall/WaterfallItem.vue
index 2a5c69a..a49c58c 100644
--- a/src/site/components/grid/waterfall/WaterfallItem.vue
+++ b/src/site/components/grid/waterfall/WaterfallItem.vue
@@ -1,9 +1,3 @@
-<style scoped>
-	.waterfall-item {
-		position: absolute;
-	}
-</style>
-
 <template>
 	<div class="waterfall-item">
 		<slot />
@@ -80,3 +74,9 @@ export default {
 	},
 };
 </script>
+
+<style scoped>
+	.waterfall-item {
+		position: absolute;
+	}
+</style>
diff --git a/src/site/components/imageInfo/ImageInfo.vue b/src/site/components/imageInfo/ImageInfo.vue
new file mode 100644
index 0000000..e69de29
diff --git a/src/site/pages/a/_identifier.vue b/src/site/pages/a/_identifier.vue
index 24d172b..3746cc6 100644
--- a/src/site/pages/a/_identifier.vue
+++ b/src/site/pages/a/_identifier.vue
@@ -20,15 +20,21 @@
 		<template v-if="files && files.length">
 			<div class="align-top">
 				<div class="container">
-					<h1 class="title">{{ name }}</h1>
-					<h2 class="subtitle">Serving {{ files ? files.length : 0 }} files</h2>
-					<a v-if="downloadLink"
+					<h1 class="title">
+						{{ name }}
+					</h1>
+					<h2 class="subtitle">
+						Serving {{ files ? files.length : 0 }} files
+					</h2>
+					<a
+						v-if="downloadLink"
 						:href="downloadLink">Download Album</a>
 					<hr>
 				</div>
 			</div>
 			<div class="container">
-				<Grid v-if="files && files.length"
+				<Grid
+					v-if="files && files.length"
 					:files="files"
 					:isPublic="true"
 					:width="200"
@@ -38,16 +44,20 @@
 		</template>
 		<template v-else>
 			<div class="container">
-				<h1 class="title">:(</h1>
-				<h2 class="subtitle">This album seems to be empty</h2>
+				<h1 class="title">
+					:(
+				</h1>
+				<h2 class="subtitle">
+					This album seems to be empty
+				</h2>
 			</div>
 		</template>
 	</section>
 </template>
 
 <script>
-import Grid from '~/components/grid/Grid.vue';
 import axios from 'axios';
+import Grid from '~/components/grid/Grid.vue';
 
 export default {
 	components: { Grid },
@@ -57,7 +67,7 @@ export default {
 	computed: {
 		config() {
 			return this.$store.state.config;
-		}
+		},
 	},
 	async asyncData({ app, params, error }) {
 		try {
@@ -67,7 +77,7 @@ export default {
 				name: data.name,
 				downloadEnabled: data.downloadEnabled,
 				files: data.files,
-				downloadLink
+				downloadLink,
 			};
 		} catch (err) {
 			console.log('Error when retrieving album', err);
@@ -90,8 +100,8 @@ export default {
 					{ vmid: 'og:title', property: 'og:title', content: `Album: ${this.name} | Files: ${this.files.length}` },
 					{ vmid: 'og:description', property: 'og:description', content: 'A modern and self-hosted file upload service that can handle anything you throw at it. Fast uploads, file manager and sharing capabilities all crafted with a beautiful user experience in mind.' },
 					{ vmid: 'og:image', property: 'og:image', content: `${this.files.length > 0 ? this.files[0].thumbSquare : '/public/images/share.jpg'}` },
-					{ vmid: 'og:image:secure_url', property: 'og:image:secure_url', content: `${this.files.length > 0 ? this.files[0].thumbSquare : '/public/images/share.jpg'}` }
-				]
+					{ vmid: 'og:image:secure_url', property: 'og:image:secure_url', content: `${this.files.length > 0 ? this.files[0].thumbSquare : '/public/images/share.jpg'}` },
+				],
 			};
 		}
 		return {
@@ -103,9 +113,9 @@ export default {
 				{ vmid: 'twitter:description', name: 'twitter:description', content: 'A modern and self-hosted file upload service that can handle anything you throw at it. Fast uploads, file manager and sharing capabilities all crafted with a beautiful user experience in mind.' },
 				{ vmid: 'og:url', property: 'og:url', content: `${this.config.URL}/a/${this.$route.params.identifier}` },
 				{ vmid: 'og:title', property: 'og:title', content: 'lolisafe' },
-				{ vmid: 'og:description', property: 'og:description', content: 'A modern and self-hosted file upload service that can handle anything you throw at it. Fast uploads, file manager and sharing capabilities all crafted with a beautiful user experience in mind.' }
-			]
+				{ vmid: 'og:description', property: 'og:description', content: 'A modern and self-hosted file upload service that can handle anything you throw at it. Fast uploads, file manager and sharing capabilities all crafted with a beautiful user experience in mind.' },
+			],
 		};
-	}
+	},
 };
 </script>
diff --git a/src/site/pages/dashboard/account.vue b/src/site/pages/dashboard/account.vue
index 1c335e8..fb8b273 100644
--- a/src/site/pages/dashboard/account.vue
+++ b/src/site/pages/dashboard/account.vue
@@ -6,62 +6,82 @@
 					<Sidebar />
 				</div>
 				<div class="column">
-					<h2 class="subtitle">Account settings</h2>
+					<h2 class="subtitle">
+						Account settings
+					</h2>
 					<hr>
 
-					<b-field label="Username"
+					<b-field
+						label="Username"
 						message="Nothing to do here"
 						horizontal>
-						<b-input :value="user.username"
+						<b-input
+							:value="user.username"
 							expanded
 							disabled />
 					</b-field>
 
-					<b-field label="Current password"
+					<b-field
+						label="Current password"
 						message="If you want to change your password input the current one here"
 						horizontal>
-						<b-input v-model="password"
+						<b-input
+							v-model="password"
 							type="password"
 							expanded />
 					</b-field>
 
-					<b-field label="New password"
+					<b-field
+						label="New password"
 						message="Your new password"
 						horizontal>
-						<b-input v-model="newPassword"
+						<b-input
+							v-model="newPassword"
 							type="password"
 							expanded />
 					</b-field>
 
-					<b-field label="New password again"
+					<b-field
+						label="New password again"
 						message="Your new password once again"
 						horizontal>
-						<b-input v-model="reNewPassword"
+						<b-input
+							v-model="reNewPassword"
 							type="password"
 							expanded />
 					</b-field>
 
 					<div class="mb2 mt2 text-center">
-						<button class="button is-primary"
-							@click="changePassword">Change password</button>
+						<button
+							class="button is-primary"
+							@click="changePassword">
+							Change password
+						</button>
 					</div>
 
-					<b-field label="API key"
+					<b-field
+						label="API key"
 						message="This API key lets you use the service from other apps"
 						horizontal>
 						<b-field expanded>
-							<b-input :value="apiKey"
+							<b-input
+								:value="apiKey"
 								expanded
 								disabled />
 							<p class="control">
-								<button class="button is-primary">Copy</button>
+								<button class="button is-primary">
+									Copy
+								</button>
 							</p>
 						</b-field>
 					</b-field>
 
 					<div class="mb2 mt2 text-center">
-						<button class="button is-primary"
-							@click="promptNewAPIKey">Request new API key</button>
+						<button
+							class="button is-primary"
+							@click="promptNewAPIKey">
+							Request new API key
+						</button>
 					</div>
 				</div>
 			</div>
@@ -75,7 +95,7 @@ import Sidebar from '~/components/sidebar/Sidebar.vue';
 
 export default {
 	components: {
-		Sidebar
+		Sidebar,
 	},
 	middleware: ['auth', ({ store }) => {
 		store.dispatch('auth/fetchCurrentUser');
@@ -84,21 +104,21 @@ export default {
 		return {
 			password: '',
 			newPassword: '',
-			reNewPassword: ''
+			reNewPassword: '',
 		};
-	}, 
+	},
 	computed: {
 		...mapGetters({ 'apiKey': 'auth/getApiKey' }),
 		...mapState({
-			user: state => state.auth.user
-		})
+			user: (state) => state.auth.user,
+		}),
 	},
 	metaInfo() {
 		return { title: 'Account' };
 	},
 	methods: {
 		...mapActions({
-			getUserSetttings: 'auth/fetchCurrentUser'
+			getUserSetttings: 'auth/fetchCurrentUser',
 		}),
 		async changePassword() {
 			const { password, newPassword, reNewPassword } = this;
@@ -106,21 +126,21 @@ export default {
 			if (!password || !newPassword || !reNewPassword) {
 				this.$store.dispatch('alert/set', {
 					text: 'One or more fields are missing',
-					error: true
+					error: true,
 				});
 				return;
 			}
 			if (newPassword !== reNewPassword) {
 				this.$store.dispatch('alert/set', {
 					text: 'Passwords don\'t match',
-					error: true
+					error: true,
 				});
 				return;
 			}
 
 			const response = await this.$store.dispatch('auth/changePassword', {
 				password,
-				newPassword
+				newPassword,
 			});
 
 			if (response) {
@@ -131,13 +151,13 @@ export default {
 			this.$buefy.dialog.confirm({
 				type: 'is-danger',
 				message: 'Are you sure you want to regenerate your API key? Previously generated API keys will stop working. Make sure to write the new key down as this is the only time it will be displayed to you.',
-				onConfirm: () => this.requestNewAPIKey()
+				onConfirm: () => this.requestNewAPIKey(),
 			});
 		},
 		async requestNewAPIKey() {
-			const response = await this.$store.dispatch('auth/requestAPIKey');		
+			const response = await this.$store.dispatch('auth/requestAPIKey');
 			this.$buefy.toast.open(response.message);
-		}
-	}
+		},
+	},
 };
 </script>
diff --git a/src/site/pages/dashboard/admin/user/_id.vue b/src/site/pages/dashboard/admin/user/_id.vue
index 8c73037..1755b89 100644
--- a/src/site/pages/dashboard/admin/user/_id.vue
+++ b/src/site/pages/dashboard/admin/user/_id.vue
@@ -9,40 +9,51 @@
 					<Sidebar />
 				</div>
 				<div class="column">
-					<h2 class="subtitle">User details</h2>
+					<h2 class="subtitle">
+						User details
+					</h2>
 					<hr>
 
-					<b-field label="User Id"
+					<b-field
+						label="User Id"
 						horizontal>
 						<span>{{ user.id }}</span>
 					</b-field>
 
-					<b-field label="Username"
+					<b-field
+						label="Username"
 						horizontal>
 						<span>{{ user.username }}</span>
 					</b-field>
 
-					<b-field label="Enabled"
+					<b-field
+						label="Enabled"
 						horizontal>
 						<span>{{ user.enabled }}</span>
 					</b-field>
 
-					<b-field label="Registered"
+					<b-field
+						label="Registered"
 						horizontal>
 						<span><timeago :since="user.createdAt" /></span>
 					</b-field>
 
-					<b-field label="Files"
+					<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>
+						<button
+							class="button is-danger"
+							@click="promptDisableUser">
+							Disable user
+						</button>
 					</div>
 
-					<Grid v-if="files.length"
+					<Grid
+						v-if="files.length"
 						:files="files" />
 				</div>
 			</div>
@@ -57,14 +68,14 @@ import Grid from '~/components/grid/Grid.vue';
 export default {
 	components: {
 		Sidebar,
-		Grid
+		Grid,
 	},
 	middleware: ['auth', 'admin'],
 	data() {
 		return {
 			options: {},
 			files: null,
-			user: null
+			user: null,
 		};
 	},
 	async asyncData({ $axios, route }) {
@@ -72,13 +83,13 @@ export default {
 			const response = await $axios.$get(`/admin/users/${route.params.id}`);
 			return {
 				files: response.files ? response.files : null,
-				user: response.user ? response.user : null
+				user: response.user ? response.user : null,
 			};
 		} catch (error) {
 			console.error(error);
 			return {
 				files: null,
-				user: null
+				user: null,
 			};
 		}
 	},
@@ -87,15 +98,15 @@ export default {
 			this.$buefy.dialog.confirm({
 				type: 'is-danger',
 				message: 'Are you sure you want to disable the account of the user that uploaded this file?',
-				onConfirm: () => this.disableUser()
+				onConfirm: () => this.disableUser(),
 			});
 		},
 		async disableUser() {
 			const response = await this.$axios.$post('admin/users/disable', {
-				id: this.user.id
+				id: this.user.id,
 			});
 			this.$buefy.toast.open(response.message);
-		}
-	}
+		},
+	},
 };
 </script>
diff --git a/src/site/pages/dashboard/admin/users.vue b/src/site/pages/dashboard/admin/users.vue
index 695cf0b..269946c 100644
--- a/src/site/pages/dashboard/admin/users.vue
+++ b/src/site/pages/dashboard/admin/users.vue
@@ -1,3 +1,143 @@
+<template>
+	<section class="section is-fullheight dashboard">
+		<div class="container">
+			<div class="columns">
+				<div class="column is-narrow">
+					<Sidebar />
+				</div>
+				<div class="column">
+					<h2 class="subtitle">
+						Manage your users
+					</h2>
+					<hr>
+
+					<div class="view-container">
+						<b-table
+							:data="users || []"
+							:mobile-cards="true">
+							<template slot-scope="props">
+								<b-table-column
+									field="id"
+									label="Id"
+									centered>
+									{{ props.row.id }}
+								</b-table-column>
+
+								<b-table-column
+									field="username"
+									label="Username"
+									centered>
+									<nuxt-link :to="`/dashboard/admin/user/${props.row.id}`">
+										{{ props.row.username }}
+									</nuxt-link>
+								</b-table-column>
+
+								<b-table-column
+									field="enabled"
+									label="Enabled"
+									centered>
+									<b-switch
+										v-model="props.row.enabled"
+										@input="changeEnabledStatus(props.row)" />
+								</b-table-column>
+
+								<b-table-column
+									field="isAdmin"
+									label="Admin"
+									centered>
+									<b-switch
+										v-model="props.row.isAdmin"
+										@input="changeIsAdmin(props.row)" />
+								</b-table-column>
+
+								<b-table-column
+									field="purge"
+									centered>
+									<button
+										class="button is-primary"
+										@click="promptPurgeFiles(props.row)">
+										Purge files
+									</button>
+								</b-table-column>
+							</template>
+							<template slot="empty">
+								<div class="has-text-centered">
+									<i class="icon-misc-mood-sad" />
+								</div>
+								<div class="has-text-centered">
+									Nothing here
+								</div>
+							</template>
+							<template slot="footer">
+								<div class="has-text-right">
+									{{ users.length }} users
+								</div>
+							</template>
+						</b-table>
+					</div>
+				</div>
+			</div>
+		</div>
+	</section>
+</template>
+
+<script>
+import Sidebar from '~/components/sidebar/Sidebar.vue';
+
+export default {
+	components: {
+		Sidebar,
+	},
+	middleware: ['auth', 'admin'],
+	data() {
+		return {
+			users: [],
+		};
+	},
+	computed: {
+		config() {
+			return this.$store.state.config;
+		},
+	},
+	metaInfo() {
+		return { title: 'Uploads' };
+	},
+	mounted() {
+		this.getUsers();
+	},
+	methods: {
+		async getUsers() {
+			const response = await this.$axios.$get('admin/users');
+			this.users = response.users;
+		},
+		async changeEnabledStatus(row) {
+			const response = await this.$axios.$post(`admin/users/${row.enabled ? 'enable' : 'disable'}`, {
+				id: row.id,
+			});
+			this.$buefy.toast.open(response.message);
+		},
+		async changeIsAdmin(row) {
+			const response = await this.$axios.$post(`admin/users/${row.isAdmin ? 'promote' : 'demote'}`, {
+				id: row.id,
+			});
+			this.$buefy.toast.open(response.message);
+		},
+		promptPurgeFiles(row) {
+			this.$buefy.dialog.confirm({
+				message: 'Are you sure you want to delete this user\'s files?',
+				onConfirm: () => this.purgeFiles(row),
+			});
+		},
+		async purgeFiles(row) {
+			const response = await this.$axios.$post('admin/users/purge', {
+				id: row.id,
+			});
+			this.$buefy.toast.open(response.message);
+		},
+	},
+};
+</script>
+
 <style lang="scss" scoped>
 	@import '~/assets/styles/_colors.scss';
 	div.view-container {
@@ -107,9 +247,6 @@
 	}
 
 	div.column > h2.subtitle { padding-top: 1px; }
-</style>
-<style lang="scss">
-	@import '~/assets/styles/_colors.scss';
 
 	.b-table {
 		.table-wrapper {
@@ -118,130 +255,3 @@
 		}
 	}
 </style>
-
-
-<template>
-	<section class="section is-fullheight dashboard">
-		<div class="container">
-			<div class="columns">
-				<div class="column is-narrow">
-					<Sidebar />
-				</div>
-				<div class="column">
-					<h2 class="subtitle">Manage your users</h2>
-					<hr>
-
-					<div class="view-container">
-						<b-table
-							:data="users || []"
-							:mobile-cards="true">
-							<template slot-scope="props">
-								<b-table-column field="id"
-									label="Id"
-									centered>
-									{{ props.row.id }}
-								</b-table-column>
-
-								<b-table-column field="username"
-									label="Username"
-									centered>
-									<nuxt-link :to="`/dashboard/admin/user/${props.row.id}`">{{ props.row.username }}</nuxt-link>
-								</b-table-column>
-
-								<b-table-column field="enabled"
-									label="Enabled"
-									centered>
-									<b-switch v-model="props.row.enabled"
-										@input="changeEnabledStatus(props.row)" />
-								</b-table-column>
-
-								<b-table-column field="isAdmin"
-									label="Admin"
-									centered>
-									<b-switch v-model="props.row.isAdmin"
-										@input="changeIsAdmin(props.row)" />
-								</b-table-column>
-
-								<b-table-column field="purge"
-									centered>
-									<button class="button is-primary"
-										@click="promptPurgeFiles(props.row)">Purge files</button>
-								</b-table-column>
-							</template>
-							<template slot="empty">
-								<div class="has-text-centered">
-									<i class="icon-misc-mood-sad" />
-								</div>
-								<div class="has-text-centered">
-									Nothing here
-								</div>
-							</template>
-							<template slot="footer">
-								<div class="has-text-right">
-									{{ users.length }} users
-								</div>
-							</template>
-						</b-table>
-					</div>
-				</div>
-			</div>
-		</div>
-	</section>
-</template>
-
-<script>
-import Sidebar from '~/components/sidebar/Sidebar.vue';
-
-export default {
-	components: {
-		Sidebar
-	},
-	middleware: ['auth', 'admin'],
-	data() {
-		return {
-			users: []
-		};
-	},
-	computed: {
-		config() {
-			return this.$store.state.config;
-		}
-	},
-	metaInfo() {
-		return { title: 'Uploads' };
-	},
-	mounted() {
-		this.getUsers();
-	},
-	methods: {
-		async getUsers() {
-			const response = await this.$axios.$get(`admin/users`);
-			this.users = response.users;
-		},
-		async changeEnabledStatus(row) {
-			const response = await this.$axios.$post(`admin/users/${row.enabled ? 'enable' : 'disable'}`, {
-				id: row.id
-			});
-			this.$buefy.toast.open(response.message);
-		},
-		async changeIsAdmin(row) {
-			const response = await this.$axios.$post(`admin/users/${row.isAdmin ? 'promote' : 'demote'}`, {
-				id: row.id
-			});
-			this.$buefy.toast.open(response.message);
-		},
-		promptPurgeFiles(row) {
-			this.$buefy.dialog.confirm({
-				message: 'Are you sure you want to delete this user\'s files?',
-				onConfirm: () => this.purgeFiles(row)
-			});
-		},
-		async purgeFiles(row) {
-			const response = await this.$axios.$post(`admin/users/purge`, {
-				id: row.id
-			});
-			this.$buefy.toast.open(response.message);
-		}
-	}
-};
-</script>
diff --git a/src/site/pages/dashboard/albums/_id.vue b/src/site/pages/dashboard/albums/_id.vue
index 0d3bd68..33b0319 100644
--- a/src/site/pages/dashboard/albums/_id.vue
+++ b/src/site/pages/dashboard/albums/_id.vue
@@ -14,7 +14,7 @@
 						<div class="level-left">
 							<div class="level-item">
 								<h1 class="title is-3">
-									{{ name }}
+									{{ images.name }}
 								</h1>
 							</div>
 							<div class="level-item">
@@ -45,7 +45,7 @@
 
 					<Grid
 						v-if="totalFiles"
-						:files="album.files"
+						:files="images.files"
 						:total="totalFiles">
 						<template v-slot:pagination>
 							<b-pagination
@@ -83,7 +83,7 @@ export default {
 		Grid,
 	},
 	middleware: ['auth', ({ route, store }) => {
-		store.dispatch('album/fetchById', { id: route.params.id });
+		store.dispatch('images/fetchByAlbumId', { id: route.params.id });
 	}],
 	data() {
 		return {
@@ -92,12 +92,11 @@ export default {
 	},
 	computed: {
 		...mapGetters({
-			totalFiles: 'album/getTotalFiles',
-			shouldPaginate: 'album/shouldPaginate',
-			limit: 'album/getLimit',
-			name: 'album/getName',
+			totalFiles: 'images/getTotalFiles',
+			shouldPaginate: 'images/shouldPaginate',
+			limit: 'images/getLimit',
 		}),
-		...mapState(['album']),
+		...mapState(['images']),
 		id() {
 			return this.$route.params.id;
 		},
@@ -110,7 +109,7 @@ export default {
 	},
 	methods: {
 		...mapActions({
-			fetch: 'album/fetchById',
+			fetch: 'images/fetchByAlbumId',
 		}),
 		fetchPaginate() {
 			this.fetch({ id: this.id, page: this.current });
diff --git a/src/site/pages/dashboard/index.vue b/src/site/pages/dashboard/index.vue
index 89f0fac..71df7eb 100644
--- a/src/site/pages/dashboard/index.vue
+++ b/src/site/pages/dashboard/index.vue
@@ -9,7 +9,9 @@
 					<nav class="level">
 						<div class="level-left">
 							<div class="level-item">
-								<h2 class="subtitle">Your uploaded files</h2>
+								<h2 class="subtitle">
+									Your uploaded files
+								</h2>
 							</div>
 						</div>
 						<div class="level-right">
@@ -17,7 +19,7 @@
 								<b-field>
 									<b-input
 										placeholder="Search"
-										type="search"/>
+										type="search" />
 									<p class="control">
 										<button
 											outlined
@@ -28,15 +30,17 @@
 								</b-field>
 							</div>
 						</div>
-					</nav>					
+					</nav>
 					<hr>
 
 					<b-loading :active="images.isLoading" />
 
-					<Grid v-if="totalFiles"
+					<Grid
+						v-if="totalFiles && !isLoading"
 						:files="images.files"
 						:enableSearch="false"
-						class="grid">
+						class="grid"
+						@delete="handleFileDelete">
 						<template v-slot:pagination>
 							<b-pagination
 								v-if="shouldPaginate"
@@ -70,38 +74,44 @@ import Grid from '~/components/grid/Grid.vue';
 export default {
 	components: {
 		Sidebar,
-		Grid
+		Grid,
 	},
 	middleware: ['auth', ({ store }) => {
 		store.dispatch('images/fetch');
 	}],
 	data() {
 		return {
-			current: 1
+			current: 1,
+			isLoading: false,
 		};
 	},
 	computed: {
-		...mapGetters({ 
+		...mapGetters({
 			totalFiles: 'images/getTotalFiles',
 			shouldPaginate: 'images/shouldPaginate',
-			limit: 'images/getLimit'
+			limit: 'images/getLimit',
 		}),
-		...mapState(['images'])
+		...mapState(['images']),
 	},
 	metaInfo() {
 		return { title: 'Uploads' };
 	},
 	watch: {
-		current: 'fetchPaginate'
+		current: 'fetchPaginate',
 	},
 	methods: {
 		...mapActions({
-			fetch: 'images/fetch'
+			fetch: 'images/fetch',
 		}),
-		fetchPaginate() {
-			this.fetch(this.current);
-		}
-	}
+		async fetchPaginate() {
+			this.isLoading = true;
+			await this.fetch(this.current);
+			this.isLoading = false;
+		},
+		handleFileDelete(file) {
+			console.log('yep!', file.id);
+		},
+	},
 };
 </script>
 
diff --git a/src/site/pages/login.vue b/src/site/pages/login.vue
index cef0868..9e5658d 100644
--- a/src/site/pages/login.vue
+++ b/src/site/pages/login.vue
@@ -10,13 +10,15 @@
 			<div class="columns">
 				<div class="column is-4 is-offset-4">
 					<b-field>
-						<b-input v-model="username"
+						<b-input
+							v-model="username"
 							type="text"
 							placeholder="Username"
 							@keyup.enter.native="login" />
 					</b-field>
 					<b-field>
-						<b-input v-model="password"
+						<b-input
+							v-model="password"
 							type="password"
 							placeholder="Password"
 							password-reveal
@@ -24,12 +26,18 @@
 					</b-field>
 
 					<p class="control has-addons is-pulled-right">
-						<router-link v-if="config.userAccounts"
+						<router-link
+							v-if="config.userAccounts"
 							to="/register"
-							class="is-text">Don't have an account?</router-link>
+							class="is-text">
+							Don't have an account?
+						</router-link>
 						<span v-else>Registration is closed at the moment</span>
-						<button class="button is-primary big ml1"
-							@click="login">login</button>
+						<button
+							class="button is-primary big ml1"
+							@click="login">
+							login
+						</button>
 					</p>
 				</div>
 			</div>
@@ -73,7 +81,7 @@ export default {
 			password: null,
 			mfaCode: null,
 			isMfaModalActive: false,
-			isLoading: false
+			isLoading: false,
 		};
 	},
 	computed: mapState(['config', 'auth']),
@@ -87,21 +95,27 @@ export default {
 	},
 	methods: {
 		async login() {
-			if (this.auth.isLoading) return;
+			if (this.isLoading) return;
 
 			const { username, password } = this;
 			if (!username || !password) {
 				this.$store.dispatch('alert/set', {
 					text: 'Please fill both fields before attempting to log in.',
-					error: true
+					error: true,
 				});
 				return;
 			}
 
-			await this.$store.dispatch('auth/login', { username, password });
-
-			if (this.auth.loggedIn) {
-				this.redirect();
+			try {
+				this.isLoading = true;
+				await this.$store.dispatch('auth/login', { username, password });
+				if (this.auth.loggedIn) {
+					this.redirect();
+				}
+			} catch (e) {
+				this.$store.dispatch('alert/set', { text: e.message, error: true }, { root: true });
+			} finally {
+				this.isLoading = false;
 			}
 		},
 		/*
@@ -118,14 +132,14 @@ export default {
 					this.isLoading = false;
 					this.$onPromiseError(err);
 				});
-		},*/
+		}, */
 		redirect() {
 			if (typeof this.$route.query.redirect !== 'undefined') {
 				this.$router.push(this.$route.query.redirect);
 				return;
 			}
 			this.$router.push('/dashboard');
-		}
-	}
+		},
+	},
 };
 </script>
diff --git a/src/site/plugins/notifier.js b/src/site/plugins/notifier.js
index bcf7878..f37b96e 100644
--- a/src/site/plugins/notifier.js
+++ b/src/site/plugins/notifier.js
@@ -1,7 +1,7 @@
 export default ({ store }, inject) => {
 	inject('notifier', {
 		showMessage({ content = '', type = '' }) {
-			store.commit('alert/set', { content, color });
-		}
+			store.commit('alert/set', { content, type });
+		},
 	});
 };
-- 
cgit v1.2.3


From 5d61b4d000a114857e4519be25c5834f510d450f Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Tue, 7 Jul 2020 02:50:03 +0300
Subject: feat: refactor waterfall to be more efficient

---
 src/site/components/grid/Grid.vue                  |   5 +
 src/site/components/grid/waterfall/Waterfall.vue   | 266 ++++++++-------------
 .../components/grid/waterfall/WaterfallItem.vue    |  72 ------
 3 files changed, 99 insertions(+), 244 deletions(-)

(limited to 'src/site')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index e6a8c64..f98108e 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -25,6 +25,7 @@
 				v-if="showWaterfall"
 				:gutterWidth="10"
 				:gutterHeight="4"
+				:options="{fitWidth: true}"
 				:itemWidth="width"
 				:items="gridFiles">
 				<template v-slot="{item}">
@@ -451,6 +452,10 @@ div.actions {
 	display: none;
 }
 
+.waterfall {
+	margin: 0 auto;
+}
+
 .waterfall-item:hover {
 	div.actions {
 		opacity: 1;
diff --git a/src/site/components/grid/waterfall/Waterfall.vue b/src/site/components/grid/waterfall/Waterfall.vue
index a83a275..79a330a 100644
--- a/src/site/components/grid/waterfall/Waterfall.vue
+++ b/src/site/components/grid/waterfall/Waterfall.vue
@@ -1,51 +1,20 @@
 <template>
-	<div class="waterfall">
-		<WaterfallItem v-for="(item, index) in items" :key="item.id" :ref="`item-${item.id}`" :width="itemWidth">
+	<div ref="waterfall" class="waterfall">
+		<WaterfallItem
+			v-for="(item, index) in items"
+			:key="item.id"
+			:style="{ width: `${itemWidth}px`, marginBottom: `${gutterHeight}px` }"
+			:width="itemWidth">
 			<slot :item="item" />
 		</WaterfallItem>
 	</div>
 </template>
-
 <script>
 import WaterfallItem from './WaterfallItem.vue';
 
-const quickSort = (arr, type) => {
-	const left = [];
-	const right = [];
-	if (arr.length <= 1) {
-		return arr;
-	}
-	const povis = arr[0];
-	for (let i = 1; i < arr.length; i++) {
-		if (arr[i][type] < povis[type]) {
-			left.push(arr[i]);
-		} else {
-			right.push(arr[i]);
-		}
-	}
-	return quickSort(left, type).concat(povis, quickSort(right, type));
-};
-
-const getMinIndex = (arr) => {
-	let pos = 0;
-	for (let i = 0; i < arr.length; i++) {
-		if (arr[pos] > arr[i]) {
-			pos = i;
-		}
-	}
-	return pos;
-};
-
-const _ = {
-	on(el, type, func, capture = false) {
-		el.addEventListener(type, func, capture);
-	},
-	off(el, type, func, capture = false) {
-		el.removeEventListener(type, func, capture);
-	},
-};
-
-const sum = (arr) => arr.reduce((acc, val) => acc + val, 0);
+const isBrowser = typeof window !== 'undefined';
+const Masonry = isBrowser ? window.Masonry || require('masonry-layout') : null;
+const imagesloaded = isBrowser ? require('imagesloaded') : null;
 
 export default {
 	name: 'Waterfall',
@@ -53,159 +22,112 @@ export default {
 		WaterfallItem,
 	},
 	props: {
-		gutterWidth: {
-			type: Number,
-			default: 0,
-		},
-		gutterHeight: {
-			type: Number,
-			default: 0,
-		},
-		resizable: {
-			type: Boolean,
-			default: true,
-		},
-		align: {
-			type: String,
-			default: 'center',
-		},
-		fixWidth: {
-			type: Number,
-			default: 0,
-		},
-		minCol: {
-			type: Number,
-			default: 1,
-		},
-		maxCol: {
-			type: Number,
-			default: 0,
+		options: {
+			type: Object,
+			default: () => {},
 		},
-		percent: {
+		items: {
 			type: Array,
-			default: null,
+			default: () => [],
 		},
 		itemWidth: {
 			type: Number,
 			default: 150,
 		},
-		items: {
-			type: Array,
-			default: () => [],
+		gutterWidth: {
+			type: Number,
+			default: 10,
 		},
-	},
-	data() {
-		return {
-			timer: null,
-			colNum: 0,
-			lastWidth: 0,
-			percentWidthArr: [],
-			readyChildCount: 0,
-		};
-	},
-	watch: {
-		items() {
-			this.$nextTick(() => this.render('watch'));
+		gutterHeight: {
+			type: Number,
+			default: 4,
 		},
 	},
-	created() {
-		this.$on('itemRender', () => {
-			if (this.timer) {
-				clearTimeout(this.timer);
-			}
-			this.timer = setTimeout(() => {
-				this.render('created');
-			}, 0);
-		});
-	},
 	mounted() {
-		this.resizeHandle();
-		this.$watch('resizable', this.resizeHandle);
+		this.initializeMasonry();
+		this.imagesLoaded();
+	},
+	updated() {
+		this.performLayout();
+		this.imagesLoaded();
 	},
-	beforeDestroy() {
-		this.$off('itemRender');
-		_.off(window, 'resize', this.render);
+	unmounted() {
+		this.masonry.destroy();
 	},
 	methods: {
-		calulate(arr) {
-			const pageWidth = this.fixWidth ? this.fixWidth : this.$el.offsetWidth;
-			// 百分比布局计算
-			if (this.percent) {
-				this.colNum = this.percent.length;
-				const total = sum(this.percent);
-				this.percentWidthArr = this.percent.map((value) => (value / total) * pageWidth);
-				this.lastWidth = 0;
-			// 正常布局计算
-			} else {
-				this.colNum = parseInt(pageWidth / (arr.width + this.gutterWidth), 10);
-				if (this.minCol && this.colNum < this.minCol) {
-					this.colNum = this.minCol;
-					this.lastWidth = 0;
-				} else if (this.maxCol && this.colNum > this.maxCol) {
-					this.colNum = this.maxCol;
-					this.lastWidth = pageWidth - (arr.width + this.gutterWidth) * this.colNum + this.gutterWidth;
-				} else {
-					this.lastWidth = pageWidth - (arr.width + this.gutterWidth) * this.colNum + this.gutterWidth;
-				}
+		imagesLoaded() {
+			const node = this.$refs.waterfall;
+			imagesloaded(
+				node,
+				() => {
+					this.masonry.layout();
+				},
+			);
+		},
+		performLayout() {
+			const diff = this.diffDomChildren();
+			if (diff.removed.length > 0) {
+				this.masonry.remove(diff.removed);
+				this.masonry.reloadItems();
+			}
+			if (diff.appended.length > 0) {
+				this.masonry.appended(diff.appended);
+				this.masonry.reloadItems();
 			}
+			if (diff.prepended.length > 0) {
+				this.masonry.prepended(diff.prepended);
+			}
+			if (diff.moved.length > 0) {
+				this.masonry.reloadItems();
+			}
+			this.masonry.layout();
 		},
-		resizeHandle() {
-			if (this.resizable) {
-				_.on(window, 'resize', this.render, false);
-			} else {
-				_.off(window, 'resize', this.render, false);
+		diffDomChildren() {
+			const oldChildren = this.domChildren.filter((element) => !!element.parentNode);
+			const newChildren = this.getNewDomChildren();
+			const removed = oldChildren.filter((oldChild) => !newChildren.includes(oldChild));
+			const domDiff = newChildren.filter((newChild) => !oldChildren.includes(newChild));
+			const prepended = domDiff.filter((newChild, index) => newChildren[index] === newChild);
+			const appended = domDiff.filter((el) => !prepended.includes(el));
+			let moved = [];
+			if (removed.length === 0) {
+				moved = oldChildren.filter((child, index) => index !== newChildren.indexOf(child));
 			}
+			this.domChildren = newChildren;
+			return {
+				old: oldChildren,
+				new: newChildren,
+				removed,
+				appended,
+				prepended,
+				moved,
+			};
 		},
-		render(context) {
-			console.log(context);
-			if (!this.items) return;
-			// 重新排序
-			let childArr = [];
-			childArr = this.items.map(({ id }) => this.$refs[`item-${id}`][0].getMeta());
-			childArr = quickSort(childArr, 'order');
-			// 计算列数
-			this.calulate(childArr[0]);
-			const offsetArr = Array(this.colNum).fill(0);
-			// 渲染
-			childArr.forEach((child) => {
-				const position = getMinIndex(offsetArr);
-				// 百分比布局渲染
-				if (this.percent) {
-					let left = 0;
-					child.el.style.width = `${this.percentWidthArr[position]}px`;
-					if (position === 0) {
-						left = 0;
-					} else {
-						for (let i = 0; i < position; i++) {
-							left += this.percentWidthArr[i];
-						}
-					}
-					child.el.style.left = `${left}px`;
-				// 正常布局渲染
-				} else {
-					if (this.align === 'left') { // eslint-disable-line no-lonely-if
-						child.el.style.left = `${position * (child.width + this.gutterWidth)}px`;
-					} else if (this.align === 'right') {
-						child.el.style.left = `${position * (child.width + this.gutterWidth) + this.lastWidth}px`;
-					} else {
-						child.el.style.left = `${position * (child.width + this.gutterWidth) + this.lastWidth / 2}px`;
-					}
-				}
-				if (child.height === 0) {
-					return;
-				}
-				child.el.style.top = `${offsetArr[position]}px`;
-				offsetArr[position] += child.height + this.gutterHeight;
-				this.$el.style.height = `${Math.max(...offsetArr)}px`;
-			});
-			this.$emit('rendered', this);
+		initializeMasonry() {
+			if (!this.masonry) {
+				this.masonry = new Masonry(
+					this.$refs.waterfall,
+					{
+						columnWidth: this.itemWidth,
+						gutter: this.gutterWidth,
+						...this.options,
+					},
+				);
+				this.domChildren = this.getNewDomChildren();
+			}
+		},
+		getNewDomChildren() {
+			const node = this.$refs.waterfall;
+			const children = this.options && this.options.itemSelector
+				? node.querySelectorAll(this.options.itemSelector) : node.children;
+			return Array.prototype.slice.call(children);
 		},
 	},
 };
 </script>
 
-<style>
-	.waterfall {
-		position: relative;
-	}
+<style lang="scss" scoped>
+.wfi {
+
+}
 </style>
diff --git a/src/site/components/grid/waterfall/WaterfallItem.vue b/src/site/components/grid/waterfall/WaterfallItem.vue
index a49c58c..c5cade1 100644
--- a/src/site/components/grid/waterfall/WaterfallItem.vue
+++ b/src/site/components/grid/waterfall/WaterfallItem.vue
@@ -3,80 +3,8 @@
 		<slot />
 	</div>
 </template>
-
 <script>
-import imagesLoaded from 'imagesloaded';
-
 export default {
 	name: 'WaterfallItem',
-	props: {
-		order: {
-			type: Number,
-			default: 0,
-		},
-		width: {
-			type: Number,
-			default: 150,
-		},
-		video: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	data() {
-		return {
-			itemWidth: 0,
-			height: 0,
-		};
-	},
-	created() {
-		this.$watch(() => this.height, this.emit);
-	},
-	mounted() {
-		this.$el.style.display = 'none';
-		this.$el.style.width = `${this.width}px`;
-		this.emit();
-		if (this.video) {
-			// find first video object
-			const videoEl = this.$slots.default.find((e) => e.tag?.toLowerCase() === 'video');
-			const el = videoEl.elm;
-
-			// add event listener for video loaded
-			el.onloadeddata = () => {
-				this.$el.style.left = '-9999px';
-				this.$el.style.top = '-9999px';
-				this.$el.style.display = 'block';
-				this.height = el.offsetHeight + 5;
-				this.itemWidth = el.offsetWidth;
-			};
-		} else {
-			imagesLoaded(this.$el, () => {
-				this.$el.style.left = '-9999px';
-				this.$el.style.top = '-9999px';
-				this.$el.style.display = 'block';
-				this.height = this.$el.offsetHeight;
-				this.itemWidth = this.$el.offsetWidth;
-			});
-		}
-	},
-	methods: {
-		emit() {
-			this.$parent.$emit('itemRender');
-		},
-		getMeta() {
-			return {
-				el: this.$el,
-				height: this.height,
-				width: this.itemWidth,
-				order: this.order,
-			};
-		},
-	},
 };
 </script>
-
-<style scoped>
-	.waterfall-item {
-		position: absolute;
-	}
-</style>
-- 
cgit v1.2.3


From 1a8b6602e094289a4f477c33e432e0f5e1587b45 Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Wed, 8 Jul 2020 03:13:51 +0300
Subject: refactor: change uploader component to use vuex

---
 src/site/components/uploader/Uploader.vue | 74 ++++++++++++++++++-------------
 src/site/store/albums.js                  | 19 +++++---
 2 files changed, 54 insertions(+), 39 deletions(-)

(limited to 'src/site')

diff --git a/src/site/components/uploader/Uploader.vue b/src/site/components/uploader/Uploader.vue
index 1b03ff8..c7be372 100644
--- a/src/site/components/uploader/Uploader.vue
+++ b/src/site/components/uploader/Uploader.vue
@@ -1,7 +1,9 @@
 <template>
-	<div :class="{ 'has-files': alreadyAddedFiles }"
+	<div
+		:class="{ 'has-files': alreadyAddedFiles }"
 		class="uploader-wrapper">
-		<b-select v-if="loggedIn"
+		<b-select
+			v-if="loggedIn"
 			v-model="selectedAlbum"
 			placeholder="Upload to album"
 			size="is-medium"
@@ -13,7 +15,8 @@
 				{{ album.name }}
 			</option>
 		</b-select>
-		<dropzone v-if="showDropzone"
+		<dropzone
+			v-if="showDropzone"
 			id="dropzone"
 			ref="el"
 			:options="dropzoneOptions"
@@ -25,16 +28,22 @@
 			Add or drop more files
 		</label>
 
-		<div id="template"
+		<div
+			id="template"
 			ref="template">
 			<div class="dz-preview dz-file-preview">
 				<div class="dz-details">
-					<div class="dz-filename"><span data-dz-name /></div>
-					<div class="dz-size"><span data-dz-size /></div>
+					<div class="dz-filename">
+						<span data-dz-name />
+					</div>
+					<div class="dz-size">
+						<span data-dz-size />
+					</div>
 				</div>
 				<div class="result">
 					<div class="openLink">
-						<a class="link"
+						<a
+							class="link"
 							target="_blank">
 							Link
 						</a>
@@ -43,14 +52,16 @@
 				<div class="error">
 					<div>
 						<span>
-							<span class="error-message"
+							<span
+								class="error-message"
 								data-dz-errormessage />
 							<i class="icon-web-warning" />
 						</span>
 					</div>
 				</div>
 				<div class="dz-progress">
-					<span class="dz-upload"
+					<span
+						class="dz-upload"
 						data-dz-uploadprogress />
 				</div>
 				<!--
@@ -64,6 +75,8 @@
 </template>
 
 <script>
+import { mapState, mapGetters } from 'vuex';
+
 import Dropzone from 'nuxt-dropzone';
 import '~/assets/styles/dropzone.scss';
 
@@ -75,20 +88,15 @@ export default {
 			files: [],
 			dropzoneOptions: {},
 			showDropzone: false,
-			albums: [],
-			selectedAlbum: null
+			selectedAlbum: null,
 		};
 	},
 	computed: {
-		config() {
-			return this.$store.state.config;
-		},
-		token() {
-			return this.$store.state.token;
-		},
-		loggedIn() {
-			return this.$store.state.loggedIn;
-		}
+		...mapState({
+			config: (state) => state.config,
+			albums: (state) => state.albums.tinyDetails,
+		}),
+		...mapGetters({ loggedIn: 'auth/isLoggedIn', token: 'auth/getToken' }),
 	},
 	watch: {
 		loggedIn() {
@@ -96,7 +104,7 @@ export default {
 		},
 		selectedAlbum() {
 			this.updateDropzoneConfig();
-		}
+		},
 	},
 	mounted() {
 		this.dropzoneOptions = {
@@ -119,7 +127,7 @@ export default {
 			maxFilesize: this.config.maxFileSize,
 			previewTemplate: this.$refs.template.innerHTML,
 			dictDefaultMessage: 'Drag & Drop your files or click to browse',
-			headers: { Accept: 'application/vnd.lolisafe.json' }
+			headers: { Accept: 'application/vnd.lolisafe.json' },
 		};
 		this.showDropzone = true;
 		if (this.loggedIn) this.getAlbums();
@@ -129,8 +137,11 @@ export default {
 			Get all available albums so the user can upload directly to one (or several soon™) of them.
 		*/
 		async getAlbums() {
-			const response = await this.$axios.$get(`albums/dropdown`);
-			this.albums = response.albums;
+			try {
+				await this.$store.dispatch('albums/getTinyDetails');
+			} catch (e) {
+				this.$store.dispatch('alert/set', { text: e.message, error: true }, { root: true });
+			}
 			this.updateDropzoneConfig();
 		},
 
@@ -143,14 +154,14 @@ export default {
 			this.$refs.el.setOption('headers', {
 				Accept: 'application/vnd.lolisafe.json',
 				Authorization: this.token ? `Bearer ${this.token}` : '',
-				albumId: this.selectedAlbum ? this.selectedAlbum : null
+				albumId: this.selectedAlbum ? this.selectedAlbum : null,
 			});
 		},
 
 		/*
 			Dropzone stuff
 		*/
-		dropzoneFilesAdded(files) {
+		dropzoneFilesAdded() {
 			this.alreadyAddedFiles = true;
 		},
 		dropzoneSuccess(file, response) {
@@ -159,7 +170,7 @@ export default {
 		dropzoneError(file, message, xhr) {
 			this.$store.dispatch('alert', {
 				text: 'There was an error uploading this file. Check the console.',
-				error: true
+				error: true,
 			});
 			console.error(file, message, xhr);
 		},
@@ -170,12 +181,11 @@ export default {
 					original: file.name,
 					size: file.size,
 					type: file.type,
-					count: file.upload.totalChunkCount
-				}]
+					count: file.upload.totalChunkCount,
+				}],
 			});
 
 			this.processResult(file, data);
-			this.$forceUpdate();
 			return done();
 		},
 
@@ -194,8 +204,8 @@ export default {
 				this.$clipboard(response.url);
 			});
 			*/
-		}
-	}
+		},
+	},
 };
 </script>
 <style lang="scss" scoped>
diff --git a/src/site/store/albums.js b/src/site/store/albums.js
index 2b4ac60..8441182 100644
--- a/src/site/store/albums.js
+++ b/src/site/store/albums.js
@@ -5,6 +5,7 @@ export const state = () => ({
 	isListLoading: false,
 	albumDetails: {},
 	expandedAlbums: [],
+	tinyDetails: [],
 });
 
 export const getters = {
@@ -21,7 +22,6 @@ export const actions = {
 
 		return response;
 	},
-
 	async fetchDetails({ commit }, albumId) {
 		const response = await this.$axios.$get(`album/${albumId}/links`);
 
@@ -34,7 +34,6 @@ export const actions = {
 
 		return response;
 	},
-
 	async createAlbum({ commit }, name) {
 		const response = await this.$axios.$post('album/new', { name });
 
@@ -42,7 +41,6 @@ export const actions = {
 
 		return response;
 	},
-
 	async deleteAlbum({ commit }, albumId) {
 		const response = await this.$axios.$delete(`album/${albumId}`);
 
@@ -50,7 +48,6 @@ export const actions = {
 
 		return response;
 	},
-
 	async createLink({ commit }, albumId) {
 		const response = await this.$axios.$post('album/link/new', { albumId });
 
@@ -58,7 +55,6 @@ export const actions = {
 
 		return response;
 	},
-
 	async updateLinkOptions({ commit }, { albumId, linkOpts }) {
 		const response = await this.$axios.$post('album/link/edit', {
 			identifier: linkOpts.identifier,
@@ -70,12 +66,18 @@ export const actions = {
 
 		return response;
 	},
-
 	async deleteLink({ commit }, { albumId, identifier }) {
 		const response = await this.$axios.$delete(`album/link/delete/${identifier}`);
 
 		commit('removeAlbumLink', { albumId, identifier });
 
+		return response;
+	},
+	async getTinyDetails({ commit }) {
+		const response = await this.$axios.$get('albums/dropdown');
+
+		commit('setTinyDetails', response);
+
 		return response;
 	},
 };
@@ -111,7 +113,7 @@ export const mutations = {
 	},
 	removeAlbumLink(state, { albumId, identifier }) {
 		const foundIndex = state.albumDetails[albumId].links.findIndex(({ identifier: id }) => id === identifier);
-		state.albumDetails[albumId].links.splice(foundIndex, 1);
+		if (foundIndex > -1) state.albumDetails[albumId].links.splice(foundIndex, 1);
 	},
 	toggleExpandedState(state, id) {
 		const foundIndex = state.expandedAlbums.indexOf(id);
@@ -121,4 +123,7 @@ export const mutations = {
 			state.expandedAlbums.push(id);
 		}
 	},
+	setTinyDetails(state, { albums }) {
+		state.tinyDetails = albums;
+	},
 };
-- 
cgit v1.2.3


From 15266378810d81704f8c9ece6ecf919526efacae Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Wed, 8 Jul 2020 03:15:07 +0300
Subject: feat: add new sidebar with mdi icons and active reactivity

---
 src/site/assets/styles/_colors.scss     |  11 ++++
 src/site/assets/styles/style.scss       |   8 +++
 src/site/components/navbar/Navbar.vue   |  14 +++--
 src/site/components/sidebar/Sidebar.vue | 107 ++++++++++++++++++--------------
 src/site/pages/logout.vue               |   8 +++
 src/site/store/auth.js                  |   1 +
 6 files changed, 98 insertions(+), 51 deletions(-)
 create mode 100644 src/site/pages/logout.vue

(limited to 'src/site')

diff --git a/src/site/assets/styles/_colors.scss b/src/site/assets/styles/_colors.scss
index 6693d8a..0bc7c5e 100644
--- a/src/site/assets/styles/_colors.scss
+++ b/src/site/assets/styles/_colors.scss
@@ -55,6 +55,17 @@ $loading-background: rgba(0, 0, 0, 0.8);
 $loading-background: rgba(40, 40, 40, 0.66);
 
 // dialogs
+$modal-card-title-color: $textColor;
 $modal-card-body-background-color: $background;
 $modal-card-head-background-color: $backgroundAccent;
+$modal-card-head-border-bottom: 1px solid rgba(255, 255, 255, 0.1098);
 $modal-card-foot-border-top: 1px solid rgba(255, 255, 255, 0.1098);
+
+// sidebar
+$sidebar-background: $base-1;
+$sidebar-box-shadow: none;
+
+//
+$menu-item-color: $textColor;
+$menu-item-hover-color: $textColorHighlight;
+$menu-item-active-background-color: $backgroundAccent;
diff --git a/src/site/assets/styles/style.scss b/src/site/assets/styles/style.scss
index 6c939b5..0ebba4c 100644
--- a/src/site/assets/styles/style.scss
+++ b/src/site/assets/styles/style.scss
@@ -12,6 +12,8 @@ $size-normal: 1rem;
 @import '../../../node_modules/bulma/bulma.sass';
 @import '../../../node_modules/buefy/src/scss/buefy.scss';
 
+@import '@mdi/font/css/materialdesignicons.css';
+
 html {
 	// font-size: 100%;
 	font-size: 14px;
@@ -336,3 +338,9 @@ table.table {
 .pagination a:hover {
 	text-decoration: none;
 }
+
+// fix control icons
+.control.has-icons-left .icon, .control.has-icons-right .icon {
+	height: 3rem;
+	padding-right: 1rem;
+}
diff --git a/src/site/components/navbar/Navbar.vue b/src/site/components/navbar/Navbar.vue
index 7fb2f22..fb78631 100644
--- a/src/site/components/navbar/Navbar.vue
+++ b/src/site/components/navbar/Navbar.vue
@@ -1,5 +1,6 @@
 <template>
-	<b-navbar :class="{ isWhite }"
+	<b-navbar
+		:class="{ isWhite }"
 		transparent>
 		<template slot="end">
 			<b-navbar-item tag="div">
@@ -71,24 +72,25 @@ export default {
 	props: {
 		isWhite: {
 			type: Boolean,
-			default: false
-		}
+			default: false,
+		},
 	},
 	data() {
 		return { hamburger: false };
 	},
 	computed: {
 		...mapGetters({ loggedIn: 'auth/isLoggedIn' }),
-		...mapState(['config'])
+		...mapState(['config']),
 	},
 	methods: {
 		async logOut() {
 			await this.$store.dispatch('auth/logout');
 			this.$router.replace('/login');
-		}
-	}
+		},
+	},
 };
 </script>
+
 <style lang="scss" scoped>
 	@import '~/assets/styles/_colors.scss';
 	nav.navbar {
diff --git a/src/site/components/sidebar/Sidebar.vue b/src/site/components/sidebar/Sidebar.vue
index 3cb8b43..5394fc6 100644
--- a/src/site/components/sidebar/Sidebar.vue
+++ b/src/site/components/sidebar/Sidebar.vue
@@ -1,63 +1,80 @@
 <template>
-	<div class="dashboard-menu">
-		<router-link to="/dashboard">
-			<i class="icon-com-pictures" />Files
-		</router-link>
-		<router-link to="/dashboard/albums">
-			<i class="icon-interface-window" />Albums
-		</router-link>
-		<router-link to="/dashboard/tags">
-			<i class="icon-ecommerce-tag-c" />Tags
-		</router-link>
-		<router-link to="/dashboard/account">
-			<i class="icon-user-alt" />Account
-		</router-link>
-		<template v-if="user && user.isAdmin">
-			<router-link to="/dashboard/admin/users">
-				<i class="icon-setting-gear-a" />Users
-			</router-link>
-			<!--
-			TODO: Dont wanna deal with this now
-			<router-link to="/dashboard/admin/settings">
-				<i class="icon-setting-gear-a" />Settings
-			</router-link>
-			-->
-		</template>
-	</div>
+	<b-menu class="dashboard-menu">
+		<b-menu-list label="Menu">
+			<b-menu-item
+				class="item"
+				icon="information-outline"
+				label="Dashboard"
+				tag="nuxt-link"
+				to="/dashboard"
+				exact />
+			<b-menu-item
+				class="item"
+				icon="image-multiple-outline"
+				label="Albums"
+				tag="nuxt-link"
+				to="/dashboard/albums"
+				exact />
+			<b-menu-item
+				class="item"
+				icon="tag-outline"
+				label="Tags"
+				tag="nuxt-link"
+				to="/dashboard/tags"
+				exact />
+			<b-menu-item icon="settings" expanded>
+				<template slot="label" slot-scope="props">
+					Administration
+					<b-icon class="is-pulled-right" :icon="props.expanded ? 'menu-down' : 'menu-up'" />
+				</template>
+				<b-menu-item icon="account" label="Users" tag="nuxt-link" to="/dashboard/admin/users" exact />
+				<b-menu-item icon="cog-outline" label="Settings" disabled />
+			</b-menu-item>
+			<b-menu-item
+				class="item"
+				icon="account-cog-outline"
+				label="My account"
+				tag="nuxt-link"
+				to="/dashboard/account"
+				exact />
+		</b-menu-list>
+		<b-menu-list label="Actions">
+			<b-menu-item icon="exit-to-app" label="Logout" tag="nuxt-link" to="/logout" exact />
+		</b-menu-list>
+	</b-menu>
 </template>
 <script>
 import { mapState } from 'vuex';
 
 export default {
 	computed: mapState({
-		user: state => state.auth.user
-	})
+		user: (state) => state.auth.user,
+	}),
+	methods: {
+		isRouteActive(id) {
+			if (this.$route.path.includes(id)) {
+				return true;
+			}
+			return false;
+		},
+	},
 };
 
 </script>
 <style lang="scss" scoped>
 	@import '~/assets/styles/_colors.scss';
 	.dashboard-menu {
-		padding: 2rem;
-		border-radius: 8px;
+		::v-deep a:hover {
+			cursor: pointer;
+			text-decoration: none;
+		}
 
-		a {
-			display: block;
-			font-weight: 700;
-			color: $textColor;
-			position: relative;
-			padding-left: 40px;
-			height: 35px;
-			&:hover{
-				color: white;
-			}
+		::v-deep .icon {
+			margin-right: 0.5rem;
+		}
 
-			i {
-				position: absolute;
-				font-size: 1.5em;
-				top: -4px;
-				left: 5px;
-			}
+		::v-deep .icon.is-pulled-right {
+			margin-right: 0;
 		}
 
 		hr { margin-top: 0.6em; }
diff --git a/src/site/pages/logout.vue b/src/site/pages/logout.vue
new file mode 100644
index 0000000..7124ea5
--- /dev/null
+++ b/src/site/pages/logout.vue
@@ -0,0 +1,8 @@
+<script>
+export default {
+	async created() {
+		await this.$store.dispatch('auth/logout');
+		this.$router.replace('/login');
+	},
+};
+</script>
diff --git a/src/site/store/auth.js b/src/site/store/auth.js
index 69de9ec..286d321 100644
--- a/src/site/store/auth.js
+++ b/src/site/store/auth.js
@@ -9,6 +9,7 @@ export const state = getDefaultState;
 export const getters = {
 	isLoggedIn: (state) => state.loggedIn,
 	getApiKey: (state) => state.user?.apiKey,
+	getToken: (state) => state.token,
 };
 
 export const actions = {
-- 
cgit v1.2.3


From b519b6ccb469e874c783b995ddf0ab6fabdb5a0e Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Wed, 8 Jul 2020 03:37:50 +0300
Subject: refactor: refactor grid to use vuex for every action

---
 src/site/components/grid/Grid.vue       | 83 +++++++++++++++++++--------------
 src/site/pages/dashboard/albums/_id.vue |  1 +
 src/site/pages/dashboard/index.vue      |  9 ++--
 src/site/pages/index.vue                |  9 ++--
 src/site/store/album.js                 | 57 ----------------------
 src/site/store/images.js                | 69 ++++++++++++++++++++++++++-
 6 files changed, 124 insertions(+), 104 deletions(-)
 delete mode 100644 src/site/store/album.js

(limited to 'src/site')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index f98108e..42dcc6b 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -70,7 +70,7 @@
 								</a>
 							</b-tooltip>
 							<b-tooltip label="Tags" position="is-top">
-								<a class="btn" @click="manageTags(item)">
+								<a class="btn" @click="false && manageTags(item)">
 									<i class="icon-ecommerce-tag-c" />
 								</a>
 							</b-tooltip>
@@ -163,7 +163,7 @@
 						<hr>
 
 						<div class="albums-container">
-							<div v-for="(album, index) in albums" :key="index" class="album">
+							<div v-for="(album, index) in albums" :key="album.id" class="album">
 								<div class="field">
 									<b-checkbox
 										:value="isAlbumSelected(album.id)"
@@ -224,7 +224,6 @@ export default {
 			showWaterfall: true,
 			searchTerm: null,
 			showList: false,
-			albums: [],
 			hoveredItems: [],
 			isAlbumsModalActive: false,
 			showingModalForFile: null,
@@ -236,6 +235,8 @@ export default {
 	computed: {
 		...mapState({
 			user: (state) => state.auth.user,
+			albums: (state) => state.albums.tinyDetails,
+			images: (state) => state.images,
 		}),
 		blank() {
 			// eslint-disable-next-line global-require, import/no-unresolved
@@ -245,33 +246,31 @@ export default {
 			return this.files;
 		},
 	},
+	created() {
+		this.getAlbums();
+	},
 	methods: {
 		async search() {
 			const data = await this.$search.do(this.searchTerm, ['name', 'original', 'type', 'albums:name']);
 			console.log('> Search result data', data);
 		},
 		deleteFile(file) {
-			this.$emit('delete', file);
-			/* this.$buefy.dialog.confirm({
+			// this.$emit('delete', file);
+			this.$buefy.dialog.confirm({
 				title: 'Deleting file',
 				message: 'Are you sure you want to <b>delete</b> this file?',
 				confirmText: 'Delete File',
 				type: 'is-danger',
 				onConfirm: async () => {
-					const response = await this.$axios.$delete(`file/${file.id}`);
-					if (this.showList) {
-						file.hideFromList = true;
-						this.$forceUpdate();
-					} else {
-						this.showWaterfall = false;
-						this.files.splice(index, 1);
-						this.$nextTick(() => {
-							this.showWaterfall = true;
-						});
+					try {
+						const response = await this.$store.dispatch('images/deleteFile', file.id);
+
+						this.$buefy.toast.open(response.message);
+					} catch (e) {
+						this.$store.dispatch('alert/set', { text: e.message, error: true }, { root: true });
 					}
-					return this.$buefy.toast.open(response.message);
 				},
-			}); */
+			});
 		},
 		isAlbumSelected(id) {
 			if (!this.showingModalForFile) return false;
@@ -279,38 +278,52 @@ export default {
 			return !!(found && found.id);
 		},
 		async openAlbumModal(file) {
+			const { id } = file;
 			this.showingModalForFile = file;
 			this.showingModalForFile.albums = [];
-			this.isAlbumsModalActive = true;
 
-			const response = await this.$axios.$get(`file/${file.id}/albums`);
-			this.showingModalForFile.albums = response.albums;
+			try {
+				await this.$store.dispatch('images/getFileAlbums', id);
+			} catch (e) {
+				this.$store.dispatch('alert/set', { text: e.message, error: true }, { root: true });
+			}
+			this.showingModalForFile.albums = this.images.filesAlbums[id];
 
-			this.getAlbums();
+			this.isAlbumsModalActive = true;
 		},
-		async albumCheckboxClicked(value, id) {
-			const response = await this.$axios.$post(`file/album/${value ? 'add' : 'del'}`, {
-				albumId: id,
-				fileId: this.showingModalForFile.id,
-			});
-			this.$buefy.toast.open(response.message);
-
-			// Not the prettiest solution to refetch on each click but it'll do for now
-			this.$parent.getFiles();
+		async albumCheckboxClicked(add, id) {
+			try {
+				let response;
+				if (add) {
+					response = await this.$store.dispatch('images/addToAlbum', {
+						albumId: id,
+						fileId: this.showingModalForFile.id,
+					});
+				} else {
+					response = await this.$store.dispatch('images/removeFromAlbum', {
+						albumId: id,
+						fileId: this.showingModalForFile.id,
+					});
+				}
+
+				this.$buefy.toast.open(response.message);
+			} catch (e) {
+				this.$store.dispatch('alert/set', { text: e.message, error: true }, { root: true });
+			}
 		},
 		async getAlbums() {
-			const response = await this.$axios.$get('albums/dropdown');
-			this.albums = response.albums;
-			this.$forceUpdate();
+			try {
+				await this.$store.dispatch('albums/getTinyDetails');
+			} catch (e) {
+				this.$store.dispatch('alert/set', { text: e.message, error: true }, { root: true });
+			}
 		},
 		mouseOver(id) {
-			console.log('in', id);
 			const foundIndex = this.hoveredItems.indexOf(id);
 			if (foundIndex > -1) return;
 			this.hoveredItems.push(id);
 		},
 		mouseOut(id) {
-			console.log('out', id);
 			const foundIndex = this.hoveredItems.indexOf(id);
 			if (foundIndex > -1) this.hoveredItems.splice(foundIndex, 1);
 		},
diff --git a/src/site/pages/dashboard/albums/_id.vue b/src/site/pages/dashboard/albums/_id.vue
index 33b0319..b25762e 100644
--- a/src/site/pages/dashboard/albums/_id.vue
+++ b/src/site/pages/dashboard/albums/_id.vue
@@ -83,6 +83,7 @@ export default {
 		Grid,
 	},
 	middleware: ['auth', ({ route, store }) => {
+		store.commit('images/resetState');
 		store.dispatch('images/fetchByAlbumId', { id: route.params.id });
 	}],
 	data() {
diff --git a/src/site/pages/dashboard/index.vue b/src/site/pages/dashboard/index.vue
index 71df7eb..2f06c7e 100644
--- a/src/site/pages/dashboard/index.vue
+++ b/src/site/pages/dashboard/index.vue
@@ -33,14 +33,13 @@
 					</nav>
 					<hr>
 
-					<b-loading :active="images.isLoading" />
+					<!-- <b-loading :active="images.isLoading" /> -->
 
 					<Grid
 						v-if="totalFiles && !isLoading"
 						:files="images.files"
 						:enableSearch="false"
-						class="grid"
-						@delete="handleFileDelete">
+						class="grid">
 						<template v-slot:pagination>
 							<b-pagination
 								v-if="shouldPaginate"
@@ -77,6 +76,7 @@ export default {
 		Grid,
 	},
 	middleware: ['auth', ({ store }) => {
+		store.commit('images/resetState');
 		store.dispatch('images/fetch');
 	}],
 	data() {
@@ -108,9 +108,6 @@ export default {
 			await this.fetch(this.current);
 			this.isLoading = false;
 		},
-		handleFileDelete(file) {
-			console.log('yep!', file.id);
-		},
 	},
 };
 </script>
diff --git a/src/site/pages/index.vue b/src/site/pages/index.vue
index bb35be3..c8fb7b8 100644
--- a/src/site/pages/index.vue
+++ b/src/site/pages/index.vue
@@ -19,7 +19,8 @@
 		</div>
 		<div class="container uploader">
 			<Uploader v-if="config.publicMode || (!config.publicMode && loggedIn)" />
-			<div v-else
+			<div
+				v-else
 				class="has-text-centered is-size-4 has-text-danger">
 				This site has disabled public uploads. You need an account.
 			</div>
@@ -39,15 +40,15 @@ export default {
 	components: {
 		Logo,
 		Uploader,
-		Links
+		Links,
 	},
 	data() {
 		return { albums: [] };
 	},
 	computed: {
 		...mapGetters({ loggedIn: 'auth/isLoggedIn' }),
-		...mapState(['config'])
-	}
+		...mapState(['config']),
+	},
 };
 </script>
 <style lang="scss" scoped>
diff --git a/src/site/store/album.js b/src/site/store/album.js
deleted file mode 100644
index d8ffacc..0000000
--- a/src/site/store/album.js
+++ /dev/null
@@ -1,57 +0,0 @@
-export const state = () => ({
-	files: [],
-	name: null,
-	isLoading: false,
-	pagination: {
-		page: 1,
-		limit: 30,
-		totalFiles: 0,
-	},
-	downloadEnabled: false,
-});
-
-export const getters = {
-	getTotalFiles: ({ pagination }) => pagination.totalFiles,
-	getFetchedCount: ({ files }) => files.length,
-	shouldPaginate: ({ pagination }) => pagination.totalFiles > pagination.limit,
-	getLimit: ({ pagination }) => pagination.limit,
-	getName: ({ name }) => name,
-};
-
-export const actions = {
-	async fetchById({ commit, dispatch, state }, { id, page }) {
-		commit('setIsLoading');
-
-		page = page || 1;
-
-		try {
-			const response = await this.$axios.$get(`album/${id}/full`, {
-				params: { limit: state.pagination.limit, page },
-			});
-
-			commit('setFiles', response);
-			commit('updatePaginationMeta', { totalFiles: response.count, page });
-		} catch (e) {
-			dispatch('alert/set', { text: e.message, error: true }, { root: true });
-		}
-	},
-	// TODO: Fix duplicate code between this store and files store
-	deleteFile({ commit }, fileId) {
-
-	},
-};
-
-export const mutations = {
-	setIsLoading(state) {
-		state.isLoading = true;
-	},
-	setFiles(state, { files, name }) {
-		state.files = files || [];
-		state.name = name;
-		state.isLoading = false;
-	},
-	updatePaginationMeta(state, { page, totalFiles }) {
-		state.pagination.page = page || 1;
-		state.pagination.totalFiles = totalFiles || 0;
-	},
-};
diff --git a/src/site/store/images.js b/src/site/store/images.js
index d02219f..3019d85 100644
--- a/src/site/store/images.js
+++ b/src/site/store/images.js
@@ -1,4 +1,6 @@
-export const state = () => ({
+import Vue from 'vue';
+
+export const getDefaultState = () => ({
 	files: [],
 	isLoading: false,
 	pagination: {
@@ -8,8 +10,11 @@ export const state = () => ({
 	},
 	name: null,
 	downloadEnabled: false,
+	filesAlbums: {},
 });
 
+export const state = getDefaultState;
+
 export const getters = {
 	getTotalFiles: ({ pagination }) => pagination.totalFiles,
 	getFetchedCount: ({ files }) => files.length,
@@ -28,11 +33,15 @@ export const actions = {
 			const response = await this.$axios.$get('files', { params: { limit: state.pagination.limit, page } });
 
 			commit('setFilesAndMeta', { ...response, page });
+
+			return response;
 		} catch (e) {
 			dispatch('alert/set', { text: e.message, error: true }, { root: true });
 		}
+
+		return null;
 	},
-	async fetchByAlbumId({ commit, dispatch, state }, { id, page }) {
+	async fetchByAlbumId({ commit, state }, { id, page }) {
 		commit('setIsLoading');
 
 		page = page || 1;
@@ -42,6 +51,36 @@ export const actions = {
 		});
 
 		commit('setFilesAndMeta', { ...response, page });
+
+		return response;
+	},
+	async getFileAlbums({ commit }, fileId) {
+		const response = await this.$axios.$get(`file/${fileId}/albums`);
+
+		commit('setFileAlbums', { ...response, fileId });
+
+		return response;
+	},
+	async addToAlbum({ commit }, { fileId, albumId }) {
+		const response = await this.$axios.$post('file/album/add', { fileId, albumId });
+
+		commit('addAlbumToFile', { fileId, albumId, ...response.data });
+
+		return response;
+	},
+	async removeFromAlbum({ commit }, { fileId, albumId }) {
+		const response = await this.$axios.$post('file/album/del', { fileId, albumId });
+
+		commit('removeAlbumFromFile', { fileId, albumId });
+
+		return response;
+	},
+	async deleteFile({ commit }, fileId) {
+		const response = await this.$axios.$delete(`file/${fileId}`);
+
+		commit('removeFile', fileId);
+
+		return response;
 	},
 };
 
@@ -58,4 +97,30 @@ export const mutations = {
 		state.pagination.page = page || 1;
 		state.pagination.totalFiles = count || 0;
 	},
+	removeFile(state, fileId) {
+		const foundIndex = state.files.findIndex(({ id }) => id === fileId);
+		if (foundIndex > -1) {
+			state.files.splice(foundIndex, 1);
+			state.pagination.totalFiles -= 1;
+		}
+	},
+	setFileAlbums(state, { fileId, albums }) {
+		Vue.set(state.filesAlbums, fileId, albums);
+	},
+	addAlbumToFile(state, { fileId, album }) {
+		if (!state.filesAlbums[fileId]) return;
+
+		state.filesAlbums[fileId].push(album);
+	},
+	removeAlbumFromFile(state, { fileId, albumId }) {
+		if (!state.filesAlbums[fileId]) return;
+
+		const foundIndex = state.filesAlbums[fileId].findIndex(({ id }) => id === albumId);
+		if (foundIndex > -1) {
+			state.filesAlbums[fileId].splice(foundIndex, 1);
+		}
+	},
+	resetState(state) {
+		Object.assign(state, getDefaultState());
+	},
 };
-- 
cgit v1.2.3


From ad852de51a0d2dd5d29c08838d5a430c58849e74 Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Wed, 8 Jul 2020 04:00:12 +0300
Subject: chore: linter the entire project using the new rules

---
 src/site/components/album/AlbumDetails.vue   | 62 ++++++++++++--------
 src/site/components/album/AlbumEntry.vue     | 41 ++++++++------
 src/site/components/grid/Grid.vue            |  4 +-
 src/site/components/loading/CubeShadow.vue   | 17 +++---
 src/site/components/loading/Origami.vue      | 18 +++---
 src/site/components/loading/PingPong.vue     | 26 +++++----
 src/site/components/loading/RotateSquare.vue | 13 +++--
 src/site/components/uploader/Uploader.vue    |  1 +
 src/site/layouts/default.vue                 | 23 ++++----
 src/site/layouts/error.vue                   |  2 +-
 src/site/middleware/admin.js                 |  3 +-
 src/site/middleware/auth.js                  |  3 +-
 src/site/pages/dashboard/admin/file/_id.vue  | 82 +++++++++++++++++----------
 src/site/pages/dashboard/admin/settings.vue  | 85 ++++++++++++++++++----------
 src/site/pages/dashboard/tags/index.vue      | 43 ++++++++------
 src/site/pages/faq.vue                       | 23 ++++++--
 src/site/pages/index.vue                     |  1 +
 src/site/pages/register.vue                  | 37 +++++++-----
 src/site/plugins/axios.js                    | 12 ++--
 src/site/plugins/flexsearch.js               |  5 +-
 src/site/plugins/nuxt-client-init.js         |  2 +-
 src/site/plugins/vue-isyourpasswordsafe.js   |  2 +-
 src/site/plugins/vue-timeago.js              |  2 +-
 src/site/store/auth.js                       |  4 ++
 24 files changed, 314 insertions(+), 197 deletions(-)

(limited to 'src/site')

diff --git a/src/site/components/album/AlbumDetails.vue b/src/site/components/album/AlbumDetails.vue
index f117f2f..b411f13 100644
--- a/src/site/components/album/AlbumDetails.vue
+++ b/src/site/components/album/AlbumDetails.vue
@@ -6,34 +6,43 @@
 			:data="details.links || []"
 			:mobile-cards="true">
 			<template slot-scope="props">
-				<b-table-column field="identifier"
+				<b-table-column
+					field="identifier"
 					label="Link"
 					centered>
-					<a :href="`${config.URL}/a/${props.row.identifier}`"
+					<a
+						:href="`${config.URL}/a/${props.row.identifier}`"
 						target="_blank">
 						{{ props.row.identifier }}
 					</a>
 				</b-table-column>
 
-				<b-table-column field="views"
+				<b-table-column
+					field="views"
 					label="Views"
 					centered>
 					{{ props.row.views }}
 				</b-table-column>
 
-				<b-table-column field="enableDownload"
+				<b-table-column
+					field="enableDownload"
 					label="Allow download"
 					centered>
-					<b-switch v-model="props.row.enableDownload"
+					<b-switch
+						v-model="props.row.enableDownload"
 						@input="updateLinkOptions(albumId, props.row)" />
 				</b-table-column>
 
-				<b-table-column field="enabled"
+				<b-table-column
+					field="enabled"
 					numeric>
-					<button :class="{ 'is-loading': isDeleting(props.row.identifier) }"
+					<button
+						:class="{ 'is-loading': isDeleting(props.row.identifier) }"
 						class="button is-danger"
 						:disabled="isDeleting(props.row.identifier)"
-						@click="promptDeleteAlbumLink(albumId, props.row.identifier)">Delete link</button>
+						@click="promptDeleteAlbumLink(albumId, props.row.identifier)">
+						Delete link
+					</button>
 				</b-table-column>
 			</template>
 			<template slot="empty">
@@ -49,10 +58,13 @@
 				<div class="level is-paddingless">
 					<div class="level-left">
 						<div class="level-item">
-							<button :class="{ 'is-loading': isCreatingLink }"
+							<button
+								:class="{ 'is-loading': isCreatingLink }"
 								class="button is-primary"
 								style="float: left"
-								@click="createLink(albumId)">Create new link</button>
+								@click="createLink(albumId)">
+								Create new link
+							</button>
 						</div>
 						<div class="level-item">
 							<span class="has-text-default">{{ details.links.length }} / {{ config.maxLinksPerAlbum }} links created</span>
@@ -61,9 +73,12 @@
 
 					<div class="level-right">
 						<div class="level-item">
-							<button class="button is-danger"
+							<button
+								class="button is-danger"
 								style="float: right"
-								@click="promptDeleteAlbum(albumId)">Delete album</button>
+								@click="promptDeleteAlbum(albumId)">
+								Delete album
+							</button>
 						</div>
 					</div>
 				</div>
@@ -79,18 +94,18 @@ export default {
 	props: {
 		albumId: {
 			type: Number,
-			default: 0
+			default: 0,
 		},
 		details: {
 			type: Object,
-			default: () => ({})
+			default: () => ({}),
 		},
 	},
 	data() {
 		return {
 			isCreatingLink: false,
 			isDeletingLinks: [],
-		}
+		};
 	},
 	computed: mapState(['config']),
 	methods: {
@@ -99,20 +114,20 @@ export default {
 			deleteAlbumLinkAction: 'albums/deleteLink',
 			updateLinkOptionsAction: 'albums/updateLinkOptions',
 			createLinkAction: 'albums/createLink',
-			alert: 'alert/set'
+			alert: 'alert/set',
 		}),
 		promptDeleteAlbum(id) {
 			this.$buefy.dialog.confirm({
 				type: 'is-danger',
 				message: 'Are you sure you want to delete this album?',
-				onConfirm: () => this.deleteAlbum(id)
+				onConfirm: () => this.deleteAlbum(id),
 			});
 		},
 		promptDeleteAlbumLink(albumId, identifier) {
 			this.$buefy.dialog.confirm({
 				type: 'is-danger',
 				message: 'Are you sure you want to delete this album link?',
-				onConfirm: () => this.deleteAlbumLink(albumId, identifier)
+				onConfirm: () => this.deleteAlbumLink(albumId, identifier),
 			});
 		},
 		async deleteAlbum(id) {
@@ -122,7 +137,7 @@ export default {
 				this.alert({ text: response.message, error: false });
 			} catch (e) {
 				this.alert({ text: e.message, error: true });
-			} 
+			}
 		},
 		async deleteAlbumLink(albumId, identifier) {
 			this.isDeletingLinks.push(identifier);
@@ -133,7 +148,7 @@ export default {
 			} catch (e) {
 				this.alert({ text: e.message, error: true });
 			} finally {
-				this.isDeletingLinks = this.isDeletingLinks.filter(e => e !== identifier);
+				this.isDeletingLinks = this.isDeletingLinks.filter((e) => e !== identifier);
 			}
 		},
 		async createLink(albumId) {
@@ -155,12 +170,12 @@ export default {
 				this.alert({ text: response.message, error: false });
 			} catch (e) {
 				this.alert({ text: e.message, error: true });
-			} 
+			}
 		},
 		isDeleting(identifier) {
 			return this.isDeletingLinks.indexOf(identifier) > -1;
-		}
-	}
+		},
+	},
 };
 </script>
 
@@ -184,7 +199,6 @@ export default {
 	}
 </style>
 
-
 <style lang="scss">
 	@import '~/assets/styles/_colors.scss';
 
diff --git a/src/site/components/album/AlbumEntry.vue b/src/site/components/album/AlbumEntry.vue
index 28e434a..2723b49 100644
--- a/src/site/components/album/AlbumEntry.vue
+++ b/src/site/components/album/AlbumEntry.vue
@@ -1,8 +1,10 @@
 <template>
 	<div class="album">
-		<div class="arrow-container"
+		<div
+			class="arrow-container"
 			@click="toggleDetails(album)">
-			<i :class="{ active: isExpanded }"
+			<i
+				:class="{ active: isExpanded }"
 				class="icon-arrow" />
 		</div>
 		<div class="thumb">
@@ -12,7 +14,9 @@
 		</div>
 		<div class="info">
 			<h4>
-				<router-link :to="`/dashboard/albums/${album.id}`">{{ album.name }}</router-link>
+				<router-link :to="`/dashboard/albums/${album.id}`">
+					{{ album.name }}
+				</router-link>
 			</h4>
 			<span>
 				Created <span class="is-inline has-text-weight-semibold"><timeago :since="album.createdAt" /></span>
@@ -21,19 +25,24 @@
 		</div>
 		<div class="latest is-hidden-mobile">
 			<template v-if="album.fileCount > 0">
-				<div v-for="file of album.files"
+				<div
+					v-for="file of album.files"
 					:key="file.id"
 					class="thumb">
 					<figure class="image is-64x64">
-						<a :href="file.url"
+						<a
+							:href="file.url"
 							target="_blank">
 							<img :src="file.thumbSquare">
 						</a>
 					</figure>
 				</div>
-				<div v-if="album.fileCount > 5"
+				<div
+					v-if="album.fileCount > 5"
 					class="thumb more no-background">
-					<router-link :to="`/dashboard/albums/${album.id}`">{{ album.fileCount - 5 }}+ more</router-link>
+					<router-link :to="`/dashboard/albums/${album.id}`">
+						{{ album.fileCount - 5 }}+ more
+					</router-link>
 				</div>
 			</template>
 			<template v-else>
@@ -41,7 +50,8 @@
 			</template>
 		</div>
 
-		<AlbumDetails v-if="isExpanded"
+		<AlbumDetails
+			v-if="isExpanded"
 			:details="getDetails(album.id)"
 			:albumId="album.id" />
 	</div>
@@ -53,22 +63,22 @@ import AlbumDetails from '~/components/album/AlbumDetails.vue';
 
 export default {
 	components: {
-		AlbumDetails
+		AlbumDetails,
 	},
 	props: {
 		album: {
 			type: Object,
-			default: () => ({})
-		}
+			default: () => ({}),
+		},
 	},
 	computed: {
 		...mapGetters({
 			isExpandedGetter: 'albums/isExpanded',
-			getDetails: 'albums/getDetails'
+			getDetails: 'albums/getDetails',
 		}),
 		isExpanded() {
 			return this.isExpandedGetter(this.album.id);
-		}
+		},
 	},
 	methods: {
 		async toggleDetails(album) {
@@ -76,8 +86,8 @@ export default {
 				await this.$store.dispatch('albums/fetchDetails', album.id);
 			}
 			this.$store.commit('albums/toggleExpandedState', album.id);
-		}
-	}
+		},
+	},
 };
 </script>
 
@@ -175,4 +185,3 @@ export default {
 
 	div.no-background { background: none !important; }
 </style>
-
diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index 42dcc6b..84c0b11 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -163,7 +163,7 @@
 						<hr>
 
 						<div class="albums-container">
-							<div v-for="(album, index) in albums" :key="album.id" class="album">
+							<div v-for="album in albums" :key="album.id" class="album">
 								<div class="field">
 									<b-checkbox
 										:value="isAlbumSelected(album.id)"
@@ -252,7 +252,7 @@ export default {
 	methods: {
 		async search() {
 			const data = await this.$search.do(this.searchTerm, ['name', 'original', 'type', 'albums:name']);
-			console.log('> Search result data', data);
+			console.log('> Search result data', data); // eslint-disable-line no-console
 		},
 		deleteFile(file) {
 			// this.$emit('delete', file);
diff --git a/src/site/components/loading/CubeShadow.vue b/src/site/components/loading/CubeShadow.vue
index af31dac..bbfdb52 100644
--- a/src/site/components/loading/CubeShadow.vue
+++ b/src/site/components/loading/CubeShadow.vue
@@ -1,5 +1,6 @@
 <template>
-	<div :style="styles"
+	<div
+		:style="styles"
 		class="spinner spinner--cube-shadow" />
 </template>
 
@@ -8,16 +9,16 @@ export default {
 	props: {
 		size: {
 			type: String,
-			default: '60px'
+			default: '60px',
 		},
 		background: {
 			type: String,
-			default: '#9C27B0'
+			default: '#9C27B0',
 		},
 		duration: {
 			type: String,
-			default: '1.8s'
-		}
+			default: '1.8s',
+		},
 	},
 	computed: {
 		styles() {
@@ -25,10 +26,10 @@ export default {
 				width: this.size,
 				height: this.size,
 				backgroundColor: this.background,
-				animationDuration: this.duration
+				animationDuration: this.duration,
 			};
-		}
-	}
+		},
+	},
 };
 </script>
 
diff --git a/src/site/components/loading/Origami.vue b/src/site/components/loading/Origami.vue
index d1b523d..cd1c087 100644
--- a/src/site/components/loading/Origami.vue
+++ b/src/site/components/loading/Origami.vue
@@ -1,7 +1,9 @@
 <template>
-	<div :style="styles"
+	<div
+		:style="styles"
 		class="spinner spinner-origami">
-		<div :style="innerStyles"
+		<div
+			:style="innerStyles"
 			class="spinner-inner loading">
 			<span class="slice" />
 			<span class="slice" />
@@ -18,21 +20,21 @@ export default {
 	props: {
 		size: {
 			type: String,
-			default: '40px'
-		}
+			default: '40px',
+		},
 	},
 	computed: {
 		innerStyles() {
-			let size = parseInt(this.size);
+			const size = parseInt(this.size, 10);
 			return { transform: `scale(${(size / 60)})` };
 		},
 		styles() {
 			return {
 				width: this.size,
-				height: this.size
+				height: this.size,
 			};
-		}
-	}
+		},
+	},
 };
 </script>
 
diff --git a/src/site/components/loading/PingPong.vue b/src/site/components/loading/PingPong.vue
index ac33e28..d562e9f 100644
--- a/src/site/components/loading/PingPong.vue
+++ b/src/site/components/loading/PingPong.vue
@@ -1,12 +1,14 @@
 <template>
-	<div :style="styles"
+	<div
+		:style="styles"
 		class="spinner spinner--ping-pong">
-		<div :style="innerStyles"
+		<div
+			:style="innerStyles"
 			class="spinner-inner">
 			<div class="board">
-				<div class="left"/>
-				<div class="right"/>
-				<div class="ball"/>
+				<div class="left" />
+				<div class="right" />
+				<div class="ball" />
 			</div>
 		</div>
 	</div>
@@ -17,22 +19,22 @@ export default {
 	props: {
 		size: {
 			type: String,
-			default: '60px'
-		}
+			default: '60px',
+		},
 	},
 	computed: {
 		innerStyles() {
-			let size = parseInt(this.size);
+			const size = parseInt(this.size, 10);
 			return { transform: `scale(${size / 250})` };
 		},
 		styles() {
 			return {
 				width: this.size,
-				height: this.size
+				height: this.size,
 			};
-		}
-	}
-}
+		},
+	},
+};
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/site/components/loading/RotateSquare.vue b/src/site/components/loading/RotateSquare.vue
index 4da8300..089e01a 100644
--- a/src/site/components/loading/RotateSquare.vue
+++ b/src/site/components/loading/RotateSquare.vue
@@ -1,5 +1,6 @@
 <template>
-	<div :style="styles"
+	<div
+		:style="styles"
 		class="spinner spinner--rotate-square-2" />
 </template>
 
@@ -8,18 +9,18 @@ export default {
 	props: {
 		size: {
 			type: String,
-			default: '40px'
-		}
+			default: '40px',
+		},
 	},
 	computed: {
 		styles() {
 			return {
 				width: this.size,
 				height: this.size,
-				display: 'inline-block'
+				display: 'inline-block',
 			};
-		}
-	}
+		},
+	},
 };
 </script>
 
diff --git a/src/site/components/uploader/Uploader.vue b/src/site/components/uploader/Uploader.vue
index c7be372..7e2d446 100644
--- a/src/site/components/uploader/Uploader.vue
+++ b/src/site/components/uploader/Uploader.vue
@@ -172,6 +172,7 @@ export default {
 				text: 'There was an error uploading this file. Check the console.',
 				error: true,
 			});
+			// eslint-disable-next-line no-console
 			console.error(file, message, xhr);
 		},
 		async dropzoneChunksUploaded(file, done) {
diff --git a/src/site/layouts/default.vue b/src/site/layouts/default.vue
index 579a73e..13a56c0 100644
--- a/src/site/layouts/default.vue
+++ b/src/site/layouts/default.vue
@@ -1,27 +1,29 @@
 <template>
-	<div v-bar
+	<div
+		v-bar
 		class="scroll-area">
 		<div class="default-body">
 			<Navbar :isWhite="true" />
-			<nuxt-child id="app"
+			<nuxt-child
+				id="app"
 				class="nuxt-app is-height-max-content" />
 			<Footer />
 		</div>
 	</div>
 </template>
 <script>
-import Navbar from '~/components/navbar/Navbar.vue';
-import Footer from '~/components/footer/Footer';
 import { mapState } from 'vuex';
+import Navbar from '~/components/navbar/Navbar.vue';
+import Footer from '~/components/footer/Footer.vue';
 
 export default {
 	components: {
 		Navbar,
-		Footer
+		Footer,
 	},
 	computed: mapState(['config']),
 	created() {
-		this.$store.watch(state => state.alert.text, () => {
+		this.$store.watch((state) => state.alert.text, () => {
 			const { text, error } = this.$store.state.alert;
 
 			if (!text) return;
@@ -30,20 +32,21 @@ export default {
 				duration: 3500,
 				message: text,
 				position: 'is-bottom',
-				type: error ? 'is-danger' : 'is-success'
+				type: error ? 'is-danger' : 'is-success',
 			});
 
 			this.$store.dispatch('alert/clear', null);
-		})
+		});
 	},
 	mounted() {
+		// eslint-disable-next-line no-console
 		console.log(
 			`%c lolisafe %c v${this.config.version} %c`,
 			'background:#35495e ; padding: 1px; border-radius: 3px 0 0 3px;  color: #fff',
 			'background:#ff015b; padding: 1px; border-radius: 0 3px 3px 0;  color: #fff',
-			'background:transparent'
+			'background:transparent',
 		);
-	}
+	},
 };
 </script>
 
diff --git a/src/site/layouts/error.vue b/src/site/layouts/error.vue
index 77d188f..3f12c46 100644
--- a/src/site/layouts/error.vue
+++ b/src/site/layouts/error.vue
@@ -23,6 +23,6 @@
 import Navbar from '~/components/navbar/Navbar.vue';
 
 export default {
-	components: { Navbar }
+	components: { Navbar },
 };
 </script>
diff --git a/src/site/middleware/admin.js b/src/site/middleware/admin.js
index 5c09220..1a94b75 100644
--- a/src/site/middleware/admin.js
+++ b/src/site/middleware/admin.js
@@ -1,5 +1,6 @@
-export default function({ store, redirect }) {
+export default function ({ store, redirect }) {
 	// If the user is not authenticated
 	if (!store.state.auth.user) return redirect('/login');
 	if (!store.state.auth.user.isAdmin) return redirect('/dashboard');
+	return true;
 }
diff --git a/src/site/middleware/auth.js b/src/site/middleware/auth.js
index c3f339c..b2ecc68 100644
--- a/src/site/middleware/auth.js
+++ b/src/site/middleware/auth.js
@@ -1,6 +1,7 @@
-export default function({ store, redirect }) {
+export default function ({ store, redirect }) {
 	// If the user is not authenticated
 	if (!store.state.auth.loggedIn) {
 		return redirect('/login');
 	}
+	return true;
 }
diff --git a/src/site/pages/dashboard/admin/file/_id.vue b/src/site/pages/dashboard/admin/file/_id.vue
index 5853770..34fcd01 100644
--- a/src/site/pages/dashboard/admin/file/_id.vue
+++ b/src/site/pages/dashboard/admin/file/_id.vue
@@ -9,74 +9,90 @@
 					<Sidebar />
 				</div>
 				<div class="column">
-					<h2 class="subtitle">File details</h2>
+					<h2 class="subtitle">
+						File details
+					</h2>
 					<hr>
 
 					<div class="columns">
 						<div class="column is-6">
-							<b-field label="ID"
+							<b-field
+								label="ID"
 								horizontal>
 								<span>{{ file.id }}</span>
 							</b-field>
 
-							<b-field label="Name"
+							<b-field
+								label="Name"
 								horizontal>
 								<span>{{ file.name }}</span>
 							</b-field>
 
-							<b-field label="Original Name"
+							<b-field
+								label="Original Name"
 								horizontal>
 								<span>{{ file.original }}</span>
 							</b-field>
 
-							<b-field label="IP"
+							<b-field
+								label="IP"
 								horizontal>
 								<span class="underline">{{ file.ip }}</span>
 							</b-field>
 
-							<b-field label="Link"
+							<b-field
+								label="Link"
 								horizontal>
-								<a :href="file.url"
+								<a
+									:href="file.url"
 									target="_blank">{{ file.url }}</a>
 							</b-field>
 
-							<b-field label="Size"
+							<b-field
+								label="Size"
 								horizontal>
 								<span>{{ formatBytes(file.size) }}</span>
 							</b-field>
 
-							<b-field label="Hash"
+							<b-field
+								label="Hash"
 								horizontal>
 								<span>{{ file.hash }}</span>
 							</b-field>
 
-							<b-field label="Uploaded"
+							<b-field
+								label="Uploaded"
 								horizontal>
 								<span><timeago :since="file.createdAt" /></span>
 							</b-field>
 						</div>
 						<div class="column is-6">
-							<b-field label="User Id"
+							<b-field
+								label="User Id"
 								horizontal>
 								<span>{{ user.id }}</span>
 							</b-field>
 
-							<b-field label="Username"
+							<b-field
+								label="Username"
 								horizontal>
 								<span>{{ user.username }}</span>
 							</b-field>
 
-							<b-field label="Enabled"
+							<b-field
+								label="Enabled"
 								horizontal>
 								<span>{{ user.enabled }}</span>
 							</b-field>
 
-							<b-field label="Registered"
+							<b-field
+								label="Registered"
 								horizontal>
 								<span><timeago :since="user.createdAt" /></span>
 							</b-field>
 
-							<b-field label="Files"
+							<b-field
+								label="Files"
 								horizontal>
 								<span>
 									<nuxt-link :to="`/dashboard/admin/user/${user.id}`">{{ user.fileCount }}</nuxt-link>
@@ -86,10 +102,16 @@
 					</div>
 
 					<div class="mb2 mt2 text-center">
-						<button class="button is-danger"
-							@click="promptBanIP">Ban IP</button>
-						<button class="button is-danger"
-							@click="promptDisableUser">Disable user</button>
+						<button
+							class="button is-danger"
+							@click="promptBanIP">
+							Ban IP
+						</button>
+						<button
+							class="button is-danger"
+							@click="promptDisableUser">
+							Disable user
+						</button>
 					</div>
 				</div>
 			</div>
@@ -102,14 +124,14 @@ import Sidebar from '~/components/sidebar/Sidebar.vue';
 
 export default {
 	components: {
-		Sidebar
+		Sidebar,
 	},
 	middleware: ['auth', 'admin'],
 	data() {
 		return {
 			options: {},
 			file: null,
-			user: null
+			user: null,
 		};
 	},
 	async asyncData({ $axios, route }) {
@@ -117,13 +139,13 @@ export default {
 			const response = await $axios.$get(`file/${route.params.id}`);
 			return {
 				file: response.file ? response.file : null,
-				user: response.user ? response.user : null
+				user: response.user ? response.user : null,
 			};
 		} catch (error) {
 			console.error(error);
 			return {
 				file: null,
-				user: null
+				user: null,
 			};
 		}
 	},
@@ -132,12 +154,12 @@ export default {
 			this.$buefy.dialog.confirm({
 				type: 'is-danger',
 				message: 'Are you sure you want to disable the account of the user that uploaded this file?',
-				onConfirm: () => this.disableUser()
+				onConfirm: () => this.disableUser(),
 			});
 		},
 		async disableUser() {
 			const response = await this.$axios.$post('admin/users/disable', {
-				id: this.user.id
+				id: this.user.id,
 			});
 			this.$buefy.toast.open(response.message);
 		},
@@ -145,12 +167,12 @@ export default {
 			this.$buefy.dialog.confirm({
 				type: 'is-danger',
 				message: 'Are you sure you want to ban the IP this file was uploaded from?',
-				onConfirm: () => this.banIP()
+				onConfirm: () => this.banIP(),
 			});
 		},
 		async banIP() {
 			const response = await this.$axios.$post('admin/ban/ip', {
-				ip: this.file.ip
+				ip: this.file.ip,
 			});
 			this.$buefy.toast.open(response.message);
 		},
@@ -163,8 +185,8 @@ export default {
 
 			const i = Math.floor(Math.log(bytes) / Math.log(k));
 
-			return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
-		}
-	}
+			return `${parseFloat((bytes / k ** i).toFixed(dm))} ${sizes[i]}`;
+		},
+	},
 };
 </script>
diff --git a/src/site/pages/dashboard/admin/settings.vue b/src/site/pages/dashboard/admin/settings.vue
index 2d59fff..9e63a7c 100644
--- a/src/site/pages/dashboard/admin/settings.vue
+++ b/src/site/pages/dashboard/admin/settings.vue
@@ -6,87 +6,112 @@
 					<Sidebar />
 				</div>
 				<div class="column">
-					<h2 class="subtitle">Service settings</h2>
+					<h2 class="subtitle">
+						Service settings
+					</h2>
 					<hr>
 
-					<b-field label="Service name"
+					<b-field
+						label="Service name"
 						message="Please enter the name which this service is gonna be identified as"
 						horizontal>
-						<b-input v-model="options.serviceName"
+						<b-input
+							v-model="options.serviceName"
 							expanded />
 					</b-field>
 
-					<b-field label="Upload folder"
+					<b-field
+						label="Upload folder"
 						message="Where to store the files relative to the working directory"
 						horizontal>
-						<b-input v-model="options.uploadFolder"
+						<b-input
+							v-model="options.uploadFolder"
 							expanded />
 					</b-field>
 
-					<b-field label="Links per album"
+					<b-field
+						label="Links per album"
 						message="Maximum links allowed per album"
 						horizontal>
-						<b-input v-model="options.linksPerAlbum"
+						<b-input
+							v-model="options.linksPerAlbum"
 							type="number"
 							expanded />
 					</b-field>
 
-					<b-field label="Max upload size"
+					<b-field
+						label="Max upload size"
 						message="Maximum allowed file size in MB"
 						horizontal>
-						<b-input v-model="options.maxUploadSize"
+						<b-input
+							v-model="options.maxUploadSize"
 							expanded />
 					</b-field>
 
-					<b-field label="Filename length"
+					<b-field
+						label="Filename length"
 						message="How many characters long should the generated filenames be"
 						horizontal>
-						<b-input v-model="options.filenameLength"
+						<b-input
+							v-model="options.filenameLength"
 							expanded />
 					</b-field>
 
-					<b-field label="Album link length"
+					<b-field
+						label="Album link length"
 						message="How many characters a link for an album should have"
 						horizontal>
-						<b-input v-model="options.albumLinkLength"
+						<b-input
+							v-model="options.albumLinkLength"
 							expanded />
 					</b-field>
 
-					<b-field label="Generate thumbnails"
+					<b-field
+						label="Generate thumbnails"
 						message="Generate thumbnails when uploading a file if possible"
 						horizontal>
-						<b-switch v-model="options.generateThumbnails"
+						<b-switch
+							v-model="options.generateThumbnails"
 							:true-value="true"
 							:false-value="false" />
 					</b-field>
 
-					<b-field label="Generate zips"
+					<b-field
+						label="Generate zips"
 						message="Allow generating zips to download entire albums"
 						horizontal>
-						<b-switch v-model="options.generateZips"
+						<b-switch
+							v-model="options.generateZips"
 							:true-value="true"
 							:false-value="false" />
 					</b-field>
 
-					<b-field label="Public mode"
+					<b-field
+						label="Public mode"
 						message="Enable anonymous uploades"
 						horizontal>
-						<b-switch v-model="options.publicMode"
+						<b-switch
+							v-model="options.publicMode"
 							:true-value="true"
 							:false-value="false" />
 					</b-field>
 
-					<b-field label="Enable creating account"
+					<b-field
+						label="Enable creating account"
 						message="Enable creating new accounts in the platform"
 						horizontal>
-						<b-switch v-model="options.enableAccounts"
+						<b-switch
+							v-model="options.enableAccounts"
 							:true-value="true"
 							:false-value="false" />
 					</b-field>
 
 					<div class="mb2 mt2 text-center">
-						<button class="button is-primary"
-							@click="promptRestartService">Save and restart service</button>
+						<button
+							class="button is-primary"
+							@click="promptRestartService">
+							Save and restart service
+						</button>
 					</div>
 				</div>
 			</div>
@@ -99,12 +124,12 @@ import Sidebar from '~/components/sidebar/Sidebar.vue';
 
 export default {
 	components: {
-		Sidebar
+		Sidebar,
 	},
 	middleware: ['auth', 'admin'],
 	data() {
 		return {
-			options: {}
+			options: {},
 		};
 	},
 	metaInfo() {
@@ -115,19 +140,19 @@ export default {
 	},
 	methods: {
 		async getSettings() {
-			const response = await this.$axios.$get(`service/config`);
+			const response = await this.$axios.$get('service/config');
 			this.options = response.config;
 		},
 		promptRestartService() {
 			this.$buefy.dialog.confirm({
 				message: 'Keep in mind that restarting only works if you have PM2 or something similar set up. Continue?',
-				onConfirm: () => this.restartService()
+				onConfirm: () => this.restartService(),
 			});
 		},
 		async restartService() {
-			const response = await this.$axios.$post(`service/restart`);
+			const response = await this.$axios.$post('service/restart');
 			this.$buefy.toast.open(response.message);
-		}
-	}
+		},
+	},
 };
 </script>
diff --git a/src/site/pages/dashboard/tags/index.vue b/src/site/pages/dashboard/tags/index.vue
index a9476da..10193a8 100644
--- a/src/site/pages/dashboard/tags/index.vue
+++ b/src/site/pages/dashboard/tags/index.vue
@@ -123,7 +123,6 @@
 	}
 </style>
 
-
 <template>
 	<section class="section is-fullheight dashboard">
 		<div class="container">
@@ -132,27 +131,35 @@
 					<Sidebar />
 				</div>
 				<div class="column">
-					<h2 class="subtitle">Manage your tags</h2>
+					<h2 class="subtitle">
+						Manage your tags
+					</h2>
 					<hr>
 
 					<div class="search-container">
 						<b-field>
-							<b-input v-model="newTagName"
+							<b-input
+								v-model="newTagName"
 								placeholder="Tag name..."
 								type="text"
 								@keyup.enter.native="createTag" />
 							<p class="control">
-								<button class="button is-primary"
-									@click="createTag">Create tags</button>
+								<button
+									class="button is-primary"
+									@click="createTag">
+									Create tags
+								</button>
 							</p>
 						</b-field>
 					</div>
 
 					<div class="view-container">
-						<div v-for="tag in tags"
+						<div
+							v-for="tag in tags"
 							:key="tag.id"
 							class="album">
-							<div class="arrow-container"
+							<div
+								class="arrow-container"
 								@click="promptDeleteTag">
 								<i class="icon-arrow" />
 							</div>
@@ -165,7 +172,9 @@
 							-->
 							<div class="info">
 								<h4>
-									<router-link :to="`/dashboard/tags/${tag.id}`">{{ tag.name }}</router-link>
+									<router-link :to="`/dashboard/tags/${tag.id}`">
+										{{ tag.name }}
+									</router-link>
 								</h4>
 								<span>{{ tag.count || 0 }} files</span>
 							</div>
@@ -205,19 +214,19 @@ import Sidebar from '~/components/sidebar/Sidebar.vue';
 
 export default {
 	components: {
-		Sidebar
+		Sidebar,
 	},
 	middleware: 'auth',
 	data() {
 		return {
 			tags: [],
-			newTagName: null
+			newTagName: null,
 		};
 	},
 	computed: {
 		config() {
 			return this.$store.state.config;
-		}
+		},
 	},
 	metaInfo() {
 		return { title: 'Tags' };
@@ -230,7 +239,7 @@ export default {
 			this.$buefy.dialog.confirm({
 				type: 'is-danger',
 				message: 'Are you sure you want to delete this tag?',
-				onConfirm: () => this.promptPurgeTag(id)
+				onConfirm: () => this.promptPurgeTag(id),
 			});
 		},
 		promptPurgeTag(id) {
@@ -240,7 +249,7 @@ export default {
 				cancelText: 'No',
 				confirmText: 'Yes',
 				onConfirm: () => this.deleteTag(id, true),
-				onCancel: () => this.deleteTag(id, false)
+				onCancel: () => this.deleteTag(id, false),
 			});
 		},
 		async deleteTag(id, purge) {
@@ -250,19 +259,19 @@ export default {
 		},
 		async createTag() {
 			if (!this.newTagName || this.newTagName === '') return;
-			const response = await this.$axios.$post(`tag/new`,
+			const response = await this.$axios.$post('tag/new',
 				{ name: this.newTagName });
 			this.newTagName = null;
 			this.$buefy.toast.open(response.message);
 			this.getTags();
 		},
 		async getTags() {
-			const response = await this.$axios.$get(`tags`);
+			const response = await this.$axios.$get('tags');
 			for (const tag of response.tags) {
 				tag.isDetailsOpen = false;
 			}
 			this.tags = response.tags;
-		}
-	}
+		},
+	},
 };
 </script>
diff --git a/src/site/pages/faq.vue b/src/site/pages/faq.vue
index bb84a7d..85e8744 100644
--- a/src/site/pages/faq.vue
+++ b/src/site/pages/faq.vue
@@ -1,34 +1,45 @@
 <template>
+	<!-- eslint-disable max-len -->
 	<div class="container has-text-left">
-		<h2 class="subtitle">What is lolisafe?</h2>
+		<h2 class="subtitle">
+			What is lolisafe?
+		</h2>
 		<article class="message">
 			<div class="message-body">
 				lolisafe is an easy to use, open source and completely free file upload service. We accept your files, photos, documents, anything, and give you back a shareable link for you to send to others.
 			</div>
 		</article>
 
-		<h2 class="subtitle">Can I run my own lolisafe?</h2>
+		<h2 class="subtitle">
+			Can I run my own lolisafe?
+		</h2>
 		<article class="message">
 			<div class="message-body">
 				Definitely. Head to <a target="_blank" href="https://github.com/WeebDev/lolisafe">our GitHub repo</a> and follow the instructions to clone, build and deploy it by yourself. It's super easy too!
 			</div>
 		</article>
 
-		<h2 class="subtitle">How can I keep track of my uploads?</h2>
+		<h2 class="subtitle">
+			How can I keep track of my uploads?
+		</h2>
 		<article class="message">
 			<div class="message-body">
 				Simply create a user on the site and every upload will be associated with your account, granting you access to your uploaded files through our dashboard.
 			</div>
 		</article>
 
-		<h2 class="subtitle">What are albums?</h2>
+		<h2 class="subtitle">
+			What are albums?
+		</h2>
 		<article class="message">
 			<div class="message-body">
 				Albums are a simple way of sorting uploads together. Right now you can create albums through the dashboard and use them only with <a target="_blank" href="https://chrome.google.com/webstore/detail/loli-safe-uploader/enkkmplljfjppcdaancckgilmgoiofnj">our chrome extension</a> which will enable you to <strong>right click -&gt; send to lolisafe</strong> or to a desired album if you have any.
 			</div>
 		</article>
 
-		<h2 class="subtitle">Why should I use this?</h2>
+		<h2 class="subtitle">
+			Why should I use this?
+		</h2>
 		<article class="message">
 			<div class="message-body">
 				There are too many file upload services out there, and a lot of them rely on the foundations of pomf which is ancient. In a desperate and unsuccessful attempt of finding a good file uploader that's easily extendable, lolisafe was born. We give you control over your files, we give you a way to sort your uploads into albums for ease of access and we give you an api to use with ShareX or any other thing that let's you make POST requests.
@@ -45,7 +56,7 @@ export default {
 	},
 	metaInfo() {
 		return { title: 'Faq' };
-	}
+	},
 };
 </script>
 
diff --git a/src/site/pages/index.vue b/src/site/pages/index.vue
index c8fb7b8..a28eea4 100644
--- a/src/site/pages/index.vue
+++ b/src/site/pages/index.vue
@@ -11,6 +11,7 @@
 					<div class="content-wrapper">
 						<h4>Blazing fast file uploader. <br>For real.</h4>
 						<p>
+							<!-- eslint-disable-next-line max-len -->
 							A <strong>modern</strong> and <strong>self-hosted</strong> file upload service that can handle anything you throw at it. Fast uploads, file manager and sharing capabilities all crafted with a beautiful user experience in mind.
 						</p>
 					</div>
diff --git a/src/site/pages/register.vue b/src/site/pages/register.vue
index 92eb35a..1216dc1 100644
--- a/src/site/pages/register.vue
+++ b/src/site/pages/register.vue
@@ -10,18 +10,21 @@
 			<div class="columns">
 				<div class="column is-4 is-offset-4">
 					<b-field>
-						<b-input v-model="username"
+						<b-input
+							v-model="username"
 							type="text"
 							placeholder="Username" />
 					</b-field>
 					<b-field>
-						<b-input v-model="password"
+						<b-input
+							v-model="password"
 							type="password"
 							placeholder="Password"
 							password-reveal />
 					</b-field>
 					<b-field>
-						<b-input v-model="rePassword"
+						<b-input
+							v-model="rePassword"
 							type="password"
 							placeholder="Re-type Password"
 							password-reveal
@@ -29,11 +32,17 @@
 					</b-field>
 
 					<p class="control has-addons is-pulled-right">
-						<router-link to="/login"
-							class="is-text">Already have an account?</router-link>
-						<button class="button is-primary big ml1"
+						<router-link
+							to="/login"
+							class="is-text">
+							Already have an account?
+						</router-link>
+						<button
+							class="button is-primary big ml1"
 							:disabled="isLoading"
-							@click="register">Register</button>
+							@click="register">
+							Register
+						</button>
 					</p>
 				</div>
 			</div>
@@ -51,7 +60,7 @@ export default {
 			username: null,
 			password: null,
 			rePassword: null,
-			isLoading: false
+			isLoading: false,
 		};
 	},
 	computed: mapState(['config', 'auth']),
@@ -64,23 +73,23 @@ export default {
 			if (!this.username || !this.password || !this.rePassword) {
 				this.$store.dispatch('alert', {
 					text: 'Please fill all fields before attempting to register.',
-					error: true
+					error: true,
 				});
 				return;
 			}
 			if (this.password !== this.rePassword) {
 				this.$store.dispatch('alert', {
 					text: "Passwords don't match",
-					error: true
+					error: true,
 				});
 				return;
 			}
 			this.isLoading = true;
 
 			try {
-				const response = await this.$axios.$post(`auth/register`, {
+				const response = await this.$axios.$post('auth/register', {
 					username: this.username,
-					password: this.password
+					password: this.password,
 				});
 
 				this.$store.dispatch('alert', { text: response.message });
@@ -90,7 +99,7 @@ export default {
 			} finally {
 				this.isLoading = false;
 			}
-		}
-	}
+		},
+	},
 };
 </script>
diff --git a/src/site/plugins/axios.js b/src/site/plugins/axios.js
index 2f4a169..378f922 100644
--- a/src/site/plugins/axios.js
+++ b/src/site/plugins/axios.js
@@ -1,25 +1,25 @@
-export default function({ $axios, store }) {
+export default function ({ $axios, store }) {
 	$axios.setHeader('accept', 'application/vnd.lolisafe.json');
 
-	$axios.onRequest(config => {
+	$axios.onRequest((config) => {
 		if (store.state.auth.token) {
-			config.headers.common['Authorization'] = `bearer ${store.state.auth.token}`;
+			config.headers.common.Authorization = `bearer ${store.state.auth.token}`;
 		}
 	});
 
-	$axios.onError(error => {
+	$axios.onError((error) => {
 		if (process.env.NODE_ENV !== 'production') console.error('[AXIOS Error]', error);
 		if (process.browser) {
 			if (process.env.NODE_ENV !== 'production') {
 				if (error.response?.data?.message) {
 					store.dispatch('alert/set', {
 						text: error.response.data.message,
-						error: true
+						error: true,
 					});
 				} else {
 					store.dispatch('alert/set', {
 						text: `[AXIOS]: ${error.message}`,
-						error: true
+						error: true,
 					});
 				}
 			}
diff --git a/src/site/plugins/flexsearch.js b/src/site/plugins/flexsearch.js
index 595b180..8640232 100644
--- a/src/site/plugins/flexsearch.js
+++ b/src/site/plugins/flexsearch.js
@@ -1,16 +1,17 @@
 import Vue from 'vue';
 import FlexSearch from 'flexsearch';
+
 const search = new FlexSearch('speed');
 
 // https://github.com/nextapps-de/flexsearch
 
 Vue.prototype.$search = {
-	items: async items => {
+	items: async (items) => {
 		await search.clear();
 		await search.add(items);
 	},
 	do: async (term, field) => {
 		const results = await search.search(term, { field });
 		return results;
-	}
+	},
 };
diff --git a/src/site/plugins/nuxt-client-init.js b/src/site/plugins/nuxt-client-init.js
index 4b10dcd..01f33ff 100644
--- a/src/site/plugins/nuxt-client-init.js
+++ b/src/site/plugins/nuxt-client-init.js
@@ -1,3 +1,3 @@
-export default async ctx => {
+export default async (ctx) => {
 	await ctx.store.dispatch('nuxtClientInit', ctx);
 };
diff --git a/src/site/plugins/vue-isyourpasswordsafe.js b/src/site/plugins/vue-isyourpasswordsafe.js
index 6172ca0..68f313a 100644
--- a/src/site/plugins/vue-isyourpasswordsafe.js
+++ b/src/site/plugins/vue-isyourpasswordsafe.js
@@ -3,5 +3,5 @@ import VueIsYourPasswordSafe from 'vue-isyourpasswordsafe';
 
 Vue.use(VueIsYourPasswordSafe, {
 	minLength: 6,
-	maxLength: 64
+	maxLength: 64,
 });
diff --git a/src/site/plugins/vue-timeago.js b/src/site/plugins/vue-timeago.js
index 28f3c6d..81e6e75 100644
--- a/src/site/plugins/vue-timeago.js
+++ b/src/site/plugins/vue-timeago.js
@@ -4,5 +4,5 @@ import VueTimeago from 'vue-timeago';
 Vue.use(VueTimeago, {
 	name: 'timeago',
 	locale: 'en-US',
-	locales: { 'en-US': require('vue-timeago/locales/en-US.json') }
+	locales: { 'en-US': require('vue-timeago/locales/en-US.json') },
 });
diff --git a/src/site/store/auth.js b/src/site/store/auth.js
index 286d321..fcc051b 100644
--- a/src/site/store/auth.js
+++ b/src/site/store/auth.js
@@ -49,6 +49,8 @@ export const actions = {
 		} catch (e) {
 			dispatch('alert/set', { text: e.message, error: true }, { root: true });
 		}
+
+		return null;
 	},
 	async requestAPIKey({ commit, dispatch }) {
 		try {
@@ -59,6 +61,8 @@ export const actions = {
 		} catch (e) {
 			dispatch('alert/set', { text: e.message, error: true }, { root: true });
 		}
+
+		return null;
 	},
 	logout({ commit }) {
 		commit('logout');
-- 
cgit v1.2.3


From 495a23c3a53b8f1e9f885163129d962cbd3e8c2b Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Thu, 9 Jul 2020 02:21:35 +0300
Subject: =?UTF-8?q?feat:=20add=20notifier=20plugin=20for=20=F0=9F=90=8D=20?=
 =?UTF-8?q?and=20=F0=9F=8D=9E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/site/layouts/default.vue | 29 +++++++++++++++++++----------
 src/site/plugins/notifier.js | 22 ++++++++++++++++++++--
 2 files changed, 39 insertions(+), 12 deletions(-)

(limited to 'src/site')

diff --git a/src/site/layouts/default.vue b/src/site/layouts/default.vue
index 13a56c0..0049b88 100644
--- a/src/site/layouts/default.vue
+++ b/src/site/layouts/default.vue
@@ -21,19 +21,28 @@ export default {
 		Navbar,
 		Footer,
 	},
-	computed: mapState(['config']),
+	computed: mapState(['config', 'alert']),
 	created() {
-		this.$store.watch((state) => state.alert.text, () => {
-			const { text, error } = this.$store.state.alert;
+		this.$store.watch((state) => state.alert.message, () => {
+			const { message, type, snackbar } = this.alert;
 
-			if (!text) return;
+			if (!message) return;
 
-			this.$buefy.toast.open({
-				duration: 3500,
-				message: text,
-				position: 'is-bottom',
-				type: error ? 'is-danger' : 'is-success',
-			});
+			if (snackbar) {
+				this.$buefy.snackbar.open({
+					duration: 3500,
+					position: 'is-bottom',
+					message,
+					type,
+				});
+			} else {
+				this.$buefy.toast.open({
+					duration: 3500,
+					position: 'is-bottom',
+					message,
+					type,
+				});
+			}
 
 			this.$store.dispatch('alert/clear', null);
 		});
diff --git a/src/site/plugins/notifier.js b/src/site/plugins/notifier.js
index f37b96e..4fe1262 100644
--- a/src/site/plugins/notifier.js
+++ b/src/site/plugins/notifier.js
@@ -1,7 +1,25 @@
+import AlertTypes from '~/constants/alertTypes';
+
 export default ({ store }, inject) => {
 	inject('notifier', {
-		showMessage({ content = '', type = '' }) {
-			store.commit('alert/set', { content, type });
+		showMessage({ message = '', type = '', snackbar = false }) {
+			store.commit('alert/set', { message, type, snackbar });
 		},
+		message(message, snackbar) {
+			this.showMessage({ message, type: AlertTypes.PRIMARY, snackbar });
+		},
+		info(message, snackbar) {
+			this.showMessage({ message, type: AlertTypes.INFO, snackbar });
+		},
+		warning(message, snackbar) {
+			this.showMessage({ message, type: AlertTypes.WARNING, snackbar });
+		},
+		success(message, snackbar) {
+			this.showMessage({ message, type: AlertTypes.SUCCESS, snackbar });
+		},
+		error(message, snackbar) {
+			this.showMessage({ message, type: AlertTypes.ERROR, snackbar });
+		},
+		types: AlertTypes,
 	});
 };
-- 
cgit v1.2.3


From 704578e964741da85b29eeb32cb7e447c3a4c19b Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Thu, 9 Jul 2020 02:22:48 +0300
Subject: feat: add handler for actions
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Takes care of dispatching a 🍞 on success/error
---
 src/site/plugins/handler.js | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)
 create mode 100644 src/site/plugins/handler.js

(limited to 'src/site')

diff --git a/src/site/plugins/handler.js b/src/site/plugins/handler.js
new file mode 100644
index 0000000..3d85b15
--- /dev/null
+++ b/src/site/plugins/handler.js
@@ -0,0 +1,25 @@
+import AlertTypes from '~/constants/alertTypes';
+
+export default ({ store }, inject) => {
+	inject('handler', {
+		async executeAction(action, param) {
+			try {
+				const response = await store.dispatch(action, param);
+
+				store.commit('alert/set', {
+					message: response?.message ?? 'Executed sucesfully',
+					type: AlertTypes.SUCCESS,
+				});
+
+				return response;
+			} catch (e) {
+				store.commit('alert/set', {
+					message: e.message,
+					type: AlertTypes.ERROR,
+				});
+
+				return null;
+			}
+		},
+	});
+};
-- 
cgit v1.2.3


From 5ded974ef98caf0b8c9160938ff55dc101c718ee Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Thu, 9 Jul 2020 02:23:19 +0300
Subject: feat: add lolisafe as a color to bulma instead of doing weird hacks

---
 src/site/assets/styles/_bulma_colors_extender.scss | 16 ++++++++++++++++
 src/site/assets/styles/style.scss                  |  5 +++--
 2 files changed, 19 insertions(+), 2 deletions(-)
 create mode 100644 src/site/assets/styles/_bulma_colors_extender.scss

(limited to 'src/site')

diff --git a/src/site/assets/styles/_bulma_colors_extender.scss b/src/site/assets/styles/_bulma_colors_extender.scss
new file mode 100644
index 0000000..69dbd1e
--- /dev/null
+++ b/src/site/assets/styles/_bulma_colors_extender.scss
@@ -0,0 +1,16 @@
+// Import the initial variables
+@import "../../../node_modules/bulma/sass/utilities/initial-variables";
+@import "../../../node_modules/bulma/sass/utilities/functions";
+
+// Setup our custom colors
+$lolisafe: #323846;
+$lolisafe-invert: findColorInvert($lolisafe);
+
+// XXX: EXPERIMENTAL, CHECK IF WE NEED ORIGINAL PRIMARY ANYWHERE
+// $primary: $lolisafe;
+// $primary-invert: $lolisafe-invert;
+
+// declare custom colors
+$custom-colors: (
+  "lolisafe":($lolisafe, $lolisafe-invert)
+);
diff --git a/src/site/assets/styles/style.scss b/src/site/assets/styles/style.scss
index 0ebba4c..202e02a 100644
--- a/src/site/assets/styles/style.scss
+++ b/src/site/assets/styles/style.scss
@@ -1,4 +1,5 @@
 // Let's first take care of having the customized colors ready.
+@import './_bulma_colors_extender.scss';
 @import './_colors.scss';
 
 // Bulma/Buefy customization
@@ -221,7 +222,7 @@ section#register a.is-text {
 		color: $textColor;
 	}
 }
-button.button.is-primary {
+/* button.button.is-primary {
 	background-color: #323846;
 	border: 2px solid #21252d;
 	color: $textColor;
@@ -235,7 +236,7 @@ button.button.is-primary {
 	&.big {
 		font-size: 1.25rem;
 	}
-}
+} */
 svg.waves {
 	display: block;
 	bottom: -1px;
-- 
cgit v1.2.3


From fd3f6de51a082dcd72c2ef557747e031ef7b9c4a Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Thu, 9 Jul 2020 02:24:40 +0300
Subject: refactor: refactor most of the admin pages to use the store instead
 of internal states

---
 src/site/pages/dashboard/account.vue        | 22 ++++---
 src/site/pages/dashboard/admin/user/_id.vue | 66 +++++++++++---------
 src/site/pages/dashboard/admin/users.vue    | 66 ++++++++++----------
 src/site/pages/dashboard/albums/_id.vue     |  6 +-
 src/site/pages/dashboard/index.vue          |  6 +-
 src/site/pages/dashboard/tags/index.vue     |  6 +-
 src/site/pages/login.vue                    | 47 +++++++++------
 src/site/pages/register.vue                 | 57 ++++++++++--------
 src/site/store/admin.js                     | 93 +++++++++++++++++++++++++++++
 src/site/store/alert.js                     | 18 ++++--
 src/site/store/auth.js                      | 10 +++-
 src/site/store/images.js                    |  2 +-
 12 files changed, 263 insertions(+), 136 deletions(-)

(limited to 'src/site')

diff --git a/src/site/pages/dashboard/account.vue b/src/site/pages/dashboard/account.vue
index fb8b273..31ec8af 100644
--- a/src/site/pages/dashboard/account.vue
+++ b/src/site/pages/dashboard/account.vue
@@ -52,11 +52,11 @@
 					</b-field>
 
 					<div class="mb2 mt2 text-center">
-						<button
-							class="button is-primary"
+						<b-button
+							type="is-lolisafe"
 							@click="changePassword">
 							Change password
-						</button>
+						</b-button>
 					</div>
 
 					<b-field
@@ -69,19 +69,21 @@
 								expanded
 								disabled />
 							<p class="control">
-								<button class="button is-primary">
+								<b-button
+									type="is-lolisafe"
+									@click="copyKey">
 									Copy
-								</button>
+								</b-button>
 							</p>
 						</b-field>
 					</b-field>
 
 					<div class="mb2 mt2 text-center">
-						<button
-							class="button is-primary"
+						<b-button
+							type="is-lolisafe"
 							@click="promptNewAPIKey">
 							Request new API key
-						</button>
+						</b-button>
 					</div>
 				</div>
 			</div>
@@ -154,6 +156,10 @@ export default {
 				onConfirm: () => this.requestNewAPIKey(),
 			});
 		},
+		copyKey() {
+			this.$clipboard(this.apiKey);
+			this.$notifier.success('API key copied to clipboard');
+		},
 		async requestNewAPIKey() {
 			const response = await this.$store.dispatch('auth/requestAPIKey');
 			this.$buefy.toast.open(response.message);
diff --git a/src/site/pages/dashboard/admin/user/_id.vue b/src/site/pages/dashboard/admin/user/_id.vue
index 1755b89..7814468 100644
--- a/src/site/pages/dashboard/admin/user/_id.vue
+++ b/src/site/pages/dashboard/admin/user/_id.vue
@@ -41,20 +41,27 @@
 					<b-field
 						label="Files"
 						horizontal>
-						<span>{{ files.length }}</span>
+						<span>{{ user.files.length }}</span>
 					</b-field>
 
 					<div class="mb2 mt2 text-center">
-						<button
-							class="button is-danger"
+						<b-button
+							v-if="user.enabled"
+							type="is-danger"
 							@click="promptDisableUser">
 							Disable user
-						</button>
+						</b-button>
+						<b-button
+							v-if="!user.enabled"
+							type="is-success"
+							@click="promptEnableUser">
+							Enable user
+						</b-button>
 					</div>
 
 					<Grid
-						v-if="files.length"
-						:files="files" />
+						v-if="user.files.length"
+						:files="user.files" />
 				</div>
 			</div>
 		</div>
@@ -62,6 +69,7 @@
 </template>
 
 <script>
+import { mapState } from 'vuex';
 import Sidebar from '~/components/sidebar/Sidebar.vue';
 import Grid from '~/components/grid/Grid.vue';
 
@@ -70,42 +78,42 @@ export default {
 		Sidebar,
 		Grid,
 	},
-	middleware: ['auth', 'admin'],
+	middleware: ['auth', 'admin', ({ route, store }) => {
+		try {
+			store.dispatch('admin/fetchUser', route.params.id);
+		} catch (e) {
+			// eslint-disable-next-line no-console
+			console.error(e);
+		}
+	}],
 	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,
-			};
-		}
-	},
+	computed: mapState({
+		user: (state) => state.admin.user,
+	}),
 	methods: {
 		promptDisableUser() {
 			this.$buefy.dialog.confirm({
 				type: 'is-danger',
-				message: 'Are you sure you want to disable the account of the user that uploaded this file?',
+				message: 'Are you sure you want to disable the account of this user?',
 				onConfirm: () => this.disableUser(),
 			});
 		},
-		async disableUser() {
-			const response = await this.$axios.$post('admin/users/disable', {
-				id: this.user.id,
+		promptEnableUser() {
+			this.$buefy.dialog.confirm({
+				type: 'is-danger',
+				message: 'Are you sure you want to enable the account of this user?',
+				onConfirm: () => this.enableUser(),
 			});
-			this.$buefy.toast.open(response.message);
+		},
+		disableUser() {
+			this.$handler.executeAction('admin/disableUser', this.user.id);
+		},
+		enableUser() {
+			this.$handler.executeAction('admin/enableUser', this.user.id);
 		},
 	},
 };
diff --git a/src/site/pages/dashboard/admin/users.vue b/src/site/pages/dashboard/admin/users.vue
index 269946c..bed4c2b 100644
--- a/src/site/pages/dashboard/admin/users.vue
+++ b/src/site/pages/dashboard/admin/users.vue
@@ -13,7 +13,7 @@
 
 					<div class="view-container">
 						<b-table
-							:data="users || []"
+							:data="users"
 							:mobile-cards="true">
 							<template slot-scope="props">
 								<b-table-column
@@ -37,7 +37,7 @@
 									label="Enabled"
 									centered>
 									<b-switch
-										v-model="props.row.enabled"
+										:value="props.row.enabled"
 										@input="changeEnabledStatus(props.row)" />
 								</b-table-column>
 
@@ -46,18 +46,18 @@
 									label="Admin"
 									centered>
 									<b-switch
-										v-model="props.row.isAdmin"
+										:value="props.row.isAdmin"
 										@input="changeIsAdmin(props.row)" />
 								</b-table-column>
 
 								<b-table-column
 									field="purge"
 									centered>
-									<button
-										class="button is-primary"
+									<b-button
+										type="is-danger"
 										@click="promptPurgeFiles(props.row)">
 										Purge files
-									</button>
+									</b-button>
 								</b-table-column>
 							</template>
 							<template slot="empty">
@@ -82,45 +82,42 @@
 </template>
 
 <script>
+import { mapState } from 'vuex';
 import Sidebar from '~/components/sidebar/Sidebar.vue';
 
 export default {
 	components: {
 		Sidebar,
 	},
-	middleware: ['auth', 'admin'],
-	data() {
-		return {
-			users: [],
-		};
-	},
-	computed: {
-		config() {
-			return this.$store.state.config;
-		},
-	},
+	middleware: ['auth', 'admin', ({ route, store }) => {
+		try {
+			store.dispatch('admin/fetchUsers', route.params.id);
+		} catch (e) {
+			// eslint-disable-next-line no-console
+			console.error(e);
+		}
+	}],
+	computed: mapState({
+		users: (state) => state.admin.users,
+		config: (state) => state.config,
+	}),
 	metaInfo() {
 		return { title: 'Uploads' };
 	},
-	mounted() {
-		this.getUsers();
-	},
 	methods: {
-		async getUsers() {
-			const response = await this.$axios.$get('admin/users');
-			this.users = response.users;
-		},
 		async changeEnabledStatus(row) {
-			const response = await this.$axios.$post(`admin/users/${row.enabled ? 'enable' : 'disable'}`, {
-				id: row.id,
-			});
-			this.$buefy.toast.open(response.message);
+			if (row.enabled) {
+				this.$handler.executeAction('admin/disableUser', row.id);
+			} else {
+				this.$handler.executeAction('admin/enableUser', row.id);
+			}
 		},
 		async changeIsAdmin(row) {
-			const response = await this.$axios.$post(`admin/users/${row.isAdmin ? 'promote' : 'demote'}`, {
-				id: row.id,
-			});
-			this.$buefy.toast.open(response.message);
+			if (row.isAdmin) {
+				this.$handler.executeAction('admin/demoteUser', row.id);
+			} else {
+				this.$handler.executeAction('admin/promoteUser', row.id);
+			}
 		},
 		promptPurgeFiles(row) {
 			this.$buefy.dialog.confirm({
@@ -129,10 +126,7 @@ export default {
 			});
 		},
 		async purgeFiles(row) {
-			const response = await this.$axios.$post('admin/users/purge', {
-				id: row.id,
-			});
-			this.$buefy.toast.open(response.message);
+			this.$handler.executeAction('admin/purgeUserFiles', row.id);
 		},
 	},
 };
diff --git a/src/site/pages/dashboard/albums/_id.vue b/src/site/pages/dashboard/albums/_id.vue
index b25762e..a909e75 100644
--- a/src/site/pages/dashboard/albums/_id.vue
+++ b/src/site/pages/dashboard/albums/_id.vue
@@ -30,11 +30,9 @@
 										placeholder="Search"
 										type="search" />
 									<p class="control">
-										<button
-											outlined
-											class="button is-primary">
+										<b-button type="is-lolisafe">
 											Search
-										</button>
+										</b-button>
 									</p>
 								</b-field>
 							</div>
diff --git a/src/site/pages/dashboard/index.vue b/src/site/pages/dashboard/index.vue
index 2f06c7e..08c5166 100644
--- a/src/site/pages/dashboard/index.vue
+++ b/src/site/pages/dashboard/index.vue
@@ -21,11 +21,9 @@
 										placeholder="Search"
 										type="search" />
 									<p class="control">
-										<button
-											outlined
-											class="button is-primary">
+										<b-button type="is-lolisafe">
 											Search
-										</button>
+										</b-button>
 									</p>
 								</b-field>
 							</div>
diff --git a/src/site/pages/dashboard/tags/index.vue b/src/site/pages/dashboard/tags/index.vue
index 10193a8..a9c5756 100644
--- a/src/site/pages/dashboard/tags/index.vue
+++ b/src/site/pages/dashboard/tags/index.vue
@@ -144,11 +144,11 @@
 								type="text"
 								@keyup.enter.native="createTag" />
 							<p class="control">
-								<button
-									class="button is-primary"
+								<b-button
+									type="is-lolisafe"
 									@click="createTag">
 									Create tags
-								</button>
+								</b-button>
 							</p>
 						</b-field>
 					</div>
diff --git a/src/site/pages/login.vue b/src/site/pages/login.vue
index 9e5658d..569e9d9 100644
--- a/src/site/pages/login.vue
+++ b/src/site/pages/login.vue
@@ -25,20 +25,32 @@
 							@keyup.enter.native="login" />
 					</b-field>
 
-					<p class="control has-addons is-pulled-right">
-						<router-link
-							v-if="config.userAccounts"
-							to="/register"
-							class="is-text">
-							Don't have an account?
-						</router-link>
-						<span v-else>Registration is closed at the moment</span>
-						<button
-							class="button is-primary big ml1"
-							@click="login">
-							login
-						</button>
-					</p>
+					<p class="control has-addons is-pulled-right" />
+
+					<div class="level">
+						<div class="level-left">
+							<div class="level-item">
+								<router-link
+									v-if="config.userAccounts"
+									to="/register"
+									class="is-text">
+									Don't have an account?
+								</router-link>
+								<span v-else>Registration is closed at the moment</span>
+							</div>
+						</div>
+
+						<div class="level-right">
+							<p class="level-item">
+								<b-button
+									size="is-medium"
+									type="is-lolisafe"
+									@click="login">
+									Login
+								</b-button>
+							</p>
+						</div>
+					</div>
 				</div>
 			</div>
 		</div>
@@ -99,10 +111,7 @@ export default {
 
 			const { username, password } = this;
 			if (!username || !password) {
-				this.$store.dispatch('alert/set', {
-					text: 'Please fill both fields before attempting to log in.',
-					error: true,
-				});
+				this.$notifier.error('Please fill both fields before attempting to log in.');
 				return;
 			}
 
@@ -113,7 +122,7 @@ export default {
 					this.redirect();
 				}
 			} catch (e) {
-				this.$store.dispatch('alert/set', { text: e.message, error: true }, { root: true });
+				this.$notifier.error(e.message);
 			} finally {
 				this.isLoading = false;
 			}
diff --git a/src/site/pages/register.vue b/src/site/pages/register.vue
index 1216dc1..7cf4573 100644
--- a/src/site/pages/register.vue
+++ b/src/site/pages/register.vue
@@ -31,19 +31,30 @@
 							@keyup.enter.native="register" />
 					</b-field>
 
-					<p class="control has-addons is-pulled-right">
-						<router-link
-							to="/login"
-							class="is-text">
-							Already have an account?
-						</router-link>
-						<button
-							class="button is-primary big ml1"
-							:disabled="isLoading"
-							@click="register">
-							Register
-						</button>
-					</p>
+					<div class="level">
+						<!-- Left side -->
+						<div class="level-left">
+							<div class="level-item">
+								<router-link
+									to="/login"
+									class="is-text">
+									Already have an account?
+								</router-link>
+							</div>
+						</div>
+						<!-- Right side -->
+						<div class="level-right">
+							<p class="level-item">
+								<b-button
+									size="is-medium"
+									type="is-lolisafe"
+									:disabled="isLoading"
+									@click="register">
+									Register
+								</b-button>
+							</p>
+						</div>
+					</div>
 				</div>
 			</div>
 		</div>
@@ -70,32 +81,28 @@ export default {
 	methods: {
 		async register() {
 			if (this.isLoading) return;
+
 			if (!this.username || !this.password || !this.rePassword) {
-				this.$store.dispatch('alert', {
-					text: 'Please fill all fields before attempting to register.',
-					error: true,
-				});
+				this.$notifier.error('Please fill all fields before attempting to register.');
 				return;
 			}
 			if (this.password !== this.rePassword) {
-				this.$store.dispatch('alert', {
-					text: "Passwords don't match",
-					error: true,
-				});
+				this.$notifier.error('Passwords don\'t match');
 				return;
 			}
 			this.isLoading = true;
 
 			try {
-				const response = await this.$axios.$post('auth/register', {
+				const response = await this.$store.dispatch('auth/register', {
 					username: this.username,
 					password: this.password,
 				});
 
-				this.$store.dispatch('alert', { text: response.message });
-				return this.$router.push('/login');
+				this.$notifier.success(response.message);
+				this.$router.push('/login');
+				return;
 			} catch (error) {
-				//
+				this.$notifier.error(error.message);
 			} finally {
 				this.isLoading = false;
 			}
diff --git a/src/site/store/admin.js b/src/site/store/admin.js
index e69de29..2586a18 100644
--- a/src/site/store/admin.js
+++ b/src/site/store/admin.js
@@ -0,0 +1,93 @@
+export const state = () => ({
+	users: [],
+	user: {
+		id: null,
+		username: null,
+		enabled: false,
+		createdAt: null,
+		editedAt: null,
+		apiKeyEditedAt: null,
+		isAdmin: null,
+		files: [],
+	},
+	file: {},
+	settings: {},
+});
+
+export const actions = {
+	async fetchUsers({ commit }) {
+		const response = await this.$axios.$get('admin/users');
+		commit('setUsers', response);
+
+		return response;
+	},
+	async fetchUser({ commit }, id) {
+		const response = await this.$axios.$get(`/admin/users/${id}`);
+		commit('setUserInfo', response);
+
+		return response;
+	},
+	async enableUser({ commit }, id) {
+		const response = await this.$axios.$post('admin/users/enable', { id });
+
+		commit('changeUserState', { userId: id, enabled: true });
+
+		return response;
+	},
+	async disableUser({ commit }, id) {
+		const response = await this.$axios.$post('admin/users/disable', { id });
+
+		commit('changeUserState', { userId: id, enabled: false });
+
+		return response;
+	},
+	async promoteUser({ commit }, id) {
+		const response = await this.$axios.$post('admin/users/promote', { id });
+
+		commit('changeUserState', { userId: id, isAdmin: true });
+
+		return response;
+	},
+	async demoteUser({ commit }, id) {
+		const response = await this.$axios.$post('admin/users/demote', { id });
+
+		commit('changeUserState', { userId: id, isAdmin: false });
+
+		return response;
+	},
+	async purgeUserFiles(_, id) {
+		const response = await this.$axios.$post('admin/users/purge', { id });
+
+		return response;
+	},
+};
+
+export const mutations = {
+	setUsers(state, { users }) {
+		state.users = users;
+	},
+	setUserInfo(state, { user, files }) {
+		state.user = { ...state.user, ...user };
+		state.user.files = files || [];
+	},
+	changeUserState(state, { userId, enabled, isAdmin }) {
+		const foundIndex = state.users.findIndex(({ id }) => id === userId);
+		if (foundIndex > -1) {
+			if (enabled !== undefined) {
+				state.users[foundIndex].enabled = enabled;
+			}
+			if (isAdmin !== undefined) {
+				state.users[foundIndex].isAdmin = isAdmin;
+			}
+		}
+
+		if (state.user.id === userId) {
+			if (enabled !== undefined) {
+				state.user.enabled = enabled;
+			}
+			if (isAdmin !== undefined) {
+				state.user.isAdmin = isAdmin;
+			}
+		}
+	},
+};
diff --git a/src/site/store/alert.js b/src/site/store/alert.js
index ff38e09..580dcc8 100644
--- a/src/site/store/alert.js
+++ b/src/site/store/alert.js
@@ -1,12 +1,19 @@
+import AlertTypes from '~/constants/alertTypes';
+
 const getDefaultState = () => ({
-	text: null,
-	error: false,
+	message: null,
+	type: null,
+	snackbar: false,
 });
 
 export const state = getDefaultState;
 
 export const actions = {
 	set({ commit }, data) {
+		// Only exists for backwards compatibility, remove one day
+		if (data.error === true) data.type = AlertTypes.ERROR;
+		if (data.text !== undefined) data.message = data.text;
+
 		commit('set', data);
 	},
 	clear({ commit }) {
@@ -15,9 +22,10 @@ export const actions = {
 };
 
 export const mutations = {
-	set(state, { text, error }) {
-		state.text = text;
-		state.error = error;
+	set(state, { message, type, snackbar }) {
+		state.message = message;
+		state.type = type;
+		state.snackbar = snackbar || false;
 	},
 	clear(state) {
 		Object.assign(state, getDefaultState());
diff --git a/src/site/store/auth.js b/src/site/store/auth.js
index fcc051b..465de7d 100644
--- a/src/site/store/auth.js
+++ b/src/site/store/auth.js
@@ -30,6 +30,12 @@ export const actions = {
 		commit('setToken', data.token);
 		commit('loginSuccess', { token: data.token, user: data.user });
 	},
+	async register(_, { username, password }) {
+		return this.$axios.$post('auth/register', {
+			username,
+			password,
+		});
+	},
 	async fetchCurrentUser({ commit, dispatch }) {
 		try {
 			const data = await this.$axios.$get('users/me');
@@ -83,13 +89,13 @@ export const mutations = {
 		state.isLoading = true;
 	},
 	loginSuccess(state, { user }) {
-		this.$cookies.set('token', state.token);
+		this.$cookies.set('token', state.token, { path: '/' });
 		state.user = user;
 		state.loggedIn = true;
 		state.isLoading = false;
 	},
 	logout(state) {
-		this.$cookies.remove('token');
+		this.$cookies.remove('token', { path: '/' });
 		// reset state to default
 		Object.assign(state, getDefaultState());
 	},
diff --git a/src/site/store/images.js b/src/site/store/images.js
index 3019d85..a7581e0 100644
--- a/src/site/store/images.js
+++ b/src/site/store/images.js
@@ -10,7 +10,7 @@ export const getDefaultState = () => ({
 	},
 	name: null,
 	downloadEnabled: false,
-	filesAlbums: {},
+	filesAlbums: {}, // map of file ids with a list of album objects the file is in
 });
 
 export const state = getDefaultState;
-- 
cgit v1.2.3


From 0f66d807035d3e32a66c7dc9bf55fb3be99aedac Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Fri, 10 Jul 2020 01:13:51 +0300
Subject: refactor: finish refactoring all the components to use vuex

---
 src/site/components/grid/Grid.vue           |  2 +-
 src/site/components/sidebar/Sidebar.vue     |  2 +-
 src/site/pages/dashboard/admin/file/_id.vue | 85 ++++++++++++-----------------
 src/site/pages/dashboard/admin/settings.vue | 50 ++++++++---------
 src/site/plugins/axios.js                   |  4 +-
 src/site/store/admin.js                     | 31 ++++++++++-
 src/site/store/auth.js                      |  6 +-
 src/site/store/images.js                    | 15 ++---
 8 files changed, 105 insertions(+), 90 deletions(-)

(limited to 'src/site')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index 84c0b11..90c196b 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -287,7 +287,7 @@ export default {
 			} catch (e) {
 				this.$store.dispatch('alert/set', { text: e.message, error: true }, { root: true });
 			}
-			this.showingModalForFile.albums = this.images.filesAlbums[id];
+			this.showingModalForFile.albums = this.images.fileAlbumsMap[id];
 
 			this.isAlbumsModalActive = true;
 		},
diff --git a/src/site/components/sidebar/Sidebar.vue b/src/site/components/sidebar/Sidebar.vue
index 5394fc6..d586122 100644
--- a/src/site/components/sidebar/Sidebar.vue
+++ b/src/site/components/sidebar/Sidebar.vue
@@ -28,7 +28,7 @@
 					<b-icon class="is-pulled-right" :icon="props.expanded ? 'menu-down' : 'menu-up'" />
 				</template>
 				<b-menu-item icon="account" label="Users" tag="nuxt-link" to="/dashboard/admin/users" exact />
-				<b-menu-item icon="cog-outline" label="Settings" disabled />
+				<b-menu-item icon="cog-outline" label="Settings" tag="nuxt-link" to="/dashboard/admin/settings" exact />
 			</b-menu-item>
 			<b-menu-item
 				class="item"
diff --git a/src/site/pages/dashboard/admin/file/_id.vue b/src/site/pages/dashboard/admin/file/_id.vue
index 34fcd01..89afa47 100644
--- a/src/site/pages/dashboard/admin/file/_id.vue
+++ b/src/site/pages/dashboard/admin/file/_id.vue
@@ -19,99 +19,101 @@
 							<b-field
 								label="ID"
 								horizontal>
-								<span>{{ file.id }}</span>
+								<span>{{ admin.file.id }}</span>
 							</b-field>
 
 							<b-field
 								label="Name"
 								horizontal>
-								<span>{{ file.name }}</span>
+								<span>{{ admin.file.name }}</span>
 							</b-field>
 
 							<b-field
 								label="Original Name"
 								horizontal>
-								<span>{{ file.original }}</span>
+								<span>{{ admin.file.original }}</span>
 							</b-field>
 
 							<b-field
 								label="IP"
 								horizontal>
-								<span class="underline">{{ file.ip }}</span>
+								<span class="underline">{{ admin.file.ip }}</span>
 							</b-field>
 
 							<b-field
 								label="Link"
 								horizontal>
 								<a
-									:href="file.url"
-									target="_blank">{{ file.url }}</a>
+									:href="admin.file.url"
+									target="_blank">{{ admin.file.url }}</a>
 							</b-field>
 
 							<b-field
 								label="Size"
 								horizontal>
-								<span>{{ formatBytes(file.size) }}</span>
+								<span>{{ formatBytes(admin.file.size) }}</span>
 							</b-field>
 
 							<b-field
 								label="Hash"
 								horizontal>
-								<span>{{ file.hash }}</span>
+								<span>{{ admin.file.hash }}</span>
 							</b-field>
 
 							<b-field
 								label="Uploaded"
 								horizontal>
-								<span><timeago :since="file.createdAt" /></span>
+								<span><timeago :since="admin.file.createdAt" /></span>
 							</b-field>
 						</div>
 						<div class="column is-6">
 							<b-field
 								label="User Id"
 								horizontal>
-								<span>{{ user.id }}</span>
+								<span>{{ admin.user.id }}</span>
 							</b-field>
 
 							<b-field
 								label="Username"
 								horizontal>
-								<span>{{ user.username }}</span>
+								<span>{{ admin.user.username }}</span>
 							</b-field>
 
 							<b-field
 								label="Enabled"
 								horizontal>
-								<span>{{ user.enabled }}</span>
+								<span>{{ admin.user.enabled }}</span>
 							</b-field>
 
 							<b-field
 								label="Registered"
 								horizontal>
-								<span><timeago :since="user.createdAt" /></span>
+								<span><timeago :since="admin.user.createdAt" /></span>
 							</b-field>
 
 							<b-field
 								label="Files"
 								horizontal>
 								<span>
-									<nuxt-link :to="`/dashboard/admin/user/${user.id}`">{{ user.fileCount }}</nuxt-link>
+									<nuxt-link :to="`/dashboard/admin/user/${admin.user.id}`">{{ admin.user.fileCount }}</nuxt-link>
 								</span>
 							</b-field>
 						</div>
 					</div>
 
 					<div class="mb2 mt2 text-center">
-						<button
-							class="button is-danger"
+						<b-button
+							v-if="admin.user.id !== auth.user.id"
+							type="is-danger"
 							@click="promptBanIP">
 							Ban IP
-						</button>
-						<button
-							class="button is-danger"
+						</b-button>
+						<b-button
+							v-if="admin.user.id !== auth.user.id"
+							type="is-danger"
 							@click="promptDisableUser">
 							Disable user
-						</button>
+						</b-button>
 					</div>
 				</div>
 			</div>
@@ -120,35 +122,22 @@
 </template>
 
 <script>
+import { mapState } from 'vuex';
 import Sidebar from '~/components/sidebar/Sidebar.vue';
 
 export default {
 	components: {
 		Sidebar,
 	},
-	middleware: ['auth', 'admin'],
-	data() {
-		return {
-			options: {},
-			file: null,
-			user: null,
-		};
-	},
-	async asyncData({ $axios, route }) {
+	middleware: ['auth', 'admin', ({ route, store }) => {
 		try {
-			const response = await $axios.$get(`file/${route.params.id}`);
-			return {
-				file: response.file ? response.file : null,
-				user: response.user ? response.user : null,
-			};
-		} catch (error) {
-			console.error(error);
-			return {
-				file: null,
-				user: null,
-			};
+			store.dispatch('admin/fetchFile', route.params.id);
+		} catch (e) {
+			// eslint-disable-next-line no-console
+			console.error(e);
 		}
-	},
+	}],
+	computed: mapState(['admin', 'auth']),
 	methods: {
 		promptDisableUser() {
 			this.$buefy.dialog.confirm({
@@ -157,11 +146,8 @@ export default {
 				onConfirm: () => this.disableUser(),
 			});
 		},
-		async disableUser() {
-			const response = await this.$axios.$post('admin/users/disable', {
-				id: this.user.id,
-			});
-			this.$buefy.toast.open(response.message);
+		disableUser() {
+			this.$handler.executeAction('admin/disableUser', this.user.id);
 		},
 		promptBanIP() {
 			this.$buefy.dialog.confirm({
@@ -170,11 +156,8 @@ export default {
 				onConfirm: () => this.banIP(),
 			});
 		},
-		async banIP() {
-			const response = await this.$axios.$post('admin/ban/ip', {
-				ip: this.file.ip,
-			});
-			this.$buefy.toast.open(response.message);
+		banIP() {
+			this.$handler.executeAction('admin/banIP', this.file.ip);
 		},
 		formatBytes(bytes, decimals = 2) {
 			if (bytes === 0) return '0 Bytes';
diff --git a/src/site/pages/dashboard/admin/settings.vue b/src/site/pages/dashboard/admin/settings.vue
index 9e63a7c..7f6a0fe 100644
--- a/src/site/pages/dashboard/admin/settings.vue
+++ b/src/site/pages/dashboard/admin/settings.vue
@@ -16,7 +16,7 @@
 						message="Please enter the name which this service is gonna be identified as"
 						horizontal>
 						<b-input
-							v-model="options.serviceName"
+							v-model="settings.serviceName"
 							expanded />
 					</b-field>
 
@@ -25,7 +25,7 @@
 						message="Where to store the files relative to the working directory"
 						horizontal>
 						<b-input
-							v-model="options.uploadFolder"
+							v-model="settings.uploadFolder"
 							expanded />
 					</b-field>
 
@@ -34,7 +34,7 @@
 						message="Maximum links allowed per album"
 						horizontal>
 						<b-input
-							v-model="options.linksPerAlbum"
+							v-model="settings.linksPerAlbum"
 							type="number"
 							expanded />
 					</b-field>
@@ -44,7 +44,7 @@
 						message="Maximum allowed file size in MB"
 						horizontal>
 						<b-input
-							v-model="options.maxUploadSize"
+							v-model="settings.maxUploadSize"
 							expanded />
 					</b-field>
 
@@ -53,7 +53,7 @@
 						message="How many characters long should the generated filenames be"
 						horizontal>
 						<b-input
-							v-model="options.filenameLength"
+							v-model="settings.filenameLength"
 							expanded />
 					</b-field>
 
@@ -62,7 +62,7 @@
 						message="How many characters a link for an album should have"
 						horizontal>
 						<b-input
-							v-model="options.albumLinkLength"
+							v-model="settings.albumLinkLength"
 							expanded />
 					</b-field>
 
@@ -71,7 +71,7 @@
 						message="Generate thumbnails when uploading a file if possible"
 						horizontal>
 						<b-switch
-							v-model="options.generateThumbnails"
+							v-model="settings.generateThumbnails"
 							:true-value="true"
 							:false-value="false" />
 					</b-field>
@@ -81,7 +81,7 @@
 						message="Allow generating zips to download entire albums"
 						horizontal>
 						<b-switch
-							v-model="options.generateZips"
+							v-model="settings.generateZips"
 							:true-value="true"
 							:false-value="false" />
 					</b-field>
@@ -91,7 +91,7 @@
 						message="Enable anonymous uploades"
 						horizontal>
 						<b-switch
-							v-model="options.publicMode"
+							v-model="settings.publicMode"
 							:true-value="true"
 							:false-value="false" />
 					</b-field>
@@ -101,7 +101,7 @@
 						message="Enable creating new accounts in the platform"
 						horizontal>
 						<b-switch
-							v-model="options.enableAccounts"
+							v-model="settings.enableAccounts"
 							:true-value="true"
 							:false-value="false" />
 					</b-field>
@@ -120,38 +120,36 @@
 </template>
 
 <script>
+import { mapState } from 'vuex';
 import Sidebar from '~/components/sidebar/Sidebar.vue';
 
 export default {
 	components: {
 		Sidebar,
 	},
-	middleware: ['auth', 'admin'],
-	data() {
-		return {
-			options: {},
-		};
-	},
+	middleware: ['auth', 'admin', ({ store }) => {
+		try {
+			store.dispatch('admin/fetchSettings');
+		} catch (e) {
+			// eslint-disable-next-line no-console
+			console.error(e);
+		}
+	}],
 	metaInfo() {
 		return { title: 'Settings' };
 	},
-	mounted() {
-		this.getSettings();
-	},
+	computed: mapState({
+		settings: (state) => state.admin.settings,
+	}),
 	methods: {
-		async getSettings() {
-			const response = await this.$axios.$get('service/config');
-			this.options = response.config;
-		},
 		promptRestartService() {
 			this.$buefy.dialog.confirm({
 				message: 'Keep in mind that restarting only works if you have PM2 or something similar set up. Continue?',
 				onConfirm: () => this.restartService(),
 			});
 		},
-		async restartService() {
-			const response = await this.$axios.$post('service/restart');
-			this.$buefy.toast.open(response.message);
+		restartService() {
+			this.$handler.executeAction('admin/restartService');
 		},
 	},
 };
diff --git a/src/site/plugins/axios.js b/src/site/plugins/axios.js
index 378f922..0308d39 100644
--- a/src/site/plugins/axios.js
+++ b/src/site/plugins/axios.js
@@ -24,9 +24,9 @@ export default function ({ $axios, store }) {
 				}
 			}
 
-			if (error.response?.data?.message.indexOf('Token expired') !== -1) {
+			/* if (error.response?.data?.message.indexOf('Token expired') !== -1) {
 				store.dispatch('auth/logout');
-			}
+			} */
 		}
 	});
 }
diff --git a/src/site/store/admin.js b/src/site/store/admin.js
index 2586a18..b31c446 100644
--- a/src/site/store/admin.js
+++ b/src/site/store/admin.js
@@ -15,6 +15,12 @@ export const state = () => ({
 });
 
 export const actions = {
+	async fetchSettings({ commit }) {
+		const response = await this.$axios.$get('service/config');
+		commit('setSettings', response);
+
+		return response;
+	},
 	async fetchUsers({ commit }) {
 		const response = await this.$axios.$get('admin/users');
 		commit('setUsers', response);
@@ -22,11 +28,23 @@ export const actions = {
 		return response;
 	},
 	async fetchUser({ commit }, id) {
-		const response = await this.$axios.$get(`/admin/users/${id}`);
+		const response = await this.$axios.$get(`admin/users/${id}`);
+		commit('setUserInfo', response);
+
+		return response;
+	},
+	async fetchFile({ commit }, id) {
+		const response = await this.$axios.$get(`file/${id}`);
+		commit('setFile', response);
 		commit('setUserInfo', response);
 
 		return response;
 	},
+	async banIP(_, ip) {
+		const response = await this.$axios.$post('admin/ban/ip', { ip });
+
+		return response;
+	},
 	async enableUser({ commit }, id) {
 		const response = await this.$axios.$post('admin/users/enable', { id });
 
@@ -58,11 +76,19 @@ export const actions = {
 	async purgeUserFiles(_, id) {
 		const response = await this.$axios.$post('admin/users/purge', { id });
 
+		return response;
+	},
+	async restartService() {
+		const response = await this.$axios.$post('service/restart');
+
 		return response;
 	},
 };
 
 export const mutations = {
+	setSettings(state, { config }) {
+		state.settings = config;
+	},
 	setUsers(state, { users }) {
 		state.users = users;
 	},
@@ -70,6 +96,9 @@ export const mutations = {
 		state.user = { ...state.user, ...user };
 		state.user.files = files || [];
 	},
+	setFile(state, { file }) {
+		state.file = file || {};
+	},
 	changeUserState(state, { userId, enabled, isAdmin }) {
 		const foundIndex = state.users.findIndex(({ id }) => id === userId);
 		if (foundIndex > -1) {
diff --git a/src/site/store/auth.js b/src/site/store/auth.js
index 465de7d..96631e2 100644
--- a/src/site/store/auth.js
+++ b/src/site/store/auth.js
@@ -1,6 +1,10 @@
 const getDefaultState = () => ({
 	loggedIn: false,
-	user: null,
+	user: {
+		id: null,
+		isAdmin: false,
+		username: null,
+	},
 	token: null,
 });
 
diff --git a/src/site/store/images.js b/src/site/store/images.js
index a7581e0..acac286 100644
--- a/src/site/store/images.js
+++ b/src/site/store/images.js
@@ -10,7 +10,8 @@ export const getDefaultState = () => ({
 	},
 	name: null,
 	downloadEnabled: false,
-	filesAlbums: {}, // map of file ids with a list of album objects the file is in
+	fileAlbumsMap: {}, // map of file ids with a list of album objects the file is in
+	filesTags: {}, // map of file ids with a list of tag objects for the file
 });
 
 export const state = getDefaultState;
@@ -105,19 +106,19 @@ export const mutations = {
 		}
 	},
 	setFileAlbums(state, { fileId, albums }) {
-		Vue.set(state.filesAlbums, fileId, albums);
+		Vue.set(state.fileAlbumsMap, fileId, albums);
 	},
 	addAlbumToFile(state, { fileId, album }) {
-		if (!state.filesAlbums[fileId]) return;
+		if (!state.fileAlbumsMap[fileId]) return;
 
-		state.filesAlbums[fileId].push(album);
+		state.fileAlbumsMap[fileId].push(album);
 	},
 	removeAlbumFromFile(state, { fileId, albumId }) {
-		if (!state.filesAlbums[fileId]) return;
+		if (!state.fileAlbumsMap[fileId]) return;
 
-		const foundIndex = state.filesAlbums[fileId].findIndex(({ id }) => id === albumId);
+		const foundIndex = state.fileAlbumsMap[fileId].findIndex(({ id }) => id === albumId);
 		if (foundIndex > -1) {
-			state.filesAlbums[fileId].splice(foundIndex, 1);
+			state.fileAlbumsMap[fileId].splice(foundIndex, 1);
 		}
 	},
 	resetState(state) {
-- 
cgit v1.2.3


From b49017aafd8dd3206dc7f490f54e31474527e5b7 Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Sun, 19 Jul 2020 22:26:55 +0300
Subject: chore: add custom class to inputs until fix is released on buefy's
 master

---
 src/site/assets/styles/bulma-divider.scss   | 164 ++++++++++++++++++++++++++++
 src/site/assets/styles/style.scss           |  94 ++++++++++++----
 src/site/pages/dashboard/account.vue        |   5 +
 src/site/pages/dashboard/admin/settings.vue |   6 +
 src/site/pages/dashboard/albums/_id.vue     |   3 +-
 src/site/pages/dashboard/albums/index.vue   |   1 +
 src/site/pages/dashboard/index.vue          |   3 +-
 src/site/pages/dashboard/tags/index.vue     |   1 +
 src/site/pages/login.vue                    |   2 +
 src/site/pages/register.vue                 |   3 +
 10 files changed, 260 insertions(+), 22 deletions(-)
 create mode 100644 src/site/assets/styles/bulma-divider.scss

(limited to 'src/site')

diff --git a/src/site/assets/styles/bulma-divider.scss b/src/site/assets/styles/bulma-divider.scss
new file mode 100644
index 0000000..713c7e4
--- /dev/null
+++ b/src/site/assets/styles/bulma-divider.scss
@@ -0,0 +1,164 @@
+/*! @creativebulma/bulma-divider v1.1.0 | (c) 2020 Gaetan | MIT License | https://github.com/CreativeBulma/bulma-divider */
+@-webkit-keyframes spinAround {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(359deg);
+  }
+}
+
+@keyframes spinAround {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(359deg);
+  }
+}
+
+/* line 17, src/sass/app.sass */
+.divider {
+  position: relative;
+  display: flex;
+  align-items: center;
+  text-transform: uppercase;
+  color: #7a7a7a;
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: .5px;
+  margin: 25px 0;
+}
+
+/* line 28, src/sass/app.sass */
+.divider::after, .divider::before {
+  content: '';
+  display: block;
+  flex: 1;
+  height: 1px;
+  background-color: #dbdbdb;
+}
+
+/* line 37, src/sass/app.sass */
+.divider:not(.is-right)::after {
+  margin-left: 10px;
+}
+
+/* line 41, src/sass/app.sass */
+.divider:not(.is-left)::before {
+  margin-right: 10px;
+}
+
+/* line 45, src/sass/app.sass */
+.divider.is-left::before {
+  display: none;
+}
+
+/* line 49, src/sass/app.sass */
+.divider.is-right::after {
+  display: none;
+}
+
+/* line 52, src/sass/app.sass */
+.divider.is-vertical {
+  flex-direction: column;
+  margin: 0 25px;
+}
+
+/* line 56, src/sass/app.sass */
+.divider.is-vertical::after, .divider.is-vertical::before {
+  height: auto;
+  width: 1px;
+}
+
+/* line 61, src/sass/app.sass */
+.divider.is-vertical::after {
+  margin-left: 0;
+  margin-top: 10px;
+}
+
+/* line 65, src/sass/app.sass */
+.divider.is-vertical::before {
+  margin-right: 0;
+  margin-bottom: 10px;
+}
+
+/* line 72, src/sass/app.sass */
+.divider.is-white::after, .divider.is-white::before {
+  background-color: white;
+}
+
+/* line 72, src/sass/app.sass */
+.divider.is-black::after, .divider.is-black::before {
+  background-color: #0a0a0a;
+}
+
+/* line 72, src/sass/app.sass */
+.divider.is-light::after, .divider.is-light::before {
+  background-color: whitesmoke;
+}
+
+/* line 72, src/sass/app.sass */
+.divider.is-dark::after, .divider.is-dark::before {
+  background-color: #363636;
+}
+
+/* line 72, src/sass/app.sass */
+.divider.is-primary::after, .divider.is-primary::before {
+  background-color: #00d1b2;
+}
+
+/* line 80, src/sass/app.sass */
+.divider.is-primary.is-light::after, .divider.is-primary.is-light::before {
+  background-color: #ebfffc;
+}
+
+/* line 72, src/sass/app.sass */
+.divider.is-link::after, .divider.is-link::before {
+  background-color: #3273dc;
+}
+
+/* line 80, src/sass/app.sass */
+.divider.is-link.is-light::after, .divider.is-link.is-light::before {
+  background-color: #eef3fc;
+}
+
+/* line 72, src/sass/app.sass */
+.divider.is-info::after, .divider.is-info::before {
+  background-color: #3298dc;
+}
+
+/* line 80, src/sass/app.sass */
+.divider.is-info.is-light::after, .divider.is-info.is-light::before {
+  background-color: #eef6fc;
+}
+
+/* line 72, src/sass/app.sass */
+.divider.is-success::after, .divider.is-success::before {
+  background-color: #48c774;
+}
+
+/* line 80, src/sass/app.sass */
+.divider.is-success.is-light::after, .divider.is-success.is-light::before {
+  background-color: #effaf3;
+}
+
+/* line 72, src/sass/app.sass */
+.divider.is-warning::after, .divider.is-warning::before {
+  background-color: #ffdd57;
+}
+
+/* line 80, src/sass/app.sass */
+.divider.is-warning.is-light::after, .divider.is-warning.is-light::before {
+  background-color: #fffbeb;
+}
+
+/* line 72, src/sass/app.sass */
+.divider.is-danger::after, .divider.is-danger::before {
+  background-color: #f14668;
+}
+
+/* line 80, src/sass/app.sass */
+.divider.is-danger.is-light::after, .divider.is-danger.is-light::before {
+  background-color: #feecf0;
+}
diff --git a/src/site/assets/styles/style.scss b/src/site/assets/styles/style.scss
index 202e02a..026f277 100644
--- a/src/site/assets/styles/style.scss
+++ b/src/site/assets/styles/style.scss
@@ -10,11 +10,16 @@ $family-primary: 'Nunito', BlinkMacSystemFont, -apple-system, 'Segoe UI', 'Robot
 	'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
 $size-normal: 1rem;
 
-@import '../../../node_modules/bulma/bulma.sass';
-@import '../../../node_modules/buefy/src/scss/buefy.scss';
+/* @import '../../../node_modules/bulma/bulma.sass';
+@import '../../../node_modules/buefy/src/scss/buefy.scss'; */
+
+@import "~bulma";
+@import "~buefy/src/scss/buefy";
 
 @import '@mdi/font/css/materialdesignicons.css';
 
+@import './bulma-divider.scss';
+
 html {
 	// font-size: 100%;
 	font-size: 14px;
@@ -204,24 +209,6 @@ section#register a.is-text {
 	margin-top: 5px;
 }
 
-.input,
-.taginput .taginput-container.is-focusable,
-.textarea,
-.select select {
-	border: 2px solid #21252d;
-	border-radius: 0.3em !important;
-	background: rgba(0, 0, 0, 0.15);
-	padding: 1rem;
-	color: $textColor;
-	height: 3rem;
-	&:focus,
-	&:hover {
-		border: 2px solid #21252d;
-	}
-	&::placeholder {
-		color: $textColor;
-	}
-}
 /* button.button.is-primary {
 	background-color: #323846;
 	border: 2px solid #21252d;
@@ -277,6 +264,29 @@ table.table {
 	}
 }
 
+.lolisafe-input input,
+.lolisafe-select select,
+.lolisafe-textarea textarea {
+	border: 2px solid #21252d;
+	border-radius: 0.3em !important;
+	background: rgba(0, 0, 0, 0.15);
+	padding: 1rem;
+	color: $textColor;
+	height: 3rem;
+	&:focus,
+	&:hover {
+		border: 2px solid #21252d;
+	}
+	&::placeholder {
+		color: $textColor;
+	}
+} 
+
+.lolisafe-input .icon {
+	color: #323846 !important;
+}
+
+
 // vue-bar
 .vb > .vb-dragger {
 	z-index: 5;
@@ -345,3 +355,47 @@ table.table {
 	height: 3rem;
 	padding-right: 1rem;
 }
+
+.is-marginless {
+	margin: 0 !important;
+}
+
+.fucking-opl-shut-up {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.lolisafe-on-border.field.is-floating-label .label:before {
+	background-color: $lolisafe;
+}
+
+.is-lolisafe.divider::after, .is-lolisafe.divider::before {
+	background-color: #21252d;
+}
+
+.lolisafe.taginput {
+	.taginput-container {
+		background-color: #21252d;
+		border: 2px solid #21252d;
+		border-radius: 0.3em !important;
+
+		input {
+			background-color: #21252d;
+			color: $textColor;
+			&::placeholder {
+				color: $textColor;
+			}
+		}
+
+		.icon {
+			padding-left: 15px;
+		}
+
+		&:focus,
+		&:hover,
+		&:active {
+			border: 2px solid #21252d;
+		}
+	}
+}
diff --git a/src/site/pages/dashboard/account.vue b/src/site/pages/dashboard/account.vue
index 31ec8af..5d2f064 100644
--- a/src/site/pages/dashboard/account.vue
+++ b/src/site/pages/dashboard/account.vue
@@ -16,6 +16,7 @@
 						message="Nothing to do here"
 						horizontal>
 						<b-input
+							class="lolisafe-input"
 							:value="user.username"
 							expanded
 							disabled />
@@ -27,6 +28,7 @@
 						horizontal>
 						<b-input
 							v-model="password"
+							class="lolisafe-input"
 							type="password"
 							expanded />
 					</b-field>
@@ -37,6 +39,7 @@
 						horizontal>
 						<b-input
 							v-model="newPassword"
+							class="lolisafe-input"
 							type="password"
 							expanded />
 					</b-field>
@@ -47,6 +50,7 @@
 						horizontal>
 						<b-input
 							v-model="reNewPassword"
+							class="lolisafe-input"
 							type="password"
 							expanded />
 					</b-field>
@@ -65,6 +69,7 @@
 						horizontal>
 						<b-field expanded>
 							<b-input
+								class="lolisafe-input"
 								:value="apiKey"
 								expanded
 								disabled />
diff --git a/src/site/pages/dashboard/admin/settings.vue b/src/site/pages/dashboard/admin/settings.vue
index 7f6a0fe..56331b5 100644
--- a/src/site/pages/dashboard/admin/settings.vue
+++ b/src/site/pages/dashboard/admin/settings.vue
@@ -17,6 +17,7 @@
 						horizontal>
 						<b-input
 							v-model="settings.serviceName"
+							class="lolisafe-input"
 							expanded />
 					</b-field>
 
@@ -26,6 +27,7 @@
 						horizontal>
 						<b-input
 							v-model="settings.uploadFolder"
+							class="lolisafe-input"
 							expanded />
 					</b-field>
 
@@ -35,6 +37,7 @@
 						horizontal>
 						<b-input
 							v-model="settings.linksPerAlbum"
+							class="lolisafe-input"
 							type="number"
 							expanded />
 					</b-field>
@@ -45,6 +48,7 @@
 						horizontal>
 						<b-input
 							v-model="settings.maxUploadSize"
+							class="lolisafe-input"
 							expanded />
 					</b-field>
 
@@ -54,6 +58,7 @@
 						horizontal>
 						<b-input
 							v-model="settings.filenameLength"
+							class="lolisafe-input"
 							expanded />
 					</b-field>
 
@@ -63,6 +68,7 @@
 						horizontal>
 						<b-input
 							v-model="settings.albumLinkLength"
+							class="lolisafe-input"
 							expanded />
 					</b-field>
 
diff --git a/src/site/pages/dashboard/albums/_id.vue b/src/site/pages/dashboard/albums/_id.vue
index a909e75..a4aa440 100644
--- a/src/site/pages/dashboard/albums/_id.vue
+++ b/src/site/pages/dashboard/albums/_id.vue
@@ -14,7 +14,7 @@
 						<div class="level-left">
 							<div class="level-item">
 								<h1 class="title is-3">
-									{{ images.name }}
+									{{ images.albumName }}
 								</h1>
 							</div>
 							<div class="level-item">
@@ -27,6 +27,7 @@
 							<div class="level-item">
 								<b-field>
 									<b-input
+										class="lolisafe-input"
 										placeholder="Search"
 										type="search" />
 									<p class="control">
diff --git a/src/site/pages/dashboard/albums/index.vue b/src/site/pages/dashboard/albums/index.vue
index a2ba522..c5acb2e 100644
--- a/src/site/pages/dashboard/albums/index.vue
+++ b/src/site/pages/dashboard/albums/index.vue
@@ -16,6 +16,7 @@
 							<b-field>
 								<b-input
 									v-model="newAlbumName"
+									class="lolisafe-input"
 									placeholder="Album name..."
 									type="text"
 									@keyup.enter.native="createAlbum" />
diff --git a/src/site/pages/dashboard/index.vue b/src/site/pages/dashboard/index.vue
index 08c5166..d623b5c 100644
--- a/src/site/pages/dashboard/index.vue
+++ b/src/site/pages/dashboard/index.vue
@@ -1,7 +1,7 @@
 <template>
 	<section class="section is-fullheight dashboard">
 		<div class="container">
-			<div class="columns is-variable is-0-mobile">
+			<div class="columns ">
 				<div class="column is-narrow">
 					<Sidebar />
 				</div>
@@ -18,6 +18,7 @@
 							<div class="level-item">
 								<b-field>
 									<b-input
+										class="lolisafe-input"
 										placeholder="Search"
 										type="search" />
 									<p class="control">
diff --git a/src/site/pages/dashboard/tags/index.vue b/src/site/pages/dashboard/tags/index.vue
index a9c5756..fe92087 100644
--- a/src/site/pages/dashboard/tags/index.vue
+++ b/src/site/pages/dashboard/tags/index.vue
@@ -140,6 +140,7 @@
 						<b-field>
 							<b-input
 								v-model="newTagName"
+								class="lolisafe-input"
 								placeholder="Tag name..."
 								type="text"
 								@keyup.enter.native="createTag" />
diff --git a/src/site/pages/login.vue b/src/site/pages/login.vue
index 569e9d9..1f313e3 100644
--- a/src/site/pages/login.vue
+++ b/src/site/pages/login.vue
@@ -12,6 +12,7 @@
 					<b-field>
 						<b-input
 							v-model="username"
+							class="lolisafe-input"
 							type="text"
 							placeholder="Username"
 							@keyup.enter.native="login" />
@@ -19,6 +20,7 @@
 					<b-field>
 						<b-input
 							v-model="password"
+							class="lolisafe-input"
 							type="password"
 							placeholder="Password"
 							password-reveal
diff --git a/src/site/pages/register.vue b/src/site/pages/register.vue
index 7cf4573..5a7a158 100644
--- a/src/site/pages/register.vue
+++ b/src/site/pages/register.vue
@@ -12,12 +12,14 @@
 					<b-field>
 						<b-input
 							v-model="username"
+							class="lolisafe-input"
 							type="text"
 							placeholder="Username" />
 					</b-field>
 					<b-field>
 						<b-input
 							v-model="password"
+							class="lolisafe-input"
 							type="password"
 							placeholder="Password"
 							password-reveal />
@@ -25,6 +27,7 @@
 					<b-field>
 						<b-input
 							v-model="rePassword"
+							class="lolisafe-input"
 							type="password"
 							placeholder="Re-type Password"
 							password-reveal
-- 
cgit v1.2.3


From c93ddb09008c45942544b13bbb03319c367f9cd8 Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Sun, 19 Jul 2020 22:27:11 +0300
Subject: feat: Start working on a new album/tags/image info modal

---
 src/site/components/grid/Grid.vue             |  32 ++++-
 src/site/components/image-modal/ImageInfo.vue | 179 ++++++++++++++++++++++++++
 src/site/components/imageInfo/ImageInfo.vue   |   0
 src/site/plugins/buefy.js                     |   1 +
 src/site/store/admin.js                       |   2 +-
 src/site/store/images.js                      |  27 +++-
 6 files changed, 231 insertions(+), 10 deletions(-)
 create mode 100644 src/site/components/image-modal/ImageInfo.vue
 delete mode 100644 src/site/components/imageInfo/ImageInfo.vue

(limited to 'src/site')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index 90c196b..1b62097 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -75,7 +75,7 @@
 								</a>
 							</b-tooltip>
 							<b-tooltip label="Albums" position="is-top">
-								<a class="btn" @click="openAlbumModal(item)">
+								<a class="btn" @click="handleFileModal(item)">
 									<i class="icon-interface-window" />
 								</a>
 							</b-tooltip>
@@ -121,7 +121,7 @@
 
 						<b-table-column field="purge" centered>
 							<b-tooltip label="Albums" position="is-top">
-								<a class="btn" @click="openAlbumModal(props.row)">
+								<a class="btn" @click="handleFileModal(props.row)">
 									<i class="icon-interface-window" />
 								</a>
 							</b-tooltip>
@@ -153,7 +153,10 @@
 				</template>
 			</b-table>
 		</div>
-		<b-modal :active.sync="isAlbumsModalActive" :width="640" scroll="keep">
+		<b-modal :active.sync="isAlbumsModalActive" scroll="keep">
+			<ImageInfo :file="modalData.file" />
+		</b-modal>
+		<!-- <b-modal :active.sync="isAlbumsModalActive" :width="640" scroll="keep">
 			<div class="card albumsModal">
 				<div class="card-content">
 					<div class="content">
@@ -176,7 +179,7 @@
 					</div>
 				</div>
 			</div>
-		</b-modal>
+		</b-modal> -->
 	</div>
 </template>
 
@@ -184,10 +187,12 @@
 import { mapState } from 'vuex';
 
 import Waterfall from './waterfall/Waterfall.vue';
+import ImageInfo from '~/components/image-modal/ImageInfo.vue';
 
 export default {
 	components: {
 		Waterfall,
+		ImageInfo,
 	},
 	props: {
 		files: {
@@ -230,6 +235,11 @@ export default {
 			filesOffsetWaterfall: 0,
 			filesOffsetEndWaterfall: 50,
 			filesPerPageWaterfall: 50,
+			modalData: {
+				file: null,
+				tags: null,
+				albums: null,
+			},
 		};
 	},
 	computed: {
@@ -318,6 +328,20 @@ export default {
 				this.$store.dispatch('alert/set', { text: e.message, error: true }, { root: true });
 			}
 		},
+		async handleFileModal(file) {
+			const { id } = file;
+
+			try {
+				await this.$store.dispatch('images/fetchFileMeta', id);
+				this.modalData.file = this.images.fileExtraInfoMap[id];
+				this.modalData.albums = this.images.fileAlbumsMap[id];
+				this.modalData.tags = this.images.fileTagsMap[id];
+			} catch (e) {
+				this.$store.dispatch('alert/set', { text: e.message, error: true }, { root: true });
+			}
+
+			this.isAlbumsModalActive = true;
+		},
 		mouseOver(id) {
 			const foundIndex = this.hoveredItems.indexOf(id);
 			if (foundIndex > -1) return;
diff --git a/src/site/components/image-modal/ImageInfo.vue b/src/site/components/image-modal/ImageInfo.vue
new file mode 100644
index 0000000..c9dba1a
--- /dev/null
+++ b/src/site/components/image-modal/ImageInfo.vue
@@ -0,0 +1,179 @@
+<template>
+	<div class="container has-background-lolisafe">
+		<div class="columns is-marginless">
+			<div class="column fucking-opl-shut-up">
+				<img src="https://placehold.it/1024x10024">
+			</div>
+			<div class="column is-one-third">
+				<div class="sticky">
+					<div class="divider is-lolisafe has-text-light">
+						File information
+					</div>
+					<b-field
+						label="ID"
+						label-position="on-border"
+						type="is-lolisafe"
+						class="lolisafe-on-border">
+						<div class="control">
+							<span class="fake-input">{{ file.id }}</span>
+						</div>
+					</b-field>
+					<b-field
+						label="Name"
+						label-position="on-border"
+						type="is-lolisafe"
+						class="lolisafe-on-border">
+						<div class="control">
+							<span class="fake-input">{{ file.name }}</span>
+						</div>
+					</b-field>
+
+					<b-field
+						label="Original Name"
+						label-position="on-border"
+						type="is-lolisafe"
+						class="lolisafe-on-border">
+						<div class="control">
+							<span class="fake-input">{{ file.original }}</span>
+						</div>
+					</b-field>
+
+					<b-field
+						label="IP"
+						label-position="on-border"
+						type="is-lolisafe"
+						class="lolisafe-on-border">
+						<div class="control">
+							<span class="fake-input">{{ file.ip }}</span>
+						</div>
+					</b-field>
+
+					<b-field
+						label="Link"
+						label-position="on-border"
+						type="is-lolisafe"
+						class="lolisafe-on-border">
+						<div class="control">
+							<a
+								class="fake-input"
+								:href="file.url"
+								target="_blank">{{ file.url }}</a>
+						</div>
+					</b-field>
+
+					<b-field
+						label="Size"
+						label-position="on-border"
+						type="is-lolisafe"
+						class="lolisafe-on-border">
+						<div class="control">
+							<span class="fake-input">{{ formatBytes(file.size) }}</span>
+						</div>
+					</b-field>
+
+					<b-field
+						label="Hash"
+						label-position="on-border"
+						type="is-lolisafe"
+						class="lolisafe-on-border">
+						<div class="control">
+							<span class="fake-input">{{ file.hash }}</span>
+						</div>
+					</b-field>
+
+					<b-field
+						label="Uploaded"
+						label-position="on-border"
+						type="is-lolisafe"
+						class="lolisafe-on-border">
+						<div class="control">
+							<span class="fake-input"><timeago :since="file.createdAt" /></span>
+						</div>
+					</b-field>
+					<div class="divider is-lolisafe has-text-light">
+						Albums
+					</div>
+
+					<div class="divider is-lolisafe has-text-light">
+						Tags
+					</div>
+					<b-field label="Add some tags">
+						<b-taginput
+							v-model="tags"
+							class="lolisafe"
+							ellipsis
+							icon="label"
+							placeholder="Add a tag" />
+					</b-field>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+
+export default {
+	props: {
+		file: {
+			type: Object,
+			default: () => ({}),
+		},
+	},
+	data() {
+		return {
+			tags: [],
+		};
+	},
+	computed: mapState(['images']),
+	methods: {
+		formatBytes(bytes, decimals = 2) {
+			if (bytes === 0) return '0 Bytes';
+
+			const k = 1024;
+			const dm = decimals < 0 ? 0 : decimals;
+			const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+
+			const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+			return `${parseFloat((bytes / k ** i).toFixed(dm))} ${sizes[i]}`;
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+@import '~/assets/styles/_colors.scss';
+.modal-content, .modal-card {
+	max-height: 100%;
+}
+
+.fake-input {
+	font-size: 1rem !important;
+	height: 2.5rem;
+	border-color: #323846; /* $lolisafe */
+	max-width: 100%;
+	width: 100%;
+    border-radius: 4px;
+    display: inline-block;
+    font-size: 1rem;
+    justify-content: flex-start;
+    line-height: 1.5;
+    padding-bottom: calc(0.375em - 1px);
+    padding-left: calc(0.625em - 1px);
+    padding-right: calc(0.625em - 1px);
+    padding-top: calc(0.375em - 1px);
+	background-color: #21252d;
+	border: 2px solid #21252d;
+	border-radius: 0.3em !important;
+
+	text-overflow: ellipsis;
+	overflow: hidden;
+	white-space: nowrap;
+}
+
+.divider:first-child {
+    margin: 10px 0 25px;
+}
+</style>
diff --git a/src/site/components/imageInfo/ImageInfo.vue b/src/site/components/imageInfo/ImageInfo.vue
deleted file mode 100644
index e69de29..0000000
diff --git a/src/site/plugins/buefy.js b/src/site/plugins/buefy.js
index 58bf28f..f3f7552 100644
--- a/src/site/plugins/buefy.js
+++ b/src/site/plugins/buefy.js
@@ -1,4 +1,5 @@
 import Vue from 'vue';
 import Buefy from 'buefy';
+// import 'buefy/dist/buefy.css';
 
 Vue.use(Buefy);
diff --git a/src/site/store/admin.js b/src/site/store/admin.js
index b31c446..04ad980 100644
--- a/src/site/store/admin.js
+++ b/src/site/store/admin.js
@@ -34,7 +34,7 @@ export const actions = {
 		return response;
 	},
 	async fetchFile({ commit }, id) {
-		const response = await this.$axios.$get(`file/${id}`);
+		const response = await this.$axios.$get(`admin/file/${id}`);
 		commit('setFile', response);
 		commit('setUserInfo', response);
 
diff --git a/src/site/store/images.js b/src/site/store/images.js
index acac286..0d5e82a 100644
--- a/src/site/store/images.js
+++ b/src/site/store/images.js
@@ -8,10 +8,11 @@ export const getDefaultState = () => ({
 		limit: 30,
 		totalFiles: 0,
 	},
-	name: null,
-	downloadEnabled: false,
+	albumName: null,
+	albumDownloadEnabled: false,
+	fileExtraInfoMap: {}, // information about the selected file
 	fileAlbumsMap: {}, // map of file ids with a list of album objects the file is in
-	filesTags: {}, // map of file ids with a list of tag objects for the file
+	fileTagsMap: {}, // map of file ids with a list of tag objects for the file
 });
 
 export const state = getDefaultState;
@@ -55,6 +56,15 @@ export const actions = {
 
 		return response;
 	},
+	async fetchFileMeta({ commit }, fileId) {
+		const response = await this.$axios.$get(`file/${fileId}`);
+
+		commit('setFileAlbums', { ...response, fileId });
+		commit('setFileTags', { ...response, fileId });
+		commit('setFileExtraInfo', { ...response, fileId });
+
+		return response;
+	},
 	async getFileAlbums({ commit }, fileId) {
 		const response = await this.$axios.$get(`file/${fileId}/albums`);
 
@@ -90,10 +100,11 @@ export const mutations = {
 		state.isLoading = true;
 	},
 	setFilesAndMeta(state, {
-		files, name, page, count,
+		files, name, page, count, downloadEnabled,
 	}) {
 		state.files = files || [];
-		state.name = name ?? null;
+		state.albumName = name ?? null;
+		state.downloadEnabled = downloadEnabled ?? false;
 		state.isLoading = false;
 		state.pagination.page = page || 1;
 		state.pagination.totalFiles = count || 0;
@@ -108,6 +119,12 @@ export const mutations = {
 	setFileAlbums(state, { fileId, albums }) {
 		Vue.set(state.fileAlbumsMap, fileId, albums);
 	},
+	setFileTags(state, { fileId, tags }) {
+		Vue.set(state.fileTagsMap, fileId, tags);
+	},
+	setFileExtraInfo(state, { fileId, file }) {
+		Vue.set(state.fileExtraInfoMap, fileId, file);
+	},
 	addAlbumToFile(state, { fileId, album }) {
 		if (!state.fileAlbumsMap[fileId]) return;
 
-- 
cgit v1.2.3


From 18bb451f793677a5bbfdc2c14128bae33c66dfde Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Mon, 20 Jul 2020 23:01:45 +0300
Subject: feat: implement all-in-one file detail viewer, tag editor and album
 selection modal

---
 src/site/assets/styles/_colors.scss              |  12 +++
 src/site/assets/styles/style.scss                |   6 +-
 src/site/components/grid/Grid.vue                |  71 +++++++---------
 src/site/components/grid/waterfall/Waterfall.vue |   3 +-
 src/site/components/image-modal/AlbumInfo.vue    |  73 ++++++++++++++++
 src/site/components/image-modal/ImageInfo.vue    |  61 ++++++++++----
 src/site/components/image-modal/TagInfo.vue      | 103 +++++++++++++++++++++++
 src/site/store/images.js                         |  27 ++++++
 src/site/store/tags.js                           |  40 +++++++++
 9 files changed, 336 insertions(+), 60 deletions(-)
 create mode 100644 src/site/components/image-modal/AlbumInfo.vue
 create mode 100644 src/site/components/image-modal/TagInfo.vue
 create mode 100644 src/site/store/tags.js

(limited to 'src/site')

diff --git a/src/site/assets/styles/_colors.scss b/src/site/assets/styles/_colors.scss
index 0bc7c5e..e8b17c4 100644
--- a/src/site/assets/styles/_colors.scss
+++ b/src/site/assets/styles/_colors.scss
@@ -69,3 +69,15 @@ $sidebar-box-shadow: none;
 $menu-item-color: $textColor;
 $menu-item-hover-color: $textColorHighlight;
 $menu-item-active-background-color: $backgroundAccent;
+
+// dropdown 
+$dropdown-content-background-color: $background;
+$dropdown-item-hover-background-color: $backgroundAccentLighter;
+$dropdown-item-color: $textColor;
+$dropdown-item-hover-color: $textColorHighlight;
+$dropdown-item-active-color: $textColorHighlight;
+$dropdown-item-active-background-color: hsl(171, 100%, 41%); // $primary
+
+// tags
+$tag-background-color: $base-2;
+$tag-color: $textColor;
diff --git a/src/site/assets/styles/style.scss b/src/site/assets/styles/style.scss
index 026f277..4ad0471 100644
--- a/src/site/assets/styles/style.scss
+++ b/src/site/assets/styles/style.scss
@@ -360,7 +360,7 @@ table.table {
 	margin: 0 !important;
 }
 
-.fucking-opl-shut-up {
+.has-centered-items {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -399,3 +399,7 @@ table.table {
 		}
 	}
 }
+
+.dropdown-content a {
+	text-decoration: none;
+}
diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index 1e427fc..d29160f 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -6,6 +6,7 @@
 					<slot name="pagination" />
 				</div>
 			</div>
+			<!-- TODO: Externalize this so it can be saved as an user config (and between re-renders) -->
 			<div v-if="enableToolbar" class="level-right toolbar">
 				<div class="level-item">
 					<div class="block">
@@ -66,27 +67,22 @@
 							@mouseleave.self.stop.prevent="item.preview && mouseOut(item.id)">
 							<b-tooltip label="Link" position="is-top">
 								<a :href="`${item.url}`" target="_blank" class="btn">
-									<i class="icon-web-code" />
+									<i class="mdi mdi-open-in-new" />
 								</a>
 							</b-tooltip>
-							<b-tooltip label="Tags" position="is-top">
-								<a class="btn" @click="false && manageTags(item)">
-									<i class="icon-ecommerce-tag-c" />
-								</a>
-							</b-tooltip>
-							<b-tooltip label="Albums" position="is-top">
+							<b-tooltip label="Edit" position="is-top">
 								<a class="btn" @click="handleFileModal(item)">
-									<i class="icon-interface-window" />
+									<i class="mdi mdi-pencil" />
 								</a>
 							</b-tooltip>
 							<b-tooltip label="Delete" position="is-top">
 								<a class="btn" @click="deleteFile(item)">
-									<i class="icon-editorial-trash-a-l" />
+									<i class="mdi mdi-delete" />
 								</a>
 							</b-tooltip>
 							<b-tooltip v-if="user && user.isAdmin" label="More info" position="is-top" class="more">
 								<nuxt-link :to="`/dashboard/admin/file/${item.id}`">
-									<i class="icon-interface-more" />
+									<i class="mdi mdi-dots-horizontal" />
 								</nuxt-link>
 							</b-tooltip>
 						</div>
@@ -120,19 +116,19 @@
 						</b-table-column>
 
 						<b-table-column field="purge" centered>
-							<b-tooltip label="Albums" position="is-top">
+							<b-tooltip label="Edit" position="is-top">
 								<a class="btn" @click="handleFileModal(props.row)">
-									<i class="icon-interface-window" />
+									<i class="mdi mdi-pencil" />
 								</a>
 							</b-tooltip>
 							<b-tooltip label="Delete" position="is-top" class="is-danger">
 								<a class="is-danger" @click="deleteFile(props.row)">
-									<i class="icon-editorial-trash-a-l" />
+									<i class="mdi mdi-delete" />
 								</a>
 							</b-tooltip>
 							<b-tooltip v-if="user && user.isAdmin" label="More info" position="is-top" class="more">
 								<nuxt-link :to="`/dashboard/admin/file/${props.row.id}`">
-									<i class="icon-interface-more" />
+									<i class="mdi mdi-dots-horizontal" />
 								</nuxt-link>
 							</b-tooltip>
 						</b-table-column>
@@ -159,33 +155,10 @@
 				Load more
 			</button>
 		</div>
-		<b-modal :active.sync="isAlbumsModalActive" scroll="keep">
-			<ImageInfo :file="modalData.file" />
+
+		<b-modal class="imageinfo-modal" :active.sync="isAlbumsModalActive">
+			<ImageInfo :file="modalData.file" :albums="modalData.albums" :tags="modalData.tags" />
 		</b-modal>
-		<!-- <b-modal :active.sync="isAlbumsModalActive" :width="640" scroll="keep">
-			<div class="card albumsModal">
-				<div class="card-content">
-					<div class="content">
-						<h3 class="subtitle">
-							Select the albums this file should be a part of
-						</h3>
-						<hr>
-
-						<div class="albums-container">
-							<div v-for="album in albums" :key="album.id" class="album">
-								<div class="field">
-									<b-checkbox
-										:value="isAlbumSelected(album.id)"
-										@input="albumCheckboxClicked($event, album.id)">
-										{{ album.name }}
-									</b-checkbox>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		</b-modal> -->
 	</div>
 </template>
 
@@ -263,7 +236,9 @@ export default {
 		},
 	},
 	created() {
+		// TODO: Create a middleware for this
 		this.getAlbums();
+		this.getTags();
 	},
 	methods: {
 		async search() {
@@ -348,6 +323,13 @@ export default {
 
 			this.isAlbumsModalActive = true;
 		},
+		async getTags() {
+			try {
+				await this.$store.dispatch('tags/fetch');
+			} catch (e) {
+				this.$store.dispatch('alert/set', { text: e.message, error: true }, { root: true });
+			}
+		},
 		mouseOver(id) {
 			const foundIndex = this.hoveredItems.indexOf(id);
 			if (foundIndex > -1) return;
@@ -504,4 +486,13 @@ div.actions {
 		opacity: 1;
 	}
 }
+
+.imageinfo-modal::-webkit-scrollbar {
+    width: 0px;  /* Remove scrollbar space */
+    background: transparent;  /* Optional: just make scrollbar invisible */
+}
+
+i.mdi {
+	font-size: 16px;
+}
 </style>
diff --git a/src/site/components/grid/waterfall/Waterfall.vue b/src/site/components/grid/waterfall/Waterfall.vue
index 79a330a..762cbbd 100644
--- a/src/site/components/grid/waterfall/Waterfall.vue
+++ b/src/site/components/grid/waterfall/Waterfall.vue
@@ -1,7 +1,7 @@
 <template>
 	<div ref="waterfall" class="waterfall">
 		<WaterfallItem
-			v-for="(item, index) in items"
+			v-for="item in items"
 			:key="item.id"
 			:style="{ width: `${itemWidth}px`, marginBottom: `${gutterHeight}px` }"
 			:width="itemWidth">
@@ -13,6 +13,7 @@
 import WaterfallItem from './WaterfallItem.vue';
 
 const isBrowser = typeof window !== 'undefined';
+// eslint-disable-next-line global-require
 const Masonry = isBrowser ? window.Masonry || require('masonry-layout') : null;
 const imagesloaded = isBrowser ? require('imagesloaded') : null;
 
diff --git a/src/site/components/image-modal/AlbumInfo.vue b/src/site/components/image-modal/AlbumInfo.vue
new file mode 100644
index 0000000..9d57e55
--- /dev/null
+++ b/src/site/components/image-modal/AlbumInfo.vue
@@ -0,0 +1,73 @@
+<template>
+	<b-dropdown
+		v-model="selectedOptions"
+		multiple
+		expanded
+		scrollable
+		inline
+		aria-role="list"
+		max-height="500px">
+		<button slot="trigger" class="button is-primary" type="button">
+			<span>Albums ({{ selectedOptions.length }})</span>
+			<b-icon icon="menu-down" />
+		</button>
+
+		<b-dropdown-item
+			v-for="album in albums"
+			:key="album.id"
+			:value="album.id"
+			aria-role="listitem"
+			@click="handleClick(album.id)">
+			<span>{{ album. name }}</span>
+		</b-dropdown-item>
+	</b-dropdown>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+
+export default {
+	name: 'Albuminfo',
+	props: {
+		imageId: {
+			type: Number,
+			default: 0,
+		},
+		imageAlbums: {
+			type: Array,
+			default: () => [],
+		},
+	},
+	data() {
+		return {
+			selectedOptions: this.imageAlbums.map((e) => e.id),
+		};
+	},
+	computed: {
+		...mapState({
+			albums: (state) => state.albums.tinyDetails,
+		}),
+	},
+	methods: {
+		isAlbumSelected(id) {
+			if (!this.showingModalForFile) return false;
+			const found = this.showingModalForFile.albums.find((el) => el.id === id);
+			return !!(found && found.id);
+		},
+		async handleClick(id) {
+			// here the album should be already removed from the selected list
+			if (this.selectedOptions.indexOf(id) > -1) {
+				this.$handler.executeAction('images/addToAlbum', {
+					albumId: id,
+					fileId: this.imageId,
+				});
+			} else {
+				this.$handler.executeAction('images/removeFromAlbum', {
+					albumId: id,
+					fileId: this.imageId,
+				});
+			}
+		},
+	},
+};
+</script>
diff --git a/src/site/components/image-modal/ImageInfo.vue b/src/site/components/image-modal/ImageInfo.vue
index c9dba1a..c3f0041 100644
--- a/src/site/components/image-modal/ImageInfo.vue
+++ b/src/site/components/image-modal/ImageInfo.vue
@@ -1,10 +1,13 @@
 <template>
 	<div class="container has-background-lolisafe">
 		<div class="columns is-marginless">
-			<div class="column fucking-opl-shut-up">
-				<img src="https://placehold.it/1024x10024">
+			<div class="column image-col has-centered-items">
+				<img v-if="!isVideo(file.type)" class="col-img" :src="file.url">
+				<video v-else class="col-vid" controls>
+					<source :src="file.url" :type="file.type">
+				</video>
 			</div>
-			<div class="column is-one-third">
+			<div class="column data-col is-one-third">
 				<div class="sticky">
 					<div class="divider is-lolisafe has-text-light">
 						File information
@@ -90,21 +93,16 @@
 							<span class="fake-input"><timeago :since="file.createdAt" /></span>
 						</div>
 					</b-field>
+
 					<div class="divider is-lolisafe has-text-light">
-						Albums
+						Tags
 					</div>
+					<Taginfo :imageId="file.id" :imageTags="tags" />
 
 					<div class="divider is-lolisafe has-text-light">
-						Tags
+						Albums
 					</div>
-					<b-field label="Add some tags">
-						<b-taginput
-							v-model="tags"
-							class="lolisafe"
-							ellipsis
-							icon="label"
-							placeholder="Add a tag" />
-					</b-field>
+					<Albuminfo :imageId="file.id" :imageAlbums="albums" />
 				</div>
 			</div>
 		</div>
@@ -114,17 +112,27 @@
 <script>
 import { mapState } from 'vuex';
 
+import Albuminfo from './AlbumInfo.vue';
+import Taginfo from './TagInfo.vue';
+
 export default {
+	components: {
+		Taginfo,
+		Albuminfo,
+	},
 	props: {
 		file: {
 			type: Object,
 			default: () => ({}),
 		},
-	},
-	data() {
-		return {
-			tags: [],
-		};
+		albums: {
+			type: Array,
+			default: () => ([]),
+		},
+		tags: {
+			type: Array,
+			default: () => ([]),
+		},
 	},
 	computed: mapState(['images']),
 	methods: {
@@ -139,6 +147,9 @@ export default {
 
 			return `${parseFloat((bytes / k ** i).toFixed(dm))} ${sizes[i]}`;
 		},
+		isVideo(type) {
+			return type.startsWith('video');
+		},
 	},
 };
 </script>
@@ -176,4 +187,18 @@ export default {
 .divider:first-child {
     margin: 10px 0 25px;
 }
+
+.col-vid {
+	width: 100%;
+}
+
+.image-col {
+	align-items: start;
+}
+
+.data-col  {
+	@media screen and (min-width: 769px) {
+		padding-right: 1.5rem;
+	}
+}
 </style>
diff --git a/src/site/components/image-modal/TagInfo.vue b/src/site/components/image-modal/TagInfo.vue
new file mode 100644
index 0000000..2054e6a
--- /dev/null
+++ b/src/site/components/image-modal/TagInfo.vue
@@ -0,0 +1,103 @@
+<template>
+	<b-field label="Add some tags">
+		<b-taginput
+			:value="selectedTags"
+			:data="filteredTags"
+			class="lolisafe taginp"
+			ellipsis
+			icon="label"
+			placeholder="Add a tag"
+			autocomplete
+			allow-new
+			@typing="getFilteredTags"
+			@add="tagAdded"
+			@remove="tagRemoved" />
+	</b-field>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+
+export default {
+	name: 'Taginfo',
+	props: {
+		imageId: {
+			type: Number,
+			default: 0,
+		},
+		imageTags: {
+			type: Array,
+			default: () => [],
+		},
+	},
+	data() {
+		return {
+			filteredTags: [],
+		};
+	},
+	computed: {
+		...mapState({
+			tags: (state) => state.tags.tagsList,
+		}),
+		selectedTags() { return this.imageTags.map((e) => e.name); },
+		lowercaseTags() { return this.imageTags.map((e) => e.name.toLowerCase()); },
+	},
+	methods: {
+		getFilteredTags(str) {
+			this.filteredTags = this.tags.map((e) => e.name).filter((e) => {
+				// check if the search string matches any of the tags
+				const sanitezedTag = e.toString().toLowerCase();
+				const matches = sanitezedTag.indexOf(str.toLowerCase()) >= 0;
+
+				// check if this tag is already added to our image, to avoid duplicates
+				if (matches) {
+					const foundIndex = this.lowercaseTags.indexOf(sanitezedTag);
+					if (foundIndex === -1) {
+						return true;
+					}
+				}
+
+				return false;
+			});
+		},
+		async tagAdded(tag) {
+			if (!tag) return;
+
+			// normalize into NFC form (diactirics and moonrunes)
+			// replace all whitespace with _
+			// replace multiple __ with a single one
+			tag = tag.normalize('NFC').replace(/\s/g, '_').replace(/_+/g, '_');
+
+			const foundIndex = this.tags.findIndex(({ name }) => name === tag);
+
+			if (foundIndex === -1) {
+				await this.$handler.executeAction('tags/createTag', tag);
+			}
+
+			await this.$handler.executeAction('images/addTag', { fileId: this.imageId, tagName: tag });
+		},
+		tagRemoved(tag) {
+			this.$handler.executeAction('images/removeTag', { fileId: this.imageId, tagName: tag });
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+@import '~/assets/styles/_colors.scss';
+
+.taginp {
+	::v-deep .dropdown-content {
+		background-color: hsl(0, 0%, 100%);
+
+		.dropdown-item {
+			color: hsl(0, 0%, 29%);
+
+			&:hover {
+				color: hsl(0, 0%, 4%);
+				background-color: hsl(0, 0%, 90%);
+			}
+		}
+	}
+}
+</style>
diff --git a/src/site/store/images.js b/src/site/store/images.js
index 0d5e82a..be04c8a 100644
--- a/src/site/store/images.js
+++ b/src/site/store/images.js
@@ -91,6 +91,20 @@ export const actions = {
 
 		commit('removeFile', fileId);
 
+		return response;
+	},
+	async addTag({ commit }, { fileId, tagName }) {
+		const response = await this.$axios.$post('file/tag/add', { fileId, tagName });
+
+		commit('addTagToFile', response.data);
+
+		return response;
+	},
+	async removeTag({ commit }, { fileId, tagName }) {
+		const response = await this.$axios.$post('file/tag/del', { fileId, tagName });
+
+		commit('removeTagFromFile', response.data);
+
 		return response;
 	},
 };
@@ -138,6 +152,19 @@ export const mutations = {
 			state.fileAlbumsMap[fileId].splice(foundIndex, 1);
 		}
 	},
+	addTagToFile(state, { fileId, tag }) {
+		if (!state.fileTagsMap[fileId]) return;
+
+		state.fileTagsMap[fileId].push(tag);
+	},
+	removeTagFromFile(state, { fileId, tag }) {
+		if (!state.fileTagsMap[fileId]) return;
+
+		const foundIndex = state.fileTagsMap[fileId].findIndex(({ id }) => id === tag.id);
+		if (foundIndex > -1) {
+			state.fileTagsMap[fileId].splice(foundIndex, 1);
+		}
+	},
 	resetState(state) {
 		Object.assign(state, getDefaultState());
 	},
diff --git a/src/site/store/tags.js b/src/site/store/tags.js
new file mode 100644
index 0000000..c06b741
--- /dev/null
+++ b/src/site/store/tags.js
@@ -0,0 +1,40 @@
+export const state = () => ({
+	tagsList: [],
+});
+
+export const actions = {
+	async fetch({ commit }) {
+		const response = await this.$axios.$get('tags');
+
+		commit('setTags', response.tags);
+
+		return response;
+	},
+	async createTag({ commit }, name) {
+		const response = await this.$axios.$post('tag/new', { name });
+
+		commit('addTag', response.data);
+
+		return response;
+	},
+	async deleteTag({ commit }, tagId) {
+		const response = await this.$axios.$delete(`tag/${tagId}`);
+
+		commit('deleteTag', response.data);
+
+		return response;
+	},
+};
+
+export const mutations = {
+	setTags(state, tags) {
+		state.tagsList = tags;
+	},
+	addTag(state, tag) {
+		state.tagsList.unshift(tag);
+	},
+	deleteTag(state, { id: tagId }) {
+		const foundIndex = state.tagsList.findIndex(({ id }) => id === tagId);
+		state.tagsList.splice(foundIndex, 1);
+	},
+};
-- 
cgit v1.2.3


From 93478a334b526703797cd3d759a70c18e6c6bb5a Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Tue, 21 Jul 2020 15:45:28 +0300
Subject: fix: make modal use full height on mobile

---
 src/site/components/grid/Grid.vue             | 14 ++++++++------
 src/site/components/image-modal/ImageInfo.vue |  3 +++
 2 files changed, 11 insertions(+), 6 deletions(-)

(limited to 'src/site')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index d29160f..7170709 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -148,12 +148,6 @@
 					</div>
 				</template>
 			</b-table>
-			<button
-				v-if="moreFiles"
-				class="button is-primary mt2"
-				@click="loadMoreFiles">
-				Load more
-			</button>
 		</div>
 
 		<b-modal class="imageinfo-modal" :active.sync="isAlbumsModalActive">
@@ -495,4 +489,12 @@ div.actions {
 i.mdi {
 	font-size: 16px;
 }
+
+.imageinfo-modal{
+	::v-deep .modal-content {
+		@media screen and (max-width: 768px) {
+			min-height: 100vh;
+		}
+	}
+}
 </style>
diff --git a/src/site/components/image-modal/ImageInfo.vue b/src/site/components/image-modal/ImageInfo.vue
index c3f0041..485a8aa 100644
--- a/src/site/components/image-modal/ImageInfo.vue
+++ b/src/site/components/image-modal/ImageInfo.vue
@@ -200,5 +200,8 @@ export default {
 	@media screen and (min-width: 769px) {
 		padding-right: 1.5rem;
 	}
+	@media screen and (max-width: 769px) {
+		padding-bottom: 3rem;
+	}
 }
 </style>
-- 
cgit v1.2.3


From 1a4744de3cfe74524cd0415416fa9da0a322e86c Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Wed, 22 Jul 2020 02:12:24 +0300
Subject: feat: show selected albums first when modal is first opened

fix: change the color of the dropdown for tags to match the base theme
chore: pass props into some of the components instead of fetching from store inside of components
---
 src/site/components/image-modal/AlbumInfo.vue | 33 +++++++++++++++++++++------
 src/site/components/image-modal/ImageInfo.vue |  7 ++++--
 src/site/components/image-modal/TagInfo.vue   | 12 ++--------
 3 files changed, 33 insertions(+), 19 deletions(-)

(limited to 'src/site')

diff --git a/src/site/components/image-modal/AlbumInfo.vue b/src/site/components/image-modal/AlbumInfo.vue
index 9d57e55..8974a11 100644
--- a/src/site/components/image-modal/AlbumInfo.vue
+++ b/src/site/components/image-modal/AlbumInfo.vue
@@ -13,12 +13,12 @@
 		</button>
 
 		<b-dropdown-item
-			v-for="album in albums"
+			v-for="album in orderedAlbums"
 			:key="album.id"
 			:value="album.id"
 			aria-role="listitem"
 			@click="handleClick(album.id)">
-			<span>{{ album. name }}</span>
+			<span>{{ album.name }}</span>
 		</b-dropdown-item>
 	</b-dropdown>
 </template>
@@ -37,18 +37,37 @@ export default {
 			type: Array,
 			default: () => [],
 		},
+		albums: {
+			type: Array,
+			default: () => [],
+		},
 	},
 	data() {
 		return {
-			selectedOptions: this.imageAlbums.map((e) => e.id),
+			selectedOptions: [],
+			orderedAlbums: [],
 		};
 	},
-	computed: {
-		...mapState({
-			albums: (state) => state.albums.tinyDetails,
-		}),
+	created() {
+		this.orderedAlbums = this.getOrderedAlbums();
+		// we're sorting here instead of computed because we want sort on creation
+		// then the array's values should be frozen
+		this.selectedOptions = this.imageAlbums.map((e) => e.id);
 	},
 	methods: {
+		getOrderedAlbums() {
+			return [...this.albums].sort(
+				(a, b) => {
+					const selectedA = this.imageAlbums.findIndex(({ name }) => name === a.name) !== -1;
+					const selectedB = this.imageAlbums.findIndex(({ name }) => name === b.name) !== -1;
+
+					if (selectedA !== selectedB) {
+						return selectedA ? -1 : 1;
+					}
+					return a.name.localeCompare(b.name);
+				},
+			);
+		},
 		isAlbumSelected(id) {
 			if (!this.showingModalForFile) return false;
 			const found = this.showingModalForFile.albums.find((el) => el.id === id);
diff --git a/src/site/components/image-modal/ImageInfo.vue b/src/site/components/image-modal/ImageInfo.vue
index 485a8aa..0562e1f 100644
--- a/src/site/components/image-modal/ImageInfo.vue
+++ b/src/site/components/image-modal/ImageInfo.vue
@@ -102,7 +102,7 @@
 					<div class="divider is-lolisafe has-text-light">
 						Albums
 					</div>
-					<Albuminfo :imageId="file.id" :imageAlbums="albums" />
+					<Albuminfo :imageId="file.id" :imageAlbums="albums" :albums="tinyDetails" />
 				</div>
 			</div>
 		</div>
@@ -134,7 +134,10 @@ export default {
 			default: () => ([]),
 		},
 	},
-	computed: mapState(['images']),
+	computed: mapState({
+		images: (state) => state.images,
+		tinyDetails: (state) => state.albums.tinyDetails,
+	}),
 	methods: {
 		formatBytes(bytes, decimals = 2) {
 			if (bytes === 0) return '0 Bytes';
diff --git a/src/site/components/image-modal/TagInfo.vue b/src/site/components/image-modal/TagInfo.vue
index 2054e6a..a337148 100644
--- a/src/site/components/image-modal/TagInfo.vue
+++ b/src/site/components/image-modal/TagInfo.vue
@@ -88,16 +88,8 @@ export default {
 
 .taginp {
 	::v-deep .dropdown-content {
-		background-color: hsl(0, 0%, 100%);
-
-		.dropdown-item {
-			color: hsl(0, 0%, 29%);
-
-			&:hover {
-				color: hsl(0, 0%, 4%);
-				background-color: hsl(0, 0%, 90%);
-			}
-		}
+		background-color: #323846;
+		box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
 	}
 }
 </style>
-- 
cgit v1.2.3


From 01c04298b0fdcd7165f5532de57e407a853c748b Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Wed, 22 Jul 2020 02:12:40 +0300
Subject: fix: add no-active class

---
 src/site/components/navbar/Navbar.vue | 4 ++++
 1 file changed, 4 insertions(+)

(limited to 'src/site')

diff --git a/src/site/components/navbar/Navbar.vue b/src/site/components/navbar/Navbar.vue
index 0f82200..1b1f10e 100644
--- a/src/site/components/navbar/Navbar.vue
+++ b/src/site/components/navbar/Navbar.vue
@@ -137,4 +137,8 @@ export default {
 			}
 		}
 	}
+
+	.no-active {
+		text-decoration: none !important;
+	}
 </style>
-- 
cgit v1.2.3


From 279234a081e5ea772978732ae5d2e45d8adcd741 Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Wed, 22 Jul 2020 02:14:06 +0300
Subject: feat: add new search input

For now, it clones the autocomplete from buefy, untill a PR or resolution to the opened issue about not being able to manipulate how the suggestions are applied is found
---
 src/site/components/search-input/SearchInput.vue | 516 +++++++++++++++++++++++
 src/site/components/search/Search.vue            | 119 ++++++
 src/site/pages/dashboard/index.vue               |  21 +-
 src/site/store/images.js                         |   1 +
 4 files changed, 646 insertions(+), 11 deletions(-)
 create mode 100644 src/site/components/search-input/SearchInput.vue
 create mode 100644 src/site/components/search/Search.vue

(limited to 'src/site')

diff --git a/src/site/components/search-input/SearchInput.vue b/src/site/components/search-input/SearchInput.vue
new file mode 100644
index 0000000..abc433a
--- /dev/null
+++ b/src/site/components/search-input/SearchInput.vue
@@ -0,0 +1,516 @@
+<template>
+	<div
+		class="autocomplete control"
+		:class="{'is-expanded': expanded}">
+		<b-input
+			ref="input"
+			v-model="newValue"
+			type="text"
+			:size="size"
+			:loading="loading"
+			:rounded="rounded"
+			:icon="icon"
+			:icon-right="newIconRight"
+			:icon-right-clickable="newIconRightClickable"
+			:icon-pack="iconPack"
+			:maxlength="maxlength"
+			:autocomplete="newAutocomplete"
+			:use-html5-validation="false"
+			v-bind="$attrs"
+			@input="onInput"
+			@focus="focused"
+			@blur="onBlur"
+			@keyup.native.esc.prevent="isActive = false"
+			@keydown.native.tab="tabPressed"
+			@keydown.native.enter.prevent="enterPressed"
+			@keydown.native.up.prevent="keyArrows('up')"
+			@keydown.native.down.prevent="keyArrows('down')"
+			@icon-right-click="rightIconClick"
+			@icon-click="(event) => $emit('icon-click', event)" />
+
+		<transition name="fade">
+			<div
+				v-show="isActive && (data.length > 0 || hasEmptySlot || hasHeaderSlot)"
+				ref="dropdown"
+				class="dropdown-menu"
+				:class="{ 'is-opened-top': isOpenedTop && !appendToBody }"
+				:style="style">
+				<div
+					v-show="isActive"
+					class="dropdown-content"
+					:style="contentStyle">
+					<div
+						v-if="hasHeaderSlot"
+						class="dropdown-item">
+						<slot name="header" />
+					</div>
+					<a
+						v-for="(option, index) in data"
+						:key="index"
+						class="dropdown-item"
+						:class="{ 'is-hovered': option === hovered }"
+						@click="setSelected(option, undefined, $event)">
+
+						<slot
+							v-if="hasDefaultSlot"
+							:option="option"
+							:index="index" />
+						<span v-else>
+							{{ getValue(option, true) }}
+						</span>
+					</a>
+					<div
+						v-if="data.length === 0 && hasEmptySlot"
+						class="dropdown-item is-disabled">
+						<slot name="empty" />
+					</div>
+					<div
+						v-if="hasFooterSlot"
+						class="dropdown-item">
+						<slot name="footer" />
+					</div>
+				</div>
+			</div>
+		</transition>
+	</div>
+</template>
+
+<script>
+/* eslint-disable no-underscore-dangle */
+/* eslint-disable vue/require-default-prop */
+/* eslint-disable vue/no-reserved-keys */
+import { getValueByPath, removeElement, createAbsoluteElement } from '../../../../node_modules/buefy/src/utils/helpers';
+import FormElementMixin from '../../../../node_modules/buefy/src/utils/FormElementMixin';
+
+export default {
+	name: 'SearchInput',
+	mixins: [FormElementMixin],
+	inheritAttrs: false,
+	props: {
+		value: [Number, String],
+		data: {
+			type: Array,
+			default: () => [],
+		},
+		field: {
+			type: String,
+			default: 'value',
+		},
+		keepFirst: Boolean,
+		clearOnSelect: Boolean,
+		openOnFocus: Boolean,
+		customFormatter: Function,
+		checkInfiniteScroll: Boolean,
+		keepOpen: Boolean,
+		clearable: Boolean,
+		maxHeight: [String, Number],
+		dropdownPosition: {
+			type: String,
+			default: 'auto',
+		},
+		iconRight: String,
+		iconRightClickable: Boolean,
+		appendToBody: Boolean,
+		customSelector: Function,
+	},
+	data() {
+		return {
+			selected: null,
+			hovered: null,
+			isActive: false,
+			newValue: this.value,
+			newAutocomplete: this.autocomplete || 'off',
+			isListInViewportVertically: true,
+			hasFocus: false,
+			style: {},
+			_isAutocomplete: true,
+			_elementRef: 'input',
+			_bodyEl: undefined, // Used to append to body
+		};
+	},
+	computed: {
+		/**
+         * White-listed items to not close when clicked.
+         * Add input, dropdown and all children.
+         */
+		whiteList() {
+			const whiteList = [];
+			whiteList.push(this.$refs.input.$el.querySelector('input'));
+			whiteList.push(this.$refs.dropdown);
+			// Add all chidren from dropdown
+			if (this.$refs.dropdown !== undefined) {
+				const children = this.$refs.dropdown.querySelectorAll('*');
+				for (const child of children) {
+					whiteList.push(child);
+				}
+			}
+			if (this.$parent.$data._isTaginput) {
+				// Add taginput container
+				whiteList.push(this.$parent.$el);
+				// Add .tag and .delete
+				const tagInputChildren = this.$parent.$el.querySelectorAll('*');
+				for (const tagInputChild of tagInputChildren) {
+					whiteList.push(tagInputChild);
+				}
+			}
+			return whiteList;
+		},
+		/**
+         * Check if exists default slot
+         */
+		hasDefaultSlot() {
+			return !!this.$scopedSlots.default;
+		},
+		/**
+         * Check if exists "empty" slot
+         */
+		hasEmptySlot() {
+			return !!this.$slots.empty;
+		},
+		/**
+         * Check if exists "header" slot
+         */
+		hasHeaderSlot() {
+			return !!this.$slots.header;
+		},
+		/**
+         * Check if exists "footer" slot
+         */
+		hasFooterSlot() {
+			return !!this.$slots.footer;
+		},
+		/**
+         * Apply dropdownPosition property
+         */
+		isOpenedTop() {
+			return this.dropdownPosition === 'top' || (this.dropdownPosition === 'auto' && !this.isListInViewportVertically);
+		},
+		newIconRight() {
+			if (this.clearable && this.newValue) {
+				return 'close-circle';
+			}
+			return this.iconRight;
+		},
+		newIconRightClickable() {
+			if (this.clearable) {
+				return true;
+			}
+			return this.iconRightClickable;
+		},
+		contentStyle() {
+			return {
+				// eslint-disable-next-line no-nested-ternary
+				maxHeight: this.maxHeight === undefined
+					// eslint-disable-next-line no-restricted-globals
+					? null : (isNaN(this.maxHeight) ? this.maxHeight : `${this.maxHeight}px`),
+			};
+		},
+	},
+	watch: {
+		/**
+         * When dropdown is toggled, check the visibility to know when
+         * to open upwards.
+         */
+		isActive(active) {
+			if (this.dropdownPosition === 'auto') {
+				if (active) {
+					this.calcDropdownInViewportVertical();
+				} else {
+					// Timeout to wait for the animation to finish before recalculating
+					setTimeout(() => {
+						this.calcDropdownInViewportVertical();
+					}, 100);
+				}
+			}
+			if (active) this.$nextTick(() => this.setHovered(null));
+		},
+		/**
+         * When updating input's value
+         *   1. Emit changes
+         *   2. If value isn't the same as selected, set null
+         *   3. Close dropdown if value is clear or else open it
+         */
+		newValue(value) {
+			this.$emit('input', value);
+			// Check if selected is invalid
+			const currentValue = this.getValue(this.selected);
+			if (currentValue && currentValue !== value) {
+				this.setSelected(null, false);
+			}
+			// Close dropdown if input is clear or else open it
+			if (this.hasFocus && (!this.openOnFocus || value)) {
+				this.isActive = !!value;
+			}
+		},
+		/**
+         * When v-model is changed:
+         *   1. Update internal value.
+         *   2. If it's invalid, validate again.
+         */
+		value(value) {
+			this.newValue = value;
+		},
+		/**
+         * Select first option if "keep-first
+         */
+		data(value) {
+			// Keep first option always pre-selected
+			if (this.keepFirst) {
+				this.selectFirstOption(value);
+			}
+		},
+	},
+	created() {
+		if (typeof window !== 'undefined') {
+			document.addEventListener('click', this.clickedOutside);
+			if (this.dropdownPosition === 'auto') window.addEventListener('resize', this.calcDropdownInViewportVertical);
+		}
+	},
+	mounted() {
+		if (this.checkInfiniteScroll && this.$refs.dropdown && this.$refs.dropdown.querySelector('.dropdown-content')) {
+			const list = this.$refs.dropdown.querySelector('.dropdown-content');
+			list.addEventListener('scroll', () => this.checkIfReachedTheEndOfScroll(list));
+		}
+		if (this.appendToBody) {
+			this.$data._bodyEl = createAbsoluteElement(this.$refs.dropdown);
+			this.updateAppendToBody();
+		}
+	},
+	beforeDestroy() {
+		if (typeof window !== 'undefined') {
+			document.removeEventListener('click', this.clickedOutside);
+			if (this.dropdownPosition === 'auto') window.removeEventListener('resize', this.calcDropdownInViewportVertical);
+		}
+		if (this.checkInfiniteScroll && this.$refs.dropdown && this.$refs.dropdown.querySelector('.dropdown-content')) {
+			const list = this.$refs.dropdown.querySelector('.dropdown-content');
+			list.removeEventListener('scroll', this.checkIfReachedTheEndOfScroll);
+		}
+		if (this.appendToBody) {
+			removeElement(this.$data._bodyEl);
+		}
+	},
+	methods: {
+		/**
+         * Set which option is currently hovered.
+         */
+		setHovered(option) {
+			if (option === undefined) return;
+			this.hovered = option;
+		},
+		/**
+         * Set which option is currently selected, update v-model,
+         * update input value and close dropdown.
+         */
+		setSelected(option, closeDropdown = true, event = undefined) {
+			if (option === undefined) return;
+			this.selected = option;
+			this.$emit('select', this.selected, event);
+			if (this.selected !== null) {
+				if (this.customSelector) {
+					this.newValue = this.clearOnSelect ? '' : this.customSelector(this.selected, this.newValue);
+				} else {
+					this.newValue = this.clearOnSelect ? '' : this.getValue(this.selected);
+				}
+				this.setHovered(null);
+			}
+			// eslint-disable-next-line no-unused-expressions
+			closeDropdown && this.$nextTick(() => { this.isActive = false; });
+			this.checkValidity();
+		},
+		/**
+         * Select first option
+         */
+		selectFirstOption(options) {
+			this.$nextTick(() => {
+				if (options.length) {
+					// If has visible data or open on focus, keep updating the hovered
+					if (this.openOnFocus || (this.newValue !== '' && this.hovered !== options[0])) {
+						this.setHovered(options[0]);
+					}
+				} else {
+					this.setHovered(null);
+				}
+			});
+		},
+		/**
+         * Enter key listener.
+         * Select the hovered option.
+         */
+		enterPressed(event) {
+			if (this.hovered === null) return;
+			this.setSelected(this.hovered, !this.keepOpen, event);
+		},
+		/**
+         * Tab key listener.
+         * Select hovered option if it exists, close dropdown, then allow
+         * native handling to move to next tabbable element.
+         */
+		tabPressed(event) {
+			if (this.hovered === null) {
+				this.isActive = false;
+				return;
+			}
+			this.setSelected(this.hovered, !this.keepOpen, event);
+		},
+		/**
+         * Close dropdown if clicked outside.
+         */
+		clickedOutside(event) {
+			if (this.whiteList.indexOf(event.target) < 0) this.isActive = false;
+		},
+		/**
+         * Return display text for the input.
+         * If object, get value from path, or else just the value.
+         */
+		getValue(option) {
+			if (option === null) return;
+			if (typeof this.customFormatter !== 'undefined') {
+				// eslint-disable-next-line consistent-return
+				return this.customFormatter(option);
+			}
+			// eslint-disable-next-line consistent-return
+			return typeof option === 'object'
+				? getValueByPath(option, this.field)
+				: option;
+		},
+		/**
+         * Check if the scroll list inside the dropdown
+         * reached it's end.
+         */
+		checkIfReachedTheEndOfScroll(list) {
+			if (list.clientHeight !== list.scrollHeight
+                && list.scrollTop + list.clientHeight >= list.scrollHeight) {
+				this.$emit('infinite-scroll');
+			}
+		},
+		/**
+         * Calculate if the dropdown is vertically visible when activated,
+         * otherwise it is openened upwards.
+         */
+		calcDropdownInViewportVertical() {
+			this.$nextTick(() => {
+				/**
+                * this.$refs.dropdown may be undefined
+                * when Autocomplete is conditional rendered
+                */
+				if (this.$refs.dropdown === undefined) return;
+				const rect = this.$refs.dropdown.getBoundingClientRect();
+				this.isListInViewportVertically = (
+					rect.top >= 0
+                    && rect.bottom <= (window.innerHeight
+                        || document.documentElement.clientHeight)
+				);
+				if (this.appendToBody) {
+					this.updateAppendToBody();
+				}
+			});
+		},
+		/**
+         * Arrows keys listener.
+         * If dropdown is active, set hovered option, or else just open.
+         */
+		keyArrows(direction) {
+			const sum = direction === 'down' ? 1 : -1;
+			if (this.isActive) {
+				let index = this.data.indexOf(this.hovered) + sum;
+				index = index > this.data.length - 1 ? this.data.length : index;
+				index = index < 0 ? 0 : index;
+				this.setHovered(this.data[index]);
+				const list = this.$refs.dropdown.querySelector('.dropdown-content');
+				const element = list.querySelectorAll('a.dropdown-item:not(.is-disabled)')[index];
+				if (!element) return;
+				const visMin = list.scrollTop;
+				const visMax = list.scrollTop + list.clientHeight - element.clientHeight;
+				if (element.offsetTop < visMin) {
+					list.scrollTop = element.offsetTop;
+				} else if (element.offsetTop >= visMax) {
+					list.scrollTop = (
+						element.offsetTop
+                        - list.clientHeight
+                        + element.clientHeight
+					);
+				}
+			} else {
+				this.isActive = true;
+			}
+		},
+		/**
+         * Focus listener.
+         * If value is the same as selected, select all text.
+         */
+		focused(event) {
+			if (this.getValue(this.selected) === this.newValue) {
+				this.$el.querySelector('input').select();
+			}
+			if (this.openOnFocus) {
+				this.isActive = true;
+				if (this.keepFirst) {
+					this.selectFirstOption(this.data);
+				}
+			}
+			this.hasFocus = true;
+			this.$emit('focus', event);
+		},
+		/**
+        * Blur listener.
+        */
+		onBlur(event) {
+			this.hasFocus = false;
+			this.$emit('blur', event);
+		},
+		onInput() {
+			const currentValue = this.getValue(this.selected);
+			if (currentValue && currentValue === this.newValue) return;
+			this.$emit('typing', this.newValue);
+			this.checkValidity();
+		},
+		rightIconClick(event) {
+			if (this.clearable) {
+				this.newValue = '';
+				if (this.openOnFocus) {
+					this.$el.focus();
+				}
+			} else {
+				this.$emit('icon-right-click', event);
+			}
+		},
+		checkValidity() {
+			if (this.useHtml5Validation) {
+				this.$nextTick(() => {
+					this.checkHtml5Validity();
+				});
+			}
+		},
+		updateAppendToBody() {
+			const dropdownMenu = this.$refs.dropdown;
+			const trigger = this.$refs.input.$el;
+			if (dropdownMenu && trigger) {
+				// update wrapper dropdown
+				const root = this.$data._bodyEl;
+				root.classList.forEach((item) => root.classList.remove(item));
+				root.classList.add('autocomplete');
+				root.classList.add('control');
+				if (this.expandend) {
+					root.classList.add('is-expandend');
+				}
+				const rect = trigger.getBoundingClientRect();
+				let top = rect.top + window.scrollY;
+				const left = rect.left + window.scrollX;
+				if (!this.isOpenedTop) {
+					top += trigger.clientHeight;
+				} else {
+					top -= dropdownMenu.clientHeight;
+				}
+				this.style = {
+					position: 'absolute',
+					top: `${top}px`,
+					left: `${left}px`,
+					width: `${trigger.clientWidth}px`,
+					maxWidth: `${trigger.clientWidth}px`,
+					zIndex: '99',
+				};
+			}
+		},
+	},
+};
+</script>
diff --git a/src/site/components/search/Search.vue b/src/site/components/search/Search.vue
new file mode 100644
index 0000000..57226a9
--- /dev/null
+++ b/src/site/components/search/Search.vue
@@ -0,0 +1,119 @@
+<template>
+	<div class="level-right">
+		<div class="level-item">
+			<b-field>
+				<SearchInput
+					ref="autocomplete"
+					v-model="query"
+					:data="filteredHints"
+					:customSelector="handleSelect"
+					field="name"
+					class="lolisafe-input search"
+					placeholder="Search"
+					type="search"
+					open-on-focus
+					@typing="handleTyping">
+					<template slot-scope="props">
+						<b>{{ props.option.name }}:</b>
+						<small>
+							{{ props.option.valueFormat }}
+						</small>
+					</template>
+				</SearchInput>
+				<p class="control">
+					<b-button type="is-lolisafe" @click="onSubmit">
+						Search
+					</b-button>
+				</p>
+			</b-field>
+		</div>
+	</div>
+</template>
+
+<script>
+import SearchInput from '~/components/search-input/SearchInput.vue';
+
+export default {
+	components: {
+		SearchInput,
+	},
+	data() {
+		return {
+			query: '',
+			hints: [
+				{
+					'name': 'tag',
+					'valueFormat': 'name',
+					'hint': '',
+				},
+				{
+					'name': 'album',
+					'valueFormat': 'name',
+					'hint': '',
+				},
+				{
+					'name': 'before',
+					'valueFormat': 'specific date',
+					'hint': '',
+				},
+				{
+					'name': 'during',
+					'valueFormat': 'specific date',
+					'hint': '',
+				},
+				{
+					'name': 'after',
+					'valueFormat': 'specific date',
+					'hint': '',
+				},
+			],
+			filteredHints: [],
+		};
+	},
+	created() {
+		this.filteredHints = this.hints; // fixes the issue where on pageload, suggestions wont load
+	},
+	methods: {
+		handleSelect(selected, currentValue) {
+			this.$refs.autocomplete.focus();
+			if (!currentValue) { return `${selected.name}:`; }
+			if (/[^:][\s|;|,]+$/gi.test(currentValue)) return `${currentValue}${selected.name}:`;
+			return currentValue.replace(/\w+$/gi, `${selected.name}:`);
+		},
+		handleTyping(qry) {
+			qry = qry || '';
+			// get the last word or group of words
+			const lastWord = (qry.match(/("[^"]*")|[^;, ]+/g) || ['']).pop().toLowerCase();
+			// if there's an open/unbalanced quote, don't autosuggest
+			if (/^[^"]*("[^"]*"[^"]*)*(")[^"]*$/.test(qry)) { this.filteredHints = []; return; }
+			// don't autosuggest if we have an open query but no text yet
+			if (/:[\s|;|,]?$/gi.test(qry)) { this.filteredHints = []; return; }
+			// if the above query didn't match (all quotes are balanced
+			// and the previous tag has value
+			// check if we're about to start a new tag
+			if (/[\s|;|,]+$/gi.test(qry)) { this.filteredHints = this.hints; return; }
+
+			// if we got here, then we handled all special cases
+			// now take last word, and check if we can autosuggest a tag
+			this.filteredHints = this.hints.filter((hint) => hint.name
+				.toString()
+				.toLowerCase()
+				.indexOf(lastWord) === 0);
+		},
+		sanitizeQuery(qry) {
+			// \w+:\s+? to transform 'tag: 123' into 'tag:123'
+		},
+		onSubmit() {
+			this.$emit('search', this.query);
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+	.search {
+		::v-deep .dropdown-content {
+			background-color: #323846;
+		}
+	}
+</style>
diff --git a/src/site/pages/dashboard/index.vue b/src/site/pages/dashboard/index.vue
index d623b5c..cfd68ba 100644
--- a/src/site/pages/dashboard/index.vue
+++ b/src/site/pages/dashboard/index.vue
@@ -16,17 +16,7 @@
 						</div>
 						<div class="level-right">
 							<div class="level-item">
-								<b-field>
-									<b-input
-										class="lolisafe-input"
-										placeholder="Search"
-										type="search" />
-									<p class="control">
-										<b-button type="is-lolisafe">
-											Search
-										</b-button>
-									</p>
-								</b-field>
+								<Search @search="onSearch" />
 							</div>
 						</div>
 					</nav>
@@ -68,11 +58,13 @@ import { mapState, mapGetters, mapActions } from 'vuex';
 
 import Sidebar from '~/components/sidebar/Sidebar.vue';
 import Grid from '~/components/grid/Grid.vue';
+import Search from '~/components/search/Search.vue';
 
 export default {
 	components: {
 		Sidebar,
 		Grid,
+		Search,
 	},
 	middleware: ['auth', ({ store }) => {
 		store.commit('images/resetState');
@@ -82,6 +74,7 @@ export default {
 		return {
 			current: 1,
 			isLoading: false,
+			search: '',
 		};
 	},
 	computed: {
@@ -98,6 +91,9 @@ export default {
 	watch: {
 		current: 'fetchPaginate',
 	},
+	created() {
+		this.filteredHints = this.hints; // fixes the issue where on pageload, suggestions wont load
+	},
 	methods: {
 		...mapActions({
 			fetch: 'images/fetch',
@@ -107,6 +103,9 @@ export default {
 			await this.fetch(this.current);
 			this.isLoading = false;
 		},
+		onSearch(query) {
+			this.searc = query;
+		},
 	},
 };
 </script>
diff --git a/src/site/store/images.js b/src/site/store/images.js
index be04c8a..4737c26 100644
--- a/src/site/store/images.js
+++ b/src/site/store/images.js
@@ -8,6 +8,7 @@ export const getDefaultState = () => ({
 		limit: 30,
 		totalFiles: 0,
 	},
+	search: '',
 	albumName: null,
 	albumDownloadEnabled: false,
 	fileExtraInfoMap: {}, // information about the selected file
-- 
cgit v1.2.3


From 39e9941ded8de4e41048781daa80de0838c01c19 Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Thu, 23 Jul 2020 04:08:31 +0300
Subject: feat: Add hiding to recommendations as a prop

fix: change some of the regexes to remove , and ; as separator support because the query parser doesn't understad them and I don't feel like dealing with all the edge cases introduces by it
---
 src/site/components/search/Search.vue   | 35 ++++++++++++++++++++++++---------
 src/site/pages/dashboard/albums/_id.vue | 21 +++++++++-----------
 src/site/pages/dashboard/index.vue      | 10 +++++++++-
 src/site/store/images.js                |  6 ++++++
 4 files changed, 50 insertions(+), 22 deletions(-)

(limited to 'src/site')

diff --git a/src/site/components/search/Search.vue b/src/site/components/search/Search.vue
index 57226a9..72a5707 100644
--- a/src/site/components/search/Search.vue
+++ b/src/site/components/search/Search.vue
@@ -12,7 +12,8 @@
 					placeholder="Search"
 					type="search"
 					open-on-focus
-					@typing="handleTyping">
+					@typing="handleTyping"
+					@keydown.native.enter="onSubmit">
 					<template slot-scope="props">
 						<b>{{ props.option.name }}:</b>
 						<small>
@@ -37,6 +38,12 @@ export default {
 	components: {
 		SearchInput,
 	},
+	props: {
+		hiddenHints: {
+			type: Array,
+			default: () => [],
+		},
+	},
 	data() {
 		return {
 			query: '',
@@ -66,11 +73,17 @@ export default {
 					'valueFormat': 'specific date',
 					'hint': '',
 				},
+				{
+					'name': 'file',
+					'valueFormat': 'generated name',
+					'hint': '',
+				},
 			],
 			filteredHints: [],
 		};
 	},
 	created() {
+		this.hints = this.hints.filter(({ name }) => this.hiddenHints.indexOf(name) === -1);
 		this.filteredHints = this.hints; // fixes the issue where on pageload, suggestions wont load
 	},
 	methods: {
@@ -83,15 +96,19 @@ export default {
 		handleTyping(qry) {
 			qry = qry || '';
 			// get the last word or group of words
-			const lastWord = (qry.match(/("[^"]*")|[^;, ]+/g) || ['']).pop().toLowerCase();
+			let lastWord = (qry.match(/("[^"]*")|[^\s]+/g) || ['']).pop().toLowerCase();
 			// if there's an open/unbalanced quote, don't autosuggest
 			if (/^[^"]*("[^"]*"[^"]*)*(")[^"]*$/.test(qry)) { this.filteredHints = []; return; }
 			// don't autosuggest if we have an open query but no text yet
-			if (/:[\s|;|,]?$/gi.test(qry)) { this.filteredHints = []; return; }
+			if (/:\s+$/gi.test(qry)) { this.filteredHints = []; return; }
 			// if the above query didn't match (all quotes are balanced
 			// and the previous tag has value
 			// check if we're about to start a new tag
-			if (/[\s|;|,]+$/gi.test(qry)) { this.filteredHints = this.hints; return; }
+			if (/\s+$/gi.test(qry)) { this.filteredHints = this.hints; return; }
+
+			// ignore starting `-` from lastword, because - is used to
+			// exclude something, so -alb should autosuggest album
+			lastWord = lastWord.replace(/^-/, '');
 
 			// if we got here, then we handled all special cases
 			// now take last word, and check if we can autosuggest a tag
@@ -100,11 +117,11 @@ export default {
 				.toLowerCase()
 				.indexOf(lastWord) === 0);
 		},
-		sanitizeQuery(qry) {
-			// \w+:\s+? to transform 'tag: 123' into 'tag:123'
-		},
-		onSubmit() {
-			this.$emit('search', this.query);
+		onSubmit(event) {
+			if (event.key === 'Enter') {
+				if (/:$/gi.test(this.query)) { return; }
+			}
+			this.$emit('search', this.query, event);
 		},
 	},
 };
diff --git a/src/site/pages/dashboard/albums/_id.vue b/src/site/pages/dashboard/albums/_id.vue
index a4aa440..7e96b33 100644
--- a/src/site/pages/dashboard/albums/_id.vue
+++ b/src/site/pages/dashboard/albums/_id.vue
@@ -25,17 +25,7 @@
 						</div>
 						<div class="level-right">
 							<div class="level-item">
-								<b-field>
-									<b-input
-										class="lolisafe-input"
-										placeholder="Search"
-										type="search" />
-									<p class="control">
-										<b-button type="is-lolisafe">
-											Search
-										</b-button>
-									</p>
-								</b-field>
+								<Search :hidden-hints="['album']" />
 							</div>
 						</div>
 					</nav>
@@ -43,7 +33,8 @@
 					<hr>
 
 					<Grid
-						v-if="totalFiles"
+						v-if="
+							totalFiles"
 						:files="images.files"
 						:total="totalFiles">
 						<template v-slot:pagination>
@@ -64,8 +55,12 @@
 								aria-current-label="Current page" />
 						</template>
 					</Grid>
+					</search>
 				</div>
 			</div>
+			</nav>
+		</div>
+		</div>
 		</div>
 	</section>
 </template>
@@ -75,11 +70,13 @@ import { mapState, mapGetters, mapActions } from 'vuex';
 
 import Sidebar from '~/components/sidebar/Sidebar.vue';
 import Grid from '~/components/grid/Grid.vue';
+import Search from '~/components/search/Search.vue';
 
 export default {
 	components: {
 		Sidebar,
 		Grid,
+		Search,
 	},
 	middleware: ['auth', ({ route, store }) => {
 		store.commit('images/resetState');
diff --git a/src/site/pages/dashboard/index.vue b/src/site/pages/dashboard/index.vue
index cfd68ba..096f4e3 100644
--- a/src/site/pages/dashboard/index.vue
+++ b/src/site/pages/dashboard/index.vue
@@ -103,8 +103,16 @@ export default {
 			await this.fetch(this.current);
 			this.isLoading = false;
 		},
+		sanitizeQuery(qry) {
+			// remove spaces between a search type selector `album:`
+			// and the value (ex `tag: 123` -> `tag:123`)
+			return (qry || '').replace(/(\w+):\s+/gi, '$1:');
+		},
 		onSearch(query) {
-			this.searc = query;
+			this.search = query;
+			this.$handler.executeAction('images/search', {
+				q: this.sanitizeQuery(query),
+			});
 		},
 	},
 };
diff --git a/src/site/store/images.js b/src/site/store/images.js
index 4737c26..0488573 100644
--- a/src/site/store/images.js
+++ b/src/site/store/images.js
@@ -106,6 +106,12 @@ export const actions = {
 
 		commit('removeTagFromFile', response.data);
 
+		return response;
+	},
+	async search({ commit }, { q, albumId }) {
+		const optionalAlbum = albumId ? `&albumId=${albumId}` : '';
+		const response = await this.$axios.$get(`search/?q=${encodeURI(q)}${optionalAlbum}`);
+
 		return response;
 	},
 };
-- 
cgit v1.2.3


From c88d08330f239a897e9f24cb32b25759680619b8 Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Thu, 23 Jul 2020 04:09:01 +0300
Subject: feat: add experimental query to sql generator for searching

---
 src/site/pages/dashboard/albums/_id.vue | 4 ----
 1 file changed, 4 deletions(-)

(limited to 'src/site')

diff --git a/src/site/pages/dashboard/albums/_id.vue b/src/site/pages/dashboard/albums/_id.vue
index 7e96b33..0b67ec3 100644
--- a/src/site/pages/dashboard/albums/_id.vue
+++ b/src/site/pages/dashboard/albums/_id.vue
@@ -55,12 +55,8 @@
 								aria-current-label="Current page" />
 						</template>
 					</Grid>
-					</search>
 				</div>
 			</div>
-			</nav>
-		</div>
-		</div>
 		</div>
 	</section>
 </template>
-- 
cgit v1.2.3


From 151c360740aac5733759888220d91a1d3713b6e1 Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Fri, 2 Oct 2020 22:16:34 +0300
Subject: feat: allow administrators to create custom links for albums

---
 src/site/components/album/AlbumDetails.vue | 58 +++++++++++++++++++++++++++++-
 src/site/components/sidebar/Sidebar.vue    |  2 +-
 src/site/store/albums.js                   |  7 ++++
 3 files changed, 65 insertions(+), 2 deletions(-)

(limited to 'src/site')

diff --git a/src/site/components/album/AlbumDetails.vue b/src/site/components/album/AlbumDetails.vue
index b411f13..ac6eba5 100644
--- a/src/site/components/album/AlbumDetails.vue
+++ b/src/site/components/album/AlbumDetails.vue
@@ -58,7 +58,30 @@
 				<div class="level is-paddingless">
 					<div class="level-left">
 						<div class="level-item">
+							<b-field v-if="auth.user.isAdmin">
+								<p class="control">
+									<button
+										:class="{ 'is-loading': isCreatingLink }"
+										class="button is-primary reset-font-size-button"
+										style="float: left"
+										@click="createLink(albumId)">
+										Create new link
+									</button>
+								</p>
+								<p class="control">
+									<b-dropdown>
+										<button slot="trigger" class="button is-primary reset-font-size-button">
+											<b-icon icon="menu-down" />
+										</button>
+
+										<b-dropdown-item @click="createCustomLink(albumId)">
+											Custom link
+										</b-dropdown-item>
+									</b-dropdown>
+								</p>
+							</b-field>
 							<button
+								v-else
 								:class="{ 'is-loading': isCreatingLink }"
 								class="button is-primary"
 								style="float: left"
@@ -107,13 +130,14 @@ export default {
 			isDeletingLinks: [],
 		};
 	},
-	computed: mapState(['config']),
+	computed: mapState(['config', 'auth']),
 	methods: {
 		...mapActions({
 			deleteAlbumAction: 'albums/deleteAlbum',
 			deleteAlbumLinkAction: 'albums/deleteLink',
 			updateLinkOptionsAction: 'albums/updateLinkOptions',
 			createLinkAction: 'albums/createLink',
+			createCustomLinkAction: 'albums/createCustomLink',
 			alert: 'alert/set',
 		}),
 		promptDeleteAlbum(id) {
@@ -172,6 +196,17 @@ export default {
 				this.alert({ text: e.message, error: true });
 			}
 		},
+		async createCustomLink(albumId) {
+			this.$buefy.dialog.prompt({
+				message: 'Custom link identifier',
+				inputAttrs: {
+					placeholder: '',
+					maxlength: 10,
+				},
+				trapFocus: true,
+				onConfirm: (value) => this.$handler.executeAction('albums/createCustomLink', { albumId, value }),
+			});
+		},
 		isDeleting(identifier) {
 			return this.isDeletingLinks.indexOf(identifier) > -1;
 		},
@@ -182,6 +217,11 @@ export default {
 <style lang="scss" scoped>
 	@import '~/assets/styles/_colors.scss';
 
+	.reset-font-size-button {
+		font-size: 1rem;
+		height: 2.25em;
+	}
+
 	div.details {
 		flex: 0 1 100%;
 		padding-left: 2em;
@@ -208,4 +248,20 @@ export default {
 					box-shadow: $boxShadowLight;
 		}
 	}
+
+	.dialog.modal .modal-card-body input {
+		border: 2px solid #21252d;
+		border-radius: 0.3em !important;
+		background: rgba(0, 0, 0, 0.15);
+		padding: 1rem;
+		color: $textColor;
+		height: 3rem;
+		&:focus,
+		&:hover {
+			border: 2px solid #21252d;
+		}
+		&::placeholder {
+			color: $textColor;
+		}
+	}
 </style>
diff --git a/src/site/components/sidebar/Sidebar.vue b/src/site/components/sidebar/Sidebar.vue
index d586122..2e8ca9e 100644
--- a/src/site/components/sidebar/Sidebar.vue
+++ b/src/site/components/sidebar/Sidebar.vue
@@ -22,7 +22,7 @@
 				tag="nuxt-link"
 				to="/dashboard/tags"
 				exact />
-			<b-menu-item icon="settings" expanded>
+			<b-menu-item icon="menu" expanded>
 				<template slot="label" slot-scope="props">
 					Administration
 					<b-icon class="is-pulled-right" :icon="props.expanded ? 'menu-down' : 'menu-up'" />
diff --git a/src/site/store/albums.js b/src/site/store/albums.js
index 8441182..c1ff696 100644
--- a/src/site/store/albums.js
+++ b/src/site/store/albums.js
@@ -55,6 +55,13 @@ export const actions = {
 
 		return response;
 	},
+	async createCustomLink({ commit }, { albumId, value }) {
+		const response = await this.$axios.$post('album/link/new', { albumId, identifier: value });
+
+		commit('addAlbumLink', { albumId, data: response.data });
+
+		return response;
+	},
 	async updateLinkOptions({ commit }, { albumId, linkOpts }) {
 		const response = await this.$axios.$post('album/link/edit', {
 			identifier: linkOpts.identifier,
-- 
cgit v1.2.3


From 4a3fef2b9931266d40c1d9e88748fd2aa623dc79 Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Thu, 12 Nov 2020 22:58:34 +0200
Subject: chore: update buefy to 0.9

---
 src/site/components/album/AlbumDetails.vue | 77 ++++++++++++------------
 src/site/components/grid/Grid.vue          | 77 ++++++++++++------------
 src/site/pages/dashboard/admin/users.vue   | 94 ++++++++++++++++--------------
 3 files changed, 126 insertions(+), 122 deletions(-)

(limited to 'src/site')

diff --git a/src/site/components/album/AlbumDetails.vue b/src/site/components/album/AlbumDetails.vue
index ac6eba5..2d0bb5d 100644
--- a/src/site/components/album/AlbumDetails.vue
+++ b/src/site/components/album/AlbumDetails.vue
@@ -5,46 +5,49 @@
 		<b-table
 			:data="details.links || []"
 			:mobile-cards="true">
-			<template slot-scope="props">
-				<b-table-column
-					field="identifier"
-					label="Link"
-					centered>
-					<a
-						:href="`${config.URL}/a/${props.row.identifier}`"
-						target="_blank">
-						{{ props.row.identifier }}
-					</a>
-				</b-table-column>
+			<b-table-column
+				v-slot="props"
+				field="identifier"
+				label="Link"
+				centered>
+				<a
+					:href="`${config.URL}/a/${props.row.identifier}`"
+					target="_blank">
+					{{ props.row.identifier }}
+				</a>
+			</b-table-column>
 
-				<b-table-column
-					field="views"
-					label="Views"
-					centered>
-					{{ props.row.views }}
-				</b-table-column>
+			<b-table-column
+				v-slot="props"
+				field="views"
+				label="Views"
+				centered>
+				{{ props.row.views }}
+			</b-table-column>
 
-				<b-table-column
-					field="enableDownload"
-					label="Allow download"
-					centered>
-					<b-switch
-						v-model="props.row.enableDownload"
-						@input="updateLinkOptions(albumId, props.row)" />
-				</b-table-column>
+			<b-table-column
+				v-slot="props"
+				field="enableDownload"
+				label="Allow download"
+				centered>
+				<b-switch
+					v-model="props.row.enableDownload"
+					@input="updateLinkOptions(albumId, props.row)" />
+			</b-table-column>
+
+			<b-table-column
+				v-slot="props"
+				field="enabled"
+				numeric>
+				<button
+					:class="{ 'is-loading': isDeleting(props.row.identifier) }"
+					class="button is-danger"
+					:disabled="isDeleting(props.row.identifier)"
+					@click="promptDeleteAlbumLink(albumId, props.row.identifier)">
+					Delete link
+				</button>
+			</b-table-column>
 
-				<b-table-column
-					field="enabled"
-					numeric>
-					<button
-						:class="{ 'is-loading': isDeleting(props.row.identifier) }"
-						class="button is-danger"
-						:disabled="isDeleting(props.row.identifier)"
-						@click="promptDeleteAlbumLink(albumId, props.row.identifier)">
-						Delete link
-					</button>
-				</b-table-column>
-			</template>
 			<template slot="empty">
 				<div class="has-text-centered">
 					<i class="icon-misc-mood-sad" />
diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index 7170709..1fa3167 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -92,48 +92,45 @@
 		</template>
 		<div v-else>
 			<b-table :data="gridFiles || []" :mobile-cards="true">
-				<template slot-scope="props">
-					<template v-if="!props.row.hideFromList">
-						<b-table-column field="url" label="URL">
-							<a :href="props.row.url" target="_blank">{{ props.row.url }}</a>
-						</b-table-column>
-
-						<b-table-column field="albums" label="Albums" centered>
-							<template v-for="(album, index) in props.row.albums">
-								<nuxt-link :key="index" :to="`/dashboard/albums/${album.id}`">
-									{{ album.name }}
-								</nuxt-link>
-								<template v-if="index < props.row.albums.length - 1">
-									,
-								</template>
-							</template>
+				<b-table-column v-slot="props" field="url" label="URL">
+					<a :href="props.row.url" target="_blank">{{ props.row.url }}</a>
+				</b-table-column>
+
+				<b-table-column v-slot="props" field="albums" label="Albums" centered>
+					<template v-for="(album, index) in props.row.albums">
+						<nuxt-link :key="index" :to="`/dashboard/albums/${album.id}`">
+							{{ album.name }}
+						</nuxt-link>
+						<template v-if="index < props.row.albums.length - 1">
+							,
+						</template>
+					</template>
 
-							{{ props.row.username }}
-						</b-table-column>
+					{{ props.row.username }}
+				</b-table-column>
 
-						<b-table-column field="uploaded" label="Uploaded" centered>
-							<span><timeago :since="props.row.createdAt" /></span>
-						</b-table-column>
+				<b-table-column v-slot="props" field="uploaded" label="Uploaded" centered>
+					<span><timeago :since="props.row.createdAt" /></span>
+				</b-table-column>
+
+				<b-table-column v-slot="props" field="purge" centered>
+					<b-tooltip label="Edit" position="is-top">
+						<a class="btn" @click="handleFileModal(props.row)">
+							<i class="mdi mdi-pencil" />
+						</a>
+					</b-tooltip>
+					<b-tooltip label="Delete" position="is-top" class="is-danger">
+						<a class="is-danger" @click="deleteFile(props.row)">
+							<i class="mdi mdi-delete" />
+						</a>
+					</b-tooltip>
+					<b-tooltip v-if="user && user.isAdmin" label="More info" position="is-top" class="more">
+						<nuxt-link :to="`/dashboard/admin/file/${props.row.id}`">
+							<i class="mdi mdi-dots-horizontal" />
+						</nuxt-link>
+					</b-tooltip>
+				</b-table-column>
 
-						<b-table-column field="purge" centered>
-							<b-tooltip label="Edit" position="is-top">
-								<a class="btn" @click="handleFileModal(props.row)">
-									<i class="mdi mdi-pencil" />
-								</a>
-							</b-tooltip>
-							<b-tooltip label="Delete" position="is-top" class="is-danger">
-								<a class="is-danger" @click="deleteFile(props.row)">
-									<i class="mdi mdi-delete" />
-								</a>
-							</b-tooltip>
-							<b-tooltip v-if="user && user.isAdmin" label="More info" position="is-top" class="more">
-								<nuxt-link :to="`/dashboard/admin/file/${props.row.id}`">
-									<i class="mdi mdi-dots-horizontal" />
-								</nuxt-link>
-							</b-tooltip>
-						</b-table-column>
-					</template>
-				</template>
 				<template slot="empty">
 					<div class="has-text-centered">
 						<i class="icon-misc-mood-sad" />
@@ -226,7 +223,7 @@ export default {
 			return require('@/assets/images/blank.png');
 		},
 		gridFiles() {
-			return this.files;
+			return (this.files || []).filter((v) => !v.hideFromList);
 		},
 	},
 	created() {
diff --git a/src/site/pages/dashboard/admin/users.vue b/src/site/pages/dashboard/admin/users.vue
index bed4c2b..60d030a 100644
--- a/src/site/pages/dashboard/admin/users.vue
+++ b/src/site/pages/dashboard/admin/users.vue
@@ -15,51 +15,55 @@
 						<b-table
 							:data="users"
 							:mobile-cards="true">
-							<template slot-scope="props">
-								<b-table-column
-									field="id"
-									label="Id"
-									centered>
-									{{ props.row.id }}
-								</b-table-column>
-
-								<b-table-column
-									field="username"
-									label="Username"
-									centered>
-									<nuxt-link :to="`/dashboard/admin/user/${props.row.id}`">
-										{{ props.row.username }}
-									</nuxt-link>
-								</b-table-column>
-
-								<b-table-column
-									field="enabled"
-									label="Enabled"
-									centered>
-									<b-switch
-										:value="props.row.enabled"
-										@input="changeEnabledStatus(props.row)" />
-								</b-table-column>
-
-								<b-table-column
-									field="isAdmin"
-									label="Admin"
-									centered>
-									<b-switch
-										:value="props.row.isAdmin"
-										@input="changeIsAdmin(props.row)" />
-								</b-table-column>
-
-								<b-table-column
-									field="purge"
-									centered>
-									<b-button
-										type="is-danger"
-										@click="promptPurgeFiles(props.row)">
-										Purge files
-									</b-button>
-								</b-table-column>
-							</template>
+							<b-table-column
+								v-slot="props"
+								field="id"
+								label="Id"
+								centered>
+								{{ props.row.id }}
+							</b-table-column>
+
+							<b-table-column
+								v-slot="props"
+								field="username"
+								label="Username"
+								centered>
+								<nuxt-link :to="`/dashboard/admin/user/${props.row.id}`">
+									{{ props.row.username }}
+								</nuxt-link>
+							</b-table-column>
+
+							<b-table-column
+								v-slot="props"
+								field="enabled"
+								label="Enabled"
+								centered>
+								<b-switch
+									:value="props.row.enabled"
+									@input="changeEnabledStatus(props.row)" />
+							</b-table-column>
+
+							<b-table-column
+								v-slot="props"
+								field="isAdmin"
+								label="Admin"
+								centered>
+								<b-switch
+									:value="props.row.isAdmin"
+									@input="changeIsAdmin(props.row)" />
+							</b-table-column>
+
+							<b-table-column
+								v-slot="props"
+								field="purge"
+								centered>
+								<b-button
+									type="is-danger"
+									@click="promptPurgeFiles(props.row)">
+									Purge files
+								</b-button>
+							</b-table-column>
+
 							<template slot="empty">
 								<div class="has-text-centered">
 									<i class="icon-misc-mood-sad" />
-- 
cgit v1.2.3


From 90001c2df56d58e69fd199a518ae7f3e4ed327fc Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Thu, 24 Dec 2020 10:40:50 +0200
Subject: chore: remove trailing commas

---
 src/site/components/album/AlbumDetails.vue         | 22 ++++++-------
 src/site/components/album/AlbumEntry.vue           | 14 ++++-----
 src/site/components/footer/Footer.vue              |  8 ++---
 src/site/components/grid/Grid.vue                  | 36 +++++++++++-----------
 src/site/components/grid/waterfall/Waterfall.vue   | 26 ++++++++--------
 .../components/grid/waterfall/WaterfallItem.vue    |  2 +-
 src/site/components/home/links/Links.vue           | 29 ++++++++++++-----
 src/site/components/image-modal/AlbumInfo.vue      | 20 ++++++------
 src/site/components/image-modal/ImageInfo.vue      | 16 +++++-----
 src/site/components/image-modal/TagInfo.vue        | 16 +++++-----
 src/site/components/loading/CubeShadow.vue         | 14 ++++-----
 src/site/components/loading/Origami.vue            | 10 +++---
 src/site/components/loading/PingPong.vue           | 10 +++---
 src/site/components/loading/RotateSquare.vue       | 10 +++---
 src/site/components/navbar/Navbar.vue              | 10 +++---
 src/site/components/search-input/SearchInput.vue   | 22 ++++++-------
 src/site/components/search/Search.vue              | 26 ++++++++--------
 src/site/components/sidebar/Sidebar.vue            |  6 ++--
 src/site/components/uploader/Uploader.vue          | 22 ++++++-------
 src/site/constants/alertTypes.js                   |  2 +-
 src/site/layouts/default.vue                       | 10 +++---
 src/site/layouts/error.vue                         |  2 +-
 src/site/pages/a/_identifier.vue                   | 14 ++++-----
 src/site/pages/dashboard/account.vue               | 22 ++++++-------
 src/site/pages/dashboard/admin/file/_id.vue        | 10 +++---
 src/site/pages/dashboard/admin/settings.vue        | 10 +++---
 src/site/pages/dashboard/admin/user/_id.vue        | 14 ++++-----
 src/site/pages/dashboard/admin/users.vue           | 10 +++---
 src/site/pages/dashboard/albums/_id.vue            | 16 +++++-----
 src/site/pages/dashboard/albums/index.vue          | 10 +++---
 src/site/pages/dashboard/index.vue                 | 18 +++++------
 src/site/pages/dashboard/tags/index.vue            | 14 ++++-----
 src/site/pages/faq.vue                             |  2 +-
 src/site/pages/index.vue                           |  6 ++--
 src/site/pages/login.vue                           |  6 ++--
 src/site/pages/logout.vue                          |  2 +-
 src/site/pages/register.vue                        |  8 ++---
 src/site/plugins/axios.js                          |  4 +--
 src/site/plugins/flexsearch.js                     |  2 +-
 src/site/plugins/handler.js                        |  6 ++--
 src/site/plugins/notifier.js                       |  2 +-
 src/site/plugins/vue-isyourpasswordsafe.js         |  2 +-
 src/site/plugins/vue-timeago.js                    |  2 +-
 src/site/store/admin.js                            |  8 ++---
 src/site/store/albums.js                           | 16 +++++-----
 src/site/store/alert.js                            |  6 ++--
 src/site/store/auth.js                             | 14 ++++-----
 src/site/store/config.js                           |  4 +--
 src/site/store/images.js                           | 14 ++++-----
 src/site/store/index.js                            |  2 +-
 src/site/store/tags.js                             |  6 ++--
 51 files changed, 298 insertions(+), 285 deletions(-)

(limited to 'src/site')

diff --git a/src/site/components/album/AlbumDetails.vue b/src/site/components/album/AlbumDetails.vue
index 2d0bb5d..4067853 100644
--- a/src/site/components/album/AlbumDetails.vue
+++ b/src/site/components/album/AlbumDetails.vue
@@ -120,17 +120,17 @@ export default {
 	props: {
 		albumId: {
 			type: Number,
-			default: 0,
+			default: 0
 		},
 		details: {
 			type: Object,
-			default: () => ({}),
-		},
+			default: () => ({})
+		}
 	},
 	data() {
 		return {
 			isCreatingLink: false,
-			isDeletingLinks: [],
+			isDeletingLinks: []
 		};
 	},
 	computed: mapState(['config', 'auth']),
@@ -141,20 +141,20 @@ export default {
 			updateLinkOptionsAction: 'albums/updateLinkOptions',
 			createLinkAction: 'albums/createLink',
 			createCustomLinkAction: 'albums/createCustomLink',
-			alert: 'alert/set',
+			alert: 'alert/set'
 		}),
 		promptDeleteAlbum(id) {
 			this.$buefy.dialog.confirm({
 				type: 'is-danger',
 				message: 'Are you sure you want to delete this album?',
-				onConfirm: () => this.deleteAlbum(id),
+				onConfirm: () => this.deleteAlbum(id)
 			});
 		},
 		promptDeleteAlbumLink(albumId, identifier) {
 			this.$buefy.dialog.confirm({
 				type: 'is-danger',
 				message: 'Are you sure you want to delete this album link?',
-				onConfirm: () => this.deleteAlbumLink(albumId, identifier),
+				onConfirm: () => this.deleteAlbumLink(albumId, identifier)
 			});
 		},
 		async deleteAlbum(id) {
@@ -204,16 +204,16 @@ export default {
 				message: 'Custom link identifier',
 				inputAttrs: {
 					placeholder: '',
-					maxlength: 10,
+					maxlength: 10
 				},
 				trapFocus: true,
-				onConfirm: (value) => this.$handler.executeAction('albums/createCustomLink', { albumId, value }),
+				onConfirm: (value) => this.$handler.executeAction('albums/createCustomLink', { albumId, value })
 			});
 		},
 		isDeleting(identifier) {
 			return this.isDeletingLinks.indexOf(identifier) > -1;
-		},
-	},
+		}
+	}
 };
 </script>
 
diff --git a/src/site/components/album/AlbumEntry.vue b/src/site/components/album/AlbumEntry.vue
index 2723b49..1e1b2cf 100644
--- a/src/site/components/album/AlbumEntry.vue
+++ b/src/site/components/album/AlbumEntry.vue
@@ -63,22 +63,22 @@ import AlbumDetails from '~/components/album/AlbumDetails.vue';
 
 export default {
 	components: {
-		AlbumDetails,
+		AlbumDetails
 	},
 	props: {
 		album: {
 			type: Object,
-			default: () => ({}),
-		},
+			default: () => ({})
+		}
 	},
 	computed: {
 		...mapGetters({
 			isExpandedGetter: 'albums/isExpanded',
-			getDetails: 'albums/getDetails',
+			getDetails: 'albums/getDetails'
 		}),
 		isExpanded() {
 			return this.isExpandedGetter(this.album.id);
-		},
+		}
 	},
 	methods: {
 		async toggleDetails(album) {
@@ -86,8 +86,8 @@ export default {
 				await this.$store.dispatch('albums/fetchDetails', album.id);
 			}
 			this.$store.commit('albums/toggleExpandedState', album.id);
-		},
-	},
+		}
+	}
 };
 </script>
 
diff --git a/src/site/components/footer/Footer.vue b/src/site/components/footer/Footer.vue
index 19d18f2..b409cf5 100644
--- a/src/site/components/footer/Footer.vue
+++ b/src/site/components/footer/Footer.vue
@@ -81,8 +81,8 @@ export default {
 		...mapState({
 			version: (state) => state.config.version,
 			serviceName: (state) => state.config.serviceName,
-			token: (state) => state.auth.token,
-		}),
+			token: (state) => state.auth.token
+		})
 	},
 	methods: {
 		createShareXThing() {
@@ -102,8 +102,8 @@ export default {
 			}`;
 			const sharexBlob = new Blob([sharexFile], { type: 'application/octet-binary' });
 			saveAs(sharexBlob, `${location.hostname}.sxcu`);
-		},
-	},
+		}
+	}
 };
 </script>
 
diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index 1fa3167..3a15335 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -162,37 +162,37 @@ import ImageInfo from '~/components/image-modal/ImageInfo.vue';
 export default {
 	components: {
 		Waterfall,
-		ImageInfo,
+		ImageInfo
 	},
 	props: {
 		files: {
 			type: Array,
-			default: () => [],
+			default: () => []
 		},
 		total: {
 			type: Number,
-			default: 0,
+			default: 0
 		},
 		fixed: {
 			type: Boolean,
-			default: false,
+			default: false
 		},
 		isPublic: {
 			type: Boolean,
-			default: false,
+			default: false
 		},
 		width: {
 			type: Number,
-			default: 150,
+			default: 150
 		},
 		enableSearch: {
 			type: Boolean,
-			default: true,
+			default: true
 		},
 		enableToolbar: {
 			type: Boolean,
-			default: true,
-		},
+			default: true
+		}
 	},
 	data() {
 		return {
@@ -208,15 +208,15 @@ export default {
 			modalData: {
 				file: null,
 				tags: null,
-				albums: null,
-			},
+				albums: null
+			}
 		};
 	},
 	computed: {
 		...mapState({
 			user: (state) => state.auth.user,
 			albums: (state) => state.albums.tinyDetails,
-			images: (state) => state.images,
+			images: (state) => state.images
 		}),
 		blank() {
 			// eslint-disable-next-line global-require, import/no-unresolved
@@ -224,7 +224,7 @@ export default {
 		},
 		gridFiles() {
 			return (this.files || []).filter((v) => !v.hideFromList);
-		},
+		}
 	},
 	created() {
 		// TODO: Create a middleware for this
@@ -251,7 +251,7 @@ export default {
 					} catch (e) {
 						this.$store.dispatch('alert/set', { text: e.message, error: true }, { root: true });
 					}
-				},
+				}
 			});
 		},
 		isAlbumSelected(id) {
@@ -279,12 +279,12 @@ export default {
 				if (add) {
 					response = await this.$store.dispatch('images/addToAlbum', {
 						albumId: id,
-						fileId: this.showingModalForFile.id,
+						fileId: this.showingModalForFile.id
 					});
 				} else {
 					response = await this.$store.dispatch('images/removeFromAlbum', {
 						albumId: id,
-						fileId: this.showingModalForFile.id,
+						fileId: this.showingModalForFile.id
 					});
 				}
 
@@ -332,8 +332,8 @@ export default {
 		},
 		isHovered(id) {
 			return this.hoveredItems.includes(id);
-		},
-	},
+		}
+	}
 };
 </script>
 
diff --git a/src/site/components/grid/waterfall/Waterfall.vue b/src/site/components/grid/waterfall/Waterfall.vue
index 762cbbd..af2af3f 100644
--- a/src/site/components/grid/waterfall/Waterfall.vue
+++ b/src/site/components/grid/waterfall/Waterfall.vue
@@ -20,29 +20,29 @@ const imagesloaded = isBrowser ? require('imagesloaded') : null;
 export default {
 	name: 'Waterfall',
 	components: {
-		WaterfallItem,
+		WaterfallItem
 	},
 	props: {
 		options: {
 			type: Object,
-			default: () => {},
+			default: () => {}
 		},
 		items: {
 			type: Array,
-			default: () => [],
+			default: () => []
 		},
 		itemWidth: {
 			type: Number,
-			default: 150,
+			default: 150
 		},
 		gutterWidth: {
 			type: Number,
-			default: 10,
+			default: 10
 		},
 		gutterHeight: {
 			type: Number,
-			default: 4,
-		},
+			default: 4
+		}
 	},
 	mounted() {
 		this.initializeMasonry();
@@ -62,7 +62,7 @@ export default {
 				node,
 				() => {
 					this.masonry.layout();
-				},
+				}
 			);
 		},
 		performLayout() {
@@ -101,7 +101,7 @@ export default {
 				removed,
 				appended,
 				prepended,
-				moved,
+				moved
 			};
 		},
 		initializeMasonry() {
@@ -111,8 +111,8 @@ export default {
 					{
 						columnWidth: this.itemWidth,
 						gutter: this.gutterWidth,
-						...this.options,
-					},
+						...this.options
+					}
 				);
 				this.domChildren = this.getNewDomChildren();
 			}
@@ -122,8 +122,8 @@ export default {
 			const children = this.options && this.options.itemSelector
 				? node.querySelectorAll(this.options.itemSelector) : node.children;
 			return Array.prototype.slice.call(children);
-		},
-	},
+		}
+	}
 };
 </script>
 
diff --git a/src/site/components/grid/waterfall/WaterfallItem.vue b/src/site/components/grid/waterfall/WaterfallItem.vue
index c5cade1..2a18606 100644
--- a/src/site/components/grid/waterfall/WaterfallItem.vue
+++ b/src/site/components/grid/waterfall/WaterfallItem.vue
@@ -5,6 +5,6 @@
 </template>
 <script>
 export default {
-	name: 'WaterfallItem',
+	name: 'WaterfallItem'
 };
 </script>
diff --git a/src/site/components/home/links/Links.vue b/src/site/components/home/links/Links.vue
index 41bd271..b20649f 100644
--- a/src/site/components/home/links/Links.vue
+++ b/src/site/components/home/links/Links.vue
@@ -1,6 +1,7 @@
 <template>
 	<div class="links">
-		<a href="https://github.com/WeebDev/lolisafe"
+		<a
+			href="https://github.com/WeebDev/lolisafe"
 			target="_blank"
 			class="link">
 			<header class="bd-footer-star-header">
@@ -8,15 +9,21 @@
 				<p class="bd-footer-subtitle">Deploy your own lolisafe</p>
 			</header>
 		</a>
-		<div v-if="loggedIn"
+		<div
+			v-if="loggedIn"
 			class="link"
 			@click="createShareXThing">
 			<header class="bd-footer-star-header">
-				<h4 class="bd-footer-title">ShareX</h4>
-				<p class="bd-footer-subtitle">Upload from your Desktop</p>
+				<h4 class="bd-footer-title">
+					ShareX
+				</h4>
+				<p class="bd-footer-subtitle">
+					Upload from your Desktop
+				</p>
 			</header>
 		</div>
-		<a href="https://chrome.google.com/webstore/detail/lolisafe-uploader/enkkmplljfjppcdaancckgilmgoiofnj"
+		<a
+			href="https://chrome.google.com/webstore/detail/lolisafe-uploader/enkkmplljfjppcdaancckgilmgoiofnj"
 			target="_blank"
 			class="link">
 			<header class="bd-footer-star-header">
@@ -24,17 +31,23 @@
 				<p class="bd-footer-subtitle">Upload from any website</p>
 			</header>
 		</a>
-		<router-link to="/faq"
+		<router-link
+			to="/faq"
 			class="link">
 			<header class="bd-footer-star-header">
-				<h4 class="bd-footer-title">FAQ</h4>
-				<p class="bd-footer-subtitle">We got you covered</p>
+				<h4 class="bd-footer-title">
+					FAQ
+				</h4>
+				<p class="bd-footer-subtitle">
+					We got you covered
+				</p>
 			</header>
 		</router-link>
 	</div>
 </template>
 <script>
 import { saveAs } from 'file-saver';
+
 export default {
 	computed: {
 		loggedIn() {
diff --git a/src/site/components/image-modal/AlbumInfo.vue b/src/site/components/image-modal/AlbumInfo.vue
index 8974a11..17c375a 100644
--- a/src/site/components/image-modal/AlbumInfo.vue
+++ b/src/site/components/image-modal/AlbumInfo.vue
@@ -31,21 +31,21 @@ export default {
 	props: {
 		imageId: {
 			type: Number,
-			default: 0,
+			default: 0
 		},
 		imageAlbums: {
 			type: Array,
-			default: () => [],
+			default: () => []
 		},
 		albums: {
 			type: Array,
-			default: () => [],
-		},
+			default: () => []
+		}
 	},
 	data() {
 		return {
 			selectedOptions: [],
-			orderedAlbums: [],
+			orderedAlbums: []
 		};
 	},
 	created() {
@@ -65,7 +65,7 @@ export default {
 						return selectedA ? -1 : 1;
 					}
 					return a.name.localeCompare(b.name);
-				},
+				}
 			);
 		},
 		isAlbumSelected(id) {
@@ -78,15 +78,15 @@ export default {
 			if (this.selectedOptions.indexOf(id) > -1) {
 				this.$handler.executeAction('images/addToAlbum', {
 					albumId: id,
-					fileId: this.imageId,
+					fileId: this.imageId
 				});
 			} else {
 				this.$handler.executeAction('images/removeFromAlbum', {
 					albumId: id,
-					fileId: this.imageId,
+					fileId: this.imageId
 				});
 			}
-		},
-	},
+		}
+	}
 };
 </script>
diff --git a/src/site/components/image-modal/ImageInfo.vue b/src/site/components/image-modal/ImageInfo.vue
index 0562e1f..73b6339 100644
--- a/src/site/components/image-modal/ImageInfo.vue
+++ b/src/site/components/image-modal/ImageInfo.vue
@@ -118,25 +118,25 @@ import Taginfo from './TagInfo.vue';
 export default {
 	components: {
 		Taginfo,
-		Albuminfo,
+		Albuminfo
 	},
 	props: {
 		file: {
 			type: Object,
-			default: () => ({}),
+			default: () => ({})
 		},
 		albums: {
 			type: Array,
-			default: () => ([]),
+			default: () => ([])
 		},
 		tags: {
 			type: Array,
-			default: () => ([]),
-		},
+			default: () => ([])
+		}
 	},
 	computed: mapState({
 		images: (state) => state.images,
-		tinyDetails: (state) => state.albums.tinyDetails,
+		tinyDetails: (state) => state.albums.tinyDetails
 	}),
 	methods: {
 		formatBytes(bytes, decimals = 2) {
@@ -152,8 +152,8 @@ export default {
 		},
 		isVideo(type) {
 			return type.startsWith('video');
-		},
-	},
+		}
+	}
 };
 </script>
 
diff --git a/src/site/components/image-modal/TagInfo.vue b/src/site/components/image-modal/TagInfo.vue
index a337148..59d01f5 100644
--- a/src/site/components/image-modal/TagInfo.vue
+++ b/src/site/components/image-modal/TagInfo.vue
@@ -23,24 +23,24 @@ export default {
 	props: {
 		imageId: {
 			type: Number,
-			default: 0,
+			default: 0
 		},
 		imageTags: {
 			type: Array,
-			default: () => [],
-		},
+			default: () => []
+		}
 	},
 	data() {
 		return {
-			filteredTags: [],
+			filteredTags: []
 		};
 	},
 	computed: {
 		...mapState({
-			tags: (state) => state.tags.tagsList,
+			tags: (state) => state.tags.tagsList
 		}),
 		selectedTags() { return this.imageTags.map((e) => e.name); },
-		lowercaseTags() { return this.imageTags.map((e) => e.name.toLowerCase()); },
+		lowercaseTags() { return this.imageTags.map((e) => e.name.toLowerCase()); }
 	},
 	methods: {
 		getFilteredTags(str) {
@@ -78,8 +78,8 @@ export default {
 		},
 		tagRemoved(tag) {
 			this.$handler.executeAction('images/removeTag', { fileId: this.imageId, tagName: tag });
-		},
-	},
+		}
+	}
 };
 </script>
 
diff --git a/src/site/components/loading/CubeShadow.vue b/src/site/components/loading/CubeShadow.vue
index bbfdb52..71b5da5 100644
--- a/src/site/components/loading/CubeShadow.vue
+++ b/src/site/components/loading/CubeShadow.vue
@@ -9,16 +9,16 @@ export default {
 	props: {
 		size: {
 			type: String,
-			default: '60px',
+			default: '60px'
 		},
 		background: {
 			type: String,
-			default: '#9C27B0',
+			default: '#9C27B0'
 		},
 		duration: {
 			type: String,
-			default: '1.8s',
-		},
+			default: '1.8s'
+		}
 	},
 	computed: {
 		styles() {
@@ -26,10 +26,10 @@ export default {
 				width: this.size,
 				height: this.size,
 				backgroundColor: this.background,
-				animationDuration: this.duration,
+				animationDuration: this.duration
 			};
-		},
-	},
+		}
+	}
 };
 </script>
 
diff --git a/src/site/components/loading/Origami.vue b/src/site/components/loading/Origami.vue
index cd1c087..59c5d8f 100644
--- a/src/site/components/loading/Origami.vue
+++ b/src/site/components/loading/Origami.vue
@@ -20,8 +20,8 @@ export default {
 	props: {
 		size: {
 			type: String,
-			default: '40px',
-		},
+			default: '40px'
+		}
 	},
 	computed: {
 		innerStyles() {
@@ -31,10 +31,10 @@ export default {
 		styles() {
 			return {
 				width: this.size,
-				height: this.size,
+				height: this.size
 			};
-		},
-	},
+		}
+	}
 };
 </script>
 
diff --git a/src/site/components/loading/PingPong.vue b/src/site/components/loading/PingPong.vue
index d562e9f..c04ae72 100644
--- a/src/site/components/loading/PingPong.vue
+++ b/src/site/components/loading/PingPong.vue
@@ -19,8 +19,8 @@ export default {
 	props: {
 		size: {
 			type: String,
-			default: '60px',
-		},
+			default: '60px'
+		}
 	},
 	computed: {
 		innerStyles() {
@@ -30,10 +30,10 @@ export default {
 		styles() {
 			return {
 				width: this.size,
-				height: this.size,
+				height: this.size
 			};
-		},
-	},
+		}
+	}
 };
 </script>
 
diff --git a/src/site/components/loading/RotateSquare.vue b/src/site/components/loading/RotateSquare.vue
index 089e01a..7bc9bb0 100644
--- a/src/site/components/loading/RotateSquare.vue
+++ b/src/site/components/loading/RotateSquare.vue
@@ -9,18 +9,18 @@ export default {
 	props: {
 		size: {
 			type: String,
-			default: '40px',
-		},
+			default: '40px'
+		}
 	},
 	computed: {
 		styles() {
 			return {
 				width: this.size,
 				height: this.size,
-				display: 'inline-block',
+				display: 'inline-block'
 			};
-		},
-	},
+		}
+	}
 };
 </script>
 
diff --git a/src/site/components/navbar/Navbar.vue b/src/site/components/navbar/Navbar.vue
index 1b1f10e..22d41d4 100644
--- a/src/site/components/navbar/Navbar.vue
+++ b/src/site/components/navbar/Navbar.vue
@@ -73,22 +73,22 @@ export default {
 	props: {
 		isWhite: {
 			type: Boolean,
-			default: false,
-		},
+			default: false
+		}
 	},
 	data() {
 		return { hamburger: false };
 	},
 	computed: {
 		...mapGetters({ loggedIn: 'auth/isLoggedIn' }),
-		...mapState(['config']),
+		...mapState(['config'])
 	},
 	methods: {
 		async logOut() {
 			await this.$store.dispatch('auth/logout');
 			this.$router.replace('/login');
-		},
-	},
+		}
+	}
 };
 </script>
 
diff --git a/src/site/components/search-input/SearchInput.vue b/src/site/components/search-input/SearchInput.vue
index abc433a..1c5b983 100644
--- a/src/site/components/search-input/SearchInput.vue
+++ b/src/site/components/search-input/SearchInput.vue
@@ -90,11 +90,11 @@ export default {
 		value: [Number, String],
 		data: {
 			type: Array,
-			default: () => [],
+			default: () => []
 		},
 		field: {
 			type: String,
-			default: 'value',
+			default: 'value'
 		},
 		keepFirst: Boolean,
 		clearOnSelect: Boolean,
@@ -106,12 +106,12 @@ export default {
 		maxHeight: [String, Number],
 		dropdownPosition: {
 			type: String,
-			default: 'auto',
+			default: 'auto'
 		},
 		iconRight: String,
 		iconRightClickable: Boolean,
 		appendToBody: Boolean,
-		customSelector: Function,
+		customSelector: Function
 	},
 	data() {
 		return {
@@ -125,7 +125,7 @@ export default {
 			style: {},
 			_isAutocomplete: true,
 			_elementRef: 'input',
-			_bodyEl: undefined, // Used to append to body
+			_bodyEl: undefined // Used to append to body
 		};
 	},
 	computed: {
@@ -202,9 +202,9 @@ export default {
 				// eslint-disable-next-line no-nested-ternary
 				maxHeight: this.maxHeight === undefined
 					// eslint-disable-next-line no-restricted-globals
-					? null : (isNaN(this.maxHeight) ? this.maxHeight : `${this.maxHeight}px`),
+					? null : (isNaN(this.maxHeight) ? this.maxHeight : `${this.maxHeight}px`)
 			};
-		},
+		}
 	},
 	watch: {
 		/**
@@ -258,7 +258,7 @@ export default {
 			if (this.keepFirst) {
 				this.selectFirstOption(value);
 			}
-		},
+		}
 	},
 	created() {
 		if (typeof window !== 'undefined') {
@@ -507,10 +507,10 @@ export default {
 					left: `${left}px`,
 					width: `${trigger.clientWidth}px`,
 					maxWidth: `${trigger.clientWidth}px`,
-					zIndex: '99',
+					zIndex: '99'
 				};
 			}
-		},
-	},
+		}
+	}
 };
 </script>
diff --git a/src/site/components/search/Search.vue b/src/site/components/search/Search.vue
index 72a5707..778474c 100644
--- a/src/site/components/search/Search.vue
+++ b/src/site/components/search/Search.vue
@@ -36,13 +36,13 @@ import SearchInput from '~/components/search-input/SearchInput.vue';
 
 export default {
 	components: {
-		SearchInput,
+		SearchInput
 	},
 	props: {
 		hiddenHints: {
 			type: Array,
-			default: () => [],
-		},
+			default: () => []
+		}
 	},
 	data() {
 		return {
@@ -51,35 +51,35 @@ export default {
 				{
 					'name': 'tag',
 					'valueFormat': 'name',
-					'hint': '',
+					'hint': ''
 				},
 				{
 					'name': 'album',
 					'valueFormat': 'name',
-					'hint': '',
+					'hint': ''
 				},
 				{
 					'name': 'before',
 					'valueFormat': 'specific date',
-					'hint': '',
+					'hint': ''
 				},
 				{
 					'name': 'during',
 					'valueFormat': 'specific date',
-					'hint': '',
+					'hint': ''
 				},
 				{
 					'name': 'after',
 					'valueFormat': 'specific date',
-					'hint': '',
+					'hint': ''
 				},
 				{
 					'name': 'file',
 					'valueFormat': 'generated name',
-					'hint': '',
-				},
+					'hint': ''
+				}
 			],
-			filteredHints: [],
+			filteredHints: []
 		};
 	},
 	created() {
@@ -122,8 +122,8 @@ export default {
 				if (/:$/gi.test(this.query)) { return; }
 			}
 			this.$emit('search', this.query, event);
-		},
-	},
+		}
+	}
 };
 </script>
 
diff --git a/src/site/components/sidebar/Sidebar.vue b/src/site/components/sidebar/Sidebar.vue
index 2e8ca9e..e0c8fa2 100644
--- a/src/site/components/sidebar/Sidebar.vue
+++ b/src/site/components/sidebar/Sidebar.vue
@@ -48,7 +48,7 @@ import { mapState } from 'vuex';
 
 export default {
 	computed: mapState({
-		user: (state) => state.auth.user,
+		user: (state) => state.auth.user
 	}),
 	methods: {
 		isRouteActive(id) {
@@ -56,8 +56,8 @@ export default {
 				return true;
 			}
 			return false;
-		},
-	},
+		}
+	}
 };
 
 </script>
diff --git a/src/site/components/uploader/Uploader.vue b/src/site/components/uploader/Uploader.vue
index 7e2d446..2740bee 100644
--- a/src/site/components/uploader/Uploader.vue
+++ b/src/site/components/uploader/Uploader.vue
@@ -88,15 +88,15 @@ export default {
 			files: [],
 			dropzoneOptions: {},
 			showDropzone: false,
-			selectedAlbum: null,
+			selectedAlbum: null
 		};
 	},
 	computed: {
 		...mapState({
 			config: (state) => state.config,
-			albums: (state) => state.albums.tinyDetails,
+			albums: (state) => state.albums.tinyDetails
 		}),
-		...mapGetters({ loggedIn: 'auth/isLoggedIn', token: 'auth/getToken' }),
+		...mapGetters({ loggedIn: 'auth/isLoggedIn', token: 'auth/getToken' })
 	},
 	watch: {
 		loggedIn() {
@@ -104,7 +104,7 @@ export default {
 		},
 		selectedAlbum() {
 			this.updateDropzoneConfig();
-		},
+		}
 	},
 	mounted() {
 		this.dropzoneOptions = {
@@ -127,7 +127,7 @@ export default {
 			maxFilesize: this.config.maxFileSize,
 			previewTemplate: this.$refs.template.innerHTML,
 			dictDefaultMessage: 'Drag & Drop your files or click to browse',
-			headers: { Accept: 'application/vnd.lolisafe.json' },
+			headers: { Accept: 'application/vnd.lolisafe.json' }
 		};
 		this.showDropzone = true;
 		if (this.loggedIn) this.getAlbums();
@@ -154,7 +154,7 @@ export default {
 			this.$refs.el.setOption('headers', {
 				Accept: 'application/vnd.lolisafe.json',
 				Authorization: this.token ? `Bearer ${this.token}` : '',
-				albumId: this.selectedAlbum ? this.selectedAlbum : null,
+				albumId: this.selectedAlbum ? this.selectedAlbum : null
 			});
 		},
 
@@ -170,7 +170,7 @@ export default {
 		dropzoneError(file, message, xhr) {
 			this.$store.dispatch('alert', {
 				text: 'There was an error uploading this file. Check the console.',
-				error: true,
+				error: true
 			});
 			// eslint-disable-next-line no-console
 			console.error(file, message, xhr);
@@ -182,8 +182,8 @@ export default {
 					original: file.name,
 					size: file.size,
 					type: file.type,
-					count: file.upload.totalChunkCount,
-				}],
+					count: file.upload.totalChunkCount
+				}]
 			});
 
 			this.processResult(file, data);
@@ -205,8 +205,8 @@ export default {
 				this.$clipboard(response.url);
 			});
 			*/
-		},
-	},
+		}
+	}
 };
 </script>
 <style lang="scss" scoped>
diff --git a/src/site/constants/alertTypes.js b/src/site/constants/alertTypes.js
index 1b830bc..458a739 100644
--- a/src/site/constants/alertTypes.js
+++ b/src/site/constants/alertTypes.js
@@ -6,5 +6,5 @@ export default {
 	ERROR: 'is-danger',
 	DARK: 'is-dark',
 	LIGHT: 'is-light',
-	WHITE: 'is-white',
+	WHITE: 'is-white'
 };
diff --git a/src/site/layouts/default.vue b/src/site/layouts/default.vue
index 0049b88..3fa7ebd 100644
--- a/src/site/layouts/default.vue
+++ b/src/site/layouts/default.vue
@@ -19,7 +19,7 @@ import Footer from '~/components/footer/Footer.vue';
 export default {
 	components: {
 		Navbar,
-		Footer,
+		Footer
 	},
 	computed: mapState(['config', 'alert']),
 	created() {
@@ -33,14 +33,14 @@ export default {
 					duration: 3500,
 					position: 'is-bottom',
 					message,
-					type,
+					type
 				});
 			} else {
 				this.$buefy.toast.open({
 					duration: 3500,
 					position: 'is-bottom',
 					message,
-					type,
+					type
 				});
 			}
 
@@ -53,9 +53,9 @@ export default {
 			`%c lolisafe %c v${this.config.version} %c`,
 			'background:#35495e ; padding: 1px; border-radius: 3px 0 0 3px;  color: #fff',
 			'background:#ff015b; padding: 1px; border-radius: 0 3px 3px 0;  color: #fff',
-			'background:transparent',
+			'background:transparent'
 		);
-	},
+	}
 };
 </script>
 
diff --git a/src/site/layouts/error.vue b/src/site/layouts/error.vue
index 3f12c46..77d188f 100644
--- a/src/site/layouts/error.vue
+++ b/src/site/layouts/error.vue
@@ -23,6 +23,6 @@
 import Navbar from '~/components/navbar/Navbar.vue';
 
 export default {
-	components: { Navbar },
+	components: { Navbar }
 };
 </script>
diff --git a/src/site/pages/a/_identifier.vue b/src/site/pages/a/_identifier.vue
index 3746cc6..0c6261a 100644
--- a/src/site/pages/a/_identifier.vue
+++ b/src/site/pages/a/_identifier.vue
@@ -67,7 +67,7 @@ export default {
 	computed: {
 		config() {
 			return this.$store.state.config;
-		},
+		}
 	},
 	async asyncData({ app, params, error }) {
 		try {
@@ -77,7 +77,7 @@ export default {
 				name: data.name,
 				downloadEnabled: data.downloadEnabled,
 				files: data.files,
-				downloadLink,
+				downloadLink
 			};
 		} catch (err) {
 			console.log('Error when retrieving album', err);
@@ -100,8 +100,8 @@ export default {
 					{ vmid: 'og:title', property: 'og:title', content: `Album: ${this.name} | Files: ${this.files.length}` },
 					{ vmid: 'og:description', property: 'og:description', content: 'A modern and self-hosted file upload service that can handle anything you throw at it. Fast uploads, file manager and sharing capabilities all crafted with a beautiful user experience in mind.' },
 					{ vmid: 'og:image', property: 'og:image', content: `${this.files.length > 0 ? this.files[0].thumbSquare : '/public/images/share.jpg'}` },
-					{ vmid: 'og:image:secure_url', property: 'og:image:secure_url', content: `${this.files.length > 0 ? this.files[0].thumbSquare : '/public/images/share.jpg'}` },
-				],
+					{ vmid: 'og:image:secure_url', property: 'og:image:secure_url', content: `${this.files.length > 0 ? this.files[0].thumbSquare : '/public/images/share.jpg'}` }
+				]
 			};
 		}
 		return {
@@ -113,9 +113,9 @@ export default {
 				{ vmid: 'twitter:description', name: 'twitter:description', content: 'A modern and self-hosted file upload service that can handle anything you throw at it. Fast uploads, file manager and sharing capabilities all crafted with a beautiful user experience in mind.' },
 				{ vmid: 'og:url', property: 'og:url', content: `${this.config.URL}/a/${this.$route.params.identifier}` },
 				{ vmid: 'og:title', property: 'og:title', content: 'lolisafe' },
-				{ vmid: 'og:description', property: 'og:description', content: 'A modern and self-hosted file upload service that can handle anything you throw at it. Fast uploads, file manager and sharing capabilities all crafted with a beautiful user experience in mind.' },
-			],
+				{ vmid: 'og:description', property: 'og:description', content: 'A modern and self-hosted file upload service that can handle anything you throw at it. Fast uploads, file manager and sharing capabilities all crafted with a beautiful user experience in mind.' }
+			]
 		};
-	},
+	}
 };
 </script>
diff --git a/src/site/pages/dashboard/account.vue b/src/site/pages/dashboard/account.vue
index 5d2f064..5610495 100644
--- a/src/site/pages/dashboard/account.vue
+++ b/src/site/pages/dashboard/account.vue
@@ -102,7 +102,7 @@ import Sidebar from '~/components/sidebar/Sidebar.vue';
 
 export default {
 	components: {
-		Sidebar,
+		Sidebar
 	},
 	middleware: ['auth', ({ store }) => {
 		store.dispatch('auth/fetchCurrentUser');
@@ -111,21 +111,21 @@ export default {
 		return {
 			password: '',
 			newPassword: '',
-			reNewPassword: '',
+			reNewPassword: ''
 		};
 	},
 	computed: {
 		...mapGetters({ 'apiKey': 'auth/getApiKey' }),
 		...mapState({
-			user: (state) => state.auth.user,
-		}),
+			user: (state) => state.auth.user
+		})
 	},
 	metaInfo() {
 		return { title: 'Account' };
 	},
 	methods: {
 		...mapActions({
-			getUserSetttings: 'auth/fetchCurrentUser',
+			getUserSetttings: 'auth/fetchCurrentUser'
 		}),
 		async changePassword() {
 			const { password, newPassword, reNewPassword } = this;
@@ -133,21 +133,21 @@ export default {
 			if (!password || !newPassword || !reNewPassword) {
 				this.$store.dispatch('alert/set', {
 					text: 'One or more fields are missing',
-					error: true,
+					error: true
 				});
 				return;
 			}
 			if (newPassword !== reNewPassword) {
 				this.$store.dispatch('alert/set', {
 					text: 'Passwords don\'t match',
-					error: true,
+					error: true
 				});
 				return;
 			}
 
 			const response = await this.$store.dispatch('auth/changePassword', {
 				password,
-				newPassword,
+				newPassword
 			});
 
 			if (response) {
@@ -158,7 +158,7 @@ export default {
 			this.$buefy.dialog.confirm({
 				type: 'is-danger',
 				message: 'Are you sure you want to regenerate your API key? Previously generated API keys will stop working. Make sure to write the new key down as this is the only time it will be displayed to you.',
-				onConfirm: () => this.requestNewAPIKey(),
+				onConfirm: () => this.requestNewAPIKey()
 			});
 		},
 		copyKey() {
@@ -168,7 +168,7 @@ export default {
 		async requestNewAPIKey() {
 			const response = await this.$store.dispatch('auth/requestAPIKey');
 			this.$buefy.toast.open(response.message);
-		},
-	},
+		}
+	}
 };
 </script>
diff --git a/src/site/pages/dashboard/admin/file/_id.vue b/src/site/pages/dashboard/admin/file/_id.vue
index 89afa47..d54bf54 100644
--- a/src/site/pages/dashboard/admin/file/_id.vue
+++ b/src/site/pages/dashboard/admin/file/_id.vue
@@ -127,7 +127,7 @@ import Sidebar from '~/components/sidebar/Sidebar.vue';
 
 export default {
 	components: {
-		Sidebar,
+		Sidebar
 	},
 	middleware: ['auth', 'admin', ({ route, store }) => {
 		try {
@@ -143,7 +143,7 @@ export default {
 			this.$buefy.dialog.confirm({
 				type: 'is-danger',
 				message: 'Are you sure you want to disable the account of the user that uploaded this file?',
-				onConfirm: () => this.disableUser(),
+				onConfirm: () => this.disableUser()
 			});
 		},
 		disableUser() {
@@ -153,7 +153,7 @@ export default {
 			this.$buefy.dialog.confirm({
 				type: 'is-danger',
 				message: 'Are you sure you want to ban the IP this file was uploaded from?',
-				onConfirm: () => this.banIP(),
+				onConfirm: () => this.banIP()
 			});
 		},
 		banIP() {
@@ -169,7 +169,7 @@ export default {
 			const i = Math.floor(Math.log(bytes) / Math.log(k));
 
 			return `${parseFloat((bytes / k ** i).toFixed(dm))} ${sizes[i]}`;
-		},
-	},
+		}
+	}
 };
 </script>
diff --git a/src/site/pages/dashboard/admin/settings.vue b/src/site/pages/dashboard/admin/settings.vue
index 56331b5..c6a9ade 100644
--- a/src/site/pages/dashboard/admin/settings.vue
+++ b/src/site/pages/dashboard/admin/settings.vue
@@ -131,7 +131,7 @@ import Sidebar from '~/components/sidebar/Sidebar.vue';
 
 export default {
 	components: {
-		Sidebar,
+		Sidebar
 	},
 	middleware: ['auth', 'admin', ({ store }) => {
 		try {
@@ -145,18 +145,18 @@ export default {
 		return { title: 'Settings' };
 	},
 	computed: mapState({
-		settings: (state) => state.admin.settings,
+		settings: (state) => state.admin.settings
 	}),
 	methods: {
 		promptRestartService() {
 			this.$buefy.dialog.confirm({
 				message: 'Keep in mind that restarting only works if you have PM2 or something similar set up. Continue?',
-				onConfirm: () => this.restartService(),
+				onConfirm: () => this.restartService()
 			});
 		},
 		restartService() {
 			this.$handler.executeAction('admin/restartService');
-		},
-	},
+		}
+	}
 };
 </script>
diff --git a/src/site/pages/dashboard/admin/user/_id.vue b/src/site/pages/dashboard/admin/user/_id.vue
index 7814468..484d986 100644
--- a/src/site/pages/dashboard/admin/user/_id.vue
+++ b/src/site/pages/dashboard/admin/user/_id.vue
@@ -76,7 +76,7 @@ import Grid from '~/components/grid/Grid.vue';
 export default {
 	components: {
 		Sidebar,
-		Grid,
+		Grid
 	},
 	middleware: ['auth', 'admin', ({ route, store }) => {
 		try {
@@ -88,25 +88,25 @@ export default {
 	}],
 	data() {
 		return {
-			options: {},
+			options: {}
 		};
 	},
 	computed: mapState({
-		user: (state) => state.admin.user,
+		user: (state) => state.admin.user
 	}),
 	methods: {
 		promptDisableUser() {
 			this.$buefy.dialog.confirm({
 				type: 'is-danger',
 				message: 'Are you sure you want to disable the account of this user?',
-				onConfirm: () => this.disableUser(),
+				onConfirm: () => this.disableUser()
 			});
 		},
 		promptEnableUser() {
 			this.$buefy.dialog.confirm({
 				type: 'is-danger',
 				message: 'Are you sure you want to enable the account of this user?',
-				onConfirm: () => this.enableUser(),
+				onConfirm: () => this.enableUser()
 			});
 		},
 		disableUser() {
@@ -114,7 +114,7 @@ export default {
 		},
 		enableUser() {
 			this.$handler.executeAction('admin/enableUser', this.user.id);
-		},
-	},
+		}
+	}
 };
 </script>
diff --git a/src/site/pages/dashboard/admin/users.vue b/src/site/pages/dashboard/admin/users.vue
index 60d030a..a13564c 100644
--- a/src/site/pages/dashboard/admin/users.vue
+++ b/src/site/pages/dashboard/admin/users.vue
@@ -91,7 +91,7 @@ import Sidebar from '~/components/sidebar/Sidebar.vue';
 
 export default {
 	components: {
-		Sidebar,
+		Sidebar
 	},
 	middleware: ['auth', 'admin', ({ route, store }) => {
 		try {
@@ -103,7 +103,7 @@ export default {
 	}],
 	computed: mapState({
 		users: (state) => state.admin.users,
-		config: (state) => state.config,
+		config: (state) => state.config
 	}),
 	metaInfo() {
 		return { title: 'Uploads' };
@@ -126,13 +126,13 @@ export default {
 		promptPurgeFiles(row) {
 			this.$buefy.dialog.confirm({
 				message: 'Are you sure you want to delete this user\'s files?',
-				onConfirm: () => this.purgeFiles(row),
+				onConfirm: () => this.purgeFiles(row)
 			});
 		},
 		async purgeFiles(row) {
 			this.$handler.executeAction('admin/purgeUserFiles', row.id);
-		},
-	},
+		}
+	}
 };
 </script>
 
diff --git a/src/site/pages/dashboard/albums/_id.vue b/src/site/pages/dashboard/albums/_id.vue
index 0b67ec3..cf27a15 100644
--- a/src/site/pages/dashboard/albums/_id.vue
+++ b/src/site/pages/dashboard/albums/_id.vue
@@ -72,7 +72,7 @@ export default {
 	components: {
 		Sidebar,
 		Grid,
-		Search,
+		Search
 	},
 	middleware: ['auth', ({ route, store }) => {
 		store.commit('images/resetState');
@@ -80,34 +80,34 @@ export default {
 	}],
 	data() {
 		return {
-			current: 1,
+			current: 1
 		};
 	},
 	computed: {
 		...mapGetters({
 			totalFiles: 'images/getTotalFiles',
 			shouldPaginate: 'images/shouldPaginate',
-			limit: 'images/getLimit',
+			limit: 'images/getLimit'
 		}),
 		...mapState(['images']),
 		id() {
 			return this.$route.params.id;
-		},
+		}
 	},
 	metaInfo() {
 		return { title: 'Album' };
 	},
 	watch: {
-		current: 'fetchPaginate',
+		current: 'fetchPaginate'
 	},
 	methods: {
 		...mapActions({
-			fetch: 'images/fetchByAlbumId',
+			fetch: 'images/fetchByAlbumId'
 		}),
 		fetchPaginate() {
 			this.fetch({ id: this.id, page: this.current });
-		},
-	},
+		}
+	}
 };
 </script>
 
diff --git a/src/site/pages/dashboard/albums/index.vue b/src/site/pages/dashboard/albums/index.vue
index c5acb2e..896d134 100644
--- a/src/site/pages/dashboard/albums/index.vue
+++ b/src/site/pages/dashboard/albums/index.vue
@@ -53,7 +53,7 @@ import AlbumEntry from '~/components/album/AlbumEntry.vue';
 export default {
 	components: {
 		Sidebar,
-		AlbumEntry,
+		AlbumEntry
 	},
 	middleware: ['auth', ({ store }) => {
 		try {
@@ -65,7 +65,7 @@ export default {
 	data() {
 		return {
 			newAlbumName: null,
-			isCreatingAlbum: false,
+			isCreatingAlbum: false
 		};
 	},
 	computed: mapState(['config', 'albums']),
@@ -74,7 +74,7 @@ export default {
 	},
 	methods: {
 		...mapActions({
-			'alert': 'alert/set',
+			'alert': 'alert/set'
 		}),
 		async createAlbum() {
 			if (!this.newAlbumName || this.newAlbumName === '') return;
@@ -90,8 +90,8 @@ export default {
 				this.isCreatingAlbum = false;
 				this.newAlbumName = null;
 			}
-		},
-	},
+		}
+	}
 };
 </script>
 
diff --git a/src/site/pages/dashboard/index.vue b/src/site/pages/dashboard/index.vue
index 096f4e3..f94ca0d 100644
--- a/src/site/pages/dashboard/index.vue
+++ b/src/site/pages/dashboard/index.vue
@@ -64,7 +64,7 @@ export default {
 	components: {
 		Sidebar,
 		Grid,
-		Search,
+		Search
 	},
 	middleware: ['auth', ({ store }) => {
 		store.commit('images/resetState');
@@ -74,29 +74,29 @@ export default {
 		return {
 			current: 1,
 			isLoading: false,
-			search: '',
+			search: ''
 		};
 	},
 	computed: {
 		...mapGetters({
 			totalFiles: 'images/getTotalFiles',
 			shouldPaginate: 'images/shouldPaginate',
-			limit: 'images/getLimit',
+			limit: 'images/getLimit'
 		}),
-		...mapState(['images']),
+		...mapState(['images'])
 	},
 	metaInfo() {
 		return { title: 'Uploads' };
 	},
 	watch: {
-		current: 'fetchPaginate',
+		current: 'fetchPaginate'
 	},
 	created() {
 		this.filteredHints = this.hints; // fixes the issue where on pageload, suggestions wont load
 	},
 	methods: {
 		...mapActions({
-			fetch: 'images/fetch',
+			fetch: 'images/fetch'
 		}),
 		async fetchPaginate() {
 			this.isLoading = true;
@@ -111,10 +111,10 @@ export default {
 		onSearch(query) {
 			this.search = query;
 			this.$handler.executeAction('images/search', {
-				q: this.sanitizeQuery(query),
+				q: this.sanitizeQuery(query)
 			});
-		},
-	},
+		}
+	}
 };
 </script>
 
diff --git a/src/site/pages/dashboard/tags/index.vue b/src/site/pages/dashboard/tags/index.vue
index fe92087..dca8304 100644
--- a/src/site/pages/dashboard/tags/index.vue
+++ b/src/site/pages/dashboard/tags/index.vue
@@ -215,19 +215,19 @@ import Sidebar from '~/components/sidebar/Sidebar.vue';
 
 export default {
 	components: {
-		Sidebar,
+		Sidebar
 	},
 	middleware: 'auth',
 	data() {
 		return {
 			tags: [],
-			newTagName: null,
+			newTagName: null
 		};
 	},
 	computed: {
 		config() {
 			return this.$store.state.config;
-		},
+		}
 	},
 	metaInfo() {
 		return { title: 'Tags' };
@@ -240,7 +240,7 @@ export default {
 			this.$buefy.dialog.confirm({
 				type: 'is-danger',
 				message: 'Are you sure you want to delete this tag?',
-				onConfirm: () => this.promptPurgeTag(id),
+				onConfirm: () => this.promptPurgeTag(id)
 			});
 		},
 		promptPurgeTag(id) {
@@ -250,7 +250,7 @@ export default {
 				cancelText: 'No',
 				confirmText: 'Yes',
 				onConfirm: () => this.deleteTag(id, true),
-				onCancel: () => this.deleteTag(id, false),
+				onCancel: () => this.deleteTag(id, false)
 			});
 		},
 		async deleteTag(id, purge) {
@@ -272,7 +272,7 @@ export default {
 				tag.isDetailsOpen = false;
 			}
 			this.tags = response.tags;
-		},
-	},
+		}
+	}
 };
 </script>
diff --git a/src/site/pages/faq.vue b/src/site/pages/faq.vue
index 85e8744..9053072 100644
--- a/src/site/pages/faq.vue
+++ b/src/site/pages/faq.vue
@@ -56,7 +56,7 @@ export default {
 	},
 	metaInfo() {
 		return { title: 'Faq' };
-	},
+	}
 };
 </script>
 
diff --git a/src/site/pages/index.vue b/src/site/pages/index.vue
index a28eea4..8193b88 100644
--- a/src/site/pages/index.vue
+++ b/src/site/pages/index.vue
@@ -41,15 +41,15 @@ export default {
 	components: {
 		Logo,
 		Uploader,
-		Links,
+		Links
 	},
 	data() {
 		return { albums: [] };
 	},
 	computed: {
 		...mapGetters({ loggedIn: 'auth/isLoggedIn' }),
-		...mapState(['config']),
-	},
+		...mapState(['config'])
+	}
 };
 </script>
 <style lang="scss" scoped>
diff --git a/src/site/pages/login.vue b/src/site/pages/login.vue
index 1f313e3..6403aa9 100644
--- a/src/site/pages/login.vue
+++ b/src/site/pages/login.vue
@@ -95,7 +95,7 @@ export default {
 			password: null,
 			mfaCode: null,
 			isMfaModalActive: false,
-			isLoading: false,
+			isLoading: false
 		};
 	},
 	computed: mapState(['config', 'auth']),
@@ -150,7 +150,7 @@ export default {
 				return;
 			}
 			this.$router.push('/dashboard');
-		},
-	},
+		}
+	}
 };
 </script>
diff --git a/src/site/pages/logout.vue b/src/site/pages/logout.vue
index 7124ea5..e6adbea 100644
--- a/src/site/pages/logout.vue
+++ b/src/site/pages/logout.vue
@@ -3,6 +3,6 @@ export default {
 	async created() {
 		await this.$store.dispatch('auth/logout');
 		this.$router.replace('/login');
-	},
+	}
 };
 </script>
diff --git a/src/site/pages/register.vue b/src/site/pages/register.vue
index 5a7a158..64376db 100644
--- a/src/site/pages/register.vue
+++ b/src/site/pages/register.vue
@@ -74,7 +74,7 @@ export default {
 			username: null,
 			password: null,
 			rePassword: null,
-			isLoading: false,
+			isLoading: false
 		};
 	},
 	computed: mapState(['config', 'auth']),
@@ -98,7 +98,7 @@ export default {
 			try {
 				const response = await this.$store.dispatch('auth/register', {
 					username: this.username,
-					password: this.password,
+					password: this.password
 				});
 
 				this.$notifier.success(response.message);
@@ -109,7 +109,7 @@ export default {
 			} finally {
 				this.isLoading = false;
 			}
-		},
-	},
+		}
+	}
 };
 </script>
diff --git a/src/site/plugins/axios.js b/src/site/plugins/axios.js
index 0308d39..98bec5c 100644
--- a/src/site/plugins/axios.js
+++ b/src/site/plugins/axios.js
@@ -14,12 +14,12 @@ export default function ({ $axios, store }) {
 				if (error.response?.data?.message) {
 					store.dispatch('alert/set', {
 						text: error.response.data.message,
-						error: true,
+						error: true
 					});
 				} else {
 					store.dispatch('alert/set', {
 						text: `[AXIOS]: ${error.message}`,
-						error: true,
+						error: true
 					});
 				}
 			}
diff --git a/src/site/plugins/flexsearch.js b/src/site/plugins/flexsearch.js
index 8640232..1c06c8d 100644
--- a/src/site/plugins/flexsearch.js
+++ b/src/site/plugins/flexsearch.js
@@ -13,5 +13,5 @@ Vue.prototype.$search = {
 	do: async (term, field) => {
 		const results = await search.search(term, { field });
 		return results;
-	},
+	}
 };
diff --git a/src/site/plugins/handler.js b/src/site/plugins/handler.js
index 3d85b15..7933eab 100644
--- a/src/site/plugins/handler.js
+++ b/src/site/plugins/handler.js
@@ -8,18 +8,18 @@ export default ({ store }, inject) => {
 
 				store.commit('alert/set', {
 					message: response?.message ?? 'Executed sucesfully',
-					type: AlertTypes.SUCCESS,
+					type: AlertTypes.SUCCESS
 				});
 
 				return response;
 			} catch (e) {
 				store.commit('alert/set', {
 					message: e.message,
-					type: AlertTypes.ERROR,
+					type: AlertTypes.ERROR
 				});
 
 				return null;
 			}
-		},
+		}
 	});
 };
diff --git a/src/site/plugins/notifier.js b/src/site/plugins/notifier.js
index 4fe1262..465df6d 100644
--- a/src/site/plugins/notifier.js
+++ b/src/site/plugins/notifier.js
@@ -20,6 +20,6 @@ export default ({ store }, inject) => {
 		error(message, snackbar) {
 			this.showMessage({ message, type: AlertTypes.ERROR, snackbar });
 		},
-		types: AlertTypes,
+		types: AlertTypes
 	});
 };
diff --git a/src/site/plugins/vue-isyourpasswordsafe.js b/src/site/plugins/vue-isyourpasswordsafe.js
index 68f313a..6172ca0 100644
--- a/src/site/plugins/vue-isyourpasswordsafe.js
+++ b/src/site/plugins/vue-isyourpasswordsafe.js
@@ -3,5 +3,5 @@ import VueIsYourPasswordSafe from 'vue-isyourpasswordsafe';
 
 Vue.use(VueIsYourPasswordSafe, {
 	minLength: 6,
-	maxLength: 64,
+	maxLength: 64
 });
diff --git a/src/site/plugins/vue-timeago.js b/src/site/plugins/vue-timeago.js
index 81e6e75..28f3c6d 100644
--- a/src/site/plugins/vue-timeago.js
+++ b/src/site/plugins/vue-timeago.js
@@ -4,5 +4,5 @@ import VueTimeago from 'vue-timeago';
 Vue.use(VueTimeago, {
 	name: 'timeago',
 	locale: 'en-US',
-	locales: { 'en-US': require('vue-timeago/locales/en-US.json') },
+	locales: { 'en-US': require('vue-timeago/locales/en-US.json') }
 });
diff --git a/src/site/store/admin.js b/src/site/store/admin.js
index 04ad980..58b63b5 100644
--- a/src/site/store/admin.js
+++ b/src/site/store/admin.js
@@ -8,10 +8,10 @@ export const state = () => ({
 		editedAt: null,
 		apiKeyEditedAt: null,
 		isAdmin: null,
-		files: [],
+		files: []
 	},
 	file: {},
-	settings: {},
+	settings: {}
 });
 
 export const actions = {
@@ -82,7 +82,7 @@ export const actions = {
 		const response = await this.$axios.$post('service/restart');
 
 		return response;
-	},
+	}
 };
 
 export const mutations = {
@@ -118,5 +118,5 @@ export const mutations = {
 				state.user.isAdmin = isAdmin;
 			}
 		}
-	},
+	}
 };
diff --git a/src/site/store/albums.js b/src/site/store/albums.js
index c1ff696..4f796a1 100644
--- a/src/site/store/albums.js
+++ b/src/site/store/albums.js
@@ -5,12 +5,12 @@ export const state = () => ({
 	isListLoading: false,
 	albumDetails: {},
 	expandedAlbums: [],
-	tinyDetails: [],
+	tinyDetails: []
 });
 
 export const getters = {
 	isExpanded: (state) => (id) => state.expandedAlbums.indexOf(id) > -1,
-	getDetails: (state) => (id) => state.albumDetails[id] || {},
+	getDetails: (state) => (id) => state.albumDetails[id] || {}
 };
 
 export const actions = {
@@ -28,8 +28,8 @@ export const actions = {
 		commit('setDetails', {
 			id: albumId,
 			details: {
-				links: response.links,
-			},
+				links: response.links
+			}
 		});
 
 		return response;
@@ -66,7 +66,7 @@ export const actions = {
 		const response = await this.$axios.$post('album/link/edit', {
 			identifier: linkOpts.identifier,
 			enableDownload: linkOpts.enableDownload,
-			enabled: linkOpts.enabled,
+			enabled: linkOpts.enabled
 		});
 
 		commit('updateAlbumLinkOpts', { albumId, linkOpts: response.data });
@@ -86,7 +86,7 @@ export const actions = {
 		commit('setTinyDetails', response);
 
 		return response;
-	},
+	}
 };
 
 export const mutations = {
@@ -113,7 +113,7 @@ export const mutations = {
 	},
 	updateAlbumLinkOpts(state, { albumId, linkOpts }) {
 		const foundIndex = state.albumDetails[albumId].links.findIndex(
-			({ identifier }) => identifier === linkOpts.identifier,
+			({ identifier }) => identifier === linkOpts.identifier
 		);
 		const link = state.albumDetails[albumId].links[foundIndex];
 		state.albumDetails[albumId].links[foundIndex] = { ...link, ...linkOpts };
@@ -132,5 +132,5 @@ export const mutations = {
 	},
 	setTinyDetails(state, { albums }) {
 		state.tinyDetails = albums;
-	},
+	}
 };
diff --git a/src/site/store/alert.js b/src/site/store/alert.js
index 580dcc8..cbd6359 100644
--- a/src/site/store/alert.js
+++ b/src/site/store/alert.js
@@ -3,7 +3,7 @@ import AlertTypes from '~/constants/alertTypes';
 const getDefaultState = () => ({
 	message: null,
 	type: null,
-	snackbar: false,
+	snackbar: false
 });
 
 export const state = getDefaultState;
@@ -18,7 +18,7 @@ export const actions = {
 	},
 	clear({ commit }) {
 		commit('clear');
-	},
+	}
 };
 
 export const mutations = {
@@ -29,5 +29,5 @@ export const mutations = {
 	},
 	clear(state) {
 		Object.assign(state, getDefaultState());
-	},
+	}
 };
diff --git a/src/site/store/auth.js b/src/site/store/auth.js
index 96631e2..85e3a39 100644
--- a/src/site/store/auth.js
+++ b/src/site/store/auth.js
@@ -3,9 +3,9 @@ const getDefaultState = () => ({
 	user: {
 		id: null,
 		isAdmin: false,
-		username: null,
+		username: null
 	},
-	token: null,
+	token: null
 });
 
 export const state = getDefaultState;
@@ -13,7 +13,7 @@ export const state = getDefaultState;
 export const getters = {
 	isLoggedIn: (state) => state.loggedIn,
 	getApiKey: (state) => state.user?.apiKey,
-	getToken: (state) => state.token,
+	getToken: (state) => state.token
 };
 
 export const actions = {
@@ -37,7 +37,7 @@ export const actions = {
 	async register(_, { username, password }) {
 		return this.$axios.$post('auth/register', {
 			username,
-			password,
+			password
 		});
 	},
 	async fetchCurrentUser({ commit, dispatch }) {
@@ -52,7 +52,7 @@ export const actions = {
 		try {
 			const response = await this.$axios.$post('user/password/change', {
 				password,
-				newPassword,
+				newPassword
 			});
 
 			return response;
@@ -76,7 +76,7 @@ export const actions = {
 	},
 	logout({ commit }) {
 		commit('logout');
-	},
+	}
 };
 
 export const mutations = {
@@ -102,5 +102,5 @@ export const mutations = {
 		this.$cookies.remove('token', { path: '/' });
 		// reset state to default
 		Object.assign(state, getDefaultState());
-	},
+	}
 };
diff --git a/src/site/store/config.js b/src/site/store/config.js
index f52fc0f..c17632d 100644
--- a/src/site/store/config.js
+++ b/src/site/store/config.js
@@ -8,11 +8,11 @@ export const state = () => ({
 	chunkSize: 90,
 	maxLinksPerAlbum: 5,
 	publicMode: false,
-	userAccounts: false,
+	userAccounts: false
 });
 
 export const mutations = {
 	set(state, config) {
 		Object.assign(state, config);
-	},
+	}
 };
diff --git a/src/site/store/images.js b/src/site/store/images.js
index 0488573..7cf25ce 100644
--- a/src/site/store/images.js
+++ b/src/site/store/images.js
@@ -6,14 +6,14 @@ export const getDefaultState = () => ({
 	pagination: {
 		page: 1,
 		limit: 30,
-		totalFiles: 0,
+		totalFiles: 0
 	},
 	search: '',
 	albumName: null,
 	albumDownloadEnabled: false,
 	fileExtraInfoMap: {}, // information about the selected file
 	fileAlbumsMap: {}, // map of file ids with a list of album objects the file is in
-	fileTagsMap: {}, // map of file ids with a list of tag objects for the file
+	fileTagsMap: {} // map of file ids with a list of tag objects for the file
 });
 
 export const state = getDefaultState;
@@ -23,7 +23,7 @@ export const getters = {
 	getFetchedCount: ({ files }) => files.length,
 	shouldPaginate: ({ pagination }) => pagination.totalFiles > pagination.limit,
 	getLimit: ({ pagination }) => pagination.limit,
-	getName: ({ name }) => name,
+	getName: ({ name }) => name
 };
 
 export const actions = {
@@ -50,7 +50,7 @@ export const actions = {
 		page = page || 1;
 
 		const response = await this.$axios.$get(`album/${id}/full`, {
-			params: { limit: state.pagination.limit, page },
+			params: { limit: state.pagination.limit, page }
 		});
 
 		commit('setFilesAndMeta', { ...response, page });
@@ -113,7 +113,7 @@ export const actions = {
 		const response = await this.$axios.$get(`search/?q=${encodeURI(q)}${optionalAlbum}`);
 
 		return response;
-	},
+	}
 };
 
 export const mutations = {
@@ -121,7 +121,7 @@ export const mutations = {
 		state.isLoading = true;
 	},
 	setFilesAndMeta(state, {
-		files, name, page, count, downloadEnabled,
+		files, name, page, count, downloadEnabled
 	}) {
 		state.files = files || [];
 		state.albumName = name ?? null;
@@ -174,5 +174,5 @@ export const mutations = {
 	},
 	resetState(state) {
 		Object.assign(state, getDefaultState());
-	},
+	}
 };
diff --git a/src/site/store/index.js b/src/site/store/index.js
index c0faffb..c5d9a23 100644
--- a/src/site/store/index.js
+++ b/src/site/store/index.js
@@ -10,7 +10,7 @@ export const actions = {
 
 		commit('auth/setToken', cookies.token);
 		return dispatch('auth/verify');
-	},
+	}
 	/* 	alert({ commit }, payload) {
 		if (!payload) return commit('alert', null);
 		commit('alert', {
diff --git a/src/site/store/tags.js b/src/site/store/tags.js
index c06b741..a28c2ad 100644
--- a/src/site/store/tags.js
+++ b/src/site/store/tags.js
@@ -1,5 +1,5 @@
 export const state = () => ({
-	tagsList: [],
+	tagsList: []
 });
 
 export const actions = {
@@ -23,7 +23,7 @@ export const actions = {
 		commit('deleteTag', response.data);
 
 		return response;
-	},
+	}
 };
 
 export const mutations = {
@@ -36,5 +36,5 @@ export const mutations = {
 	deleteTag(state, { id: tagId }) {
 		const foundIndex = state.tagsList.findIndex(({ id }) => id === tagId);
 		state.tagsList.splice(foundIndex, 1);
-	},
+	}
 };
-- 
cgit v1.2.3


From 587f7d69e80cfa1d94cc4730dc26834c389f574d Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Thu, 24 Dec 2020 13:57:09 +0200
Subject: bug: fix showlist resetting itself every time the page is changed
 bug: fix store not commiting search results

---
 src/site/components/grid/Grid.vue  | 12 +++++++++---
 src/site/pages/dashboard/index.vue | 16 ++++++++++++----
 src/site/store/images.js           | 21 ++++++++++++++++++---
 3 files changed, 39 insertions(+), 10 deletions(-)

(limited to 'src/site')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index 3a15335..ea568f0 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -21,9 +21,8 @@
 			</div>
 		</nav>
 
-		<template v-if="!showList">
+		<template v-if="!images.showList">
 			<Waterfall
-				v-if="showWaterfall"
 				:gutterWidth="10"
 				:gutterHeight="4"
 				:options="{fitWidth: true}"
@@ -196,7 +195,6 @@ export default {
 	},
 	data() {
 		return {
-			showWaterfall: true,
 			searchTerm: null,
 			showList: false,
 			hoveredItems: [],
@@ -226,10 +224,15 @@ export default {
 			return (this.files || []).filter((v) => !v.hideFromList);
 		}
 	},
+	watch: {
+		showList: 'displayTypeChange'
+	},
 	created() {
 		// TODO: Create a middleware for this
 		this.getAlbums();
 		this.getTags();
+
+		this.showList = this.images.showList;
 	},
 	methods: {
 		async search() {
@@ -332,6 +335,9 @@ export default {
 		},
 		isHovered(id) {
 			return this.hoveredItems.includes(id);
+		},
+		displayTypeChange(showList) {
+			this.$store.commit('images/setShowList', showList);
 		}
 	}
 };
diff --git a/src/site/pages/dashboard/index.vue b/src/site/pages/dashboard/index.vue
index f94ca0d..41605f9 100644
--- a/src/site/pages/dashboard/index.vue
+++ b/src/site/pages/dashboard/index.vue
@@ -108,11 +108,19 @@ export default {
 			// and the value (ex `tag: 123` -> `tag:123`)
 			return (qry || '').replace(/(\w+):\s+/gi, '$1:');
 		},
-		onSearch(query) {
+		async onSearch(query) {
 			this.search = query;
-			this.$handler.executeAction('images/search', {
-				q: this.sanitizeQuery(query)
-			});
+
+			const sanitizedQ = this.sanitizeQuery(query);
+			if (!sanitizedQ.length) {
+				this.current = 1;
+				await this.fetch(this.current);
+			} else {
+				this.$handler.executeAction('images/search', {
+					q: this.sanitizeQuery(query),
+					page: this.current
+				});
+			}
 		}
 	}
 };
diff --git a/src/site/store/images.js b/src/site/store/images.js
index 7cf25ce..69b4f5e 100644
--- a/src/site/store/images.js
+++ b/src/site/store/images.js
@@ -9,6 +9,7 @@ export const getDefaultState = () => ({
 		totalFiles: 0
 	},
 	search: '',
+	showList: false,
 	albumName: null,
 	albumDownloadEnabled: false,
 	fileExtraInfoMap: {}, // information about the selected file
@@ -108,11 +109,22 @@ export const actions = {
 
 		return response;
 	},
-	async search({ commit }, { q, albumId }) {
+	async search({ commit, dispatch }, { q, albumId, page }) {
 		const optionalAlbum = albumId ? `&albumId=${albumId}` : '';
-		const response = await this.$axios.$get(`search/?q=${encodeURI(q)}${optionalAlbum}`);
 
-		return response;
+		page = page || 1;
+
+		try {
+			const response = await this.$axios.$get(`search/?q=${encodeURI(q)}${optionalAlbum}`);
+
+			commit('setFilesAndMeta', { ...response, page });
+
+			return response;
+		} catch (e) {
+			dispatch('alert/set', { text: e.message, error: true }, { root: true });
+		}
+
+		return null;
 	}
 };
 
@@ -172,6 +184,9 @@ export const mutations = {
 			state.fileTagsMap[fileId].splice(foundIndex, 1);
 		}
 	},
+	setShowList(state, showList) {
+		state.showList = showList;
+	},
 	resetState(state) {
 		Object.assign(state, getDefaultState());
 	}
-- 
cgit v1.2.3