Merge pull request #1720 from Bnyro/not-logged-in

Improve playlist page when not logged in

src/components/PlaylistsPage.vue

@@ -3,6 +3,7 @@
 
     <hr />
 
+    <div v-if="authenticated">
         <button v-t="'actions.create_playlist'" class="btn" @click="createPlaylist" />
 
         <div class="video-grid">
@@ -17,25 +18,52 @@
                     />
                 </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
-                <button class="pp-color h-auto" @click="renamePlaylist(playlist.id)" v-t="'actions.rename_playlist'" />
+                        class="thumbnail-overlay thumbnail-right"
-                <button class="pp-color h-auto" @click="deletePlaylist(playlist.id)" v-t="'actions.delete_playlist'" />
+                        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";

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}",