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>
   );
 }