Rename address field to street and change to text input

Changes the user settings address field to street with the following updates:
- Renames database field from 'address' to 'street' in UserSettings type
- Changes form input from textarea to single-line text input
- Updates validation logic and error messages
- Updates translations in both Croatian and English
- Removes deprecated AppSettingsForm component

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

app/[locale]/account/page.tsx

@@ -1,6 +1,6 @@
 import { FC, Suspense } from 'react';
 import { Main } from '@/app/ui/Main';
-import { UserSettingsForm as UserSettingsForm, UserSettingsFormSkeleton } from '@/app/ui/AppSettingsForm';
+import { UserSettingsForm as UserSettingsForm, UserSettingsFormSkeleton } from '@/app/ui/UserSettingsForm';
 import { getUserSettings } from '@/app/lib/actions/userSettingsActions';
 
 const AccountPage: FC = async () => {

app/lib/actions/userSettingsActions.ts

@@ -16,7 +16,7 @@ export type State = {
     errors?: {
         firstName?: string[];
         lastName?: string[];
-        address?: string[];
+        street?: string[];
         iban?: string[];
         show2dCodeInMonthlyStatement?: string[];
     };
@@ -30,7 +30,7 @@ export type State = {
 const FormSchema = (t: IntlTemplateFn) => z.object({
     firstName: z.string().optional(),
     lastName: z.string().optional(),
-    address: z.string().optional(),
+    street: z.string().optional(),
     iban: z.string()
         .optional()
         .refine(
@@ -64,12 +64,12 @@ const FormSchema = (t: IntlTemplateFn) => z.object({
 })
 .refine((data) => {
     if (data.show2dCodeInMonthlyStatement) {
-        return !!data.address && data.address.trim().length > 0;
+        return !!data.street && data.street.trim().length > 0;
     }
     return true;
 }, {
-    message: t("address-required"),
-    path: ["address"],
+    message: t("street-required"),
+    path: ["street"],
 })
 .refine((data) => {
     if (data.show2dCodeInMonthlyStatement) {
@@ -112,7 +112,7 @@ export const updateUserSettings = withUser(async (user: AuthenticatedUser, prevS
     const validatedFields = FormSchema(t).safeParse({
         firstName: formData.get('firstName') || undefined,
         lastName: formData.get('lastName') || undefined,
-        address: formData.get('address') || undefined,
+        street: formData.get('street') || undefined,
         iban: formData.get('iban') || undefined,
         show2dCodeInMonthlyStatement: formData.get('generateTenantCode') === 'on',
     });
@@ -126,7 +126,7 @@ export const updateUserSettings = withUser(async (user: AuthenticatedUser, prevS
         };
     }
 
-    const { firstName, lastName, address, iban, show2dCodeInMonthlyStatement } = validatedFields.data;
+    const { firstName, lastName, street, iban, show2dCodeInMonthlyStatement } = validatedFields.data;
 
     // Normalize IBAN: remove spaces and convert to uppercase
     const normalizedIban = iban ? iban.replace(/\s/g, '').toUpperCase() : null;
@@ -139,7 +139,7 @@ export const updateUserSettings = withUser(async (user: AuthenticatedUser, prevS
         userId,
         firstName: firstName || null,
         lastName: lastName || null,
-        address: address || null,
+        street: street || null,
         iban: normalizedIban,
         show2dCodeInMonthlyStatement: show2dCodeInMonthlyStatement ?? false,
     };

app/lib/db-types.ts

@@ -22,8 +22,8 @@ export interface UserSettings {
     firstName?: string | null;
     /** last name */
     lastName?: string | null;
-    /** address */
-    address?: string | null;
+    /** street */
+    street?: string | null;
     /** IBAN */
     iban?: string | null;
     /** whether to show 2D code in monthly statement */

app/ui/AppSettingsForm.tsx

@@ -1,230 +0,0 @@
-"use client";
-
-import { FC, useState } from "react";
-import { UserSettings } from "../lib/db-types";
-import { updateUserSettings } from "../lib/actions/userSettingsActions";
-import { useFormState, useFormStatus } from "react-dom";
-import { useLocale, useTranslations } from "next-intl";
-import Link from "next/link";
-import SettingsIcon from "@mui/icons-material/Settings";
-import { formatIban } from "../lib/formatStrings";
-import { InfoBox } from "./InfoBox";
-
-export type UserSettingsFormProps = {
-    userSettings: UserSettings | null;
-}
-
-type FormFieldsProps = {
-    userSettings: UserSettings | null;
-    errors: any;
-    message: string | null;
-}
-
-const FormFields: FC<FormFieldsProps> = ({ userSettings, errors, message }) => {
-    const { pending } = useFormStatus();
-    const t = useTranslations("user-settings-form");
-    const locale = useLocale();
-
-    // Track current form values for real-time validation
-    const [formValues, setFormValues] = useState({
-        firstName: userSettings?.firstName ?? "",
-        lastName: userSettings?.lastName ?? "",
-        address: userSettings?.address ?? "",
-        iban: formatIban(userSettings?.iban) ?? "",
-    });
-
-    const handleInputChange = (field: keyof typeof formValues, value: string) => {
-        setFormValues(prev => ({ ...prev, [field]: value }));
-    };
-
-    // Check if any required field is missing (clean IBAN of spaces for validation)
-    const cleanedIban = formValues.iban.replace(/\s/g, '');
-    const hasMissingData = !formValues.firstName || !formValues.lastName || !formValues.address || !cleanedIban;
-
-    // Track whether to generate 2D code for tenant (use persisted value from database)
-    const [show2dCodeInMonthlyStatement, setShow2dCodeInMonthlyStatement] = useState(
-        userSettings?.show2dCodeInMonthlyStatement ?? false
-    );
-
-    return (
-        <>
-            <fieldset className="fieldset bg-base-200 border-base-300 rounded-box w-xs border p-4 pb-2 mt-4">
-                <legend className="fieldset-legend font-semibold uppercase">{t("tenant-2d-code-legend")}</legend>
-
-                <InfoBox className="p-1 mb-1">{t("info-box-message")}</InfoBox>
-
-                <fieldset className="fieldset">
-                    <label className="label cursor-pointer justify-start gap-3">
-                        <input
-                            type="checkbox"
-                            name="generateTenantCode"
-                            className="toggle toggle-primary"
-                            checked={show2dCodeInMonthlyStatement}
-                            onChange={(e) => setShow2dCodeInMonthlyStatement(e.target.checked)}
-                        />
-                        <legend className="fieldset-legend">{t("tenant-2d-code-toggle-label")}</legend>
-                    </label>
-                </fieldset>
-
-                {show2dCodeInMonthlyStatement && (
-                <>
-                    <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 placeholder:text-gray-600"
-                            defaultValue={userSettings?.firstName ?? ""}
-                            onChange={(e) => handleInputChange("firstName", e.target.value)}
-                            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 placeholder:text-gray-600"
-                            defaultValue={userSettings?.lastName ?? ""}
-                            onChange={(e) => handleInputChange("lastName", e.target.value)}
-                            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:text-gray-600"
-                            placeholder={t("address-placeholder")}
-                            defaultValue={userSettings?.address ?? ""}
-                            onChange={(e) => handleInputChange("address", e.target.value)}
-                            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 placeholder:text-gray-600"
-                            defaultValue={formatIban(userSettings?.iban)}
-                            onChange={(e) => handleInputChange("iban", e.target.value)}
-                            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>
-                    <InfoBox className="p-1 mt-1">{t("additional-notes")}</InfoBox>
-                    </>
-                )}
-            </fieldset>
-
-            <div id="general-error" aria-live="polite" aria-atomic="true">
-                {message && (
-                    <p className="mt-2 text-sm text-red-500">
-                        {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 UserSettingsForm: FC<UserSettingsFormProps> = ({ userSettings }) => {
-    const initialState = { message: null, errors: {} };
-    const [state, dispatch] = useFormState(updateUserSettings, initialState);
-    const t = useTranslations("user-settings-form");
-
-    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"><SettingsIcon className="w-6 h-6" /> {t("title")}</h2>
-                <form action={dispatch}>
-                    <FormFields
-                        userSettings={userSettings}
-                        errors={state.errors}
-                        message={state.message ?? null}
-                    />
-                </form>
-            </div>
-        </div>
-    );
-};
-
-export const UserSettingsFormSkeleton: 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>
-    );
-};

app/ui/UserSettingsForm.tsx

@@ -29,7 +29,7 @@ const FormFields: FC<FormFieldsProps> = ({ userSettings, errors, message }) => {
     const [formValues, setFormValues] = useState({
         firstName: userSettings?.firstName ?? "",
         lastName: userSettings?.lastName ?? "",
-        address: userSettings?.address ?? "",
+        street: userSettings?.street ?? "",
         iban: formatIban(userSettings?.iban) ?? "",
     });
 
@@ -39,7 +39,7 @@ const FormFields: FC<FormFieldsProps> = ({ userSettings, errors, message }) => {
 
     // Check if any required field is missing (clean IBAN of spaces for validation)
     const cleanedIban = formValues.iban.replace(/\s/g, '');
-    const hasMissingData = !formValues.firstName || !formValues.lastName || !formValues.address || !cleanedIban;
+    const hasMissingData = !formValues.firstName || !formValues.lastName || !formValues.street || !cleanedIban;
 
     // Track whether to generate 2D code for tenant (use persisted value from database)
     const [show2dCodeInMonthlyStatement, setShow2dCodeInMonthlyStatement] = useState(
@@ -118,20 +118,21 @@ const FormFields: FC<FormFieldsProps> = ({ userSettings, errors, message }) => {
 
                     <div className="form-control w-full">
                         <label className="label">
-                            <span className="label-text">{t("address-label")}</span>
+                            <span className="label-text">{t("street-label")} </span>
                         </label>
-                        <textarea
-                            id="address"
-                            name="address"
-                            className="textarea textarea-bordered w-full placeholder:text-gray-600"
-                            placeholder={t("address-placeholder")}
-                            defaultValue={userSettings?.address ?? ""}
-                            onChange={(e) => handleInputChange("address", e.target.value)}
+                        <input
+                            id="street"
+                            name="street"
+                            type="text"
+                            placeholder={t("street-placeholder")}
+                            className="input input-bordered w-full placeholder:text-gray-600"
+                            defaultValue={userSettings?.street ?? ""}
+                            onChange={(e) => handleInputChange("street", e.target.value)}
                             disabled={pending}
-                        ></textarea>
-                        <div id="address-error" aria-live="polite" aria-atomic="true">
-                            {errors?.address &&
-                                errors.address.map((error: string) => (
+                        />
+                        <div id="street-error" aria-live="polite" aria-atomic="true">
+                            {errors?.street &&
+                                errors.street.map((error: string) => (
                                     <p className="mt-2 text-sm text-red-500" key={error}>
                                         {error}
                                     </p>

messages/en.json

@@ -190,8 +190,8 @@
     "first-name-placeholder": "Enter your first name",
     "last-name-label": "Last Name",
     "last-name-placeholder": "Enter your last name",
-    "address-label": "Address",
-    "address-placeholder": "Enter your address",
+    "street-label": "Street",
+    "street-placeholder": "Enter your street",
     "iban-label": "IBAN",
     "iban-placeholder": "Enter your IBAN",
     "save-button": "Save",
@@ -199,7 +199,7 @@
     "validation": {
       "first-name-required": "First name is mandatory",
       "last-name-required": "Last name is mandatory",
-      "address-required": "Address is mandatory",
+      "street-required": "Street is mandatory",
       "iban-required": "Valid IBAN is mandatory",
       "iban-invalid": "Invalid IBAN format. Please enter a valid IBAN",
       "validation-failed": "Validation failed. Please check the form and try again."

messages/hr.json

@@ -189,8 +189,8 @@
     "first-name-placeholder": "Unesite svoje ime",
     "last-name-label": "Prezime",
     "last-name-placeholder": "Unesite svoje prezime",
-    "address-label": "Adresa",
-    "address-placeholder": "Unesite svoju adresu",
+    "street-label": "Ulica",
+    "street-placeholder": "Unesite ulicu",
     "iban-label": "IBAN",
     "iban-placeholder": "Unesite svoj IBAN",
     "save-button": "Spremi",
@@ -198,7 +198,7 @@
     "validation": {
       "first-name-required": "Ime je obavezno",
       "last-name-required": "Prezime je obavezno",
-      "address-required": "Adresa je obavezna",
+      "street-required": "Ulica je obavezna",
       "iban-required": "Ispravan IBAN je obavezan",
       "iban-invalid": "Neispravan IBAN format. Molimo unesite ispravan IBAN.",
       "validation-failed": "Validacija nije uspjela. Molimo provjerite formu i pokušajte ponovno."