ferfissimo
/
flaschengeist-frontend
forked from Flaschengeist/flaschengeist-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add function to change session lifetime

This commit is contained in:
Tim Gröger 2021-01-27 14:04:09 +01:00
parent 693b6a11d3
commit 69e68b92f9
2 changed files with 120 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
src/plugins/user/components/settings/Sessions.vue
View File

@ -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>

42
src/plugins/user/store/session.ts
View File

@ -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;