1
0
mirror of https://github.com/kremalicious/umami.git synced 2024-12-22 09:13:37 +01:00
umami/components/settings/ProfileSettings.js

73 lines
2.4 KiB
JavaScript
Raw Normal View History

2020-08-09 08:48:43 +02:00
import React, { useState } from 'react';
2020-09-06 02:27:01 +02:00
import { FormattedMessage } from 'react-intl';
import { useSelector } from 'react-redux';
2020-08-12 07:24:41 +02:00
import PageHeader from 'components/layout/PageHeader';
import Button from 'components/common/Button';
import Modal from 'components/common/Modal';
2020-09-06 02:27:01 +02:00
import Toast from 'components/common/Toast';
import ChangePasswordForm from 'components/forms/ChangePasswordForm';
import TimezoneSetting from 'components/settings/TimezoneSetting';
2020-08-15 10:17:15 +02:00
import Dots from 'assets/ellipsis-h.svg';
import styles from './ProfileSettings.module.css';
import DateRangeSetting from './DateRangeSetting';
import useEscapeKey from 'hooks/useEscapeKey';
2020-08-09 08:48:43 +02:00
export default function ProfileSettings() {
const user = useSelector(state => state.user);
const [changePassword, setChangePassword] = useState(false);
2020-09-01 00:57:59 +02:00
const [message, setMessage] = useState();
2020-08-09 11:03:37 +02:00
const { user_id } = user;
2020-08-09 08:48:43 +02:00
2020-09-01 00:57:59 +02:00
function handleSave() {
setChangePassword(false);
2020-09-06 02:27:01 +02:00
setMessage(<FormattedMessage id="message.save-success" defaultMessage="Saved successfully." />);
2020-09-01 00:57:59 +02:00
}
useEscapeKey(() => {
setChangePassword(false);
});
2020-08-09 08:48:43 +02:00
return (
<>
<PageHeader>
2020-09-06 02:27:01 +02:00
<div>
2020-09-17 07:29:40 +02:00
<FormattedMessage id="label.profile" defaultMessage="Profile" />
2020-09-06 02:27:01 +02:00
</div>
2020-08-15 10:17:15 +02:00
<Button icon={<Dots />} size="small" onClick={() => setChangePassword(true)}>
2020-10-13 07:53:59 +02:00
<FormattedMessage id="label.change-password" defaultMessage="Change password" />
2020-08-09 08:48:43 +02:00
</Button>
</PageHeader>
<dl className={styles.list}>
2020-09-06 02:27:01 +02:00
<dt>
<FormattedMessage id="label.username" defaultMessage="Username" />
</dt>
2020-08-09 11:03:37 +02:00
<dd>{user.username}</dd>
<dt>
<FormattedMessage id="label.timezone" defaultMessage="Timezone" />
</dt>
<dd>
<TimezoneSetting />
</dd>
<dt>
<FormattedMessage id="label.default-date-range" defaultMessage="Default date range" />
</dt>
<dd>
<DateRangeSetting />
</dd>
2020-08-09 11:03:37 +02:00
</dl>
2020-08-09 08:48:43 +02:00
{changePassword && (
2020-09-12 12:22:14 +02:00
<Modal
2020-10-13 07:53:59 +02:00
title={<FormattedMessage id="label.change-password" defaultMessage="Change password" />}
2020-09-12 12:22:14 +02:00
>
2020-08-09 11:03:37 +02:00
<ChangePasswordForm
values={{ user_id }}
2020-09-01 00:57:59 +02:00
onSave={handleSave}
2020-08-09 11:03:37 +02:00
onClose={() => setChangePassword(false)}
/>
2020-08-09 08:48:43 +02:00
</Modal>
)}
2020-09-01 00:57:59 +02:00
{message && <Toast message={message} onClose={() => setMessage(null)} />}
2020-08-09 08:48:43 +02:00
</>
);
}