Archived
DEV_2
This commit is contained in:
Raphix
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
+215
-22
@@ -1,32 +1,225 @@
|
||||
const logoutBtn = document.getElementById("logout")
|
||||
|
||||
logoutBtn.addEventListener("click", () => {
|
||||
|
||||
fetch('/signout', {
|
||||
method: 'GET',
|
||||
redirect: 'follow',
|
||||
headers: {
|
||||
'Accept': 'application/json',
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
const account = document.getElementById("account")
|
||||
const menu = document.getElementById("accmenu")
|
||||
const sidebar = document.getElementById("sidebar")
|
||||
const content = document.getElementById("content")
|
||||
|
||||
getPage("home.html")
|
||||
|
||||
|
||||
|
||||
|
||||
function getPage(name) {
|
||||
fetch('/get', {
|
||||
method: 'POST',
|
||||
redirect: 'follow',
|
||||
headers: {
|
||||
'Accept': 'application/json',
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({"request":"page", "name": name})
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(response => redirect(response))
|
||||
.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>'
|
||||
|
||||
|
||||
} else if(response.result == "success") {
|
||||
|
||||
function redirect(response) {
|
||||
|
||||
if(response.success == true) {
|
||||
window.location.href = "/login"
|
||||
|
||||
} else if(response.token == "auth_success") {
|
||||
|
||||
window.location.href = "/"
|
||||
|
||||
function setInnerHTML(elm, html) {
|
||||
elm.innerHTML = html;
|
||||
|
||||
Array.from(elm.querySelectorAll("script"))
|
||||
.forEach( oldScriptEl => {
|
||||
const newScriptEl = document.createElement("script");
|
||||
|
||||
Array.from(oldScriptEl.attributes).forEach( attr => {
|
||||
newScriptEl.setAttribute(attr.name, attr.value)
|
||||
});
|
||||
|
||||
const scriptText = document.createTextNode(oldScriptEl.innerHTML);
|
||||
newScriptEl.appendChild(scriptText);
|
||||
|
||||
oldScriptEl.parentNode.replaceChild(newScriptEl, oldScriptEl);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
setInnerHTML(content, response.content)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
const accountpicture = document.getElementById("*accountpicture")
|
||||
const accountname = document.getElementById("*accountname")
|
||||
|
||||
if(accountpicture != null) {
|
||||
|
||||
|
||||
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") {
|
||||
|
||||
|
||||
accountpicture.innerHTML = "<img width='200' height='200' style='border-radius: 100%;' src='/images/userspics/" + response.content + ".png'>"
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
if(accountname != null) {
|
||||
|
||||
|
||||
fetch('/get', {
|
||||
method: 'POST',
|
||||
redirect: 'follow',
|
||||
headers: {
|
||||
'Accept': 'application/json',
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({"request":"fullname", "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") {
|
||||
|
||||
|
||||
accountname.innerHTML = response.content
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
const b1 = document.getElementById("s-home")
|
||||
const b2 = document.getElementById("s-files")
|
||||
const b3 = document.getElementById("s-users")
|
||||
const b4 = document.getElementById("s-moni")
|
||||
const b5 = document.getElementById("s-device")
|
||||
const b6 = document.getElementById("s-cv")
|
||||
const b7 = document.getElementById("s-link")
|
||||
const settings = document.getElementById("settingsBtn")
|
||||
|
||||
b1.addEventListener("click", () => {
|
||||
getPage("home.html")
|
||||
|
||||
|
||||
|
||||
})
|
||||
b2.addEventListener("click", () => {
|
||||
getPage("files.html")
|
||||
|
||||
})
|
||||
|
||||
b3.addEventListener("click", () => {
|
||||
getPage("users.html")
|
||||
|
||||
})
|
||||
|
||||
b4.addEventListener("click", () => {
|
||||
getPage("monitor.html")
|
||||
|
||||
})
|
||||
|
||||
b5.addEventListener("click", () => {
|
||||
getPage("devices.html")
|
||||
|
||||
})
|
||||
|
||||
b6.addEventListener("click", () => {
|
||||
getPage("cv.html")
|
||||
|
||||
})
|
||||
|
||||
b7.addEventListener("click", () => {
|
||||
getPage("link.html")
|
||||
|
||||
})
|
||||
|
||||
settings.addEventListener("click", () => {
|
||||
getPage("settings.html")
|
||||
|
||||
|
||||
})
|
||||
|
||||
sidebar.addEventListener("mouseleave", () => {
|
||||
|
||||
|
||||
|
||||
menu.classList.remove("viewbar")
|
||||
content.classList.remove("sidecontent")
|
||||
|
||||
|
||||
})
|
||||
|
||||
sidebar.addEventListener("click", (event) => {
|
||||
|
||||
if(menu.classList.contains("viewbar") && !(event.target.classList.contains("noside"))) {
|
||||
menu.classList.remove("viewbar")
|
||||
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
account.addEventListener("click", () => {
|
||||
|
||||
menu.classList.add("viewbar")
|
||||
|
||||
})
|
||||
|
||||
|
||||
sidebar.addEventListener("mouseenter", () => {
|
||||
|
||||
content.classList.add("sidecontent")
|
||||
|
||||
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
})
|
||||
@@ -4,8 +4,23 @@ const remindus = document.getElementById("remindus");
|
||||
const loginButton = document.getElementById("loginButton");
|
||||
const info = document.getElementById("info");
|
||||
|
||||
loginButton.addEventListener("click", () => {
|
||||
|
||||
|
||||
userField.addEventListener("keyup", (event) => {
|
||||
if (event.key === "Enter") {
|
||||
passwordField.value = null;
|
||||
passwordField.focus()
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
passwordField.addEventListener("keyup", (event) => {
|
||||
if (event.key === "Enter") {
|
||||
login()
|
||||
}
|
||||
});
|
||||
|
||||
function login() {
|
||||
info.innerHTML = ""
|
||||
const userValue = userField.value;
|
||||
const passwordValue = passwordField.value;
|
||||
@@ -42,8 +57,9 @@ loginButton.addEventListener("click", () => {
|
||||
function redirect(response) {
|
||||
|
||||
if(response.token == "auth_failed") {
|
||||
|
||||
passwordField.value = null;
|
||||
info.innerHTML = "Le nom d'utilisateur ou le mot de passe est éronné"
|
||||
|
||||
} else if(response.token == "auth_success") {
|
||||
|
||||
window.location.href = "/"
|
||||
@@ -54,4 +70,12 @@ loginButton.addEventListener("click", () => {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
loginButton.addEventListener("click", () => {
|
||||
|
||||
login()
|
||||
|
||||
|
||||
});
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
|
||||
|
||||
|
||||
body {
|
||||
|
||||
background: rgb(58, 56, 56);
|
||||
@@ -7,18 +8,18 @@ body {
|
||||
padding: 0;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
color: white;
|
||||
|
||||
}
|
||||
|
||||
.content {
|
||||
|
||||
|
||||
padding: 3%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/*CSS for Login*/
|
||||
|
||||
@media (max-width: 768px) {
|
||||
|
||||
@@ -30,6 +31,7 @@ body {
|
||||
border-radius: 1vw;
|
||||
box-shadow: 5px 5px 5px rgba(80, 80, 80, 0.477) ;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
@@ -60,15 +62,24 @@ body {
|
||||
border-style: hidden;
|
||||
border-radius: 1vw;
|
||||
transition: all 0.2s ease 0s;
|
||||
padding-left: 1vw;
|
||||
|
||||
}
|
||||
|
||||
.box form input:hover {
|
||||
|
||||
box-shadow: 2px 2px 5px rgba(255, 255, 255, 0.477) ;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.box form input:focus {
|
||||
|
||||
box-shadow: 5px 5px 5px rgba(0, 174, 255, 0.477) ;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.box form .inp {
|
||||
|
||||
margin: 2%;
|
||||
@@ -78,6 +89,7 @@ body {
|
||||
|
||||
border-style:solid;
|
||||
border-radius: 1vw;
|
||||
border-color: white;
|
||||
padding: 1%;
|
||||
margin: 3%;
|
||||
transition: all 0.2s ease 0s;
|
||||
@@ -103,7 +115,7 @@ body {
|
||||
transition: all 0.2s ease 0s;
|
||||
color: white;
|
||||
background-color: transparent;
|
||||
border-color: black;
|
||||
border-color: white;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@@ -120,4 +132,364 @@ body {
|
||||
color: #ff0012;
|
||||
font-size: larger;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
/*CSS for Dashboard*/
|
||||
|
||||
|
||||
.header {
|
||||
|
||||
justify-content: space-between;
|
||||
text-align: center;
|
||||
margin: 0%;
|
||||
font-family: 'Barlow', sans-serif;
|
||||
--bs-gutter-x: 0rem;
|
||||
}
|
||||
|
||||
.header p {
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.edropdown {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
--bs-gutter-x: 0rem;
|
||||
|
||||
}
|
||||
.edropdown-content {
|
||||
text-align: center;
|
||||
display: none;
|
||||
background-color: rgb(80, 80, 80);
|
||||
position: absolute;
|
||||
width: 90%;
|
||||
right: 5%;
|
||||
padding: 0%;
|
||||
bottom: 15%;
|
||||
overflow: auto;
|
||||
border-radius: 1vw;
|
||||
box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
|
||||
transition: all 0.1s ease 0s;
|
||||
margin-left: 1%;
|
||||
|
||||
}
|
||||
|
||||
.viewbar {
|
||||
|
||||
display: block !important;
|
||||
|
||||
}
|
||||
|
||||
.edropdown-content a {
|
||||
display: block;
|
||||
color: white;
|
||||
padding: 4%;
|
||||
text-decoration: none;
|
||||
transition: all 0.1s ease 0s;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.edropdown-content .logout {
|
||||
|
||||
color: red;
|
||||
|
||||
}
|
||||
|
||||
.edropdown-content .logout:hover {
|
||||
color: white;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.edropdown-content a:hover {
|
||||
color: black;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
|
||||
.edropdown-content p {
|
||||
display: block;
|
||||
color: white;
|
||||
padding: 4%;
|
||||
text-decoration: none;
|
||||
transition: all 0.1s ease 0s;
|
||||
}
|
||||
|
||||
.edropdown-content p:hover {
|
||||
color: black;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@media (min-width: 992px) {
|
||||
|
||||
.logo {
|
||||
|
||||
content: url("/images/minlogo.png");
|
||||
transition: all 0.3s ease 0s;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.sidebar:hover .logo {
|
||||
content: url("/images/logo.png");
|
||||
transform: scale(0.85);
|
||||
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
|
||||
|
||||
width: 5%;
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
background-color: rgb(32, 32, 32);
|
||||
transition: all 0.4s ease 0s;
|
||||
|
||||
}
|
||||
|
||||
.sidebar:hover {
|
||||
|
||||
width: 15%;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.d-content {
|
||||
|
||||
|
||||
margin-left: 5%;
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 3%;
|
||||
padding-right: 8%;
|
||||
transition: all 0.4s ease 0s;
|
||||
overflow:scroll;
|
||||
overflow-x:hidden;
|
||||
|
||||
}
|
||||
|
||||
.sidecontent{
|
||||
|
||||
|
||||
margin-left: 15% !important;
|
||||
padding-right: 15%;
|
||||
|
||||
}
|
||||
|
||||
.sidebar-content {
|
||||
|
||||
text-align: center;
|
||||
height: 85%;
|
||||
padding-top: 50%;
|
||||
padding-bottom: 50%;
|
||||
|
||||
}
|
||||
|
||||
.sidebar:hover .sidebar-content {
|
||||
|
||||
height: 80%;
|
||||
}
|
||||
|
||||
.sidebar:hover .sidebar-footer{
|
||||
|
||||
text-align: unset;
|
||||
padding-top: 5%;
|
||||
padding-left: 30%;
|
||||
}
|
||||
|
||||
.sidebar-footer {
|
||||
|
||||
height: 5%;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
|
||||
.sidebar-footer:hover {
|
||||
|
||||
background-color: white;
|
||||
color: black;
|
||||
cursor: pointer;
|
||||
height: 10%;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.sidebar-image {
|
||||
border-radius: 100%;
|
||||
vertical-align: center;
|
||||
align-items: center;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.sidebar:hover .sidebar-image {
|
||||
|
||||
display: unset;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.sidebar-text {
|
||||
|
||||
display: none;
|
||||
-moz-user-select: none; /* Firefox */
|
||||
-webkit-user-select: none; /* Chrome, Safari, Opéra depuis la version 15 */
|
||||
-ms-user-select: none; /* Internet explorer depuis la version 10 et Edge */
|
||||
user-select: none; /* Propriété standard */
|
||||
}
|
||||
|
||||
.username {
|
||||
|
||||
|
||||
display: none;
|
||||
-moz-user-select: none; /* Firefox */
|
||||
-webkit-user-select: none; /* Chrome, Safari, Opéra depuis la version 15 */
|
||||
-ms-user-select: none; /* Internet explorer depuis la version 10 et Edge */
|
||||
user-select: none; /* Propriété standard */
|
||||
|
||||
}
|
||||
|
||||
.account {
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
vertical-align: center;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.sidebar:hover .username {
|
||||
|
||||
display: unset;
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.sidebar:hover .sidebar-text {
|
||||
|
||||
display: unset;
|
||||
}
|
||||
|
||||
|
||||
.sidebar-item {
|
||||
|
||||
transition: all 0.2s ease 0s;
|
||||
padding: 5%;
|
||||
margin-top: 5%;
|
||||
margin-bottom: 5%;
|
||||
}
|
||||
|
||||
.sidebar-item:hover {
|
||||
|
||||
background-color: white;
|
||||
color: black;
|
||||
cursor: pointer;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
|
||||
.sidebar {
|
||||
|
||||
font-size: 7vw;
|
||||
width: 100%;
|
||||
background-color: rgb(32, 32, 32);
|
||||
transition: all 0.4s ease 0s;
|
||||
|
||||
}
|
||||
|
||||
.sidebar-content {
|
||||
|
||||
text-align: center;
|
||||
height: 80%;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.sidebar-footer {
|
||||
|
||||
height: 5%;
|
||||
text-align: unset;
|
||||
padding-top: 5%;
|
||||
padding-left: 30%;
|
||||
|
||||
}
|
||||
|
||||
.sidebar-footer:hover {
|
||||
|
||||
background-color: white;
|
||||
color: black;
|
||||
cursor: pointer;
|
||||
height: 10%;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.sidebar-image {
|
||||
border-radius: 100%;
|
||||
|
||||
}
|
||||
|
||||
.sidebar:hover .sidebar-image {
|
||||
|
||||
display: unset;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.sidebar-text {
|
||||
|
||||
display: none;
|
||||
-moz-user-select: none; /* Firefox */
|
||||
-webkit-user-select: none; /* Chrome, Safari, Opéra depuis la version 15 */
|
||||
-ms-user-select: none; /* Internet explorer depuis la version 10 et Edge */
|
||||
user-select: none; /* Propriété standard */
|
||||
}
|
||||
|
||||
|
||||
.sidebar:hover .sidebar-text {
|
||||
|
||||
display: unset;
|
||||
}
|
||||
|
||||
|
||||
.sidebar-item {
|
||||
|
||||
transition: all 0.2s ease 0s;
|
||||
padding: 5%;
|
||||
margin-top: 5%;
|
||||
margin-bottom: 5%;
|
||||
}
|
||||
|
||||
.sidebar-item:hover {
|
||||
|
||||
background-color: white;
|
||||
color: black;
|
||||
cursor: pointer;
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,111 @@
|
||||
<div class="home">
|
||||
<h1>Accueil</h1>
|
||||
</br>
|
||||
<div class="homepanel">
|
||||
<div class="row w-100">
|
||||
<div class="hbox col-lg">
|
||||
|
||||
|
||||
<h1><i class="fa fa-bell"></i> Notifications</h1>
|
||||
|
||||
<table class="table">
|
||||
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Appareil</th>
|
||||
<th scope="col">Device</th>
|
||||
<th scope="col">Notifications</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
||||
<td>Larry</td>
|
||||
<td>the Bird</td>
|
||||
<td>@twitter</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
||||
<td>Larry</td>
|
||||
<td>the Bird</td>
|
||||
<td>@twitter</td>
|
||||
|
||||
</tr>
|
||||
<tr>
|
||||
|
||||
<td>Larry</td>
|
||||
<td>the Bird</td>
|
||||
<td>@twitter</td>
|
||||
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="hbox col-lg">
|
||||
<h1>EcoleDirecte</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row w-100">
|
||||
<div class="hbox col-lg">
|
||||
<h1>Contenu épinglé</h1>
|
||||
</div>
|
||||
<div class="hbox col-lg">
|
||||
<h1>Contenu épinglé</h1>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Style-->
|
||||
<style>
|
||||
|
||||
.home {
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.hbox h1 {
|
||||
|
||||
font-size: large;
|
||||
|
||||
}
|
||||
|
||||
table {
|
||||
color: white;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.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>
|
||||
@@ -0,0 +1,338 @@
|
||||
<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>
|
||||
@@ -0,0 +1,56 @@
|
||||
<div class="home">
|
||||
<h1>Gestion 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>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Style-->
|
||||
<style>
|
||||
|
||||
.home {
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.hbox h1 {
|
||||
|
||||
font-size: large;
|
||||
|
||||
}
|
||||
|
||||
table {
|
||||
color: white;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.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>
|
||||
Reference in New Issue
Block a user