@questpie/admin 0.0.1 → 1.0.1

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

@@ -1,229 +0,0 @@
-/**
- * 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

@@ -1,232 +0,0 @@
-/**
- * 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>
-	);
-}