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 000000000..2df4117aa
--- /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 075d818dd..3ab13001f 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 6a087554b..3fb06be29 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 000000000..30cfb5b89
--- /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>