Login (1)

.env

@@ -3,12 +3,13 @@
 APP_ID=1
 VUE_APP_URL="prova SVILUPPO!"
 PROVA_PAOLO="PROVA SVILUPPO"
+#LANG_DEFAULT=enUs
 LANG_DEFAULT=it
 
 MONGODB_HOST='http://localhost:3000'
 
-PAO_APP_ID='KKPPAA5KJK435J3KSS9F9D8S9F8SD98F9SDF'
+PAO_APP_ID=KKPPAA5KJK435J3KSS9F9D8S9F8SD98F9SDF
-MASTER_KEY='KKPPSS5KJK435J3KSS9F9D8S9F8SD3CR3T'
+MASTER_KEY=KKPPSS5KJK435J3KSS9F9D8S9F8SD3CR3T
 
 LOGO_REG=quasar-logo-full.svg
 

package-lock.json

@@ -1643,6 +1643,11 @@
       "integrity": "sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY=",
       "dev": true
     },
+    "bcryptjs": {
+      "version": "2.4.3",
+      "resolved": "https://registry.npmjs.org/bcryptjs/-/bcryptjs-2.4.3.tgz",
+      "integrity": "sha1-mrVie5PmBiH/fNrF2pczAn3x0Ms="
+    },
     "bfj": {
       "version": "6.1.1",
       "resolved": "https://registry.npmjs.org/bfj/-/bfj-6.1.1.tgz",
@@ -5708,6 +5713,11 @@
       "integrity": "sha512-PxfGzSs0ztShKrUYPIn5r0MtyAhYcCwmndozzpz8YObbPnD1jFxzlBGbRnX2mIu6Z13xN6+PTu05TQFnZFlzow==",
       "dev": true
     },
+    "js-md5": {
+      "version": "0.7.3",
+      "resolved": "https://registry.npmjs.org/js-md5/-/js-md5-0.7.3.tgz",
+      "integrity": "sha512-ZC41vPSTLKGwIRjqDh8DfXoCrdQIyBgspJVPXHBGu4nZlAEvG3nf+jO9avM9RmLiGakg7vz974ms99nEV0tmTQ=="
+    },
     "js-tokens": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz",

package.json

@@ -13,9 +13,11 @@
   },
   "dependencies": {
     "axios": "^0.18.0",
+    "bcryptjs": "^2.4.3",
     "chart": "^0.1.2",
     "chart.js": "^2.7.3",
     "countup.js": "^1.9.3",
+    "js-md5": "^0.7.3",
     "lodash": "^4.17.11",
     "quasar-extras": "^2.0.8",
     "roboto-font": "^0.1.0",

src/App.vue

@@ -18,7 +18,9 @@
 <script type="text/javascript">
   import Header from './components/Header.vue';
 
-  import {mapGetters} from 'vuex'
+  import * as types from './store/mutation-types'
+
+  import {mapGetters, mapActions} from 'vuex'
 
   export default {
     name: 'app',
@@ -33,8 +35,14 @@
     components: {
       appHeader: Header,
     },
-    created(){
+    methods:{
+      ...mapActions("user", {
+        tryAutoLogin: types.USER_AUTOLOGIN,
+      }),
+    },
+    created() {
       console.info(process.env);
+      this.tryAutoLogin();
     }
   }
 </script>

src/components/Header.vue

@@ -27,7 +27,7 @@
 
                 <div class="right-itens">
                     <!--<message-popover></message-popover>-->
-                    <label>{{ $t('msg.hello') }}</label>
+                    <label>{{ $t('msg.hello') }}</label> <span v-model="prova"></span> !
                 </div>
 
 
@@ -55,6 +55,10 @@
   import drawer from '../components/layout/drawer/drawer.vue'
   import messagePopover from '../components/layout/toolbar/messagePopover.vue'
 
+  import user from '../store/modules/user';
+
+  import {mapGetters} from 'vuex'
+
   export default {
     components: {
       drawer,
@@ -66,8 +70,14 @@
     methods: {
       openURL,
     },
+    computed: {
+      ...mapGetters("user", [
+        'getUsername',
+      ]),
+    },
     data: function () {
       return {
+        prova: 'AA',
         selectOpLang: [
           {label: 'Italian', icon: 'fa-facebook', value: 'it'},
           {label: 'English (US)', icon: 'fa-flag-us', value: 'en-us'},

src/components/layout/drawer/drawer.vue

@@ -4,7 +4,7 @@
             <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"> {{ name }} </span>
+                <span class="text-white"> Username: {{ getUsername }} </span>
                 <hr>
                 <span class="text-white"> {{ email }} </span>
                 <hr>
@@ -89,7 +89,8 @@
       }
     },
     computed: {
-      ...mapGetters("glob", ['getLayoutNeeded', 'getMenuCollapse'])
+      ...mapGetters("glob", ['getLayoutNeeded', 'getMenuCollapse']),
+      ...mapGetters("user", ['getUsername'])
     },
     components: {
       menuOne,

src/components/views/login/login.vue

@@ -38,13 +38,13 @@
   import { Platform } from 'quasar'
   export default {
     mounted () {
-      this.setLayoutNeeded(false)
+      this.setLayoutNeeded(false);
-      this.setIsLoginPage(true)
+      this.setIsLoginPage(true);
       this.startAnimation()
     },
     beforeDestroy () {
-      this.setLayoutNeeded(true)
+      this.setLayoutNeeded(true);
-      this.setIsLoginPage(false)
+      this.setIsLoginPage(false);
     },
     computed: {
       heightSize (){

src/components/views/login/signin.vue

@@ -0,0 +1,153 @@
+<template>
+    <div>
+        <q-page padding class="">
+            <div class="text-center">
+                <p>
+                    <!--<img src="../../../assets/quasar-logo-full.svg">-->
+                    <img :src="`../../../assets/`+`${env('LOGO_REG')}`">
+                </p>
+            </div>
+
+            <!--Prova URL :  {{env('PROVA_PAOLO')}}-->
+
+            <q-field
+                    :error="$v.form.username.$error"
+                    :error-label="`${errorMsg('username', $v.form.username)}`"
+            >
+                <q-input
+                        :value="form.username"
+                        @change="val => { form.username = val }"
+                        :before="[{icon: 'person', handler () {}}]"
+                        @blur="$v.form.username.$touch"
+                        :error="$v.form.username.$error"
+                        :float-label="$t('reg.username')"
+                />
+            </q-field>
+
+            <q-field
+                    :error="$v.form.password.$error"
+                    :error-label="`${errorMsg('password', $v.form.password)}`"
+            >
+                <q-input
+                        v-model="form.password"
+                        :before="[{icon: 'vpn_key', handler () {}}]"
+                        @blur="$v.form.password.$touch"
+                        :error="$v.form.password.$error"
+                        :float-label="$t('reg.password')"
+                />
+            </q-field>
+
+            <br>
+
+            <div align="center">
+                <q-btn rounded size="lg" color="primary" @click="submit" :disable="$v.$error">{{$t('login.enter')}}
+                </q-btn>
+            </div>
+        </q-page>
+    </div>
+</template>
+
+<script>
+  import {
+    required,
+    email,
+    minLength,
+    maxLength,
+    sameAs,
+  } from 'vuelidate/lib/validators'
+
+  import {mapGetters, mapActions} from 'vuex'
+  import * as types from '../../../store/mutation-types'
+
+  import {Errori_MongoDb} from '../../../store/modules/user'
+  import axios from 'axios';
+
+
+  export default {
+    data() {
+      return {
+        url: process.env.VUE_APP_URL,
+        form: {
+          username: process.env.TEST_USERNAME,
+          password: process.env.TEST_PASSWORD,
+        },
+      }
+    },
+    computed: {
+      ...mapGetters("user", [
+        'getUsername',
+        'getPassword',
+      ]),
+      ...mapGetters("user", [
+        'getUserServer',
+        'getServerCode',
+      ]),
+      env() {
+        return env
+      },
+    },
+    validations: {
+      isAsync: true,
+      form: {
+        password: {required, minLength: minLength(8), maxLength: maxLength(20)},
+        username: {
+          required, minLength: minLength(6), maxLength: maxLength(20),
+        },
+      }
+    },
+    methods: {
+      ...mapActions("user", {
+        signin: types.USER_SIGNIN,
+      }),
+      errorMsg(cosa, item) {
+        try {
+          if (!item.$error) return '';
+          if (item.$params.email && !item.email) return this.$t('reg.err.email');
+
+          if (!item.required) return this.$t('reg.err.required');
+          if (!item.minLength) return this.$t('reg.err.atleast') + ` ${item.$params.minLength.min} ` + this.$t('reg.err.char');
+          if (!item.maxLength) return this.$t('reg.err.notmore') + ` ${item.$params.maxLength.max} ` + this.$t('reg.err.char');
+          return '';
+        } catch (error) {
+          //console.log("ERR : " + error);
+        }
+      },
+      checkErrors(riscode) {
+        //console.log("RIS = " + riscode);
+        if (riscode === Errori_MongoDb.OK) {
+          this.$router.push('/');
+        }else if (riscode === Errori_MongoDb.ERR_LOGIN_ERRATO) {
+          this.$q.notify(this.$t('login.errato'));
+          this.$router.push('/signin');
+        } else {
+          this.$q.notify("Errore num " + riscode);
+        }
+
+      },
+      submit() {
+        this.$v.form.$touch();
+
+        if (this.$v.form.$error) {
+          this.$q.notify(this.$t('reg.err.errore_generico'));
+          return
+        }
+
+        console.log(this.form);
+        this.signin(this.form)
+          .then((riscode) => {
+            this.checkErrors(riscode);
+            if (riscode === Errori_MongoDb.OK){
+              this.$router.push('/');
+            }else{
+              this.$router.push('/signin');
+            }
+          }).catch(error => {
+          console.log("ERROR = " + error);
+        });
+
+        // ...
+      }
+    },
+  }
+</script>
+

src/components/views/login/signup.vue

@@ -125,7 +125,7 @@
       }
     },
     computed: {
-      ...mapGetters("glob", [
+      ...mapGetters("user", [
         'getUsername',
         'getPassword',
         'getEmail',

src/i18n.js

@@ -1,7 +1,7 @@
 const messages = {
   it: {
     msg: {
-      hello: 'Buongiorno!',
+      hello: 'Buongiorno',
       myAppName: 'FreePlanet',
       myDescriz: 'La prima App Libera e per Tutti'
     },
@@ -27,6 +27,10 @@ const messages = {
         sameaspassword: 'Le password devono essere identiche',
       }
     },
+    login:{
+      enter: 'Login',
+      errato: "Username o password errata. Riprovare",
+    }
   },
   enUs: {
     msg: {
@@ -56,6 +60,10 @@ const messages = {
         sameaspassword: 'Passwords must be identical',
       }
     },
+    login:{
+      enter: 'Login',
+      errato: "Username or password wrong. Please retry again",
+    }
   },
 };
 

src/router/routes.js

@@ -10,7 +10,7 @@ function load (component) {
 const routes = [
   { path: '/',  component: () => import('pages/Index.vue') },
   { path: '/signup', component: load('views/login/signup'), meta: { name: 'Registration' } },
-  { path: '/login', component: load('views/login/login'), meta: { name: 'Login' } },
+  { path: '/signin', component: load('views/login/signin'), meta: { name: 'Login' } },
   { path: '/vreg', component: load('views/login/vreg'), meta: { name: 'Verify Reg' } },
 
 ];

src/store/modules/serv_constants.js

@@ -1,4 +1,7 @@
 export const serv_constants = {
   RIS_CODE_EMAIL_ALREADY_VERIFIED: -20,
   RIS_CODE_EMAIL_VERIFIED: 1,
+
+  RIS_CODE_LOGIN_ERR: -10,
+  RIS_CODE_LOGIN_OK: 1,
 };

src/store/modules/user.js

@@ -1,12 +1,18 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 
+import md5 from 'js-md5';
+
+const bcrypt = require('bcryptjs');
+
 Vue.use(Vuex);
 
 import * as types from '../mutation-types'
+import {serv_constants} from "./serv_constants";
+
 //import tools from '../../../tools/tools'
 
-function getlang(){
+function getlang() {
   if (state.user.lang !== "")
     return state.user.lang;
   else
@@ -17,6 +23,7 @@ export const Errori_MongoDb = {
   CALLING: 10,
   OK: 20,
   ERR_GENERICO: -1,
+  ERR_LOGIN_ERRATO: -10,
   DUPLICATE_EMAIL_ID: 11000,
   DUPLICATE_USERNAME_ID: 11100
 };
@@ -41,6 +48,8 @@ export const state = {
   },
   userServer: null,
   servercode: 0,
+  idToken: 0,
+  userId: 0,
 };
 
 function sendRequest(url, method, mydata) {
@@ -91,8 +100,10 @@ export const mutations = {
     state.user.dateOfBirth = payload;
   },
 
-  authUser(state, email, mytoken) {
+  authUser(state, email, userid, mytoken) {
     state.user.tokens.push({access: "auth", token: mytoken});
+    state.idToken = mytoken;
+    state.userId = userid;
   },
   setUser(state, user) {
     state.userServer = user
@@ -103,6 +114,8 @@ export const mutations = {
   },
   clearAuthData(state) {
     state.tokens = [];
+    state.idToken = null;
+    state.userId = null;
   }
 };
 
@@ -131,18 +144,18 @@ export const actions = {
     var call = process.env.MONGODB_HOST + '/vreg';
     console.log("CALL " + call);
 
-    let params = {
+    let usertosend = {
       keyappid: process.env.PAO_APP_ID,
       idapp: process.env.APP_ID,
       idlink: paramquery.idlink,
     };
-    console.log(params);
+    console.log(usertosend);
 
     commit('setServerCode', Errori_MongoDb.CALLING);
 
     var myres;
 
-    return sendRequest(call, "POST", params)
+    return sendRequest(call, "POST", usertosend)
       .then((res) => {
         //console.log("RITORNO 1 ");
         console.log(res);
@@ -170,85 +183,217 @@ export const actions = {
     var call = process.env.MONGODB_HOST + '/users';
     console.log("CALL " + call);
 
-    let params = {
+    console.log("MYLANG = " + getlang());
-      keyappid: process.env.PAO_APP_ID,
-      lang: state.user.lang,
-      email: authData.email,
-      password: authData.password,
-      username: authData.username,
-      idapp: process.env.APP_ID,
-    };
 
-    console.log(params);
+    bcrypt.genSalt(10, (err, salt) => {
+      return bcrypt
+        .hash(authData.password, salt)
+        .then(hashedPassword => {
+          let usertosend = {
+            keyappid: process.env.PAO_APP_ID,
+            lang: getlang(),
+            email: authData.email,
+            password: hashedPassword,
+            username: authData.username,
+            idapp: process.env.APP_ID,
+          };
 
-    var myres = null;
+          console.log(usertosend);
 
-    commit('setServerCode', Errori_MongoDb.CALLING);
+          var myres = null;
 
-    var x_auth_token = null;
+          commit('setServerCode', Errori_MongoDb.CALLING);
 
-    return sendRequest(call, "POST", params)
+          var x_auth_token = null;
-      .then((res) => {
-        console.log("HEADERS:");
 
-        for (let header of res.headers) {
+          return sendRequest(call, "POST", usertosend)
-          console.log(header);
+            .then((res) => {
-        }
+              console.log("HEADERS:");
 
-        x_auth_token = res.headers.get('x-auth');
+              for (let header of res.headers) {
-        myres = res;
+                console.log(header);
-        return res.json();
+              }
-      })
-      .then((body) => {
-        if (process.env.DEV) {
-          console.log("RISULTATO ");
-          console.log("STATUS " + myres.status + " " + (myres.statusText));
-          console.log("BODY:");
-          console.log(body);
-        }
 
-        commit('setServerCode', myres);
+              x_auth_token = res.headers.get('x-auth');
-        commit('setUser', body);
+              myres = res;
+              return res.json();
+            })
+            .then((body) => {
+              if (process.env.DEV) {
+                console.log("RISULTATO ");
+                console.log("STATUS " + myres.status + " " + (myres.statusText));
+                console.log("BODY:");
+                console.log(body);
+              }
 
-        if (myres.status === 200) {
+              commit('setServerCode', myres);
-          var iduser = body._id;
+              commit('setUser', body);
-          var email = body.email;
+
-          if (process.env.DEV) {
+              if (myres.status === 200) {
-            console.log("EMAIL = " + body.email);
+                var iduser = body._id;
-            console.log("IDUSER= " + iduser);
+                var email = body.email;
-            commit('authUser', email, x_auth_token);
+                if (process.env.DEV) {
-          }
+                  console.log("EMAIL = " + body.email);
+                  console.log("IDUSER= " + iduser);
+                  commit('authUser', email, iduser, x_auth_token);
+                }
+
+                const now = new Date();
+                //const expirationDate = new Date(now.getTime() + myres.data.expiresIn * 1000);
+                const expirationDate = new Date(now.getTime() + 1000);
+                localStorage.setItem('username', authData.username);
+                localStorage.setItem('token', x_auth_token);
+                localStorage.setItem('userId', iduser);
+                localStorage.setItem('expirationDate', expirationDate);
+                //dispatch('storeUser', authData);
+                //dispatch('setLogoutTimer', myres.data.expiresIn);
+
+                return Errori_MongoDb.OK;
+              } else if (myres.status === 404) {
+                if (process.env.DEV) {
+                  console.log("CODE = " + body.code);
+                }
+                return body.code;
+              } else {
+                if (process.env.DEV) {
+                  console.log("CODE = " + body.code);
+                }
+                return body.code;
+              }
+            })
+            .catch((error) => {
+              if (process.env.DEV) {
+                console.log("ERROREEEEEEEEE");
+                console.log(error);
+              }
+              commit('setServerCode', Errori_MongoDb.ERR_GENERICO);
+              return Errori_MongoDb.ERR_GENERICO;
+            });
+        });
+    });
 
-          const now = new Date();
-          //const expirationDate = new Date(now.getTime() + myres.data.expiresIn * 1000);
-          const expirationDate = new Date(now.getTime() + 1000);
-          localStorage.setItem('token', x_auth_token);
-          localStorage.setItem('userId', iduser);
-          localStorage.setItem('expirationDate', expirationDate);
-          //dispatch('storeUser', authData);
-          //dispatch('setLogoutTimer', myres.data.expiresIn);
-          return Errori_MongoDb.OK;
-        } else if (myres.status === 404) {
-          if (process.env.DEV) {
-            console.log("CODE = " + body.code);
-          }
-          return body.code;
-        } else {
-          if (process.env.DEV) {
-            console.log("CODE = " + body.code);
-          }
-          return body.code;
-        }
-      })
-      .catch((error) => {
-        if (process.env.DEV) {
-          console.log("ERROREEEEEEEEE");
-          console.log(error);
-        }
-        commit('setServerCode', Errori_MongoDb.ERR_GENERICO);
-        return Errori_MongoDb.ERR_GENERICO;
-      });
   },
+  [types.USER_SIGNIN]: ({commit}, authData) => {
+    var call = process.env.MONGODB_HOST + '/users/login';
+    console.log("LOGIN " + call);
+
+    console.log("MYLANG = " + getlang());
+
+    bcrypt.genSalt(10, (err, salt) => {
+      return bcrypt
+        .hash(authData.password, salt)
+        .then(hashedPassword => {
+
+          const usertosend = {
+            username: authData.username,
+            password: hashedPassword,
+            idapp: process.env.APP_ID,
+            keyappid: process.env.PAO_APP_ID,
+            lang: getlang(),
+          };
+
+          console.log(usertosend);
+
+          var myres = null;
+
+          commit('setServerCode', Errori_MongoDb.CALLING);
+
+          var x_auth_token = null;
+
+          return sendRequest(call, "POST", usertosend)
+            .then((res) => {
+              myres = res;
+              return res.json();
+            })
+            .then((body) => {
+              if (process.env.DEV) {
+                console.log("RISULTATO ");
+                console.log("STATUS " + myres.status + " " + (myres.statusText));
+                console.log("BODY:");
+                console.log(body);
+              }
+
+              if (body.code === serv_constants.RIS_CODE_LOGIN_ERR) {
+                commit('setServerCode', Errori_MongoDb.ERR_LOGIN_ERRATO);
+                return Errori_MongoDb.ERR_LOGIN_ERRATO;
+              }
+
+              x_auth_token = body.token;
+
+              commit('setServerCode', myres);
+
+              if (myres.status === 200) {
+                var iduser = body._id;
+                var email = body.email;
+                if (process.env.DEV) {
+                  console.log("EMAIL = " + email);
+                  console.log("IDUSER= " + iduser);
+                  commit('authUser', '', iduser, x_auth_token);
+                }
+
+                const now = new Date();
+                //const expirationDate = new Date(now.getTime() + myres.data.expiresIn * 1000);
+                const expirationDate = new Date(now.getTime() + 1000);
+                localStorage.setItem('username', authData.username);
+                localStorage.setItem('token', x_auth_token);
+                localStorage.setItem('userId', iduser);
+                localStorage.setItem('expirationDate', expirationDate);
+                localStorage.setItem('isLoggedin', true);
+
+                //dispatch('storeUser', authData);
+                //dispatch('setLogoutTimer', myres.data.expiresIn);
+                return Errori_MongoDb.OK;
+              } else if (myres.status === 404) {
+                if (process.env.DEV) {
+                  console.log("CODE = " + body.code);
+                }
+                return body.code;
+              } else {
+                if (process.env.DEV) {
+                  console.log("CODE = " + body.code);
+                }
+                return body.code;
+              }
+            })
+            .catch((error) => {
+              if (process.env.DEV) {
+                console.log("ERROREEEEEEEEE");
+                console.log(error);
+              }
+              commit('setServerCode', Errori_MongoDb.ERR_GENERICO);
+              return Errori_MongoDb.ERR_GENERICO;
+            });
+        });
+    });
+  },
+  [types.USER_AUTOLOGIN]: ({commit}) => {
+    const token = localStorage.getItem('token');
+    if (!token) {
+      return
+    }
+    const expirationDate = localStorage.getItem('expirationDate');
+    const now = new Date();
+    if (now >= expirationDate) {
+      return
+    }
+    const userId = localStorage.getItem('userId');
+    const username = localStorage.getItem('username');
+    commit('authUser', {
+      username: username,
+      token: token,
+      userId: userId
+    })
+  },
+  [types.USER_LOGOUT]: ({commit}) => {
+    commit('clearAuthData');
+    localStorage.removeItem('expirationDate');
+    localStorage.removeItem('token');
+    localStorage.removeItem('userId');
+    localStorage.removeItem('username');
+    localStorage.removeItem('isLoggedin');
+    router.replace('/signin');
+  },
+
 
 };
 

src/store/mutation-types.js

@@ -17,6 +17,9 @@ export const USER_PASSWORD = 'password';
 export const USER_DATEOFBIRTH = 'dateofbirth';
 
 export const USER_SIGNUP = 'signup';
+export const USER_SIGNIN = 'signin';
+export const USER_AUTOLOGIN = 'autologin';
+export const USER_LOGOUT = 'logout';
 export const USER_VREG = 'vreg';