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:
37
app/[locale]/account/page.tsx
Normal file
37
app/[locale]/account/page.tsx
Normal 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;
|
||||
Reference in New Issue
Block a user