revert 6f637968bdd5dea7f472e5a07517e072ed69715e

revert Version 1.0.0 - Basic Web Application

public/javascripts/filexplorer.js

@@ -0,0 +1,786 @@
+document.addEventListener("contextmenu", (e) => {
+
+    e.preventDefault()
+})
+
+explorer.createWindow(() => {
+
+    var inCopyOrCut = null;
+
+    const View = new ViewWindow({
+        title: `<i class="fa fa-folder"></i> Gestionnaire de fichiers`,
+        width: "1000px",
+        height: "600px"
+    })
+    
+
+
+    
+    
+
+    goHomePath()
+    function goHomePath() {
+        const rFiles = post("FX_GET", "homepath")
+
+        rFiles.then((result) => {
+            loadFiles(result)
+        })
+    }
+
+    function goSharePath() {
+        const rFiles = post("FX_GET", "sharepath")
+        
+        rFiles.then((result) => {
+            loadFiles(result)
+        })
+    }
+
+ 
+   
+
+    View.setContent(`
+        <div class="fx-window">
+            <div class='fx-bar'>
+                <span id='${View.getViewTitle()}_home' class='btn-cover'><i class='fa fa-home'></i></span>
+                <span id='${View.getViewTitle()}_sharebtn' class='btn-cover'><i class="fa-solid fa-share-from-square"></i></span>
+                <input class='fx-root-input' type="text" id='${View.getViewTitle()}_rootInput'>
+                <div class='fx-bar-actions'>
+                <button id='${View.getViewTitle()}_newFolder' class='btn blue'><span><i class='fa fa-folder'></i> Nouv. dossier</span></button>
+                <button id='${View.getViewTitle()}_newFile' class='btn green'><span><i class="fa-solid fa-file-arrow-up"></i> Nouveau</span></button>
+                </div> 
+            </div>
+            <div id='${View.getViewTitle()}_explorer' class='fx-explorer'>
+            <div style='font-size: 24px; margin-top: 225px;'  class='t-center'>
+            <p><i class="fa-solid fa-rotate fa-spin"></i> Chargement en cours ...</p>
+            </div>
+            </div>
+        </div>
+        
+    `)
+
+    const rootInput = getID(View.getViewTitle() + '_rootInput')
+    const explorer = getID(View.getViewTitle() + '_explorer')
+    const newFolder = getID(View.getViewTitle() + '_newFolder')
+    const newFile = getID(View.getViewTitle() + '_newFile')
+    const home = getID(View.getViewTitle() + '_home')
+    const sharebtn = getID(View.getViewTitle() + '_sharebtn')
+
+
+
+    
+
+    View.ViewWindowDiv.addEventListener("contextmenu", () => {
+      
+        
+        if(inCopyOrCut != null) {
+
+                const dMenu = new DroppableMenu()
+                dMenu.add("paste", "<i class='fa fa-paste'></i> Coller")
+                dMenu.show()
+        
+                dMenu.get("paste").addEventListener("click", () => {
+                    console.log({newPath: rootInput.value, action: inCopyOrCut.action, file: inCopyOrCut.file, name: inCopyOrCut.file.name, orginalPath: inCopyOrCut.orginalPath})
+                    dMenu.hide()
+                    const reqFiles = post("FX_PASTE", {newPath: rootInput.value, action: inCopyOrCut.action, file: inCopyOrCut.file, name: inCopyOrCut.file.name, orginalPath: inCopyOrCut.orginalPath})
+                    reqFiles.then((result) => {
+                        if(result == "OK") {
+                            const reqFiles = post("FX_GET", rootInput.value)
+                            reqFiles.then((result) => {
+                                loadFiles(result)
+                            })
+                        } else if(result == "NOT_PERMITTED") {
+                            const reqFiles = post("FX_GET", rootInput.value)
+                            reqFiles.then((result) => {
+                                loadFiles(result)
+                            })
+                            View.createPopup({
+                                title: `<i class='fa fa-warning'></i> Erreur`,
+                                content: `<p class='yellow'>Vous n'avez pas les permissions pour coller ce fichier.</p>`
+                            })
+                        } else {
+                            const reqFiles = post("FX_GET", rootInput.value)
+                            reqFiles.then((result) => {
+                                loadFiles(result)
+                            })
+                            View.createPopup({
+                                title: `<i class='fa fa-warning'></i> Erreur`,
+                                content: `<p class='yellow'>Une erreur est survenue.</p>`
+                            })
+                        }
+                        })
+        
+                        inCopyOrCut = null
+                })
+            } else {
+                console.log("LISTENER : " + rootInput.value)
+    
+            }
+        
+    })
+
+    home.addEventListener("click", () => {
+        
+        goHomePath()
+
+    })
+
+    sharebtn.addEventListener("click", () => {
+
+        goSharePath()
+
+    })  
+
+
+    newFolder.addEventListener("click", () => {
+
+        View.createPopup({
+            title: `<i class='fa fa-folder'></i> Nouveau dossier`,
+            content: `
+                <input type='text' class='field' id='${View.getViewTitle()}_foldername'>
+                <div id='${View.getViewTitle()}_folderInfo'></div>
+                <button class='btn green' id='${View.getViewTitle()}_foldercreate'><span><i class='fa fa-add'></i> Créer</span></button>
+        `}) 
+
+        const foldername = getID(View.getViewTitle() + "_foldername")
+        const foldercreate = getID(View.getViewTitle() + "_foldercreate")
+        const folderInfo = new TextResponse(View.getViewTitle() + "_folderInfo")
+
+        folderInfo.setSize("13px")
+      
+
+        foldercreate.addEventListener("click", () => {
+            folderInfo.clear()
+            if(foldername.value.length < 1) {
+                folderInfo.err("Le nom du dossier est trop court.")
+                return
+            }
+
+            const regex = new RegExp(/^[a-zA-Z0-9-_]+$/)
+
+            if(!regex.test(foldername.value) | foldername.value.replace(/\s/g, '').length < 1) {
+                folderInfo.err("Le nom du dossier est invalide.")
+                return
+            }
+
+            const reqFiles = post("FX_NEW_FOLDER", rootInput.value + "/" +  foldername.value)
+            reqFiles.then((result) => {
+                if(result == "OK") {
+                    View.destroyPopup(`<i class="fa fa-folder"></i> Nouveau dossier`)
+                    const reqFiles = post("FX_GET", rootInput.value)
+                    reqFiles.then((result) => {
+                        loadFiles(result)
+                    })
+                } else if(result == "EXIST") {
+                    folderInfo.err("Le dossier existe déjà.")
+                } else if(result == "NOT_PERMITTED") {
+                    folderInfo.err("Vous n'avez pas les permissions pour créer un dossier ici.")
+                } else {
+                    folderInfo.err("Une erreur est survenue.")
+                }
+            })
+
+         
+        })
+        
+        
+    
+    })
+
+
+    // Create a new file with a popup wth 2 options, upload or create, if create give a input name or if upload, upload a file
+
+    newFile.addEventListener("click", () => {
+
+        View.createPopup({
+            title: `<i class='fa-solid fa-file-arrow-up'></i> Nouveau fichier`,
+            content: `
+                <input type='text' class='field' id='${View.getViewTitle()}_filename'>
+                <div id='${View.getViewTitle()}_fileInfo'></div>
+                <button class='btn green' id='${View.getViewTitle()}_filecreate'><span><i class='fa fa-add'></i> Créer</span></button>
+                <button class='btn blue' id='${View.getViewTitle()}_fileupload'><span><i class='fa fa-upload'></i> Upload</span></button>
+        `})
+
+        const filename = getID(View.getViewTitle() + "_filename")
+        const filecreate = getID(View.getViewTitle() + "_filecreate")
+        const fileupload = getID(View.getViewTitle() + "_fileupload")
+        const fileInfo = new TextResponse(View.getViewTitle() + "_fileInfo")
+
+        fileInfo.setSize("13px")
+
+        filecreate.addEventListener("click", () => {
+
+            fileInfo.clear()
+            if(filename.value.length < 1) {
+                fileInfo.err("Le nom du fichier est trop court.")
+                return
+            }
+
+            const regex = new RegExp(/^[a-zA-Z0-9-_.]+$/)
+
+            if(!regex.test(filename.value) | filename.value.replace(/\s/g, '').length < 1) {
+                fileInfo.err("Le nom du fichier est invalide.")
+                return
+            }
+
+            const reqFiles = post("FX_NEW_FILE", rootInput.value + "/" +  filename.value)
+            reqFiles.then((result) => {
+                if(result == "OK") {
+                    View.destroyPopup(`<i class="fa-solid fa-file-arrow-up"></i> Nouveau fichier`)
+                    const reqFiles = post("FX_GET", rootInput.value)
+                    reqFiles.then((result) => {
+                        loadFiles(result)
+                    })
+                } else if(result == "EXIST") {
+                    fileInfo.err("Le fichier existe déjà.")
+                } else if(result == "NOT_PERMITTED") {
+                    fileInfo.err("Vous n'avez pas les permissions pour créer un fichier ici.")
+                } else {
+                    fileInfo.err("Une erreur est survenue.")
+                }
+            })
+
+
+        })
+
+        fileupload.addEventListener("click", () => {
+
+            fileInfo.clear()
+            View.destroyPopup(`<i class="fa-solid fa-file-arrow-up"></i> Nouveau fichier`)
+            View.createPopup({
+                title: `<i class='fa-solid fa-file-arrow-up'></i> Upload`,
+                content: `
+                    <input type='file' class='field' id='${View.getViewTitle()}_fileuploadInput'>
+                    <div id='${View.getViewTitle()}_fileuploadInfo'></div>
+                    <button class='btn green' id='${View.getViewTitle()}_fileuploadBtn'><span><i class='fa fa-upload'></i> Upload</span></button>
+            `})
+
+            const fileuploadInput = getID(View.getViewTitle() + "_fileuploadInput")
+            const fileuploadBtn = getID(View.getViewTitle() + "_fileuploadBtn")
+            const fileuploadInfo = new TextResponse(View.getViewTitle() + "_fileuploadInfo")
+                
+            fileuploadBtn.addEventListener("click", () => {
+
+                fileuploadInfo.clear()
+                if(fileuploadInput.files.length < 1) {
+                    fileuploadInfo.err("Aucun fichier sélectionné.")
+                    return
+                }
+
+                const file = fileuploadInput.files[0]
+                console.log(file)
+
+                const reqFiles = post("FX_UPLOAD", {name: file.name ,root: rootInput.value, file: file})
+
+                reqFiles.then((result) => {
+
+                    if(result == "OK") {
+                        View.destroyPopup(`<i class="fa-solid fa-file-arrow-up"></i> Upload`)
+                        const reqFiles = post("FX_GET", rootInput.value)
+                        reqFiles.then((result) => {
+                            loadFiles(result)
+                        })
+                    }
+                    if(result == "EXIST") {
+                        fileuploadInfo.err("Le fichier existe déjà.")
+                    }
+                    if(result == "NOT_PERMITTED") {
+                        fileuploadInfo.err("Vous n'avez pas les permissions pour uploader un fichier ici.")
+                    }
+                    if(result == "NOT_FILE") {
+                        fileuploadInfo.err("Le fichier n'est pas valide.")
+                    }
+                    if(result == "NOT_EXIST") {
+                        fileuploadInfo.err("Le fichier n'existe pas.")
+                    }
+                    if(result == "TOO_BIG") {
+                        fileuploadInfo.err("Le fichier est trop volumineux.")
+                    }
+                    if(result == "ERROR") {
+                        fileuploadInfo.err("Une erreur est survenue.")
+                    }
+                })
+            })
+        })
+    })
+
+
+
+    rootInput.addEventListener("change", () => {
+
+       const reqFiles = post("FX_GET", rootInput.value)
+       reqFiles.then((result) => {
+            loadFiles(result)
+
+       }) 
+     })
+
+    function loadFiles(files) {
+
+        rootInput.value = files.root
+        var fileElements = new Array()
+
+        if(files.content == "NOT_PERMITTED") {
+            fileElements.unshift(`<div id='fx-parent' class='fx-element'><p><i class="fa-solid fa-rotate-left"></i> Revenir au dossier parent </p></div>`)
+            fileElements.push("<p class='yellow' style='text-align: center;'><i class='fa fa-warning'></i> Vous n'avez pas les permissions pour accéder à ce dossier.</p>")
+
+        } else if(files.content == "NOT_EXIST") {
+            fileElements.unshift(`<div id='fx-parent' class='fx-element'><p><i class="fa-solid fa-rotate-left"></i> Revenir au dossier parent </p></div>`)
+            explorer.innerHTML = "<p class='yellow' style='text-align: center;'><i class='fa fa-warning'></i> Ce dossier n'existe pas.</p>"
+        } else {
+            
+       
+            for(const file of files.content) {
+
+                if(file.directory) {
+                    file.size = "Dossier"
+
+                } else {
+                    console.log('------------')
+                    console.log(file.size)
+                    console.log(bytesToSize(file.size))
+                    console.log('------------')
+                    file.size = bytesToSize(file.size)
+                }
+
+                fileElements.push(`<div id='${file.id}' class='fx-element'>
+                <div>
+                    ${getIcon(file)}
+                    <p>${file.name}</p>
+                </div>
+                <p>Taille : ${file.size}</p>
+                <p>Date de modification : ${getFormattedDate(file.lastedition)}</p>
+                </div>`)
+
+
+            }
+
+            // Sort the files by directory and then by name
+            
+            fileElements.sort((a, b) => {
+                if(a.includes("Dossier") && !b.includes("Dossier")) {
+                    return -1
+                } else if(!a.includes("Dossier") && b.includes("Dossier")) {
+                    return 1
+                } else {
+                    return 0
+                }
+
+            })
+
+            fileElements.unshift(`<div id='fx-parent' class='fx-element'><p><i class="fa-solid fa-rotate-left"></i> Revenir au dossier parent </p></div>`)
+
+
+        }
+
+        explorer.innerHTML = fileElements.join("")
+
+        const parent = document.getElementById("fx-parent")
+       
+        parent.addEventListener("click", () => {
+
+                const reqFiles = post("FX_GET", files.parent)
+                reqFiles.then((result) => {
+                    loadFiles(result)
+                })
+
+        })
+
+        if(files.content != "NOT_PERMITTED" && files.content != "NOT_EXIST") {
+
+            // If it's a directory, get the file directory and make the request to get the files in it and loadIt
+
+            for(const file of files.content) {
+
+                
+            
+                
+                const element = document.getElementById(file.id)
+                    
+                if(file.directory) {
+
+                   
+                    element.addEventListener("click", () => {
+
+                        const reqFiles = post("FX_GET", file.fileDirectory)
+                        reqFiles.then((result) => {
+                            loadFiles(result)
+                        }) 
+                    })
+                } else {
+
+                    element.addEventListener("dblclick", () => {
+                        editFile()
+                    })
+            
+                
+                }
+
+               
+
+                
+            
+                  
+                getID(file.id).addEventListener("contextmenu", () => {
+
+                    const dropMenu = new DroppableMenu()
+
+                    
+
+                    if(!file.directory) {
+                        dropMenu.add("edit", "<i class='fa-solid fa-pen'></i> Editer")
+                        dropMenu.add("share", "<i class='fa fa-share'></i> Partager")
+                        dropMenu.add("download", "<i class='fa fa-download'></i> Télécharger")
+                    }
+
+                    dropMenu.add("copy", "<i class='fa fa-copy'></i> Copier")
+                    dropMenu.add("cut", "<i class='fa fa-cut'></i> Couper")
+                    dropMenu.add("rename", "<i class='fa-solid fa-file-signature'></i> Renommer")
+                    dropMenu.add("delete", "<i class='fa fa-trash'></i> Supprimer")
+                    dropMenu.show()
+
+
+                    dropMenu.get("copy").addEventListener("click", () => {
+                        dropMenu.hide()
+                        inCopyOrCut = {"action": "copy", "file": file, "orginalPath": files.root}
+                    })
+
+                    dropMenu.get("cut").addEventListener("click", () => {
+                        dropMenu.hide()
+                        inCopyOrCut = {"action": "cut", "file": file, "orginalPath": files.root}
+                    })
+
+                    dropMenu.get("delete").addEventListener("click", () => {
+                        dropMenu.hide()
+                        const reqFiles = post("FX_DELETE", file.fileDirectory)
+                        reqFiles.then((result) => {
+                            if(result == "OK") {
+                                const reqFiles = post("FX_GET", files.root)
+                                reqFiles.then((result) => {
+                                    loadFiles(result)
+                                }) 
+                            } else if(result == "NOT_PERMITTED") {
+                                const reqFiles = post("FX_GET", files.root)
+                                reqFiles.then((result) => {
+                                    loadFiles(result)
+                                }) 
+                                View.createPopup({
+                                    title: `<i class='fa fa-warning'></i> Erreur`,
+                                    content: `<p class='yellow'>Vous n'avez pas les permissions pour supprimer ce fichier.</p>`
+                                })
+                            } else {
+                                const reqFiles = post("FX_GET", files.root)
+                                reqFiles.then((result) => {
+                                    loadFiles(result)
+                                }) 
+                                View.createPopup({
+                                    title: `<i class='fa fa-warning'></i> Erreur`,
+                                    content: `<p class='yellow'>Une erreur est survenue.</p>`
+                                })
+                             
+                            }
+                        })
+                    })
+                    dropMenu.get("rename").addEventListener("click", () => {
+
+                        dropMenu.hide()
+                        View.createPopup({
+                            title: `<i class='fa fa-file-signature'></i> Renommer`,
+                            content: `
+                                <input type='text' class='field' id='${View.getViewTitle()}_rename'>
+                                <div id='${View.getViewTitle()}_renameInfo'></div>
+                                <button class='btn green' id='${View.getViewTitle()}_renameBtn'><span><i class='fa fa-pen'></i> Renommer</span></button>
+                        `}) 
+
+                        const rename = getID(View.getViewTitle() + "_rename")
+                        const renameBtn = getID(View.getViewTitle() + "_renameBtn")
+                        const renameInfo = new TextResponse(View.getViewTitle() + "_renameInfo")
+                        renameInfo.setSize("13px")
+                        rename.value = file.name
+                        rename.focus()
+                        rename.select()
+
+                        renameBtn.addEventListener("click", () => {
+                            renameInfo.clear()
+                            if(rename.value.length < 1) {
+                                renameInfo.err("Le nom du fichier / dossier est trop court.")
+                                return
+                            }
+            
+                            const regex = new RegExp(/^[a-zA-Z0-9-_.]+$/)
+            
+                            if(!regex.test(rename.value) | rename.value.replace(/\s/g, '').length < 1) {
+                                renameInfo.err("Le nom du fichier / dossier est invalide.")
+                                return
+                            }
+            
+                            const reqFiles = post("FX_RENAME", {root: files.root, oldName: file.name, newName: rename.value})
+                            reqFiles.then((result) => {
+                                if(result == "OK") {
+                                    View.destroyPopup(`<i class="fa fa-file-signature"></i> Renommer`)
+                                    const reqFiles = post("FX_GET", files.root)
+                                    reqFiles.then((result) => {
+                                        loadFiles(result)
+                                    })
+                                } else if(result == "EXIST") {
+                                    renameInfo.err("Le fichier / dossier existe déjà.")
+                                } else if(result == "NOT_PERMITTED") {
+                                    renameInfo.err("Vous n'avez pas les permissions pour renommer ce fichier / dossier.")
+                                } else {
+                                    renameInfo.err("Une erreur est survenue.")
+                                }
+                            })
+
+                        })
+                    
+                    })
+                  
+                    if(!file.directory) {
+                    dropMenu.get("share").addEventListener("click", () => {
+                        dropMenu.hide()
+                        const reqFiles = post("FX_SHARE", {root: files.root, name: file.name})
+                        reqFiles.then((result) => {
+                            if(result == "NOT_PERMITTED") {
+                                View.createPopup({
+                                    title: `<i class='fa fa-warning'></i> Erreur`,
+                                    content: `<p class='yellow'>Vous n'avez pas les permissions pour partager ce fichier.</p>`
+                                })
+                            } else {
+                                View.createPopup({
+                                    title: `<i class='fa fa-share'></i> Partager`,
+                                    content: `
+                                        <input style='width: 300px' type='text' class='field' id='${View.getViewTitle()}_sharelink'>
+                                        <div id='${View.getViewTitle()}_shareInfo'></div>
+                                        <button class='btn green' id='${View.getViewTitle()}_shareBtn'><span><i class='fa fa-share'></i> Copier</span></button>
+                                `}) 
+
+                                const sharelink = getID(View.getViewTitle() + "_sharelink")
+                                const shareBtn = getID(View.getViewTitle() + "_shareBtn")
+                                const shareInfo = new TextResponse(View.getViewTitle() + "_shareInfo")
+                                shareInfo.setSize("13px")
+                                sharelink.value = result
+                                sharelink.focus()
+                                sharelink.select()
+
+                                shareBtn.addEventListener("click", () => {
+                                    sharelink.focus()
+                                    sharelink.select()
+                                    window.navigator.clipboard.writeText(sharelink.value)
+                                    shareInfo.ok("Copié !")
+                                })
+                            }
+                        })
+                    })
+                    // Edit file with an ViewWindow with 2 options close & save and the name of the window is like File - Editor
+
+                    dropMenu.get("edit").addEventListener("click", () => {
+                        dropMenu.hide()
+                       
+                        editFile()
+                        
+                    })
+
+                    dropMenu.get("download").addEventListener("click", () => {
+                        dropMenu.hide()
+                        const reqFiles = post("FX_GETFILE", file.fileDirectory)
+                        reqFiles.then((result) => {
+                            if(result == "NOT_PERMITTED") {
+                                View.createPopup({
+                                    title: `<i class='fa fa-warning'></i> Erreur`,
+                                    content: `<p class='yellow'>Vous n'avez pas les permissions pour télécharger ce fichier.</p>`
+                                })
+                            } else {
+                               // Make Download using result
+
+                                    const element = document.createElement('a');
+                                    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(result));
+                                    element.setAttribute('download', file.name);
+                                    element.style.display = 'none';
+                                    document.body.appendChild(element);
+                                    element.click();
+                                    document.body.removeChild(element);
+                            }
+                        })
+                    })
+                    
+  
+                
+                }
+                    
+                })
+
+                
+
+                
+
+                function editFile() {
+                    const reqFiles = post("FX_GETFILE", file.fileDirectory)
+                    //Create a popup for the loading
+                    
+                    View.createPopup({
+                        title: `<i class='fa-solid fa-file-pen'></i> Editeur`,
+                        content: `<p><i class='fa-solid fa-rotate fa-spin'></i> Chargement en cours ...</p>`
+                    })
+
+                    reqFiles.then((result) => {
+                        View.destroyPopup(`<i class='fa-solid fa-file-pen'></i> Editeur}`)
+                        if(result == "NOT_PERMITTED") {
+                            View.createPopup({
+                                title: `<i class='fa fa-warning'></i> Erreur`,
+                                content: `<p class='yellow'>Vous n'avez pas les permissions pour éditer ce fichier.</p>`
+                            })
+                        } else {
+                            const editor = new ViewWindow({
+                                title: `<i class="fa-solid fa-file-pen"></i> Editeur - ${file.fileDirectory}`,
+                                width: "1000px",
+                                height: "650px"
+                            })
+
+                           
+                            if(file.type == "image/png" | file.type == "image/jpeg") {
+                                editor.setContent(`
+                                <div style='width: 100%; text-align: center;'>
+                                <img style='width: 500px;' src='${result}'/>
+                                </div>`)
+
+
+                            } else {
+                                editor.setContent(`
+                             
+                                <div class='fx-bar'>
+                                    <span id='${editor.getViewTitle()}_save' class='btn-cover'><i class='fa fa-save'></i></span>
+                                </div>
+                                <textarea id='${editor.getViewTitle()}_editorContent' class='fx-editor-content'>${result}</textarea>
+                                
+                                `)
+
+                                const editorSave = getID(editor.getViewTitle() + "_save")
+                                const editorContent = getID(editor.getViewTitle() + "_editorContent")
+
+                                // Sauvegarder  le fichier en l'envoyant 
+
+                                editorSave.addEventListener("click", () => {
+
+                                    const reqFiles = post("FX_SAVEFILE", {root: files.root, name: file.name, content: editorContent.value})
+                                    reqFiles.then((result) => {
+                                        if(result == "OK") {
+                                            editor.destroy()
+                                            const reqFiles = post("FX_GET", files.root)
+                                            reqFiles.then((result) => {
+                                                loadFiles(result)
+                                            })
+                                        } else if(result == "NOT_PERMITTED") {
+                                            editor.createPopup({
+                                                title: `<i class='fa fa-warning'></i> Erreur`,
+                                                content: `<p class='yellow'>Vous n'avez pas les permissions pour éditer ce fichier.</p>`
+                                            })
+                                        } else {
+                                            editor.createPopup({
+                                                title: `<i class='fa fa-warning'></i> Erreur`,
+                                                content: `<p class='yellow'>Une erreur est survenue.</p>`
+                                            })
+                                        }
+                                    })
+                                })
+
+
+
+                                //forbid textarea resize
+                                editorContent.style.resize = "none"
+
+
+                                }
+
+                
+                        }
+
+                    })
+                }
+
+            }
+
+
+        }
+       
+    }
+
+    
+
+})
+
+
+function getIcon(file) {
+    if(file.type == "application/json") {
+
+        return '<i style="color:rgb(179, 141, 4);" class="fa-sharp fa-code"></i>'
+    }
+    if(file.type == "application/msword" | file.type == "application/vnd.openxmlformats-officedocument.wordprocessingml.document") {
+
+        return '<i style="color:rgb(47, 94, 247);" class="fa-solid fa-file-word"></i>'
+    }
+    if(file.type == "application/vnd.ms-powerpoint") {
+
+        return '<i style="color:rgb(255, 112, 51);" class="fa-solid fa-file-powerpoint"></i>'
+    }
+    if(file.type == "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" | file.type == "application/vnd.ms-excel") {
+
+        return '<i style="color:rgb(51, 255, 61);" class="fa-solid fa-file-excel"></i>'
+    }
+
+    if(file.type == "application/java-archive") {
+
+        return '<i style="color:rgb(255, 202, 150);" class="fa-brands fa-java"></i>'
+    }
+
+    if(file.type == "application/x-sh") {
+
+        return '<i style="color:rgb(171, 226, 255);" class="fa-solid fa-file-code"></i>'
+    }
+
+    if(file.type == "application/x-msdos-program" | file.type == "application/x-msdownload") {
+
+        return'<i style="color:rgb(53, 191, 255);" class="fa-brands fa-windows"></i>'
+    }
+    if(file.type == "application/javascript") {
+
+        return '<i style="color:rgb(179, 141, 4);" class="fa-brands fa-js"></i>'
+    }
+    if(file.type == "image/png" | file.type == "image/jpeg") {
+
+        return '<i style="color:rgb(189, 104, 189);" class="fa-solid fa-file-image"></i>'
+    }
+    if(file.type == "text/html") {
+
+        return '<i style="color:tomato;" class="fa-brands fa-html5"></i>'
+    }
+    if(file.type == "text/css") {
+
+        return '<i style="color:rgb(66, 135, 245);" class="fa-brands fa-css3-alt"></i>'
+    }
+    if(file.type == "application/zip") {
+
+        return '<i style="color:rgb(255, 139, 38);" class="fa-solid fa-file-zipper"></i>'
+    }
+    if(file.type == "audio/mpeg") {
+
+        return '<i style="color:rgb(38, 222, 255);" class="fa-solid fa-file-audio"></i>'
+    }
+    if(file.type == "application/pdf") {
+
+        return '<i style="color:rgb(255, 71, 51);" class="fa-solid fa-file-pdf"></i>'
+    } 
+    if(file.directory) {
+
+        return '<i style="color:yellow;" class="fa fa-folder"></i>'
+    } else {
+
+        return '<i class="fa fa-file"></i>'
+    }
+
+}
+
+function bytesToSize(bytes) {
+    var sizes = ['o', 'Ko', 'Mo', 'Go', 'To'];
+    if (bytes == 0) return '0 o';
+    var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
+    return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i];
+}

public/javascripts/indexscript.js

@@ -0,0 +1,68 @@
+
+
+
+// User Request
+
+loadUserInfo()
+
+
+function loadUserInfo() {
+
+    
+    const infoUsername = getID("infoUsername")
+    const infoUserimage = getID("infoUserimage")
+    const infoDisplayname = getID("infoDisplayname")
+    const views = getID("views")
+    const panelBox = getID("panel-box")
+
+    const REQ_user = get("USERINFO")
+
+    REQ_user.then((ANS_user) => {
+        console.log(ANS_user)
+        infoUserimage.src = ANS_user.picture
+        infoUsername.innerHTML = ANS_user.username
+        infoDisplayname.innerHTML = ANS_user.display_name
+    
+        const permissions = ANS_user.permission
+    
+        const AvailableViews = new Array()
+    // 
+        permissions.forEach((permValue) => {
+    
+            AllComponents.forEach((component) => {
+                if(component.permission == permValue) {
+                    component.inject(AvailableViews)
+                }
+              })
+    
+            
+        })
+        
+    
+        if(AvailableViews.join("") == "") {
+    
+            AvailableViews.push("<p style='width: 100%;' class='yellow t-center'><i class='fa-solid fa-warning'></i> Aucune permission ne semble vous êtes accordée<br>Demandez à Raphix afin de résoudre ce problème</p>")
+            views.classList.remove("views-box")
+            panelBox.style.justifyContent = "unset"
+            console.log(panelBox.style)
+        } else {
+    
+            views.classList.add("views-box")
+        }
+    
+        views.innerHTML = AvailableViews.join("")
+    
+        // BindView
+    
+        AllComponents.forEach((component) => {
+            component.bindView()
+        })
+    
+      
+    
+    })
+    
+    
+}
+
+

public/javascripts/io.js

@@ -0,0 +1,62 @@
+// Socket IO - Communication
+
+var socketLink = null
+
+fetch('/internal/socketlink', {
+    method: "GET"
+}).then(link => {socketLink = link})
+
+const socket = io(socketLink);
+
+socket.on("connect", () => {
+    console.log("Connecté au serveur par le Socket avec l'ID : " + socket.id)
+});
+
+socket.on("disconnect", (log) => {
+    window.location.href = "/"
+})
+
+function get(request) {
+
+    return new Promise((resolve, reject) => {
+
+        socket.emit("GET/" + request)
+        console.log("Envoi de la requête GET : " + request)
+        
+        socket.once("ANSWER/GET/" + request, (answer) => {
+            
+            console.log("Réponse pour la requête : " + request)
+       
+            resolve(answer)
+                    
+        })
+        
+    })
+    
+}
+
+function post(request, value) {
+
+    return new Promise((resolve, reject) => {
+
+        socket.emit("POST/" + request, value)
+        console.log("Envoi de la requête POST : " + request)
+        
+        socket.once("ANSWER/POST/" + request, (answer) => {
+            
+            console.log("Réponse pour la requête : " + request)
+       
+            resolve(answer)
+                    
+        })
+        
+    })
+    
+}
+
+
+
+function getSocket() {
+
+    return socket
+}

public/javascripts/link.js

@@ -0,0 +1,299 @@
+links.createWindow(() => {
+
+    const View = new ViewWindow({
+        title: `<i class="fa-solid fa-link"></i> Générateur de liens`,
+        width: "600px",
+        height: "600px",
+    })
+
+    View.setContent(`
+        
+        <div class='ln-bar'>
+            <button id='${View.getViewTitle()}_add' class='btn blue'><span><i class='fa fa-add'></i> Ajouter un lien</span></button>
+        </div>
+        <div class='ln-links' id='${View.getViewTitle()}_links'>
+        <div style='font-size: 24px; margin-top: 225px;'  class='t-center'>
+            <p><i class="fa-solid fa-rotate fa-spin"></i> Chargement en cours ...</p>
+        </div>
+        </div>
+    `)
+
+    const addBtn = getID(`${View.getViewTitle()}_add`)
+    const linksDiv = getID(`${View.getViewTitle()}_links`)
+    var links = new Array()
+
+    addBtn.addEventListener("click", () => {
+            
+            View.createPopup({
+                title: `<i class='fa fa-add'></i> Ajouter un lien`,
+                content: `
+                <div class='ln-create'>
+                    <input id='${View.getViewTitle()}_title' class='field' type='text' placeholder='Titre du lien'>
+                    <input id='${View.getViewTitle()}_url' class='field' type='text' placeholder='URL du lien'>
+                    <div class='ln-abstract-div'>
+                        <p class='ln-abstract-label'>Abstraire le lien :</p>
+                        <input id='${View.getViewTitle()}_ablink' type='checkbox'>
+                    </div>
+                    <span id='${View.getViewTitle()}_newlink_span'></span>
+                    <p id='${View.getViewTitle()}_info'></p>
+                    <button id='${View.getViewTitle()}_confirm' class='btn blue'><span><i class='fa fa-add'></i> Ajouter</span></button>
+                </div>
+            `
+            })
+    
+            const titleInput = getID(`${View.getViewTitle()}_title`)
+            const urlInput = getID(`${View.getViewTitle()}_url`)
+            const addBtn = getID(`${View.getViewTitle()}_confirm`)
+            const info = new TextResponse(`${View.getViewTitle()}_info`)
+            const ablink = getID(`${View.getViewTitle()}_ablink`)
+            const newlinkSpan = getID(`${View.getViewTitle()}_newlink_span`)
+
+            ablink.checked = true
+
+            ablink.addEventListener("click", () => {
+
+                if(!ablink.checked) {
+                        
+                    newlinkSpan.innerHTML = `
+                        <input id='${View.getViewTitle()}_newlink' class='field' type='text' placeholder='URL du nouveau lien'>
+                        `
+                    
+                          
+
+                } else {
+        
+                    newlinkSpan.innerHTML = ""
+        
+                }
+
+            })
+
+
+        
+            addBtn.addEventListener("click", () => {
+                info.clear()
+                console.log(ablink.checked)
+    
+                if(!titleInput.value) {
+    
+                    info.err("Un titre est nécéssaire")
+    
+                } else if(!urlInput.value) {
+    
+                    info.err("Une URL est nécéssaire")
+    
+                } else {
+
+                    var newlink = getID(`${View.getViewTitle()}_newlink`)
+
+                    if(!newlink) {
+
+                        newlink = { value: "" }
+
+                        
+                    } else {
+
+                        if(!newlink.value) {
+
+                            info.err("Un nouveau lien est nécéssaire")
+                            return false
+                        }
+
+                        if(!newlink.value.match(/^[a-zA-Z0-9-_]+$/)) {
+                            info.err("L'URL n'est pas valide")
+                            return false
+                        
+                        }
+                    }
+
+                 
+
+                     
+    
+
+
+                    const request = post(`LINKS_ADD`, {
+                        title: titleInput.value,
+                        url: urlInput.value,
+                        abstractLink: ablink.checked,
+                        dest: newlink.value
+                    })
+    
+                    request.then((answer) => {
+    
+                        if(answer.answer == "OK") {
+    
+                            info.info("Le lien a bien été ajouté")
+                            View.destroyPopup()
+                            getLinks()
+                            
+    
+                        } else if(answer.answer == "ALREADY_EXISTS") {
+    
+                            info.err("Ce lien existe déjà")
+                        
+                        } else {
+    
+                            info.err("Impossible d'ajouter le lien")
+    
+                        }
+    
+                    })
+    
+                }
+    
+            })
+    
+        })
+
+        getLinks()
+
+    function getLinks() {
+
+        
+        linksDiv.innerHTML = ""
+        links = new Array()
+        
+        const request = post(`LINKS_GET_ALL`)
+        request.then((answer) => {
+
+        if(answer.answer == "OK") {
+
+            if(answer.links.length == 0) {
+                    
+                linksDiv.innerHTML = `<p  class='lightred' style='text-align: center;'>Aucun lien disponible</p>`
+            }
+
+            answer.links.forEach((link) => {
+
+                links.push(link)
+
+            })
+
+            links.forEach((link) => {
+
+                linksDiv.innerHTML += `
+                <div class='ln-link'>
+                    <p class='ln-link-title'>${link.title}</p>
+                    <div>
+                    <p class='ln-link-url'><i class="fa-solid fa-bookmark"></i> Lien original : <a href='${link.url}'>${link.url}</a></p>
+                    <p class='ln-link-url'><i class="fa-solid fa-paperclip"></i> Lien modifié : <a href='https://neutral.raphix.fr/link/${link.dest}'> https://neutral.raphix.fr/link/${link.dest}</a></p>
+                    </div>
+                    <div class='ln-link-actions'>
+                    <button id='${link.id}_edit' class='btn blue'><span><i class='fa fa-edit'></i> Modifier</span></button>
+                    <button id='${link.id}_remove' class='btn red'><span><i class='fa fa-trash'></i> Supprimer</span></button>
+                    </div>
+                </div>
+                `
+
+            })
+
+            links.forEach((link) => {
+                const editBtn = getID(`${link.id}_edit`)
+               
+                editBtn.addEventListener("click", () => {
+                        
+                        View.createPopup({
+                            title: `<i class='fa fa-edit'></i> Modifier un lien`,
+                            content: `
+                            <div class='ln-create'>
+                                <input id='${View.getViewTitle()}_edittitle' class='field' type='text' placeholder='Titre du lien' value='${link.title}'>
+                                <input id='${View.getViewTitle()}_editurl' class='field' type='text' placeholder='URL du lien' value='${link.url}'>
+                                <p id='${View.getViewTitle()}_editinfo'></p>
+                                <button id='${View.getViewTitle()}_editconfirm' class='btn blue'><span><i class='fa fa-edit'></i> Modifier</span></button>
+                            </div>
+                        `
+                        })
+                
+                        const titleInput = getID(`${View.getViewTitle()}_edittitle`)
+                        const urlInput = getID(`${View.getViewTitle()}_editurl`)
+                        const editBtnConfirm = getID(`${View.getViewTitle()}_editconfirm`)
+                        const info = new TextResponse(`${View.getViewTitle()}_editinfo`)
+
+                        titleInput.value = link.title
+                        urlInput.value = link.url
+
+                        editBtnConfirm.addEventListener("click", () => {
+                                
+                                if(!titleInput.value) {
+                        
+                                    info.err("Un titre est nécéssaire")
+                        
+                                } else if(!urlInput.value) {
+                        
+                                    info.err("Une URL est nécéssaire")
+                        
+                                } else {
+                        
+                                    const request = post(`LINKS_EDIT`, {
+                                        id: link.id,
+                                        title: titleInput.value,
+                                        url: urlInput.value
+                                    })
+                        
+                                    request.then((answer) => {
+                        
+                                        if(answer == "OK") {
+                        
+                                            info.info("Le lien a bien été modifié")
+                                            View.destroyPopup()
+                                            getLinks()
+                                            
+                        
+                                        } else {
+                        
+                                            info.err("Impossible de modifier le lien")
+                        
+                                        }
+                        
+                                    })
+                        
+                                }
+                        
+                        })
+
+                        
+                     
+                    
+                })
+
+
+                const delBtn = getID(`${link.id}_remove`)
+                delBtn.addEventListener("click", () => {
+
+                    const request = post(`LINKS_DELETE`, link.id)
+                    request.then((answer) => {
+
+                       if(answer != "OK") {
+                            
+                        View.createPopup({
+                            title: `<i class='fa fa-warning'></i> Erreur`,
+                            content: `
+                            <p>Impossible de supprimer le lien</p>
+                            `   
+                        })
+
+
+                       } else {
+
+                            getLinks()
+                       }
+
+                    })
+
+                })
+            })
+
+        } else {
+
+            info.err("Impossible de récupérer les liens")
+
+        }
+
+       
+
+    }) 
+    }
+
+ 
+})

public/javascripts/loginscript.js

@@ -0,0 +1,67 @@
+const username = getID("username")
+const password = getID("password")
+const submit = getID("submit")
+
+const loginInfo = new TextResponse("login-info")
+
+loginInfo.clear()
+
+submit.addEventListener("click", () => {
+
+    if(!username.value) {
+
+        loginInfo.err("Un nom d'utilisateur est nécéssaire pour se connecter !")
+
+    } else if(!password.value) {
+
+        loginInfo.err("Un mot de passe est nécéssaire pour se connecter !")
+    } else {
+
+        
+        login()
+    }
+})
+
+password.addEventListener("keyup", (event) => {
+    if (event.key === "Enter") {
+       login()
+    }
+});
+
+function login() {
+
+    loginInfo.clear()
+
+    fetch('/login', {
+        method: 'POST',
+        redirect: 'follow',
+        headers: {
+            'Accept': 'application/json',
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+            username: username.value,
+            password: password.value
+        })
+    })
+    .then(response => redirect(response))
+
+    async function redirect(response) {
+
+        response = await response.text()
+
+        if(response == "AUTH_FAILED") {
+            
+ 
+            loginInfo.err("Le nom d'utilisateur et le mot de passe sont incorrects.")
+
+        } else if(response == "AUTH_SUCCESS") {
+            
+            window.location.href = "/"
+
+        }
+
+       
+
+    } 
+}

public/javascripts/metric.js

@@ -0,0 +1,144 @@
+metrics.createWindow(() => {
+    
+    const View = new ViewWindow({
+        title: `<i class="fa-solid fa-square-poll-vertical"></i> Web Metrik`,
+        width: "600px",
+        height: "600px",
+    })
+
+    loadMetrics()
+
+    function loadMetrics() {
+
+        View.setContent(`
+        <div class="metrics">
+        <div class='mt-bar'>
+            <p> <strong>WebMetrik</strong> : <span id='${View.getViewTitle()}_number'><i>Calcul en cours</i></span></p>
+            <div>
+            <button id='${View.getViewTitle()}_refresh' class='btn green'><span><i class='fa fa-rotate-left'></i> Rafraîchir</span></button>
+            <button id='${View.getViewTitle()}_add' class='btn blue'><span><i class='fa fa-add'></i> Ajouter un WebMetrik</span></button>
+        </div>   
+        </div>
+        <div class='mt-metrics' id='${View.getViewTitle()}_metrics'>
+
+            <div style='font-size: 24px; margin-top: 180px;'  class='t-center'>
+            <p><i class="fa-solid fa-rotate fa-spin"></i> Chargement en cours ...</p>
+            </div>
+
+        </div>`)
+
+        const metricsList = new Array()
+        const metricsComponent = new Array()
+        const metricsReq = get("MT_ALL")
+
+        const metricsDiv = document.getElementById(`${View.getViewTitle()}_metrics`)
+        const metricsNumber = document.getElementById(`${View.getViewTitle()}_number`)
+        const addButton = document.getElementById(`${View.getViewTitle()}_add`)
+        const refreshButton = document.getElementById(`${View.getViewTitle()}_refresh`)
+        const metricsView = document.getElementById(`${View.getViewTitle()}_metrics`)
+        
+        refreshButton.addEventListener("click", () => {
+            loadMetrics()
+        })
+
+        metricsReq.then((ANS_metrics) => {
+            console.log(ANS_metrics)
+            if(ANS_metrics != "UNAVAILABLE") {
+                metricsList.length = 0 
+                if(ANS_metrics.length == 0) {
+                    metricsList.push(`<div style='font-size: 24px; margin-top: 180px;'  class='yellow t-center'>
+                    <p><i class="fa-solid fa-warning"></i> Aucune WebMetrik n'a été ajoutée</p>
+                    </div>`)
+                }
+                ANS_metrics.forEach((metric) => {
+                    const metricComponent = new Metric({
+                        properties: metric,
+                        Component: metrics,
+                        View: View
+                    })
+                    metricsList.push(metricComponent.generateHTML())
+                  
+                    metricsComponent.push(metricComponent)
+                })
+                metricsDiv.innerHTML = metricsList.join("")
+                metricsNumber.innerHTML = ANS_metrics.length
+
+                for(const metric of metricsComponent) {
+                    metric.loadScript()
+                }
+            } else {
+                metricsDiv.innerHTML = `<div style='font-size: 24px; margin-top: 180px;'  class='t-center'>
+                <p><i class="fa-solid fa-warning"></i> Une erreur est survenue lors du chargement des WebMetrik</p>
+                </div>`
+            }
+        })
+
+        // Generate a pop to add metrics with 3 settings, the adress, the port, the name of the metrics and the key to authentificate
+
+        addButton.addEventListener("click", () => {
+
+            View.createPopup({
+                title: "Ajouter un WebMetrik",
+                content: `
+                <div class='mt-add'>
+                    <p>Adresse</p>
+                    <input class='field' type="text" id="mt-add-address" placeholder="Adresse">
+                    <p>Port</p>
+                    <input class='field' type="number" id="mt-add-port" placeholder="Port">
+                    <p>Nom</p>
+                    <input class='field' type="text" id="mt-add-name" placeholder="Nom">
+                    <p>Clé d'authentification</p>
+                    <input class='field' type="password" id="mt-add-key" placeholder="Clé d'authentification">
+                    <span id='mtaddinfo'></span>
+                    <button id='mt-add-btn' class='btn blue'><span><i class='fa fa-add'></i> Ajouter</span></button>
+                </div>
+                `
+            })
+
+            const addBtn = document.getElementById("mt-add-btn")
+            const address = document.getElementById("mt-add-address")
+            const port = document.getElementById("mt-add-port")
+            const name = document.getElementById("mt-add-name")
+            const key = document.getElementById("mt-add-key")
+            const infoMTAdd = new TextResponse("mtaddinfo")
+
+        
+            addBtn.addEventListener("click", () => {
+
+                // Check if all fields are filled
+
+                if(address.value == "" || port.value == "" || name.value == "" || key.value == "") {
+                    infoMTAdd.err("Veuillez remplir tous les champs")
+                    return
+                }
+
+                post("MT_ADD", {
+                    address: address.value,
+                    port: port.value,
+                    name: name.value,
+                    key: key.value
+                }).then((res) => {
+                    if(res != "ERROR") {
+                        View.destroyPopup()
+                        loadMetrics()
+                    } else {
+                        View.createPopup({
+                            title: "Erreur",
+                            content: `<p class='yellow'><i class='fa fa-warning'></i> Une erreur est survenue lors de l'ajout de la WebMetrik</p>`
+                        })
+                    }
+                })
+            })
+
+         })
+
+
+    }
+})
+
+
+
+        /*
+        <div style='font-size: 24px; margin-top: 180px;'  class='t-center'>
+            <p><i class="fa-solid fa-rotate fa-spin"></i> Chargement en cours ...</p>
+        </div>*/

public/javascripts/middle.js

@@ -0,0 +1,59 @@
+// My View Component
+
+
+
+const explorer = new ViewComponent({
+    name: "Explorateur de fichier",
+    icon: "fa-solid fa-folder",
+    permission: "FILES_EXPLORER"
+  })
+
+  
+  
+  const services = new ViewComponent({
+    name: "Gestion des services",
+    icon: "fa-solid fa-layer-group",
+    permission: "SERVICES"
+  })
+  
+  const servers = new ViewComponent({
+    name: "Gestion des serveurs",
+    icon: "fa fa-server",
+    permission: "SERVERS"
+  })
+  
+  const pipelines = new ViewComponent({
+    name: "Gestion des pipelines",
+    icon: "fa-solid fa-code-merge",
+    permission: "PIPELINES"
+  })
+  
+  const metrics = new ViewComponent({
+    name: "Web Metrik",
+    icon: "fa-solid fa-square-poll-vertical",
+    permission: "METRICS"
+  })
+  
+  const users = new ViewComponent({
+    name: "Gestion des utilisateurs",
+    icon: "fa-solid fa-users",
+    permission: "USERS"
+
+  })
+  
+  const links = new ViewComponent({
+    name: "Générateur des liens",
+    icon: "fa-solid fa-link",
+    permission: "LINKS"
+  })
+  
+  const settings = new ViewComponent({
+    name: "Paramètres",
+    icon: "fa-solid fa-cog",
+    permission: "SETTINGS"
+  })
+
+
+
+
+

public/javascripts/personal.js

@@ -0,0 +1,119 @@
+
+const menulogo = getID("menu-logo")
+const usersettingsBtn = getID("user-settings-button")
+
+menu.style.display = "none"
+
+menulogo.addEventListener("click", () => {
+
+    const menu = getID("menu")
+
+    if(menu.style.display == "block") {
+        menu.style.display = "none"
+    } else {
+        menu.style.display = "block"
+    }
+
+})
+
+usersettingsBtn.addEventListener("click", () => {
+    const View = new ViewWindow({
+        title: `<i class="fa fa-user"></i> Mon Compte`,
+        width: "600px",
+        height: "650px"
+    })
+
+    View.setContent(`
+    <div class="user-settings">
+    <p>Mes informations</p>
+    <div class="us-settings">
+     
+            <img class='us-settings-image' id="us-settings-image" src="">
+        
+        <div class="us-settings-info">
+            <p>Nom d'utilisateur</p>
+            <input class="field" type="text" id="us-settings-username" placeholder="Nom d'utilisateur">
+            <p>Nom d'affichage</p>
+            <input class="field" type="text" id="us-settings-displayname" placeholder="Nom d'affichage">
+            <p>Mot de passe</p>
+            <input class="field" type="password" id="us-settings-password" placeholder="Mot de passe">
+            <p>Photo de profil</p>
+            <input type="file" id="us-settings-picture" accept="image/png, image/jpeg">
+     
+          
+          
+        </div>
+        <br>
+        <span id='us-settings-return-info'></span>
+        <button id="us-settings-save" class="btn green"><span> Sauvegarder</span></button>
+    </div>
+    <p>Mes permissions</p>
+    <div id="us-settings-permissions">
+    </div>
+
+    </div>
+    `)
+
+    const usSettingsImage = getID("us-settings-image")
+    const usSettingsUsername = getID("us-settings-username")
+    const usSettingsDisplayname = getID("us-settings-displayname")
+    const usSettingsPassword = getID("us-settings-password")
+    const usSettingsPermissions = getID("us-settings-permissions")
+    const usSettingsSave = getID("us-settings-save")
+    const usSettingsPicture = getID("us-settings-picture")
+    const returnInfo = new TextResponse("us-settings-return-info")  
+
+    const REQ_user = get("USERINFO")
+
+    var actualUsername = ""
+
+    REQ_user.then((ANS_user) => {
+        usSettingsImage.src = ANS_user.picture
+        usSettingsUsername.value = ANS_user.username
+        usSettingsDisplayname.value = ANS_user.display_name
+        actualUsername = ANS_user.username
+
+        const permissions = ANS_user.permission
+        const permValid = new Array()
+    
+        permissions.forEach((permValue) => {
+
+            permValid.push("<p>" + permValue + "</p>")
+            
+        })
+
+        usSettingsPermissions.innerHTML = permValid.join("")
+    })
+
+    usSettingsSave.addEventListener("click", () => {
+        const request = post(`US_EDIT_PERSONNAL`, {username: actualUsername, newusername: usSettingsUsername.value, display_name: usSettingsDisplayname.value, password: usSettingsPassword.value, picture: usSettingsPicture.files[0]}) 
+                request.then((answer) => {
+                    if(answer == "ALREADY_EXIST") {
+
+                        returnInfo.err("L'utilisateur existe déjà !")
+
+                    } else if(answer == "USERNAME_MISSING") {
+
+                        returnInfo.err("Le nom d'utilisateur est manquant !")
+                    } else if(answer == "DISPLAY_NAME_MISSING") {
+
+                        returnInfo.err("Le nom d'affichage est manquant !")
+                    } else if(answer == "PASSWORD_MISSING") {
+                            
+                        returnInfo.err("Le mot de passe est manquant !")
+                    } else {
+
+                        View.destroy()
+                        loadUserInfo()
+                    }
+                })
+    })
+
+
+})
+
+document.addEventListener("click", (e) => {
+    if(e.target != menulogo) {
+        menu.style.display = "none"
+    }
+})

public/javascripts/pipeline.js

@@ -0,0 +1,66 @@
+pipelines.createWindow(() => {
+
+    const View = new ViewWindow({
+        title: `<i class="fa fa-code-merge"></i> Gestion des pipelines`,
+        width: "900px",
+        height: "600px"
+    })
+
+    const pipelinesList = new Array()
+
+    View.setContent(`<div style='font-size: 24px; margin-top: 225px;'  class='t-center'>
+        <p><i class="fa-solid fa-rotate fa-spin"></i> Chargement en cours ...</p>
+    </div>`)
+
+    var AllPipelines = new Array()
+
+    function getPipelines() {
+
+        const pipes = get("PL_GET_ALL")
+        pipes.then((ANS_pipes) => {
+        
+            AllPipelines.length = 0
+           pipelinesList.length = 0
+
+            if(ANS_pipes != "UNAVAILABLE") {
+                ANS_pipes.jobs.forEach((pipe) => {
+                    console.log(pipe)
+                    const pipeline = new Pipeline({
+                        pipeline: pipe,
+                        View: View
+                    })
+        
+                    pipelinesList.push(pipeline.generateHTML())
+                    AllPipelines.push(pipeline)
+                })
+        
+                View.setContent(`
+                <div class="pipelines">
+                    <button id='reload_Btn_pipeline' class='btn blue'><span><i class='fa fa-rotate-left'></i> Recharger les pipelines</span></button>
+                    ${pipelinesList.join("")}
+                </div>`)
+
+                for(const pipeline of AllPipelines) {
+                    pipeline.loadScript()
+                }
+
+                getID("reload_Btn_pipeline").addEventListener("click", () => {
+                    View.setContent(`<div style='font-size: 24px; margin-top: 225px;'  class='t-center'>
+                    <p><i class="fa-solid fa-rotate fa-spin"></i> Chargement en cours ...</p>
+                    </div>`)
+                    getPipelines()
+                })
+
+
+            } else {
+                View.setContent(`<div style='font-size: 24px; margin-top: 225px;'  class='t-center lightred'>
+                <p><i class="fa-solid fa-warning"></i> Une erreur est survenue lors du chargement des pipelines</p>
+                </div>`)
+            }
+            
+        })
+    }
+
+    getPipelines()
+
+})

public/javascripts/server.js

@@ -0,0 +1,73 @@
+servers.createWindow(async () => {
+    const View = new ViewWindow({
+        title: `<i class="fa fa-server"></i> Gestion des serveurs`,
+        width: "1000px",
+        height: "450px"
+    })
+
+    const serversList = new Array()
+
+
+    const alpha = new Server({
+        name: "Alpha",
+        description: "Serveur principal",
+        icon: "fa-solid fa-hourglass-start",
+    })
+
+    const omega = new Server({
+        name: "Omega",
+        description: "Serveur secondaire",
+        icon: "fa-solid fa-stop",
+    })
+    
+    serversList.push(alpha.generateHTML())
+    serversList.push(omega.generateHTML())
+
+
+    View.setContent(`
+    <div class="servers">
+        ${serversList.join("")}
+    </div>`)
+
+    await alpha.loadScript()
+    await omega.loadScript()
+   
+})
+
+
+/**
+     <div class="servers-box">
+        <div class="servers-box-title">
+            <div class='servers-box-title-info'>
+                <i class="fa fa-server"></i> 
+                <p>Alpha</p>
+            </div>
+            <button class="btn yellow"><span>Redémarrer</span></button>
+        </div>
+        <div class="servers-box-content">
+           <div class='servers-metrics'>
+                <div class='servers-metrics-box'>
+                    <div>
+                    <i class='fa-solid fa-memory'></i>
+                    <p>RAM</p>
+                    </div>
+                    <p>1.5 Go / 2 Go</p>
+                </div>
+                <div class='servers-metrics-box'>
+                    <div>
+                    <i class='fa-solid fa-microchip'></i>
+                    <p>CPU</p>
+                    </div>
+                    <p>1.5 Go / 2 Go</p>
+                </div>
+                <div class='servers-metrics-box'>
+                    <div>
+                    <i class='fa-solid fa-hdd'></i>
+                    <p>DISK</p>
+                    </div>
+                    <p>1.5 Go / 2 Go</p>
+                </div>
+            </div>
+        </div>
+    </div>
+ */

public/javascripts/service.js

@@ -0,0 +1,88 @@
+services.createWindow(async () => { 
+    /**
+     * CODE OF SERVICE.JS
+    */
+    const allServices = new Array()
+
+    const View = new ViewWindow({
+        title: '<i class="fa fa-layer-group"></i> Gestion des services',
+        width: "700px",
+        height: "600px"
+    })
+
+    const subsonicsService = new Service({
+        name: "Subsonics",
+        description: "Bot de streaming musical sur Discord",
+        icon: "/images/services/subsonics.png",
+        url: "https://subsonics.raphix.fr" ,
+        canAccess: true,
+        View: View
+
+    })
+
+    const giteaService = new Service({
+        name: "Gitea",
+        description: "Gestionnaire de dépôt Git",
+        icon: "/images/services/gitea.svg",
+        url: "https://git.raphix.fr" ,
+        canAccess: true,
+        View: View
+
+    })
+
+    const jenkinsService = new Service({
+        name: "Jenkins",
+        description: "Gestionnaire de pipeline",
+        icon: "/images/services/jenkins.svg",
+        url: "https://jenkins.raphix.fr" ,
+        canAccess: true,
+        View: View
+
+    })
+
+    const raphixwebsite = new Service({
+        name: "Raphix.fr",
+        description: "Site web de Raphix",
+        icon: "/images/services/raphix.png",
+        url: "https://raphix.fr",
+        canAccess: true,
+        View: View
+
+    })
+
+    const cvraphix = new Service({
+        name: "CV Raphix",
+        description: "Curriculum Vitae de Raphix",
+        icon: "/images/services/cv.png",
+        url: "https://cv.raphix.fr",
+        canAccess: true,
+        View: View
+    })
+
+    const lavalink = new Service({
+        name: "Lavalink",
+        description: "Serveur Lavalink pour Subsonics",
+        icon: "/images/services/lavalink.svg",
+        url: "http://omega.raphix.fr:2333",
+        canAccess: false,
+        View: View
+    })
+    
+    allServices.push(subsonicsService.generateHTML())
+    allServices.push(lavalink.generateHTML())
+    allServices.push(giteaService.generateHTML())
+    allServices.push(jenkinsService.generateHTML())
+    allServices.push(raphixwebsite.generateHTML())
+    allServices.push(cvraphix.generateHTML())
+
+    View.setContent(`<div class='sv-list'>${allServices.join("")}</div>`)
+
+    await subsonicsService.loadScript()
+    await giteaService.loadScript()
+    await jenkinsService.loadScript()
+    await raphixwebsite.loadScript()
+    await cvraphix.loadScript()
+    await lavalink.loadScript()
+
+})
+

public/javascripts/setting.js

@@ -0,0 +1,123 @@
+settings.createWindow(async () => {
+
+    const View = new ViewWindow({
+        title: `<i class="fa fa-cog"></i> Paramètres`,
+        width: "500px",
+        height: "620px"
+    })
+
+    View.setContent(`
+        <div style='overflow-y: auto; height: 550px;'>
+        <div class="category">
+            <p>Options d'alimentation</p>
+
+            <div class='st-act'>
+            <button id="st-restart" class="btn yellow"><span>Redémarrer</span></button>
+            <button id="st-stop" class="btn red"><span> Arrêter</span></button>
+            </div>
+        
+        </div>
+        <div class="category">
+            <p>Configuration des Tokens</p>
+            <p class='user-line-displayname'>Jenkins</p>
+            <input class='field' type="text" id="jenkins_token" placeholder="Token Jenkins">
+            <p class='user-line-displayname'> Omega </p>
+            <input class='field' type="text" id="omega_token" placeholder="Token Omega">
+            <button id="st-save" class="btn green"><span> Sauvegarder</span></button>
+        </div>
+        <div class="category">
+            <p>Accès aux logs</p>
+            <select id="all-logs" class="field">
+                <option>Chargment en cours ...</option>
+            </select>
+            <button id="read-logs" class="btn green"><span>Lire</span></button>
+        </div>
+        </div>
+    `)
+
+    
+    const allLogs = document.getElementById("all-logs")
+    const readLogs = document.getElementById("read-logs")
+    
+    get("SERVER_GET_LOGS").then((logs) => {
+        logs.reverse()
+        allLogs.innerHTML = logs.map((log) => {
+            return `<option value="${log}">${log}</option>`
+        }).join("")
+    })
+
+    readLogs.addEventListener("click", () => {
+        const log = allLogs.value
+        post("SERVER_READ_LOG", log).then((logContent) => {
+            const logView = new ViewWindow({
+                title: `<i class="fa fa-file"></i> ${log}`,
+                width: "1000px",
+                height: "520px"
+            })
+
+            logContent = logContent.replaceAll("[INFO]", "<span class='blue'>[INFO]</span>")
+            logContent = logContent.replaceAll("[WARN]", "<span class='yellow'>[WARN]</span>")
+            logContent = logContent.replaceAll("[ERROR]", "<span class='lightred'>[ERROR]</span>")
+            logContent = logContent.replaceAll("[STEP]", "<span class='green'>[STEP]</span>")
+
+            logContent = logContent.replaceAll("[Users]", "<span style='color:#c7b8ff; '>[Users]</span>")
+            logContent = logContent.replaceAll("[Web]", "<span style='color:#fffd8a; '>[Web]</span>")
+            logContent = logContent.replaceAll("[Serveur]", "<span style='color:#ff7a5c; '>[Serveur]</span>")
+            logContent = logContent.replaceAll("[Authentification]", "<span style='color:#d9e6ff; '>[Authentification]</span>")
+
+            // Get every line of logs and add a set the style in blue when it's the date in []
+
+            const logLines = logContent.split("\n")
+            const newLogLines = new Array()
+
+            logLines.forEach((line) => {
+                if(line.startsWith("[") && line.includes("]")) {
+                    const date = line.split("]")[0] + "]"
+                    const content = line.replace(date, "")
+                    newLogLines.push(`<span style='color: #a6c2f7;'>${date}</span>${content}\n`)
+                } else {
+
+                    newLogLines.push(`${line}\n`)
+                }
+            })
+
+            logView.setContent(`
+                <div style='overflow-y: auto; height: 450px;'>
+                    <pre style='font-size: 12px'>${newLogLines.join("")}</pre>
+                </div>
+            `)
+
+        })
+    })
+
+    const restartButton = document.getElementById("st-restart")
+    const stopButton = document.getElementById("st-stop")
+    const saveButton = document.getElementById("st-save")
+    const jenkinsToken = document.getElementById("jenkins_token")
+    const omegaToken = document.getElementById("omega_token")
+
+    get("SETTINGS_GET").then((settings) => {
+        jenkinsToken.value = settings.jenkins_token
+        omegaToken.value = settings.omega_token
+    })
+
+    restartButton.addEventListener("click", () => {
+        post("SERVER_RESTART")
+    })
+
+    stopButton.addEventListener("click", () => {
+        post("SERVER_STOP")
+    })
+
+    saveButton.addEventListener("click", () => {
+        post("SETTINGS_SAVE", {
+            jenkins_token: jenkinsToken.value,
+            omega_token: omegaToken.value
+        })
+
+        get("SETTINGS_GET").then((settings) => {
+            jenkinsToken.value = settings.jenkins_token
+            omegaToken.value = settings.omega_token
+        })
+    })
+})

public/javascripts/user.js

@@ -0,0 +1,183 @@
+users.createWindow(async () => {
+    const usersComponent = users
+
+    const View = new ViewWindow({
+        title: `<i class="fa fa-users"></i> Gestion des utilisateurs`,
+        width: "500px",
+        height: "700px"
+    })
+
+    loadUsers()
+
+    function loadUsers() {
+
+        View.setContent(`
+        <div class="users">
+        <div class='us-bar'>
+            <p> <strong>Utilisateurs</strong> : <span id='${View.getViewTitle()}_number'><i>Calcul en cours</i></span></p>
+            <button id='${View.getViewTitle()}_add' class='btn blue'><span><i class='fa fa-add'></i> Ajouter un utilisateur</span></button>
+        </div>
+        <div class='us-users' id='${View.getViewTitle()}_users'>
+            <div style='font-size: 24px; margin-top: 180px;'  class='t-center'>
+            <p><i class="fa-solid fa-rotate fa-spin"></i> Chargement en cours ...</p>
+            </div>
+        </div>
+        </div>`)
+    
+    
+        const usersList = new Array()
+        const users = get("US_ALL")
+
+        const usersDiv = document.getElementById(`${View.getViewTitle()}_users`)
+        const usersNumber = document.getElementById(`${View.getViewTitle()}_number`)
+        const addButton = document.getElementById(`${View.getViewTitle()}_add`)
+
+        addButton.addEventListener("click", () => {
+            View.createPopup({
+                title: "Ajouter un utilisateur",
+                content: `
+                <div class='us-add'>
+                    <p>Nom d'utilisateur</p>
+                    <input class='field' type="text" id="us-add-username" placeholder="Nom d'utilisateur">
+                    <p>Nom d'affichage</p>
+                    <input class='field' type="text" id="us-add-displayname" placeholder="Nom d'affichage">
+                    <p>Mot de passe</p>
+                    <input class='field' type="password" id="us-add-password" placeholder="Mot de passe">
+                    <p>Permissions</p>
+                    <div class='permissions'>
+                        <div>
+                            <input type="checkbox" id="perm_FILES_EXPLORER">
+                            <label for="perm_FILES_EXPLORER">Fichiers</label>
+                        </div>
+                        <div>
+                            <input type="checkbox" id="perm_SERVICES">
+                            <label for="perm_SERVICES">Services</label>
+                        </div>
+                        <div>
+                            <input type="checkbox" id="perm_LINKS">
+                            <label for="perm_LINKS">Liens</label>
+                        </div>
+                        <div>
+                            <input type="checkbox" id="perm_SERVERS">
+                            <label for="perm_SERVERS">Serveurs</label>
+                        </div>
+                        <div>
+                            <input type="checkbox" id="perm_PIPELINES">
+                            <label for="perm_PIPELINES">Pipelines</label>
+                        </div>
+                        <div>
+                            <input type="checkbox" id="perm_METRICS">
+                            <label for="perm_METRICS">Metrics</label>
+                        </div>
+                        <div>
+                            <input type="checkbox" id="perm_USERS">
+                            <label for="perm_USERS">Utilisateurs</label>
+                        </div>
+                        <div>
+                            <input type="checkbox" id="perm_SETTINGS">
+                            <label for="perm_SETTINGS">Paramètres</label>
+                        </div>
+                    </div>
+               
+                <p>Photo de profil</p>
+                
+                <input type="file" id="us-add-picture" accept="image/png, image/jpeg">
+                <span id='user-addreturn-info'></span>
+                <button id='us-add-button' class='btn green'><span>Ajouter</span></button>
+                </div>
+                `
+            })
+
+
+            const addCButton = document.getElementById("us-add-button")
+            const username = document.getElementById("us-add-username")
+            const displayname = document.getElementById("us-add-displayname")
+            const password = document.getElementById("us-add-password")
+            const picture = document.getElementById("us-add-picture")
+            const permissions = document.getElementsByClassName("permissions")[0].children
+            const returnInfo = new TextResponse("user-addreturn-info")
+    
+
+            addCButton.addEventListener("click", () => {
+                var permissionsList = new Array()
+                for(var permission of permissions) {
+                    console.log(permission.children[0].checked)
+                    if(permission.children[0].checked) {
+                        permissionsList.push(permission.children[0].id.replace("perm_", ""))
+                    }
+                }
+
+    
+                post("US_ADD", {
+                    username: username.value,
+                    display_name: displayname.value,
+                    password: password.value,
+                    picture: picture.files[0],
+                    permissions: permissionsList
+                }).then((answer) => {
+                    if(answer == "ALREADY_EXIST") {
+
+                        returnInfo.err("L'utilisateur existe déjà !")
+
+                    } else if(answer == "USERNAME_MISSING") {
+
+                        returnInfo.err("Le nom d'utilisateur est manquant !")
+                    } else if(answer == "DISPLAY_NAME_MISSING") {
+
+                        returnInfo.err("Le nom d'affichage est manquant !")
+                    } else if(answer == "PASSWORD_MISSING") {
+                            
+                            returnInfo.err("Le mot de passe est manquant !")
+                    } else {
+
+                        View.destroyPopup()
+                        loadUsers()
+                    }
+                  
+                })
+
+            })
+        
+        })
+
+        users.then(users => {
+            users = new Map(JSON.parse(users))
+            for(var user of users) {
+             
+                user = user[1]
+                console.log(user)
+                const userComponent = new User({
+                    username: user.username,
+                    display_name: user.display_name,
+                    picture: user.picture,
+                    permission: user.permission,
+                    window: View,
+                    component: usersComponent
+                })
+                usersList.push(userComponent)
+            }
+
+          
+            usersNumber.innerHTML = usersList.length
+
+           
+            
+            const usersContent = new Array()
+
+            for(var user of usersList) {
+                usersContent.push(user.generateHTML())
+              
+            }
+
+            usersDiv.innerHTML = usersContent.join("")
+    
+           for(var user of usersList) {
+                user.loadScript()
+           }
+        })
+    }
+   
+    
+})
+
+