Initial commit

app/(dashboard)/dashboard/connect/page.tsx

@@ -0,0 +1,138 @@
+'use client'
+
+import { useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Link2, ArrowRight, Loader2, AlertCircle, Clock, Shield } from 'lucide-react'
+
+export default function ConnectPage() {
+  const [sessionCode, setSessionCode] = useState('')
+  const [isConnecting, setIsConnecting] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const router = useRouter()
+
+  const handleConnect = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setIsConnecting(true)
+    setError(null)
+
+    const code = sessionCode.replace(/\s/g, '').toUpperCase()
+
+    if (code.length !== 6) {
+      setError('Please enter a valid 6-character session code')
+      setIsConnecting(false)
+      return
+    }
+
+    try {
+      const res = await fetch('/api/connect', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ code }),
+      })
+
+      const data = await res.json()
+
+      if (!res.ok) {
+        setError(data.error || 'Invalid or expired session code')
+        setIsConnecting(false)
+        return
+      }
+
+      router.push(`/viewer/${data.sessionId}`)
+    } catch {
+      setError('Network error. Please try again.')
+      setIsConnecting(false)
+    }
+  }
+
+  const formatCode = (value: string) => {
+    const cleaned = value.replace(/[^A-Za-z0-9]/g, '').toUpperCase()
+    if (cleaned.length <= 3) return cleaned
+    return `${cleaned.slice(0, 3)} ${cleaned.slice(3, 6)}`
+  }
+
+  return (
+    <div className="max-w-xl mx-auto space-y-6">
+      <div className="text-center">
+        <h2 className="text-2xl font-bold">Quick Connect</h2>
+        <p className="text-muted-foreground">Enter a session code to connect to a remote machine</p>
+      </div>
+
+      <Card className="border-border/50">
+        <CardHeader className="text-center">
+          <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-primary/10">
+            <Link2 className="h-8 w-8 text-primary" />
+          </div>
+          <CardTitle>Enter Session Code</CardTitle>
+          <CardDescription className="text-balance">
+            Ask the person on the remote machine to generate a code from their RemoteLink agent
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleConnect} className="space-y-4">
+            <div className="grid gap-2">
+              <Label htmlFor="code" className="sr-only">Session Code</Label>
+              <Input
+                id="code"
+                type="text"
+                placeholder="ABC 123"
+                value={sessionCode}
+                onChange={(e) => setSessionCode(formatCode(e.target.value))}
+                maxLength={7}
+                className="text-center text-3xl font-mono tracking-widest h-16 bg-secondary/50"
+                autoComplete="off"
+                autoFocus
+              />
+            </div>
+
+            {error && (
+              <div className="flex items-center gap-2 rounded-md bg-destructive/10 border border-destructive/20 p-3">
+                <AlertCircle className="h-4 w-4 text-destructive shrink-0" />
+                <p className="text-sm text-destructive">{error}</p>
+              </div>
+            )}
+
+            <Button
+              type="submit"
+              className="w-full h-12"
+              disabled={isConnecting || sessionCode.replace(/\s/g, '').length < 6}
+            >
+              {isConnecting ? (
+                <>
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  Connecting...
+                </>
+              ) : (
+                <>
+                  Connect
+                  <ArrowRight className="ml-2 h-4 w-4" />
+                </>
+              )}
+            </Button>
+          </form>
+        </CardContent>
+      </Card>
+
+      <div className="grid gap-4 sm:grid-cols-2">
+        <div className="flex items-start gap-3 p-4 rounded-lg bg-card border border-border/50">
+          <Clock className="h-5 w-5 text-primary mt-0.5" />
+          <div>
+            <p className="font-medium text-sm">Codes expire</p>
+            <p className="text-sm text-muted-foreground">Session codes are valid for 10 minutes</p>
+          </div>
+        </div>
+        <div className="flex items-start gap-3 p-4 rounded-lg bg-card border border-border/50">
+          <Shield className="h-5 w-5 text-primary mt-0.5" />
+          <div>
+            <p className="font-medium text-sm">Secure connection</p>
+            <p className="text-sm text-muted-foreground">All sessions are end-to-end encrypted</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}