Merge pull request #12 from gradido/login_gbb

Login gbb

package.json

@@ -38,6 +38,7 @@
     "vue-cli-plugin-i18n": "^1.0.1",
     "vue-clickaway": "^2.2.2",
     "vue-clipboard2": "^0.3.0",
+    "vue-cookies": "^1.7.4",
     "vue-flatpickr-component": "^8.1.2",
     "vue-good-table": "^2.21.3",
     "vue-i18n": "^8.22.4",

src/App.vue

@@ -2,54 +2,54 @@
 <div id="app" class="font-sans text-gray-800">
     <header class="border-t-4 border-blue-700 bg-white z-10 absolute w-full shadow-md">     
     </header>
-    <div class="bg-gray-100 min-h-screen pt-40 text-lg">
+    <div class="bg-gray-100 min-h-screen pt-40 text-lg">     
-      <div style="text-align:center">
-       
-
-        <modal v-if="this.$store.state.modals"/>
-     
-
-       </div>
       <router-view />
     </div>
   </div> 
 </template>
 
 <script>
-import Modal from '@/components/Modal'
 
 export default {
    name: 'app',
-   component: {
-     Modal
-   },
-    data() {
-      return {
-        name: '',
-        nameState: null,
-        submittedNames: []
-      }
-    },
     created () { 
-      if ( this.$store.state.is_auth == false && this.$store.state.is_admin == false) {
+      if (this.$cookies.get('gdd_is_auth') == 'true' && this.$store.state.is_auth == true) {
-        this.$router.push("/Landing")
+        this.$store.state.user.email = this.$cookies.get('gdd_email')
-      }
+      
-    },
+        // if ( this.$store.state.is_auth == false && this.$store.state.is_admin == false) {
-    methods: {
+        //  this.$router.push("/Landing")
+        // }  else {
+         this.$router.push('/KontoOverview') 
+        // }
+     }else {
+       this.$router.push("/Landing")
+     } 
+      
+      //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)
+          //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)
+         // 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>

src/main.js

@@ -2,6 +2,7 @@ import Vue from 'vue';
 import DashboardPlugin from './plugins/dashboard-plugin';
 import App from './App.vue';
 import i18n from './i18n.js';
+import VueCookies from 'vue-cookies';
 
 // store
 import {store} from './store/store';
@@ -11,7 +12,8 @@ import router from './routes/router';
 
 // plugin setup
 Vue.use(DashboardPlugin);
-Vue.config.productionTip = false
+Vue.config.productionTip = false;
+Vue.use(VueCookies);
 
 
 /* eslint-disable no-new */

src/plugins/dashboard-plugin.js

@@ -31,7 +31,7 @@ import VueQrcodeReader from "vue-qrcode-reader";
 
 import VueGoodTablePlugin from 'vue-good-table';
 // import the styles
-import 'vue-good-table/dist/vue-good-table.css'
+import 'vue-good-table/dist/vue-good-table.css';
 
 
 Object.keys(rules).forEach(rule => {

src/routes/router.js

@@ -28,13 +28,15 @@ router.beforeEach((to, from, next) => {
      }
    
   //console.log("----------------")
-  console.log("to", to)
+  //("ROUTER.js to", to)
-  console.log("store.state.is_auth", store.state.is_auth)
+  //console.log("ROUTER.js store.state.is_auth", store.state.is_auth)
-  // if (store.state.is_auth != true && to.path != "/login" ) {
+  //console.log("ROUTER.js store.commit('isActive')", store.commit('isActive'))
-  //   next()
+  
-  // } else {
+  //if (store.commit('isActive') ) {
-  //   next("/login")
+  //  next()
-  // }
+  //} else {
+  //  next("/login")
+  //}
   //console.log(from)
   //console.log(next)
 

src/routes/routes.js

@@ -1,5 +1,6 @@
 import DashboardLayout from '@/views/Layout/DashboardLayout.vue'
-import AuthLayout from '@/views/Pages/AuthLayout.vue'
+import AuthLayoutGDD from '@/views/Layout/AuthLayout_gdd.vue'
+import AuthLayout from '@/views/Layout/AuthLayout.vue'
 
 import NotFound from '@/views/NotFoundPage.vue'
 
@@ -8,13 +9,18 @@ const routes = [
   {
     path: '/',
     redirect: 'landing',
-    component: AuthLayout,
+    component: AuthLayoutGDD,
     children: [
       {
         path: '/Landing',
         name: 'Landing',
         component: () => import(/* webpackChunkName: "demo" */ '../views/Landing.vue')
-      }
+      },
+      {
+        path: '/login',
+        name: 'login',
+        component: () => import(/* webpackChunkName: "demo" */ '../views/Pages/Login.vue')
+      },
       
     ]
   },
@@ -36,11 +42,6 @@ const routes = [
         name: 'profile',
         component: () => import(/* webpackChunkName: "demo" */ '../views/Pages/UserProfile.vue')
       },
-      {
-        path: '/login',
-        name: 'login',
-        component: () => import(/* webpackChunkName: "demo" */ '../views/Pages/Login.vue')
-      },
       {
         path: '/register',
         name: 'register',

src/store/store.js

@@ -1,6 +1,9 @@
 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';
 
 export const store = new Vuex.Store({
   state: {
@@ -10,37 +13,78 @@ export const store = new Vuex.Store({
     active: false,
     modals: false,
     user : {
-      name:"oger ly",
+      name:"",
-      email:"test@test.de"
+      email:""
-    }
+    },
+    dataLogout: {"session_id": -127182}
   },
-  mutations: {
+  mutations: {   
-    login (state) {
+    isActive(state) {
-      console.log("store login() user from " + state.is_auth)       
+      //("Im Store PRÜFEN PRÜFEN" )   
-      if (state.is_auth) { 
+      return true      
-        state.is_auth = false 
-        state.active = false
-      } else { 
-        state.is_auth = true 
-        state.active = true
-      }
-        console.log("store login() user to " + state.is_auth)      
     },
-    loginAsAdmin (state) {
+    login (state, logindata) {
-      console.log("store login admin from" + state.is_admin)
+      //console.log("Im Store LOGIN() start " )  
-      if (state.is_admin) { 
+      //console.log("logon state =>", state )  
-        state.is_admin = false 
+      //console.log("logon TEST =>", logindata )  
-        state.active = false
+      axios.post("http://localhost/login_api/unsecureLogin", logindata).then((ldata) => {
-      } else { 
+         
-        state.is_admin = true 
+        //console.log("Im Store LOGIN() axios then.statusText ", ldata.statusText);
-        state.active = true
+        if (ldata.statusText === "OK") {          
-      }
+          //console.log("STORE login() from" + state.is_auth)                
-      console.log("store login admin to" + state.is_admin)
+            state.is_auth = true 
+            state.active = true
+            $cookies.set('gdd_is_auth','true');
+            $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)      
     },
+    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);
+      });
+    },     
     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');
+        router.push('/Landing')
+      }, (error) => {
+        console.log(error);
+      });
+        
     }
   }
 })

src/views/AdminOverview.vue

@@ -290,7 +290,7 @@
     methods: {
      TransienceList() {
           axios.get("/json-example/admin_transience_list.json").then((d) => {
-          console.log(d);
+          //console.log(d);
           this.transiencelist = d.data;
           
         }, (error) => {
@@ -299,7 +299,7 @@
         },
      TransactionList() {
           axios.get("/json-example/admin_transaction_list.json").then((d) => {
-          console.log(d);
+          //console.log(d);
           this.transactionlist = d.data;
           
         }, (error) => {
@@ -308,7 +308,7 @@
         },
       UserList() {
           axios.get("/json-example/admin_userlist.json").then((d) => {
-          console.log(d);
+          //console.log(d);
           this.userlist = d.data;
           
         }, (error) => {
@@ -317,7 +317,7 @@
         },
       CommunityStatistic() {
           axios.get("/json-example/admin_community_statistic.json").then((d) => {
-          console.log(d);
+          //console.log(d);
           this.communitystatistic = d.data;
           
         }, (error) => {
@@ -326,7 +326,7 @@
         },
       ChartsStatistic() {
           axios.get("/json-example/admin_charts_statistic.json").then((d) => {
-          console.log(d);
+          //console.log(d);
           this.chartsstatistic = d.data;
           
         }, (error) => {
@@ -335,7 +335,7 @@
         },
       CardStatistic() {
           axios.get("/json-example/admin_card_statistic.json").then((d) => {
-          console.log(d);
+          //console.log(d);
           this.cardstatistic = d.data;
           
         }, (error) => {
@@ -344,7 +344,7 @@
         },
        StatisticDatas() {
           axios.get("/json-example/admin_statisticdatas.json").then((d) => {
-          console.log(d);
+          //console.log(d);
           this.userdata = d.data;
           
         }, (error) => {

src/views/Landing.vue

@@ -4,7 +4,9 @@
     <div class="header bg-gradient-info py-7 py-lg-8 pt-lg-9">
       <b-container>
         <div class="header-body text-center mb-7"> 
-          <b-row class="justify-content-center">
+          <p class="h1">GRADIDO</p>
+          <p class="h4">Wallet</p>
+          <!-- <b-row class="justify-content-center">
             <b-col xl="5" lg="6" md="6" class="px-5">
               <h1 class="text-light">Landing Gradido</h1>               
               <br>
@@ -14,7 +16,75 @@
                <br><br>
               <router-link to="/register" class="font-weight-bold text-white mt-5"> Register</router-link>
             </b-col>
+          </b-row> -->
+          <hr>
+          <p class="lead">
+            Anmelden
+          </p>
+
+            <b-row class="justify-content-center">
+            <b-col xl="5" lg="6" md="6" class="px-5">
+             <form @submit.prevent="login">
+ 
+                <b-row class="form-group">
+                  <label for="example-email-input" class="col-md-2 col-form-label form-control-label">Email</label>
+                  <b-col md="10">
+                    <base-input type="email" autocomplete="username email" placeholder="argon@example.com" v-model="lemail"/>
+                  </b-col>
+                </b-row>
+ 
+                <b-row class="form-group">
+                  <label for="example-password-input"
+                        class="col-md-2 col-form-label form-control-label">Password</label>
+                  <b-col md="10">
+                    <base-input type="password" autocomplete="current-password" placeholder="password" v-model="lpwd"/>
+                  </b-col>
+                </b-row>
+ 
+                <b-button block type="submit" >Anmelden</b-button>
+              </form>
+            </b-col>
           </b-row>
+
+      <hr>
+      <p class="lead">
+        neues Mitglied anlegen
+      </p>
+
+       <b-row class="justify-content-center">
+            <b-col xl="5" lg="6" md="6" class="px-5">
+             <form>
+              <b-row class="form-group">
+                <label class="col-md-2 col-form-label form-control-label">Vorname</label>
+                <b-col md="10">
+                  <base-input placeholder="Jon "  v-model="rfname"></base-input>
+                </b-col>
+              </b-row>
+              <b-row class="form-group">
+                <label class="col-md-2 col-form-label form-control-label">Nachname</label>
+                <b-col md="10">
+                  <base-input placeholder=" Snow"  v-model="rlname"></base-input>
+                </b-col>
+              </b-row>
+              <b-row class="form-group">
+                <label for="example-email-input" class="col-md-2 col-form-label form-control-label">Email</label>
+                <b-col md="10">
+                  <base-input type="email" autocomplete="username email" placeholder="argon@example.com" v-model="remail"/>
+                </b-col>
+              </b-row>
+            
+              <b-row class="form-group">
+                <label for="example-password-input"
+                      class="col-md-2 col-form-label form-control-label">Password</label>
+                <b-col md="10">
+                  <base-input type="password" autocomplete="current-password" placeholder="password" v-model="rpwd"/>
+                </b-col>
+              </b-row>            
+            </form>
+             <b-button block type="submit" @click="creatUser()">Anmelden</b-button>
+            </b-col>
+          </b-row>
+    
         </div>
       </b-container>
       <div class="separator separator-bottom separator-skew zindex-100">
@@ -24,32 +94,44 @@
       </div>
     </div>
     <!-- Page content -->
-    <section class="py-6">
+  
-      <b-container >
-        <b-row align-v="center" class="row-grid">
-          <b-col md="6">
-            <b-img src="img/theme/landing-1.png" fluid />
-          </b-col>
-          <b-col md="6">
-            <div class="pr-md-5">
-              <h1 class="text-light"> {{ $t('site.landing1.explore') }}</h1>
-              <p class="text-light">{{ $t('site.landing1.text') }}</p>
-              <router-link to="/user" class="font-weight-bold text-warning mt-5">{{ $t('site.landing1.link') }}</router-link>
-            </div>
-          </b-col>
-        </b-row>
-      </b-container>
-    </section>
   </div>
 </template>
 <script>
+// Components
+
 export default {
   name: 'Landing',
+  data(){
+    return {
+      lemail: '',
+      lpwd: '',
+      rfname: '',
+      rlname: '',
+      remail: '',
+      rpwd: ''
+    }
+  },
    methods: {
     login() {
-      console.log("app.vue user login() : " + this.$store.state.is_auth)
+      if (this.lemail != '' || this.lpwd != '') {
-      this.$store.commit('login')      
+      //console.log("landingpage login()  ")
-      this.$router.push('/KontoOverview')
+      //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')
+      
+    },
+     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')
       
     },
     loginAsAdmin () {      

src/views/Layout/AuthLayout_gdd.vue

@@ -0,0 +1,147 @@
+<template>
+  <div class="main-content bg-default">
+    
+     <template>
+        
+ 
+    <div class="main-content">
+        <router-view></router-view>
+    
+    </div>
+
+    <footer class="py-5" id="footer-main">
+      <b-container >
+        <b-row align-v="center" class="justify-content-xl-between">
+          <b-col xl="6">
+            <div class="copyright text-center text-xl-left text-muted">
+               © {{year}} <a href="https://gradido.net/" class="font-weight-bold ml-1" target="_blank">Gradido Wallet</a>
+            </div>
+          </b-col>
+          <b-col xl="6" class="col-xl-6">
+            <b-nav class="nav-footer justify-content-center justify-content-lg-end">
+              <b-nav-item ref="https://www.creative-tim.com" target="_blank">
+                Gradido
+              </b-nav-item>
+              <b-nav-item href="https://www.creative-tim.com/presentation" target="_blank">
+               Impressum
+              </b-nav-item>
+              <b-nav-item href="http://blog.creative-tim.com" target="_blank">
+                Datenschutzerklärung
+              </b-nav-item>
+              <b-nav-item href="https://www.creative-tim.com/license" target="_blank">
+                License
+              </b-nav-item>
+            </b-nav>
+          </b-col>
+        </b-row>
+      </b-container>
+    </footer>
+        </template>
+  </div>
+</template>
+<script>
+  import { BaseNav } from '@/components';
+  import { ZoomCenterTransition } from 'vue2-transitions';
+
+  export default {
+    components: {
+      BaseNav,
+      ZoomCenterTransition
+    },
+    props: {
+      backgroundColor: {
+        type: String,
+        default: 'black'
+      }
+    },
+    data() {
+      return {
+        showMenu: false,
+        menuTransitionDuration: 250,
+        pageTransitionDuration: 200,
+        year: new Date().getFullYear(),
+        pageClass: 'login-page'
+      };
+    },
+    computed: {
+      title() {
+        return `${this.$route.name} Page`;
+      }
+    },
+    methods: {
+      toggleNavbar() {
+        document.body.classList.toggle('nav-open');
+        this.showMenu = !this.showMenu;
+      },
+      closeMenu() {
+        document.body.classList.remove('nav-open');
+        this.showMenu = false;
+      },
+      setBackgroundColor() {
+        document.body.classList.add('bg-default');
+      },
+      removeBackgroundColor() {
+        document.body.classList.remove('bg-default');
+      },
+      updateBackground() {
+        if (!this.$route.meta.noBodyBackground) {
+          this.setBackgroundColor();
+        } else {
+          this.removeBackgroundColor()
+        }
+      }
+    },
+    beforeDestroy() {
+      this.removeBackgroundColor();
+    },
+    beforeRouteUpdate(to, from, next) {
+      // Close the mobile menu first then transition to next page
+      if (this.showMenu) {
+        this.closeMenu();
+        setTimeout(() => {
+          next();
+        }, this.menuTransitionDuration);
+      } else {
+        next();
+      }
+    },
+    watch: {
+      $route: {
+        immediate: true,
+        handler: function () {
+          this.updateBackground()
+        }
+      }
+    }
+  };
+</script>
+<style lang="scss">
+  $scaleSize: 0.8;
+  @keyframes zoomIn8 {
+    from {
+      opacity: 0;
+      transform: scale3d($scaleSize, $scaleSize, $scaleSize);
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+
+  .main-content .zoomIn {
+    animation-name: zoomIn8;
+  }
+
+  @keyframes zoomOut8 {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+      transform: scale3d($scaleSize, $scaleSize, $scaleSize);
+    }
+  }
+
+  .main-content .zoomOut {
+    animation-name: zoomOut8;
+  }
+</style>

src/views/Layout/DashboardLayout.vue

@@ -13,28 +13,15 @@
         </sidebar-item> 
         <sidebar-item
               :link="{
-                name: 'User Profile',
+                name: 'Profil',
                 path: '/profile',
                 icon: 'ni ni-single-02 text-yellow'
                 }">
         </sidebar-item>
-
+         <b-nav-item href="#!" @click="logout">
-        
+              <i class="ni ni-palette"></i>
-
+              <b-nav-text class="p-0">Logout</b-nav-text>
-        <sidebar-item
+          </b-nav-item>
-                  :link="{
-                    name: 'Login',
-                    path: '/login',
-                    icon: 'ni ni-key-25 text-info'
-                  }">
-        </sidebar-item>
-        <sidebar-item
-                  :link="{
-                    name: 'Register',
-                    path: '/register',
-                    icon: 'ni ni-circle-08 text-pink'
-                  }">
-        </sidebar-item>
       </template>
 
       <template slot="links-after">
@@ -110,7 +97,11 @@
         if (isWindows) {
           initScrollbar('sidenav');
         }
-      }
+      },
+       logout(){
+          //console.log("DashboardLayout.vue user logout() : ")
+          this.$store.commit('logout')
+        }  
     },
     mounted() {
       this.initScrollbar()

src/views/Layout/DashboardNavbar.vue

@@ -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">Grad Dido</span>
+              <span class="mb-0 text-sm  font-weight-bold">{{this.$store.state.user.email}}</span>
             </b-media-body>
           </b-media>
         </a>
@@ -68,7 +68,7 @@
             <span>{{ $t('site.navbar.support') }}</span>
           </b-dropdown-item>
           <div class="dropdown-divider"></div>
-          <b-dropdown-item href="#!">
+          <b-dropdown-item href="#!" @click="logout">
             <i class="ni ni-user-run"></i>
             <span>{{ $t('site.logout') }}</span>
           </b-dropdown-item>
@@ -118,7 +118,11 @@ export default {
     },
     closeDropDown() {
       this.activeNotifications = false;
-    }
+    },
+    logout(){
+      //console.log("DashboardNavbar.vue user logout() : ")
+      this.$store.commit('logout')
+    }  
   }
 };
 </script>

src/views/Pages/UserProfile.vue

@@ -9,7 +9,7 @@
         <b-container fluid class="d-flex align-items-center">
           <b-row >
             <b-col lg="7" md="10">
-              <h1 class="display-2 text-white">Hello Jesse</h1>
+              <h1 class="display-2 text-white">Hello {{this.$store.state.user.email}}</h1>
               <p class="text-white mt-0 mb-5">This is your profile page. You can see the progress you've made with your
                 work and manage your projects or assigned tasks</p>
               <a href="#!" class="btn btn-info">Edit profile</a>

src/views/Pages/UserProfile/UserCard.vue

@@ -38,7 +38,7 @@
       </b-row>
       <div class="text-center">
         <h5 class="h3">
-          Jessica Jones<span class="font-weight-light">, 27</span>
+         {{this.$store.state.user.email}}<span class="font-weight-light"></span>
         </h5>
         <div class="h5 font-weight-300">
           <i class="ni location_pin mr-2"></i>Bucharest, Romania

src/views/Starter/SampleLayout.vue

@@ -52,6 +52,7 @@ import DashboardContent from '../Layout/Content.vue';
 import { FadeTransition } from 'vue2-transitions';
 
 export default {
+  props: [],
   components: {
     DashboardNavbar,
     ContentFooter,