Implemented navbar

web/admin-gui/src/App.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
-import { RouterView } from 'vue-router'
+import { RouterView, useRoute } from 'vue-router'
+import Navbar from './components/Navbar.vue';
 </script>
 
 <template>
+	<Navbar v-if="useRoute().name !== 'login'"></Navbar>
 	<RouterView />
 </template>

web/admin-gui/src/assets/base.css

@@ -21,6 +21,9 @@
 	--neutral-dark: #121212;
 	--neutral-medium: #707070;
 	--neutral-light: #aaaaaa;
+	--neutral-verylight: #e7e7e7;
+	--brand-blue: #00ACD7;
+	--error: #E80000;
 }
 
 body {
@@ -40,9 +43,9 @@ h2, h3, h4, h5, h6 {
 
 * {
 	font-family: 'Hind', sans-serif;
-	box-sizing: border-box;
-
 	color: var(--neutral-dark);
+
+	box-sizing: border-box;
 }
 
 .label-input,
@@ -75,11 +78,11 @@ h2, h3, h4, h5, h6 {
 }
 
 .label-input-error input {
-	border: solid 1.75px red;
+	border: solid 1.75px var(--error);
 }
 
 .label-input-error p {
-	color: red;
+	color: var(--error);
 }
 
 .button-primary,

web/admin-gui/src/components/Navbar.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { useAuthStore } from '@/stores/AuthStore';
+import { deleteCookie } from '@/utils/cookies';
+import { RouterLink, useRouter } from 'vue-router'
+
+const router = useRouter()
+
+function logout() {
+	deleteCookie('JWTtoken')
+	deleteCookie('JWTexpire')
+	useAuthStore().clearAll()
+	router.push('/')
+}
+</script>
+
+<template>
+	<header>
+		<h2><span style="color:var(--brand-blue)">Go</span>hCMS</h2>
+		<nav>
+			<RouterLink to="/home">Accueil</RouterLink>
+			<RouterLink to="/articles">Articles</RouterLink>
+			<a class="disconnect-link" @click="logout()">Se déconnecter</a>
+		</nav>
+	</header>
+</template>
+
+<style scoped>
+header {
+	display: flex;
+	align-items: center;
+	padding: 0 24px;
+
+	box-shadow: #0005 0 0 10px;
+	
+	width: 100%;
+}
+
+header h2 {
+	margin: 0;
+	padding: 10px 0;
+
+	width: fit-content;
+
+	color: var(--neutral-dark);
+}
+
+header h2 span {
+	font-family: inherit;
+}
+
+header nav {
+	display: flex;
+	gap: 16px;
+
+	width: 100%;
+	padding: 20px;
+}
+
+header nav a {
+	text-decoration: none;
+	border-radius: var(--radius);
+	padding: 4px 16px;
+	cursor: pointer;
+	transition: 150ms background-color;
+}
+
+header nav a:hover {
+	background-color: var(--neutral-verylight);
+}
+
+.disconnect-link {
+	margin-left: auto;
+}
+
+.disconnect-link:hover {
+	background-color: #fff;
+	color: var(--error);
+}
+</style>

web/admin-gui/src/router/index.ts

@@ -1,9 +1,10 @@
 import { createRouter, createWebHistory, type NavigationGuard } from 'vue-router'
-import Home from '@/views/Home.vue'
-import Debug from '@/views/Debug.vue'
-import Login from '@/views/Login.vue'
 import { useAuthStore } from '@/stores/AuthStore'
 import { nextTick } from 'vue'
+import Debug from '@/views/Debug.vue'
+import Login from '@/views/Login.vue'
+import Home from '@/views/Home.vue'
+import Articles from '@/views/Articles.vue'
 
 const router = createRouter({
 	history: createWebHistory(import.meta.env.BASE_URL),
@@ -32,6 +33,14 @@ const router = createRouter({
 				title: 'GohCMS - Accueil'
 			}
 		},
+		{
+			path: '/articles',
+			name: 'articles',
+			component: Articles,
+			meta: {
+				title: 'GohCMS - Articles'
+			}
+		},
 	]
 })
 

web/admin-gui/src/stores/AuthStore.ts

@@ -10,11 +10,16 @@ export interface jwtFormat {
 }
 
 export const useAuthStore = defineStore("AuthStore", () => {
-	const expire = ref("")
-	const token = ref("")
+	const expire = ref('')
+	const token = ref('')
 	
+	function clearAll(): void {
+		expire.value = ''
+		token.value = ''
+	}
+ 
 	function isSet(): boolean {
-		return token.value !== undefined && token.value !== ""
+		return token.value !== undefined && token.value !== ''
 	}
 	
 	function isExpired(): boolean {
@@ -43,5 +48,5 @@ export const useAuthStore = defineStore("AuthStore", () => {
 	
 	initStore()
 	
-	return { expire, token, isValid }
+	return { expire, token, isValid, clearAll }
 })

web/admin-gui/src/utils/cookies.ts

@@ -10,4 +10,12 @@ export function setCookie(cookieData: cookie): void {
 
 export function getCookie(cookieName: string): string {
 	return document.cookie.match('(^|;)\\s*' + cookieName + '\\s*=\\s*([^;]+)')?.pop() || ''
+}
+
+export function deleteCookie(cookieName: string): void {
+	setCookie({
+		key: cookieName,
+		value: '',
+		expire: new Date(0).toString()
+	})
 }

web/admin-gui/src/views/Articles.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+    <p>articles page</p>
+</template>
+
+<style scoped>
+
+</style>

web/admin-gui/src/views/Home.vue

@@ -1,9 +1,8 @@
 <script setup lang="ts">
-
 </script>
 
 <template>
-
+    <p>home page</p>
 </template>
 
 <style scoped>

web/admin-gui/src/views/Login.vue

@@ -69,7 +69,7 @@ function login(email: string, password: string): void {
 <template>
 	<div class="login-page">
 		<div class="login-form">
-			<h2>Connexion à <span style="color:#00ACD7">Go</span>hCMS</h2>
+			<h2>Connexion à <span style="color:var(--brand-blue)">Go</span>hCMS</h2>
 			
 			<form @submit.prevent="login(email, password)">
 				<div class="inputs-group">
@@ -96,6 +96,11 @@ function login(email: string, password: string): void {
 h2 { 
 	margin: 0 0 16px 0;
 }
+
+h2 span { 
+	font-family: inherit;
+}
+
 .login-page {
 	display: flex;
 	justify-content: center;