Richiesta Cambio Password: ti manda il codice a 6 cifre e poterlo inserire sulla APP.

config/webpack.config.dev.js

@@ -62,6 +62,10 @@ const webpackDevConfig = {
     new webpack.NamedModulesPlugin(),
   ],
   devServer: {
+    headers: {
+      'Access-Control-Allow-Origin': '*',
+      'Access-Control-Allow-Headers': '*',
+    },
     /*
     headers: {
       'Access-Control-Allow-Origin': '*',

quasar.conf.js

@@ -149,6 +149,10 @@ module.exports = configure((ctx) => ({
     https: false,
     port: 8084,
     open: false, // opens browser window automatically
+    headers: {
+      'Access-Control-Allow-Origin': '*',
+      'Access-Control-Allow-Headers': '*',
+    },
   },
 
   // https://v2.quasar.dev/quasar-cli/quasar-conf-js#Property%3A-framework

src/boot/axios.ts

@@ -1,19 +1,24 @@
 import axios from 'axios'
 import { boot } from 'quasar/wrappers'
 
-const api = axios.create({ baseURL: process.env.MONGODB_HOST })
+const api = axios.create({
+  baseURL: process.env.MONGODB_HOST,
+  headers: {
+    'Content-type': 'application/json',
+  },
+})
 
 export default boot(({ app }) => {
-// for use inside Vue files (Options API) through this.$axios and this.$api
+  // for use inside Vue files (Options API) through this.$axios and this.$api
 
   app.config.globalProperties.$axios = axios
   // ^ ^ ^ this will allow you to use this.$axios (for Vue Options API form)
   //       so you won't necessarily have to import axios in each vue file
 
   app.config.globalProperties.$api = api
-// ^ ^ ^ this will allow you to use this.$api (for Vue Options API form)
+  // ^ ^ ^ this will allow you to use this.$api (for Vue Options API form)
-//       so you can easily perform requests against your app's API
+  //       so you can easily perform requests against your app's API
-//
+  //
 })
 
 export { axios }

src/statics/lang/it.js

@@ -593,6 +593,7 @@ const msg_it = {
         char: 'caratteri',
         terms: 'Devi accettare le condizioni, per continuare.',
         email_not_exist: 'l\'Email non è presente in archivio, verificare se è corretta',
+        code_resetpwd_error: 'Il codice inserito non è corretto.',
         duplicate_email: 'l\'Email è già stata registrata',
         invalid_email: 'l\'Email non è valida',
         user_already_exist: 'La registrazione con questi dati (nome, cognome e cellulare) è stata già effettuata. Per accedere al sito, cliccare sul bottone LOGIN dalla HomePage.',
@@ -645,12 +646,14 @@ const msg_it = {
     reset: {
       title_reset_pwd: 'Reimposta la tua Password',
       send_reset_pwd: 'Invia Reimposta la password',
+      resend_reset_pwd: 'Rimanda nuovamente',
       incorso: 'Richiesta Nuova Email...',
       email_sent: 'Email inviata',
       check_email: 'Controlla la tua email, ti arriverà un messaggio con un link per reimpostare la tua password. Questo link, per sicurezza, scadrà dopo 4 ore.',
       token_scaduto: 'Il token è scaduto oppure è stato già usato. Ripetere la procedura di reset password',
       title_update_pwd: 'Aggiorna la tua password',
       update_password: 'Aggiorna Password',
+      confirmcode_reset: 'Conferma Codice',
     },
     logout: {
       uscito: 'Sei Uscito',

src/store/UserStore.ts

@@ -573,13 +573,14 @@ export const useUserStore = defineStore('UserStore', {
     async requestpwd(paramquery: any) {
       const usertosend = {
         email: paramquery.email,
+        codetocheck: paramquery.tokenforgot_code,
       }
       console.log(usertosend)
 
       this.setServerCode(tools.CALLING)
 
       return Api.SendReq('/requestnewpwd', 'POST', usertosend)
-        .then((res) => ({ code: res.data.code, msg: res.data.msg })).catch((error) => {
+        .then((res) => ({ code: res.data.code, msg: res.data.msg, link: res.data.link })).catch((error) => {
           this.setErrorCatch(error)
           return this.getServerCode
         })

src/views/requestresetpwd/requestresetpwd.ts

@@ -4,13 +4,14 @@ import { tools } from '@store/Modules/tools'
 import { Logo } from '../../components/logo'
 import { CTitleBanner } from '../../components/CTitleBanner'
 
-import { defineComponent, reactive, ref } from 'vue'
+import { defineComponent, reactive, ref, watch } from 'vue'
 import { useI18n } from '@src/boot/i18n'
 import { useUserStore } from '@store/UserStore'
 import { useGlobalStore } from '@store/globalStore'
 import { useQuasar } from 'quasar'
 import useVuelidate from '@vuelidate/core'
 import { validations } from '@src/views/requestresetpwd/request-resetpwd-validate'
+import { useRouter } from 'vue-router'
 
 
 export default defineComponent({
@@ -22,6 +23,8 @@ export default defineComponent({
     const userStore = useUserStore()
     const globalStore = useGlobalStore()
 
+    const $router = useRouter()
+
     const emailsent = ref(false)
     const form = reactive({
       email: '',
@@ -34,6 +37,10 @@ export default defineComponent({
 
     const emailRef = ref(null)
 
+    watch(() => form.tokenforgot_code, (to: any, from: any) => {
+      checkCode()
+    })
+
     function emailinviata() {
       return emailsent.value
     }
@@ -75,6 +82,30 @@ export default defineComponent({
 
     }
 
+    function checkCode() {
+
+      const mycode = form.tokenforgot_code.trim()
+      if (mycode.length === 6) {
+        $q.loading.show({ message: t('reset.incorso') })
+        // Check if code is correct
+        userStore.requestpwd(form)
+          .then((ris: any) => {
+            if (ris.code === serv_constants.RIS_CODE_OK) {
+              if (ris.link)
+                $router.replace(ris.link)
+            } else {
+              tools.showNegativeNotif($q, t('reg.err.code_resetpwd_error'))
+            }
+            form.tokenforgot_code = ''
+            $q.loading.hide()
+          }).catch((err: any) => {
+            console.log('ERROR = ' + err.error)
+            $q.loading.hide()
+          })
+
+      }
+    }
+
     return {
       emailinviata,
       submit,
@@ -82,6 +113,7 @@ export default defineComponent({
       emailRef,
       v$,
       tools,
+      checkCode,
     }
   }
 })

src/views/requestresetpwd/requestresetpwd.vue

@@ -1,60 +1,88 @@
 <template>
-  <form @submit.prevent.stop="submit" class="row justify-center text-center padding">
+  <form
+    v-if="!emailinviata()"
+    @submit.prevent.stop="submit"
+    class="row justify-center text-center padding"
+  >
     <div class="q-gutter-sm q-ma-sm">
-
+      <div>
-      <div v-if="!emailinviata()">
         <q-banner
           rounded
           class="bg-primary text-white"
-          style="text-align: center;">
+          style="text-align: center"
+        >
           <span class="mybanner">{{ $t('reset.title_reset_pwd') }}</span>
         </q-banner>
-        <br>
+        <br />
 
         <q-input
           ref="emailRef"
           v-model="form.email"
-          rounded outlined
+          rounded
+          outlined
           autocomplete="email"
           maxlength="50"
           debounce="1000"
           :error="v$.email.$error"
-          :error-message="tools.errorMsg( 'email', v$.email)"
+          :error-message="tools.errorMsg('email', v$.email)"
-          :label="$t('reg.email')">
+          :label="$t('reg.email')"
-
+        >
           <template v-slot:prepend>
-            <q-icon name="email"/>
+            <q-icon name="email" />
           </template>
-
         </q-input>
 
-        <br>
+        <br />
 
         <div class="center q-ma-sm">
           <q-btn
-            rounded size="lg" color="primary" type="submit" :disable="v$.$error || v$.$invalid">{{ $t('reset.send_reset_pwd') }}
+            rounded
+            size="lg"
+            color="primary"
+            type="submit"
+            :disable="v$.$error || v$.$invalid"
+            >{{ $t('reset.send_reset_pwd') }}
           </q-btn>
         </div>
-
       </div>
+    </div>
+  </form>
   <div v-else>
-        <q-banner
+    <q-banner rounded class="bg-positive text-white" style="text-align: center">
-          rounded
-          class="bg-positive text-white"
-          style="text-align: center;">
       <span class="mybanner">{{ $t('reset.email_sent') }}</span>
     </q-banner>
-        <br>
+    <br />
 
     <div>
       <strong>{{ $t('reset.check_email') }}</strong>
     </div>
 
-      </div>
+    <br>
+    <q-input
+      v-model="form.tokenforgot_code"
+      rounded
+      outlined
+      label="Inserisci il codice a 6 cifre"
+      debounce="1000"
+      :maxlength="6"
+      type="number"
+    >
+    </q-input>
 
+    <br /><br />
 
+    <div class="center q-ma-sm">
+      <q-btn
+        @click="checkCode"
+        rounded
+        size="lg"
+        color="primary"
+        type="submit"
+        :disable="v$.$error || v$.$invalid"
+        >{{ $t('reset.confirmcode_reset') }}
+      </q-btn>
+    </div>
   </div>
-  </form>
 </template>
 
 <script lang="ts" src="./requestresetpwd.ts">

src/views/updatepassword/updatepassword.ts

@@ -28,6 +28,8 @@ export default defineComponent({
     const $router = useRouter()
     const $route = useRoute()
 
+    const typePassword = ref('password')
+
     const emailsent = ref(false)
     const form = reactive({
       password: '',
@@ -93,6 +95,11 @@ export default defineComponent({
 
     }
 
+    function showPassword() {
+      //
+      typePassword.value = typePassword.value === 'password' ? 'text' : 'password'
+    }
+
 
     return {
       form,
@@ -100,6 +107,8 @@ export default defineComponent({
       submit,
       tools,
       v$,
+      showPassword,
+      typePassword,
     }
   }
 })

src/views/updatepassword/updatepassword.vue

@@ -17,7 +17,7 @@
 
           <q-input
             v-model="form.password"
-            type="password"
+            :type="typePassword"
             dense
             rounded outlined
             @blur="v$.password.$touch"
@@ -26,17 +26,27 @@
             maxlength="30"
             :label="$t('reg.password')">
 
+
+            <template v-slot:append>
+              <q-btn
+                tabindex="-1"
+                :icon="typePassword === `password` ? `fas fa-eye-slash` : `fas fa-eye`"
+                @click="showPassword"
+              >
+              </q-btn>
+            </template>
             <template v-slot:prepend>
               <q-icon name="vpn_key"/>
             </template>
 
+
           </q-input>
 
           <div class="q-my-sm"></div>
 
           <q-input
             v-model="form.repeatPassword"
-            type="password"
+            :type="typePassword"
             dense
             maxlength="30"
             rounded outlined
@@ -49,6 +59,14 @@
             <template v-slot:prepend>
               <q-icon name="vpn_key"/>
             </template>
+            <template v-slot:append>
+              <q-btn
+                tabindex="-1"
+                :icon="typePassword === `password` ? `fas fa-eye-slash` : `fas fa-eye`"
+                @click="showPassword"
+              >
+              </q-btn>
+            </template>
 
           </q-input>
 
@@ -61,8 +79,6 @@
           </div>
         </div>
 
-        <pre>{{ v$.$errors }}</pre>
-
       </div>
       <div v-else>
         <q-banner