Consistent error responses. Updated login page.

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',
+  },
 });