Skip to content
Snippets Groups Projects
Commit 4ccd7ea0 authored by Lucie Bader's avatar Lucie Bader
Browse files

Correction beug bouton connexion barre latérale

parent d8271bc1
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
barre_latérale/sidebar.js
+ 72
− 149
View file @ 4ccd7ea0
// ✅ Chargement du script de la barre latérale
console.log("✅ sidebar.js chargé avec succès !");
// let authToken = '';
//Variable globale qui contient le token
// Variable globale pour le token d'authentification
let authToken = null;
// Fonction pour charger le token
// Fonction pour charger le token depuis le stockage local
async function loadAuthToken() {
try {
const result = await browser.storage.local.get("accessToken");
......@@ -15,37 +14,13 @@ async function loadAuthToken() {
console.error("❌ Erreur lors de la récupération du token :", error);
}
}
// Gestionnaire global des erreurs
window.addEventListener('error', (e) => {
console.error("❗️ Erreur globale détectée :", e.message, "dans", e.filename, ":", e.lineno);
});
// 📩 Écoute des messages pour recharger la barre latérale
browser.runtime.onMessage.addListener((message) => {
console.log("📩 Message reçu dans la barre latérale :", message);
if (message.action === "refreshSidebar") {
console.log("🔄 Rafraîchissement de la barre latérale déclenché.");
window.location.reload();
}
if (message.action === "mot_selectionne") {
const selectedWordElement = document.getElementById('motSelectionne');
if (selectedWordElement) {
selectedWordElement.textContent = message.selectedText;
console.log(`📝 Mot sélectionné affiché : ${message.selectedText}`);
} else {
console.warn("⚠️ Élément #motSelectionne introuvable.");
}
}
if (message.action === "updateUI") {
updateAuthButton(message.isLoggedIn);
toggleHighlightMessage(message.isLoggedIn);
}
});
// Vérification du format du token
// Fonction pour valider le format du token
function validateToken(token) {
const isValid = /^\S+\.\S+\.\S+$/.test(token);
if (!isValid) {
......@@ -54,7 +29,7 @@ function validateToken(token) {
return isValid;
}
// Lecture du token depuis le local storage
// Fonction pour lire le token depuis le stockage local
async function readTokenFromStorage() {
const { accessToken } = await browser.storage.local.get("accessToken");
if (accessToken && validateToken(accessToken)) {
......@@ -63,32 +38,55 @@ async function readTokenFromStorage() {
return true;
} else {
console.error("❌ Token invalide ou non trouvé dans le stockage local.");
authToken = null;
return false;
}
}
// Affichage des lexiques avec cases à cocher et pictogrammes
// Fonction pour mettre à jour le bouton d'authentification
function updateAuthButton(isLoggedIn) {
const authButton = document.getElementById("auth-button");
if (authButton) {
authButton.textContent = isLoggedIn ? "Se déconnecter" : "Se connecter";
}
}
// Fonction pour afficher ou masquer certains éléments selon l'état de connexion
function toggleElementsVisibility(isLoggedIn) {
const addToLexiques = document.getElementById('add-to-lexiques');
const possibleDefinitions = document.getElementById('possible-definitions');
if (addToLexiques) {
addToLexiques.style.display = isLoggedIn ? 'block' : 'none';
}
if (possibleDefinitions) {
possibleDefinitions.style.display = isLoggedIn ? 'block' : 'none';
}
}
// Fonction pour afficher un message de surlignage selon l'état de connexion
function toggleHighlightMessage(isLoggedIn) {
const highlightNote = document.getElementById('highlight-note');
if (highlightNote) {
highlightNote.style.display = isLoggedIn ? 'block' : 'none';
}
}
// Fonction pour afficher les lexiques
function displayLexicons(lexicons) {
const lexiquesContainer = document.getElementById('lexiques');
lexiquesContainer.innerHTML = '';
if (lexicons.length === 0) {
console.log("⚠️ Aucun lexique à afficher.");
lexiquesContainer.textContent = 'Aucun lexique disponible.';
return;
}
console.log("🖼️ Affichage des lexiques...");
lexicons.forEach(({ lexiconName, lexiconId, active }) => {
console.log(`➡️ Affichage du lexique : ${lexiconName} (ID: ${lexiconId})`);
const lexiqueDiv = document.createElement('div');
lexiqueDiv.className = 'lexique-item';
const iconDiv = document.createElement('div');
iconDiv.className = 'lexique-icon';
iconDiv.style.backgroundColor = '#ccc';
const labelSpan = document.createElement('span');
labelSpan.className = 'lexique-label';
labelSpan.textContent = lexiconName;
......@@ -100,151 +98,76 @@ function displayLexicons(lexicons) {
checkbox.addEventListener('change', () => {
console.log(
`🔄 Changement de surlignage pour ${lexiconName} (ID: ${lexiconId}): ${
checkbox.checked ? 'activé' : 'désactivé'
}`
`🔄 Changement de surlignage pour ${lexiconName} (ID: ${lexiconId}): ${checkbox.checked ? 'activé' : 'désactivé'}`
);
// Implémentez ici la logique pour activer/désactiver le surlignage
});
lexiqueDiv.appendChild(iconDiv);
lexiqueDiv.appendChild(labelSpan);
lexiqueDiv.appendChild(checkbox);
lexiquesContainer.appendChild(lexiqueDiv);
});
}
// Gestion de l'affichage du message d'information
function toggleHighlightMessage(isLoggedIn) {
const highlightNote = document.getElementById('highlight-note');
if (highlightNote) {
highlightNote.style.display = isLoggedIn ? 'block' : 'none';
// Fonction pour récupérer les lexiques depuis l'API
async function fetchLexicons() {
if (!authToken) {
console.warn("⚠️ Aucun token disponible. Veuillez vous connecter.");
document.getElementById("lexiques").textContent = "Veuillez vous connecter pour voir vos lexiques.";
return;
}
}
// Récupération des lexiques de l'utilisateur après la connexion de l'utilisateur
async function fetchLexicons() {
try {
console.log("🔄 Début de la récupération des lexiques...");
console.log("🔑 Token utilisé :", authToken);
if (!authToken) {
console.warn("⚠️ Aucun token disponible. Veuillez vous connecter.");
const lexiquesContainer = document.getElementById("lexiques");
lexiquesContainer.textContent = "Veuillez vous connecter pour voir vos lexiques.";
return;
}
// Appel de l'API
const lexicons = await getLexicons(authToken, 52, 'fr');
console.log("📚 Réponse brute de l'API :", lexicons);
if (!Array.isArray(lexicons) || lexicons.length === 0) {
console.warn("⚠️ Aucun lexique trouvé.");
const lexiquesContainer = document.getElementById("lexiques");
lexiquesContainer.textContent = "Aucun lexique disponible.";
document.getElementById("lexiques").textContent = "Aucun lexique disponible.";
return;
}
// Transformation des données
const results = lexicons.map((lexicon) => {
console.log("📋 Transformation du lexique :", lexicon);
return {
lexiconName: lexicon.category === 'User'
? `Lexique personnel (${lexicon.user?.pseudo || 'Inconnu'})`
: `Lexique de groupe (${lexicon.group?.name || 'Inconnu'})`,
lexiconId: lexicon.id,
active: lexicon.active || false,
};
});
console.log("Appel de displayLexicons avec :", results);
// Affichage des lexiques
displayLexicons(results);
displayLexicons(lexicons.map((lexicon) => ({
lexiconName: lexicon.category === 'User' ? `Lexique personnel (${lexicon.user?.pseudo || 'Inconnu'})` : `Lexique de groupe (${lexicon.group?.name || 'Inconnu'})`,
lexiconId: lexicon.id,
active: lexicon.active || false,
})));
} catch (error) {
console.error("❌ Erreur lors du chargement des lexiques :", error.message);
console.error("Détails de l'erreur :", error);
const lexiquesContainer = document.getElementById("lexiques");
lexiquesContainer.textContent = "Erreur lors du chargement des lexiques.";
document.getElementById("lexiques").textContent = "Erreur lors du chargement des lexiques.";
}
}
// Gestion du bouton de connexion/déconnexion
async function handleAuthButtonClick() {
await browser.runtime.sendMessage({ action: "toggleAuth" });
const isLoggedIn = await readTokenFromStorage();
updateAuthButton(isLoggedIn);
toggleHighlightMessage(isLoggedIn);
toggleElementsVisibility(isLoggedIn);
function toggleElementsVisibility(isLoggedIn) {
const addToLexiques = document.getElementById('add-to-lexiques');
const possibleDefinitions = document.getElementById('possible-definitions');
if (addToLexiques) {
addToLexiques.style.display = isLoggedIn ? 'block' : 'none';
}
if (possibleDefinitions) {
possibleDefinitions.style.display = isLoggedIn ? 'block' : 'none';
if (isLoggedIn) {
await fetchLexicons();
} else {
document.getElementById("lexiques").textContent = "Veuillez vous connecter pour voir vos lexiques.";
}
}
// Lancement automatique après le chargement de la page
window.onload = async () => {
console.log("📦 Page complètement chargée. Récupération du token depuis le stockage local et récupération des lexiques...");
console.log("📦 Page complètement chargée.");
const isLoggedIn = await readTokenFromStorage();
updateAuthButton(isLoggedIn);
toggleHighlightMessage(isLoggedIn);
toggleHighlightMessage(isLoggedIn);
toggleElementsVisibility(isLoggedIn);
await fetchLexicons();
// Gestion du bouton de connexion/déconnexion
const authButton = document.getElementById("auth-button");
if (authButton) {
authButton.addEventListener("click", () => {
browser.runtime.sendMessage({ action: "toggleAuth" }).then(() => {
browser.runtime.sendMessage({ action: "checkAuthStatus" }).then((isLoggedIn) => {
updateAuthButton(isLoggedIn);
toggleHighlightMessage(isLoggedIn);
toggleElementsVisibility(isLoggedIn);
});
});
});
if (isLoggedIn) {
await fetchLexicons();
} else {
document.getElementById("lexiques").textContent = "Veuillez vous connecter pour voir vos lexiques.";
}
};
function updateAuthButton(isLoggedIn) {
const authButton = document.getElementById("auth-button");
if (authButton) {
authButton.textContent = isLoggedIn ? "Se déconnecter" : "Se connecter";
authButton.addEventListener("click", handleAuthButtonClick);
}
}
//----------------ENVOI A LA BARRE LATERALE----------------------------------------//
browser.runtime.onMessage.addListener((message) => {
if (message.action === "mot_et_lexiques") {
const { mot, lexiques } = message;
console.log("Mot reçu :", mot);
console.log("Liste des lexiques :", lexiques);
// Mettre à jour l'affichage du mot sélectionné
document.getElementById('motSelectionne').textContent = mot;
// Mettre à jour la liste des lexiques dans la barre latérale
const container = document.getElementById('lexiques');
container.innerHTML = ''; //On supprime le contenu existant
lexiques.forEach(({ lexiconName, lexiconId, isPresent }) => {
const div = document.createElement('div');
div.className = 'lexique-item';
const status = isPresent ? 'Présent' : 'Non présent';
div.innerHTML = `
<div>${lexiconName} (ID: ${lexiconId})</div>
<div>${status}</div>
`;
container.appendChild(div);
});
}
});
};
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment