umami/components/AccountSettings.js

109 lines
2.9 KiB
JavaScript
Raw Normal View History

2020-08-09 08:48:43 +02:00
import React, { useState, useEffect } from 'react';
import { useSelector } from 'react-redux';
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';
import AccountEditForm from 'components/forms/AccountEditForm';
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';
2020-08-09 08:48:43 +02:00
import { get } from 'lib/web';
import styles from './AccountSettings.module.css';
2020-08-09 11:03:37 +02:00
import DeleteForm from './forms/DeleteForm';
2020-08-09 08:48:43 +02:00
export default function AccountSettings() {
const [data, setData] = useState();
const [addAccount, setAddAccount] = useState();
const [editAccount, setEditAccount] = useState();
const [deleteAccount, setDeleteAccount] = useState();
const [saved, setSaved] = useState(0);
2020-08-12 07:24:41 +02:00
const Checkmark = ({ is_admin }) => (is_admin ? <Icon icon={<Check />} size="medium" /> : null);
const Buttons = row =>
row.username !== 'admin' ? (
<>
<Button icon={<Pen />} size="small" onClick={() => setEditAccount(row)}>
<div>Edit</div>
</Button>
<Button icon={<Trash />} size="small" onClick={() => setDeleteAccount(row)}>
<div>Delete</div>
</Button>
</>
) : null;
2020-08-09 08:48:43 +02:00
const columns = [
{ key: 'username', label: 'Username' },
{
2020-08-09 11:03:37 +02:00
key: 'is_admin',
label: 'Administrator',
2020-08-12 07:24:41 +02:00
render: Checkmark,
2020-08-09 11:03:37 +02:00
},
{
className: styles.buttons,
2020-08-12 07:24:41 +02:00
render: Buttons,
2020-08-09 08:48:43 +02:00
},
];
function handleSave() {
setSaved(state => state + 1);
handleClose();
}
function handleClose() {
setEditAccount(null);
setAddAccount(null);
setDeleteAccount(null);
}
async function loadData() {
2020-08-12 07:24:41 +02:00
setData(await get(`/api/accounts`));
2020-08-09 08:48:43 +02:00
}
useEffect(() => {
loadData();
}, [saved]);
if (!data) {
return null;
}
return (
<>
<PageHeader>
<div>Accounts</div>
<Button icon={<Plus />} size="small" onClick={() => setAddAccount(true)}>
<div>Add account</div>
</Button>
</PageHeader>
<Table columns={columns} rows={data} />
{editAccount && (
<Modal title="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 && (
<Modal title="Add account">
<AccountEditForm onSave={handleSave} onClose={handleClose} />
</Modal>
)}
2020-08-09 11:03:37 +02:00
{deleteAccount && (
<Modal title="Delete account">
<DeleteForm
values={{ type: 'account', id: deleteAccount.user_id, name: deleteAccount.username }}
onSave={handleSave}
onClose={handleClose}
/>
</Modal>
)}
2020-08-09 08:48:43 +02:00
</>
);
}