Implemented article creation/edition draft

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

@@ -117,6 +117,9 @@ span {
 	font-size: var(--font-body);
 	font-weight: var(--medium-weight);
 
+	text-align: center;
+	text-decoration: none;
+
 	background-color: var(--primary);
 
 	transition: background-color 150ms, color 150ms;
@@ -134,6 +137,11 @@ span {
 	background-color: var(--primary-verylight);
 }
 
+.button-secondary:active {
+	background-color: var(--primary-light);
+	color: var(--neutral-dark);
+}
+
 .button-primary:hover {
 	background-color: var(--primary-light);
 }

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

@@ -1,11 +1,12 @@
-import { createRouter, createWebHistory, type NavigationGuard } from 'vue-router'
+import { createRouter, createWebHistory } from 'vue-router'
 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'
-import Edition from '@/views/Edition.vue'
+import ArticlesEdit from '@/views/ArticlesEdit.vue'
+import ArticlesNew from '@/views/ArticlesNew.vue'
 
 const router = createRouter({
 	history: createWebHistory(import.meta.env.BASE_URL),
@@ -45,7 +46,15 @@ const router = createRouter({
 		{
 			path: '/articles/edit/:articleID',
 			name: 'edition',
-			component: Edition,
+			component: ArticlesEdit,
+			meta: {
+				title: 'GohCMS - Edition'
+			}
+		},
+		{
+			path: '/articles/new',
+			name: 'edition',
+			component: ArticlesNew,
 			meta: {
 				title: 'GohCMS - Edition'
 			}

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

@@ -1,11 +1,19 @@
 <script setup lang="ts">
-
+import { RouterLink } from 'vue-router'
 </script>
 
 <template>
-    <p>articles page</p>
+	<main>
+		<RouterLink class="button-primary" to="/articles/new">Créer un article</RouterLink>
+	</main>
 </template>
 
 <style scoped>
+main {
+	padding: 32px;
+}
 
+main>a {
+	width: fit-content;
+}
 </style>

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

@@ -5,8 +5,7 @@ import { useRoute } from 'vue-router';
 import tinymceScriptSrc from '@/assets/tinymce/tinymce.min.js?url'
 
 const articleID = useRoute().params.articleID
-const defaultData = `<h1>Bienvenue</h1><p>Vous &ecirc;tes en mode <em>&eacute;dition</em> d'article.</p><p>Celui-ci semble encore neuf ! Supprimez ces lignes et laissez libre cours &agrave; votre imagination :)</p><p>Pour plus d'infos, rendez-vous sur la <a title="Attention, rickroll incoming" href="https:/www.youtube.com/watch?v=dQw4w9WgXcQ" target="_blank" rel="noopener">page d'aide</a>.</p>`
-const editorData: Ref<string> = ref(defaultData)
+const editorData: Ref<string> = ref('')
 
 console.log(articleID)
 

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

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { RouterLink } from 'vue-router'
+
+const defaultData = `<h1>Bienvenue</h1><p>Vous &ecirc;tes en mode <em>&eacute;dition</em> d'article.</p><p>Celui-ci semble encore neuf ! Supprimez ces lignes et laissez libre cours &agrave; votre imagination :)</p><p>Pour plus d'infos, rendez-vous sur la <a title="Attention, rickroll incoming" href="https:/www.youtube.com/watch?v=dQw4w9WgXcQ" target="_blank" rel="noopener">page d'aide</a>.</p>`
+</script>
+
+<template>
+	<main>
+		<h2>Créer un nouvel article</h2>
+		<form @submit.prevent="">
+			<div class="inputs-group">
+				<div class="label-input">
+					<label for="title">Titre de l'article</label>
+					<input id="title" name="title" placeholder="" type="text">
+					<p>⚠️ Ce titre servira d'identifiant, il doit être unique !</p>
+				</div>
+				<div class="label-input">
+					<label for="page">Page</label>
+					<input id="page" name="page" placeholder="" type="text">
+				</div>
+			</div>
+			<div class="buttons-group">
+				<RouterLink class="button-secondary" type="submit" to="/articles">Annuler</RouterLink>
+				<button class="button-primary" type="submit">Créer</button>
+			</div>
+		</form>
+	</main>
+</template>
+
+<style scoped>
+main {
+	padding: 0 64px;
+	max-width: 100%;
+	width: 560px;
+}
+
+.buttons-group {
+	display: flex;
+	gap: 8px;
+	width: 100%;
+	margin: 32px 0;
+}
+
+.buttons-group a,
+.buttons-group button {
+	width: 100%;
+}
+
+.inputs-group {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+}
+</style>