Refactored user store & moved popup logic from App to store

Cleaned up bits of all the components that use these stores.

User store now focuses around keeping track of the authorization token
and the response from /login. When a sucessfull login request is made we
save our new token and username & admin data to the with login(). Since
cookies aren't implemented yet we keep track of the auth_token to make
authroized requests back to the api later.
The username and admin data from within the body of the token is saved
and only cleared on logout().
Since we haven't implemented cookies we persist storage with
localStorage. Whenever we successfully decode and save a token body we
also save the token to localStorage. This is later used by
initFromLocalStorage() to hydrate the store on first page load.

Popup module is for opening and closing the popup, and now moved away
from a inline plugin in App entry. Now handles loading from &
updating query parameters type=movie | show.
The route listens checks if open every navigation and closes popup if it
is.

src/components/MoviePopup.vue

@@ -1,64 +1,58 @@
 <template>
-  <div class="movie-popup" @click="$popup.close()">
+  <div v-if="isOpen" class="movie-popup" @click="close">
     <div class="movie-popup__box" @click.stop>
       <movie :id="id" :type="type"></movie>
-      <button class="movie-popup__close" @click="$popup.close()"></button>
+      <button class="movie-popup__close" @click="close"></button>
     </div>
     <i class="loader"></i>
   </div>
 </template>
 
 <script>
+import { mapActions, mapGetters } from "vuex";
 import Movie from "./Movie";
 
 export default {
-  props: {
-    id: {
-      type: Number,
-      required: true
-    },
-    type: {
-      type: String,
-      required: true
+  components: { Movie },
+  computed: {
+    ...mapGetters("popup", ["isOpen", "id", "type"])
+  },
+  watch: {
+    isOpen(value) {
+      value
+        ? document.getElementsByTagName("body")[0].classList.add("no-scroll")
+        : document
+            .getElementsByTagName("body")[0]
+            .classList.remove("no-scroll");
     }
   },
-  components: { Movie },
   methods: {
+    ...mapActions("popup", ["close", "open"]),
     checkEventForEscapeKey(event) {
-      if (event.keyCode == 27) {
-        this.$popup.close();
-      }
-    },
-    updateQueryParams(id = false) {
-      const params = new URLSearchParams(window.location.search);
-      if (params.has("movie")) {
-        params.delete("movie");
-      }
-
-      if (id) {
-        params.append("movie", id);
-      }
-
-      window.history.replaceState(
-        {},
-        "search",
-        `${window.location.protocol}//${window.location.hostname}${
-          window.location.port ? `:${window.location.port}` : ""
-        }${window.location.pathname}${
-          params.toString().length ? `?${params}` : ""
-        }`
-      );
+      if (event.keyCode == 27) this.close();
     }
   },
   created() {
-    this.updateQueryParams(this.id);
+    const params = new URLSearchParams(window.location.search);
+    let id = null;
+    let type = null;
+
+    if (params.has("movie")) {
+      id = Number(params.get("movie"));
+      type = "movie";
+    } else if (params.has("show")) {
+      id = Number(params.get("show"));
+      type = "show";
+    }
+
+    if (id && type) {
+      this.open({ id, type });
+    }
+
     window.addEventListener("keyup", this.checkEventForEscapeKey);
-    document.getElementsByTagName("body")[0].classList.add("no-scroll");
   },
   beforeDestroy() {
-    this.updateQueryParams();
     window.removeEventListener("keyup", this.checkEventForEscapeKey);
-    document.getElementsByTagName("body")[0].classList.remove("no-scroll");
   }
 };
 </script>