Refactored settings components.

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