Merge branch 'dev' into bh/unregister

2024-12-18 07:13:37 +01:00 · 2020-09-18 11:33:30 +02:00 · 2020-09-18 11:33:30 +02:00 · 17b4f51ebe
commit 17b4f51ebe
parent 09235ddacf c932dc2810
78 changed files with 799 additions and 548 deletions
--- a/components/WebsiteDetails.js
+++ b/components/WebsiteDetails.js
@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
+import { useRouter } from 'next/router';
 import classNames from 'classnames';
 import WebsiteChart from 'components/metrics/WebsiteChart';
 import WorldMap from 'components/common/WorldMap';
@ -19,12 +20,29 @@ import EventsChart from './metrics/EventsChart';
 import useFetch from 'hooks/useFetch';
 import Loading from 'components/common/Loading';

-export default function WebsiteDetails({ websiteId }) {
-  const { data } = useFetch(`/api/website/${websiteId}`);
+const views = {
+  url: PagesTable,
+  referrer: ReferrersTable,
+  browser: BrowsersTable,
+  os: OSTable,
+  device: DevicesTable,
+  country: CountriesTable,
+  event: EventsTable,
+};
+
+export default function WebsiteDetails({ websiteId, token }) {
+  const router = useRouter();
+  const { data } = useFetch(`/api/website/${websiteId}`, { token });
  const [chartLoaded, setChartLoaded] = useState(false);
  const [countryData, setCountryData] = useState();
  const [eventsData, setEventsData] = useState();
-  const [expand, setExpand] = useState();
+  const {
+    query: { id, view },
+    basePath,
+    asPath,
+  } = router;
+
+  const path = `${basePath}/${asPath.split('/')[1]}/${id.join('/')}`;

  const BackButton = () => (
    <Button
@ -32,7 +50,7 @@ export default function WebsiteDetails({ websiteId }) {
      className={styles.backButton}
      icon={<Arrow />}
      size="xsmall"
-      onClick={() => setExpand(null)}
+      onClick={() => router.push(path)}
    >
      <div>
        <FormattedMessage id="button.back" defaultMessage="Back" />
@ -46,53 +64,43 @@ export default function WebsiteDetails({ websiteId }) {
    },
    {
      label: <FormattedMessage id="metrics.pages" defaultMessage="Pages" />,
-      value: 'url',
-      component: PagesTable,
+      value: `${path}?view=url`,
    },
    {
      label: <FormattedMessage id="metrics.referrers" defaultMessage="Referrers" />,
-      value: 'referrer',
-      component: ReferrersTable,
+      value: `${path}?view=referrer`,
    },
    {
      label: <FormattedMessage id="metrics.browsers" defaultMessage="Browsers" />,
-      value: 'browser',
-      component: BrowsersTable,
+      value: `${path}?view=browser`,
    },
    {
      label: <FormattedMessage id="metrics.operating-systems" defaultMessage="Operating system" />,
-      value: 'os',
-      component: OSTable,
+      value: `${path}?view=os`,
    },
    {
      label: <FormattedMessage id="metrics.devices" defaultMessage="Devices" />,
-      value: 'device',
-      component: DevicesTable,
+      value: `${path}?view=device`,
    },
    {
      label: <FormattedMessage id="metrics.countries" defaultMessage="Countries" />,
-      value: 'country',
-      component: CountriesTable,
+      value: `${path}?view=country`,
    },
    {
      label: <FormattedMessage id="metrics.events" defaultMessage="Events" />,
-      value: 'event',
-      component: EventsTable,
+      value: `${path}?view=event`,
    },
  ];

  const tableProps = {
    websiteId,
+    token,
    websiteDomain: data?.domain,
    limit: 10,
    onExpand: handleExpand,
  };

-  const DetailsComponent = expand?.component;
-
-  function getSelectedMenuOption(value) {
-    return menuOptions.find(e => e.value === value);
-  }
+  const DetailsComponent = views[view];

  function handleDataLoad() {
    if (!chartLoaded) {
@ -101,11 +109,7 @@ export default function WebsiteDetails({ websiteId }) {
  }

  function handleExpand(value) {
-    setExpand(getSelectedMenuOption(value));
-  }
-
-  function handleMenuSelect(value) {
-    setExpand(getSelectedMenuOption(value));
+    router.push(`${path}?view=${value}`);
  }

  if (!data) {
@ -118,6 +122,7 @@ export default function WebsiteDetails({ websiteId }) {
        <div className={classNames(styles.chart, 'col')}>
          <WebsiteChart
            websiteId={websiteId}
+            token={token}
            title={data.name}
            onDataLoad={handleDataLoad}
            showLink={false}
@ -126,7 +131,7 @@ export default function WebsiteDetails({ websiteId }) {
        </div>
      </div>
      {!chartLoaded && <Loading />}
-      {chartLoaded && !expand && (
+      {chartLoaded && !view && (
        <>
          <div className={classNames(styles.row, 'row')}>
            <div className="col-md-12 col-lg-6">
@ -162,19 +167,17 @@ export default function WebsiteDetails({ websiteId }) {
              <EventsTable {...tableProps} onDataLoad={setEventsData} />
            </div>
            <div className="col-12 col-md-12 col-lg-8 pt-5 pb-5">
-              <EventsChart websiteId={websiteId} />
+              <EventsChart websiteId={websiteId} token={token} />
            </div>
          </div>
        </>
      )}
-      {expand && (
+      {view && (
        <MenuLayout
-          className={styles.expand}
+          className={styles.view}
          menuClassName={styles.menu}
-          optionClassName={styles.option}
+          contentClassName={styles.content}
          menu={menuOptions}
-          selectedOption={expand.value}
-          onMenuSelect={handleMenuSelect}
        >
          <DetailsComponent {...tableProps} limit={false} />
        </MenuLayout>
--- a/components/WebsiteDetails.module.css
+++ b/components/WebsiteDetails.module.css
@ -2,7 +2,7 @@
  margin-bottom: 30px;
 }

-.expand {
+.view {
  border-top: 1px solid var(--gray300);
 }

@ -10,8 +10,8 @@
  font-size: var(--font-size-small);
 }

-.menu .option {
-  font-size: var(--font-size-small);
+.content {
+  min-height: 600px;
 }

 .backButton {
--- a/components/WebsiteList.js
+++ b/components/WebsiteList.js
@ -11,7 +11,7 @@ import styles from './WebsiteList.module.css';

 export default function WebsiteList({ userId }) {
  const router = useRouter();
-  const { data } = useFetch('/api/websites', { userId });
+  const { data } = useFetch('/api/websites', { user_id: userId });

  if (!data) {
    return null;
@ -28,17 +28,14 @@ export default function WebsiteList({ userId }) {
        <EmptyPlaceholder
          msg={
            <FormattedMessage
-              id="placeholder.message.no-websites-configured"
+              id="message.no-websites-configured"
              defaultMessage="You don't have any websites configured."
            />
          }
        >
          <Button icon={<Arrow />} size="medium" onClick={() => router.push('/settings')}>
            <div>
-              <FormattedMessage
-                id="placeholder.message.go-to-settings"
-                defaultMessage="Go to settings"
-              />
+              <FormattedMessage id="message.go-to-settings" defaultMessage="Go to settings" />
            </div>
          </Button>
        </EmptyPlaceholder>
--- a/components/common/Calendar.js
+++ b/components/common/Calendar.js
@ -70,34 +70,36 @@ export default function Calendar({ date, minDate, maxDate, onChange }) {
          <Icon className={styles.icon} icon={selectYear ? <Cross /> : <Chevron />} size="small" />
        </div>
      </div>
-      {!selectMonth && !selectYear && (
-        <DaySelector
-          date={date}
-          minDate={minDate}
-          maxDate={maxDate}
-          locale={locale}
-          onSelect={handleChange}
-        />
-      )}
-      {selectMonth && (
-        <MonthSelector
-          date={date}
-          minDate={minDate}
-          maxDate={maxDate}
-          locale={locale}
-          onSelect={handleChange}
-          onClose={toggleMonthSelect}
-        />
-      )}
-      {selectYear && (
-        <YearSelector
-          date={date}
-          minDate={minDate}
-          maxDate={maxDate}
-          onSelect={handleChange}
-          onClose={toggleYearSelect}
-        />
-      )}
+      <div className={styles.body}>
+        {!selectMonth && !selectYear && (
+          <DaySelector
+            date={date}
+            minDate={minDate}
+            maxDate={maxDate}
+            locale={locale}
+            onSelect={handleChange}
+          />
+        )}
+        {selectMonth && (
+          <MonthSelector
+            date={date}
+            minDate={minDate}
+            maxDate={maxDate}
+            locale={locale}
+            onSelect={handleChange}
+            onClose={toggleMonthSelect}
+          />
+        )}
+        {selectYear && (
+          <YearSelector
+            date={date}
+            minDate={minDate}
+            maxDate={maxDate}
+            onSelect={handleChange}
+            onClose={toggleYearSelect}
+          />
+        )}
+      </div>
    </div>
  );
 }
@ -220,42 +222,46 @@ const YearSelector = ({ date, minDate, maxDate, onSelect }) => {

  return (
    <div className={styles.pager}>
-      <Button
-        icon={<Chevron />}
-        size="small"
-        className={styles.left}
-        onClick={handlePrevClick}
-        disabled={years[0] <= minYear}
-        variant="light"
-      />
-      <table>
-        <tbody>
-          {chunk(years, 5).map((row, i) => (
-            <tr key={i}>
-              {row.map((n, j) => (
-                <td
-                  key={j}
-                  className={classNames({
-                    [styles.selected]: n === year,
-                    [styles.disabled]: n < minYear || n > maxYear,
-                  })}
-                  onClick={() => (n < minYear || n > maxYear ? null : handleSelect(n))}
-                >
-                  {n}
-                </td>
-              ))}
-            </tr>
-          ))}
-        </tbody>
-      </table>
-      <Button
-        icon={<Chevron />}
-        size="small"
-        className={styles.right}
-        onClick={handleNextClick}
-        disabled={years[years.length - 1] > maxYear}
-        variant="light"
-      />
+      <div className={styles.left}>
+        <Button
+          icon={<Chevron />}
+          size="small"
+          onClick={handlePrevClick}
+          disabled={years[0] <= minYear}
+          variant="light"
+        />
+      </div>
+      <div className={styles.middle}>
+        <table>
+          <tbody>
+            {chunk(years, 5).map((row, i) => (
+              <tr key={i}>
+                {row.map((n, j) => (
+                  <td
+                    key={j}
+                    className={classNames({
+                      [styles.selected]: n === year,
+                      [styles.disabled]: n < minYear || n > maxYear,
+                    })}
+                    onClick={() => (n < minYear || n > maxYear ? null : handleSelect(n))}
+                  >
+                    {n}
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+      <div className={styles.right}>
+        <Button
+          icon={<Chevron />}
+          size="small"
+          onClick={handleNextClick}
+          disabled={years[years.length - 1] > maxYear}
+          variant="light"
+        />
+      </div>
    </div>
  );
 };
--- a/components/common/Calendar.module.css
+++ b/components/common/Calendar.module.css
@ -3,11 +3,11 @@
  flex-direction: column;
  font-size: var(--font-size-small);
  flex: 1;
-  min-height: 285px;
+  min-height: 306px;
 }

 .calendar table {
-  flex: 1;
+  width: 100%;
  border-spacing: 5px;
 }

@ -64,18 +64,34 @@
  font-size: var(--font-size-normal);
 }

+.body {
+  display: flex;
+}
+
 .selector {
  cursor: pointer;
 }

 .pager {
  display: flex;
+  flex: 1;
 }

 .pager button {
  align-self: center;
 }

+.middle {
+  flex: 1;
+}
+
+.left,
+.right {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 .left svg {
  transform: rotate(90deg);
 }
--- a/components/common/DateFilter.js
+++ b/components/common/DateFilter.js
@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { endOfYear } from 'date-fns';
+import { endOfYear, isSameDay } from 'date-fns';
 import Modal from './Modal';
 import DropDown from './DropDown';
 import DatePickerForm from 'components/forms/DatePickerForm';
@ -112,7 +112,8 @@ const CustomRange = ({ startDate, endDate, onClick }) => {
  return (
    <>
      <Icon icon={<Calendar />} className="mr-2" onClick={handleClick} />
-      {`${dateFormat(startDate, 'd LLL y', locale)} — ${dateFormat(endDate, 'd LLL y', locale)}`}
+      {dateFormat(startDate, 'd LLL y', locale)}
+      {!isSameDay(startDate, endDate) && ` — ${dateFormat(endDate, 'd LLL y', locale)}`}
    </>
  );
 };
--- a/components/common/LanguageButton.js
+++ b/components/common/LanguageButton.js
@ -1,12 +1,13 @@
 import React, { useState, useRef } from 'react';
 import Head from 'next/head';
-import Globe from 'assets/globe.svg';
-import useDocumentClick from 'hooks/useDocumentClick';
 import Menu from './Menu';
 import Button from './Button';
 import { menuOptions } from 'lib/lang';
+import { setItem } from 'lib/web';
+import useLocale from 'hooks/useLocale';
+import useDocumentClick from 'hooks/useDocumentClick';
+import Globe from 'assets/globe.svg';
 import styles from './LanguageButton.module.css';
-import useLocale from '../../hooks/useLocale';

 export default function LanguageButton({ menuPosition = 'bottom', menuAlign = 'left' }) {
  const [showMenu, setShowMenu] = useState(false);
@ -16,7 +17,7 @@ export default function LanguageButton({ menuPosition = 'bottom', menuAlign = 'l

  function handleSelect(value) {
    setLocale(value);
-    window.localStorage.setItem('locale', value);
+    setItem('umami.locale', value);
    setShowMenu(false);
  }

--- a/components/common/NavMenu.js
+++ b/components/common/NavMenu.js
@ -0,0 +1,32 @@
+import React from 'react';
+import { useRouter } from 'next/router';
+import classNames from 'classnames';
+import styles from './NavMenu.module.css';
+
+export default function NavMenu({ options = [], className, onSelect = () => {} }) {
+  const router = useRouter();
+
+  return (
+    <div className={classNames(styles.menu, className)}>
+      {options
+        .filter(({ hidden }) => !hidden)
+        .map(option => {
+          const { label, value, className: customClassName, render } = option;
+
+          return render ? (
+            render(option)
+          ) : (
+            <div
+              key={value}
+              className={classNames(styles.option, customClassName, {
+                [styles.selected]: router.asPath === value,
+              })}
+              onClick={e => onSelect(value, e)}
+            >
+              {label}
+            </div>
+          );
+        })}
+    </div>
+  );
+}
--- a/components/common/NavMenu.module.css
+++ b/components/common/NavMenu.module.css
@ -0,0 +1,20 @@
+.menu {
+  border: 1px solid var(--gray500);
+  border-radius: 4px;
+  overflow: hidden;
+  z-index: 2;
+}
+
+.option {
+  padding: 8px 16px;
+  cursor: pointer;
+  border-radius: 4px;
+}
+
+.option:hover {
+  background: var(--gray75);
+}
+
+.selected {
+  font-weight: 600;
+}
--- a/components/common/RefreshButton.js
+++ b/components/common/RefreshButton.js
@ -5,7 +5,7 @@ import { setDateRange } from 'redux/actions/websites';
 import Button from './Button';
 import Refresh from 'assets/redo.svg';
 import Dots from 'assets/ellipsis-h.svg';
-import { useDateRange } from 'hooks/useDateRange';
+import useDateRange from 'hooks/useDateRange';
 import { getDateRange } from '../../lib/date';

 export default function RefreshButton({ websiteId }) {
--- a/components/common/UserButton.js
+++ b/components/common/UserButton.js
@ -27,6 +27,7 @@ export default function UserButton() {
      value: 'username',
      className: styles.username,
    },
+    { label: <FormattedMessage id="label.profile" defaultMessage="Profile" />, value: 'profile' },
    { label: <FormattedMessage id="label.logout" defaultMessage="Logout" />, value: 'logout' },
  ];

@ -35,6 +36,8 @@ export default function UserButton() {

    if (value === 'logout') {
      router.push('/logout');
+    } else if (value === 'profile') {
+      router.push('/settings/profile');
    }
  }

--- a/components/forms/DatePickerForm.js
+++ b/components/forms/DatePickerForm.js
@ -1,11 +1,15 @@
 import React, { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { isAfter } from 'date-fns';
+import { isAfter, isBefore, isSameDay } from 'date-fns';
 import Calendar from 'components/common/Calendar';
 import Button from 'components/common/Button';
 import { FormButtons } from 'components/layout/FormLayout';
 import { getDateRangeValues } from 'lib/date';
 import styles from './DatePickerForm.module.css';
+import ButtonGroup from '../common/ButtonGroup';
+
+const FILTER_DAY = 0;
+const FILTER_RANGE = 1;

 export default function DatePickerForm({
  startDate: defaultStartDate,
@ -15,21 +19,59 @@ export default function DatePickerForm({
  onChange,
  onClose,
 }) {
+  const [selected, setSelected] = useState(
+    isSameDay(defaultStartDate, defaultEndDate) ? FILTER_DAY : FILTER_RANGE,
+  );
+  const [date, setDate] = useState(defaultStartDate);
  const [startDate, setStartDate] = useState(defaultStartDate);
  const [endDate, setEndDate] = useState(defaultEndDate);

+  const disabled =
+    selected === FILTER_DAY
+      ? isAfter(minDate, date) && isBefore(maxDate, date)
+      : isAfter(startDate, endDate);
+
+  const buttons = [
+    {
+      label: <FormattedMessage id="button.single-day" defaultMessage="Single day" />,
+      value: FILTER_DAY,
+    },
+    {
+      label: <FormattedMessage id="button.date-range" defaultMessage="Date range" />,
+      value: FILTER_RANGE,
+    },
+  ];
+
  function handleSave() {
-    onChange({ ...getDateRangeValues(startDate, endDate), value: 'custom' });
+    if (selected === FILTER_DAY) {
+      onChange({ ...getDateRangeValues(date, date), value: 'custom' });
+    } else {
+      onChange({ ...getDateRangeValues(startDate, endDate), value: 'custom' });
+    }
  }

  return (
    <div className={styles.container}>
+      <div className={styles.filter}>
+        <ButtonGroup size="small" items={buttons} selectedItem={selected} onClick={setSelected} />
+      </div>
      <div className={styles.calendars}>
-        <Calendar date={startDate} minDate={minDate} maxDate={endDate} onChange={setStartDate} />
-        <Calendar date={endDate} minDate={startDate} maxDate={maxDate} onChange={setEndDate} />
+        {selected === FILTER_DAY ? (
+          <Calendar date={date} minDate={minDate} maxDate={maxDate} onChange={setDate} />
+        ) : (
+          <>
+            <Calendar
+              date={startDate}
+              minDate={minDate}
+              maxDate={endDate}
+              onChange={setStartDate}
+            />
+            <Calendar date={endDate} minDate={startDate} maxDate={maxDate} onChange={setEndDate} />
+          </>
+        )}
      </div>
      <FormButtons>
-        <Button variant="action" onClick={handleSave} disabled={isAfter(startDate, endDate)}>
+        <Button variant="action" onClick={handleSave} disabled={disabled}>
          <FormattedMessage id="button.save" defaultMessage="Save" />
        </Button>
        <Button onClick={onClose}>
--- a/components/forms/DatePickerForm.module.css
+++ b/components/forms/DatePickerForm.module.css
@ -1,25 +1,40 @@
 .container {
  display: flex;
  flex-direction: column;
-  width: 800px;
  max-width: 100vw;
 }

 .calendars {
  display: flex;
+  justify-content: center;
 }

-.calendars > div:first-child {
-  padding-right: 20px;
-  border-right: 1px solid var(--gray300);
+.calendars > div {
+  width: 380px;
 }

-.calendars > div:last-child {
+.calendars > div + div {
+  margin-left: 20px;
  padding-left: 20px;
+  border-left: 1px solid var(--gray300);
+}
+
+.filter {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 20px;
 }

@media only screen and (max-width: 768px) {
  .calendars {
    flex-direction: column;
  }
+
+  .calendars > div + div {
+    padding: 0;
+    margin-left: 0;
+    margin-top: 20px;
+    border: 0;
+  }
 }
--- a/components/layout/Footer.js
+++ b/components/layout/Footer.js
@ -11,7 +11,7 @@ export default function Footer() {
        <div />
        <div>
          <FormattedMessage
-            id="footer.powered-by"
+            id="message.powered-by"
            defaultMessage="Powered by {name}"
            values={{
              name: (
--- a/components/layout/Header.js
+++ b/components/layout/Header.js
@ -26,10 +26,10 @@ export default function Header() {
            {user ? (
              <>
                <Link href="/dashboard">
-                  <FormattedMessage id="header.nav.dashboard" defaultMessage="Dashboard" />
+                  <FormattedMessage id="label.dashboard" defaultMessage="Dashboard" />
                </Link>
                <Link href="/settings">
-                  <FormattedMessage id="header.nav.settings" defaultMessage="Settings" />
+                  <FormattedMessage id="label.settings" defaultMessage="Settings" />
                </Link>
                <LanguageButton menuAlign="right" />
                <UserButton />
--- a/components/layout/MenuLayout.js
+++ b/components/layout/MenuLayout.js
@ -1,29 +1,37 @@
 import React from 'react';
+import { useRouter } from 'next/router';
 import classNames from 'classnames';
-import Menu from 'components/common/Menu';
+import NavMenu from 'components/common/NavMenu';
 import styles from './MenuLayout.module.css';

 export default function MenuLayout({
  menu,
  selectedOption,
-  onMenuSelect,
  className,
  menuClassName,
  contentClassName,
-  optionClassName,
  children,
+  replace = false,
 }) {
+  const router = useRouter();
+
+  function handleSelect(url) {
+    if (replace) {
+      router.replace(url);
+    } else {
+      router.push(url);
+    }
+  }
+
  return (
    <div className={classNames(styles.container, className, 'row')}>
-      <Menu
+      <NavMenu
        options={menu}
        selectedOption={selectedOption}
-        className={classNames(styles.menu, menuClassName, 'col-12 col-lg-3')}
-        selectedClassName={styles.selected}
-        optionClassName={classNames(styles.option, optionClassName)}
-        onSelect={onMenuSelect}
+        className={classNames(styles.menu, menuClassName, 'col-12 col-lg-2')}
+        onSelect={handleSelect}
      />
-      <div className={classNames(styles.content, contentClassName, 'col-12 col-lg-9')}>
+      <div className={classNames(styles.content, contentClassName, 'col-12 col-lg-10')}>
        {children}
      </div>
    </div>
--- a/components/layout/MenuLayout.module.css
+++ b/components/layout/MenuLayout.module.css
@ -10,25 +10,11 @@
 }

 .container .content {
+  flex: 1;
  position: relative;
  border-left: 1px solid var(--gray300);
  padding-left: 30px;
-}
-
-.option {
-  font-size: var(--font-size-normal);
-  padding: 8px 16px;
-  cursor: pointer;
-  margin-right: 30px;
-  border-radius: 4px;
-}
-
-.option:hover {
-  background: var(--gray75);
-}
-
-.selected {
-  font-weight: 600;
+  margin-left: 30px;
 }

@media only screen and (max-width: 992px) {
@ -40,5 +26,6 @@
    border-top: 1px solid var(--gray300);
    border-left: 0;
    padding-left: 0;
+    margin-left: 0;
  }
 }
--- a/components/messages.js
+++ b/components/messages.js
@ -6,10 +6,10 @@ export const labels = defineMessages({
 });

 export const devices = defineMessages({
-  desktop: { id: 'device.desktop', defaultMessage: 'Desktop' },
-  laptop: { id: 'device.laptop', defaultMessage: 'Laptop' },
-  tablet: { id: 'device.tablet', defaultMessage: 'Tablet' },
-  mobile: { id: 'device.mobile', defaultMessage: 'Mobile' },
+  desktop: { id: 'metrics.device.desktop', defaultMessage: 'Desktop' },
+  laptop: { id: 'metrics.device.laptop', defaultMessage: 'Laptop' },
+  tablet: { id: 'metrics.device.tablet', defaultMessage: 'Tablet' },
+  mobile: { id: 'metrics.device.mobile', defaultMessage: 'Mobile' },
 });

 export function getDeviceMessage(device) {
--- a/components/metrics/ActiveUsers.js
+++ b/components/metrics/ActiveUsers.js
@ -4,8 +4,8 @@ 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 });
+export default function ActiveUsers({ websiteId, token, className }) {
+  const { data } = useFetch(`/api/website/${websiteId}/active`, { token }, { interval: 60000 });
  const count = useMemo(() => {
    return data?.[0]?.x || 0;
  }, [data]);
@ -20,7 +20,7 @@ export default function ActiveUsers({ websiteId, className }) {
      <div className={styles.text}>
        <div>
          <FormattedMessage
-            id="active-users.message"
+            id="message.active-users"
            defaultMessage="{x} current {x, plural, one {visitor} other {visitors}}"
            values={{ x: count }}
          />
--- a/components/metrics/BrowsersTable.js
+++ b/components/metrics/BrowsersTable.js
@ -3,13 +3,14 @@ import { FormattedMessage } from 'react-intl';
 import MetricsTable from './MetricsTable';
 import { browserFilter } from 'lib/filters';

-export default function BrowsersTable({ websiteId, limit, onExpand }) {
+export default function BrowsersTable({ websiteId, token, limit, onExpand }) {
  return (
    <MetricsTable
      title={<FormattedMessage id="metrics.browsers" defaultMessage="Browsers" />}
      type="browser"
      metric={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />}
      websiteId={websiteId}
+      token={token}
      limit={limit}
      dataFilter={browserFilter}
      onExpand={onExpand}
--- a/components/metrics/CountriesTable.js
+++ b/components/metrics/CountriesTable.js
@ -3,13 +3,20 @@ import MetricsTable from './MetricsTable';
 import { countryFilter, percentFilter } from 'lib/filters';
 import { FormattedMessage } from 'react-intl';

-export default function CountriesTable({ websiteId, limit, onDataLoad = () => {}, onExpand }) {
+export default function CountriesTable({
+  websiteId,
+  token,
+  limit,
+  onDataLoad = () => {},
+  onExpand,
+}) {
  return (
    <MetricsTable
      title={<FormattedMessage id="metrics.countries" defaultMessage="Countries" />}
      type="country"
      metric={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />}
      websiteId={websiteId}
+      token={token}
      limit={limit}
      dataFilter={countryFilter}
      onDataLoad={data => onDataLoad(percentFilter(data))}
--- a/components/metrics/DevicesTable.js
+++ b/components/metrics/DevicesTable.js
@ -4,13 +4,14 @@ import { deviceFilter } from 'lib/filters';
 import { FormattedMessage } from 'react-intl';
 import { getDeviceMessage } from 'components/messages';

-export default function DevicesTable({ websiteId, limit, onExpand }) {
+export default function DevicesTable({ websiteId, token, limit, onExpand }) {
  return (
    <MetricsTable
      title={<FormattedMessage id="metrics.devices" defaultMessage="Devices" />}
      type="device"
      metric={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />}
      websiteId={websiteId}
+      token={token}
      limit={limit}
      dataFilter={deviceFilter}
      renderLabel={({ x }) => getDeviceMessage(x)}
--- a/components/metrics/EventsChart.js
+++ b/components/metrics/EventsChart.js
@ -3,7 +3,7 @@ import tinycolor from 'tinycolor2';
 import BarChart from './BarChart';
 import { getTimezone, getDateArray, getDateLength } from 'lib/date';
 import useFetch from 'hooks/useFetch';
-import { useDateRange } from 'hooks/useDateRange';
+import useDateRange from 'hooks/useDateRange';

 const COLORS = [
  '#2680eb',
@ -16,7 +16,7 @@ const COLORS = [
  '#85d044',
 ];

-export default function EventsChart({ websiteId }) {
+export default function EventsChart({ websiteId, token }) {
  const dateRange = useDateRange(websiteId);
  const { startDate, endDate, unit, modified } = dateRange;
  const { data } = useFetch(
@ -26,6 +26,7 @@ export default function EventsChart({ websiteId }) {
      end_at: +endDate,
      unit,
      tz: getTimezone(),
+      token,
    },
    { update: [modified] },
  );
--- a/components/metrics/EventsTable.js
+++ b/components/metrics/EventsTable.js
@ -3,13 +3,14 @@ import { FormattedMessage } from 'react-intl';
 import MetricsTable from './MetricsTable';
 import styles from './EventsTable.module.css';

-export default function EventsTable({ websiteId, limit, onExpand, onDataLoad }) {
+export default function EventsTable({ websiteId, token, limit, onExpand, onDataLoad }) {
  return (
    <MetricsTable
      title={<FormattedMessage id="metrics.events" defaultMessage="Events" />}
      type="event"
      metric={<FormattedMessage id="metrics.actions" defaultMessage="Actions" />}
      websiteId={websiteId}
+      token={token}
      limit={limit}
      renderLabel={({ x }) => <Label value={x} />}
      onExpand={onExpand}
--- a/components/metrics/MetricsBar.js
+++ b/components/metrics/MetricsBar.js
@ -3,12 +3,12 @@ import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
 import Loading from 'components/common/Loading';
 import useFetch from 'hooks/useFetch';
-import { useDateRange } from 'hooks/useDateRange';
+import useDateRange from 'hooks/useDateRange';
 import { formatShortTime, formatNumber, formatLongNumber } from 'lib/format';
 import MetricCard from './MetricCard';
 import styles from './MetricsBar.module.css';

-export default function MetricsBar({ websiteId, className }) {
+export default function MetricsBar({ websiteId, token, className }) {
  const dateRange = useDateRange(websiteId);
  const { startDate, endDate, modified } = dateRange;
  const { data } = useFetch(
@ -16,6 +16,7 @@ export default function MetricsBar({ websiteId, className }) {
    {
      start_at: +startDate,
      end_at: +endDate,
+      token,
    },
    {
      update: [modified],
--- a/components/metrics/MetricsTable.js
+++ b/components/metrics/MetricsTable.js
@ -10,12 +10,13 @@ import useFetch from 'hooks/useFetch';
 import Arrow from 'assets/arrow-right.svg';
 import { percentFilter } from 'lib/filters';
 import { formatNumber, formatLongNumber } from 'lib/format';
-import { useDateRange } from 'hooks/useDateRange';
+import useDateRange from 'hooks/useDateRange';
 import styles from './MetricsTable.module.css';

 export default function MetricsTable({
  websiteId,
  websiteDomain,
+  token,
  title,
  metric,
  type,
@ -37,6 +38,7 @@ export default function MetricsTable({
      start_at: +startDate,
      end_at: +endDate,
      domain: websiteDomain,
+      token,
    },
    { onDataLoad, delay: 300, update: [modified] },
  );
--- a/components/metrics/OSTable.js
+++ b/components/metrics/OSTable.js
@ -3,13 +3,14 @@ import MetricsTable from './MetricsTable';
 import { osFilter } from 'lib/filters';
 import { FormattedMessage } from 'react-intl';

-export default function OSTable({ websiteId, limit, onExpand }) {
+export default function OSTable({ websiteId, token, limit, onExpand }) {
  return (
    <MetricsTable
      title={<FormattedMessage id="metrics.operating-systems" defaultMessage="Operating system" />}
      type="os"
      metric={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />}
      websiteId={websiteId}
+      token={token}
      limit={limit}
      dataFilter={osFilter}
      onExpand={onExpand}
--- a/components/metrics/PagesTable.js
+++ b/components/metrics/PagesTable.js
@ -5,7 +5,7 @@ import { urlFilter } from 'lib/filters';
 import { FILTER_COMBINED, FILTER_RAW } from 'lib/constants';
 import MetricsTable from './MetricsTable';

-export default function PagesTable({ websiteId, websiteDomain, limit, onExpand }) {
+export default function PagesTable({ websiteId, token, websiteDomain, limit, onExpand }) {
  const [filter, setFilter] = useState(FILTER_COMBINED);

  const buttons = [
@ -25,6 +25,7 @@ export default function PagesTable({ websiteId, websiteDomain, limit, onExpand }
        limit ? null : <FilterButtons buttons={buttons} selected={filter} onClick={setFilter} />
      }
      websiteId={websiteId}
+      token={token}
      limit={limit}
      dataFilter={urlFilter}
      filterOptions={{ domain: websiteDomain, raw: filter === FILTER_RAW }}
--- a/components/metrics/QuickButtons.js
+++ b/components/metrics/QuickButtons.js
@ -1,30 +0,0 @@
-import React from 'react';
-import ButtonGroup from 'components/common/ButtonGroup';
-import { getDateRange } from 'lib/date';
-import styles from './QuickButtons.module.css';
-
-const options = [
-  { label: '24h', value: '24hour' },
-  { label: '7d', value: '7day' },
-  { label: '30d', value: '30day' },
-];
-
-export default function QuickButtons({ value, onChange }) {
-  const selectedItem = options.find(item => item.value === value)?.value;
-
-  function handleClick(selected) {
-    if (selected !== value) {
-      onChange(getDateRange(selected));
-    }
-  }
-
-  return (
-    <ButtonGroup
-      size="xsmall"
-      className={styles.buttons}
-      items={options}
-      selectedItem={selectedItem}
-      onClick={handleClick}
-    />
-  );
-}
--- a/components/metrics/QuickButtons.module.css
+++ b/components/metrics/QuickButtons.module.css
@ -1,33 +0,0 @@
-.buttons {
-  display: flex;
-  align-content: center;
-  position: absolute;
-  top: 0;
-  right: 0;
-  margin: auto;
-}
-
-.buttons button + button {
-  margin-left: 10px;
-}
-
-.buttons .button {
-  font-size: var(--font-size-xsmall);
-  padding: 4px 8px;
-}
-
-.active {
-  font-weight: 600;
-}
-
-@media only screen and (max-width: 768px) {
-  .buttons button:last-child {
-    display: none;
-  }
-}
-
-@media only screen and (max-width: 576px) {
-  .buttons {
-    display: none;
-  }
-}
--- a/components/metrics/ReferrersTable.js
+++ b/components/metrics/ReferrersTable.js
@ -5,7 +5,13 @@ 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 = () => {} }) {
+export default function ReferrersTable({
+  websiteId,
+  websiteDomain,
+  token,
+  limit,
+  onExpand = () => {},
+}) {
  const [filter, setFilter] = useState(FILTER_COMBINED);

  const buttons = [
@ -20,9 +26,9 @@ export default function ReferrersTable({ websiteId, websiteDomain, limit, onExpa
    { label: <FormattedMessage id="metrics.filter.raw" defaultMessage="Raw" />, value: FILTER_RAW },
  ];

-  const renderLink = ({ x: url }) => {
-    return url.startsWith('http') ? (
-      <a href={url} target="_blank" rel="noreferrer">
+  const renderLink = ({ w: href, x: url }) => {
+    return (href || url).startsWith('http') ? (
+      <a href={href || url} target="_blank" rel="noreferrer">
        {decodeURI(url)}
      </a>
    ) : (
@ -40,6 +46,7 @@ export default function ReferrersTable({ websiteId, websiteDomain, limit, onExpa
      }
      websiteId={websiteId}
      websiteDomain={websiteDomain}
+      token={token}
      limit={limit}
      dataFilter={refFilter}
      filterOptions={{
--- a/components/metrics/WebsiteChart.js
+++ b/components/metrics/WebsiteChart.js
@ -3,17 +3,18 @@ import { useDispatch } from 'react-redux';
 import classNames from 'classnames';
 import PageviewsChart from './PageviewsChart';
 import MetricsBar from './MetricsBar';
+import WebsiteHeader from './WebsiteHeader';
 import DateFilter from 'components/common/DateFilter';
 import StickyHeader from 'components/helpers/StickyHeader';
 import useFetch from 'hooks/useFetch';
+import useDateRange from 'hooks/useDateRange';
 import { getDateArray, getDateLength, getTimezone } from 'lib/date';
 import { setDateRange } from 'redux/actions/websites';
 import styles from './WebsiteChart.module.css';
-import WebsiteHeader from './WebsiteHeader';
-import { useDateRange } from '../../hooks/useDateRange';

 export default function WebsiteChart({
  websiteId,
+  token,
  title,
  stickyHeader = false,
  showLink = false,
@ -30,6 +31,7 @@ export default function WebsiteChart({
      end_at: +endDate,
      unit,
      tz: getTimezone(),
+      token,
    },
    { onDataLoad, update: [modified] },
  );
@ -50,7 +52,7 @@ export default function WebsiteChart({

  return (
    <>
-      <WebsiteHeader websiteId={websiteId} title={title} showLink={showLink} />
+      <WebsiteHeader websiteId={websiteId} token={token} title={title} showLink={showLink} />
      <div className={classNames(styles.header, 'row')}>
        <StickyHeader
          className={classNames(styles.metrics, 'col row')}
@ -58,7 +60,7 @@ export default function WebsiteChart({
          enabled={stickyHeader}
        >
          <div className="col-12 col-lg-9">
-            <MetricsBar websiteId={websiteId} />
+            <MetricsBar websiteId={websiteId} token={token} />
          </div>
          <div className={classNames(styles.filter, 'col-12 col-lg-3')}>
            <DateFilter
--- a/components/metrics/WebsiteHeader.js
+++ b/components/metrics/WebsiteHeader.js
@ -2,18 +2,18 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import Link from 'components/common/Link';
 import PageHeader from 'components/layout/PageHeader';
+import RefreshButton from 'components/common/RefreshButton';
+import ButtonLayout from 'components/layout/ButtonLayout';
+import Icon from 'components/common/Icon';
 import ActiveUsers from './ActiveUsers';
 import Arrow from 'assets/arrow-right.svg';
 import styles from './WebsiteHeader.module.css';
-import RefreshButton from '../common/RefreshButton';
-import ButtonLayout from '../layout/ButtonLayout';
-import Icon from '../common/Icon';

-export default function WebsiteHeader({ websiteId, title, showLink = false }) {
+export default function WebsiteHeader({ websiteId, token, title, showLink = false }) {
  return (
    <PageHeader>
      <div className={styles.title}>{title}</div>
-      <ActiveUsers className={styles.active} websiteId={websiteId} />
+      <ActiveUsers className={styles.active} websiteId={websiteId} token={token} />
      <ButtonLayout>
        <RefreshButton websiteId={websiteId} />
        {showLink && (
--- a/components/settings/AccountSettings.js
+++ b/components/settings/AccountSettings.js
@ -92,7 +92,7 @@ export default function AccountSettings() {
    <>
      <PageHeader>
        <div>
-          <FormattedMessage id="settings.accounts" defaultMessage="Accounts" />
+          <FormattedMessage id="label.accounts" defaultMessage="Accounts" />
        </div>
        <Button icon={<Plus />} size="small" onClick={() => setAddAccount(true)}>
          <div>
--- a/components/settings/ProfileSettings.js
+++ b/components/settings/ProfileSettings.js
@ -1,29 +1,44 @@
 import React, { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import PageHeader from 'components/layout/PageHeader';
 import Button from 'components/common/Button';
 import Modal from 'components/common/Modal';
 import Toast from 'components/common/Toast';
 import ChangePasswordForm from 'components/forms/ChangePasswordForm';
+import DateFilter from 'components/common/DateFilter';
 import Dots from 'assets/ellipsis-h.svg';
+import { getTimezone } from 'lib/date';
+import { setItem } from 'lib/web';
+import useDateRange from 'hooks/useDateRange';
+import { setDateRange } from 'redux/actions/websites';
+import styles from './ProfileSettings.module.css';

 export default function ProfileSettings() {
+  const dispatch = useDispatch();
  const user = useSelector(state => state.user);
  const [changePassword, setChangePassword] = useState(false);
  const [message, setMessage] = useState();
  const { user_id } = user;
+  const timezone = getTimezone();
+  const dateRange = useDateRange(0);
+  const { startDate, endDate, value } = dateRange;

  function handleSave() {
    setChangePassword(false);
    setMessage(<FormattedMessage id="message.save-success" defaultMessage="Saved successfully." />);
  }

+  function handleDateChange(values) {
+    setItem(`umami.date-range`, values);
+    dispatch(setDateRange(0, values));
+  }
+
  return (
    <>
      <PageHeader>
        <div>
-          <FormattedMessage id="settings.profile" defaultMessage="Profile" />
+          <FormattedMessage id="label.profile" defaultMessage="Profile" />
        </div>
        <Button icon={<Dots />} size="small" onClick={() => setChangePassword(true)}>
          <div>
@ -36,6 +51,21 @@ export default function ProfileSettings() {
          <FormattedMessage id="label.username" defaultMessage="Username" />
        </dt>
        <dd>{user.username}</dd>
+        <dt>
+          <FormattedMessage id="label.timezone" defaultMessage="Timezone" />
+        </dt>
+        <dd>{timezone}</dd>
+        <dt>
+          <FormattedMessage id="label.default-date-range" defaultMessage="Default date range" />
+        </dt>
+        <dd className={styles.date}>
+          <DateFilter
+            value={value}
+            startDate={startDate}
+            endDate={endDate}
+            onChange={handleDateChange}
+          />
+        </dd>
      </dl>
      {changePassword && (
        <Modal
--- a/components/settings/ProfileSettings.module.css
+++ b/components/settings/ProfileSettings.module.css
@ -0,0 +1,3 @@
+.date {
+  display: flex;
+}
--- a/components/settings/Settings.js
+++ b/components/settings/Settings.js
@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { useRouter } from 'next/router';
 import Page from 'components/layout/Page';
 import MenuLayout from 'components/layout/MenuLayout';
 import WebsiteSettings from './WebsiteSettings';
@ -7,33 +8,38 @@ import ProfileSettings from './ProfileSettings';
 import { useSelector } from 'react-redux';
 import { FormattedMessage } from 'react-intl';

-const WEBSITES = 1;
-const ACCOUNTS = 2;
-const PROFILE = 3;
+const WEBSITES = '/settings';
+const ACCOUNTS = '/settings/accounts';
+const PROFILE = '/settings/profile';

 export default function Settings() {
  const user = useSelector(state => state.user);
  const [option, setOption] = useState(WEBSITES);
+  const router = useRouter();
+  const { pathname } = router;

  const menuOptions = [
    {
-      label: <FormattedMessage id="settings.websites" defaultMessage="Websites" />,
+      label: <FormattedMessage id="label.websites" defaultMessage="Websites" />,
      value: WEBSITES,
    },
    {
-      label: <FormattedMessage id="settings.accounts" defaultMessage="Accounts" />,
+      label: <FormattedMessage id="label.accounts" defaultMessage="Accounts" />,
      value: ACCOUNTS,
      hidden: !user.is_admin,
    },
-    { label: <FormattedMessage id="settings.profile" defaultMessage="Profile" />, value: PROFILE },
+    {
+      label: <FormattedMessage id="label.profile" defaultMessage="Profile" />,
+      value: PROFILE,
+    },
  ];

  return (
    <Page>
      <MenuLayout menu={menuOptions} selectedOption={option} onMenuSelect={setOption}>
-        {option === WEBSITES && <WebsiteSettings />}
-        {option === ACCOUNTS && <AccountSettings />}
-        {option === PROFILE && <ProfileSettings />}
+        {pathname === WEBSITES && <WebsiteSettings />}
+        {pathname === ACCOUNTS && <AccountSettings />}
+        {pathname === PROFILE && <ProfileSettings />}
      </MenuLayout>
    </Page>
  );
--- a/components/settings/WebsiteSettings.js
+++ b/components/settings/WebsiteSettings.js
@ -37,7 +37,7 @@ export default function WebsiteSettings() {
        <Button
          icon={<LinkIcon />}
          size="small"
-          tooltip={<FormattedMessage id="tooltip.get-share-url" defaultMessage="Get share URL" />}
+          tooltip={<FormattedMessage id="message.get-share-url" defaultMessage="Get share URL" />}
          tooltipId={`button-share-${row.website_id}`}
          onClick={() => setShowUrl(row)}
        />
@ -46,7 +46,7 @@ export default function WebsiteSettings() {
        icon={<Code />}
        size="small"
        tooltip={
-          <FormattedMessage id="tooltip.get-tracking-code" defaultMessage="Get tracking code" />
+          <FormattedMessage id="message.get-tracking-code" defaultMessage="Get tracking code" />
        }
        tooltipId={`button-code-${row.website_id}`}
        onClick={() => setShowCode(row)}
@ -111,7 +111,7 @@ export default function WebsiteSettings() {
    <EmptyPlaceholder
      msg={
        <FormattedMessage
-          id="placeholder.message.no-websites-configured"
+          id="message.no-websites-configured"
          defaultMessage="You don't have any websites configured."
        />
      }
@ -128,7 +128,7 @@ export default function WebsiteSettings() {
    <>
      <PageHeader>
        <div>
-          <FormattedMessage id="settings.websites" defaultMessage="Websites" />
+          <FormattedMessage id="label.websites" defaultMessage="Websites" />
        </div>
        <Button icon={<Plus />} size="small" onClick={() => setAddWebsite(true)}>
          <div>
--- a/hooks/useDateRange.js
+++ b/hooks/useDateRange.js
@ -1,8 +1,18 @@
 import { useSelector } from 'react-redux';
+import { parseISO } from 'date-fns';
 import { getDateRange } from 'lib/date';
+import { getItem } from 'lib/web';
+
+export default function useDateRange(websiteId, defaultDateRange = '24hour') {
+  const globalDefault = getItem('umami.date-range');
+
+  if (globalDefault) {
+    globalDefault.startDate = parseISO(globalDefault.startDate);
+    globalDefault.endDate = parseISO(globalDefault.endDate);
+  }

-export function useDateRange(websiteId, defaultDateRange = '7day') {
  return useSelector(
-    state => state.websites[websiteId]?.dateRange || getDateRange(defaultDateRange),
+    state =>
+      state.websites[websiteId]?.dateRange || globalDefault || getDateRange(defaultDateRange),
  );
 }
--- a/lang/de-DE.json
+++ b/lang/de-DE.json
@ -1,30 +1,26 @@
 {
-  "active-users.message": "{x} {x, plural, one {aktiver Besucher} other {aktive Besucher}}",
  "button.add-account": "Konto hinzufügen",
  "button.add-website": "Webseite hinzufügen",
  "button.back": "Zurück",
  "button.cancel": "Abbrechen",
  "button.change-password": "Passwort ändern",
  "button.copy-to-clipboard": "In die Zwischenablage kopieren",
+  "button.date-range": "Date range",
  "button.delete": "Löschen",
  "button.edit": "Bearbeiten",
  "button.login": "Anmelden",
  "button.more": "Mehr",
  "button.refresh": "Refresh",
  "button.save": "Speichern",
+  "button.single-day": "Single day",
  "button.view-details": "Details anzeigen",
  "button.websites": "Webseiten",
-  "device.desktop": "Desktop",
-  "device.laptop": "Laptop",
-  "device.mobile": "Mobile",
-  "device.tablet": "Tablet",
-  "footer.powered-by": "Powered by {name}",
-  "header.nav.dashboard": "Übersicht",
-  "header.nav.settings": "Einstellungen",
+  "label.accounts": "Konten",
  "label.administrator": "Administrator",
  "label.confirm-password": "Passwort wiederholen",
  "label.current-password": "Derzeitiges Passwort",
  "label.custom-range": "Custom range",
+  "label.dashboard": "Übersicht",
  "label.domain": "Domain",
  "label.enable-share-url": "Freigabe-URL aktivieren",
  "label.invalid": "Ungültig",
@ -37,20 +33,29 @@
  "label.new-password": "Neues Passwort",
  "label.password": "Passwort",
  "label.passwords-dont-match": "Passwörter stimmen nicht überein",
+  "label.profile": "Profil",
  "label.required": "Erforderlich",
+  "label.settings": "Einstellungen",
  "label.this-month": "Diesen Monat",
  "label.this-week": "Diese Woche",
  "label.this-year": "Dieses Jahr",
  "label.today": "Heute",
  "label.unknown": "Unknown",
  "label.username": "Benutzername",
+  "label.websites": "Webseiten",
+  "message.active-users": "{x} {x, plural, one {aktiver Besucher} other {aktive Besucher}}",
  "message.confirm-delete": "Sind sie sich sicher {target} zu löschen?",
  "message.copied": "In Zwischenablage kopiert!",
  "message.delete-warning": "Alle zugehörigen Daten werden auch gelöscht.",
  "message.failure": "Es it ein Fehler aufgetreten.",
+  "message.get-share-url": "Freigabe-URL abrufen",
+  "message.get-tracking-code": "Erstelle Tracking Kennung",
+  "message.go-to-settings": "Zu den Einstellungen",
  "message.incorrect-username-password": "Falsches Passwort oder Benutzername.",
  "message.no-data-available": "Keine Daten vorhanden.",
+  "message.no-websites-configured": "Es ist keine Webseite vorhanden.",
  "message.page-not-found": "Seite nicht gefunden.",
+  "message.powered-by": "Powered by {name}",
  "message.save-success": "Erfolgreich gespeichert.",
  "message.share-url": "Dies ist der öffentliche URL zum Teilen für {target}.",
  "message.track-stats": "Um die Statistiken für {target} zu übermitteln, platzieren Sie bitte den folgenden Quelltext im {head} ihrer Homepage.",
@ -60,6 +65,10 @@
  "metrics.bounce-rate": "Absprungrate",
  "metrics.browsers": "Browsers",
  "metrics.countries": "Länder",
+  "metrics.device.desktop": "Desktop",
+  "metrics.device.laptop": "Laptop",
+  "metrics.device.mobile": "Mobile",
+  "metrics.device.tablet": "Tablet",
  "metrics.devices": "Geräte",
  "metrics.events": "Events",
  "metrics.filter.combined": "Kombiniert",
@ -72,11 +81,6 @@
  "metrics.unique-visitors": "Eindeutige Besucher",
  "metrics.views": "Aufrufe",
  "metrics.visitors": "Besucher",
-  "placeholder.message.go-to-settings": "Zu den Einstellungen",
-  "placeholder.message.no-websites-configured": "Es ist keine Webseite vorhanden.",
-  "settings.accounts": "Konten",
-  "settings.profile": "Profil",
-  "settings.websites": "Webseiten",
  "title.add-account": "Konto hinzugfügen",
  "title.add-website": "Webseite hinzufügen",
  "title.change-password": "Passwort ändern",
@ -85,7 +89,5 @@
  "title.edit-account": "Konto bearbeiten",
  "title.edit-website": "Webseite bearbeiten",
  "title.share-url": "Freigabe-URL",
-  "title.tracking-code": "Tracking Kennung",
-  "tooltip.get-share-url": "Freigabe-URL abrufen",
-  "tooltip.get-tracking-code": "Erstelle Tracking Kennung"
+  "title.tracking-code": "Tracking Kennung"
 }
--- a/lang/en-US.json
+++ b/lang/en-US.json
@ -1,30 +1,26 @@
 {
-  "active-users.message": "{x} current {x, plural, one {visitor} other {visitors}}",
  "button.add-account": "Add account",
  "button.add-website": "Add website",
  "button.back": "Back",
  "button.cancel": "Cancel",
  "button.change-password": "Change password",
  "button.copy-to-clipboard": "Copy to clipboard",
+  "button.date-range": "Date range",
  "button.delete": "Delete",
  "button.edit": "Edit",
  "button.login": "Login",
  "button.more": "More",
  "button.refresh": "Refresh",
  "button.save": "Save",
+  "button.single-day": "Single day",
  "button.view-details": "View details",
  "button.websites": "Websites",
-  "device.desktop": "Desktop",
-  "device.laptop": "Laptop",
-  "device.mobile": "Mobile",
-  "device.tablet": "Tablet",
-  "footer.powered-by": "Powered by {name}",
-  "header.nav.dashboard": "Dashboard",
-  "header.nav.settings": "Settings",
+  "label.accounts": "Accounts",
  "label.administrator": "Administrator",
  "label.confirm-password": "Confirm password",
  "label.current-password": "Current password",
  "label.custom-range": "Custom range",
+  "label.dashboard": "Dashboard",
  "label.domain": "Domain",
  "label.enable-share-url": "Enable share URL",
  "label.invalid": "Invalid",
@ -37,20 +33,29 @@
  "label.new-password": "New password",
  "label.password": "Password",
  "label.passwords-dont-match": "Passwords don't match",
+  "label.profile": "Profile",
  "label.required": "Required",
+  "label.settings": "Settings",
  "label.this-month": "This month",
  "label.this-week": "This week",
  "label.this-year": "This year",
  "label.today": "Today",
  "label.unknown": "Unknown",
  "label.username": "Username",
+  "label.websites": "Websites",
+  "message.active-users": "{x} current {x, plural, one {visitor} other {visitors}}",
  "message.confirm-delete": "Are your sure you want to delete {target}?",
  "message.copied": "Copied!",
  "message.delete-warning": "All associated data will be deleted as well.",
  "message.failure": "Something went wrong.",
+  "message.get-share-url": "Get share URL",
+  "message.get-tracking-code": "Get tracking code",
+  "message.go-to-settings": "Go to settings",
  "message.incorrect-username-password": "Incorrect username/password.",
  "message.no-data-available": "No data available.",
+  "message.no-websites-configured": "You don't have any websites configured.",
  "message.page-not-found": "Page not found.",
+  "message.powered-by": "Powered by {name}",
  "message.save-success": "Saved successfully.",
  "message.share-url": "This is the publicly shared URL for {target}.",
  "message.track-stats": "To track stats for {target}, place the following code in the {head} section of your website.",
@ -60,6 +65,10 @@
  "metrics.bounce-rate": "Bounce rate",
  "metrics.browsers": "Browsers",
  "metrics.countries": "Countries",
+  "metrics.device.desktop": "Desktop",
+  "metrics.device.laptop": "Laptop",
+  "metrics.device.mobile": "Mobile",
+  "metrics.device.tablet": "Tablet",
  "metrics.devices": "Devices",
  "metrics.events": "Events",
  "metrics.filter.combined": "Combined",
@ -72,11 +81,6 @@
  "metrics.unique-visitors": "Unique visitors",
  "metrics.views": "Views",
  "metrics.visitors": "Visitors",
-  "placeholder.message.go-to-settings": "Go to settings",
-  "placeholder.message.no-websites-configured": "You don't have any websites configured.",
-  "settings.accounts": "Accounts",
-  "settings.profile": "Profile",
-  "settings.websites": "Websites",
  "title.add-account": "Add account",
  "title.add-website": "Add website",
  "title.change-password": "Change password",
@ -85,7 +89,5 @@
  "title.edit-account": "Edit account",
  "title.edit-website": "Edit website",
  "title.share-url": "Share URL",
-  "title.tracking-code": "Tracking code",
-  "tooltip.get-share-url": "Get share URL",
-  "tooltip.get-tracking-code": "Get tracking code"
+  "title.tracking-code": "Tracking code"
 }
--- a/lang/es-MX.json
+++ b/lang/es-MX.json
@ -1,30 +1,26 @@
 {
-  "active-users.message": "{x} {x, plural, one {activo} other {activos}}",
  "button.add-account": "Agregar usuario",
  "button.add-website": "Agregar sitio",
  "button.back": "Atrás",
  "button.cancel": "Cancelar",
  "button.change-password": "Cambiar contraseña",
  "button.copy-to-clipboard": "Copiar al portapapeles",
+  "button.date-range": "Date range",
  "button.delete": "Eliminar",
  "button.edit": "Editar",
  "button.login": "Iniciar sesión",
  "button.more": "Más",
  "button.refresh": "Refresh",
  "button.save": "Guardar",
+  "button.single-day": "Single day",
  "button.view-details": "Ver detalles",
  "button.websites": "Sitios",
-  "device.desktop": "Desktop",
-  "device.laptop": "Laptop",
-  "device.mobile": "Mobile",
-  "device.tablet": "Tablet",
-  "footer.powered-by": "Desarrollado con {name}",
-  "header.nav.dashboard": "Panel de control",
-  "header.nav.settings": "Configuraciones",
+  "label.accounts": "Usuarios",
  "label.administrator": "Administrador",
  "label.confirm-password": "Confirmar contraseña",
  "label.current-password": "Contraseña actual",
  "label.custom-range": "Custom range",
+  "label.dashboard": "Panel de control",
  "label.domain": "Dominio",
  "label.enable-share-url": "Habilitar compartir URL",
  "label.invalid": "Inválido",
@ -37,20 +33,29 @@
  "label.new-password": "Nueva contraseña",
  "label.password": "Contraseña",
  "label.passwords-dont-match": "Las contraseñas no coinciden",
+  "label.profile": "Perfil",
  "label.required": "Requerido",
+  "label.settings": "Configuraciones",
  "label.this-month": "Este mes",
  "label.this-week": "Esta semana",
  "label.this-year": "Este año",
  "label.today": "Hoy",
  "label.unknown": "Unknown",
  "label.username": "Nombre de usuario",
+  "label.websites": "Sitios",
+  "message.active-users": "{x} {x, plural, one {activo} other {activos}}",
  "message.confirm-delete": "¿Estás seguro(a) de querer eliminar {target}?",
  "message.copied": "Copiado!",
  "message.delete-warning": "Toda la información relacionada será eliminada.",
  "message.failure": "Algo falló.",
+  "message.get-share-url": "Obtener URL para compartir",
+  "message.get-tracking-code": "Obtener código de rastreo",
+  "message.go-to-settings": "Ir a la configuración",
  "message.incorrect-username-password": "Nombre de usuario o contraseña incorrectos.",
  "message.no-data-available": "Sin información disponible.",
+  "message.no-websites-configured": "No tienes ningún sitio configurado.",
  "message.page-not-found": "Page not found",
+  "message.powered-by": "Desarrollado con {name}",
  "message.save-success": "Guardado exitosamente.",
  "message.share-url": "Esta es la URL compartida públicamente para {target}.",
  "message.track-stats": "Para registrar estadísticas para {target}, copia el siguiente código dentro de la etiqueta {head} de tu sitio.",
@ -60,6 +65,10 @@
  "metrics.bounce-rate": "Porcentaje de rebote",
  "metrics.browsers": "Navegadores",
  "metrics.countries": "Países",
+  "metrics.device.desktop": "Desktop",
+  "metrics.device.laptop": "Laptop",
+  "metrics.device.mobile": "Mobile",
+  "metrics.device.tablet": "Tablet",
  "metrics.devices": "Dispositivos",
  "metrics.events": "Eventos",
  "metrics.filter.combined": "Combinado",
@ -72,11 +81,6 @@
  "metrics.unique-visitors": "Visitantes únicos",
  "metrics.views": "Vistas",
  "metrics.visitors": "Visitantes",
-  "placeholder.message.go-to-settings": "Ir a la configuración",
-  "placeholder.message.no-websites-configured": "No tienes ningún sitio configurado.",
-  "settings.accounts": "Usuarios",
-  "settings.profile": "Perfil",
-  "settings.websites": "Sitios",
  "title.add-account": "Agregar usuario",
  "title.add-website": "Agregar sitio",
  "title.change-password": "Cambiar contraseña",
@ -85,7 +89,5 @@
  "title.edit-account": "Editar usuario",
  "title.edit-website": "Editar sitio",
  "title.share-url": "Compartir URL",
-  "title.tracking-code": "Código de rastreo",
-  "tooltip.get-share-url": "Obtener URL para compartir",
-  "tooltip.get-tracking-code": "Obtener código de rastreo"
+  "title.tracking-code": "Código de rastreo"
 }
--- a/lang/fr-FR.json
+++ b/lang/fr-FR.json
@ -1,30 +1,26 @@
 {
-  "active-users.message": "{x} {x, plural, one {visiteur} other {visiteurs}} actuellement",
  "button.add-account": "Ajouter un compte",
  "button.add-website": "Ajouter un site",
  "button.back": "Retour",
  "button.cancel": "Annuler",
  "button.change-password": "Changer de mot de passse",
  "button.copy-to-clipboard": "Copier dans le presse papier",
+  "button.date-range": "Date range",
  "button.delete": "Supprimer",
  "button.edit": "Modifier",
  "button.login": "Connexion",
  "button.more": "Plus",
  "button.refresh": "Refresh",
  "button.save": "Sauvegarder",
+  "button.single-day": "Single day",
  "button.view-details": "Voir les details",
  "button.websites": "Sites",
-  "device.desktop": "Desktop",
-  "device.laptop": "Laptop",
-  "device.mobile": "Mobile",
-  "device.tablet": "Tablet",
-  "footer.powered-by": "Propulsé par {name}",
-  "header.nav.dashboard": "Tableau de bord",
-  "header.nav.settings": "Paramètres",
+  "label.accounts": "Comptes",
  "label.administrator": "Administrateur",
  "label.confirm-password": "Confirmation du mot de passe",
  "label.current-password": "Mot de passe actuel",
  "label.custom-range": "Plage personnalisée",
+  "label.dashboard": "Tableau de bord",
  "label.domain": "Domaine",
  "label.enable-share-url": "Activer le partage d'URL",
  "label.invalid": "Invalide",
@ -37,20 +33,29 @@
  "label.new-password": "Nouveau mot de passe",
  "label.password": "Mot de passe",
  "label.passwords-dont-match": "Les mots de passe ne correspondent pas",
+  "label.profile": "Profile",
  "label.required": "Requis",
+  "label.settings": "Paramètres",
  "label.this-month": "Ce mois ci",
  "label.this-week": "Cette semaine",
  "label.this-year": "Cette année",
  "label.today": "Aujourd'hui",
  "label.unknown": "Unknown",
  "label.username": "Nom d'utilisateur",
+  "label.websites": "Sites",
+  "message.active-users": "{x} {x, plural, one {visiteur} other {visiteurs}} actuellement",
  "message.confirm-delete": "Êtes-vous sur de vouloir supprimer {target}?",
  "message.copied": "Copié !",
  "message.delete-warning": "Toutes les données associées seront également supprimées.",
  "message.failure": "Un problème est survenu.",
+  "message.get-share-url": "Obtenez l'URL de partage",
+  "message.get-tracking-code": "Obtenez le code de suivi",
+  "message.go-to-settings": "Aller aux paramètres",
  "message.incorrect-username-password": "nom d'utilisateurs/mot de passe incorrect.",
  "message.no-data-available": "Pas de données disponibles.",
+  "message.no-websites-configured": "Vous n'avez configuré aucun site Web.",
  "message.page-not-found": "Page non trouvée.",
+  "message.powered-by": "Propulsé par {name}",
  "message.save-success": "Enregistré avec succès.",
  "message.share-url": "Ceci est l'URL partagée pour {target}.",
  "message.track-stats": "Pour suivre les statistiques de {target}, placez le code suivant dans la section {head} de votre site Web.",
@ -60,6 +65,10 @@
  "metrics.bounce-rate": "Taux de rebond",
  "metrics.browsers": "Navigateurs",
  "metrics.countries": "Pays",
+  "metrics.device.desktop": "Desktop",
+  "metrics.device.laptop": "Laptop",
+  "metrics.device.mobile": "Mobile",
+  "metrics.device.tablet": "Tablet",
  "metrics.devices": "Appareils",
  "metrics.events": "Événements",
  "metrics.filter.combined": "Combiné",
@ -72,11 +81,6 @@
  "metrics.unique-visitors": "Visiteurs uniques",
  "metrics.views": "Vues",
  "metrics.visitors": "Visiteurs",
-  "placeholder.message.go-to-settings": "Aller aux paramètres",
-  "placeholder.message.no-websites-configured": "Vous n'avez configuré aucun site Web.",
-  "settings.accounts": "Comptes",
-  "settings.profile": "Profile",
-  "settings.websites": "Sites",
  "title.add-account": "Ajouter un compte",
  "title.add-website": "Ajouter un site",
  "title.change-password": "Changer le mot de passe",
@ -85,7 +89,5 @@
  "title.edit-account": "Modifier le compte",
  "title.edit-website": "Modifier le site",
  "title.share-url": "Partager l'URL",
-  "title.tracking-code": "Code de suivi",
-  "tooltip.get-share-url": "Obtenez l'URL de partage",
-  "tooltip.get-tracking-code": "Obtenez le code de suivi"
+  "title.tracking-code": "Code de suivi"
 }
--- a/lang/ja-JP.json
+++ b/lang/ja-JP.json
@ -1,30 +1,26 @@
 {
-  "active-users.message": "{x}人が閲覧中です。",
  "button.add-account": "アカウントを追加する",
  "button.add-website": "Webサイトを追加する",
  "button.back": "戻る",
  "button.cancel": "キャンセル",
  "button.change-password": "パスワード変更",
  "button.copy-to-clipboard": "クリップボードにコピー",
+  "button.date-range": "Date range",
  "button.delete": "削除",
  "button.edit": "編集",
  "button.login": "ログイン",
  "button.more": "さらに表示",
  "button.refresh": "Refresh",
  "button.save": "保存",
+  "button.single-day": "Single day",
  "button.view-details": "詳細表示",
  "button.websites": "Webサイト",
-  "device.desktop": "Desktop",
-  "device.laptop": "Laptop",
-  "device.mobile": "Mobile",
-  "device.tablet": "Tablet",
-  "footer.powered-by": "Powered by {name}",
-  "header.nav.dashboard": "ダッシュボード",
-  "header.nav.settings": "設定",
+  "label.accounts": "アカウント",
  "label.administrator": "管理者",
  "label.confirm-password": "パスワード（確認）",
  "label.current-password": "現在のパスワード",
  "label.custom-range": "Custom range",
+  "label.dashboard": "ダッシュボード",
  "label.domain": "ドメイン",
  "label.enable-share-url": "共有リンクを有効にする",
  "label.invalid": "無効",
@ -37,20 +33,29 @@
  "label.new-password": "新しいパスワード",
  "label.password": "パスワード",
  "label.passwords-dont-match": "パスワードが一致しません",
+  "label.profile": "プロファイル",
  "label.required": "必須",
+  "label.settings": "設定",
  "label.this-month": "今月",
  "label.this-week": "今週",
  "label.this-year": "今年",
  "label.today": "今日",
  "label.unknown": "Unknown",
  "label.username": "ユーザー名",
+  "label.websites": "Webサイト",
+  "message.active-users": "{x}人が閲覧中です。",
  "message.confirm-delete": "{target}を削除してもよろしいですか？",
  "message.copied": "コピーしました！",
  "message.delete-warning": "関連するすべてのデータも削除されます。",
  "message.failure": "問題が発生しました。",
+  "message.get-share-url": "共有リンクを取得",
+  "message.get-tracking-code": "トラッキングコードを取得",
+  "message.go-to-settings": "設定する",
  "message.incorrect-username-password": "ユーザー名/パスワードが正しくありません。",
  "message.no-data-available": "データがありません。",
+  "message.no-websites-configured": "Webサイトが設定されていません。",
  "message.page-not-found": "ページが見つかりません。",
+  "message.powered-by": "Powered by {name}",
  "message.save-success": "正常に保存されました。",
  "message.share-url": "これは {target} の共有リンクです。",
  "message.track-stats": "{target}のアクセス解析を開始するには、次のコードをWebサイトの{head}セクションへ追加してください。",
@ -60,6 +65,10 @@
  "metrics.bounce-rate": "直帰率",
  "metrics.browsers": "ブラウザ",
  "metrics.countries": "国",
+  "metrics.device.desktop": "Desktop",
+  "metrics.device.laptop": "Laptop",
+  "metrics.device.mobile": "Mobile",
+  "metrics.device.tablet": "Tablet",
  "metrics.devices": "デバイス",
  "metrics.events": "イベント",
  "metrics.filter.combined": "パスまで",
@ -72,11 +81,6 @@
  "metrics.unique-visitors": "ユニーク訪問者数",
  "metrics.views": "閲覧数",
  "metrics.visitors": "訪問者数",
-  "placeholder.message.go-to-settings": "設定する",
-  "placeholder.message.no-websites-configured": "Webサイトが設定されていません。",
-  "settings.accounts": "アカウント",
-  "settings.profile": "プロファイル",
-  "settings.websites": "Webサイト",
  "title.add-account": "アカウントの追加",
  "title.add-website": "Webサイトの追加",
  "title.change-password": "パスワード変更",
@ -85,7 +89,5 @@
  "title.edit-account": "アカウントの編集",
  "title.edit-website": "Webサイトの編集",
  "title.share-url": "共有リンク",
-  "title.tracking-code": "トラッキングコード",
-  "tooltip.get-share-url": "共有リンクを取得",
-  "tooltip.get-tracking-code": "トラッキングコードを取得"
+  "title.tracking-code": "トラッキングコード"
 }
--- a/lang/mn-MN.json
+++ b/lang/mn-MN.json
@ -1,30 +1,26 @@
 {
-  "active-users.message": "одоо {x} {x, plural, one {зочин} other {зочин}} байна",
  "button.add-account": "Хэрэглэгч нэмэх",
  "button.add-website": "Веб нэмэх",
  "button.back": "Буцах",
  "button.cancel": "Цуцлах",
  "button.change-password": "Нууц үг солих",
  "button.copy-to-clipboard": "Хуулах",
+  "button.date-range": "Date range",
  "button.delete": "Устгах",
  "button.edit": "Засах",
  "button.login": "Нэвтрэх",
  "button.more": "Цааш",
  "button.refresh": "Refresh",
  "button.save": "Хадгалах",
+  "button.single-day": "Single day",
  "button.view-details": "Дэлгэрүүлж харах",
  "button.websites": "Вебүүд",
-  "device.desktop": "Desktop",
-  "device.laptop": "Laptop",
-  "device.mobile": "Mobile",
-  "device.tablet": "Tablet",
-  "footer.powered-by": "Powered by {name}",
-  "header.nav.dashboard": "Хянах самбар",
-  "header.nav.settings": "Тохиргоо",
+  "label.accounts": "Хэрэглэгчид",
  "label.administrator": "Админ",
  "label.confirm-password": "Шинэ нууц үгээ давтах",
  "label.current-password": "Ашиглаж буй нууц үг",
  "label.custom-range": "Дурын хугацаа",
+  "label.dashboard": "Хянах самбар",
  "label.domain": "Домэйн",
  "label.enable-share-url": "Хуваалцах холбоос идэвхжүүлэх",
  "label.invalid": "Буруу",
@ -37,20 +33,29 @@
  "label.new-password": "Шинэ нууц үг",
  "label.password": "Нууц үг",
  "label.passwords-dont-match": "Нууц үг тохирохгүй байна",
+  "label.profile": "Бүртгэл",
  "label.required": "Шаардлагатай",
+  "label.settings": "Тохиргоо",
  "label.this-month": "Энэ сар",
  "label.this-week": "Энэ долоо хоног",
  "label.this-year": "Энэ жил",
  "label.today": "Өнөөдөр",
  "label.unknown": "Unknown",
  "label.username": "Хэрэглэгчийн нэр",
+  "label.websites": "Вебүүд",
+  "message.active-users": "одоо {x} {x, plural, one {зочин} other {зочин}} байна",
  "message.confirm-delete": "Та {target}-г устгахдаа итгэлтэй байна уу?",
  "message.copied": "Хуулсан!",
  "message.delete-warning": "Үүнтэй холбоотой бүх өгөгдөл устах болно.",
  "message.failure": "Ямар нэг зүйл буруу боллоо.",
+  "message.get-share-url": "Хуваалцах холбоос авах",
+  "message.get-tracking-code": "Мөрдөх код авах",
+  "message.go-to-settings": "Тохиргоо руу очих",
  "message.incorrect-username-password": "Буруу хэрэглэгчийн нэр/нууц үг.",
  "message.no-data-available": "Өгөгдөл алга.",
+  "message.no-websites-configured": "Та ямар нэгэн веб тохируулаагүй байна.",
  "message.page-not-found": "Хуудас олдсонгүй.",
+  "message.powered-by": "Powered by {name}",
  "message.save-success": "Амжилттай хадгаллаа.",
  "message.share-url": "{target}-г нийтэд хуваалцах холбоос.",
  "message.track-stats": "{target} вебийн статистикийг бүртгэхийн тулд доорх кодыг вебийнхээ {head} хэсэгт байрлуулна уу.",
@ -60,6 +65,10 @@
  "metrics.bounce-rate": "Нэг хуудас үзээд гарсан",
  "metrics.browsers": "Хөтөч",
  "metrics.countries": "Улс",
+  "metrics.device.desktop": "Desktop",
+  "metrics.device.laptop": "Laptop",
+  "metrics.device.mobile": "Mobile",
+  "metrics.device.tablet": "Tablet",
  "metrics.devices": "Төхөөрөмж",
  "metrics.events": "Үйлдэл",
  "metrics.filter.combined": "Нэгтгэсэн",
@ -72,11 +81,6 @@
  "metrics.unique-visitors": "Зочид",
  "metrics.views": "Үзсэн",
  "metrics.visitors": "Зочид",
-  "placeholder.message.go-to-settings": "Тохиргоо руу очих",
-  "placeholder.message.no-websites-configured": "Та ямар нэгэн веб тохируулаагүй байна.",
-  "settings.accounts": "Хэрэглэгчид",
-  "settings.profile": "Бүртгэл",
-  "settings.websites": "Вебүүд",
  "title.add-account": "Хэрэглэгч нэмэх",
  "title.add-website": "Веб нэмэх",
  "title.change-password": "Нууц үг солих",
@ -85,7 +89,5 @@
  "title.edit-account": "Хэрэглэгч засах",
  "title.edit-website": "Веб засах",
  "title.share-url": "Хуваалцах холбоос",
-  "title.tracking-code": "Мөрдөх код",
-  "tooltip.get-share-url": "Хуваалцах холбоос авах",
-  "tooltip.get-tracking-code": "Мөрдөх код авах"
+  "title.tracking-code": "Мөрдөх код"
 }
--- a/lang/nl-NL.json
+++ b/lang/nl-NL.json
@ -1,30 +1,26 @@
 {
-  "active-users.message": "{x} actieve {x, plural, one {bezoeker} other {bezoekers}}",
  "button.add-account": "Account toevoegen",
  "button.add-website": "Website toevoegen",
  "button.back": "Terug",
  "button.cancel": "Annuleren",
  "button.change-password": "Wachtwoord wijzigen",
  "button.copy-to-clipboard": "Kopiëer naar klembord",
+  "button.date-range": "Date range",
  "button.delete": "Verwijderen",
  "button.edit": "Bewerken",
  "button.login": "Inloggen",
  "button.more": "Toon meer",
  "button.refresh": "Refresh",
  "button.save": "Opslaan",
+  "button.single-day": "Single day",
  "button.view-details": "Meer details",
  "button.websites": "Websites",
-  "device.desktop": "Desktop",
-  "device.laptop": "Laptop",
-  "device.mobile": "Mobile",
-  "device.tablet": "Tablet",
-  "footer.powered-by": "mogelijk gemaakt door {name}",
-  "header.nav.dashboard": "Dashboard",
-  "header.nav.settings": "Instellingen",
+  "label.accounts": "Accounts",
  "label.administrator": "Administrator",
  "label.confirm-password": "Wachtwoord bevestigen",
  "label.current-password": "Huidig wachtwoord",
  "label.custom-range": "Custom range",
+  "label.dashboard": "Dashboard",
  "label.domain": "Domein",
  "label.enable-share-url": "Sta delen via openbare URL toe",
  "label.invalid": "Ongeldig",
@ -37,20 +33,29 @@
  "label.new-password": "Nieuw wachtwoord",
  "label.password": "Wachtwoord",
  "label.passwords-dont-match": "Wachtwoorden komen niet overeen",
+  "label.profile": "Profiel",
  "label.required": "Verplicht",
+  "label.settings": "Instellingen",
  "label.this-month": "Deze maand",
  "label.this-week": "Deze week",
  "label.this-year": "Dit jaar",
  "label.today": "Vandaag",
  "label.unknown": "Unknown",
  "label.username": "Gebruikersnaam",
+  "label.websites": "Websites",
+  "message.active-users": "{x} actieve {x, plural, one {bezoeker} other {bezoekers}}",
  "message.confirm-delete": "Weet je zeker dat je {target} wilt verwijderen?",
  "message.copied": "Gekopiëerd!",
  "message.delete-warning": "Alle verwante gegezens zullen ook verwijderd worden.",
  "message.failure": "Er is iets misgegaan.",
+  "message.get-share-url": "Openbare URL",
+  "message.get-tracking-code": "Tracking code",
+  "message.go-to-settings": "Naar instellingen",
  "message.incorrect-username-password": "Incorrecte gebruikersnaam/wachtwoord.",
  "message.no-data-available": "Geen gegevens beschikbaar.",
+  "message.no-websites-configured": "Je hebt geen websites ingesteld.",
  "message.page-not-found": "Pagina niet gevonden.",
+  "message.powered-by": "mogelijk gemaakt door {name}",
  "message.save-success": "Opslaan succesvol.",
  "message.share-url": "Met deze URL kan {target} openbaar gedeeld worden.",
  "message.track-stats": "Om statistieken voor {target} bij te houden, plaats je de volgende code in het {head} gedeelte van je website.",
@ -60,6 +65,10 @@
  "metrics.bounce-rate": "Bouncepercentage",
  "metrics.browsers": "Browsers",
  "metrics.countries": "Landen",
+  "metrics.device.desktop": "Desktop",
+  "metrics.device.laptop": "Laptop",
+  "metrics.device.mobile": "Mobile",
+  "metrics.device.tablet": "Tablet",
  "metrics.devices": "Apparaten",
  "metrics.events": "Gebeurtenissen",
  "metrics.filter.combined": "Gecombineerd",
@ -72,11 +81,6 @@
  "metrics.unique-visitors": "Unieke bezoekers",
  "metrics.views": "Weergaven",
  "metrics.visitors": "Bezoekers",
-  "placeholder.message.go-to-settings": "Naar instellingen",
-  "placeholder.message.no-websites-configured": "Je hebt geen websites ingesteld.",
-  "settings.accounts": "Accounts",
-  "settings.profile": "Profiel",
-  "settings.websites": "Websites",
  "title.add-account": "Account toevoegen",
  "title.add-website": "Website toevoegen",
  "title.change-password": "Wachtwoord wijzigen",
@ -85,7 +89,5 @@
  "title.edit-account": "Account bewerken",
  "title.edit-website": "Website bewerken",
  "title.share-url": "URL delen",
-  "title.tracking-code": "Tracking code",
-  "tooltip.get-share-url": "Openbare URL",
-  "tooltip.get-tracking-code": "Tracking code"
+  "title.tracking-code": "Tracking code"
 }
--- a/lang/ru-RU.json
+++ b/lang/ru-RU.json
@ -1,30 +1,26 @@
 {
-  "active-users.message": "{x} текущих посетителей",
  "button.add-account": "Добавить аккаунт",
  "button.add-website": "Добавить сайт",
  "button.back": "Назад",
  "button.cancel": "Отменить",
  "button.change-password": "Изменить пароль",
  "button.copy-to-clipboard": "Скопировать в буфер обмена",
+  "button.date-range": "Date range",
  "button.delete": "Удалить",
  "button.edit": "Редактировать",
  "button.login": "Войти",
  "button.more": "Больше",
  "button.refresh": "Refresh",
  "button.save": "Сохранить",
+  "button.single-day": "Single day",
  "button.view-details": "Посмотреть детали",
  "button.websites": "Сайты",
-  "device.desktop": "Desktop",
-  "device.laptop": "Laptop",
-  "device.mobile": "Mobile",
-  "device.tablet": "Tablet",
-  "footer.powered-by": "на движке {name}",
-  "header.nav.dashboard": "Информационная панель",
-  "header.nav.settings": "Настройки",
+  "label.accounts": "Аккаунты",
  "label.administrator": "Администратор",
  "label.confirm-password": "Подтвердить пароль",
  "label.current-password": "Текущий пароль",
-  "label.custom-range": "Custom range",
+  "label.custom-range": "Другой период",
+  "label.dashboard": "Информационная панель",
  "label.domain": "Домен",
  "label.enable-share-url": "Разрешить делиться ссылкой",
  "label.invalid": "Некорректный",
@ -37,20 +33,29 @@
  "label.new-password": "Новый пароль",
  "label.password": "Пароль",
  "label.passwords-dont-match": "Пароли не совпадают",
+  "label.profile": "Профиль",
  "label.required": "Обязательное",
+  "label.settings": "Настройки",
  "label.this-month": "Этот месяц",
  "label.this-week": "Эта неделя",
  "label.this-year": "Этот год",
  "label.today": "Сегодня",
  "label.unknown": "Unknown",
  "label.username": "Имя пользователя",
+  "label.websites": "Сайты",
+  "message.active-users": "{x} текущих посетителей",
  "message.confirm-delete": "Вы уверены, что хотите удалить {target}?",
  "message.copied": "Скопировано!",
  "message.delete-warning": "Все связанные данные будут также удалены.",
  "message.failure": "Что-то пошло не так.",
+  "message.get-share-url": "Получить публичную ссылку",
+  "message.get-tracking-code": "Получить код отслеживания",
+  "message.go-to-settings": "Перейти к настройкам",
  "message.incorrect-username-password": "Неверное имя пользователя/пароль.",
  "message.no-data-available": "Нет данных.",
+  "message.no-websites-configured": "У вас нет настроенных сайтов.",
  "message.page-not-found": "Страница не найдена.",
+  "message.powered-by": "на движке {name}",
  "message.save-success": "Успешно сохранено.",
  "message.share-url": "Это публичная ссылка для {target}.",
  "message.track-stats": "Чтобы отслеживать статистику для {target}, поместите следующий код в раздел {head} вашего сайта.",
@ -60,6 +65,10 @@
  "metrics.bounce-rate": "Отказы",
  "metrics.browsers": "Браузеры",
  "metrics.countries": "Страны",
+  "metrics.device.desktop": "Desktop",
+  "metrics.device.laptop": "Laptop",
+  "metrics.device.mobile": "Mobile",
+  "metrics.device.tablet": "Tablet",
  "metrics.devices": "Устройства",
  "metrics.events": "События",
  "metrics.filter.combined": "Объединенные",
@ -72,11 +81,6 @@
  "metrics.unique-visitors": "Уникальные посетители",
  "metrics.views": "Просмотры",
  "metrics.visitors": "Посетители",
-  "placeholder.message.go-to-settings": "Перейти к настройкам",
-  "placeholder.message.no-websites-configured": "У вас нет настроенных сайтов.",
-  "settings.accounts": "Аккаунты",
-  "settings.profile": "Профиль",
-  "settings.websites": "Сайты",
  "title.add-account": "Добавить аккаунт",
  "title.add-website": "Добавить сайт",
  "title.change-password": "Изменить пароль",
@ -85,7 +89,5 @@
  "title.edit-account": "Редактировать аккаунт",
  "title.edit-website": "Редактировать сайт",
  "title.share-url": "Поделиться ссылкой",
-  "title.tracking-code": "Код отслеживания",
-  "tooltip.get-share-url": "Получить публичную ссылку",
-  "tooltip.get-tracking-code": "Получить код отслеживания"
+  "title.tracking-code": "Код отслеживания"
 }
--- a/lang/tr-TR.json
+++ b/lang/tr-TR.json
@ -1,30 +1,26 @@
 {
-  "active-users.message": "{x} aktif ziyaretçi",
  "button.add-account": "Yeni Hesap Ekle",
  "button.add-website": "Web sitesi ekle",
  "button.back": "Geri",
  "button.cancel": "İptal",
  "button.change-password": "Şifre değiştir",
  "button.copy-to-clipboard": "Panoya kopyala",
+  "button.date-range": "Date range",
  "button.delete": "Sil",
  "button.edit": "Düzenle",
  "button.login": "Giriş Yap",
  "button.more": "Detaylı göster",
  "button.refresh": "Refresh",
  "button.save": "Kaydet",
+  "button.single-day": "Single day",
  "button.view-details": "Detayı incele",
  "button.websites": "Web siteleri",
-  "device.desktop": "Desktop",
-  "device.laptop": "Laptop",
-  "device.mobile": "Mobile",
-  "device.tablet": "Tablet",
-  "footer.powered-by": "Sağlayıcı: {name}",
-  "header.nav.dashboard": "Kontrol Paneli",
-  "header.nav.settings": "Ayarlar",
+  "label.accounts": "Hesaplar",
  "label.administrator": "Yönetici",
  "label.confirm-password": "Parolayı onayla",
  "label.current-password": "Mevcut parola",
  "label.custom-range": "Custom range",
+  "label.dashboard": "Kontrol Paneli",
  "label.domain": "Alan adı",
  "label.enable-share-url": "Anonim paylaşım URL'i aktif",
  "label.invalid": "Geçeriz",
@ -37,20 +33,29 @@
  "label.new-password": "Yeni parola",
  "label.password": "Parola",
  "label.passwords-dont-match": "Parolalar uyuşmuyor",
+  "label.profile": "Profil",
  "label.required": "Zorunlu alan",
+  "label.settings": "Ayarlar",
  "label.this-month": "Bu ay",
  "label.this-week": "Bu hafta",
  "label.this-year": "Bu yıl",
  "label.today": "Bugün",
  "label.unknown": "Unknown",
  "label.username": "Kullanıcı adı",
+  "label.websites": "Web siteleri",
+  "message.active-users": "{x} aktif ziyaretçi",
  "message.confirm-delete": "{target} kaydını silmek istediğinizden emin misiniz?",
  "message.copied": "Panoya kopyalandı!",
  "message.delete-warning": "İlişkili tüm veriler de  silinecektir.",
  "message.failure": "Bir şeyler ters gitti!",
+  "message.get-share-url": "Paylaşım adresini al",
+  "message.get-tracking-code": "İzleme kodunu al",
+  "message.go-to-settings": "Ayarlara git",
  "message.incorrect-username-password": "Hatalı kullanıcı adı ya da parola.",
  "message.no-data-available": "Henüz hiç veri yok.",
+  "message.no-websites-configured": "Henüz hiç web sitesi tanımlamadınız",
  "message.page-not-found": "Sayfa bulunamadı.",
+  "message.powered-by": "Sağlayıcı: {name}",
  "message.save-success": "Başarıyla kaydedildi.",
  "message.share-url": "{target} için kullanılabilir anonim paylaşım adresidir.",
  "message.track-stats": "{target} alanı adı istatistiklerini takip etmek için, aşağıdaki kodu web sitenizin {head} bloğuna yerleştirin.",
@ -60,6 +65,10 @@
  "metrics.bounce-rate": "Çıkma oranı",
  "metrics.browsers": "Tarayıcılar",
  "metrics.countries": "Ülkeler",
+  "metrics.device.desktop": "Desktop",
+  "metrics.device.laptop": "Laptop",
+  "metrics.device.mobile": "Mobile",
+  "metrics.device.tablet": "Tablet",
  "metrics.devices": "Cihazlar",
  "metrics.events": "Olaylar",
  "metrics.filter.combined": "Birleşik",
@ -72,11 +81,6 @@
  "metrics.unique-visitors": "Tekil kullanıcı",
  "metrics.views": "Görüntüleme",
  "metrics.visitors": "Ziyaretçi",
-  "placeholder.message.go-to-settings": "Ayarlara git",
-  "placeholder.message.no-websites-configured": "Henüz hiç web sitesi tanımlamadınız",
-  "settings.accounts": "Hesaplar",
-  "settings.profile": "Profil",
-  "settings.websites": "Web siteleri",
  "title.add-account": "Hesap ekle",
  "title.add-website": "Web sitesi ekle",
  "title.change-password": "Şifre değiştir",
@ -85,7 +89,5 @@
  "title.edit-account": "Hesabı düzenle",
  "title.edit-website": "Web sitesini düzenle",
  "title.share-url": "Paylaşım adresi",
-  "title.tracking-code": "İzleme kodu",
-  "tooltip.get-share-url": "Paylaşım adresini al",
-  "tooltip.get-tracking-code": "İzleme kodunu al"
+  "title.tracking-code": "İzleme kodu"
 }
--- a/lang/zh-CN.json
+++ b/lang/zh-CN.json
@ -1,30 +1,26 @@
 {
-  "active-users.message": "当前在线 {x} 人",
  "button.add-account": "添加账户",
  "button.add-website": "添加网站",
  "button.back": "返回",
  "button.cancel": "取消",
  "button.change-password": "更新密码",
  "button.copy-to-clipboard": "复制",
+  "button.date-range": "多日",
  "button.delete": "删除",
  "button.edit": "编辑",
  "button.login": "登录",
  "button.more": "更多",
-  "button.refresh": "Refresh",
+  "button.refresh": "刷新",
  "button.save": "保存",
+  "button.single-day": "单日",
  "button.view-details": "查看更多",
  "button.websites": "网站",
-  "device.desktop": "Desktop",
-  "device.laptop": "Laptop",
-  "device.mobile": "Mobile",
-  "device.tablet": "Tablet",
-  "footer.powered-by": "运行 {name}",
-  "header.nav.dashboard": "仪表板",
-  "header.nav.settings": "设置",
+  "label.accounts": "账户",
  "label.administrator": "管理员",
  "label.confirm-password": "确认密码",
  "label.current-password": "目前密码",
-  "label.custom-range": "Custom range",
+  "label.custom-range": "自定义时间段",
+  "label.dashboard": "仪表板",
  "label.domain": "域名",
  "label.enable-share-url": "激活共享链接",
  "label.invalid": "输入无效",
@ -37,20 +33,29 @@
  "label.new-password": "新密码",
  "label.password": "密码",
  "label.passwords-dont-match": "密码不一致",
+  "label.profile": "个人资料",
  "label.required": "必填",
+  "label.settings": "设置",
  "label.this-month": "本月",
  "label.this-week": "本周",
  "label.this-year": "今年",
  "label.today": "今天",
-  "label.unknown": "Unknown",
+  "label.unknown": "未知",
  "label.username": "用户名",
+  "label.websites": "网站",
+  "message.active-users": "当前在线 {x} 人",
  "message.confirm-delete": "你确定要删除{target}吗?",
  "message.copied": "复制成功!",
  "message.delete-warning": "所有相关数据将会被删除.",
  "message.failure": "出现错误.",
+  "message.get-share-url": "获得共享链接",
+  "message.get-tracking-code": "获得跟踪代码",
+  "message.go-to-settings": "去设置",
  "message.incorrect-username-password": "用户名密码不正确.",
  "message.no-data-available": "无可用数据.",
+  "message.no-websites-configured": "你还没有设置任何网站.",
  "message.page-not-found": "网页未找到.",
+  "message.powered-by": "运行 {name}",
  "message.save-success": "成功保存.",
  "message.share-url": "这是 {target} 的共享链接.",
  "message.track-stats": "把以下代码放到你的网站的{head}部分来收集{target}的数据.",
@ -60,6 +65,10 @@
  "metrics.bounce-rate": "跳出率",
  "metrics.browsers": "浏览器",
  "metrics.countries": "国家",
+  "metrics.device.desktop": "台式机",
+  "metrics.device.laptop": "笔记本",
+  "metrics.device.mobile": "手机",
+  "metrics.device.tablet": "平板",
  "metrics.devices": "设备",
  "metrics.events": "行为类别",
  "metrics.filter.combined": "总和",
@ -72,11 +81,6 @@
  "metrics.unique-visitors": "独立访客",
  "metrics.views": "页面流量",
  "metrics.visitors": "独立访客",
-  "placeholder.message.go-to-settings": "去设置",
-  "placeholder.message.no-websites-configured": "你还没有设置任何网站.",
-  "settings.accounts": "账户",
-  "settings.profile": "个人资料",
-  "settings.websites": "网站",
  "title.add-account": "添加账户",
  "title.add-website": "添加网站",
  "title.change-password": "更新密码",
@ -85,7 +89,5 @@
  "title.edit-account": "编辑账户",
  "title.edit-website": "编辑网站",
  "title.share-url": "共享链接",
-  "title.tracking-code": "跟踪代码",
-  "tooltip.get-share-url": "获得共享链接",
-  "tooltip.get-tracking-code": "获得跟踪代码"
+  "title.tracking-code": "跟踪代码"
 }
--- a/lib/auth.js
+++ b/lib/auth.js
@ -1,9 +1,49 @@
 import { parse } from 'cookie';
-import { parseSecureToken } from './crypto';
+import { parseSecureToken, parseToken } from './crypto';
 import { AUTH_COOKIE_NAME } from './constants';
+import { getWebsiteById } from './queries';

-export async function verifyAuthToken(req) {
+export async function getAuthToken(req) {
  const token = parse(req.headers.cookie || '')[AUTH_COOKIE_NAME];

  return parseSecureToken(token);
 }
+
+export async function isValidToken(token, validation) {
+  try {
+    const result = await parseToken(token);
+
+    if (typeof validation === 'object') {
+      return !Object.keys(validation).find(key => result[key] !== validation[key]);
+    } else if (typeof validation === 'function') {
+      return validation(result);
+    }
+  } catch (e) {
+    return false;
+  }
+
+  return false;
+}
+
+export async function allowQuery(req, skipToken) {
+  const { id, token } = req.query;
+  const websiteId = +id;
+
+  const website = await getWebsiteById(websiteId);
+
+  if (website) {
+    if (token && !skipToken) {
+      return isValidToken(token, { website_id: websiteId });
+    }
+
+    const authToken = await getAuthToken(req);
+
+    if (authToken) {
+      const { user_id, is_admin } = authToken;
+
+      return is_admin || website.user_id === user_id;
+    }
+  }
+
+  return false;
+}
--- a/lib/crypto.js
+++ b/lib/crypto.js
@ -27,7 +27,7 @@ export function uuid(...args) {
  return v5(args.join(''), salt());
 }

-export function isValidId(s) {
+export function isValidUuid(s) {
  return validate(s);
 }

--- a/lib/date.js
+++ b/lib/date.js
@ -89,7 +89,7 @@ export function getDateRange(value) {

 export function getDateRangeValues(startDate, endDate) {
  let unit = 'year';
-  if (differenceInHours(endDate, startDate) <= 72) {
+  if (differenceInHours(endDate, startDate) <= 48) {
    unit = 'hour';
  } else if (differenceInCalendarDays(endDate, startDate) <= 90) {
    unit = 'day';
--- a/lib/filters.js
+++ b/lib/filters.js
@ -1,6 +1,6 @@
 import firstBy from 'thenby';
 import { BROWSERS, ISO_COUNTRIES } from './constants';
-import { removeTrailingSlash, getDomainName } from './url';
+import { removeTrailingSlash, removeWWW, getDomainName } from './url';

 export const urlFilter = (data, { raw }) => {
  const isValidUrl = url => {
@ -55,6 +55,7 @@ export const urlFilter = (data, { raw }) => {
 export const refFilter = (data, { domain, domainOnly, raw }) => {
  const domainName = getDomainName(domain);
  const regex = new RegExp(`http[s]?://${domainName}`);
+  const links = {};

  const isValidRef = ref => {
    return ref !== '' && !ref.startsWith('/') && !ref.startsWith('#');
@ -85,7 +86,7 @@ export const refFilter = (data, { domain, domainOnly, raw }) => {
        const ref = searchParams.get('ref');
        const query = ref ? `?ref=${ref}` : '';

-        return `${origin}${path}${query}`;
+        return removeTrailingSlash(`${removeWWW(hostname)}${path}`) + query;
      }

      return null;
@ -101,6 +102,10 @@ export const refFilter = (data, { domain, domainOnly, raw }) => {

    const url = cleanUrl(x);

+    if (!domainOnly && !raw) {
+      links[url] = x;
+    }
+
    if (url) {
      if (!obj[url]) {
        obj[url] = y;
@ -113,7 +118,7 @@ export const refFilter = (data, { domain, domainOnly, raw }) => {
  }, {});

  return Object.keys(map)
-    .map(key => ({ x: key, y: map[key] }))
+    .map(key => ({ x: key, y: map[key], w: links[key] }))
    .sort(firstBy('y', -1).thenBy('x'));
 };

--- a/lib/lang.js
+++ b/lib/lang.js
@ -38,7 +38,7 @@ export const dateLocales = {
 };

 export const menuOptions = [
-  { label: 'English', value: 'en', display: 'EN' },
+  { label: 'English', value: 'en-US', display: 'EN' },
  { label: '中文', value: 'zh-CN', display: 'CN' },
  { label: 'Deutsch', value: 'de-DE', display: 'DE' },
  { label: 'Español', value: 'es-MX', display: 'ES' },
--- a/lib/middleware.js
+++ b/lib/middleware.js
@ -1,6 +1,6 @@
 import cors from 'cors';
-import { verifySession } from './session';
-import { verifyAuthToken } from './auth';
+import { getSession } from './session';
+import { getAuthToken } from './auth';
 import { unauthorized, badRequest, serverError } from './response';

 export function use(middleware) {
@ -21,7 +21,7 @@ export const useSession = use(async (req, res, next) => {
  let session;

  try {
-    session = await verifySession(req);
+    session = await getSession(req);
  } catch (e) {
    return serverError(res, e.message);
  }
@ -35,13 +35,7 @@ export const useSession = use(async (req, res, next) => {
 });

 export const useAuth = use(async (req, res, next) => {
-  let token;
-
-  try {
-    token = await verifyAuthToken(req);
-  } catch (e) {
-    return serverError(res, e.message);
-  }
+  const token = await getAuthToken(req);

  if (!token) {
    return unauthorized(res);
--- a/lib/session.js
+++ b/lib/session.js
@ -1,8 +1,8 @@
 import { getWebsiteByUuid, getSessionByUuid, createSession } from 'lib/queries';
 import { getClientInfo } from 'lib/request';
-import { uuid, isValidId } from 'lib/crypto';
+import { uuid, isValidUuid } from 'lib/crypto';

-export async function verifySession(req) {
+export async function getSession(req) {
  const { payload } = req.body;

  if (!payload) {
@ -11,7 +11,7 @@ export async function verifySession(req) {

  const { website: website_uuid, hostname, screen, language } = payload;

-  if (!isValidId(website_uuid)) {
+  if (!isValidUuid(website_uuid)) {
    throw new Error(`Invalid website: ${website_uuid}`);
  }

--- a/lib/url.js
+++ b/lib/url.js
@ -2,6 +2,10 @@ export function removeTrailingSlash(url) {
  return url && url.length > 1 && url.endsWith('/') ? url.slice(0, -1) : url;
 }

+export function removeWWW(url) {
+  return url && url.length > 1 && url.startsWith('www.') ? url.slice(4) : url;
+}
+
 export function getDomainName(str) {
  try {
    return new URL(str).hostname;
--- a/lib/web.js
+++ b/lib/web.js
@ -19,7 +19,7 @@ export const apiRequest = (method, url, body) =>
    return null;
  });

-function parseQuery(url, params = {}) {
+const parseQuery = (url, params = {}) => {
  const query = Object.keys(params).reduce((values, key) => {
    if (params[key] !== undefined) {
      return values.concat(`${key}=${encodeURIComponent(params[key])}`);
@ -27,7 +27,7 @@ function parseQuery(url, params = {}) {
    return values;
  }, []);
  return query.length ? `${url}?${query.join('&')}` : url;
-}
+};

 export const get = (url, params) => apiRequest('get', parseQuery(url, params));

@ -62,3 +62,14 @@ export const doNotTrack = () => {

  return dnt === true || dnt === 1 || dnt === 'yes' || dnt === '1';
 };
+
+export const setItem = (key, data, session) => {
+  if (typeof window !== 'undefined') {
+    (session ? sessionStorage : localStorage).setItem(key, JSON.stringify(data));
+  }
+};
+
+export const getItem = (key, session) =>
+  typeof window !== 'undefined'
+    ? JSON.parse((session ? sessionStorage : localStorage).getItem(key))
+    : null;
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "umami",
-  "version": "0.35.0",
+  "version": "0.38.0",
  "description": "A simple, fast, website analytics alternative to Google Analytics. ",
  "author": "Mike Cao <mike@mikecao.com>",
  "license": "MIT",
--- a/pages/_app.js
+++ b/pages/_app.js
@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { IntlProvider } from 'react-intl';
 import { Provider } from 'react-redux';
 import { useStore } from 'redux/store';
@ -9,17 +9,10 @@ import 'styles/bootstrap-grid.css';
 import 'styles/index.css';

 const Intl = ({ children }) => {
-  const [locale, setLocale] = useLocale();
+  const [locale] = useLocale();

  const Wrapper = ({ children }) => <span className={locale}>{children}</span>;

-  useEffect(() => {
-    const saved = localStorage.getItem('locale');
-    if (saved) {
-      setLocale(saved);
-    }
-  });
-
  return (
    <IntlProvider locale={locale} messages={messages[locale]} textComponent={Wrapper}>
      {children}
--- a/pages/api/account/[id].js
+++ b/pages/api/account/[id].js
@ -9,7 +9,7 @@ export default async (req, res) => {
  const { id } = req.query;
  const user_id = +id;

-  if (is_admin) {
+  if (!is_admin) {
    return unauthorized(res);
  }

--- a/pages/api/accounts.js
+++ b/pages/api/accounts.js
@ -5,16 +5,16 @@ import { ok, unauthorized, methodNotAllowed } from 'lib/response';
 export default async (req, res) => {
  await useAuth(req, res);

-  const { is_admin: current_user_is_admin } = req.auth;
+  const { is_admin } = req.auth;
+
+  if (!is_admin) {
+    return unauthorized(res);
+  }

  if (req.method === 'GET') {
-    if (current_user_is_admin) {
-      const accounts = await getAccounts();
+    const accounts = await getAccounts();

-      return ok(res, accounts);
-    }
-
-    return unauthorized(res);
+    return ok(res, accounts);
  }

  return methodNotAllowed(res);
--- a/pages/api/share/[id].js
+++ b/pages/api/share/[id].js
@ -1,5 +1,6 @@
 import { getWebsiteByShareId } from 'lib/queries';
 import { ok, notFound, methodNotAllowed } from 'lib/response';
+import { createToken } from 'lib/crypto';

 export default async (req, res) => {
  const { id } = req.query;
@ -8,7 +9,10 @@ export default async (req, res) => {
    const website = await getWebsiteByShareId(id);

    if (website) {
-      return ok(res, website);
+      const websiteId = website.website_id;
+      const token = await createToken({ website_id: websiteId });
+
+      return ok(res, { websiteId, token });
    }

    return notFound(res);
--- a/pages/api/website/[id].js
+++ b/pages/api/website/[id].js
@ -1,31 +0,0 @@
-import { deleteWebsite, getWebsiteById } from 'lib/queries';
-import { useAuth } from 'lib/middleware';
-import { methodNotAllowed, ok, unauthorized } from 'lib/response';
-
-export default async (req, res) => {
-  const { id } = req.query;
-  const website_id = +id;
-
-  if (req.method === 'GET') {
-    const website = await getWebsiteById(website_id);
-
-    return ok(res, website);
-  }
-
-  if (req.method === 'DELETE') {
-    await useAuth(req, res);
-    const { user_id, is_admin } = req.auth;
-
-    const website = await getWebsiteById(website_id);
-
-    if (website.user_id === user_id || is_admin) {
-      await deleteWebsite(website_id);
-
-      return ok(res);
-    }
-
-    return unauthorized(res);
-  }
-
-  return methodNotAllowed(res);
-};
--- a/pages/api/website/[id]/active.js
+++ b/pages/api/website/[id]/active.js
@ -1,12 +1,18 @@
 import { getActiveVisitors } from 'lib/queries';
-import { methodNotAllowed, ok } from 'lib/response';
+import { methodNotAllowed, ok, unauthorized } from 'lib/response';
+import { allowQuery } from 'lib/auth';

 export default async (req, res) => {
  if (req.method === 'GET') {
-    const { id } = req.query;
-    const website_id = +id;
+    if (!(await allowQuery(req))) {
+      return unauthorized(res);
+    }

-    const result = await getActiveVisitors(website_id);
+    const { id } = req.query;
+
+    const websiteId = +id;
+
+    const result = await getActiveVisitors(websiteId);

    return ok(res, result);
  }
--- a/pages/api/website/[id]/events.js
+++ b/pages/api/website/[id]/events.js
@ -1,11 +1,16 @@
 import moment from 'moment-timezone';
 import { getEvents } from 'lib/queries';
-import { ok, badRequest, methodNotAllowed } from 'lib/response';
+import { ok, badRequest, methodNotAllowed, unauthorized } from 'lib/response';
+import { allowQuery } from 'lib/auth';

 const unitTypes = ['year', 'month', 'hour', 'day'];

 export default async (req, res) => {
  if (req.method === 'GET') {
+    if (!(await allowQuery(req))) {
+      return unauthorized(res);
+    }
+
    const { id, start_at, end_at, unit, tz } = req.query;

    if (!moment.tz.zone(tz) || !unitTypes.includes(unit)) {
--- a/pages/api/website/[id]/index.js
+++ b/pages/api/website/[id]/index.js
@ -0,0 +1,31 @@
+import { deleteWebsite, getWebsiteById } from 'lib/queries';
+import { methodNotAllowed, ok, unauthorized } from 'lib/response';
+import { allowQuery } from 'lib/auth';
+
+export default async (req, res) => {
+  const { id } = req.query;
+
+  const websiteId = +id;
+
+  if (req.method === 'GET') {
+    if (!(await allowQuery(req))) {
+      return unauthorized(res);
+    }
+
+    const website = await getWebsiteById(websiteId);
+
+    return ok(res, website);
+  }
+
+  if (req.method === 'DELETE') {
+    if (!(await allowQuery(req, true))) {
+      return unauthorized(res);
+    }
+
+    await deleteWebsite(websiteId);
+
+    return ok(res);
+  }
+
+  return methodNotAllowed(res);
+};
--- a/pages/api/website/[id]/metrics.js
+++ b/pages/api/website/[id]/metrics.js
@ -1,9 +1,15 @@
 import { getMetrics } from 'lib/queries';
-import { methodNotAllowed, ok } from 'lib/response';
+import { methodNotAllowed, ok, unauthorized } from 'lib/response';
+import { allowQuery } from 'lib/auth';

 export default async (req, res) => {
  if (req.method === 'GET') {
+    if (!(await allowQuery(req))) {
+      return unauthorized(res);
+    }
+
    const { id, start_at, end_at } = req.query;
+
    const websiteId = +id;
    const startDate = new Date(+start_at);
    const endDate = new Date(+end_at);
--- a/pages/api/website/[id]/pageviews.js
+++ b/pages/api/website/[id]/pageviews.js
@ -1,21 +1,26 @@
 import moment from 'moment-timezone';
 import { getPageviews } from 'lib/queries';
-import { ok, badRequest, methodNotAllowed } from 'lib/response';
+import { ok, badRequest, methodNotAllowed, unauthorized } from 'lib/response';
+import { allowQuery } from 'lib/auth';

 const unitTypes = ['year', 'month', 'hour', 'day'];

 export default async (req, res) => {
  if (req.method === 'GET') {
-    const { id, start_at, end_at, unit, tz } = req.query;
-
-    if (!moment.tz.zone(tz) || !unitTypes.includes(unit)) {
-      return badRequest(res);
+    if (!(await allowQuery(req))) {
+      return unauthorized(res);
    }

+    const { id, start_at, end_at, unit, tz } = req.query;
+
    const websiteId = +id;
    const startDate = new Date(+start_at);
    const endDate = new Date(+end_at);

+    if (!moment.tz.zone(tz) || !unitTypes.includes(unit)) {
+      return badRequest(res);
+    }
+
    const [pageviews, uniques] = await Promise.all([
      getPageviews(websiteId, startDate, endDate, tz, unit, '*'),
      getPageviews(websiteId, startDate, endDate, tz, unit, 'distinct session_id'),
--- a/pages/api/website/[id]/rankings.js
+++ b/pages/api/website/[id]/rankings.js
@ -1,6 +1,7 @@
 import { getRankings } from 'lib/queries';
-import { ok, badRequest, methodNotAllowed } from 'lib/response';
+import { ok, badRequest, methodNotAllowed, unauthorized } from 'lib/response';
 import { DOMAIN_REGEX } from 'lib/constants';
+import { allowQuery } from 'lib/auth';

 const sessionColumns = ['browser', 'os', 'device', 'country'];
 const pageviewColumns = ['url', 'referrer'];
@ -26,7 +27,12 @@ function getColumn(type) {

 export default async (req, res) => {
  if (req.method === 'GET') {
+    if (!(await allowQuery(req))) {
+      return unauthorized(res);
+    }
+
    const { id, type, start_at, end_at, domain } = req.query;
+
    const websiteId = +id;
    const startDate = new Date(+start_at);
    const endDate = new Date(+end_at);
--- a/pages/api/website/index.js
+++ b/pages/api/website/index.js
@ -15,22 +15,21 @@ export default async (req, res) => {
    if (website_id) {
      const website = await getWebsiteById(website_id);

-      if (website.user_id === user_id || is_admin) {
-        let { share_id } = website;
-        console.log('exising id', share_id, website);
-
-        if (enable_share_url) {
-          share_id = share_id ? share_id : getRandomChars(8);
-        } else {
-          share_id = null;
-        }
-
-        await updateWebsite(website_id, { name, domain, share_id });
-
-        return ok(res);
+      if (website.user_id !== user_id && !is_admin) {
+        return unauthorized(res);
      }

-      return unauthorized(res);
+      let { share_id } = website;
+
+      if (enable_share_url) {
+        share_id = share_id ? share_id : getRandomChars(8);
+      } else {
+        share_id = null;
+      }
+
+      await updateWebsite(website_id, { name, domain, share_id });
+
+      return ok(res);
    } else {
      const website_uuid = uuid();
      const share_id = enable_share_url ? getRandomChars(8) : null;
--- a/pages/api/websites.js
+++ b/pages/api/websites.js
@ -5,15 +5,16 @@ import { ok, methodNotAllowed, unauthorized } from 'lib/response';
 export default async (req, res) => {
  await useAuth(req, res);

-  const { user_id, is_admin } = req.auth;
-  const { userId } = req.query;
+  const { user_id: current_user_id, is_admin } = req.auth;
+  const { user_id } = req.query;
+  const userId = +user_id;

  if (req.method === 'GET') {
-    if (userId && !is_admin) {
+    if (userId && userId !== current_user_id && !is_admin) {
      return unauthorized(res);
    }

-    const websites = await getUserWebsites(+userId || user_id);
+    const websites = await getUserWebsites(userId || current_user_id);

    return ok(res, websites);
  }
--- a/pages/settings/accounts.js
+++ b/pages/settings/accounts.js
@ -0,0 +1,3 @@
+import Index from './index';
+
+export default Index;
--- a/pages/settings/index.js
+++ b/pages/settings/index.js
--- a/pages/settings/profile.js
+++ b/pages/settings/profile.js
@ -0,0 +1,3 @@
+import Index from './index';
+
+export default Index;
--- a/pages/share/[...id].js
+++ b/pages/share/[...id].js
@ -14,9 +14,11 @@ export default function SharePage() {
    return null;
  }

+  const { websiteId, token } = data;
+
  return (
    <Layout>
-      <WebsiteDetails websiteId={data.website_id} />
+      <WebsiteDetails websiteId={websiteId} token={token} />
    </Layout>
  );
 }
--- a/redux/actions/app.js
+++ b/redux/actions/app.js
@ -1,8 +1,9 @@
 import { createSlice } from '@reduxjs/toolkit';
+import { getItem } from 'lib/web';

 const app = createSlice({
  name: 'app',
-  initialState: { locale: 'en-US' },
+  initialState: { locale: getItem('umami.locale') || 'en-US' },
  reducers: {
    updateApp(state, action) {
      state = action.payload;
--- a/styles/index.css
+++ b/styles/index.css
@ -36,17 +36,6 @@ h6 {
  font-weight: 400;
 }

-#__next {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-}
-
-#__modals {
-  z-index: 10;
-}
-
 button,
 input,
 select {
@ -87,16 +76,28 @@ label:empty {

 dt {
  font-weight: 600;
+  margin: 0 0 5px 0;
 }

 dd {
-  margin: 0 0 10px 0;
+  margin: 0 0 30px 0;
 }

 main {
  flex: 1;
 }

+#__next {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+
+#__modals {
+  z-index: 10;
+}
+
 .container {
  padding: 0;
 }