Risolto problema che non loggava correttamente

.env

@@ -6,6 +6,6 @@ MONGODB_HOST='http://localhost:3000'
 PAO_APP_ID='KKPPAA5KJK435J3KSS9F9D8S9F8SD98F9SDF'
 MASTER_KEY='KKPPSS5KJK435J3KSS9F9D8S9F8SD3CR3T'
 LOGO_REG='quasar-logo-full.svg'
-TEST_EMAIL='paolo.arena77@gmail.com'
+TEST_EMAIL=paolo.arena77@gmail.com
 TEST_USERNAME='paoloar77'
 TEST_PASSWORD='mypassword@1A'

package.json

@@ -8,6 +8,7 @@
     "dev": "NODE_OPTIONS=--max_old_space_size=4096 DEBUG=v8:* quasar dev",
     "dev:ssr": "NODE_OPTIONS=--max_old_space_size=4096 DEBUG=v8:* quasar dev -m ssr",
     "dev:pwa": "NODE_OPTIONS=--max_old_space_size=4096 DEBUG=v8:* quasar dev -m pwa",
+    "pwa": "NODE_OPTIONS=--max_old_space_size=4096 DEBUG=v8:* quasar dev -m pwa",
     "test:unit": "jest",
     "test:cover": "jest --coverage",
     "build": "quasar build",

quasar.conf.js

@@ -98,7 +98,7 @@ module.exports = function (ctx) {
     devServer: {
       https: false,
       port: 8080,
-      open: true // opens browser window automatically
+      open: false // opens browser window automatically
     },
     // framework: 'all' --- includes everything; for dev only!
     framework: {

src/layouts/drawer/drawer.vue

@@ -1,5 +1,6 @@
 <template>
     <div>
+        User: {{ Username}}
         <div id="profile" v-if="Username">
             <img :src="photo" style='height: 80px' class="inline-block">
             <img src="../img/avatar-1.svg" id="avatar" class="inline-block">
@@ -8,7 +9,7 @@
                 <hr>
                 <span class="text-white" v-if="Verificato"> {{$t('reg.verificato')}} </span>
                 <span class="text-white" v-else> {{$t('reg.non_verificato')}} </span>
-                <span class="text-white"> {{ getEmail }} </span>
+                <span class="text-white"> {{ Email }} </span>
             </div>
             <div id="user-actions">
                 <q-btn round color="primary" icon="person"></q-btn>
@@ -91,6 +92,10 @@
       return UserStore.state.verifiedEmail
     }
 
+    get Email () {
+      return UserStore.state.email
+    }
+
     logoutHandler() {
       UserStore.actions.logout()
       this.$q.notify(this.$t('logout.uscito'))

src/model/index.ts

@@ -1,5 +1,6 @@
 export * from './UserStore'
 export * from './GlobalStore'
+export * from './signin-option'
 export * from './signup-option'
 export * from './key-value'
 export * from './payload'

src/model/signin-option.ts

@@ -0,0 +1,5 @@
+
+export interface ISigninOptions {
+  username: string
+  password?: string
+}

src/router/route-config.ts

@@ -11,9 +11,9 @@ export const RouteConfig: VueRouteConfig[] = [
     meta: { name: 'Home' }
   },
    { path: '/test', component: () => import('@/views/login/test.vue'), meta: { name: 'Test' } },
-  { path: '/signup', component: () => import('@/views/login/signup/signup.vue'), meta: { name: 'Registration' } }
+  { path: '/signup', component: () => import('@/views/login/signup/signup.vue'), meta: { name: 'Registration' } },
+  { path: '/signin', component: () => import('@/views/login/signin/signin.vue'), meta: { name: 'Login' } }
   /*
-  { path: '/signin', component: () => import('@/views/login/signin.vue'), meta: { name: 'Login' } },
   { path: '/vreg', component: () => import('@/views/login/vreg.vue'), meta: { name: 'Verify Reg' } },
   {
     path: '/requestresetpwd',

src/store/Modules/UserStore.ts

@@ -1,6 +1,6 @@
 
 import Api from '@api'
-import { ISignupOptions, IUserState } from 'model'
+import { ISignupOptions, ISigninOptions, IUserState } from 'model'
 import { ILinkReg, IResult, IIdToken } from 'model/other'
 import { storeBuilder } from './Store/Store'
 import router from '@router'
@@ -379,7 +379,7 @@ namespace Actions {
       })
   }
 
-  async function signin (context, authData: ISignupOptions) {
+  async function signin (context, authData: ISigninOptions) {
     let call = process.env.MONGODB_HOST + '/users/login'
     console.log('LOGIN ' + call)
 

src/validation/complexity.ts

@@ -1,4 +1,4 @@
-import { Patterns } from '@/common'
+import { Patterns } from '../common'
 
 export function complexity(password: string) {
     return Patterns.Password.test(password)

src/views/login/requestresetpwd.vue

@@ -13,7 +13,6 @@
             >
                 <q-input
                         v-model="form.email"
-                        :value="form.email"
                         autocomplete="email"
                         @change="val => { form.email = val }"
                         :before="[{icon: 'mail', handler () {}}]"
@@ -52,7 +51,7 @@
   import * as types from '../../store/mutation-types'
   import { rescodes } from '../../../store/Modules/rescodes'
 
-  import {serv_constants} from '../../store/Modules/serv_constants';
+  import {serv_constants} from '../../store/Modules/serv_constants'
 
 
   export default {

src/views/login/signin.vue

@@ -1,175 +0,0 @@
-<template>
-    <div>
-        <q-page padding class="signin">
-            <div class="text-center">
-                <p>
-                    <!--<img src="../../../assets/quasar-logo-full.svg">-->
-                    <img src="../../../assets/{{ logoimg }}">
-                </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"
-                        autocomplete="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>
-
-            <div>
-                <a :href="getlinkforgetpwd">{{$t('reg.forgetpassword')}}</a>
-            </div>
-
-            <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 { rescodes } from '../../../store/Modules/rescodes'
-  import {serv_constants} from "../../store/Modules/serv_constants";
-  import axios from 'axios';
-
-  import {Loading, QSpinnerFacebook, QSpinnerGears} from 'quasar'
-
-
-  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
-      },
-      getlinkforgetpwd () {
-        return "/requestresetpwd";
-      },
-    },
-    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,
-      }),
-      showNotif (msg) {
-        this.$q.notify(msg)
-      },
-      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 === rescodes.OK) {
-          this.showNotif({type: 'positive', message: this.$t('login.completato')});
-          this.$router.push('/');
-        } else if (riscode === serv_constants.RIS_CODE_LOGIN_ERR) {
-          this.showNotif(this.$t('login.errato'));
-          this.$router.push('/signin');
-        } else {
-          this.showNotif("Errore num " + riscode);
-        }
-
-      },
-      submit() {
-        this.$v.form.$touch();
-
-        if (this.$v.form.$error) {
-          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>

src/views/login/signin/signin-validate.ts

@@ -0,0 +1,17 @@
+import { ISigninOptions } from 'model'
+import { required, minLength, email, sameAs } from 'vuelidate/lib/validators'
+
+export type TSignin = { signin: ISigninOptions, validationGroup: string[] }
+
+export const validations = {
+    signin: {
+        password: {
+            required,
+            minLength: minLength(8)
+        },
+        username: {
+            required,
+            minLength: minLength(6)
+        }
+    }
+}

src/views/login/signin/signin.scss

@@ -0,0 +1,5 @@
+.signin {
+  width: 100%;
+  margin: 0 auto;
+  max-width: 450px;
+}

src/views/login/signin/signin.ts

@@ -0,0 +1,103 @@
+import Vue from 'vue'
+import { Component, Prop, Watch } from 'vue-property-decorator'
+import { UserStore } from '@store'
+import { rescodes } from '../../../store/Modules/rescodes'
+import { serv_constants } from '../../../store/Modules/serv_constants'
+
+
+import { ISigninOptions, IUserState } from 'model'
+import { validations, TSignin } from './signin-validate'
+
+import { validationMixin } from 'vuelidate'
+
+import './signin.scss'
+
+// import {Loading, QSpinnerFacebook, QSpinnerGears} from 'quasar'
+
+
+@Component({
+  mixins: [validationMixin],
+  validations: validations
+})
+
+export default class Signin extends Vue {
+  public $v
+  public $q
+  $t: any
+
+  public signin: ISigninOptions = {
+    username: process.env.TEST_USERNAME || '',
+    password: process.env.TEST_PASSWORD
+  }
+
+
+  created() {
+    this.$v.$reset()
+  }
+
+  public env() {
+    return process.env
+  }
+
+  public logoimg() {
+    return process.env.LOGO_REG
+  }
+
+  showNotif(msg: any) {
+    this.$q.notify(msg)
+  }
+
+  public getlinkforgetpwd() {
+    return '/requestresetpwd'
+  }
+
+  public errorMsg(cosa: string, item: any) {
+    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 === rescodes.OK) {
+      this.showNotif({ type: 'positive', message: this.$t('login.completato') })
+      this.$router.push('/')
+    } else if (riscode === serv_constants.RIS_CODE_LOGIN_ERR) {
+      this.showNotif(this.$t('login.errato'))
+      this.$router.push('/signin')
+    } else {
+      this.showNotif('Errore num ' + riscode)
+    }
+
+  }
+
+  submit() {
+    this.$v.signin.$touch()
+
+    if (this.$v.signin.$error) {
+      this.showNotif(this.$t('reg.err.errore_generico'))
+      return
+    }
+
+    this.$q.loading.show({ message: this.$t('login.incorso') })
+
+    console.log(this.signin)
+    UserStore.actions.signin(this.signin)
+      .then((riscode) => {
+        this.checkErrors(riscode)
+        this.$q.loading.hide()
+      }).catch(error => {
+      console.log('ERROR = ' + error)
+      this.$q.loading.hide()
+    })
+
+  }
+}

src/views/login/signin/signin.vue

@@ -0,0 +1,56 @@
+<template>
+    <div>
+        <q-page padding class="signin">
+            <div class="text-center">
+                <p>
+                    <!--<img src="../../../assets/quasar-logo-full.svg">-->
+                    <img :src="`../../../assets/${logoimg()}`">
+                </p>
+            </div>
+
+            <!--Prova URL :  {{env('PROVA_PAOLO')}}-->
+
+            <q-field
+                    :error="$v.signin.username.$error"
+                    :error-label="`${errorMsg('username', $v.signin.username)}`"
+            >
+                <q-input
+                        v-model="signin.username"
+                        autocomplete="username"
+                        @change="val => { signin.username = val }"
+                        :before="[{icon: 'person', handler () {}}]"
+                        @blur="$v.signin.username.$touch"
+                        :error="$v.signin.username.$error"
+                        :float-label="$t('reg.username')"
+                />
+            </q-field>
+
+            <q-field
+                    :error="$v.signin.password.$error"
+                    :error-label="`${errorMsg('password', $v.signin.password)}`"
+            >
+                <q-input
+                        v-model="signin.password"
+                        :before="[{icon: 'vpn_key', handler () {}}]"
+                        @blur="$v.signin.password.$touch"
+                        :error="$v.signin.password.$error"
+                        :float-label="$t('reg.password')"
+                />
+            </q-field>
+
+            <div>
+                <a :href="getlinkforgetpwd">{{$t('reg.forgetpassword')}}</a>
+            </div>
+
+            <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 lang="ts" src="./signin.ts">
+</script>

src/views/login/signup/signup-validate.ts

@@ -1,4 +1,4 @@
-import { ISignupOptions } from '@/model'
+import { ISignupOptions } from 'model'
 import { required, minLength, email, sameAs } from 'vuelidate/lib/validators'
 import { ValidationRuleset } from 'vuelidate'
 import { complexity, registereduser, registeredemail } from '@/validation'

src/views/login/signup/signup.ts

@@ -3,7 +3,6 @@ import { Component, Prop, Watch } from 'vue-property-decorator'
 import { UserStore } from '@store'
 import { rescodes } from '../../../store/Modules/rescodes'
 
-import { required, email, numeric, maxLength, maxValue, minValue, sameAs, minLength } from 'vuelidate/lib/validators'
 import { ISignupOptions, IUserState } from 'model'
 import { validations, TSignup } from './signup-validate'