DEV_2

public/javascripts/dashboard.js

@@ -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")
+
+  
+})
 
-    } 
 
-})

public/javascripts/loginscript.js

@@ -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()
+
+   
 });