From 9b3f90a7baa93d6395601ce3791c5a03821b8b9f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ciar=C3=A1n=20Ainsworth?= <ciaranainsworth@outlook.com>
Date: Fri, 30 Apr 2021 21:11:44 +0000
Subject: [PATCH] Resolve "Channel: clicking auf "Subscribe" when not logged in
still updates the subscriber count"
---
changes/changelog.d/1296.enhancement | 1 +
front/scripts/fix-fomantic-css.py | 1 +
.../components/channels/SubscribeButton.vue | 26 +++++++-
front/src/components/common/LoginModal.vue | 65 +++++++++++++++++++
4 files changed, 91 insertions(+), 2 deletions(-)
create mode 100644 changes/changelog.d/1296.enhancement
create mode 100644 front/src/components/common/LoginModal.vue
diff --git a/changes/changelog.d/1296.enhancement b/changes/changelog.d/1296.enhancement
new file mode 100644
index 0000000000..2df4117aae
--- /dev/null
+++ b/changes/changelog.d/1296.enhancement
@@ -0,0 +1 @@
+Added modal to prompt users to log in when subscribing to channels (#1296)
diff --git a/front/scripts/fix-fomantic-css.py b/front/scripts/fix-fomantic-css.py
index 075d818ddd..3ab13001fe 100755
--- a/front/scripts/fix-fomantic-css.py
+++ b/front/scripts/fix-fomantic-css.py
@@ -164,6 +164,7 @@ def discard_unused_icons(rule):
".wikipedia",
".wrench",
".x",
+ ".key",
]
if ":before" not in rule["lines"][0]:
return False
diff --git a/front/src/components/channels/SubscribeButton.vue b/front/src/components/channels/SubscribeButton.vue
index 6a087554b5..3fb06be29c 100644
--- a/front/src/components/channels/SubscribeButton.vue
+++ b/front/src/components/channels/SubscribeButton.vue
@@ -1,16 +1,33 @@
<template>
- <button @click.stop="toggle" :class="['ui', 'pink', {'inverted': isSubscribed}, {'favorited': isSubscribed}, 'icon', 'labeled', 'button']">
+ <button v-if="$store.state.auth.authenticated" @click.stop="toggle" :class="['ui', 'pink', {'inverted': isSubscribed}, {'favorited': isSubscribed}, 'icon', 'labeled', 'button']">
<i class="heart icon"></i>
<translate v-if="isSubscribed" translate-context="Content/Track/Button.Message">Unsubscribe</translate>
<translate v-else translate-context="Content/Track/*/Verb">Subscribe</translate>
</button>
+ <button @click="$refs.loginModal.show = true" v-else :class="['ui', 'pink', 'icon', 'labeled', 'button']">
+ <i class="heart icon"></i>
+ <translate translate-context="Content/Track/*/Verb">Subscribe</translate>
+ <login-modal
+ ref="loginModal"
+ class="small"
+ :nextRoute='this.$route.fullPath'
+ :message='this.message.authMessage'
+ :cover='this.channel.artist.cover'
+ @created="$refs.loginModal.show = false;">
+ </login-modal>
+ </button>
</template>
<script>
+import LoginModal from '@/components/common/LoginModal'
+
export default {
props: {
channel: {type: Object},
},
+ components: {
+ LoginModal
+ },
computed: {
title () {
if (this.isSubscribed) {
@@ -21,7 +38,12 @@ export default {
},
isSubscribed () {
return this.$store.getters['channels/isSubscribed'](this.channel.uuid)
- }
+ },
+ message () {
+ return {
+ authMessage: this.$pgettext('Popup/Message/Paragraph', 'You need to be logged in to subscribe to this channel')
+ }
+ },
},
methods: {
toggle () {
diff --git a/front/src/components/common/LoginModal.vue b/front/src/components/common/LoginModal.vue
new file mode 100644
index 0000000000..30cfb5b893
--- /dev/null
+++ b/front/src/components/common/LoginModal.vue
@@ -0,0 +1,65 @@
+<template>
+ <modal :show.sync="show">
+ <h4 class="header">{{ labels.header }}</h4>
+ <div v-if="cover" class="image content">
+ <div class="ui medium image">
+ <img :src="cover.urls.medium_square_crop">
+ </div>
+ <div class="description">
+ <div class="ui header">
+ {{ labels.description }}
+ </div>
+ <p>
+ {{ message }}
+ </p>
+ </div>
+ </div>
+ <div v-else class="content">
+ <div class="ui centered header">
+ {{ labels.description }}
+ </div>
+ <p style="text-align: center;">
+ {{ message }}
+ </p>
+ </div>
+ <div class="actions">
+ <router-link :to="{path: '/login', query: { next: nextRoute }}" class="ui labeled icon button"><i class="key icon"></i>
+ {{ labels.login }}
+ </router-link>
+ <router-link v-if="$store.state.instance.settings.users.registration_enabled.value" :to="{path: '/signup'}" class="ui labeled icon button"><i class="user icon"></i>
+ {{ labels.signup }}
+ </router-link>
+ </div>
+ </modal>
+</template>
+
+<script>
+import Modal from '@/components/semantic/Modal'
+
+export default {
+ props: {
+ nextRoute: {type: String},
+ message: {type: String},
+ cover: {type: Object},
+ },
+ components: {
+ Modal,
+ },
+ data() {
+ return {
+ show: false,
+ }
+ },
+ computed: {
+ labels() {
+ return {
+ header: this.$pgettext('Popup/Title/Noun', "Unauthenticated"),
+ login: this.$pgettext('*/*/Button.Label/Verb', "Log in"),
+ signup: this.$pgettext('*/*/Button.Label/Verb', "Sign up"),
+ description: this.$pgettext('Popup/*/Paragraph', "You don't have access!"),
+ }
+ },
+ }
+}
+
+</script>
--
GitLab