Updated forms usage.

components/forms/EventDataForm.js

@@ -168,20 +168,19 @@ export default function EventDataForm({ websiteId, onClose, className }) {
                 handleAddTag({ ...value, value: type }, columns, setColumns, columnRef, true)
               }
             >
-              <FormInput
-                name="field"
-                label={<FormattedMessage id="label.field-name" defaultMessage="Field Name" />}
-                rules={{ required: 'Required' }}
-              >
-                <TextField />
-              </FormInput>
               <FormRow
-                name="value"
-                label={<FormattedMessage id="label.type" defaultMessage="Type" />}
+                label={<FormattedMessage id="label.field-name" defaultMessage="Field Name" />}
               >
-                <Dropdown items={filterOptions} value={type} onChange={setType}>
-                  {({ value, label }) => <Item key={value}>{label}</Item>}
-                </Dropdown>
+                <FormInput name="field" rules={{ required: 'Required' }}>
+                  <TextField />
+                </FormInput>
+              </FormRow>
+              <FormRow label={<FormattedMessage id="label.type" defaultMessage="Type" />}>
+                <FormInput name="value">
+                  <Dropdown items={filterOptions} value={type} onChange={setType}>
+                    {({ value, label }) => <Item key={value}>{label}</Item>}
+                  </Dropdown>
+                </FormInput>
               </FormRow>
               <FormButtons className={styles.formButtons}>
                 <Button variant="action" type="submit">
@@ -200,19 +199,19 @@ export default function EventDataForm({ websiteId, onClose, className }) {
               ref={filterRef}
               onSubmit={value => handleAddTag(value, filters, setFilters, filterRef)}
             >
-              <FormInput
-                name="field"
+              <FormRow
                 label={<FormattedMessage id="label.field-name" defaultMessage="Field Name" />}
               >
-                <TextField />
-              </FormInput>
-              <FormInput
-                name="value"
-                label={<FormattedMessage id="label.value" defaultMessage="Value" />}
-              >
-                <TextField />
-              </FormInput>
-
+                <FormInput name="field">
+                  <TextField />
+                </FormInput>
+              </FormRow>
+              <FormRow label={<FormattedMessage id="label.value" defaultMessage="Value" />}>
+                <FormInput name="value">
+                  <TextField />
+                </FormInput>
+              </FormRow>
+              +
               <FormButtons className={styles.formButtons}>
                 <Button variant="action" type="submit">
                   <FormattedMessage id="label.add-filter" defaultMessage="Add Filter" />

components/forms/LoginForm.js

@@ -1,6 +1,7 @@
 import { useMutation } from '@tanstack/react-query';
 import {
   Form,
+  FormRow,
   FormInput,
   FormButtons,
   TextField,
@@ -40,12 +41,16 @@ export default function LoginForm() {
         <p>umami</p>
       </div>
       <Form className={styles.form} onSubmit={handleSubmit} error={error}>
-        <FormInput name="username" label="Username" rules={{ required: 'Required' }}>
-          <TextField autoComplete="off" />
-        </FormInput>
-        <FormInput name="password" label="Password" rules={{ required: 'Required' }}>
-          <PasswordField />
-        </FormInput>
+        <FormRow label="Username">
+          <FormInput name="username" rules={{ required: 'Required' }}>
+            <TextField autoComplete="off" />
+          </FormInput>
+        </FormRow>
+        <FormRow label="Password">
+          <FormInput name="password" rules={{ required: 'Required' }}>
+            <PasswordField />
+          </FormInput>
+        </FormRow>
         <FormButtons>
           <SubmitButton variant="primary" className={styles.button} disabled={isLoading}>
             Log in

components/forms/ShareUrlForm.js

@@ -1,33 +1,32 @@
-import { useMutation } from '@tanstack/react-query';
-import { getRandomChars } from 'next-basics';
-import { useEffect, useMemo, useRef, useState } from 'react';
 import {
-  Button,
   Form,
-  FormButtons,
   FormRow,
-  HiddenInput,
-  SubmitButton,
+  FormButtons,
+  Flexbox,
   TextField,
+  SubmitButton,
+  Button,
   Toggle,
 } from 'react-basics';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { getRandomChars } from 'next-basics';
 import useApi from 'hooks/useApi';
 
+const generateId = () => getRandomChars(16);
+
 export default function ShareUrlForm({ websiteId, data, onSave }) {
   const { name, shareId } = data;
   const [id, setId] = useState(shareId);
-  const { post } = useApi();
+  const { post, useMutation } = useApi();
   const { mutate, error } = useMutation(({ shareId }) =>
     post(`/websites/${websiteId}`, { shareId }),
   );
   const ref = useRef(null);
   const url = useMemo(
-    () => `${process.env.analyticsUrl}/share/${id}/${encodeURIComponent(name)}`,
+    () => `${location.origin}/share/${id}/${encodeURIComponent(name)}`,
     [id, name],
   );
 
-  const generateId = () => getRandomChars(16);
-
   const handleSubmit = async data => {
     mutate(data, {
       onSuccess: async () => {
@@ -46,7 +45,7 @@ export default function ShareUrlForm({ websiteId, data, onSave }) {
     setId(id);
   };
 
-  const handleChange = checked => {
+  const handleCheck = checked => {
     const data = { shareId: checked ? generateId() : null };
     mutate(data, {
       onSuccess: async () => {
@@ -63,23 +62,26 @@ export default function ShareUrlForm({ websiteId, data, onSave }) {
   }, [id, shareId]);
 
   return (
-    <>
-      <Toggle checked={Boolean(id)} onChange={handleChange}>
-        Enable share URL
-      </Toggle>
+    <Form key={websiteId} ref={ref} onSubmit={handleSubmit} error={error} values={data}>
+      <FormRow>
+        <Toggle checked={Boolean(id)} onChecked={handleCheck}>
+          Enable share URL
+        </Toggle>
+      </FormRow>
       {id && (
-        <Form key={websiteId} ref={ref} onSubmit={handleSubmit} error={error} values={data}>
+        <>
           <FormRow>
             <p>Your website stats are publically available at the following URL:</p>
-            <TextField value={url} readOnly allowCopy />
+            <Flexbox gap={10}>
+              <TextField value={url} readOnly allowCopy />
+              <Button onClick={handleGenerate}>Regenerate URL</Button>
+            </Flexbox>
           </FormRow>
-          <HiddenInput name="shareId" />
           <FormButtons>
             <SubmitButton variant="primary">Save</SubmitButton>
-            <Button onClick={handleGenerate}>Regenerate URL</Button>
           </FormButtons>
-        </Form>
+        </>
       )}
-    </>
+    </Form>
   );
 }

components/forms/TeamAddForm.js

@@ -1,5 +1,5 @@
 import { useRef } from 'react';
-import { Form, FormInput, FormButtons, TextField, Button } from 'react-basics';
+import { Form, FormRow, FormInput, FormButtons, TextField, Button } from 'react-basics';
 import useApi from 'hooks/useApi';
 import styles from './Form.module.css';
 import { useMutation } from '@tanstack/react-query';
@@ -19,9 +19,11 @@ export default function TeamAddForm({ onSave, onClose }) {
 
   return (
     <Form ref={ref} className={styles.form} onSubmit={handleSubmit} error={error}>
-      <FormInput name="name" label="Name" rules={{ required: 'Required' }}>
-        <TextField autoComplete="off" />
-      </FormInput>
+      <FormRow label="Name">
+        <FormInput name="name" rules={{ required: 'Required' }}>
+          <TextField autoComplete="off" />
+        </FormInput>
+      </FormRow>
       <FormButtons flex>
         <Button type="submit" variant="primary" disabled={isLoading}>
           Save

components/forms/TeamEditForm.js

@@ -22,9 +22,11 @@ export default function TeamEditForm({ teamId, data, onSave }) {
       <FormRow label="Team ID">
         <TextField value={teamId} readOnly allowCopy />
       </FormRow>
-      <FormInput name="name" label="Name" rules={{ required: 'Required' }}>
-        <TextField />
-      </FormInput>
+      <FormRow label="Name">
+        <FormInput name="name" rules={{ required: 'Required' }}>
+          <TextField />
+        </FormInput>
+      </FormRow>
       <FormButtons>
         <SubmitButton variant="primary">Save</SubmitButton>
       </FormButtons>

components/forms/UserDeleteForm.js

@@ -1,6 +1,14 @@
 import { useMutation } from '@tanstack/react-query';
 import useApi from 'hooks/useApi';
-import { Button, Form, FormButtons, FormInput, SubmitButton, TextField } from 'react-basics';
+import {
+  Button,
+  Form,
+  FormRow,
+  FormButtons,
+  FormInput,
+  SubmitButton,
+  TextField,
+} from 'react-basics';
 import styles from './Form.module.css';
 
 const CONFIRM_VALUE = 'DELETE';
@@ -19,16 +27,14 @@ export default function UserDeleteForm({ userId, onSave, onClose }) {
 
   return (
     <Form className={styles.form} onSubmit={handleSubmit} error={error}>
-      <div>
+      <p>
         To delete this user, type <b>{CONFIRM_VALUE}</b> in the box below to confirm.
-      </div>
-      <FormInput
-        name="confirmation"
-        label="Confirm"
-        rules={{ validate: value => value === CONFIRM_VALUE }}
-      >
-        <TextField autoComplete="off" />
-      </FormInput>
+      </p>
+      <FormRow label="Confirm">
+        <FormInput name="confirmation" rules={{ validate: value => value === CONFIRM_VALUE }}>
+          <TextField autoComplete="off" />
+        </FormInput>
+      </FormRow>
       <FormButtons flex>
         <SubmitButton variant="primary" className={styles.button} disabled={isLoading}>
           Save

components/forms/UserEditForm.js

@@ -2,6 +2,7 @@ import {
   Dropdown,
   Item,
   Form,
+  FormRow,
   FormButtons,
   FormInput,
   TextField,
@@ -48,14 +49,18 @@ export default function UserEditForm({ data, onSave }) {
       error={error}
       values={data}
     >
-      <FormInput name="username" label="Username">
-        <TextField />
-      </FormInput>
-      <FormInput name="role" label="Role">
-        <Dropdown items={items} style={{ width: 200 }}>
-          {({ value, label }) => <Item key={value}>{label}</Item>}
-        </Dropdown>
-      </FormInput>
+      <FormRow label="Username">
+        <FormInput name="username">
+          <TextField />
+        </FormInput>
+      </FormRow>
+      <FormRow label="Role">
+        <FormInput name="role">
+          <Dropdown items={items} style={{ width: 200 }}>
+            {({ value, label }) => <Item key={value}>{label}</Item>}
+          </Dropdown>
+        </FormInput>
+      </FormRow>
       <FormButtons>
         <SubmitButton variant="primary">Save</SubmitButton>
       </FormButtons>

components/forms/UserPasswordForm.js

@@ -1,5 +1,5 @@
 import { useRef } from 'react';
-import { Form, FormInput, FormButtons, PasswordField, Button } from 'react-basics';
+import { Form, FormRow, FormInput, FormButtons, PasswordField, Button } from 'react-basics';
 import useApi from 'hooks/useApi';
 import styles from './UserPasswordForm.module.css';
 import useUser from 'hooks/useUser';
@@ -38,31 +38,35 @@ export default function UserPasswordForm({ onSave, onClose, userId }) {
   return (
     <Form ref={ref} className={styles.form} onSubmit={handleSubmit} error={error}>
       {isCurrentUser && (
-        <FormInput name="currentPassword" label="Current password" rules={{ required: 'Required' }}>
+        <FormRow label="Current password">
+          <FormInput name="currentPassword" rules={{ required: 'Required' }}>
+            <PasswordField autoComplete="off" />
+          </FormInput>
+        </FormRow>
+      )}
+      <FormRow label="New password">
+        <FormInput
+          name="newPassword"
+          rules={{
+            required: 'Required',
+            minLength: { value: 8, message: 'Minimum length 8 characters' },
+          }}
+        >
           <PasswordField autoComplete="off" />
         </FormInput>
-      )}
-      <FormInput
-        name="newPassword"
-        label="New password"
-        rules={{
-          required: 'Required',
-          minLength: { value: 8, message: 'Minimum length 8 characters' },
-        }}
-      >
-        <PasswordField autoComplete="off" />
-      </FormInput>
-      <FormInput
-        name="confirmPassword"
-        label="Confirm password"
-        rules={{
-          required: 'Required',
-          minLength: { value: 8, message: 'Minimum length 8 characters' },
-          validate: samePassword,
-        }}
-      >
-        <PasswordField autoComplete="off" />
-      </FormInput>
+      </FormRow>
+      <FormRow label="Confirm password">
+        <FormInput
+          name="confirmPassword"
+          rules={{
+            required: 'Required',
+            minLength: { value: 8, message: 'Minimum length 8 characters' },
+            validate: samePassword,
+          }}
+        >
+          <PasswordField autoComplete="off" />
+        </FormInput>
+      </FormRow>
       <FormButtons flex>
         <Button type="submit" variant="primary" disabled={isLoading}>
           Save

components/forms/WebsiteAddForm.js

@@ -1,5 +1,13 @@
 import { useRef } from 'react';
-import { Form, FormInput, FormButtons, TextField, Button, SubmitButton } from 'react-basics';
+import {
+  Form,
+  FormRow,
+  FormInput,
+  FormButtons,
+  TextField,
+  Button,
+  SubmitButton,
+} from 'react-basics';
 import useApi from 'hooks/useApi';
 import styles from './Form.module.css';
 import { useMutation } from '@tanstack/react-query';
@@ -20,19 +28,22 @@ export default function WebsiteAddForm({ onSave, onClose }) {
 
   return (
     <Form ref={ref} className={styles.form} onSubmit={handleSubmit} error={error}>
-      <FormInput name="name" label="Name" rules={{ required: 'Required' }}>
-        <TextField autoComplete="off" />
-      </FormInput>
-      <FormInput
-        name="domain"
-        label="Domain"
-        rules={{
-          required: 'Required',
-          pattern: { value: DOMAIN_REGEX, message: 'Invalid domain' },
-        }}
-      >
-        <TextField autoComplete="off" />
-      </FormInput>
+      <FormRow label="Name">
+        <FormInput name="name" rules={{ required: 'Required' }}>
+          <TextField autoComplete="off" />
+        </FormInput>
+      </FormRow>
+      <FormRow label="Domain">
+        <FormInput
+          name="domain"
+          rules={{
+            required: 'Required',
+            pattern: { value: DOMAIN_REGEX, message: 'Invalid domain' },
+          }}
+        >
+          <TextField autoComplete="off" />
+        </FormInput>
+      </FormRow>
       <FormButtons flex>
         <SubmitButton variant="primary" disabled={false}>
           Save

components/forms/WebsiteDeleteForm.js

@@ -1,6 +1,14 @@
 import { useMutation } from '@tanstack/react-query';
 import useApi from 'hooks/useApi';
-import { Button, Form, FormButtons, FormInput, SubmitButton, TextField } from 'react-basics';
+import {
+  Button,
+  Form,
+  FormRow,
+  FormButtons,
+  FormInput,
+  SubmitButton,
+  TextField,
+} from 'react-basics';
 import styles from './Form.module.css';
 
 const CONFIRM_VALUE = 'DELETE';
@@ -22,13 +30,11 @@ export default function WebsiteDeleteForm({ websiteId, onSave, onClose }) {
       <div>
         To delete this website, type <b>{CONFIRM_VALUE}</b> in the box below to confirm.
       </div>
-      <FormInput
-        name="confirmation"
-        label="Confirm"
-        rules={{ validate: value => value === CONFIRM_VALUE }}
-      >
-        <TextField autoComplete="off" />
-      </FormInput>
+      <FormRow label="Confirm">
+        <FormInput name="confirmation" rules={{ validate: value => value === CONFIRM_VALUE }}>
+          <TextField autoComplete="off" />
+        </FormInput>
+      </FormRow>
       <FormButtons flex>
         <SubmitButton variant="primary" className={styles.button} disabled={isLoading}>
           Save

components/forms/WebsiteEditForm.js

@@ -23,22 +23,25 @@ export default function WebsiteEditForm({ websiteId, data, onSave }) {
       <FormRow label="Website ID">
         <TextField value={websiteId} readOnly allowCopy />
       </FormRow>
-      <FormInput name="name" label="Name" rules={{ required: 'Required' }}>
-        <TextField />
-      </FormInput>
-      <FormInput
-        name="domain"
-        label="Domain"
-        rules={{
-          required: 'Required',
-          pattern: {
-            value: DOMAIN_REGEX,
-            message: 'Invalid domain',
-          },
-        }}
-      >
-        <TextField />
-      </FormInput>
+      <FormRow label="Name">
+        <FormInput name="name" rules={{ required: 'Required' }}>
+          <TextField />
+        </FormInput>
+      </FormRow>
+      <FormRow label="Domain">
+        <FormInput
+          name="domain"
+          rules={{
+            required: 'Required',
+            pattern: {
+              value: DOMAIN_REGEX,
+              message: 'Invalid domain',
+            },
+          }}
+        >
+          <TextField />
+        </FormInput>
+      </FormRow>
       <FormButtons>
         <SubmitButton variant="primary">Save</SubmitButton>
       </FormButtons>

components/forms/WebsiteResetForm.js

@@ -1,6 +1,14 @@
 import { useMutation } from '@tanstack/react-query';
 import useApi from 'hooks/useApi';
-import { Button, Form, FormButtons, FormInput, SubmitButton, TextField } from 'react-basics';
+import {
+  Button,
+  Form,
+  FormRow,
+  FormButtons,
+  FormInput,
+  SubmitButton,
+  TextField,
+} from 'react-basics';
 import styles from './Form.module.css';
 
 const CONFIRM_VALUE = 'RESET';
@@ -24,13 +32,11 @@ export default function WebsiteResetForm({ websiteId, onSave, onClose }) {
       <div>
         To reset this website, type <b>{CONFIRM_VALUE}</b> in the box below to confirm.
       </div>
-      <FormInput
-        name="confirm"
-        label="Confirmation"
-        rules={{ validate: value => value === CONFIRM_VALUE }}
-      >
-        <TextField autoComplete="off" />
-      </FormInput>
+      <FormRow label="Confirmation">
+        <FormInput name="confirm" rules={{ validate: value => value === CONFIRM_VALUE }}>
+          <TextField autoComplete="off" />
+        </FormInput>
+      </FormRow>
       <FormButtons flex>
         <SubmitButton variant="primary" className={styles.button} disabled={isLoading}>
           Save

components/pages/WebsiteSettings.js

@@ -13,7 +13,7 @@ import ExternalLink from 'assets/external-link.svg';
 
 export default function Websites({ websiteId }) {
   const [values, setValues] = useState(null);
-  const [tab, setTab] = useState('general');
+  const [tab, setTab] = useState('details');
   const { get } = useApi();
   const { toast, showToast } = useToast();
   const { data, isLoading } = useQuery(
@@ -59,12 +59,12 @@ export default function Websites({ websiteId }) {
         </Link>
       </PageHeader>
       <Tabs selectedKey={tab} onSelect={setTab} style={{ marginBottom: 30, fontSize: 14 }}>
-        <Item key="general">General</Item>
+        <Item key="details">General</Item>
         <Item key="tracking">Tracking code</Item>
         <Item key="share">Share URL</Item>
         <Item key="danger">Danger zone</Item>
       </Tabs>
-      {tab === 'general' && (
+      {tab === 'details' && (
         <WebsiteEditForm websiteId={websiteId} data={values} onSave={handleSave} />
       )}
       {tab === 'tracking' && <TrackingCodeForm websiteId={websiteId} data={values} />}

pages/api/teams/[id]/index.ts

@@ -12,6 +12,7 @@ export interface TeamRequestQuery {
 
 export interface TeamRequestBody {
   name: string;
+  accessCode: string;
 }
 
 export default async (
@@ -33,13 +34,14 @@ export default async (
   }
 
   if (req.method === 'POST') {
-    const { name } = req.body;
-
     if (!(await canUpdateTeam(req.auth, teamId))) {
       return unauthorized(res, 'You must be the owner of this team.');
     }
 
-    const updated = await updateTeam({ name }, { id: teamId });
+    const { name, accessCode } = req.body;
+    const data = { name, accessCode };
+
+    const updated = await updateTeam(data, { id: teamId });
 
     return ok(res, updated);
   }