Initial UI in Vite+Preact

Signed-off-by: Hrishikesh Patil <[email protected]>

package.json

@@ -8,8 +8,12 @@
         "tauricon": "tauricon"
     },
     "dependencies": {
+        "@cred/neopop-web": "^1.0.0",
         "@tauri-apps/api": "^1.1.0",
-        "preact": "^10.11.2"
+        "axios": "^1.1.3",
+        "preact": "^10.11.2",
+        "querystring": "^0.2.1",
+        "sass": "^1.55.0"
     },
     "devDependencies": {
         "@preact/preset-vite": "^2.4.0",

src-tauri/Cargo.toml

@@ -17,7 +17,7 @@ tauri-build = { version = "1.1.1", features = [] }
 [dependencies]
 serde_json = "1.0"
 serde = { version = "1.0.144", features = ["derive"] }
-tauri = { version = "1.1.1", features = ["fs-create-dir", "fs-read-dir", "fs-read-file", "fs-remove-file", "fs-write-file", "notification", "notification-all", "path-all", "system-tray", "window-hide", "window-show", "window-start-dragging"] }
+tauri = { version = "1.1.1", features = ["fs-create-dir", "fs-read-dir", "fs-read-file", "fs-remove-file", "fs-write-file", "http-all", "notification", "notification-all", "path-all", "system-tray", "window-hide", "window-show", "window-start-dragging"] }
 timer = "0.2.0"
 chrono = "0.4.22"
 reqwest = { version = "0.11.11", features = ["blocking"] }

src-tauri/tauri.conf.json

@@ -98,13 +98,18 @@
         "startDragging": true,
         "unmaximize": false,
         "unminimize": false
+      },
+      "http": {
+        "all": true,
+        "request": true,
+        "scope": ["https://campnet.bits-goa.ac.in:8093/*"]
       }
     },
     "windows": [
       {
         "title": "Auto Campnet",
         "decorations": true,
-        "minHeight": 640,
+        "minHeight": 400,
         "minWidth": 360,
         "visible": false
       }

src/app.module.scss

@@ -0,0 +1,5 @@
+.mainContainer {
+  display: flex;
+  padding: 1rem;
+  align-items: center;
+}

src/app.tsx

@@ -1,32 +1,46 @@
-import { useState } from 'preact/hooks'
-import preactLogo from './assets/preact.svg'
-import './app.css'
+import styles from "./app.module.scss";
+import { emit, listen, Event } from "@tauri-apps/api/event";
+import { Login } from "./components/login/login";
+import { ElevatedCard, ToastContainer } from "@cred/neopop-web/lib/components";
+import { useEffect, useState } from "preact/hooks";
+import { DataBalance } from "./components/dataBalance/dataBalance";
+import { Credentials } from "./types";
 
 export function App() {
-  const [count, setCount] = useState(0)
+    const [username, setUsername] = useState("");
+    const [password, setPassword] = useState("");
 
-  return (
-    <>
-      <div>
-        <a href="https://vitejs.dev" target="_blank">
-          <img src="/vite.svg" class="logo" alt="Vite logo" />
-        </a>
-        <a href="https://preactjs.com" target="_blank">
-          <img src={preactLogo} class="logo preact" alt="Preact logo" />
-        </a>
-      </div>
-      <h1>Vite + Preact</h1>
-      <div class="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/app.tsx</code> and save to test HMR
-        </p>
-      </div>
-      <p class="read-the-docs">
-        Click on the Vite and Preact logos to learn more
-      </p>
-    </>
-  )
+    useEffect(() => {
+        listen("credentials", (creds: Event<Credentials>) => {
+            setUsername(creds.payload.username);
+            setPassword(creds.payload.password);
+        });
+    }, []);
+
+    document.addEventListener("visibilitychange", () => {
+        if (document.visibilityState === "hidden") emit("minimise");
+    });
+
+    return (
+        <div>
+            <ToastContainer />
+            <ElevatedCard
+                backgroundColor="#0D0D0D"
+                edgeColors={{
+                    bottom: "#161616",
+                    right: "#121212",
+                }}
+            >
+                <div class={styles.mainContainer}>
+                    <Login
+                        username={username}
+                        password={password}
+                        setUsername={setUsername}
+                        setPassword={setPassword}
+                    />
+                    <DataBalance username={username} password={password} />
+                </div>
+            </ElevatedCard>
+        </div>
+    );
 }

src/components/dataBalance/dataBalance.module.scss

@@ -0,0 +1,11 @@
+.dataContainer {
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    font-family: 'Times New Roman', Times, serif;
+    @media screen and (max-width: 640px) {
+        display: none;
+    }
+}

src/components/dataBalance/dataBalance.tsx

@@ -0,0 +1,124 @@
+import { ScoreMeter } from "@cred/neopop-web/lib/components";
+import { fetch, getClient, Body, ResponseType } from "@tauri-apps/api/http";
+import { useEffect, useState } from "preact/hooks";
+
+import styles from "./dataBalance.module.scss";
+
+export function DataBalance(props: { username: string; password: string }) {
+    const [datas, setDatas] = useState<Array<number>>([1, 0, 0, 1, 0]);
+    const [units, setUnits] = useState<Array<string>>(["", "", "", "", ""]);
+    const [balanceTimeout, setBalanceTimeOut] = useState<NodeJS.Timeout>();
+
+    useEffect(() => {
+        clearTimeout(balanceTimeout);
+        getBalance();
+    }, [props]);
+    console.log(datas);
+
+    function getBalance() {
+        let cookie = "";
+        let csrf = "";
+        getClient({ maxRedirections: 1 }).then((client) =>
+            client
+                .post(
+                    "https://campnet.bits-goa.ac.in:8093/userportal/Controller",
+                    Body.form({
+                        mode: "451",
+                        json: JSON.stringify({
+                            username: props.username,
+                            password: props.password,
+                            languageid: 1,
+                            browser: "Chrome_106",
+                        }),
+                    })
+                )
+                .then(
+                    (res) => (cookie = res.headers["set-cookie"].split(";")[0])
+                )
+                .then(() =>
+                    fetch(
+                        "https://campnet.bits-goa.ac.in:8093/userportal/webpages/myaccount/index.jsp",
+                        {
+                            method: "GET",
+                            headers: {
+                                Cookie: cookie,
+                            },
+                            responseType: ResponseType.Text,
+                        }
+                    )
+                )
+                .then((res) => {
+                    //@ts-ignore
+                    csrf = String(res.data).match(/k3n = '(.+)'/)[1];
+                })
+                .then(() =>
+                    client.get(
+                        "https://campnet.bits-goa.ac.in:8093/userportal/webpages/myaccount/AccountStatus.jsp",
+                        {
+                            headers: {
+                                Cookie: cookie,
+                                "X-CSRF-Token": csrf,
+                                Referer:
+                                    "https://campnet.bits-goa.ac.in:8093/userportal/webpages/myaccount/login.jsp",
+                            },
+                            query: {
+                                popup: `${0}`,
+                                t: `${Date.now()}`,
+                            },
+                            responseType: ResponseType.Text,
+                        }
+                    )
+                )
+                .then((res: any) => {
+                    const nodes = new DOMParser().parseFromString(
+                        res.data,
+                        "text/html"
+                    );
+                    const trimmedNodes = [
+                        ...nodes
+                            .querySelector("#content3")
+                            ?.querySelectorAll("td.tabletext")!!
+                    ].slice(-5);
+                    setDatas(
+                        trimmedNodes.map((iter: any) =>
+                            Number(
+                                (
+                                    iter.childNodes[0].nodeValue as string
+                                ).trim()
+                            )
+                        )
+                    );
+                    setUnits(
+                        trimmedNodes.map((iter: any) =>
+                            iter.children[0].id.replace(/Language./, "")
+                        )
+                    );
+                })
+                .then(() => setBalanceTimeOut(setTimeout(getBalance, 15000)))
+                .catch((err) => console.error(err))
+        );
+    }
+
+    return (
+        <div class={styles.dataContainer}>
+            <ScoreMeter
+                key={datas[4]}
+                reading={Math.round(datas[4])}
+                oldReading={0}
+                lowerLimit={0}
+                upperLimit={datas[0]}
+                scoreDesc={units[4]}
+                type={
+                    datas[4] < datas[0] / 5
+                        ? "poor"
+                        : datas[4] < datas[0] / 3
+                        ? "average"
+                        : "excellent"
+                }
+            />
+            <span>Data Limit: {`${datas[0]} ${units[0]}`}</span>
+            <span>Data Used: {`${datas[3]} ${units[3]}`}</span>
+            <span>Data Left: {`${datas[4]} ${units[4]}`}</span>
+        </div>
+    );
+}

src/components/login/login.module.scss

@@ -0,0 +1,17 @@
+.loginContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  max-width: 20rem;
+  padding: 1rem;
+}
+
+.loginContainer > * {
+  margin: 0.5rem 0;
+}
+
+.bitsLogo {
+  margin: 1rem 0;
+  height: 6.5rem;
+  width: 100%;
+}