diff options
Diffstat (limited to 'src/site')
| -rw-r--r-- | src/site/components/album/AlbumDetails.vue | 29 | ||||
| -rw-r--r-- | src/site/pages/a/_identifier.vue | 84 | ||||
| -rw-r--r-- | src/site/store/albums.js | 12 | ||||
| -rw-r--r-- | src/site/store/index.js | 8 |
4 files changed, 98 insertions, 35 deletions
diff --git a/src/site/components/album/AlbumDetails.vue b/src/site/components/album/AlbumDetails.vue index ef07670..10925df 100644 --- a/src/site/components/album/AlbumDetails.vue +++ b/src/site/components/album/AlbumDetails.vue @@ -99,6 +99,13 @@ <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" style="float: right" @@ -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', diff --git a/src/site/pages/a/_identifier.vue b/src/site/pages/a/_identifier.vue index 11e557b..7ffed35 100644 --- a/src/site/pages/a/_identifier.vue +++ b/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> diff --git a/src/site/store/albums.js b/src/site/store/albums.js index 8be0230..b109af6 100644 --- a/src/site/store/albums.js +++ b/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); diff --git a/src/site/store/index.js b/src/site/store/index.js index c5d9a23..94d673f 100644 --- a/src/site/store/index.js +++ b/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 - }); - } */ }; |