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
193
app/ui/AccountForm.tsx
Normal file
193
app/ui/AccountForm.tsx
Normal file
@@ -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>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user