Refactor authentication and account management with modular UI components (#242)

web/frontend/app/components/ui/forms/FormField.tsx

@@ -0,0 +1,42 @@
+import { Description, Field, Label } from '@headlessui/react';
+
+type FormFieldProps = React.InputHTMLAttributes<HTMLInputElement> & {
+    label: string;
+    error?: string;
+    hint?: string;
+    labelClassName?: string;
+    inputClassName?: string;
+    hintClassName?: string;
+};
+
+const FormField = ({
+    label,
+    error,
+    hint,
+    className,
+    labelClassName,
+    inputClassName,
+    hintClassName,
+    ...inputProps
+}: FormFieldProps) => {
+    return (
+        <Field className={className ?? 'space-y-1'}>
+            <Label htmlFor={inputProps.id} className={labelClassName ?? 'label font-medium'}>
+                {label}
+            </Label>
+
+            <input
+                {...inputProps}
+                className={inputClassName ?? `input w-full ${error ? 'input-error' : ''}`}
+            />
+
+            {error ? (
+                <Description className={hintClassName ?? 'label text-error'}>{error}</Description>
+            ) : hint ? (
+                <Description className={hintClassName ?? 'label'}>{hint}</Description>
+            ) : null}
+        </Field>
+    );
+};
+
+export default FormField;

web/frontend/app/components/ui/forms/SubmitButton.tsx

@@ -0,0 +1,28 @@
+import { Button } from '@headlessui/react';
+
+interface SubmitButtonProps {
+    isSubmitting: boolean;
+    idleText: string;
+    submittingText: string;
+    className?: string;
+}
+
+const SubmitButton = ({ isSubmitting, idleText, submittingText, className }: SubmitButtonProps) => {
+    return (
+        <Button
+            type="submit"
+            disabled={isSubmitting}
+            className={className ?? 'btn btn-primary w-full mt-2'}
+        >
+            {isSubmitting ? (
+                <>
+                    <span className="loading loading-spinner loading-sm" /> {submittingText}
+                </>
+            ) : (
+                idleText
+            )}
+        </Button>
+    );
+};
+
+export default SubmitButton;

web/frontend/app/components/ui/navbar/NavLinks.tsx

@@ -0,0 +1,44 @@
+import { Link } from 'react-router';
+
+const navLinks = [
+    { to: '/theme', label: 'Theme' },
+    { to: '/beers', label: 'Beers' },
+    { to: '/breweries', label: 'Breweries' },
+    { to: '/beer-styles', label: 'Beer Styles' },
+];
+
+interface NavLinksProps {
+    variant: 'desktop' | 'mobile';
+    showRegister: boolean;
+}
+
+const NavLinks = ({ variant, showRegister }: NavLinksProps) => {
+    if (variant === 'desktop') {
+        return (
+            <div className="navbar-center hidden lg:flex gap-2">
+                {navLinks.map((link) => (
+                    <Link key={link.to} to={link.to} className="btn btn-ghost btn-sm">
+                        {link.label}
+                    </Link>
+                ))}
+            </div>
+        );
+    }
+
+    return (
+        <div className="flex flex-col gap-2">
+            {navLinks.map((link) => (
+                <Link key={link.to} to={link.to} className="btn btn-ghost btn-sm justify-start">
+                    {link.label}
+                </Link>
+            ))}
+            {showRegister && (
+                <Link to="/register" className="btn btn-ghost btn-sm justify-start">
+                    Register User
+                </Link>
+            )}
+        </div>
+    );
+};
+
+export default NavLinks;

web/frontend/app/components/ui/navbar/Navbar.tsx

@@ -0,0 +1,93 @@
+import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/react';
+import { Link } from 'react-router';
+import NavLinks from './NavLinks';
+import UserMenu from './UserMenu';
+
+interface NavbarProps {
+    auth: {
+        username: string;
+        accessToken: string;
+        refreshToken: string;
+        userAccountId: string;
+    } | null;
+}
+
+const Navbar = ({ auth }: NavbarProps) => (
+    <Disclosure
+        as="nav"
+        className="sticky top-0 z-50 border-b border-base-300 bg-base-100 shadow-md"
+    >
+        {({ open }) => (
+            <>
+                <div className="navbar mx-auto max-w-7xl px-2 sm:px-4">
+                    <div className="navbar-start gap-2">
+                        <DisclosureButton
+                            className="btn btn-ghost btn-square lg:hidden"
+                            aria-label="Toggle navigation"
+                        >
+                            <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                fill="none"
+                                viewBox="0 0 24 24"
+                                className="h-5 w-5 stroke-current"
+                            >
+                                {open ? (
+                                    <path
+                                        strokeLinecap="round"
+                                        strokeLinejoin="round"
+                                        strokeWidth="2"
+                                        d="M6 18L18 6M6 6l12 12"
+                                    />
+                                ) : (
+                                    <path
+                                        strokeLinecap="round"
+                                        strokeLinejoin="round"
+                                        strokeWidth="2"
+                                        d="M4 6h16M4 12h16M4 18h16"
+                                    />
+                                )}
+                            </svg>
+                        </DisclosureButton>
+
+                        <Link to="/" className="text-xl font-bold">
+                            🍺 The Biergarten App
+                        </Link>
+                    </div>
+
+                    <NavLinks variant="desktop" showRegister={!auth} />
+
+                    <div className="navbar-end gap-2">
+                        {!auth && (
+                            <Link
+                                to="/register"
+                                className="btn btn-ghost btn-sm hidden sm:inline-flex"
+                            >
+                                Register User
+                            </Link>
+                        )}
+
+                        {auth ? (
+                            <>
+                                <Link to="/dashboard" className="btn btn-primary btn-sm">
+                                    Dashboard
+                                </Link>
+
+                                <UserMenu username={auth.username} />
+                            </>
+                        ) : (
+                            <Link to="/login" className="btn btn-primary btn-sm">
+                                Login
+                            </Link>
+                        )}
+                    </div>
+                </div>
+
+                <DisclosurePanel className="border-t border-base-300 bg-base-100 px-4 py-3 lg:hidden">
+                    <NavLinks variant="mobile" showRegister={!auth} />
+                </DisclosurePanel>
+            </>
+        )}
+    </Disclosure>
+);
+
+export default Navbar;

web/frontend/app/components/ui/navbar/UserMenu.tsx

@@ -0,0 +1,30 @@
+import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react';
+import { Link } from 'react-router';
+
+interface UserMenuProps {
+    username: string;
+}
+
+const UserMenu = ({ username }: UserMenuProps) => (
+    <Menu as="div" className="relative">
+        <MenuButton className="btn btn-ghost btn-sm">{username}</MenuButton>
+        <MenuItems className="menu absolute right-0 z-60 mt-2 w-52 rounded-box border border-base-300 bg-base-100 p-2 shadow-xl focus:outline-none">
+            <MenuItem>
+                {({ focus }) => (
+                    <Link to="/dashboard" className={focus ? 'active' : ''}>
+                        Dashboard
+                    </Link>
+                )}
+            </MenuItem>
+            <MenuItem>
+                {({ focus }) => (
+                    <Link to="/logout" className={focus ? 'active' : ''}>
+                        Logout
+                    </Link>
+                )}
+            </MenuItem>
+        </MenuItems>
+    </Menu>
+);
+
+export default UserMenu;

web/frontend/app/components/ui/toast/ToastProvider.tsx

@@ -0,0 +1,28 @@
+import { Toaster } from 'react-hot-toast';
+
+const ToastProvider = () => {
+    return (
+        <Toaster
+            position="top-right"
+            toastOptions={{
+                duration: 3500,
+                className:
+                    'rounded-box border border-base-300 bg-base-100 text-base-content shadow-lg',
+                success: {
+                    iconTheme: {
+                        primary: 'var(--color-success)',
+                        secondary: 'var(--color-success-content)',
+                    },
+                },
+                error: {
+                    iconTheme: {
+                        primary: 'var(--color-error)',
+                        secondary: 'var(--color-error-content)',
+                    },
+                },
+            }}
+        />
+    );
+};
+
+export default ToastProvider;

web/frontend/app/components/ui/toast/toast.ts

@@ -0,0 +1,6 @@
+import toast from 'react-hot-toast';
+
+export const showSuccessToast = (message: string) => toast.success(message);
+export const showErrorToast = (message: string) => toast.error(message);
+export const showInfoToast = (message: string) => toast(message);
+export const dismissToasts = () => toast.dismiss();