ForgotPassword.jsx

Go to the documentation of this file.

import React, { useEffect, useState } from "react";
import { useSearchParams } from "react-router-dom";
import { apiFetch } from '../lib/api';
import "./DownloadStatusCard.css";
 
export default function DownloadStatus() {
  const [searchParams] = useSearchParams();
  const jobId = searchParams.get("job");  // <-- FIXED
  const os = searchParams.get("os");
  const [status, setStatus] = useState(null);
  const [filePath, setFilePath] = useState(null);
  const [error, setError] = useState(null);
  const [step, setStep] = useState(0);
 
  // Poll backend for job status
  useEffect(() => {
    if (!jobId) {
      setError("No job ID provided.");
      return;
    }
 
    let timer = setInterval(async () => {
      try {
        const res = await api.get(`/builder/status/${jobId}`);
 
        if (!res) return;
 
        setStatus(res.status);
        if (res.status === "queued") setStep(1);
        if (res.status === "building") setStep(2);
        if (res.status === "complete") setStep(3);
        if (res.status === "failed") setStep(-1);
 
        if (res.filePath) {
          setFilePath(res.filePath);
        }
 
        if (res.status === "complete" && res.filePath) {
          clearInterval(timer);
 
          // Auto-download
          window.location.href = res.filePath;
        }
 
        if (res.status === "failed") {
          clearInterval(timer);
          setError("Build failed. Please try again.");
        }
      } catch (err) {
        setError("Status check failed.");
        console.error(err);
      }
    }, 2000);
 
    return () => clearInterval(timer);
  }, [jobId]);
 
  // Progress bar width by step
  const progressWidth = step === 1 ? "33%" : step === 2 ? "66%" : step === 3 ? "100%" : "0%";
  const statusText = step === 1 ? "Queued" : step === 2 ? "Building" : step === 3 ? "Ready" : step === -1 ? "Failed" : "Loading…";
 
  return (
    <div className="download-status-page" style={{ display: "flex", justifyContent: "center", alignItems: "center", minHeight: "80vh" }}>
      <div className="download-status-card">
        <div className="download-status-title">Agent Installer Status</div>
        <div className="download-status-progress">
          <div className="download-status-bar" style={{ width: progressWidth }}></div>
        </div>
        <div className="download-status-step">{statusText}</div>
        <div className="download-status-meta">
          <span><b>Job ID:</b> {jobId}</span>
          <span><b>Device:</b> {os ? os.toUpperCase() : "-"}</span>
        </div>
        {error && <div className="download-status-error">{error}</div>}
        {step === 3 && filePath && (
          <div className="download-status-ready">
            <a className="download-status-btn" href={filePath} download>
              Download Installer
            </a>
            <div style={{ marginTop: "0.5rem" }}>
              <span>Installer is ready. If your download didn't start, click above.</span>
            </div>
          </div>
        )}
        {step === -1 && (
          <div className="download-status-error">
            Build failed. <button className="download-status-btn" onClick={() => window.location.reload()}>Retry</button>
          </div>
        )}
      </div>
    </div>
  );
}