get data from locatStorage is ongoing

Joyontokarmakar · Jul 28, 2022 · 2436755 · 2436755
1 parent b13e549
commit 2436755
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 41 deletions.
diff --git a/components/headers/index.vue b/components/headers/index.vue
@@ -1,19 +1,27 @@
 <template>
   <div>
     <div class="bg-corporate p-4 flex justify-between items-center">
-      <NuxtLink to="/" class="text-white font-bold text-2xl ml-0">JK Admin</NuxtLink>
+      <NuxtLink to="/" class="text-white font-bold text-xl md:text-2xl ml-0">Web Component</NuxtLink>
       <div
         class="hidden md:flex justify-between items-center text-white space-x-4 mr-0"
       >
         <!-- <NuxtLink to="/" class="px-3 py-2"> Dashboard </NuxtLink>
         <NuxtLink to="/services" class="px-3 py-2"> Services </NuxtLink> -->
-        <NuxtLink to="/login" class="px-3 py-2"> Login </NuxtLink>
-        <NuxtLink to="/sign-up" class="px-3 py-2"> Signup </NuxtLink>
-        <img
+        <!-- <NuxtLink to="/sign-up" class="px-3 py-2"> Signup </NuxtLink> -->
+        <!-- {{userData}} -->
+        <!-- <NuxtLink v-if="userData.isLogin == false" to="/login" class="px-3 py-2">Login</NuxtLink>
+        <Button v-else class="px-3 py-2" @click="logout"> Logout </Button>
+        <div v-if="userData.isLogin == true" class="rounded-full w-10 h-10 shadow-md bg-corporate text-corporateLight flex justify-center items-center">
+          {{userData.fName.charAt(0) + userData.lName.charAt(0)}}
+        </div>
+        <div v-else>
+          <img 
           src="@/assets/images/logo/logo.png"
           alt="profile"
-          class="inline rounded-full w-10 h-10 shadow-md"
+          class="rounded-full w-10 h-10 shadow-md"
         />
+        </div> -->
+
       </div>
       <div class="block md:hidden cursor-pointer" @click="open">
         <svg
@@ -35,23 +43,31 @@
   </div>
 </template>
 
-<script>
-export default {
-  data() {
-    return {
-      sidebar: false,
-    };
-  },
-  methods: {
-    open() {
-      this.sidebar = !this.sidebar;
-    },
-    close() {
-      console.log("asjkldhjdf");
-      this.sidebar = !this.sidebar;
-    },
-  },
-};
-</script>
+<script setup>
+  const sidebar = ref(false);
+  // const userData = JSON.parse(localStorage.getItem('userData'))
+  const userInfo = reactive({
+    fName: "",
+    lName: "",
+    email: "",
+    isLogin: true
+  });
+  onMounted(()=> {
+    storage();
+  })
+  const storage = () =>{
+    console.log(localStorage.getItem("userData"));
+  }
+  const logout = () => {
+    localStorage.removeItem('userData');
+  }
+  const open = () =>{
+    sidebar.value = !sidebar.value
+  };
+
+  const close = () => {
+    sidebar.value = !sidebar.value
+  };
+  </script>
 
 <style></style>
diff --git a/components/sidemenus/index.vue b/components/sidemenus/index.vue
@@ -5,8 +5,10 @@
         <div class="py-2 flex justify-between items-center">
           <img src="@/assets/images/logo/logo.png" alt="profile" class="rounded-full w-[15%] shadow-md"/>
           <div class="text-right">
+            <NuxtLink to="/login" class="px-3 py-2"> Login </NuxtLink>
             <h2 class="uppercase font-bold text-sm text-corporateGray">Joyonto</h2>
             <h2 class="text-sm text-corporateGray">[email protected]</h2>
+            <NuxtLink to="/sign-up" class="px-3 py-2"> Signup </NuxtLink>
           </div>
         </div>
         <div class="mt-5 space-y-2 overflow-y-auto h-[calc(100vh-150px)] py-2">

diff --git a/layouts/auth.vue b/layouts/auth.vue
@@ -11,7 +11,7 @@
           <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">{{index+1}}</td>
           <td class="border border-slate-500">{{item.email}}</td>
           <td class="border border-slate-500">{{item.password}}</td>
         </tr>

diff --git a/layouts/main.vue b/layouts/main.vue
@@ -15,6 +15,7 @@
 </template>
 
 <script setup>
+
 </script>
 
 <style></style>
diff --git a/pages/login/index.vue b/pages/login/index.vue
@@ -2,10 +2,9 @@
      <form @submit.prevent="formSubmit">
           <div class="mx-auto space-y-6">
                <h5 class="text-center text-2xl font-bold text-corporate">Login Here</h5>
-               {{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'"/>
-
+               <p v-if="loginDataCheck" :class="loginError ? 'text-red-500' : 'text-green-700'">{{loginMessage}}</p>
                <div class="flex justify-between">
                     <NuxtLink to="#" class="text-corporateGray underline hover:decoration-corporate ">Forgot Password?</NuxtLink>
                     <button type="submit" class="customBtn uppercase">Login</button>
@@ -19,25 +18,41 @@
 </template>
 
 <script setup>
-const { data: loginData } = await useFetch('https://joyontojsondata.netlify.app/loginData.json')
-const formData = reactive({
-     email: "",
-     password: ""
-});
+     const { data: loginData } = await useFetch('https://joyontojsondata.netlify.app/loginData.json')
+     const formData = reactive({
+          email: "",
+          password: ""
+     });
+     const userData = reactive({
+          fName: "",
+          lName: "",
+          email: "",
+          isLogin: true
+     })
 
-     const formSubmit = () => {
+     const loginMessage = ref("");
+     const loginError = ref(false);
+     const loginDataCheck = ref(false);
 
-          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");
+     const formSubmit = () => {
+          loginDataCheck.value = true
+          for(var i=0; i<loginData.value.length; i++){
+               if(loginData.value[i].email == formData.email && loginData.value[i].password == formData.password){
+                    loginError.value = false;
+                    loginMessage.value = 'Login Successful';
+                    userData.fName = loginData.value[i].firstName;
+                    userData.lName = loginData.value[i].lastName;
+                    userData.email = loginData.value[i].email;
+                    localStorage.setItem('userData', JSON.stringify(userData));
+                    break;
+               }
+               else{
+                    loginError.value = true;
+                    loginMessage.value = 'Please try again';
+               }
           }
-        });
-    }
+     }
 </script>
 
 <style scoped>
-
 </style>