documentation-hub 5.7.2

package/src/components/settings/CertificateManager.tsx

@@ -0,0 +1,410 @@
+import { useState, useEffect, useRef } from 'react';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/common/Card';
+import { Button } from '@/components/common/Button';
+import { Input } from '@/components/common/Input';
+import { AlertCircle, CheckCircle2, Upload, Shield, Download, Info, Trash2 } from 'lucide-react';
+import logger from '@/utils/logger';
+
+interface Certificate {
+  path: string;
+  name: string;
+  issuer?: string;
+  subject?: string;
+  validUntil?: string;
+  isActive: boolean;
+  isZscaler?: boolean;
+}
+
+export function CertificateManager() {
+  const [certificates, setCertificates] = useState<Certificate[]>([]);
+  const [isZscalerDetected, setIsZscalerDetected] = useState(false);
+  const [certificateStatus, setCertificateStatus] = useState<
+    'checking' | 'configured' | 'not-configured' | 'error'
+  >('checking');
+  const [importStatus, setImportStatus] = useState<{
+    type: 'success' | 'error' | 'info' | null;
+    message: string;
+  }>({ type: null, message: '' });
+  const [currentCertPath, setCurrentCertPath] = useState<string>('');
+
+  // Timeout refs for cleanup
+  const importTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const detectTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const testTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  useEffect(() => {
+    checkCertificateStatus();
+    loadExistingCertificates();
+
+    // Listen for certificate configuration from main process
+    const handleCertificateConfigured = (_event: unknown, data: { certPath: string }) => {
+      setCertificateStatus('configured');
+      setCurrentCertPath(data.certPath);
+      loadExistingCertificates();
+    };
+
+    window.electronAPI.on('certificate-configured', handleCertificateConfigured);
+
+    return () => {
+      window.electronAPI.removeListener('certificate-configured', handleCertificateConfigured);
+    };
+  }, []);
+
+  // Cleanup all timeouts on unmount
+  useEffect(() => {
+    return () => {
+      if (importTimeoutRef.current) {
+        clearTimeout(importTimeoutRef.current);
+      }
+      if (detectTimeoutRef.current) {
+        clearTimeout(detectTimeoutRef.current);
+      }
+      if (testTimeoutRef.current) {
+        clearTimeout(testTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  const checkCertificateStatus = async () => {
+    try {
+      // Check if Zscaler is detected
+      const zscalerStatus = await window.electronAPI.checkZscalerStatus();
+      setIsZscalerDetected(zscalerStatus.detected);
+
+      // Check current certificate configuration
+      const certPath = await window.electronAPI.getCertificatePath();
+      if (certPath) {
+        setCertificateStatus('configured');
+        setCurrentCertPath(certPath);
+      } else {
+        setCertificateStatus('not-configured');
+      }
+    } catch (_error) {
+      logger.error('Error checking certificate status:', _error);
+      setCertificateStatus('error');
+    }
+  };
+
+  const loadExistingCertificates = async () => {
+    try {
+      const certPaths = await window.electronAPI.getInstalledCertificates();
+      const certs: Certificate[] = certPaths.map((path: string) => ({
+        path,
+        name: path.split('/').pop() || path,
+        isActive: path === currentCertPath,
+      }));
+      setCertificates(certs);
+    } catch (_error) {
+      logger.error('Error loading certificates:', _error);
+    }
+  };
+
+  const handleImportCertificate = async () => {
+    try {
+      const result = await window.electronAPI.importCertificate();
+
+      if (result.success) {
+        setImportStatus({
+          type: 'success',
+          message: `Certificate imported successfully: ${result.name}`,
+        });
+        setCertificateStatus('configured');
+        loadExistingCertificates();
+      } else {
+        setImportStatus({
+          type: 'error',
+          message: result.error || 'Failed to import certificate',
+        });
+      }
+    } catch (_error) {
+      setImportStatus({
+        type: 'error',
+        message: 'Error importing certificate',
+      });
+    }
+
+    // Clear status after 5 seconds
+    if (importTimeoutRef.current) {
+      clearTimeout(importTimeoutRef.current);
+    }
+    importTimeoutRef.current = setTimeout(() => {
+      setImportStatus({ type: null, message: '' });
+      importTimeoutRef.current = null;
+    }, 5000);
+  };
+
+  const handleExportFromBrowser = async () => {
+    try {
+      // Open instructions in browser
+      await window.electronAPI.openExternal(
+        'https://github.com/ItMeDiaTech/Documentation_Hub/wiki/Export-Certificate-From-Browser'
+      );
+    } catch (_error) {
+      logger.error('Error opening browser guide:', _error);
+    }
+  };
+
+  const handleAutoDetect = async () => {
+    setImportStatus({ type: 'info', message: 'Searching for certificates in Windows store...' });
+
+    try {
+      const result = await window.electronAPI.autoDetectCertificates();
+
+      if (result.success) {
+        setImportStatus({
+          type: 'success',
+          message: `Found and configured ${result.count} certificate(s)`,
+        });
+        setCertificateStatus('configured');
+        loadExistingCertificates();
+      } else {
+        setImportStatus({
+          type: 'error',
+          message: 'No Zscaler certificates found. You may need to export manually.',
+        });
+      }
+    } catch (_error) {
+      setImportStatus({
+        type: 'error',
+        message: 'Error detecting certificates',
+      });
+    }
+
+    if (detectTimeoutRef.current) {
+      clearTimeout(detectTimeoutRef.current);
+    }
+    detectTimeoutRef.current = setTimeout(() => {
+      setImportStatus({ type: null, message: '' });
+      detectTimeoutRef.current = null;
+    }, 5000);
+  };
+
+  const handleRemoveCertificate = async (certPath: string) => {
+    try {
+      const result = await window.electronAPI.removeCertificate(certPath);
+      if (result.success) {
+        loadExistingCertificates();
+      }
+    } catch (_error) {
+      logger.error('Error removing certificate:', _error);
+    }
+  };
+
+  const handleTestConnection = async () => {
+    setImportStatus({ type: 'info', message: 'Testing connection to GitHub...' });
+
+    try {
+      const result = await window.electronAPI.testGitHubConnection();
+
+      if (result.success) {
+        setImportStatus({
+          type: 'success',
+          message: 'Connection successful! Updates should work now.',
+        });
+      } else {
+        setImportStatus({
+          type: 'error',
+          message: `Connection failed: ${result.error}`,
+        });
+      }
+    } catch (_error) {
+      setImportStatus({
+        type: 'error',
+        message: 'Error testing connection',
+      });
+    }
+
+    if (testTimeoutRef.current) {
+      clearTimeout(testTimeoutRef.current);
+    }
+    testTimeoutRef.current = setTimeout(() => {
+      setImportStatus({ type: null, message: '' });
+      testTimeoutRef.current = null;
+    }, 5000);
+  };
+
+  return (
+    <div className="space-y-4">
+      {/* Status Banner */}
+      {isZscalerDetected && (
+        <Card className="border-yellow-500 bg-yellow-50 dark:bg-yellow-950/20">
+          <CardHeader>
+            <div className="flex items-center gap-2">
+              <Shield className="h-5 w-5 text-yellow-600" />
+              <CardTitle className="text-lg">Zscaler Detected</CardTitle>
+            </div>
+            <CardDescription>
+              Zscaler is performing SSL inspection on your network. Certificate configuration is
+              required for automatic updates.
+            </CardDescription>
+          </CardHeader>
+        </Card>
+      )}
+
+      {/* Certificate Status */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Certificate Configuration</CardTitle>
+          <CardDescription>
+            Manage certificates for secure connections through corporate networks
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {/* Current Status */}
+          <div className="flex items-center justify-between p-4 rounded-lg bg-muted">
+            <div className="flex items-center gap-3">
+              {certificateStatus === 'configured' ? (
+                <CheckCircle2 className="h-5 w-5 text-green-600" />
+              ) : (
+                <AlertCircle className="h-5 w-5 text-yellow-600" />
+              )}
+              <div>
+                <p className="font-medium">
+                  {certificateStatus === 'configured'
+                    ? 'Certificate Configured'
+                    : 'Certificate Not Configured'}
+                </p>
+                {currentCertPath && (
+                  <p className="text-sm text-muted-foreground">{currentCertPath}</p>
+                )}
+              </div>
+            </div>
+            <Button variant="outline" size="sm" onClick={handleTestConnection}>
+              Test Connection
+            </Button>
+          </div>
+
+          {/* Import Status Message */}
+          {importStatus.type && (
+            <div
+              className={`p-3 rounded-lg flex items-center gap-2 ${
+                importStatus.type === 'success'
+                  ? 'bg-green-50 text-green-700 dark:bg-green-950/20'
+                  : importStatus.type === 'error'
+                    ? 'bg-red-50 text-red-700 dark:bg-red-950/20'
+                    : 'bg-blue-50 text-blue-700 dark:bg-blue-950/20'
+              }`}
+            >
+              <Info className="h-4 w-4" />
+              <span className="text-sm">{importStatus.message}</span>
+            </div>
+          )}
+
+          {/* Actions */}
+          <div className="flex gap-2">
+            <Button onClick={handleAutoDetect} variant="default" className="flex-1">
+              <Shield className="mr-2 h-4 w-4" />
+              Auto-Detect Certificates
+            </Button>
+            <Button onClick={handleImportCertificate} variant="outline" className="flex-1">
+              <Upload className="mr-2 h-4 w-4" />
+              Import Certificate
+            </Button>
+          </div>
+
+          <Button onClick={handleExportFromBrowser} variant="ghost" className="w-full">
+            <Download className="mr-2 h-4 w-4" />
+            How to Export Certificate from Browser
+          </Button>
+        </CardContent>
+      </Card>
+
+      {/* Installed Certificates */}
+      {certificates.length > 0 && (
+        <Card>
+          <CardHeader>
+            <CardTitle>Installed Certificates</CardTitle>
+            <CardDescription>Certificates currently available to the application</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-2">
+              {certificates.map((cert, index) => (
+                <div
+                  key={index}
+                  className="flex items-center justify-between p-3 rounded-lg border"
+                >
+                  <div className="flex-1">
+                    <div className="flex items-center gap-2">
+                      <p className="font-medium">{cert.name}</p>
+                      {cert.isZscaler && (
+                        <span className="text-xs px-2 py-0.5 rounded bg-yellow-100 text-yellow-700 dark:bg-yellow-900 dark:text-yellow-300">
+                          Zscaler
+                        </span>
+                      )}
+                      {cert.isActive && (
+                        <span className="text-xs px-2 py-0.5 rounded bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300">
+                          Active
+                        </span>
+                      )}
+                    </div>
+                    {cert.issuer && (
+                      <p className="text-sm text-muted-foreground">Issuer: {cert.issuer}</p>
+                    )}
+                    {cert.validUntil && (
+                      <p className="text-sm text-muted-foreground">
+                        Valid until: {cert.validUntil}
+                      </p>
+                    )}
+                  </div>
+                  <Button
+                    onClick={() => handleRemoveCertificate(cert.path)}
+                    variant="ghost"
+                    size="icon"
+                  >
+                    <Trash2 className="h-4 w-4" />
+                  </Button>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Help Section */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Troubleshooting Guide</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-3 text-sm">
+            <div>
+              <p className="font-medium mb-1">If auto-detect doesn't work:</p>
+              <ol className="list-decimal list-inside space-y-1 text-muted-foreground ml-2">
+                <li>Open Chrome or Edge and navigate to https://github.com</li>
+                <li>Click the padlock icon in the address bar</li>
+                <li>Select "Connection is secure" → "Certificate is valid"</li>
+                <li>Go to the "Details" tab and select the root certificate</li>
+                <li>Export as Base64 encoded .CER or .PEM file</li>
+                <li>Use the "Import Certificate" button to import the file</li>
+              </ol>
+            </div>
+
+            <div>
+              <p className="font-medium mb-1">Common certificate names:</p>
+              <ul className="list-disc list-inside space-y-1 text-muted-foreground ml-2">
+                <li>Zscaler Root CA</li>
+                <li>Zscaler Intermediate Root CA</li>
+                <li>Your Company Root CA</li>
+                <li>Corporate Proxy Certificate</li>
+              </ul>
+            </div>
+
+            <div className="mt-4 p-3 rounded-lg bg-muted">
+              <p className="text-xs text-muted-foreground">
+                <strong>Note:</strong> If you continue to have issues, contact your IT department
+                and request that *.github.com and *.githubusercontent.com be bypassed from SSL
+                inspection.
+              </p>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/src/components/settings/SegmentedControl.tsx

@@ -0,0 +1,88 @@
+import { motion } from 'framer-motion';
+import { cn } from '@/utils/cn';
+import type { LucideIcon } from 'lucide-react';
+
+interface SegmentedControlOption<T extends string> {
+  value: T;
+  label: string;
+  icon?: LucideIcon;
+}
+
+interface SegmentedControlProps<T extends string> {
+  value: T;
+  onValueChange: (value: T) => void;
+  options: SegmentedControlOption<T>[];
+  className?: string;
+  size?: 'sm' | 'md' | 'lg';
+}
+
+export function SegmentedControl<T extends string>({
+  value,
+  onValueChange,
+  options,
+  className,
+  size = 'md',
+}: SegmentedControlProps<T>) {
+  const sizeStyles = {
+    sm: 'p-0.5 text-xs',
+    md: 'p-1 text-sm',
+    lg: 'p-1.5 text-base',
+  };
+
+  const buttonSizeStyles = {
+    sm: 'px-2.5 py-1',
+    md: 'px-4 py-2',
+    lg: 'px-5 py-2.5',
+  };
+
+  const iconSizeStyles = {
+    sm: 'w-3.5 h-3.5',
+    md: 'w-4 h-4',
+    lg: 'w-5 h-5',
+  };
+
+  return (
+    <div
+      role="radiogroup"
+      className={cn(
+        'inline-flex items-center rounded-lg bg-muted/50 border border-border',
+        sizeStyles[size],
+        className
+      )}
+    >
+      {options.map((option) => {
+        const isSelected = value === option.value;
+        const Icon = option.icon;
+
+        return (
+          <button
+            key={option.value}
+            type="button"
+            role="radio"
+            aria-checked={isSelected}
+            onClick={() => onValueChange(option.value)}
+            className={cn(
+              'relative flex items-center justify-center gap-2 rounded-md font-medium transition-colors',
+              buttonSizeStyles[size],
+              isSelected
+                ? 'text-foreground'
+                : 'text-muted-foreground hover:text-foreground'
+            )}
+          >
+            {isSelected && (
+              <motion.div
+                layoutId="segmented-indicator"
+                className="absolute inset-0 bg-background rounded-md shadow-sm border border-border/50"
+                transition={{ type: 'spring', stiffness: 400, damping: 30 }}
+              />
+            )}
+            <span className="relative flex items-center gap-2">
+              {Icon && <Icon className={iconSizeStyles[size]} />}
+              <span>{option.label}</span>
+            </span>
+          </button>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/settings/SettingRow.tsx

@@ -0,0 +1,52 @@
+import { cn } from '@/utils/cn';
+import type { LucideIcon } from 'lucide-react';
+import type { ReactNode } from 'react';
+
+interface SettingRowProps {
+  icon?: LucideIcon;
+  title: string;
+  description?: string;
+  badge?: string;
+  children: ReactNode;
+  className?: string;
+}
+
+export function SettingRow({
+  icon: Icon,
+  title,
+  description,
+  badge,
+  children,
+  className,
+}: SettingRowProps) {
+  return (
+    <div
+      className={cn(
+        'flex items-center justify-between gap-4 py-3',
+        className
+      )}
+    >
+      <div className="flex items-start gap-3 flex-1 min-w-0">
+        {Icon && (
+          <div className="p-2 rounded-lg bg-muted shrink-0 mt-0.5">
+            <Icon className="w-4 h-4 text-muted-foreground" />
+          </div>
+        )}
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2">
+            <span className="text-sm font-medium">{title}</span>
+            {badge && (
+              <span className="px-1.5 py-0.5 text-[10px] font-medium rounded bg-muted text-muted-foreground uppercase tracking-wide">
+                {badge}
+              </span>
+            )}
+          </div>
+          {description && (
+            <p className="text-xs text-muted-foreground mt-0.5">{description}</p>
+          )}
+        </div>
+      </div>
+      <div className="shrink-0">{children}</div>
+    </div>
+  );
+}