neutral-old/public/templates/users.html

<div class="users">
    <h1>Gestionnnaire des utilisateurs</h1> 
</br>
<div class="homepanel">
    <div class="row w-100">
        <div class="hbox col">
             <h1><i class="fa fa-users"></i> Utilisateurs</h1>
             <div id="gus_panel" class="gus_users">
               
             </div>
            <button id="gus_add" class="gus_add"><i class="fa fa-plus"></i> Ajouter un utilisateur</button>
            <div id="gus_info"></div>
         </div>

        
    </div>

    </div>
</div>
<dialog class="gus_adduser" id="gus_adduser">
    <h1><i class="fa fa-plus"></i> Ajouter un utilisateur</h1>
        <div class="gus_add_imagediv">
            <img width="200" height="200" id="gus_add_image" class="gus_add_image" src="/images/standalone.png">
            <br>
            <input class="gus_image_upload" accept="image/png, image/jpeg" name="apic" type="file" id="gus_image_upload"/>
            <br>
            <div style="color: rgb(255, 76, 76);" id="gus_add_image_info"></div>
        </div>
    <div class="form">
        <p>Nom d'utilisateur</p>
        <input class="inp" id="gus_add_username" type="text">
        <p>Nom complet :</p>
        <input class="inp" id="gus_add_fullname" type="text">
        <p>Mot de passe :</p>
        <input class="inp" id="gus_add_password" type="password">
        <p>Niveau de permission :</p>
        <select class="inp" id="gus_add_perm">
            <option>Niveau 1 : (Utilisateur)</option>
            <option>Niveau 2 : (Editeur)</option>
            <option>Niveau 3 : (Operateur)</option>
            <option>Niveau 4 : (Administrateur)</option>
        </select>
        <div style="color: rgb(255, 76, 76);" id="gus_add_info"></div>
    </div>
    <button onclick="getPage('users.html')" id="gus_add_close" class="gus_add_close">Annuler</button>
    <button id="gus_add_confirm" class="gus_add_confirm">Ajouter</button>
    


</dialog>


<div id="gus_dialoguser">

</div>



<script>

    if(typeof adduserform  == 'undefined'){

        const panel = document.getElementById("gus_panel")
        const dialogUserall  = document.getElementById("gus_dialoguser")

        showUsers()

        /* EXAMPLE OF A LINE

         <div class="gus_line row w-100">
                    <div class="col-lg">
                        <p><img width="200" class="gus_image" src="images/userspics/' + user + '.png"> <span id="' + user + "_fullname" + '"></span></p>
                    </div>
                    <div class="col-lg">
                        <p>Dernière connexion : <span id="' + user + "_lastco" + '"></span></p>
                    </div>
                    <div class="col-lg">
                        <p>Niveau de permissions : <span id="' + user + "_permLevel" + '"></span></p>
                    </div>
                    <div class="col-lg">
                    <button id="' + user + "_edit" + '" class="gus_edit"><i class="fa fa-pen"></i></button>
                    <button id="' + user + "_deco" + '" class="gus_signout"><i class="fa-solid fa-arrow-right-from-bracket"></i></button>
                    <button id="' + user + "_del" + '" class="gus_delete"><i class="fa fa-trash"></i></button>
                </div>
        </div>

        */

        function showUsers() {

            var number = Date.now()

            

            var dialogtoshow = new Array()
            var usertoshow = new Array()

            fetch('/usermanager', {
                method: 'POST',
                redirect: 'follow',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({"request":"get", "value": ""})
            })
            .then(response => response.json())
            .then(response => load(response))

            
                        
            function load(response) {

                if(response.result == "failed") {
                    content.innerHTML = ' <h1 style="color:red;"><i style="color:yellow; font-size: 2vw;" class="fa fa-warning"></i>  Erreur de chargement des données - Erreur : ' + response.content  + '</h1>'
                    console.log("FAILED")
                        
                } else if(response.result == "success") {

                    var fullname;
                    var lastco;
                    var permLevel;

                    for(var user of response.content) {

                       
                        usertoshow.push('<div class="gus_line row w-100"><div class="col-lg"><p><img width="200" class="gus_image" src="images/userspics/'+ user +'.png?' + number + '"> <span id="' + user + "_fullname"+'"></span></p></div><div class="col-lg"><p>Dernière connexion : <span id="' + user + "_lastco"+'"></span></p></div><div class="col-lg"><p>Niveau de permissions : <span id="'+user+"_permLevel"+'"></span></p></div><div class="col-lg"><button id="'+user+"_edit"+'" class="gus_edit"><i class="fa fa-pen"></i></button><button id="'+user+"_deco"+'" class="gus_signout"><i class="fa-solid fa-arrow-right-from-bracket"></i></button><button id="'+user+"_del"+'" class="gus_delete"><i class="fa fa-trash"></i></button></div></div>')
                        dialogtoshow.push('<dialog class="gus_adduser" id="' + user + '_editDialog"> <h1><i class="fa fa-pen"></i> Editer un utilisateur</h1> <div class="gus_add_imagediv"> <img width="200" height="200" id="gus_add_image" class="gus_add_image" src="/images/userspics/' + user + '.png?' + number + '"> <br> <input class="gus_image_upload" accept="image/png, image/jpeg" name="apic" type="file" id="' + user + '_image_upload"/> <br> <div style="color: rgb(255, 76, 76);" id="' + user + '_add_image_info"></div> </div> <div class="form"> <p>Nom d\'utilisateur</p> <input class="inp" id="' + user + '_add_username" type="text"> <p>Nom complet :</p> <input class="inp" id="' + user + '_add_fullname" type="text"> <p>Mot de passe :</p> <input class="inp" id="' + user + '_add_password" type="password"> <p>Niveau de permission :</p> <select class="inp" id="' + user + '_add_perm"> <option>Niveau 1 : (Utilisateur)</option> <option>Niveau 2 : (Editeur)</option> <option>Niveau 3 : (Operateur)</option> <option>Niveau 4 : (Administrateur)</option> </select> <div style="color: rgb(255, 76, 76);" id="' + user + '_add_info"></div> </div> <button onclick="getPage(\'users.html\')" id="' + user + '_add_close" class="gus_add_close">Annuler</button> <button id="' + user + '_add_confirm" class="gus_add_confirm">Editer</button> </dialog> ')

                        panel.innerHTML = usertoshow.join("")
                        dialogUserall.innerHTML = dialogtoshow.join("")


                        fetch('/get', {
                            method: 'POST',
                            redirect: 'follow',
                            headers: {
                                'Accept': 'application/json',
                                'Content-Type': 'application/json'
                            },
                            body: JSON.stringify({"request":"all", "name": user, "additional": ""})
                        })
                        .then(response => response.json())
                        .then(response => after(response))


                        function after(response) {

                            

                            const date = new Date(response.content.lastconnexion)

                            var gmonth = date.getMonth()
                            var gday = date.getDate()
                            var gHour = date.getHours()
                            var gMinute = date.getMinutes()
                            var gSecondes = date.getSeconds()


                            if(date.getMonth() + 1 <= 9) {
                                gmonth = "0" + (date.getMonth() + 1)
                            }

                            if(date.getDate() + 1 <= 9) {
                                gday = "0" + date.getDate()
                            }

                            if(date.getHours() + 1 <= 9) {
                                gHour = "0" + date.getHours()
                            }

                            if(date.getMinutes() + 1 <= 9) {
                                gMinute = "0" + date.getMinutes()
                            }

                            if(date.getSeconds() + 1 <= 9) {
                                gSecondes = "0" + date.getSeconds()
                            }

                            var currentDate = gday + "-" + gmonth + "-" + date.getFullYear()  + " - " + gHour + ":" + gMinute



                            fullname = document.getElementById(response.content.username + "_fullname")
                            lastco = document.getElementById(response.content.username + "_lastco")
                            permLevel = document.getElementById(response.content.username + "_permLevel")

                            fullname.innerHTML = response.content.fullname
                            permLevel.innerHTML = response.content.permLevel
                            lastco.innerHTML = currentDate;

                            const editBtn = document.getElementById(response.content.username + "_edit")
                            const decoBtn = document.getElementById(response.content.username +"_deco")
                            const delBtn = document.getElementById(response.content.username + "_del")

                            delBtn.addEventListener("click", () => {

                                fetch('/usermanager', {
                                    method: 'POST',
                                    redirect: 'follow',
                                    headers: {
                                        'Accept': 'application/json',
                                        'Content-Type': 'application/json'
                                    },
                                    body: JSON.stringify({"request":"del", "value": response.content.username})
                                })


                                getPage("users.html")

                            })

                            decoBtn.addEventListener("click", () => {

                                fetch('/usermanager', {
                                    method: 'POST',
                                    redirect: 'follow',
                                    headers: {
                                        'Accept': 'application/json',
                                        'Content-Type': 'application/json'
                                    },
                                    body: JSON.stringify({"request":"deco", "value": response.content.username})
                                })

                                gusInfo.innerHTML = "<p style='color: rgb(130, 255, 163); padding: 1vw;'>Le Token de l'utilisateur <strong>" + response.content.username + "</strong> a été supprimé</p>"
                                

                            })

                            editBtn.addEventListener("click", () => {

                                const editDialog = document.getElementById(response.content.username + "_editDialog")  

                                const edituserUsername = document.getElementById(response.content.username + "_add_username")
                                const edituserPassword = document.getElementById(response.content.username + "_add_password")
                                const edituserFullname = document.getElementById(response.content.username + "_add_fullname")
                                const edituserPerm = document.getElementById(response.content.username + "_add_perm")
                                const edituserInfo = document.getElementById(response.content.username + "_add_info")
                                const edituserImage = document.getElementById(response.content.username + "_image_upload")

                                const edituserConfirm = document.getElementById(response.content.username + "_add_confirm")

                                edituserUsername.value = response.content.username;
                                edituserFullname.value = response.content.fullname;

                          
                                
                                if(response.content.permLevel == 1) {

                                    edituserPerm.value = "Niveau 1 : (Utilisateur)";
                                } else if(response.content.permLevel == 2) {

                                    edituserPerm.value = "Niveau 2 : (Editeur)";
                                } else if(response.content.permLevel == 3) {

                                    edituserPerm.value = "Niveau 3 : (Operateur)";
                                } else if(response.content.permLevel == 4) {

                                    edituserPerm.value = "Niveau 4 : (Administrateur)";
                                }

                                edituserConfirm.addEventListener("click", () => {

                                    edituserInfo.innerHTML = ""



                                    if(edituserUsername.value != "" && edituserFullname.value != "") {

                                        var level = 1;

                                        if(edituserPerm.value == 'Niveau 1 : (Utilisateur)') {
                                                level = 1

                                        } else if(edituserPerm.value == 'Niveau 2 : (Editeur)') {
                                                level = 2

                                        } else if(edituserPerm.value == 'Niveau 3 : (Operateur)') {
                                                level = 3

                                        } else if(edituserPerm.value == 'Niveau 4 : (Administrateur)') {
                                                level = 4

                                        } 
                                    

                                        const requestData = {
                                            "original":response.content.username,
                                            "username":edituserUsername.value,
                                            "fullname":edituserFullname.value,
                                            "permLevel": level,
                                            "password": edituserPassword.value

                                        }

                                        

                                        fetch('/usermanager', {
                                            method: 'POST',
                                            redirect: 'follow',
                                            headers: {
                                                'Accept': 'application/json',
                                                'Content-Type': 'application/json'
                                            },
                                            body: JSON.stringify({"request":"edit", "value": requestData})
                                        })
                                        .then(response => response.json())
                                        .then(response => editresp(response))


                                        function editresp(eresponse) {
                                            if(eresponse.result == "failed") {
                                                content.innerHTML = ' <h1 style="color:red;"><i style="color:yellow; font-size: 2vw;" class="fa fa-warning"></i>  Erreur de chargement des données - Erreur : ' + eresponse.content  + '</h1>'
                                                console.log("FAILED")
                                                    
                                            } else if(eresponse.result == "success") {

                                                if(eresponse.content != "DATA_VALID") {
                                                    edituserInfo.innerHTML = "L'édition de l'utilisateur a échoué."

                                                } else {

                                                    if(edituserImage.files[0] != null) {
                                            
                                            
                                                        const image_acc = new FormData();
                                                        image_acc.append("apic", edituserImage.files[0])
                                                            
                                                        fetch('/upload', {
                                                                method: 'POST',
                                                                mode:"cors",
                                                                cache:"no-cache",
                                                                credentials:"same-origin",
                                                                headers: {
                                                                    "uploadforuser": requestData.username

                                                                },
                                                                referrerPolicy:"no-referrer",
                                                                redirect: 'follow',
                                                                body: image_acc
                                                        }).then(response => getPage("users.html"))
                                                    
                                                    
                                                    } else {
                                                        getPage("users.html")

                                                    }

                                                   

                                                }
                                                


                                            }


                                        }

                                        


                                    } else {
                                        edituserInfo.innerHTML = "<p>L'utilisateur ne peut pas ne pas avoir de nom d'utilisateur et de nom complet</p>"

                                    }
                                })

                                
                                
                                editDialog.showModal()

                            })


                            

                            
                        }


                    }   



                }

            }
            
            
           

        }

        const imgInput = document.getElementById("gus_image_upload")
        const imgEl = document.getElementById("gus_add_image")
        const imgInfo = document.getElementById("gus_add_image_info")

        imgInput.addEventListener("change", (event) => {

            imgInfo.innerHTML = ""
            const nowImage = event.target.files
            const nowImageLength = event.target.files

            if(nowImage[0].type == "image/jpeg" | nowImage[0].type == "image/png") {
                const imageSrc = URL.createObjectURL(nowImage[0]);
                imgEl.src = imageSrc;

            } else {
                imgInput.value = ""
                imgInfo.innerHTML = '<p>Seul les images (JPEG et PNG) sont acceptés.</p>'
            }
            


         })
        
       

        const adduserForm = document.getElementById("gus_adduser")
        const adduserBtn = document.getElementById("gus_add")
        const adduserConfirm = document.getElementById("gus_add_confirm")

        const adduserUsername = document.getElementById("gus_add_username")
        const adduserPassword = document.getElementById("gus_add_password")
        const adduserFullname = document.getElementById("gus_add_fullname")
        const adduserPerm = document.getElementById("gus_add_perm")
        const addInfo = document.getElementById("gus_add_info")
        const gusInfo = document.getElementById("gus_info")
          
            adduserBtn.addEventListener("click", () => { 

                adduserUsername.value = ""
                adduserPassword.value = ""
                adduserFullname.value = ""
                adduserPerm.value = "Niveau 1 : (Utilisateur)"
                addInfo.value = ""
                gusInfo.innerHTML = ""
                imgEl.src = "/images/standalone.png"  ;

                adduserForm.showModal()
            })

            adduserConfirm.addEventListener("click", () => {

                addInfo.innerHTML = ""
                imgInfo.innerHTML = ""

                if(adduserUsername.value != "" && adduserPassword.value != "" && adduserFullname.value != "") {
                    
                    const addUserData = {"username":adduserUsername.value, "password":adduserPassword.value, "fullname":adduserFullname.value, "permLevel":adduserPerm.value }

                    const addUserImage = document.getElementById("gus_image_upload")

                    
                    
                    fetch('/usermanager', {
                        method: 'POST',
                        redirect: 'follow',
                        headers: {
                        'Accept': 'application/json',
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({"request":"add", "value": addUserData})
                    })
                    .then(response => response.json())
                    .then(response => load(response))
                        
                    function load(response) {
                        if(response.result == "failed") {
                                content.innerHTML = ' <h1 style="color:red;"><i style="color:yellow; font-size: 2vw;" class="fa fa-warning"></i>  Erreur de chargement des données - Erreur : ' + response.content  + '</h1>'
                                console.log("FAILED")
                        
                        } else if(response.result == "success") {
                            
                            if(response.content == "VALID") {
                              
                                if(addUserImage.files[0] != null) {
                                    
                                    
                                    const image_acc = new FormData();
                                    image_acc.append("apic", addUserImage.files[0])
                                        
                                    fetch('/upload', {
                                            method: 'POST',
                                            mode:"cors",
                                            cache:"no-cache",
                                            credentials:"same-origin",
                                            headers: {
                                                "uploadforuser": adduserUsername.value

                                            },
                                            referrerPolicy:"no-referrer",
                                            redirect: 'follow',
                                            body: image_acc
                                    })
                                
                                
                                }  

                                gusInfo.innerHTML = "<p style='color:rgb(130, 255, 163); padding: 1vw;'>Ajout de l'utilisateur <strong>" + adduserUsername.value + "</strong> avec succès.</p>"
                                adduserForm.close()
                                getPage("users.html")

                              
                            } else {
                                addInfo.innerHTML = '<p>' + response.content + '</p>'
                            }
                                    
                           

                             
                        }
                    }

                } else {

                    addInfo.innerHTML = '<p">Tous les champs doivent être remplis</p>'
                }

                

            })
        

        

    }

    
    
</script>

<!-- Style-->
<style>

.gus_adduser p  {
 
    margin-top: 0.5vw;

}

.gus_add_imagediv {

    text-align: center;
    justify-items: center;

   
}

.inp {

    border-style: hidden;
    border-radius: 1vw;
    padding: 0.2vw;
    padding-left: 1vw;
    transition: all 0.2s ease 0s;
    

}

.gus_adduser .gus_image_upload {

    margin-top: 1vw;
    margin-bottom: 1vw;
}


select.inp {

    margin-bottom: 0.5vw;

}

.inp:hover {

    box-shadow: 2px 2px 5px rgba(255, 255, 255, 0.477) ;

}


.inp:focus {

    box-shadow: 5px 5px 5px rgba(0, 174, 255, 0.477) ;

}

.gus_adduser {

    border-radius: 1vw;
    border-color: transparent;
    background-color: rgb(80, 80, 80);
    color: white;
    text-align: center;
    
}

.gus_add_image {

    border-radius: 100%;
}

.gus_add_close {

    border-radius: 1vw;
    border-color: rgb(255, 48, 48);
    border-width: 1%;
    border-style: solid;
    color: white;
    background-color: transparent;
    transition: all 0.2s ease 0s;
    margin: 0.5vw;
    padding: 0.5vw;
    font-size: 1vw;
}

.gus_add_close:hover {
    box-shadow: 1px 1px 10px rgb(255, 48, 48);
    background-color: rgb(255, 48, 48);
    color: black;
}

.gus_add_close:active {
    box-shadow: none;

}

.gus_add_confirm {

    border-radius: 1vw;
    border-color: rgb(0, 174, 255);
    border-width: 1%;
    border-style: solid;
    color: white;
    background-color: transparent;
    transition: all 0.2s ease 0s;
    margin: 0.5vw;
    padding: 0.5vw;
    font-size: 1vw;

}

.gus_add_confirm:hover {
    box-shadow: 1px 1px 10px rgb(0, 174, 255);
    background-color: rgb(0, 174, 255);
    color: black;
}

.gus_add_confirm:active {
    box-shadow: none;

}


.hbox h1 {

    font-size: large;

}

table  {
    color: white;
    
}

.gus_line {

    margin: 1vw;
    text-align: center;
    display: flex;
    vertical-align: middle;
    align-items: center;
}

.gus_image {

   width: 10%;
   border-radius: 100%;
}

.gus_users {

    margin: 1%;
    padding: 1%;
    background-color: rgb(80, 80, 80);
    border-radius: 1vw;
    box-shadow: 5px 5px 5px rgba(80, 80, 80, 0.477) ;
}

.gus_edit {

    border-radius: 100%;
    border-color: rgb(0, 174, 255);
    border-width: 1%;
    border-style: solid;
    color: white;
    background-color: transparent;
    transition: all 0.2s ease 0s;
    width: 2.5vw;
    height: 2.5vw;
    margin-left: 0.5vw;
    margin-right: 0.5vw;
    font-size: 1vw;
    
}

.gus_edit:hover {
    box-shadow: 1px 1px 10px rgb(0, 174, 255);
    background-color: rgb(0, 174, 255);
    color: black;
}

.gus_edit:active {
    box-shadow: none;
    
}

.gus_signout {

    border-radius: 100%;
    border-color: rgb(254, 254, 74);
    border-width: 1%;
    border-style: solid;
    color: white;
    background-color: transparent;
    transition: all 0.2s ease 0s;
    width: 2.5vw;
    height: 2.5vw;
    margin-left: 0.5vw;
    margin-right: 0.5vw;
    font-size: 1vw;
}

.gus_signout:hover {
    box-shadow: 1px 1px 10px rgb(254, 254, 74);
    background-color: rgb(254, 254, 74);
    color: black;
}

.gus_signout:active {
    box-shadow: none;

}

.gus_delete {

    border-radius: 100%;
    border-color: rgb(255, 48, 48);
    border-width: 1%;
    border-style: solid;
    color: white;
    background-color: transparent;
    transition: all 0.2s ease 0s;
    width: 2.5vw;
    height: 2.5vw;
    margin-left: 0.5vw;
    margin-right: 0.5vw;
    font-size: 1vw;
}

.gus_delete:hover {
    box-shadow: 1px 1px 10px rgb(255, 48, 48);
    background-color: rgb(255, 48, 48);
    color: black;
}

.gus_delete:active {
    box-shadow: none;

}

.gus_add {

    border-radius: 1vw;
    border-color: rgb(0, 174, 255);
    border-width: 1%;
    border-style: solid;
    color: white;
    background-color: transparent;
    transition: all 0.2s ease 0s;
    padding: 0.5vw;
    
}

.gus_add:hover {
    box-shadow: 1px 1px 10px rgb(0, 174, 255);
    background-color: rgb(0, 174, 255);
    color: black;
}

.gus_add:active {
    box-shadow: none;

}




.hbox {
    
    margin: 1%;
    padding: 1%;
    background-color: rgb(80, 80, 80);
    border-radius: 1vw;
    box-shadow: 5px 5px 5px rgba(80, 80, 80, 0.477) ;

  }

</style>