Allow admins to view account websites.

assets/list-ul.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M48 368a48 48 0 1 0 48 48 48 48 0 0 0-48-48zm0-160a48 48 0 1 0 48 48 48 48 0 0 0-48-48zm0-160a48 48 0 1 0 48 48 48 48 0 0 0-48-48zm448 24H176a16 16 0 0 0-16 16v16a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16V88a16 16 0 0 0-16-16zm0 160H176a16 16 0 0 0-16 16v16a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-16a16 16 0 0 0-16-16zm0 160H176a16 16 0 0 0-16 16v16a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-16a16 16 0 0 0-16-16z"/></svg>

components/WebsiteDetails.js

@@ -28,6 +28,7 @@ export default function WebsiteDetails({ websiteId }) {
 
   const BackButton = () => (
     <Button
+      key="back-button"
       className={styles.backButton}
       icon={<Arrow />}
       size="xsmall"

components/WebsiteList.js

@@ -9,9 +9,9 @@ import useFetch from 'hooks/useFetch';
 import Arrow from 'assets/arrow-right.svg';
 import styles from './WebsiteList.module.css';
 
-export default function WebsiteList() {
+export default function WebsiteList({ userId }) {
   const router = useRouter();
-  const { data } = useFetch('/api/websites');
+  const { data } = useFetch('/api/websites', { userId });
 
   if (!data) {
     return null;

components/metrics/BarChart.js

@@ -64,12 +64,6 @@ export default function BarChart({
     } else {
       const [label, value] = body[0].lines[0].split(':');
 
-      console.log(
-        +title[0],
-        new Date(+title[0]),
-        dateFormat(new Date(+title[0]), 'EEE MMMM d yyyy', locale),
-      );
-
       setTooltip({
         title: dateFormat(new Date(+title[0]), 'EEE MMMM d yyyy', locale),
         value,

components/settings/AccountSettings.js

@@ -1,10 +1,13 @@
 import React, { useState } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { useRouter } from 'next/router';
 import classNames from 'classnames';
 import PageHeader from 'components/layout/PageHeader';
 import Button from 'components/common/Button';
 import Icon from 'components/common/Icon';
 import Table from 'components/common/Table';
 import Modal from 'components/common/Modal';
+import Toast from 'components/common/Toast';
 import AccountEditForm from 'components/forms/AccountEditForm';
 import ButtonLayout from 'components/layout/ButtonLayout';
 import DeleteForm from 'components/forms/DeleteForm';
@@ -13,11 +16,11 @@ import Pen from 'assets/pen.svg';
 import Plus from 'assets/plus.svg';
 import Trash from 'assets/trash.svg';
 import Check from 'assets/check.svg';
+import List from 'assets/list-ul.svg';
 import styles from './AccountSettings.module.css';
-import Toast from '../common/Toast';
-import { FormattedMessage } from 'react-intl';
 
 export default function AccountSettings() {
+  const router = useRouter();
   const [addAccount, setAddAccount] = useState();
   const [editAccount, setEditAccount] = useState();
   const [deleteAccount, setDeleteAccount] = useState();
@@ -30,6 +33,13 @@ export default function AccountSettings() {
   const Buttons = row =>
     row.username !== 'admin' ? (
       <ButtonLayout>
+        <Button
+          icon={<List />}
+          size="small"
+          tooltip={<FormattedMessage id="button.websites" defaultMessage="Websites" />}
+          tooltipId={`button-websites-${row.username}`}
+          onClick={() => router.push(`/dashboard/${row.user_id}/${row.username}`)}
+        />
         <Button icon={<Pen />} size="small" onClick={() => setEditAccount(row)}>
           <div>
             <FormattedMessage id="button.edit" defaultMessage="Edit" />
@@ -51,11 +61,12 @@ export default function AccountSettings() {
     },
     {
       key: 'is_admin',
-      label: <FormattedMessage id="label.adminsitrator" defaultMessage="Administrator" />,
+      label: <FormattedMessage id="label.administrator" defaultMessage="Administrator" />,
       className: 'col-6 col-md-4',
       render: Checkmark,
     },
     {
+      key: 'actions',
       className: classNames(styles.buttons, 'col-12 col-md-4 pt-2 pt-md-0'),
       render: Buttons,
     },

lang/de-DE.json

@@ -38,6 +38,9 @@
   "button.view-details": {
     "defaultMessage": "Details anzeigen"
   },
+  "button.websites": {
+    "defaultMessage": "Webseiten"
+  },
   "footer.powered-by": {
     "defaultMessage": "Powered by"
   },

lang/en.json

@@ -38,6 +38,9 @@
   "button.view-details": {
     "defaultMessage": "View details"
   },
+  "button.websites": {
+    "defaultMessage": "Websites"
+  },
   "footer.powered-by": {
     "defaultMessage": "Powered by"
   },
@@ -128,6 +131,9 @@
   "message.no-data-available": {
     "defaultMessage": "No data available."
   },
+  "message.page-not-found": {
+    "defaultMessage": "Page not found"
+  },
   "message.save-success": {
     "defaultMessage": "Saved successfully."
   },

lang/nl-NL.json

@@ -38,6 +38,9 @@
   "button.view-details": {
     "defaultMessage": "Meer details"
   },
+  "button.websites": {
+    "defaultMessage": "Websites"
+  },
   "footer.powered-by": {
     "defaultMessage": "mogelijk gemaakt door"
   },

lang/ru-RU.json

@@ -38,6 +38,9 @@
   "button.view-details": {
     "defaultMessage": "Посмотреть детали"
   },
+  "button.websites": {
+    "defaultMessage": "Сайты"
+  },
   "footer.powered-by": {
     "defaultMessage": "на движке"
   },

lang/tr-TR.json

@@ -38,6 +38,9 @@
   "button.view-details": {
     "defaultMessage": "Detayı incele"
   },
+  "button.websites": {
+    "defaultMessage": "Web siteleri"
+  },
   "footer.powered-by": {
     "defaultMessage": "Sağlayıcı:"
   },

lang/zh-CN.json

@@ -38,6 +38,9 @@
   "button.view-details": {
     "defaultMessage": "查看更多"
   },
+  "button.websites": {
+    "defaultMessage": "网站"
+  },
   "footer.powered-by": {
     "defaultMessage": "运行"
   },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "umami",
-  "version": "0.28.0",
+  "version": "0.29.0",
   "description": "A simple, fast, website analytics alternative to Google Analytics. ",
   "author": "Mike Cao <mike@mikecao.com>",
   "license": "MIT",

pages/404.js

@@ -1,11 +1,14 @@
 import React from 'react';
 import Layout from 'components/layout/Layout';
+import { FormattedMessage } from 'react-intl';
 
 export default function Custom404() {
   return (
     <Layout>
       <div className="row justify-content-center">
-        <h1>oops! page not found</h1>
+        <h1>
+          <FormattedMessage id="message.page-not-found" defaultMessage="Page not found" />
+        </h1>
       </div>
     </Layout>
   );

pages/account.js

@@ -1,18 +0,0 @@
-import React from 'react';
-import Layout from 'components/layout/Layout';
-import AccountSettings from 'components/settings/AccountSettings';
-import useRequireLogin from 'hooks/useRequireLogin';
-
-export default function AccountPage() {
-  const { loading } = useRequireLogin();
-
-  if (loading) {
-    return null;
-  }
-
-  return (
-    <Layout>
-      <AccountSettings />
-    </Layout>
-  );
-}

pages/api/websites.js

@@ -1,14 +1,19 @@
 import { getUserWebsites } from 'lib/queries';
 import { useAuth } from 'lib/middleware';
-import { ok, methodNotAllowed } from 'lib/response';
+import { ok, methodNotAllowed, unauthorized } from 'lib/response';
 
 export default async (req, res) => {
   await useAuth(req, res);
 
-  const { user_id } = req.auth;
+  const { user_id, is_admin } = req.auth;
+  const { userId } = req.query;
 
   if (req.method === 'GET') {
-    const websites = await getUserWebsites(user_id);
+    if (userId && !is_admin) {
+      return unauthorized(res);
+    }
+
+    const websites = await getUserWebsites(+userId || user_id);
 
     return ok(res, websites);
   }

pages/dashboard/[[...id]].js

@@ -1,10 +1,14 @@
 import React from 'react';
+import { useRouter } from 'next/router';
 import Layout from 'components/layout/Layout';
 import WebsiteList from 'components/WebsiteList';
 import useRequireLogin from 'hooks/useRequireLogin';
 
 export default function DashboardPage() {
   const { loading } = useRequireLogin();
+  const router = useRouter();
+  const { id } = router.query;
+  const userId = id?.[0];
 
   if (loading) {
     return null;
@@ -12,7 +16,7 @@ export default function DashboardPage() {
 
   return (
     <Layout>
-      <WebsiteList />
+      <WebsiteList userId={userId} />
     </Layout>
   );
 }