fix

src/abstraction/repository/authRepository.js

@@ -40,4 +40,9 @@ export default class AuthRepository {
         let response = await axios.post(url("verifyCode"), json);
         return getJson(response.data)
     }
+    async resendCode(data) {
+        let json = setData(data);
+        let response = await axios.post(url("resendCode"), json);
+        return response.data.data;
+    }
 }

src/router/url.js

@@ -7,6 +7,7 @@ const urls = {
   forgotPassword: "auth/forget-password",
   logout: "auth/logout",
   verifyCode: "auth/verify-email",
+  resendCode: "auth/resend-email-verification-code",
   // programs
   indexProgram: "admin/courses",
   showProgram: "admin/courses/:course",

src/views/ForgotPassword.vue

@@ -10,8 +10,10 @@
         <template #auth>
           <v-col cols="5" class="d-flex align-center pl-10 pt-4">
             <div class="w-100">
-              <div class="text-uppercase wa__f__ta auth__title">forgot password</div>
-              <div class="auth__subtitle text-uppercase mb-2">
+              <div class="text-uppercase wa__f__ta auth__title">
+                forgot password
+              </div>
+              <div class="auth__subtitle text-uppercase mb-2 mt-3">
                 please provide us this information
               </div>
               <v-form @submit.prevent="forgotPassword">
@@ -89,10 +91,12 @@ export default {
       } finally {
         this.forgotRequestLoading = false;
       }
-      let repository = new AuthRepository();
-      await repository.forgotPassword(this.form);
-      this.$router.push({ name: "login" });
     },
   },
 };
 </script>
+<style scoped>
+.auth__title {
+  line-height: 22px;
+}
+</style>

src/views/Register.vue

@@ -133,13 +133,47 @@
                     <v-col cols="12">
                       <RectangleButton
                         class="w-100 custom-btn"
-                        text="send code"
+                        text="VERIFY THE CODE"
                         type="submit"
                         height="29"
                         lg
                         :loading="verifyCodeRequestLoading"
                       />
                     </v-col>
+                    <v-col cols="12" class="pt-0">
+                      <div
+                        class="d-flex justify-center align-center resend__code"
+                      >
+                        <div class="mr-3">Didn’t get the code?</div>
+                        <div
+                          class="d-flex align-items-baseline resend__code--send"
+                          v-if="!isActiveResendCode"
+                        >
+                          <div>Resend it after</div>
+                          <div>
+                            <Chip
+                              :text="`${resendCodeTime}s`"
+                              xs
+                              class="resend__code--timer px-2"
+                              label
+                              color="white"
+                              text-color="black"
+                            />
+                          </div>
+                        </div>
+                        <div v-else>
+                          <Chip
+                            text="Resend"
+                            xs
+                            class="resend__code--timer"
+                            @click="resendForgetPassCode"
+                            label
+                            color="white"
+                            text-color="black"
+                          />
+                        </div>
+                      </div>
+                    </v-col>
                     <v-col cols="12" class="pt-0">
                       <div>
                         <RectangleButton
@@ -168,7 +202,9 @@
   </v-container>
 </template>
 <script>
+const RESEND_CODE_TIME = 60;
 import AuthBasic from "../components/Global/Section/AuthBasic.vue";
+import AuthRepository from "../abstraction/repository/authRepository";
 import { mapActions } from "vuex";
 export default {
   components: {
@@ -180,15 +216,45 @@ export default {
     verifyCodePage: false,
     signUpRequestLoading: false,
     verifyCodeRequestLoading: false,
+    // resend code
+    resendCodeInterval: null,
+    resendCodeTime: 0,
+    isActiveResendCode: false,
   }),
   methods: {
     ...mapActions("auth", ["register", "verifyEmail"]),
+    resendCodeTimer() {
+      this.resendCodeTime = RESEND_CODE_TIME;
+      this.isActiveResendCode = false;
+      clearInterval(this.resendCodeInterval);
+      this.resendCodeInterval = setInterval(() => {
+        if (--this.resendCodeTime === 0) {
+          clearInterval(this.resendCodeInterval);
+          this.isActiveResendCode = true;
+        }
+      }, 1000);
+    },
+    async resendForgetPassCode() {
+      try {
+        if (this.isActiveResendCode) {
+          let repository = new AuthRepository();
+          let json = { 
+            email: this.form.email
+          }
+          await repository.resendCode(json);
+          this.resendCodeTimer();
+        }
+      } catch (e) {
+        return e;
+      }
+    },
     async doRegister() {
       try {
         this.signUpRequestLoading = true;
         let response = await this.register(this.form);
         if (response) {
           this.toggleVerifyCodePage();
+          this.resendCodeTimer();
         }
       } catch (e) {
         return e;
@@ -211,5 +277,20 @@ export default {
       }
     },
   },
+  created() {
+    this.resendCodeTimer();
+  },
 };
 </script>
+<style lang="scss" scoped>
+.resend__code {
+  font-family: "Montserrat-medium";
+  font-size: 14px;
+}
+.resend__code--send {
+  border-bottom: 1px solid var(--color-gray);
+}
+.resend__code--timer {
+  font-size: 14px;
+}
+</style>