mohadese namavar
88 lines
2.3 KiB
Vue
88 lines
2.3 KiB
Vue
<template>
|
|
<form class="phone">
|
|
<h1>{{ $t("enterYourPhoneNumber") }}</h1>
|
|
<div>
|
|
<InputText v-bind="field.props" v-model="form.number" />
|
|
<label for="phone"> {{ $t("phoneNumber") }} </label>
|
|
</div>
|
|
<Button v-bind="btn.props" @click="send()" />
|
|
</form>
|
|
</template>
|
|
|
|
<script setup>
|
|
import init from "../../initialize/auth/phone";
|
|
const { field, btn } = init();
|
|
|
|
const store = useOtpCodeStore();
|
|
const router = useRouter()
|
|
const route = useRoute()
|
|
const form = reactive({ number: store.number });
|
|
|
|
const { toast, t } = inject('service')
|
|
|
|
const send = async () => {
|
|
btn.props.loading = true;
|
|
let result = {}
|
|
const body = Object.assign({}, form);
|
|
|
|
if (route.path.includes('register'))
|
|
result = await store.withoutToken(body)
|
|
else if (route.path.includes('restore'))
|
|
result = await store.forgotPassword(body
|
|
)
|
|
const { status, data, error } = result;
|
|
btn.props.loading = false;
|
|
|
|
if (status.value == "success")
|
|
router.push({ query: { step: 1 } });
|
|
else {
|
|
let detail = error.value.data.msg
|
|
if (error.value.statusCode == 422)
|
|
detail = Object.values(error.value.data).join('\n')
|
|
|
|
toast.add({ life: 3000, severity: 'error', summary: t('error'), detail })
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.auth .phone {
|
|
@apply flex flex-col h-max m-auto;
|
|
@apply gap-[1.9rem] lg:gap-10;
|
|
|
|
&>h1 {
|
|
@apply text-[#CCCCCC] font-black font-vazir text-right whitespace-nowrap;
|
|
@apply text-xl lg:text-3xl leading-[3rem];
|
|
}
|
|
|
|
&>div {
|
|
@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 font-vazir cursor-text;
|
|
}
|
|
|
|
input {
|
|
@apply w-full rounded-[0.6rem] border shadow-none border-[#CCCCCC] text-zinc-800 font-vazir;
|
|
}
|
|
|
|
&: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 mt-1.5 h-11 lg:h-14 lg:mt-5 #{!important};
|
|
|
|
.p-button-label {
|
|
@apply text-sm font-medium font-iran-sans;
|
|
}
|
|
}
|
|
}
|
|
</style>
|