Forget Password e Update Password (1)

src/common/pattern.ts

@@ -16,5 +16,5 @@ export class Patterns {
    *
    *  8 to 20 characters string with at least one digit, one upper case letter, one lower case letter and one special symbol
    */
-  public static Password = /^((?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,30})/i
+  public static Password = /^((?=.*[A-Z])(?=.*\d)(?=.*[@#*=])(?!.* ).{8,30})/i
 }

src/components/CSignIn/CSignIn.ts

@@ -62,33 +62,6 @@ export default defineComponent({
       return '/requestresetpwd'
     }
 
-    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) {
-          return t('reg.err.required')
-        }
-        if (!item.minLength) {
-          return t('reg.err.atleast') + ' ${item.$params.minLength.min} ' + t('reg.err.char')
-        }
-        if (!item.maxLength) {
-          return t('reg.err.notmore') + ` ${item.$params.maxLength.max} ` + t('reg.err.char')
-        }
-        return ''
-      } catch (err) {
-        // console.log("ERR : " + error);
-      }
-      */
-
-    }
-
     function isError() {
       if (refUsername.value) {
         // @ts-ignore
@@ -172,7 +145,6 @@ export default defineComponent({
       refUsername,
       onReset,
       onSubmit,
-      errorMsg,
       signin,
       getlinkforgetpwd,
       myForm,

src/components/CSignUp/CSignUp.ts

@@ -87,74 +87,6 @@ export default defineComponent({
       return process.env
     }
 
-    function errorMsg(cosa: string, item: any) {
-      try {
-        if (!item.$error) {
-          return ''
-        }
-        console.log('errorMsg', cosa, item)
-
-        if (cosa === 'repeatpassword') {
-          if (!item.sameAsPassword) {
-            return t('reg.err.sameaspassword')
-          }
-        }
-
-        if (item.email) {
-          if (item.email.$invalid)
-            return t('reg.err.email')
-        }
-
-        if (item.minLength !== undefined) {
-          if (item.minLength.$invalid) {
-            return t('reg.err.atleast') + ` ${item.minLength.$params.min} ` + t('reg.err.char')
-          }
-        }
-        if (item.complexity !== undefined) {
-          if (item.complexity.$invalid) {
-            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.$invalid) {
-            console.log('required')
-            return t('reg.err.required')
-          }
-        }
-
-        console.log('  cosa', cosa)
-
-        // console.log('    ....avanti')
-        if (cosa === 'email') {
-          // console.log("EMAIL " + item.isUnique);
-          // console.log(item);
-          if (!item.email.$invalid) {
-            return t('reg.err.duplicate_email')
-          }
-        } else if (cosa === 'username') {
-          // console.log(item);
-          console.log('username')
-          console.log(item.$error)
-          if (!item.registereduser.$invalid) {
-            return t('reg.err.duplicate_username')
-          }
-        } else if (cosa === 'aportador_solidario') {
-          // console.log(item);
-          if (!item.aportadorexist) {
-            // console.log('!item.aportadorexist !')
-            return t('reg.err.aportador_not_exist')
-          }
-        } else if ((cosa === 'name') || (cosa === 'surname')) {
-          // console.log(item);
-        }
-
-        return ''
-      } catch (error) {
-        // console.log("ERR : " + error);
-      }
-    }
 
     function changeemail() {
       signup.email = tools.removespaces(signup.email!)
@@ -223,7 +155,6 @@ export default defineComponent({
     }
 
     return {
-      errorMsg,
       changeemail,
       changeusername,
       submitOk,

src/components/CSignUp/CSignUp.vue

@@ -16,7 +16,7 @@
         @blur="v$.email.$touch"
         @input="changeemail()"
         :error="v$.email.$error"
-        :error-message="errorMsg('email', v$.email)"
+        :error-message="tools.errorMsg( 'email', v$.email)"
         maxlength="50"
         debounce="3000"
         :label="$t('reg.email')">
@@ -36,7 +36,7 @@
         @keydown.space="(event) => event.preventDefault()"
         maxlength="20"
         debounce="1000"
-        :error-message="errorMsg('username', v$.username)"
+        :error-message="tools.errorMsg( 'username', v$.username)"
         :label="$t('reg.username')">
 
         <template v-slot:prepend>
@@ -52,7 +52,7 @@
         :error="v$.name.$error"
         maxlength="30"
         debounce="1000"
-        :error-message="errorMsg('name', v$.name)"
+        :error-message="tools.errorMsg( 'name', v$.name)"
         :label="$t('reg.name')">
 
         <template v-slot:prepend>
@@ -68,7 +68,7 @@
         @blur="v$.surname.$touch"
         maxlength="30"
         debounce="1000"
-        :error-message="errorMsg('surname', v$.surname)"
+        :error-message="tools.errorMsg( 'surname', v$.surname)"
         :label="$t('reg.surname')">
 
         <template v-slot:prepend>
@@ -83,7 +83,7 @@
         rounded outlined
         @blur="v$.password.$touch"
         :error="v$.password.$error"
-        :error-message="`${errorMsg('password', v$.password)}`"
+        :error-message="`${tools.errorMsg( 'password', v$.password)}`"
         maxlength="30"
         debounce="1000"
         :label="$t('reg.password')">
@@ -101,7 +101,7 @@
         rounded outlined
         @blur="v$.repeatPassword.$touch"
         :error="v$.repeatPassword.$error"
-        :error-message="`${errorMsg('repeatpassword', v$.repeatPassword)}`"
+        :error-message="`${tools.errorMsg( 'repeatpassword', v$.repeatPassword)}`"
 
         :label="$t('reg.repeatPassword')">
 
@@ -152,7 +152,7 @@
         color="secondary"
         @blur="v$.terms.$touch"
         :error="v$.terms.$error"
-        :error-message="`${errorMsg('terms', v$.terms)}`"
+        :error-message="`${tools.errorMsg( 'terms', v$.terms)}`"
         :label="$t('reg.terms')">
 
       </q-checkbox>

src/store/Modules/tools.ts

@@ -42,6 +42,8 @@ export interface INotify {
   icon?: string | ''
 }
 
+const { t } = useI18n()
+
 export const tools = {
   CAN_EDIT: 'q-ce',
   TABBED_DASHBOARD: 't-db',
@@ -1443,7 +1445,7 @@ export const tools = {
 
 
   askfornotification($q: any) {
-    const { t } = useI18n()
+
     console.log('askfornotification', $q)
     this.showNotif($q, t('notification.waitingconfirm'), { color: 'positive', icon: 'notifications' })
 
@@ -1499,7 +1501,7 @@ export const tools = {
     }
 
     const globalStore = useGlobalStore()
-    const { t } = useI18n()
+
 
     return globalStore.saveTable(mydata)
       .then((record) => {
@@ -1698,7 +1700,7 @@ export const tools = {
   executefunc(mythisq: any, table: string, func: number, par: IParamDialog, mythis?: any) {
     const globalStore = useGlobalStore()
     const calendarStore = useCalendarStore()
-    const { t } = useI18n()
+
     if (func === lists.MenuAction.DELETE) {
       // console.log('param1', par.param1)
       calendarStore.CancelBookingEvent({
@@ -1844,7 +1846,7 @@ export const tools = {
   },
 
   async saveFieldToServer(mythisq: any, table: string, id: any, mydata: any, notif = true) {
-    const { t } = useI18n()
+
     const mydatatosave = {
       id,
       table,
@@ -2377,7 +2379,7 @@ export const tools = {
 
   getstrDateEmailTime(mytimestamp: Date | number | string | undefined) {
     // console.log('getstrDate', mytimestamp)
-    const { t } = useI18n()
+
     if (mytimestamp) return `${date.formatDate(mytimestamp, 'DD/MM/YYYY')} ${t('cal.starttime')} ${date.formatDate(mytimestamp, 'HH:mm')}`
     return ''
   },
@@ -2584,7 +2586,7 @@ export const tools = {
 
   showNotificationExample() {
     let options: any = null
-    const { t } = useI18n()
+
     if ('serviceWorker' in navigator) {
       options = {
         body: t('notification.subscribed'),
@@ -2839,7 +2841,7 @@ export const tools = {
     }
   }
   ,
-  gettextdescr(data: { [index: string]: any }, numdescr = 'description',
+  gettextdescr(data: {[index: string]: any}, numdescr = 'description',
   ) {
     if (!!data[numdescr]) {
       if (data[numdescr][toolsext.getLocale()])
@@ -2941,7 +2943,7 @@ export const tools = {
 
   },
   getappname(short: boolean) {
-    const { t } = useI18n()
+
     if (short) {
       return t('ws.siteshortname')
     }
@@ -2974,7 +2976,7 @@ export const tools = {
 
   loginInCorso(mythisq: any) {
     // console.log('loginInCorso')
-    const { t } = useI18n()
+
 
     const msg = t('login.incorso')
     // if (process.env.DEBUG) {
@@ -2993,7 +2995,7 @@ export const tools = {
   SignIncheckErrors(mythisq: any, $router: Router, route: any, riscode: any, ispageLogin ?: boolean) {
     // console.log('SignIncheckErrors: ', riscode)
     const $q = useQuasar()
-    const { t } = useI18n()
+
     const globalStore = useGlobalStore()
     const userStore = useUserStore()
 
@@ -3071,7 +3073,7 @@ export const tools = {
     const endload = true
 
     const userStore = useUserStore()
-    const { t } = useI18n()
+
 
     if (riscode === serv_constants.RIS_CODE_EMAIL_ALREADY_EXIST) {
       this.showNotif(mythisq, t('reg.err.duplicate_email'))
@@ -3144,7 +3146,7 @@ export const tools = {
   },
   CancelEvent(mythisq: any, eventparam: IEvents) {
     console.log('CancelEvent ', eventparam)
-    this.askConfirm(mythisq, translate('cal.event'), translate('cal.cancelevent') + ' ' + this.gettextevent(eventparam) + '?', translate('dialog.yes'), translate('dialog.no'),  '', lists.MenuAction.DELETE_EVENT, 0, {
+    this.askConfirm(mythisq, translate('cal.event'), translate('cal.cancelevent') + ' ' + this.gettextevent(eventparam) + '?', translate('dialog.yes'), translate('dialog.no'), '', lists.MenuAction.DELETE_EVENT, 0, {
       param1: eventparam,
       param2: true,
     })
@@ -3152,7 +3154,7 @@ export const tools = {
   AskGiaPartecipatoZoom(mythis: any, user: any) {
     console.log('AskGiaPartecipatoZoom', user.username)
     const $q = useQuasar()
-    this.askConfirm($q, translate('steps.zoom_gia_partecipato'), translate('steps.zoom_gia_partecipato'), translate('dialog.yes'), translate('dialog.no'),  '', lists.MenuAction.ZOOM_GIA_PARTECIPATO, 0, {
+    this.askConfirm($q, translate('steps.zoom_gia_partecipato'), translate('steps.zoom_gia_partecipato'), translate('dialog.yes'), translate('dialog.no'), '', lists.MenuAction.ZOOM_GIA_PARTECIPATO, 0, {
       param1: user,
       param2: user,
       param3: 'Confermato',
@@ -3309,7 +3311,7 @@ export const tools = {
     if (numbercell) {
       if (numbercell.substring(0, 1) !== '+') mynum = intcode + mynum
       else mynum = mynum.substring(1)
-    } else  {
+    } else {
       return ''
     }
 
@@ -3561,7 +3563,7 @@ export const tools = {
 
   copyStringToClipboard(mystr: string, show: boolean) {
     const $q = useQuasar()
-    const { t } = useI18n()
+
     copyToClipboard(mystr).then(() => {
       let msg = t('dialog.copyclipboard')
       if (show)
@@ -4251,6 +4253,71 @@ export const tools = {
     return false
   },
 
+  errorMsg(cosa: string, item: any) {
+    try {
+      if (!item.$error) {
+        return ''
+      }
+      console.log('errorMsg', cosa, item)
+
+      if (cosa === 'repeatpassword') {
+        if (item.sameAsPassword) {
+          if (item.sameAsPassword.$invalid) {
+            return t('reg.err.sameaspassword')
+          }
+        }
+      }
+
+      if (item.email) {
+        if (item.email.$invalid)
+          return t('reg.err.email')
+      }
+
+      if (item.minLength !== undefined) {
+        if (item.minLength.$invalid) {
+          return t('reg.err.atleast') + ` ${item.minLength.$params.min} ` + t('reg.err.char')
+        }
+      }
+      if (item.complexity !== undefined) {
+        if (item.complexity.$invalid) {
+          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.$invalid) {
+          return t('reg.err.required')
+        }
+      }
+
+      // console.log('    ....avanti')
+      if (cosa === 'email') {
+        // console.log("EMAIL " + item.isUnique);
+        // console.log(item);
+        if (item.registeredemail.$invalid) {
+          return t('reg.err.duplicate_email')
+        }
+      } else if (cosa === 'username') {
+        if (item.registereduser.$invalid) {
+          return t('reg.err.duplicate_username')
+        }
+      } else if (cosa === 'aportador_solidario') {
+        // console.log(item);
+        if (item.aportadorexist.$invalid) {
+          // console.log('!item.aportadorexist !')
+          return t('reg.err.aportador_not_exist')
+        }
+      } else if ((cosa === 'name') || (cosa === 'surname')) {
+        // console.log(item);
+      }
+
+      return ''
+    } catch (error) {
+      // console.log("ERR : " + error);
+    }
+  },
+
 // getLocale() {
   //   if (navigator.languages && navigator.languages.length > 0) {
   //     return navigator.languages[0]

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: {
+    email,
-      email,
+    required
-      required
-    }
   }
 }

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)
-      userStore.requestpwd(form.value)
         .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,
     }
   }
 })

src/views/requestresetpwd/requestresetpwd.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="row justify-center text-center padding">
+  <form @submit.prevent.stop="submit" class="row justify-center text-center padding">
-    <div class="q-gutter-sm q-ma-sm" style="max-width: 800px; margin: auto;">
+    <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">
+            rounded size="lg" color="primary" type="submit" :disable="v$.$error || v$.$invalid">{{ $t('reset.send_reset_pwd') }}
-            {{ $t('reset.send_reset_pwd') }}
           </q-btn>
         </div>
 
@@ -54,7 +54,7 @@
 
 
     </div>
-  </div>
+  </form>
 </template>
 
 <script lang="ts" src="./requestresetpwd.ts">

src/views/updatepassword/updatepassword.scss

@@ -0,0 +1,6 @@
+.mypanel {
+  padding: 10px;
+  margin: 10px;
+
+}
+

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

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">
+      <div v-if="!emailsent">
-      <q-banner
+        <q-banner
-        rounded
+          rounded
-        class="bg-primary text-white"
+          dense
-        style="text-align: center;">
+          class="bg-primary text-white"
-        <span class="mybanner">{{ $t('reset.title_update_pwd')}}</span>
+          style="text-align: center;">
-      </q-banner>
+          <span class="mybanner">{{ $t('reset.title_update_pwd') }}</span>
-      <br>
+        </q-banner>
 
-      <div class="column">
+        <div class="q-my-lg"></div>
 
-        <q-input
+        <div class="column">
-          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')">
 
-          <template v-slot:prepend>
+          <q-input
-            <q-icon name="vpn_key"/>
+            v-model="form.password"
-          </template>
+            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
+          </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)}`"
 
-          :label="$t('reg.repeatPassword')">
+          <div class="q-my-sm"></div>
 
-          <template v-slot:prepend>
+          <q-input
-            <q-icon name="vpn_key"/>
+            v-model="form.repeatPassword"
-          </template>
+            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-input>
-          <q-btn rounded size="lg" color="primary" @click="submit" :disable="$v.$error">
+
-            {{$t('reset.update_password')}}
+          <div class="q-my-sm"></div>
-          </q-btn>
+
+          <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>