Consistent error responses. Updated login page.

src/app/(main)/settings/websites/WebsiteAddButton.tsx

@@ -1,31 +1,40 @@
 import { useMessages, useModified } from '@/components/hooks';
-import { Button, Icon, Icons, Modal, ModalTrigger, Text, useToasts } from 'react-basics';
+import {
+  Button,
+  Icon,
+  Icons,
+  Modal,
+  Dialog,
+  DialogTrigger,
+  Text,
+  useToast,
+} from '@umami/react-zen';
 import { WebsiteAddForm } from './WebsiteAddForm';
 
 export function WebsiteAddButton({ teamId, onSave }: { teamId: string; onSave?: () => void }) {
   const { formatMessage, labels, messages } = useMessages();
-  const { showToast } = useToasts();
+  const { toast } = useToast();
   const { touch } = useModified();
 
   const handleSave = async () => {
-    showToast({ message: formatMessage(messages.saved), variant: 'success' });
+    toast(formatMessage(messages.saved));
     touch('websites');
     onSave?.();
   };
 
   return (
-    <ModalTrigger>
+    <DialogTrigger>
       <Button data-test="button-website-add" variant="primary">
         <Icon>
           <Icons.Plus />
         </Icon>
         <Text>{formatMessage(labels.addWebsite)}</Text>
       </Button>
-      <Modal title={formatMessage(labels.addWebsite)}>
-        {(close: () => void) => (
-          <WebsiteAddForm teamId={teamId} onSave={handleSave} onClose={close} />
-        )}
+      <Modal>
+        <Dialog title={formatMessage(labels.addWebsite)}>
+          {({ close }) => <WebsiteAddForm teamId={teamId} onSave={handleSave} onClose={close} />}
+        </Dialog>
       </Modal>
-    </ModalTrigger>
+    </DialogTrigger>
   );
 }

src/app/(main)/settings/websites/WebsiteAddForm.tsx

@@ -1,12 +1,4 @@
-import {
-  Form,
-  FormRow,
-  FormInput,
-  FormButtons,
-  TextField,
-  Button,
-  SubmitButton,
-} from 'react-basics';
+import { Form, FormField, FormSubmitButton, Row, TextField, Button } from '@umami/react-zen';
 import { useApi } from '@/components/hooks';
 import { DOMAIN_REGEX } from '@/lib/constants';
 import { useMessages } from '@/components/hooks';
@@ -36,38 +28,37 @@ export function WebsiteAddForm({
   };
 
   return (
-    <Form onSubmit={handleSubmit} error={error}>
-      <FormRow label={formatMessage(labels.name)}>
-        <FormInput
-          data-test="input-name"
-          name="name"
-          rules={{ required: formatMessage(labels.required) }}
-        >
-          <TextField autoComplete="off" />
-        </FormInput>
-      </FormRow>
-      <FormRow label={formatMessage(labels.domain)}>
-        <FormInput
-          data-test="input-domain"
-          name="domain"
-          rules={{
-            required: formatMessage(labels.required),
-            pattern: { value: DOMAIN_REGEX, message: formatMessage(messages.invalidDomain) },
-          }}
-        >
-          <TextField autoComplete="off" />
-        </FormInput>
-      </FormRow>
-      <FormButtons flex>
-        <SubmitButton data-test="button-submit" variant="primary" disabled={false}>
-          {formatMessage(labels.save)}
-        </SubmitButton>
+    <Form onSubmit={handleSubmit} error={error?.message}>
+      <FormField
+        label={formatMessage(labels.name)}
+        data-test="input-name"
+        name="name"
+        rules={{ required: formatMessage(labels.required) }}
+      >
+        <TextField autoComplete="off" />
+      </FormField>
+
+      <FormField
+        label={formatMessage(labels.domain)}
+        data-test="input-domain"
+        name="domain"
+        rules={{
+          required: formatMessage(labels.required),
+          pattern: { value: DOMAIN_REGEX, message: formatMessage(messages.invalidDomain) },
+        }}
+      >
+        <TextField autoComplete="off" />
+      </FormField>
+      <Row justifyContent="flex-end" paddingTop="3" gap="3">
         {onClose && (
-          <Button disabled={isPending} onClick={onClose}>
+          <Button isDisabled={isPending} onPress={onClose}>
             {formatMessage(labels.cancel)}
           </Button>
         )}
-      </FormButtons>
+        <FormSubmitButton data-test="button-submit" disabled={false}>
+          {formatMessage(labels.save)}
+        </FormSubmitButton>
+      </Row>
     </Form>
   );
 }

src/app/(main)/settings/websites/WebsitesHeader.tsx

@@ -1,14 +1,14 @@
-import { useMessages } from '@/components/hooks';
+import { useMessages, useTeamUrl } from '@/components/hooks';
 import { PageHeader } from '@/components/layout/PageHeader';
 import { WebsiteAddButton } from './WebsiteAddButton';
 
 export interface WebsitesHeaderProps {
-  teamId?: string;
   allowCreate?: boolean;
 }
 
-export function WebsitesHeader({ teamId, allowCreate = true }: WebsitesHeaderProps) {
+export function WebsitesHeader({ allowCreate = true }: WebsitesHeaderProps) {
   const { formatMessage, labels } = useMessages();
+  const { teamId } = useTeamUrl();
 
   return (
     <PageHeader title={formatMessage(labels.websites)}>

src/app/(main)/websites/WebsitesPage.tsx

@@ -8,7 +8,7 @@ export function WebsitesPage() {
 
   return (
     <>
-      <WebsitesHeader teamId={teamId} allowCreate={false} />
+      <WebsitesHeader />
       <WebsitesDataTable teamId={teamId} allowEdit={false} />
     </>
   );

src/app/Providers.tsx

@@ -2,12 +2,12 @@
 import { IntlProvider } from 'react-intl';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ZenProvider } from '@umami/react-zen';
-import { ErrorBoundary } from '@/components/common/ErrorBoundary';
-import { useLocale } from '@/components/hooks';
 import 'chartjs-adapter-date-fns';
 import { useEffect } from 'react';
 import { useRouter } from 'next/navigation';
 import { RouterProvider } from 'react-aria-components';
+import { ErrorBoundary } from '@/components/common/ErrorBoundary';
+import { useLocale } from '@/components/hooks';
 
 const client = new QueryClient({
   defaultOptions: {

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

@@ -26,7 +26,7 @@ export async function POST(request: Request) {
   const user = await getUserByUsername(username, { includePassword: true });
 
   if (!user || !checkPassword(password, user.password)) {
-    return unauthorized();
+    return unauthorized({ code: 'incorrect-username-password' });
   }
 
   const { id, role, createdAt } = user;

src/app/login/LoginForm.module.css

@@ -1,33 +0,0 @@
-.login {
-  width: 400px;
-  margin: auto;
-  transform: translateY(-25%);
-}
-
-.form {
-  display: flex;
-  flex-direction: column;
-  margin: 0 auto;
-  width: 300px;
-}
-
-.title {
-  font-size: 24px;
-  font-weight: 700;
-  text-align: center;
-  margin: 30px 0;
-}
-
-.icon {
-  width: 100%;
-}
-
-.icon svg {
-  width: 32px;
-  height: 32px;
-}
-
-.button {
-  flex: 1;
-  justify-content: center;
-}

src/app/login/LoginForm.tsx

@@ -1,22 +1,22 @@
 import {
   Form,
-  FormRow,
-  FormInput,
   FormButtons,
+  FormField,
+  FormSubmitButton,
   TextField,
   PasswordField,
-  SubmitButton,
   Icon,
-} from 'react-basics';
+  Column,
+  Heading,
+} from '@umami/react-zen';
 import { useRouter } from 'next/navigation';
 import { useApi, useMessages } from '@/components/hooks';
 import { setUser } from '@/store/app';
 import { setClientAuthToken } from '@/lib/client';
 import Logo from '@/assets/logo.svg';
-import styles from './LoginForm.module.css';
 
 export function LoginForm() {
-  const { formatMessage, labels } = useMessages();
+  const { formatMessage, labels, getMessage } = useMessages();
   const router = useRouter();
   const { post, useMutation } = useApi();
   const { mutate, error, isPending } = useMutation({
@@ -35,41 +35,47 @@ export function LoginForm() {
   };
 
   return (
-    <div className={styles.login}>
-      <Icon className={styles.icon} size="xl">
+    <Column
+      justifyContent="center"
+      alignItems="center"
+      padding="8"
+      gap="6"
+      backgroundColor="1"
+      borderRadius="3"
+      shadow="3"
+    >
+      <Icon size="lg">
         <Logo />
       </Icon>
-      <div className={styles.title}>umami</div>
-      <Form className={styles.form} onSubmit={handleSubmit} error={error}>
-        <FormRow label={formatMessage(labels.username)}>
-          <FormInput
-            data-test="input-username"
-            name="username"
-            rules={{ required: formatMessage(labels.required) }}
-          >
-            <TextField autoComplete="off" />
-          </FormInput>
-        </FormRow>
-        <FormRow label={formatMessage(labels.password)}>
-          <FormInput
-            data-test="input-password"
-            name="password"
-            rules={{ required: formatMessage(labels.required) }}
-          >
-            <PasswordField />
-          </FormInput>
-        </FormRow>
+      <Heading>umami</Heading>
+      <Form onSubmit={handleSubmit} error={getMessage(error)}>
+        <FormField
+          label={formatMessage(labels.username)}
+          data-test="input-username"
+          name="username"
+          rules={{ required: formatMessage(labels.required) }}
+        >
+          <TextField autoComplete="off" />
+        </FormField>
+        <FormField
+          label={formatMessage(labels.password)}
+          data-test="input-password"
+          name="password"
+          rules={{ required: formatMessage(labels.required) }}
+        >
+          <PasswordField />
+        </FormField>
         <FormButtons>
-          <SubmitButton
+          <FormSubmitButton
             data-test="button-submit"
-            className={styles.button}
             variant="primary"
             disabled={isPending}
+            style={{ flex: 1 }}
           >
             {formatMessage(labels.login)}
-          </SubmitButton>
+          </FormSubmitButton>
         </FormButtons>
       </Form>
-    </div>
+    </Column>
   );
 }

src/app/login/LoginPage.module.css

@@ -1,7 +0,0 @@
-.page {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100vh;
-  background: var(--base75);
-}

src/app/login/LoginPage.tsx

@@ -1,6 +1,6 @@
 'use client';
+import { Column } from '@umami/react-zen';
 import { LoginForm } from './LoginForm';
-import styles from './LoginPage.module.css';
 
 export function LoginPage() {
   if (process.env.disableLogin) {
@@ -8,8 +8,8 @@ export function LoginPage() {
   }
 
   return (
-    <div className={styles.page}>
+    <Column justifyContent="center" alignItems="center" height="100vh" backgroundColor="2">
       <LoginForm />
-    </div>
+    </Column>
   );
 }

src/components/hooks/useApi.ts

@@ -9,7 +9,8 @@ const selector = (state: { shareToken: { token?: string } }) => state.shareToken
 
 async function handleResponse(res: FetchResponse): Promise<any> {
   if (!res.ok) {
-    return Promise.reject(new Error(res.error?.error || res.error || 'Unexpectd error.'));
+    const { message, code } = res?.error?.error || {};
+    return Promise.reject(new Error(code || message || 'Unexpectd error.'));
   }
   return Promise.resolve(res.data);
 }

src/components/hooks/useMessages.ts

@@ -5,7 +5,7 @@ export function useMessages(): any {
   const intl = useIntl();
 
   const getMessage = (id: string) => {
-    const message = Object.values(messages).find(value => value.id === id);
+    const message = Object.values(messages).find(value => value.id === `message.${id}`);
 
     return message ? formatMessage(message) : id;
   };

src/components/input/TeamsButton.tsx

@@ -53,7 +53,7 @@ export function TeamsButton({
         <Row alignItems="center" gap="3">
           <Icon>{teamId ? <Users /> : <User />}</Icon>
           {showText && <Text weight="bold">{teamId ? team?.name : user.username}</Text>}
-          <Icon rotate={90} size="sm">
+          <Icon rotate={90} size="xs">
             <Icons.Chevron />
           </Icon>
         </Row>

src/components/layout/PageHeader.tsx

@@ -1,12 +1,9 @@
-import classNames from 'classnames';
-import React, { ReactNode } from 'react';
-import { Icon } from 'react-basics';
-import styles from './PageHeader.module.css';
+import { ReactNode } from 'react';
+import { Heading, Icon, Breadcrumbs, Breadcrumb, Row } from '@umami/react-zen';
 
 export function PageHeader({
   title,
   icon,
-  className,
   breadcrumb,
   children,
 }: {
@@ -18,17 +15,15 @@ export function PageHeader({
 }) {
   return (
     <>
-      <div className={styles.breadcrumb}>{breadcrumb}</div>
-      <div className={classNames(styles.header, className)}>
-        {icon && (
-          <Icon size="lg" className={styles.icon}>
-            {icon}
-          </Icon>
-        )}
+      <Breadcrumbs>
+        <Breadcrumb>{breadcrumb}</Breadcrumb>
+      </Breadcrumbs>
+      <Row justifyContent="space-between" paddingY="6">
+        {icon && <Icon size="lg">{icon}</Icon>}
 
-        {title && <div className={styles.title}>{title}</div>}
-        <div className={styles.actions}>{children}</div>
-      </div>
+        {title && <Heading>{title}</Heading>}
+        <Row justifyContent="flex-end">{children}</Row>
+      </Row>
     </>
   );
 }

src/components/messages.ts

@@ -429,4 +429,24 @@ export const messages = defineMessages({
     id: 'message.transfer-user-website-to-team',
     defaultMessage: 'Select the team to transfer this website to.',
   },
+  unauthorized: {
+    id: 'message.unauthorized',
+    defaultMessage: 'Unauthorized',
+  },
+  badRequest: {
+    id: 'message.bad-request',
+    defaultMessage: 'Bad request',
+  },
+  forbidden: {
+    id: 'message.forbidden',
+    defaultMessage: 'Forbidden',
+  },
+  notFound: {
+    id: 'message.not-found',
+    defaultMessage: 'Not found',
+  },
+  serverError: {
+    id: 'message.sever-error',
+    defaultMessage: 'Server error',
+  },
 });

src/lib/response.ts

@@ -1,5 +1,3 @@
-import { serializeError } from 'serialize-error';
-
 export function ok() {
   return Response.json({ ok: true });
 }
@@ -8,22 +6,53 @@ export function json(data: any) {
   return Response.json(data);
 }
 
-export function badRequest(error: any = 'Bad request') {
-  return Response.json({ error: serializeError(error) }, { status: 400 });
+export function badRequest(error?: any) {
+  return Response.json(
+    {
+      error: { message: 'Bad request', code: 'bad-request', status: 400, ...error },
+    },
+    { status: 400 },
+  );
 }
 
-export function unauthorized(error: any = 'Unauthorized') {
-  return Response.json({ error: serializeError(error) }, { status: 401 });
+export function unauthorized(error?: any) {
+  return Response.json(
+    {
+      error: {
+        message: 'Unauthorized',
+        code: 'unauthorized',
+        status: 401,
+        ...error,
+      },
+    },
+    { status: 401 },
+  );
 }
 
-export function forbidden(error: any = 'Forbidden') {
-  return Response.json({ error: serializeError(error) }, { status: 403 });
+export function forbidden(error?: any) {
+  return Response.json(
+    { error: { message: 'Forbidden', code: 'forbidden', status: 403, ...error } },
+    { status: 403 },
+  );
 }
 
-export function notFound(error: any = 'Not found') {
-  return Response.json({ error: serializeError(error) }, { status: 404 });
+export function notFound(error?: any) {
+  return Response.json(
+    { error: { message: 'Not found', code: 'not-found', status: 404, ...error } },
+    { status: 404 },
+  );
 }
 
-export function serverError(error: any = 'Server error') {
-  return Response.json({ error: serializeError(error) }, { status: 500 });
+export function serverError(error?: any) {
+  return Response.json(
+    {
+      error: {
+        message: 'Server error',
+        code: 'server-error',
+        status: 500,
+        ...error,
+      },
+    },
+    { status: 500 },
+  );
 }

src/styles/variables.css

@@ -1,3 +1,3 @@
 html body {
-  --primary-color: var(--accent-color-blue);
+  --primary-color: #147af3;
 }