New Frontend in Vue with drf interface (#72)

* frontend rewrite with vie initial commit * got ComicCard.vue working nice. * got TheComicList.vue working. * added router and basic config * getting jwt stuff working. * login with jwt now working. * implemented browse api call * implemented browse api recievers * jwt token is now updating automatically. * removed code for jwt testing. * enabled browsing * breadcrumbs working * adding django webpack loader * linking up navigation * fixes for ComicCard.vue stying * added thumbnail view * added thumbnail generation and handling. * detached breadcrumbs * fix breadcrumbs * added first stages of reader * reader view is working. * reader is now working with keyboard shortcuts * implemented setting read page. * implemented pagination on comic reader. * hide elements that shouldn't be shown. * fixed the ComicCard.vue to use as little space as possible. * fix navbar browse link * added RecentView.vue and added manual option for breadcrumbs * updated rest api to handle recent comics. * most functionality of recent comics done * modified comicstatus relation to use uuid relation and implemented mark read and unread for batches. * added functions to TheRecentTable.vue * added feed link to TheRecentTable.vue * fixes for comicstatus updates. * added constraints to comicstatus * update to python packages. * some changes for django 4, also removed django-recaptcha2 as it doesnt support django 4. * some fixes and updates to ComicCard.vue * cleaned up generate_directory. fixed bug where pages not visible on first call. * cleaned up generate_directory. fixed bug where pages not visible on first call. * cleaned up generate_directory. fixed bug where pages not visible on first call. * cleaned up generate_directory. * added silk stubs * fix for re-requesting thumbnail after getting it already. * fix for removing stale comics. adding leeway to access token. * mark read and unread * added filtering to comic list. * stored filtering state. * stored filtering state. * added next functionality to login. * cleanup LoginView.vue * bump font-awesome. * working on AccountView.vue * fixed form submission on LoginView.vue * account page should now be working. * hide users option if not superuser. * added pdf support * make pdf resize. * added touch controls to pdf reader * added touch controls to comic reader * beginnings of routing between issues. * fixes for navigating pages. * fixes for navigating pages. * fixes for navigating pages. * renamed HomeView.vue to BrowseView.vue * stubs for users page added. api ready * users page further functinality * fix for notification * fix for notification * moved messages to parent. * form to add users * added error handling * removed console logging * classification in base directory should be lowest * renamed usermisc to classification to be more consistent with what it does. * renamed usermisc to classification to be more consistent with what it does. * added functionality to change classification of directories. * merged rss_id api into account api. * merged breadcrumbs api into browse api. * clears some warnings from console. * fixed read/unread rendering. * added build script and starting lint * fixing lint errors * fixing lint errors * fixing lint errors * fixing lint errors * fixing lint errors * fixing lint errors * fixing lint errors * fixing lint errors * fixing navigation bugs * cleanup and fixes * fixed generated tooltips over calling. * fixed classifications. * initial setup now working * fix navbar branding * fix favicon * added beta build script. * fixes to get ready for production * optimisations for loading new comics. * added loading indicators to TheComicList.vue * lint fixes * made two methods static. may use them elsewhere. * fix for scanning files. * version updates. * fixes for production * fixes for production Co-authored-by: Peter Dwyer <peter.dwyer@clanwilliamhealth.com>
2025-12-06 22:27:19 +00:00 · 2022-08-25 15:42:20 +01:00
parent 3be7d9cb5c
commit c5633bf54a
86 changed files with 25205 additions and 644 deletions
--- a/frontend/src/store/index.js
+++ b/frontend/src/store/index.js
@@ -0,0 +1,117 @@
+import { createStore } from 'vuex'
+import axios from 'axios'
+import jwtDecode from 'jwt-decode'
+import {useToast} from "vue-toast-notification";
+import router from "@/router";
+import api from "@/api";
+
+function get_jwt_from_storage(){
+  try {
+    return JSON.parse(localStorage.getItem('t'))
+  } catch {
+    return null
+  }
+}
+function get_user_from_storage(){
+  try {
+    return JSON.parse(localStorage.getItem('u'))
+  } catch {
+    return null
+  }
+}
+
+export default createStore({
+  state: {
+    jwt: get_jwt_from_storage(),
+    filters: {},
+    user: get_user_from_storage(),
+    classifications: [
+      {label: 'G', value: '0'},
+      {label: 'PG', value: '1'},
+      {label: '12', value: '2'},
+      {label: '15', value: '3'},
+      {label: '18', value: '4'},
+    ],
+  },
+  getters: {
+    is_superuser (state) {
+      if (state.user === null){
+        return false
+      } else {
+        return state.user.is_superuser
+      }
+    }
+  },
+  mutations: {
+    updateToken(state, newToken){
+      localStorage.setItem('t', JSON.stringify(newToken));
+      state.jwt = newToken;
+    },
+    logOut(state){
+      localStorage.removeItem('t');
+      localStorage.removeItem('u')
+      state.jwt = null;
+      state.user = null
+    },
+    updateUser(state, userData){
+      localStorage.setItem('u', JSON.stringify(userData));
+      state.user = userData
+    },
+  },
+  actions: {
+    obtainToken(context, {username, password}){
+      const payload = {
+        username: username,
+        password: password
+      }
+      axios.post('/api/token/', payload)
+        .then((response)=>{
+            context.commit('updateToken', response.data);
+            api.get('/api/account').then(response => {
+              context.commit('updateUser', response.data)
+            })
+            if ('next' in router.currentRoute.value.query) {
+              router.push(router.currentRoute.value.query.next)
+            } else {
+              router.push('/')
+            }
+
+          })
+        .catch((error)=>{
+            // console.log(error);
+            const $toast = useToast();
+            $toast.error(error.response.data.detail, {position:'top'});
+          })
+    },
+    refreshToken(){
+      const payload = {
+        refresh: this.state.jwt.refresh
+      }
+      return axios.post('/api/token/refresh/', payload)
+        .then((response)=>{
+            this.commit('updateToken', response.data)
+          })
+        .catch((error)=>{
+            console.log(error)
+            // router.push({name: 'login', query: {area: 'store'}})
+          })
+    },
+    inspectToken(){
+      const token = this.state.jwt;
+      if(token){
+        const decoded = jwtDecode(token);
+        const exp = decoded.exp
+        const orig_iat = decoded.iat
+        if(exp - (Date.now()/1000) < 1800 && (Date.now()/1000) - orig_iat < 628200){
+          this.dispatch('refreshToken')
+        } else if (exp -(Date.now()/1000) < 1800){
+          // DO NOTHING, DO NOT REFRESH
+        } else {
+          // PROMPT USER TO RE-LOGIN, THIS ELSE CLAUSE COVERS THE CONDITION WHERE A TOKEN IS EXPIRED AS WELL
+        }
+      }
+    }
+  },
+  modules: {
+  }
+})