06 Novembre 2025¶

Objectifs¶

• Finir la connexion via Discord

• Continuer le panel

Déroulement¶

09H12¶

J'ai compris pourquoi cela ne voulait pas, le lien généré par mon bot a mal été configuré et ne récupérais que les informations de l'utilisateur identify. J'ai donc rajouté la section guilds et email pour récupérer les serveurs Discord de l'utilisateur ainsi que son adresse mail.

10H09¶

J'affiche maintenant les serveurs actifs et les serveurs que l'utilisateur possède.

Je suis en train de modifier la page panel pour qu'il corresponde à mes besoins.

11H00¶

Pour un code plus lisible, j'ai décidé de créer des controlleurs qui gère les requêtes et de laisser les routeurs simplement redirigé là ou il faut.

12H09¶

Je suis en train de réfléchir à comment je vais implémenté la sécurité de l'API car pour le moment, le token et les informations de l'utilisateur, je le stocke coté serveur et non coté client.

12H41¶

Maintenant, l'utilisateur va stocké son token coté client pour les appels à l'API et on garde les informations coté serveur pour l'interface.

J'ai changé le fonctionnement du routage et j'ai fait une classe Discord qui va gérer les appels à l'API de Discord.

Pour m'aider, j'ai ajouté 2 fichiers /public/assets/cookie.js et /public/assets/fetch.js que j'ai déjà utilisé sur d'autres projets pour me faciliter la vie sur tout ce qui est appel à l'API et gestion du token coté client.

20H53¶

J'ai du m'absenté, j'ai repris il y a peu mais je ne compte pas aller plus loin aujourd'hui.

La partie de connexion est faite.

Le code actuel de /public/js/panel.js est généré par IA. À la base il y avait plus de code mais j'ai décidé de garder l'essentiel. Voici le code généré par IA :

var sidebarLinks;
var serverItems;

function init()
{
    sidebarLinks = document.querySelectorAll('.sidebar-link');
    serverItems = document.querySelectorAll('.server-item');;

    sidebarLinks.forEach(link => {
        link.addEventListener('click', (e) => {
            e.preventDefault();
            const targetId = link.getAttribute('data-section');
            switchSection(targetId);
            history.pushState(null, '', `#${targetId}`);
        });
    });

    serverItems.forEach(item => {
        item.addEventListener('click', function (e) {
            serverItems.forEach(s => s.classList.remove('active'));
            this.classList.add('active');
        });
    });
}

function switchSection(targetId) 
{
    const targetSection = document.getElementById(targetId);
    const sections = document.querySelectorAll('.panel-section');
    const activeLink = document.querySelector(`[data-section="${targetId}"]`);

    sections.forEach(section => section.classList.remove('active'));

    sidebarLinks.forEach(link => link.classList.remove('active'));

    if (targetSection) 
        targetSection.classList.add('active');

    if (activeLink) 
        activeLink.classList.add('active');

    window.scrollTo({
        top: 0,
        behavior: 'smooth'
    });
}

document.addEventListener("DOMContentLoaded", init);

C'est une version que j'ai légérement modifié pour la suite.

J'ai juste repris le code car il avait été généré avec l'interface. Je ne compte pas l'utilisé d'avantage pour le code.