implemented store + api calls

This commit is contained in:
Ulf Gebhardt 2021-02-26 00:36:45 +01:00
parent d4530e2b41
commit 1960ce109c
No known key found for this signature in database
GPG Key ID: 81308EFE29ABFEBD
4 changed files with 71 additions and 96 deletions

View File

@ -1,13 +1,13 @@
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import axios from 'axios';
import VueCookies from 'vue-cookies';
import router from '../routes/router.js';
import router from '../routes/router.js'
import loginAPI from '../apis/loginAPI'
// TODO make persistent: https://translate.google.de/translate?hl=de&sl=en&u=https://sandulat.com/safely-persisting-vuex-store-in-local-storage/&prev=search&pto=aue
export const store = new Vuex.Store({
state: {
path: 'http://192.168.0.89/account/',
/*path: 'http://192.168.0.89/account/',
is_auth: false,
is_admin: false,
active: false,
@ -16,77 +16,65 @@ export const store = new Vuex.Store({
name:"",
email:""
},
dataLogout: {"session_id": -127182}
dataLogout: {"session_id": -127182}*/
session_id: null,
email: null
},
mutations: {
isActive(state) {
//("Im Store PRÜFEN PRÜFEN" )
return true
// Retrieve a state variable
getters: {
/*isActive: (state, getters) => {
return state.active;
}*/
},
// Syncronous mutation of the state
mutations: {
email: (state, email) => {
console.log('mutation: email')
state.email = email
},
login (state, logindata) {
//console.log("Im Store LOGIN() start " )
//console.log("logon state =>", state )
//console.log("logon TEST =>", logindata )
axios.post("http://localhost/login_api/unsecureLogin", logindata).then((ldata) => {
//console.log("Im Store LOGIN() axios then.statusText ", ldata.statusText);
if (ldata.statusText === "OK") {
console.log("STORE login() ldatasession_id", ldata.data.session_id)
state.is_auth = true
state.active = true
$cookies.set('gdd_is_auth','true');
$cookies.set('gdd_session_id', ldata.data.session_id);
$cookies.set('gdd_email',logindata.email);
state.user.email = logindata.email
//console.log("STORE login() to " + state.is_auth)
router.push('/KontoOverview')
}
return true
}, (error) => {
console.log(error);
});
//console.log("STORE login() from" + state.is_auth)
//if (state.is_auth) {
// state.is_auth = false
// state.active = false
//} else {
// state.is_auth = true
// state.active = true
//}
// console.log("STORE login() to " + state.is_auth)
session_id: (state,session_id) => {
console.log('mutation: session_id')
state.session_id = session_id
},
creatUser( state, formdata) {
//console.log("Im Store creatUser() start " )
axios.post("http://localhost/login_api/createUser", formdata).then((ldata) => {
console.log("Im Store creatUser() axios then ", ldata);
// this.ldata = ldata.data;
return true
}, (error) => {
console.log(error);
});
},
// Asyncronous actions - used for api calls
actions: {
login: async ({ dispatch, commit }, data) => {
console.log('action: login')
const result = await loginAPI.login(data.email,data.password)
console.log(result)
if( result.success ){
// We are not logged in, we need to do that manually.
// TODO show user a success message
commit('session_id', result.result.data.session_id)
commit('email', data.email)
router.push('/KontoOverview')
} else {
// Register failed, we perform a logout
dispatch('logout')
}
},
createUser: async ({ dispatch }, data) => {
console.log('action: createUser')
const result = await loginAPI.create(data.email,data.first_name,data.last_name,data.password)
if( result.success ){
// TODO We are not logged in, we need to do that manually.
// TODO show user a success message
} else {
// Register failed, we perform a logout
dispatch('logout')
}
},
logout(state){
axios.post("http://localhost/login_api/logout", this.dataLogout).then((ldata) => {
//console.log("Im Store logout() axios then ", ldata);
// this.ldata = ldata.data;
//return true
state.is_auth = false
state.is_admin = false
state.active = false
$cookies.set('gdd_is_auth','false');
$cookies.remove('gdd_email');
$cookies.remove('gdd_session_id');
router.push('/Landing')
}, (error) => {
console.log(error);
});
logout: async ({ commit , state }) => {
// Are we actually logged in?
if(state.session_id){
const result = await loginAPI.logout(state.session_id)
// The result can be error, but thats ok with us
}
commit('session_id', null)
commit('email', null)
router.push('/landing')
}
}
})

View File

@ -81,7 +81,7 @@
</b-col>
</b-row>
</form>
<b-button block type="submit" @click="creatUser()">Anmelden</b-button>
<b-button block type="submit" @click="createUser()">Anmelden</b-button>
</b-col>
</b-row>
@ -114,25 +114,12 @@ export default {
},
methods: {
login() {
if (this.lemail != '' || this.lpwd != '') {
//console.log("landingpage login() ")
//console.log("landingpage login() lemail ", this.lemail)
//console.log("landingpage login() lpwd ", this.lpwd)
this.$store.commit('login', {"email": this.lemail, "password": this.lpwd})
}
//this.$router.push('/KontoOverview')
//if (this.lemail !== '' || this.lpwd !== '') { // TODO this should be done via form validation
this.$store.dispatch('login', {email: this.lemail, password: this.lpwd})
//}
},
creatUser() {
console.log("landingpage creatUser() ")
console.log("landingpage login() remail ", this.remail)
console.log("landingpage login() rfname ", this.rfname)
console.log("landingpage login() rlname ", this.rlname)
console.log("landingpage login() rpwd ", this.rpwd)
this.$store.commit('creatUser', {"email":this.remail, "first_name":this.rfname, "last_name":this.rlname , "emailType": 2, "password":this.rpwd})
//this.$router.push('/KontoOverview')
createUser() {
this.$store.dispatch('createUser', {email:this.remail, first_name:this.rfname, last_name:this.rlname, password:this.rpwd})
},
loginAsAdmin () {
console.log("app.vue admin login(): " + this.$store.state.is_admin)

View File

@ -88,7 +88,7 @@
components: {
DashboardNavbar,
ContentFooter,
DashboardContent,
// DashboardContent,
FadeTransition
},
methods: {
@ -100,7 +100,7 @@
},
logout(){
//console.log("DashboardLayout.vue user logout() : ")
this.$store.commit('logout')
this.$store.dispatch('logout')
}
},
mounted() {

View File

@ -41,7 +41,7 @@
<img alt="Image placeholder" src="img/theme/team-4.jpg">
</span>
<b-media-body class="ml-2 d-none d-lg-block">
<span class="mb-0 text-sm font-weight-bold">{{this.$store.state.user.email}}</span>
<span class="mb-0 text-sm font-weight-bold">{{this.$store.state.email}}</span>
</b-media-body>
</b-media>
</a>
@ -84,9 +84,9 @@ import { BaseNav, Modal } from '@/components';
export default {
components: {
CollapseTransition,
// CollapseTransition,
BaseNav,
Modal
// Modal
},
props: {
type: {
@ -121,7 +121,7 @@ export default {
},
logout(){
//console.log("DashboardNavbar.vue user logout() : ")
this.$store.commit('logout')
this.$store.dispatch('logout')
}
}
};