@questpie/admin 0.0.1

package/src/views/auth/login-form.tsx

@@ -0,0 +1,229 @@
+/**
+ * Login Form - email/password authentication
+ */
+
+import * as React from "react";
+import { useForm } from "react-hook-form";
+import { Envelope, Lock, SpinnerGap } from "@phosphor-icons/react";
+import { Button } from "../../components/ui/button";
+import { Input } from "../../components/ui/input";
+import {
+	Field,
+	FieldContent,
+	FieldDescription,
+	FieldError,
+	FieldGroup,
+	FieldLabel,
+} from "../../components/ui/field";
+import { cn } from "../../lib/utils";
+
+export type LoginFormValues = {
+	email: string;
+	password: string;
+	rememberMe?: boolean;
+};
+
+export type LoginFormProps = {
+	/** Called when form is submitted with valid data */
+	onSubmit: (values: LoginFormValues) => Promise<void>;
+	/** Called when sign up link is clicked */
+	onSignUpClick?: () => void;
+	/** Called when forgot password link is clicked */
+	onForgotPasswordClick?: () => void;
+	/** Show remember me checkbox */
+	showRememberMe?: boolean;
+	/** Show sign up link */
+	showSignUp?: boolean;
+	/** Show forgot password link */
+	showForgotPassword?: boolean;
+	/** Default values */
+	defaultValues?: Partial<LoginFormValues>;
+	/** Additional class name */
+	className?: string;
+	/** Error message from auth */
+	error?: string | null;
+};
+
+/**
+ * Login form with email and password fields
+ *
+ * @example
+ * ```tsx
+ * const authClient = createAdminAuthClient<typeof cms>({ baseURL: '...' })
+ *
+ * function LoginPage() {
+ *   const [error, setError] = useState<string | null>(null)
+ *
+ *   const handleLogin = async (values: LoginFormValues) => {
+ *     const result = await authClient.signIn.email({
+ *       email: values.email,
+ *       password: values.password,
+ *     })
+ *     if (result.error) {
+ *       setError(result.error.message)
+ *     }
+ *   }
+ *
+ *   return (
+ *     <AuthLayout title="Sign in">
+ *       <LoginForm onSubmit={handleLogin} error={error} />
+ *     </AuthLayout>
+ *   )
+ * }
+ * ```
+ */
+export function LoginForm({
+	onSubmit,
+	onSignUpClick,
+	onForgotPasswordClick,
+	showRememberMe = false,
+	showSignUp = true,
+	showForgotPassword = true,
+	defaultValues,
+	className,
+	error,
+}: LoginFormProps) {
+	const {
+		register,
+		handleSubmit,
+		formState: { errors, isSubmitting },
+	} = useForm<LoginFormValues>({
+		defaultValues: {
+			email: "",
+			password: "",
+			rememberMe: false,
+			...defaultValues,
+		},
+	});
+
+	const handleFormSubmit = handleSubmit(async (values) => {
+		await onSubmit(values);
+	});
+
+	return (
+		<form onSubmit={handleFormSubmit} className={cn("space-y-4", className)}>
+			<FieldGroup>
+				{/* Email Field */}
+				<Field data-invalid={!!errors.email}>
+					<FieldLabel htmlFor="email">Email</FieldLabel>
+					<FieldContent>
+						<div className="relative">
+							<Envelope
+								className="text-muted-foreground absolute left-2 top-1/2 size-4 -translate-y-1/2"
+								weight="duotone"
+							/>
+							<Input
+								id="email"
+								type="email"
+								placeholder="you@example.com"
+								className="pl-8"
+								autoComplete="email"
+								aria-invalid={!!errors.email}
+								{...register("email", {
+									required: "Email is required",
+									pattern: {
+										value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
+										message: "Invalid email address",
+									},
+								})}
+							/>
+						</div>
+						<FieldError>{errors.email?.message}</FieldError>
+					</FieldContent>
+				</Field>
+
+				{/* Password Field */}
+				<Field data-invalid={!!errors.password}>
+					<FieldLabel htmlFor="password">Password</FieldLabel>
+					<FieldContent>
+						<div className="relative">
+							<Lock
+								className="text-muted-foreground absolute left-2 top-1/2 size-4 -translate-y-1/2"
+								weight="duotone"
+							/>
+							<Input
+								id="password"
+								type="password"
+								placeholder="Enter your password"
+								className="pl-8"
+								autoComplete="current-password"
+								aria-invalid={!!errors.password}
+								{...register("password", {
+									required: "Password is required",
+									minLength: {
+										value: 6,
+										message: "Password must be at least 6 characters",
+									},
+								})}
+							/>
+						</div>
+						<FieldError>{errors.password?.message}</FieldError>
+					</FieldContent>
+				</Field>
+
+				{/* Remember Me & Forgot Password */}
+				{(showRememberMe || showForgotPassword) && (
+					<div className="flex items-center justify-between">
+						{showRememberMe && (
+							<label className="text-muted-foreground flex items-center gap-2 text-xs">
+								<input
+									type="checkbox"
+									className="rounded border-gray-300"
+									{...register("rememberMe")}
+								/>
+								Remember me
+							</label>
+						)}
+						{showForgotPassword && (
+							<button
+								type="button"
+								onClick={onForgotPasswordClick}
+								className="text-primary text-xs hover:underline"
+							>
+								Forgot password?
+							</button>
+						)}
+					</div>
+				)}
+			</FieldGroup>
+
+			{/* Error Message */}
+			{error && (
+				<div className="bg-destructive/10 text-destructive rounded-md p-3 text-xs">
+					{error}
+				</div>
+			)}
+
+			{/* Submit Button */}
+			<Button
+				type="submit"
+				className="w-full"
+				size="lg"
+				disabled={isSubmitting}
+			>
+				{isSubmitting ? (
+					<>
+						<SpinnerGap className="animate-spin" weight="bold" />
+						Signing in...
+					</>
+				) : (
+					"Sign in"
+				)}
+			</Button>
+
+			{/* Sign Up Link */}
+			{showSignUp && (
+				<p className="text-muted-foreground text-center text-xs">
+					Don't have an account?{" "}
+					<button
+						type="button"
+						onClick={onSignUpClick}
+						className="text-primary hover:underline"
+					>
+						Sign up
+					</button>
+				</p>
+			)}
+		</form>
+	);
+}

package/src/views/auth/reset-password-form.tsx

@@ -0,0 +1,232 @@
+/**
+ * Reset Password Form - set new password with token
+ */
+
+import * as React from "react";
+import { useForm } from "react-hook-form";
+import { Lock, SpinnerGap, CheckCircle } from "@phosphor-icons/react";
+import { Button } from "../../components/ui/button";
+import { Input } from "../../components/ui/input";
+import {
+	Field,
+	FieldContent,
+	FieldDescription,
+	FieldError,
+	FieldGroup,
+	FieldLabel,
+} from "../../components/ui/field";
+import { cn } from "../../lib/utils";
+
+export type ResetPasswordFormValues = {
+	password: string;
+	confirmPassword: string;
+};
+
+export type ResetPasswordFormProps = {
+	/** Reset token from URL */
+	token: string;
+	/** Called when form is submitted with valid data */
+	onSubmit: (
+		values: ResetPasswordFormValues & { token: string },
+	) => Promise<void>;
+	/** Called when back to login link is clicked */
+	onBackToLoginClick?: () => void;
+	/** Minimum password length */
+	minPasswordLength?: number;
+	/** Additional class name */
+	className?: string;
+	/** Error message from auth */
+	error?: string | null;
+};
+
+/**
+ * Reset password form with password confirmation
+ *
+ * @example
+ * ```tsx
+ * const authClient = createAdminAuthClient<typeof cms>({ baseURL: '...' })
+ *
+ * function ResetPasswordPage() {
+ *   const token = useSearchParams().get('token')
+ *   const [error, setError] = useState<string | null>(null)
+ *
+ *   const handleSubmit = async (values) => {
+ *     const result = await authClient.resetPassword({
+ *       token: values.token,
+ *       newPassword: values.password,
+ *     })
+ *     if (result.error) {
+ *       setError(result.error.message)
+ *     }
+ *   }
+ *
+ *   return (
+ *     <AuthLayout title="Reset password">
+ *       <ResetPasswordForm token={token} onSubmit={handleSubmit} error={error} />
+ *     </AuthLayout>
+ *   )
+ * }
+ * ```
+ */
+export function ResetPasswordForm({
+	token,
+	onSubmit,
+	onBackToLoginClick,
+	minPasswordLength = 8,
+	className,
+	error,
+}: ResetPasswordFormProps) {
+	const [isSuccess, setIsSuccess] = React.useState(false);
+
+	const {
+		register,
+		handleSubmit,
+		watch,
+		formState: { errors, isSubmitting },
+	} = useForm<ResetPasswordFormValues>({
+		defaultValues: {
+			password: "",
+			confirmPassword: "",
+		},
+	});
+
+	const password = watch("password");
+
+	const handleFormSubmit = handleSubmit(async (values) => {
+		await onSubmit({ ...values, token });
+		if (!error) {
+			setIsSuccess(true);
+		}
+	});
+
+	// Success state
+	if (isSuccess) {
+		return (
+			<div className={cn("space-y-4 text-center", className)}>
+				<div className="bg-primary/10 mx-auto flex size-12 items-center justify-center rounded-full">
+					<CheckCircle className="text-primary size-6" weight="duotone" />
+				</div>
+				<div className="space-y-2">
+					<h3 className="text-sm font-medium">Password reset successful</h3>
+					<p className="text-muted-foreground text-xs">
+						Your password has been reset successfully. You can now sign in with
+						your new password.
+					</p>
+				</div>
+				<Button
+					type="button"
+					className="w-full"
+					size="lg"
+					onClick={onBackToLoginClick}
+				>
+					Sign in
+				</Button>
+			</div>
+		);
+	}
+
+	return (
+		<form onSubmit={handleFormSubmit} className={cn("space-y-4", className)}>
+			<p className="text-muted-foreground text-xs">
+				Enter your new password below.
+			</p>
+
+			<FieldGroup>
+				{/* Password Field */}
+				<Field data-invalid={!!errors.password}>
+					<FieldLabel htmlFor="password">New password</FieldLabel>
+					<FieldContent>
+						<div className="relative">
+							<Lock
+								className="text-muted-foreground absolute left-2 top-1/2 size-4 -translate-y-1/2"
+								weight="duotone"
+							/>
+							<Input
+								id="password"
+								type="password"
+								placeholder="Enter new password"
+								className="pl-8"
+								autoComplete="new-password"
+								aria-invalid={!!errors.password}
+								{...register("password", {
+									required: "Password is required",
+									minLength: {
+										value: minPasswordLength,
+										message: `Password must be at least ${minPasswordLength} characters`,
+									},
+								})}
+							/>
+						</div>
+						<FieldDescription>
+							Must be at least {minPasswordLength} characters
+						</FieldDescription>
+						<FieldError>{errors.password?.message}</FieldError>
+					</FieldContent>
+				</Field>
+
+				{/* Confirm Password Field */}
+				<Field data-invalid={!!errors.confirmPassword}>
+					<FieldLabel htmlFor="confirmPassword">Confirm password</FieldLabel>
+					<FieldContent>
+						<div className="relative">
+							<Lock
+								className="text-muted-foreground absolute left-2 top-1/2 size-4 -translate-y-1/2"
+								weight="duotone"
+							/>
+							<Input
+								id="confirmPassword"
+								type="password"
+								placeholder="Confirm new password"
+								className="pl-8"
+								autoComplete="new-password"
+								aria-invalid={!!errors.confirmPassword}
+								{...register("confirmPassword", {
+									required: "Please confirm your password",
+									validate: (value) =>
+										value === password || "Passwords do not match",
+								})}
+							/>
+						</div>
+						<FieldError>{errors.confirmPassword?.message}</FieldError>
+					</FieldContent>
+				</Field>
+			</FieldGroup>
+
+			{/* Error Message */}
+			{error && (
+				<div className="bg-destructive/10 text-destructive rounded-md p-3 text-xs">
+					{error}
+				</div>
+			)}
+
+			{/* Submit Button */}
+			<Button
+				type="submit"
+				className="w-full"
+				size="lg"
+				disabled={isSubmitting}
+			>
+				{isSubmitting ? (
+					<>
+						<SpinnerGap className="animate-spin" weight="bold" />
+						Resetting...
+					</>
+				) : (
+					"Reset password"
+				)}
+			</Button>
+
+			{/* Back to Login Link */}
+			<p className="text-muted-foreground text-center text-xs">
+				Remember your password?{" "}
+				<button
+					type="button"
+					onClick={onBackToLoginClick}
+					className="text-primary hover:underline"
+				>
+					Back to login
+				</button>
+			</p>
+		</form>
+	);
+}