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