Improved: error message and their translation and also improved suppo…

…rt to submit form on enter(hotwax#63)
ymaheshwari1 · Dec 18, 2023 · 138b32c · 138b32c
1 parent 7c642df
commit 138b32c
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 13 deletions.
diff --git a/src/locales/en.json b/src/locales/en.json
@@ -23,7 +23,7 @@
   "Sorry, your username or password is incorrect. Please try again.": "Sorry, your username or password is incorrect. Please try again.",
   "There is an already active session on for. Do you want to resume it, or would you prefer to log in again?": "There is an already active session on {oms} for {partyName}. Do you want to resume it, or would you prefer to log in again?",
   "Username": "Username",
-  "Username or Email cannot be empty, please fill both the fields.": "Username or Email cannot be empty, please fill both the fields.",
-  "Your password should be at least 5 characters long, it should contain at least one number, one alphabet and one from following special characters: !@#$%^&*.": "Your password should be at least 5 characters long, it should contain at least one number, one alphabet and one from following special characters: !@#$%^&*.",
+  "Username or Email cannot be empty.": "Username or Email cannot be empty.",
+  "Your password should be at least 5 characters long, it should contain at least one number, one alphabet and one special character.": "Your password should be at least 5 characters long, it should contain at least one number, one alphabet and one special character.",
   "Your request for reset password has been processed. Please check your email, for further instructions.": "Your request for reset password has been processed. Please check your email {email}, for further instructions."
 }
diff --git a/src/views/ForgotPassword.vue b/src/views/ForgotPassword.vue
@@ -2,7 +2,7 @@
   <ion-page>
     <ion-content>
       <div class="flex">
-        <form id="forgotPasswordForm" class="login-container" @keyup.enter="forgotPassword()" @submit.prevent="forgotPassword()">
+        <form id="forgotPasswordForm" class="login-container" @keyup.enter="forgotPassword()" @submit.prevent>
           <Logo />
           <section>
             <ion-item lines="full">
@@ -15,14 +15,14 @@
             </ion-item>
 
             <div class="ion-padding">
-              <ion-button name="forgotPasswordForm" color="primary" expand="block" type="submit">
+              <ion-button name="forgotPasswordForm" color="primary" expand="block" @click.prevent="forgotPassword()" @keyup.enter.stop>
                 {{ $t("Send Reset Link") }}
               </ion-button>
             </div>
 
             <ion-item lines="none" v-show="errorMessage">
               <ion-icon color="danger" slot="start" :icon="closeCircleOutline" />
-              <ion-label class="ion-text-wrap">{{ $t(errorMessage) }}</ion-label>
+              <ion-label class="ion-text-wrap">{{ errorMessage }}</ion-label>
             </ion-item>
 
             <ion-item lines="none" v-show="successMessage">
@@ -34,8 +34,8 @@
         </form>
       </div>
 
-      <ion-fab @click="router.push('/')" vertical="bottom" horizontal="end" slot="fixed">
-        <ion-fab-button color="medium">
+      <ion-fab vertical="bottom" horizontal="end" slot="fixed">
+        <ion-fab-button color="medium" @click="router.push('/')">
           <ion-icon :icon="gridOutline" />
         </ion-fab-button>
       </ion-fab>
@@ -95,7 +95,7 @@ export default defineComponent({
   methods: {
     async forgotPassword() {
       if(!this.username.trim() || !this.email.trim()) {
-        this.errorMessage = 'Username or Email cannot be empty, please fill both the fields.'
+        this.errorMessage = this.$t('Username or Email cannot be empty.')
         return;
       }
 
@@ -110,10 +110,10 @@ export default defineComponent({
         if(!hasError(resp)) {
           this.successMessage = this.$t('Your request for reset password has been processed. Please check your email, for further instructions.', { email: this.email })
         } else {
-          this.errorMessage = resp.data._ERROR_MESSAGE_
+          throw resp.data._ERROR_MESSAGE_
         }
       } catch(err) {
-        this.errorMessage = 'Failed to send password reset link, please try again or contact administrator.'
+        this.errorMessage = this.$t('Failed to send password reset link, please try again or contact administrator.')
         console.error(err)
       }
     },

diff --git a/src/views/ResetPassword.vue b/src/views/ResetPassword.vue
@@ -2,10 +2,10 @@
   <ion-page>
     <ion-content>
       <div class="flex">
-        <form class="login-container" @keyup.enter="resetPassword()" @submit.prevent="resetPassword()">
+        <form class="login-container" @keyup.enter="resetPassword()" @submit.prevent>
           <Logo />
           <section>
-            <ion-note class="ion-text-center" color="primary">{{ $t('Your password should be at least 5 characters long, it should contain at least one number, one alphabet and one from following special characters: !@#$%^&*.') }}</ion-note>
+            <ion-note class="ion-text-center" color="primary">{{ $t('Your password should be at least 5 characters long, it should contain at least one number, one alphabet and one special character.') }}</ion-note>
 
             <ion-item lines="full">
               <ion-label class="ion-text-wrap" position="fixed">{{ $t("New Password") }}</ion-label>
@@ -23,7 +23,7 @@
             </ion-item>
 
             <div class="ion-padding">
-              <ion-button color="primary" expand="block" type="submit">
+              <ion-button color="primary" expand="block" @click.prevent="resetPassword()" @keyup.enter.stop>
                 {{ $t("Reset Password") }}
               </ion-button>
             </div>
@@ -84,6 +84,16 @@ export default defineComponent({
       errorMessage: ''
     };
   },
+  ionViewWillLeave() {
+    // reset values to default, as we are using router.push to move to specific page and thus component does not gets unmount
+    this.errorMessage = ''
+    this.newPassword = ''
+    this.confirmPassword = ''
+    this.showConfirmPassword = false
+    this.showNewPassword = false
+    this.passwordMatchError = false
+    this.isUsernameEmpty = false
+  },
   methods: {
     async resetPassword() {
       if(this.newPassword !== this.confirmPassword) {