From 907d344a26e1482694d9bb0f41ed836437264d74 Mon Sep 17 00:00:00 2001 From: Timo Volkmann Date: Tue, 26 Mar 2019 13:18:56 +0100 Subject: [PATCH] added error dialog --- frontend/quasar.conf.js | 6 ++- frontend/src/pages/Login.vue | 58 +++++++++++++++++++++------- frontend/src/store/auth/actions.js | 4 ++ frontend/src/store/auth/getters.js | 4 ++ frontend/src/store/auth/index.js | 12 ++++++ frontend/src/store/auth/mutations.js | 38 ++++++++++++++++++ frontend/src/store/auth/state.js | 7 ++++ frontend/src/store/index.js | 49 ++++++++++++----------- 8 files changed, 139 insertions(+), 39 deletions(-) create mode 100644 frontend/src/store/auth/actions.js create mode 100644 frontend/src/store/auth/getters.js create mode 100644 frontend/src/store/auth/index.js create mode 100644 frontend/src/store/auth/mutations.js create mode 100644 frontend/src/store/auth/state.js diff --git a/frontend/quasar.conf.js b/frontend/quasar.conf.js index 569ef43..ab65a8f 100644 --- a/frontend/quasar.conf.js +++ b/frontend/quasar.conf.js @@ -55,11 +55,13 @@ module.exports = function (ctx) { 'QTabPanel', 'QInput', 'QFab', - 'QFabAction' + 'QFabAction', + 'QDialog' ], directives: [ - 'Ripple' + 'Ripple', + 'ClosePopup' ], // Quasar plugins diff --git a/frontend/src/pages/Login.vue b/frontend/src/pages/Login.vue index 7df4cfa..a9fa432 100644 --- a/frontend/src/pages/Login.vue +++ b/frontend/src/pages/Login.vue @@ -44,7 +44,21 @@ - + + + +
Fehler
+ + + + Es konnten keine übereinstimmenden Zugangsdaten in der Datenbank gefunden werden. + + + + + + + diff --git a/frontend/src/store/auth/actions.js b/frontend/src/store/auth/actions.js new file mode 100644 index 0000000..4787a5f --- /dev/null +++ b/frontend/src/store/auth/actions.js @@ -0,0 +1,4 @@ +/* +export function someAction (context) { +} +*/ diff --git a/frontend/src/store/auth/getters.js b/frontend/src/store/auth/getters.js new file mode 100644 index 0000000..cc054a3 --- /dev/null +++ b/frontend/src/store/auth/getters.js @@ -0,0 +1,4 @@ +/* +export function someGetter (state) { +} +*/ diff --git a/frontend/src/store/auth/index.js b/frontend/src/store/auth/index.js new file mode 100644 index 0000000..b41a219 --- /dev/null +++ b/frontend/src/store/auth/index.js @@ -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 +} diff --git a/frontend/src/store/auth/mutations.js b/frontend/src/store/auth/mutations.js new file mode 100644 index 0000000..ffa7222 --- /dev/null +++ b/frontend/src/store/auth/mutations.js @@ -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; + }) +}; diff --git a/frontend/src/store/auth/state.js b/frontend/src/store/auth/state.js new file mode 100644 index 0000000..307952d --- /dev/null +++ b/frontend/src/store/auth/state.js @@ -0,0 +1,7 @@ +export default { + user: { + username: "moximoti", + password: "1234", + isAuthenticated: false + }, +} diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js index e8a81c7..dfbcdb1 100644 --- a/frontend/src/store/index.js +++ b/frontend/src/store/index.js @@ -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 +};