Forget Password e Update Password (1)

2021-09-17 17:30:01 +02:00
parent f351673917
commit d1eb9a9733
12 changed files with 198 additions and 316 deletions
--- a/src/views/requestresetpwd/request-resetpwd-validate.ts
+++ b/src/views/requestresetpwd/request-resetpwd-validate.ts
@@ -4,10 +4,8 @@ import { email, minLength, required, sameAs } from '@vuelidate/validators'
 import { complexity, registeredemail, registereduser, aportadorexist } from '../../validation'

 export const validations = {
-  form: {
-    email: {
-      email,
-      required
-    }
+  email: {
+    email,
+    required
  }
 }
--- a/src/views/requestresetpwd/requestresetpwd.ts
+++ b/src/views/requestresetpwd/requestresetpwd.ts
@@ -4,34 +4,17 @@ import { tools } from '@store/Modules/tools'
 import { Logo } from '../../components/logo'
 import { CTitleBanner } from '../../components/CTitleBanner'

-import { defineComponent, ref } from 'vue'
+import { defineComponent, reactive, ref } 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 useValidate from '@vuelidate/core'
-
-// https://learnvue.co/2020/01/getting-smart-with-vue-form-validation-vuelidate-tutorial/

 export default defineComponent({
  name: 'RequestResetPwd',
-  props: {
-    mystr: {
-      type: String,
-      required: true,
-    },
-    myval: {
-      type: Number,
-      required: true,
-      default: 0,
-    },
-    mybool: {
-      type: Boolean,
-      required: true,
-      default: false,
-    },
-  },
  components: { Logo, CTitleBanner },
  setup(props, { emit }) {
    const $q = useQuasar()
@@ -39,19 +22,23 @@ export default defineComponent({
    const userStore = useUserStore()
    const globalStore = useGlobalStore()

-    const v$ = useValidate()
-
    const emailsent = ref(false)
-    const form = ref({
+    const form = reactive({
      email: '',
      tokenforgot: ''
    })

+    // @ts-ignore
+    const v$ = useVuelidate(validations, form)
+
+    const emailRef = ref(null)
+
    function emailinviata() {
      return emailsent.value
    }

    function submit() {
+      console.log('submit')
      // v$.form.touch()

      /*if (v$.form.$error) {
@@ -59,12 +46,21 @@ export default defineComponent({
        return
      }*/

+      // @ts-ignore
+      emailRef.value!.validate()
+
+      // @ts-ignore
+      if (emailRef.value!.hasError) {
+        // form has error
+        tools.showNotif($q, t('reg.err.errore_generico'))
+        return
+      }
+
      $q.loading.show({ message: t('reset.incorso') })

-      form.value.tokenforgot = ''
+      form.tokenforgot = ''

-      console.log(form.value)
-      userStore.requestpwd(form.value)
+      userStore.requestpwd(form)
        .then((ris: any) => {
          if (ris.code === serv_constants.RIS_CODE_OK)
            emailsent.value = true
@@ -78,40 +74,13 @@ export default defineComponent({

    }

-    function errorMsg(cosa: string, item: any) {
-      try {
-        if (!item.$error) {
-          return ''
-        }
-        if (item.$params.email && !item.email) {
-          return t('reg.err.email')
-        }
-
-        if (item.required !== undefined) {
-          if (!item.required) {
-            return t('reg.err.required')
-          }
-        }
-
-        if (cosa === 'email') {
-          if (!item.isUnique) {
-            return t('reg.err.duplicate_email')
-          }
-        }
-
-        return ''
-      } catch (error) {
-        // console.log("ERR : " + error);
-      }
-    }
-
-
    return {
      emailinviata,
-      errorMsg,
      submit,
      form,
+      emailRef,
      v$,
+      tools,
    }
  }
 })
--- a/src/views/requestresetpwd/requestresetpwd.vue
+++ b/src/views/requestresetpwd/requestresetpwd.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="row justify-center text-center padding">
-    <div class="q-gutter-sm q-ma-sm" style="max-width: 800px; margin: auto;">
+  <form @submit.prevent.stop="submit" class="row justify-center text-center padding">
+    <div class="q-gutter-sm q-ma-sm">

-      <div v-if="!emailinviata">
+      <div v-if="!emailinviata()">
        <q-banner
          rounded
          class="bg-primary text-white"
@@ -12,13 +12,14 @@
        <br>

        <q-input
+          ref="emailRef"
          v-model="form.email"
          rounded outlined
          autocomplete="email"
-          :error="v$.form.email.$error"
-          :error-message="errorMsg('email', v$.form.email)"
          maxlength="50"
          debounce="1000"
+          :error="v$.email.$error"
+          :error-message="tools.errorMsg( 'email', v$.email)"
          :label="$t('reg.email')">

          <template v-slot:prepend>
@@ -31,8 +32,7 @@

        <div class="center q-ma-sm">
          <q-btn
-            rounded size="lg" color="primary" @click="submit" :disable="v$.$error">
-            {{ $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>

@@ -54,7 +54,7 @@


    </div>
-  </div>
+  </form>
 </template>

 <script lang="ts" src="./requestresetpwd.ts">
--- a/src/views/updatepassword/updatepassword.scss
+++ b/src/views/updatepassword/updatepassword.scss
@@ -0,0 +1,6 @@
+.mypanel {
+  padding: 10px;
+  margin: 10px;
+
+}
+
--- a/src/views/updatepassword/updatepassword.ts
+++ b/src/views/updatepassword/updatepassword.ts
@@ -15,22 +15,6 @@ import { useRoute, useRouter } from 'vue-router'

 export default defineComponent({
  name: 'Updatepassword',
-  props: {
-    mystr: {
-      type: String,
-      required: true,
-    },
-    myval: {
-      type: Number,
-      required: true,
-      default: 0,
-    },
-    mybool: {
-      type: Boolean,
-      required: true,
-      default: false,
-    },
-  },
  components: { Logo, CTitleBanner },
  setup(props, { emit }) {
    const $q = useQuasar()
@@ -52,11 +36,6 @@ export default defineComponent({
    // @ts-ignore
    const v$ = useVuelidate(validations, form)

-    function created() {
-      // load()
-    }
-
-
    function submit() {
      v$.value.$touch()

@@ -95,62 +74,13 @@ export default defineComponent({

    }

-    function errorMsg(cosa: string, item: any) {
-      try {
-        if (!item.$error) {
-          return ''
-        }
-        // console.log('errorMsg', cosa, item)
-        if (item.$params.email && !item.email) {
-          return t('reg.err.email')
-        }
-
-        if (cosa === 'repeatpassword') {
-          if (!item.sameAsPassword) {
-            return t('reg.err.sameaspassword')
-          }
-        }
-
-        // console.log('item', item)
-
-        if (item.minLength !== undefined) {
-          if (!item.minLength) {
-            return t('reg.err.atleast') + ` ${item.$params.minLength.min} ` + t('reg.err.char')
-          }
-        }
-        if (item.complexity !== undefined) {
-          if (!item.complexity) {
-            return t('reg.err.complexity')
-          }
-        }
-// if (!item.maxLength) { return t('reg.err.notmore') + ` ${item.$params.maxLength.max} ` + t('reg.err.char') }
-
-        if (item.required !== undefined) {
-          if (!item.required) {
-            return t('reg.err.required')
-          }
-        }
-
-        // console.log('    ....avanti')
-        if (cosa === 'email') {
-          // console.log("EMAIL " + item.isUnique);
-          // console.log(item);
-          if (!item.isUnique) {
-            return t('reg.err.duplicate_email')
-          }
-        }
-
-        return ''
-      } catch (error) {
-        // console.log("ERR : " + error);
-      }
-    }

    return {
      form,
      emailsent,
      submit,
-      errorMsg,
+      tools,
+      v$,
    }
  }
 })
--- a/src/views/updatepassword/updatepassword.vue
+++ b/src/views/updatepassword/updatepassword.vue
@@ -1,75 +1,84 @@
 <template>
  <div class="mypanel">
+    <form @submit.prevent.stop="submit" class="q-col-gutter-lg row justify-center text-center padding q-pa-md">

-    <div v-if="!emailsent">
-      <q-banner
-        rounded
-        class="bg-primary text-white"
-        style="text-align: center;">
-        <span class="mybanner">{{ $t('reset.title_update_pwd')}}</span>
-      </q-banner>
-      <br>
+      <div v-if="!emailsent">
+        <q-banner
+          rounded
+          dense
+          class="bg-primary text-white"
+          style="text-align: center;">
+          <span class="mybanner">{{ $t('reset.title_update_pwd') }}</span>
+        </q-banner>

-      <div class="column">
+        <div class="q-my-lg"></div>

-        <q-input
-          v-model="form.password"
-          type="password"
-          rounded outlined
-          @blur="$v.form.password.$touch"
-          :error="$v.form.password.$error"
-          :error-message="`${errorMsg('password', $v.form.password)}`"
-          maxlength="30"
-          :label="$t('reg.password')">
+        <div class="column">

-          <template v-slot:prepend>
-            <q-icon name="vpn_key"/>
-          </template>
+          <q-input
+            v-model="form.password"
+            type="password"
+            dense
+            rounded outlined
+            @blur="v$.password.$touch"
+            :error="v$.password.$error"
+            :error-message="`${tools.errorMsg('password', v$.password)}`"
+            maxlength="30"
+            :label="$t('reg.password')">

-        </q-input>
+            <template v-slot:prepend>
+              <q-icon name="vpn_key"/>
+            </template>

-        <q-input
-          v-model="form.repeatPassword"
-          type="password"
-          maxlength="30"
-          rounded outlined
-          @blur="$v.form.repeatPassword.$touch"
-          :error="$v.form.repeatPassword.$error"
-          :error-message="`${errorMsg('repeatpassword', $v.form.repeatPassword)}`"
+          </q-input>

-          :label="$t('reg.repeatPassword')">
+          <div class="q-my-sm"></div>

-          <template v-slot:prepend>
-            <q-icon name="vpn_key"/>
-          </template>
+          <q-input
+            v-model="form.repeatPassword"
+            type="password"
+            dense
+            maxlength="30"
+            rounded outlined
+            @blur="v$.repeatPassword.$touch"
+            :error="v$.repeatPassword.$error"
+            :error-message="`${tools.errorMsg('repeatpassword', v$.repeatPassword)}`"

-        </q-input>
+            :label="$t('reg.repeatPassword')">

+            <template v-slot:prepend>
+              <q-icon name="vpn_key"/>
+            </template>

-        <div align="center">
-          <q-btn rounded size="lg" color="primary" @click="submit" :disable="$v.$error">
-            {{$t('reset.update_password')}}
-          </q-btn>
+          </q-input>
+
+          <div class="q-my-sm"></div>
+
+          <div align="center">
+            <q-btn rounded size="lg" color="primary" type="submit" :disable="v$.$error">
+              {{ $t('reset.update_password') }}
+            </q-btn>
+          </div>
        </div>
+
+      </div>
+      <div v-else>
+        <q-banner
+          rounded
+          class="bg-primary text-white"
+          style="text-align: center;">
+          <span class="mybanner">{{ $t('reset.email_sent') }}</span>
+        </q-banner>
+        <br>
+
+        <div>
+          {{ $t('reset.check_email') }}
+        </div>
+
      </div>

-    </div>
-    <div v-else>
-      <q-banner
-        rounded
-        class="bg-primary text-white"
-        style="text-align: center;">
-        <span class="mybanner">{{ $t('reset.email_sent')}}</span>
-      </q-banner>
-      <br>
-
-      <div>
-        {{ $t('reset.check_email')}}
-      </div>
-
-    </div>
-

+    </form>
  </div>
 </template>

@@ -77,5 +86,5 @@
 </script>

 <style lang="scss" scoped>
-  @import './updatepassword';
+@import './updatepassword';
 </style>