|
|
@ -133,13 +133,47 @@
|
|
|
|
<v-col cols="12">
|
|
|
|
<v-col cols="12">
|
|
|
|
<RectangleButton
|
|
|
|
<RectangleButton
|
|
|
|
class="w-100 custom-btn"
|
|
|
|
class="w-100 custom-btn"
|
|
|
|
text="send code"
|
|
|
|
text="VERIFY THE CODE"
|
|
|
|
type="submit"
|
|
|
|
type="submit"
|
|
|
|
height="29"
|
|
|
|
height="29"
|
|
|
|
lg
|
|
|
|
lg
|
|
|
|
:loading="verifyCodeRequestLoading"
|
|
|
|
:loading="verifyCodeRequestLoading"
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
</v-col>
|
|
|
|
</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">
|
|
|
|
<v-col cols="12" class="pt-0">
|
|
|
|
<div>
|
|
|
|
<div>
|
|
|
|
<RectangleButton
|
|
|
|
<RectangleButton
|
|
|
@ -168,7 +202,9 @@
|
|
|
|
</v-container>
|
|
|
|
</v-container>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
|
|
<script>
|
|
|
|
|
|
|
|
const RESEND_CODE_TIME = 60;
|
|
|
|
import AuthBasic from "../components/Global/Section/AuthBasic.vue";
|
|
|
|
import AuthBasic from "../components/Global/Section/AuthBasic.vue";
|
|
|
|
|
|
|
|
import AuthRepository from "../abstraction/repository/authRepository";
|
|
|
|
import { mapActions } from "vuex";
|
|
|
|
import { mapActions } from "vuex";
|
|
|
|
export default {
|
|
|
|
export default {
|
|
|
|
components: {
|
|
|
|
components: {
|
|
|
@ -180,15 +216,45 @@ export default {
|
|
|
|
verifyCodePage: false,
|
|
|
|
verifyCodePage: false,
|
|
|
|
signUpRequestLoading: false,
|
|
|
|
signUpRequestLoading: false,
|
|
|
|
verifyCodeRequestLoading: false,
|
|
|
|
verifyCodeRequestLoading: false,
|
|
|
|
|
|
|
|
// resend code
|
|
|
|
|
|
|
|
resendCodeInterval: null,
|
|
|
|
|
|
|
|
resendCodeTime: 0,
|
|
|
|
|
|
|
|
isActiveResendCode: false,
|
|
|
|
}),
|
|
|
|
}),
|
|
|
|
methods: {
|
|
|
|
methods: {
|
|
|
|
...mapActions("auth", ["register", "verifyEmail"]),
|
|
|
|
...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() {
|
|
|
|
async doRegister() {
|
|
|
|
try {
|
|
|
|
try {
|
|
|
|
this.signUpRequestLoading = true;
|
|
|
|
this.signUpRequestLoading = true;
|
|
|
|
let response = await this.register(this.form);
|
|
|
|
let response = await this.register(this.form);
|
|
|
|
if (response) {
|
|
|
|
if (response) {
|
|
|
|
this.toggleVerifyCodePage();
|
|
|
|
this.toggleVerifyCodePage();
|
|
|
|
|
|
|
|
this.resendCodeTimer();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
} catch (e) {
|
|
|
|
} catch (e) {
|
|
|
|
return e;
|
|
|
|
return e;
|
|
|
@ -211,5 +277,20 @@ export default {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
created() {
|
|
|
|
|
|
|
|
this.resendCodeTimer();
|
|
|
|
|
|
|
|
},
|
|
|
|
};
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
</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>
|