@wopr-network/platform-ui-core 1.0.0

package/src/app/(auth)/login/page.tsx

@@ -0,0 +1,188 @@
+"use client";
+
+import Link from "next/link";
+import { useRouter, useSearchParams } from "next/navigation";
+import { type FormEvent, Suspense, useState } from "react";
+import { AuthError } from "@/components/auth/auth-error";
+import { AuthRedirect } from "@/components/auth/auth-redirect";
+import { AuthShell } from "@/components/auth/auth-shell";
+import { ResendVerificationButton } from "@/components/auth/resend-verification-button";
+import { OAuthButtons } from "@/components/oauth-buttons";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { signIn } from "@/lib/auth-client";
+import { getBrandConfig, productName } from "@/lib/brand-config";
+import { sanitizeRedirectUrl } from "@/lib/utils";
+
+function LoginForm() {
+  const router = useRouter();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [errorType, setErrorType] = useState<
+    "credentials" | "unverified" | "suspended" | "generic" | null
+  >(null);
+  const [loading, setLoading] = useState(false);
+
+  const searchParams = useSearchParams();
+  const reason = searchParams.get("reason");
+
+  async function handleSubmit(e: FormEvent) {
+    e.preventDefault();
+    setError(null);
+    setErrorType(null);
+    setLoading(true);
+
+    try {
+      const { error: authError } = await signIn.email({
+        email,
+        password,
+      });
+
+      if (authError) {
+        if (authError.status === 403) {
+          setErrorType("unverified");
+          setError("Please verify your email address before signing in.");
+        } else if (
+          authError.code === "ACCOUNT_SUSPENDED" ||
+          authError.code === "ACCOUNT_BANNED" ||
+          authError.message?.toLowerCase().includes("suspended") ||
+          authError.message?.toLowerCase().includes("banned")
+        ) {
+          setErrorType("suspended");
+          setError("Your account has been suspended. Please contact support.");
+        } else {
+          setErrorType("credentials");
+          setError("Invalid email or password. Please try again.");
+        }
+        return;
+      }
+
+      const callbackUrl = sanitizeRedirectUrl(searchParams.get("callbackUrl"));
+      router.push(callbackUrl);
+    } catch {
+      setError("A network error occurred. Please try again.");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <AuthShell>
+      <Card className="crt-scanlines border-terminal/20 bg-black/80 shadow-[0_0_30px_rgba(0,255,65,0.08)]">
+        <CardHeader>
+          <CardTitle className="text-sm font-medium uppercase tracking-widest text-terminal">
+            Sign in
+          </CardTitle>
+          <CardDescription>Access your {productName()} terminal</CardDescription>
+        </CardHeader>
+        <CardContent>
+          {reason === "expired" && (
+            <div className="mb-4 rounded-md border border-amber-500/20 bg-amber-500/10 p-3 text-sm text-amber-200">
+              Your session has expired. Please sign in again.
+            </div>
+          )}
+          <form onSubmit={handleSubmit} className="flex flex-col gap-4" id="login-form">
+            <div className="flex flex-col gap-2">
+              <Label htmlFor="email">Email</Label>
+              <Input
+                id="email"
+                type="email"
+                placeholder={`operator@${getBrandConfig().domain}`}
+                autoComplete="email"
+                required
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                className="placeholder:text-muted-foreground/50"
+              />
+            </div>
+            <div className="flex flex-col gap-2">
+              <div className="flex items-center justify-between">
+                <Label htmlFor="password">Password</Label>
+                <Link
+                  href="/forgot-password"
+                  className="text-xs text-terminal-dim hover:text-terminal"
+                >
+                  Forgot password?
+                </Link>
+              </div>
+              <Input
+                id="password"
+                type="password"
+                placeholder="••••••••••••"
+                autoComplete="current-password"
+                required
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                className="placeholder:text-muted-foreground/50"
+              />
+            </div>
+            {error && (
+              <div className="flex flex-col gap-2">
+                <AuthError message={error} />
+                {errorType === "unverified" && (
+                  <ResendVerificationButton
+                    email={email}
+                    variant="outline"
+                    className="w-full border-terminal/30 hover:border-terminal hover:bg-terminal/5 hover:text-terminal"
+                  />
+                )}
+                {errorType === "suspended" && (
+                  <p className="text-xs text-muted-foreground text-center">
+                    If you believe this is an error, contact{" "}
+                    <a
+                      href={`mailto:${getBrandConfig().emails.support}`}
+                      className="text-terminal-dim underline underline-offset-4 hover:text-terminal"
+                    >
+                      {getBrandConfig().emails.support}
+                    </a>
+                  </p>
+                )}
+              </div>
+            )}
+            <Button type="submit" variant="terminal" className="w-full" disabled={loading}>
+              {loading ? (
+                <span className="inline-flex items-center gap-1">
+                  AUTHENTICATING
+                  <span className="h-4 w-1.5 animate-pulse bg-terminal" />
+                </span>
+              ) : (
+                "Sign in"
+              )}
+            </Button>
+          </form>
+          <OAuthButtons callbackUrl={sanitizeRedirectUrl(searchParams.get("callbackUrl"))} />
+        </CardContent>
+        <CardFooter className="justify-center">
+          <p className="text-sm text-muted-foreground">
+            Don&apos;t have an account?{" "}
+            <Link
+              href="/signup"
+              className="text-terminal-dim underline underline-offset-4 hover:text-terminal"
+            >
+              Sign up
+            </Link>
+          </p>
+        </CardFooter>
+      </Card>
+    </AuthShell>
+  );
+}
+
+export default function LoginPage() {
+  return (
+    <Suspense>
+      <AuthRedirect />
+      <LoginForm />
+    </Suspense>
+  );
+}

package/src/app/(auth)/reset-password/page.tsx

@@ -0,0 +1,169 @@
+"use client";
+
+import Link from "next/link";
+import { useRouter, useSearchParams } from "next/navigation";
+import { type FormEvent, Suspense, useState } from "react";
+import { AuthError } from "@/components/auth/auth-error";
+import { AuthShell } from "@/components/auth/auth-shell";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { authClient } from "@/lib/auth-client";
+
+function ResetPasswordForm() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const token = searchParams.get("token");
+
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  function validatePasswordComplexity(pw: string): string | null {
+    if (pw.length < 12) return "Password must be at least 12 characters";
+    if (!/[A-Z]/.test(pw)) return "Password must contain at least one uppercase letter";
+    if (!/[a-z]/.test(pw)) return "Password must contain at least one lowercase letter";
+    if (!/[0-9]/.test(pw)) return "Password must contain at least one digit";
+    if (!/[^A-Za-z0-9]/.test(pw)) return "Password must contain at least one special character";
+    return null;
+  }
+
+  if (!token) {
+    return (
+      <AuthShell>
+        <Card className="crt-scanlines border-terminal/20 bg-black/80 shadow-[0_0_30px_rgba(0,255,65,0.08)]">
+          <CardHeader>
+            <CardTitle className="text-sm font-medium uppercase tracking-widest text-destructive">
+              Access denied
+            </CardTitle>
+            <CardDescription>This password reset link is invalid or has expired.</CardDescription>
+          </CardHeader>
+          <CardFooter className="justify-center">
+            <Link
+              href="/forgot-password"
+              className="text-sm text-terminal-dim underline underline-offset-4 hover:text-terminal"
+            >
+              Request a new reset link
+            </Link>
+          </CardFooter>
+        </Card>
+      </AuthShell>
+    );
+  }
+
+  async function handleSubmit(e: FormEvent) {
+    e.preventDefault();
+    setError(null);
+
+    const complexityError = validatePasswordComplexity(password);
+    if (complexityError) {
+      setError(complexityError);
+      return;
+    }
+
+    if (password !== confirmPassword) {
+      setError("Passwords do not match");
+      return;
+    }
+
+    setLoading(true);
+
+    try {
+      const { error: fetchError } = await authClient.$fetch("/reset-password", {
+        method: "POST",
+        body: { newPassword: password, token: token as string },
+      });
+
+      if (fetchError) {
+        setError(fetchError.message ?? "Failed to reset password");
+        return;
+      }
+
+      router.push("/login");
+    } catch {
+      setError("A network error occurred. Please try again.");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <AuthShell>
+      <Card className="crt-scanlines border-terminal/20 bg-black/80 shadow-[0_0_30px_rgba(0,255,65,0.08)]">
+        <CardHeader>
+          <CardTitle className="text-sm font-medium uppercase tracking-widest text-terminal">
+            Set new credentials
+          </CardTitle>
+          <CardDescription>Enter new access credentials</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleSubmit} className="flex flex-col gap-4" id="reset-password-form">
+            <div className="flex flex-col gap-2">
+              <Label htmlFor="password">New password</Label>
+              <Input
+                id="password"
+                type="password"
+                placeholder="••••••••••••"
+                autoComplete="new-password"
+                required
+                minLength={12}
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                className="placeholder:text-muted-foreground/50"
+              />
+            </div>
+            <div className="flex flex-col gap-2">
+              <Label htmlFor="confirm-password">Confirm password</Label>
+              <Input
+                id="confirm-password"
+                type="password"
+                placeholder="••••••••••••"
+                autoComplete="new-password"
+                required
+                value={confirmPassword}
+                onChange={(e) => setConfirmPassword(e.target.value)}
+                className="placeholder:text-muted-foreground/50"
+              />
+            </div>
+            {error && <AuthError message={error} />}
+            <Button type="submit" variant="terminal" className="w-full" disabled={loading}>
+              {loading ? (
+                <span className="inline-flex items-center gap-1">
+                  UPDATING
+                  <span className="h-4 w-1.5 animate-pulse bg-terminal" />
+                </span>
+              ) : (
+                "Reset password"
+              )}
+            </Button>
+          </form>
+        </CardContent>
+        <CardFooter className="justify-center">
+          <Link
+            href="/login"
+            className="text-sm text-terminal-dim underline underline-offset-4 hover:text-terminal"
+          >
+            Back to sign in
+          </Link>
+        </CardFooter>
+      </Card>
+    </AuthShell>
+  );
+}
+
+export default function ResetPasswordPage() {
+  return (
+    <Suspense>
+      <ResetPasswordForm />
+    </Suspense>
+  );
+}

package/src/app/(auth)/signup/page.tsx

@@ -0,0 +1,309 @@
+"use client";
+
+import { motion } from "framer-motion";
+import Link from "next/link";
+import { useSearchParams } from "next/navigation";
+import { type FormEvent, Suspense, useState } from "react";
+import { AuthError } from "@/components/auth/auth-error";
+import { AuthRedirect } from "@/components/auth/auth-redirect";
+import { AuthShell } from "@/components/auth/auth-shell";
+import { ResendVerificationButton } from "@/components/auth/resend-verification-button";
+import { OAuthButtons } from "@/components/oauth-buttons";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { signUp } from "@/lib/auth-client";
+import { getBrandConfig, productName } from "@/lib/brand-config";
+import { sanitizeRedirectUrl } from "@/lib/utils";
+
+function getPasswordStrength(password: string): { score: number; label: string } {
+  let score = 0;
+  if (password.length >= 8) score++;
+  if (password.length >= 12) score++;
+  if (/[a-z]/.test(password) && /[A-Z]/.test(password)) score++;
+  if (/\d/.test(password)) score++;
+  if (/[^a-zA-Z0-9]/.test(password)) score++;
+
+  const labels = ["Very weak", "Weak", "Fair", "Good", "Strong"];
+  return { score, label: labels[Math.min(score, labels.length) - 1] ?? "" };
+}
+
+const strengthColors = [
+  "bg-red-500",
+  "bg-red-500",
+  "bg-amber-500",
+  "bg-terminal",
+  "bg-terminal-dim",
+];
+
+const strengthLabelColors = [
+  "text-destructive",
+  "text-destructive",
+  "text-yellow-500",
+  "text-terminal",
+  "text-terminal",
+];
+
+const strengthSegments = [
+  { key: "seg-1", index: 0 },
+  { key: "seg-2", index: 1 },
+  { key: "seg-3", index: 2 },
+  { key: "seg-4", index: 3 },
+  { key: "seg-5", index: 4 },
+];
+
+function SignupForm() {
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [agreedToTerms, setAgreedToTerms] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [signupSuccess, setSignupSuccess] = useState(false);
+
+  const strength = getPasswordStrength(password);
+
+  const searchParams = useSearchParams();
+
+  async function handleSubmit(e: FormEvent) {
+    e.preventDefault();
+    setError(null);
+
+    if (password !== confirmPassword) {
+      setError("Passwords do not match");
+      return;
+    }
+
+    if (!agreedToTerms) {
+      setError("You must agree to the terms of service");
+      return;
+    }
+
+    setLoading(true);
+
+    try {
+      const { error: authError } = await signUp.email({
+        name,
+        email,
+        password,
+      });
+
+      if (authError) {
+        setError(authError.message ?? "Failed to create account");
+        return;
+      }
+
+      // Show "check your email" interstitial instead of redirecting
+      setSignupSuccess(true);
+    } catch {
+      setError("A network error occurred. Please try again.");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  if (signupSuccess) {
+    return (
+      <AuthShell>
+        <Card className="crt-scanlines border-terminal/20 bg-black/80 shadow-[0_0_30px_rgba(0,255,65,0.08)]">
+          <CardHeader className="items-center">
+            <motion.div
+              initial={{ opacity: 0, scale: 0.95 }}
+              animate={{ opacity: 1, scale: 1 }}
+              transition={{ duration: 0.3 }}
+            >
+              <CardTitle className="text-sm font-medium uppercase tracking-widest text-terminal text-center">
+                Transmission sent
+              </CardTitle>
+              <CardDescription className="text-center">
+                We sent a verification link to <code className="text-terminal">{email}</code>
+              </CardDescription>
+            </motion.div>
+          </CardHeader>
+          <CardContent className="flex flex-col gap-3">
+            <p className="text-sm text-center text-muted-foreground">
+              Click the link to verify your account and receive your{" "}
+              <span className="text-terminal font-medium">$5 signup credit</span>.
+            </p>
+            <p className="text-sm text-center text-muted-foreground">
+              If you don&apos;t see it, check your spam folder.
+            </p>
+            <ResendVerificationButton email={email} />
+          </CardContent>
+          <CardFooter className="justify-center">
+            <Link
+              href="/login"
+              className="text-sm text-terminal-dim underline underline-offset-4 hover:text-terminal"
+            >
+              Back to sign in
+            </Link>
+          </CardFooter>
+        </Card>
+      </AuthShell>
+    );
+  }
+
+  return (
+    <AuthShell>
+      <Card className="crt-scanlines border-terminal/20 bg-black/80 shadow-[0_0_30px_rgba(0,255,65,0.08)]">
+        <CardHeader>
+          <CardTitle className="text-sm font-medium uppercase tracking-widest text-terminal">
+            Create account
+          </CardTitle>
+          <CardDescription>Register for {productName()} access</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleSubmit} className="flex flex-col gap-4" id="signup-form">
+            <div className="flex flex-col gap-2">
+              <Label htmlFor="name">Name</Label>
+              <Input
+                id="name"
+                type="text"
+                placeholder="OPERATOR NAME"
+                autoComplete="name"
+                required
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                className="placeholder:text-muted-foreground/50"
+              />
+            </div>
+            <div className="flex flex-col gap-2">
+              <Label htmlFor="email">Email</Label>
+              <Input
+                id="email"
+                type="email"
+                placeholder={`operator@${getBrandConfig().domain}`}
+                autoComplete="email"
+                required
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                className="placeholder:text-muted-foreground/50"
+              />
+            </div>
+            <div className="flex flex-col gap-2">
+              <Label htmlFor="password">Password</Label>
+              <Input
+                id="password"
+                type="password"
+                placeholder="••••••••••••"
+                autoComplete="new-password"
+                required
+                minLength={8}
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                className="placeholder:text-muted-foreground/50"
+              />
+              {password.length > 0 && (
+                <div className="flex flex-col gap-1">
+                  <div className="flex gap-1">
+                    {strengthSegments.map((seg) => (
+                      <div
+                        key={seg.key}
+                        className={`h-1 flex-1 rounded-full ${
+                          seg.index < strength.score
+                            ? strengthColors[strength.score - 1]
+                            : "bg-terminal/20"
+                        }`}
+                      />
+                    ))}
+                  </div>
+                  <span
+                    className={`text-xs ${
+                      strength.score > 0
+                        ? strengthLabelColors[strength.score - 1]
+                        : "text-muted-foreground"
+                    }`}
+                  >
+                    {strength.label}
+                  </span>
+                </div>
+              )}
+            </div>
+            <div className="flex flex-col gap-2">
+              <Label htmlFor="confirm-password">Confirm password</Label>
+              <Input
+                id="confirm-password"
+                type="password"
+                placeholder="••••••••••••"
+                autoComplete="new-password"
+                required
+                value={confirmPassword}
+                onChange={(e) => setConfirmPassword(e.target.value)}
+                className="placeholder:text-muted-foreground/50"
+              />
+            </div>
+            <div className="flex items-start gap-2 text-sm">
+              <Checkbox
+                id="agree-terms"
+                checked={agreedToTerms}
+                onCheckedChange={(checked) => setAgreedToTerms(checked === true)}
+                className="mt-0.5 data-[state=checked]:border-terminal data-[state=checked]:bg-terminal"
+              />
+              <Label
+                htmlFor="agree-terms"
+                className="text-muted-foreground font-normal cursor-pointer"
+              >
+                I agree to the{" "}
+                <Link
+                  href="/terms"
+                  className="text-terminal-dim underline underline-offset-4 hover:text-terminal"
+                >
+                  Terms of Service
+                </Link>{" "}
+                and{" "}
+                <Link
+                  href="/privacy"
+                  className="text-terminal-dim underline underline-offset-4 hover:text-terminal"
+                >
+                  Privacy Policy
+                </Link>
+              </Label>
+            </div>
+            {error && <AuthError message={error} />}
+            <Button type="submit" variant="terminal" className="w-full" disabled={loading}>
+              {loading ? (
+                <span className="inline-flex items-center gap-1">
+                  INITIALIZING
+                  <span className="h-4 w-1.5 animate-pulse bg-terminal" />
+                </span>
+              ) : (
+                "Create account"
+              )}
+            </Button>
+          </form>
+          <OAuthButtons callbackUrl={sanitizeRedirectUrl(searchParams.get("callbackUrl"))} />
+        </CardContent>
+        <CardFooter className="justify-center">
+          <p className="text-sm text-muted-foreground">
+            Already have an account?{" "}
+            <Link
+              href="/login"
+              className="text-terminal-dim underline underline-offset-4 hover:text-terminal"
+            >
+              Sign in
+            </Link>
+          </p>
+        </CardFooter>
+      </Card>
+    </AuthShell>
+  );
+}
+
+export default function SignupPage() {
+  return (
+    <Suspense>
+      <AuthRedirect />
+      <SignupForm />
+    </Suspense>
+  );
+}