Convert text for internationalization.

components/WebsiteDetails.js

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
 import WebsiteChart from 'components/metrics/WebsiteChart';
 import WorldMap from 'components/common/WorldMap';
@@ -32,7 +33,9 @@ export default function WebsiteDetails({ websiteId }) {
       size="xsmall"
       onClick={() => setExpand(null)}
     >
-      <div>Back</div>
+      <div>
+        <FormattedMessage id="button.back" defaultMessage="Back" />
+      </div>
     </Button>
   );
 

components/WebsiteList.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { FormattedMessage } from 'react-intl';
 import { useRouter } from 'next/router';
 import WebsiteChart from 'components/metrics/WebsiteChart';
 import Page from 'components/layout/Page';
@@ -24,9 +25,21 @@ export default function WebsiteList() {
         </div>
       ))}
       {data.length === 0 && (
-        <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={<Arrow />} size="medium" onClick={() => router.push('/settings')}>
-            <div>Go to settings</div>
+            <div>
+              <FormattedMessage
+                id="placeholder.message.go-to-settings"
+                defaultMessage="Go to settings"
+              />
+            </div>
           </Button>
         </EmptyPlaceholder>
       )}

components/common/ButtonGroup.js

@@ -13,17 +13,20 @@ export default function ButtonGroup({
 }) {
   return (
     <div className={classNames(styles.group, className)}>
-      {items.map(item => (
-        <Button
-          key={item}
-          className={classNames(styles.button, { [styles.selected]: selectedItem === item })}
-          size={size}
-          icon={icon}
-          onClick={() => onClick(item)}
-        >
-          {item}
-        </Button>
-      ))}
+      {items.map(item => {
+        const { label, value } = item;
+        return (
+          <Button
+            key={value}
+            className={classNames(styles.button, { [styles.selected]: selectedItem === value })}
+            size={size}
+            icon={icon}
+            onClick={() => onClick(value)}
+          >
+            {label}
+          </Button>
+        );
+      })}
     </div>
   );
 }

components/common/CopyButton.js

@@ -1,7 +1,10 @@
 import React, { useState } from 'react';
 import Button from './Button';
+import { FormattedMessage } from 'react-intl';
 
-const defaultText = 'Copy to clipboard';
+const defaultText = (
+  <FormattedMessage id="button.copy-to-clipboard" defaultMessage="Copy to clipboard" />
+);
 
 export default function CopyButton({ element, ...props }) {
   const [text, setText] = useState(defaultText);
@@ -10,7 +13,7 @@ export default function CopyButton({ element, ...props }) {
     if (element?.current) {
       element.current.select();
       document.execCommand('copy');
-      setText('Copied!');
+      setText(<FormattedMessage id="message.copied" defaultMessage="Copied!" />);
       window.getSelection().removeAllRanges();
     }
   }

components/common/DateFilter.js

@@ -1,16 +1,40 @@
 import React from 'react';
 import { getDateRange } from 'lib/date';
 import DropDown from './DropDown';
+import { FormattedMessage } from 'react-intl';
 
 const filterOptions = [
-  { label: 'Last 24 hours', value: '24hour' },
-  { label: 'Last 7 days', value: '7day' },
-  { label: 'Last 30 days', value: '30day' },
-  { label: 'Last 90 days', value: '90day' },
-  { label: 'Today', value: '1day' },
-  { label: 'This week', value: '1week' },
-  { label: 'This month', value: '1month' },
-  { label: 'This year', value: '1year' },
+  {
+    label: (
+      <FormattedMessage id="label.last-hours" defaultMessage="Last {x} hours" values={{ x: 24 }} />
+    ),
+    value: '24hour',
+  },
+  {
+    label: (
+      <FormattedMessage id="label.last-days" defaultMessage="Last {x} days" values={{ x: 7 }} />
+    ),
+    value: '7day',
+  },
+  {
+    label: (
+      <FormattedMessage id="label.last-days" defaultMessage="Last {x} days" values={{ x: 30 }} />
+    ),
+    value: '30day',
+  },
+  {
+    label: (
+      <FormattedMessage id="label.last-days" defaultMessage="Last {x} days" values={{ x: 90 }} />
+    ),
+    value: '90day',
+  },
+  { label: <FormattedMessage id="label.today" defaultMessage="Today" />, value: '1day' },
+  { label: <FormattedMessage id="label.this-week" defaultMessage="This week" />, value: '1week' },
+  {
+    label: <FormattedMessage id="label.this-month" defaultMessage="This month" />,
+    value: '1month',
+  },
+  { label: <FormattedMessage id="label.this-year" defaultMessage="This year" />, value: '1year' },
 ];
 
 export default function DateFilter({ value, onChange, className }) {

components/forms/AccountEditForm.js

@@ -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>

components/forms/ChangePasswordForm.js

@@ -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>

components/forms/DeleteForm.js

@@ -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>

components/forms/LoginForm.js

@@ -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>

components/forms/ShareUrlForm.js

@@ -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>
   );

components/forms/TrackingCodeForm.js

@@ -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>
   );

components/forms/WebsiteEditForm.js

@@ -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>

components/layout/Footer.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { FormattedMessage } from 'react-intl';
 import Link from 'next/link';
 import classNames from 'classnames';
 import Button from 'components/common/Button';
@@ -9,7 +10,9 @@ export default function Footer() {
   return (
     <footer className="container">
       <div className={classNames(styles.footer, 'row justify-content-center')}>
-        <div>powered by</div>
+        <div>
+          <FormattedMessage id="footer.powered-by" defaultMessage="powered by" />
+        </div>
         <Link href="https://umami.is">
           <a>
             <Button icon={<Logo />} size="small">

components/layout/Header.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { FormattedMessage } from 'react-intl';
 import { useSelector } from 'react-redux';
 import classNames from 'classnames';
 import Link from 'components/common/Link';
@@ -22,8 +23,12 @@ export default function Header() {
         {user && (
           <div className="col-12 col-md-6">
             <div className={styles.nav}>
-              <Link href="/dashboard">Dashboard</Link>
-              <Link href="/settings">Settings</Link>
+              <Link href="/dashboard">
+                <FormattedMessage id="header.nav.dashboard" defaultMessage="Dashboard" />
+              </Link>
+              <Link href="/settings">
+                <FormattedMessage id="header.nav.settings" defaultMessage="Settings" />
+              </Link>
               <UserButton />
             </div>
           </div>

components/metrics/ActiveUsers.js

@@ -3,6 +3,7 @@ import { useSpring, animated } from 'react-spring';
 import classNames from 'classnames';
 import useFetch from 'hooks/useFetch';
 import styles from './ActiveUsers.module.css';
+import { FormattedMessage } from 'react-intl';
 
 export default function ActiveUsers({ websiteId, className }) {
   const { data } = useFetch(`/api/website/${websiteId}/active`, {}, { interval: 60000 });
@@ -26,7 +27,13 @@ export default function ActiveUsers({ websiteId, className }) {
         <animated.div className={styles.value}>
           {props.x.interpolate(x => x.toFixed(0))}
         </animated.div>
-        <div>{`current visitor${count !== 1 ? 's' : ''}`}</div>
+        <div>
+          <FormattedMessage
+            id="active-users.message"
+            defaultMessage="current {count, plural, one {visitor} other {visitors}}"
+            values={{ count }}
+          />
+        </div>
       </div>
     </div>
   );

components/metrics/BrowsersTable.js

@@ -1,13 +1,14 @@
 import React from 'react';
+import { FormattedMessage } from 'react-intl';
 import MetricsTable from './MetricsTable';
 import { browserFilter } from 'lib/filters';
 
 export default function BrowsersTable({ websiteId, limit, onExpand }) {
   return (
     <MetricsTable
-      title="Browsers"
+      title={<FormattedMessage id="metrics.browsers" defaultMessage="Browsers" />}
       type="browser"
-      metric="Visitors"
+      metric={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />}
       websiteId={websiteId}
       limit={limit}
       dataFilter={browserFilter}

components/metrics/CountriesTable.js

@@ -1,13 +1,14 @@
 import React from 'react';
 import MetricsTable from './MetricsTable';
 import { countryFilter, percentFilter } from 'lib/filters';
+import { FormattedMessage } from 'react-intl';
 
 export default function CountriesTable({ websiteId, limit, onDataLoad = () => {}, onExpand }) {
   return (
     <MetricsTable
-      title="Countries"
+      title={<FormattedMessage id="metrics.countries" defaultMessage="Countries" />}
       type="country"
-      metric="Visitors"
+      metric={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />}
       websiteId={websiteId}
       limit={limit}
       dataFilter={countryFilter}

components/metrics/DevicesTable.js

@@ -1,13 +1,14 @@
 import React from 'react';
 import MetricsTable from './MetricsTable';
 import { deviceFilter } from 'lib/filters';
+import { FormattedMessage } from 'react-intl';
 
 export default function DevicesTable({ websiteId, limit, onExpand }) {
   return (
     <MetricsTable
-      title="Devices"
+      title={<FormattedMessage id="metrics.devices" defaultMessage="Devices" />}
       type="device"
-      metric="Visitors"
+      metric={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />}
       websiteId={websiteId}
       limit={limit}
       dataFilter={deviceFilter}

components/metrics/EventsTable.js

@@ -1,13 +1,14 @@
 import React from 'react';
+import { FormattedMessage } from 'react-intl';
 import MetricsTable from './MetricsTable';
 import styles from './EventsTable.module.css';
 
 export default function EventsTable({ websiteId, limit, onExpand, onDataLoad }) {
   return (
     <MetricsTable
-      title="Events"
+      title={<FormattedMessage id="metrics.events" defaultMessage="Events" />}
       type="event"
-      metric="Actions"
+      metric={<FormattedMessage id="metrics.actions" defaultMessage="Actions" />}
       websiteId={websiteId}
       limit={limit}
       renderLabel={({ x }) => <Label value={x} />}

components/metrics/MetricsBar.js

@@ -1,11 +1,12 @@
 import React, { useState } from 'react';
+import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
-import MetricCard from './MetricCard';
 import Loading from 'components/common/Loading';
 import useFetch from 'hooks/useFetch';
+import { useDateRange } from 'hooks/useDateRange';
 import { formatShortTime, formatNumber, formatLongNumber } from 'lib/format';
+import MetricCard from './MetricCard';
 import styles from './MetricsBar.module.css';
-import { useDateRange } from '../../hooks/useDateRange';
 
 export default function MetricsBar({ websiteId, className }) {
   const dateRange = useDateRange(websiteId);
@@ -36,15 +37,28 @@ export default function MetricsBar({ websiteId, className }) {
         <Loading />
       ) : (
         <>
-          <MetricCard label="Views" value={pageviews} format={formatFunc} />
-          <MetricCard label="Visitors" value={uniques} format={formatFunc} />
           <MetricCard
-            label="Bounce rate"
+            label={<FormattedMessage id="metrics.views" defaultMessage="Views" />}
+            value={pageviews}
+            format={formatFunc}
+          />
+          <MetricCard
+            label={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />}
+            value={uniques}
+            format={formatFunc}
+          />
+          <MetricCard
+            label={<FormattedMessage id="metrics.bounce-rate" defaultMessage="Bounce rate" />}
             value={pageviews ? (bounces / pageviews) * 100 : 0}
             format={n => Number(n).toFixed(0) + '%'}
           />
           <MetricCard
-            label="Average visit time"
+            label={
+              <FormattedMessage
+                id="metrics.average-visit-time"
+                defaultMessage="Average visit time"
+              />
+            }
             value={totaltime && pageviews ? totaltime / (pageviews - bounces) : 0}
             format={n => formatShortTime(n, ['m', 's'], ' ')}
           />

components/metrics/MetricsTable.js

@@ -10,6 +10,7 @@ import { percentFilter } from 'lib/filters';
 import { formatNumber, formatLongNumber } from 'lib/format';
 import { useDateRange } from 'hooks/useDateRange';
 import styles from './MetricsTable.module.css';
+import { FormattedMessage } from 'react-intl';
 
 export default function MetricsTable({
   websiteId,
@@ -97,7 +98,9 @@ export default function MetricsTable({
           <div className={styles.footer}>
             {limit && data.length > limit && (
               <Button icon={<Arrow />} size="xsmall" onClick={() => onExpand(type)}>
-                <div>More</div>
+                <div>
+                  <FormattedMessage id="button.more" defaultMessage="More" />
+                </div>
               </Button>
             )}
           </div>

components/metrics/OSTable.js

@@ -1,13 +1,14 @@
 import React from 'react';
 import MetricsTable from './MetricsTable';
 import { osFilter } from 'lib/filters';
+import { FormattedMessage } from 'react-intl';
 
 export default function OSTable({ websiteId, limit, onExpand }) {
   return (
     <MetricsTable
-      title="Operating System"
+      title={<FormattedMessage id="metrics.operating-system" defaultMessage="Operating System" />}
       type="os"
-      metric="Visitors"
+      metric={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />}
       websiteId={websiteId}
       limit={limit}
       dataFilter={osFilter}

components/metrics/PagesTable.js

@@ -1,34 +1,39 @@
 import React, { useState } from 'react';
-import MetricsTable from './MetricsTable';
+import { FormattedMessage } from 'react-intl';
+import ButtonGroup from 'components/common/ButtonGroup';
 import { urlFilter } from 'lib/filters';
-import ButtonGroup from '../common/ButtonGroup';
+import { FILTER_COMBINED, FILTER_RAW } from 'lib/constants';
+import MetricsTable from './MetricsTable';
 
 export default function PagesTable({ websiteId, websiteDomain, limit, onExpand }) {
-  const [filter, setFilter] = useState('Combined');
+  const [filter, setFilter] = useState(FILTER_COMBINED);
+
+  const buttons = [
+    {
+      label: <FormattedMessage id="metrics.filter.combined" defaultMessage="Combined" />,
+      value: FILTER_COMBINED,
+    },
+    { label: <FormattedMessage id="metrics.filter.raw" defaultMessage="Raw" />, value: FILTER_RAW },
+  ];
 
   return (
     <MetricsTable
-      title="Pages"
+      title={<FormattedMessage id="metrics.pages" defaultMessage="Pages" />}
       type="url"
-      metric="Views"
-      headerComponent={limit ? null : <FilterButtons selected={filter} onClick={setFilter} />}
+      metric={<FormattedMessage id="metrics.views" defaultMessage="Views" />}
+      headerComponent={
+        limit ? null : <FilterButtons buttons={buttons} selected={filter} onClick={setFilter} />
+      }
       websiteId={websiteId}
       limit={limit}
       dataFilter={urlFilter}
-      filterOptions={{ domain: websiteDomain, raw: filter === 'Raw' }}
+      filterOptions={{ domain: websiteDomain, raw: filter === FILTER_RAW }}
       renderLabel={({ x }) => decodeURI(x)}
       onExpand={onExpand}
     />
   );
 }
 
-const FilterButtons = ({ selected, onClick }) => {
-  return (
-    <ButtonGroup
-      size="xsmall"
-      items={['Combined', 'Raw']}
-      selectedItem={selected}
-      onClick={onClick}
-    />
-  );
+const FilterButtons = ({ buttons, selected, onClick }) => {
+  return <ButtonGroup size="xsmall" items={buttons} selectedItem={selected} onClick={onClick} />;
 };

components/metrics/PageviewsChart.js

@@ -1,8 +1,11 @@
 import React from 'react';
+import { useIntl } from 'react-intl';
 import CheckVisible from 'components/helpers/CheckVisible';
 import BarChart from './BarChart';
 
 export default function PageviewsChart({ websiteId, data, unit, records, className }) {
+  const intl = useIntl();
+
   const handleUpdate = chart => {
     const {
       data: { datasets },
@@ -26,7 +29,10 @@ export default function PageviewsChart({ websiteId, data, unit, records, classNa
           chartId={websiteId}
           datasets={[
             {
-              label: 'unique visitors',
+              label: intl.formatMessage({
+                id: 'metrics.unique-visitors',
+                defaultMessage: 'Unique visitors',
+              }),
               data: data.uniques,
               lineTension: 0,
               backgroundColor: 'rgb(38, 128, 235, 0.4)',
@@ -34,7 +40,10 @@ export default function PageviewsChart({ websiteId, data, unit, records, classNa
               borderWidth: 1,
             },
             {
-              label: 'page views',
+              label: intl.formatMessage({
+                id: 'metrics.page-views',
+                defaultMessage: 'Page views',
+              }),
               data: data.pageviews,
               lineTension: 0,
               backgroundColor: 'rgb(38, 128, 235, 0.2)',

components/metrics/QuickButtons.js

@@ -3,18 +3,18 @@ import ButtonGroup from 'components/common/ButtonGroup';
 import { getDateRange } from 'lib/date';
 import styles from './QuickButtons.module.css';
 
-const options = {
-  '24h': '24hour',
-  '7d': '7day',
-  '30d': '30day',
-};
+const options = [
+  { label: '24h', value: '24hour' },
+  { label: '7d', value: '7day' },
+  { label: '30d', value: '30day' },
+];
 
 export default function QuickButtons({ value, onChange }) {
-  const selectedItem = Object.keys(options).find(key => options[key] === value);
+  const selectedItem = options.find(item => item.value === value)?.value;
 
   function handleClick(selected) {
-    if (options[selected] !== value) {
-      onChange(getDateRange(options[selected]));
+    if (selected !== value) {
+      onChange(getDateRange(selected));
     }
   }
 
@@ -22,7 +22,7 @@ export default function QuickButtons({ value, onChange }) {
     <ButtonGroup
       size="xsmall"
       className={styles.buttons}
-      items={Object.keys(options)}
+      items={options}
       selectedItem={selectedItem}
       onClick={handleClick}
     />

components/metrics/ReferrersTable.js

@@ -1,10 +1,24 @@
 import React, { useState } from 'react';
+import { FormattedMessage } from 'react-intl';
 import MetricsTable from './MetricsTable';
 import { refFilter } from 'lib/filters';
 import ButtonGroup from 'components/common/ButtonGroup';
+import { FILTER_DOMAIN_ONLY, FILTER_COMBINED, FILTER_RAW } from 'lib/constants';
 
 export default function ReferrersTable({ websiteId, websiteDomain, limit, onExpand = () => {} }) {
-  const [filter, setFilter] = useState('Combined');
+  const [filter, setFilter] = useState(FILTER_COMBINED);
+
+  const buttons = [
+    {
+      label: <FormattedMessage id="metrics.filter.domain-only" defaultMessage="Domain only" />,
+      value: FILTER_DOMAIN_ONLY,
+    },
+    {
+      label: <FormattedMessage id="metrics.filter.combined" defaultMessage="Combined" />,
+      value: FILTER_COMBINED,
+    },
+    { label: <FormattedMessage id="metrics.filter.raw" defaultMessage="Raw" />, value: FILTER_RAW },
+  ];
 
   const renderLink = ({ x: url }) => {
     return url.startsWith('http') ? (
@@ -18,18 +32,20 @@ export default function ReferrersTable({ websiteId, websiteDomain, limit, onExpa
 
   return (
     <MetricsTable
-      title="Referrers"
+      title={<FormattedMessage id="metrics.referrers" defaultMessage="Referrers" />}
       type="referrer"
-      metric="Views"
-      headerComponent={limit ? null : <FilterButtons selected={filter} onClick={setFilter} />}
+      metric={<FormattedMessage id="metrics.views" defaultMessage="Views" />}
+      headerComponent={
+        limit ? null : <FilterButtons buttons={buttons} selected={filter} onClick={setFilter} />
+      }
       websiteId={websiteId}
       websiteDomain={websiteDomain}
       limit={limit}
       dataFilter={refFilter}
       filterOptions={{
         domain: websiteDomain,
-        domainOnly: filter === 'Domain only',
-        raw: filter === 'Raw',
+        domainOnly: filter === FILTER_DOMAIN_ONLY,
+        raw: filter === FILTER_RAW,
       }}
       onExpand={onExpand}
       renderLabel={renderLink}
@@ -37,13 +53,6 @@ export default function ReferrersTable({ websiteId, websiteDomain, limit, onExpa
   );
 }
 
-const FilterButtons = ({ selected, onClick }) => {
-  return (
-    <ButtonGroup
-      size="xsmall"
-      items={['Domain only', 'Combined', 'Raw']}
-      selectedItem={selected}
-      onClick={onClick}
-    />
-  );
+const FilterButtons = ({ buttons, selected, onClick }) => {
+  return <ButtonGroup size="xsmall" items={buttons} selectedItem={selected} onClick={onClick} />;
 };

components/metrics/WebsiteHeader.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { FormattedMessage } from 'react-intl';
 import { useRouter } from 'next/router';
 import PageHeader from 'components/layout/PageHeader';
 import Button from 'components/common/Button';
@@ -27,7 +28,9 @@ export default function WebsiteHeader({ websiteId, title, showLink = false }) {
             }
             size="small"
           >
-            <div>View details</div>
+            <div>
+              <FormattedMessage id="button.view-details" defaultMessage="View details" />
+            </div>
           </Button>
         )}
       </ButtonLayout>

components/settings/AccountSettings.js

@@ -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}

components/settings/ProfileSettings.js

@@ -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 && (

components/settings/Settings.js

@@ -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>
   );

components/settings/WebsiteSettings.js

@@ -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>
       )}