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

2022-12-11 18:04:11 +01:00
parent cf990db03a
commit c743977b66
9 changed files with 146 additions and 44 deletions
--- a/src/boot/axios.ts
+++ b/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)
-//       so you can easily perform requests against your app's API
-//
+  // ^ ^ ^ this will allow you to use this.$api (for Vue Options API form)
+  //       so you can easily perform requests against your app's API
+  //
 })

 export { axios }
--- a/src/statics/lang/it.js
+++ b/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',
--- a/src/store/UserStore.ts
+++ b/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
        })
--- a/src/views/requestresetpwd/requestresetpwd.ts
+++ b/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
    }
@@ -69,12 +76,36 @@ export default defineComponent({
            tools.showNegativeNotif($q, t('reg.err.email_not_exist'))
          $q.loading.hide()
        }).catch((err: any) => {
-        console.log('ERROR = ' + err.error)
-        $q.loading.hide()
-      })
+          console.log('ERROR = ' + err.error)
+          $q.loading.hide()
+        })

    }

+    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,
    }
  }
 })
--- a/src/views/requestresetpwd/requestresetpwd.vue
+++ b/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 v-if="!emailinviata()">
+      <div>
        <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)"
-          :label="$t('reg.email')">
-
+          :error-message="tools.errorMsg('email', v$.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 v-else>
-        <q-banner
-          rounded
-          class="bg-positive text-white"
-          style="text-align: center;">
-          <span class="mybanner">{{ $t('reset.email_sent') }}</span>
-        </q-banner>
-        <br>
-
-        <div>
-          <strong>{{ $t('reset.check_email') }}</strong>
-        </div>
-
-      </div>
-
-
    </div>
  </form>
+  <div v-else>
+    <q-banner rounded class="bg-positive text-white" style="text-align: center">
+      <span class="mybanner">{{ $t('reset.email_sent') }}</span>
+    </q-banner>
+    <br />
+
+    <div>
+      <strong>{{ $t('reset.check_email') }}</strong>
+    </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>
 </template>

 <script lang="ts" src="./requestresetpwd.ts">
--- a/src/views/updatepassword/updatepassword.ts
+++ b/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,
    }
  }
 })
--- a/src/views/updatepassword/updatepassword.vue
+++ b/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