tvolkmann/labswp_2019_sose_geocaching
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

added error dialog

Browse Source
This commit is contained in:
Timo Volkmann 2019-03-26 13:18:56 +01:00
parent 3527b681be
commit 907d344a26
8 changed files with 139 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/quasar.conf.js
View File

@ -55,11 +55,13 @@ module.exports = function (ctx) {
'QTabPanel',
'QInput',
'QFab',
'QFabAction'
'QFabAction',
'QDialog'
],
directives: [
'Ripple'
'Ripple',
'ClosePopup'
],
// Quasar plugins

58
frontend/src/pages/Login.vue
View File

@ -44,7 +44,21 @@
</div>
</div>
</form>
</div>
<q-dialog v-model="credentialsDialog" persistent transition-show="scale" transition-hide="scale">
<q-card class="bg-red-9 text-white" style="">
<q-card-section>
<div class="text-h6">Fehler</div>
</q-card-section>
<q-card-section>
Es konnten keine übereinstimmenden Zugangsdaten in der Datenbank gefunden werden.
</q-card-section>
<q-card-actions align="right" class="bg-white text-teal">
<q-btn flat label="OK" color="red-9" v-close-popup />
</q-card-actions>
</q-card>
</q-dialog> </div>
</template>
<script>
@ -54,12 +68,23 @@
user: {
username: "moximoti",
password: "1234",
token: "",
//token: "",
isAuthenticated: false
},
credentialsDialog: false,
};
},
// beforeMount: {
// init: function () {
// this.isAuthenticated();
// console.log("initiated");
// }
// },
mounted () {
this.isAuthenticated();
//this.pollData();
console.log("mounted: initiated");
},
methods: {
login: function () {
// const { username, password } = this;
@ -71,29 +96,34 @@
password: this.user.password
} //JSON.stringify(this.user);
console.log("GET http://localhost:8080/api/login/ - json: " + JSON.stringify(data));
this.$axios.post('http://localhost:8080/api/login', data)
this.$axios.post('http://localhost:8080/api/login', data) // TODO muss GET mit AUTH Header werden
.then((response) => {
console.log("GET http://localhost:8080/api/login/ - response: " + response.data);
this.user.token = response.data;
console.log("GET/POST http://localhost:8080/api/login/ - response: " + response.data);
//this.user.token = response.data;
localStorage.setItem('userToken', JSON.stringify(response));
this.isAuthenticated();
})
.catch((error) => {
console.log("error: " + error);
this.credentialsDialog=true;
})
},
isAuthenticated: function () {
console.log("isAuthenticated()");
console.log(this.user.token);
if (this.user.token === '') {
this.user.isAuthenticated = false;
} else {
console.log(localStorage.getItem('userToken'));
if (localStorage.getItem('userToken')) { // TODO hier muss Abfrage mit API, z.B. /api/user?token="ME" stattfinden.
this.user.isAuthenticated = true;
} else {
this.user.isAuthenticated = false;
}
console.log(this.user.token);
},
logout: function () {
console.log("logout()");
console.log(this.user.token);
this.user.token = '';
console.log(localStorage.getItem('userToken'));
localStorage.removeItem('userToken');
console.log(localStorage.getItem('userToken'));
this.isAuthenticated()
}
},
},
};
</script>

4
frontend/src/store/auth/actions.js Normal file
View File

@ -0,0 +1,4 @@
/*
export function someAction (context) {
}
*/

4
frontend/src/store/auth/getters.js Normal file
View File

@ -0,0 +1,4 @@
/*
export function someGetter (state) {
}
*/

12
frontend/src/store/auth/index.js Normal file
View File

@ -0,0 +1,12 @@
import state from './state'
import * as getters from './getters'
import * as mutations from './mutations'
import * as actions from './actions'
export default {
namespaced: true,
state,
getters,
mutations,
actions
}

38
frontend/src/store/auth/mutations.js Normal file
View File

@ -0,0 +1,38 @@
import axios from 'axios'
/*
export function someMutation (state) {
}
*/
export const evalAuth = (state) => {
console.log("isAuthenticated()");
console.log(localStorage.getItem('userToken'));
if (localStorage.getItem('userToken')) { // TODO hier muss Abfrage mit API, z.B. /api/user?token="ME" stattfinden.
state.user.isAuthenticated = true;
} else {
state.user.isAuthenticated = false;
}
};
export const logout = (state) => {
console.log("logout()");
console.log(localStorage.getItem('userToken'));
localStorage.removeItem('userToken');
console.log(localStorage.getItem('userToken'));
state.commit(evalAuth(state));
};
export const login = (state) => {
const data = {
username: state.user.username,
password: state.user.password
};
console.log("GET http://localhost:8080/api/login/ - json: " + JSON.stringify(data));
this.state.$axios.post('http://localhost:8080/api/login', data) // TODO muss GET mit AUTH Header werden
.then((response) => {
console.log("GET/POST http://localhost:8080/api/login/ - response: " + response.data);
localStorage.setItem('userToken', JSON.stringify(response));
state.commit(evalAuth(state));
})
.catch((error) => {
console.log("error: " + error);
//errorDialog = true;
})
};

7
frontend/src/store/auth/state.js Normal file
View File

@ -0,0 +1,7 @@
export default {
user: {
username: "moximoti",
password: "1234",
isAuthenticated: false
},
}

49
frontend/src/store/index.js
View File

@ -1,6 +1,7 @@
import Vue from "vue";
import Vuex from "vuex";
import Axios from "axios";
import auth from "./auth"
// import example from './module-example'
@ -25,27 +26,29 @@ Vue.use(Vuex, Axios);
// return Store;
// }
export default new Vuex.Store({
state: {
caches: [],
userToken: "",
userAuthenticated: true
},
actions: {},
mutations: {
checkAuth(state) {
console.log("checkAuth()");
state.userAuthenticated = !state.userToken.isEmpty();
export default function (/* { ssrContext } */) {
const Store = new Vuex.Store({
modules: {
auth
},
setUserToken(state, token) {
console.log("setUserToken()");
state.userToken = token;
this.checkAuth(state);
}
},
getters: {
userToken: state => state.userToken,
userAuthenticated: state => state.userAuthenticated
},
modules: {}
});
// enable strict mode (adds overhead!)
// for dev mode only
strict: process.env.DEV
})
/*
if we want some HMR magic for it, we handle
the hot update like below. Notice we guard this
code with "process.env.DEV" -- so this doesn't
get into our production build (and it shouldn't).
*/
if (process.env.DEV && module.hot) {
module.hot.accept(['./auth'], () => {
const newShowcase = require('./auth').default;
store.hotUpdate({ modules: { showcase: newShowcase } })
})
}
return Store
};