feat: Add warning to nsfw albums

src/api/routes/albums/albumEditPOST.js

@@ -0,0 +1,33 @@
+const Route = require('../../structures/Route');
+
+class albumEditPOST extends Route {
+	constructor() {
+		super('/album/edit', 'post');
+	}
+
+	async run(req, res, db, user) {
+		if (!req.body) return res.status(400).json({ message: 'No body provided' });
+		const { id, name, nsfw } = req.body;
+		if (!id) return res.status(400).json({ message: 'Invalid album identifier supplied' });
+
+
+		const album = await db.table('albums').where({ id, userId: user.id }).first();
+		if (!album) return res.status(400).json({ message: 'The album doesn\'t exist or doesn\'t belong to the user' });
+
+		try {
+			const updateObj = {
+				name: name ? name : album.name,
+				nsfw: nsfw === true ? true : nsfw === false ? false : album.nsfw
+			};
+			await db
+				.table('albums')
+				.where({ id })
+				.update(updateObj);
+			return res.json({ message: 'Editing the album was successful', data: updateObj });
+		} catch (error) {
+			return super.error(res, error);
+		}
+	}
+}
+
+module.exports = albumEditPOST;

src/api/routes/albums/albumGET.js

@@ -37,6 +37,7 @@ class albumGET extends Route {
 			message: 'Successfully retrieved files',
 			name: album.name,
 			downloadEnabled: link.enableDownload,
+			isNsfw: album.nsfw,
 			files
 		});
 	}

src/api/routes/albums/albumsGET.js

@@ -16,7 +16,7 @@ class albumsGET extends Route {
 		const albums = await db
 			.table('albums')
 			.where('albums.userId', user.id)
-			.select('id', 'name', 'createdAt', 'editedAt')
+			.select('id', 'name', 'nsfw', 'createdAt', 'editedAt')
 			.orderBy('createdAt', 'desc');
 
 		for (const album of albums) {

src/site/components/album/AlbumDetails.vue

@@ -98,6 +98,13 @@
 					</div>
 
 					<div class="level-right">
+						<div class="level-item">
+							<b-switch
+								v-model="isNsfw"
+								:false-value="0"
+								:true-value="1"
+								@input="toggleNsfw()" />
+						</div>
 						<div class="level-item">
 							<button
 								class="button is-danger"
@@ -133,7 +140,15 @@ export default {
 			isDeletingLinks: []
 		};
 	},
-	computed: mapState(['config', 'auth']),
+	computed: {
+		...mapState(['config', 'auth']),
+		isNsfw() {
+			return this.$store.state.albums.list.find(a => a.id === this.albumId).nsfw;
+		}
+	},
+	mounted() {
+		console.log(this.isNsfw);
+	},
 	methods: {
 		...mapActions({
 			deleteAlbumAction: 'albums/deleteAlbum',
@@ -141,6 +156,7 @@ export default {
 			updateLinkOptionsAction: 'albums/updateLinkOptions',
 			createLinkAction: 'albums/createLink',
 			createCustomLinkAction: 'albums/createCustomLink',
+			toggleNsfw: 'albums/toggleNsfw',
 			alert: 'alert/set'
 		}),
 		promptDeleteAlbum(id) {
@@ -199,6 +215,17 @@ export default {
 				this.alert({ text: e.message, error: true });
 			}
 		},
+		async toggleNsfw() {
+			try {
+				const response = await this.toggleNsfw({
+					albumId: this.albumId,
+					nsfw: !this.isNsfw
+				});
+				this.alert({ text: response.message, error: false });
+			} catch (e) {
+				this.alert({ text: e.message, error: true });
+			}
+		},
 		async createCustomLink(albumId) {
 			this.$buefy.dialog.prompt({
 				message: 'Custom link identifier',

src/site/pages/a/_identifier.vue

@@ -1,20 +1,3 @@
-<style lang="scss" scoped>
-	@import '~/assets/styles/_colors.scss';
-	section.hero div.hero-body.align-top {
-		align-items: baseline;
-		flex-grow: 0;
-		padding-bottom: 0;
-	}
-
-	div.loading-container {
-		justify-content: center;
-		display: flex;
-	}
-</style>
-<style lang="scss">
-	@import '~/assets/styles/_colors.scss';
-</style>
-
 <template>
 	<section class="section is-fullheight">
 		<template v-if="files && files.length">
@@ -33,13 +16,30 @@
 				</div>
 			</div>
 			<div class="container">
-				<Grid
-					v-if="files && files.length"
-					:files="files"
-					:is-public="true"
-					:width="200"
-					:enable-search="false"
-					:enable-toolbar="false" />
+				<template v-if="!isNsfw || (isNsfw && nsfwConsent)">
+					<Grid
+						v-if="files && files.length"
+						:files="files"
+						:is-public="true"
+						:width="200"
+						:enable-search="false"
+						:enable-toolbar="false" />
+				</template>
+				<template v-else>
+					<div class="nsfw">
+						<i class="mdi mdi-alert mdi-48px" />
+						<h1>NSFW Content</h1>
+						<p>
+							This album contains images or videos that are not safe for work or are inappropriate to view in some situations.<br>
+							Do you wish to proceed?
+						</p>
+						<button
+							class="button is-danger"
+							@click="nsfwConsent = true">
+							Show me the content
+						</button>
+					</div>
+				</template>
 			</div>
 		</template>
 		<template v-else>
@@ -62,7 +62,9 @@ import Grid from '~/components/grid/Grid.vue';
 export default {
 	components: { Grid },
 	data() {
-		return {};
+		return {
+			nsfwConsent: false
+		};
 	},
 	computed: {
 		config() {
@@ -77,7 +79,8 @@ export default {
 				name: data.name,
 				downloadEnabled: data.downloadEnabled,
 				files: data.files,
-				downloadLink
+				downloadLink,
+				isNsfw: data.isNsfw
 			};
 		} catch (err) {
 			console.log('Error when retrieving album', err);
@@ -119,3 +122,32 @@ export default {
 	}
 };
 </script>
+<style lang="scss" scoped>
+	section.hero div.hero-body.align-top {
+		align-items: baseline;
+		flex-grow: 0;
+		padding-bottom: 0;
+	}
+
+	div.loading-container {
+		justify-content: center;
+		display: flex;
+	}
+	.nsfw {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		min-height: 50vh;
+
+		h1 {
+			font-size: 2rem;
+			margin-bottom: 2rem;
+		}
+		p {
+			font-size: 1.5rem;
+			margin-bottom: 2rem;
+			text-align: center;
+		}
+	}
+</style>

src/site/store/albums.js

@@ -73,6 +73,15 @@ export const actions = {
 
 		return response;
 	},
+	async toggleNsfw({ commit }, { albumId, nsfw }) {
+		const response = await this.$axios.$post('album/edit', {
+			id: albumId,
+			nsfw
+		});
+		commit('updateNsfw', { albumId, nsfw });
+
+		return response;
+	},
 	async deleteLink({ commit }, { albumId, identifier }) {
 		const response = await this.$axios.$delete(`album/link/delete/${identifier}`);
 
@@ -118,6 +127,9 @@ export const mutations = {
 		const link = state.albumDetails[albumId].links[foundIndex];
 		state.albumDetails[albumId].links[foundIndex] = { ...link, ...linkOpts };
 	},
+	updateNsfw(state, { albumId, value }) {
+		state.list.find(el => el.id === albumId).nsfw = value;
+	},
 	removeAlbumLink(state, { albumId, identifier }) {
 		const foundIndex = state.albumDetails[albumId].links.findIndex(({ identifier: id }) => id === identifier);
 		if (foundIndex > -1) state.albumDetails[albumId].links.splice(foundIndex, 1);

src/site/store/index.js

@@ -1,6 +1,5 @@
 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);
@@ -11,11 +10,4 @@ export const actions = {
 		commit('auth/setToken', cookies.token);
 		return dispatch('auth/verify');
 	}
-	/* 	alert({ commit }, payload) {
-		if (!payload) return commit('alert', null);
-		commit('alert', {
-			text: payload.text,
-			error: payload.error
-		});
-	} */
 };