Improved auth

src/app/auth/CreateAccount.tsx

@@ -0,0 +1,182 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import axios from "axios";
+import { useState } from "react";
+import Link from "next/link";
+import { CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Label } from "@/components/ui/label";
+import { toast } from "sonner";
+import { useRouter } from "next/navigation";
+import Cookies from "js-cookie";
+
+export default function CreateAccount() {
+  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 () => {
+    localStorage.removeItem("chat-messages");
+    localStorage.removeItem("server-messages");
+    setFeedback(undefined);
+    const validationError = validateInput();
+    if (validationError) {
+      setFeedback(validationError);
+      return;
+    }
+
+    try {
+      setLoading(true);
+      const { data } = await axios.post("/api/user", {
+        username,
+        password,
+        email,
+      });
+      const response = data as {
+        message: string;
+        email_sent: boolean;
+        user_id: string;
+      };
+      if (response.email_sent) {
+        toast.info(
+          "We sent you a verification email. Please verify to continue."
+        );
+        setFeedback({
+          message:
+            "We sent you a verification email. Please verify to continue.",
+          kind: "info",
+        });
+        Cookies.set("verify_temp_email", email);
+        Cookies.set("verify_temp_password", password);
+        router.push(`/verify`);
+      } else {
+        setFeedback({ message: response.message, kind: "error" });
+      }
+    } catch (err: any) {
+      setFeedback({
+        kind: "error",
+        message:
+          err.response?.data?.message ||
+          "Signup failed. Please try again later.",
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <CardHeader>
+        <CardTitle className="text-3xl mx-auto">Create an Account</CardTitle>
+      </CardHeader>
+      <CardContent className="gap-3 flex flex-col">
+        <span>
+          Email
+          <Input
+            autoComplete="email"
+            onChange={(e) => setEmail(e.target.value)}
+            placeholder="[email protected]"
+            type="email"
+          />
+        </span>
+        <span>
+          Username
+          <Input
+            autoComplete="username"
+            onChange={(e) => setUsername(e.target.value)}
+            placeholder="john_doe"
+          />
+        </span>
+        <span>
+          Password
+          <Input
+            autoComplete="new-password"
+            onChange={(e) => setPassword(e.target.value)}
+            type="password"
+          />
+        </span>
+        <span>
+          Confirm Password
+          <Input
+            autoComplete="new-password"
+            onChange={(e) => setConfirmPassword(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") signup();
+            }}
+            type="password"
+          />
+        </span>
+
+        <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 && (
+          <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 onClick={signup} disabled={loading}>
+          {loading ? "Signing Up..." : "Sign Up"}
+        </Button>
+      </CardContent>
+    </>
+  );
+}

src/app/auth/Login.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import axios from "axios";
+import { useState } from "react";
+import Cookies from "js-cookie";
+import { useRouter } from "next/navigation";
+import { CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+export default function Login() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [feedback, setFeedback] = useState<
+    undefined | { kind: "error" | "info"; message: string }
+  >();
+
+  const router = useRouter();
+
+  const login = async () => {
+    localStorage.removeItem("chat-messages");
+    localStorage.removeItem("server-messages");
+    setFeedback(undefined);
+    try {
+      const res = await axios.get("/api/user", {
+        params: { email, 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("/chat"), 800);
+    } catch (err: any) {
+      setFeedback({
+        kind: "error",
+        message:
+          err.response?.data?.message || "Login failed. Please try again.",
+      });
+    }
+  };
+
+  return (
+    <>
+      <CardHeader>
+        <CardTitle className="text-3xl mx-auto">Login</CardTitle>
+      </CardHeader>
+      <CardContent className="gap-3 flex flex-col">
+        <span>
+          Email
+          <Input
+            autoComplete="username"
+            onChange={(e) => setEmail(e.target.value)}
+            type="email"
+          />
+        </span>
+        <span>
+          Password
+          <Input
+            autoComplete="current-password"
+            onChange={(e) => setPassword(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") login();
+            }}
+            type="password"
+          />
+        </span>
+
+        {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-2" onClick={login}>
+          Login
+        </Button>
+      </CardContent>
+    </>
+  );
+}

src/app/auth/page.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { Card } from "@/components/ui/card";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import CreateAccount from "./CreateAccount";
+import Login from "./Login";
+import { useSearchParams } from "next/navigation";
+
+export default function Auth() {
+  const params = useSearchParams();
+  const pt = params.get("t");
+  const tab = pt === "create" || pt === "login" ? pt : "create";
+
+  return (
+    <div className="h-screen flex items-center">
+      <Tabs defaultValue={tab} className="mx-auto">
+        <TabsList className="mx-auto">
+          <TabsTrigger value="login">Login</TabsTrigger>
+          <TabsTrigger value="create">Create Account</TabsTrigger>
+        </TabsList>
+        <TabsContent value="login">
+          <Card className="w-md">
+            <Login />
+          </Card>
+        </TabsContent>
+        <TabsContent value="create">
+          <Card className="w-md">
+            <CreateAccount />
+          </Card>
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}

src/app/login/page.tsx

@@ -1,7 +0,0 @@
-"use client";
-
-import Auth from "@/components/auth/Auth";
-
-export default function Login() {
-  return <Auth kind="login" />;
-}

src/app/page.tsx

@@ -24,10 +24,12 @@ export default function LandingPage() {
           <Logo />
         </motion.div>
         <div className="flex gap-4">
-          <Button variant="ghost" onClick={() => router.push("/login")}>
+          <Button variant="ghost" onClick={() => router.push("/auth?t=login")}>
             Login
           </Button>
-          <Button onClick={() => router.push("/signup")}>Get Started</Button>
+          <Button onClick={() => router.push("/auth?t=create")}>
+            Get Started
+          </Button>
         </div>
       </header>
 
@@ -46,7 +48,7 @@ export default function LandingPage() {
           with real-time messaging, secure channels, and seamless collaboration.
         </p>
         <div className="flex gap-3">
-          <Button size="lg" onClick={() => router.push("/signup")}>
+          <Button size="lg" onClick={() => router.push("/auth?t=create")}>
             Get Started
           </Button>
           <Button

src/app/signup/page.tsx

@@ -1,7 +0,0 @@
-"use client";
-
-import Auth from "@/components/auth/Auth";
-
-export default function SignUp() {
-  return <Auth kind="create" />;
-}