m/umami
1
0
Fork 0
mirror of https://github.com/kremalicious/umami.git synced 2024-06-23 01:36:23 +02:00
Code Issues Packages Projects Releases Wiki Activity

Refactored settings components.

Browse Source
This commit is contained in:
Mike Cao 2023-01-09 23:59:26 -08:00
parent d827b79c72
commit 7450b76e6d
91 changed files with 736 additions and 353 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
assets/lock.svg Normal file
View File

@ -0,0 +1 @@
<svg height="512" viewBox="0 0 24 24" width="512" xmlns="http://www.w3.org/2000/svg"><path d="M18.75 9H18V6c0-3.309-2.691-6-6-6S6 2.691 6 6v3h-.75A2.253 2.253 0 0 0 3 11.25v10.5C3 22.991 4.01 24 5.25 24h13.5c1.24 0 2.25-1.009 2.25-2.25v-10.5C21 10.009 19.99 9 18.75 9zM8 6c0-2.206 1.794-4 4-4s4 1.794 4 4v3H8zm5 10.722V19a1 1 0 1 1-2 0v-2.278c-.595-.347-1-.985-1-1.722 0-1.103.897-2 2-2s2 .897 2 2c0 .737-.405 1.375-1 1.722z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 433 B

2
assets/user.svg
View File

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1652 1652"><g data-name="Layer 2"><path d="M1587.07 504.47A828.56 828.56 0 1 0 1652 826a823.13 823.13 0 0 0-64.93-321.53ZM826 1577a747.29 747.29 0 0 1-464.48-161.26 39.94 39.94 0 0 0 2.8-11.35 458.82 458.82 0 0 1 34.29-135.74 464.15 464.15 0 0 1 854.78 0 458.82 458.82 0 0 1 34.29 135.74 39.94 39.94 0 0 0 2.8 11.35A747.29 747.29 0 0 1 826 1577ZM719.81 866.57A274 274 0 1 1 826 888a272.1 272.1 0 0 1-106.19-21.43Zm641.28 485.87c-36.11-201.1-182.78-363.82-374.86-423 114.28-58.37 192.53-177.22 192.53-314.35 0-194.83-157.94-352.76-352.76-352.76S473.24 420.29 473.24 615.12c0 137.13 78.25 256 192.53 314.35-192.08 59.15-338.75 221.87-374.86 423C157.46 1216.81 75 1030.86 75 826 75 411.9 411.9 75 826 75s751 336.9 751 751c0 204.86-82.46 390.81-215.91 526.44Z" data-name="Layer 1"/></g></svg>
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M437.02 74.98C388.668 26.63 324.379 0 256 0S123.332 26.629 74.98 74.98C26.63 123.332 0 187.621 0 256s26.629 132.668 74.98 181.02C123.332 485.37 187.621 512 256 512s132.668-26.629 181.02-74.98C485.37 388.668 512 324.379 512 256s-26.629-132.668-74.98-181.02zM111.105 429.297c8.454-72.735 70.989-128.89 144.895-128.89 38.96 0 75.598 15.179 103.156 42.734 23.281 23.285 37.965 53.687 41.742 86.152C361.641 462.172 311.094 482 256 482s-105.637-19.824-144.895-52.703zM256 269.507c-42.871 0-77.754-34.882-77.754-77.753C178.246 148.879 213.13 114 256 114s77.754 34.879 77.754 77.754c0 42.871-34.883 77.754-77.754 77.754zm170.719 134.427a175.9 175.9 0 0 0-46.352-82.004c-18.437-18.438-40.25-32.27-64.039-40.938 28.598-19.394 47.426-52.16 47.426-89.238C363.754 132.34 315.414 84 256 84s-107.754 48.34-107.754 107.754c0 37.098 18.844 69.875 47.465 89.266-21.887 7.976-42.14 20.308-59.566 36.542-25.235 23.5-42.758 53.465-50.883 86.348C50.852 364.242 30 312.512 30 256 30 131.383 131.383 30 256 30s226 101.383 226 226c0 56.523-20.86 108.266-55.281 147.934zm0 0"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 841 B

After

Width:  |  Height:  |  Size: 1.1 KiB

2
components/common/DateFilter.js
View File

@ -1,5 +1,5 @@
import Calendar from 'assets/calendar-alt.svg';
import DatePickerForm from 'components/forms/DatePickerForm';
import DatePickerForm from 'components/metrics/DatePickerForm';
import { endOfYear, isSameDay } from 'date-fns';
import useLocale from 'hooks/useLocale';
import { dateFormat } from 'lib/date';

2
components/common/EventDataButton.js
View File

@ -1,5 +1,5 @@
import List from 'assets/list-ul.svg';
import EventDataForm from 'components/forms/EventDataForm';
import EventDataForm from 'components/metrics/EventDataForm';
import PropTypes from 'prop-types';
import { useState } from 'react';
import { Button, Icon, Modal } from 'react-basics';

5
components/common/HamburgerButton.js
View File

@ -12,7 +12,10 @@ const menuItems = [
value: '/dashboard',
},
{ label: <FormattedMessage id="label.realtime" defaultMessage="Realtime" />, value: '/realtime' },
{ label: <FormattedMessage id="label.settings" defaultMessage="Settings" />, value: '/settings' },
{
label: <FormattedMessage id="label.settings" defaultMessage="SettingsLayout" />,
value: '/settings',
},
{
label: <FormattedMessage id="label.profile" defaultMessage="Profile" />,
value: '/settings/profile',

63
components/forms/Form.module.css
View File

@ -1,63 +0,0 @@
.form {
display: flex;
flex-direction: column;
gap: 30px;
width: 300px;
margin: 0 auto;
}
.header {
font-size: 24px;
font-weight: 700;
text-align: center;
margin: 30px auto;
}
.info {
text-align: center;
padding: 30px 0;
}
.footer {
display: flex;
flex-direction: column;
gap: 20px;
font-size: 14px;
text-align: center;
margin: 30px auto;
}
.footer a {
font-weight: 600;
}
.buttons {
justify-content: center;
}
.button {
flex: 1;
justify-content: center;
}
.error {
width: 600px;
margin: 0 auto 30px;
background: var(--base50);
padding: 16px;
color: var(--red400);
border: 1px solid var(--red400);
border-radius: 5px;
text-align: center;
}
.success {
width: 600px;
margin: 60px auto;
background: var(--base50);
padding: 16px;
color: var(--green400);
border: 1px solid var(--green400);
border-radius: 5px;
text-align: center;
}

23
components/forms/TrackingCodeForm.js
View File

@ -1,23 +0,0 @@
import useConfig from 'hooks/useConfig';
import { useRef } from 'react';
import { Form, FormRow, TextArea } from 'react-basics';
export default function TrackingCodeForm({ websiteId }) {
const ref = useRef(null);
const { trackerScriptName } = useConfig();
const code = `<script async defer src="${trackerScriptName}" data-website-id="${websiteId}"></script>`;
return (
<>
<Form ref={ref}>
<FormRow>
<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 />
</FormRow>
</Form>
</>
);
}

14
components/layout/Header.js
View File

@ -10,7 +10,6 @@ import useUser from 'hooks/useUser';
import { HOMEPAGE_URL } from 'lib/constants';
import { useRouter } from 'next/router';
import { Column, Icon, Row } from 'react-basics';
import { FormattedMessage } from 'react-intl';
import SettingsButton from '../settings/SettingsButton';
import styles from './Header.module.css';
@ -33,19 +32,6 @@ export default function Header() {
<Link href={isSharePage ? HOMEPAGE_URL : '/'}>umami</Link>
</Column>
<HamburgerButton />
{user && !adminDisabled && (
<div className={styles.links}>
<Link href="/dashboard">
<FormattedMessage id="label.dashboard" defaultMessage="Dashboard" />
</Link>
<Link href="/realtime">
<FormattedMessage id="label.realtime" defaultMessage="Realtime" />
</Link>
<Link href="/websites">
<FormattedMessage id="label.settings" defaultMessage="Settings" />
</Link>
</div>
)}
<Column className={styles.buttons}>
<ThemeButton />
<LanguageButton menuAlign="right" />

12
components/layout/Layout.js
View File

@ -3,26 +3,14 @@ import Head from 'next/head';
import Header from 'components/layout/Header';
import Footer from 'components/layout/Footer';
import useLocale from 'hooks/useLocale';
import { useRouter } from 'next/router';
export default function Layout({ title, children, header = true, footer = true }) {
const { dir } = useLocale();
const { basePath } = useRouter();
return (
<Container dir={dir} style={{ maxWidth: 1140 }}>
<Head>
<title>{title ? `${title} | umami` : 'umami'}</title>
<link rel="icon" href={`${basePath}/favicon.ico`} />
<link rel="apple-touch-icon" sizes="180x180" href={`${basePath}/apple-touch-icon.png`} />
<link rel="icon" type="image/png" sizes="32x32" href={`${basePath}/favicon-32x32.png`} />
<link rel="icon" type="image/png" sizes="16x16" href={`${basePath}/favicon-16x16.png`} />
<link rel="manifest" href={`${basePath}/site.webmanifest`} />
<link rel="mask-icon" href={`${basePath}/safari-pinned-tab.svg`} color="#5bbad5" />
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="theme-color" content="#fafafa" media="(prefers-color-scheme: light)" />
<meta name="theme-color" content="#2f2f2f" media="(prefers-color-scheme: dark)" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</Head>
{header && <Header />}
<main>{children}</main>

2
components/layout/Page.js
View File

@ -8,7 +8,7 @@ export default function Page({ className, error, loading, children }) {
}
if (loading) {
return <Loading />;
return <Loading icon="spinner" size="xl" position="page" />;
}
return <div className={classNames(styles.page, className)}>{children}</div>;

0
components/forms/DatePickerForm.js → components/metrics/DatePickerForm.js
View File

0
components/forms/DatePickerForm.module.css → components/metrics/DatePickerForm.module.css
View File

2
components/forms/EventDataForm.js → components/metrics/EventDataForm.js
View File

@ -19,7 +19,7 @@ import {
TextField,
} from 'react-basics';
import { FormattedMessage } from 'react-intl';
import { FormMessage } from './../layout/FormLayout';
import { FormMessage } from '../layout/FormLayout';
import styles from './EventDataForm.module.css';
export const filterOptions = [

0
components/forms/EventDataForm.module.css → components/metrics/EventDataForm.module.css
View File

8
components/nav/Nav.js
View File

@ -19,10 +19,10 @@ export default function Nav() {
const handleSelect = () => {};
const items = [
{ icon: <Website />, label: 'Websites', url: '/websites' },
{ icon: <User />, label: 'Users', url: '/users', hidden: !user.isAdmin },
{ icon: <Team />, label: 'Teams', url: '/teams' },
{ icon: <User />, label: 'Profile', url: '/profile' },
{ icon: <Website />, label: 'Websites', url: '/settings/websites' },
{ icon: <User />, label: 'Users', url: '/settings/users' },
{ icon: <Team />, label: 'Teams', url: '/settings/teams' },
{ icon: <User />, label: 'Profile', url: '/settings/profile' },
];
return (

0
components/pages/TestConsole.js → components/pages/console/TestConsole.js
View File

0
components/pages/TestConsole.module.css → components/pages/console/TestConsole.module.css
View File

4
components/pages/Dashboard.js → components/pages/dashboard/Dashboard.js
View File

@ -3,13 +3,13 @@ import { Button, Loading } from 'react-basics';
import { defineMessages, useIntl } from 'react-intl';
import Page from 'components/layout/Page';
import PageHeader from 'components/layout/PageHeader';
import WebsiteChartList from 'components/pages/WebsiteChartList';
import WebsiteChartList from 'components/pages/websites/WebsiteChartList';
import DashboardSettingsButton from 'components/settings/DashboardSettingsButton';
import useApi from 'hooks/useApi';
import useRequireLogin from 'hooks/useRequireLogin';
import useDashboard from 'store/dashboard';
import DashboardEdit from './DashboardEdit';
import styles from './WebsiteList.module.css';
import styles from '../websites/WebsiteList.module.css';
const messages = defineMessages({
dashboard: { id: 'label.dashboard', defaultMessage: 'Dashboard' },

0
components/pages/DashboardEdit.js → components/pages/dashboard/DashboardEdit.js
View File

0
components/pages/DashboardEdit.module.css → components/pages/dashboard/DashboardEdit.module.css
View File

7
components/forms/LoginForm.js → components/pages/login/LoginForm.js
View File

@ -14,7 +14,6 @@ import useApi from 'hooks/useApi';
import { setUser } from 'store/app';
import { setClientAuthToken } from 'lib/client';
import Logo from 'assets/logo.svg';
import styles from './Form.module.css';
export default function LoginForm() {
const router = useRouter();
@ -34,13 +33,13 @@ export default function LoginForm() {
return (
<>
<div className={styles.header}>
<div>
<Icon size="xl">
<Logo />
</Icon>
<p>umami</p>
</div>
<Form className={styles.form} onSubmit={handleSubmit} error={error}>
<Form onSubmit={handleSubmit} error={error}>
<FormRow label="Username">
<FormInput name="username" rules={{ required: 'Required' }}>
<TextField autoComplete="off" />
@ -52,7 +51,7 @@ export default function LoginForm() {
</FormInput>
</FormRow>
<FormButtons>
<SubmitButton variant="primary" className={styles.button} disabled={isLoading}>
<SubmitButton variant="primary" disabled={isLoading}>
Log in
</SubmitButton>
</FormButtons>

0
components/forms/LoginForm.module.css → components/pages/login/LoginForm.module.css
View File

0
components/pages/RealtimeDashboard.js → components/pages/realtime/RealtimeDashboard.js
View File

0
components/pages/RealtimeDashboard.module.css → components/pages/realtime/RealtimeDashboard.module.css
View File

4
components/pages/Settings.js → components/pages/settings/SettingsLayout.js
View File

@ -1,9 +1,9 @@
import Layout from 'components/layout/Layout';
import Menu from 'components/nav/Nav';
import useRequireLogin from 'hooks/useRequireLogin';
import styles from './Settings.module.css';
import styles from './SettingsLayout.module.css';
export default function Settings({ children }) {
export default function SettingsLayout({ children }) {
const { user } = useRequireLogin();
if (!user) {

0
components/pages/Settings.module.css → components/pages/settings/SettingsLayout.module.css
View File

69
components/pages/settings/account/AccountDetails.js Normal file
View File

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

39
components/pages/settings/account/AccountEditForm.js Normal file
View File

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

29
components/pages/settings/account/ApiKeyDeleteForm.js Normal file
View File

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

46
components/pages/settings/account/ApiKeysList.js Normal file
View File

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

100
components/pages/settings/account/ApiKeysTable.js Normal file
View File

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

31
components/pages/settings/account/ApiKeysTable.module.css Normal file
View File

@ -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;
}

67
components/pages/settings/account/PasswordEditForm.js Normal file
View File

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

50
components/pages/settings/account/PasswordResetForm.js Normal file
View File

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

2
components/pages/ProfileSettings.js → components/pages/settings/profile/ProfileSettings.js
View File

@ -3,7 +3,7 @@ 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/forms/UserPasswordForm';
import UserPasswordForm from 'components/pages/settings/users/UserPasswordForm';
import Pen from 'assets/pen.svg';
export default function ProfileSettings() {

6
components/forms/TeamAddForm.js → components/pages/settings/teams/TeamAddForm.js
View File

@ -1,11 +1,9 @@
import { useRef } from 'react';
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';
export default function TeamAddForm({ onSave, onClose }) {
const { post } = useApi();
const { post, useMutation } = useApi();
const { mutate, error, isLoading } = useMutation(data => post('/teams', data));
const ref = useRef(null);
@ -18,7 +16,7 @@ export default function TeamAddForm({ onSave, onClose }) {
};
return (
<Form ref={ref} className={styles.form} onSubmit={handleSubmit} error={error}>
<Form ref={ref} onSubmit={handleSubmit} error={error}>
<FormRow label="Name">
<FormInput name="name" rules={{ required: 'Required' }}>
<TextField autoComplete="off" />

17
components/pages/TeamDetails.js → components/pages/settings/teams/TeamDetails.js
View File

@ -1,17 +1,16 @@
import { useEffect, useState } from 'react';
import { Breadcrumbs, Item, Tabs, useToast } from 'react-basics';
import { useQuery } from '@tanstack/react-query';
import useApi from 'hooks/useApi';
import Link from 'next/link';
import Page from 'components/layout/Page';
import TeamEditForm from 'components/forms/TeamEditForm';
import TeamEditForm from 'components/pages/settings/teams/TeamEditForm';
import PageHeader from 'components/layout/PageHeader';
import TeamMembersTable from '../tables/TeamMembersTable';
import TeamMembers from 'components/pages/settings/teams/TeamMembers';
export default function TeamDetails({ teamId }) {
const [values, setValues] = useState(null);
const [tab, setTab] = useState('general');
const { get } = useApi();
const [tab, setTab] = useState('details');
const { get, useQuery } = useApi();
const { toast, showToast } = useToast();
const { data, isLoading } = useQuery(
['team', teamId],
@ -40,18 +39,18 @@ export default function TeamDetails({ teamId }) {
<PageHeader>
<Breadcrumbs>
<Item>
<Link href="/teams">Teams</Link>
<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="general">General</Item>
<Item key="details">Details</Item>
<Item key="members">Members</Item>
<Item key="websites">Websites</Item>
</Tabs>
{tab === 'general' && <TeamEditForm teamId={teamId} data={values} onSave={handleSave} />}
{tab === 'members' && <TeamMembersTable teamId={teamId} />}
{tab === 'details' && <TeamEditForm teamId={teamId} data={values} onSave={handleSave} />}
{tab === 'members' && <TeamMembers teamId={teamId} />}
</Page>
);
}

35
components/forms/TeamEditForm.js → components/pages/settings/teams/TeamEditForm.js
View File

@ -1,12 +1,24 @@
import { SubmitButton, Form, FormInput, FormRow, FormButtons, TextField } from 'react-basics';
import { useMutation } from '@tanstack/react-query';
import { useRef } from 'react';
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 } = useApi();
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, {
@ -17,6 +29,15 @@ export default function TeamEditForm({ teamId, data, onSave }) {
});
};
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">
@ -27,6 +48,12 @@ export default function TeamEditForm({ teamId, data, onSave }) {
<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>

16
components/pages/settings/teams/TeamMembers.js Normal file
View File

@ -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} />;
}

27
components/tables/TeamMembersTable.js → components/pages/settings/teams/TeamMembersTable.js
View File

@ -1,4 +1,3 @@
import Link from 'next/link';
import {
Table,
TableHeader,
@ -11,9 +10,15 @@ import {
} from 'react-basics';
import styles from './TeamsTable.module.css';
export default function TeamMembersTable({ columns = [], rows = [] }) {
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={rows}>
<Table className={styles.table} columns={columns} rows={data}>
<TableHeader>
{(column, index) => {
return (
@ -25,18 +30,12 @@ export default function TeamMembersTable({ columns = [], rows = [] }) {
</TableHeader>
<TableBody>
{(row, keys, rowIndex) => {
const { id } = row;
row.action = (
<div className={styles.actions}>
<Link href={`/teams/${id}`} shallow>
<a>
<Button>
<Icon icon="arrow-right" />
Settings
</Button>
</a>
</Link>
<Button>
<Icon icon="cross" />
Remove
</Button>
</div>
);
@ -49,7 +48,7 @@ export default function TeamMembersTable({ columns = [], rows = [] }) {
className={styles.cell}
style={{ ...columns[colIndex]?.style }}
>
{data[key]}
{data[key] ?? data?.user?.[key]}
</TableCell>
);
}}

27
components/pages/TeamsList.js → components/pages/settings/teams/TeamsList.js
View File

@ -1,26 +1,20 @@
import { useState } from 'react';
import { Button, Icon, Modal, useToast, Flexbox } from 'react-basics';
import { Button, Icon, Modal, useToast } from 'react-basics';
import useApi from 'hooks/useApi';
import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
import TeamAddForm from 'components/forms/TeamAddForm';
import TeamAddForm from 'components/pages/settings/teams/TeamAddForm';
import PageHeader from 'components/layout/PageHeader';
import TeamsTable from 'components/tables/TeamsTable';
import TeamsTable from 'components/pages/settings/teams/TeamsTable';
import Page from 'components/layout/Page';
import { useQuery } from '@tanstack/react-query';
export default function TeamsList() {
const [edit, setEdit] = useState(false);
const [update, setUpdate] = useState(0);
const { get } = useApi();
const { get, useQuery } = useApi();
const { data, isLoading, error } = useQuery(['teams', update], () => get(`/teams`));
const hasData = data && data.length !== 0;
const { toast, showToast } = useToast();
const columns = [
{ name: 'name', label: 'Name', style: { flex: 2 } },
{ name: 'action', label: ' ' },
];
const handleAdd = () => {
setEdit(true);
};
@ -43,15 +37,12 @@ export default function TeamsList() {
<Icon icon="plus" /> Create team
</Button>
</PageHeader>
{hasData && <TeamsTable columns={columns} rows={data} />}
{hasData && <TeamsTable data={data} />}
{!hasData && (
<EmptyPlaceholder msg="You don't have any teams configured.">
<Flexbox justifyContent="center" alignItems="center">
<Button variant="primary" onClick={handleAdd}>
<Icon icon="plus" /> Create team
</Button>
</Flexbox>
<EmptyPlaceholder message="You don't have any teams configured.">
<Button variant="primary" onClick={handleAdd}>
<Icon icon="plus" /> Create team
</Button>
</EmptyPlaceholder>
)}
{edit && (

11
components/tables/TeamsTable.js → components/pages/settings/teams/TeamsTable.js
View File

@ -11,9 +11,14 @@ import {
} from 'react-basics';
import styles from './TeamsTable.module.css';
export default function TeamsTable({ columns = [], rows = [] }) {
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={rows}>
<Table className={styles.table} columns={columns} rows={data}>
<TableHeader>
{(column, index) => {
return (
@ -29,7 +34,7 @@ export default function TeamsTable({ columns = [], rows = [] }) {
row.action = (
<div className={styles.actions}>
<Link href={`/teams/${id}`} shallow>
<Link href={`/settings/teams/${id}`}>
<a>
<Button>
<Icon icon="arrow-right" />

0
components/tables/TeamsTable.module.css → components/pages/settings/teams/TeamsTable.module.css
View File

2
components/pages/UserDelete.js → components/pages/settings/users/UserDelete.js
View File

@ -1,4 +1,4 @@
import UserDeleteForm from 'components/forms/UserDeleteForm';
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';

7
components/forms/UserDeleteForm.js → components/pages/settings/users/UserDeleteForm.js
View File

@ -9,7 +9,6 @@ import {
SubmitButton,
TextField,
} from 'react-basics';
import styles from './Form.module.css';
const CONFIRM_VALUE = 'DELETE';
@ -26,7 +25,7 @@ export default function UserDeleteForm({ userId, onSave, onClose }) {
};
return (
<Form className={styles.form} onSubmit={handleSubmit} error={error}>
<Form onSubmit={handleSubmit} error={error}>
<p>
To delete this user, type <b>{CONFIRM_VALUE}</b> in the box below to confirm.
</p>
@ -36,10 +35,10 @@ export default function UserDeleteForm({ userId, onSave, onClose }) {
</FormInput>
</FormRow>
<FormButtons flex>
<SubmitButton variant="primary" className={styles.button} disabled={isLoading}>
<SubmitButton variant="primary" disabled={isLoading}>
Save
</SubmitButton>
<Button className={styles.button} disabled={isLoading} onClick={onClose}>
<Button disabled={isLoading} onClick={onClose}>
Cancel
</Button>
</FormButtons>

0
components/forms/UserEditForm.js → components/pages/settings/users/UserEditForm.js
View File

0
components/forms/UserForm.module.css → components/pages/settings/users/UserForm.module.css
View File

0
components/forms/UserPasswordForm.js → components/pages/settings/users/UserPasswordForm.js
View File

0
components/forms/UserPasswordForm.module.css → components/pages/settings/users/UserPasswordForm.module.css
View File

6
components/pages/UserSettings.js → components/pages/settings/users/UserSettings.js
View File

@ -1,7 +1,7 @@
import { useQuery } from '@tanstack/react-query';
import UserDelete from 'components/pages/UserDelete';
import UserEditForm from 'components/forms/UserEditForm';
import UserPasswordForm from 'components/forms/UserPasswordForm';
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';

2
components/pages/UsersList.js → components/pages/settings/users/UsersList.js
View File

@ -1,6 +1,6 @@
import Page from 'components/layout/Page';
import PageHeader from 'components/layout/PageHeader';
import UsersTable from 'components/tables/UsersTable';
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';

0
components/tables/UsersTable.js → components/pages/settings/users/UsersTable.js
View File

0
components/tables/UsersTable.module.css → components/pages/settings/users/UsersTable.module.css
View File

4
components/forms/ShareUrlForm.js → components/pages/settings/websites/ShareUrl.js
View File

@ -14,7 +14,7 @@ import useApi from 'hooks/useApi';
const generateId = () => getRandomChars(16);
export default function ShareUrlForm({ websiteId, data, onSave }) {
export default function ShareUrl({ websiteId, data, onSave }) {
const { name, shareId } = data;
const [id, setId] = useState(shareId);
const { post, useMutation } = useApi();
@ -23,7 +23,7 @@ export default function ShareUrlForm({ websiteId, data, onSave }) {
);
const ref = useRef(null);
const url = useMemo(
() => `${location.origin}/share/${id}/${encodeURIComponent(name)}`,
() => `${process.env.analyticsUrl}/share/${id}/${encodeURIComponent(name)}`,
[id, name],
);

16
components/pages/settings/websites/TrackingCode.js Normal file
View File

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

6
components/forms/WebsiteAddForm.js → components/pages/settings/websites/WebsiteAddForm.js
View File

@ -9,12 +9,10 @@ import {
SubmitButton,
} from 'react-basics';
import useApi from 'hooks/useApi';
import styles from './Form.module.css';
import { useMutation } from '@tanstack/react-query';
import { DOMAIN_REGEX } from 'lib/constants';
export default function WebsiteAddForm({ onSave, onClose }) {
const { post } = useApi();
const { post, useMutation } = useApi();
const { mutate, error, isLoading } = useMutation(data => post('/websites', data));
const ref = useRef(null);
@ -27,7 +25,7 @@ export default function WebsiteAddForm({ onSave, onClose }) {
};
return (
<Form ref={ref} className={styles.form} onSubmit={handleSubmit} error={error}>
<Form ref={ref} onSubmit={handleSubmit} error={error}>
<FormRow label="Name">
<FormInput name="name" rules={{ required: 'Required' }}>
<TextField autoComplete="off" />

10
components/forms/WebsiteDeleteForm.js → components/pages/settings/websites/WebsiteDeleteForm.js
View File

@ -1,4 +1,3 @@
import { useMutation } from '@tanstack/react-query';
import useApi from 'hooks/useApi';
import {
Button,
@ -9,12 +8,11 @@ import {
SubmitButton,
TextField,
} from 'react-basics';
import styles from './Form.module.css';
const CONFIRM_VALUE = 'DELETE';
export default function WebsiteDeleteForm({ websiteId, onSave, onClose }) {
const { del } = useApi();
const { del, useMutation } = useApi();
const { mutate, error, isLoading } = useMutation(data => del(`/websites/${websiteId}`, data));
const handleSubmit = async data => {
@ -26,7 +24,7 @@ export default function WebsiteDeleteForm({ websiteId, onSave, onClose }) {
};
return (
<Form className={styles.form} onSubmit={handleSubmit} error={error}>
<Form onSubmit={handleSubmit} error={error}>
<div>
To delete this website, type <b>{CONFIRM_VALUE}</b> in the box below to confirm.
</div>
@ -36,10 +34,10 @@ export default function WebsiteDeleteForm({ websiteId, onSave, onClose }) {
</FormInput>
</FormRow>
<FormButtons flex>
<SubmitButton variant="primary" className={styles.button} disabled={isLoading}>
<SubmitButton variant="primary" disabled={isLoading}>
Save
</SubmitButton>
<Button className={styles.button} disabled={isLoading} onClick={onClose}>
<Button disabled={isLoading} onClick={onClose}>
Cancel
</Button>
</FormButtons>

27
components/pages/WebsiteSettings.js → components/pages/settings/websites/WebsiteDetails.js
View File

@ -1,20 +1,19 @@
import { useEffect, useState } from 'react';
import { Breadcrumbs, Item, Tabs, useToast, Button, Icon } from 'react-basics';
import { useQuery } from '@tanstack/react-query';
import useApi from 'hooks/useApi';
import Link from 'next/link';
import Page from 'components/layout/Page';
import WebsiteEditForm from 'components/forms/WebsiteEditForm';
import WebsiteReset from 'components/forms/WebsiteReset';
import WebsiteEditForm from 'components/pages/settings/websites/WebsiteEditForm';
import WebsiteReset from 'components/pages/settings/websites/WebsiteReset';
import PageHeader from 'components/layout/PageHeader';
import TrackingCodeForm from 'components/forms/TrackingCodeForm';
import ShareUrlForm from 'components/forms/ShareUrlForm';
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 Websites({ websiteId }) {
export default function WebsiteDetails({ websiteId }) {
const [values, setValues] = useState(null);
const [tab, setTab] = useState('details');
const { get } = useApi();
const { get, useQuery } = useApi();
const { toast, showToast } = useToast();
const { data, isLoading } = useQuery(
['website', websiteId],
@ -43,7 +42,7 @@ export default function Websites({ websiteId }) {
<PageHeader>
<Breadcrumbs>
<Item>
<Link href="/websites">Websites</Link>
<Link href="/settings/websites">Websites</Link>
</Item>
<Item>{values?.name}</Item>
</Breadcrumbs>
@ -58,18 +57,18 @@ export default function Websites({ websiteId }) {
</a>
</Link>
</PageHeader>
<Tabs selectedKey={tab} onSelect={setTab} style={{ marginBottom: 30, fontSize: 14 }}>
<Item key="details">General</Item>
<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="danger">Danger zone</Item>
<Item key="actions">Actions</Item>
</Tabs>
{tab === 'details' && (
<WebsiteEditForm websiteId={websiteId} data={values} onSave={handleSave} />
)}
{tab === 'tracking' && <TrackingCodeForm websiteId={websiteId} data={values} />}
{tab === 'share' && <ShareUrlForm websiteId={websiteId} data={values} onSave={handleSave} />}
{tab === 'danger' && <WebsiteReset websiteId={websiteId} 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>
);
}

3
components/forms/WebsiteEditForm.js → components/pages/settings/websites/WebsiteEditForm.js
View File

@ -1,11 +1,10 @@
import { SubmitButton, Form, FormInput, FormRow, FormButtons, TextField } from 'react-basics';
import { useMutation } from '@tanstack/react-query';
import { useRef } from 'react';
import useApi from 'hooks/useApi';
import { DOMAIN_REGEX } from 'lib/constants';
export default function WebsiteEditForm({ websiteId, data, onSave }) {
const { post } = useApi();
const { post, useMutation } = useApi();
const { mutate, error } = useMutation(data => post(`/websites/${websiteId}`, data));
const ref = useRef(null);

4
components/forms/WebsiteReset.js → components/pages/settings/websites/WebsiteReset.js
View File

@ -1,5 +1,5 @@
import WebsiteDeleteForm from 'components/forms/WebsiteDeleteForm';
import WebsiteResetForm from 'components/forms/WebsiteResetForm';
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';

10
components/forms/WebsiteResetForm.js → components/pages/settings/websites/WebsiteResetForm.js
View File

@ -1,4 +1,3 @@
import { useMutation } from '@tanstack/react-query';
import useApi from 'hooks/useApi';
import {
Button,
@ -9,12 +8,11 @@ import {
SubmitButton,
TextField,
} from 'react-basics';
import styles from './Form.module.css';
const CONFIRM_VALUE = 'RESET';
export default function WebsiteResetForm({ websiteId, onSave, onClose }) {
const { post } = useApi();
const { post, useMutation } = useApi();
const { mutate, error, isLoading } = useMutation(data =>
post(`/websites/${websiteId}/reset`, data),
);
@ -28,7 +26,7 @@ export default function WebsiteResetForm({ websiteId, onSave, onClose }) {
};
return (
<Form className={styles.form} onSubmit={handleSubmit} error={error}>
<Form onSubmit={handleSubmit} error={error}>
<div>
To reset this website, type <b>{CONFIRM_VALUE}</b> in the box below to confirm.
</div>
@ -38,10 +36,10 @@ export default function WebsiteResetForm({ websiteId, onSave, onClose }) {
</FormInput>
</FormRow>
<FormButtons flex>
<SubmitButton variant="primary" className={styles.button} disabled={isLoading}>
<SubmitButton variant="primary" disabled={isLoading}>
Save
</SubmitButton>
<Button className={styles.button} disabled={isLoading} onClick={onClose}>
<Button disabled={isLoading} onClick={onClose}>
Cancel
</Button>
</FormButtons>

28
components/pages/WebsitesList.js → components/pages/settings/websites/WebsitesList.js
View File

@ -1,20 +1,18 @@
import { useState } from 'react';
import { Button, Icon, Modal, useToast, Flexbox } from 'react-basics';
import { Button, Icon, Modal, useToast } from 'react-basics';
import useApi from 'hooks/useApi';
import { useQuery } from '@tanstack/react-query';
import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
import WebsiteAddForm from 'components/forms/WebsiteAddForm';
import WebsiteAddForm from 'components/pages/settings/websites/WebsiteAddForm';
import PageHeader from 'components/layout/PageHeader';
import WebsitesTable from 'components/tables/WebsitesTable';
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 [update, setUpdate] = useState(0);
const { get } = useApi();
const user = useUser();
const { data, isLoading, error } = useQuery(['websites', update], () =>
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;
@ -30,9 +28,9 @@ export default function WebsitesList() {
setEdit(true);
};
const handleSave = () => {
const handleSave = async () => {
await refetch();
setEdit(false);
setUpdate(state => state + 1);
showToast({ message: 'Website saved.', variant: 'success' });
};
@ -51,12 +49,10 @@ export default function WebsitesList() {
{hasData && <WebsitesTable columns={columns} rows={data} />}
{!hasData && (
<EmptyPlaceholder msg="You don't have any websites configured.">
<Flexbox justifyContent="center" alignItems="center">
<Button variant="primary" onClick={handleAdd}>
<Icon icon="plus" /> Add website
</Button>
</Flexbox>
<EmptyPlaceholder message="You don't have any websites configured.">
<Button variant="primary" onClick={handleAdd}>
<Icon icon="plus" /> Add website
</Button>
</EmptyPlaceholder>
)}
{edit && (

6
components/tables/WebsitesTable.js → components/pages/settings/websites/WebsitesTable.js
View File

@ -30,7 +30,7 @@ export default function WebsitesTable({ columns = [], rows = [] }) {
row.action = (
<div className={styles.actions}>
<Link href={`/websites/${id}/settings`} shallow>
<Link href={`/settings/websites/${id}`}>
<a>
<Button>
<Icon icon="arrow-right" />
@ -38,8 +38,8 @@ export default function WebsitesTable({ columns = [], rows = [] }) {
</Button>
</a>
</Link>
<Link href={`/websites/${id}`}>
<a>
<Link href={`/analytics/websites/${id}`}>
<a target="_blank">
<Button>
<Icon>
<ExternalLink />

0
components/tables/WebsitesTable.module.css → components/pages/settings/websites/WebsitesTable.module.css
View File

0
components/pages/WebsiteChartList.js → components/pages/websites/WebsiteChartList.js
View File

6
components/pages/WebsiteDetails.js → components/pages/websites/WebsiteDetails.js
View File

@ -21,9 +21,9 @@ import { DEFAULT_ANIMATION_DURATION } from 'lib/constants';
import { useState } from 'react';
import { Column, Loading } from 'react-basics';
import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
import EventDataButton from './../common/EventDataButton';
import EventsChart from './../metrics/EventsChart';
import EventsTable from './../metrics/EventsTable';
import EventDataButton from '../../common/EventDataButton';
import EventsChart from '../../metrics/EventsChart';
import EventsTable from '../../metrics/EventsTable';
import styles from './WebsiteDetails.module.css';
const messages = defineMessages({

0
components/pages/WebsiteDetails.module.css → components/pages/websites/WebsiteDetails.module.css
View File

0
components/pages/WebsiteList.module.css → components/pages/websites/WebsiteList.module.css
View File

1
lib/constants.ts
View File

@ -12,6 +12,7 @@ export const HOMEPAGE_URL = 'https://umami.is';
export const REPO_URL = 'https://github.com/umami-software/umami';
export const UPDATES_URL = 'https://api.umami.is/v1/updates';
export const TELEMETRY_PIXEL = 'https://i.umami.is/a.png';
export const TRACKER_SCRIPT_URL = '/script.js';
export const DEFAULT_LOCALE = 'en-US';
export const DEFAULT_THEME = 'light';

2
package.json
View File

@ -94,7 +94,7 @@
"npm-run-all": "^4.1.5",
"prop-types": "^15.7.2",
"react": "^18.2.0",
"react-basics": "^0.48.0",
"react-basics": "^0.50.0",
"react-beautiful-dnd": "^13.1.0",
"react-dom": "^18.2.0",
"react-intl": "^5.24.7",

12
pages/404.js
View File

@ -1,13 +1,17 @@
import Layout from 'components/layout/Layout';
import { FormattedMessage } from 'react-intl';
import { useIntl, defineMessages } from 'react-intl';
const messages = defineMessages({
notFound: { id: 'message.page-not-found', defaultMessage: 'Page not found' },
});
export default function Custom404() {
const { formatMessage } = useIntl();
return (
<Layout>
<div className="row justify-content-center">
<h1>
<FormattedMessage id="message.page-not-found" defaultMessage="Page not found" />
</h1>
<h1 style={{ textAlign: 'center' }}>{formatMessage(messages.notFound)}</h1>
</div>
</Layout>
);

16
pages/_app.js
View File

@ -1,9 +1,12 @@
import { IntlProvider } from 'react-intl';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import Head from 'next/head';
import { useRouter } from 'next/router';
import useLocale from 'hooks/useLocale';
import useConfig from 'hooks/useConfig';
import 'react-basics/dist/styles.css';
import 'styles/variables.css';
import 'styles/locale.css';
import 'styles/index.css';
import '@fontsource/inter/400.css';
import '@fontsource/inter/600.css';
@ -12,6 +15,7 @@ const client = new QueryClient();
export default function App({ Component, pageProps }) {
const { locale, messages } = useLocale();
const { basePath } = useRouter();
useConfig();
const Wrapper = ({ children }) => <span className={locale}>{children}</span>;
@ -23,6 +27,18 @@ export default function App({ Component, pageProps }) {
return (
<QueryClientProvider client={client}>
<IntlProvider locale={locale} messages={messages[locale]} textComponent={Wrapper}>
<Head>
<link rel="icon" href={`${basePath}/favicon.ico`} />
<link rel="apple-touch-icon" sizes="180x180" href={`${basePath}/apple-touch-icon.png`} />
<link rel="icon" type="image/png" sizes="32x32" href={`${basePath}/favicon-32x32.png`} />
<link rel="icon" type="image/png" sizes="16x16" href={`${basePath}/favicon-16x16.png`} />
<link rel="manifest" href={`${basePath}/site.webmanifest`} />
<link rel="mask-icon" href={`${basePath}/safari-pinned-tab.svg`} color="#5bbad5" />
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="theme-color" content="#fafafa" media="(prefers-color-scheme: light)" />
<meta name="theme-color" content="#2f2f2f" media="(prefers-color-scheme: dark)" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</Head>
<Component {...pageProps} />
</IntlProvider>
</QueryClientProvider>

2
pages/console/[[...id]].js
View File

@ -1,5 +1,5 @@
import Layout from 'components/layout/Layout';
import TestConsole from 'components/pages/TestConsole';
import TestConsole from 'components/pages/console/TestConsole';
import useRequireLogin from 'hooks/useRequireLogin';
export default function ConsolePage({ pageDisabled }) {

2
pages/dashboard/[[...id]].js
View File

@ -1,6 +1,6 @@
import { useRouter } from 'next/router';
import Layout from 'components/layout/Layout';
import Dashboard from 'components/pages/Dashboard';
import Dashboard from 'components/pages/dashboard/Dashboard';
import useConfig from 'hooks/useConfig';
import useRequireLogin from 'hooks/useRequireLogin';

2
pages/login.js
View File

@ -1,5 +1,5 @@
import Layout from 'components/layout/Layout';
import LoginForm from 'components/forms/LoginForm';
import LoginForm from 'components/pages/login/LoginForm';
export default function LoginPage({ pageDisabled }) {
if (pageDisabled) {

17
pages/profile/index.js
View File

@ -1,17 +0,0 @@
import Settings from 'components/pages/Settings';
import ProfileSettings from 'components/pages/ProfileSettings';
import useUser from 'hooks/useUser';
export default function TeamsPage() {
const user = useUser();
if (!user) {
return null;
}
return (
<Settings>
<ProfileSettings />
</Settings>
);
}

2
pages/realtime.js
View File

@ -1,5 +1,5 @@
import Layout from 'components/layout/Layout';
import RealtimeDashboard from 'components/pages/RealtimeDashboard';
import RealtimeDashboard from 'components/pages/realtime/RealtimeDashboard';
import useRequireLogin from 'hooks/useRequireLogin';
export default function RealtimePage() {

10
pages/settings/index.js Normal file
View File

@ -0,0 +1,10 @@
export default () => null;
export async function getServerSideProps() {
return {
redirect: {
destination: '/settings/websites',
permanent: true,
},
};
}

10
pages/settings/profile/index.js Normal file
View File

@ -0,0 +1,10 @@
import SettingsLayout from 'components/pages/settings/SettingsLayout';
import ProfileSettings from 'components/pages/settings/profile/ProfileSettings';
export default function ProfilePage() {
return (
<SettingsLayout>
<ProfileSettings />
</SettingsLayout>
);
}

8
pages/teams/[...id].js → pages/settings/teams/[...id].js
View File

@ -1,5 +1,5 @@
import Settings from 'components/pages/Settings';
import TeamDetails from 'components/pages/TeamDetails';
import SettingsLayout from 'components/pages/settings/SettingsLayout';
import TeamDetails from 'components/pages/settings/teams/TeamDetails';
import useUser from 'hooks/useUser';
import { useRouter } from 'next/router';
@ -13,8 +13,8 @@ export default function TeamDetailPage() {
}
return (
<Settings>
<SettingsLayout>
<TeamDetails teamId={id} />
</Settings>
</SettingsLayout>
);
}

17
pages/settings/teams/index.js Normal file
View File

@ -0,0 +1,17 @@
import SettingsLayout from 'components/pages/settings/SettingsLayout';
import TeamsList from 'components/pages/settings/teams/TeamsList';
import useUser from 'hooks/useUser';
export default function TeamsPage() {
const user = useUser();
if (!user) {
return null;
}
return (
<SettingsLayout>
<TeamsList />
</SettingsLayout>
);
}

8
pages/users/[...id].js → pages/settings/users/[...id].js
View File

@ -1,5 +1,5 @@
import Settings from 'components/pages/Settings';
import UserSettings from 'components/pages/UserSettings';
import SettingsLayout from 'components/pages/settings/SettingsLayout';
import UserSettings from 'components/pages/settings/users/UserSettings';
import useUser from 'hooks/useUser';
import { useRouter } from 'next/router';
@ -13,8 +13,8 @@ export default function TeamDetailPage() {
}
return (
<Settings>
<SettingsLayout>
<UserSettings userId={id} />
</Settings>
</SettingsLayout>
);
}

8
pages/users/index.js → pages/settings/users/index.js
View File

@ -1,8 +1,8 @@
import Settings from 'components/pages/Settings';
import SettingsLayout from 'components/pages/settings/SettingsLayout';
import useConfig from 'hooks/useConfig';
import useUser from 'hooks/useUser';
import UsersList from 'components/pages/UsersList';
import UsersList from 'components/pages/settings/users/UsersList';
export default function UsersPage() {
const user = useUser();
@ -13,8 +13,8 @@ export default function UsersPage() {
}
return (
<Settings>
<SettingsLayout>
<UsersList />
</Settings>
</SettingsLayout>
);
}

10
pages/websites/[id]/settings.js → pages/settings/websites/[id]/index.js
View File

@ -1,7 +1,7 @@
import { useRouter } from 'next/router';
import WebsiteSettings from 'components/pages/WebsiteSettings';
import WebsiteDetails from 'components/pages/settings/websites/WebsiteDetails';
import useUser from 'hooks/useUser';
import Settings from 'components/pages/Settings';
import SettingsLayout from 'components/pages/settings/SettingsLayout';
export default function WebsiteSettingsPage() {
const user = useUser();
@ -13,8 +13,8 @@ export default function WebsiteSettingsPage() {
}
return (
<Settings>
<WebsiteSettings websiteId={id} />
</Settings>
<SettingsLayout>
<WebsiteDetails websiteId={id} />
</SettingsLayout>
);
}

8
pages/websites/index.js → pages/settings/websites/index.js
View File

@ -1,7 +1,7 @@
import Settings from 'components/pages/Settings';
import SettingsLayout from 'components/pages/settings/SettingsLayout';
import useConfig from 'hooks/useConfig';
import useRequireLogin from 'hooks/useRequireLogin';
import WebsitesList from 'components/pages/WebsitesList';
import WebsitesList from 'components/pages/settings/websites/WebsitesList';
export default function WebsitesPage() {
const { user } = useRequireLogin();
@ -12,8 +12,8 @@ export default function WebsitesPage() {
}
return (
<Settings>
<SettingsLayout>
<WebsitesList />
</Settings>
</SettingsLayout>
);
}

2
pages/share/[...id].js
View File

@ -1,6 +1,6 @@
import { useRouter } from 'next/router';
import Layout from 'components/layout/Layout';
import WebsiteDetails from 'components/pages/WebsiteDetails';
import WebsiteDetails from 'components/pages/websites/WebsiteDetails';
import useShareToken from 'hooks/useShareToken';
export default function SharePage() {

17
pages/teams/index.js
View File

@ -1,17 +0,0 @@
import Settings from 'components/pages/Settings';
import TeamsList from 'components/pages/TeamsList';
import useUser from 'hooks/useUser';
export default function TeamsPage() {
const user = useUser();
if (!user) {
return null;
}
return (
<Settings>
<TeamsList />
</Settings>
);
}

2
pages/websites/[id]/index.js
View File

@ -1,6 +1,6 @@
import { useRouter } from 'next/router';
import Layout from 'components/layout/Layout';
import WebsiteDetails from 'components/pages/WebsiteDetails';
import WebsiteDetails from 'components/pages/websites/WebsiteDetails';
import useRequireLogin from 'hooks/useRequireLogin';
export default function DetailsPage() {

36
styles/index.css
View File

@ -3,9 +3,9 @@ body {
font-family: Inter, -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans,
Ubuntu, Cantrell, 'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
'Segoe UI Symbol';
font-size: 16px;
font-weight: 400;
line-height: 1.8;
font-size: 14px;
font-weight: normal;
line-height: 1.5rem;
padding: 0;
margin: 0;
box-sizing: border-box;
@ -17,36 +17,6 @@ body {
background: var(--background200);
}
.zh-CN {
font-family: '方体', 'PingFang SC', '黑体', 'Heiti SC', 'Microsoft JhengHei UI',
'Microsoft JhengHei', Roboto, Noto, 'Noto Sans CJK SC', sans-serif !important;
}
.zh-TW {
font-family: '方體', 'PingFang TC', '黑體', 'Heiti TC', 'Microsoft JhengHei UI',
'Microsoft JhengHei', Roboto, Noto, 'Noto Sans CJK TC', sans-serif !important;
}
.ja-JP {
font-family: '游ゴシック体', YuGothic, 'ヒラギノ丸ゴ', 'Hiragino Sans', 'Yu Gothic UI',
'Meiryo UI', 'MS Gothic', Roboto, Noto, 'Noto Sans CJK JP', sans-serif !important;
}
.ko-KR {
font-family: 'Nanum Gothic', 'Apple SD Gothic Neo', 'Malgun Gothic', Roboto, Noto,
'Noto Sans CJK KR', sans-serif !important;
}
.ar-SA {
font-family: 'Geeza Pro', 'Arabic Typesetting', Roboto, Noto, 'Noto Naskh Arabic',
'Times New Roman', serif !important;
}
.he-IL {
font-family: 'New Peninim MT', 'Arial Hebrew', Gisha, 'Times New Roman', Roboto, Noto,
'Noto Sans Hebrew', sans-serif !important;
}
*,
*:before,
*:after {

29
styles/locale.css Normal file
View File

@ -0,0 +1,29 @@
.zh-CN {
font-family: '方体', 'PingFang SC', '黑体', 'Heiti SC', 'Microsoft JhengHei UI',
'Microsoft JhengHei', Roboto, Noto, 'Noto Sans CJK SC', sans-serif !important;
}
.zh-TW {
font-family: '方體', 'PingFang TC', '黑體', 'Heiti TC', 'Microsoft JhengHei UI',
'Microsoft JhengHei', Roboto, Noto, 'Noto Sans CJK TC', sans-serif !important;
}
.ja-JP {
font-family: '游ゴシック体', YuGothic, 'ヒラギノ丸ゴ', 'Hiragino Sans', 'Yu Gothic UI',
'Meiryo UI', 'MS Gothic', Roboto, Noto, 'Noto Sans CJK JP', sans-serif !important;
}
.ko-KR {
font-family: 'Nanum Gothic', 'Apple SD Gothic Neo', 'Malgun Gothic', Roboto, Noto,
'Noto Sans CJK KR', sans-serif !important;
}
.ar-SA {
font-family: 'Geeza Pro', 'Arabic Typesetting', Roboto, Noto, 'Noto Naskh Arabic',
'Times New Roman', serif !important;
}
.he-IL {
font-family: 'New Peninim MT', 'Arial Hebrew', Gisha, 'Times New Roman', Roboto, Noto,
'Noto Sans Hebrew', sans-serif !important;
}

8
yarn.lock
View File

@ -6438,10 +6438,10 @@ rc@^1.2.7:
minimist "^1.2.0"
strip-json-comments "~2.0.1"
react-basics@^0.48.0:
version "0.48.0"
resolved "https://registry.yarnpkg.com/react-basics/-/react-basics-0.48.0.tgz#f86924b6e0fbe67e55e3c27763390f4d3796edb4"
integrity sha512-0pbPsylQevm08VGY7aqqToLh9Xl764FNDPp6NxnwHlJSL9jvYRxhW2ajivsZOfeIPJgRiWbmmEBGmTmSwwhiIQ==
react-basics@^0.50.0:
version "0.50.0"
resolved "https://registry.yarnpkg.com/react-basics/-/react-basics-0.50.0.tgz#1784ce05f0361dd208804a273954dd50b8ec8b6f"
integrity sha512-hf9pbYuVSNqI7tlhO/5Ry1GfcWINKJgDkmDbFVCKSYYyiiycqDcsIyaXGn+pSxvWUj3Lk8YJep7INFeUMxA35A==
dependencies:
classnames "^2.3.1"
react "^18.2.0"