flaschengeist-frontend/src/plugins/user/store/user.ts

import { Module, MutationTree, ActionTree, GetterTree } from 'vuex';
import { StateInterface } from 'src/store';
import { axios } from 'boot/axios';
import { LoginData } from 'src/plugins/user/models';
import { AxiosResponse } from 'axios';
import { LocalStorage, Loading } from 'quasar';
import { Router } from 'src/router';

export interface Token {
  browser: string;
  expires: string;
  lifetime: number;
  platform: string;
  token: string;
}

export interface User {
  display_name: string | null;
  firstname: string;
  lastname: string;
  mail: string;
  roles: string[];
  userid: string;
}

export interface UserStateInterface extends LoginResponse {
  loginLoading: boolean;
}

export interface LoginResponse {
  permissions: string[];
  token: Token;
  user: User;
  userid: string;
}

const state: UserStateInterface = {
  permissions: [],
  token: { browser: '', expires: '', lifetime: -1, platform: '', token: '' },
  user: {
    display_name: '',
    firstname: '',
    lastname: '',
    mail: '',
    roles: [],
    userid: ''
  },
  loginLoading: false
};

const mutations: MutationTree<UserStateInterface> = {
  setPermissions(state, data: []) {
    state.permissions = data;
  },
  setToken(state, data: Token) {
    state.token = data;
  },
  setUser(state, data: User) {
    state.user = data;
  },
  setLoginLoading(state, data: boolean) {
    state.loginLoading = data;
  },
  showState(state) {
    console.log(state);
  }
};

const actions: ActionTree<UserStateInterface, StateInterface> = {
  login({ commit }, data: LoginData) {
    console.log('bla');
    commit('setLoginLoading', true);
    Loading.show({ message: 'Du wirst eingeloggt' });
    void axios
      .post('/auth', data)
      .then((response: AxiosResponse<LoginResponse>) => {
        commit('setPermissions', response.data.permissions);
        console.log('saved permisisons');
        commit('setToken', response.data.token);
        commit('setUser', response.data.user);
        commit('showState');
        LocalStorage.set('permissions', response.data.permissions);
        LocalStorage.set('token', response.data.token);
        LocalStorage.set('user', response.data.user);

        void Router.push({ name: 'user' });
      })
      .catch(error => {
        console.exception(error);
      })
      .finally(() => {
        commit('setLoginLoading', false);
        Loading.hide();
      });
  },
  loadFromLocalStorage({ commit }) {
    console.log('load from store');
    let data = LocalStorage.getItem('permissions');
    commit('setPermissions', data ? data : []);
    data = LocalStorage.getItem('token');
    commit(
      'setToken',
      data
        ? data
        : { browser: '', expires: '', lifetime: -1, platform: '', token: '' }
    );
    data = LocalStorage.getItem('user');
    commit(
      'setUser',
      data
        ? data
        : {
            display_name: '',
            firstname: '',
            lastname: '',
            mail: '',
            roles: [],
            userid: ''
          }
    );
    commit('showState');
  }
};

const getters: GetterTree<UserStateInterface, StateInterface> = {
  permissions({ permissions }) {
    return permissions;
  },
  token({ token }) {
    return token;
  },
  user({ user }) {
    return user;
  },
  loginLoading({ loginLoading }) {
    return loginLoading;
  }
};

const userStore: Module<UserStateInterface, StateInterface> = {
  namespaced: true,
  actions,
  getters,
  mutations,
  state
};

export default userStore;