Docker update for npm cache dir

Dockerfile

@@ -1,8 +1,7 @@
 FROM node:lts
 USER node
+WORKDIR /home/node/.npm
 WORKDIR /home/node/app
-RUN mkdir .npm
-RUN mkdir /home/node/.npm
 COPY . .
 RUN npm install
 RUN npm run build

public/assets/styles/tailwind.css

@@ -3501,11 +3501,6 @@ select {
   color: rgba(16, 185, 129, var(--tw-text-opacity));
 }
 
-.text-amber-100 {
-  --tw-text-opacity: 1;
-  color: rgba(254, 243, 199, var(--tw-text-opacity));
-}
-
 .text-orange-500 {
   --tw-text-opacity: 1;
   color: rgba(249, 115, 22, var(--tw-text-opacity));

src/App.svelte

@@ -1,27 +1,67 @@
 <!-- App.svelte -->
 <script>
+
     import { Router, Route } from "svelte-routing";
+    import { onMount } from 'svelte';
 
     // Admin Layout
     import Admin from "./layouts/Admin.svelte";
+
     // Auth Layout
     import Auth from "./layouts/Auth.svelte";
+    import { getCookie } from "components/Utils/CookieHandler.js";
 
     // No Layout Pages
     import Index from "./views/Index.svelte";
     import Landing from "./views/Landing.svelte";
     import Profile from "./views/Profile.svelte";
+    import Login from "views/auth/Login.svelte";
+
+    let isAuthenticated = false;
+
+    async function validate_me() {
+        const rawResponse = await fetch("https://wg.nnag.me/api2/wgCheckAuth", {
+            "credentials": "include",
+            "headers": {
+                "Authorization": "Token " + getCookie('Token'),
+                "User-Agent": "Mozilla/5.0 (X11; Linux x86_64; rv:106.0) Gecko/20100101 Firefox/106.0",
+                "Accept": "text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,*/*;q=0.8",
+                "Accept-Language": "en-US,en;q=0.5",
+                "Upgrade-Insecure-Requests": "1",
+                "Sec-Fetch-Dest": "document",
+                "Sec-Fetch-Mode": "navigate",
+                "Sec-Fetch-Site": "none",
+                "Sec-Fetch-User": "?1"
+            },
+            "method": "GET",
+            "mode": "cors"
+        });
+
+        const retVal = await rawResponse.json();
+        isAuthenticated = retVal.Auth;
+        console.log(retVal.Auth);
+    }
+
+    // validate_me().then( authVal.Auth => { isAuthenticated; });
+
+    // let isAuthenticated = validate_me();
 
     export let url = "";
+
+    validate_me();
+
 </script>
 
 <Router url="{url}">
   <!-- admin layout -->
+    {#if isAuthenticated == true}
         <Route path="admin/*admin" component="{Admin}" />
         <!-- auth layout -->
-  <Route path="auth/*auth" component="{Auth}" />
         <!-- no layout pages -->
         <Route path="landing" component="{Landing}" />
         <Route path="profile" component="{Profile}" />
         <Route path="/" component="{Admin}" />
+    {:else}
+        <Route path="*" component="{Auth}" />
+    {/if}
 </Router>

src/components/Cards/CardTableInf.svelte

@@ -1,9 +1,11 @@
 <script>
-    import axios from 'axios';
     import { onMount } from 'svelte';
+    import { getCookie } from "components/Utils/CookieHandler.js";
+
     let trColor;
     let footprint;
     let infTable = [];
+
     // onMount(async () => {
     //      const wgResponse = await axios.get('/api2/wgLogs')
     //          .then( response => {
@@ -13,10 +15,24 @@
     //      });
 
     async function getwgResponse() {
+        let csrftoken = getCookie('csrftoken');
+        let authToken = getCookie('Token');
+        console.log(csrftoken);
+        console.log(authToken);
         const wgResponse = await fetch(
-                    '/api2/wgLogs'
+                '/api2/wgLogs', {
-                );
+                    method: 'GET',
+                    credentials: 'include',
+                    mode: 'same-origin',
+                    headers: {
+                      'X-CSRFToken': csrftoken,
+                      'Authorization': "Token "+authToken,
+                      'Accept': 'application/json',
+                      'Content-Type': 'application/json',
 
+                        }
+                    }
+            );
         return await wgResponse.json();
     }
 
@@ -109,7 +125,7 @@
           <th
             class="px-6 align-middle border border-solid py-3 text-sm uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
             >
-            Created Time
+            Last Session Access Time
           </th>
           <th
             class="px-6 align-middle border border-solid py-3 text-sm uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"

src/components/Cards/CardWGControl.svelte

@@ -6,6 +6,8 @@
     import CardWGFilter     from "components/Cards/CardWGFilter.svelte";
     import CardWGControl    from "components/Cards/CardWGControl.svelte";
     
+    import { getCookie } from "components/Utils/CookieHandler.js";
+
     export let filter;
 
     let showModal = false;
@@ -16,21 +18,21 @@
     
     
     async function apply_sys_config() {
-        const rawResponse = await fetch('/api2/wgSysApply');
+        let csrftoken = getCookie('csrftoken');
-            console.log("Apply system config");
+        let authToken = getCookie('Token');
-            console.log(rawResponse);
+        const rawResponse = await fetch('/api2/wgSysApply',{
-    }
-
-    async function login_wg() {
-
-        const rawResponse = await fetch('/api2/wgLogin', {
                     method: 'GET',
+                    credentials: 'include',
+                    mode: 'same-origin',
                     headers: {
-              'Authorization': 'Basic ' + btoa('tipadmin:tiplab123'),
+                      'X-CSRFToken': csrftoken,
+                      'Authorization': "Token "+authToken,
                       'Accept': 'application/json',
-              'Content-Type': 'application/json'
+                      'Content-Type': 'application/json',
                     }
                 });
+            console.log("Apply system config");
+            console.log(rawResponse);
     }
 
     $: submitFilter != ""?
@@ -62,33 +64,34 @@
       console.log(filter);
     }
     
-    function getCookie(name) {
+    // function getCookie(name) {
-        let cookieValue = null;
+    //     let cookieValue = null;
-        if (document.cookie && document.cookie !== '') {
+    //     if (document.cookie && document.cookie !== '') {
-            const cookies = document.cookie.split(';');
+    //         const cookies = document.cookie.split(';');
-            for (let i = 0; i < cookies.length; i++) {
+    //         for (let i = 0; i < cookies.length; i++) {
-                const cookie = cookies[i].trim();
+    //             const cookie = cookies[i].trim();
-                // Does this cookie string begin with the name we want?
+    //             // Does this cookie string begin with the name we want?
-                if (cookie.substring(0, name.length + 1) === (name + '=')) {
+    //             if (cookie.substring(0, name.length + 1) === (name + '=')) {
-                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+    //                 cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
-                    break;
+    //                 break;
-                }
+    //             }
-            }
+    //         }
-        }
+    //     }
-        return cookieValue;
+    //     return cookieValue;
-    }
+    // }
     
     async function bulk_disable_req(state) {
-        // login_wg();
         
         let tmp_filter = filter
         filter = "";
         filter = tmp_filter;
 
         let csrftoken = getCookie('csrftoken');
+        let authToken = getCookie('Token');
 
         console.log("Bulk Disable -->");
         console.log(csrftoken);
+        console.log(authToken);
         console.log("-<>-"+checked_vals);
 
         const rawResponse = await fetch('/api2/wgEditState?id=bulk&state='+state, {
@@ -97,6 +100,7 @@
             mode: 'same-origin',
             headers: {
               'X-CSRFToken': csrftoken,
+              'Authorization': "Token "+authToken,
               'Accept': 'application/json',
               'Content-Type': 'application/json',
             },
@@ -104,10 +108,10 @@
         });
 
         // const content = await rawResponse.json();
+
+        // login_wg();
     }
 
-
-    login_wg();
 </script>
 
 <div
@@ -132,14 +136,14 @@
           Filter
         </button>
         <button
-          class="mt-3 bg-amber-500 text-amber-100 active:bg-red-500 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 ease-linear transition-all duration-150"
+          class="mt-3 bg-amber-500 text-white active:bg-red-500 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 ease-linear transition-all duration-150"
           type="button"
           on:click="{() => apply_sys_config()}"
         >
           Apply to System
         </button>
         <button
-          class="mt-3 bg-red-500 text-white active:bg-red-500 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 ease-linear transition-all duration-150"
+          class="mt-3 bg-red-600 text-white active:bg-red-500 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 ease-linear transition-all duration-150"
           type="button"
         >
           Backup

src/components/Cards/CardWGFilter.svelte

@@ -1,5 +1,7 @@
 <script>
 
+    import { getCookie } from "components/Utils/CookieHandler.js";
+
     export let submitFilter;
     let barWidth = 0;
 
@@ -12,17 +14,39 @@
             }
     }
     async function getwgOrgs() {
+        let csrftoken = getCookie('csrftoken');
+        let authToken = getCookie('Token');
             const wgResponse = await fetch(
-                    '/api2/wgClients?param=orgs'
+                '/api2/wgClients?param=orgs', {
-                );
+                    method: 'GET',
+                    credentials: 'include',
+                    mode: 'same-origin',
+                    headers: {
+                      'X-CSRFToken': csrftoken,
+                      'Authorization': "Token "+authToken,
+                      'Accept': 'application/json',
+                      'Content-Type': 'application/json',
+                    }
+                });
             progress_start();
             return await wgResponse.json();
         }
 
     async function getwgEmails() {
+        let csrftoken = getCookie('csrftoken');
+        let authToken = getCookie('Token');
             const wgResponse = await fetch(
-                    '/api2/wgClients?param=email'
+                '/api2/wgClients?param=email', {
-                );
+                    method: 'GET',
+                    credentials: 'include',
+                    mode: 'same-origin',
+                    headers: {
+                      'X-CSRFToken': csrftoken,
+                      'Authorization': "Token "+authToken,
+                      'Accept': 'application/json',
+                      'Content-Type': 'application/json',
+                    }
+                });
             progress_start();
             return await wgResponse.json();
         }

src/components/Cards/CardWGLineChart.svelte

@@ -0,0 +1,134 @@
+<script>
+  import { onMount } from "svelte";
+  // library that creates chart objects in page
+  import Chart from "chart.js";
+
+  // init chart
+  onMount(async () => {
+    var config = {
+      type: "line",
+      data: {
+        labels: [
+          "January",
+          "February",
+          "March",
+          "April",
+          "May",
+          "June",
+          "July",
+        ],
+        datasets: [
+          {
+            label: new Date().getFullYear(),
+            backgroundColor: "#4c51bf",
+            borderColor: "#4c51bf",
+            data: [65, 78, 66, 44, 56, 67, 75],
+            fill: false
+          },
+          {
+            label: new Date().getFullYear() - 1,
+            fill: false,
+            backgroundColor: "#fff",
+            borderColor: "#fff",
+            data: [40, 68, 86, 74, 56, 60, 87]
+          }
+        ]
+      },
+      options: {
+        maintainAspectRatio: false,
+        responsive: true,
+        title: {
+          display: false,
+          text: "Sales Charts",
+          fontColor: "white",
+        },
+        legend: {
+          labels: {
+            fontColor: "white",
+          },
+          align: "end",
+          position: "bottom",
+        },
+        tooltips: {
+          mode: "index",
+          intersect: false,
+        },
+        hover: {
+          mode: "nearest",
+          intersect: true,
+        },
+        scales: {
+          xAxes: [
+            {
+              ticks: {
+                fontColor: "rgba(255,255,255,.7)",
+              },
+              display: true,
+              scaleLabel: {
+                display: false,
+                labelString: "Month",
+                fontColor: "white",
+              },
+              gridLines: {
+                display: false,
+                borderDash: [2],
+                borderDashOffset: [2],
+                color: "rgba(33, 37, 41, 0.3)",
+                zeroLineColor: "rgba(0, 0, 0, 0)",
+                zeroLineBorderDash: [2],
+                zeroLineBorderDashOffset: [2],
+              },
+            },
+          ],
+          yAxes: [
+            {
+              ticks: {
+                fontColor: "rgba(255,255,255,.7)",
+              },
+              display: true,
+              scaleLabel: {
+                display: false,
+                labelString: "Value",
+                fontColor: "white",
+              },
+              gridLines: {
+                borderDash: [3],
+                borderDashOffset: [3],
+                drawBorder: false,
+                color: "rgba(255, 255, 255, 0.15)",
+                zeroLineColor: "rgba(33, 37, 41, 0)",
+                zeroLineBorderDash: [2],
+                zeroLineBorderDashOffset: [2],
+              },
+            },
+          ],
+        },
+      },
+    };
+    var ctx = document.getElementById("line-chart").getContext("2d");
+    window.myLine = new Chart(ctx, config);
+  });
+</script>
+
+<div
+  class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded bg-blueGray-700"
+>
+  <div class="rounded-t mb-0 px-4 py-3 bg-transparent">
+    <div class="flex flex-wrap items-center">
+      <div class="relative w-full max-w-full flex-grow flex-1">
+        <h6 class="uppercase text-blueGray-100 mb-1 text-xs font-semibold">
+          Overview
+        </h6>
+        <h2 class="text-white text-xl font-semibold">
+          Sales value
+        </h2>
+      </div>
+    </div>
+  </div>
+  <div class="p-4 flex-auto">
+    <!-- Chart -->
+    <div class="relative h-350-px">
+      <canvas id="line-chart"></canvas>
+    </div>
+  </div>
+</div>

src/components/Cards/CardWGProfiles.svelte

@@ -2,6 +2,10 @@
     // import axios from 'axios';
     // import {onMount} from 'svelte';
     import TableDropdown from "components/Dropdowns/TableDropdown.svelte";
+
+    import { getCookie } from "components/Utils/CookieHandler.js";
+
+
     export let filter_action;
     export let checked_vals;
     let footprint;
@@ -12,9 +16,41 @@
     export const wgResponse = null;
     export let filter;
 
+    // function getCookie(name) {
+    //     let cookieValue = null;
+    //     if (document.cookie && document.cookie !== '') {
+    //         const cookies = document.cookie.split(';');
+    //         for (let i = 0; i < cookies.length; i++) {
+    //             const cookie = cookies[i].trim();
+    //             // Does this cookie string begin with the name we want?
+    //             if (cookie.substring(0, name.length + 1) === (name + '=')) {
+    //                 cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+    //                 break;
+    //             }
+    //         }
+    //     }
+    //     return cookieValue;
+    // }
+
     async function getwgResponse(o_filter) {
+        let csrftoken = getCookie('csrftoken');
+        let authToken = getCookie('Token');
+        console.log(csrftoken);
+        console.log(authToken);
+        console.log("-<>-"+checked_vals);
             const wgResponse = await fetch(
-                    '/api2/wgClients?filter='+o_filter
+                    '/api2/wgClients?filter='+o_filter, {
+                        method: 'GET',
+                        credentials: 'include',
+                        mode: 'same-origin',
+                        headers: {
+                          'X-CSRFToken': csrftoken,
+                          'Authorization': "Token "+authToken,
+                          'Accept': 'application/json',
+                          'Content-Type': 'application/json',
+
+                            }
+                        }
                 );
             return await wgResponse.json();
         }

src/components/Headers/HeaderStats.svelte

@@ -3,16 +3,55 @@
     import axios from 'axios';
     import { onMount } from 'svelte';
     import CardStats from "components/Cards/CardStats.svelte";
+    import { getCookie } from "components/Utils/CookieHandler.js";
+
 
     let infTable = [];
+    let csrftoken = getCookie('csrftoken');
+    let authToken = getCookie('Token');
+
     onMount(async () => {
-            await axios.get('/api2/wgClients?param=stats')
+            let rawResponse = await fetch(
-                .then( response => {
+            '/api2/wgClients?param=stats', {
-                    infTable = response.data
+                method: 'GET',
+                credentials: 'include',
+                mode: 'same-origin',
+                headers: {
+                  'X-CSRFToken': csrftoken,
+                  'Authorization': "Token "+authToken,
+                  'Accept': 'application/json',
+                  'Content-Type': 'application/json',
+
+                    }
                 });
-            console.log(infTable);
+            let rawData = await rawResponse.json();
+            console.log(rawData);
+            infTable = rawData;
              });
 
+    // infTable = fetch_stats();
+
+    // onMount(async () => {
+    //         await axios.get(
+    //                 '/api2/wgClients?param=stats', {
+    //                     method: 'GET',
+    //                     credentials: 'include',
+    //                     mode: 'same-origin',
+    //                     headers: {
+    //                       'X-CSRFToken': csrftoken,
+    //                       'Authorization': "Token "+authToken,
+    //                       'Accept': 'application/json',
+    //                       'Content-Type': 'application/json',
+
+    //                         }
+    //                     }
+    //             )
+    //             .then( response => {
+    //                 infTable = response.data
+    //                 });
+    //         console.log(infTable);
+    //         });
+
 </script>
 
 <!-- Header -->
@@ -23,7 +62,7 @@
         <div class="w-full lg:w-6/12 xl:w-3/12 px-4">
           <CardStats
             statSubtitle="Connected Now"
-            statTitle="{ infTable.connectedtotal}"
+            statTitle="{ infTable.connectedtotal }"
             statArrow="down"
             statPercent="3.48"
             statPercentColor="text-red-500"

src/components/Navbars/AdminNavbar.svelte

@@ -1,6 +1,13 @@
 <script>
   // core components
   import UserDropdown from "components/Dropdowns/UserDropdown.svelte";
+
+  export let collapseshow;
+
+  function toggleCollapseShow(classes) {
+    collapseshow = classes;
+  }
+
 </script>
 
 <!-- Navbar -->
@@ -11,12 +18,13 @@
     class="w-full mx-autp items-center flex justify-between md:flex-nowrap flex-wrap md:px-10 px-4"
   >
     <!-- Brand -->
-    <a
+    <button
-      class="text-white text-sm uppercase hidden lg:inline-block font-semibold"
+      class="md:block text-left md:pb-2 text-white mr-0 inline-block whitespace-nowrap text-sm uppercase font-bold p-4 px-0"
-      href="#pablo" on:click={(e) => e.preventDefault()}
+      on:click={() => toggleCollapseShow('hidden')}
+      type="button"
     >
-      Dashboard
+      <i class="fas fa-bars"></i>
-    </a>
+    </button>
     <!-- Form -->
     <form
       class="md:flex hidden flex-row flex-wrap items-center lg:ml-auto mr-3"

src/components/Sidebar/Sidebar.svelte

@@ -6,11 +6,13 @@
     import UserDropdown from "components/Dropdowns/UserDropdown.svelte";
 
     let collapseShow = "hidden";
+    export let collapseshow;
 
     function toggleCollapseShow(classes) {
-    collapseShow = classes;
+      collapseshow = classes;
     }
 
+
     export let location;
 </script>
 
@@ -18,7 +20,7 @@
   class="md:left-0 md:block md:fixed md:top-0 md:bottom-0 md:overflow-y-auto md:flex-row md:flex-nowrap md:overflow-hidden shadow-xl bg-white flex flex-wrap items-center justify-between relative md:w-64 z-10 py-4 px-6"
 >
   <div
-    class="md:flex-col md:items-stretch md:min-h-full md:flex-nowrap px-0 flex flex-wrap items-center justify-between w-full mx-auto"
+          class="md:flex-col md:items-stretch md:min-h-full md:flex-nowrap px-0 flex flex-wrap items-center justify-between w-full mx-auto {collapseshow} "
   >
     <!-- Toggler -->
     <button
@@ -221,139 +223,6 @@
         </li>
       </ul>
 
-      <!-- Divider -->
-      <hr class="my-4 md:min-w-full" />
-      <!-- Heading -->
-      <h6
-        class="md:min-w-full text-blueGray-500 text-xs uppercase font-bold block pt-1 pb-4 no-underline"
-      >
-        No Layout Pages
-      </h6>
-      <!-- Navigation -->
-
-      <ul class="md:flex-col md:min-w-full flex flex-col list-none md:mb-4">
-        <li class="items-center">
-          <a
-            use:link
-            class="text-blueGray-700 hover:text-blueGray-500 text-xs uppercase py-3 font-bold block"
-            href="/landing"
-          >
-            <i class="fas fa-newspaper text-blueGray-300 mr-2 text-sm"></i>
-            Landing Page
-          </a>
-        </li>
-
-        <li class="items-center">
-          <a
-            use:link
-            class="text-blueGray-700 hover:text-blueGray-500 text-xs uppercase py-3 font-bold block"
-            href="/profile"
-          >
-            <i class="fas fa-user-circle text-blueGray-300 mr-2 text-sm"></i>
-            Profile Page
-          </a>
-        </li>
-      </ul>
-
-      <!-- Divider -->
-      <hr class="my-4 md:min-w-full" />
-      <!-- Heading -->
-      <h6
-        class="md:min-w-full text-blueGray-500 text-xs uppercase font-bold block pt-1 pb-4 no-underline"
-      >
-        Documentation
-      </h6>
-      <!-- Navigation -->
-      <ul class="md:flex-col md:min-w-full flex flex-col list-none md:mb-4">
-        <li class="inline-flex">
-          <a
-            href="https://www.creative-tim.com/learning-lab/tailwind/svelte/colors/notus"
-            target="_blank"
-            class="text-blueGray-700 hover:text-blueGray-500 text-sm block mb-4 no-underline font-semibold"
-          >
-            <i class="fas fa-paint-brush mr-2 text-blueGray-300 text-base"></i>
-            Styles
-          </a>
-        </li>
-
-        <li class="inline-flex">
-          <a
-            href="https://www.creative-tim.com/learning-lab/tailwind/svelte/alerts/notus"
-            target="_blank"
-            class="text-blueGray-700 hover:text-blueGray-500 text-sm block mb-4 no-underline font-semibold"
-          >
-            <i class="fab fa-css3-alt mr-2 text-blueGray-300 text-base"></i>
-            CSS Components
-          </a>
-        </li>
-
-        <li class="inline-flex">
-          <a
-            href="https://www.creative-tim.com/learning-lab/tailwind/angular/overview/notus"
-            target="_blank"
-            class="text-blueGray-700 hover:text-blueGray-500 text-sm block mb-4 no-underline font-semibold"
-          >
-            <i class="fab fa-angular mr-2 text-blueGray-300 text-base"></i>
-            Angular
-          </a>
-        </li>
-
-        <li class="inline-flex">
-          <a
-            href="https://www.creative-tim.com/learning-lab/tailwind/js/overview/notus"
-            target="_blank"
-            class="text-blueGray-700 hover:text-blueGray-500 text-sm block mb-4 no-underline font-semibold"
-          >
-            <i class="fab fa-js-square mr-2 text-blueGray-300 text-base"></i>
-            Javascript
-          </a>
-        </li>
-
-        <li class="inline-flex">
-          <a
-            href="https://www.creative-tim.com/learning-lab/tailwind/nextjs/overview/notus"
-            target="_blank"
-            class="text-blueGray-700 hover:text-blueGray-500 text-sm block mb-4 no-underline font-semibold"
-          >
-            <i class="fab fa-react mr-2 text-blueGray-300 text-base"></i>
-            NextJS
-          </a>
-        </li>
-
-        <li class="inline-flex">
-          <a
-            href="https://www.creative-tim.com/learning-lab/tailwind/react/overview/notus"
-            target="_blank"
-            class="text-blueGray-700 hover:text-blueGray-500 text-sm block mb-4 no-underline font-semibold"
-          >
-            <i class="fab fa-react mr-2 text-blueGray-300 text-base"></i>
-            React
-          </a>
-        </li>
-
-        <li class="inline-flex">
-          <a
-            href="https://www.creative-tim.com/learning-lab/tailwind/svelte/overview/notus"
-            target="_blank"
-            class="text-blueGray-700 hover:text-blueGray-500 text-sm block mb-4 no-underline font-semibold"
-          >
-            <i class="fas fa-link mr-2 text-blueGray-300 text-base"></i>
-            Svelte
-          </a>
-        </li>
-
-        <li class="inline-flex">
-          <a
-            href="https://www.creative-tim.com/learning-lab/tailwind/vue/overview/notus"
-            target="_blank"
-            class="text-blueGray-700 hover:text-blueGray-500 text-sm block mb-4 no-underline font-semibold"
-          >
-            <i class="fab fa-vuejs mr-2 text-blueGray-300 text-base"></i>
-            VueJS
-          </a>
-        </li>
-
-      </ul>
     </div>
   </div>
 </nav>

src/components/Utils/CookieHandler.js

@@ -0,0 +1,16 @@
+
+export function getCookie(name) {
+    let cookieValue = null;
+    if (document.cookie && document.cookie !== '') {
+        const cookies = document.cookie.split(';');
+        for (let i = 0; i < cookies.length; i++) {
+            const cookie = cookies[i].trim();
+            // Does this cookie string begin with the name we want?
+            if (cookie.substring(0, name.length + 1) === (name + '=')) {
+                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+                break;
+            }
+        }
+    }
+    return cookieValue;
+}

src/layouts/Admin.svelte

@@ -18,13 +18,14 @@
   import Maps from "views/admin/Maps.svelte";
 
   export let location;
+  let collapseshow = '';
   export let admin = "";
 </script>
 
 <div>
-  <Sidebar location={location}/>
+    <Sidebar bind:collapseshow={collapseshow} location={location}/>
     <div class="relative md:ml-64 bg-blueGray-100">
-    <AdminNavbar />
+      <AdminNavbar bind:collapseshow={collapseshow} />
       <GlobalHeader />
       <div class="px-4 md:px-10 mx-auto w-full -m-24">
         <Router url="admin">

src/layouts/Auth.svelte

@@ -22,10 +22,7 @@
         class="absolute top-0 w-full h-full bg-blueGray-800 bg-no-repeat bg-full"
         style="background-image: url({registerBg2});"
       ></div>
-      <Router url="auth">
+      <Login />
-        <Route path="login" component="{Login}" />
-        <Route path="register" component="{Register}" />
-      </Router>
       <FooterSmall absolute="true" />
     </section>
   </main>

src/views/admin/Dashboard.svelte

@@ -1,6 +1,7 @@
 <script>
   // core components
   import CardLineChart from "components/Cards/CardLineChart.svelte";
+  import CardWGLineChart from "components/Cards/CardWGLineChart.svelte";
   import CardBarChart from "components/Cards/CardBarChart.svelte";
   import CardPageVisits from "components/Cards/CardPageVisits.svelte";
   import CardSocialTraffic from "components/Cards/CardSocialTraffic.svelte";
@@ -11,6 +12,11 @@
 
 
 <div>
+  <div class="flex flex-wrap">
+    <div class="w-full px-4">
+      <CardLineChart />
+    </div>
+  </div>
   <div class="flex flex-wrap">
     <div class="w-full xl:w-8/12 mb-12 xl:mb-0 px-4">
       <CardLineChart />

src/views/auth/Login.svelte

@@ -5,6 +5,77 @@
     const github = "../assets/img/github.svg";
     const google = "../assets/img/google.svg";
     export let location;
+
+    function login_submit(e) {
+        const formData =  new FormData(e.target);
+        console.log("Submitting credentials");
+        console.log(formData);
+
+        const data = {};
+
+        for (let field of formData) {
+            const [key, value] = field;
+            data[key] = value
+        }
+
+        console.log("------------");
+        console.log(data['grid-email']);
+        console.log(data['grid-password']);
+
+        login_wg(data['grid-email'],data['grid-password']);
+
+    }
+
+    function getCookie(name) {
+        let cookieValue = null;
+        if (document.cookie && document.cookie !== '') {
+            const cookies = document.cookie.split(';');
+            for (let i = 0; i < cookies.length; i++) {
+                const cookie = cookies[i].trim();
+                // Does this cookie string begin with the name we want?
+                if (cookie.substring(0, name.length + 1) === (name + '=')) {
+                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+                    break;
+                }
+            }
+        }
+        return cookieValue;
+    }
+
+    async function login_wg(u_name, u_pass) {
+
+        // const rawResponse = await fetch('/api2/wgLogin', {
+        //     method: 'GET',
+        //     headers: {
+        //       'Authorization': 'Basic ' + btoa(u_name+':'+u_pass),
+        //       'Accept': 'application/json',
+        //       'Content-Type': 'application/json'
+        //     }
+        // });
+
+        const rawResponse = await fetch("https://wg.nnag.me/api2/wgLogin?username="+u_name+"&"+"password="+u_pass, {
+            "credentials": "include",
+            "headers": {
+                "Authorization": "Basic " + btoa(u_name+':'+u_pass),
+                "User-Agent": "Mozilla/5.0 (X11; Linux x86_64; rv:106.0) Gecko/20100101 Firefox/106.0",
+                "Accept": "text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,*/*;q=0.8",
+                "Accept-Language": "en-US,en;q=0.5",
+                "Upgrade-Insecure-Requests": "1",
+                "Sec-Fetch-Dest": "document",
+                "Sec-Fetch-Mode": "navigate",
+                "Sec-Fetch-Site": "none",
+                "Sec-Fetch-User": "?1"
+            },
+            "method": "GET",
+            "mode": "cors"
+        });
+
+        console.log(document.cookie);
+
+        window.location.reload(true);
+
+    }
+
 </script>
 
 <div class="container mx-auto px-4 h-full">
@@ -16,42 +87,27 @@
         <div class="rounded-t mb-0 px-6 py-6">
           <div class="text-center mb-3">
             <h6 class="text-blueGray-500 text-sm font-bold">
-              Sign in with
+              TIP Community Lab : Facility Dashboard
             </h6>
           </div>
-          <div class="btn-wrapper text-center">
-            <button
-              class="bg-white active:bg-blueGray-50 text-blueGray-700 font-normal px-4 py-2 rounded outline-none focus:outline-none mr-2 mb-1 uppercase shadow hover:shadow-md inline-flex items-center font-bold text-xs ease-linear transition-all duration-150"
-              type="button"
-            >
-              <img alt="..." class="w-5 mr-1" src="{github}" />
-              Github
-            </button>
-            <button
-              class="bg-white active:bg-blueGray-50 text-blueGray-700 font-normal px-4 py-2 rounded outline-none focus:outline-none mr-1 mb-1 uppercase shadow hover:shadow-md inline-flex items-center font-bold text-xs ease-linear transition-all duration-150"
-              type="button"
-            >
-              <img alt="..." class="w-5 mr-1" src="{google}" />
-              Google
-            </button>
-          </div>
           <hr class="mt-6 border-b-1 border-blueGray-300" />
         </div>
         <div class="flex-auto px-4 lg:px-10 py-10 pt-0">
           <div class="text-blueGray-400 text-center mb-3 font-bold">
             <small>Or sign in with credentials</small>
           </div>
-          <form>
+          <form on:submit|preventDefault={login_submit}>
             <div class="relative w-full mb-3">
               <label
                 class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
                 for="grid-email"
               >
-                Email
+                Email/Username
               </label>
               <input
                 id="grid-email"
-                type="email"
+                name="grid-email"
+                type="username"
                 class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
                 placeholder="Email"
               />
@@ -66,6 +122,7 @@
               </label>
               <input
                 id="grid-password"
+                name="grid-password"
                 type="password"
                 class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
                 placeholder="Password"
@@ -87,7 +144,7 @@
             <div class="text-center mt-6">
               <button
                 class="bg-blueGray-800 text-white active:bg-blueGray-600 text-sm font-bold uppercase px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 w-full ease-linear transition-all duration-150"
-                type="button"
+                type="submit"
               >
                 Sign In
               </button>