login modality on going

components/customInput/index.vue

@@ -1,14 +1,50 @@
 <template>
- <div class="relative transition-all ease-in-out" :class="width">
- <input :id="id" :type="type" :placeholder="placeholder" class="customInput peer " autocomplete="off">
- <label :for="id" class="customLabel">{{lableName}}</label>
+ <div class="relative transition-all ease-in-out" :class="inputWidth">
+ <input 
+ :id="inputId"
+ :type="inputType" 
+ :placeholder="inputPlaceholder"
+ v-on:input="updateValue($event.target.value)" 
+ class="customInput peer " autocomplete="off">
+ <label :for="inputId" class="customLabel">{{inputLabel}}</label>
  </div>
 </template>
 
-<script>
-export default {
- props: ["id", "type", "placeholder", "lableName", "width"]
+<script setup>
+
+const props = defineProps({
+ modelValue: [String, Number],
+ id: { type: String,}, 
+ type: { type: String,},
+ placeholder: { type: String,},
+ labelName: {type: String}, 
+ width: {type: Boolean}
+})
+const inputPlaceholder = ref(props.placeholder);
+ const inputLabel = ref(props.labelName);
+ const inputId = ref(props.id);
+ const inputType = ref(props.type);
+ const input = ref(props.modelValue);
+ const inputWidth = ref(props.width);
+ const emit = defineEmits(['update:modelValue'])
+
+function updateValue(value) {
+ emit('update:modelValue', value)
 }
+ watch(
+ () => props.type,
+ () => {
+ if (props.type === "password") {
+ inputType.value = "password";
+ }
+ if (props.type === "email") {
+ inputType.value = "email";
+ }
+ if (props.type === "text") {
+ inputType.value = "text";
+ }
+ }
+ );
 </script>
 
 <style>

layouts/auth.vue

@@ -1,15 +1,30 @@
 <template>
  <div>
- <div class="h-screen w-screen flex flex-col justify-center items-center bg-corporateLight px-2">
+ <div class="h-screen w-screen flex flex-col justify-center items-center bg-corporateLight px-2 relative">
+ <table v-if="$route.path === '/login'" class="absolute top-0 right-0 border-collapse border border-slate-500">
+ <tr class="border border-slate-500">
+ <th colspan="3" class="border border-slate-500">Login Data</th>
+ </tr>
+ <tr class="border border-slate-500">
+ <th class="border border-slate-500">Sl.</th>
+ <th class="border border-slate-500">Email</th>
+ <th class="border border-slate-500">Password</th>
+ </tr>
+ <tr class="border border-slate-500" v-for="(item, index) in loginData" :key="index">
+ <td class="border border-slate-500">{{index}}</td>
+ <td class="border border-slate-500">{{item.email}}</td>
+ <td class="border border-slate-500">{{item.password}}</td>
+ </tr>
+ </table>
  <div class="glossyEffect w-full sm:w-2/4 lg:w-[27%] 2xl:w-3/12 px-10 pt-10 pb-8">
  <slot />
  </div>
  </div>
  </div>
 </template>
 
-<script>
-export default {};
+<script setup>
+const { data: loginData } = await useFetch('https://joyontojsondata.netlify.app/loginData.json')
 </script>
 
 <style></style>

pages/login/index.vue

@@ -1,9 +1,10 @@
 <template>
- <form>
+ <form @submit.prevent="formSubmit">
  <div class="mx-auto space-y-6">
  <h5 class="text-center text-2xl font-bold text-corporate">Login Here</h5>
- <customInput :id="'email'" :type="'email'" :placeholder="'Email'" :lableName="'Email'"/>
- <customInput :id="'password'" :type="'password'" :placeholder="'Password'" :lableName="'Password'"/>
+ {{formData.email}}
+ <customInput :id="'email'" v-model="formData.email" :type="'email'" :placeholder="'Email'" :labelName="'Email'"/>
+ <customInput :id="'password'" v-model="formData.password" :type="'password'" :placeholder="'Password'" :labelName="'Password'"/>
 
  <div class="flex justify-between">
  <NuxtLink to="#" class="text-corporateGray underline hover:decoration-corporate ">Forgot Password?</NuxtLink>
@@ -17,10 +18,24 @@
  </form>
 </template>
 
-<script>
-export default {
+<script setup>
+const { data: loginData } = await useFetch('https://joyontojsondata.netlify.app/loginData.json')
+const formData = reactive({
+ email: "",
+ password: ""
+});
 
-}
+ const formSubmit = () => {
+
+ console.log("formData=>",formData);
+ loginData.value.forEach((item) => {
+ if(item.email == formData.email && item.password == formData.password){
+ console.log("login true");
+ } else {
+ console.log("please try again");
+ }
+ });
+ }
 </script>
 
 <style scoped>