Version 0.6.0 - Ajout des utilisateurs et des paramètres V1

public/javascripts/basics.js

@@ -74,8 +74,6 @@ class TextResponse {
         this.element = getID(this.name)
         this.element.innerHTML = " "
         this.element.style.fontSize = "14px"
-        this.element.style.position = "sticky"
-        this.element.style.width = this.element.parentElement.offsetWidth + "px"
         this.element.style.textAlign = "center"
     }
 
@@ -103,6 +101,11 @@ class TextResponse {
             this.element.style.fontSize = size
     }
 
+    setWidth(width) {
+        this.element.style.width = width
+    }
+
+
 }
 
 
@@ -110,6 +113,7 @@ const AllViews = new Map()
 var zIndex = 5
 
 
+
 /**
  * Permet de créer une fenêtre
  * @param {object} properties Propriétés de la fenêtre
@@ -123,7 +127,7 @@ class ViewWindow {
     ViewPopupHTML = null
     ViewPopupTitle = null
     ViewItem = new ViewItem(this)
-    constructor(properties) {
+    constructor (properties) {
         if(!AllViews.has(properties.title)) {
 
             this.ViewProperties = properties
@@ -656,7 +660,7 @@ class Service {
                 const stopButton = getID(`${this.name}_stop`)
                 const restartButton = getID(`${this.name}_restart`)
                 const info = new TextResponse("sv-power-info")
-                
+                info.setWidth("350px")
                 
 
                 if(this.isOnline) {
@@ -950,6 +954,221 @@ class Pipeline {
 
 }
 
+class User {
+    constructor(properties) {
+        this.username = properties.username
+        this.display_name = properties.display_name
+        this.picture = properties.picture
+        this.permission = properties.permission
+        this.View = properties.window
+        this.Component = properties.component
+    }
+
+    generateHTML() {
+        return `
+        <div class='user-line'>
+            <div class='user-line-info'>
+                <img class='taskbar-image' src='${this.picture}' alt='${this.username}'>
+                <div>
+                    <p class='user-line-displayname'>${this.display_name}</p>
+                    <p class='taskbar-username'>${this.username}</p>
+                </div>
+            </div>
+            <div class='user-actions'>
+                <button id='${this.username}_edit' class='btn blue'><span><i class='fa fa-pencil'></i> Editer<span></button>
+                ${this.username == "raphix" ? "" : `<button id='${this.username}_delete' class='btn red'><span><i class='fa fa-trash'></i> Supprimer<span></button>`}
+            </div>
+        </div>
+        `
+    }
+
+    loadScript() {
+        const editButton = getID(`${this.username}_edit`)
+        const deleteButton = getID(`${this.username}_delete`)
+
+        editButton.addEventListener("click", () => {
+            this.View.createPopup({
+                title: `<i class='fa fa-pencil'></i> Editer l'utilisateur : ${this.username}`,
+                content: `
+                    <div class='us-edit'>
+                    <div class='user-edit-actual'>
+                        <img class='taskbar-image' src='${this.picture}' alt='${this.username}'>
+                        <p class='user-line-displayname'>${this.display_name}</p>
+                        <p class='taskbar-username'>${this.username}</p>
+                    </div>
+                    <div class='user-edit-line'>
+                        <p class='user-edit-info'>Nom d'utilisateur</p>
+                        <input id='${this.username}_editusername' class='field' type='text' value='${this.username}'>
+                    </div>
+                    <div class='user-edit-line'>
+                        <p class='user-edit-info'>Nom d'affichage</p>
+                        <input id='${this.username}_editdisplay' class='field' type='text' value='${this.display_name}'>
+                    </div>
+                    <div class='user-edit-line'>
+                        <p class='user-edit-info'>Mot de passe</p>
+                        <input id='${this.username}_editpassword' class='field' type='password' id='user-edit-password'>
+                    </div>
+                    <div class='user-edit-line'>
+                    <p class='user-edit-info'>Permissions</p>
+                    <div class='permissions'>
+                    <div>
+                        <input type="checkbox" id="${this.username}_perm_FILES_EXPLORER">
+                        <label for="${this.username}_perm_FILES_EXPLORER">Fichiers</label>
+                    </div>
+                    <div>
+                        <input type="checkbox" id="${this.username}_perm_SERVICES">
+                        <label for="${this.username}_perm_SERVICES">Services</label>
+                    </div>
+                    <div>
+                        <input type="checkbox" id="${this.username}_perm_LINKS">
+                        <label for="${this.username}_perm_LINKS">Liens</label>
+                    </div>
+                    <div>
+                        <input type="checkbox" id="${this.username}_perm_SERVERS">
+                        <label for="${this.username}_perm_SERVERS">Serveurs</label>
+                    </div>
+                    <div>
+                        <input type="checkbox" id="${this.username}_perm_PIPELINES">
+                        <label for="${this.username}_perm_PIPELINES">Pipelines</label>
+                    </div>
+                    <div>
+                        <input type="checkbox" id="${this.username}_perm_METRICS">
+                        <label for="${this.username}_perm_METRICS">Metrics</label>
+                    </div>
+                    <div>
+                        <input type="checkbox" id="${this.username}_perm_USERS">
+                        <label for="${this.username}_perm_USERS">Utilisateurs</label>
+                    </div>
+                    <div>
+                        <input type="checkbox" id="${this.username}_perm_SETTINGS">
+                        <label for="${this.username}_perm_SETTINGS">Paramètres</label>
+                    </div>
+                    </div>
+                    <br>
+                    <div class='user-edit-line'>
+                    <p class='user-edit-info'>Photo de profil</p>
+                    <input type="file" id="${this.username}_addpicture" accept="image/png, image/jpeg">
+                    </div>
+                    <br>
+                    <span id="${this.username}_returninfo"></span>
+
+                    </div>
+                    <div class="user-edit-actions">
+                        <button id="${this.username}_cedit" class="btn green"><span><i class='fa fa-pencil'></i> Editer</span></button>
+                        <button id="${this.username}_edittokens" class="btn yellow"><span><i class='fa fa-trash'></i> Tokens</span></button>
+
+                    </div>
+
+                   
+                    </div>
+                `
+            })
+
+            const editCButton = getID(`${this.username}_cedit`)
+            const editTokensButton = getID(`${this.username}_edittokens`)
+            const editUsername = getID(`${this.username}_editusername`)
+            const editDisplay = getID(`${this.username}_editdisplay`)
+            const editPassword = getID(`${this.username}_editpassword`)
+            const editPicture = getID(`${this.username}_addpicture`)
+            const returnInfo = new TextResponse(`${this.username}_returninfo`)
+
+            const editPermissions = new Array()
+         
+
+            editPermissions.push(getID(`${this.username}_perm_FILES_EXPLORER`))
+            editPermissions.push(getID(`${this.username}_perm_SERVICES`))
+            editPermissions.push(getID(`${this.username}_perm_LINKS`))
+            editPermissions.push(getID(`${this.username}_perm_SERVERS`))
+            editPermissions.push(getID(`${this.username}_perm_PIPELINES`))
+            editPermissions.push(getID(`${this.username}_perm_METRICS`))
+            editPermissions.push(getID(`${this.username}_perm_USERS`))
+            editPermissions.push(getID(`${this.username}_perm_SETTINGS`))
+
+            
+            for(const actualPerm of this.permission) {
+           
+                getID(`${this.username}_perm_${actualPerm}`).checked = true
+            }
+
+            editUsername.addEventListener("change", () => {
+                editUsername.value = editUsername.value.replace(/[^a-zA-Z0-9]/g, '')
+            })
+
+        
+            
+            
+            editCButton.addEventListener("click", () => {
+                const newPerms = new Array()
+                for(const permission of editPermissions) {
+                    if(permission.checked) {
+                        newPerms.push(permission.id.replace(`${this.username}_perm_`, ""))
+                    }
+    
+                }
+
+       
+    
+            
+                const request = post(`US_EDIT`, {username: this.username, newusername: editUsername.value, display_name: editDisplay.value, password: editPassword.value, permissions: newPerms, picture: editPicture.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 {
+
+                        this.View.destroyPopup()
+                        this.View.destroy()
+                        this.Component.forceWindow()
+                        loadUserInfo()
+                    }
+                })
+            })
+
+
+        })
+
+        if(this.username != "raphix") {
+            deleteButton.addEventListener("click", () => {
+                this.View.createPopup({
+                    title: `<i class='fa fa-trash'></i> Supprimer l'utilisateur : ${this.username}`,
+                    content: `
+                        <p class='us-delete'>Voulez-vous vraiment supprimer l'utilisateur <strong>${this.username}</strong> ?</p>
+                
+                        <button id="${this.username}_deleteconfirm" class="btn red"><span><i class='fa fa-trash'></i> Supprimer</span></button>
+                   
+                    `
+                })
+          
+                const deleteCButton = getID(`${this.username}_deleteconfirm`)
+               
+                deleteCButton.addEventListener("click", () => {
+                    const request = post(`US_DELETE`, this.username) 
+                    request.then((answer) => {
+                        if(answer == "OK") {
+                            this.View.destroyPopup()
+                            this.View.destroy()
+                            this.Component.forceWindow()
+                        } else {
+                            console.log(answer)
+                        }
+                    })
+                })
+            })
+        }
+
+    }
+}
+
 
 /**
  * Permet de créer un item de la barre des tâches

public/javascripts/filexplorer.js

@@ -12,10 +12,6 @@ explorer.createWindow(() => {
         width: "1000px",
         height: "600px"
     })
-
-
-    console.log("")
-
     
 
     
@@ -38,6 +34,15 @@ explorer.createWindow(() => {
             loadFiles(result)
         })
     }
+
+    function goLogPath() {
+        const rFiles = post("FX_GET", "logpath")
+        
+        rFiles.then((result) => {
+            loadFiles(result)
+        })
+    }
+   
    
 
     View.setContent(`
@@ -45,6 +50,7 @@ explorer.createWindow(() => {
             <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>
+                <span id='${View.getViewTitle()}_logsdir' class='btn-cover'><i class="fa-solid fa-file-lines"></i></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>
@@ -63,6 +69,9 @@ explorer.createWindow(() => {
     const newFile = getID(View.getViewTitle() + '_newFile')
     const home = getID(View.getViewTitle() + '_home')
     const sharebtn = getID(View.getViewTitle() + '_sharebtn')
+    const logsdir = getID(View.getViewTitle() + '_logsdir')
+
+
 
     
 
@@ -127,6 +136,12 @@ explorer.createWindow(() => {
 
     })  
 
+    logsdir.addEventListener("click", () => {
+
+        goLogPath()
+
+    })  
+
     newFolder.addEventListener("click", () => {
 
         View.createPopup({
@@ -263,6 +278,7 @@ explorer.createWindow(() => {
                 }
 
                 const file = fileuploadInput.files[0]
+                console.log(file)
 
                 const reqFiles = post("FX_UPLOAD", {name: file.name ,root: rootInput.value, file: file})
 

public/javascripts/indexscript.js

@@ -1,55 +1,66 @@
-const infoUsername = getID("infoUsername")
-const infoUserimage = getID("infoUserimage")
-const infoDisplayname = getID("infoDisplayname")
-const views = getID("views")
-const panelBox = getID("panel-box")
+
 
 
 // User Request
 
-const REQ_user = get("USERINFO")
+loadUserInfo()
 
-REQ_user.then((ANS_user) => {
-    infoUserimage.src = ANS_user.picture
-    infoUsername.innerHTML = ANS_user.username
-    infoDisplayname.innerHTML = ANS_user.display_name
 
-    const permissions = ANS_user.permission
+function loadUserInfo() {
+    
+    const infoUsername = getID("infoUsername")
+    const infoUserimage = getID("infoUserimage")
+    const infoDisplayname = getID("infoDisplayname")
+    const views = getID("views")
+    const panelBox = getID("panel-box")
 
-    const AvailableViews = new Array()
-
-    permissions.forEach((permValue) => {
-
-        AllComponents.forEach((component) => {
-            if(component.permission == permValue) {
-                component.inject(AvailableViews)
-            }
-          })
+    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()
+        })
+    
+      
+    
     })
     
-
-    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

@@ -12,8 +12,7 @@ socket.on("connect", () => {
     console.log("Connecté au serveur par le Socket avec l'ID : " + socket.id)
 });
 
-socket.on("disconnect", () => {
-
+socket.on("disconnect", (log) => {
     window.location.href = "/"
 })
 

public/javascripts/loginscript.js

@@ -51,7 +51,8 @@ function login() {
         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") {

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,180 @@
+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>
+        </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 addButton = 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")
+    
+
+            addButton.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()
+           }
+        })
+    }
+   
+    
+})
+
+

public/stylesheets/style.css

@@ -213,6 +213,12 @@ a {
   user-select: none;
 }
 
+.user-actions {
+
+  display: flex;
+  gap: 10px;
+}
+
 @media (max-width: 640px) {
 
   .logo {
@@ -1051,3 +1057,148 @@ a {
   background-color: rgba(44, 40, 42, 0.614);
 
 }
+
+
+/* USERS */
+
+.us-bar{
+
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+
+
+}
+
+.us-bar p {
+  
+    font-size: 15px;
+}
+
+.user-line {
+
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 10px;
+  border-radius: 10px;
+  background-color: #1b1b1bc1;
+  transition: 0.1s;
+  align-items: center;
+  gap: 10px;
+}
+
+
+.user-line-info {
+
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  align-items: center;
+}
+
+.user-line-displayname {
+  
+    font-size: 15px;
+    margin-block: 0 !important;
+}
+
+.us-users {
+  display: flex;
+  padding: 10px;
+  flex-direction: column;
+  gap: 10px;
+  overflow-y: auto ;
+  height: 700px;
+}
+
+.user-edit-actual {
+
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  align-items: center;
+  justify-content: center;
+}
+.user-edit-line {
+
+  display: flex;
+  flex-direction: column;
+
+  align-items: center;
+  justify-content: center;
+}
+
+.user-edit-info {
+
+  font-size: 14px;
+}
+
+.user-edit-actions {
+
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  align-items: space-around;
+  justify-content: center;
+}
+
+.category {
+
+  display: flex;
+  gap: 10px;
+  flex-direction: column;
+  align-items: center;
+  background-color: #1b1b1bc1;
+  padding: 10px;
+  margin: 5px;
+  border-radius: 10px;
+}
+
+.permissions {
+
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+  font-size: 12px;
+  gap: 10px;
+}
+
+.us-add {
+
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  align-items: center;
+  justify-content: center;
+}
+
+.us-add p {
+  font-size: 14px;
+
+}
+
+.us-edit {
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 10px;
+}
+
+#st-save {
+  margin-top: 10px;
+
+}
+
+
+.st-act {
+
+  display: flex;
+  gap: 10px;
+}
+
+.us-delete {
+
+  font-size: 12px;
+}