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