@checkstack/auth-frontend 0.0.2

package/src/components/RegisterPage.tsx

@@ -0,0 +1,350 @@
+import React, { useState, useEffect } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { AlertCircle } from "lucide-react";
+import { useApi, rpcApiRef } from "@checkstack/frontend-api";
+import { authApiRef } from "../api";
+import {
+  AuthApi,
+  authRoutes,
+  passwordSchema,
+} from "@checkstack/auth-common";
+import { resolveRoute } from "@checkstack/common";
+import {
+  Button,
+  Input,
+  Label,
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+  InfoBanner,
+  InfoBannerIcon,
+  InfoBannerContent,
+  InfoBannerTitle,
+  InfoBannerDescription,
+} from "@checkstack/ui";
+import { useEnabledStrategies } from "../hooks/useEnabledStrategies";
+import { SocialProviderButton } from "./SocialProviderButton";
+import { useAuthClient } from "../lib/auth-client";
+
+export const RegisterPage = () => {
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [validationErrors, setValidationErrors] = useState<string[]>([]);
+  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);
+  const [checkingRegistration, setCheckingRegistration] = useState(true);
+  const authClient = useAuthClient();
+
+  // 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]);
+
+  useEffect(() => {
+    authRpcClient
+      .getRegistrationStatus()
+      .then(({ allowRegistration }) => {
+        setRegistrationAllowed(allowRegistration);
+      })
+      .catch((error: Error) => {
+        console.error("Failed to check registration status:", error);
+        // Default to allowed on error to avoid blocking
+        setRegistrationAllowed(true);
+      })
+      .finally(() => setCheckingRegistration(false));
+  }, [authRpcClient]);
+
+  const handleCredentialRegister = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    // Validate password before submitting
+    const result = passwordSchema.safeParse(password);
+    if (!result.success) {
+      return;
+    }
+
+    setLoading(true);
+    try {
+      const res = await authClient.signUp.email({ name, email, password });
+      if (res.error) {
+        console.error("Registration failed:", res.error);
+      } else {
+        navigate("/");
+      }
+    } catch (error) {
+      console.error("Registration failed:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSocialRegister = async (provider: string) => {
+    try {
+      await authApi.signInWithSocial(provider);
+      // Navigation will happen automatically after OAuth redirect
+    } catch (error) {
+      console.error("Social registration 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 || checkingRegistration) {
+    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>
+    );
+  }
+
+  // Registration is disabled
+  if (!registrationAllowed) {
+    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>Registration Disabled</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <InfoBanner variant="warning">
+              <InfoBannerIcon>
+                <AlertCircle className="h-4 w-4" />
+              </InfoBannerIcon>
+              <InfoBannerContent>
+                <InfoBannerTitle>
+                  Registration is Currently Disabled
+                </InfoBannerTitle>
+                <InfoBannerDescription>
+                  New user registration has been disabled by the system
+                  administrator. If you already have an account, please{" "}
+                  <Link
+                    to={resolveRoute(authRoutes.routes.login)}
+                    className="underline text-primary hover:text-primary/90 font-medium"
+                  >
+                    sign in
+                  </Link>
+                  . Otherwise, please contact your administrator for assistance.
+                </InfoBannerDescription>
+              </InfoBannerContent>
+            </InfoBanner>
+          </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>Registration Unavailable</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <InfoBanner variant="warning">
+              <InfoBannerIcon>
+                <AlertCircle className="h-4 w-4" />
+              </InfoBannerIcon>
+              <InfoBannerContent>
+                <InfoBannerTitle>
+                  No authentication methods enabled
+                </InfoBannerTitle>
+                <InfoBannerDescription>
+                  Please contact your system administrator to enable
+                  authentication methods.
+                </InfoBannerDescription>
+              </InfoBannerContent>
+            </InfoBanner>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  // Check if any strategy requires manual registration
+  const requiresRegistration = strategies.some(
+    (s) => s.requiresManualRegistration
+  );
+
+  // If no strategy requires manual registration, inform the user
+  if (!requiresRegistration) {
+    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>Registration Not Required</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <InfoBanner>
+              <InfoBannerIcon>
+                <AlertCircle className="h-4 w-4" />
+              </InfoBannerIcon>
+              <InfoBannerContent>
+                <InfoBannerTitle>Automatic Account Creation</InfoBannerTitle>
+                <InfoBannerDescription>
+                  Accounts are automatically created when you sign in with one
+                  of the available authentication methods. Please proceed to the{" "}
+                  <Link
+                    to="/auth/login"
+                    className="underline text-primary hover:text-primary/90 font-medium"
+                  >
+                    login page
+                  </Link>
+                  .
+                </InfoBannerDescription>
+              </InfoBannerContent>
+            </InfoBanner>
+          </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>Create your account</CardTitle>
+          <CardDescription>
+            {hasCredential && hasSocial
+              ? "Choose your preferred registration method"
+              : hasCredential
+              ? "Enter your details to get started"
+              : "Continue to create your account"}
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-4">
+            {/* Credential Registration Form */}
+            {hasCredential && (
+              <form className="space-y-4" onSubmit={handleCredentialRegister}>
+                <div className="space-y-2">
+                  <Label htmlFor="name">Name</Label>
+                  <Input
+                    id="name"
+                    placeholder="John Doe"
+                    type="text"
+                    required
+                    value={name}
+                    onChange={(e) => setName(e.target.value)}
+                  />
+                </div>
+                <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)}
+                  />
+                  {validationErrors.length > 0 && (
+                    <ul className="text-sm text-muted-foreground list-disc pl-5 space-y-1">
+                      {validationErrors.map((validationError, i) => (
+                        <li key={i} className="text-destructive">
+                          {validationError}
+                        </li>
+                      ))}
+                    </ul>
+                  )}
+                  <p className="text-xs text-muted-foreground">
+                    At least 8 characters with uppercase, lowercase, and number
+                  </p>
+                </div>
+                <Button
+                  type="submit"
+                  className="w-full"
+                  disabled={loading || validationErrors.length > 0}
+                >
+                  {loading ? "Creating Account..." : "Create Account"}
+                </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={() => handleSocialRegister(strategy.id)}
+                  />
+                ))}
+              </div>
+            )}
+          </div>
+        </CardContent>
+        <CardFooter className="flex justify-center border-t border-border mt-4 pt-4">
+          <div className="text-sm">
+            Already have an account?{" "}
+            <Link
+              to={resolveRoute(authRoutes.routes.login)}
+              className="underline text-primary hover:text-primary/90 font-medium"
+            >
+              Sign in
+            </Link>
+          </div>
+        </CardFooter>
+      </Card>
+    </div>
+  );
+};

package/src/components/ResetPasswordPage.tsx

@@ -0,0 +1,262 @@
+import React, { useState, useEffect } from "react";
+import { Link, useSearchParams, useNavigate } from "react-router-dom";
+import { Lock, ArrowLeft, CheckCircle, AlertCircle } from "lucide-react";
+import { authRoutes, passwordSchema } from "@checkstack/auth-common";
+import { resolveRoute } from "@checkstack/common";
+import {
+  Button,
+  Input,
+  Label,
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+  Alert,
+  AlertIcon,
+  AlertContent,
+  AlertTitle,
+  AlertDescription,
+} from "@checkstack/ui";
+import { useAuthClient } from "../lib/auth-client";
+
+export const ResetPasswordPage = () => {
+  const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
+  const token = searchParams.get("token");
+
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string>();
+  const [success, setSuccess] = useState(false);
+  const [validationErrors, setValidationErrors] = useState<string[]>([]);
+  const authClient = useAuthClient();
+
+  // 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();
+    setError(undefined);
+
+    // Frontend validation
+    if (password !== confirmPassword) {
+      setError("Passwords do not match");
+      return;
+    }
+
+    const result = passwordSchema.safeParse(password);
+    if (!result.success) {
+      setError(result.error.issues[0].message);
+      return;
+    }
+
+    if (!token) {
+      setError("Invalid or missing reset token");
+      return;
+    }
+
+    setLoading(true);
+    try {
+      const response = await authClient.resetPassword({
+        newPassword: password,
+        token,
+      });
+
+      if (response.error) {
+        setError(response.error.message ?? "Failed to reset password");
+      } else {
+        setSuccess(true);
+      }
+    } catch (error_) {
+      setError(
+        error_ instanceof Error ? error_.message : "Failed to reset password"
+      );
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // No token - show error
+  if (!token) {
+    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-destructive/10 flex items-center justify-center mb-2">
+              <AlertCircle className="h-6 w-6 text-destructive" />
+            </div>
+            <CardTitle className="text-2xl font-bold">Invalid Link</CardTitle>
+            <CardDescription>
+              This password reset link is invalid or has expired. Please request
+              a new one.
+            </CardDescription>
+          </CardHeader>
+          <CardFooter className="flex flex-col gap-4">
+            <Button
+              variant="primary"
+              className="w-full"
+              onClick={() =>
+                navigate(resolveRoute(authRoutes.routes.forgotPassword))
+              }
+            >
+              Request New 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>
+        </Card>
+      </div>
+    );
+  }
+
+  // Success state
+  if (success) {
+    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">
+              Password Reset Successfully
+            </CardTitle>
+            <CardDescription>
+              Your password has been reset. You can now log in with your new
+              password.
+            </CardDescription>
+          </CardHeader>
+          <CardFooter>
+            <Button
+              className="w-full"
+              onClick={() => navigate(resolveRoute(authRoutes.routes.login))}
+            >
+              Go to Login
+            </Button>
+          </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">Reset Password</CardTitle>
+          <CardDescription>Enter your new password below.</CardDescription>
+        </CardHeader>
+        <form onSubmit={handleSubmit}>
+          <CardContent className="space-y-4">
+            {error && (
+              <Alert variant="error">
+                <AlertIcon>
+                  <AlertCircle className="h-4 w-4" />
+                </AlertIcon>
+                <AlertContent>
+                  <AlertTitle>Error</AlertTitle>
+                  <AlertDescription>{error}</AlertDescription>
+                </AlertContent>
+              </Alert>
+            )}
+
+            <div className="space-y-2">
+              <Label htmlFor="password">New Password</Label>
+              <div className="relative">
+                <Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                <Input
+                  id="password"
+                  type="password"
+                  placeholder="Enter new password"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  className="pl-10"
+                  required
+                  autoFocus
+                />
+              </div>
+              {validationErrors.length > 0 && (
+                <ul className="text-sm text-muted-foreground list-disc pl-5 space-y-1">
+                  {validationErrors.map((validationError, i) => (
+                    <li key={i} className="text-destructive">
+                      {validationError}
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="confirmPassword">Confirm Password</Label>
+              <div className="relative">
+                <Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                <Input
+                  id="confirmPassword"
+                  type="password"
+                  placeholder="Confirm new password"
+                  value={confirmPassword}
+                  onChange={(e) => setConfirmPassword(e.target.value)}
+                  className="pl-10"
+                  required
+                />
+              </div>
+              {confirmPassword && password !== confirmPassword && (
+                <p className="text-sm text-destructive">
+                  Passwords do not match
+                </p>
+              )}
+            </div>
+
+            <div className="text-xs text-muted-foreground">
+              Password must be at least 8 characters and contain:
+              <ul className="list-disc pl-5 mt-1">
+                <li>At least one uppercase letter</li>
+                <li>At least one lowercase letter</li>
+                <li>At least one number</li>
+              </ul>
+            </div>
+          </CardContent>
+          <CardFooter className="flex flex-col gap-4">
+            <Button
+              type="submit"
+              className="w-full"
+              disabled={
+                loading ||
+                validationErrors.length > 0 ||
+                password !== confirmPassword
+              }
+            >
+              {loading ? "Resetting..." : "Reset Password"}
+            </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>
+  );
+};