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:
100
app/lib/actions/userProfileActions.ts
Normal file
100
app/lib/actions/userProfileActions.ts
Normal file
@@ -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,
|
||||
};
|
||||
});
|
||||
Reference in New Issue
Block a user