added error dialog

frontend/quasar.conf.js

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

frontend/src/pages/Login.vue

@@ -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);
+            console.log("GET/POST http://localhost:8080/api/login/ - response: " + response.data);
-            this.user.token = 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);
+        console.log(localStorage.getItem('userToken'));
-        if (this.user.token === '') {
+        if (localStorage.getItem('userToken')) { // TODO hier muss Abfrage mit API, z.B. /api/user?token="ME" stattfinden.
-          this.user.isAuthenticated = false;
-        } else {
           this.user.isAuthenticated = true;
+        } else {
+          this.user.isAuthenticated = false;
         }
-        console.log(this.user.token);
       },
       logout: function () {
         console.log("logout()");
-        console.log(this.user.token);
+        console.log(localStorage.getItem('userToken'));
-        this.user.token = '';
+        localStorage.removeItem('userToken');
+        console.log(localStorage.getItem('userToken'));
         this.isAuthenticated()
-      }
+      },
     },
   };
 </script>

frontend/src/store/auth/actions.js

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

frontend/src/store/auth/getters.js

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

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
+}

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;
+      })
+};

frontend/src/store/auth/state.js

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

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({
+export default function (/* { ssrContext } */) {
-  state: {
+  const Store = new Vuex.Store({
-    caches: [],
+    modules: {
-    userToken: "",
+      auth
-    userAuthenticated: true
-  },
-  actions: {},
-  mutations: {
-    checkAuth(state) {
-      console.log("checkAuth()");
-      state.userAuthenticated = !state.userToken.isEmpty();
     },
-    setUserToken(state, token) {
+
-      console.log("setUserToken()");
+    // enable strict mode (adds overhead!)
-      state.userToken = token;
+    // for dev mode only
-      this.checkAuth(state);
+    strict: process.env.DEV
-    }
+  })
-  },
+
-  getters: {
+  /*
-    userToken: state => state.userToken,
+    if we want some HMR magic for it, we handle
-    userAuthenticated: state => state.userAuthenticated
+    the hot update like below. Notice we guard this
-  },
+    code with "process.env.DEV" -- so this doesn't
-  modules: {}
+    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
+};