diff --git a/FrontEnd/assets/icons/image-01-stroke-rounded (1).svg b/FrontEnd/assets/icons/image-01-stroke-rounded (1).svg new file mode 100644 index 000000000..b86653e34 --- /dev/null +++ b/FrontEnd/assets/icons/image-01-stroke-rounded (1).svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/FrontEnd/assets/style.css b/FrontEnd/assets/style.css index 7bca0ed1a..864916d79 100644 --- a/FrontEnd/assets/style.css +++ b/FrontEnd/assets/style.css @@ -3,19 +3,87 @@ License: none (public domain) */ -html, body, div, span, applet, object, iframe, -h1, h2, h3, h4, h5, h6, p, blockquote, pre, -a, abbr, acronym, address, big, cite, code, -del, dfn, em, img, ins, kbd, q, s, samp, -small, strike, strong, sub, sup, tt, var, -b, u, i, center, -dl, dt, dd, ol, ul, li, -fieldset, form, label, legend, -table, caption, tbody, tfoot, thead, tr, th, td, -article, aside, canvas, details, embed, -figure, figcaption, footer, header, hgroup, -menu, nav, output, ruby, section, summary, -time, mark, audio, video { +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { margin: 0; padding: 0; border: 0; @@ -23,46 +91,75 @@ time, mark, audio, video { font: inherit; vertical-align: baseline; } + /* HTML5 display-role reset for older browsers */ -article, aside, details, figcaption, figure, -footer, header, hgroup, menu, nav, section { +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { display: block; + position: relative; } + body { line-height: 1; } -ol, ul { + +ol, +ul { list-style: none; } -blockquote, q { + +blockquote, +q { quotes: none; } -blockquote:before, blockquote:after, -q:before, q:after { + +blockquote:before, +blockquote:after, +q:before, +q:after { content: ''; content: none; } + table { border-collapse: collapse; border-spacing: 0; } + /** end reset css**/ body { max-width: 1140px; - margin:auto; - font-family: 'Work Sans' ; + margin: auto; + font-family: 'Work Sans'; font-size: 14px; + background-color: #FEFDF0; } + header { display: flex; justify-content: space-between; - margin: 50px 0 + margin: 50px 0; + flex-direction: column; + margin-left: auto; + margin-right: auto; + width: auto; } + section { margin: 50px 0 } -h1{ +h1, +a.logo-accueil { display: flex; flex-direction: column; font-family: 'Syne'; @@ -71,40 +168,47 @@ h1{ color: #B1663C } -h1 > span { +h1>span { font-family: 'Work Sans'; - font-size:10px; + font-size: 10px; letter-spacing: 0.1em; -; + ; } -h2{ +h2 { font-family: 'Syne'; font-weight: 700; font-size: 30px; color: #1D6154 } + nav ul { display: flex; align-items: center; list-style-type: none; } + nav li { padding: 0 10px; font-size: 1.2em; + color: black; } -li:hover { +li, +a:hover { color: #B1663C; } + #introduction { display: flex; align-items: center; } + #introduction figure { flex: 1 } + #introduction img { display: block; margin: auto; @@ -114,6 +218,7 @@ li:hover { #introduction article { flex: 1 } + #introduction h2 { margin-bottom: 1em; } @@ -121,10 +226,11 @@ li:hover { #introduction p { margin-bottom: 0.5em; } + #portfolio h2 { text-align: center; - margin-bottom: 1em; } + .gallery { width: 100%; display: grid; @@ -137,20 +243,24 @@ li:hover { width: 100%; } + #contact { width: 50%; -margin: auto; + margin: auto; } -#contact > * { + +#contact>* { text-align: center; } -#contact h2{ + +#contact h2 { margin-bottom: 20px; } + #contact form { text-align: left; - margin-top:30px; + margin-top: 30px; display: flex; flex-direction: column; } @@ -161,23 +271,32 @@ margin: auto; border: none; box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.09); } + +#login input { + height: 50px; + font-size: 1.2em; + border: none; + box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.09); +} + #contact label { margin: 2em 0 1em 0; } + #contact textarea { border: none; box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.09); } -input[type="submit"]{ +input[type="submit"] { font-family: 'Syne'; font-weight: 700; color: white; background-color: #1D6154; - margin : 2em auto ; + margin: 2em auto; width: 180px; text-align: center; - border-radius: 60px ; + border-radius: 60px; } footer nav ul { @@ -186,3 +305,388 @@ footer nav ul { margin: 2em } +footer { + background-color: white; + +} + +a { + text-decoration: none; + color: black; +} + + +/* Black Bainer */ + +#header-top { + display: flex; + justify-content: space-between; + margin-left: auto; + margin-right: auto; + margin-top: 50px; + width: 1140px; +} + +.banner { + display: flex; + justify-content: center; + padding: 20px 0; + margin-top: 0; + background-color: black; + color: white; +} + +.edit { + display: flex; + flex-direction: row; + gap: 12px; +} + + +/* Btn Edition */ + +.title-edit { + display: flex; + justify-content: center; + align-items: center; + gap: 31px; + margin-top: 100px; + margin-bottom: 30px; +} + +.btnEdit { + border: none; + background: none; + gap: 10px; + cursor: pointer; +} + +/* Fomulaire de connexion */ + +form { + display: flex; + flex-direction: column; + padding-top: 30px; +} + +.input-connexion { + height: 25px; + width: 350px; + border: none; + font-weight: bold; + filter: drop-shadow(0px 3px 10px rgba(0, 0, 0, 0.1)); + padding: 10px; + font-size: 17px; +} + +.connexion { + display: flex; + flex-direction: column; + align-items: center; +} + +#login input { + height: 50px; + font-size: 1.2em; + border: none; + box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.09); +} + +.input { + display: flex; + flex-direction: column; + gap: 5px; +} + + +.title-form { + margin-bottom: 40px; +} + +.label-password { + margin-top: 20px; +} + +.Mp-oublie { + color: black; +} + + +/* Filtres */ + +.filters { + display: flex; + justify-content: center; + margin-bottom: 30px; +} + +.btns-filters { + font-family: 'Syne'; + font-size: 0.9em; + color: #1D6154; + background-color: #FEFDF0; + border-color: #1D6154; + border-width: 1px; + text-align: center; + border-radius: 60px; + padding: 7px 20px 7px 20px; + margin-top: 30px; + margin-right: 10px; + margin-bottom: 25px; +} + +.btns-filters:focus, +.btns-filters.selected { + background-color: #1D6154; + color: white; + border-width: 0px; +} + +button[autofocus] { + outline: none; +} + +.hidden { + display: none; +} + +/* Modale */ + + +.modal { + display: none; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + top: 0; + left: 0; + background: rgba(0, 0, 0, 0.3); + z-index: 1; +} + +#modal { + position: fixed; + z-index: 2; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + +} + +.modale-wrapper { + display: flex; + flex-direction: column; + align-items: center; + max-width: calc(100vw - 20px); + max-height: calc(100vh - 50px); + width: 630px; + padding: 30px; + border-radius: 10px; + background-color: #FFFFFF; + margin: auto; + overflow: auto; + z-index: 2; + +} + +.modalTop { + display: flex; + flex-direction: column; + width: 100%; + justify-content: center; +} + +.modal-close { + text-align: right; + top: 10px; + right: 10px; + background: none; + border: none; + font-size: 1.5rem; + color: #333; + cursor: pointer; +} + +.modal-return { + text-align: left; + top: 10px; + right: 10px; + background: none; + border: none; + font-size: 1.5rem; + color: #333; + cursor: pointer; + margin-right: 550px; +} + + +/* Modale Formulaire */ + +.pictureForm form { + padding-top: 10px; +} + +.pictureAdd { + font-size: 80px; +} + +#addPictureBtn { + font-family: "Syne"; + font-size: 14px; + font-weight: 700; + background-color: #1d6154; + color: white; + border-radius: 60px; + width: 237px; + height: 36px; + margin-top: 25px; + margin-bottom: 25px; + cursor: pointer; +} + +#labelPhoto { + display: flex; + flex-direction: column; + align-items: center; + height: 200px; + background-color: #E8F1F6; + border-radius: 3px; + margin-bottom: 30px; + text-align: center; + padding-top: 25px; + position: relative; + box-sizing: border-box; + +} + +#labelPhoto p { + font-size: 10px; + font-weight: 400; + margin-top: 10px; +} + +#label-image { + padding: 13px 30px 13px 30px; + background-color: #cbd6dc; + border-radius: 25px; + color: #376b89; + margin-top: 17px; + cursor: pointer; +} + + +#selectCategory, +#title-input { + width: 100%; + height: 37px; + box-shadow: 0px 0px 15px rgb(233, 233, 228); + border-width: 0px; + margin-top: 10px; + text-align: left; + +} + +#selectCategory { + margin-bottom: 25px; +} + +.selectCategory { + margin-top: 10px; +} + +#modal-valider { + font-family: 'Syne'; + font-weight: 700; + color: white; + background-color: #6f717099; + padding: 10px 25px 10px 25px; + width: 230px; + border-width: 0px; + text-align: center; + border-radius: 60px; + margin-top: 30px; + cursor: pointer; +} + +#modal-valider.active { + background-color: #1d6154; + /* Couleur de fond du bouton "Ajouter une photo" */ + color: #ffffff; + /* Couleur du texte, si besoin */ +} + +.titleModal { + font-size: 30px; + font-weight: 400; + font-family: 'Work Sans'; + color: black; + margin-bottom: 58px; +} + +.labelModal { + text-align: left; +} + +.modal-separator { + border: 1px solid #B3B3B3; + width: 420px; +} + +/*** Taille des travaux dans modal***/ + +.modal-gallery { + display: grid; + justify-content: center; + grid-template-columns: 1fr 1fr 1fr 1fr 1fr; + grid-column-gap: 6px; + grid-row-gap: 25px; + width: 419px; + margin-bottom: 30px; +} + +.modal-gallery img { + height: 104px; + width: 78px; + object-fit: cover; +} + +/*** Btn Poubelle ***/ +.fa-trash-can { + color: white; + background-color: black; + padding: 2px; + border-radius: 20%; + position: absolute; + border-radius: 2px; + width: 17px; + height: 17px; + display: inline-flex; + justify-content: center; + align-items: center; + top: 2px; + left: 55px; +} + +#imagePreviewContainer { + height: auto; + display: flex; + justify-content: center; + align-items: center; + background-color: #E8F1F6; + text-align: center; + /* Couleur de fond claire */ + margin-bottom: 20px; + border-radius: 10px; + /* Arrondir les coins */ +} + +#imagePreview { + max-width: 100%; + max-height: 300px; + /* Taille maximale de l'image */ + object-fit: cover; + /* Pour conserver le ratio d'aspect et ne pas déformer l'image */ + border-radius: 5px; + /* Arrondir légèrement les coins de l'image */ +} \ No newline at end of file diff --git a/FrontEnd/connection.html b/FrontEnd/connection.html new file mode 100644 index 000000000..3f8977092 --- /dev/null +++ b/FrontEnd/connection.html @@ -0,0 +1,58 @@ + + + + + + Sophie Bluel - Architecte d'intérieur + + + + + + + + + + + +
+
+

Sophie BluelArchitecte d'intérieur

+ +
+
+
+
+
+

Login

+
+
+ + + + +
+
+ +
+ Mot de passe oublié +
+
+ + + + \ No newline at end of file diff --git a/FrontEnd/index.html b/FrontEnd/index.html index 37889a882..6ec360d19 100644 --- a/FrontEnd/index.html +++ b/FrontEnd/index.html @@ -1,109 +1,135 @@ + Sophie Bluel - Architecte d'intérieur - + + + + -
-

Sophie Bluel Architecte d'intérieur

- -
-
-
-
- -
-
-

Designer d'espace

-

Je raconte votre histoire, je valorise vos idées. Je vous accompagne de la conception à la livraison finale du chantier.

-

Chaque projet sera étudié en commun, de façon à mettre en valeur les volumes, les matières et les couleurs dans le respect de l’esprit des lieux et le choix adapté des matériaux. Le suivi du chantier sera assuré dans le souci du détail, le respect du planning et du budget.

-

En cas de besoin, une équipe pluridisciplinaire peut-être constituée : architecte DPLG, décorateur(trice)

-
-
-
-

Mes Projets

-
-
- Abajour Tahina -
Abajour Tahina
-
-
- Appartement Paris V -
Appartement Paris V
-
-
- Restaurant Sushisen - Londres -
Restaurant Sushisen - Londres
-
-
- Villa “La Balisiere” - Port Louis -
Villa “La Balisiere” - Port Louis
-
-
- Structures Thermopolis -
Structures Thermopolis
-
-
- Appartement Paris X -
Appartement Paris X
-
-
- Pavillon “Le coteau” - Cassis -
Pavillon “Le coteau” - Cassis
-
-
- Villa Ferneze - Isola d’Elba -
Villa Ferneze - Isola d’Elba
-
-
- Appartement Paris XVIII -
Appartement Paris XVIII
-
-
- Bar “Lullaby” - Paris -
Bar “Lullaby” - Paris
-
+
+ +
+

Sophie Bluel Architecte d'intérieur

+ +
+
+
+
- Hotel First Arte - New Delhi -
Hotel First Arte - New Delhi
+ sophie-photo
+
+

Designer d'espace

+

Je raconte votre histoire, je valorise vos idées. Je vous accompagne de la conception à la livraison + finale du chantier.

+

Chaque projet sera étudié en commun, de façon à mettre en valeur les volumes, les matières et les + couleurs dans le respect de l’esprit des lieux et le choix adapté des matériaux. Le suivi du + chantier sera assuré dans le souci du détail, le respect du planning et du budget.

+

En cas de besoin, une équipe pluridisciplinaire peut-être constituée : architecte DPLG, + décorateur(trice)

+
+
+ -
-
-

Contact

-

Vous avez un projet ? Discutons-en !

-
- - - - - - - -
-
-
+
+
+

Mes projets

+ +
+
+
+
+
+
+
+

Contact

+

Vous avez un projet ? Discutons-en !

+
+ + + + + + + +
+
+ - + - + + \ No newline at end of file diff --git a/FrontEnd/javascript/contact.js b/FrontEnd/javascript/contact.js new file mode 100644 index 000000000..269b721ce --- /dev/null +++ b/FrontEnd/javascript/contact.js @@ -0,0 +1,18 @@ +/** gestion formulaire de contact **/ + +let contact = document.querySelector("contact") +form.addEventListener("submit", async (e) => { + e.preventDefault() + let baliseNom = document.getElementById("nom") + let nom = baliseNom.value + let baliseEmail = document.getElementById("email") + let email = baliseEmail.value + let baliseMessage = document.getElementById("message") + let message = baliseMessage.value + if (email.length = 0 || password.length == 0 || message.lenght == 0) { + alert("Veuillez remplir tous les champs"); + } else { + alert("Ce formulaire n'est pas encore fonctionnel") + } +}); + diff --git a/FrontEnd/javascript/index.js b/FrontEnd/javascript/index.js new file mode 100644 index 000000000..5535bff33 --- /dev/null +++ b/FrontEnd/javascript/index.js @@ -0,0 +1,367 @@ +// Vérifie si l'utilisateur est connecté +function isConnected() { + // Retourne vrai si le token existe dans le localStorage, faux sinon + return localStorage.getItem("token") !== null; +} + +function adminConnect() { + const logBtn = document.querySelector("#logBtn"); + const logout = document.querySelector("#logout"); + if (isConnected()) { + logout.innerText = "logout"; + logout.addEventListener("click", () => { + localStorage.removeItem("token"); + window.location.href = "./index.html"; // Redirige vers l'accueil après déconnexion + }); + } else { + logBtn.innerText = "login"; + logBtn.addEventListener("click", () => { + window.location.href = "./connection.html"; // Redirige vers la page de connexion + }); + } +} + +// Ajuste l'affichage de certains éléments du DOM en fonction de l'état de connexion +function adminDisplay() { + const log = isConnected(); + if (log) { + document.querySelectorAll(".admin").forEach(elt => elt.classList.remove("hidden")); + document.querySelectorAll(".noAdmin").forEach(elt => elt.classList.add("hidden")); + } else { + document.querySelectorAll(".admin").forEach(elt => elt.classList.add("hidden")); + document.querySelectorAll(".noAdmin").forEach(elt => elt.classList.remove("hidden")); + } +} + +// Appel de l'API pour récupérer les catégories et les travaux +async function getData(url) { + try { + const response = await fetch(url); + const data = await response.json(); + return data; + } catch (err) { + console.error(err); + return []; + } +}; + +// Création des boutons de filtrage des catégories +function createCategoriesButtons(categories) { + const filters = document.getElementById("filters"); + categories.forEach(cat => filters.append(createCategoryButton(cat))); +} + +function createCategoryButton(category) { + const button = document.createElement("button"); + button.textContent = category.name; + button.classList.add("btns-filters"); + return button; +} + +// Création des cartes pour afficher les travaux dans la gallerie et dans la modale + +function createCardsWorks(works, isModal = false) { + let galleryWorks = isModal ? document.querySelector('.modal-gallery') : document.querySelector('.gallery'); + galleryWorks.textContent = ""; // Nettoyage de la galerie + works.forEach(project => { + const workFigure = document.createElement("figure"); + const workImage = document.createElement("img"); + workImage.src = project.imageUrl; + workImage.alt = project.title; + workImage.crossOrigin = "anonymous"; + workFigure.setAttribute('data-id', project.id); + let workTitle = document.createElement("figcaption"); + workTitle.innerText = project.title; + if (isModal) { + let trashIcon = document.createElement('i'); + trashIcon.classList.add("fa-solid", "fa-trash-can"); + trashIcon.addEventListener("click", async (e) => { + e.preventDefault(); + await deleteWork(works, project); + }); + workFigure.appendChild(trashIcon); + workTitle.classList.add("hidden"); + } + workFigure.appendChild(workImage); + workFigure.appendChild(workTitle); + galleryWorks.appendChild(workFigure); + }); +} + +// Création d'une fonction pour rendre les filtres dynamiques +function filterCategory(categoryName, works) { + let filteredWorks; + if (categoryName === "Tous") { + filteredWorks = works; + } else { + filteredWorks = works.filter((element) => element.category.name === categoryName); + } + createCardsWorks(filteredWorks); +} + +function addFilterEvents(works) { + document.querySelectorAll(".btns-filters") + .forEach(btn => btn.addEventListener("click", evt => filterCategory(evt.target.textContent, works))); +} + +//MODAL + +// Fonction pour faire apparaître la première et deuxième modale et retour en arrière + +function displayModal() { + document.querySelectorAll("div[data-name]") + if (isConnected()) { + const openModal = document.querySelector(".btnEdit"); + openModal.addEventListener("click", (event) => { + event.preventDefault(); + event.stopPropagation(); + document.querySelector("div[data-name = modalGallery]").classList.remove("hidden"); + }); + const openForm = document.querySelector(".addPicture"); + openForm.addEventListener("click", (event) => { + event.preventDefault(); + event.stopPropagation(); + document.querySelector("div[data-name = modalForm]").classList.remove("hidden"); + document.querySelector("div[data-name = modalGallery]").classList.add("hidden"); + }); + } else { + return false; + } +} + +// Fonction poour retour en arrière deuxième + +function returnModal() { + const returnModal = document.querySelector(".modal-return"); + returnModal.addEventListener("click", (event) => { + event.preventDefault(); + document.querySelector("div[data-name = modalGallery]").classList.remove("hidden"); + document.querySelector("div[data-name = modalForm]").classList.add("hidden"); + resetPreviewForm(); + }); +} + +// Fonction pour fermer la modale + +function noDisplayAllModal() { + window.addEventListener("click", (event) => { + const modal = document.querySelector(".allModal:not(.hidden)"); + if (modal && !modal.contains(event.target)) { + closeModal(); + } + }); + + document.querySelectorAll(".modal-close").forEach(closeButton => { + closeButton.addEventListener("click", closeModal); + }); + + const modalContent = document.getElementById("modal"); + modalContent.addEventListener("click", (event) => { + event.stopPropagation(); + }); +} + +function closeModal() { + document.querySelectorAll(".allModal").forEach(modal => modal.classList.add("hidden")); +} + +// fonction pour ajouter les travaux dans la modale +function addWorkModal(works) { + createCardsWorks(works, true); +}; + +// fonction pour supprimer les travaux + +async function deleteWork(works, work) { + try { + const response = await fetch(`http://localhost:5678/api/works/${work.id}`, { + method: "DELETE", + headers: { + Authorization: `Bearer ${localStorage.getItem("token")}`, // Utilisation correcte des backticks pour une chaîne de modèle + }, + }); + if (response.ok) { + works = works.filter(w => w !== work); + allGalleries(works); + } else { + throw new Error("Failed to delete work"); // Gère les réponses non réussies + } + } catch (error) { + console.error("Erreur lors de la suppression:", error); // Log en cas d'erreur + } +} + +// fonction pour réafficher les deux galleries (modal et gallerie ) + +function allGalleries(works) { + createCardsWorks(works); + createCardsWorks(works, true); +} + +// Récupération des catégories pour l'input + +async function allCategorySelect() { + const categories = await getData("http://localhost:5678/api/categories"); + const selectCategory = document.getElementById("selectCategory"); + + // Ajouter une option vide au début + const emptyOption = document.createElement("option"); + emptyOption.value = ""; // valeur vide + emptyOption.textContent = "Choisissez une catégorie"; // texte indicatif + selectCategory.appendChild(emptyOption); + + categories.forEach(category => { + const option = document.createElement("option"); + option.value = category.id; + option.textContent = category.name; + selectCategory.appendChild(option); + }); +} + + +// Gérer l'ajout d'une photo + +async function handleFormSubmit(event) { + event.preventDefault(); + event.stopPropagation(); + + // Récupérer les éléments du formulaire + const form = event.target; + const imageInput = form.querySelector("#image"); + const titleInput = form.querySelector("#title-input"); + const categorySelect = form.querySelector("#selectCategory"); + const image = imageInput.files[0]; // Récupérer le fichier image + + + // Vérifier que l'image est présente et qu'elle est de type .jpg ou .png + if (!image || !["image/jpeg", "image/png"].includes(image.type)) { + alert("Veuillez sélectionner une image au format .jpg ou .png."); + resetPreviewForm(); + return; + } + + // Vérifier que la taille de l'image ne dépasse pas 4 Mo + if (image.size > 4 * 1024 * 1024) { + alert("La taille de l'image ne doit pas dépasser 4 Mo."); + resetPreviewForm(); + return; + } + + // Vérifier que le titre est renseigné + const title = titleInput.value.trim(); + if (!title) { + alert("Veuillez entrer un titre."); + return; + } + + // Vérifier qu'une catégorie est sélectionnée + const category = categorySelect.value; + if (!category) { + alert("Veuillez sélectionner une catégorie."); + return; + } + + // Créer l'objet FormData à envoyer + const formData = new FormData(); + formData.append("title", title); + formData.append("category", category); + formData.append("image", image); + + // Envoyer l'objet FormData à l'API + try { + const response = await fetch("http://localhost:5678/api/works", { + method: "POST", + headers: { + Authorization: `Bearer ${localStorage.getItem("token")}`, // Utilisation du token stocké pour l'authentification + }, + body: formData, // Envoi du FormData contenant les informations du formulaire + }); + + if (response.ok) { + const newWork = await response.json(); + alert("Photo ajoutée avec succès"); + + // Mettre à jour le tableau works avec le nouvel élément + const works = await getData("http://localhost:5678/api/works"); + + // Réafficher les galeries + allGalleries(works); + // Réinitialiser le formulaire + resetPreviewForm(); + + } else { + throw new Error("Échec de l'ajout de la photo"); + } + } catch (error) { + console.error("Erreur lors de l'ajout de la photo:", error); + } +} + + +// fonction pour prévisualiser la photo avant de l'ajouter + +function handleImagePreview(event) { + const file = event.target.files[0]; + const imagePreviewContainer = document.getElementById("imagePreviewContainer"); + const imagePreview = document.getElementById("imagePreview"); + const fileInput = document.querySelector(".file-input"); + const btnValider = document.getElementById("modal-valider"); + const preview = document.querySelector('#imagePreview'); + const imageInput = document.getElementById("image"); + + + if (file) { + const reader = new FileReader(); + + reader.onload = function (e) { + imagePreview.src = e.target.result; + imagePreviewContainer.style.display = "block"; // Affiche l'image preview + const blockAjoutPhoto = document.getElementById('labelPhoto'); + blockAjoutPhoto.style.display = "none"; + btnValider.classList.add("active"); + }; + + reader.readAsDataURL(file); + + } else { + imagePreviewContainer.style.display = "none"; // Cache l'image preview si aucun fichier n'est sélectionné + btnValider.classList.remove("active"); + } + +} + +// Fonction pour réinitialiser le formulaire de prévisualisation +function resetPreviewForm() { + const btnValider = document.getElementById("modal-valider"); + const form = document.querySelector(".pictureForm"); + form.reset(); // Réinitialiser le formulaire + + const imagePreviewContainer = document.getElementById("imagePreviewContainer"); + const imagePreview = document.getElementById("imagePreview"); + const blockAjoutPhoto = document.getElementById('labelPhoto'); + // Cacher la prévisualisation de l'image et réafficher le bloc d'ajout de photo + imagePreviewContainer.style.display = "none"; // Cache l'image preview + imagePreview.src = ""; // Réinitialiser la source de l'image de prévisualisation + blockAjoutPhoto.style.display = "flex"; // Réaffiche le bloc de téléchargement de photo + btnValider.classList.remove("active"); +} + +// Initialisation de la fonction liée à la connexion et l'affichage lors du chargement de la page +document.addEventListener("DOMContentLoaded", main); +async function main() { + adminConnect(); + adminDisplay(); + await allCategorySelect(); + const categories = await getData("http://localhost:5678/api/categories"); + const works = await getData("http://localhost:5678/api/works"); + categories.unshift({ id: 0, name: "Tous" }); + createCategoriesButtons(categories); + createCardsWorks(works); + addFilterEvents(works); + displayModal(); + returnModal(); + noDisplayAllModal(); + const modalWorks = addWorkModal(works, true); + const pictureForm = document.querySelector(".pictureForm"); + pictureForm.addEventListener("submit", handleFormSubmit); +}; diff --git a/FrontEnd/javascript/login.js b/FrontEnd/javascript/login.js new file mode 100644 index 000000000..6c62f3f2a --- /dev/null +++ b/FrontEnd/javascript/login.js @@ -0,0 +1,36 @@ +// Gestion du Login page de connexion // + +let form = document.querySelector("Form") +form.addEventListener("submit", async (e) => { + e.preventDefault() + + let baliseEmail = document.getElementById("email") + let email = baliseEmail.value + let balisePassword = document.getElementById("password") + let password = balisePassword.value + if (email.trim().length == 0 || password.length == 0) { + alert("Veuillez remplir tous les champs"); + } else { + try { + const response = await fetch("http://localhost:5678/api/users/login", { + method: "POST", + headers: { + "Content-Type": "application/json" + }, + body: JSON.stringify({ + email: email, + password: password + }), + }); + const data = await response.json(); + if (data.token) { + localStorage.setItem('token', data.token); + window.location.replace("index.html"); + } else { + throw new Error("Données de connexions incorrectes"); + } + } catch (err) { + alert(err.message); + } + } +}); diff --git a/FrontEnd/projet3.code-workspace b/FrontEnd/projet3.code-workspace new file mode 100644 index 000000000..8c785ce5f --- /dev/null +++ b/FrontEnd/projet3.code-workspace @@ -0,0 +1,7 @@ +{ + "folders": [ + { + "path": "../../../../workspace" + } + ] +} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 000000000..c10308ce8 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,6 @@ +{ + "name": "Projet-3-SOPHIE-BLUEL", + "lockfileVersion": 3, + "requires": true, + "packages": {} +}