diff --git a/assets/check.svg b/assets/check.svg new file mode 100644 index 00000000..1a7abdce --- /dev/null +++ b/assets/check.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/components/AccountSettings.js b/components/AccountSettings.js index 48267016..4d44f62d 100644 --- a/components/AccountSettings.js +++ b/components/AccountSettings.js @@ -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 => ( - <> - - - - ), + key: 'is_admin', + label: 'Administrator', + render: ({ is_admin }) => (is_admin ? } size="medium" /> : null), + }, + { + className: styles.buttons, + render: row => + row.username !== 'admin' ? ( + <> + + + + ) : null, }, ]; @@ -70,7 +80,11 @@ export default function AccountSettings() { {editAccount && ( - + )} {addAccount && ( @@ -78,6 +92,15 @@ export default function AccountSettings() { )} + {deleteAccount && ( + + + + )} ); } diff --git a/components/AccountSettings.module.css b/components/AccountSettings.module.css index 3152b274..91af3246 100644 --- a/components/AccountSettings.module.css +++ b/components/AccountSettings.module.css @@ -1,4 +1,4 @@ -.label { - font-size: var(--font-size-normal); - font-weight: 600; +.buttons { + display: flex; + justify-content: flex-end; } diff --git a/components/ProfileSettings.js b/components/ProfileSettings.js index 23f037ec..de38a4e8 100644 --- a/components/ProfileSettings.js +++ b/components/ProfileSettings.js @@ -8,6 +8,7 @@ import Modal from './common/Modal'; export default function ProfileSettings() { const user = useSelector(state => state.user); const [changePassword, setChangePassword] = useState(false); + const { user_id } = user; return ( <> @@ -17,11 +18,17 @@ export default function ProfileSettings() { Change password -
Username
-
{user.username}
+
+
Username
+
{user.username}
+
{changePassword && ( - setChangePassword(false)} /> + setChangePassword(false)} + onClose={() => setChangePassword(false)} + /> )} diff --git a/components/Settings.js b/components/Settings.js index 4b4e4197..09f31c33 100644 --- a/components/Settings.js +++ b/components/Settings.js @@ -4,10 +4,13 @@ import MenuLayout from 'components/layout/MenuLayout'; import WebsiteSettings from './WebsiteSettings'; import AccountSettings from './AccountSettings'; import ProfileSettings from './ProfileSettings'; - -const menuOptions = ['Websites', 'Accounts', 'Profile']; +import { useSelector } from 'react-redux'; export default function Settings() { + const user = useSelector(state => state.user); + + const menuOptions = ['Websites', user.is_admin && 'Accounts', 'Profile']; + return ( diff --git a/components/WebsiteSettings.js b/components/WebsiteSettings.js index 84f7f014..71ca472c 100644 --- a/components/WebsiteSettings.js +++ b/components/WebsiteSettings.js @@ -9,7 +9,7 @@ import Code from 'assets/code.svg'; import { get } from 'lib/web'; import Modal from './common/Modal'; import WebsiteEditForm from './forms/WebsiteEditForm'; -import WebsiteDeleteForm from './forms/WebsiteDeleteForm'; +import DeleteForm from './forms/DeleteForm'; import WebsiteCodeForm from './forms/WebsiteCodeForm'; import styles from './WebsiteSettings.module.css'; @@ -88,7 +88,11 @@ export default function WebsiteSettings() { )} {deleteWebsite && ( - + )} {showCode && ( diff --git a/components/forms/AccountEditForm.js b/components/forms/AccountEditForm.js index f877d386..96eea3df 100644 --- a/components/forms/AccountEditForm.js +++ b/components/forms/AccountEditForm.js @@ -14,13 +14,13 @@ const initialValues = { password: '', }; -const validate = ({ username, password }) => { +const validate = ({ user_id, username, password }) => { const errors = {}; if (!username) { errors.username = 'Required'; } - if (!password) { + if (!user_id && !password) { errors.password = 'Required'; } @@ -33,10 +33,10 @@ export default function AccountEditForm({ values, onSave, onClose }) { const handleSubmit = async values => { const response = await post(`/api/account`, values); - if (response) { + if (typeof response !== 'string') { onSave(); } else { - setMessage('Something went wrong.'); + setMessage(response || 'Something went wrong'); } }; @@ -56,7 +56,7 @@ export default function AccountEditForm({ values, onSave, onClose }) { - + diff --git a/components/forms/ChangePasswordForm.js b/components/forms/ChangePasswordForm.js index a59de0ba..f3e5927a 100644 --- a/components/forms/ChangePasswordForm.js +++ b/components/forms/ChangePasswordForm.js @@ -10,24 +10,24 @@ import FormLayout, { } from 'components/layout/FormLayout'; const initialValues = { - password: '', - newPassword: '', - defaultPassword: '', + current_password: '', + new_password: '', + confirm_password: '', }; -const validate = ({ password, newPassword, confirmPassword }) => { +const validate = ({ current_password, new_password, confirm_password }) => { const errors = {}; - if (!password) { - errors.password = 'Required'; + if (!current_password) { + errors.current_password = 'Required'; } - if (!newPassword) { - errors.newPassword = 'Required'; + if (!new_password) { + errors.new_password = 'Required'; } - if (!confirmPassword) { - errors.confirmPassword = 'Required'; - } else if (newPassword !== confirmPassword) { - errors.confirmPassword = `Passwords don't match`; + if (!confirm_password) { + errors.confirm_password = 'Required'; + } else if (new_password !== confirm_password) { + errors.confirm_password = `Passwords don't match`; } return errors; @@ -37,12 +37,12 @@ export default function ChangePasswordForm({ values, onSave, onClose }) { const [message, setMessage] = useState(); const handleSubmit = async values => { - const response = await post(`/api/website`, values); + const response = await post(`/api/account/password`, values); - if (response) { + if (typeof response !== 'string') { onSave(); } else { - setMessage('Something went wrong.'); + setMessage(response || 'Something went wrong'); } }; @@ -56,19 +56,19 @@ export default function ChangePasswordForm({ values, onSave, onClose }) { {() => (
- - - + + + - - - + + + - - - + + +