V2 in progress

src/components/AuthenticationModal.vue

@@ -2,6 +2,7 @@
     <v-dialog
       v-model="dialogOpen"
       max-width="768"
+      v-if="!$store.getters['auth/isCurrentlyAuthenticated']"
     >
       <template v-slot:activator="{ on, attrs }">
         <v-btn
@@ -25,6 +26,7 @@
         </v-card-text>
       </v-card>
     </v-dialog>
+    <v-btn text min-width="100%" class="mx-2" @click="logOut" v-else>Log Out</v-btn>
 </template>
 
 <script>
@@ -49,6 +51,7 @@ export default {
           username: this.username,
           password: this.password
         })
+        this.dialogOpen = false
       } catch (e) {
         if (!(e instanceof AuthenticationError)) {
           throw e
@@ -60,6 +63,12 @@ export default {
       }
     },
 
+    logOut () {
+      this.$store.commit('auth/deleteAuthToken', {
+        apiURL: this.$store.getters['prefs/apiUrl']
+      })
+    },
+
     login () {
       return this.doCall('login')
     },

src/router/index.js

@@ -2,7 +2,7 @@ import Vue from 'vue'
 import VueRouter from 'vue-router'
 import VueMeta from 'vue-meta'
 
-import TrendingPage from '@/routes/TrendingPage'
+import FeedPage from '@/routes/FeedPage'
 import Preferences from '@/routes/Preferences'
 
 Vue.use(VueMeta)
@@ -11,8 +11,18 @@ Vue.use(VueRouter)
 const routes = [
   {
     path: '/',
+    name: 'Homepage',
+    component: FeedPage
+  },
+  {
+    path: '/trending',
     name: 'Trending',
-    component: TrendingPage
+    component: FeedPage
+  },
+  {
+    path: '/feed',
+    name: 'Feed',
+    component: FeedPage
   },
   {
     path: '/preferences',

src/routes/FeedPage.vue

@@ -42,14 +42,28 @@ export default {
   methods: {
     async fetchTrending () {
       const region = this.$store.getters['prefs/getPreference']('region', 'US')
+      let path
+
+      switch (this.$route.path) {
+        case '/':
+          path = '/trending'
+          break
+        case '/trending':
+          path = '/trending'
+          break
+        case '/feed':
+          path = '/feed'
+          break
+      }
 
       try {
         this.error = null
         this.videos = await this.$store.dispatch('auth/makeRequest', {
-          path: '/trending',
+          path,
           params: {
             region: region
-          }
+          },
+          tokenInParams: true
         })
       } catch (e) {
         if (e.isAxiosError) {

src/routes/WatchVideo.vue

@@ -52,9 +52,10 @@
                 </a>
                 <div class="ml-4">
                   <v-btn
-                    v-if="$store.state['auth/isAuthenticated']"
-                    @click="subscribeHandler"
+                    v-if="$store.getters['auth/isCurrentlyAuthenticated'] && subscribed != null"
+                    @click.prevent="subscribeHandler"
                     color="primary"
+                    outlined
                   >
                     {{ subscribed ? "Unsubscribe" : "Subscribe" }}
                   </v-btn>
@@ -110,7 +111,7 @@ export default {
       selectedAutoLoop: false,
       showDesc: true,
       comments: null,
-      subscribed: false,
+      subscribed: null,
       channelId: null
     }
   },
@@ -235,11 +236,12 @@ export default {
     async getSponsors () {
       if (this.$store.getters['prefs/getPreference']('sponsorblock', true)) { this.fetchSponsors().then(data => (this.sponsors = data)) }
     },
-    async getComments () {
+    getComments () {
       this.fetchComments().then(data => (this.comments = data))
     },
+
     async fetchSubscribedStatus () {
-      if (!this.channelId || !this.$store.state['auth/isAuthenticated']) return
+      if (!this.channelId || !this.$store.getters['auth/isCurrentlyAuthenticated']) return
 
       this.$store.dispatch('auth/makeRequest', {
         path: '/subscribed',
@@ -250,8 +252,8 @@ export default {
         this.subscribed = json.subscribed
       })
     },
-    subscribeHandler () {
-      this.$store.dispatch('auth/makeRequest', {
+    async subscribeHandler () {
+      await this.$store.dispatch('auth/makeRequest', {
         method: 'POST',
         path: (this.subscribed ? '/unsubscribe' : '/subscribe'),
         data: {

src/store/authentication-store.js

@@ -29,6 +29,19 @@ const AuthenticationStore = {
         authToken: token
       })
       window.localStorage.setItem('AUTH', JSON.stringify(state.authStateByInstance))
+    },
+
+    deleteAuthToken (state, { apiURL }) {
+      _set(state.authStateByInstance, [apiURL], {
+        isAuthenticated: false
+      })
+      window.localStorage.setItem('AUTH', JSON.stringify(state.authStateByInstance))
+    }
+  },
+
+  getters: {
+    isCurrentlyAuthenticated (state, getters, rootState, rootGetters) {
+      return state.authStateByInstance[rootGetters['prefs/apiUrl']]?.isAuthenticated
     }
   },
 
@@ -70,12 +83,13 @@ const AuthenticationStore = {
       path,
       method,
       data,
-      params
+      params,
+      tokenInParams = false
     }) {
       const APIURL = rootGetters['prefs/apiUrl']
       const AuthState = state.authStateByInstance[APIURL] ?? {}
 
-      if (AuthState.isAuthenticated) {
+      if (AuthState.isAuthenticated && tokenInParams) {
         if (_isPlainObject(params)) {
           params.authToken = AuthState.authToken
         } else {