Account editing and change password.

This commit is contained in:
Mike Cao 2020-08-09 02:03:37 -07:00
parent b5cf9f8719
commit b392a51676
23 changed files with 230 additions and 102 deletions

View file

@ -1,16 +1,19 @@
import React, { useState, useEffect } from 'react';
import { useSelector } from 'react-redux';
import PageHeader from './layout/PageHeader';
import Button from './common/Button';
import Table from './common/Table';
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 WebsiteEditForm from 'components/forms/WebsiteEditForm';
import AccountEditForm from 'components/forms/AccountEditForm';
import Pen from 'assets/pen.svg';
import Plus from 'assets/plus.svg';
import Trash from 'assets/trash.svg';
import Check from 'assets/check.svg';
import { get } from 'lib/web';
import styles from './AccountSettings.module.css';
import Modal from './common/Modal';
import WebsiteEditForm from './forms/WebsiteEditForm';
import AccountEditForm from './forms/AccountEditForm';
import DeleteForm from './forms/DeleteForm';
export default function AccountSettings() {
const user = useSelector(state => state.user);
@ -23,16 +26,23 @@ export default function AccountSettings() {
const columns = [
{ key: 'username', label: 'Username' },
{
render: row => (
<>
<Button icon={<Pen />} size="small" onClick={() => setEditAccount(row)}>
<div>Edit</div>
</Button>
<Button icon={<Trash />} size="small" onClick={() => setDeleteAccount(row)}>
<div>Delete</div>
</Button>
</>
),
key: 'is_admin',
label: 'Administrator',
render: ({ is_admin }) => (is_admin ? <Icon icon={<Check />} size="medium" /> : null),
},
{
className: styles.buttons,
render: 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,
},
];
@ -70,7 +80,11 @@ export default function AccountSettings() {
<Table columns={columns} rows={data} />
{editAccount && (
<Modal title="Edit account">
<AccountEditForm values={editAccount} onSave={handleSave} onClose={handleClose} />
<AccountEditForm
values={{ ...editAccount, password: '' }}
onSave={handleSave}
onClose={handleClose}
/>
</Modal>
)}
{addAccount && (
@ -78,6 +92,15 @@ export default function AccountSettings() {
<AccountEditForm onSave={handleSave} onClose={handleClose} />
</Modal>
)}
{deleteAccount && (
<Modal title="Delete account">
<DeleteForm
values={{ type: 'account', id: deleteAccount.user_id, name: deleteAccount.username }}
onSave={handleSave}
onClose={handleClose}
/>
</Modal>
)}
</>
);
}