Texte + Auth discord en cours

README.md

@@ -1,4 +1,4 @@
-# Zac-Mainframe
+# Zac-Mainframe-Front
 
 **A great Web Interface to manage my own developed software.**
 

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "zac-mainframe",
-  "version": "0.0.1",
+  "name": "zac-mainframe-front",
+  "version": "0.0.2",
   "private": true,
   "type": "module",
   "scripts": {

src/main.ts

@@ -1,18 +1,18 @@
-import { createApp } from 'vue'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { fas } from '@fortawesome/free-solid-svg-icons'
 import { fab } from '@fortawesome/free-brands-svg-icons'
+import { createApp } from 'vue'
+import cookies from 'vue-cookies'
 
 import App from './App.vue'
 import router from './router'
-import cookies from 'vue-cookies'
 import './assets/main.css'
 
 library.add(fas, fab)
 
 createApp(App)
   .use(router)
-  .use(cookies, { expires: '1d' })
+  .use(cookies)
   .component('font-awesome-icon', FontAwesomeIcon)
   .mount('#app')

src/router/index.ts

@@ -1,12 +1,6 @@
 import { createRouter, createWebHistory } from 'vue-router'
-
-import IndexView from '../views/IndexView.vue'
-import HomeView from '../views/Index/HomeView.vue'
-import AboutView from '../views/Index/AboutView.vue'
-
-import DiscordView from '../views/DiscordView.vue'
-import DashboardView from '../views/Discord/DashboardView.vue'
-import ConfigView from '../views/Discord/ConfigView.vue'
+import { inject } from 'vue'
+import type { VueCookies } from 'vue-cookies'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -14,38 +8,50 @@ const router = createRouter({
     {
       path: '/',
       name: 'index',
-      component: IndexView,
+      component: () => import('../views/IndexView.vue'),
       children: [
         {
           path: '',
           name: 'home',
-          component: HomeView
+          component: () => import('../views/Index/HomeView.vue')
         },
         {
           path: '/about',
           name: 'about',
-          component: AboutView
+          component: () => import('../views/Index/AboutView.vue')
         }
       ]
     },
     {
       path: '/discord',
       name: 'discord',
-      component: DiscordView,
+      component: () => import('../views/DiscordView.vue'),
+      meta: { discordAuth: true },
       children: [
         {
           path: '',
           name: 'dashboard',
-          component: DashboardView
+          component: () => import('../views/Discord/DashboardView.vue')
         },
         {
           path: '/config',
           name: 'config',
-          component: ConfigView
+          component: () => import('../views/Discord/ConfigView.vue')
         }
       ]
     }
   ]
 })
 
+router.beforeEach((to) => {
+  const $cookies = inject<VueCookies>('$cookies')
+  if (!$cookies) return console.log('Error: $cookies is not injected')
+
+  if (to.meta.discordAuth && !$cookies.isKey('DISCORD_CODE')) {
+    window.location.href =
+      'https://discord.com/oauth2/authorize?client_id=1274800564449841172&response_type=code&redirect_uri=https%3A%2F%2Fmainframe.zac.ovh%2Fdiscord&scope=identify'
+    return
+  }
+})
+
 export default router

src/views/DiscordView.vue

@@ -1,5 +1,13 @@
 <script setup lang="ts">
-import { RouterLink, RouterView } from 'vue-router'
+import { RouterLink, RouterView, useRoute } from 'vue-router'
+import { inject } from 'vue'
+import type { VueCookies } from 'vue-cookies'
+
+const $route = useRoute()
+const $cookies = inject<VueCookies>('$cookies')
+if (!$cookies) throw new Error('Missing VueCookies')
+
+if ($route.query.code) $cookies.set('DISCORD_CODE', $route.query.code, '30d', '/discord', 'mainframe.zac.ovh', true, 'Strict')
 </script>
 
 <template>

src/views/Index/AboutView.vue

@@ -1,5 +1,26 @@
 <template>
     <div class="main">
-        <h1>Test About</h1>
+        <h1>A propos de moi</h1>
+        <br>
+        <h3 style="font-weight: bold;">Bonjour,</h3>
+        <p>
+            Je suis Zachary Guénot, né en Décembre 2003, actuellement administrateur réseau et développeur et futur
+            ingénieur DevOps.
+            Depuis tout jeune, je rève de devenir informaticien et de travailler dans ce domaine qui me fascine.
+            <br>
+            <br>
+            En 2018, je découvre la passion des serveurs et j'apprends à utiliser Linux en reconditionnant un vieux PC
+            portable en serveur Minecraft avec Ubuntu.
+            Remarquant qu'il n'est pas assez puissant, je le remplace par une tour et installe Proxmox après quelques
+            recherches sur la virtualisation.
+            <br>
+            <br>
+            J'ai passé 4 ans à apprendre et à toucher à tout et ça m'a permis d'approfondir mes connaissances et
+            compétences avant même d'attaquer les études supérieures.
+            En Juillet 2022, j'arrive en tant qu'alternant techniciens systèmes et réseaux dans la boîte PASSMAN qui est
+            plutôt centré sur le réseau.
+            Je prouve rapidement mes capacités et je passe de hotliner N1 à technicien N2 jusqu'en Septembre 2024 ou je
+            deviens ingénieur N3 et développeur.
+        </p>
     </div>
 </template>

src/views/Index/HomeView.vue

@@ -1,5 +1,10 @@
 <template>
     <div class="main">
-        <h1>Test Home</h1>
+        <h1>Bienvenue !</h1>
+        <h3>
+            Vous êtes dans le centre de contrôle de tous les projets que j'ai créé.
+            <br>
+            Je vous laisse naviguer dans le menu à gauche pour en savoir plus sur moi :)
+        </h3>
     </div>
 </template>

vite.config.ts

@@ -12,6 +12,7 @@ export default defineConfig({
     }
   },
   server: {
+    host: true,
     port: 3100
   }
 })