feature(auth): implement login and registration pages

package-lock.json

@@ -8,7 +8,10 @@
 			"name": "frontend",
 			"version": "0.0.0",
 			"dependencies": {
+				"@hookform/resolvers": "^5.2.2",
+				"@radix-ui/react-avatar": "^1.1.10",
 				"@radix-ui/react-dropdown-menu": "^2.1.16",
+				"@radix-ui/react-label": "^2.1.7",
 				"@radix-ui/react-separator": "^1.1.7",
 				"@radix-ui/react-slot": "^1.2.3",
 				"@radix-ui/react-switch": "^1.2.6",
@@ -1086,6 +1089,18 @@
 				"@shikijs/vscode-textmate": "^10.0.2"
 			}
 		},
+		"node_modules/@hookform/resolvers": {
+			"version": "5.2.2",
+			"resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-5.2.2.tgz",
+			"integrity": "sha512-A/IxlMLShx3KjV/HeTcTfaMxdwy690+L/ZADoeaTltLx+CVuzkeVIPuybK3jrRfw7YZnmdKsVVHAlEPIAEUNlA==",
+			"license": "MIT",
+			"dependencies": {
+				"@standard-schema/utils": "^0.3.0"
+			},
+			"peerDependencies": {
+				"react-hook-form": "^7.55.0"
+			}
+		},
 		"node_modules/@humanfs/core": {
 			"version": "0.19.1",
 			"resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
@@ -1462,6 +1477,33 @@
 				}
 			}
 		},
+		"node_modules/@radix-ui/react-avatar": {
+			"version": "1.1.10",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-avatar/-/react-avatar-1.1.10.tgz",
+			"integrity": "sha512-V8piFfWapM5OmNCXTzVQY+E1rDa53zY+MQ4Y7356v4fFz6vqCyUtIz2rUD44ZEdwg78/jKmMJHj07+C/Z/rcog==",
+			"license": "MIT",
+			"dependencies": {
+				"@radix-ui/react-context": "1.1.2",
+				"@radix-ui/react-primitive": "2.1.3",
+				"@radix-ui/react-use-callback-ref": "1.1.1",
+				"@radix-ui/react-use-is-hydrated": "0.1.0",
+				"@radix-ui/react-use-layout-effect": "1.1.1"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+				"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/@radix-ui/react-collection": {
 			"version": "1.1.7",
 			"resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.7.tgz",
@@ -1647,6 +1689,29 @@
 				}
 			}
 		},
+		"node_modules/@radix-ui/react-label": {
+			"version": "2.1.7",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.1.7.tgz",
+			"integrity": "sha512-YT1GqPSL8kJn20djelMX7/cTRp/Y9w5IZHvfxQTVHrOqa2yMl7i/UfMqKRU5V7mEyKTrUVgJXhNQPVCG8PBLoQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@radix-ui/react-primitive": "2.1.3"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+				"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/@radix-ui/react-menu": {
 			"version": "2.1.16",
 			"resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.1.16.tgz",
@@ -1961,6 +2026,24 @@
 				}
 			}
 		},
+		"node_modules/@radix-ui/react-use-is-hydrated": {
+			"version": "0.1.0",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-use-is-hydrated/-/react-use-is-hydrated-0.1.0.tgz",
+			"integrity": "sha512-U+UORVEq+cTnRIaostJv9AGdV3G6Y+zbVd+12e18jQ5A3c0xL03IhnHuiU4UV69wolOQp5GfR58NW/EgdQhwOA==",
+			"license": "MIT",
+			"dependencies": {
+				"use-sync-external-store": "^1.5.0"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/@radix-ui/react-use-layout-effect": {
 			"version": "1.1.1",
 			"resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz",
@@ -2370,6 +2453,12 @@
 			"integrity": "sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==",
 			"license": "MIT"
 		},
+		"node_modules/@standard-schema/utils": {
+			"version": "0.3.0",
+			"resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz",
+			"integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==",
+			"license": "MIT"
+		},
 		"node_modules/@stoplight/json": {
 			"version": "3.21.7",
 			"resolved": "https://registry.npmjs.org/@stoplight/json/-/json-3.21.7.tgz",
@@ -8164,6 +8253,15 @@
 				}
 			}
 		},
+		"node_modules/use-sync-external-store": {
+			"version": "1.6.0",
+			"resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+			"integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
+			"license": "MIT",
+			"peerDependencies": {
+				"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+			}
+		},
 		"node_modules/utility-types": {
 			"version": "3.11.0",
 			"resolved": "https://registry.npmjs.org/utility-types/-/utility-types-3.11.0.tgz",

package.json

@@ -10,7 +10,10 @@
 		"preview": "vite preview"
 	},
 	"dependencies": {
+		"@hookform/resolvers": "^5.2.2",
+		"@radix-ui/react-avatar": "^1.1.10",
 		"@radix-ui/react-dropdown-menu": "^2.1.16",
+		"@radix-ui/react-label": "^2.1.7",
 		"@radix-ui/react-separator": "^1.1.7",
 		"@radix-ui/react-slot": "^1.2.3",
 		"@radix-ui/react-switch": "^1.2.6",

src/components/AuthHeader.tsx

@@ -0,0 +1,79 @@
+import { LogIn, LogOut, Settings, User } from "lucide-react";
+import { Link, useNavigate } from "react-router";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar.tsx";
+import { Button } from "@/components/ui/button";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { useAuth } from "@/contexts/AuthContext.tsx";
+
+export const AuthHeader = () => {
+	const { user, logout } = useAuth();
+	const navigate = useNavigate();
+
+	const handleLogout = () => {
+		logout();
+		navigate("/");
+	};
+
+	if (!user) {
+		return (
+			<Button
+				variant="outline"
+				size="sm"
+				className="gap-2 bg-transparent"
+				onClick={() => navigate("/login")}
+			>
+				<LogIn className="h-4 w-4" />
+				Sign In
+			</Button>
+		);
+	}
+
+	return (
+		<DropdownMenu>
+			<DropdownMenuTrigger asChild>
+				<Button variant="ghost" className="relative h-8 w-8 rounded-full">
+					<Avatar className="h-8 w-8">
+						<AvatarFallback className="bg-primary text-primary-foreground">
+							{user.name.charAt(0).toUpperCase()}
+						</AvatarFallback>
+					</Avatar>
+				</Button>
+			</DropdownMenuTrigger>
+			<DropdownMenuContent align="end" className="w-56">
+				<div className="flex items-center justify-start gap-2 p-2">
+					<div className="flex flex-col space-y-1 leading-none">
+						<p className="font-medium">{user.name}</p>
+						<p className="text-xs text-muted-foreground">{user.email}</p>
+					</div>
+				</div>
+				<DropdownMenuSeparator />
+				<DropdownMenuItem asChild>
+					<Link to="/profile" className="cursor-pointer gap-2">
+						<User className="h-4 w-4" />
+						Profile
+					</Link>
+				</DropdownMenuItem>
+				<DropdownMenuItem asChild>
+					<Link to="/profile?tab=preferences" className="cursor-pointer gap-2">
+						<Settings className="h-4 w-4" />
+						Preferences
+					</Link>
+				</DropdownMenuItem>
+				<DropdownMenuSeparator />
+				<DropdownMenuItem
+					onClick={handleLogout}
+					className="cursor-pointer gap-2 text-destructive"
+				>
+					<LogOut className="h-4 w-4" />
+					Logout
+				</DropdownMenuItem>
+			</DropdownMenuContent>
+		</DropdownMenu>
+	);
+};

src/components/Pagination.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { Button } from "@/components/ui/button";
 

src/components/ui/alert.tsx

@@ -0,0 +1,66 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const alertVariants = cva(
+	"relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+	{
+		variants: {
+			variant: {
+				default: "bg-card text-card-foreground",
+				destructive:
+					"text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	},
+);
+
+function Alert({
+	className,
+	variant,
+	...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+	return (
+		<div
+			data-slot="alert"
+			role="alert"
+			className={cn(alertVariants({ variant }), className)}
+			{...props}
+		/>
+	);
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="alert-title"
+			className={cn(
+				"col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function AlertDescription({
+	className,
+	...props
+}: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="alert-description"
+			className={cn(
+				"text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export { Alert, AlertTitle, AlertDescription };

src/components/ui/avatar.tsx

@@ -0,0 +1,51 @@
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Avatar({
+	className,
+	...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+	return (
+		<AvatarPrimitive.Root
+			data-slot="avatar"
+			className={cn(
+				"relative flex size-8 shrink-0 overflow-hidden rounded-full",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function AvatarImage({
+	className,
+	...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+	return (
+		<AvatarPrimitive.Image
+			data-slot="avatar-image"
+			className={cn("aspect-square size-full", className)}
+			{...props}
+		/>
+	);
+}
+
+function AvatarFallback({
+	className,
+	...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+	return (
+		<AvatarPrimitive.Fallback
+			data-slot="avatar-fallback"
+			className={cn(
+				"bg-muted flex size-full items-center justify-center rounded-full",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export { Avatar, AvatarImage, AvatarFallback };

src/components/ui/form.tsx

@@ -0,0 +1,167 @@
+"use client";
+
+import type * as LabelPrimitive from "@radix-ui/react-label";
+import { Slot } from "@radix-ui/react-slot";
+import * as React from "react";
+import {
+	Controller,
+	type ControllerProps,
+	type FieldPath,
+	type FieldValues,
+	FormProvider,
+	useFormContext,
+	useFormState,
+} from "react-hook-form";
+import { Label } from "@/components/ui/label";
+import { cn } from "@/lib/utils";
+
+const Form = FormProvider;
+
+type FormFieldContextValue<
+	TFieldValues extends FieldValues = FieldValues,
+	TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+	name: TName;
+};
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+	{} as FormFieldContextValue,
+);
+
+const FormField = <
+	TFieldValues extends FieldValues = FieldValues,
+	TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+	...props
+}: ControllerProps<TFieldValues, TName>) => {
+	return (
+		<FormFieldContext.Provider value={{ name: props.name }}>
+			<Controller {...props} />
+		</FormFieldContext.Provider>
+	);
+};
+
+const useFormField = () => {
+	const fieldContext = React.useContext(FormFieldContext);
+	const itemContext = React.useContext(FormItemContext);
+	const { getFieldState } = useFormContext();
+	const formState = useFormState({ name: fieldContext.name });
+	const fieldState = getFieldState(fieldContext.name, formState);
+
+	if (!fieldContext) {
+		throw new Error("useFormField should be used within <FormField>");
+	}
+
+	const { id } = itemContext;
+
+	return {
+		id,
+		name: fieldContext.name,
+		formItemId: `${id}-form-item`,
+		formDescriptionId: `${id}-form-item-description`,
+		formMessageId: `${id}-form-item-message`,
+		...fieldState,
+	};
+};
+
+type FormItemContextValue = {
+	id: string;
+};
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+	{} as FormItemContextValue,
+);
+
+function FormItem({ className, ...props }: React.ComponentProps<"div">) {
+	const id = React.useId();
+
+	return (
+		<FormItemContext.Provider value={{ id }}>
+			<div
+				data-slot="form-item"
+				className={cn("grid gap-2", className)}
+				{...props}
+			/>
+		</FormItemContext.Provider>
+	);
+}
+
+function FormLabel({
+	className,
+	...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+	const { error, formItemId } = useFormField();
+
+	return (
+		<Label
+			data-slot="form-label"
+			data-error={!!error}
+			className={cn("data-[error=true]:text-destructive", className)}
+			htmlFor={formItemId}
+			{...props}
+		/>
+	);
+}
+
+function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
+	const { error, formItemId, formDescriptionId, formMessageId } =
+		useFormField();
+
+	return (
+		<Slot
+			data-slot="form-control"
+			id={formItemId}
+			aria-describedby={
+				!error
+					? `${formDescriptionId}`
+					: `${formDescriptionId} ${formMessageId}`
+			}
+			aria-invalid={!!error}
+			{...props}
+		/>
+	);
+}
+
+function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
+	const { formDescriptionId } = useFormField();
+
+	return (
+		<p
+			data-slot="form-description"
+			id={formDescriptionId}
+			className={cn("text-muted-foreground text-sm", className)}
+			{...props}
+		/>
+	);
+}
+
+function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
+	const { error, formMessageId } = useFormField();
+	const body = error ? String(error?.message ?? "") : props.children;
+
+	if (!body) {
+		return null;
+	}
+
+	return (
+		<p
+			data-slot="form-message"
+			id={formMessageId}
+			className={cn("text-destructive text-sm", className)}
+			{...props}
+		>
+			{body}
+		</p>
+	);
+}
+
+export {
+	useFormField,
+	Form,
+	FormItem,
+	FormLabel,
+	FormControl,
+	FormDescription,
+	FormMessage,
+	FormField,
+};

src/components/ui/label.tsx

@@ -0,0 +1,22 @@
+import * as LabelPrimitive from "@radix-ui/react-label";
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Label({
+	className,
+	...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+	return (
+		<LabelPrimitive.Root
+			data-slot="label"
+			className={cn(
+				"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export { Label };

src/contexts/AuthContext.tsx

@@ -41,16 +41,14 @@ interface AuthContextType {
 const AuthContext = createContext<AuthContextType | undefined>(undefined);
 
 export function AuthProvider({ children }: { children: ReactNode }) {
-	// const router = useRouter();
-
 	const [user, setUser] = useState<User | null>(null);
 
 	const { mutate: mutateRegisterUser, isPending: isPendingRegisterUser } =
 		useRegisterUser({
 			mutation: {
 				onSuccess: () => {
-					// router.push("/login");
 					toast.success("Registration successful! You can now login.");
+					window.location.href = "/login";
 				},
 			},
 		});
@@ -75,7 +73,7 @@ export function AuthProvider({ children }: { children: ReactNode }) {
 
 					localStorage.setItem("userData", JSON.stringify(userData));
 
-					// router.push("/");
+					window.location.href = "/";
 				},
 			},
 		});

src/features/home/components/FilterSidebar.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import { Star, X } from "lucide-react";
 import { useGetGenres } from "@/api/generated/genre/genre.ts";
 import { Badge } from "@/components/ui/badge";

src/features/home/components/SortDropdown.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import { ArrowDown, ArrowUp, ArrowUpDown } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import {

src/pages/Home.tsx

@@ -2,6 +2,7 @@ import { BookOpen, Search } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useDebounce } from "use-debounce";
 import { useGetMangas } from "@/api/generated/manga/manga.ts";
+import { AuthHeader } from "@/components/AuthHeader.tsx";
 import { Pagination } from "@/components/Pagination.tsx";
 import { Input } from "@/components/ui/input.tsx";
 import { FilterSidebar } from "@/features/home/components/FilterSidebar.tsx";
@@ -76,7 +77,7 @@ const Home = () => {
 								<div className="flex items-center gap-4">
 									{/*<ImportDropdown />*/}
 									{/*<ThemeToggle />*/}
-									{/*<AuthHeader />*/}
+									<AuthHeader />
 								</div>
 							</div>
 

src/pages/Login.tsx

@@ -0,0 +1,117 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useCallback } from "react";
+import { useForm } from "react-hook-form";
+import { Link } from "react-router";
+import { z } from "zod";
+import { Button } from "@/components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import {
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form.tsx";
+import { Input } from "@/components/ui/input";
+import { useAuth } from "@/contexts/AuthContext.tsx";
+
+const Login = () => {
+	const { login, isLoading } = useAuth();
+
+	const formSchema = z
+		.object({
+			email: z.email(),
+			password: z.string().min(1, "Invalid password"),
+		})
+		.required();
+
+	const form = useForm<z.infer<typeof formSchema>>({
+		resolver: zodResolver(formSchema),
+		defaultValues: {
+			email: "",
+			password: "",
+		},
+	});
+
+	const handleSubmit = useCallback(
+		async (values: z.infer<typeof formSchema>) => {
+			await login(values.email, values.password);
+		},
+		[formSchema, login],
+	);
+
+	return (
+		<div className="flex min-h-screen items-center justify-center bg-background px-4">
+			<Card className="w-full max-w-md">
+				<CardHeader className="space-y-2">
+					<CardTitle className="text-2xl">Welcome Back</CardTitle>
+					<CardDescription>Sign in to your MangaMochi account</CardDescription>
+				</CardHeader>
+				<CardContent>
+					<Form {...form}>
+						<form
+							onSubmit={form.handleSubmit(handleSubmit)}
+							className="space-y-4"
+						>
+							<FormField
+								control={form.control}
+								name="email"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Email</FormLabel>
+										<FormControl>
+											<Input
+												type="email"
+												placeholder="you@example.com"
+												disabled={isLoading}
+												{...field}
+											/>
+										</FormControl>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+							<FormField
+								control={form.control}
+								name="password"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Password</FormLabel>
+										<FormControl>
+											<Input
+												type="password"
+												placeholder="Your password"
+												disabled={isLoading}
+												{...field}
+											/>
+										</FormControl>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+							<Button type="submit" className="w-full" disabled={isLoading}>
+								{isLoading ? "Signing in..." : "Sign In"}
+							</Button>
+
+							<p className="text-center text-sm text-muted-foreground">
+								Don't have an account?{" "}
+								<Link to="/register" className="text-primary hover:underline">
+									Create one
+								</Link>
+							</p>
+						</form>
+					</Form>
+				</CardContent>
+			</Card>
+		</div>
+	);
+};
+
+export default Login;

src/pages/Register.tsx

@@ -0,0 +1,165 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useCallback } from "react";
+import { useForm } from "react-hook-form";
+import { Link } from "react-router";
+import { z } from "zod";
+import { Button } from "@/components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import {
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form.tsx";
+import { Input } from "@/components/ui/input";
+import { useAuth } from "@/contexts/AuthContext.tsx";
+
+const Register = () => {
+	const { register, isLoading } = useAuth();
+
+	const formSchema = z
+		.object({
+			email: z.email(),
+			name: z.string().min(1, "Invalid name"),
+			password: z.string().min(1, "Invalid password"),
+			confirmPassword: z.string().min(1, "Invalid password"),
+		})
+		.refine(
+			(data: { password: string; confirmPassword: string }) =>
+				data.password === data.confirmPassword,
+			{
+				message: "Passwords don't match",
+				path: ["confirmPassword"],
+			},
+		);
+
+	const form = useForm<z.infer<typeof formSchema>>({
+		resolver: zodResolver(formSchema),
+		defaultValues: {
+			email: "",
+			name: "",
+			password: "",
+			confirmPassword: "",
+		},
+	});
+
+	const handleSubmit = useCallback(
+		async (data: z.infer<typeof formSchema>) => {
+			await register(data.email, data.password, data.name);
+		},
+		[register, formSchema],
+	);
+
+	return (
+		<div className="flex min-h-screen items-center justify-center bg-background px-4">
+			<Card className="w-full max-w-md">
+				<CardHeader className="space-y-2">
+					<CardTitle className="text-2xl">Create Account</CardTitle>
+					<CardDescription>
+						Join MangaMochi to read your favorite manga
+					</CardDescription>
+				</CardHeader>
+				<CardContent>
+					<Form {...form}>
+						<form
+							onSubmit={form.handleSubmit(handleSubmit)}
+							className="space-y-4"
+						>
+							<FormField
+								control={form.control}
+								name="email"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Email</FormLabel>
+										<FormControl>
+											<Input
+												type="email"
+												placeholder="you@example.com"
+												disabled={isLoading}
+												{...field}
+											/>
+										</FormControl>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+							<FormField
+								control={form.control}
+								name="name"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Name</FormLabel>
+										<FormControl>
+											<Input
+												placeholder="Your name"
+												disabled={isLoading}
+												{...field}
+											/>
+										</FormControl>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+							<FormField
+								control={form.control}
+								name="password"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Password</FormLabel>
+										<FormControl>
+											<Input
+												type="password"
+												placeholder="At least 6 characters"
+												disabled={isLoading}
+												{...field}
+											/>
+										</FormControl>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+							<FormField
+								control={form.control}
+								name="confirmPassword"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Confirm Password</FormLabel>
+										<FormControl>
+											<Input
+												type="password"
+												placeholder="Confirm your password"
+												disabled={isLoading}
+												{...field}
+											/>
+										</FormControl>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+							<Button type="submit" className="w-full" disabled={isLoading}>
+								{isLoading ? "Creating account..." : "Create Account"}
+							</Button>
+
+							<p className="text-center text-sm text-muted-foreground">
+								Already have an account?{" "}
+								<Link to="/login" className="text-primary hover:underline">
+									Sign in
+								</Link>
+							</p>
+						</form>
+					</Form>
+				</CardContent>
+			</Card>
+		</div>
+	);
+};
+
+export default Register;

src/pages/Router.tsx

@@ -3,6 +3,8 @@ import { createBrowserRouter } from "react-router";
 import { AppLayout } from "@/components/Layout/AppLayout.tsx";
 
 const Home = lazy(() => import("./Home.tsx"));
+const Login = lazy(() => import("./Login.tsx"));
+const Register = lazy(() => import("./Register.tsx"));
 
 export const Router = createBrowserRouter([
 	{
@@ -16,6 +18,14 @@ export const Router = createBrowserRouter([
 				index: true,
 				element: <Home />,
 			},
+			{
+				path: "/login",
+				element: <Login />,
+			},
+			{
+				path: "/register",
+				element: <Register />,
+			},
 		],
 	},
 ]);