Authorization is now a cookie so removed localStorage code

Update some structure in how we request and save settings. Updated
Settings & Profile to reflect these changes.

src/components/Profile.vue

@@ -43,7 +43,7 @@ import Settings from "@/components/Settings";
 import Activity from "@/components/ActivityPage";
 import SeasonedButton from "@/components/ui/SeasonedButton";
 
-import { getEmoji, getUserRequests, getSettings } from "@/api";
+import { getEmoji, getUserRequests, getSettings, logout } from "@/api";
 
 export default {
   components: { ListHeader, ResultsList, Settings, Activity, SeasonedButton },
@@ -67,7 +67,7 @@ export default {
     }
   },
   methods: {
-    ...mapActions("user", ["logout", "updateSettings"]),
+    ...mapActions("user", ["logout", "setSettings"]),
     toggleSettings() {
       this.showSettings = this.showSettings ? false : true;
 
@@ -98,15 +98,17 @@ export default {
       this.updateQueryParams("activity", this.showActivity);
     },
     _logout() {
-      this.logout();
+      logout().then(() => {
-      this.$router.push("home");
+        this.logout();
+        this.$router.push("home");
+      });
     }
   },
   created() {
     if (!this.settings) {
       getSettings().then(resp => {
         const { settings } = resp;
-        if (settings) updateSettings(settings);
+        if (settings) this.setSettings(settings);
       });
     }
 

src/components/Settings.vue

@@ -13,16 +13,16 @@
           <form class="form">
             <seasoned-input
               placeholder="plex username"
-              icon="Email"
+              type="email"
               :value.sync="plexUsername"
             />
             <seasoned-input
               placeholder="plex password"
-              icon="Keyhole"
               type="password"
               :value.sync="plexPassword"
-              @submit="authenticatePlex"
+              @enter="authenticatePlex"
-            />
+            >
+            </seasoned-input>
 
             <seasoned-button @click="authenticatePlex"
               >link plex account</seasoned-button
@@ -80,7 +80,7 @@
 </template>
 
 <script>
-import { mapGetters, mapState, mapActions } from "vuex";
+import { mapGetters, mapActions } from "vuex";
 import storage from "@/storage";
 import SeasonedInput from "@/components/ui/SeasonedInput";
 import SeasonedButton from "@/components/ui/SeasonedButton";
@@ -104,18 +104,18 @@ export default {
     ...mapGetters("user", ["loggedIn", "plexId", "settings"])
   },
   methods: {
-    ...mapActions("user", ["login", "updateSettings"]),
+    ...mapActions("user", ["setSettings"]),
     changePassword() {
       return;
     },
     created() {
-      if (!this.settings) {
+      if (!this.settings) this.reloadSettings();
-        console.log("settings does not exists.", this.settings);
+    },
-        getSettings().then(resp => {
+    reloadSettings() {
-          const { settings } = resp;
+      return getSettings().then(response => {
-          if (settings) updateSettings(settings);
+        const { settings } = response;
-        });
+        if (settings) this.setSettings(settings);
-      }
+      });
     },
     async authenticatePlex() {
       let username = this.plexUsername;
@@ -123,6 +123,12 @@ export default {
 
       const { success, message } = await linkPlexAccount(username, password);
 
+      if (success) {
+        this.reloadSettings();
+        this.plexUsername = "";
+        this.plexPassword = "";
+      }
+
       this.messages.push({
         type: success ? "success" : "error",
         title: success ? "Authenticated with plex" : "Something went wrong",
@@ -132,6 +138,8 @@ export default {
     async unauthenticatePlex() {
       const response = await unlinkPlexAccount();
 
+      if (response.success) this.reloadSettings();
+
       this.messages.push({
         type: response.success ? "success" : "error",
         title: response.success
@@ -154,8 +162,14 @@ a {
 
 // DUPLICATE CODE
 .form {
-  > div:last-child {
+  > div,
-    margin-top: 1rem;
+  input,
+  button {
+    margin-bottom: 1rem;
+
+    &:last-child {
+      margin-bottom: 0px;
+    }
   }
 
   &__group {

src/modules/user.js

@@ -1,28 +1,51 @@
 import { refreshToken } from "@/api";
 import { parseJwt } from "@/utils";
 
-function setLocalStorageByKey(key, value) {
+function getCookie(name) {
-  if (value instanceof Object || value instanceof Array) {
+  console.debug("getting cookie with name:", name);
-    value = JSON.stringify(value);
+
+  var arrayb = document.cookie.split(";");
+  for (const item of arrayb) {
+    const query = `${name}=`;
+
+    if (!item.startsWith(query)) continue;
+    console.debug("found from cookies:", item);
+    return item.substr(query.length);
   }
-  const buff = Buffer.from(value);
+
-  const encodedValue = buff.toString("base64");
+  console.debug("no token found");
-  localStorage.setItem(key, encodedValue);
+  return null;
 }
 
-function getLocalStorageByKey(key) {
+function setCookie(name, value, options = {}) {
-  const encodedValue = localStorage.getItem(key);
+  options = {
-  if (encodedValue == null) {
+    path: "/",
-    return null;
+    // add other defaults here if necessary
-  }
+    ...options
-  const buff = new Buffer(encodedValue, "base64");
+  };
-  const value = buff.toString("utf-8");
 
-  try {
+  if (options.expires instanceof Date) {
-    return JSON.parse(value);
+    options.expires = options.expires.toUTCString();
-  } catch {
-    return value;
   }
+
+  let updatedCookie =
+    encodeURIComponent(name) + "=" + encodeURIComponent(value);
+
+  for (let optionKey in options) {
+    updatedCookie += "; " + optionKey;
+    let optionValue = options[optionKey];
+    if (optionValue !== true) {
+      updatedCookie += "=" + optionValue;
+    }
+  }
+
+  document.cookie = updatedCookie;
+}
+
+function deleteCookie(name) {
+  setCookie(name, "", {
+    "max-age": Date.now()
+  });
 }
 
 export default {
@@ -38,7 +61,7 @@ export default {
     settings: state => state.settings,
     token: state => state.token,
     loggedIn: state => state && state.username !== null,
-    admin: state => state && state.admin !== null,
+    admin: state => state.admin,
     plexId: state => {
       if (state && state.settings && state.settings.plex_userid)
         return state.settings.plex_userid;
@@ -55,32 +78,40 @@ export default {
       state.username = null;
       state.settings = null;
       state.admin = false;
-      localStorage.removeItem("token");
+      // deleteCookie('authorization');
     }
   },
   actions: {
-    initFromLocalStorage: async ({ dispatch }) => {
+    initUserFromCookie: async ({ dispatch }) => {
-      const token = getLocalStorageByKey("token");
+      const jwtToken = getCookie("authorization");
-      if (token) await dispatch("setupStateFromToken", token);
+      if (!jwtToken) return null;
 
-      const settings = getLocalStorageByKey("settings");
+      const token = parseJwt(jwtToken);
-      if (settings) await dispatch("setSettings", settings);
+      console.debug("has token: ", token);
+      return await dispatch("setupStateFromToken", token);
     },
     setupStateFromToken: ({ commit }, token) => {
       try {
-        const jwtData = parseJwt(token);
+        const { username, admin, settings } = token;
-        const { username, admin } = jwtData;
 
         if (!username) {
           return false;
         }
 
+        console.debug("setting:", {
+          username,
+          admin: admin != undefined,
+          settings,
+          token
+        });
+
         commit("SET_TOKEN", token);
         commit("SET_USERNAME", username);
-        commit("SET_ADMIN", admin != undefined ? true : false);
+        commit("SET_SETTINGS", settings);
+        commit("SET_ADMIN", admin != undefined);
         return true;
       } catch (error) {
-        console.log("Unable to parse JWT, failed with error:", error);
+        console.error("Unable to parse JWT, failed with error:", error);
         return false;
       }
     },
@@ -90,14 +121,8 @@ export default {
       }
 
       commit("SET_SETTINGS", settings);
-      setLocalStorageByKey("settings", settings);
     },
     logout: ({ commit }) => commit("LOGOUT"),
-    login: async ({ dispatch }, token) => {
+    login: async ({ dispatch }) => await dispatch("initUserFromCookie")
-      const loggedIn = await dispatch("setupStateFromToken", token);
-      if (loggedIn) setLocalStorageByKey("token", token);
-
-      return loggedIn;
-    }
   }
 };