From a630d04c2c81d905335119e96ac89a02a379ecc4 Mon Sep 17 00:00:00 2001
From: Bnyro <bnyro@tutanota.com>
Date: Thu, 10 Nov 2022 18:59:02 +0100
Subject: [PATCH] improve playlist page when not logged in

---
 src/components/PlaylistsPage.vue | 62 +++++++++++++++++++++++---------
 src/locales/en.json              |  3 +-
 2 files changed, 47 insertions(+), 18 deletions(-)

diff --git a/src/components/PlaylistsPage.vue b/src/components/PlaylistsPage.vue
index 91378cbb..08777bd9 100644
--- a/src/components/PlaylistsPage.vue
+++ b/src/components/PlaylistsPage.vue
@@ -3,39 +3,67 @@
 
     <hr />
 
-    <button v-t="'actions.create_playlist'" class="btn" @click="createPlaylist" />
+    <div v-if="authenticated">
+        <button v-t="'actions.create_playlist'" class="btn" @click="createPlaylist" />
 
-    <div class="video-grid">
-        <div v-for="playlist in playlists" :key="playlist.id" class="efy_trans_filter">
-            <router-link :to="`/playlist?list=${playlist.id}`">
-                <img class="w-full" :src="playlist.thumbnail" alt="thumbnail" />
-                <p
-                    style="display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical"
-                    class="flex link"
-                    :title="playlist.name"
-                    v-text="playlist.name"
-                />
-            </router-link>
-            <div class="pp-video-card-buttons flex gap-15rem children:m-0" style="flex-wrap: wrap">
-                <button class="thumbnail-overlay thumbnail-right" v-text="`${playlist.videos} ${$t('video.videos')}`" />
-                <button class="pp-color h-auto" @click="renamePlaylist(playlist.id)" v-t="'actions.rename_playlist'" />
-                <button class="pp-color h-auto" @click="deletePlaylist(playlist.id)" v-t="'actions.delete_playlist'" />
+        <div class="video-grid">
+            <div v-for="playlist in playlists" :key="playlist.id" class="efy_trans_filter">
+                <router-link :to="`/playlist?list=${playlist.id}`">
+                    <img class="w-full" :src="playlist.thumbnail" alt="thumbnail" />
+                    <p
+                        style="display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical"
+                        class="flex link"
+                        :title="playlist.name"
+                        v-text="playlist.name"
+                    />
+                </router-link>
+                <div class="pp-video-card-buttons flex gap-15rem children:m-0" style="flex-wrap: wrap">
+                    <button
+                        class="thumbnail-overlay thumbnail-right"
+                        v-text="`${playlist.videos} ${$t('video.videos')}`"
+                    />
+                    <button
+                        class="pp-color h-auto"
+                        @click="renamePlaylist(playlist.id)"
+                        v-t="'actions.rename_playlist'"
+                    />
+                    <button
+                        class="pp-color h-auto"
+                        @click="deletePlaylist(playlist.id)"
+                        v-t="'actions.delete_playlist'"
+                    />
+                </div>
             </div>
         </div>
     </div>
+    <div v-else class="text-center h-[65vh] flex flex-col justify-center items-center">
+        <h1 v-t="'actions.not_logged_in'"></h1>
+        <div class="flex mt-100 items-center children:(mx-30)">
+            <button @click="showLoginModal = true" v-t="'titles.account'"></button>
+            <a class="btn h-min!" href="/" v-t="'actions.back_to_home'"></a>
+        </div>
+    </div>
     <br />
+
+    <LoginModal v-if="showLoginModal" @close="showLoginModal = !showLoginModal" />
 </template>
 
 <script>
+import LoginModal from "./LoginModal.vue";
+
 export default {
+    components: {
+        LoginModal,
+    },
     data() {
         return {
             playlists: [],
+            showLoginModal: false,
         };
     },
     mounted() {
         if (this.authenticated) this.fetchPlaylists();
-        else this.$router.push("/login");
+        else this.showLoginModal = true;
     },
     activated() {
         document.title = this.$t("titles.playlists") + " - Piped";
diff --git a/src/locales/en.json b/src/locales/en.json
index cdd84d4d..98823141 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -116,7 +116,8 @@
         "status_page": "Status",
         "source_code": "Source code",
         "instance_donations": "Instance donations",
-        "reply_count": "{count} replies"
+        "reply_count": "{count} replies",
+        "not_logged_in": "Not logged in yet."
     },
     "comment": {
         "pinned_by": "Pinned by {author}",