Add user account settings page with profile management

- Add /account route with profile form (firstName, lastName, address, IBAN)
- Create UserProfile type and MongoDB users collection
- Implement server actions for getting and updating user profile
- Add Account Circle icon to PageHeader linking to /account
- Install Material UI icons for account icon
- Add form input disabling during save with loading spinner
- Add cancel button to discard changes and return home
- Add English and Croatian translations for account page
- Update locale names with flag emojis in language selector

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

app/[locale]/account/page.tsx

@@ -0,0 +1,37 @@
+import { FC, Suspense } from 'react';
+import { Main } from '@/app/ui/Main';
+import { AccountForm, AccountFormSkeleton } from '@/app/ui/AccountForm';
+import { getUserProfile } from '@/app/lib/actions/userProfileActions';
+import { useTranslations } from 'next-intl';
+import { getTranslations } from 'next-intl/server';
+
+const AccountPage: FC = async () => {
+    const profile = await getUserProfile();
+    const t = await getTranslations('account-page');
+
+    return (
+        <Main>
+            <div className="flex flex-col items-center">
+                <h1 className="text-2xl font-bold mb-4">{t('heading')}</h1>
+                <AccountForm profile={profile} />
+            </div>
+        </Main>
+    );
+};
+
+const Page: FC = () => {
+    return (
+        <Suspense fallback={
+            <Main>
+                <div className="flex flex-col items-center">
+                    <div className="h-8 w-48 skeleton mb-4"></div>
+                    <AccountFormSkeleton />
+                </div>
+            </Main>
+        }>
+            <AccountPage />
+        </Suspense>
+    );
+};
+
+export default Page;

app/i18n.ts

@@ -6,8 +6,8 @@ import { Formats, TranslationValues } from 'next-intl';
 export const locales = ['en', 'hr'];
 
 export const localeNames:Record<string,string> = {
-  en: 'English',
-  hr: 'Hrvatski'
+  en: '🇬🇧 En',
+  hr: '🇭🇷 Hr'
 };
 
 export const defaultLocale = 'hr';

app/lib/actions/userProfileActions.ts

@@ -0,0 +1,100 @@
+'use server';
+
+import { z } from 'zod';
+import { getDbClient } from '../dbClient';
+import { UserProfile } from '../db-types';
+import { withUser } from '@/app/lib/auth';
+import { AuthenticatedUser } from '../types/next-auth';
+import { unstable_noStore as noStore } from 'next/cache';
+import { IntlTemplateFn } from '@/app/i18n';
+import { getTranslations } from "next-intl/server";
+import { revalidatePath } from 'next/cache';
+
+export type State = {
+    errors?: {
+        firstName?: string[];
+        lastName?: string[];
+        address?: string[];
+        iban?: string[];
+    };
+    message?: string | null;
+    success?: boolean;
+};
+
+/**
+ * Schema for validating user profile form fields
+ */
+const FormSchema = (t: IntlTemplateFn) => z.object({
+    firstName: z.string().optional(),
+    lastName: z.string().optional(),
+    address: z.string().optional(),
+    iban: z.string().optional(),
+});
+
+/**
+ * Get user profile
+ */
+export const getUserProfile = withUser(async (user: AuthenticatedUser) => {
+    noStore();
+
+    const dbClient = await getDbClient();
+    const { id: userId } = user;
+
+    const profile = await dbClient.collection<UserProfile>("users")
+        .findOne({ userId });
+
+    return profile;
+});
+
+/**
+ * Update user profile
+ */
+export const updateUserProfile = withUser(async (user: AuthenticatedUser, prevState: State, formData: FormData) => {
+    noStore();
+
+    const t = await getTranslations("account-form.validation");
+
+    const validatedFields = FormSchema(t).safeParse({
+        firstName: formData.get('firstName') || undefined,
+        lastName: formData.get('lastName') || undefined,
+        address: formData.get('address') || undefined,
+        iban: formData.get('iban') || undefined,
+    });
+
+    // If form validation fails, return errors early. Otherwise, continue...
+    if (!validatedFields.success) {
+        return {
+            errors: validatedFields.error.flatten().fieldErrors,
+            message: "Validation failed",
+            success: false,
+        };
+    }
+
+    const { firstName, lastName, address, iban } = validatedFields.data;
+
+    // Update the user profile in MongoDB
+    const dbClient = await getDbClient();
+    const { id: userId } = user;
+
+    const userProfile: UserProfile = {
+        userId,
+        firstName: firstName || null,
+        lastName: lastName || null,
+        address: address || null,
+        iban: iban || null,
+    };
+
+    await dbClient.collection<UserProfile>("users")
+        .updateOne(
+            { userId },
+            { $set: userProfile },
+            { upsert: true }
+        );
+
+    revalidatePath('/account');
+
+    return {
+        message: null,
+        success: true,
+    };
+});

app/lib/db-types.ts

@@ -14,6 +14,20 @@ export interface YearMonth {
     month: number;
 };
 
+/** User profile data */
+export interface UserProfile {
+    /** user's ID */
+    userId: string;
+    /** first name */
+    firstName?: string | null;
+    /** last name */
+    lastName?: string | null;
+    /** address */
+    address?: string | null;
+    /** IBAN */
+    iban?: string | null;
+};
+
 /** bill object in the form returned by MongoDB */
 export interface BillingLocation {
     _id: string;

app/ui/AccountForm.tsx

@@ -0,0 +1,193 @@
+"use client";
+
+import { FC, useEffect } from "react";
+import { UserProfile } from "../lib/db-types";
+import { updateUserProfile } from "../lib/actions/userProfileActions";
+import { useFormState, useFormStatus } from "react-dom";
+import { useLocale, useTranslations } from "next-intl";
+import Link from "next/link";
+
+export type AccountFormProps = {
+    profile: UserProfile | null;
+}
+
+type FormFieldsProps = {
+    profile: UserProfile | null;
+    errors: any;
+    success: boolean;
+    message: string | null;
+}
+
+const FormFields: FC<FormFieldsProps> = ({ profile, errors, success, message }) => {
+    const { pending } = useFormStatus();
+    const t = useTranslations("account-form");
+    const locale = useLocale();
+
+    return (
+        <>
+            <div className="form-control w-full">
+                <label className="label">
+                    <span className="label-text">{t("first-name-label")}</span>
+                </label>
+                <input
+                    id="firstName"
+                    name="firstName"
+                    type="text"
+                    placeholder={t("first-name-placeholder")}
+                    className="input input-bordered w-full"
+                    defaultValue={profile?.firstName ?? ""}
+                    disabled={pending}
+                />
+                <div id="firstName-error" aria-live="polite" aria-atomic="true">
+                    {errors?.firstName &&
+                        errors.firstName.map((error: string) => (
+                            <p className="mt-2 text-sm text-red-500" key={error}>
+                                {error}
+                            </p>
+                        ))}
+                </div>
+            </div>
+
+            <div className="form-control w-full">
+                <label className="label">
+                    <span className="label-text">{t("last-name-label")}</span>
+                </label>
+                <input
+                    id="lastName"
+                    name="lastName"
+                    type="text"
+                    placeholder={t("last-name-placeholder")}
+                    className="input input-bordered w-full"
+                    defaultValue={profile?.lastName ?? ""}
+                    disabled={pending}
+                />
+                <div id="lastName-error" aria-live="polite" aria-atomic="true">
+                    {errors?.lastName &&
+                        errors.lastName.map((error: string) => (
+                            <p className="mt-2 text-sm text-red-500" key={error}>
+                                {error}
+                            </p>
+                        ))}
+                </div>
+            </div>
+
+            <div className="form-control w-full">
+                <label className="label">
+                    <span className="label-text">{t("address-label")}</span>
+                </label>
+                <textarea
+                    id="address"
+                    name="address"
+                    className="textarea textarea-bordered w-full"
+                    placeholder={t("address-placeholder")}
+                    defaultValue={profile?.address ?? ""}
+                    disabled={pending}
+                ></textarea>
+                <div id="address-error" aria-live="polite" aria-atomic="true">
+                    {errors?.address &&
+                        errors.address.map((error: string) => (
+                            <p className="mt-2 text-sm text-red-500" key={error}>
+                                {error}
+                            </p>
+                        ))}
+                </div>
+            </div>
+
+            <div className="form-control w-full">
+                <label className="label">
+                    <span className="label-text">{t("iban-label")}</span>
+                </label>
+                <input
+                    id="iban"
+                    name="iban"
+                    type="text"
+                    placeholder={t("iban-placeholder")}
+                    className="input input-bordered w-full"
+                    defaultValue={profile?.iban ?? ""}
+                    disabled={pending}
+                />
+                <div id="iban-error" aria-live="polite" aria-atomic="true">
+                    {errors?.iban &&
+                        errors.iban.map((error: string) => (
+                            <p className="mt-2 text-sm text-red-500" key={error}>
+                                {error}
+                            </p>
+                        ))}
+                </div>
+            </div>
+
+            <div id="general-error" aria-live="polite" aria-atomic="true">
+                {message && !success && (
+                    <p className="mt-2 text-sm text-red-500">
+                        {message}
+                    </p>
+                )}
+                {success && (
+                    <p className="mt-2 text-sm text-success">
+                        {t("success-message")}
+                    </p>
+                )}
+            </div>
+
+            <div className="pt-4">
+                <button className="btn btn-primary w-[5.5em]" disabled={pending}>
+                    {pending ? (
+                        <span className="loading loading-spinner loading-sm"></span>
+                    ) : (
+                        t("save-button")
+                    )}
+                </button>
+                <Link className={`btn btn-neutral w-[5.5em] ml-3 ${pending ? "btn-disabled" : ""}`} href={`/${locale}`}>
+                    {t("cancel-button")}
+                </Link>
+            </div>
+        </>
+    );
+};
+
+export const AccountForm: FC<AccountFormProps> = ({ profile }) => {
+    const initialState = { message: null, errors: {}, success: false };
+    const [state, dispatch] = useFormState(updateUserProfile, initialState);
+    const t = useTranslations("account-form");
+
+    useEffect(() => {
+        if (state.success) {
+            // Show success message or toast notification
+            // For now, we'll just log it
+            console.log("Profile updated successfully");
+        }
+    }, [state.success]);
+
+    return (
+        <div className="card card-compact card-bordered min-w-[20em] max-w-[90em] bg-base-100 shadow-s my-1">
+            <div className="card-body">
+                <h2 className="card-title">{t("title")}</h2>
+                <form action={dispatch}>
+                    <FormFields
+                        profile={profile}
+                        errors={state.errors}
+                        success={state.success ?? false}
+                        message={state.message ?? null}
+                    />
+                </form>
+            </div>
+        </div>
+    );
+};
+
+export const AccountFormSkeleton: FC = () => {
+    return (
+        <div className="card card-compact card-bordered min-w-[20em] max-w-[90em] bg-base-100 shadow-s my-1">
+            <div className="card-body">
+                <div className="h-8 w-32 skeleton mb-4"></div>
+                <div className="input w-full skeleton"></div>
+                <div className="input w-full skeleton mt-4"></div>
+                <div className="textarea w-full h-24 skeleton mt-4"></div>
+                <div className="input w-full skeleton mt-4"></div>
+                <div className="pt-4">
+                    <div className="btn skeleton w-24"></div>
+                </div>
+            </div>
+        </div>
+    );
+};

app/ui/PageHeader.tsx

@@ -1,10 +1,14 @@
 import Image from "next/image";
 import Link from "next/link";
 import { SelectLanguage } from "./SelectLanguage";
+import AccountCircleIcon from "@mui/icons-material/AccountCircle";
 
 export const PageHeader = () =>
     <div className="navbar bg-base-100 mb-6">
         <Link className="btn btn-ghost text-xl" href="/"><Image src="/icon3.png" alt="logo" width={48} height={48} /> Režije</Link>
         <span className="grow">&nbsp;</span>
         <SelectLanguage />
+        <Link href="/account/" className="btn btn-ghost btn-circle">
+            <AccountCircleIcon className="w-6 h-6" />
+        </Link>
     </div>