Attacks UI

src/renderer/App.tsx

@@ -9,7 +9,8 @@ import { ProjectLayout } from './layout/projectLayout';
 import Status from './views/project/status';
 import Recon from './views/project/recon';
 import { ReconResults } from './views/project/results/recon-results';
-import JsLeaks from './views/project/JsLeaks.1';
+import JsLeaks from './views/project/JsLeaks';
+import Attacks from './views/project/attacks';
 
 function Home() {
   return (
@@ -31,7 +32,7 @@ export default function App() {
             <Route path="recon" element={<Recon />} />
             <Route path="result" element={<Results />} />
             <Route path="result-recon" element={<ReconResults />} />
-            <Route path="attack" element={<Results />} />
+            <Route path="attacks" element={<Attacks />} />
             <Route path="jsleaks" element={<JsLeaks />} />
           </Route>
         </Routes>

src/renderer/components/sidebar.tsx

@@ -30,9 +30,8 @@ const dashboardMenu: DashboardMenu[] = [
     icon: <PocketKnife className="mr-2 h-4 w-4" />,
   },
   {
-    href: 'attack',
-    title: 'Attack',
-    Disabled: true,
+    href: 'attacks',
+    title: 'Attacks',
     icon: <PocketKnife className="mr-2 h-4 w-4" />,
   },
   {

src/renderer/views/project/JsLeaks.tsx

@@ -5,13 +5,13 @@ import {
   CardHeader,
   CardTitle,
 } from '../../components/ui/card';
-import Secrets from './JsLeaks Jobs/secrets';
-import EndPoints from './JsLeaks Jobs/EndPoints';
+import Secrets from './jsLeaksJob/secrets';
+import EndPoints from './jsLeaksJob/Endpoint';
 
 export default function JsLeaks() {
   return (
     <div className="flex flex-col gap-4">
-      <h1 className="font-bold text-3xl">Initiate Recon Attacks</h1>
+      <h1 className="font-bold text-3xl">JsLeaks</h1>
       <div>
         <div className="grid grid-flow-row grid-cols-2 gap-4">
           <Card>

src/renderer/views/project/attacks.tsx

@@ -0,0 +1,61 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '../../components/ui/card';
+import Exposures from './attacks/exposures';
+import MissingHeaders from './attacks/missingHeaders';
+import PotentialXss from './attacks/potentialXss';
+import SqlInjection from './attacks/sqlInjection';
+
+export default function Attacks() {
+  return (
+    <div className="flex flex-col gap-4">
+      <h1 className="font-bold text-3xl">Attacks</h1>
+      <div>
+        <div className="grid grid-flow-row grid-cols-2 gap-4">
+          <Card>
+            <CardHeader>
+              <CardTitle>Scan for exposures</CardTitle>
+              <CardDescription>wanna find exposures ?</CardDescription>
+            </CardHeader>
+            <CardContent className="flex justify-between">
+              <Exposures />
+            </CardContent>
+          </Card>
+          <Card>
+            <CardHeader>
+              <CardTitle>Scan for missing headers</CardTitle>
+              <CardDescription>wanna find more ?</CardDescription>
+            </CardHeader>
+            <CardContent className="flex justify-between">
+              <MissingHeaders />
+            </CardContent>
+          </Card>
+          <Card>
+            <CardHeader>
+              <CardTitle>Scan the URLs</CardTitle>
+              <CardDescription>wanna catch potential XSS</CardDescription>
+            </CardHeader>
+            <CardContent className="flex justify-between">
+              <PotentialXss />
+            </CardContent>
+          </Card>
+          <Card>
+            <CardHeader>
+              <CardTitle>Scan for SQL Injection</CardTitle>
+              <CardDescription>
+                SSTI, Open Redirect & CRLF Injection
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="flex justify-between">
+              <SqlInjection />
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </div>
+  );
+}

src/renderer/views/project/attacks/exposures.tsx

@@ -0,0 +1,23 @@
+import { Loader2 } from 'lucide-react';
+import { useState } from 'react';
+import { Button } from '../../../components/ui/button';
+
+export default function Exposures() {
+  const [Loading, setLoading] = useState<boolean>(false);
+  const RunExposures = async () => {
+    setLoading(true);
+  };
+  return (
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    <>
+      {!Loading ? (
+        <Button onClick={RunExposures}>Process</Button>
+      ) : (
+        <Button disabled>
+          <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+          Please wait
+        </Button>
+      )}
+    </>
+  );
+}

src/renderer/views/project/attacks/missingHeaders.tsx

@@ -0,0 +1,23 @@
+import { Loader2 } from 'lucide-react';
+import { useState } from 'react';
+import { Button } from '../../../components/ui/button';
+
+export default function MissingHeaders() {
+  const [Loading, setLoading] = useState<boolean>(false);
+  const RunMissingHeaders = async () => {
+    setLoading(true);
+  };
+  return (
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    <>
+      {!Loading ? (
+        <Button onClick={RunMissingHeaders}>Process</Button>
+      ) : (
+        <Button disabled>
+          <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+          Please wait
+        </Button>
+      )}
+    </>
+  );
+}

src/renderer/views/project/attacks/potentialXss.tsx

@@ -0,0 +1,23 @@
+import { Loader2 } from 'lucide-react';
+import { useState } from 'react';
+import { Button } from '../../../components/ui/button';
+
+export default function PotentialXss() {
+  const [Loading, setLoading] = useState<boolean>(false);
+  const RunPotentialXss = async () => {
+    setLoading(true);
+  };
+  return (
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    <>
+      {!Loading ? (
+        <Button onClick={RunPotentialXss}>Process</Button>
+      ) : (
+        <Button disabled>
+          <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+          Please wait
+        </Button>
+      )}
+    </>
+  );
+}

src/renderer/views/project/attacks/sqlInjection.tsx

@@ -0,0 +1,23 @@
+import { Loader2 } from 'lucide-react';
+import { useState } from 'react';
+import { Button } from '../../../components/ui/button';
+
+export default function SqlInjection() {
+  const [Loading, setLoading] = useState<boolean>(false);
+  const RunSqlInjection = async () => {
+    setLoading(true);
+  };
+  return (
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    <>
+      {!Loading ? (
+        <Button onClick={RunSqlInjection}>Process</Button>
+      ) : (
+        <Button disabled>
+          <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+          Please wait
+        </Button>
+      )}
+    </>
+  );
+}