@sansavision/create-pulse 0.4.1 → 0.4.3

package/templates/nextjs-auth-demo/src/app/auth/sign-up/page.tsx

@@ -0,0 +1,153 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import Link from "next/link";
+import { signUp } from "@/lib/auth-client";
+import { Zap, Mail, Lock, User, ArrowRight, Loader2 } from "lucide-react";
+
+export default function SignUpPage() {
+    const router = useRouter();
+    const [name, setName] = useState("");
+    const [email, setEmail] = useState("");
+    const [password, setPassword] = useState("");
+    const [error, setError] = useState("");
+    const [loading, setLoading] = useState(false);
+
+    async function handleSubmit(e: React.FormEvent) {
+        e.preventDefault();
+        setError("");
+        setLoading(true);
+
+        try {
+            const result = await signUp.email({
+                name,
+                email,
+                password,
+            });
+
+            if (result.error) {
+                setError(result.error.message || "Sign up failed");
+            } else {
+                router.push("/dashboard");
+            }
+        } catch {
+            setError("An unexpected error occurred");
+        } finally {
+            setLoading(false);
+        }
+    }
+
+    return (
+        <div className="min-h-screen flex items-center justify-center px-4 relative overflow-hidden">
+            <div className="absolute top-1/4 left-1/3 w-80 h-80 bg-purple-500/15 rounded-full blur-[100px]" />
+            <div className="absolute bottom-1/4 right-1/3 w-80 h-80 bg-cyan-500/15 rounded-full blur-[100px]" />
+
+            <div className="w-full max-w-md relative z-10">
+                <div className="text-center mb-8">
+                    <Link href="/" className="inline-flex items-center gap-2 mb-6">
+                        <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-purple-500 to-cyan-500 flex items-center justify-center">
+                            <Zap className="w-6 h-6 text-white" />
+                        </div>
+                        <span className="text-2xl font-bold">Pulse</span>
+                    </Link>
+                    <h1 className="text-2xl font-bold mb-2">Create your account</h1>
+                    <p className="text-slate-400">
+                        Start exploring the real-time protocol
+                    </p>
+                </div>
+
+                <form
+                    onSubmit={handleSubmit}
+                    className="glass rounded-2xl p-8 space-y-5"
+                >
+                    {error && (
+                        <div className="p-3 rounded-lg bg-red-500/10 border border-red-500/20 text-red-400 text-sm">
+                            {error}
+                        </div>
+                    )}
+
+                    <div>
+                        <label className="block text-sm font-medium text-slate-300 mb-1.5">
+                            Name
+                        </label>
+                        <div className="relative">
+                            <User className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-500" />
+                            <input
+                                type="text"
+                                value={name}
+                                onChange={(e) => setName(e.target.value)}
+                                placeholder="Your name"
+                                required
+                                className="w-full pl-10 pr-4 py-2.5 rounded-lg bg-slate-800/50 border border-slate-700 focus:border-purple-500 focus:ring-1 focus:ring-purple-500 outline-none text-sm transition-colors placeholder:text-slate-600"
+                            />
+                        </div>
+                    </div>
+
+                    <div>
+                        <label className="block text-sm font-medium text-slate-300 mb-1.5">
+                            Email
+                        </label>
+                        <div className="relative">
+                            <Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-500" />
+                            <input
+                                type="email"
+                                value={email}
+                                onChange={(e) => setEmail(e.target.value)}
+                                placeholder="you@example.com"
+                                required
+                                className="w-full pl-10 pr-4 py-2.5 rounded-lg bg-slate-800/50 border border-slate-700 focus:border-purple-500 focus:ring-1 focus:ring-purple-500 outline-none text-sm transition-colors placeholder:text-slate-600"
+                            />
+                        </div>
+                    </div>
+
+                    <div>
+                        <label className="block text-sm font-medium text-slate-300 mb-1.5">
+                            Password
+                        </label>
+                        <div className="relative">
+                            <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-500" />
+                            <input
+                                type="password"
+                                value={password}
+                                onChange={(e) => setPassword(e.target.value)}
+                                placeholder="••••••••"
+                                required
+                                minLength={8}
+                                className="w-full pl-10 pr-4 py-2.5 rounded-lg bg-slate-800/50 border border-slate-700 focus:border-purple-500 focus:ring-1 focus:ring-purple-500 outline-none text-sm transition-colors placeholder:text-slate-600"
+                            />
+                        </div>
+                        <p className="text-xs text-slate-500 mt-1">
+                            Must be at least 8 characters
+                        </p>
+                    </div>
+
+                    <button
+                        type="submit"
+                        disabled={loading}
+                        className="w-full py-2.5 bg-gradient-to-r from-purple-600 to-cyan-600 hover:from-purple-500 hover:to-cyan-500 rounded-lg font-semibold transition-all hover:shadow-lg hover:shadow-purple-500/25 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+                    >
+                        {loading ? (
+                            <Loader2 className="w-4 h-4 animate-spin" />
+                        ) : (
+                            <>
+                                Create Account
+                                <ArrowRight className="w-4 h-4" />
+                            </>
+                        )}
+                    </button>
+
+                    <p className="text-center text-sm text-slate-400">
+                        Already have an account?{" "}
+                        <Link
+                            href="/auth/sign-in"
+                            className="text-purple-400 hover:text-purple-300 font-medium"
+                        >
+                            Sign in
+                        </Link>
+                    </p>
+                </form>
+            </div>
+        </div>
+    );
+}

package/templates/nextjs-auth-demo/src/app/dashboard/demos/chat/page.tsx

@@ -0,0 +1,248 @@
+"use client";
+
+import { useState, useEffect, useRef, useCallback } from "react";
+import { useSession } from "@/lib/auth-client";
+import { connectWithAuth } from "@/lib/pulse";
+import {
+    Send,
+    Users,
+    Wifi,
+    WifiOff,
+    Shield,
+    Loader2,
+    MessageSquare,
+} from "lucide-react";
+import type { PulseConnection } from "@sansavision/pulse-sdk";
+
+interface ChatMessage {
+    id: string;
+    user: string;
+    userId: string;
+    text: string;
+    timestamp: number;
+}
+
+export default function ChatDemoPage() {
+    const { data: session } = useSession();
+    const [connected, setConnected] = useState(false);
+    const [messages, setMessages] = useState<ChatMessage[]>([]);
+    const [input, setInput] = useState("");
+    const [authUser, setAuthUser] = useState<{
+        id: string;
+        claims: Record<string, string>;
+    } | null>(null);
+    const [onlineUsers, setOnlineUsers] = useState<string[]>([]);
+    const [connecting, setConnecting] = useState(true);
+    const messagesEndRef = useRef<HTMLDivElement>(null);
+    const connRef = useRef<PulseConnection | null>(null);
+
+    const scrollToBottom = useCallback(() => {
+        messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+    }, []);
+
+    useEffect(() => {
+        if (!session) return;
+        let cancelled = false;
+
+        async function init() {
+            try {
+                const connection = await connectWithAuth();
+                if (cancelled) return;
+
+                connRef.current = connection;
+                setConnected(true);
+                setConnecting(false);
+
+                // Check auth user from the ACCEPT payload
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const user = (connection as any).user;
+                if (user) setAuthUser(user);
+
+                // Open a chat stream
+                const stream = connection.stream("chat-room");
+
+                // Announce join
+                stream.send(
+                    JSON.stringify({
+                        type: "join",
+                        user: session!.user.name,
+                        userId: session!.user.id,
+                    })
+                );
+
+                // Listen for messages
+                stream.on("data", (data: Uint8Array) => {
+                    try {
+                        const msg = JSON.parse(new TextDecoder().decode(data));
+                        if (msg.type === "chat") {
+                            setMessages((prev) => [
+                                ...prev,
+                                {
+                                    id: crypto.randomUUID(),
+                                    user: msg.user,
+                                    userId: msg.userId,
+                                    text: msg.text,
+                                    timestamp: Date.now(),
+                                },
+                            ]);
+                        } else if (msg.type === "join") {
+                            setOnlineUsers((prev) =>
+                                prev.includes(msg.user) ? prev : [...prev, msg.user]
+                            );
+                            setMessages((prev) => [
+                                ...prev,
+                                {
+                                    id: crypto.randomUUID(),
+                                    user: "System",
+                                    userId: "system",
+                                    text: `${msg.user} joined the chat`,
+                                    timestamp: Date.now(),
+                                },
+                            ]);
+                        }
+                    } catch {
+                        // ignore parse errors
+                    }
+                });
+
+                connection.on("disconnect", () => setConnected(false));
+                connection.on("reconnected", () => setConnected(true));
+            } catch (err) {
+                console.error("Failed to connect:", err);
+                setConnecting(false);
+            }
+        }
+
+        init();
+
+        return () => {
+            cancelled = true;
+            connRef.current?.disconnect();
+        };
+    }, [session]);
+
+    useEffect(scrollToBottom, [messages, scrollToBottom]);
+
+    function sendMessage(e: React.FormEvent) {
+        e.preventDefault();
+        if (!input.trim() || !connRef.current) return;
+
+        const stream = connRef.current.stream("chat-room");
+        stream.send(
+            JSON.stringify({
+                type: "chat",
+                user: session?.user?.name || "Anonymous",
+                userId: session?.user?.id || "unknown",
+                text: input.trim(),
+            })
+        );
+        setInput("");
+    }
+
+    return (
+        <div className="h-screen flex flex-col">
+            {/* Header */}
+            <div className="p-4 border-b border-slate-800 flex items-center justify-between">
+                <div className="flex items-center gap-3">
+                    <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center">
+                        <MessageSquare className="w-5 h-5 text-white" />
+                    </div>
+                    <div>
+                        <h1 className="text-lg font-semibold">Real-time Chat</h1>
+                        <p className="text-xs text-slate-500">
+                            Multi-user authenticated messaging
+                        </p>
+                    </div>
+                </div>
+                <div className="flex items-center gap-4">
+                    {authUser && (
+                        <div className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-green-500/10 border border-green-500/20">
+                            <Shield className="w-3.5 h-3.5 text-green-400" />
+                            <span className="text-xs text-green-400">
+                                {authUser.claims.name || authUser.id}
+                            </span>
+                        </div>
+                    )}
+                    <div className="flex items-center gap-2">
+                        {connected ? (
+                            <>
+                                <Wifi className="w-4 h-4 text-green-400" />
+                                <span className="text-xs text-green-400">Connected</span>
+                            </>
+                        ) : (
+                            <>
+                                <WifiOff className="w-4 h-4 text-red-400" />
+                                <span className="text-xs text-red-400">Disconnected</span>
+                            </>
+                        )}
+                    </div>
+                    <div className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-slate-800">
+                        <Users className="w-3.5 h-3.5 text-slate-400" />
+                        <span className="text-xs text-slate-400">
+                            {onlineUsers.length || 1} online
+                        </span>
+                    </div>
+                </div>
+            </div>
+
+            {/* Messages */}
+            <div className="flex-1 overflow-y-auto p-4 space-y-3">
+                {connecting && (
+                    <div className="flex items-center justify-center py-20">
+                        <Loader2 className="w-6 h-6 animate-spin text-purple-500 mr-2" />
+                        <span className="text-slate-400">
+                            Connecting to Pulse relay...
+                        </span>
+                    </div>
+                )}
+
+                {messages.map((msg) => (
+                    <div
+                        key={msg.id}
+                        className={`flex ${msg.userId === session?.user?.id ? "justify-end" : "justify-start"
+                            }`}
+                    >
+                        <div
+                            className={`max-w-md px-4 py-2.5 rounded-2xl text-sm ${msg.userId === "system"
+                                ? "bg-slate-800/50 text-slate-500 text-center text-xs mx-auto italic"
+                                : msg.userId === session?.user?.id
+                                    ? "bg-purple-600 text-white rounded-br-md"
+                                    : "glass text-slate-200 rounded-bl-md"
+                                }`}
+                        >
+                            {msg.userId !== "system" && msg.userId !== session?.user?.id && (
+                                <div className="text-xs text-purple-400 font-medium mb-1">
+                                    {msg.user}
+                                </div>
+                            )}
+                            {msg.text}
+                        </div>
+                    </div>
+                ))}
+                <div ref={messagesEndRef} />
+            </div>
+
+            {/* Input */}
+            <form
+                onSubmit={sendMessage}
+                className="p-4 border-t border-slate-800 flex gap-3"
+            >
+                <input
+                    type="text"
+                    value={input}
+                    onChange={(e) => setInput(e.target.value)}
+                    placeholder="Type a message..."
+                    disabled={!connected}
+                    className="flex-1 px-4 py-2.5 rounded-xl bg-slate-800/50 border border-slate-700 focus:border-purple-500 focus:ring-1 focus:ring-purple-500 outline-none text-sm transition-colors placeholder:text-slate-600 disabled:opacity-50"
+                />
+                <button
+                    type="submit"
+                    disabled={!connected || !input.trim()}
+                    className="px-4 py-2.5 bg-purple-600 hover:bg-purple-500 rounded-xl transition-all disabled:opacity-50 disabled:cursor-not-allowed"
+                >
+                    <Send className="w-4 h-4" />
+                </button>
+            </form>
+        </div>
+    );
+}

package/templates/nextjs-auth-demo/src/app/dashboard/demos/encrypted-chat/page.tsx

@@ -0,0 +1,198 @@
+"use client";
+
+import { useState, useEffect, useRef, useCallback } from "react";
+import { useSession } from "@/lib/auth-client";
+import { connectWithAuth } from "@/lib/pulse";
+import { Lock, Send, Shield, Wifi, WifiOff, Loader2, Key, ShieldCheck, Eye, EyeOff } from "lucide-react";
+import type { PulseConnection } from "@sansavision/pulse-sdk";
+
+interface EncryptedMessage {
+    id: string;
+    sender: string;
+    plaintext: string;
+    ciphertext: string;
+    timestamp: number;
+}
+
+export default function EncryptedChatPage() {
+    const { data: session } = useSession();
+    const [connected, setConnected] = useState(false);
+    const [authUser, setAuthUser] = useState<{ id: string; claims: Record<string, string> } | null>(null);
+    const [connecting, setConnecting] = useState(true);
+    const [messages, setMessages] = useState<EncryptedMessage[]>([]);
+    const [input, setInput] = useState("");
+    const [showCiphertext, setShowCiphertext] = useState(false);
+    const [encryptionKey] = useState(() =>
+        Array.from(crypto.getRandomValues(new Uint8Array(16)))
+            .map((b) => b.toString(16).padStart(2, "0")).join("")
+    );
+    const connRef = useRef<PulseConnection | null>(null);
+    const messagesEndRef = useRef<HTMLDivElement>(null);
+
+    const scrollToBottom = useCallback(() => {
+        messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+    }, []);
+
+    function simpleEncrypt(text: string, key: string): string {
+        return Array.from(text).map((c, i) =>
+            (c.charCodeAt(0) ^ key.charCodeAt(i % key.length)).toString(16).padStart(2, "0")
+        ).join("");
+    }
+
+    function simpleDecrypt(hex: string, key: string): string {
+        const bytes = hex.match(/.{2}/g) || [];
+        return bytes.map((b, i) =>
+            String.fromCharCode(parseInt(b, 16) ^ key.charCodeAt(i % key.length))
+        ).join("");
+    }
+
+    useEffect(() => {
+        if (!session) return;
+        let cancelled = false;
+
+        async function init() {
+            try {
+                const connection = await connectWithAuth();
+                if (cancelled) return;
+
+                connRef.current = connection;
+                setConnected(true);
+                setConnecting(false);
+
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const user = (connection as any).user;
+                if (user) setAuthUser(user);
+
+                const stream = connection.stream("encrypted-room");
+
+                stream.on("data", (data: Uint8Array) => {
+                    try {
+                        const msg = JSON.parse(new TextDecoder().decode(data));
+                        if (msg.type === "encrypted-msg") {
+                            const decrypted = simpleDecrypt(msg.ciphertext, encryptionKey);
+                            setMessages((prev) => [
+                                ...prev,
+                                {
+                                    id: crypto.randomUUID(),
+                                    sender: msg.sender,
+                                    plaintext: decrypted,
+                                    ciphertext: msg.ciphertext,
+                                    timestamp: Date.now(),
+                                },
+                            ]);
+                        }
+                    } catch { /* ignore */ }
+                });
+
+                connection.on("disconnect", () => setConnected(false));
+                connection.on("reconnected", () => setConnected(true));
+            } catch (err) {
+                console.error("Failed to connect:", err);
+                setConnecting(false);
+            }
+        }
+
+        init();
+        return () => {
+            cancelled = true;
+            connRef.current?.disconnect();
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [session]);
+
+    useEffect(scrollToBottom, [messages, scrollToBottom]);
+
+    function sendMessage(e: React.FormEvent) {
+        e.preventDefault();
+        if (!input.trim() || !connRef.current) return;
+
+        const plaintext = input.trim();
+        const ciphertext = simpleEncrypt(plaintext, encryptionKey);
+
+        const stream = connRef.current.stream("encrypted-room");
+        stream.send(JSON.stringify({ type: "encrypted-msg", sender: session?.user?.name || "Anonymous", ciphertext }));
+        setInput("");
+    }
+
+    return (
+        <div className="h-screen flex flex-col">
+            <div className="p-4 border-b border-slate-800">
+                <div className="flex items-center justify-between mb-3">
+                    <div className="flex items-center gap-3">
+                        <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-purple-500 to-violet-600 flex items-center justify-center">
+                            <Lock className="w-5 h-5 text-white" />
+                        </div>
+                        <div>
+                            <h1 className="text-lg font-semibold">E2E Encrypted Chat</h1>
+                            <p className="text-xs text-slate-500">Messages encrypted before leaving your browser</p>
+                        </div>
+                    </div>
+                    <div className="flex items-center gap-3">
+                        {authUser && (
+                            <div className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-green-500/10 border border-green-500/20">
+                                <Shield className="w-3.5 h-3.5 text-green-400" />
+                                <span className="text-xs text-green-400">{authUser.claims.name || authUser.id}</span>
+                            </div>
+                        )}
+                        {connected ? (
+                            <div className="flex items-center gap-1.5"><Wifi className="w-4 h-4 text-green-400" /><span className="text-xs text-green-400">Connected</span></div>
+                        ) : (
+                            <div className="flex items-center gap-1.5"><WifiOff className="w-4 h-4 text-red-400" /><span className="text-xs text-red-400">Disconnected</span></div>
+                        )}
+                    </div>
+                </div>
+
+                <div className="flex items-center gap-4">
+                    <div className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-purple-500/10 border border-purple-500/20">
+                        <Key className="w-3.5 h-3.5 text-purple-400" />
+                        <code className="text-xs text-purple-400 font-mono">{encryptionKey.slice(0, 16)}...</code>
+                    </div>
+                    <div className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-violet-500/10 border border-violet-500/20">
+                        <ShieldCheck className="w-3.5 h-3.5 text-violet-400" />
+                        <span className="text-xs text-violet-400">XOR cipher (demo)</span>
+                    </div>
+                    <button onClick={() => setShowCiphertext(!showCiphertext)}
+                        className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-slate-800 border border-slate-700 hover:border-slate-600 transition-colors">
+                        {showCiphertext ? <EyeOff className="w-3.5 h-3.5 text-slate-400" /> : <Eye className="w-3.5 h-3.5 text-slate-400" />}
+                        <span className="text-xs text-slate-400">{showCiphertext ? "Hide" : "Show"} ciphertext</span>
+                    </button>
+                </div>
+            </div>
+
+            <div className="flex-1 overflow-y-auto p-4 space-y-3">
+                {connecting && (
+                    <div className="flex items-center justify-center py-20">
+                        <Loader2 className="w-6 h-6 animate-spin text-purple-500 mr-2" /><span className="text-slate-400">Establishing encrypted channel...</span>
+                    </div>
+                )}
+
+                {messages.map((msg) => (
+                    <div key={msg.id}>
+                        <div className={`flex ${msg.sender === session?.user?.name ? "justify-end" : "justify-start"}`}>
+                            <div className={`max-w-md px-4 py-2.5 rounded-2xl text-sm ${msg.sender === session?.user?.name ? "bg-purple-600 text-white rounded-br-md" : "glass text-slate-200 rounded-bl-md"}`}>
+                                {msg.sender !== session?.user?.name && <div className="text-xs text-purple-400 font-medium mb-1">{msg.sender}</div>}
+                                <div className="flex items-center gap-1.5"><Lock className="w-3 h-3 text-green-400 shrink-0" />{msg.plaintext}</div>
+                            </div>
+                        </div>
+                        {showCiphertext && (
+                            <div className={`mt-1 text-xs font-mono text-slate-600 ${msg.sender === session?.user?.name ? "text-right" : "text-left"} px-4`}>
+                                🔒 {msg.ciphertext.slice(0, 40)}...
+                            </div>
+                        )}
+                    </div>
+                ))}
+                <div ref={messagesEndRef} />
+            </div>
+
+            <form onSubmit={sendMessage} className="p-4 border-t border-slate-800 flex gap-3">
+                <input type="text" value={input} onChange={(e) => setInput(e.target.value)} placeholder="Type an encrypted message..."
+                    disabled={!connected}
+                    className="flex-1 px-4 py-2.5 rounded-xl bg-slate-800/50 border border-slate-700 focus:border-purple-500 focus:ring-1 focus:ring-purple-500 outline-none text-sm transition-colors placeholder:text-slate-600 disabled:opacity-50" />
+                <button type="submit" disabled={!connected || !input.trim()}
+                    className="px-4 py-2.5 bg-purple-600 hover:bg-purple-500 rounded-xl transition-all disabled:opacity-50 disabled:cursor-not-allowed">
+                    <Send className="w-4 h-4" />
+                </button>
+            </form>
+        </div>
+    );
+}