CORS UPloads

components/settings/HetznerConfigForm.tsx

@@ -6,7 +6,7 @@ import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Eye, EyeOff, HardDrive, CheckCircle2, AlertCircle } from 'lucide-react';
-import { saveHetznerConfig } from '@/actions/settings';
+import { saveHetznerConfig, configureHetznerCors } from '@/actions/settings';
 
 interface HetznerConfig {
   hetzner_endpoint: string;
@@ -25,6 +25,9 @@ export function HetznerConfigForm({ initialConfig }: Props) {
   const [loading, setLoading] = useState(false);
   const [status, setStatus] = useState<'idle' | 'success' | 'error'>('idle');
   const [errorMsg, setErrorMsg] = useState<string | null>(null);
+  const [corsLoading, setCorsLoading] = useState(false);
+  const [corsStatus, setCorsStatus] = useState<'idle' | 'success' | 'error'>('idle');
+  const [corsError, setCorsError] = useState<string | null>(null);
 
   function handleChange(key: keyof HetznerConfig) {
     return (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -49,6 +52,21 @@ export function HetznerConfigForm({ initialConfig }: Props) {
     }
   }
 
+  async function handleConfigureCors() {
+    setCorsLoading(true);
+    setCorsStatus('idle');
+    setCorsError(null);
+    try {
+      await configureHetznerCors();
+      setCorsStatus('success');
+    } catch (err: unknown) {
+      setCorsStatus('error');
+      setCorsError(err instanceof Error ? err.message : 'Failed to configure CORS.');
+    } finally {
+      setCorsLoading(false);
+    }
+  }
+
   return (
     <Card>
       <CardHeader>
@@ -140,6 +158,40 @@ export function HetznerConfigForm({ initialConfig }: Props) {
             {loading ? 'Saving…' : 'Save Configuration'}
           </Button>
         </form>
+
+        <div className="mt-6 border-t border-border pt-5 space-y-3">
+          <div>
+            <p className="text-sm font-medium">Batch Upload — CORS</p>
+            <p className="text-xs text-muted-foreground mt-0.5">
+              Required once so browsers can upload large MOV files directly to
+              Hetzner, bypassing the Cloudflare / Nginx size limit.
+            </p>
+          </div>
+
+          {corsStatus === 'success' && (
+            <div className="flex items-center gap-2 text-sm text-emerald-400">
+              <CheckCircle2 className="h-4 w-4 shrink-0" />
+              CORS policy applied — batch MOV uploads should now work.
+            </div>
+          )}
+
+          {corsStatus === 'error' && (
+            <div className="flex items-center gap-2 text-sm text-red-400">
+              <AlertCircle className="h-4 w-4 shrink-0" />
+              {corsError}
+            </div>
+          )}
+
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            disabled={corsLoading}
+            onClick={handleConfigureCors}
+          >
+            {corsLoading ? 'Applying…' : 'Configure CORS on bucket'}
+          </Button>
+        </div>
       </CardContent>
     </Card>
   );