@checkstack/auth-frontend 0.0.2

package/src/components/CreateUserDialog.tsx

@@ -0,0 +1,156 @@
+import React, { useState, useEffect } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  Button,
+  Input,
+  Label,
+} from "@checkstack/ui";
+import { passwordSchema } from "@checkstack/auth-common";
+
+interface CreateUserDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSubmit: (data: {
+    name: string;
+    email: string;
+    password: string;
+  }) => Promise<void>;
+}
+
+export const CreateUserDialog: React.FC<CreateUserDialogProps> = ({
+  open,
+  onOpenChange,
+  onSubmit,
+}) => {
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [validationErrors, setValidationErrors] = useState<string[]>([]);
+
+  // Reset form when dialog opens/closes
+  useEffect(() => {
+    if (!open) {
+      setName("");
+      setEmail("");
+      setPassword("");
+      setValidationErrors([]);
+    }
+  }, [open]);
+
+  // Validate password on change
+  useEffect(() => {
+    if (password) {
+      const result = passwordSchema.safeParse(password);
+      if (result.success) {
+        setValidationErrors([]);
+      } else {
+        setValidationErrors(result.error.issues.map((issue) => issue.message));
+      }
+    } else {
+      setValidationErrors([]);
+    }
+  }, [password]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    // Validate password before submitting
+    const result = passwordSchema.safeParse(password);
+    if (!result.success) {
+      return;
+    }
+
+    setLoading(true);
+    try {
+      await onSubmit({ name, email, password });
+      onOpenChange(false);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const isValid =
+    name.trim().length > 0 &&
+    email.trim().length > 0 &&
+    password.length > 0 &&
+    validationErrors.length === 0;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>Create User</DialogTitle>
+          <DialogDescription>
+            Create a new user account with email and password credentials.
+          </DialogDescription>
+        </DialogHeader>
+        <form onSubmit={handleSubmit}>
+          <div className="grid gap-4 py-4">
+            <div className="grid gap-2">
+              <Label htmlFor="create-name">Name</Label>
+              <Input
+                id="create-name"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                placeholder="John Doe"
+                required
+              />
+            </div>
+            <div className="grid gap-2">
+              <Label htmlFor="create-email">Email</Label>
+              <Input
+                id="create-email"
+                type="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                placeholder="john@example.com"
+                required
+              />
+            </div>
+            <div className="grid gap-2">
+              <Label htmlFor="create-password">Password</Label>
+              <Input
+                id="create-password"
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                required
+              />
+              {validationErrors.length > 0 && (
+                <ul className="text-sm text-muted-foreground list-disc pl-5 space-y-1">
+                  {validationErrors.map((error, i) => (
+                    <li key={i} className="text-destructive">
+                      {error}
+                    </li>
+                  ))}
+                </ul>
+              )}
+              <p className="text-xs text-muted-foreground">
+                At least 8 characters with uppercase, lowercase, and number
+              </p>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => onOpenChange(false)}
+              disabled={loading}
+            >
+              Cancel
+            </Button>
+            <Button type="submit" disabled={!isValid || loading}>
+              {loading ? "Creating..." : "Create User"}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+};

package/src/components/ForgotPasswordPage.tsx

@@ -0,0 +1,131 @@
+import React, { useState } from "react";
+import { Link } from "react-router-dom";
+import { Mail, ArrowLeft, CheckCircle } from "lucide-react";
+import { authRoutes } from "@checkstack/auth-common";
+import { resolveRoute } from "@checkstack/common";
+import {
+  Button,
+  Input,
+  Label,
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+} from "@checkstack/ui";
+import { useAuthClient } from "../lib/auth-client";
+
+export const ForgotPasswordPage = () => {
+  const [email, setEmail] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [submitted, setSubmitted] = useState(false);
+  const authClient = useAuthClient();
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    try {
+      // Always show success message to prevent user enumeration
+      await authClient.requestPasswordReset({
+        email,
+        redirectTo: "/auth/reset-password",
+      });
+    } catch (error) {
+      // Silently handle errors to prevent timing attacks
+      console.error("Password reset request failed:", error);
+    } finally {
+      setLoading(false);
+      setSubmitted(true);
+    }
+  };
+
+  if (submitted) {
+    return (
+      <div className="min-h-[80vh] flex items-center justify-center">
+        <Card className="w-full max-w-md">
+          <CardHeader className="space-y-1 text-center">
+            <div className="mx-auto w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mb-2">
+              <CheckCircle className="h-6 w-6 text-primary" />
+            </div>
+            <CardTitle className="text-2xl font-bold">
+              Check Your Email
+            </CardTitle>
+            <CardDescription>
+              If an account exists for <strong>{email}</strong>, you will
+              receive a password reset link shortly.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="text-center text-sm text-muted-foreground">
+            <p>
+              Didn't receive an email? Check your spam folder or make sure you
+              entered the correct email address.
+            </p>
+          </CardContent>
+          <CardFooter className="flex flex-col gap-4">
+            <Button
+              variant="outline"
+              className="w-full"
+              onClick={() => setSubmitted(false)}
+            >
+              Try Another Email
+            </Button>
+            <Link
+              to={resolveRoute(authRoutes.routes.login)}
+              className="text-sm text-primary hover:underline flex items-center justify-center gap-1"
+            >
+              <ArrowLeft className="h-4 w-4" />
+              Back to Login
+            </Link>
+          </CardFooter>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-[80vh] flex items-center justify-center">
+      <Card className="w-full max-w-md">
+        <CardHeader className="space-y-1">
+          <CardTitle className="text-2xl font-bold">Forgot Password</CardTitle>
+          <CardDescription>
+            Enter your email address and we'll send you a link to reset your
+            password.
+          </CardDescription>
+        </CardHeader>
+        <form onSubmit={handleSubmit}>
+          <CardContent className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="email">Email</Label>
+              <div className="relative">
+                <Mail className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                <Input
+                  id="email"
+                  type="email"
+                  placeholder="Enter your email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  className="pl-10"
+                  required
+                  autoFocus
+                />
+              </div>
+            </div>
+          </CardContent>
+          <CardFooter className="flex flex-col gap-4">
+            <Button type="submit" className="w-full" disabled={loading}>
+              {loading ? "Sending..." : "Send Reset Link"}
+            </Button>
+            <Link
+              to={resolveRoute(authRoutes.routes.login)}
+              className="text-sm text-primary hover:underline flex items-center justify-center gap-1"
+            >
+              <ArrowLeft className="h-4 w-4" />
+              Back to Login
+            </Link>
+          </CardFooter>
+        </form>
+      </Card>
+    </div>
+  );
+};

package/src/components/LoginPage.tsx

@@ -0,0 +1,330 @@
+import React, { useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { LogIn, LogOut, AlertCircle } from "lucide-react";
+import {
+  useApi,
+  ExtensionSlot,
+  pluginRegistry,
+  rpcApiRef,
+  UserMenuItemsSlot,
+  UserMenuItemsBottomSlot,
+  UserMenuItemsContext,
+} from "@checkstack/frontend-api";
+import { AuthApi, authRoutes } from "@checkstack/auth-common";
+import { resolveRoute } from "@checkstack/common";
+import {
+  Button,
+  Input,
+  Label,
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+  UserMenu,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  Alert,
+  AlertIcon,
+  AlertContent,
+  AlertTitle,
+  AlertDescription,
+  InfoBanner,
+  InfoBannerIcon,
+  InfoBannerContent,
+  InfoBannerTitle,
+  InfoBannerDescription,
+} from "@checkstack/ui";
+import { authApiRef } from "../api";
+import { useEnabledStrategies } from "../hooks/useEnabledStrategies";
+import { usePermissions } from "../hooks/usePermissions";
+import { useAuthClient } from "../lib/auth-client";
+import { SocialProviderButton } from "./SocialProviderButton";
+import { useEffect } from "react";
+
+export const LoginPage = () => {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [loading, setLoading] = useState(false);
+  const navigate = useNavigate();
+  const authApi = useApi(authApiRef);
+  const rpcApi = useApi(rpcApiRef);
+  const authRpcClient = rpcApi.forPlugin(AuthApi);
+  const { strategies, loading: strategiesLoading } = useEnabledStrategies();
+  const [registrationAllowed, setRegistrationAllowed] = useState<boolean>(true);
+
+  useEffect(() => {
+    authRpcClient
+      .getRegistrationStatus()
+      .then(({ allowRegistration }) => {
+        setRegistrationAllowed(allowRegistration);
+      })
+      .catch((error: Error) => {
+        console.error("Failed to check registration status:", error);
+        setRegistrationAllowed(true);
+      });
+  }, [authRpcClient]);
+
+  const handleCredentialLogin = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    try {
+      const { error } = await authApi.signIn(email, password);
+      if (error) {
+        console.error("Login failed:", error);
+      } else {
+        navigate("/");
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSocialLogin = async (provider: string) => {
+    try {
+      await authApi.signInWithSocial(provider);
+      // Navigation will happen automatically after OAuth redirect
+    } catch (error) {
+      console.error("Social login failed:", error);
+    }
+  };
+
+  const credentialStrategy = strategies.find((s) => s.type === "credential");
+  const socialStrategies = strategies.filter((s) => s.type === "social");
+  const hasCredential = !!credentialStrategy;
+  const hasSocial = socialStrategies.length > 0;
+
+  // Loading state
+  if (strategiesLoading) {
+    return (
+      <div className="min-h-[80vh] flex items-center justify-center">
+        <Card className="w-full max-w-md">
+          <CardContent className="pt-6">
+            <div className="space-y-4">
+              <div className="h-4 bg-muted animate-pulse rounded" />
+              <div className="h-10 bg-muted animate-pulse rounded" />
+              <div className="h-10 bg-muted animate-pulse rounded" />
+              <div className="h-10 bg-muted animate-pulse rounded" />
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  // No strategies enabled
+  if (strategies.length === 0) {
+    return (
+      <div className="min-h-[80vh] flex items-center justify-center">
+        <Card className="w-full max-w-md">
+          <CardHeader className="flex flex-col space-y-1 items-center">
+            <CardTitle>Authentication Unavailable</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <Alert variant="warning">
+              <AlertIcon>
+                <AlertCircle className="h-4 w-4" />
+              </AlertIcon>
+              <AlertContent>
+                <AlertTitle>No authentication methods enabled</AlertTitle>
+                <AlertDescription>
+                  Please contact your system administrator to enable
+                  authentication methods.
+                </AlertDescription>
+              </AlertContent>
+            </Alert>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-[80vh] flex items-center justify-center">
+      <Card className="w-full max-w-md">
+        <CardHeader className="flex flex-col space-y-1 items-center">
+          <CardTitle>Sign in to your account</CardTitle>
+          <CardDescription>
+            {hasCredential && hasSocial
+              ? "Choose your preferred sign-in method"
+              : hasCredential
+              ? "Enter your credentials to access the dashboard"
+              : "Continue with your account"}
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-4">
+            {/* Registration Disabled Banner */}
+            {!registrationAllowed && (
+              <InfoBanner variant="warning">
+                <InfoBannerIcon>
+                  <AlertCircle className="h-4 w-4" />
+                </InfoBannerIcon>
+                <InfoBannerContent>
+                  <InfoBannerTitle>Registration Disabled</InfoBannerTitle>
+                  <InfoBannerDescription>
+                    New user registration is currently disabled. Please contact
+                    an administrator if you need access.
+                  </InfoBannerDescription>
+                </InfoBannerContent>
+              </InfoBanner>
+            )}
+
+            {/* Credential Form */}
+            {hasCredential && (
+              <form className="space-y-4" onSubmit={handleCredentialLogin}>
+                <div className="space-y-2">
+                  <Label htmlFor="email">Email</Label>
+                  <Input
+                    id="email"
+                    placeholder="name@example.com"
+                    type="email"
+                    required
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
+                  />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="password">Password</Label>
+                  <Input
+                    id="password"
+                    required
+                    type="password"
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                  />
+                  <div className="text-right">
+                    <Link
+                      to={resolveRoute(authRoutes.routes.forgotPassword)}
+                      className="text-sm text-primary hover:underline"
+                    >
+                      Forgot password?
+                    </Link>
+                  </div>
+                </div>
+                <Button type="submit" className="w-full" disabled={loading}>
+                  {loading ? "Signing In..." : "Sign In"}
+                </Button>
+              </form>
+            )}
+
+            {/* Separator */}
+            {hasCredential && hasSocial && (
+              <div className="relative">
+                <div className="absolute inset-0 flex items-center">
+                  <span className="w-full border-t border-border" />
+                </div>
+                <div className="relative flex justify-center text-xs uppercase">
+                  <span className="bg-card px-2 text-muted-foreground">
+                    Or continue with
+                  </span>
+                </div>
+              </div>
+            )}
+
+            {/* Social Provider Buttons */}
+            {hasSocial && (
+              <div className="space-y-2">
+                {socialStrategies.map((strategy) => (
+                  <SocialProviderButton
+                    key={strategy.id}
+                    displayName={strategy.displayName}
+                    icon={strategy.icon}
+                    onClick={() => handleSocialLogin(strategy.id)}
+                  />
+                ))}
+              </div>
+            )}
+          </div>
+        </CardContent>
+        {registrationAllowed &&
+          strategies.some((s) => s.requiresManualRegistration) && (
+            <CardFooter className="flex justify-center border-t border-border mt-4 pt-4">
+              <div className="text-sm">
+                Don't have an account?{" "}
+                <Link
+                  to={resolveRoute(authRoutes.routes.register)}
+                  className="underline text-primary hover:text-primary/90 font-medium"
+                >
+                  Sign up
+                </Link>
+              </div>
+            </CardFooter>
+          )}
+      </Card>
+    </div>
+  );
+};
+
+export const LogoutMenuItem = (_props: UserMenuItemsContext) => {
+  const authApi = useApi(authApiRef);
+
+  return (
+    <DropdownMenuItem
+      onClick={() => authApi.signOut()}
+      icon={<LogOut className="h-4 w-4" />}
+    >
+      Logout
+    </DropdownMenuItem>
+  );
+};
+
+export const LoginNavbarAction = () => {
+  const authApi = useApi(authApiRef);
+  const { data: session, isPending } = authApi.useSession();
+  const { permissions, loading: permissionsLoading } = usePermissions();
+  const authClient = useAuthClient();
+  const [hasCredentialAccount, setHasCredentialAccount] =
+    useState<boolean>(false);
+  const [credentialLoading, setCredentialLoading] = useState(true);
+
+  useEffect(() => {
+    if (!session?.user) {
+      setCredentialLoading(false);
+      return;
+    }
+    authClient.listAccounts().then((result) => {
+      if (result.data) {
+        const hasCredential = result.data.some(
+          (account) => account.providerId === "credential"
+        );
+        setHasCredentialAccount(hasCredential);
+      }
+      setCredentialLoading(false);
+    });
+  }, [session?.user, authClient]);
+
+  if (isPending || permissionsLoading || credentialLoading) {
+    return <div className="w-20 h-9 bg-muted animate-pulse rounded-full" />;
+  }
+
+  if (session?.user) {
+    // Check if we have any bottom items to decide if we need a separator
+    const bottomExtensions = pluginRegistry.getExtensions(
+      UserMenuItemsBottomSlot.id
+    );
+    const hasBottomItems = bottomExtensions.length > 0;
+    const menuContext: UserMenuItemsContext = {
+      permissions,
+      hasCredentialAccount,
+    };
+
+    return (
+      <UserMenu user={session.user}>
+        <ExtensionSlot slot={UserMenuItemsSlot} context={menuContext} />
+        {hasBottomItems && <DropdownMenuSeparator />}
+        <ExtensionSlot slot={UserMenuItemsBottomSlot} context={menuContext} />
+      </UserMenu>
+    );
+  }
+
+  return (
+    <Link to={resolveRoute(authRoutes.routes.login)}>
+      <Button variant="outline" className="flex items-center rounded-full px-5">
+        <LogIn className="mr-2 h-4 w-4" />
+        Login
+      </Button>
+    </Link>
+  );
+};