src/plugins/user/components/settings/Sessions.vue

@@ -16,22 +16,42 @@
           {{ session.platform }}
         </div>
       </div>
-      <div class="row">
+      <div class="row" v-if="!isEdit">
         <div class="col-xs-12 col-sm-6">
           Lebenszeit:
           {{ session.lifetime }}
         </div>
         <div class="col-xs-12 col-sm-6">Läuft aus: {{ session.expires | dateTime(true) }}</div>
       </div>
+      <div class="row q-my-sm" v-else>
+        <q-input
+          class="col-xs-12 col-sm-6 q-px-sm"
+          v-model="computedLifetime"
+          type="number"
+          label="Zeit"
+          filled
+        />
+        <q-select
+          class="col-xs-12 col-sm-6 q-px-sm"
+          :options="options"
+          v-model="option"
+          filled
+        />
+      </div>
     </q-card-section>
-    <q-card-actions align="right">
+    <q-card-actions align="right" v-if="!isEdit">
+      <q-btn flat round dense icon="mdi-pencil" @click="edit(true)" />
       <q-btn flat round dense icon="mdi-delete" @click="deleteSession(session.token)" />
     </q-card-actions>
+    <q-card-actions align="right" v-else>
+      <q-btn flat dense label="Abbrechen" @click="edit(false)" />
+      <q-btn flat dense label="Speichern" @click="save" />
+    </q-card-actions>
   </q-card>
 </template>
 
 <script lang="ts">
-import { defineComponent } from '@vue/composition-api';
+import { defineComponent, ref, computed } from '@vue/composition-api';
 import { Store } from 'vuex';
 import { StateInterface } from 'src/store';
 
@@ -39,12 +59,14 @@ export default defineComponent({
   name: 'Sessions',
   props: {
     session: {
-      required: true
+      required: true,
-    }
     },
-  setup(_, { root }) {
+  },
+  setup(props: {session: FG.Session}, { root }) {
     const store = <Store<StateInterface>>root.$store;
-
+    const options = ref(['Minuten', 'Stunden', 'Tage']);
+    const option = ref<string>(options.value[0]);
+    const lifetime = ref(0);
     function getBrowserIcon(browser: string) {
       return browser == 'firefox'
         ? 'mdi-firefox'
@@ -70,7 +92,7 @@ export default defineComponent({
     }
 
     function deleteSession(token: string) {
-      store.dispatch('session/deleteSession', token).catch(error => {
+      store.dispatch('session/deleteSession', token).catch((error) => {
         console.warn(error);
       });
     }
@@ -78,12 +100,67 @@ export default defineComponent({
       return store.state.session.currentSession?.token === token;
     }
 
+    const isEdit = ref(false);
+
+    const computedLifetime = computed({
+      get: () => {
+        switch (option.value) {
+          case options.value[0]:
+            return (lifetime.value / 60).toFixed(2);
+          case options.value[1]:
+            return (lifetime.value / (60 * 60)).toFixed(2);
+          case options.value[2]:
+            return (lifetime.value / (60 * 60 * 24)).toFixed(2);
+        }
+      },
+      set: (val) => {
+        if (val) {
+          switch (option.value) {
+            case options.value[0]:
+              lifetime.value = parseFloat(val) * 60;
+              break;
+            case options.value[1]:
+              lifetime.value = parseFloat(val) * 60 * 60;
+              break;
+            case options.value[2]:
+              lifetime.value = parseFloat(val) * 60 * 60 * 24;
+              break;
+          }
+        }
+      },
+    });
+
+    function edit(value: boolean) {
+      lifetime.value = props.session.lifetime;
+      isEdit.value = value;
+    }
+
+    function save() {
+      console.log(lifetime.value);
+      isEdit.value = false;
+      void store
+        .dispatch(
+          'session/updateSession',
+          {lifetime: lifetime.value, token: props.session.token}
+        )
+        .catch((error) => {
+          console.log(error);
+        });
+    }
+
     return {
       getBrowserIcon,
       getPlatformIcon,
       isThisSession,
-      deleteSession
+      deleteSession,
+      isEdit,
+      edit,
+      options,
+      option,
+      lifetime,
+      computedLifetime,
+      save,
     };
-  }
+  },
 });
 </script>

src/plugins/user/store/session.ts

@@ -25,7 +25,7 @@ function loadCurrentSession() {
 const state: SessionInterface = {
   sessions: [],
   currentSession: loadCurrentSession() || undefined,
-  loading: false
+  loading: false,
 };
 
 const mutations: MutationTree<SessionInterface> = {
@@ -42,7 +42,13 @@ const mutations: MutationTree<SessionInterface> = {
   },
   setLoading(state, value: boolean) {
     state.loading = value;
+  },
+  updateSession(state, session: FG.Session) {
+    const index = state.sessions.findIndex((x) => x.token == session.token);
+    if (index > -1) {
+      state.sessions[index] = session;
     }
+  },
 };
 
 const actions: ActionTree<SessionInterface, StateInterface> = {
@@ -59,7 +65,7 @@ const actions: ActionTree<SessionInterface, StateInterface> = {
         commit('setCurrentSession', response.data.session);
         commit('user/setCurrentUser', response.data.user, { root: true });
         commit('user/setCurrentPermissions', response.data.permissions, {
-          root: true
+          root: true,
         });
       })
       .catch((error: AxiosError) => {
@@ -72,7 +78,7 @@ const actions: ActionTree<SessionInterface, StateInterface> = {
    */
   logout({ dispatch, rootState }) {
     if (rootState.session.currentSession) {
-      dispatch('deleteSession', rootState.session.currentSession.token).catch(error => {
+      dispatch('deleteSession', rootState.session.currentSession.token).catch((error) => {
         console.log(error);
         void dispatch('clearCurrent', false);
       });
@@ -91,7 +97,7 @@ const actions: ActionTree<SessionInterface, StateInterface> = {
         if (token === rootState.session.currentSession?.token) {
           void dispatch('clearCurrent', false);
         } else {
-          dispatch('getSessions').catch(error => {
+          dispatch('getSessions').catch((error) => {
             throw error;
           });
         }
@@ -110,7 +116,7 @@ const actions: ActionTree<SessionInterface, StateInterface> = {
     void Router.push({
       name: 'login',
       query: redirect ? { redirect: Router.currentRoute.fullPath } : {},
-      params: { logout: 'true' }
+      params: { logout: 'true' },
     }).then(() => {
       commit('clearCurrentSession');
       commit('user/clearCurrentUser', null, { root: true });
@@ -126,7 +132,7 @@ const actions: ActionTree<SessionInterface, StateInterface> = {
     axios
       .get('/auth')
       .then((response: AxiosResponse<FG.Session[]>) => {
-        response.data.forEach(session => {
+        response.data.forEach((session) => {
           session.expires = new Date(session.expires);
         });
         commit('setSessions', response.data);
@@ -137,13 +143,29 @@ const actions: ActionTree<SessionInterface, StateInterface> = {
           commit('setCurrentSession', currentSession);
         }
       })
-      .catch(error => {
+      .catch((error) => {
         throw error;
       })
       .finally(() => {
         commit('setLoading', false);
       });
   },
+  updateSession({ commit, state }, data: { lifetime: number; token: string }) {
+    commit('setLoading', true);
+    axios
+      .put(`auth/${data.token}`, { value: data.lifetime })
+      .then((response: AxiosResponse<FG.Session>) => {
+        response.data.expires = new Date(response.data.expires);
+        if (state.currentSession?.token == response.data.token) {
+          commit('setCurrentSession', response.data);
+        }
+      })
+      .catch((err) => console.log(err))
+      .finally(() => {
+        commit('setLoading', false);
+      });
+    console.log('updateSession', data);
+  },
   requestPasswordReset({}, data) {
     return axios.post('/auth/reset', data);
   },
@@ -151,7 +173,7 @@ const actions: ActionTree<SessionInterface, StateInterface> = {
     return axios.post('/auth/reset', data).catch((error: AxiosError) => {
       return Promise.reject(error.response);
     });
-  }
+  },
 };
 
 const getters: GetterTree<SessionInterface, StateInterface> = {
@@ -163,7 +185,7 @@ const getters: GetterTree<SessionInterface, StateInterface> = {
   },
   loading(state) {
     return state.loading;
-  }
+  },
 };
 
 const sessions: Module<SessionInterface, StateInterface> = {
@@ -171,7 +193,7 @@ const sessions: Module<SessionInterface, StateInterface> = {
   state,
   mutations,
   actions,
-  getters
+  getters,
 };
 
 export default sessions;