hadith_ui/components/haditha/login/EnterMobile.vue

<script setup lang="ts">
import * as z from "zod";
import type { FormSubmitEvent } from "@nuxt/ui";
import hadithaApi from "../../../apis/hadithaApi";
import { useAuthStore } from "~/stores/authStore";
import { useStorage } from "@vueuse/core";

useHead({
  title: `${
    import.meta.env.VITE_HADITH_PAGE_TITLE
  } | وارد کردن شماره تلفن همراه`,
  meta: [
    { name: "description", content: "کاوش با هوش مصنوعی در احادیث اسلامی" },
  ],
  bodyAttrs: {
    class: import.meta.env.VITE_HADITH_SYSTEM,
  },
});

const emits = defineEmits(["next-step"]);

const router = useRouter();
const authStore = useAuthStore();
const loading = ref(false);

const localizedErrors = {
  required: "Invalid email address",
  // Add more error codes and translations as needed
};

const schema = z.object({
  mobile: z
    .string()
    .min(1, "این فیلد ضروری است.(exmaple : 09--*******)")
    .max(11, "موبایل حداکثر 11 عدد می باشد.(exmaple : 09--*******)"),
});

type Schema = z.output<typeof schema>;

const state = reactive<Partial<Schema>>({
  mobile: undefined,
});

const toast = useToast();
async function onSubmit(event: FormSubmitEvent<Schema>) {
  // const payoload = {
  //   username: "dev",
  //   password: "dev123",
  //   // captcha: "",
  // };

  authStore
    .loginAsGuest()
    .then((res) => {
      loading.value = false;
      // check if search term is not empty

      toast.add({
        title: "Success",
        description: res.data.message,
        color: "success",
      });

      if (!res.data.isNew) emits("next-step");
      else
        navigateTo({
          name: "haditha",
        });
    })
    .catch((err) => {
      console.info(err);
    })
    .finally(() => {
      loading.value = false;
    });
}
</script>

<template>
  <p class="title">خوش آمدید</p>
  <p class="description">لطفا شماره موبایل خود را وارد کنید</p>

  <UForm
    :schema="schema"
    :state="state"
    class="space-y-4 w-full"
    @submit="onSubmit"
  >
    <UFormField
      dir="ltr"
      name="mobile"
      class="mb-6"
      :ui="{
        root: 'root',
        wrapper: 'wrapper',
        labelWrapper: 'labelWrapper',
        label: 'label',
        container: 'container',
        description: 'description',
        error: 'error',
        hint: 'hint',
        help: 'help',
      }"
    >
      <UInput
        class="input-elem w-full"
        placeholder="09--*******"
        v-model="state.mobile"
        type="text"
      />
    </UFormField>
    <UButton
      class="submit-btn w-full flex justify-center"
      variant="solid"
      type="submit"
    >
      ورود / ثبت نام
    </UButton>
  </UForm>
</template>

<style scoped>
.haditha-login-page {
  background: #f7fffd;

  .page-container {
    .page-inner-container {
      margin: auto;
      /* max-width: 512px; */
      max-width: 300px;
      /* height: 125px; */
      gap: 24px;

      .title {
        margin-bottom: 1.2em;
        font-family: IRANSansX;
        font-weight: 400;
        font-size: 20px;
        line-height: 30px;
        letter-spacing: 0%;

        /* Fallback color */
        color: #4d00ff;

        /* Gradient background */
        background: linear-gradient(268.94deg, #d284ff -0.65%, #4d00ff 104.59%);

        /* Clip the background to the text */
        background-clip: text;
        -webkit-background-clip: text; /* For Safari */

        /* Make the text transparent */
        color: transparent;
        -webkit-text-fill-color: transparent; /* For Safari */
      }

      .description {
        font-family: IRANSansX;
        font-weight: 400;
        font-size: 14px;
        line-height: 21px;
        letter-spacing: 0%;
        color: #626b84;
        margin-bottom: 5em; /* 70px */
      }
    }
  }
}
</style>

<style>
.haditha-login-page {
  .page-container {
    .page-inner-container {
      .input-elem {
        input {
          width: 48;
          height: 53px;
          justify-content: space-between;
          border-radius: 12px;
          border-width: 0.3px;
          padding: 16px;
          background: #ffffff;
          border: 0.3px solid #d9d9d9;
          box-shadow: 0px 1px 4px 0px #0000000d;

          font-family: IRANSansX;
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          letter-spacing: 0%;
          text-align: center;
          color: var(--ui-color-two);
        }
      }

      .submit-btn {
        width: 480;
        height: 48px;
        gap: 4px;
        padding-top: 9.1px;
        padding-right: 32px;
        padding-bottom: 9.1px;
        padding-left: 32px;
        border-radius: 12px;
        border-width: 0.3px;

        background: linear-gradient(102.02deg, #4be8ae 7.38%, #00a762 91.78%);
        border: 0.3px solid #d9d9d9;
        box-shadow: 0px 1px 4px 0px #0000000d;
      }

      .root-pin-input {
        direction: ltr;

        .base-pin-input {
          width: 56px;
          height: 53px;
          justify-content: space-between;
          border-radius: 12px;
          border-width: 0.3px;
          padding: 16px;

          border: 0.3px solid #d9d9d9;
          box-shadow: 0px 1px 4px 0px #0000000d;

          font-family: IRANSansX;
          font-weight: 400;
          font-size: 16px;
          line-height: 100%;
          letter-spacing: 0%;
          text-align: center;

          color: var(--ui-color-two);
        }
      }
    }
  }
}
</style>