- 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>
101 lines
2.6 KiB
TypeScript
101 lines
2.6 KiB
TypeScript
'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,
|
|
};
|
|
});
|