: logout to april version (fixed #269)

frontend/src/views/Netflix.vue

@@ -9,7 +9,7 @@
         <div class="notification-badge">0</div>
       </div>
       <b-dropdown v-if="$store.state.user" right
-                           :toggle-class="$route.path.startsWith('/user/')?'active':''">
+                  :toggle-class="$route.path.startsWith('/user/')?'active':''">
         <template slot="button-content">
           <img alt="User" src="@/assets/img/user.png" class="user-icon"/>
         </template>
@@ -18,7 +18,7 @@
             <font-awesome-icon dixed-width :icon="['fas', 'code']"/>
             Unterkonten & API-Tokens
           </b-dropdown-item>
-          <b-dropdown-divider v-if="$store.state.token" />
+          <b-dropdown-divider v-if="$store.state.token"/>
           <b-dropdown-item @click="logout">
             <font-awesome-icon fixed-width :icon="['fas', 'sign-out-alt']"/>
             Abmelden
@@ -41,14 +41,17 @@
       <b-col offset-md="2" offset-sm="1" md="6">
         <div class="movie-preview-text p-4">
           <h1>{{ random_item(titles) }}</h1>
-          <p style="opacity: .75; width: 25vw; min-width: 300px">{{random_item(abstracts) }}</p>
+          <p style="opacity: .75; width: 25vw; min-width: 300px">{{ random_item(abstracts) }}</p>
           <b-button v-b-modal.play_me variant="light" style="border: none; margin-right: 5px">
             <font-awesome-icon :icon="['fas','play']"/>
             <b> Abspielen</b></b-button>
-          <b-button style="background-color:rgba(255,255,255,.25); border: none" v-b-modal.more-info><b>Mehr Infos</b></b-button>
+          <b-button style="background-color:rgba(255,255,255,.25); border: none" v-b-modal.more-info><b>Mehr Infos</b>
+          </b-button>
           <b-modal id="more-info" title="April, April..." centered body-class="text-center">
             Es ist mal wieder so weit. Ganz liebe Grüße und einen verwirrenden Tag wünscht das NETVS Team! 🤡<br>
-            Die Texte wurden übrigens von 😱<b>Künstlicher Intelligenz</b>😱 aus <a href="https://www.kit.edu/" target="_blank">kit.edu</a> Inhalten erdichtet.
+            Die Texte wurden übrigens von 😱<b>Künstlicher Intelligenz</b>😱 aus <a href="https://www.kit.edu/"
+                                                                                    target="_blank">kit.edu</a> Inhalten
+            erdichtet.
             <a href="https://app.inferkit.com/demo" target="_blank">Viel Spaß beim Ausprobieren!</a>
             <template #modal-footer="{ ok }">
               <b-button size="sm" variant="danger" @click="$router.push('/dnsvs/bcds')">
@@ -64,52 +67,54 @@
     </b-row>
     <b-row class="continue-watching-title">
       <b-col offset-md="1">
-        <h4>Mit dem Profil von {{$store.state.user.login_name}} weiterschauen</h4>
+        <h4>Mit dem Profil von {{ $store.state.user.login_name }} weiterschauen</h4>
         <div class="container-fluid pl-0">
-      <b-row class="movie-suggestions flex-row flex-nowrap p-2">
-        <b-col v-for="thumbnail in thumbnails" :key="thumbnail" class="movie-suggestion">
-          <b-aspect aspect="16:9" class="movie-suggestion-img">
-            <img :src="thumbnail" class="img-fluid"/>
-          </b-aspect>
-          <h5 class="movie-suggestion-title">{{random_item(titles)}}</h5>
-          <div class="movie-suggestion-info">
-            <div class="movie-suggestion-btns">
-              <button class="movie-suggestion-btn active">
-                <font-awesome-icon :icon="['fas','play']"/>
-              </button>
-              <button class="movie-suggestion-btn">
-                <font-awesome-icon :icon="['fas','plus']"/>
-              </button>
-              <button class="movie-suggestion-btn">
-                <font-awesome-icon :icon="['fas','thumbs-up']"/>
-              </button>
-              <button class="movie-suggestion-btn">
-                <font-awesome-icon :icon="['fas','thumbs-down']"/>
-              </button>
-            </div>
-            <div class="p-3">
-              <p>
-                <nobr><span class="match-text">{{ Math.floor(Math.random() * 30) + 70 }}% Übereinstimmung</span>
-                </nobr>
-                <span
-                  class="age-rating">{{ random_item(age_ratings) }}</span>
-                <nobr> {{ Math.floor(Math.random() * 15) }} Teile</nobr>
-              </p>
-              <p> {{ random_item(tags) }} <span
-                style="color: rgba(255,255,255,.5); padding-left: 3px; padding-right: 3px">&#8226; </span>
-                {{ random_item(tags) }} <span
-                  style="color: rgba(255,255,255,.5); padding-left: 3px; padding-right: 3px">&#8226; </span>
-                {{ random_item(tags) }}</p>
-            </div>
-          </div>
-        </b-col>
-      </b-row>
-    </div>
+          <b-row class="movie-suggestions flex-row flex-nowrap p-2">
+            <b-col v-for="thumbnail in thumbnails" :key="thumbnail" class="movie-suggestion">
+              <b-aspect aspect="16:9" class="movie-suggestion-img">
+                <img :src="thumbnail" class="img-fluid"/>
+              </b-aspect>
+              <h5 class="movie-suggestion-title">{{ random_item(titles) }}</h5>
+              <div class="movie-suggestion-info">
+                <div class="movie-suggestion-btns">
+                  <button class="movie-suggestion-btn active">
+                    <font-awesome-icon :icon="['fas','play']"/>
+                  </button>
+                  <button class="movie-suggestion-btn">
+                    <font-awesome-icon :icon="['fas','plus']"/>
+                  </button>
+                  <button class="movie-suggestion-btn">
+                    <font-awesome-icon :icon="['fas','thumbs-up']"/>
+                  </button>
+                  <button class="movie-suggestion-btn">
+                    <font-awesome-icon :icon="['fas','thumbs-down']"/>
+                  </button>
+                </div>
+                <div class="p-3">
+                  <p>
+                    <nobr><span class="match-text">{{ Math.floor(Math.random() * 30) + 70 }}% Übereinstimmung</span>
+                    </nobr>
+                    <span
+                      class="age-rating">{{ random_item(age_ratings) }}</span>
+                    <nobr> {{ Math.floor(Math.random() * 15) }} Teile</nobr>
+                  </p>
+                  <p> {{ random_item(tags) }} <span
+                    style="color: rgba(255,255,255,.5); padding-left: 3px; padding-right: 3px">&#8226; </span>
+                    {{ random_item(tags) }} <span
+                      style="color: rgba(255,255,255,.5); padding-left: 3px; padding-right: 3px">&#8226; </span>
+                    {{ random_item(tags) }}</p>
+                </div>
+              </div>
+            </b-col>
+          </b-row>
+        </div>
       </b-col>
     </b-row>
 
     <div class="bottom-space"/>
-    <div class="p-4"><Footer/></div>
+    <div class="p-4">
+      <Footer/>
+    </div>
 
   </div>
 </template>
@@ -118,6 +123,7 @@
 import GlobalSearch from '@/components/GlobalSearch'
 import NavbarContent from '@/components/NavbarContent'
 import Footer from '@/components/Footer'
+import LoginService from '@/api-services/login.service'
 
 export default {
   name: 'Netflix',
@@ -138,6 +144,15 @@ export default {
     }
   },
   methods: {
+    async logout() {
+      if (this.$store.token == null) {
+        await LoginService.logout(null)
+      } else {
+        await LoginService.logout(this.$store.state.token.pk || null)
+      }
+      this.$store.commit('logout')
+      await this.$router.push('/login')
+    },
     random_item(list) {
       return list[Math.floor(Math.random() * list.length)]
     },
@@ -308,13 +323,13 @@ export default {
   transform: translateY(-100px);
   opacity: 0;
   font-size: 83%;
-  max-height:0;
+  max-height: 0;
 }
 
 .movie-suggestion:hover > .movie-suggestion-info {
   transform: translateY(0);
   opacity: 1;
-  height:auto;
+  height: auto;
 }
 
 .video-background {