Merge pull request #12 from gradido/login_gbb

Login gbb
2025-12-13 07:45:54 +00:00 · 2021-02-23 15:10:18 +01:00 · 2021-02-23 15:10:18 +01:00 · d820caba3f
commit d820caba3f
parent b699cc6324 fff03aa7bd
16 changed files with 394 additions and 119 deletions
--- a/package.json
+++ b/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",
--- a/src/App.vue
+++ b/src/App.vue
@ -3,53 +3,53 @@
    <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 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) {
-        this.$router.push("/Landing")
-      }
-    },
-    methods: {
+      if (this.$cookies.get('gdd_is_auth') == 'true' && this.$store.state.is_auth == true) {
+        this.$store.state.user.email = this.$cookies.get('gdd_email')
+      
+        // 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")
+     } 
+      
+      //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>
--- a/src/main.js
+++ b/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 */
--- a/src/plugins/dashboard-plugin.js
+++ b/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 => {
--- a/src/routes/router.js
+++ b/src/routes/router.js
@ -28,13 +28,15 @@ router.beforeEach((to, from, next) => {
     }
   
  //console.log("----------------")
-  console.log("to", to)
-  console.log("store.state.is_auth", store.state.is_auth)
-  // if (store.state.is_auth != true && to.path != "/login" ) {
-  //   next()
-  // } else {
-  //   next("/login")
-  // }
+  //("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)

--- a/src/routes/routes.js
+++ b/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',
--- a/src/store/store.js
+++ b/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",
-      email:"test@test.de"
-    }
+      name:"",
+      email:""
+    },
+    dataLogout: {"session_id": -127182}
  },
  mutations: {   
-    login (state) {
-      console.log("store login() user 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() user to " + state.is_auth)      
+    isActive(state) {
+      //("Im Store PRÜFEN PRÜFEN" )   
+      return true      
    },
-    loginAsAdmin (state) {
-      console.log("store login admin from" + state.is_admin)
-      if (state.is_admin) { 
-        state.is_admin = false 
-        state.active = false
-      } else { 
-        state.is_admin = true 
-        state.active = true
-      }
-      console.log("store login admin to" + state.is_admin)
+    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.statusText);
+        if (ldata.statusText === "OK") {          
+          //console.log("STORE login() from" + state.is_auth)                
+            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);
+      });
+        
    }
  }
 })
--- a/src/views/AdminOverview.vue
+++ b/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) => {
--- a/src/views/Landing.vue
+++ b/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)
-      this.$store.commit('login')      
-      this.$router.push('/KontoOverview')
+      if (this.lemail != '' || this.lpwd != '') {
+      //console.log("landingpage login()  ")
+      //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 () {      
--- a/src/views/Layout/AuthLayout.vue
+++ b/src/views/Layout/AuthLayout.vue
--- a/src/views/Layout/AuthLayout_gdd.vue
+++ b/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>
--- a/src/views/Layout/DashboardLayout.vue
+++ b/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>
-
-        
-
-        <sidebar-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>
+         <b-nav-item href="#!" @click="logout">
+              <i class="ni ni-palette"></i>
+              <b-nav-text class="p-0">Logout</b-nav-text>
+          </b-nav-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()
--- a/src/views/Layout/DashboardNavbar.vue
+++ b/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,6 +118,10 @@ export default {
    },
    closeDropDown() {
      this.activeNotifications = false;
+    },
+    logout(){
+      //console.log("DashboardNavbar.vue user logout() : ")
+      this.$store.commit('logout')
    }  
  }
 };
--- a/src/views/Pages/UserProfile.vue
+++ b/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>
--- a/src/views/Pages/UserProfile/UserCard.vue
+++ b/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
--- a/src/views/Starter/SampleLayout.vue
+++ b/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,