neutral-old/public/templates/settings.html

<div class="settings">
    <h1>Paramètres du compte</h1>
</br>
<div class="homepanel">
    <div class="row w-100">
        
        <div class="hbox col">
            <p class="title"><i class="fa fa-id-card"></i> Mes informations</p>
            <div class="settings-content">
                <p>Photo de profil :</p>
                <div id="*accountpicture"></div>
                <input id='user_files' accept="image/png, image/jpeg" name="apic" type="file" id="logo"/>
                <p style="color: rgb(255, 76, 76);" id="user_ainfo"></p>
                <p class="fullnameinfo">Nom complet <i>(max 18 caractères)</i> :</p>
                <p>Actuel : <span id="*accountname"></span></p>
                <input id="user_fullname" class="inp" type="text">
                <div style="color: rgb(255, 76, 76);" id="user_finfo"></div>
            </div>
            <p class="title"><i class="fa fa-key"></i> Mot de passe :</p>
            <div class="settings-content">
             
                <p>Mot de passe actuel : </p>
                <input class="inp" type="password" id="user_lastpassword">
                <p>Nouveau mot de passe : </p>
                <input class="inp" type="password" id="user_newpassword">
                <div style="color: rgb(255, 76, 76);" id="user_pinfo"></div>
            </div>
            <button id="user_actBtn" class="ubutton">Sauvegarder</button>
           
        
    </div>

</div>

</div>

<script>
   
    if(typeof user_sub == 'undefined') {
        
        const user_sub = document.getElementById("user_actBtn");
        const user_oldp = document.getElementById("user_lastpassword");
        const user_newp = document.getElementById("user_newpassword");
        const user_fullname = document.getElementById("user_fullname");
        const user_pinfo = document.getElementById("user_pinfo");
        const user_finfo = document.getElementById("user_finfo");
        const user_ainfo = document.getElementById("user_ainfo");
        const user_files = document.getElementById("user_files")
        const fID = document.getElementById("*accountname");
        const aID = document.getElementById("*accountpicture");
        const dID = document.getElementById("*dashaccountname")
      
        user_sub.addEventListener("click", () => {
            user_finfo.innerHTML = "";
            user_pinfo.innerHTML = "";
            user_ainfo.innerHTML = "";
           
           
            if(user_files.files[0] != null) {

                const image_acc = new FormData();
                image_acc.append("apic", user_files.files[0])
                
                fetch('/upload', {
                    method: 'POST',
                    mode:"cors",
                    cache:"no-cache",
                    credentials:"same-origin",
                    referrerPolicy:"no-referrer",
                    redirect: 'follow',
                    body: image_acc
                })
                .then(response => response.json())
                .then(response => resp(response))

                function resp(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") {
                            
                        user_files.value = ""
                        user_ainfo.innerHTML = response.content                   
                       
                        fetch('/get', {
                        method: 'POST',
                        redirect: 'follow',
                        headers: {
                            'Accept': 'application/json',
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({"request":"username", "name": ""})
                        })
                        .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") {
                    
                            const daID = document.getElementById("*dashaccountpicture")
                            
                         
                            var randomNum = new Date().getTime();
                            

                            daID.innerHTML = '<img class="w-25 sidebar-image noside" src="/images/userspics/' + response.content  + '.png?' + randomNum + '">'
                            aID.innerHTML = "<img style='border-radius: 100%;' src='/images/userspics/" + response.content +  ".png?" + randomNum + "'>"
                            
                        }
                    
                        
                    
                        } 
                        
                    }

                }
                

            }
            
            if(user_oldp.value != "" | user_newp.value != "") {

                console.log("test")

                  if(user_oldp.value != "" && user_newp.value != "") {
                    if(user_oldp.value != user_newp.value) {

                        fetch('/set', {
                        method: 'POST',
                        redirect: 'follow',
                        headers: {
                            'Accept': 'application/json',
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({"request":"password", "value": user_newp.value, "additional":user_oldp.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") {
                            
                            user_oldp.value = ""
                            user_newp.value = ""
                            
                            user_pinfo.innerHTML = response.content                   
                        
                        }
                
                    
                
                    }
                        
                    } else {

                        user_pinfo.innerHTML = "<p>Le nouveau et l'ancien mot de passe ne peuvent pas être le même</p>"
                    }
      
                  } else {
                        user_pinfo.innerHTML = "<p>Le nouveau et l'ancien mot de passe doivent être rempli</p>"
      
                  }
      
              }

          

              if(user_fullname.value.length >= 18) {
                 user_finfo.innerHTML = "<p>Le nom complet ne doit pas dépasser 18 caractères</p>"

               

              } else if(user_fullname.value != "") {
                
              
                    fetch('/set', {
                    method: 'POST',
                    redirect: 'follow',
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({"request":"fullname", "value": user_fullname.value, "additional":"empty"})
                    })
                    .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") {
                        
                        user_fullname.value = ""
                        dID.innerHTML = response.additional
                        fID.innerHTML = response.additional
                        document.title = "Neutral - " +  response.additional
                        user_finfo.innerHTML = response.content                   
                       
                    }
                
                    
                
                    } 


              


            }
      
          })
        

        }


         

          


    
</script>

<!-- Style-->
<style>


.ubutton {

border-style:solid;
border-radius: 1vw;
border-color: white;
padding: 1%;
transition: all 0.2s ease 0s;
color: white;
background-color: transparent;
}

.ubutton:hover {

background: white;
color: black;
border-color: transparent;
box-shadow: 2px 2px 5px rgba(0, 174, 255, 0.477);

}

.ubutton:active {

border-style:solid;
border-radius: 1vw;
padding: 1%;
transition: all 0.2s ease 0s;
color: white;
background-color: transparent;
border-color: white;
box-shadow: none;
}


.hbox .title{

    font-size: larger;

}

.fullnameinfo {

    margin-top: 2%;
}

.settings-content {

    padding: 1%;
   

}

.settings-content input {

   margin-bottom: 1%;


}





.settings-content .inp {

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

}

.settings-content .inp:hover {

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

}


.settings-content .inp:focus {

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

}

.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>