mirror of
https://github.com/umami-software/umami.git
synced 2025-12-08 05:12:36 +01:00
Convert text for internationalization.
This commit is contained in:
Mike Cao
parent
6833a5bdb0
commit
f0ac9b6522
36 changed files with 1091 additions and 196 deletions
|
|
@ -15,6 +15,7 @@ import Trash from 'assets/trash.svg';
|
|||
import Check from 'assets/check.svg';
|
||||
import styles from './AccountSettings.module.css';
|
||||
import Toast from '../common/Toast';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
|
||||
export default function AccountSettings() {
|
||||
const [addAccount, setAddAccount] = useState();
|
||||
|
|
@ -30,19 +31,27 @@ export default function AccountSettings() {
|
|||
row.username !== 'admin' ? (
|
||||
<ButtonLayout>
|
||||
<Button icon={<Pen />} size="small" onClick={() => setEditAccount(row)}>
|
||||
<div>Edit</div>
|
||||
<div>
|
||||
<FormattedMessage id="button.edit" defaultMessage="Edit" />
|
||||
</div>
|
||||
</Button>
|
||||
<Button icon={<Trash />} size="small" onClick={() => setDeleteAccount(row)}>
|
||||
<div>Delete</div>
|
||||
<div>
|
||||
<FormattedMessage id="button.delete" defaultMessage="Delete" />
|
||||
</div>
|
||||
</Button>
|
||||
</ButtonLayout>
|
||||
) : null;
|
||||
|
||||
const columns = [
|
||||
{ key: 'username', label: 'Username', className: 'col-6 col-md-4' },
|
||||
{
|
||||
key: 'username',
|
||||
label: <FormattedMessage id="label.username" defaultMessage="Username" />,
|
||||
className: 'col-6 col-md-4',
|
||||
},
|
||||
{
|
||||
key: 'is_admin',
|
||||
label: 'Administrator',
|
||||
label: <FormattedMessage id="label.adminsitrator" defaultMessage="Administrator" />,
|
||||
className: 'col-6 col-md-4',
|
||||
render: Checkmark,
|
||||
},
|
||||
|
|
@ -54,7 +63,7 @@ export default function AccountSettings() {
|
|||
|
||||
function handleSave() {
|
||||
setSaved(state => state + 1);
|
||||
setMessage('Saved successfully.');
|
||||
setMessage(<FormattedMessage id="message.save-success" defaultMessage="Saved successfully." />);
|
||||
handleClose();
|
||||
}
|
||||
|
||||
|
|
@ -73,12 +82,14 @@ export default function AccountSettings() {
|
|||
<PageHeader>
|
||||
<div>Accounts</div>
|
||||
<Button icon={<Plus />} size="small" onClick={() => setAddAccount(true)}>
|
||||
<div>Add account</div>
|
||||
<div>
|
||||
<FormattedMessage id="button.add-account" defaultMessage="Add account" />
|
||||
</div>
|
||||
</Button>
|
||||
</PageHeader>
|
||||
<Table columns={columns} rows={data} />
|
||||
{editAccount && (
|
||||
<Modal title="Edit account">
|
||||
<Modal title={<FormattedMessage id="title.edit-account" defaultMessage="Edit account" />}>
|
||||
<AccountEditForm
|
||||
values={{ ...editAccount, password: '' }}
|
||||
onSave={handleSave}
|
||||
|
|
@ -87,12 +98,14 @@ export default function AccountSettings() {
|
|||
</Modal>
|
||||
)}
|
||||
{addAccount && (
|
||||
<Modal title="Add account">
|
||||
<Modal title={<FormattedMessage id="title.add-account" defaultMessage="Add account" />}>
|
||||
<AccountEditForm onSave={handleSave} onClose={handleClose} />
|
||||
</Modal>
|
||||
)}
|
||||
{deleteAccount && (
|
||||
<Modal title="Delete account">
|
||||
<Modal
|
||||
title={<FormattedMessage id="title.delete-account" defaultMessage="Delete account" />}
|
||||
>
|
||||
<DeleteForm
|
||||
values={{ type: 'account', id: deleteAccount.user_id, name: deleteAccount.username }}
|
||||
onSave={handleSave}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,12 @@
|
|||
import React, { useState } from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import { useSelector } from 'react-redux';
|
||||
import PageHeader from 'components/layout/PageHeader';
|
||||
import Button from 'components/common/Button';
|
||||
import ChangePasswordForm from '../forms/ChangePasswordForm';
|
||||
import Modal from 'components/common/Modal';
|
||||
import Toast from 'components/common/Toast';
|
||||
import ChangePasswordForm from 'components/forms/ChangePasswordForm';
|
||||
import Dots from 'assets/ellipsis-h.svg';
|
||||
import Toast from '../common/Toast';
|
||||
|
||||
export default function ProfileSettings() {
|
||||
const user = useSelector(state => state.user);
|
||||
|
|
@ -15,19 +16,25 @@ export default function ProfileSettings() {
|
|||
|
||||
function handleSave() {
|
||||
setChangePassword(false);
|
||||
setMessage('Saved successfully.');
|
||||
setMessage(<FormattedMessage id="message.save-success" defaultMessage="Saved successfully." />);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageHeader>
|
||||
<div>Profile</div>
|
||||
<div>
|
||||
<FormattedMessage id="settings.profile" defaultMessage="Profile" />
|
||||
</div>
|
||||
<Button icon={<Dots />} size="small" onClick={() => setChangePassword(true)}>
|
||||
<div>Change password</div>
|
||||
<div>
|
||||
<FormattedMessage id="button.change-password" defaultMessage="Change password" />
|
||||
</div>
|
||||
</Button>
|
||||
</PageHeader>
|
||||
<dl>
|
||||
<dt>Username</dt>
|
||||
<dt>
|
||||
<FormattedMessage id="label.username" defaultMessage="Username" />
|
||||
</dt>
|
||||
<dd>{user.username}</dd>
|
||||
</dl>
|
||||
{changePassword && (
|
||||
|
|
|
|||
|
|
@ -5,23 +5,35 @@ import WebsiteSettings from './WebsiteSettings';
|
|||
import AccountSettings from './AccountSettings';
|
||||
import ProfileSettings from './ProfileSettings';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
|
||||
const WEBSITES = 1;
|
||||
const ACCOUNTS = 2;
|
||||
const PROFILE = 3;
|
||||
|
||||
export default function Settings() {
|
||||
const user = useSelector(state => state.user);
|
||||
const [option, setOption] = useState(1);
|
||||
const [option, setOption] = useState(WEBSITES);
|
||||
|
||||
const menuOptions = [
|
||||
{ label: 'Websites', value: 1 },
|
||||
{ label: 'Accounts', value: 2, hidden: !user.is_admin },
|
||||
{ label: 'Profile', value: 3 },
|
||||
{
|
||||
label: <FormattedMessage id="settings.websites" defaultMessage="Websites" />,
|
||||
value: WEBSITES,
|
||||
},
|
||||
{
|
||||
label: <FormattedMessage id="settings.accounts" defaultMessage="Accounts" />,
|
||||
value: ACCOUNTS,
|
||||
hidden: !user.is_admin,
|
||||
},
|
||||
{ label: <FormattedMessage id="settings.profile" defaultMessage="Profile" />, value: PROFILE },
|
||||
];
|
||||
|
||||
return (
|
||||
<Page>
|
||||
<MenuLayout menu={menuOptions} selectedOption={option} onMenuSelect={setOption}>
|
||||
{option === 1 && <WebsiteSettings />}
|
||||
{option === 2 && <AccountSettings />}
|
||||
{option === 3 && <ProfileSettings />}
|
||||
{option === WEBSITES && <WebsiteSettings />}
|
||||
{option === ACCOUNTS && <AccountSettings />}
|
||||
{option === PROFILE && <ProfileSettings />}
|
||||
</MenuLayout>
|
||||
</Page>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,23 +1,24 @@
|
|||
import React, { useState } from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import classNames from 'classnames';
|
||||
import Table from 'components/common/Table';
|
||||
import Button from 'components/common/Button';
|
||||
import PageHeader from 'components/layout/PageHeader';
|
||||
import Modal from 'components/common/Modal';
|
||||
import WebsiteEditForm from '../forms/WebsiteEditForm';
|
||||
import DeleteForm from '../forms/DeleteForm';
|
||||
import TrackingCodeForm from '../forms/TrackingCodeForm';
|
||||
import ShareUrlForm from '../forms/ShareUrlForm';
|
||||
import WebsiteEditForm from 'components/forms/WebsiteEditForm';
|
||||
import DeleteForm from 'components/forms/DeleteForm';
|
||||
import TrackingCodeForm from 'components/forms/TrackingCodeForm';
|
||||
import ShareUrlForm from 'components/forms/ShareUrlForm';
|
||||
import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
|
||||
import ButtonLayout from 'components/layout/ButtonLayout';
|
||||
import Toast from 'components/common/Toast';
|
||||
import Pen from 'assets/pen.svg';
|
||||
import Trash from 'assets/trash.svg';
|
||||
import Plus from 'assets/plus.svg';
|
||||
import Code from 'assets/code.svg';
|
||||
import Link from 'assets/link.svg';
|
||||
import useFetch from 'hooks/useFetch';
|
||||
import styles from './WebsiteSettings.module.css';
|
||||
import useFetch from '../../hooks/useFetch';
|
||||
import Toast from '../common/Toast';
|
||||
|
||||
export default function WebsiteSettings() {
|
||||
const [editWebsite, setEditWebsite] = useState();
|
||||
|
|
@ -35,7 +36,7 @@ export default function WebsiteSettings() {
|
|||
<Button
|
||||
icon={<Link />}
|
||||
size="small"
|
||||
tooltip="Share URL"
|
||||
tooltip={<FormattedMessage id="tooltip.get-share-url" defaultMessage="Get share URL" />}
|
||||
tooltipId={`button-share-${row.website_id}`}
|
||||
onClick={() => setShowUrl(row)}
|
||||
/>
|
||||
|
|
@ -43,22 +44,36 @@ export default function WebsiteSettings() {
|
|||
<Button
|
||||
icon={<Code />}
|
||||
size="small"
|
||||
tooltip="Get tracking code"
|
||||
tooltip={
|
||||
<FormattedMessage id="tooltip.get-tracking-code" defaultMessage="Get tracking code" />
|
||||
}
|
||||
tooltipId={`button-code-${row.website_id}`}
|
||||
onClick={() => setShowCode(row)}
|
||||
/>
|
||||
<Button icon={<Pen />} size="small" onClick={() => setEditWebsite(row)}>
|
||||
<div>Edit</div>
|
||||
<div>
|
||||
<FormattedMessage id="button.edit" defaultMessage="Edit" />
|
||||
</div>
|
||||
</Button>
|
||||
<Button icon={<Trash />} size="small" onClick={() => setDeleteWebsite(row)}>
|
||||
<div>Delete</div>
|
||||
<div>
|
||||
<FormattedMessage id="button.delete" defaultMessage="Delete" />
|
||||
</div>
|
||||
</Button>
|
||||
</ButtonLayout>
|
||||
);
|
||||
|
||||
const columns = [
|
||||
{ key: 'name', label: 'Name', className: 'col-6 col-md-4' },
|
||||
{ key: 'domain', label: 'Domain', className: 'col-6 col-md-4' },
|
||||
{
|
||||
key: 'name',
|
||||
label: <FormattedMessage id="label.name" defaultMessage="Name" />,
|
||||
className: 'col-6 col-md-4',
|
||||
},
|
||||
{
|
||||
key: 'domain',
|
||||
label: <FormattedMessage id="label.domain" defaultMessage="Domain" />,
|
||||
className: 'col-6 col-md-4',
|
||||
},
|
||||
{
|
||||
key: 'action',
|
||||
className: classNames(styles.buttons, 'col-12 col-md-4 pt-2 pt-md-0'),
|
||||
|
|
@ -68,7 +83,7 @@ export default function WebsiteSettings() {
|
|||
|
||||
function handleSave() {
|
||||
setSaved(state => state + 1);
|
||||
setMessage('Saved successfully.');
|
||||
setMessage(<FormattedMessage id="message.save-success" defaultMessage="Saved successfully." />);
|
||||
handleClose();
|
||||
}
|
||||
|
||||
|
|
@ -85,9 +100,18 @@ export default function WebsiteSettings() {
|
|||
}
|
||||
|
||||
const empty = (
|
||||
<EmptyPlaceholder msg={"You don't have any websites configured."}>
|
||||
<EmptyPlaceholder
|
||||
msg={
|
||||
<FormattedMessage
|
||||
id="placeholder.message.no-websites-configured"
|
||||
defaultMessage="You don't have any websites configured."
|
||||
/>
|
||||
}
|
||||
>
|
||||
<Button icon={<Plus />} size="medium" onClick={() => setAddWebsite(true)}>
|
||||
<div>Add website</div>
|
||||
<div>
|
||||
<FormattedMessage id="button.add-website" defaultMessage="Add website" />
|
||||
</div>
|
||||
</Button>
|
||||
</EmptyPlaceholder>
|
||||
);
|
||||
|
|
@ -95,24 +119,30 @@ export default function WebsiteSettings() {
|
|||
return (
|
||||
<>
|
||||
<PageHeader>
|
||||
<div>Websites</div>
|
||||
<div>
|
||||
<FormattedMessage id="settings.websites" defaultMessage="Websites" />
|
||||
</div>
|
||||
<Button icon={<Plus />} size="small" onClick={() => setAddWebsite(true)}>
|
||||
<div>Add website</div>
|
||||
<div>
|
||||
<FormattedMessage id="button.add-website" defaultMessage="Add website" />
|
||||
</div>
|
||||
</Button>
|
||||
</PageHeader>
|
||||
<Table columns={columns} rows={data} empty={empty} />
|
||||
{editWebsite && (
|
||||
<Modal title="Edit website">
|
||||
<Modal title={<FormattedMessage id="title.edit-website" defaultMessage="Edit website" />}>
|
||||
<WebsiteEditForm values={editWebsite} onSave={handleSave} onClose={handleClose} />
|
||||
</Modal>
|
||||
)}
|
||||
{addWebsite && (
|
||||
<Modal title="Add website">
|
||||
<Modal title={<FormattedMessage id="title.add-website" defaultMessage="Add website" />}>
|
||||
<WebsiteEditForm onSave={handleSave} onClose={handleClose} />
|
||||
</Modal>
|
||||
)}
|
||||
{deleteWebsite && (
|
||||
<Modal title="Delete website">
|
||||
<Modal
|
||||
title={<FormattedMessage id="title.delete-website" defaultMessage="Delete website" />}
|
||||
>
|
||||
<DeleteForm
|
||||
values={{ type: 'website', id: deleteWebsite.website_id, name: deleteWebsite.name }}
|
||||
onSave={handleSave}
|
||||
|
|
@ -121,12 +151,12 @@ export default function WebsiteSettings() {
|
|||
</Modal>
|
||||
)}
|
||||
{showCode && (
|
||||
<Modal title="Tracking code">
|
||||
<Modal title={<FormattedMessage id="title.tracking-code" defaultMessage="Tracking code" />}>
|
||||
<TrackingCodeForm values={showCode} onClose={handleClose} />
|
||||
</Modal>
|
||||
)}
|
||||
{showUrl && (
|
||||
<Modal title="Share URL">
|
||||
<Modal title={<FormattedMessage id="title.share-url" defaultMessage="Share URL" />}>
|
||||
<ShareUrlForm values={showUrl} onClose={handleClose} />
|
||||
</Modal>
|
||||
)}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue