feat: Introduce guest access for video viewing, implement user notification settings via email and Telegram, and add rate limiting infrastructure.

2026-09-11 17:46:06 +00:00 · 2026-02-07 13:56:26 +03:00
parent 296c5257a7
commit 88dcf9514c
17 changed files with 1566 additions and 39 deletions
@@ -0,0 +1,72 @@
+'use client';
+
+import { useState, useEffect, type ReactNode } from 'react';
+import Link from 'next/link';
+import { User } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+
+/**
+ * Client component that gates content behind a guest name prompt.
+ * If the user already has a name in localStorage, it skips the gate.
+ * Only renders children after the guest confirms their name.
+ */
+export function GuestGate({ children }: { children: ReactNode }) {
+  const [guestName, setGuestName] = useState('');
+  const [confirmed, setConfirmed] = useState(false);
+
+  useEffect(() => {
+    const saved = localStorage.getItem('openframe_guest_name');
+    if (saved) {
+      setGuestName(saved);
+      setConfirmed(true);
+    }
+  }, []);
+
+  if (confirmed) {
+    return <>{children}</>;
+  }
+
+  const confirm = () => {
+    if (!guestName.trim()) return;
+    localStorage.setItem('openframe_guest_name', guestName.trim());
+    setConfirmed(true);
+  };
+
+  return (
+    <div className="h-screen flex items-center justify-center bg-background">
+      <div className="w-full max-w-sm mx-auto p-6">
+        <div className="text-center mb-6">
+          <div className="inline-flex items-center justify-center w-12 h-12 rounded-full bg-primary/10 mb-4">
+            <User className="h-6 w-6 text-primary" />
+          </div>
+          <h1 className="text-xl font-semibold mb-1">Welcome to OpenFrame</h1>
+          <p className="text-sm text-muted-foreground">
+            Enter your name to view and comment on this project
+          </p>
+        </div>
+        <div className="space-y-3">
+          <Input
+            placeholder="Your name"
+            value={guestName}
+            onChange={(e) => setGuestName(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') confirm();
+            }}
+            autoFocus
+          />
+          <Button className="w-full" disabled={!guestName.trim()} onClick={confirm}>
+            Continue
+          </Button>
+        </div>
+        <p className="text-xs text-muted-foreground text-center mt-4">
+          Or{' '}
+          <Link href="/login" className="underline hover:text-foreground">
+            sign in
+          </Link>{' '}
+          with your account
+        </p>
+      </div>
+    </div>
+  );
+}