Add notifier for errors, etc.

ui/adminCreate/index.js

@@ -12,32 +12,26 @@ export default {
         document.getElementById("adminCreateName").focus();
     },
 
-    submit(event){
+    async submit(event){
         event.preventDefault();
 
-        const data = {
+        const body = {
             name: document.getElementById("adminCreateName").value,
             email: document.getElementById("adminCreateEmail").value,
             password: document.getElementById("adminCreatePass").value,
             confirm_password: document.getElementById("adminCreatePassConf").value
         };
 
-        fetch("/admin/first", {
+        const response = await fetch("/admin/first", {
             method: "POST",
             headers: {"Content-Type": "application/json"},
             credentials: "include",
-            body: JSON.stringify(data)
-        })
-            .then((r)=>{
-                if(!r.ok) return console.log(r.msg);
+            body: JSON.stringify(body)
+        });
 
-                return r.json();
-            })
-            .then((response)=>{
-                openPage("login");
-            })
-            .catch((e)=>{
-                console.log(e);
-            });
+        const data = await response.json();
+        if(!response.ok) return notify("error", data.msg);
+
+        openPage("login");
     }
 }

ui/index.css

@@ -82,3 +82,36 @@ body{
     background: var(--bg-base);
     color: var(--text-primary);
 }
+
+#notifier{
+    position: fixed;
+    top: 24px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 1000;
+    display: flex;
+    align-items: center;
+    max-width: min(420px, calc(100% - 48px));
+    background: var(--bg-surface-raised);
+    border-left: 4px solid var(--accent);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+    padding: 14px 18px;
+}
+
+#notifier.success{
+    border-left-color: var(--success);
+}
+
+#notifier.warning{
+    border-left-color: var(--warning);
+}
+
+#notifier.error{
+    border-left-color: var(--danger);
+}
+
+#notifierMessage{
+    font-size: 14px;
+    line-height: 1.4;
+    color: var(--text-primary);
+}

ui/index.html

@@ -8,7 +8,11 @@
     <style></style>
 </head>
 <body>
-    <div id="loginPage" class="page" display="none">
+    <div id="notifier" style="display: none">
+        <p id="notifierMessage"></p>
+    </div>
+
+    <div id="loginPage" class="page" style="display: none">
         <form>
             <h1>Login</h1>
 
@@ -24,11 +28,11 @@
         </form>
     </div>
 
-    <div id="dashboardPage" class="page" display="none">
+    <div id="dashboardPage" class="page" style="display: none">
         <h1>Dashboard</h1>
     </div>
 
-    <div id="adminCreatePage" class="page" display="none">
+    <div id="adminCreatePage" class="page" style="display: none">
         <form>
             <h1>Admin Creation</h1>
             <p>Create an admin account in order to use Home Assistant</p>

ui/index.js

@@ -6,6 +6,20 @@ window.adminExists = "true";
 
 let pages = document.querySelectorAll(".page");
 
+//Notifier
+notify = (type, msg)=>{
+    const notifier = document.getElementById("notifier");
+    notifier.style.display = "flex";
+    notifier.className = type;
+    console.log("something");
+    console.log(msg);
+    document.getElementById("notifierMessage").textContent = msg;
+
+    setTimeout(()=>{
+        notifier.style.display = "none";
+    }, 7500);
+}
+
 //Page change function
 openPage = (page)=>{
     for(let i = 0; i < pages.length; i++){

ui/login/index.js

@@ -26,9 +26,9 @@ export default {
             body: JSON.stringify(body)
         });
         
-        if(!response.ok) return console.log(response.msg);
+        const data = await response.json();
+        if(!response.ok) return notify("error", data.msg);
 
-        const data = response.json();
         openPage("dashboard");
     }
 }