Update frontend/src/pages/NewScan.jsx

frontend/src/pages/NewScan.jsx

@@ -23,6 +23,14 @@ export const NewScan = () => {
   const [scheduleFrequency, setScheduleFrequency] = useState('daily');
   const [scheduleTime, setScheduleTime] = useState('02:00');
 
+  // Legal & Confirmation Modal States
+  const [showConfirmModal, setShowConfirmModal] = useState(false);
+  const [showPolicyModal, setShowPolicyModal] = useState(false);
+  const [hasReadPolicy, setHasReadPolicy] = useState(false);
+  const [policyCheck1, setPolicyCheck1] = useState(false);
+  const [policyCheck2, setPolicyCheck2] = useState(false);
+  const [isConfirmedChecked, setIsConfirmedChecked] = useState(false);
+
   const { token, user } = useAuth();
   const navigate = useNavigate();
 
@@ -76,7 +84,7 @@ export const NewScan = () => {
     return (q.allocated_count - q.used_count) > 0;
   };
 
-  const handleLaunch = async (e) => {
+  const handleLaunch = (e) => {
     e.preventDefault();
     setError('');
 
@@ -106,6 +114,12 @@ export const NewScan = () => {
       return;
     }
 
+    // Open confirmation modal before actual launch
+    setShowConfirmModal(true);
+  };
+
+  const executeScan = async () => {
+    setShowConfirmModal(false);
     setLoading(true);
 
     try {
@@ -590,6 +604,254 @@ export const NewScan = () => {
         </div>
       )}
 
+      {/* Confirm Scan Execution Modal Popup */}
+      {showConfirmModal && (
+        <div className="fixed inset-0 z-[9999] flex items-center justify-center p-4">
+          {/* Backdrop */}
+          <div 
+            className="fixed inset-0 bg-slate-900/60 backdrop-blur-sm transition-opacity animate-fade-in"
+            onClick={() => setShowConfirmModal(false)}
+          ></div>
+
+          {/* Modal Content */}
+          <div className="relative bg-white dark:bg-slate-900 rounded-3xl border border-slate-200 dark:border-slate-800 shadow-2xl max-w-lg w-full p-6 overflow-hidden z-10 animate-slide-up text-left">
+            
+            {/* Header */}
+            <div className="flex items-start justify-between pb-4 border-b border-slate-100 dark:border-slate-800">
+              <div className="flex items-center gap-3">
+                <div className="w-10 h-10 rounded-full bg-blue-600/10 border border-blue-600/20 flex items-center justify-center text-blue-600">
+                  <span className="material-symbols-outlined text-[24px]">alternate_email</span>
+                </div>
+                <div>
+                  <h3 className="text-xl font-bold text-slate-900 dark:text-white tracking-tight">
+                    Confirm Scan Execution
+                  </h3>
+                  <p className="text-xs text-slate-500 dark:text-slate-400 mt-0.5">
+                    Review target parameters before starting the scan pipeline
+                  </p>
+                </div>
+              </div>
+              <button
+                type="button"
+                onClick={() => setShowConfirmModal(false)}
+                className="text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 transition-colors bg-transparent border-0 cursor-pointer p-1"
+              >
+                <span className="material-symbols-outlined text-[20px]">close</span>
+              </button>
+            </div>
+
+            {/* Target Parameters Card */}
+            <div className="my-5 p-4 rounded-xl bg-slate-50 dark:bg-slate-800/60 border border-slate-200/60 dark:border-slate-700/60 flex flex-col gap-3 font-mono text-xs">
+              <div className="flex items-center justify-between">
+                <span className="text-slate-500 font-bold uppercase tracking-wider">TARGET URL</span>
+                <span className="text-blue-600 dark:text-blue-400 font-bold break-all max-w-[280px] text-right">{targetUrl}</span>
+              </div>
+              <div className="flex items-center justify-between">
+                <span className="text-slate-500 font-bold uppercase tracking-wider">SCAN INTENSITY</span>
+                <span className="px-2.5 py-0.5 rounded-full bg-blue-100 dark:bg-blue-900/40 text-blue-700 dark:text-blue-300 font-sans font-semibold text-[11px]">{scanType} Scan</span>
+              </div>
+              <div className="flex items-center justify-between">
+                <span className="text-slate-500 font-bold uppercase tracking-wider">EXECUTION TYPE</span>
+                <span className="text-slate-800 dark:text-slate-200 font-sans font-medium">{isScheduled ? 'Scheduled Execution' : 'Immediate Execution'}</span>
+              </div>
+            </div>
+
+            {/* Confirmation Checkbox & Policy Link */}
+            <div className="flex flex-col gap-2 mb-5">
+              <label className={`flex items-start gap-3 text-xs font-medium text-slate-700 dark:text-slate-300 cursor-pointer ${!hasReadPolicy ? 'opacity-60 cursor-not-allowed' : ''}`}>
+                <input
+                  type="checkbox"
+                  disabled={!hasReadPolicy}
+                  checked={isConfirmedChecked}
+                  onChange={(e) => setIsConfirmedChecked(e.target.checked)}
+                  className="mt-0.5 h-4 w-4 rounded border-slate-300 text-blue-600 focus:ring-blue-500 cursor-pointer disabled:cursor-not-allowed"
+                />
+                <span>
+                  I confirm that I have <strong>explicit written authorization</strong> to execute active penetration testing against <span className="text-blue-600 dark:text-blue-400">{targetUrl}</span>.
+                </span>
+              </label>
+
+              <div className="pl-7">
+                {hasReadPolicy ? (
+                  <span className="inline-flex items-center gap-1 text-xs font-semibold text-emerald-600 dark:text-emerald-400">
+                    <span className="material-symbols-outlined text-[16px]">check_circle</span>
+                    Security Policy Read & Accepted
+                  </span>
+                ) : (
+                  <button
+                    type="button"
+                    onClick={() => setShowPolicyModal(true)}
+                    className="text-xs font-semibold text-blue-600 dark:text-blue-400 hover:underline bg-transparent border-0 p-0 cursor-pointer text-left"
+                  >
+                    Read Security Policy & Authorization Terms
+                  </button>
+                )}
+              </div>
+            </div>
+
+            {/* Warning Box */}
+            <div className="p-4 rounded-xl bg-amber-50 dark:bg-amber-950/30 border border-amber-200/80 dark:border-amber-800/50 text-amber-800 dark:text-amber-300 text-xs leading-relaxed flex items-start gap-3 mb-6">
+              <span className="material-symbols-outlined text-amber-600 dark:text-amber-400 text-[20px] shrink-0 mt-0.5">help_outline</span>
+              <div>
+                Are you sure you want to run this scan on <strong className="text-amber-900 dark:text-amber-200">{targetUrl}</strong>? If you are sure, read the security policy to enable the confirmation box, check it, and click <strong>Yes, Start Scan</strong>.
+              </div>
+            </div>
+
+            {/* Action Buttons */}
+            <div className="flex items-center justify-end gap-3 pt-3 border-t border-slate-100 dark:border-slate-800">
+              <button
+                type="button"
+                onClick={() => setShowConfirmModal(false)}
+                className="px-5 py-2.5 rounded-xl text-xs font-bold text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 cursor-pointer"
+              >
+                No, Cancel
+              </button>
+              <button
+                type="button"
+                disabled={!hasReadPolicy || !isConfirmedChecked || loading}
+                onClick={executeScan}
+                className="px-5 py-2.5 rounded-xl text-xs font-bold text-white bg-blue-600 hover:bg-blue-700 disabled:opacity-40 disabled:cursor-not-allowed transition-all shadow-md shadow-blue-600/20 flex items-center gap-1.5 cursor-pointer border-0"
+              >
+                <span className="material-symbols-outlined text-[16px]">play_circle</span>
+                <span>{loading ? "Initiating..." : "Yes, Start Scan"}</span>
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Security Policy & Legal Disclaimer Modal */}
+      {showPolicyModal && (
+        <div className="fixed inset-0 z-[10000] flex items-center justify-center p-4">
+          {/* Backdrop */}
+          <div 
+            className="fixed inset-0 bg-slate-900/70 backdrop-blur-md transition-opacity animate-fade-in"
+            onClick={() => setShowPolicyModal(false)}
+          ></div>
+
+          {/* Modal Content */}
+          <div className="relative bg-white dark:bg-slate-900 rounded-3xl border border-slate-200 dark:border-slate-800 shadow-2xl max-w-2xl w-full p-6 overflow-hidden z-10 animate-slide-up text-left flex flex-col max-h-[85vh]">
+            
+            {/* Modal Header */}
+            <div className="flex items-center justify-between pb-4 border-b border-slate-100 dark:border-slate-800 shrink-0">
+              <div className="flex items-center gap-2.5">
+                <span className="material-symbols-outlined text-blue-600 dark:text-blue-400 text-[24px]">gavel</span>
+                <h3 className="text-lg font-bold text-slate-900 dark:text-white tracking-tight">
+                  Security Policy & Legal Disclaimer
+                </h3>
+              </div>
+              <button
+                type="button"
+                onClick={() => setShowPolicyModal(false)}
+                className="text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 transition-colors bg-transparent border-0 cursor-pointer p-1"
+              >
+                <span className="material-symbols-outlined text-[20px]">close</span>
+              </button>
+            </div>
+
+            {/* Modal Body - Policy Content (Scrollable) */}
+            <div className="my-4 overflow-y-auto pr-2 flex-1 text-xs text-slate-600 dark:text-slate-300 leading-relaxed space-y-4 font-sans">
+              <div className="p-3 bg-slate-50 dark:bg-slate-800/50 rounded-xl border border-slate-200/60 dark:border-slate-700/60 font-mono text-[11px] text-slate-500">
+                <div><strong>Effective Date:</strong> August 15, 2026</div>
+                <div><strong>Applies to:</strong> All users of the Larshield vulnerability scanning platform ("the Service")</div>
+              </div>
+
+              <div>
+                <h4 className="font-bold text-slate-900 dark:text-white text-xs mb-1">1. Explicit Authorization and Legal Compliance</h4>
+                <p>By initiating any scan, probe, or assessment through Larshield, you explicitly certify, represent, and warrant that you possess full, documented, and legally verifiable authorization from the owner of the target system to conduct active security assessments, penetration testing, or vulnerability scanning against it.</p>
+                <p className="mt-2">You acknowledge that scanning any computer, network, or application without proper authorization is illegal under applicable law — including, without limitation, the Computer Fraud and Abuse Act (US), the Computer Misuse Act (UK), the Information Technology Act (India), and equivalent statutes in other jurisdictions. Larshield is intended strictly for authorized security testing, such as systems you own, systems within a scope you have been contractually engaged to test, or environments explicitly designated for security research (e.g., CTF ranges, bug bounty programs with defined scope).</p>
+              </div>
+
+              <div>
+                <h4 className="font-bold text-slate-900 dark:text-white text-xs mb-1">2. Assumption of Risk & Potential Impact</h4>
+                <p>You acknowledge that vulnerability scanning and penetration testing are inherently intrusive activities. Depending on configuration, they may involve port scanning, service fingerprinting, exploitation simulation, or payload delivery, any of which could cause service degradation, data loss, or downtime on the target system.</p>
+                <p className="mt-2">By using Larshield, you accept full responsibility for any operational impact resulting from your use of the tool, and you agree to take reasonable precautions (e.g., scheduling scans during maintenance windows, using rate-limited or passive modes where appropriate) when testing production systems.</p>
+              </div>
+
+              <div>
+                <h4 className="font-bold text-slate-900 dark:text-white text-xs mb-1">3. Indemnification and Hold Harmless</h4>
+                <p>You agree to indemnify, defend, and hold harmless the Larshield project, its developer(s), contributors, and affiliates from any claims, damages, liabilities, costs, or losses (including reasonable legal fees) arising from your use of the Service — including any unauthorized or improper use.</p>
+                <p className="mt-2">Larshield is provided on an "AS IS" and "AS AVAILABLE" basis, without warranties of any kind, express or implied, including but not limited to fitness for a particular purpose or non-infringement. Larshield and its creators shall not be liable for any direct, indirect, incidental, or consequential damages resulting from use or misuse of the Service.</p>
+              </div>
+
+              <div>
+                <h4 className="font-bold text-slate-900 dark:text-white text-xs mb-1">4. Audit Logging and Cooperation with Authorities</h4>
+                <p>Larshield logs scan activity, including origin IP address, timestamp, scan configuration, and target parameters, for security, abuse-prevention, and accountability purposes.</p>
+                <p className="mt-2">In the event of an investigation into unauthorized access, abuse, or a legal inquiry, Larshield reserves the right to share relevant audit logs with law enforcement, hosting providers, or the affected system owner, as required or permitted by law.</p>
+              </div>
+
+              <div>
+                <h4 className="font-bold text-slate-900 dark:text-white text-xs mb-1">5. Acceptable Use</h4>
+                <p>You agree not to use Larshield to:</p>
+                <ul className="list-disc pl-5 mt-1 space-y-1">
+                  <li>Scan or test any system without documented authorization from its owner</li>
+                  <li>Deliver malicious payloads intended to cause damage beyond what is necessary for a legitimate, authorized assessment</li>
+                  <li>Circumvent rate limits or access controls of third-party systems outside an agreed testing scope</li>
+                </ul>
+              </div>
+
+              <div>
+                <h4 className="font-bold text-slate-900 dark:text-white text-xs mb-1">6. Data Handling</h4>
+                <p>Scan results are stored per-user and are not shared with third parties except as required under Section 4.</p>
+              </div>
+
+              <div>
+                <h4 className="font-bold text-slate-900 dark:text-white text-xs mb-1">7. Changes to This Policy</h4>
+                <p>Larshield may update this policy from time to time. Continued use of the Service after changes are posted constitutes acceptance of the revised policy.</p>
+              </div>
+
+              <p className="pt-2 font-semibold text-slate-900 dark:text-white">
+                By clicking "I Accept" below, you confirm that you have read, understood, and agree to be bound by this Security Policy & EULA.
+              </p>
+
+              {/* Checkbox Section inside Modal */}
+              <div className="p-4 bg-slate-100 dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 flex flex-col gap-2.5 mt-4">
+                <label className="flex items-center gap-2.5 text-xs font-semibold text-slate-800 dark:text-slate-200 cursor-pointer">
+                  <input
+                    type="checkbox"
+                    checked={policyCheck1}
+                    onChange={(e) => setPolicyCheck1(e.target.checked)}
+                    className="h-4 w-4 rounded border-slate-300 text-blue-600 focus:ring-blue-500 cursor-pointer"
+                  />
+                  <span>I have read and agree to the terms above</span>
+                </label>
+                <label className="flex items-center gap-2.5 text-xs font-semibold text-slate-800 dark:text-slate-200 cursor-pointer">
+                  <input
+                    type="checkbox"
+                    checked={policyCheck2}
+                    onChange={(e) => setPolicyCheck2(e.target.checked)}
+                    className="h-4 w-4 rounded border-slate-300 text-blue-600 focus:ring-blue-500 cursor-pointer"
+                  />
+                  <span>I certify that I have authorization to scan any target(s) I submit to this Service</span>
+                </label>
+              </div>
+            </div>
+
+            {/* Modal Footer */}
+            <div className="flex items-center justify-end gap-3 pt-4 border-t border-slate-100 dark:border-slate-800 shrink-0">
+              <button
+                type="button"
+                onClick={() => setShowPolicyModal(false)}
+                className="px-5 py-2.5 rounded-xl text-xs font-bold text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 cursor-pointer"
+              >
+                Cancel
+              </button>
+              <button
+                type="button"
+                disabled={!policyCheck1 || !policyCheck2}
+                onClick={() => {
+                  setHasReadPolicy(true);
+                  setShowPolicyModal(false);
+                }}
+                className="px-6 py-2.5 rounded-xl text-xs font-bold text-white bg-blue-600 hover:bg-blue-700 disabled:opacity-40 disabled:cursor-not-allowed transition-all shadow-md shadow-blue-600/20 cursor-pointer border-0"
+              >
+                I Accept
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
     </div>
   );
 };