open-vtop 1.0.3 → 1.0.5

package/README.md

@@ -2,6 +2,16 @@
 
 An open-source VTOP client with automatic session management.
 
+## Todo
+1) save usn and password for future use
+2) grab regno from the responses it self
+3) attendance
+4) timetable
+5) cgpa
+6) course-page
+7) callendar
+8) many more...
+9) qol like automatic browser open, better logging, save usn password for faster logins, logout
 ## Features
 
 - 🚀 **Automatic Session Initialization**: VTOP session cookies and CSRF tokens are automatically established when the server starts

package/dist/captcha-solver.js

@@ -1,8 +1,9 @@
 /**
  * CAPTCHA Solver for VTOP
- * Uses canvas for image processing and bitmap matching / neural network for character recognition
+ * Uses pure JS for image processing and bitmap matching / neural network for character recognition
  */
-import { createCanvas, loadImage } from "canvas";
+import * as jpeg from "jpeg-js";
+import { PNG } from "pngjs";
 import { bitmaps } from "./bitmaps.js";
 // ============ Bitmap-based solver (original method) ============
 function captchaParse(imgarr) {
@@ -134,6 +135,53 @@ function maxSoft(a) {
     }
     return n;
 }
+async function decodeImage(dataUri) {
+    const parts = extractDataUriParts(dataUri);
+    if (!parts)
+        throw new Error("Invalid Data URI");
+    const buffer = Buffer.from(parts.base64, "base64");
+    if (parts.mimeType === "image/png") {
+        return new Promise((resolve, reject) => {
+            const png = new PNG();
+            png.parse(buffer, (err, data) => {
+                if (err)
+                    reject(err);
+                else
+                    resolve({
+                        width: data.width,
+                        height: data.height,
+                        data: data.data,
+                    });
+            });
+        });
+    }
+    else if (parts.mimeType === "image/jpeg") {
+        const decoded = jpeg.decode(buffer, { useTArray: true });
+        return {
+            width: decoded.width,
+            height: decoded.height,
+            data: decoded.data,
+        };
+    }
+    throw new Error("Unsupported image type: " + parts.mimeType);
+}
+function resizeImage(src, targetW, targetH) {
+    // Nearest neighbor resize
+    const target = new Uint8ClampedArray(targetW * targetH * 4);
+    for (let y = 0; y < targetH; y++) {
+        for (let x = 0; x < targetW; x++) {
+            const srcX = Math.floor((x * src.width) / targetW);
+            const srcY = Math.floor((y * src.height) / targetH);
+            const srcIdx = (srcY * src.width + srcX) * 4;
+            const targetIdx = (y * targetW + x) * 4;
+            target[targetIdx] = src.data[srcIdx];
+            target[targetIdx + 1] = src.data[srcIdx + 1];
+            target[targetIdx + 2] = src.data[srcIdx + 2];
+            target[targetIdx + 3] = src.data[srcIdx + 3];
+        }
+    }
+    return target;
+}
 /**
  * Solve a CAPTCHA image using the saturation-based neural network method
  * @param imgDataUri - Base64 data URI of the captcha image
@@ -147,12 +195,15 @@ export async function solve(imgDataUri) {
         return solveBitmap(imgDataUri);
     }
     const labelTxt = "ABCDEFGHJKLMNPQRSTUVWXYZ23456789";
-    const canvas = createCanvas(200, 40);
-    const ctx = canvas.getContext("2d");
-    const image = await loadImage(imgDataUri);
-    ctx.drawImage(image, 0, 0, 200, 40);
-    const pd = ctx.getImageData(0, 0, 200, 40);
-    let bls = saturation(pd.data);
+    const img = await decodeImage(imgDataUri);
+    // Target size: 200x40
+    let dataToUse = img.data;
+    if (img.width !== 200 || img.height !== 40) {
+        dataToUse = resizeImage(img, 200, 40);
+    }
+    // dataToUse is now RGBA array of 200x40 image
+    // saturation expects Uint8ClampedArray or similar
+    let bls = saturation(dataToUse);
     let out = "";
     for (let i = 0; i < 6; i++) {
         let block = preImg(bls[i]);
@@ -171,16 +222,17 @@ export async function solve(imgDataUri) {
  * @returns Solved captcha string
  */
 export async function solveBitmap(imgDataUri) {
-    const canvas = createCanvas(180, 45);
-    const ctx = canvas.getContext("2d");
-    const image = await loadImage(imgDataUri);
-    ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
-    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
-    const data = imageData.data;
+    const img = await decodeImage(imgDataUri);
+    // For bitmap solver, we need 180x45
+    // Original code: canvas 180x45, drawImage(image, 0, 0, 180, 45)
+    // So we definitely need to resize
+    const resizedData = resizeImage(img, 180, 45);
     // Convert to grayscale 2D array
     const arr = [];
-    for (let i = 0; i < data.length; i += 4) {
-        const gval = data[i] * 0.299 + data[i + 1] * 0.587 + data[i + 2] * 0.114;
+    for (let i = 0; i < resizedData.length; i += 4) {
+        const gval = resizedData[i] * 0.299 +
+            resizedData[i + 1] * 0.587 +
+            resizedData[i + 2] * 0.114;
         arr.push(Math.round(gval));
     }
     const newArr = [];

package/dist/index.js

@@ -3,124 +3,20 @@ import { jsx as _jsx, jsxs as _jsxs } from "hono/jsx/jsx-runtime";
 import { serve } from "@hono/node-server";
 import { Hono } from "hono";
 import { serveStatic } from "@hono/node-server/serve-static";
-import { Home } from "./views/Home.js";
-import { SuccessMessage } from "./views/partials.js";
+import { Login } from "./views/Login.js";
+import { Dashboard } from "./views/Dashboard.js";
 import { sessionManager } from "./session-manager.js";
-import { readFile } from "fs/promises";
-import { dirname, join } from "path";
-import { fileURLToPath } from "url";
+import { createRequire } from "module";
 const app = new Hono();
-const __dirname = dirname(fileURLToPath(import.meta.url));
-// Serve htmx from node_modules - resolve absolute path
-const htmxPath = join(__dirname, "../node_modules/htmx.org/dist/htmx.min.js");
-app.get("/static/htmx.js", async (c) => {
-    try {
-        const content = await readFile(htmxPath);
-        return c.body(content, 200, {
-            "Content-Type": "application/javascript",
-        });
-    }
-    catch (e) {
-        console.error("Failed to serve HTMX:", e);
-        return c.text("Failed to load HTMX", 500);
-    }
-});
-// Main page
+const require = createRequire(import.meta.url);
+const htmxPath = require.resolve("htmx.org/dist/htmx.min.js");
+app.use("/static/htmx.js", serveStatic({ path: htmxPath }));
 app.get("/", (c) => {
-    return c.html(_jsx(Home, {}));
-});
-// API Endpoints
-app.get("/api/hello", (c) => {
-    return c.html(_jsx(SuccessMessage, { message: "Hello from HTMX!" }));
-});
-// Session status endpoint
-app.get("/api/session/status", (c) => {
-    const state = sessionManager.getState();
-    const status = state.initialized ? "✅ Initialized" : "❌ Not Initialized";
-    const lastInit = state.lastInitialized
-        ? new Date(state.lastInitialized).toLocaleString()
-        : "Never";
-    // Redact sensitive values for security
-    const hasCsrf = !!state.csrf;
-    const hasJsession = state.cookies.has("JSESSIONID");
-    const hasServerId = state.cookies.has("SERVERID");
-    return c.html(_jsxs("div", { style: "font-family: monospace; padding: 1rem; background: #f5f5f5; border-radius: 4px; color: #000;", children: [_jsxs("div", { style: "margin-bottom: 0.5rem;", children: [_jsx("strong", { children: "Status:" }), " ", status] }), _jsxs("div", { style: "margin-bottom: 0.5rem;", children: [_jsx("strong", { children: "Last Initialized:" }), " ", lastInit] }), _jsxs("div", { style: "margin-bottom: 0.5rem;", children: [_jsx("strong", { children: "Total Cookies:" }), " ", state.cookies.size] }), _jsxs("div", { style: "margin-bottom: 0.5rem;", children: [_jsx("strong", { children: "CSRF Token:" }), " ", hasCsrf ? "✅ Present" : "❌ Missing"] }), _jsxs("div", { style: "margin-bottom: 0.5rem;", children: [_jsx("strong", { children: "JSESSIONID:" }), " ", hasJsession ? "✅ Present" : "❌ Missing"] }), _jsxs("div", { children: [_jsx("strong", { children: "SERVERID:" }), " ", hasServerId ? "✅ Present" : "❌ Missing"] })] }));
-});
-// Manual session refresh endpoint
-app.post("/api/session/refresh", async (c) => {
-    try {
-        await sessionManager.refresh();
-        return c.json({ success: true, message: "Session refreshed successfully" });
-    }
-    catch (error) {
-        return c.json({ success: false, error: String(error) }, 500);
-    }
-});
-// Login endpoint
-app.post("/api/login", async (c) => {
-    try {
-        const body = await c.req.json();
-        const { username, password, regNo } = body;
-        if (!username || !password || !regNo) {
-            return c.json({
-                success: false,
-                error: "Username, password, and registration number are required",
-            }, 400);
-        }
-        console.log(`🔐 Login requested for user: ${username} (${regNo})`);
-        const success = await sessionManager.login(username, password, regNo);
-        if (success) {
-            return c.json({
-                success: true,
-                message: "Login successful",
-                username: sessionManager.getUsername(),
-            });
-        }
-        else {
-            return c.json({
-                success: false,
-                error: "Login failed - check credentials or try again",
-            }, 401);
-        }
-    }
-    catch (error) {
-        console.error("Login error:", error);
-        return c.json({ success: false, error: String(error) }, 500);
-    }
-});
-// Login status endpoint
-app.get("/api/login/status", (c) => {
-    return c.json({
-        loggedIn: sessionManager.isLoggedIn(),
-        username: sessionManager.getUsername(),
-    });
-});
-// Login status HTML endpoint
-app.get("/api/login/status/html", (c) => {
-    const isLoggedIn = sessionManager.isLoggedIn();
-    const username = sessionManager.getUsername();
-    if (isLoggedIn) {
-        return c.html(_jsxs("div", { style: "padding: 1rem; background: #d4edda; border: 1px solid #c3e6cb; border-radius: 4px; color: #155724;", children: [_jsx("strong", { children: "\u2705 Logged In" }), _jsxs("div", { style: "margin-top: 0.5rem;", children: ["Username: ", _jsx("code", { children: username })] })] }));
-    }
-    else {
-        return c.html(_jsxs("div", { style: "padding: 1rem; background: #f8d7da; border: 1px solid #f5c6cb; border-radius: 4px; color: #721c24;", children: [_jsx("strong", { children: "\u274C Not Logged In" }), _jsx("div", { style: "margin-top: 0.5rem;", children: "Please use the login form above." })] }));
+    if (sessionManager.isLoggedIn()) {
+        return c.html(_jsx(Dashboard, { username: sessionManager.getUsername() }));
     }
+    return c.html(_jsx(Login, {}));
 });
-// Debug logs storage
-const debugLogs = [];
-function addDebugLog(level, message) {
-    // Only log if specifically enabled
-    if (process.env.DEBUG_LOGS === "true") {
-        const timestamp = new Date().toLocaleTimeString();
-        debugLogs.push({ timestamp, level, message });
-        // Keep only last 100 logs
-        if (debugLogs.length > 100) {
-            debugLogs.shift();
-        }
-        console.log(`[${level}] ${message}`);
-    }
-}
-// Form-based login endpoint (for HTMX)
 app.post("/api/login/form", async (c) => {
     try {
         const formData = await c.req.parseBody();
@@ -128,103 +24,42 @@ app.post("/api/login/form", async (c) => {
         const password = formData["password"];
         const regNo = formData["regNo"];
         if (!username || !password || !regNo) {
-            addDebugLog("ERROR", "Login attempt with missing credentials");
-            return c.html(_jsxs("div", { style: "padding: 1rem; background: #f8d7da; border: 1px solid #f5c6cb; border-radius: 4px; color: #721c24;", children: [_jsx("strong", { children: "\u274C Error:" }), " Username, password, and registration number are required."] }));
+            return c.html(_jsx("div", { id: "error-message", class: "mt-4 p-3 bg-red-500/10 border border-red-500/50 rounded-md text-red-500 text-sm", children: "Missing credentials. Please try again." }));
         }
-        // Don't log credentials even in debug
-        addDebugLog("INFO", "Login requested");
-        // Show that login is in progress
-        const startTime = Date.now();
-        addDebugLog("INFO", "Starting login process - polling for text CAPTCHA...");
         const success = await sessionManager.login(username, password, regNo);
-        const duration = ((Date.now() - startTime) / 1000).toFixed(1);
         if (success) {
-            addDebugLog("SUCCESS", `Login successful (took ${duration}s)`);
-            return c.html(_jsxs("div", { style: "padding: 1rem; background: #d4edda; border: 1px solid #c3e6cb; border-radius: 4px; color: #155724;", children: [_jsx("strong", { children: "\uD83C\uDF89 Login Successful!" }), _jsxs("div", { style: "margin-top: 0.5rem;", children: ["Welcome, ", _jsx("strong", { children: username })] }), _jsxs("div", { style: "margin-top: 0.25rem; font-size: 0.85rem;", children: ["Login took ", duration, " seconds"] })] }));
+            return c.html(_jsx(Dashboard, { username: username }));
         }
         else {
-            addDebugLog("ERROR", `Login failed (took ${duration}s)`);
-            return c.html(_jsxs("div", { style: "padding: 1rem; background: #f8d7da; border: 1px solid #f5c6cb; border-radius: 4px; color: #721c24;", children: [_jsx("strong", { children: "\u274C Login Failed" }), _jsx("div", { style: "margin-top: 0.5rem;", children: "Check your credentials or try again. VTOP might be showing reCAPTCHA." }), _jsxs("div", { style: "margin-top: 0.25rem; font-size: 0.85rem;", children: ["Attempt took ", duration, " seconds"] })] }));
+            return c.html(_jsx("div", { id: "error-message", class: "mt-4 p-3 bg-red-500/10 border border-red-500/50 rounded-md text-red-500 text-sm", children: "Login failed. Invalid credentials or captcha error." }));
         }
     }
     catch (error) {
-        addDebugLog("ERROR", `Login exception: ${String(error)}`);
-        return c.html(_jsxs("div", { style: "padding: 1rem; background: #f8d7da; border: 1px solid #f5c6cb; border-radius: 4px; color: #721c24;", children: [_jsx("strong", { children: "\u274C Error:" }), " ", String(error)] }));
-    }
-});
-// Debug logs endpoint
-app.get("/api/debug/logs", (c) => {
-    if (process.env.DEBUG_LOGS !== "true") {
-        return c.html(_jsx("div", { style: "color: #888;", children: "Debug logs are disabled. Set DEBUG_LOGS=true to enable." }));
-    }
-    if (debugLogs.length === 0) {
-        return c.html(_jsx("div", { style: "color: #888;", children: "No logs yet. Try logging in to see debug output." }));
-    }
-    return c.html(_jsx("div", { children: debugLogs.map((log, i) => (_jsxs("div", { style: {
-                color: log.level === "ERROR"
-                    ? "#ff6b6b"
-                    : log.level === "SUCCESS"
-                        ? "#51cf66"
-                        : log.level === "WARN"
-                            ? "#fcc419"
-                            : "#0f0",
-                marginBottom: "0.25rem",
-            }, children: [_jsxs("span", { style: "color: #888;", children: ["[", log.timestamp, "]"] }), " ", _jsxs("span", { style: "font-weight: bold;", children: ["[", log.level, "]"] }), " ", log.message] }, i))) }));
-});
-// Clear debug logs endpoint
-app.post("/api/debug/logs/clear", (c) => {
-    debugLogs.length = 0;
-    return c.html(_jsx("div", { style: "color: #888;", children: "Logs cleared." }));
-});
-// Assignments JSON endpoint
-app.get("/api/assignments", async (c) => {
-    if (!sessionManager.isLoggedIn()) {
-        return c.json({ success: false, error: "Not logged in" }, 401);
-    }
-    try {
-        const assignments = await sessionManager.fetchUpcomingAssignments();
-        return c.json({ success: true, assignments });
-    }
-    catch (error) {
-        return c.json({ success: false, error: String(error) }, 500);
+        return c.html(_jsxs("div", { id: "error-message", class: "mt-4 p-3 bg-red-500/10 border border-red-500/50 rounded-md text-red-500 text-sm", children: ["Server error: ", String(error)] }));
     }
 });
-// Assignments HTML endpoint (for HTMX)
 app.get("/api/assignments/html", async (c) => {
     if (!sessionManager.isLoggedIn()) {
-        return c.html(_jsxs("div", { style: "padding: 1rem; background: #f8d7da; border: 1px solid #f5c6cb; border-radius: 4px; color: #721c24;", children: [_jsx("strong", { children: "\u274C Not Logged In" }), _jsx("div", { style: "margin-top: 0.5rem;", children: "Please log in first to see your assignments." })] }));
+        // If session expired, redirect/render login
+        return c.html(_jsx("div", { class: "text-red-500", children: "Session expired. Please refresh to log in again." }));
     }
     try {
         const assignments = await sessionManager.fetchUpcomingAssignments();
         if (assignments.length === 0) {
-            return c.html(_jsxs("div", { style: "padding: 1.5rem; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 12px; color: white; text-align: center;", children: [_jsx("div", { style: "font-size: 3rem; margin-bottom: 0.5rem;", children: "\uD83C\uDF89" }), _jsx("strong", { style: "font-size: 1.25rem;", children: "No Upcoming Assignments!" }), _jsx("div", { style: "margin-top: 0.5rem; opacity: 0.9;", children: "You're all caught up. Time to relax!" })] }));
+            return c.html(_jsxs("div", { class: "p-12 text-center bg-surface border border-border rounded-lg", children: [_jsx("h3", { class: "text-lg font-medium mb-2", children: "No Upcoming Assignments" }), _jsx("p", { class: "text-muted", children: "You are all caught up!" })] }));
         }
-        return c.html(_jsxs("div", { style: "display: flex; flex-direction: column; gap: 1rem;", children: [_jsxs("div", { style: "padding: 0.75rem 1rem; background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); border-radius: 8px; color: white; font-weight: bold;", children: ["\uD83D\uDCDA ", assignments.length, " Upcoming Assignment", assignments.length > 1 ? "s" : ""] }), assignments.map((ass, i) => (_jsxs("div", { style: {
-                        padding: "1rem",
-                        background: "linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)",
-                        borderRadius: "12px",
-                        border: "1px solid rgba(255,255,255,0.1)",
-                        color: "#fff",
-                        boxShadow: "0 4px 15px rgba(0,0,0,0.2)",
-                    }, children: [_jsxs("div", { style: "display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.75rem;", children: [_jsxs("div", { children: [_jsx("div", { style: "font-size: 0.85rem; color: #64ffda; font-weight: 600;", children: ass.courseCode }), _jsx("div", { style: "font-size: 0.8rem; color: #aaa;", children: ass.courseName })] }), _jsx("div", { style: {
-                                        padding: "0.25rem 0.75rem",
-                                        background: ass.status?.toLowerCase().includes("pending")
-                                            ? "#ff6b6b"
-                                            : "#4CAF50",
-                                        borderRadius: "20px",
-                                        fontSize: "0.75rem",
-                                        fontWeight: "bold",
-                                    }, children: ass.status || "Pending" })] }), _jsx("div", { style: "font-weight: bold; font-size: 1rem; margin-bottom: 0.5rem;", children: ass.assignmentTitle }), _jsxs("div", { style: "display: flex; justify-content: space-between; font-size: 0.85rem; color: #aaa;", children: [_jsxs("span", { children: ["\uD83D\uDCC5 Due: ", ass.dueDate || "N/A"] }), _jsxs("span", { children: ["\uD83D\uDCCA Max: ", ass.maxMarks || "N/A", " marks"] })] })] }, i)))] }));
+        //ass
+        return c.html(_jsx("div", { class: "flex flex-col gap-3", children: assignments.map((ass, i) => (_jsxs("div", { class: "flex items-center justify-between p-4 bg-surface border border-border rounded-lg transition-colors hover:border-muted group", children: [_jsxs("div", { class: "flex-1 min-w-0 pr-4", children: [_jsxs("div", { class: "flex items-baseline gap-3 overflow-hidden whitespace-nowrap text-ellipsis", children: [_jsx("span", { class: "text-xs font-bold text-muted uppercase tracking-wider min-w-fit", children: ass.courseCode }), _jsx("span", { class: "font-semibold text-sm truncate", children: ass.assignmentTitle }), _jsxs("span", { class: "text-xs text-muted", children: ["\u2014 ", ass.courseName] })] }), _jsxs("div", { class: "flex gap-4 mt-1 text-xs text-muted", children: [_jsxs("span", { children: ["Due:", " ", _jsx("span", { class: "text-foreground", children: ass.dueDate || "N/A" })] }), _jsxs("span", { children: ["Max:", " ", _jsx("span", { class: "text-foreground", children: ass.maxMarks || "N/A" })] })] })] }), _jsx("span", { class: `text-xs px-2.5 py-1 rounded-full font-medium whitespace-nowrap ${ass.status?.toLowerCase().includes("pending")
+                            ? "bg-red-500/10 text-red-500 border border-red-500/20"
+                            : "bg-blue-500/10 text-blue-500 border border-blue-500/20"}`, children: ass.status || "Pending" })] }, i))) }));
     }
     catch (error) {
-        return c.html(_jsxs("div", { style: "padding: 1rem; background: #f8d7da; border: 1px solid #f5c6cb; border-radius: 4px; color: #721c24;", children: [_jsx("strong", { children: "\u274C Error:" }), " ", String(error)] }));
+        return c.html(_jsxs("div", { class: "p-4 border border-red-500 rounded-md text-red-500", children: ["Failed to load assignments: ", String(error)] }));
     }
 });
-const port = Number(process.env.PORT) || 6767;
 serve({
     fetch: app.fetch,
-    port,
+    port: 6767,
 }, (info) => {
-    console.log(`🚀 Server is running on http://localhost:${info.port}`);
-    console.log(`📊 Session status: http://localhost:${info.port}/api/session/status`);
+    console.log(`Server is running on http://localhost:${info.port}`);
 });

package/dist/session-manager.js

@@ -10,7 +10,6 @@ const OPEN_PAGE = `${BASE}/vtop/openPage`;
 const OPEN_PAGE_ALT = `${BASE}/vtop/open/page`;
 const PRELOGIN_SETUP = `${BASE}/vtop/prelogin/setup`;
 const LOGIN_PAGE = `${BASE}/vtop/login`;
-// Post-login endpoints
 const INIT_PAGE = `${BASE}/vtop/init/page`;
 const MAIN_PAGE = `${BASE}/vtop/main/page`;
 const VTOP_OPEN = `${BASE}/vtop/open`;
@@ -27,9 +26,7 @@ class VTOPSessionManager {
         username: null,
         regNo: null,
     };
-    /**
-     * Extract CSRF token from HTML response
-     */
+    //cheerio at home
     extractCsrf(html) {
         // Look for _csrf token in various forms
         const patterns = [
@@ -46,9 +43,6 @@ class VTOPSessionManager {
         }
         return null;
     }
-    /**
-     * Parse Set-Cookie headers and store cookies
-     */
     storeCookies(response) {
         const setCookieHeaders = response.headers.getSetCookie?.() || [];
         for (const cookieStr of setCookieHeaders) {
@@ -59,9 +53,6 @@ class VTOPSessionManager {
             }
         }
     }
-    /**
-     * Get cookie header string for requests
-     */
     getCookieHeader() {
         return Array.from(this.state.cookies.entries())
             .map(([name, value]) => `${name}=${value}`)
@@ -276,7 +267,7 @@ class VTOPSessionManager {
                             solvedCaptcha = await solve(cleanDataUri);
                             console.log("✅ Solved CAPTCHA:", solvedCaptcha);
                             // Save captcha image for debugging
-                            if (parts?.base64 && process.env.DEBUG_CAPTCHA === "true") {
+                            if (parts?.base64) {
                                 const out = path.resolve(process.cwd(), "captcha.jpg");
                                 await saveCaptchaImage(parts.base64, out);
                                 //  console.log(`📷 Saved CAPTCHA image to ${out}`);
@@ -349,25 +340,13 @@ class VTOPSessionManager {
                                 : new URL(location, LOGIN_PAGE).toString();
                             await this.fetchWithCookies(redirectUrl);
                         }
-                        // After successfully submitting the captcha, we MUST verify login success
-                        console.log("POST successful, verifying login status...");
-                        // Try to navigate to post-login pages to confirm we are actually logged in
-                        // VTOP is tricky: a 200 OK on login POST doesn't guarantee success (could be wrong password)
-                        const navSuccess = await this.navigatePostLogin();
-                        if (navSuccess) {
-                            console.log("🎉 Login verified successfully!");
-                            this.state.loggedIn = true;
-                            this.state.username = username;
-                            this.state.regNo = regNo;
-                            return true;
-                        }
-                        else {
-                            console.error("❌ Login verification failed - cleaning up session");
-                            this.state.loggedIn = false;
-                            this.state.username = null;
-                            this.state.regNo = null;
-                            return false;
-                        }
+                        // After successfully submitting the captcha, assume login worked
+                        // The actual success will be determined when we try to fetch data
+                        console.log("🎉 Login POST submitted successfully!");
+                        this.state.loggedIn = true;
+                        this.state.username = username;
+                        this.state.regNo = regNo;
+                        return true;
                     }
                     catch (e) {
                         console.error("Login POST failed:", e);

package/dist/views/Dashboard.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "hono/jsx/jsx-runtime";
+import { BaseLayout } from "./layouts/Base.js";
+export const Dashboard = ({ username }) => {
+    return (_jsxs(BaseLayout, { title: "Dashboard - Open-VTOP", children: [_jsxs("div", { class: "flex justify-between items-center mb-8", children: [_jsxs("div", { children: [_jsx("h1", { class: "text-2xl font-bold tracking-tight", children: "Dashboard" }), _jsxs("p", { class: "text-muted text-sm", children: ["Welcome back, ", username] })] }), _jsx("div", {})] }), _jsx("div", { "hx-get": "/api/assignments/html", "hx-trigger": "load", "hx-target": "#assignments-container", "hx-swap": "innerHTML", class: "w-full", children: _jsx("div", { id: "assignments-container", class: "space-y-4", children: _jsxs("div", { id: "loading-state", class: "text-center py-16 text-muted", children: [_jsx("div", { class: "inline-block animate-spin rounded-full h-6 w-6 border-2 border-muted border-t-white mb-4" }), _jsx("p", { class: "text-sm", children: "Syncing assignments..." })] }) }) })] }));
+};

package/dist/views/Login.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "hono/jsx/jsx-runtime";
+import { BaseLayout } from "./layouts/Base.js";
+export const Login = () => {
+    return (_jsx(BaseLayout, { title: "Login - Open-VTOP", children: _jsxs("div", { "x-data": "{ \n          showPassword: false, \n          loading: false \n        }", class: "w-full", children: [_jsxs("div", { class: "text-center mb-8", children: [_jsx("h1", { class: "text-3xl font-bold tracking-tight mb-2", children: "Log In" }), _jsx("p", { class: "text-muted text-sm", children: "Enter your VTOP credentials to continue." })] }), _jsx("div", { class: "bg-surface border border-border rounded-lg p-6 shadow-sm", children: _jsxs("form", { id: "login-form", "hx-post": "/api/login/form", "hx-target": "body", "hx-swap": "outerHTML", "x-on:submit": "loading = true", "x-on:htmx:after-request": "loading = false", children: [_jsxs("div", { class: "mb-4", children: [_jsx("label", { class: "block text-sm text-muted mb-2", for: "username", children: "Username" }), _jsx("input", { type: "text", id: "username", name: "username", required: true, autofocus: true, class: "w-full bg-background border border-border rounded-md px-3 py-2 text-foreground focus:outline-none focus:border-white transition-colors placeholder-muted" })] }), _jsxs("div", { class: "mb-4", children: [_jsx("label", { class: "block text-sm text-muted mb-2", for: "password", children: "Password" }), _jsxs("div", { class: "relative", children: [_jsx("input", { "x-bind:type": "showPassword ? 'text' : 'password'", id: "password", name: "password", required: true, class: "w-full bg-background border border-border rounded-md px-3 py-2 text-foreground focus:outline-none focus:border-white transition-colors placeholder-muted pr-10" }), _jsxs("button", { type: "button", "x-on:click": "showPassword = !showPassword", class: "absolute inset-y-0 right-0 px-3 flex items-center text-muted hover:text-foreground transition-colors", children: [_jsx("span", { "x-show": "!showPassword", class: "text-xs font-medium", children: "SHOW" }), _jsx("span", { "x-show": "showPassword", style: "display: none;", class: "text-xs font-medium", children: "HIDE" })] })] })] }), _jsxs("div", { class: "mb-6", children: [_jsx("label", { class: "block text-sm text-muted mb-2", for: "regNo", children: "Registration Number" }), _jsx("input", { type: "text", id: "regNo", name: "regNo", required: true, class: "w-full bg-background border border-border rounded-md px-3 py-2 text-foreground focus:outline-none focus:border-white transition-colors placeholder-muted" })] }), _jsxs("button", { type: "submit", class: "w-full bg-white text-black font-semibold py-2.5 rounded-md hover:bg-gray-200 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex justify-center items-center gap-2", "x-bind:disabled": "loading", children: [_jsx("span", { "x-show": "!loading", children: "Log In" }), _jsxs("span", { "x-show": "loading", style: "display: none;", class: "flex items-center gap-2", children: [_jsxs("svg", { class: "animate-spin h-4 w-4 text-black", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [_jsx("circle", { class: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", "stroke-width": "4" }), _jsx("path", { class: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] }), "Authenticating..."] })] }), _jsx("div", { id: "error-message" })] }) }), _jsx("div", { class: "text-center mt-8 text-muted text-xs", children: _jsx("p", { children: "Open-VTOP \u00A9 2026" }) })] }) }));
+};

package/dist/views/layouts/Base.js

@@ -1,121 +1,43 @@
 import { jsx as _jsx, jsxs as _jsxs } from "hono/jsx/jsx-runtime";
-export const BaseLayout = ({ title = "Open-VTOP", children, }) => {
-    return (_jsxs("html", { lang: "en", children: [_jsxs("head", { children: [_jsx("meta", { charset: "UTF-8" }), _jsx("meta", { name: "viewport", content: "width=device-width, initial-scale=1.0" }), _jsx("title", { children: title }), _jsx("script", { src: "/static/htmx.js" }), _jsx("style", { children: `
-          * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-          }
-
+export const BaseLayout = ({ title, children, }) => {
+    return (_jsxs("html", { lang: "en", children: [_jsxs("head", { children: [_jsx("meta", { charset: "UTF-8" }), _jsx("meta", { name: "viewport", content: "width=device-width, initial-scale=1.0" }), _jsx("title", { children: title }), _jsx("script", { src: "/static/htmx.js" }), _jsx("script", { src: "https://cdn.tailwindcss.com" }), _jsx("script", { dangerouslySetInnerHTML: {
+                            __html: `
+          tailwind.config = {
+            theme: {
+              extend: {
+                colors: {
+                  background: '#000000',
+                  surface: '#111111',
+                  border: '#333333',
+                  foreground: '#ffffff',
+                  muted: '#888888',
+                  primary: '#ffffff',
+                  'primary-fg': '#000000',
+                },
+                fontFamily: {
+                  sans: ['Inter', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'sans-serif'],
+                }
+              }
+            }
+          }
+        `,
+                        } }), _jsx("script", { defer: true, src: "https://cdn.jsdelivr.net/npm/alpinejs@3.13.3/dist/cdn.min.js" }), _jsx("style", { dangerouslySetInnerHTML: {
+                            __html: `
           body {
-            font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Dank Mono', 'Source Code Pro', monospace;
-            background: #000;
-            color: #fff;
-            min-height: 100vh;
-            padding: 2rem;
-            line-height: 1.6;
-          }
-
-          h1 {
-            font-size: 2rem;
-            font-weight: 600;
-            margin-bottom: 2rem;
-            letter-spacing: -0.02em;
-          }
-
-          h2 {
-            font-size: 1.25rem;
-            font-weight: 500;
-            margin-bottom: 1rem;
-            letter-spacing: -0.01em;
-          }
-
-          .container {
-            max-width: 800px;
-            margin: 0 auto;
-          }
-
-          .section {
-            background: #111;
-            border: 1px solid #333;
-            border-radius: 8px;
-            padding: 2rem;
-            margin-bottom: 2rem;
-            transition: border-color 0.2s ease;
-          }
-
-          .section:hover {
-            border-color: #555;
-          }
-
-          button {
-            background: #fff;
-            color: #000;
-            border: none;
-            padding: 0.75rem 1.5rem;
-            border-radius: 6px;
-            cursor: pointer;
-            font-size: 0.875rem;
-            font-family: inherit;
-            font-weight: 500;
-            transition: all 0.2s ease;
-          }
-
-          button:hover {
-            background: #e6e6e6;
-            transform: translateY(-1px);
-          }
-
-          button:active {
-            transform: translateY(0);
-          }
-
-          input {
-            background: #111;
-            color: #fff;
-            border: 1px solid #333;
-            padding: 0.75rem 1rem;
-            border-radius: 6px;
-            font-size: 0.875rem;
-            font-family: inherit;
-            width: 100%;
-            transition: border-color 0.2s ease;
-          }
-
-          input:focus {
-            outline: none;
-            border-color: #fff;
-          }
-
-          input::placeholder {
-            color: #666;
-          }
-
-          #result {
-            margin-top: 1rem;
-            padding: 1rem;
-            background: #0a0a0a;
-            border: 1px solid #222;
-            border-radius: 6px;
-            min-height: 2rem;
-            font-size: 0.875rem;
-          }
-
-          .success {
-            color: #0f0;
-          }
-
-          .error {
-            color: #f00;
-          }
-
-          .htmx-swapping {
-            opacity: 0.5;
-            transition: opacity 0.2s;
-          }
-
-          .htmx-request {
-            opacity: 0.8;
-          }
-        ` })] }), _jsx("body", { children: _jsx("div", { class: "container", children: children }) })] }));
+            background-color: theme('colors.background');
+            color: theme('colors.foreground');
+          }
+          /* Custom spinner animation since Tailwind's animate-spin is utility based */
+          .htmx-indicator {
+            display: none;
+            opacity: 0;
+            transition: opacity 200ms ease-in;
+          }
+          .htmx-request .htmx-indicator,
+          .htmx-request.htmx-indicator {
+            display: inline-block;
+            opacity: 1;
+          }
+        `,
+                        } })] }), _jsx("body", { class: "bg-background text-foreground antialiased min-h-screen flex flex-col items-center justify-center p-4", children: _jsx("main", { class: "w-full max-w-md flex flex-col gap-6", children: children }) })] }));
 };

package/package.json

@@ -4,26 +4,28 @@
   "scripts": {
     "dev": "tsx watch src/index.tsx",
     "build": "tsc",
-    "start": "node dist/index.js"
+    "start": "node dist/index.js",
+    "prepare": "npm run build"
   },
   "dependencies": {
     "@hono/node-server": "^1.19.9",
-    "canvas": "^3.2.1",
     "hono": "^4.11.4",
-    "htmx.org": "^2.0.8"
+    "htmx.org": "^2.0.8",
+    "jpeg-js": "^0.4.4",
+    "pngjs": "^7.0.0"
   },
   "bin": {
     "open-vtop": "dist/index.js"
   },
   "files": [
-    "dist",
-    "README.md",
-    "LICENSE"
+    "dist"
   ],
   "devDependencies": {
+    "@types/jpeg-js": "^0.3.0",
     "@types/node": "^20.11.17",
+    "@types/pngjs": "^6.0.5",
     "tsx": "^4.7.1",
     "typescript": "^5.8.3"
   },
-  "version": "1.0.3"
+  "version": "1.0.5"
 }