Refactored settings components.

components/pages/settings/SettingsLayout.js

@@ -0,0 +1,23 @@
+import Layout from 'components/layout/Layout';
+import Menu from 'components/nav/Nav';
+import useRequireLogin from 'hooks/useRequireLogin';
+import styles from './SettingsLayout.module.css';
+
+export default function SettingsLayout({ children }) {
+  const { user } = useRequireLogin();
+
+  if (!user) {
+    return null;
+  }
+
+  return (
+    <Layout>
+      <div className={styles.dashboard}>
+        <div className={styles.nav}>
+          <Menu />
+        </div>
+        <div className={styles.content}>{children}</div>
+      </div>
+    </Layout>
+  );
+}

components/pages/settings/SettingsLayout.module.css

@@ -0,0 +1,16 @@
+.dashboard {
+  display: flex;
+  flex: 1;
+}
+
+.nav {
+  margin-top: 20px;
+}
+
+.content {
+  position: relative;
+  background: var(--base50);
+  flex: 1;
+  border-radius: 8px;
+  overflow: hidden;
+}

components/pages/settings/account/AccountDetails.js

@@ -0,0 +1,69 @@
+import { Button, Modal, useToast, Icon, Tabs, Item } from 'react-basics';
+import { useEffect, useState } from 'react';
+import useApi from 'hooks/useApi';
+import PasswordEditForm from 'components/pages/settings/account/PasswordEditForm';
+import PageHeader from 'components/layout/PageHeader';
+import AccountEditForm from 'components/pages/settings/account/AccountEditForm';
+import Lock from 'assets/lock.svg';
+import Page from 'components/layout/Page';
+import ApiKeysList from 'components/pages/settings/account/ApiKeysList';
+import useUser from 'hooks/useUser';
+
+export default function AccountDetails() {
+  const { user } = useUser();
+  const [values, setValues] = useState(null);
+  const [tab, setTab] = useState('detail');
+  const [showForm, setShowForm] = useState(false);
+  const { get, useQuery } = useApi();
+  const { data, isLoading } = useQuery(['account'], () => get(`/accounts/${user.id}`), {
+    cacheTime: 0,
+  });
+  const { toast, showToast } = useToast();
+
+  const handleChangePassword = () => setShowForm(true);
+
+  const handleClose = () => {
+    setShowForm(false);
+  };
+
+  const handleSave = data => {
+    setValues(data);
+    showToast({ message: 'Saved successfully.', variant: 'success' });
+  };
+
+  const handlePasswordSave = () => {
+    setShowForm(false);
+    showToast({ message: 'Password successfully changed', variant: 'success' });
+  };
+
+  useEffect(() => {
+    if (data) {
+      setValues(data);
+    }
+  }, [data]);
+
+  return (
+    <Page loading={isLoading || !values}>
+      {toast}
+      <PageHeader title="Account">
+        <Button onClick={handleChangePassword}>
+          <Icon>
+            <Lock />
+          </Icon>
+          Change password
+        </Button>
+      </PageHeader>
+      <Tabs selectedKey={tab} onSelect={setTab} style={{ marginBottom: 30, fontSize: 14 }}>
+        <Item key="detail">Details</Item>
+        <Item key="apiKey">API Keys</Item>
+      </Tabs>
+      {tab === 'detail' && <AccountEditForm data={values} onSave={handleSave} />}
+      {tab === 'apiKey' && <ApiKeysList />}
+      {data && showForm && (
+        <Modal title="Change password" onClose={handleClose} style={{ fontWeight: 'bold' }}>
+          {close => <PasswordEditForm onSave={handlePasswordSave} onClose={close} />}
+        </Modal>
+      )}
+    </Page>
+  );
+}

components/pages/settings/account/AccountEditForm.js

@@ -0,0 +1,39 @@
+import { Form, FormRow, FormButtons, FormInput, TextField, SubmitButton } from 'react-basics';
+import { useRef } from 'react';
+import useApi from 'hooks/useApi';
+
+export default function AccountEditForm({ data, onSave }) {
+  const { id } = data;
+  const { post, useMutation } = useApi();
+  const { mutate, error } = useMutation(({ name }) => post(`/accounts/${id}`, { name }));
+  const ref = useRef(null);
+
+  const handleSubmit = async data => {
+    mutate(data, {
+      onSuccess: async () => {
+        onSave(data);
+        ref.current.reset(data);
+      },
+    });
+  };
+
+  return (
+    <>
+      <Form key={id} ref={ref} onSubmit={handleSubmit} error={error} values={data}>
+        <FormRow label="Name">
+          <FormInput name="name">
+            <TextField autoComplete="off" />
+          </FormInput>
+        </FormRow>
+        <FormRow label="Email">
+          <FormInput name="email">
+            <TextField readOnly />
+          </FormInput>
+        </FormRow>
+        <FormButtons>
+          <SubmitButton variant="primary">Save</SubmitButton>
+        </FormButtons>
+      </Form>
+    </>
+  );
+}

components/pages/settings/account/ApiKeyDeleteForm.js

@@ -0,0 +1,29 @@
+import useApi from 'hooks/useApi';
+import { Button, Form, FormButtons, SubmitButton } from 'react-basics';
+
+export default function ApiKeyDeleteForm({ apiKeyId, onSave, onClose }) {
+  const { del, useMutation } = useApi();
+  const { mutate, error, isLoading } = useMutation(data => del(`/api-key/${apiKeyId}`, data));
+
+  const handleSubmit = async data => {
+    mutate(data, {
+      onSuccess: async () => {
+        onSave();
+      },
+    });
+  };
+
+  return (
+    <Form onSubmit={handleSubmit} error={error}>
+      <div>Are you sure you want to delete this API KEY?</div>
+      <FormButtons flex>
+        <SubmitButton variant="primary" disabled={isLoading}>
+          Delete
+        </SubmitButton>
+        <Button disabled={isLoading} onClick={onClose}>
+          Cancel
+        </Button>
+      </FormButtons>
+    </Form>
+  );
+}

components/pages/settings/account/ApiKeysList.js

@@ -0,0 +1,46 @@
+import { Text, Icon, useToast, Banner, LoadingButton, Loading } from 'react-basics';
+import useApi from 'hooks/useApi';
+import ApiKeysTable from 'components/pages/settings/account/ApiKeysTable';
+
+export default function ApiKeysList() {
+  const { toast, showToast } = useToast();
+  const { get, post, useQuery, useMutation } = useApi();
+  const { mutate, isLoading: isUpdating } = useMutation(data => post('/api-key', data));
+  const { data, refetch, isLoading, error } = useQuery(['api-key'], () => get(`/api-key`));
+  const hasData = data && data.length !== 0;
+
+  const handleCreate = () => {
+    mutate(
+      {},
+      {
+        onSuccess: async () => {
+          showToast({ message: 'API key saved.', variant: 'success' });
+          await handleSave();
+        },
+      },
+    );
+  };
+
+  const handleSave = async () => {
+    await refetch();
+  };
+
+  if (error) {
+    return <Banner variant="error">Something went wrong.</Banner>;
+  }
+
+  if (isLoading) {
+    return <Loading icon="dots" position="block" />;
+  }
+
+  return (
+    <>
+      {toast}
+      <LoadingButton loading={isUpdating} onClick={handleCreate}>
+        <Icon icon="plus" /> Create key
+      </LoadingButton>
+      {hasData && <ApiKeysTable data={data} onSave={handleSave} />}
+      {!hasData && <Text>You don&apos;t have any API keys.</Text>}
+    </>
+  );
+}

components/pages/settings/account/ApiKeysTable.js

@@ -0,0 +1,100 @@
+import { formatDistance } from 'date-fns';
+import { useState } from 'react';
+import {
+  Button,
+  Icon,
+  Modal,
+  PasswordField,
+  Table,
+  TableBody,
+  TableCell,
+  TableColumn,
+  TableHeader,
+  TableRow,
+  Text,
+} from 'react-basics';
+import ApiKeyDeleteForm from 'components/pages/settings/account/ApiKeyDeleteForm';
+import Trash from 'assets/trash.svg';
+import styles from './ApiKeysTable.module.css';
+
+const columns = [
+  { name: 'apiKey', label: 'Key', style: { flex: 3 } },
+  { name: 'created', label: 'Created', style: { flex: 1 } },
+  { name: 'action', label: ' ', style: { flex: 1 } },
+];
+
+export default function ApiKeysTable({ data = [], onSave }) {
+  const [apiKeyId, setApiKeyId] = useState(null);
+
+  const handleSave = () => {
+    setApiKeyId(null);
+    onSave();
+  };
+
+  const handleClose = () => {
+    setApiKeyId(null);
+  };
+
+  const handleDelete = id => {
+    setApiKeyId(id);
+  };
+
+  return (
+    <>
+      <Table className={styles.table} columns={columns} rows={data}>
+        <TableHeader>
+          {(column, index) => {
+            return (
+              <TableColumn key={index} className={styles.header} style={{ ...column.style }}>
+                {column.label}
+              </TableColumn>
+            );
+          }}
+        </TableHeader>
+        <TableBody>
+          {(row, keys, rowIndex) => {
+            row.apiKey = <PasswordField className={styles.input} value={row.key} readOnly={true} />;
+
+            row.created = formatDistance(new Date(row.createdAt), new Date(), {
+              addSuffix: true,
+            });
+
+            row.action = (
+              <div className={styles.actions}>
+                <a target="_blank">
+                  <Button onClick={() => handleDelete(row.id)}>
+                    <Icon>
+                      <Trash />
+                    </Icon>
+                    <Text>Delete</Text>
+                  </Button>
+                </a>
+              </div>
+            );
+
+            return (
+              <TableRow key={rowIndex} data={row} keys={keys}>
+                {(data, key, colIndex) => {
+                  return (
+                    <TableCell
+                      key={colIndex}
+                      className={styles.cell}
+                      style={{ ...columns[colIndex]?.style }}
+                    >
+                      {data[key]}
+                    </TableCell>
+                  );
+                }}
+              </TableRow>
+            );
+          }}
+        </TableBody>
+      </Table>
+      {apiKeyId && (
+        <Modal title="Delete API key" onClose={handleClose}>
+          {close => <ApiKeyDeleteForm apiKeyId={apiKeyId} onSave={handleSave} onClose={close} />}
+        </Modal>
+      )}
+    </>
+  );
+}

components/pages/settings/account/ApiKeysTable.module.css

@@ -0,0 +1,31 @@
+.table th,
+.table td {
+  flex: 2;
+}
+
+.cell {
+  display: flex;
+  align-items: center;
+}
+
+.header:first-child,
+.cell:first-child {
+  min-width: 320px;
+}
+
+.input {
+  flex: 2;
+}
+
+.cell:last-child {
+  justify-content: flex-end;
+}
+
+.actions {
+  display: flex;
+  gap: 12px;
+}
+
+.empty {
+  min-height: 300px;
+}

components/pages/settings/account/PasswordEditForm.js

@@ -0,0 +1,67 @@
+import { useRef } from 'react';
+import { Form, FormRow, FormInput, FormButtons, PasswordField, Button } from 'react-basics';
+import useApi from 'hooks/useApi';
+import useUser from 'hooks/useUser';
+
+export default function PasswordEditForm({ onSave, onClose }) {
+  const { post, useMutation } = useApi();
+  const { user } = useUser();
+  const { mutate, error, isLoading } = useMutation(data =>
+    post(`/accounts/${user.id}/change-password`, data),
+  );
+  const ref = useRef(null);
+
+  const handleSubmit = async data => {
+    mutate(data, {
+      onSuccess: async () => {
+        onSave();
+      },
+    });
+  };
+
+  const samePassword = value => {
+    if (value !== ref?.current?.getValues('newPassword')) {
+      return "Passwords don't match";
+    }
+    return true;
+  };
+
+  return (
+    <Form ref={ref} onSubmit={handleSubmit} error={error}>
+      <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>
+      </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
+        </Button>
+        <Button onClick={onClose}>Cancel</Button>
+      </FormButtons>
+    </Form>
+  );
+}

components/pages/settings/account/PasswordResetForm.js

@@ -0,0 +1,50 @@
+import { useRef } from 'react';
+import { Form, FormRow, FormInput, FormButtons, PasswordField, SubmitButton } from 'react-basics';
+import useApi from 'hooks/useApi';
+
+export default function PasswordResetForm({ token, onSave }) {
+  const { post, useMutation } = useApi();
+  const { mutate, error } = useMutation(data =>
+    post('/accounts/reset-password', { ...data, token }),
+  );
+  const ref = useRef(null);
+
+  const handleSubmit = async data => {
+    mutate(data, {
+      onSuccess: async () => {
+        onSave();
+      },
+    });
+  };
+
+  const samePassword = value => {
+    if (value !== ref?.current?.getValues('newPassword')) {
+      return "Passwords don't match";
+    }
+    return true;
+  };
+
+  return (
+    <>
+      <Form ref={ref} onSubmit={handleSubmit} error={error}>
+        <h2>Reset your password</h2>
+        <FormRow label="New password">
+          <FormInput name="newPassword" rules={{ required: 'Required' }}>
+            <PasswordField autoComplete="off" />
+          </FormInput>
+        </FormRow>
+        <FormRow label="Confirm password">
+          <FormInput
+            name="confirmPassword"
+            rules={{ required: 'Required', validate: samePassword }}
+          >
+            <PasswordField autoComplete="off" />
+          </FormInput>
+        </FormRow>
+        <FormButtons align="center">
+          <SubmitButton variant="primary">Update password</SubmitButton>
+        </FormButtons>
+      </Form>
+    </>
+  );
+}

components/pages/settings/profile/ProfileSettings.js

@@ -0,0 +1,52 @@
+import Page from 'components/layout/Page';
+import PageHeader from 'components/layout/PageHeader';
+import ProfileDetails from 'components/settings/ProfileDetails';
+import { useState } from 'react';
+import { Breadcrumbs, Icon, Item, Tabs, useToast, Modal, Button } from 'react-basics';
+import UserPasswordForm from 'components/pages/settings/users/UserPasswordForm';
+import Pen from 'assets/pen.svg';
+
+export default function ProfileSettings() {
+  const [edit, setEdit] = useState(false);
+  const [tab, setTab] = useState('general');
+  const { toast, showToast } = useToast();
+
+  const handleSave = () => {
+    showToast({ message: 'Saved successfully.', variant: 'success' });
+    setEdit(false);
+  };
+
+  const handleAdd = () => {
+    setEdit(true);
+  };
+
+  const handleClose = () => {
+    setEdit(false);
+  };
+
+  return (
+    <Page>
+      {toast}
+      <PageHeader>
+        <Breadcrumbs>
+          <Item>Profile</Item>
+        </Breadcrumbs>
+        <Button onClick={handleAdd}>
+          <Icon>
+            <Pen />
+          </Icon>
+          Change Password
+        </Button>
+      </PageHeader>
+      <Tabs selectedKey={tab} onSelect={setTab} style={{ marginBottom: 30, fontSize: 14 }}>
+        <Item key="general">General</Item>
+      </Tabs>
+      {tab === 'general' && <ProfileDetails />}
+      {edit && (
+        <Modal title="Add website" onClose={handleClose}>
+          {close => <UserPasswordForm onSave={handleSave} onClose={close} />}
+        </Modal>
+      )}
+    </Page>
+  );
+}

components/pages/settings/teams/TeamAddForm.js

@@ -0,0 +1,35 @@
+import { useRef } from 'react';
+import { Form, FormRow, FormInput, FormButtons, TextField, Button } from 'react-basics';
+import useApi from 'hooks/useApi';
+
+export default function TeamAddForm({ onSave, onClose }) {
+  const { post, useMutation } = useApi();
+  const { mutate, error, isLoading } = useMutation(data => post('/teams', data));
+  const ref = useRef(null);
+
+  const handleSubmit = async data => {
+    mutate(data, {
+      onSuccess: async () => {
+        onSave();
+      },
+    });
+  };
+
+  return (
+    <Form ref={ref} onSubmit={handleSubmit} error={error}>
+      <FormRow label="Name">
+        <FormInput name="name" rules={{ required: 'Required' }}>
+          <TextField autoComplete="off" />
+        </FormInput>
+      </FormRow>
+      <FormButtons flex>
+        <Button type="submit" variant="primary" disabled={isLoading}>
+          Save
+        </Button>
+        <Button disabled={isLoading} onClick={onClose}>
+          Cancel
+        </Button>
+      </FormButtons>
+    </Form>
+  );
+}

components/pages/settings/teams/TeamDetails.js

@@ -0,0 +1,56 @@
+import { useEffect, useState } from 'react';
+import { Breadcrumbs, Item, Tabs, useToast } from 'react-basics';
+import useApi from 'hooks/useApi';
+import Link from 'next/link';
+import Page from 'components/layout/Page';
+import TeamEditForm from 'components/pages/settings/teams/TeamEditForm';
+import PageHeader from 'components/layout/PageHeader';
+import TeamMembers from 'components/pages/settings/teams/TeamMembers';
+
+export default function TeamDetails({ teamId }) {
+  const [values, setValues] = useState(null);
+  const [tab, setTab] = useState('details');
+  const { get, useQuery } = useApi();
+  const { toast, showToast } = useToast();
+  const { data, isLoading } = useQuery(
+    ['team', teamId],
+    () => {
+      if (teamId) {
+        return get(`/teams/${teamId}`);
+      }
+    },
+    { cacheTime: 0 },
+  );
+
+  const handleSave = data => {
+    showToast({ message: 'Saved successfully.', variant: 'success' });
+    setValues(state => ({ ...state, ...data }));
+  };
+
+  useEffect(() => {
+    if (data) {
+      setValues(data);
+    }
+  }, [data]);
+
+  return (
+    <Page loading={isLoading || !values}>
+      {toast}
+      <PageHeader>
+        <Breadcrumbs>
+          <Item>
+            <Link href="/settings/teams">Teams</Link>
+          </Item>
+          <Item>{values?.name}</Item>
+        </Breadcrumbs>
+      </PageHeader>
+      <Tabs selectedKey={tab} onSelect={setTab} style={{ marginBottom: 30, fontSize: 14 }}>
+        <Item key="details">Details</Item>
+        <Item key="members">Members</Item>
+        <Item key="websites">Websites</Item>
+      </Tabs>
+      {tab === 'details' && <TeamEditForm teamId={teamId} data={values} onSave={handleSave} />}
+      {tab === 'members' && <TeamMembers teamId={teamId} />}
+    </Page>
+  );
+}

components/pages/settings/teams/TeamEditForm.js

@@ -0,0 +1,62 @@
+import {
+  SubmitButton,
+  Form,
+  FormInput,
+  FormRow,
+  FormButtons,
+  TextField,
+  Button,
+  Flexbox,
+} from 'react-basics';
+import { getRandomChars } from 'next-basics';
+import { useRef, useState } from 'react';
+import useApi from 'hooks/useApi';
+
+const generateId = () => getRandomChars(16);
+
+export default function TeamEditForm({ teamId, data, onSave }) {
+  const { post, useMutation } = useApi();
+  const { mutate, error } = useMutation(data => post(`/teams/${teamId}`, data));
+  const ref = useRef(null);
+  const [accessCode, setAccessCode] = useState(data.accessCode);
+
+  const handleSubmit = async data => {
+    mutate(data, {
+      onSuccess: async () => {
+        ref.current.reset(data);
+        onSave(data);
+      },
+    });
+  };
+
+  const handleRegenerate = () => {
+    const code = generateId();
+    ref.current.setValue('accessCode', code, {
+      shouldValidate: true,
+      shouldDirty: true,
+    });
+    setAccessCode(code);
+  };
+
+  return (
+    <Form ref={ref} onSubmit={handleSubmit} error={error} values={data}>
+      <FormRow label="Team ID">
+        <TextField value={teamId} readOnly allowCopy />
+      </FormRow>
+      <FormRow label="Name">
+        <FormInput name="name" rules={{ required: 'Required' }}>
+          <TextField />
+        </FormInput>
+      </FormRow>
+      <FormRow label="Access code">
+        <Flexbox gap={10}>
+          <TextField value={accessCode} readOnly allowCopy />
+          <Button onClick={handleRegenerate}>Regenerate</Button>
+        </Flexbox>
+      </FormRow>
+      <FormButtons>
+        <SubmitButton variant="primary">Save</SubmitButton>
+      </FormButtons>
+    </Form>
+  );
+}

components/pages/settings/teams/TeamMembers.js

@@ -0,0 +1,16 @@
+import { Loading } from 'react-basics';
+import useApi from 'hooks/useApi';
+import TeamMembersTable from 'components/pages/settings/teams/TeamMembersTable';
+
+export default function TeamMembers({ teamId }) {
+  const { get, useQuery } = useApi();
+  const { data, isLoading } = useQuery(['team-members', teamId], () =>
+    get(`/teams/${teamId}/users`),
+  );
+
+  if (isLoading) {
+    return <Loading icon="dots" position="block" />;
+  }
+
+  return <TeamMembersTable data={data} />;
+}

components/pages/settings/teams/TeamMembersTable.js

@@ -0,0 +1,61 @@
+import {
+  Table,
+  TableHeader,
+  TableBody,
+  TableRow,
+  TableCell,
+  TableColumn,
+  Button,
+  Icon,
+} from 'react-basics';
+import styles from './TeamsTable.module.css';
+
+const columns = [
+  { name: 'username', label: 'Username', style: { flex: 4 } },
+  { name: 'role', label: 'Role' },
+  { name: 'action', label: '' },
+];
+
+export default function TeamMembersTable({ data = [] }) {
+  return (
+    <Table className={styles.table} columns={columns} rows={data}>
+      <TableHeader>
+        {(column, index) => {
+          return (
+            <TableColumn key={index} style={{ ...column.style }}>
+              {column.label}
+            </TableColumn>
+          );
+        }}
+      </TableHeader>
+      <TableBody>
+        {(row, keys, rowIndex) => {
+          row.action = (
+            <div className={styles.actions}>
+              <Button>
+                <Icon icon="cross" />
+                Remove
+              </Button>
+            </div>
+          );
+
+          return (
+            <TableRow key={rowIndex} data={row} keys={keys}>
+              {(data, key, colIndex) => {
+                return (
+                  <TableCell
+                    key={colIndex}
+                    className={styles.cell}
+                    style={{ ...columns[colIndex]?.style }}
+                  >
+                    {data[key] ?? data?.user?.[key]}
+                  </TableCell>
+                );
+              }}
+            </TableRow>
+          );
+        }}
+      </TableBody>
+    </Table>
+  );
+}

components/pages/settings/teams/TeamsList.js

@@ -0,0 +1,55 @@
+import { useState } from 'react';
+import { Button, Icon, Modal, useToast } from 'react-basics';
+import useApi from 'hooks/useApi';
+import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
+import TeamAddForm from 'components/pages/settings/teams/TeamAddForm';
+import PageHeader from 'components/layout/PageHeader';
+import TeamsTable from 'components/pages/settings/teams/TeamsTable';
+import Page from 'components/layout/Page';
+
+export default function TeamsList() {
+  const [edit, setEdit] = useState(false);
+  const [update, setUpdate] = useState(0);
+  const { get, useQuery } = useApi();
+  const { data, isLoading, error } = useQuery(['teams', update], () => get(`/teams`));
+  const hasData = data && data.length !== 0;
+  const { toast, showToast } = useToast();
+
+  const handleAdd = () => {
+    setEdit(true);
+  };
+
+  const handleSave = () => {
+    setEdit(false);
+    setUpdate(state => state + 1);
+    showToast({ message: 'Team saved.', variant: 'success' });
+  };
+
+  const handleClose = () => {
+    setEdit(false);
+  };
+
+  return (
+    <Page loading={isLoading} error={error}>
+      {toast}
+      <PageHeader title="Teams">
+        <Button onClick={handleAdd}>
+          <Icon icon="plus" /> Create team
+        </Button>
+      </PageHeader>
+      {hasData && <TeamsTable data={data} />}
+      {!hasData && (
+        <EmptyPlaceholder message="You don't have any teams configured.">
+          <Button variant="primary" onClick={handleAdd}>
+            <Icon icon="plus" /> Create team
+          </Button>
+        </EmptyPlaceholder>
+      )}
+      {edit && (
+        <Modal title="Create team" onClose={handleClose}>
+          {close => <TeamAddForm onSave={handleSave} onClose={close} />}
+        </Modal>
+      )}
+    </Page>
+  );
+}

components/pages/settings/teams/TeamsTable.js

@@ -0,0 +1,67 @@
+import Link from 'next/link';
+import {
+  Table,
+  TableHeader,
+  TableBody,
+  TableRow,
+  TableCell,
+  TableColumn,
+  Button,
+  Icon,
+} from 'react-basics';
+import styles from './TeamsTable.module.css';
+
+const columns = [
+  { name: 'name', label: 'Name', style: { flex: 2 } },
+  { name: 'action', label: ' ' },
+];
+
+export default function TeamsTable({ data = [] }) {
+  return (
+    <Table className={styles.table} columns={columns} rows={data}>
+      <TableHeader>
+        {(column, index) => {
+          return (
+            <TableColumn key={index} style={{ ...column.style }}>
+              {column.label}
+            </TableColumn>
+          );
+        }}
+      </TableHeader>
+      <TableBody>
+        {(row, keys, rowIndex) => {
+          const { id } = row;
+
+          row.action = (
+            <div className={styles.actions}>
+              <Link href={`/settings/teams/${id}`}>
+                <a>
+                  <Button>
+                    <Icon icon="arrow-right" />
+                    Settings
+                  </Button>
+                </a>
+              </Link>
+            </div>
+          );
+
+          return (
+            <TableRow key={rowIndex} data={row} keys={keys}>
+              {(data, key, colIndex) => {
+                return (
+                  <TableCell
+                    key={colIndex}
+                    className={styles.cell}
+                    style={{ ...columns[colIndex]?.style }}
+                  >
+                    {data[key]}
+                  </TableCell>
+                );
+              }}
+            </TableRow>
+          );
+        }}
+      </TableBody>
+    </Table>
+  );
+}

components/pages/settings/teams/TeamsTable.module.css

@@ -0,0 +1,18 @@
+.table th,
+.table td {
+  flex: 2;
+}
+
+.cell {
+  display: flex;
+  align-items: center;
+}
+
+.cell:last-child {
+  justify-content: flex-end;
+}
+
+.actions {
+  display: flex;
+  gap: 12px;
+}

components/pages/settings/users/UserDelete.js

@@ -0,0 +1,30 @@
+import UserDeleteForm from 'components/pages/settings/users/UserDeleteForm';
+import { useRouter } from 'next/router';
+import { useState } from 'react';
+import { Button, Form, FormRow, Modal } from 'react-basics';
+
+export default function UserDelete({ userId, onSave }) {
+  const [modal, setModal] = useState(null);
+  const router = useRouter();
+
+  const handleDelete = async () => {
+    onSave();
+    await router.push('/users');
+  };
+
+  const handleClose = () => setModal(null);
+
+  return (
+    <Form>
+      <FormRow label="Delete user">
+        <p>All user data will be deleted.</p>
+        <Button onClick={() => setModal('delete')}>Delete</Button>
+      </FormRow>
+      {modal === 'delete' && (
+        <Modal title="Delete user" onClose={handleClose}>
+          {close => <UserDeleteForm userId={userId} onSave={handleDelete} onClose={close} />}
+        </Modal>
+      )}
+    </Form>
+  );
+}

components/pages/settings/users/UserDeleteForm.js

@@ -0,0 +1,47 @@
+import { useMutation } from '@tanstack/react-query';
+import useApi from 'hooks/useApi';
+import {
+  Button,
+  Form,
+  FormRow,
+  FormButtons,
+  FormInput,
+  SubmitButton,
+  TextField,
+} from 'react-basics';
+
+const CONFIRM_VALUE = 'DELETE';
+
+export default function UserDeleteForm({ userId, onSave, onClose }) {
+  const { del } = useApi();
+  const { mutate, error, isLoading } = useMutation(data => del(`/users/${userId}`, data));
+
+  const handleSubmit = async data => {
+    mutate(data, {
+      onSuccess: async () => {
+        onSave();
+      },
+    });
+  };
+
+  return (
+    <Form onSubmit={handleSubmit} error={error}>
+      <p>
+        To delete this user, type <b>{CONFIRM_VALUE}</b> in the box below to confirm.
+      </p>
+      <FormRow label="Confirm">
+        <FormInput name="confirmation" rules={{ validate: value => value === CONFIRM_VALUE }}>
+          <TextField autoComplete="off" />
+        </FormInput>
+      </FormRow>
+      <FormButtons flex>
+        <SubmitButton variant="primary" disabled={isLoading}>
+          Save
+        </SubmitButton>
+        <Button disabled={isLoading} onClick={onClose}>
+          Cancel
+        </Button>
+      </FormButtons>
+    </Form>
+  );
+}

components/pages/settings/users/UserEditForm.js

@@ -0,0 +1,69 @@
+import {
+  Dropdown,
+  Item,
+  Form,
+  FormRow,
+  FormButtons,
+  FormInput,
+  TextField,
+  SubmitButton,
+} from 'react-basics';
+import { useRef } from 'react';
+import { useMutation } from '@tanstack/react-query';
+import useApi from 'hooks/useApi';
+import { ROLES } from 'lib/constants';
+import styles from './UserForm.module.css';
+
+const items = [
+  {
+    value: ROLES.user,
+    label: 'User',
+  },
+  {
+    value: ROLES.admin,
+    label: 'Admin',
+  },
+];
+
+export default function UserEditForm({ data, onSave }) {
+  const { id } = data;
+  const { post } = useApi();
+  const { mutate, error } = useMutation(({ username }) => post(`/user/${id}`, { username }));
+  const ref = useRef(null);
+
+  const handleSubmit = async data => {
+    mutate(data, {
+      onSuccess: async () => {
+        onSave(data);
+        ref.current.reset(data);
+      },
+    });
+  };
+
+  return (
+    <Form
+      key={id}
+      className={styles.form}
+      ref={ref}
+      onSubmit={handleSubmit}
+      error={error}
+      values={data}
+    >
+      <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>
+    </Form>
+  );
+}

components/pages/settings/users/UserForm.module.css

@@ -0,0 +1,6 @@
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+  width: 300px;
+}

components/pages/settings/users/UserPasswordForm.js

@@ -0,0 +1,78 @@
+import { useRef } from 'react';
+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';
+
+export default function UserPasswordForm({ onSave, onClose, userId }) {
+  const user = useUser();
+
+  const isCurrentUser = !userId || user?.id === userId;
+  const url = isCurrentUser ? `/users/${user?.id}/password` : `/users/${user?.id}`;
+  const { post, useMutation } = useApi();
+  const { mutate, error, isLoading } = useMutation(data => post(url, data));
+  const ref = useRef(null);
+
+  const handleSubmit = async data => {
+    const payload = isCurrentUser
+      ? data
+      : {
+          password: data.newPassword,
+        };
+
+    mutate(payload, {
+      onSuccess: async () => {
+        onSave();
+        ref.current.reset();
+      },
+    });
+  };
+
+  const samePassword = value => {
+    if (value !== ref?.current?.getValues('newPassword')) {
+      return "Passwords don't match";
+    }
+    return true;
+  };
+
+  return (
+    <Form ref={ref} className={styles.form} onSubmit={handleSubmit} error={error}>
+      {isCurrentUser && (
+        <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>
+      </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
+        </Button>
+        <Button onClick={onClose}>Close</Button>
+      </FormButtons>
+    </Form>
+  );
+}

components/pages/settings/users/UserPasswordForm.module.css

@@ -0,0 +1,6 @@
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+  width: 300px;
+}

components/pages/settings/users/UserSettings.js

@@ -0,0 +1,93 @@
+import { useQuery } from '@tanstack/react-query';
+import UserDelete from 'components/pages/settings/users/UserDelete';
+import UserEditForm from 'components/pages/settings/users/UserEditForm';
+import UserPasswordForm from 'components/pages/settings/users/UserPasswordForm';
+import Page from 'components/layout/Page';
+import PageHeader from 'components/layout/PageHeader';
+import useApi from 'hooks/useApi';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import { useEffect, useState } from 'react';
+import { Breadcrumbs, Item, Icon, Tabs, useToast, Modal, Button } from 'react-basics';
+import Pen from 'assets/pen.svg';
+
+export default function UserSettings({ userId }) {
+  const [edit, setEdit] = useState(false);
+  const [values, setValues] = useState(null);
+  const [tab, setTab] = useState('general');
+  const { get } = useApi();
+  const { toast, showToast } = useToast();
+  const router = useRouter();
+  const { data, isLoading } = useQuery(
+    ['user', userId],
+    () => {
+      if (userId) {
+        return get(`/users/${userId}`);
+      }
+    },
+    { cacheTime: 0 },
+  );
+
+  const handleSave = data => {
+    showToast({ message: 'Saved successfully.', variant: 'success' });
+    if (data) {
+      setValues(state => ({ ...state, ...data }));
+    }
+
+    if (edit) {
+      setEdit(false);
+    }
+  };
+
+  const handleAdd = () => {
+    setEdit(true);
+  };
+
+  const handleClose = () => {
+    setEdit(false);
+  };
+
+  const handleDelete = async () => {
+    showToast({ message: 'Deleted successfully.', variant: 'danger' });
+    await router.push('/users');
+  };
+
+  useEffect(() => {
+    if (data) {
+      setValues(data);
+    }
+  }, [data]);
+
+  return (
+    <Page loading={isLoading || !values}>
+      {toast}
+      <PageHeader>
+        <Breadcrumbs>
+          <Item>
+            <Link href="/users">Users</Link>
+          </Item>
+          <Item>{values?.username}</Item>
+        </Breadcrumbs>
+        <Button onClick={handleAdd}>
+          <Icon>
+            <Pen />
+          </Icon>
+          Change Password
+        </Button>
+      </PageHeader>
+      <Tabs selectedKey={tab} onSelect={setTab} style={{ marginBottom: 30, fontSize: 14 }}>
+        <Item key="general">General</Item>
+        <Item key="delete">Danger Zone</Item>
+      </Tabs>
+      {tab === 'general' && <UserEditForm userId={userId} data={values} onSave={handleSave} />}
+      {tab === 'delete' && <UserDelete userId={userId} onSave={handleDelete} />}
+      {edit && (
+        <Modal title="Add website" onClose={handleClose}>
+          {close => (
+            <UserPasswordForm userId={userId} data={values} onSave={handleSave} onClose={close} />
+          )}
+        </Modal>
+      )}
+    </Page>
+  );
+}

components/pages/settings/users/UsersList.js

@@ -0,0 +1,44 @@
+import Page from 'components/layout/Page';
+import PageHeader from 'components/layout/PageHeader';
+import UsersTable from 'components/pages/settings/users/UsersTable';
+import { useState } from 'react';
+import { Button, Icon, useToast } from 'react-basics';
+import { useMutation } from '@tanstack/react-query';
+import useApi from 'hooks/useApi';
+
+export default function UsersList() {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState();
+  const { toast, showToast } = useToast();
+  const { post } = useApi();
+  const { mutate, isLoading } = useMutation(data => post('/api-key', data));
+
+  const handleSave = () => {
+    mutate(
+      {},
+      {
+        onSuccess: async () => {
+          showToast({ message: 'API key saved.', variant: 'success' });
+        },
+      },
+    );
+  };
+
+  return (
+    <Page loading={loading || isLoading} error={error}>
+      {toast}
+      <PageHeader title="Users">
+        <Button onClick={handleSave}>
+          <Icon icon="plus" /> Create user
+        </Button>
+      </PageHeader>
+      <UsersTable
+        onLoading={({ isLoading, error }) => {
+          setLoading(isLoading);
+          setError(error);
+        }}
+        onAddKeyClick={handleSave}
+      />
+    </Page>
+  );
+}

components/pages/settings/users/UsersTable.js

@@ -0,0 +1,99 @@
+import { useQuery } from '@tanstack/react-query';
+import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
+import { formatDistance } from 'date-fns';
+import useApi from 'hooks/useApi';
+import Link from 'next/link';
+import { useEffect, useState } from 'react';
+import {
+  Button,
+  Icon,
+  Table,
+  TableBody,
+  TableCell,
+  TableColumn,
+  TableHeader,
+  TableRow,
+} from 'react-basics';
+import styles from './UsersTable.module.css';
+
+const defaultColumns = [
+  { name: 'username', label: 'Username', style: { flex: 2 } },
+  { name: 'role', label: 'Role', style: { flex: 2 } },
+  { name: 'created', label: 'Created' },
+  { name: 'action', label: ' ' },
+];
+
+export default function UsersTable({ columns = defaultColumns, onLoading, onAddKeyClick }) {
+  const [values, setValues] = useState(null);
+  const { get } = useApi();
+  const { data, isLoading, error } = useQuery(['user'], () => get(`/users`));
+  const hasData = data && data.length !== 0;
+
+  useEffect(() => {
+    if (data) {
+      setValues(data);
+      onLoading({ data, isLoading, error });
+    }
+  }, [onLoading, data, isLoading, error]);
+
+  return (
+    <>
+      {hasData && (
+        <Table className={styles.table} columns={columns} rows={values}>
+          <TableHeader>
+            {(column, index) => {
+              return (
+                <TableColumn key={index} className={styles.header} style={{ ...column.style }}>
+                  {column.label}
+                </TableColumn>
+              );
+            }}
+          </TableHeader>
+          <TableBody>
+            {(row, keys, rowIndex) => {
+              row.created = formatDistance(new Date(row.createdAt), new Date(), {
+                addSuffix: true,
+              });
+
+              row.action = (
+                <div className={styles.actions}>
+                  <Link href={`/users/${row.id}`} shallow>
+                    <a>
+                      <Button>
+                        <Icon icon="arrow-right" />
+                        Settings
+                      </Button>
+                    </a>
+                  </Link>
+                </div>
+              );
+
+              return (
+                <TableRow key={rowIndex} data={row} keys={keys}>
+                  {(data, key, colIndex) => {
+                    return (
+                      <TableCell
+                        key={colIndex}
+                        className={styles.cell}
+                        style={{ ...columns[colIndex]?.style }}
+                      >
+                        {data[key]}
+                      </TableCell>
+                    );
+                  }}
+                </TableRow>
+              );
+            }}
+          </TableBody>
+        </Table>
+      )}
+      {!hasData && (
+        <EmptyPlaceholder className={styles.empty} msg="You don't have any Users.">
+          <Button variant="primary" onClick={onAddKeyClick}>
+            <Icon icon="plus" /> Create User
+          </Button>
+        </EmptyPlaceholder>
+      )}
+    </>
+  );
+}

components/pages/settings/users/UsersTable.module.css

@@ -0,0 +1,26 @@
+.table th,
+.table td {
+  flex: 2;
+}
+
+.cell {
+  display: flex;
+  align-items: center;
+}
+
+.input {
+  flex: 2;
+}
+
+.cell:last-child {
+  justify-content: flex-end;
+}
+
+.actions {
+  display: flex;
+  gap: 12px;
+}
+
+.empty {
+  min-height: 300px;
+}

components/pages/settings/websites/ShareUrl.js

@@ -0,0 +1,87 @@
+import {
+  Form,
+  FormRow,
+  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 ShareUrl({ websiteId, data, onSave }) {
+  const { name, shareId } = data;
+  const [id, setId] = useState(shareId);
+  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)}`,
+    [id, name],
+  );
+
+  const handleSubmit = async data => {
+    mutate(data, {
+      onSuccess: async () => {
+        onSave(data);
+        ref.current.reset(data);
+      },
+    });
+  };
+
+  const handleGenerate = () => {
+    const id = generateId();
+    ref.current.setValue('shareId', id, {
+      shouldValidate: true,
+      shouldDirty: true,
+    });
+    setId(id);
+  };
+
+  const handleCheck = checked => {
+    const data = { shareId: checked ? generateId() : null };
+    mutate(data, {
+      onSuccess: async () => {
+        onSave(data);
+      },
+    });
+    setId(data.shareId);
+  };
+
+  useEffect(() => {
+    if (id && id !== shareId) {
+      ref.current.setValue('shareId', id);
+    }
+  }, [id, shareId]);
+
+  return (
+    <Form key={websiteId} ref={ref} onSubmit={handleSubmit} error={error} values={data}>
+      <FormRow>
+        <Toggle checked={Boolean(id)} onChecked={handleCheck}>
+          Enable share URL
+        </Toggle>
+      </FormRow>
+      {id && (
+        <>
+          <FormRow>
+            <p>Your website stats are publically available at the following URL:</p>
+            <Flexbox gap={10}>
+              <TextField value={url} readOnly allowCopy />
+              <Button onClick={handleGenerate}>Regenerate URL</Button>
+            </Flexbox>
+          </FormRow>
+          <FormButtons>
+            <SubmitButton variant="primary">Save</SubmitButton>
+          </FormButtons>
+        </>
+      )}
+    </Form>
+  );
+}

components/pages/settings/websites/TrackingCode.js

@@ -0,0 +1,16 @@
+import { TextArea } from 'react-basics';
+import { TRACKER_SCRIPT_URL } from 'lib/constants';
+
+export default function TrackingCode({ websiteId }) {
+  const code = `<script async src="${TRACKER_SCRIPT_URL}" data-website-id="${websiteId}"></script>`;
+
+  return (
+    <>
+      <p>
+        To track stats for this website, place the following code in the <code>&lt;head&gt;</code>{' '}
+        section of your HTML.
+      </p>
+      <TextArea rows={4} value={code} readOnly allowCopy />
+    </>
+  );
+}

components/pages/settings/websites/WebsiteAddForm.js

@@ -0,0 +1,55 @@
+import { useRef } from 'react';
+import {
+  Form,
+  FormRow,
+  FormInput,
+  FormButtons,
+  TextField,
+  Button,
+  SubmitButton,
+} from 'react-basics';
+import useApi from 'hooks/useApi';
+import { DOMAIN_REGEX } from 'lib/constants';
+
+export default function WebsiteAddForm({ onSave, onClose }) {
+  const { post, useMutation } = useApi();
+  const { mutate, error, isLoading } = useMutation(data => post('/websites', data));
+  const ref = useRef(null);
+
+  const handleSubmit = async data => {
+    mutate(data, {
+      onSuccess: async () => {
+        onSave();
+      },
+    });
+  };
+
+  return (
+    <Form ref={ref} onSubmit={handleSubmit} error={error}>
+      <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
+        </SubmitButton>
+        <Button disabled={isLoading} onClick={onClose}>
+          Cancel
+        </Button>
+      </FormButtons>
+    </Form>
+  );
+}

components/pages/settings/websites/WebsiteDeleteForm.js

@@ -0,0 +1,46 @@
+import useApi from 'hooks/useApi';
+import {
+  Button,
+  Form,
+  FormRow,
+  FormButtons,
+  FormInput,
+  SubmitButton,
+  TextField,
+} from 'react-basics';
+
+const CONFIRM_VALUE = 'DELETE';
+
+export default function WebsiteDeleteForm({ websiteId, onSave, onClose }) {
+  const { del, useMutation } = useApi();
+  const { mutate, error, isLoading } = useMutation(data => del(`/websites/${websiteId}`, data));
+
+  const handleSubmit = async data => {
+    mutate(data, {
+      onSuccess: async () => {
+        onSave();
+      },
+    });
+  };
+
+  return (
+    <Form onSubmit={handleSubmit} error={error}>
+      <div>
+        To delete this website, type <b>{CONFIRM_VALUE}</b> in the box below to confirm.
+      </div>
+      <FormRow label="Confirm">
+        <FormInput name="confirmation" rules={{ validate: value => value === CONFIRM_VALUE }}>
+          <TextField autoComplete="off" />
+        </FormInput>
+      </FormRow>
+      <FormButtons flex>
+        <SubmitButton variant="primary" disabled={isLoading}>
+          Save
+        </SubmitButton>
+        <Button disabled={isLoading} onClick={onClose}>
+          Cancel
+        </Button>
+      </FormButtons>
+    </Form>
+  );
+}

components/pages/settings/websites/WebsiteDetails.js

@@ -0,0 +1,74 @@
+import { useEffect, useState } from 'react';
+import { Breadcrumbs, Item, Tabs, useToast, Button, Icon } from 'react-basics';
+import useApi from 'hooks/useApi';
+import Link from 'next/link';
+import Page from 'components/layout/Page';
+import WebsiteEditForm from 'components/pages/settings/websites/WebsiteEditForm';
+import WebsiteReset from 'components/pages/settings/websites/WebsiteReset';
+import PageHeader from 'components/layout/PageHeader';
+import TrackingCode from 'components/pages/settings/websites/TrackingCode';
+import ShareUrl from 'components/pages/settings/websites/ShareUrl';
+import ExternalLink from 'assets/external-link.svg';
+
+export default function WebsiteDetails({ websiteId }) {
+  const [values, setValues] = useState(null);
+  const [tab, setTab] = useState('details');
+  const { get, useQuery } = useApi();
+  const { toast, showToast } = useToast();
+  const { data, isLoading } = useQuery(
+    ['website', websiteId],
+    () => {
+      if (websiteId) {
+        return get(`/websites/${websiteId}`);
+      }
+    },
+    { cacheTime: 0 },
+  );
+
+  const handleSave = data => {
+    showToast({ message: 'Saved successfully.', variant: 'success' });
+    setValues(state => ({ ...state, ...data }));
+  };
+
+  useEffect(() => {
+    if (data) {
+      setValues(data);
+    }
+  }, [data]);
+
+  return (
+    <Page loading={isLoading || !values}>
+      {toast}
+      <PageHeader>
+        <Breadcrumbs>
+          <Item>
+            <Link href="/settings/websites">Websites</Link>
+          </Item>
+          <Item>{values?.name}</Item>
+        </Breadcrumbs>
+        <Link href={`/analytics/websites/${websiteId}`}>
+          <a target="_blank">
+            <Button variant="primary">
+              <Icon>
+                <ExternalLink />
+              </Icon>
+              View
+            </Button>
+          </a>
+        </Link>
+      </PageHeader>
+      <Tabs selectedKey={tab} onSelect={setTab} style={{ marginBottom: 30 }}>
+        <Item key="details">Details</Item>
+        <Item key="tracking">Tracking code</Item>
+        <Item key="share">Share URL</Item>
+        <Item key="actions">Actions</Item>
+      </Tabs>
+      {tab === 'details' && (
+        <WebsiteEditForm websiteId={websiteId} data={values} onSave={handleSave} />
+      )}
+      {tab === 'tracking' && <TrackingCode websiteId={websiteId} data={values} />}
+      {tab === 'share' && <ShareUrl websiteId={websiteId} data={values} onSave={handleSave} />}
+      {tab === 'actions' && <WebsiteReset websiteId={websiteId} onSave={handleSave} />}
+    </Page>
+  );
+}

components/pages/settings/websites/WebsiteEditForm.js

@@ -0,0 +1,49 @@
+import { SubmitButton, Form, FormInput, FormRow, FormButtons, TextField } from 'react-basics';
+import { useRef } from 'react';
+import useApi from 'hooks/useApi';
+import { DOMAIN_REGEX } from 'lib/constants';
+
+export default function WebsiteEditForm({ websiteId, data, onSave }) {
+  const { post, useMutation } = useApi();
+  const { mutate, error } = useMutation(data => post(`/websites/${websiteId}`, data));
+  const ref = useRef(null);
+
+  const handleSubmit = async data => {
+    mutate(data, {
+      onSuccess: async () => {
+        ref.current.reset(data);
+        onSave(data);
+      },
+    });
+  };
+
+  return (
+    <Form ref={ref} onSubmit={handleSubmit} error={error} values={data}>
+      <FormRow label="Website ID">
+        <TextField value={websiteId} readOnly allowCopy />
+      </FormRow>
+      <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>
+    </Form>
+  );
+}

components/pages/settings/websites/WebsiteReset.js

@@ -0,0 +1,49 @@
+import WebsiteDeleteForm from 'components/pages/settings/websites/WebsiteDeleteForm';
+import WebsiteResetForm from 'components/pages/settings/websites/WebsiteResetForm';
+import { useRouter } from 'next/router';
+import { useState } from 'react';
+import { Button, Form, FormRow, Modal } from 'react-basics';
+
+export default function WebsiteReset({ websiteId, onSave }) {
+  const [modal, setModal] = useState(null);
+  const router = useRouter();
+
+  const handleReset = async () => {
+    setModal(null);
+    onSave();
+  };
+
+  const handleDelete = async () => {
+    onSave();
+    await router.push('/websites');
+  };
+
+  const handleClose = () => setModal(null);
+
+  return (
+    <Form>
+      <FormRow label="Reset website">
+        <p>
+          All statistics for this website will be deleted, but your settings will remain intact.
+        </p>
+        <Button onClick={() => setModal('reset')}>Reset</Button>
+      </FormRow>
+      <FormRow label="Delete website">
+        <p>All website data will be deleted.</p>
+        <Button onClick={() => setModal('delete')}>Delete</Button>
+      </FormRow>
+      {modal === 'reset' && (
+        <Modal title="Reset website" onClose={handleClose}>
+          {close => <WebsiteResetForm websiteId={websiteId} onSave={handleReset} onClose={close} />}
+        </Modal>
+      )}
+      {modal === 'delete' && (
+        <Modal title="Delete website" onClose={handleClose}>
+          {close => (
+            <WebsiteDeleteForm websiteId={websiteId} onSave={handleDelete} onClose={close} />
+          )}
+        </Modal>
+      )}
+    </Form>
+  );
+}

components/pages/settings/websites/WebsiteResetForm.js

@@ -0,0 +1,48 @@
+import useApi from 'hooks/useApi';
+import {
+  Button,
+  Form,
+  FormRow,
+  FormButtons,
+  FormInput,
+  SubmitButton,
+  TextField,
+} from 'react-basics';
+
+const CONFIRM_VALUE = 'RESET';
+
+export default function WebsiteResetForm({ websiteId, onSave, onClose }) {
+  const { post, useMutation } = useApi();
+  const { mutate, error, isLoading } = useMutation(data =>
+    post(`/websites/${websiteId}/reset`, data),
+  );
+
+  const handleSubmit = async data => {
+    mutate(data, {
+      onSuccess: async () => {
+        onSave();
+      },
+    });
+  };
+
+  return (
+    <Form onSubmit={handleSubmit} error={error}>
+      <div>
+        To reset this website, type <b>{CONFIRM_VALUE}</b> in the box below to confirm.
+      </div>
+      <FormRow label="Confirmation">
+        <FormInput name="confirm" rules={{ validate: value => value === CONFIRM_VALUE }}>
+          <TextField autoComplete="off" />
+        </FormInput>
+      </FormRow>
+      <FormButtons flex>
+        <SubmitButton variant="primary" disabled={isLoading}>
+          Save
+        </SubmitButton>
+        <Button disabled={isLoading} onClick={onClose}>
+          Cancel
+        </Button>
+      </FormButtons>
+    </Form>
+  );
+}

components/pages/settings/websites/WebsitesList.js

@@ -0,0 +1,65 @@
+import { useState } from 'react';
+import { Button, Icon, Modal, useToast } from 'react-basics';
+import useApi from 'hooks/useApi';
+import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
+import WebsiteAddForm from 'components/pages/settings/websites/WebsiteAddForm';
+import PageHeader from 'components/layout/PageHeader';
+import WebsitesTable from 'components/pages/settings/websites/WebsitesTable';
+import Page from 'components/layout/Page';
+import useUser from 'hooks/useUser';
+
+export default function WebsitesList() {
+  const [edit, setEdit] = useState(false);
+  const { get, useQuery } = useApi();
+  const { user } = useUser();
+  const { data, isLoading, error, refetch } = useQuery(['websites', user.id], () =>
+    get(`/users/${user.id}/websites`),
+  );
+  const hasData = data && data.length !== 0;
+  const { toast, showToast } = useToast();
+
+  const columns = [
+    { name: 'name', label: 'Name', style: { flex: 2 } },
+    { name: 'domain', label: 'Domain' },
+    { name: 'action', label: ' ' },
+  ];
+
+  const handleAdd = () => {
+    setEdit(true);
+  };
+
+  const handleSave = async () => {
+    await refetch();
+    setEdit(false);
+    showToast({ message: 'Website saved.', variant: 'success' });
+  };
+
+  const handleClose = () => {
+    setEdit(false);
+  };
+
+  return (
+    <Page loading={isLoading} error={error}>
+      {toast}
+      <PageHeader title="Websites">
+        <Button onClick={handleAdd}>
+          <Icon icon="plus" /> Add website
+        </Button>
+      </PageHeader>
+
+      {hasData && <WebsitesTable columns={columns} rows={data} />}
+      {!hasData && (
+        <EmptyPlaceholder message="You don't have any websites configured.">
+          <Button variant="primary" onClick={handleAdd}>
+            <Icon icon="plus" /> Add website
+          </Button>
+        </EmptyPlaceholder>
+      )}
+      {edit && (
+        <Modal title="Add website" onClose={handleClose}>
+          {close => <WebsiteAddForm onSave={handleSave} onClose={close} />}
+        </Modal>
+      )}
+    </Page>
+  );
+}

components/pages/settings/websites/WebsitesTable.js

@@ -0,0 +1,73 @@
+import Link from 'next/link';
+import {
+  Table,
+  TableHeader,
+  TableBody,
+  TableRow,
+  TableCell,
+  TableColumn,
+  Button,
+  Icon,
+} from 'react-basics';
+import ExternalLink from 'assets/external-link.svg';
+import styles from './WebsitesTable.module.css';
+
+export default function WebsitesTable({ columns = [], rows = [] }) {
+  return (
+    <Table className={styles.table} columns={columns} rows={rows}>
+      <TableHeader>
+        {(column, index) => {
+          return (
+            <TableColumn key={index} style={{ ...column.style }}>
+              {column.label}
+            </TableColumn>
+          );
+        }}
+      </TableHeader>
+      <TableBody>
+        {(row, keys, rowIndex) => {
+          const { id } = row;
+
+          row.action = (
+            <div className={styles.actions}>
+              <Link href={`/settings/websites/${id}`}>
+                <a>
+                  <Button>
+                    <Icon icon="arrow-right" />
+                    Settings
+                  </Button>
+                </a>
+              </Link>
+              <Link href={`/analytics/websites/${id}`}>
+                <a target="_blank">
+                  <Button>
+                    <Icon>
+                      <ExternalLink />
+                    </Icon>
+                    View
+                  </Button>
+                </a>
+              </Link>
+            </div>
+          );
+
+          return (
+            <TableRow key={rowIndex} data={row} keys={keys}>
+              {(data, key, colIndex) => {
+                return (
+                  <TableCell
+                    key={colIndex}
+                    className={styles.cell}
+                    style={{ ...columns[colIndex]?.style }}
+                  >
+                    {data[key]}
+                  </TableCell>
+                );
+              }}
+            </TableRow>
+          );
+        }}
+      </TableBody>
+    </Table>
+  );
+}

components/pages/settings/websites/WebsitesTable.module.css

@@ -0,0 +1,18 @@
+.table th,
+.table td {
+  flex: 2;
+}
+
+.cell {
+  display: flex;
+  align-items: center;
+}
+
+.cell:last-child {
+  justify-content: flex-end;
+}
+
+.actions {
+  display: flex;
+  gap: 12px;
+}