Improved: error message support on reset and forgot password page(hot…

…wax#63)
ymaheshwari1 · Oct 27, 2023 · 3accce2 · 3accce2
1 parent 150114b
commit 3accce2
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 40 deletions.
diff --git a/src/router/index.ts b/src/router/index.ts
@@ -26,10 +26,22 @@ const resetGuard = async (to: any, from: any, next: any) => {
   const authStore = useAuthStore()
   if (authStore.requirePasswordChange) {
     next('/resetPassword')
+    return;
   }
   next()
 };
 
+const forgotPassword = async (to: any, from: any, next: any) => {
+  const authStore = useAuthStore()
+
+  if (from.path !== '/login' && authStore.isAuthenticated) {
+    next('/')
+    return;
+  }
+  next()
+  return;
+};
+
 const routes: Array<RouteRecordRaw> = [
   {
     path: '/',

diff --git a/src/services/UserService.ts b/src/services/UserService.ts
@@ -50,7 +50,7 @@ const resetPassword = async(params: any) : Promise<any> => {
 
 const forgotPassword = async(params: any) : Promise<any> => {
   return api({
-    url: "service/sendResetPasswordMailToPartyV2",
+    url: "/sendResetPassword",
     method: "post",
     data: params
   })

diff --git a/src/views/ForgotPassword.vue b/src/views/ForgotPassword.vue
@@ -7,11 +7,11 @@
           <section>
             <ion-item lines="full">
               <ion-label position="fixed">{{ $t("Username") }}</ion-label>
-              <ion-input @ionFocus="errorMessage = ''" name="username" v-model="username" id="username" type="text" />
+              <ion-input @ionFocus="clearMessages" name="username" v-model="username" id="username" type="text" />
             </ion-item>
             <ion-item lines="none">
               <ion-label position="fixed">{{ $t("Email") }}</ion-label>
-              <ion-input @ionFocus="errorMessage = ''" name="email" v-model="email" id="email" type="email"/>
+              <ion-input @ionFocus="clearMessages" name="email" v-model="email" id="email" type="email"/>
             </ion-item>
 
             <div class="ion-padding">
@@ -26,13 +26,19 @@
             </ion-item>
 
             <ion-item lines="none" v-show="successMessage">
-              <ion-icon color="danger" slot="start" :icon="checkmarkCircleOutline" />
+              <ion-icon color="success" slot="start" :icon="checkmarkCircleOutline" />
               <ion-label class="ion-text-wrap">{{ $t(successMessage) }}</ion-label>
             </ion-item>
           </section>
           <ion-button name="loginButton" fill="clear" class="ion-text-center" @click.stop="router.push('/login')">{{ $t('Login') }}</ion-button>
         </form>
       </div>
+
+      <ion-fab @click="router.push('/')" vertical="bottom" horizontal="end" slot="fixed">
+        <ion-fab-button color="medium">
+          <ion-icon :icon="gridOutline" />
+        </ion-fab-button>
+      </ion-fab>
     </ion-content>
   </ion-page>
 </template>
@@ -42,6 +48,8 @@
 import {
   IonButton,
   IonContent,
+  IonFab,
+  IonFabButton,
   IonIcon,
   IonInput,
   IonItem,
@@ -52,7 +60,7 @@ import { defineComponent } from "vue";
 import { useRouter } from "vue-router";
 import { useAuthStore } from "@/store/auth";
 import Logo from '@/components/Logo.vue';
-import { checkmarkCircleOutline, closeCircleOutline } from 'ionicons/icons'
+import { checkmarkCircleOutline, closeCircleOutline, gridOutline } from 'ionicons/icons'
 import { hasError } from "@/adapter";
 import { UserService } from "@/services/UserService"
 
@@ -61,6 +69,8 @@ export default defineComponent({
   components: {
     IonButton,
     IonContent,
+    IonFab,
+    IonFabButton,
     IonIcon,
     IonInput,
     IonItem,
@@ -80,12 +90,10 @@ export default defineComponent({
     // clearning the data on page leave
     this.username = ''
     this.email = ''
-    this.errorMessage = ''
-    this.successMessage = ''
+    this.clearMessages();
   },
   methods: {
     async forgotPassword() {
-
       if(!this.username.trim() || !this.email.trim()) {
         this.errorMessage = 'Username or Email cannot be empty, please fill both the fields.'
         return;
@@ -108,6 +116,10 @@ export default defineComponent({
         this.errorMessage = 'Failed to send password reset link, please try again or contact administrator.'
         console.error(err)
       }
+    },
+    clearMessages() {
+      this.errorMessage = ''
+      this.successMessage = ''
     }
   },
   setup () {
@@ -117,6 +129,7 @@ export default defineComponent({
       authStore,
       checkmarkCircleOutline,
       closeCircleOutline,
+      gridOutline,
       router
     };
   }

diff --git a/src/views/Login.vue b/src/views/Login.vue
@@ -41,10 +41,10 @@
               </ion-button>
             </div>
 
-            <p class="ion-text-center" color="primary" v-show="errorMessage">{{ errorMessage }}</p>
+            <p class="ion-text-center" v-show="errorMessage">{{ errorMessage }}</p>
 
             <ion-button fill="clear" @click="forgotPassword">
-              <p class="ion-text-center" color="primary">{{ $t('Forgot Password?') }}</p>
+              <p class="ion-text-center">{{ $t('Forgot Password?') }}</p>
             </ion-button>
           </section>
         </form>

diff --git a/src/views/ResetPassword.vue b/src/views/ResetPassword.vue
@@ -5,17 +5,18 @@
         <form class="login-container" @keyup.enter="resetPassword()" @submit.prevent="resetPassword()">
           <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-item lines="full">
               <ion-label class="ion-text-wrap" position="fixed">{{ $t("New Password") }}</ion-label>
-              <ion-input @ionFocus="passwordMatchError = false" name="newPassword" v-model="newPassword" id="newPassword" :type="showNewPassword ? 'text' : 'password'" />
-              <ion-note slot="error">Invalid email</ion-note>
+              <ion-input autocomplete="new-password" @ionFocus="errorMessage = ''" name="newPassword" v-model="newPassword" id="newPassword" :type="showNewPassword ? 'text' : 'password'" />
               <ion-button fill="clear" @click="showNewPassword = !showNewPassword">
                 <ion-icon :icon="showNewPassword ? eyeOutline : eyeOffOutline"/>
               </ion-button>
             </ion-item>
             <ion-item lines="none">
               <ion-label class="ion-text-wrap" position="fixed">{{ $t("Confirm Password") }}</ion-label>
-              <ion-input @ionFocus="passwordMatchError = false" name="confirmPassword" v-model="confirmPassword" id="confirmPassword" :type="showConfirmPassword ? 'text' : 'password'"/>
+              <ion-input @ionFocus="errorMessage = ''" name="confirmPassword" v-model="confirmPassword" id="confirmPassword" :type="showConfirmPassword ? 'text' : 'password'"/>
               <ion-button fill="clear" @click="showConfirmPassword = !showConfirmPassword">
                 <ion-icon :icon="showConfirmPassword ? eyeOutline : eyeOffOutline"/>
               </ion-button>
@@ -27,9 +28,9 @@
               </ion-button>
             </div>
 
-            <ion-item lines="none" v-show="passwordMatchError">
+            <ion-item lines="none" v-show="errorMessage">
               <ion-icon color="danger" slot="start" :icon="closeCircleOutline" />
-              <ion-label>{{ $t('Passwords do not match. Please try again.') }}</ion-label>
+              <ion-label class="ion-text-wrap">{{ errorMessage }}</ion-label>
             </ion-item>
           </section>
         </form>
@@ -47,16 +48,14 @@ import {
   IonInput,
   IonItem,
   IonLabel,
-  IonPage,
   IonNote,
-  loadingController
+  IonPage
 } from "@ionic/vue";
 import { defineComponent } from "vue";
 import { useRouter } from "vue-router";
 import { useAuthStore } from "@/store/auth";
 import Logo from '@/components/Logo.vue';
 import { closeCircleOutline, eyeOutline, eyeOffOutline, gridOutline } from 'ionicons/icons'
-import { translate } from "@/i18n";
 import { UserService } from '@/services/UserService'
 import { hasError } from "@/adapter";
 
@@ -69,8 +68,8 @@ export default defineComponent({
     IonInput,
     IonItem,
     IonLabel,
-    IonPage,
     IonNote,
+    IonPage,
     Logo
   },
   data () {
@@ -81,40 +80,25 @@ export default defineComponent({
       passwordMatchError: false,
       showConfirmPassword: false,
       showNewPassword: false,
-      isUsernameEmpty: false
+      isUsernameEmpty: false,
+      errorMessage: ''
     };
   },
   methods: {
-    async presentLoader(message: string) {
-      if (!this.loader) {
-        this.loader = await loadingController
-          .create({
-            message: translate(message),
-            translucent: true,
-            backdropDismiss: false
-          });
-      }
-      this.loader.present();
-    },
-    dismissLoader() {
-      if (this.loader) {
-        this.loader.dismiss();
-        this.loader = null as any;
-      }
-    },
     async resetPassword() {
       if(this.newPassword !== this.confirmPassword) {
-        this.passwordMatchError = true
+        this.errorMessage = 'Passwords do not match. Please try again'
         return;
       }
 
       const params = {
         newPassword: this.newPassword,
         newPasswordVerify: this.confirmPassword
       }
+      let resp: any;
 
       try {
-        const resp = await UserService.resetPassword(params);
+        resp = await UserService.resetPassword(params);
 
         if(!hasError(resp) && resp?.data?.successMessage) {
           // once password is changed, resetting the value to false
@@ -127,7 +111,8 @@ export default defineComponent({
         } else {
           throw resp.data;
         }
-      } catch(err) {
+      } catch(err: any) {
+        this.errorMessage = 'Failed to reset password, please try again and follow the instructions for creating a new password.'
         console.error('Failed to reset password', err)
       }
     }