Fix #212 feat: added files for admin dashboard and Admin layout (#218)

* feat: added files for admin dashboard and Admin layout

* feat: enahnced the code for restricting admin dashboard from normal users

frontend/components/NavNew.vue

@@ -48,7 +48,7 @@
                                         <img src="../assets/orders.svg" alt="orders" class="h-[22px] w-[24px] bg-white">
                                         <p>Your orders</p>
                                     </nuxt-link>
-                                    <nuxt-link v-if="isAdmin" class="w-full h-[47px] flex items-center justify-start border-t-[1px] border-b-[1px] gap-3" to="/adminDashboard" >
+                                    <nuxt-link v-if="isAdmin" class="w-full h-[47px] flex items-center justify-start border-t-[1px] border-b-[1px] gap-3" to="/addNewProduct" >
                                         <img src="../assets/admin_icon.svg" alt="adminicon" class="h-[22px] w-[24px] bg-white">
                                         <p>Admin Dashboard</p>
                                     </nuxt-link>

frontend/components/Sidebar.vue

@@ -0,0 +1,40 @@
+<template>
+    <div class="bg-white m-20 w-[292px] h-[368px] p-8 text-base font-poppins shadow-[0_0_8px_#d8d5d5]">
+        <div class="w-[88%] flex items-center h-[36px] border-b border-[#e6e1e1]">
+            <img class="mr-3" src="assets/dashboard.svg" alt="dashboard">
+            Your Dashboard
+        </div>
+        <details class="my-5">
+            <summary class="flex cursor-pointer justify-between mt-6">
+                <div class="flex items-center">
+                    <img class="mr-3" src="assets/box.svg" alt="box">
+                    Products
+                </div>
+                <img src="assets/down.svg" alt="down" class="transition-transform ease-linear duration-400" id="down-arrow">
+            </summary >
+            <ul class="list-none">
+                <li class="mt-5 ml-8 text-[#6C6C6C] cursor-pointer"><nuxt-link to="/manageProduct" exact-active-class="text-[#EA454C]">Product Management</nuxt-link></li>
+                <li class="mt-5 ml-8 text-[#6C6C6C] cursor-pointer"><nuxt-link to="/addNewProduct" exact-active-class="text-[#EA454C]">Add New Product</nuxt-link></li>
+            </ul>
+        </details>
+        <details class="my-5">
+            <summary class="flex cursor-pointer justify-between mt-6">
+                <div class="flex items-center">
+                    <img class="mr-3" src="assets/calendar-check.svg" alt="box">
+                    Events
+                </div>
+                <img src="assets/down.svg" alt="down" class="transition-transform ease-linear duration-400" id="down-arrow">
+            </summary>
+            <ul class="list-none">
+                <li class="mt-5 ml-8 text-[#6C6C6C] cursor-pointer"><nuxt-link to="/manageEvent" exact-active-class="text-[#EA454C]">Events Management</nuxt-link></li>
+                <li class="mt-5 ml-8 text-[#6C6C6C] cursor-pointer"><nuxt-link to="/addNewEvent" exact-active-class="text-[#EA454C]">Add New Event</nuxt-link></li>
+            </ul>
+        </details>
+    </div>
+</template>
+
+<style scoped>
+details[open] summary #down-arrow{
+    transform: rotate(180deg);
+}
+</style>

frontend/layouts/adminLayout.vue

@@ -0,0 +1,11 @@
+<template>
+  <link rel="icon" type="image/png" href="\favicon.png">
+  <div>
+    <NavNew />
+    <div class="flex gap-5">
+      <Sidebar /> 
+      <slot />
+    </div>
+    <Footer />
+  </div>
+</template>

frontend/middleware/admin-auth.js

@@ -0,0 +1,14 @@
+import { defineNuxtRouteMiddleware, navigateTo } from "nuxt/app";
+import { useAuthStore } from "../store/auth";
+
+export default defineNuxtRouteMiddleware((to,from)=>{
+    const authStore = useAuthStore();    
+    if(!authStore.isAuthenticated){ 
+        return navigateTo("/404");
+    }   
+    else{
+        if(!authStore.is_Admin){
+            return navigateTo("/404");
+        }
+    }
+})

frontend/pages/addNewEvent.vue

@@ -0,0 +1,10 @@
+<template>
+
+</template>
+
+<script>
+definePageMeta({
+    layout: 'admin-layout',
+    middleware: 'admin-auth'
+})
+</script>

frontend/pages/addNewProduct.vue

@@ -0,0 +1,10 @@
+<template>
+
+</template>
+
+<script >
+definePageMeta({
+    layout: 'admin-layout',
+    middleware: 'admin-auth'
+})
+</script>

frontend/pages/manageEvent.vue

@@ -0,0 +1,10 @@
+<template>
+
+</template>
+
+<script >
+definePageMeta({
+    layout: 'admin-layout',
+    middleware: 'admin-auth'
+})
+</script>

frontend/pages/manageProduct.vue

@@ -0,0 +1,10 @@
+<template>
+
+</template>
+
+<script >
+definePageMeta({
+    layout: 'admin-layout',
+    middleware: 'admin-auth'
+})
+</script>

frontend/store/auth.js

@@ -2,6 +2,7 @@ import { defineStore } from "pinia";
 import { navigateTo } from "#app";
 import { toast } from "vue3-toastify";
 import { jwtDecode } from "jwt-decode";
+import { useNuxtApp } from "nuxt/app";
 
 const config = {
   API_BASE_URL: import.meta.env.VITE_API_BASE_URL || "http://localhost:8000",
@@ -12,6 +13,7 @@ export const useAuthStore = defineStore("auth", {
     access: null,
     refresh: null,
     user: null,
+    isAdmin: process.browser ? JSON.parse(window.localStorage.getItem("isAdmin")) : null,
   }),
 
   actions: {
@@ -30,6 +32,14 @@ export const useAuthStore = defineStore("auth", {
           this.access = data.value.access;
           this.refresh = data.value.refresh;
           this.user = email;
+
+          const nuxtApp = useNuxtApp();
+          const adminResponse = await nuxtApp.$authenticatedFetch(
+            `${config.API_BASE_URL}/api/accounts/me/`
+          );
+          this.isAdmin = adminResponse.is_admin;
+          this.saveState();
+
           await navigateTo(redirect);
           toast.success("Login successful", {
             autoClose: 2000,
@@ -137,6 +147,8 @@ export const useAuthStore = defineStore("auth", {
       this.access = null;
       this.refresh = null;
       this.user = null;
+      this.isAdmin = null;
+      this.saveState();
       await navigateTo('/');
     },
 
@@ -145,6 +157,12 @@ export const useAuthStore = defineStore("auth", {
       this.refresh = payload.refresh || null;
       this.user = payload.user || null;
     },
+
+    saveState() {
+      if (process.browser) {
+        window.localStorage.setItem("isAdmin", this.isAdmin);
+      }
+    }
   },
 
   getters: {
@@ -159,6 +177,10 @@ export const useAuthStore = defineStore("auth", {
     authToken() {
       return this.access;
     },
+
+    is_Admin() {
+      return this.isAdmin;
+    },
   },
   persist: true,
 });