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