Get localized error messages.

src/app/(main)/admin/users/UserAddForm.tsx

@@ -14,7 +14,7 @@ import { ROLES } from '@/lib/constants';
 
 export function UserAddForm({ onSave, onClose }) {
   const { mutate, error, isPending } = useUpdateQuery(`/users`);
-  const { formatMessage, labels } = useMessages();
+  const { formatMessage, labels, getErrorMessage } = useMessages();
 
   const handleSubmit = async (data: any) => {
     mutate(data, {
@@ -26,7 +26,7 @@ export function UserAddForm({ onSave, onClose }) {
   };
 
   return (
-    <Form onSubmit={handleSubmit} error={error}>
+    <Form onSubmit={handleSubmit} error={getErrorMessage(error)}>
       <FormField
         label={formatMessage(labels.username)}
         name="username"

src/app/(main)/admin/users/[userId]/UserEditForm.tsx

@@ -29,7 +29,7 @@ export function UserEditForm({ userId, onSave }: { userId: string; onSave?: () =
   };
 
   return (
-    <Form onSubmit={handleSubmit} error={getMessage(error)} values={user}>
+    <Form onSubmit={handleSubmit} error={getMessage(error?.['code'])} values={user}>
       <FormField name="username" label={formatMessage(labels.username)}>
         <TextField data-test="input-username" />
       </FormField>
@@ -37,7 +37,7 @@ export function UserEditForm({ userId, onSave }: { userId: string; onSave?: () =
         name="password"
         label={formatMessage(labels.password)}
         rules={{
-          minLength: { value: 8, message: formatMessage(messages.minPasswordLength, { n: 8 }) },
+          minLength: { value: 8, message: formatMessage(messages.minPasswordLength, { n: '8' }) },
         }}
       >
         <PasswordField autoComplete="new-password" data-test="input-password" />

src/app/(main)/links/LinkDeleteButton.tsx

@@ -15,7 +15,7 @@ export function LinkDeleteButton({
   name: string;
   onSave?: () => void;
 }) {
-  const { formatMessage, labels } = useMessages();
+  const { formatMessage, labels, getErrorMessage } = useMessages();
   const { mutate, isPending, error, touch } = useDeleteQuery(`/links/${linkId}`);
 
   const handleConfirm = (close: () => void) => {
@@ -37,7 +37,7 @@ export function LinkDeleteButton({
               target: name,
             })}
             isLoading={isPending}
-            error={error}
+            error={getErrorMessage(error)}
             onConfirm={handleConfirm.bind(null, close)}
             onClose={close}
             buttonLabel={formatMessage(labels.delete)}

src/app/(main)/links/LinkEditForm.tsx

@@ -32,7 +32,7 @@ export function LinkEditForm({
   onSave?: () => void;
   onClose?: () => void;
 }) {
-  const { formatMessage, labels, messages } = useMessages();
+  const { formatMessage, labels, messages, getErrorMessage } = useMessages();
   const { mutate, error, isPending, touch, toast } = useUpdateQuery(
     linkId ? `/links/${linkId}` : '/links',
     {
@@ -82,7 +82,7 @@ export function LinkEditForm({
   }
 
   return (
-    <Form onSubmit={handleSubmit} error={error?.message} defaultValues={{ slug, ...data }}>
+    <Form onSubmit={handleSubmit} error={getErrorMessage(error)} defaultValues={{ slug, ...data }}>
       {({ setValue }) => {
         return (
           <>

src/app/(main)/pixels/PixelDeleteButton.tsx

@@ -13,7 +13,7 @@ export function PixelDeleteButton({
   name: string;
   onSave?: () => void;
 }) {
-  const { formatMessage, labels } = useMessages();
+  const { formatMessage, labels, getErrorMessage } = useMessages();
   const { mutate, isPending, error } = useDeleteQuery(`/pixels/${pixelId}`);
   const { touch } = useModified();
 
@@ -36,7 +36,7 @@ export function PixelDeleteButton({
               target: name,
             })}
             isLoading={isPending}
-            error={error}
+            error={getErrorMessage(error)}
             onConfirm={handleConfirm.bind(null, close)}
             onClose={close}
             buttonLabel={formatMessage(labels.delete)}

src/app/(main)/pixels/PixelEditForm.tsx

@@ -31,7 +31,7 @@ export function PixelEditForm({
   onSave?: () => void;
   onClose?: () => void;
 }) {
-  const { formatMessage, labels, messages } = useMessages();
+  const { formatMessage, labels, messages, getErrorMessage } = useMessages();
   const { mutate, error, isPending, touch, toast } = useUpdateQuery(
     pixelId ? `/pixels/${pixelId}` : '/pixels',
     {
@@ -74,7 +74,7 @@ export function PixelEditForm({
   }
 
   return (
-    <Form onSubmit={handleSubmit} error={error?.message} defaultValues={{ slug, ...data }}>
+    <Form onSubmit={handleSubmit} error={getErrorMessage(error)} defaultValues={{ slug, ...data }}>
       {({ setValue }) => {
         return (
           <>

src/app/(main)/settings/profile/PasswordEditForm.tsx

@@ -9,7 +9,7 @@ import {
 import { useMessages, useUpdateQuery } from '@/components/hooks';
 
 export function PasswordEditForm({ onSave, onClose }) {
-  const { formatMessage, labels, messages } = useMessages();
+  const { formatMessage, labels, messages, getErrorMessage } = useMessages();
   const { mutate, error, isPending } = useUpdateQuery('/me/password');
 
   const handleSubmit = async (data: any) => {
@@ -29,7 +29,7 @@ export function PasswordEditForm({ onSave, onClose }) {
   };
 
   return (
-    <Form onSubmit={handleSubmit} error={error}>
+    <Form onSubmit={handleSubmit} error={getErrorMessage(error)}>
       <FormField
         label={formatMessage(labels.currentPassword)}
         name="currentPassword"
@@ -42,7 +42,7 @@ export function PasswordEditForm({ onSave, onClose }) {
         label={formatMessage(labels.newPassword)}
         rules={{
           required: 'Required',
-          minLength: { value: 8, message: formatMessage(messages.minPasswordLength, { n: 8 }) },
+          minLength: { value: 8, message: formatMessage(messages.minPasswordLength, { n: '8' }) },
         }}
       >
         <PasswordField autoComplete="new-password" />
@@ -52,7 +52,7 @@ export function PasswordEditForm({ onSave, onClose }) {
         label={formatMessage(labels.confirmPassword)}
         rules={{
           required: formatMessage(labels.required),
-          minLength: { value: 8, message: formatMessage(messages.minPasswordLength, { n: 8 }) },
+          minLength: { value: 8, message: formatMessage(messages.minPasswordLength, { n: '8' }) },
           validate: samePassword,
         }}
       >

src/app/(main)/teams/TeamAddForm.tsx

@@ -9,7 +9,7 @@ import {
 } from '@umami/react-zen';
 
 export function TeamAddForm({ onSave, onClose }: { onSave: () => void; onClose: () => void }) {
-  const { formatMessage, labels } = useMessages();
+  const { formatMessage, labels, getErrorMessage } = useMessages();
   const { mutate, error, isPending } = useUpdateQuery('/teams');
 
   const handleSubmit = async (data: any) => {
@@ -22,7 +22,7 @@ export function TeamAddForm({ onSave, onClose }: { onSave: () => void; onClose:
   };
 
   return (
-    <Form onSubmit={handleSubmit} error={error}>
+    <Form onSubmit={handleSubmit} error={getErrorMessage(error)}>
       <FormField name="name" label={formatMessage(labels.name)}>
         <TextField autoComplete="off" />
       </FormField>

src/app/(main)/teams/TeamJoinForm.tsx

@@ -9,7 +9,7 @@ import {
 import { useMessages, useModified, useUpdateQuery } from '@/components/hooks';
 
 export function TeamJoinForm({ onSave, onClose }: { onSave: () => void; onClose: () => void }) {
-  const { formatMessage, labels } = useMessages();
+  const { formatMessage, labels, getErrorMessage } = useMessages();
   const { mutate, error } = useUpdateQuery('/teams/join');
   const { touch } = useModified();
 
@@ -24,7 +24,7 @@ export function TeamJoinForm({ onSave, onClose }: { onSave: () => void; onClose:
   };
 
   return (
-    <Form onSubmit={handleSubmit} error={error}>
+    <Form onSubmit={handleSubmit} error={getErrorMessage(error)}>
       <FormField
         label={formatMessage(labels.accessCode)}
         name="accessCode"

src/app/(main)/teams/TeamLeaveForm.tsx

@@ -14,7 +14,7 @@ export function TeamLeaveForm({
   onSave: () => void;
   onClose: () => void;
 }) {
-  const { formatMessage, labels, messages } = useMessages();
+  const { formatMessage, labels, messages, getErrorMessage } = useMessages();
   const { mutate, error, isPending } = useDeleteQuery(`/teams/${teamId}/users/${userId}`);
   const { touch } = useModified();
 
@@ -37,7 +37,7 @@ export function TeamLeaveForm({
       onConfirm={handleConfirm}
       onClose={onClose}
       isLoading={isPending}
-      error={error}
+      error={getErrorMessage(error)}
     />
   );
 }

src/app/(main)/teams/[teamId]/TeamDeleteForm.tsx

@@ -12,7 +12,7 @@ export function TeamDeleteForm({
   onSave?: () => void;
   onClose?: () => void;
 }) {
-  const { labels, formatMessage } = useMessages();
+  const { labels, formatMessage, getErrorMessage } = useMessages();
   const { mutate, error, isPending, touch } = useDeleteQuery(`/teams/${teamId}`);
 
   const handleConfirm = async () => {
@@ -31,7 +31,7 @@ export function TeamDeleteForm({
       onConfirm={handleConfirm}
       onClose={onClose}
       isLoading={isPending}
-      error={error}
+      error={getErrorMessage(error)}
       buttonLabel={formatMessage(labels.delete)}
       buttonVariant="danger"
     />

src/app/(main)/teams/[teamId]/TeamEditForm.tsx

@@ -21,7 +21,7 @@ export function TeamEditForm({
   onSave?: () => void;
 }) {
   const team = useTeam();
-  const { formatMessage, labels, messages } = useMessages();
+  const { formatMessage, labels, messages, getErrorMessage } = useMessages();
 
   const { mutate, error, isPending, touch, toast } = useUpdateQuery(`/teams/${teamId}`);
 
@@ -37,7 +37,7 @@ export function TeamEditForm({
   };
 
   return (
-    <Form onSubmit={handleSubmit} error={error} defaultValues={{ ...team }}>
+    <Form onSubmit={handleSubmit} error={getErrorMessage(error)} defaultValues={{ ...team }}>
       {({ setValue }) => {
         return (
           <>

src/app/(main)/teams/[teamId]/TeamMemberEditForm.tsx

@@ -24,7 +24,7 @@ export function TeamMemberEditForm({
   onClose?: () => void;
 }) {
   const { mutate, error, isPending } = useUpdateQuery(`/teams/${teamId}/users/${userId}`);
-  const { formatMessage, labels } = useMessages();
+  const { formatMessage, labels, getErrorMessage } = useMessages();
 
   const handleSubmit = async (data: any) => {
     mutate(data, {
@@ -36,7 +36,7 @@ export function TeamMemberEditForm({
   };
 
   return (
-    <Form onSubmit={handleSubmit} error={error} defaultValues={{ role }}>
+    <Form onSubmit={handleSubmit} error={getErrorMessage(error)} defaultValues={{ role }}>
       <FormField
         name="role"
         rules={{ required: formatMessage(labels.required) }}

src/app/(main)/websites/[websiteId]/WebsiteMetricsBar.tsx

@@ -13,7 +13,7 @@ export function WebsiteMetricsBar({
   compareMode?: boolean;
 }) {
   const { dateRange } = useDateRange(websiteId);
-  const { formatMessage, labels } = useMessages();
+  const { formatMessage, labels, getErrorMessage } = useMessages();
   const { data, isLoading, isFetching, error } = useWebsiteStatsQuery(websiteId);
   const isAllTime = dateRange.value === 'all';
 
@@ -65,7 +65,7 @@ export function WebsiteMetricsBar({
       data={metrics}
       isLoading={isLoading}
       isFetching={isFetching}
-      error={error}
+      error={getErrorMessage(error)}
       minHeight="136px"
     >
       <MetricsBar>

src/app/(main)/websites/[websiteId]/cohorts/CohortEditForm.tsx

@@ -31,7 +31,7 @@ export function CohortEditForm({
   onClose?: () => void;
 }) {
   const { data } = useWebsiteCohortQuery(websiteId, cohortId);
-  const { formatMessage, labels, messages } = useMessages();
+  const { formatMessage, labels, messages, getErrorMessage } = useMessages();
 
   const { mutate, error, isPending, touch, toast } = useUpdateQuery(
     `/websites/${websiteId}/segments${cohortId ? `/${cohortId}` : ''}`,
@@ -60,7 +60,11 @@ export function CohortEditForm({
   };
 
   return (
-    <Form error={error} onSubmit={handleSubmit} defaultValues={data || defaultValues}>
+    <Form
+      error={getErrorMessage(error)}
+      onSubmit={handleSubmit}
+      defaultValues={data || defaultValues}
+    >
       {({ watch }) => {
         const type = watch('parameters.action.type');
 

src/app/(main)/websites/[websiteId]/segments/SegmentEditForm.tsx

@@ -28,7 +28,7 @@ export function SegmentEditForm({
   onClose?: () => void;
 }) {
   const { data } = useWebsiteSegmentQuery(websiteId, segmentId);
-  const { formatMessage, labels } = useMessages();
+  const { formatMessage, labels, getErrorMessage } = useMessages();
 
   const { mutate, error, isPending, touch, toast } = useUpdateQuery(
     `/websites/${websiteId}/segments${segmentId ? `/${segmentId}` : ''}`,
@@ -53,7 +53,11 @@ export function SegmentEditForm({
   }
 
   return (
-    <Form error={error} onSubmit={handleSubmit} defaultValues={data || { parameters: { filters } }}>
+    <Form
+      onSubmit={handleSubmit}
+      defaultValues={data || { parameters: { filters } }}
+      error={getErrorMessage(error)}
+    >
       <FormField
         name="name"
         label={formatMessage(labels.name)}

src/app/(main)/websites/[websiteId]/settings/WebsiteEditForm.tsx

@@ -4,7 +4,7 @@ import { DOMAIN_REGEX } from '@/lib/constants';
 
 export function WebsiteEditForm({ websiteId, onSave }: { websiteId: string; onSave?: () => void }) {
   const website = useWebsite();
-  const { formatMessage, labels, messages } = useMessages();
+  const { formatMessage, labels, messages, getErrorMessage } = useMessages();
   const { mutate, error, touch, toast } = useUpdateQuery(`/websites/${websiteId}`);
 
   const handleSubmit = async (data: any) => {
@@ -18,7 +18,7 @@ export function WebsiteEditForm({ websiteId, onSave }: { websiteId: string; onSa
   };
 
   return (
-    <Form onSubmit={handleSubmit} error={error} values={website}>
+    <Form onSubmit={handleSubmit} error={getErrorMessage(error)} values={website}>
       <FormField name="id" label={formatMessage(labels.websiteId)}>
         <TextField data-test="text-field-websiteId" value={website?.id} isReadOnly allowCopy />
       </FormField>

src/app/(main)/websites/[websiteId]/settings/WebsiteShareForm.tsx

@@ -23,7 +23,7 @@ export interface WebsiteShareFormProps {
 }
 
 export function WebsiteShareForm({ websiteId, shareId, onSave, onClose }: WebsiteShareFormProps) {
-  const { formatMessage, labels, messages } = useMessages();
+  const { formatMessage, labels, messages, getErrorMessage } = useMessages();
   const [id, setId] = useState(shareId);
   const { mutate, error, isPending, touch, toast } = useUpdateQuery(`/websites/${websiteId}`);
 
@@ -52,7 +52,7 @@ export function WebsiteShareForm({ websiteId, shareId, onSave, onClose }: Websit
   };
 
   return (
-    <Form onSubmit={handleSave} error={error} values={{ url }}>
+    <Form onSubmit={handleSave} error={getErrorMessage(error)} values={{ url }}>
       <Column gap>
         <Switch isSelected={!!id} onChange={handleSwitch}>
           {formatMessage(labels.enableShareUrl)}

src/app/(main)/websites/[websiteId]/settings/WebsiteTransferForm.tsx

@@ -31,7 +31,7 @@ export function WebsiteTransferForm({
   const { user } = useLoginQuery();
   const website = useWebsite();
   const [teamId, setTeamId] = useState<string>(null);
-  const { formatMessage, labels, messages } = useMessages();
+  const { formatMessage, labels, messages, getErrorMessage } = useMessages();
   const { mutate, error, isPending } = useUpdateQuery(`/websites/${websiteId}/transfer`);
   const { data: teams, isLoading } = useUserTeamsQuery(user.id);
   const isTeamWebsite = !!website?.teamId;
@@ -68,7 +68,7 @@ export function WebsiteTransferForm({
   }
 
   return (
-    <Form onSubmit={handleSubmit} error={error} values={{ teamId }}>
+    <Form onSubmit={handleSubmit} error={getErrorMessage(error)} values={{ teamId }}>
       <Text>
         {formatMessage(
           isTeamWebsite ? messages.transferTeamWebsiteToUser : messages.transferUserWebsiteToTeam,

src/app/api/auth/login/route.ts

@@ -4,7 +4,8 @@ import redis from '@/lib/redis';
 import { getUserByUsername } from '@/queries';
 import { json, unauthorized } from '@/lib/response';
 import { parseRequest } from '@/lib/request';
-import { saveAuth, checkPassword } from '@/lib/auth';
+import { saveAuth } from '@/lib/auth';
+import { checkPassword } from '@/lib/password';
 import { secret } from '@/lib/crypto';
 import { ROLES } from '@/lib/constants';
 

src/app/login/LoginForm.tsx

@@ -16,7 +16,7 @@ import { setClientAuthToken } from '@/lib/client';
 import { Logo } from '@/components/icons';
 
 export function LoginForm() {
-  const { formatMessage, labels } = useMessages();
+  const { formatMessage, labels, getErrorMessage } = useMessages();
   const router = useRouter();
   const { mutate, error, isPending } = useUpdateQuery('/auth/login');
 
@@ -32,12 +32,12 @@ export function LoginForm() {
   };
 
   return (
-    <Column justifyContent="center" alignItems="center" padding="8" gap="6">
+    <Column justifyContent="center" alignItems="center" gap="6">
       <Icon size="lg">
         <Logo />
       </Icon>
       <Heading>umami</Heading>
-      <Form onSubmit={handleSubmit} error={error}>
+      <Form onSubmit={handleSubmit} error={getErrorMessage(error)}>
         <FormField
           label={formatMessage(labels.username)}
           data-test="input-username"
@@ -58,6 +58,7 @@ export function LoginForm() {
           <FormSubmitButton
             data-test="button-submit"
             variant="primary"
+            isLoading={isPending}
             isDisabled={isPending}
             style={{ flex: 1 }}
           >

src/app/login/LoginPage.tsx

@@ -4,7 +4,7 @@ import { LoginForm } from './LoginForm';
 
 export function LoginPage() {
   return (
-    <Column justifyContent="center" alignItems="center" height="100vh" backgroundColor="2">
+    <Column alignItems="center" height="100vh" backgroundColor="2" paddingTop="12">
       <LoginForm />
     </Column>
   );