338 lines
10 KiB
HTML
338 lines
10 KiB
HTML
|
<div class="home">
|
||
|
|
<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>
|