Public albums wooo!

2 files changed, 120 insertions, 9 deletions

diff --git a/src/site/views/PublicAlbum.vue b/src/site/views/PublicAlbum.vue
new file mode 100644
index 0000000..534c185
--- /dev/null
+++ b/src/site/views/PublicAlbum.vue
@@ -0,0 +1,105 @@
+<style lang="scss" scoped>
+	@import '../styles/colors.scss';
+	section { background-color: $backgroundLight1 !important; }
+
+	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 '../styles/colors.scss';
+</style>
+
+<template>
+	<section class="hero is-fullheight">
+		<template v-if="files.length">
+			<div class="hero-body align-top">
+				<div class="container">
+					<h1 class="title">{{ name }}</h1>
+					<h2 class="subtitle">Serving {{ files.length }} files</h2>
+					<hr>
+				</div>
+			</div>
+			<div class="hero-body">
+				<div class="container">
+					<Grid v-if="files.length"
+						:files="files"
+						:isPublic="true"
+						:width="200"/>
+				</div>
+			</div>
+		</template>
+		<template v-else>
+			<div class="hero-body">
+				<div class="container loading-container">
+					<Loading class="square"/>
+				</div>
+			</div>
+		</template>
+	</section>
+</template>
+
+<script>
+import Grid from '../components/grid/Grid.vue';
+import Loading from '../components/loading/CubeShadow.vue';
+import axios from 'axios';
+import config from '../config.js';
+
+export default {
+	components: { Grid, Loading },
+	async getInitialData({ route, store }) {
+		try {
+			const res = await axios.get(`${config.baseURL}/album/${route.params.identifier}`);
+			return {
+				name: res.data.name,
+				downloadEnabled: res.data.downloadEnabled,
+				files: res.data.files
+			};
+		} catch (error) {
+			console.error(error);
+			return {
+				name: null,
+				downloadEnabled: false,
+				files: []
+			};
+		}
+	},
+	data() {
+		return {};
+	},
+	metaInfo() {
+		return {
+			title: `${this.name ? this.name : ''}`,
+			meta: [
+				{ vmid: 'theme-color', name: 'theme-color', content: '#30a9ed' },
+				{ vmid: 'twitter:card', name: 'twitter:card', content: 'summary' },
+				{ vmid: 'twitter:title', name: 'twitter:title', content: `Album: ${this.name} | Files: ${this.files.length}` },
+				{ 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: 'twitter:image', name: 'twitter:image', content: `${this.files.length > 0 ? this.files[0].thumbSquare : '/public/images/share.jpg'}` },
+				{ vmid: 'twitter:image:src', name: 'twitter:image:src', value: `${this.files.length > 0 ? this.files[0].thumbSquare : '/public/images/share.jpg'}` },
+
+				{ vmid: 'og:url', property: 'og:url', content: `${config.URL}/a/${this.$route.params.identifier}` },
+				{ 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'}` }
+			]
+		};
+	},
+	mounted() {
+		this.$ga.page({
+			page: `/a/${this.$route.params.identifier}`,
+			title: `Album | ${this.name}`,
+			location: window.location.href
+		});
+	},
+	methods: {}
+};
+</script>
diff --git a/src/site/views/dashboard/Albums.vue b/src/site/views/dashboard/Albums.vue
index 2c7984c..57cd01f 100644
--- a/src/site/views/dashboard/Albums.vue
+++ b/src/site/views/dashboard/Albums.vue
@@ -211,7 +211,7 @@
 											<b-table-column field="identifier"
 												label="Link"
 												centered>
-												<a :href="props.row.identifier"
+												<a :href="`${config.URL}/a/${props.row.identifier}`"
 													target="_blank">
 													{{ props.row.identifier }}
 												</a>
@@ -235,10 +235,11 @@
 												<b-switch :value="props.row.enabled "/>
 											</b-table-column>
 
-											<b-table-column field="createdAt"
-												label="Created at"
+											<b-table-column field="actions"
+												label="Actions"
 												centered>
-												{{ props.row.createdAt }}
+												<button class="button is-danger"
+													@click="deleteLink(props.row.identifier)">Delete link</button>
 											</b-table-column>
 										</template>
 										<template slot="empty">
@@ -251,11 +252,11 @@
 										</template>
 										<template slot="footer">
 											<div class="has-text-right">
-												<p class="control">
-													<button :class="{ 'is-loading': album.isCreatingLink }"
-														class="button is-primary"
-														@click="createLink(album)">Create new link</button>
-												</p>
+												<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>
 										</template>
 									</b-table>
@@ -285,6 +286,11 @@ export default {
 			newAlbumName: null
 		};
 	},
+	computed: {
+		config() {
+			return this.$store.state.config;
+		}
+	},
 	metaInfo() {
 		return { title: 'Uploads' };
 	},