mohadese namavar
109 lines
3.3 KiB
Vue
109 lines
3.3 KiB
Vue
<template>
|
|
<form class="password">
|
|
<h1>{{ $t("chooseStrongPassword") }}</h1>
|
|
<ul>
|
|
<li v-for="(item, key) in fields" :key="key">
|
|
<Password v-model="form[key]" v-bind="item.props" :inputId="key" />
|
|
<label :for="key">{{ $t(key) }}</label>
|
|
</li>
|
|
</ul>
|
|
<Button v-bind="btn.props" @click="next()" />
|
|
</form>
|
|
</template>
|
|
|
|
<script setup>
|
|
import init from "../../initialize/auth/password";
|
|
const { fields, btn } = init();
|
|
const { t, toast } = inject('service')
|
|
|
|
const router = useRouter();
|
|
const route = useRoute();
|
|
const form = reactive({ password: '', repassword: null });
|
|
const store = useUserStore();
|
|
const otpCode = useOtpCodeStore()
|
|
|
|
const next = async () => {
|
|
if (form.password.length < 8) {
|
|
toast.add({ severity: "error", summary: t("error"), detail: t('passwordMin8'), life: 3000 });
|
|
} else if (form.password != form.repassword) {
|
|
toast.add({ severity: "error", summary: t("error"), detail: t('passwordNotSame'), life: 3000 });
|
|
} else {
|
|
if (route.path.includes('register')) {
|
|
store.profile.password = form.password
|
|
router.push({ query: { step: 3 } });
|
|
} else if (route.path.includes('restore')) {
|
|
btn.props.loading = true
|
|
const body = Object.assign({}, form)
|
|
body.phoneNumber = otpCode.number
|
|
body.otp = otpCode.code
|
|
delete body.repassword
|
|
const { status, error } = await store.forgetPassword(body);
|
|
if (status.value == "success") {
|
|
toast.add({ severity: "success", summary: t("success"), detail: t('updatePasswordSuccessfull'), life: 3000 });
|
|
router.replace('/auth/login');
|
|
|
|
}
|
|
else {
|
|
let detail = error.value.data.msg
|
|
toast.add({ severity: "error", summary: t("error"), detail, life: 3000 });
|
|
}
|
|
btn.props.loading = false
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.auth .password {
|
|
@apply flex flex-col m-auto gap-[1.9rem] lg:gap-[3.2rem];
|
|
|
|
&>h1 {
|
|
@apply w-full text-[#CCCCCC] font-black font-vazir text-right leading-[3rem] whitespace-nowrap;
|
|
@apply text-xl lg:text-3xl;
|
|
}
|
|
|
|
ul {
|
|
@apply flex flex-col gap-6 lg:mb-7;
|
|
|
|
li {
|
|
@apply w-full h-14 relative;
|
|
|
|
label {
|
|
@apply w-max absolute right-3 top-4 px-1 bg-white transition-['top'];
|
|
@apply text-neutral-400 text-base font-medium cursor-text font-vazir;
|
|
}
|
|
|
|
.p-password {
|
|
input {
|
|
@apply w-full rounded-[0.6rem] border shadow-none border-[#CCCCCC] text-zinc-800 font-vazir;
|
|
}
|
|
|
|
svg {
|
|
@apply text-[#CCCCCC] w-5 h-5 -mt-2.5;
|
|
}
|
|
}
|
|
|
|
&:has(input:focus),
|
|
&:has(input:not(:placeholder-shown)) {
|
|
label {
|
|
@apply -top-2 h-4;
|
|
@apply text-zinc-800 text-xs font-normal font-vazir;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
button {
|
|
@apply w-full h-11 mt-1.5 lg:h-14 #{!important};
|
|
|
|
.p-button-label {
|
|
@apply text-sm font-medium font-iran-sans;
|
|
}
|
|
}
|
|
}
|
|
</style>
|