anahita-front/components/auth/Information.vue

<template>
    <form class="completeInformation">
        <div>
            <ul>
                <li v-for="(item, key) in fields" :key="key">
                    <component :is="item.is" :id="key" v-bind="item.props" v-model="form[key]" />
                    <label :for="key"> {{ $t(key) }} </label>
                    <small v-if="errors[key]">{{ errors[key] }}</small>
                </li>
            </ul>
        </div>
        <div>
            <Button v-bind="btn.props" @click="register()" />
        </div>
    </form>
</template>

<script setup>
import iranCities from "../../initialize/iranCities"
import init from "../../initialize/auth/information";
const { fields, btn } = init();

const form = reactive({});
const errors = ref({});

const otpCode = useOtpCodeStore();

onMounted(() => {
    form.phoneNumber = otpCode.number
    form.otp = otpCode.code
})

const provinces = reactive(iranCities)
fields.state.props.options = provinces

watch(() => form.state, (v) => {
    provinces.forEach(({ name, cities }) => {
        if (name == v) {
            fields.city.props.options = reactive(cities)
        }
    });
}, { deep: true })

fields.city.props.disabled = computed(() => fields.city.props.options.length < 1)

const route = useRouter();
const router = useRouter();

const store = useUserStore();

const register = async () => {
    errors.value = {}
    btn.props.loading = true
    const { status, error } = await store.register(Object.assign({}, form));
    if (status.value == "success") {
        delete store.profile.password;
        router.push("/panel/profile");
    } else {
        if (error.value.statusCode == 422)
            errors.value = error.value.data
        else
            toast.add({
                life: 50000,
                severity: 'error',
                summary: t('error'),
                detail: error.value.data.message || error.value.message
            })
    }
    btn.props.loading = false
}

watch(form, () => errors.value = {})
</script>

<style lang="scss">
.auth .completeInformation {
    @apply h-max flex flex-col m-auto;
    @apply lg:mt-6 lg:gap-14;

    &>div:nth-of-type(1) {
        @apply w-max overflow-y-auto pl-4 lg:pl-7;
        @apply h-[18.6rem] lg:h-[35.2rem];

        &::-webkit-scrollbar-track {
            @apply bg-transparent my-4;
        }

        &::-webkit-scrollbar {
            @apply w-1 lg:w-2;
        }

        &::-webkit-scrollbar-thumb {
            @apply bg-neutral-200;
        }

        ul {
            @apply grid grid-cols-2 grow max-w-full py-4 px-px my-0;
            @apply gap-y-6 gap-x-2 w-[21.4rem] lg:w-[27.1rem] lg:gap-x-3;

            li {
                @apply w-full grow h-14 relative col-span-2;

                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 pointer-events-none;
                }

                input,
                textarea {
                    @apply w-full rounded-[0.6rem] border shadow-none border-[#CCCCCC] text-zinc-800 font-vazir;
                }

                .p-dropdown-label {
                    @apply font-vazir mt-1;
                }

                &:has(input:focus),
                &:has(textarea:focus),
                &:has(input:not(:placeholder-shown)),
                &:has(.p-dropdown-label[aria-label]),
                &:has(textarea:not(:placeholder-shown)) {
                    label {
                        @apply -top-2 h-4;
                        @apply text-zinc-800 text-xs font-normal font-vazir;
                    }
                }

                &:nth-of-type(1),
                &:nth-of-type(2),
                &:nth-of-type(3),
                &:nth-of-type(4),
                &:nth-of-type(8),
                &:nth-of-type(9) {
                    @apply w-full col-span-1 max-w-[12.7rem] lg:max-w-[13.1rem];
                }

                .p-dropdown {
                    @apply w-full;
                }

                .p-calendar {
                    @apply w-full flex items-center relative z-0 font-['iconsax'] #{!important};

                    &::before {
                        @apply text-xl absolute mb-0.5 left-3 z-[1] text-[#999999];
                    }

                    input {
                        @apply pl-10;
                    }
                }

                small {
                    @apply text-red-500 font-vazir float-left;
                }

                &:has(small) * {
                    @apply border-red-500 #{!important};
                }
            }
        }
    }

    &>div:nth-of-type(2) {
        @apply py-3 -mr-6 px-5 w-full min-w-[24.4rem] border-t border-gray-100 shadow-[0px_-3px_5px_#00000005];
        @apply lg:border-0 lg:shadow-none lg:mr-0 lg:p-0;

        &>button {
            @apply w-full h-11 lg:h-14 #{!important};

            .p-button-label {
                @apply text-sm font-medium font-iran-sans;
            }
        }
    }
}
</style>