init git

components/auth/Phone.vue

@@ -0,0 +1,87 @@
+<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>