Better Sidebar and landing page
This commit is contained in:
@@ -0,0 +1,120 @@
|
||||
"use client";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { MessageCircle, Plus, Search } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import AppSidebar from "@/components/Sidebar";
|
||||
|
||||
export default function HomePage() {
|
||||
const [messages, setMessages] = useState([
|
||||
{ id: 1, user: "Alice", text: "Hey, how are you?" },
|
||||
{ id: 2, user: "You", text: "Doing good, just working on the chat app!" },
|
||||
]);
|
||||
|
||||
const [input, setInput] = useState("");
|
||||
|
||||
function sendMessage() {
|
||||
if (!input.trim()) return;
|
||||
setMessages([...messages, { id: Date.now(), user: "You", text: input }]);
|
||||
setInput("");
|
||||
}
|
||||
|
||||
return (
|
||||
<AppSidebar>
|
||||
<div className="flex h-screen w-full bg-background">
|
||||
{/* Server Sidebar */}
|
||||
{/* <aside className="w-16 border-r flex flex-col items-center gap-4 py-4 bg-muted">
|
||||
<ServerButton
|
||||
label="Home"
|
||||
icon={<MessageCircle className="h-6 w-6" />}
|
||||
/>
|
||||
<ServerButton label="Add" icon={<Plus className="h-6 w-6" />} />
|
||||
</aside>
|
||||
|
||||
<aside className="w-64 border-r flex flex-col bg-card">
|
||||
<div className="p-3 border-b flex items-center gap-2">
|
||||
<Search className="h-4 w-4 text-muted-foreground" />
|
||||
<Input placeholder="Find or start a conversation" className="h-8" />
|
||||
</div>
|
||||
<ScrollArea className="flex-1">
|
||||
<div className="p-2 flex flex-col gap-2">
|
||||
<DMItem name="Alice" status="online" />
|
||||
<DMItem name="Bob" status="offline" />
|
||||
<DMItem name="Charlie" status="away" />
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</aside> */}
|
||||
|
||||
{/* Chat Area */}
|
||||
<main className="flex-1 flex flex-col">
|
||||
<header className="h-12 px-4 flex items-center border-b text-sm font-semibold">
|
||||
Alice
|
||||
</header>
|
||||
|
||||
<ScrollArea className="flex-1 p-4">
|
||||
<div className="flex flex-col gap-4">
|
||||
{messages.map((msg) => (
|
||||
<div key={msg.id} className="flex gap-2 items-start">
|
||||
<Avatar className="h-8 w-8">
|
||||
<AvatarFallback>{msg.user[0]}</AvatarFallback>
|
||||
</Avatar>
|
||||
<div>
|
||||
<p className="text-sm font-semibold">{msg.user}</p>
|
||||
<p className="text-sm text-foreground/90">{msg.text}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
|
||||
<footer className="p-3 border-t flex gap-2">
|
||||
<Input
|
||||
placeholder="Message Alice"
|
||||
value={input}
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
onKeyDown={(e) => e.key === "Enter" && sendMessage()}
|
||||
/>
|
||||
<Button onClick={sendMessage}>Send</Button>
|
||||
</footer>
|
||||
</main>
|
||||
</div>
|
||||
</AppSidebar>
|
||||
);
|
||||
}
|
||||
|
||||
function ServerButton({
|
||||
label,
|
||||
icon,
|
||||
}: {
|
||||
label: string;
|
||||
icon: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="rounded-full h-12 w-12"
|
||||
title={label}
|
||||
>
|
||||
{icon}
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
function DMItem({ name, status }: { name: string; status: string }) {
|
||||
return (
|
||||
<Card className="p-2 flex items-center gap-2 cursor-pointer hover:bg-accent">
|
||||
<Avatar className="h-8 w-8">
|
||||
<AvatarFallback>{name[0]}</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex flex-col">
|
||||
<span className="text-sm font-medium">{name}</span>
|
||||
<span className="text-xs text-muted-foreground">{status}</span>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
+42
-7
@@ -5,18 +5,39 @@ import { Input } from "@/components/ui/input";
|
||||
import axios from "axios";
|
||||
import { useState } from "react";
|
||||
import Cookies from "js-cookie";
|
||||
import { redirect } from "next/navigation";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function Login() {
|
||||
const [username, setUsername] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [feedback, setFeedback] = useState<
|
||||
undefined | { kind: "error" | "info"; message: string }
|
||||
>();
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const login = async () => {
|
||||
const res = await axios.put("/api/user", { username, password });
|
||||
Cookies.set("token", (res.data as any).token);
|
||||
redirect("/");
|
||||
setFeedback(undefined);
|
||||
try {
|
||||
const res = await axios.put("/api/user", { username, password });
|
||||
|
||||
Cookies.set("token", (res.data as any).token);
|
||||
setFeedback({
|
||||
kind: "info",
|
||||
message: "Login successful! Redirecting...",
|
||||
});
|
||||
|
||||
// small delay to show feedback before redirect
|
||||
setTimeout(() => router.push("/home"), 800);
|
||||
} catch (err: any) {
|
||||
setFeedback({
|
||||
kind: "error",
|
||||
message:
|
||||
err.response?.data?.message || "Login failed. Please try again.",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -24,8 +45,8 @@ export default function Login() {
|
||||
<div className="w-md mx-auto p-7 rounded-2xl flex flex-col gap-4 bg-neutral-900">
|
||||
<h1 className="mx-auto text-3xl">Login</h1>
|
||||
<span>
|
||||
Username
|
||||
<Input onChange={(e) => setUsername(e.target.value)} />
|
||||
Username or email
|
||||
<Input onChange={(e) => setUsername(e.target.value)} type="email" />
|
||||
</span>
|
||||
<span>
|
||||
Password
|
||||
@@ -34,11 +55,25 @@ export default function Login() {
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") login();
|
||||
}}
|
||||
type="password"
|
||||
/>
|
||||
</span>
|
||||
|
||||
{/* Feedback message */}
|
||||
{feedback && (
|
||||
<div
|
||||
className={`text-sm rounded-md p-2 ${
|
||||
feedback.kind === "error"
|
||||
? "bg-red-500/20 text-red-400"
|
||||
: "bg-green-500/20 text-green-400"
|
||||
}`}
|
||||
>
|
||||
{feedback.message}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Label>
|
||||
Don't have an account? <Link href={"/signup"}>Sign Up</Link>
|
||||
Don't have an account? <Link href={"/signup"}>Sign Up</Link>
|
||||
</Label>
|
||||
|
||||
<Button className="mt-2" onClick={login}>
|
||||
|
||||
+114
-16
@@ -1,22 +1,120 @@
|
||||
"use client";
|
||||
|
||||
import AppSidebar from "@/components/Sidebar";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { MessageCircle, Users, Shield } from "lucide-react";
|
||||
import { motion } from "framer-motion";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
export default function LandingPage() {
|
||||
const router = useRouter();
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<AppSidebar
|
||||
server={{
|
||||
id: "bro",
|
||||
name: "Bro",
|
||||
channels: [
|
||||
{ id: "1", name: "general", kind: "text" },
|
||||
{ id: "2", name: "random", kind: "text" },
|
||||
{ id: "3", name: "help", kind: "text" },
|
||||
{ id: "4", name: "voice-chat", kind: "voice" },
|
||||
],
|
||||
}}
|
||||
>
|
||||
ok
|
||||
</AppSidebar>
|
||||
<div className="min-h-screen flex flex-col">
|
||||
{/* Header */}
|
||||
<header className="flex items-center justify-between px-8 py-6 border-b bg-background/60 backdrop-blur-md sticky top-0 z-50">
|
||||
<motion.h1
|
||||
initial={{ opacity: 0, y: -10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="text-2xl font-bold"
|
||||
>
|
||||
Voxa
|
||||
</motion.h1>
|
||||
<div className="flex gap-4">
|
||||
<Button variant="ghost" onClick={() => router.push("/login")}>
|
||||
Login
|
||||
</Button>
|
||||
<Button onClick={() => router.push("/signup")}>Get Started</Button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Hero Section */}
|
||||
<main className="flex-1 flex flex-col items-center justify-center text-center px-6 py-20">
|
||||
<motion.h2
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="text-4xl md:text-6xl font-extrabold tracking-tight mb-6"
|
||||
>
|
||||
Chat. Connect. Collaborate.
|
||||
</motion.h2>
|
||||
<p className="text-lg text-muted-foreground max-w-xl mb-8">
|
||||
A modern chat app for teams and friends. Stay connected with real-time
|
||||
messaging, secure channels, and seamless collaboration.
|
||||
</p>
|
||||
<div className="flex gap-3">
|
||||
<Button size="lg" onClick={() => router.push("/signup")}>
|
||||
Get Started
|
||||
</Button>
|
||||
<Button
|
||||
size="lg"
|
||||
variant="outline"
|
||||
onClick={() => router.push("/docs/introduction")}
|
||||
>
|
||||
Learn More
|
||||
</Button>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{/* Features */}
|
||||
<section className="grid md:grid-cols-3 gap-6 px-6 py-16 max-w-6xl mx-auto">
|
||||
<FeatureCard
|
||||
icon={<MessageCircle className="h-10 w-10 text-primary" />}
|
||||
title="Real-Time Chat"
|
||||
description="Experience instant messaging with typing indicators, read receipts, and more with our self-hostable node system."
|
||||
/>
|
||||
<FeatureCard
|
||||
icon={<Users className="h-10 w-10 text-primary" />}
|
||||
title="Group Channels"
|
||||
description="Organize conversations into channels for projects, teams, or friends by hosting your own server."
|
||||
/>
|
||||
<FeatureCard
|
||||
icon={<Shield className="h-10 w-10 text-primary" />}
|
||||
title="Secure & Private"
|
||||
description="Your data is encrypted and protected, ensuring safe communication."
|
||||
/>
|
||||
</section>
|
||||
|
||||
{/* Call to Action */}
|
||||
{/* <section className="bg-muted py-20 px-6 text-center">
|
||||
<h3 className="text-3xl font-semibold mb-4">
|
||||
Ready to start chatting?
|
||||
</h3>
|
||||
<p className="text-muted-foreground mb-6">
|
||||
Create your free account today and bring your conversations together.
|
||||
</p>
|
||||
<div className="max-w-md mx-auto flex gap-2">
|
||||
<Input placeholder="Enter your email" />
|
||||
<Button>Sign Up</Button>
|
||||
</div>
|
||||
</section> */}
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="px-6 py-8 border-t text-center text-sm text-muted-foreground">
|
||||
© {new Date().getFullYear()} Voxa. All rights reserved.
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function FeatureCard({
|
||||
icon,
|
||||
title,
|
||||
description,
|
||||
}: {
|
||||
icon: React.ReactNode;
|
||||
title: string;
|
||||
description: string;
|
||||
}) {
|
||||
return (
|
||||
<Card className="shadow-sm">
|
||||
<CardContent className="p-6 flex flex-col items-center text-center">
|
||||
{icon}
|
||||
<h4 className="mt-4 font-semibold text-xl">{title}</h4>
|
||||
<p className="mt-2 text-muted-foreground">{description}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -83,8 +83,16 @@ export default function Server() {
|
||||
}, [ip, user, loading]);
|
||||
|
||||
return (
|
||||
<AppSidebar server={{ channels: [], ...server } as ServerType}>
|
||||
<AppSidebar
|
||||
server={
|
||||
{
|
||||
channels: [{ id: "general", name: "General", kind: "text" }],
|
||||
...server,
|
||||
} as ServerType
|
||||
}
|
||||
>
|
||||
<MessageBox
|
||||
channelName="General"
|
||||
userList={userList}
|
||||
setUserList={setUserList}
|
||||
messages={messages
|
||||
|
||||
+103
-10
@@ -5,28 +5,92 @@ import { Input } from "@/components/ui/input";
|
||||
import axios from "axios";
|
||||
import { useState } from "react";
|
||||
import Cookies from "js-cookie";
|
||||
import { redirect } from "next/navigation";
|
||||
import { useRouter } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function SignUp() {
|
||||
const [username, setUsername] = useState("");
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [confirmPassword, setConfirmPassword] = useState("");
|
||||
const [acceptTerms, setAcceptTerms] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [feedback, setFeedback] = useState<
|
||||
undefined | { kind: "error" | "info"; message: string }
|
||||
>();
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const validateInput = ():
|
||||
| { kind: "error" | "info"; message: string }
|
||||
| undefined => {
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
const usernameRegex = /^[a-zA-Z0-9_]{3,20}$/;
|
||||
|
||||
if (!emailRegex.test(email)) {
|
||||
return { kind: "error", message: "Invalid email format." };
|
||||
}
|
||||
if (!usernameRegex.test(username)) {
|
||||
return {
|
||||
kind: "error",
|
||||
message:
|
||||
"Username must be 3–20 characters and only letters, numbers, or underscores.",
|
||||
};
|
||||
}
|
||||
if (password.length < 6) {
|
||||
return {
|
||||
kind: "error",
|
||||
message: "Password must be at least 6 characters long.",
|
||||
};
|
||||
}
|
||||
if (password !== confirmPassword) {
|
||||
return { kind: "error", message: "Passwords do not match." };
|
||||
}
|
||||
if (!acceptTerms) {
|
||||
return {
|
||||
kind: "error",
|
||||
message: "You must accept the terms to sign up.",
|
||||
};
|
||||
}
|
||||
return;
|
||||
};
|
||||
|
||||
const signup = async () => {
|
||||
const res = await axios.post("/api/user", { username, password, email });
|
||||
Cookies.set("token", (res.data as any).token);
|
||||
redirect("/");
|
||||
setFeedback(undefined);
|
||||
const validationError = validateInput();
|
||||
if (validationError) {
|
||||
setFeedback(validationError);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
const res = await axios.post("/api/user", { username, password, email });
|
||||
Cookies.set("token", (res.data as any).token);
|
||||
|
||||
setFeedback({ kind: "info", message: "Account created! Redirecting..." });
|
||||
setTimeout(() => router.push("/home"), 1000);
|
||||
} catch (err: any) {
|
||||
setFeedback({
|
||||
kind: "error",
|
||||
message:
|
||||
err.response?.data?.message ||
|
||||
"Signup failed. Please try again later.",
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="h-screen flex items-center">
|
||||
<div className="w-md mx-auto p-7 rounded-2xl flex flex-col gap-4 bg-neutral-900">
|
||||
<h1 className="mx-auto text-3xl">Sign Up</h1>
|
||||
<div className="w-md mx-auto p-7 rounded-2xl flex flex-col gap-4 bg-neutral-900 shadow-lg">
|
||||
<h1 className="mx-auto text-3xl font-bold">Create an Account</h1>
|
||||
<span>
|
||||
Email
|
||||
<Input
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
placeholder={"[email protected]"}
|
||||
placeholder="[email protected]"
|
||||
type="email"
|
||||
/>
|
||||
</span>
|
||||
@@ -34,13 +98,20 @@ export default function SignUp() {
|
||||
Username
|
||||
<Input
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
placeholder={"john"}
|
||||
placeholder="john_doe"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
Password
|
||||
<Input
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
type="password"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
Confirm Password
|
||||
<Input
|
||||
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") signup();
|
||||
}}
|
||||
@@ -48,8 +119,30 @@ export default function SignUp() {
|
||||
/>
|
||||
</span>
|
||||
|
||||
<Button className="mt-4" onClick={signup}>
|
||||
Login
|
||||
<label className="flex items-center gap-2 text-sm">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={acceptTerms}
|
||||
onChange={(e) => setAcceptTerms(e.target.checked)}
|
||||
/>
|
||||
I agree to the <Link className="underline" href="/terms">terms & conditions</Link>
|
||||
</label>
|
||||
|
||||
{/* Feedback message */}
|
||||
{feedback && (
|
||||
<div
|
||||
className={`text-sm rounded-md p-2 ${
|
||||
feedback.kind === "error"
|
||||
? "bg-red-500/20 text-red-400"
|
||||
: "bg-green-500/20 text-green-400"
|
||||
}`}
|
||||
>
|
||||
{feedback.message}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Button className="mt-4" onClick={signup} disabled={loading}>
|
||||
{loading ? "Signing Up..." : "Sign Up"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user