Untitled

<template>
  <main>
    <div class="container mx-auto">
      <div class="flex justify-center items-center h-screen">
        <div
          class="flex justify-center items-center bg-secondary border-2 border-gray-300 rounded-lg lg:w-10/12 shadow-lg"
        >
          <div class="w-1/2 h-full hidden lg:block">
            <img src="../components/icons/logimage.jpg" alt="" class="" />
          </div>
          <div class="px-4 flex flex-col">
            <h1 class="text-heading text-2xl text-gray-700 text-center mb-5">
              Login
            </h1>
            <label for="" class="font-body text-xl tracking-wider mb-2"
              >Email</label
            >
            <input
              type="text"
              v-model="state.email"
              placeholder="Email"
              class="border-2 focus:outline-none ring-1 ring-gray-400 focus:ring-accent bg-gray-100 rounded-md p-1 w-full mb-4"
            />
            <label for="" class="font-body text-xl tracking-wider mb-2"
              >Password</label
            >
            <input
              v-model="state.password"
              type="password"
              placeholder="Password"
              class="border-2 focus:outline-none ring-1 ring-gray-400 focus:ring-accent bg-gray-100 rounded-md p-1 w-full mb-4"
            />
            <button
              @click="login"
              class="bg-transparent uppercase border w-full border-gray-400 hover:bg-accent font-semibold tracking-wide transition ease-in-out hover:translate-y-2 hover:shadow-md rounded-lg p-2 mb-2"
            >
              Login
            </button>
          </div>
        </div>
      </div>
    </div>
  </main>
</template>

<script setup>
import { reactive, computed, onMounted } from "vue";
import { useRouter } from "vue-router";
import { required, email } from "@vuelidate/validators";
import { useVuelidate } from "@vuelidate/core";

const router = useRouter();

const loginUser = reactive({
  email: "",
  password: "",
});

const loginUserRules = computed(() => {
  return {
    email: { required, email },
    password: { required },
  };
});

const v$ = useVuelidate(loginUserRules, loginUser);

const login = onMounted(() => {
  this.v$.$validate();
  if (this.v$ === state) {
    alert("successful");
  } else {
    alert("wrong");
  }
});
</script>