From e1436f1eff59cf11faadcb2590f7710a6f0f707b Mon Sep 17 00:00:00 2001 From: Saadani-Malek92 Date: Thu, 16 May 2024 15:57:39 +0100 Subject: [PATCH 1/5] first commit authentifications pages --- package.json | 1 + src/router/constants.js | 5 + src/router/index.js | 72 +++++++++++++- src/views/Auth/AdminLogin.vue | 99 ++++++++++++++++++++ src/views/Auth/UserLogin.vue | 171 ++++++++++++++++++++++++++++++++++ 5 files changed, 344 insertions(+), 4 deletions(-) create mode 100644 src/router/constants.js create mode 100644 src/views/Auth/AdminLogin.vue create mode 100644 src/views/Auth/UserLogin.vue diff --git a/package.json b/package.json index a63c0e8..4c403fe 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ }, "dependencies": { "@popperjs/core": "2.11.5", + "axios": "^1.6.8", "bootstrap": "5.1.3", "pinia": "2.0.14", "prismjs": "1.28.0", diff --git a/src/router/constants.js b/src/router/constants.js new file mode 100644 index 0000000..cee1edb --- /dev/null +++ b/src/router/constants.js @@ -0,0 +1,5 @@ +export const Role = { + Admin: 'admin', + User: 'user', + Guest: 'guest', + }; \ No newline at end of file diff --git a/src/router/index.js b/src/router/index.js index 6257f01..3e9606e 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -23,6 +23,12 @@ import ElDropdowns from "../layouts/sections/elements/dropdowns/DropdownsView.vu import ElProgressBars from "../layouts/sections/elements/progress-bars/ProgressBarsView.vue"; import ElToggles from "../layouts/sections/elements/toggles/TogglesView.vue"; import ElTypography from "../layouts/sections/elements/typography/TypographyView.vue"; + + import AdminLoginView from "../views/Auth/AdminLogin.vue"; + import UserLoginView from "../views/Auth/UserLogin.vue"; +// import AdminView from "../views/LandingPages/Author/AuthorView.vue"; +import { Role } from './constants'; + const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes: [ @@ -30,6 +36,7 @@ const router = createRouter({ path: "/", name: "presentation", component: PresentationView, + //meta: { requiresAuth: true, requiredRole: Role.Admin }, }, { path: "/pages/landing-pages/about-us", @@ -146,7 +153,64 @@ const router = createRouter({ name: "el-typography", component: ElTypography, }, - ], -}); - -export default router; + + { + path: '/admin/auth', + component: AdminLoginView, + name: "admin-login", + }, + // { + // path: "/unauthorized", + // name: "unauthorized", + // component: UnauthorizedView, + // }, + { + path: "/user/login", + name: "user-login", + component: UserLoginView, + }, + + ], + }); + + + function isAuthenticated() { + // Check if the user is authenticated, e.g., by verifying the presence of a valid token or logged-in state + // Return true if authenticated, false otherwise + // Example: return localStorage.getItem('token') !== null; + + return true; + } + + function getCurrentUserRole() { + // Retrieve the current user's role from your authentication system or state management + // Return the role of the current user + // Example: return localStorage.getItem('userRole'); + return "guest"; + } + + // Route guard + router.beforeEach((to, from, next) => { + if (to.meta.requiresAuth) { + // Check if the user is authenticated, e.g., by checking the presence of a valid token or logged-in state + if (isAuthenticated()) { + // Check if the user has the required role + if (to.meta.requiredRole && getCurrentUserRole() !== to.meta.requiredRole) { + // Redirect to a different route or show an error message + next({ path: '/unauthorized' }); + } else { + // Proceed to the requested route + next(); + } + } else { + // Redirect to the login page or a suitable route for unauthenticated users + next({ path: '/logout' }); + } + } else { + // No authentication required for the route + next(); + } + }); + + export default router; + \ No newline at end of file diff --git a/src/views/Auth/AdminLogin.vue b/src/views/Auth/AdminLogin.vue new file mode 100644 index 0000000..450c696 --- /dev/null +++ b/src/views/Auth/AdminLogin.vue @@ -0,0 +1,99 @@ + + diff --git a/src/views/Auth/UserLogin.vue b/src/views/Auth/UserLogin.vue new file mode 100644 index 0000000..868347b --- /dev/null +++ b/src/views/Auth/UserLogin.vue @@ -0,0 +1,171 @@ + + From b785227d748c7ad0c7ab30665d4d4ecc874322ea Mon Sep 17 00:00:00 2001 From: Saadani-Malek92 Date: Fri, 17 May 2024 17:10:37 +0100 Subject: [PATCH 2/5] fix authentification --- src/router/index.js | 90 +++++++++++++++++++++-------------- src/stores/index.js | 20 ++++++++ src/views/Auth/AdminLogin.vue | 55 ++++++++++++++++----- 3 files changed, 116 insertions(+), 49 deletions(-) diff --git a/src/router/index.js b/src/router/index.js index 3e9606e..2e72a67 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -28,6 +28,9 @@ import ElTypography from "../layouts/sections/elements/typography/TypographyView import UserLoginView from "../views/Auth/UserLogin.vue"; // import AdminView from "../views/LandingPages/Author/AuthorView.vue"; import { Role } from './constants'; +import { useStore } from '@/stores' + + const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), @@ -172,45 +175,60 @@ const router = createRouter({ ], }); - - - function isAuthenticated() { - // Check if the user is authenticated, e.g., by verifying the presence of a valid token or logged-in state - // Return true if authenticated, false otherwise - // Example: return localStorage.getItem('token') !== null; - - return true; - } - - function getCurrentUserRole() { - // Retrieve the current user's role from your authentication system or state management - // Return the role of the current user - // Example: return localStorage.getItem('userRole'); - return "guest"; - } - - // Route guard + + router.beforeEach((to, from, next) => { - if (to.meta.requiresAuth) { - // Check if the user is authenticated, e.g., by checking the presence of a valid token or logged-in state - if (isAuthenticated()) { - // Check if the user has the required role - if (to.meta.requiredRole && getCurrentUserRole() !== to.meta.requiredRole) { - // Redirect to a different route or show an error message - next({ path: '/unauthorized' }); - } else { - // Proceed to the requested route - next(); - } - } else { - // Redirect to the login page or a suitable route for unauthenticated users - next({ path: '/logout' }); - } + const store = useStore() + console.log(store.isAuthenticated,store.user,"store") + //console.log(store.isAuthenticated,"store") + if (to.meta.requiresAuth && !store.isAuthenticated) { + next('/admin/auth') + } else if (to.meta.requiresVisitor && store.isAuthenticated) { + next('/sections/elements/progress-bars') } else { - // No authentication required for the route - next(); + next() } - }); + }) + + + + // function isAuthenticated() { + // // Check if the user is authenticated, e.g., by verifying the presence of a valid token or logged-in state + // // Return true if authenticated, false otherwise + // // Example: return localStorage.getItem('token') !== null; + + // return true; + // } + + // function getCurrentUserRole() { + // // Retrieve the current user's role from your authentication system or state management + // // Return the role of the current user + // // Example: return localStorage.getItem('userRole'); + // return "guest"; + // } + + // // Route guard + // router.beforeEach((to, from, next) => { + // if (to.meta.requiresAuth) { + // // Check if the user is authenticated, e.g., by checking the presence of a valid token or logged-in state + // if (isAuthenticated()) { + // // Check if the user has the required role + // if (to.meta.requiredRole && getCurrentUserRole() !== to.meta.requiredRole) { + // // Redirect to a different route or show an error message + // next({ path: '/unauthorized' }); + // } else { + // // Proceed to the requested route + // next(); + // } + // } else { + // // Redirect to the login page or a suitable route for unauthenticated users + // next({ path: '/logout' }); + // } + // } else { + // // No authentication required for the route + // next(); + // } + // }); export default router; \ No newline at end of file diff --git a/src/stores/index.js b/src/stores/index.js index e266a41..a15b9ce 100644 --- a/src/stores/index.js +++ b/src/stores/index.js @@ -1,7 +1,27 @@ import { defineStore } from "pinia"; import bootstrap from "bootstrap/dist/js/bootstrap.min.js"; + export const useAppStore = defineStore("storeId", { state: () => ({ bootstrap, }), }); + + +export const useStore = defineStore({ + id: 'main', + state: () => ({ + isAuthenticated: false, + user: null, + }), + actions: { + login(user) { + this.isAuthenticated = true + this.user = user + }, + logout() { + this.isAuthenticated = false + this.user = null + }, + }, +}) \ No newline at end of file diff --git a/src/views/Auth/AdminLogin.vue b/src/views/Auth/AdminLogin.vue index 450c696..5a5c4e0 100644 --- a/src/views/Auth/AdminLogin.vue +++ b/src/views/Auth/AdminLogin.vue @@ -5,22 +5,47 @@ import MaterialInput from "@/components/MaterialInput.vue"; import MaterialButton from "@/components/MaterialButton.vue"; import setMaterialInput from "@/assets/js/material-input"; import axios from "axios"; +import { ref } from 'vue' +import { useStore } from '@/stores' +import router from '@/router' onMounted(() => { setMaterialInput(); }); +const store = useStore() + const email = ref('') + const password = ref('') + + const handleLogin = async () => { - try { - const response = await axios.post('https://jsonplaceholder.typicode.com/posts?userId=1'); - console.log(response.data); - - // Redirect the user to the admin dashboard - // router.push('/admin/dashboard'); - } catch (err) { - console.log('Error:', err); - } -}; + try { + // Send a POST request to the login endpoint + const response = await axios.get('https://dummyjson.com/products/1', { + email: email.value, + password: password.value + }) + + // Check if the login was successful + console.log(response && response.status===200); + if (response && response.status===200) { + // Save the user to the store + store.login({ + name: response.data.name, + email: response.data.email + }) + + // Navigate the user to the admin dashboard + router.push('/') + } else { + // Display an error message if the login failed + alert('Invalid email or password') + } + } catch (err) { + console.log('Error:', err); + } + }; + + + \ No newline at end of file From 49409ba211a4c33f46a4e48843c7546359df954d Mon Sep 17 00:00:00 2001 From: Saadani-Malek92 Date: Mon, 27 May 2024 16:48:48 +0100 Subject: [PATCH 5/5] asidebar --- src/views/Admin/SideNavAdmin.vue | 52 +++++++++--------- src/views/Admin/dashboard.vue | 92 ++++++++++++++++++++++++++++---- 2 files changed, 109 insertions(+), 35 deletions(-) diff --git a/src/views/Admin/SideNavAdmin.vue b/src/views/Admin/SideNavAdmin.vue index 83cc272..9d70a9d 100644 --- a/src/views/Admin/SideNavAdmin.vue +++ b/src/views/Admin/SideNavAdmin.vue @@ -1,18 +1,35 @@ - \ No newline at end of file diff --git a/src/views/Admin/dashboard.vue b/src/views/Admin/dashboard.vue index 2393b72..5f42597 100644 --- a/src/views/Admin/dashboard.vue +++ b/src/views/Admin/dashboard.vue @@ -1,13 +1,15 @@