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>
This commit is contained in:
Knee Cola
2025-11-17 18:37:59 +01:00
parent e5ceb59934
commit 80f4c92755
10 changed files with 941 additions and 35 deletions

View File

@@ -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;