Refactored user components.

This commit is contained in:
Mike Cao 2023-01-23 15:32:35 -08:00
parent 91af593ff5
commit cdd54df8f6
16 changed files with 180 additions and 231 deletions

View file

@ -1,6 +1,6 @@
import { useState } from 'react';
import { defineMessages, useIntl } from 'react-intl';
import { Button, Icon, Modal, useToast } from 'react-basics';
import { Button, Icon, Text, Modal, useToast } from 'react-basics';
import PasswordEditForm from 'components/pages/settings/profile/PasswordEditForm';
import { Lock } from 'components/icons';
@ -9,7 +9,7 @@ const messages = defineMessages({
saved: { id: 'message.saved-successfully', defaultMessage: 'Saved successfully.' },
});
export default function ChangePasswordButton() {
export default function PasswordChangeButton() {
const { formatMessage } = useIntl();
const [edit, setEdit] = useState(false);
const { toast, showToast } = useToast();
@ -19,7 +19,7 @@ export default function ChangePasswordButton() {
setEdit(false);
};
const handleAdd = () => {
const handleEdit = () => {
setEdit(true);
};
@ -30,11 +30,11 @@ export default function ChangePasswordButton() {
return (
<>
{toast}
<Button onClick={handleAdd}>
<Button onClick={handleEdit}>
<Icon>
<Lock />
</Icon>
Change Password
<Text>{formatMessage(messages.changePassword)}</Text>
</Button>
{edit && (
<Modal title={formatMessage(messages.changePassword)} onClose={handleClose}>

View file

@ -3,7 +3,7 @@ import { defineMessages, useIntl } from 'react-intl';
import Page from 'components/layout/Page';
import PageHeader from 'components/layout/PageHeader';
import ProfileDetails from './ProfileDetails';
import ChangePasswordButton from './ChangePasswordButton';
import PasswordChangeButton from './PasswordChangeButton';
const messages = defineMessages({
profile: { id: 'label.profile', defaultMessage: 'Profile' },
@ -18,7 +18,7 @@ export default function ProfileSettings() {
<Breadcrumbs>
<Item>{formatMessage(messages.profile)}</Item>
</Breadcrumbs>
<ChangePasswordButton />
<PasswordChangeButton />
</PageHeader>
<ProfileDetails />
</Page>