add condition to download

webui/src/components/pages/Tracklist.vue

@@ -29,7 +29,7 @@
 					<th>
 						<i class="material-icons">timer</i>
 					</th>
-					<th class="table__icon table__cell--center clickable">
+					<th v-if="isLoggedIn" class="table__icon table__cell--center clickable">
 						<input class="selectAll" type="checkbox" @click="toggleAll" />
 					</th>
 				</tr>
@@ -93,7 +93,7 @@
 							>
 								{{ convertDuration(track.duration) }}
 							</td>
-							<td class="table__icon table__cell--center">
+							<td v-if="isLoggedIn" class="table__icon table__cell--center">
 								<input v-model="track.selected" class="clickable" type="checkbox" />
 							</td>
 						</tr>
@@ -136,42 +136,48 @@
 						<td>{{ track.artists[0].name }}</td>
 						<td>{{ track.album.name }}</td>
 						<td>{{ convertDuration(Math.floor(track.duration_ms / 1000)) }}</td>
-						<td><input v-model="track.selected" class="clickable" type="checkbox" /></td>
+						<td v-if="isLoggedIn"><input v-model="track.selected" class="clickable" type="checkbox" /></td>
 					</tr>
 				</template>
 			</tbody>
 		</table>
 		<span v-if="label" style="opacity: 0.4; margin-top: 8px; display: inline-block; font-size: 13px">{{ label }}</span>
 		<footer class="bg-background-main">
-			<button :data-link="link" class="mr-2 btn btn-primary" @click.stop="addToQueue">
-				{{ `${$t('globals.download', { thing: $tc(`globals.listTabs.${type}`, 1) })}` }}
-			</button>
-			<button :data-link="selectedLinks()" class="flex items-center btn btn-primary" @click.stop="addToQueue">
-				{{ $t('tracklist.downloadSelection') }}<i class="ml-2 material-icons">file_download</i>
-			</button>
+			<template v-if="isLoggedIn">
+				<button :data-link="link" class="mr-2 btn btn-primary" @click.stop="addToQueue">
+					{{ `${$t('globals.download', { thing: $tc(`globals.listTabs.${type}`, 1) })}` }}
+				</button>
+				<button :data-link="selectedLinks()" class="flex items-center btn btn-primary" @click.stop="addToQueue">
+					{{ $t('tracklist.downloadSelection') }}<i class="ml-2 material-icons">file_download</i>
+				</button>
+			</template>
+			<p v-else>
+				<router-link :to="{ name: 'Settings' }" class="p3">{{ $t('toasts.loginNeededToDownload') }}</router-link>
+			</p>
 		</footer>
 	</div>
 </template>
 
 <script>
 import { isEmpty } from 'lodash-es'
-import { sendAddToQueue } from '@/utils/downloads'
-import Utils from '@/utils/utils'
+import { mapGetters } from 'vuex'
 import { playPausePreview } from '@/components/globals/TheTrackPreview.vue'
+import { sendAddToQueue } from '@/utils/downloads'
 import EventBus from '@/utils/EventBus'
+import Utils from '@/utils/utils'
 
 export default {
 	data() {
 		return {
-			title: '',
-			metadata: '',
-			release_date: '',
-			label: '',
+			body: [],
 			explicit: false,
 			image: '',
-			type: 'empty',
+			label: '',
 			link: '',
-			body: []
+			metadata: '',
+			release_date: '',
+			title: '',
+			type: 'empty',
 		}
 	},
 	mounted() {
@@ -179,6 +185,9 @@ export default {
 		EventBus.$on('showPlaylist', this.showPlaylist)
 		EventBus.$on('showSpotifyPlaylist', this.showSpotifyPlaylist)
 	},
+	computed: {
+		...mapGetters(['isLoggedIn'])
+	},
 	methods: {
 		playPausePreview,
 		reset() {