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

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,
     }
   }
 })

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">

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