Convert text for internationalization.

This commit is contained in:
Mike Cao 2020-09-05 17:27:01 -07:00
parent 6833a5bdb0
commit f0ac9b6522
36 changed files with 1091 additions and 196 deletions

View file

@ -1,4 +1,5 @@
import React, { useState } from 'react';
import { FormattedMessage } from 'react-intl';
import { Formik, Form, Field } from 'formik';
import { post } from 'lib/web';
import Button from 'components/common/Button';
@ -18,10 +19,10 @@ const validate = ({ user_id, username, password }) => {
const errors = {};
if (!username) {
errors.username = 'Required';
errors.username = <FormattedMessage id="label.required" defaultMessage="Required" />;
}
if (!user_id && !password) {
errors.password = 'Required';
errors.password = <FormattedMessage id="label.required" defaultMessage="Required" />;
}
return errors;
@ -36,7 +37,11 @@ export default function AccountEditForm({ values, onSave, onClose }) {
if (typeof response !== 'string') {
onSave();
} else {
setMessage(response || 'Something went wrong');
setMessage(
response || (
<FormattedMessage id="message.failure" defaultMessage="Something went wrong." />
),
);
}
};
@ -50,20 +55,26 @@ export default function AccountEditForm({ values, onSave, onClose }) {
{() => (
<Form>
<FormRow>
<label htmlFor="username">Username</label>
<label htmlFor="username">
<FormattedMessage id="label.username" defaultMessage="Username" />
</label>
<Field name="username" type="text" />
<FormError name="username" />
</FormRow>
<FormRow>
<label htmlFor="password">Password</label>
<label htmlFor="password">
<FormattedMessage id="label.password" defaultMessage="Password" />
</label>
<Field name="password" type="password" />
<FormError name="password" />
</FormRow>
<FormButtons>
<Button type="submit" variant="action">
Save
<FormattedMessage id="button.save" defaultMessage="Save" />
</Button>
<Button onClick={onClose}>
<FormattedMessage id="button.cancel" defaultMessage="Cancel" />
</Button>
<Button onClick={onClose}>Cancel</Button>
</FormButtons>
<FormMessage>{message}</FormMessage>
</Form>

View file

@ -1,4 +1,5 @@
import React, { useState } from 'react';
import { FormattedMessage } from 'react-intl';
import { Formik, Form, Field } from 'formik';
import { post } from 'lib/web';
import Button from 'components/common/Button';
@ -19,15 +20,17 @@ const validate = ({ current_password, new_password, confirm_password }) => {
const errors = {};
if (!current_password) {
errors.current_password = 'Required';
errors.current_password = <FormattedMessage id="label.required" defaultMessage="Required" />;
}
if (!new_password) {
errors.new_password = 'Required';
errors.new_password = <FormattedMessage id="label.required" defaultMessage="Required" />;
}
if (!confirm_password) {
errors.confirm_password = 'Required';
errors.confirm_password = <FormattedMessage id="label.required" defaultMessage="Required" />;
} else if (new_password !== confirm_password) {
errors.confirm_password = `Passwords don't match`;
errors.confirm_password = (
<FormattedMessage id="label.passwords-dont-match" defaultMessage="Passwords don't match" />
);
}
return errors;
@ -42,7 +45,11 @@ export default function ChangePasswordForm({ values, onSave, onClose }) {
if (typeof response !== 'string') {
onSave();
} else {
setMessage(response || 'Something went wrong');
setMessage(
response || (
<FormattedMessage id="message.failure" defaultMessage="Something went wrong." />
),
);
}
};
@ -56,25 +63,33 @@ export default function ChangePasswordForm({ values, onSave, onClose }) {
{() => (
<Form>
<FormRow>
<label htmlFor="current_password">Current password</label>
<label htmlFor="current_password">
<FormattedMessage id="label.current-password" defaultMessage="Current password" />
</label>
<Field name="current_password" type="password" />
<FormError name="current_password" />
</FormRow>
<FormRow>
<label htmlFor="new_password">New password</label>
<label htmlFor="new_password">
<FormattedMessage id="label.new-password" defaultMessage="New password" />
</label>
<Field name="new_password" type="password" />
<FormError name="new_password" />
</FormRow>
<FormRow>
<label htmlFor="confirm_password">Confirm password</label>
<label htmlFor="confirm_password">
<FormattedMessage id="label.confirm-password" defaultMessage="Confirm password" />
</label>
<Field name="confirm_password" type="password" />
<FormError name="confirm_password" />
</FormRow>
<FormButtons>
<Button type="submit" variant="action">
Save
<FormattedMessage id="button.save" defaultMessage="Save" />
</Button>
<Button onClick={onClose}>
<FormattedMessage id="button.cancel" defaultMessage="Cancel" />
</Button>
<Button onClick={onClose}>Cancel</Button>
</FormButtons>
<FormMessage>{message}</FormMessage>
</Form>

View file

@ -8,12 +8,17 @@ import FormLayout, {
FormMessage,
FormRow,
} from 'components/layout/FormLayout';
import { FormattedMessage } from 'react-intl';
const validate = ({ confirmation }) => {
const errors = {};
if (confirmation !== 'DELETE') {
errors.confirmation = !confirmation ? 'Required' : 'Invalid';
errors.confirmation = !confirmation ? (
<FormattedMessage id="label.required" defaultMessage="Required" />
) : (
<FormattedMessage id="label.invalid" defaultMessage="Invalid" />
);
}
return errors;
@ -28,7 +33,7 @@ export default function DeleteForm({ values, onSave, onClose }) {
if (typeof response !== 'string') {
onSave();
} else {
setMessage('Something went wrong');
setMessage(<FormattedMessage id="message.failure" defaultMessage="Something went wrong." />);
}
};
@ -42,11 +47,24 @@ export default function DeleteForm({ values, onSave, onClose }) {
{() => (
<Form>
<div>
Are your sure you want to delete <b>{values.name}</b>?
<FormattedMessage
id="message.confirm-delete"
defaultMessage="Are your sure you want to delete {target}?"
values={{ target: <b>{values.name}</b> }}
/>
</div>
<div>
<FormattedMessage
id="message.delete-warning"
defaultMessage="All associated data will be deleted as well."
/>
</div>
<div>All associated data will be deleted as well.</div>
<p>
Type <b>DELETE</b> in the box below to confirm.
<FormattedMessage
id="message.type-delete"
defaultMessage="Type {delete} in the box below to confirm."
values={{ delete: <b>DELETE</b> }}
/>
</p>
<FormRow>
<Field name="confirmation" type="text" />
@ -54,9 +72,11 @@ export default function DeleteForm({ values, onSave, onClose }) {
</FormRow>
<FormButtons>
<Button type="submit" variant="danger">
Delete
<FormattedMessage id="button.delete" defaultMessage="Delete" />
</Button>
<Button onClick={onClose}>
<FormattedMessage id="button.cancel" defaultMessage="Cancel" />
</Button>
<Button onClick={onClose}>Cancel</Button>
</FormButtons>
<FormMessage>{message}</FormMessage>
</Form>

View file

@ -1,4 +1,5 @@
import React, { useState } from 'react';
import { FormattedMessage } from 'react-intl';
import { Formik, Form, Field } from 'formik';
import Router from 'next/router';
import { post } from 'lib/web';
@ -54,18 +55,22 @@ export default function LoginForm() {
<Icon icon={<Logo />} size="xlarge" className={styles.icon} />
<h1 className="center">umami</h1>
<FormRow>
<label htmlFor="username">Username</label>
<label htmlFor="username">
<FormattedMessage id="label.username" defaultMessage="Username" />
</label>
<Field name="username" type="text" />
<FormError name="username" />
</FormRow>
<FormRow>
<label htmlFor="password">Password</label>
<label htmlFor="password">
<FormattedMessage id="label.password" defaultMessage="Password" />
</label>
<Field name="password" type="password" />
<FormError name="password" />
</FormRow>
<FormButtons>
<Button type="submit" variant="action">
Login
<FormattedMessage id="button.login" defaultMessage="Login" />
</Button>
</FormButtons>
<FormMessage>{message}</FormMessage>

View file

@ -1,7 +1,8 @@
import React, { useRef } from 'react';
import { FormattedMessage } from 'react-intl';
import Button from 'components/common/Button';
import FormLayout, { FormButtons, FormRow } from 'components/layout/FormLayout';
import CopyButton from '../common/CopyButton';
import CopyButton from 'components/common/CopyButton';
export default function TrackingCodeForm({ values, onClose }) {
const ref = useRef();
@ -10,7 +11,11 @@ export default function TrackingCodeForm({ values, onClose }) {
return (
<FormLayout>
<p>
This is the publicly shared URL for <b>{values.name}</b>.
<FormattedMessage
id="message.share-url"
defaultMessage="This is the publicly shared URL for {target}."
values={{ target: <b>{values.name}</b> }}
/>
</p>
<FormRow>
<textarea
@ -24,7 +29,9 @@ export default function TrackingCodeForm({ values, onClose }) {
</FormRow>
<FormButtons>
<CopyButton type="submit" variant="action" element={ref} />
<Button onClick={onClose}>Cancel</Button>
<Button onClick={onClose}>
<FormattedMessage id="button.cancel" defaultMessage="Cancel" />
</Button>
</FormButtons>
</FormLayout>
);

View file

@ -1,4 +1,5 @@
import React, { useRef } from 'react';
import { FormattedMessage } from 'react-intl';
import Button from 'components/common/Button';
import FormLayout, { FormButtons, FormRow } from 'components/layout/FormLayout';
import CopyButton from '../common/CopyButton';
@ -9,8 +10,11 @@ export default function TrackingCodeForm({ values, onClose }) {
return (
<FormLayout>
<p>
To track stats for <b>{values.name}</b>, place the following code in the &lt;head&gt;
section of your website.
<FormattedMessage
id="message.track-stats"
defaultMessage="To track stats for {target}, place the following code in the {head} section of your website."
values={{ head: '<head>', target: <b>{values.name}</b> }}
/>
</p>
<FormRow>
<textarea
@ -24,7 +28,9 @@ export default function TrackingCodeForm({ values, onClose }) {
</FormRow>
<FormButtons>
<CopyButton type="submit" variant="action" element={ref} />
<Button onClick={onClose}>Cancel</Button>
<Button onClick={onClose}>
<FormattedMessage id="button.cancel" defaultMessage="Cancel" />
</Button>
</FormButtons>
</FormLayout>
);

View file

@ -1,4 +1,5 @@
import React, { useState } from 'react';
import { FormattedMessage } from 'react-intl';
import { Formik, Form, Field } from 'formik';
import { post } from 'lib/web';
import Button from 'components/common/Button';
@ -21,12 +22,12 @@ const validate = ({ name, domain }) => {
const errors = {};
if (!name) {
errors.name = 'Required';
errors.name = <FormattedMessage id="label.required" defaultMessage="Required" />;
}
if (!domain) {
errors.domain = 'Required';
errors.domain = <FormattedMessage id="label.required" defaultMessage="Required" />;
} else if (!DOMAIN_REGEX.test(domain)) {
errors.domain = 'Invalid domain';
errors.domain = <FormattedMessage id="label.invalid-domain" defaultMessage="Invalid domain" />;
}
return errors;
@ -41,7 +42,7 @@ export default function WebsiteEditForm({ values, onSave, onClose }) {
if (typeof response !== 'string') {
onSave();
} else {
setMessage('Something went wrong');
setMessage(<FormattedMessage id="message.failure" defaultMessage="Something went wrong." />);
}
};
@ -55,26 +56,42 @@ export default function WebsiteEditForm({ values, onSave, onClose }) {
{() => (
<Form>
<FormRow>
<label htmlFor="name">Name</label>
<label htmlFor="name">
<FormattedMessage id="label.name" defaultMessage="Name" />
</label>
<Field name="name" type="text" />
<FormError name="name" />
</FormRow>
<FormRow>
<label htmlFor="domain">Domain</label>
<label htmlFor="domain">
<FormattedMessage id="label.domain" defaultMessage="Domain" />
</label>
<Field name="domain" type="text" />
<FormError name="domain" />
</FormRow>
<FormRow>
<label></label>
<Field name="enable_share_url">
{({ field }) => <Checkbox {...field} label="Enable share URL" />}
{({ field }) => (
<Checkbox
{...field}
label={
<FormattedMessage
id="label.enable-share-url"
defaultMessage="Enable share URL"
/>
}
/>
)}
</Field>
</FormRow>
<FormButtons>
<Button type="submit" variant="action">
Save
<FormattedMessage id="button.save" defaultMessage="Save" />
</Button>
<Button onClick={onClose}>
<FormattedMessage id="button.cancel" defaultMessage="Cancel" />
</Button>
<Button onClick={onClose}>Cancel</Button>
</FormButtons>
<FormMessage>{message}</FormMessage>
</Form>