hadith_ui/pages/hadith/login.vue

<script setup lang="ts">
import * as z from "zod";
import type { FormSubmitEvent } from "@nuxt/ui";

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

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>) {
  toast.add({
    title: "Success",
    description: "The form has been submitted.",
    color: "success",
  });
  console.log(event.data);
}

// components declaration
const HadithLayout = defineAsyncComponent(
  () => import("@hadith/layouts/HadithLayout.vue")
);
const NavigationMenu = defineAsyncComponent(
  () => import("@hadith/components/hadith/NavigationMenu.vue")
);
</script>

<template>
  <HadithLayout>
    <div class="hadith-login-page h-full">
      <div class="page-container pt-20 h-full">
        <navigation-menu></navigation-menu>

        <UContainer
          ui="{
          base: 'sm:px-6 lg:px-4',
        }"
          class="page-inner-container sm:px-6 lg:px-4 h-full"
        >
          <div
            class="page-content flex flex-col items-center justify-center h-full"
          >
            <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>
          </div>
        </UContainer>
      </div>
    </div>
  </HadithLayout>
</template>

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

  .page-container {
    .page-inner-container {
      margin: auto;
      width: 512px;
      /* 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>
.hadith-login-page {
  .page-container {
    .page-inner-container {
      .input-elem {
        input {
          width: 480;
          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;
      }
    }
  }
}
</style>