style, template, clear console log, fix confilcs

frontend/src/App.vue

@@ -13,43 +13,12 @@
 export default {
    name: 'app',
     created () { 
-      if (this.$cookies.get('gdd_is_auth') == 'true' && this.$store.state.is_auth == true) {
+      if ( $cookies.isKey("gdd_session_id") == true  ) {
-        this.$store.state.user.email = this.$cookies.get('gdd_email')
+        this.$store.state.email = this.$cookies.get('gdd_u')
-      
-        // if ( this.$store.state.is_auth == false && this.$store.state.is_admin == false) {
-        //  this.$router.push("/Landing")
-        // }  else {
         this.$router.push('/KontoOverview') 
-        // }
       }else {
-       this.$router.push("/Landing")
+        this.$router.push("/Login")
       } 
-      
-      //var user = { id:1, name:'Journal',session:'25j_7Sl6xDq2Kc3ym0fmrSSk2xV2XkUkX' };
-      //this.$cookies.set('user',user);
-      //// print user name
-     //console.log("APP.vue START created get cookie is_auth=>",this.$cookies.get('gdd_is_auth'))
-     
-     },
-     methods: {
-       /*
-        login() {
-          //console.log("app.vue user login() : " + this.$store.state.is_auth)
-          this.$store.commit('login')
-          //this.$router.push('/KontoOverview')      
-        },
-        loginAsAdmin () {      
-         // console.log("app.vue admin login(): " + this.$store.state.is_admin)
-          this.$store.state.modals = true
-          //this.$store.commit('loginAsAdmin')
-          //this.$router.push('/AdminOverview')
-        },
-         
-        logout(){
-         // console.log("app.vue user logout() : ")
-          this.$store.commit('logout')
-        }       
-        */
     }
 }
 </script>

frontend/src/mixins/loginAPI.js

@@ -0,0 +1,19 @@
+// TODO move this
+const LOGIN_API_URL = 'http://localhost/login_api/'
+
+// define a mixin object
+const loginAPI = {
+  actions: {
+    login: async () => {
+      return axios.post(LOGIN_API_URL + 'unsecureLogin', data);
+    },
+    creatUser : async () => {
+      return axios.post(LOGIN_API_URL + 'createUser', data);
+    },     
+    logout: async () => {
+      return axios.post(LOGIN_API_URL + 'logout', data);
+    },
+  }
+}
+
+export default loginAPI

frontend/src/routes/router.js

@@ -26,22 +26,7 @@ router.beforeEach((to, from, next) => {
      if (!language) {
        language = 'de'
      }
-   
-  //console.log("----------------")
-  //("ROUTER.js to", to)
-  //console.log("ROUTER.js store.state.is_auth", store.state.is_auth)
-  //console.log("ROUTER.js store.commit('isActive')", store.commit('isActive'))
-  
-  //if (store.commit('isActive') ) {
-  //  next()
-  //} else {
-  //  next("/login")
-  //}
-  //console.log(from)
-  //console.log(next)
-
      next()  
-  
 })
 
 export default router

frontend/src/routes/routes.js

@@ -11,17 +11,21 @@ const routes = [
     redirect: 'landing',
     component: AuthLayoutGDD,
     children: [
+      {
+        path: '/login',
+        name: 'login',
+        component: () => import(/* webpackChunkName: "demo" */ '../views/Pages/Login.vue')
+      },
       {
         path: '/Landing',
         name: 'Landing',
         component: () => import(/* webpackChunkName: "demo" */ '../views/Landing.vue')
       },      
       {
-        path: '/login',
+        path: '/register',
-        name: 'login',
+        name: 'register',
-        component: () => import(/* webpackChunkName: "demo" */ '../views/Pages/Login.vue')
+        component: () => import(/* webpackChunkName: "demo" */ '../views/Pages/Register.vue')
       },
-      
     ]
   },
   {
@@ -41,12 +45,7 @@ const routes = [
         path: '/profile',
         name: 'profile',
         component: () => import(/* webpackChunkName: "demo" */ '../views/Pages/UserProfile.vue')
-      },
+      }
-      {
-        path: '/register',
-        name: 'register',
-        component: () => import(/* webpackChunkName: "demo" */ '../views/Pages/Register.vue')
-      },
     ]
   },
   ,

frontend/src/store/store.js

@@ -3,22 +3,25 @@ import Vuex from 'vuex'
 Vue.use(Vuex)
 import router from '../routes/router.js'
 import loginAPI from '../apis/loginAPI'
+import axios from 'axios'
 
 // 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/',
+    session_id: null,
-    is_auth: false,
+    email: null,
-    is_admin: false,
-    active: false,
-    modals: false,
     user : {
       name:"",
-      email:""
+      balance: 0
     },
-    dataLogout: {"session_id": -127182}*/
+    ajaxCreateData:  {
-    session_id: null,
+      session_id : '',
-    email: null
+      email: "max.musterman@gmail.de",
+      amount: 10000000,
+      target_date:"2021-02-19T13:25:36+00:00", 
+      memo:"AGE",
+      auto_sign: true
+    }
   },
   // Retrieve a state variable
   getters: {
@@ -48,6 +51,8 @@ export const store = new Vuex.Store({
         // TODO show user a success message
         commit('session_id', result.result.data.session_id)
         commit('email', data.email)
+        $cookies.set('gdd_session_id', result.result.data.session_id);
+        $cookies.set('gdd_u',  data.email);
         router.push('/KontoOverview')
       } else {
         // Register failed, we perform a logout
@@ -75,7 +80,137 @@ export const store = new Vuex.Store({
 
       commit('session_id', null)
       commit('email', null)  
-      router.push('/landing')
+      $cookies.remove('gdd_session_id');
+      $cookies.remove('gdd_u');
+      router.push('/Login')
+    },
+    ajaxCreate: async (state) => {
+      state.ajaxCreateData.session_id = state.session_id
+      console.log(" state.ajaxCreateData => ",  state.ajaxCreateData)
+      axios.post(" http://localhost/transaction-creations/ajaxCreate/", state.ajaxCreateData).then((req) => {
+        console.log("ajaxCreate => ", req)
+      }, (error) => { 
+        console.log(error);
+      });
+    },
+    ajaxListTransactions: async (state) => {
+     // console.log("ajaxListTransactions => START")
+      axios.get("http://localhost/state-balances/ajaxListTransactions/" + state.session_id).then((req) => {
+        console.log("ajaxListTransactions => ", req)
+      }, (error) => {
+        console.log(error);
+      });
+    },
+    accountBalance: async ({ state }) => {
+      //console.log(" => START")
+      state.url = "http://localhost/state-balances/ajaxGetBalance/" + state.session_id
+      //console.log(state.url)
+      axios.get(state.url).then((req) => {
+        console.log("accountBalance => ", req.data.balance)
+        state.user.balance = req.data.balance
+      }, (error) => {
+        console.log(error);
+      });
     }
   }  
 })
+
+/*
+ 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);
+        if (ldata.statusText === "OK") {          
+            //console.log("STORE login() ldatasession_id",  ldata.data.session_id)                
+            state.is_auth = true 
+            state.active = true
+             state.session_id= ldata.data.session_id
+            state.user.email = logindata.email
+            $cookies.set('gdd_is_auth','true');
+            $cookies.set('gdd_session_id', ldata.data.session_id);
+            $cookies.set('gdd_u',logindata.email);
+            console.log("cookie ? GRADIDO_LOGIN",  $cookies.get('GRADIDO_LOGIN'))  
+            //this.$store.dispatch('accountBalance')
+            //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)      
+    },
+    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;
+         router.push('/Login')
+         
+      }, (error) => {
+        console.log(error);
+      });
+    },     
+    logout(state){
+      axios.post("http://localhost/login_api/logout", {"session_id": state.session_id}).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
+        state.session_id = ''
+        state.user.email = ''
+        $cookies.set('gdd_is_auth','false');
+        $cookies.remove('gdd_u');
+        $cookies.remove('gdd_session_id');
+        router.push('/Login')
+      }, (error) => {
+        console.log(error);
+      });
+        
+    },
+    ajaxCreate(state){
+      state.ajaxCreateData.session_id = state.session_id
+      console.log(" state.ajaxCreateData => ",  state.ajaxCreateData)
+      axios.post(" http://localhost/transaction-creations/ajaxCreate/", state.ajaxCreateData).then((req) => {
+        console.log("ajaxCreate => ", req)
+      }, (error) => { 
+        console.log(error);
+      });
+    },
+    ajaxListTransactions(state) {
+      console.log("ajaxListTransactions => START")
+      axios.get("http://localhost/state-balances/ajaxListTransactions/"+ state.session_id).then((req) => {
+        console.log("ajaxListTransactions => ", req)
+      }, (error) => {
+        console.log(error);
+      });
+    },
+    accountBalance(state) {
+      console.log(" => START")
+      state.url = "http://localhost/state-balances/ajaxGetBalance/"+ state.session_id
+      console.log(state.url)
+      axios.get(state.url).then((req) => {
+        console.log("accountBalance => ", req.data.balance)
+        state.user.balance = req.data.balance
+      }, (error) => {
+        console.log(error);
+      });
+    }
+*/

frontend/src/views/KontoOverview.vue

@@ -30,11 +30,20 @@
        
       </div>
     </base-header>
+    <div @click="$store.dispatch('ajaxCreate')">this.$store.dispatch('ajaxCreate')</div>
+    <div @click="$store.dispatch('ajaxListTransactions')">this.$store.dispatch('ajaxListTransactions')</div>
+    <div @click="$store.dispatch('accountBalance')">this.$store.dispatch('accountBalance')</div> 
      <hr>
-    <h3>User Data</h3>
+    <h3>User Balanace</h3>
-    <small>/public/json-example/userdata.json</small>
+    <small>this.$store.state.user.balance</small>
     <p>
-      {{userdata}}
+       {{this.$store.state.user}}
+    </p>
+     <hr>
+    <h3>User Balanace</h3>
+    <small>this.$store.state.user.balance</small>
+    <p>
+      {{this.$store.state.user.balance}}
     </p>
 
  <hr>
@@ -80,6 +89,9 @@
         GddAddWork,
         GddWorkTable,
         //axios
+     },
+     created() {
+        
      },
      methods: {
          UserData() {

frontend/src/views/KontoOverview/GddStatus.vue

@@ -4,13 +4,12 @@
         <b-col xl="6" md="6">
           <stats-card :title="$t('site.overview.current_balance')"
                       type="gradient-red"
-                      sub-title="3500,897 GDD"
+                      sub-title="balance_gdd"
                       img="img/icons/gradido/my_gradido.png"
                       class="mb-4">
-
+                {{ balance_gdd }} GDD
             <template slot="footer">
-              <span class="text-success mr-2">+ 3.48%</span>
+              <span class="text-success mr-2">{{ balance_gtt }} GTT</span>
-              <span class="text-nowrap">{{ $t('site.overview.since_last_month') }}</span>
             </template>
           </stats-card>
         </b-col>
@@ -34,5 +33,11 @@
 <script>
 export default {
   name: 'GddStatus',
+  data(){
+    return {
+      balance_gdd: this.$store.state.user.balance,
+      balance_gtt: 2000,
+    }
+  }
 };
 </script>

frontend/src/views/Pages/Login.vue

@@ -1,13 +1,23 @@
 <template>
   <div>
     <!-- Header -->
-    <div class="header bg-gradient-success py-7 py-lg-8 pt-lg-9">
+    <div class="header bg-gradient-success py-7 py-lg-5 pt-lg-1">
-     
+         <b-container class="container">
+        <div class="header-body text-center mb-7">
+          <b-row class="justify-content-center">
+            <b-col xl="5" lg="6" md="8" class="px-5">
+              <h1 class="text-white">Gradido Wallet</h1>
+              <p class="text-lead text-white">Du bist die Community</p>
+            </b-col>
+          </b-row>
+        </div>
+      </b-container>
       <div class="separator separator-bottom separator-skew zindex-100">
         <svg x="0" y="0" viewBox="0 0 2560 100" preserveAspectRatio="none" version="1.1"
              xmlns="http://www.w3.org/2000/svg">
           <polygon class="fill-default" points="2560 0 2560 100 0 100"></polygon>
         </svg>
+        
       </div>
     </div>
     <!-- Page content -->
@@ -15,21 +25,12 @@
       <b-row class="justify-content-center">
         <b-col lg="5" md="7">
           <b-card no-body class="bg-secondary border-0 mb-0">
-             
-            <b-card-header class="pb-1"  >
-                <video width="450" height="300" autoplay loop>
-                  <source src="/img/brand/cube.webm" type="video/webm">                  
-                    Your browser does not support the video tag.  
-                </video>
-            </b-card-header>
             <b-card-body class="px-lg-5 py-lg-5">
+              
                 <div class="text-center text-muted mb-4">
-                <h2>Login Gradido Wallet</h2>
+                <small>login</small>
               </div>
-              <div class="text-center text-muted mb-4">
+               <validation-observer v-slot="{handleSubmit}" ref="formValidator">
-                <h4>Login Server 1</h4>
-              </div>
-              <!--<validation-observer v-slot="{handleSubmit}" ref="formValidator">
                 <b-form role="form" @submit.prevent="handleSubmit(onSubmit)">
                   <base-input alternative
                               class="mb-3"
@@ -55,7 +56,7 @@
                     <base-button type="primary" native-type="submit" class="my-4">Sign in</base-button>
                   </div>
                 </b-form>
-              </validation-observer> -->
+              </validation-observer>  
             </b-card-body>
           </b-card>
           <b-row class="mt-3">
@@ -84,8 +85,8 @@
     },
     methods: {    
       onSubmit() {
-        // this will be called only after form is valid. You can do api call here to login
+        this.$store.dispatch('login', {"email":  this.model.email, "password":  this.model.password})
+      }
     }
   }
-  };
 </script>

frontend/src/views/Pages/Register.vue

@@ -1,12 +1,12 @@
 <template>
   <div>
     <!-- Header -->
-    <div class="header bg-gradient-success py-7 py-lg-8 pt-lg-9">
+    <div class="header bg-gradient-success py-7 py-lg-5 pt-lg-1">
       <b-container class="container">
         <div class="header-body text-center mb-7">
           <b-row class="justify-content-center">
             <b-col xl="5" lg="6" md="8" class="px-5">
-              <h1 class="text-white">Erstelle eine Gradido Wallet</h1>
+              <h1 class="text-white">Erstelle deine Gradido Wallet</h1>
               <p class="text-lead text-white">Werde teil der Community</p>
             </b-col>
           </b-row>
@@ -25,23 +25,28 @@
       <b-row class="justify-content-center">
         <b-col lg="6" md="8" >
           <b-card no-body class="bg-secondary border-0">
-            <b-card-header class="bg-transparent pb-5">
-              <div class="text-muted text-center mt-2 mb-4"><small>Sign up with</small></div>
              
-            </b-card-header>
             <b-card-body class="px-lg-5 py-lg-5">
               <div class="text-center text-muted mb-4">
-                <small>Or sign up with credentials</small>
+                <small>sign up </small>
               </div>
               <validation-observer v-slot="{handleSubmit}" ref="formValidator">
                 <b-form role="form" @submit.prevent="handleSubmit(onSubmit)">
                   <base-input alternative
                               class="mb-3"
                               prepend-icon="ni ni-hat-3"
-                              placeholder="Name"
+                              placeholder="Vorname"
-                              name="Name"
+                              name="Vorname"
                               :rules="{required: true}"
-                              v-model="model.name">
+                              v-model="model.firstname">
+                  </base-input>
+                   <base-input alternative
+                              class="mb-3"
+                              prepend-icon="ni ni-hat-3"
+                              placeholder="Nachname"
+                              name="Nachname"
+                              :rules="{required: true}"
+                              v-model="model.lastname">
                   </base-input>
 
                   <base-input alternative
@@ -82,6 +87,17 @@
           </b-card>
         </b-col>
       </b-row>
+      <div class="text-center py-lg-5" >
+                    <b-button type="button" variant="success" class="mt-4" to="/Login">zurück</b-button>
+                  </div>
+
+                  <div>
+  <b-button v-b-modal.modal-1 variant="primary">Launch demo modal</b-button>
+
+  <b-modal id="modal-1" title="New message to undefined">
+    <p class="my-4">...</p>
+  </b-modal>
+</div>
     </b-container>
   </div>
 </template>
@@ -92,7 +108,8 @@
     data() {
       return {
         model: {
-          name: '',
+          firstname: '',
+          lastname: '',
           email: '',
           password: '',
           agree: false
@@ -101,10 +118,10 @@
     },
     methods: {
       onSubmit() {
-        // this will be called only after form is valid. You can do an api call here to register users
+       this.$store.dispatch('creatUser', {"email":this.model.email, "first_name":this.model.firstname, "last_name":this.model.lastname , "emailType": 2, "password":this.model.password})      
-      }
-    }
        
+      }
+    }
   };
 </script>
 <style></style>

login_server

@@ -1 +1 @@
-Subproject commit 2001d238ef312fd4136d0373543df3a5c252261b
+Subproject commit 9b9115290c8d2ead756d64b70ae63a6571aa4693