From 338a8a4107092e9bdb485fdcb3ca9f12305be33f Mon Sep 17 00:00:00 2001
From: paolo <paolo.arena77@gmail.com>
Date: Fri, 26 Oct 2018 22:25:35 +0200
Subject: [PATCH] Login e Token OK

---
 quasar.conf.js                          |  10 ++-
 src/components/Header.vue               |  10 ++-
 src/components/layout/drawer/drawer.vue |  41 +++++----
 src/components/views/AuthSuccess.vue    |   4 -
 src/components/views/login/signin.vue   |  28 ++++--
 src/components/views/login/signup.vue   |  33 +++++--
 src/components/views/login/vreg.vue     |   7 ++
 src/i18n.js                             |  24 ++++-
 src/index.template.html                 |   1 +
 src/pages/Index.vue                     |   6 +-
 src/store/modules/user.js               | 114 ++++++++++++++++--------
 11 files changed, 196 insertions(+), 82 deletions(-)

diff --git a/quasar.conf.js b/quasar.conf.js
index ebb2af3..b949ef3 100644
--- a/quasar.conf.js
+++ b/quasar.conf.js
@@ -82,6 +82,8 @@ module.exports = function (ctx) {
         'QCollapsible',
         'QCheckbox',
         'QAlert',
+        'QInnerLoading',
+        'QSpinnerGears',
 
       ],
       directives: [
@@ -89,8 +91,14 @@ module.exports = function (ctx) {
       ],
       // Quasar plugins
       plugins: [
-        'Notify', 'ActionSheet'
+        'Notify', 'ActionSheet', 'Loading'
       ],
+      config: {
+        // optional (v0.17+)
+        loading: {
+          // Loading defaults
+        }
+      },
       //iconSet: ctx.theme.mat ? 'material-icons' : 'ionicons',
       iconSet: 'fontawesome',
       //iconSet: 'roboto-font',
diff --git a/src/components/Header.vue b/src/components/Header.vue
index feb0b03..fa06a24 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -25,10 +25,12 @@
 
                 <q-select class="sel_lang" v-model="lang" stack-label="" :options="selectOpLang"/>
 
+                <!--<message-popover></message-popover>-->
+
+                <!--
                 <div class="right-itens">
-                    <!--<message-popover></message-popover>-->
                     <label>{{ $t('msg.hello') }}</label> <span v-model="prova"></span> !
-                </div>
+                </div>-->
 
 
             </q-toolbar>
@@ -57,7 +59,9 @@
 
   import user from '../store/modules/user';
 
-  import {mapGetters} from 'vuex'
+  import * as types from '../store/mutation-types'
+
+  import {mapGetters, mapActions} from 'vuex'
 
   export default {
     components: {
diff --git a/src/components/layout/drawer/drawer.vue b/src/components/layout/drawer/drawer.vue
index 5eb5aad..30b1899 100644
--- a/src/components/layout/drawer/drawer.vue
+++ b/src/components/layout/drawer/drawer.vue
@@ -1,18 +1,19 @@
 <template>
     <div>
-        <div id="profile">
+        <div id="profile" v-if="getUsername">
             <img :src="photo" style='height: 80px' class="inline-block">
             <img src="../img/avatar-1.svg" id="avatar" class="inline-block">
             <div id="user-name">
-                <span class="text-white"> Username: {{ getUsername }} </span>
-                <hr>
-                <span class="text-white"> {{ email }} </span>
+                <span class="text-white"> {{ getUsername }} </span>
                 <hr>
+                <span class="text-white" v-if="getVerificato"> {{$t('reg.verificato')}} </span>
+                <span class="text-white" v-else> {{$t('reg.non_verificato')}} </span>
+                <span class="text-white"> {{ getEmail }} </span>
             </div>
             <div id="user-actions">
-                <button class="bordered blue small"><i>person</i></button>
-                <button class="bordered blue small"><i>lock</i></button>
-                <button class="bordered blue small" @click='logOut'><i>exit_to_app</i></button>
+                <q-btn round color="primary" icon="person"></q-btn>
+                <q-btn round color="warning" icon="lock"></q-btn>
+                <q-btn round color="secondary" icon="exit_to_app" @click='logoutHandler'></q-btn>
             </div>
         </div>
 
@@ -20,27 +21,24 @@
         <menu-two v-else :links="links"></menu-two>
 
         <div class="fixed-bottom text-center light text-italic">
-            Powered by
-            <a href="https://vuejs.org/"><img src="../img/vue-logo.png" alt=""></a>
-            <a href="http://quasar-framework.org/"><img src="../img/quasar-logo.png" alt=""></a>
+            Powered by Perseo
         </div>
 
     </div>
 </template>
 <script type="text/javascript">
-  import {mapGetters} from 'vuex'
   import menuOne from './menuOne.vue'
   import menuTwo from './menuTwo.vue'
-  //import firebase from 'firebase'
+
+  import * as types from '../../../store/mutation-types'
+
+  import {mapGetters, mapActions} from 'vuex'
 
   export default {
     data() {
       return {
         photo: '',
-        userId: '',
-        name: '',
-        email: '',
-        user: {},
+        user: null,
         links: {
           Dashboard: {
             routes: [
@@ -71,7 +69,6 @@
       }
     },
     created() {
-      console.log("CREA DRAWER!!!!!!!!")
       var vm = this
       /*firebase.auth().onAuthStateChanged(function (user) {
         if (user) {
@@ -83,14 +80,16 @@
         }
       })*/
     },
-    methods: {
-      logOut() {
-        //firebase.auth().signOut()
+    methods:{
+      ...mapActions("user", ["logout"]),
+      logoutHandler() {
+        this.logout({router: this.$router});
+        this.$q.notify(this.$t('logout.uscito'));
       }
     },
     computed: {
       ...mapGetters("glob", ['getLayoutNeeded', 'getMenuCollapse']),
-      ...mapGetters("user", ['getUsername'])
+      ...mapGetters("user", ['getUsername', 'getVerificato', 'getEmail']),
     },
     components: {
       menuOne,
diff --git a/src/components/views/AuthSuccess.vue b/src/components/views/AuthSuccess.vue
index a54ad9b..854342e 100644
--- a/src/components/views/AuthSuccess.vue
+++ b/src/components/views/AuthSuccess.vue
@@ -27,9 +27,5 @@
     created () {
 
     },
-    methods: {
-      logOut () {
-      }
-    }
   }
 </script>
diff --git a/src/components/views/login/signin.vue b/src/components/views/login/signin.vue
index 3d87b4a..d402848 100644
--- a/src/components/views/login/signin.vue
+++ b/src/components/views/login/signin.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <q-page padding class="">
+        <q-page padding class="signin">
             <div class="text-center">
                 <p>
                     <!--<img src="../../../assets/quasar-logo-full.svg">-->
@@ -63,6 +63,8 @@
   import {serv_constants} from "../../../store/modules/serv_constants";
   import axios from 'axios';
 
+  import {Loading, QSpinnerFacebook, QSpinnerGears} from 'quasar'
+
 
   export default {
     data() {
@@ -100,6 +102,9 @@
       ...mapActions("user", {
         signin: types.USER_SIGNIN,
       }),
+      showNotif (msg) {
+        this.$q.notify(msg)
+      },
       errorMsg(cosa, item) {
         try {
           if (!item.$error) return '';
@@ -116,12 +121,13 @@
       checkErrors(riscode) {
         //console.log("RIS = " + riscode);
         if (riscode === Errori_MongoDb.OK) {
+          this.showNotif({type: 'positive', message: this.$t('login.completato')});
           this.$router.push('/');
-        }else if (riscode === serv_constants.RIS_CODE_LOGIN_ERR) {
-          this.$q.notify(this.$t('login.errato'));
+        } else if (riscode === serv_constants.RIS_CODE_LOGIN_ERR) {
+          this.showNotif(this.$t('login.errato'));
           this.$router.push('/signin');
         } else {
-          this.$q.notify("Errore num " + riscode);
+          this.showNotif("Errore num " + riscode);
         }
 
       },
@@ -129,21 +135,33 @@
         this.$v.form.$touch();
 
         if (this.$v.form.$error) {
-          this.$q.notify(this.$t('reg.err.errore_generico'));
+          this.showNotif(this.$t('reg.err.errore_generico'));
           return
         }
 
+        this.$q.loading.show({message: this.$t('login.incorso')});
+
         console.log(this.form);
         this.signin(this.form)
           .then((riscode) => {
             this.checkErrors(riscode);
+            this.$q.loading.hide();
           }).catch(error => {
           console.log("ERROR = " + error);
+          this.$q.loading.hide();
         });
 
+
         // ...
       }
     },
   }
 </script>
 
+<style scoped>
+    .signin {
+        width: 100%;
+        margin: 0 auto;
+        max-width: 450px;
+    }
+</style>
diff --git a/src/components/views/login/signup.vue b/src/components/views/login/signup.vue
index 87329e9..37c0b2c 100644
--- a/src/components/views/login/signup.vue
+++ b/src/components/views/login/signup.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <q-page padding class="">
+        <q-page padding class="signup">
             <div class="text-center">
                 <p>
                     <!--<img src="../../../assets/quasar-logo-full.svg">-->
@@ -81,10 +81,13 @@
                 />
             </q-field>
 
+            <br>
+
             <div align="center">
                 <q-btn rounded size="lg" color="primary" @click="submit" :disable="$v.$error">{{$t('reg.submit')}}
                 </q-btn>
             </div>
+
         </q-page>
     </div>
 </template>
@@ -107,6 +110,8 @@
   import {Errori_MongoDb} from '../../../store/modules/user'
   import axios from 'axios';
 
+  import {Loading, QSpinnerFacebook, QSpinnerGears} from 'quasar'
+
 
   export default {
     data() {
@@ -178,6 +183,9 @@
       ...mapActions("user", {
         signup: types.USER_SIGNUP,
       }),
+      showNotif(msg) {
+        this.$q.notify(msg)
+      },
       errorMsg(cosa, item) {
         try {
           if (!item.$error) return '';
@@ -209,13 +217,13 @@
       checkErrors(riscode) {
         //console.log("RIS = " + riscode);
         if (riscode === Errori_MongoDb.DUPLICATE_EMAIL_ID) {
-          this.$q.notify(this.$t('reg.err.duplicate_email'));
+          this.showNotif(this.$t('reg.err.duplicate_email'));
         } else if (riscode === Errori_MongoDb.DUPLICATE_USERNAME_ID) {
-          this.$q.notify(this.$t('reg.err.duplicate_username'));
+          this.showNotif(this.$t('reg.err.duplicate_username'));
         } else if (riscode === Errori_MongoDb.OK) {
           this.$router.push('/');
         } else {
-          this.$q.notify("Errore num " + riscode);
+          this.showNotif("Errore num " + riscode);
         }
 
       },
@@ -226,25 +234,38 @@
         this.duplicate_username = false;
 
         if (!this.form.terms) {
-          this.$q.notify(this.$t('reg.err.terms'));
+          this.showNotif(this.$t('reg.err.terms'));
           return
         }
 
         if (this.$v.form.$error) {
-          this.$q.notify(this.$t('reg.err.errore_generico'));
+          this.showNotif(this.$t('reg.err.errore_generico'));
           return
         }
 
+        this.$q.loading.show({message: this.$t('reg.incorso')});
+
         console.log(this.form);
         this.signup(this.form)
           .then((riscode) => {
             this.checkErrors(riscode);
+            this.$q.loading.hide();
           }).catch(error => {
           console.log("ERROR = " + error);
+          this.$q.loading.hide();
         });
 
+
         // ...
       }
     },
   }
 </script>
+
+<style scoped>
+    .signup {
+        width: 100%;
+        margin: 0 auto;
+        max-width: 450px;
+    }
+</style>
diff --git a/src/components/views/login/vreg.vue b/src/components/views/login/vreg.vue
index 8825a3b..e5ead31 100644
--- a/src/components/views/login/vreg.vue
+++ b/src/components/views/login/vreg.vue
@@ -65,6 +65,13 @@
           this.risultato = ris.msg;
           console.log("RIS = ");
           console.log(ris);
+
+          if (this.verificatook) {
+            setTimeout(() => {
+              this.$router.replace('/');
+            }, 3000)
+          }
+
         }).catch((err) => {
           console.log("ERR = " + err);
         });
diff --git a/src/i18n.js b/src/i18n.js
index c998bfd..4f3883d 100644
--- a/src/i18n.js
+++ b/src/i18n.js
@@ -6,14 +6,17 @@ const messages = {
       myDescriz: 'La prima App Libera e per Tutti'
     },
     reg: {
+      incorso: 'Registrazione in corso...',
       richiesto: 'Campo Richiesto',
       email: 'Email',
       username : 'Nome Utente',
       password: 'Password',
       repeatPassword: 'Ripeti password',
-      terms: "Accetti i termini e le condizioni?",
+      terms: "Accetto i termini e le condizioni",
       submit: "Registrati",
       title_verif_reg: "Verifica Registrazione",
+      verificato: "Verificato",
+      non_verificato: "Non Verificato",
       err: {
         required: 'è richiesto',
         email: 'dev\'essere una email valida',
@@ -28,9 +31,14 @@ const messages = {
       }
     },
     login:{
+      incorso: 'Login in corso',
       enter: 'Login',
       errato: "Username o password errata. Riprovare",
-    }
+      completato: 'Login effettuato!',
+    },
+    logout:{
+      uscito: 'Sei Uscito',
+    },
   },
   enUs: {
     msg: {
@@ -39,14 +47,17 @@ const messages = {
       myDescriz: 'The first Free app for Everyone'
     },
     reg: {
+      incorso: 'Registration please wait...',
       richiesto: 'Field Required',
       email: 'Email',
       username : 'Username',
       password: 'Password',
       repeatPassword: 'Repeat password',
-      terms: "Do you agree with the terms & conditions?",
+      terms: "I agree with the terms and conditions",
       submit: "Submit",
       title_verif_reg: "Verify Registration",
+      verificato: "Verified",
+      non_verificato: "Not Verified",
       err: {
         required: 'is required',
         email: 'must be a valid email',
@@ -61,9 +72,14 @@ const messages = {
       }
     },
     login:{
+      incorso: 'Login...',
       enter: 'Login',
       errato: "Username or password wrong. Please retry again",
-    }
+      completato: 'Login successfully!',
+    },
+    logout:{
+      uscito: 'Logout successfully',
+    },
   },
 };
 
diff --git a/src/index.template.html b/src/index.template.html
index 865b6b4..9af684c 100644
--- a/src/index.template.html
+++ b/src/index.template.html
@@ -15,6 +15,7 @@
     <link rel="icon" type="image/png" sizes="16x16" href="statics/icons/favicon-16x16.png">
     <script defer src="js/material.min.js"></script>
     <link type="text/css" rel="stylesheet" href="statics/firebaseui.css" />
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 
 </head>
 <body>
diff --git a/src/pages/Index.vue b/src/pages/Index.vue
index 1f9c82c..c8945a0 100644
--- a/src/pages/Index.vue
+++ b/src/pages/Index.vue
@@ -14,11 +14,11 @@
             <br>Conta = {{ getConta }}
         </q-field>
 
-        <q-btn
+        <!--<q-btn
                 @click="showNotification"
                 color="primary"
                 label="Mostra notifica"
-        />
+        />-->
 
         <q-card id="mycard" class="mycard" :style="mystilecard">
             <q-card-title>
@@ -171,7 +171,7 @@
       console.log('created...');
       this.initprompt();
       //this.test();
-      this.test_fetch();
+      //this.test_fetch();
     }
   }
 </script>
diff --git a/src/store/modules/user.js b/src/store/modules/user.js
index 8a70df4..c9207c9 100644
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
@@ -1,7 +1,6 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 
-
 var bcrypt = require('bcryptjs');
 
 Vue.use(Vuex);
@@ -18,6 +17,14 @@ function getlang() {
     return process.env.LANG_DEFAULT
 }
 
+function getTok(state) {
+  if (typeof state.user.tokens[0] !== 'undefined')
+    return state.user.tokens[0].token;
+  else
+    return '';
+}
+
+
 export const Errori_MongoDb = {
   CALLING: 10,
   OK: 20,
@@ -37,6 +44,9 @@ export const state = {
     ripetipassword: '',
     dateofbirth: '',
 
+    idToken: 0,
+    userId: 0,
+
     tokens: [{
       access: '',
       token: ''
@@ -46,24 +56,20 @@ export const state = {
   },
   userServer: null,
   servercode: 0,
-  idToken: 0,
-  userId: 0,
-  username: '',
 };
 
-function sendRequest(url, method, mydata) {
+function sendRequest(state, url, method, mydata) {
   console.log("LANG " + getlang());
+  var mytok = getTok(state);
   const options = {
     method: method,
     //mode: 'no-cors',
-    headers: new Headers({'content-type': 'application/json', 'x-auth': '', 'accept-language': getlang()}),
+    headers: new Headers({'content-type': 'application/json', 'x-auth': mytok, 'accept-language': getlang()}),
     cache: "no-cache",
     body: JSON.stringify(mydata),
   };
 
-  if (true) {
-    return fetch(url, options);
-  }
+  return fetch(url, options);
 
 };
 
@@ -76,7 +82,10 @@ export const getters = {
   getServerCode: state => state.servercode,
   getLang: state => state.user.lang,
 
-  getUsername: state => state.username,
+  getEmail: state => state.user.email,
+  getUsername: state => state.user.username,
+  getVerificato: state => state.user.verified_email,
+  getTok: state => getTok(state),
 };
 
 
@@ -101,11 +110,13 @@ export const mutations = {
     state.username = payload;
   },
 
-  authUser(state, username, userid, mytoken) {
-    state.username = username;
-    state.userId = userid;
-    state.idToken = mytoken;
-    state.user.tokens.push({access: "auth", token: mytoken});
+  authUser(state, data) {
+    state.user.username = data.username;
+    state.user.userId = data.userid;
+    state.user.idToken = data.mytoken;
+    state.user.verified_email = data.verified_email;
+    state.user.tokens = [];
+    state.user.tokens.push({access: "auth", token: data.mytoken});
   },
   setUser(state, user) {
     state.userServer = user
@@ -115,9 +126,11 @@ export const mutations = {
     state.servercode = servercode;
   },
   clearAuthData(state) {
-    state.tokens = [];
-    state.idToken = null;
-    state.userId = null;
+    state.user.username = null;
+    state.user.tokens = [];
+    state.user.idToken = null;
+    state.user.userId = null;
+    state.user.verified_email = false;
   }
 };
 
@@ -157,7 +170,7 @@ export const actions = {
 
     var myres;
 
-    return sendRequest(call, "POST", usertosend)
+    return sendRequest(state, call, "POST", usertosend)
       .then((res) => {
         //console.log("RITORNO 1 ");
         console.log(res);
@@ -173,6 +186,8 @@ export const actions = {
       .then((body) => {
         //console.log("RITORNO 2 ");
         //commit('setServerCode', myres);
+        if (body.code === serv_constants.RIS_CODE_EMAIL_VERIFIED)
+          localStorage.setItem('verificato', true);
         return {code: body.code, msg: body.msg};
       }).catch((err) => {
         console.log("ERROR: " + err);
@@ -185,12 +200,10 @@ export const actions = {
     var call = process.env.MONGODB_HOST + '/users';
     console.log("CALL " + call);
 
-    console.log("PASSW: " + authData.password);
+    //console.log("PASSW: " + authData.password);
 
-    bcrypt
-      .hash(authData.password, bcrypt.genSaltSync(12))
+    return bcrypt.hash(authData.password, bcrypt.genSaltSync(12))
       .then(hashedPassword => {
-        console.log("NEW hashedPassword = " + hashedPassword);
         let usertosend = {
           keyappid: process.env.PAO_APP_ID,
           lang: getlang(),
@@ -206,10 +219,12 @@ export const actions = {
 
         commit('setServerCode', Errori_MongoDb.CALLING);
 
-        return sendRequest(call, "POST", usertosend)
+        var x_auth_token = null;
+
+        return sendRequest(state, call, "POST", usertosend)
           .then((res) => {
             myres = res;
-            var x_auth_token = res.headers.get('x-auth');
+            x_auth_token = res.headers.get('x-auth');
             if (x_auth_token) {
               return res.json();
             } else {
@@ -224,7 +239,7 @@ export const actions = {
               console.log(body);
             }
 
-            commit('setServerCode', myres);
+            commit('setServerCode', myres.status);
             commit('setUser', body);
 
             if (myres.status === 200) {
@@ -233,9 +248,10 @@ export const actions = {
               if (process.env.DEV) {
                 console.log("USERNAME = " + username);
                 console.log("IDUSER= " + iduser);
-                commit('authUser', username, iduser, x_auth_token);
               }
 
+              commit('authUser', {username: username, userid: iduser, mytoken: x_auth_token, verified_email: false});
+
               const now = new Date();
               //const expirationDate = new Date(now.getTime() + myres.data.expiresIn * 1000);
               const expirationDate = new Date(now.getTime() + 1000);
@@ -243,6 +259,7 @@ export const actions = {
               localStorage.setItem('token', x_auth_token);
               localStorage.setItem('userId', iduser);
               localStorage.setItem('expirationDate', expirationDate);
+              localStorage.setItem('verificato', false);
               //dispatch('storeUser', authData);
               //dispatch('setLogoutTimer', myres.data.expiresIn);
 
@@ -268,7 +285,6 @@ export const actions = {
             return Errori_MongoDb.ERR_GENERICO;
           });
       });
-
   },
   [types.USER_SIGNIN]: ({commit}, authData) => {
     var call = process.env.MONGODB_HOST + '/users/login';
@@ -276,8 +292,6 @@ export const actions = {
 
     console.log("MYLANG = " + getlang());
 
-    console.log("PASSW: " + authData.password);
-
     const usertosend = {
       username: authData.username,
       password: authData.password,
@@ -294,7 +308,7 @@ export const actions = {
 
     var x_auth_token = null;
 
-    return sendRequest(call, "POST", usertosend)
+    return sendRequest(state, call, "POST", usertosend)
       .then((res) => {
         myres = res;
         x_auth_token = res.headers.get('x-auth');
@@ -324,10 +338,16 @@ export const actions = {
         if (myres.status === 200) {
           var iduser = body._id;
           var username = authData.username;
+          var verified_email = body.verified_email === "true" || body.verified_email === true;
           if (process.env.DEV) {
             console.log("USERNAME = " + username);
             console.log("IDUSER= " + iduser);
-            commit('authUser', username, iduser, x_auth_token);
+            commit('authUser', {
+              username: username,
+              userid: iduser,
+              mytoken: x_auth_token,
+              verified_email: verified_email
+            });
           }
 
           const now = new Date();
@@ -338,6 +358,7 @@ export const actions = {
           localStorage.setItem('userId', iduser);
           localStorage.setItem('expirationDate', expirationDate);
           localStorage.setItem('isLoggedin', true);
+          localStorage.setItem('verificato', verified_email);
 
           //dispatch('storeUser', authData);
           //dispatch('setLogoutTimer', myres.data.expiresIn);
@@ -375,20 +396,43 @@ export const actions = {
     }
     const userId = localStorage.getItem('userId');
     const username = localStorage.getItem('username');
+    const verified_email = localStorage.getItem('verificato') === "true";
     commit('authUser', {
       username: username,
       userId: userId,
       token: token,
+      verified_email: verified_email,
     })
   },
-  [types.USER_LOGOUT]: ({commit}) => {
-    commit('clearAuthData');
+  [types.USER_LOGOUT]: ({commit}, {router}) => {
+
+    var call = process.env.MONGODB_HOST + '/users/me/token';
+    console.log("CALL " + call);
+
+    let usertosend = {
+      keyappid: process.env.PAO_APP_ID,
+      idapp: process.env.APP_ID,
+    };
+    console.log(usertosend);
+
+    sendRequest(state, call, "DELETE", usertosend)
+      .then((res) => {
+        console.log(res);
+
+      }).catch((err) => {
+      console.log("ERROR: " + err);
+    }).then(() => {
+      commit('clearAuthData');
+    });
+
     localStorage.removeItem('expirationDate');
     localStorage.removeItem('token');
     localStorage.removeItem('userId');
     localStorage.removeItem('username');
     localStorage.removeItem('isLoggedin');
-    router.replace('/signin');
+    localStorage.removeItem('verified_email');
+
+    router.replace('/signin')
   },