Admin Panel Update

Author: atomjoy

composer.json

@@ -9,7 +9,7 @@
 	"license": "MIT",
 	"require": {
 		"php": "^8.1",
-		"atomjoy/apilogin": "^4.4.7",
+		"atomjoy/apilogin": "^4.4.8",
 		"guzzlehttp/guzzle": "^7.2",
 		"laravel/framework": "^10.10",
 		"laravel/sanctum": "^3.2",

composer.lock

@@ -5,9 +5,9 @@ import axios from 'axios'
 export const useNotifyStore = defineStore('notify', () => {
 	// State
 	const items = ref(new Map())
-	const page = ref(1)
-	const unread = ref(0)
-	const open = ref(false)
+	let page = ref(1)
+	let unread = ref(0)
+	let open = ref(false)
 
 	// Actions
 	function toggleOpen() {

resources/js/atomjoy/notify/NotifyPanel/stores/notify-panel.js

@@ -30,6 +30,11 @@ if (props.avatar) {
 	avatar_path.value = avatar_default
 }
 
+function defImage(e) {
+	e.onerror = null
+	e.target.src = avatar_default
+}
+
 onMounted(() => {})
 </script>
 <template>
@@ -56,7 +61,7 @@ onMounted(() => {})
 				</div>
 
 				<div class="user-image">
-					<img :src="avatar_path" />
+					<img :src="avatar_path" @error="defImage" />
 					<div :class="{ 'open-icon': true, 'close-icon': open }"><ChevronIcon /></div>
 				</div>
 			</div>

resources/js/atomjoy/notify/ProfilMenu/ProfilMenu.vue

@@ -23,7 +23,7 @@ const notify = useNotifyStore()
 		<ProfilMenu :logged="logged" :profil="true" :avatar="avatar_path" :name="user.name" :email="user.email" />
 		<div class="notify-box">
 			<ChangeTheme />
-			<AdminPanelButton :active="true" />
+			<AdminPanelButton v-if="user.is_admin" :active="false" />
 			<MessagesButton :active="message" @click="message = !message" />
 			<NotifyButton :active="notify.unread > 0" @click="notify.toggleOpen" />
 			<NotifyPanel />

resources/js/atomjoy/panel/client/components/Topbar/Topbar.vue

@@ -20,10 +20,10 @@ const routes = [
 	},
 	// admin panel dashboard
 	{
-		path: '/panel/dashboard',
+		path: '/admin/dashboard',
 		name: 'admin.dashboard',
 		component: () => import('@/atomjoy/panel/admin/views/DashboardView.vue'),
-		meta: { requiresAuth: true },
+		meta: { requiresAuth: true, requiresAdmin: true },
 	},
 	// client panel profil
 	{

resources/js/atomjoy/panel/client/router/routes.js

@@ -3,6 +3,10 @@ import { ref } from 'vue'
 import { RouterLink } from 'vue-router'
 import ChevronIcon from '@/atomjoy/icons/ChevronIcon.vue'
 import MenuIcon from '@/atomjoy/icons/MenuIcon.vue'
+import { useAuthStore } from '@/atomjoy/auth/stores/auth.js'
+
+const auth = useAuthStore()
+const user = auth.getUser
 const open = ref(false)
 </script>
 
@@ -19,7 +23,7 @@ const open = ref(false)
 
 		<slot name="footer">
 			<div class="footer-links">
-				<RouterLink to="/admin/panel" class="link-admin-dashboard"> {{ $t('Go to admin panel') }} </RouterLink>
+				<RouterLink v-if="user.is_admin" to="/admin/panel" class="link-admin-dashboard"> {{ $t('Go to admin panel') }} </RouterLink>
 			</div>
 		</slot>
 	</div>

resources/js/atomjoy/panel/client/slots/NavbarSlot.vue

@@ -48,6 +48,13 @@ router.beforeEach(async (to, from, next) => {
 	const auth = useAuthStore()
 	// ✅ Login with remember me token and/or check is user authenticated
 	await auth.isAuthenticated()
+	// Only admin route
+	if (to.meta.requiresAdmin) {
+		if (!auth.isLoggedIn.value || auth.getUser.value.is_admin != 1) {
+			// ✅ Redirect to login if not logged or not admin
+			next({ name: 'login' })
+		}
+	}
 	// ✅ Redirect to panel if logged
 	if (to.name == 'login' && auth.isLoggedIn.value) {
 		// Panel route name here: panel or client.panel