Login issues

package.json

@@ -18,6 +18,7 @@
  "marked": "^15.0.8",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
+ "react-hot-toast": "^2.6.0",
  "react-router-dom": "^6.22.3",
  "react-scripts": "5.0.1",
  "react-social-icons": "^6.16.0",
@@ -29,7 +30,8 @@
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
- "eject": "react-scripts eject"
+ "eject": "react-scripts eject",
+ "lint": "eslint src --ext .js,.jsx"
  },
  "eslintConfig": {
  "extends": [
@@ -50,6 +52,7 @@
  ]
  },
  "devDependencies": {
+ "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
  "tailwindcss": "^3.4.17"
  }
 }

src/App.js

@@ -15,11 +15,13 @@ import {Dashboard} from "./screens/Dashboard";
 import {DashboardView} from "./screens/DashboardView"; 
 import {GraphService} from "./screens/GraphService";
 import Tunnels from "./screens/Tunnels";
+import { Toaster } from "react-hot-toast";
 
 function App() {
  return (
  <div className="App">
  <BrowserRouter basename={process.env.PUBLIC_URL}>
+ <Toaster position="bottom-right" />
  <Routes>
  <Route path="/" element={<Navigate to="/home" />} />
  <Route path="/login" element={<Login />} />

src/components/AvatarMenu.js

@@ -1,3 +1,5 @@
+import { AuthHandler } from "../utils/authHandler";
+
 function AvatarMenu({ account, initials, togglePopup, activePopup }) {
 	return (
  <div className="relative">
@@ -28,8 +30,7 @@ function AvatarMenu({ account, initials, togglePopup, activePopup }) {
  <button
  className="flex items-center w-full px-4 py-2 text-sm text-red-600 hover:bg-red-50"
  onClick={() => {
- sessionStorage.removeItem("token");
- window.location.href = "/login";
+ AuthHandler.logout();
  }}
  >
  Logout

src/components/Footer.js

@@ -1,4 +1,5 @@
 import React from "react";
+import { Link } from "react-router-dom";
 
 function Footer() {
  return (
@@ -16,22 +17,34 @@ function Footer() {
  <footer className="bg-[#0D1A33] text-white px-4 py-6 flex flex-col md:flex-row justify-between items-center">
  <div>
  <p className="font-bold text-lg">ComputeKart</p>
- <p className="text-xs mt-1">©2025. ComputeKart. All Rights Reserved.</p>
+ <p className="text-xs mt-1">
+ ©2025. ComputeKart. All Rights Reserved.
+ </p>
  </div>
+
  <ul className="flex gap-4 mt-4 md:mt-0 text-sm">
- <li>Home</li>
- <li>Installation Guide</li>
- <li>Profile</li>
+ <li>
+ <Link to="/">Home</Link>
+ </li>
+ <li>
+ <Link to="/installation">Installation Guide</Link>
+ </li>
+ <li>
+ <Link to="/profile">Profile</Link>
+ </li>
  </ul>
+
  <div className="text-xs mt-4 md:mt-0">
- <a href="#" className="mr-4">
+ <Link to="#" className="mr-4">
  Terms of Service
- </a>
- <a href="#">Privacy Policy</a>
+ </Link>
+ <Link to="#">
+ Privacy Policy
+ </Link>
  </div>
  </footer>
  </div>
  );
 }
 
-export default Footer;
+export default Footer;

src/components/FormControls.js

@@ -91,4 +91,10 @@ export const DropdownSelect = ({
  )
 }
 
-export default { TextInput, NumberInput, DropdownSelect }
+const FormControls = {
+ TextInput,
+ NumberInput,
+ DropdownSelect,
+}
+
+export default FormControls

src/components/HomeComponent.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
 
 export default function LockBoxLanding() {
  const [faqOpen, setFaqOpen] = useState(null);
@@ -40,15 +40,6 @@ export default function LockBoxLanding() {
  },
  ];
 
- const [copied, setCopied] = useState(false);
- const bashScript = `/bin/bash -c "$(curl -fsSL https://github.com/avinash84319/providerServer/install.sh)"`;
-
- const handleCopy = () => {
- navigator.clipboard.writeText(bashScript);
- setCopied(true);
- setTimeout(() => setCopied(false), 2000); // reset after 2 seconds
- };
-
  return (
  <div className="font-sans text-[#0D0D0D] bg-white w-full overflow-x-hidden">
  {/* Header Section */}

src/components/Navbar.js

@@ -7,7 +7,6 @@ import useNavbarScroll from "../hooks/useNavbarScroll";
 import { getInitials } from "../utils/userUtils";
 import useClickOutside from "../hooks/useClickOutside";
 
-
 const Navbar = () => {
  const [activePopup, setActivePopup] = useState(null);
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

src/docs/components/docsMainPage.js

@@ -1,10 +1,8 @@
 import React, { useState } from 'react';
-import Navbar from '../../components/Navbar';
 import Sidebar from './sidebar';
 import ShowDocumentation from './showDocumentation';
 import Mainheadings from './mainheadings';
 import "../css/docsMainPage.css";
-import { file } from 'jszip';
 
 const DocsMainPage = () => {
 

src/screens/Buckets.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import axios from 'axios';
-import JSZip from 'jszip'; // Import JSZip for zipping folders
+import JSZip from 'jszip';
 import { apiCall } from '../Api';
 
 const Buckets = () => {
@@ -57,7 +57,7 @@ const Buckets = () => {
 
 	const zipFolder = async (files) => {
  const zip = new JSZip();
- const folderName = path.split('/').pop(); // Folder name
+// const folderName = path.split('/').pop(); // Folder name
  const fileArray = Array.from(files); // ✅ Convert FileList to array
  fileArray.forEach(file => {
  // Add each file to the zip

src/screens/DashboardView.js

@@ -1,7 +1,7 @@
-import React, { useEffect, useState, useRef } from 'react'
+import React, { useEffect, useState } from 'react'
 import { GraphView } from '../components/GraphView'
 import DashboardCreateModal from '../components/DashboardCreateModal'
-import { useNavigate, useSearchParams } from 'react-router-dom'
+import { useSearchParams } from 'react-router-dom'
 import { Trash2 } from 'lucide-react'
 import Toast from '../components/ToastService'
 import ActionConfirmModal from '../components/actionConfirmModal'
@@ -11,7 +11,6 @@ import { epochToReadable } from '../helper'
 import { listGraphsForDashboard, deleteGraph, getGraphPoints } from '../apiServices'
 
 export const DashboardView = () => {
- const navigate = useNavigate()
  const [searchParams] = useSearchParams()
  const dashboardId = searchParams.get('id')
  const [graphs, setGraphs] = useState([])