+
+ );
+}
diff --git a/client/src/components/auth/CategoriesOnboardingModal.tsx b/client/src/components/auth/CategoriesOnboardingModal.tsx
new file mode 100644
index 0000000..d44e748
--- /dev/null
+++ b/client/src/components/auth/CategoriesOnboardingModal.tsx
@@ -0,0 +1,124 @@
+import { useEffect, useMemo, useState } from "react";
+import Dialog from "../../ui/Dialog";
+import { Button } from "../../ui";
+import { DefaultService } from "../../api";
+import { useToast } from "../../ui";
+import type { Category } from "../../types/Auth";
+import { modalCls, submitCls } from "./constants";
+import { CheckCircle2, Circle } from "lucide-react";
+
+type Props = {
+ open: boolean;
+ onClose: () => void;
+ onDone: () => void;
+};
+
+export default function CategoriesOnboardingModal({ open, onClose, onDone }: Props) {
+ const toast = useToast();
+ const [loading, setLoading] = useState(false);
+ const [saving, setSaving] = useState(false);
+ const [allCategories, setAllCategories] = useState
+ 
+ PennyPal
+
+
+
+ PennyPal
+
+
+
+
+
+
+
+
+
+ {title ? (
+
+ {title}
+ ) : null} + {subtitle ?{subtitle}
: null}
+
+
+ {children}
+
+
+
+ )
+};
\ No newline at end of file
diff --git a/client/src/components/auth/GoogleButton.tsx b/client/src/components/auth/GoogleButton.tsx
new file mode 100644
index 0000000..00daa29
--- /dev/null
+++ b/client/src/components/auth/GoogleButton.tsx
@@ -0,0 +1,47 @@
+import { Button } from "../../ui";
+
+type GoogleButtonProps = {
+ label?: string;
+ redirectUrl?: string; // defaults to /api/auth/google
+ fullWidth?: boolean;
+ className?: string;
+};
+
+export default function GoogleButton({
+ label = "Continue with Google",
+ redirectUrl = "/api/auth/google",
+ fullWidth = true,
+ className,
+}: GoogleButtonProps) {
+ const GoogleIcon = (
+
+ );
+ return (
+
+ );
+}
+
+export const OrSeparation = () => {
+ return (
+
+ 
+
+
+
+
+
+
+
+
+
+ + {landingContent.hero.title} {landingContent.hero.titleHighlight} +
++ {landingContent.hero.subtitle} +
+
+
+
+ {/* Feature highlights - Auto-sliding carousel */}
+
+ 
+
+
+ + "{landingContent.testimonial.quote}" ++
+
+
+ {[...Array(5)].map((_, i) => (
+
+ {landingContent.testimonial.author}
+
+
+
+ {features.map((feature) => {
+ const IconComponent = feature.icon;
+ return (
+
+
+
+ );
+ })}
+
+ {features.map((feature) => {
+ const IconComponent = feature.icon;
+ return (
+
+
+
+
+ {feature.title}
+{feature.description}
+
+
+ );
+ })}
+
+
+
+
+ {feature.title}
+{feature.description}
+
+
+ or
+
+
+ )
+}
diff --git a/client/src/components/auth/LoginForm.tsx b/client/src/components/auth/LoginForm.tsx
new file mode 100644
index 0000000..b52a7d3
--- /dev/null
+++ b/client/src/components/auth/LoginForm.tsx
@@ -0,0 +1,77 @@
+import { useState } from "react";
+import { Button, TextField } from "../../ui";
+import { Link } from "react-router-dom";
+import { type LoginFormProps } from "../../types/Auth";
+import { authLabelCls, authInputCls, submitCls, authGoogleCls } from "./constants";
+import GoogleButton, { OrSeparation } from "./GoogleButton";
+import ShowPasswordBtn from "./ShowPasswordBtn";
+
+export default function LoginForm({
+ onSubmit,
+ loading = false,
+ error = null,
+ submitLabel = "Sign in",
+ showSignupLink = true,
+}: LoginFormProps) {
+ const [email, setEmail] = useState("");
+ const [password, setPassword] = useState("");
+ const [showPassword, setShowPassword] = useState(false);
+ const [roEmail, setRoEmail] = useState(true);
+ const [roPassword, setRoPassword] = useState(true);
+
+ async function handleSubmit(e: React.FormEvent) {
+ e.preventDefault();
+ await onSubmit({ email, password });
+ }
+
+
+ return (
+
+ );
+}
diff --git a/client/src/components/auth/PasswordStrength.tsx b/client/src/components/auth/PasswordStrength.tsx
new file mode 100644
index 0000000..cfe1fad
--- /dev/null
+++ b/client/src/components/auth/PasswordStrength.tsx
@@ -0,0 +1,51 @@
+
+type Props = { password: string };
+
+function scorePassword(pw: string) {
+ let score = 0;
+ if (!pw) return 0;
+ if (pw.length >= 8) score++;
+ if (/[a-z]/.test(pw)) score++;
+ if (/[A-Z]/.test(pw)) score++;
+ if (/[0-9]/.test(pw)) score++;
+ if (/[^A-Za-z0-9]/.test(pw)) score++;
+ return Math.min(score, 5); // 0..5
+}
+
+const labelAndColor = (score: number): { label: string; color: string; bar: string } => {
+ switch (score) {
+ case 0:
+ case 1:
+ return { label: 'Very weak', color: 'text-red-600', bar: 'bg-red-400' };
+ case 2:
+ return { label: 'Weak', color: 'text-orange-600', bar: 'bg-orange-400' };
+ case 3:
+ return { label: 'Fair', color: 'text-yellow-600', bar: 'bg-yellow-400' };
+ case 4:
+ return { label: 'Good', color: 'text-green-600', bar: 'bg-green-400' };
+ case 5:
+ default:
+ return { label: 'Strong', color: 'text-emerald-600', bar: 'bg-emerald-500' };
+ }
+}
+
+export default function PasswordStrength({ password }: Props) {
+ const score = scorePassword(password);
+ const { label, color, bar } = labelAndColor(score);
+ const segments = 5;
+
+ return (
+
+
+ );
+}
diff --git a/client/src/components/auth/ShowPasswordBtn.tsx b/client/src/components/auth/ShowPasswordBtn.tsx
new file mode 100644
index 0000000..d6b8228
--- /dev/null
+++ b/client/src/components/auth/ShowPasswordBtn.tsx
@@ -0,0 +1,27 @@
+
+import { Eye, EyeOff } from "lucide-react";
+import { IconButton } from "../../ui";
+
+type ShowPasswordBtnProps = {
+ onClick() : void,
+ showPassword: boolean,
+}
+
+export default function ShowPasswordBtn({onClick, showPassword} : ShowPasswordBtnProps) {
+ return (
+
+ {Array.from({ length: segments }).map((_, i) => (
+
+ ))}
+
+ {label}
+
+
+
+ Welcome, {user?.username || user?.firstname || user?.email || "User"}
+
+
+ 
{" "}
+
+
+ {user?.username || user?.firstname || "User"}
+ {user?.email || ""}
+
+
+ Loading...
; + return user ? ( +
{items.slice(3).map(({ label, icon: Icon, href }) => (
-
+ >
@@ -68,4 +80,4 @@ export default function Sidebar() {
);
-}
\ No newline at end of file
+}
diff --git a/client/src/hooks/useAuth.ts b/client/src/hooks/useAuth.ts
new file mode 100644
index 0000000..f5ae360
--- /dev/null
+++ b/client/src/hooks/useAuth.ts
@@ -0,0 +1,176 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { ApiError, DefaultService, type PublicUser } from '../api';
+import { UserService } from '../services/UserService';
+
+// SDK config is applied globally in src/sdkConfig.ts
+
+const extractErrorMessage = (err: unknown, fallback = 'Unexpected error'): string => {
+ if (err instanceof Error && err.message) return err.message;
+ if (typeof err === 'string' && err) return err;
+ try {
+ const obj = (err ?? {}) as Record
+
+ );
+}
diff --git a/client/src/pages/LoginPage.tsx b/client/src/pages/LoginPage.tsx
new file mode 100644
index 0000000..6e498c6
--- /dev/null
+++ b/client/src/pages/LoginPage.tsx
@@ -0,0 +1,36 @@
+import { useLocation, useNavigate } from "react-router-dom";
+import { useToast } from "../ui";
+import { useAuth } from "../hooks/useAuth";
+import { type LoginFormData } from "../types/Auth";
+import LoginForm from "../components/auth/LoginForm";
+import AuthLayout from "../components/auth/AuthLayout";
+
+export default function LoginPage() {
+ const { login, loading, error } = useAuth();
+ const navigate = useNavigate();
+ const location = useLocation() as ReturnTypeFinishing sign-in…
+