umami/components/settings/AccountSettings.js

133 lines
4.3 KiB
JavaScript
Raw Normal View History

import React, { useState } from 'react';
2020-09-11 08:55:29 +02:00
import { FormattedMessage } from 'react-intl';
import Link from 'next/link';
2020-08-18 07:47:58 +02:00
import classNames from 'classnames';
2020-08-09 11:03:37 +02:00
import PageHeader from 'components/layout/PageHeader';
import Button from 'components/common/Button';
import Icon from 'components/common/Icon';
import Table from 'components/common/Table';
import Modal from 'components/common/Modal';
2020-09-11 08:55:29 +02:00
import Toast from 'components/common/Toast';
2020-08-09 11:03:37 +02:00
import AccountEditForm from 'components/forms/AccountEditForm';
import ButtonLayout from 'components/layout/ButtonLayout';
import DeleteForm from 'components/forms/DeleteForm';
import useFetch from 'hooks/useFetch';
2020-08-09 08:48:43 +02:00
import Pen from 'assets/pen.svg';
import Plus from 'assets/plus.svg';
import Trash from 'assets/trash.svg';
2020-08-09 11:03:37 +02:00
import Check from 'assets/check.svg';
import LinkIcon from 'assets/external-link.svg';
2020-08-09 08:48:43 +02:00
import styles from './AccountSettings.module.css';
export default function AccountSettings() {
const [addAccount, setAddAccount] = useState();
const [editAccount, setEditAccount] = useState();
const [deleteAccount, setDeleteAccount] = useState();
const [saved, setSaved] = useState(0);
2020-09-01 00:57:59 +02:00
const [message, setMessage] = useState();
2022-02-23 08:52:31 +01:00
const { data } = useFetch(`/accounts`, {}, [saved]);
2020-08-09 08:48:43 +02:00
2020-08-12 07:24:41 +02:00
const Checkmark = ({ is_admin }) => (is_admin ? <Icon icon={<Check />} size="medium" /> : null);
2021-02-02 08:00:12 +01:00
const DashboardLink = row => (
<Link href={`/dashboard/${row.user_id}/${row.username}`}>
<a>
<Icon icon={<LinkIcon />} />
</a>
</Link>
);
2020-08-12 07:24:41 +02:00
const Buttons = row =>
row.username !== 'admin' ? (
2020-09-22 06:34:55 +02:00
<ButtonLayout align="right">
2020-08-12 07:24:41 +02:00
<Button icon={<Pen />} size="small" onClick={() => setEditAccount(row)}>
2020-10-13 07:53:59 +02:00
<FormattedMessage id="label.edit" defaultMessage="Edit" />
2020-08-12 07:24:41 +02:00
</Button>
<Button icon={<Trash />} size="small" onClick={() => setDeleteAccount(row)}>
2020-10-13 07:53:59 +02:00
<FormattedMessage id="label.delete" defaultMessage="Delete" />
2020-08-12 07:24:41 +02:00
</Button>
</ButtonLayout>
2020-08-12 07:24:41 +02:00
) : null;
2020-08-09 08:48:43 +02:00
const columns = [
2020-09-06 02:27:01 +02:00
{
key: 'username',
label: <FormattedMessage id="label.username" defaultMessage="Username" />,
2022-03-02 04:28:44 +01:00
className: 'col-12 col-lg-4',
2020-09-06 02:27:01 +02:00
},
2020-08-09 08:48:43 +02:00
{
2020-08-09 11:03:37 +02:00
key: 'is_admin',
2020-09-11 08:55:29 +02:00
label: <FormattedMessage id="label.administrator" defaultMessage="Administrator" />,
2022-03-02 04:28:44 +01:00
className: 'col-12 col-lg-3',
2020-08-12 07:24:41 +02:00
render: Checkmark,
2020-08-09 11:03:37 +02:00
},
{
key: 'dashboard',
label: <FormattedMessage id="label.dashboard" defaultMessage="Dashboard" />,
2022-03-02 04:28:44 +01:00
className: 'col-12 col-lg-3',
render: DashboardLink,
},
2020-08-09 11:03:37 +02:00
{
2020-09-11 08:55:29 +02:00
key: 'actions',
2022-03-02 04:28:44 +01:00
className: classNames(styles.buttons, 'col-12 col-lg-2 pt-2 pt-md-0'),
2020-08-12 07:24:41 +02:00
render: Buttons,
2020-08-09 08:48:43 +02:00
},
];
function handleSave() {
setSaved(state => state + 1);
2020-09-06 02:27:01 +02:00
setMessage(<FormattedMessage id="message.save-success" defaultMessage="Saved successfully." />);
2020-08-09 08:48:43 +02:00
handleClose();
}
function handleClose() {
setEditAccount(null);
setAddAccount(null);
setDeleteAccount(null);
}
if (!data) {
return null;
}
return (
<>
<PageHeader>
<div>
2020-09-17 07:29:40 +02:00
<FormattedMessage id="label.accounts" defaultMessage="Accounts" />
</div>
2020-08-09 08:48:43 +02:00
<Button icon={<Plus />} size="small" onClick={() => setAddAccount(true)}>
2020-10-13 07:53:59 +02:00
<FormattedMessage id="label.add-account" defaultMessage="Add account" />
2020-08-09 08:48:43 +02:00
</Button>
</PageHeader>
<Table columns={columns} rows={data} />
{editAccount && (
2020-10-13 07:53:59 +02:00
<Modal title={<FormattedMessage id="label.edit-account" defaultMessage="Edit account" />}>
2020-08-09 11:03:37 +02:00
<AccountEditForm
values={{ ...editAccount, password: '' }}
onSave={handleSave}
onClose={handleClose}
/>
2020-08-09 08:48:43 +02:00
</Modal>
)}
{addAccount && (
2020-10-13 07:53:59 +02:00
<Modal title={<FormattedMessage id="label.add-account" defaultMessage="Add account" />}>
2020-08-09 08:48:43 +02:00
<AccountEditForm onSave={handleSave} onClose={handleClose} />
</Modal>
)}
2020-08-09 11:03:37 +02:00
{deleteAccount && (
2020-09-06 02:27:01 +02:00
<Modal
2020-10-13 07:53:59 +02:00
title={<FormattedMessage id="label.delete-account" defaultMessage="Delete account" />}
2020-09-06 02:27:01 +02:00
>
2020-08-09 11:03:37 +02:00
<DeleteForm
values={{ type: 'account', id: deleteAccount.user_id, name: deleteAccount.username }}
onSave={handleSave}
onClose={handleClose}
/>
</Modal>
)}
2020-09-01 00:57:59 +02:00
{message && <Toast message={message} onClose={() => setMessage(null)} />}
2020-08-09 08:48:43 +02:00
</>
);
}